:root { --night: #07111d; --paper: #f7f2e8; --spain-red: #aa151b; --spain-yellow: #f1bf00; --gold: #f0c463; --line: rgba(255,255,255,.24); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: white; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.alt-skip { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .75rem 1rem; background: white; color: #07111d; }
.alt-skip:focus { top: 1rem; }
.alt-header { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: clamp(1.1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 3rem); pointer-events: none; }
.alt-brand, .alt-tools { pointer-events: auto; }
.alt-brand { display: inline-flex; align-items: center; gap: .7rem; flex: 0 0 auto; color: var(--night); text-decoration: none; }
.alt-brand-flag { display: inline-block; width: 2.35rem; aspect-ratio: 3 / 2; flex: 0 0 auto; border: 1px solid rgba(7,17,29,.28); border-radius: .12rem; background: linear-gradient(to bottom, var(--spain-red) 0 25%, var(--spain-yellow) 25% 75%, var(--spain-red) 75% 100%); box-shadow: 0 2px 7px rgba(7,17,29,.16); }
.alt-brand-name { display: grid; gap: .02rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.15vw, 1.9rem); font-weight: 700; line-height: .86; letter-spacing: -.045em; }
.alt-brand-name strong { font-weight: 700; }
.alt-brand-name small { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .43em; font-weight: 800; letter-spacing: .22em; line-height: 1.35; text-transform: uppercase; }
.alt-tools { display: flex; align-items: center; gap: .65rem; }
.alt-tools a { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(10px); background: rgba(7,17,29,.22); }
.alt-tools a[aria-current="page"] { background: white; color: var(--night); }
.alt-portal { min-height: 100svh; display: grid; grid-template-columns: minmax(15rem, 22vw) 1fr; }
.alt-intro { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding: clamp(7rem, 11vw, 9rem) clamp(1.4rem, 3vw, 3.25rem) clamp(2rem, 4vw, 3rem); background: var(--paper); color: var(--night); }
.alt-intro-top { margin: 0 0 auto; }
.alt-kicker { margin: 0; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.alt-language { display: flex; gap: .45rem; margin-top: 1rem; }
.alt-language a { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.25rem; padding: .35rem .7rem; border: 1px solid rgba(7,17,29,.28); border-radius: 999px; color: var(--night); text-decoration: none; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.alt-language a[aria-current="page"] { background: var(--night); color: white; }
.alt-intro h1 { max-width: 7ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.7rem, 6.7vw, 8rem); font-weight: 500; line-height: .82; letter-spacing: -.075em; }
.alt-intro h1 em { color: var(--spain-red); font-weight: 400; }
.alt-intro-copy { max-width: 20rem; margin: 2rem 0 0; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.55; }
.alt-signature { margin-top: 1.4rem; font-size: .77rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.alt-intro-contact { display: grid; gap: .55rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(7,17,29,.18); }
.alt-intro-contact .alt-contact-button { justify-self: start; margin-bottom: .25rem; padding: .7rem 1rem; border-radius: 999px; background: var(--spain-red); color: white; text-decoration: none; font-size: .82rem; font-weight: 850; }
.alt-intro-contact a:not(.alt-contact-button) { width: fit-content; color: var(--night); text-decoration-color: rgba(7,17,29,.35); text-underline-offset: .18rem; font-size: .82rem; font-weight: 700; }
.alt-activities { min-width: 0; min-height: 100svh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(19rem, 1fr)); gap: clamp(.65rem, 1vw, 1rem); padding: clamp(5.9rem, 8vw, 7rem) clamp(.7rem, 1.2vw, 1.15rem) clamp(.7rem, 1.2vw, 1.15rem); background: var(--night); }
.alt-tile { --accent: #fff; position: relative; width: 80%; height: 80%; place-self: center; min-height: 0; overflow: hidden; isolation: isolate; text-decoration: none; border-radius: .65rem; }
.alt-tile img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--photo-zoom, 1)); filter: saturate(.85) contrast(1.03); transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .7s ease; }
.alt-tile::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(2,8,15,.06) 25%, rgba(2,8,15,.86) 100%); transition: background .45s ease; }
.alt-tile:hover img, .alt-tile:focus-visible img { transform: scale(calc(var(--photo-zoom, 1) * 1.055)); filter: saturate(1.08) contrast(1.04); }
.alt-tile:hover::before, .alt-tile:focus-visible::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, rgba(2,8,15,.9) 100%); }
.alt-tile:focus-visible { outline: 4px solid white; outline-offset: -4px; }
.alt-tile.paella { --accent: #df9b16; --photo-zoom: 1.25; }
.alt-tile.paella img { object-position: 55% 60%; transform-origin: 55% 0%; }
.alt-tile.padel { --accent: #a3d400; --photo-zoom: 1.45; }
.alt-tile.padel img { object-position: 50% 25%; transform-origin: 0% 0%; }
.alt-tile.party { --accent: #e74ad4; }
.alt-tile.bim { --accent: #3a7df2; --photo-zoom: 1.12; }
.alt-tile.bim img { object-position: 58% 48%; transform-origin: 58% 48%; }
.alt-tile.bim .alt-tile-head { color: var(--night); }
.alt-tile.bim .alt-index { border-color: rgba(7,17,29,.68); }
.alt-tile-head { position: absolute; inset: 1rem 1rem auto; display: grid; grid-template-columns: 1fr auto; gap: .5rem .65rem; align-items: center; font-size: .828rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.alt-tile-head > span:not(.alt-click):not(.alt-index) { grid-column: 1; grid-row: 1; }
.alt-index { display: grid; place-items: center; grid-column: 2; grid-row: 1; width: 2rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.alt-tile-body { position: absolute; inset: auto clamp(1.3rem, 3vw, 2.5rem) clamp(1.4rem, 3vw, 2.6rem); }
.alt-tile h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.5vw, 4.2rem); font-weight: 500; line-height: .95; letter-spacing: -.055em; }
.alt-tile p { max-width: 28rem; margin: .8rem 0 0; font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.45; color: rgba(255,255,255,.83); }
.alt-click { display: grid; place-items: center; grid-column: 1; grid-row: 2; justify-self: start; width: 2.1rem; aspect-ratio: 1; border-radius: 50%; background: white; color: var(--night); box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.alt-click svg { width: 1.1rem; height: 1.1rem; overflow: visible; transform: translate(var(--hand-x, 0px), var(--hand-y, 0px)) rotate(var(--hand-rotate, 0deg)); transition: transform .18s ease-out; }
.alt-click .click-ray { opacity: .6; transition: opacity .18s ease-out; }
.alt-click.is-near .click-ray, .alt-tile:focus-visible .click-ray { opacity: 1; }
.alt-tile:focus-visible .alt-click { outline: 2px solid var(--spain-yellow); outline-offset: 3px; }
.alt-contact { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(3rem, 7vw, 6rem) clamp(1.4rem, 6vw, 7rem); border-top: .75rem solid var(--spain-yellow); background: var(--spain-red); }
.alt-contact h2 { max-width: 13ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 6vw, 6.5rem); font-weight: 500; line-height: .92; letter-spacing: -.06em; }
.alt-contact-links { display: grid; justify-items: end; gap: .65rem; font-weight: 750; }
.alt-contact-links a:first-child { margin-bottom: .6rem; padding: .8rem 1.1rem; border-radius: 999px; background: var(--spain-yellow); color: #6e0c11; text-decoration: none; }
.alt-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.4rem, 3vw, 3rem); color: rgba(255,255,255,.64); font-size: .8rem; }
@media (max-width: 920px) {
  .alt-portal { grid-template-columns: 1fr; }
  .alt-intro { min-height: 70svh; padding-top: 7rem; }
  .alt-intro h1 { font-size: clamp(4.6rem, 17vw, 7.8rem); }
  .alt-activities { min-height: auto; padding-top: 1rem; grid-template-rows: repeat(2, minmax(24rem, 1fr)); }
}
@media (max-width: 640px) {
  .alt-header { align-items: flex-start; }
  .alt-brand-name { font-size: clamp(1.25rem, 6vw, 1.65rem); }
  .alt-tools a:first-child { display: none; }
  .alt-activities { grid-template-columns: 1fr; grid-template-rows: none; gap: .8rem; padding: .8rem; }
  .alt-tile { height: auto; min-height: max(23rem, 54.4svh); margin-block: .8rem; }
  .alt-tile h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .alt-contact { grid-template-columns: 1fr; }
  .alt-contact-links { justify-items: start; }
  .alt-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .alt-tile img, .alt-click svg, .alt-click .click-ray { transition: none; } .alt-click svg { transform: none; } }