/* Muelle La Bodeguita — página de entrada.

   Los cuatro colores llegan como variables desde la configuración; aquí solo se
   usan. Todo lo demás —profundidad del agua, espuma, sombras— se deriva de esos
   cuatro con capas translúcidas, para que cambiar la marca desde el panel siga
   dando una página coherente.

   Solo se declaran las caras que se envían: Banana Grotesk Light, Regular y
   Medium, más Fact Compressed para los títulos y Bestigia para el saludo. */

@font-face { font-family:'Banana Grotesk'; src:url('../fuentes/BananaGrotesk-Light.woff2') format('woff2');
             font-weight:300; font-display:swap; }
@font-face { font-family:'Banana Grotesk'; src:url('../fuentes/BananaGrotesk-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Banana Grotesk'; src:url('../fuentes/BananaGrotesk-Medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }
@font-face { font-family:'Fact Compressed'; src:url('../fuentes/fact-compressed-bold.woff2') format('woff2');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Bestigia'; src:url('../fuentes/Bestigia-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; }

body {
  margin:0; min-height:100dvh; position:relative; overflow-x:hidden;
  display:flex; flex-direction:column;
  color:var(--arena);
  font-family:'Banana Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust:100%;

  /* Agua profunda abajo, luz arriba: la página tiene horizonte, no un plano.
     El halo sale del celeste de marca, muy diluido, no de un color nuevo. */
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--celeste) 22%, transparent), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 78%, #000) 100%);
  background-color:var(--navy);   /* respaldo si color-mix no existe */
}

/* ---------------------------------------------------------------- el mar --
   Tres capas de la misma onda —la del logotipo, ampliada— a distinta altura,
   opacidad y velocidad. Es el único gesto llamativo de la página: todo lo
   demás se mantiene quieto para que los dos arcos sigan siendo lo primero. */
/* El contenedor ocupa la pantalla entera y cada capa mide lo suyo dentro de
   él, anclada abajo. Con el trazo largo (viewBox de 340 para una onda que va de
   26 a 98) la altura de la capa mueve la línea de agua sin agrandar el oleaje:
   queda a `100 - 0.82 × altura` por ciento de la pantalla, así que 61 % deja la
   capa azul a media página con olas del mismo tamaño de siempre. */
.mar { position:fixed; inset:0; height:100dvh; pointer-events:none; z-index:0; }
.ola { position:absolute; left:0; bottom:0; width:200%; height:100%; display:block; }
.ola path { fill:currentColor; }

.ola-1 { color:color-mix(in srgb, var(--celeste) 14%, transparent); height:68%;
         animation:deriva 26s linear infinite; }
.ola-2 { color:color-mix(in srgb, var(--azul) 58%, transparent);    height:61%;
         animation:deriva 38s linear infinite reverse; }
.ola-3 { color:color-mix(in srgb, var(--arena) 9%, transparent);    height:51%;
         animation:deriva 52s linear infinite; }

/* El pie se lee sobre el agua, no contra ella: un velo que devuelve la
   profundidad del navy justo en la franja donde va el texto. */
.mar::after {
  content:""; position:absolute; inset:auto 0 0 0; height:26%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--navy) 92%, #000) 92%);
}

@keyframes deriva { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* El contenido va por delante del agua. */
.cabecera, .intro, .arcos, footer { position:relative; z-index:1; }

/* ------------------------------------------------------------- cabecera --
   Rejilla de tres columnas con los laterales iguales: el logotipo queda
   centrado respecto a la página, no respecto al hueco que deja el botón. */
.cabecera {
  padding:22px 20px 10px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
}
.logo { grid-column:2; width:min(340px, 62vw); height:auto; display:block; }

.lang {
  grid-column:3; justify-self:end;
  color:var(--arena); text-decoration:none;
  font-weight:500; font-size:14px; letter-spacing:.08em;
  border:1px solid color-mix(in srgb, var(--arena) 45%, transparent);
  border-radius:99px; padding:10px 16px; min-height:44px;
  display:inline-flex; align-items:center;
  backdrop-filter:blur(4px);
  transition:background-color .16s ease, border-color .16s ease;
}
.lang:hover, .lang:focus-visible { background:color-mix(in srgb, var(--arena) 14%, transparent);
                                   border-color:var(--celeste); }

/* En pantallas estrechas no caben lado a lado: el botón se va a su propia
   fila y el logotipo se queda con todo el ancho. */
@media (max-width:520px) {
  .cabecera { grid-template-columns:1fr; justify-items:center; gap:6px; }
  .lang  { grid-column:1; grid-row:1; justify-self:end; }
  .logo  { grid-column:1; grid-row:2; width:min(300px, 74vw); }
}

/* En pantallas anchas la bola solo puede crecer hacia arriba, y la cabecera
   con el saludo se estaban llevando el 42 % del alto. Se les recorta el aire
   sobrante —no el tamaño de la letra ni el del logotipo— para que la figura
   gane sitio. */
@media (min-width:760px) {
  .cabecera { padding:16px 20px 2px; }
  .intro { padding:8px 20px 12px; }
  .intro h1 { margin-bottom:4px; }
}

/* ---------------------------------------------------------------- intro -- */
.intro { padding:14px 20px 24px; text-align:center; }
.intro h1 {
  font-family:'Bestigia', Georgia, serif; font-weight:400;
  font-size:clamp(34px, 8.6vw, 58px); line-height:1.02; margin:0 0 8px;
  color:var(--celeste);
  text-shadow:0 2px 18px color-mix(in srgb, var(--navy) 70%, transparent);
}
.intro p { margin:0; font-size:clamp(15px, 4vw, 18px); font-weight:300;
           letter-spacing:.01em; color:color-mix(in srgb, var(--arena) 88%, transparent); }

/* ---------------------------------------------------------------- arcos --
   Las dos opciones tienen que caber en la primera pantalla, sin desplazarse:
   es la restricción del spec, no una preferencia. Por eso se reparten el alto
   que sobra (`1fr 1fr`) en vez de medir cada uno lo suyo y sumar. */
/* Los dos van SIEMPRE apilados, nunca lado a lado: la cúpula de arriba y el
   casco de abajo cierran un círculo, y esa figura es el remate del diseño. En
   dos columnas se pierde y quedan dos medias lunas sueltas.

   El tamaño no se fija con un número: las dos filas se reparten el alto que
   queda libre y el ancho de cada mitad sale de su propia proporción. Así la
   bola crece hasta donde puede y nunca obliga a desplazarse, sea cual sea la
   pantalla. */
.arcos {
  flex:1 1 auto; min-height:0; display:grid; gap:12px;
  grid-template-columns:1fr; grid-template-rows:1fr 1fr;
  /* Cuadrada, y nunca más alta que el ancho que puede ocupar: así la figura es
     un círculo tanto en una pantalla ancha y baja como en un móvil alto y
     estrecho, sin números atados a un tamaño concreto. */
  aspect-ratio:1;
  /* El tope se expresa en unidades de ancho: un `100%` dentro de `min()` no
     resuelve dentro de un flex y hace que el navegador descarte la regla
     entera. El alto disponible ya lo limita el contenedor. */
  max-height:min(90vw, 520px);
  max-width:min(90vw, 520px);
  margin:auto;
}

.arco {
  /* Los tamaños de dentro se miden contra el ancho del arco (`cqw`), no contra
     el de la pantalla: la bola es bastante más estrecha que el viewport y con
     `vw` el título se salía por los lados. */
  container-type:inline-size;
  position:relative; overflow:hidden;
  /* Cada mitad llena su fila; la proporción la decide el contenedor. */
  width:100%; height:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; text-decoration:none;
  padding:14px 18px;
  border-radius:999px 999px 26px 26px;      /* el arco de la marca */
  box-shadow:0 14px 34px color-mix(in srgb, #000 34%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}


/* Luz que entra por arriba del arco, como el sol sobre el agua. */
.arco::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 58% at 50% 0%, color-mix(in srgb, #fff 26%, transparent), transparent 70%);
}
.arco > * { position:relative; }

.arco-tiquete { background:linear-gradient(175deg, var(--arena) 0%,
                          color-mix(in srgb, var(--arena) 86%, var(--navy)) 100%);
                color:var(--navy);
                justify-content:flex-end; padding-bottom:16px; }
/* El arco de ubicar va invertido: casco, no cúpula. Los dos caminos no son
   equivalentes —uno se compra aquí, el otro te lleva hasta allá— y la forma lo
   dice antes que el texto. La sombra se concentra bajo la quilla para que
   parezca apoyado en el agua y no colgado de arriba. */
.arco-ubicar  { background:linear-gradient(175deg, var(--azul) 0%,
                          color-mix(in srgb, var(--azul) 76%, var(--navy)) 100%);
                color:var(--arena);
                border-radius:26px 26px 999px 999px;
                justify-content:flex-start; padding-top:16px;
                box-shadow:0 18px 30px -10px color-mix(in srgb, #000 46%, transparent),
                           inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent); }
.arco-ubicar:hover, .arco-ubicar:focus-visible {
  box-shadow:0 26px 40px -12px color-mix(in srgb, #000 52%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

.arco:hover, .arco:focus-visible {
  transform:translateY(-4px);
  box-shadow:0 22px 46px color-mix(in srgb, #000 42%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.arco:focus-visible { outline:3px solid var(--celeste); outline-offset:4px; }
.arco:active { transform:translateY(-1px); }

/* El icono va en un medallón: le da peso y lo separa del fondo del arco.
   Hereda el color del texto, así que sirve igual sobre arena y sobre azul. */
.medallon {
  display:grid; place-items:center;
  width:clamp(46px, 19cqw, 76px); aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, currentColor 10%, transparent);
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  transition:transform .18s ease;
}
.arco:hover .medallon, .arco:focus-visible .medallon { transform:translateY(-2px) scale(1.03); }
.medallon svg { height:56%; width:auto; max-width:72%; display:block; }
.arco-tiquete .medallon svg { height:62%; }   /* el barco es más alto que ancho */

.titulo {
  font-family:'Fact Compressed', 'Arial Narrow', system-ui, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(16px, 9.5cqw, 34px); line-height:1.02;
  /* Cerca del centro de la bola la figura ya se está curvando: el texto no
     puede usar todo el ancho del arco o se sale por el costado. */
  max-width:84%; text-wrap:balance;
}
.bajada { font-weight:300; font-size:clamp(11px, 4.4cqw, 16px); opacity:.88; max-width:min(24ch, 80%); }

/* Cerrada: sin enlace. Se mantiene visible para que se sepa que existe, pero
   apagada para que nadie la intente. */
.arco[aria-disabled="true"] { opacity:.55; cursor:default; box-shadow:none; }
.arco[aria-disabled="true"]:hover { transform:none; }
.pronto {
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:99px; padding:6px 14px;
}

/* ------------------------------------------------------------------ pie -- */
footer { padding:12px 20px 22px; text-align:center; font-size:13px;
         font-weight:400; letter-spacing:.01em;
         color:color-mix(in srgb, var(--arena) 90%, transparent); }
.tricolor { display:flex; height:3px; width:112px; margin:0 auto 10px;
            border-radius:99px; overflow:hidden; }
.tricolor span { flex:1; }

/* --------------------------------------------------- pantallas cortas --
   Un iPhone SE, un teléfono viejo: se comprime lo accesorio —logo, saludo,
   pie— y nunca el área táctil de los arcos. */
@media (max-height:700px) {
  .cabecera { padding:16px 16px 6px; }
  .logo { width:min(230px, 56vw); }
  .lang { padding:8px 13px; min-height:40px; font-size:13px; }
  .intro { padding:6px 16px 14px; }
  .intro h1 { font-size:clamp(28px, 7.2vw, 40px); }
  .arcos { gap:12px; padding:0 16px 14px; }
  .arco { min-height:128px; padding:14px 16px; gap:7px; }
  .medallon { width:clamp(50px, 12vw, 64px); }
  .titulo { font-size:clamp(22px, 6vw, 32px); }
  .mar { height:100dvh; }
  footer { padding:8px 16px 12px; }
  .tricolor { margin-bottom:7px; }
}

/* El agua se detiene para quien pidió menos movimiento; el resto queda igual. */
@media (prefers-reduced-motion:reduce) {
  .ola { animation:none; }
  .arco, .medallon, .lang { transition:none; }
  .arco:hover { transform:none; }
}

@media (max-height:560px) {
  .cabecera { padding:10px 14px 4px; }
  .logo { width:min(210px, 52vw); }
  .intro { padding:2px 14px 10px; }
  .intro h1 { font-size:clamp(24px, 6.4vw, 32px); }
  .intro p { font-size:13px; }
  .arcos { gap:8px; padding:0 0 8px; }
  .arco { padding:9px 14px; gap:4px; }
  .medallon { width:44px; }
  .titulo { font-size:clamp(20px, 5.6vw, 26px); }
  .bajada { font-size:12px; }
  footer { padding:6px 14px 10px; font-size:12px; }
  .tricolor { margin-bottom:5px; }
}