/* Fuentes OFL autoalojadas (sin CDN de Google) + BRISA propia para la palabra OLA. *//* italiana-latin-400-normal */
@font-face {
  font-family: 'Italiana';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/italiana-latin-400-normal.CRZrqGQm.woff2) format('woff2'), url(/_astro/italiana-latin-400-normal.BzjwlKaI.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* tenor-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/tenor-sans-cyrillic-400-normal.DVnqnQeh.woff2) format('woff2'), url(/_astro/tenor-sans-cyrillic-400-normal.CxTHTzzh.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* tenor-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/tenor-sans-latin-ext-400-normal.DWl86Xpu.woff2) format('woff2'), url(/_astro/tenor-sans-latin-ext-400-normal.DRO6PP-E.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* tenor-sans-latin-400-normal */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/tenor-sans-latin-400-normal.Bloz8C9r.woff2) format('woff2'), url(/_astro/tenor-sans-latin-400-normal.D7L0ycNN.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jost-cyrillic-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/jost-cyrillic-wght-normal.CjwCQKo9.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jost-latin-ext-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/jost-latin-ext-wght-normal.BDUtSsKd.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jost-latin-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/jost-latin-wght-normal.ObQm3Zd1.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "BRISA by OLA";
  src: url("/fuentes/BRISAbyOLA-Regular.woff2") format("woff2");
  font-display: swap;
}

/* Los colores llegan como --c-* desde contracts/design-tokens.json (ver Base.astro). */
:root {
  --f-titulo: "Italiana", "Didot", "Bodoni 72", serif;
  --f-sub: "Tenor Sans", "Avenir Next", "Segoe UI", sans-serif;
  --f-cuerpo: "Jost Variable", "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-marca: "BRISA by OLA", var(--f-sub);

  --texto: var(--c-tinta);
  --texto-suave: var(--c-cafe);
  --fondo: var(--c-espuma);
  --superficie: var(--c-blanco);
  --linea: color-mix(in oklab, var(--c-arena-dorada) 55%, transparent);

  --ancho: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 10vw, 9rem);

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --t-l: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --t-xl: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --t-xxl: clamp(3rem, 7vw + 1rem, 6.5rem);

  /* Elevación única (gesto Lovi) en tono tinta OLA: lavado amplio + filo de 1 px. */
  /* Una sola sombra en todo el sistema (como Apple/Airbnb): en reposo, las superficies solo llevan una
     línea fina de arena; --sombra-flotar aparece únicamente al pasar el cursor por algo que se puede tocar. */
  --sombra: 0 0 0 1px color-mix(in oklab, var(--c-arena-dorada) 30%, transparent);
  --sombra-flotar: 0 22px 50px -18px rgba(56, 45, 30, 0.2), 0 2px 6px rgba(56, 45, 30, 0.05);
  --radio-tableta: clamp(28px, 3.5vw, 40px);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: var(--t-m);
  line-height: 1.6;
  font-size-adjust: from-font;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
/* Titulares en BRISA by OLA, la tipografía propia de la marca. Solo tiene mayúsculas y pide 28 px o más:
   por eso va en h1/h2 (y en piezas display grandes) y siempre en mayúsculas; Italiana queda para lo editorial chico. */
h1, h2 { font-family: var(--f-marca); text-transform: uppercase; letter-spacing: 0.015em; line-height: 0.86; }
/* Titulares de sección con presencia: BRISA es fina y necesita tamaño para mandar. */
h2 { font-size: clamp(2.25rem, 3.4vw + 1rem, 4.25rem); }
h3 { font-size: var(--t-l); }

.etiqueta {
  font-family: var(--f-sub);
  font-size: var(--t-xs);
  letter-spacing: 0.24em; /* espaciado amplio: la firma de las marcas wellness premium (ref. Alveos One) */
  text-transform: uppercase;
  color: var(--texto-suave);
}

.contenedor {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: var(--sec); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--c-mar);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Botones: una sola acción primaria por pantalla. */
.boton {
  --b-fondo: var(--c-mar);
  --b-texto: var(--c-blanco);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border: 1px solid var(--b-fondo);
  border-radius: 999px;
  background: var(--b-fondo);
  color: var(--b-texto);
  font-family: var(--f-sub);
  font-size: var(--t-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Sin efecto al pasar el cursor: el botón se mantiene igual. */
.boton--secundario { --b-fondo: transparent; --b-texto: var(--c-cafe); border-color: var(--c-cafe-arena); }

/* Enlace con subrayado de ola (el "tech discreto": detalle preciso, no ruidoso). */
.enlace-ola {
  text-decoration: none;
  /* Línea fina y recta (café arena), sin cambio al pasar el cursor. */
  background: linear-gradient(var(--c-cafe-arena), var(--c-cafe-arena)) no-repeat 0 100% / 100% 1px;
  padding-bottom: 3px;
}


/* Destello de sol: al llegar el cursor (o al tocar en celular) un reflejo de luz cruza el botón una sola vez,
   como el sol sobre el agua. El botón no cambia de color ni se mueve. Vale para todos los botones. */
:is(.boton, .cerrar, .menu-boton, .elegir button) {
  --brillo: color-mix(in oklab, var(--c-sol, #F4C95D) 55%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Sobre fondo oscuro el reflejo es blanco; sobre fondo claro, dorado sol para que se vea. */
:is(.boton:not(.boton--secundario), .elegir button[aria-pressed="true"]) { --brillo: rgb(255 255 255 / 0.38); }
:is(.boton, .cerrar, .menu-boton, .elegir button)::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -60%;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, var(--brillo), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
@media (hover: hover) {
  :is(.boton, .cerrar, .menu-boton, .elegir button):hover::after { animation: destello-sol 1s var(--entrada-curva); }
}
:is(.boton, .cerrar, .menu-boton, .elegir button):is(:active, :focus-visible)::after { animation: destello-sol 1s var(--entrada-curva); }
:is(.boton, .cerrar, .menu-boton, .elegir button):focus-visible { outline: 2px solid var(--c-mar); outline-offset: 3px; }
@keyframes destello-sol {
  from { opacity: 1; transform: skewX(-18deg) translateX(0); }
  to { opacity: 1; transform: skewX(-18deg) translateX(520%); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.boton, .cerrar, .menu-boton, .elegir button)::after { animation: none !important; }
}

/* Titular de dos estilos (ref. Air): la palabra en <em> va recta, en mar, sobre el resto en tinta. */
main h2 em { font-style: normal; color: var(--c-mar); }
/* Marco de las fotos: un filo de espuma sobre la imagen la funde con la página (en lugar de una sombra). */
.revelar-img { outline: 1px solid color-mix(in oklab, #FFFFFF 70%, transparent); outline-offset: -1px; }

/* Movimiento de entrada (lib/movimiento.ts pone .en-vista una sola vez y escalona hermanos con --i).
   Curva "expo out": arranca decidida y se posa despacio. Sin JS o con movimiento reducido, todo visible. */
:root { --entrada-curva: cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* Bloques de texto y tarjetas: suben 24 px y aparecen. */
  /* Solo lo que está fuera de la primera pantalla lleva .espera: lo visible al cargar ya está en su sitio. */
  html.js .revelar {
    transition: opacity 1.2s var(--entrada-curva), translate 1.4s var(--entrada-curva), filter 1.2s var(--entrada-curva);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.js .revelar.espera {
    opacity: 0;
    translate: 0 24px;
    filter: blur(6px); /* sube y "enfoca", como al salir del agua (blur-fade) */
  }

  /* Títulos: cada línea sube desde detrás de su propia línea base (máscara), como en editorial. */
  /* Margen arriba y abajo: BRISA dibuja burbujas sobre la O que sobresalen de la caja de 0.86. */
  /* Las líneas van en flex (sus márgenes no colapsan): partido y restaurado miden lo mismo y el titular
     no salta al terminar. La máscara se abre a los lados para no recortar la A cursiva ni la O de BRISA. */
  .lineas:has(> .linea) { display: flex; flex-direction: column; }
  .lineas .linea { display: block; overflow: clip; padding: 0.16em 0.3em; margin: -0.16em -0.3em; }
  .lineas .linea-in { display: block; translate: 0 110%; }
  .lineas.en-vista .linea-in { translate: 0 0; transition: translate 1.5s var(--entrada-curva) calc(var(--retraso-lineas, 0s) + var(--l) * 110ms); }

  /* Imágenes: aparecen con un fundido mientras se asientan (des-zoom leve). El marco no cambia de forma:
     solo opacity y scale, que el navegador anima sin repintar. */
  /* Fotos y videos se aclaran como vistos bajo el agua: llegan desenfocados, claros y un poco cerca, y se
     asientan nítidos. Sin máscara ni barrido. Sin línea de tiempo de scroll, una transición al entrar. */
  html.js .revelar-img.espera :is(img, video) { filter: blur(12px) brightness(1.1) saturate(0.75); opacity: 0.4; }
  html.js .revelar-img :is(img, video) {
    scale: 1.08;
    transition: filter 1.6s var(--entrada-curva), opacity 1.2s var(--curva);
  }

  /* Entre páginas, el oleaje: tres olas (fondo, media y frente) suben a distinto ritmo y derivan de lado
     mientras ruedan, con curva senoidal (arrancan y frenan suave). Cada una termina fuera de la pantalla
     por arriba (su alto completo), así nada se corta al acabar la transición. La del frente cubre toda la
     pantalla entre el 35 % y el 63 % de su recorrido: la página cambia ahí (0.83 s, el 52 % de 1.6 s) y su
     cola de espuma deja ver la página nueva. */
  @view-transition { navigation: auto; }
  ::view-transition-old(ola-fondo), ::view-transition-old(ola-media), ::view-transition-old(ola-frente) { display: none; }
  ::view-transition-new(ola-fondo), ::view-transition-new(ola-media), ::view-transition-new(ola-frente) { animation: none; }
  ::view-transition-group(ola-fondo) { animation: ola-fondo-paso 1.35s cubic-bezier(0.37, 0, 0.63, 1) both; }
  ::view-transition-group(ola-media) { animation: ola-media-paso 1.45s cubic-bezier(0.37, 0, 0.63, 1) 0.04s both; }
  ::view-transition-group(ola-frente) { animation: ola-frente-paso 1.5s cubic-bezier(0.37, 0, 0.63, 1) 0.08s both; }
  ::view-transition-old(root) { animation: marea-salir 1.6s linear both; }
  ::view-transition-new(root) { animation: marea-mostrar 1.6s linear both; }
  ::view-transition-old(encabezado) { animation: marea-ocultar 1.6s linear both; }
  ::view-transition-new(encabezado) { animation: marea-mostrar 1.6s linear both; }
  @keyframes ola-fondo-paso { from { transform: translate(0, 100vh); } 70% { opacity: 0.9; } to { transform: translate(-30vw, -125vh); opacity: 0; } }
  @keyframes ola-media-paso { from { transform: translate(-40vw, 100vh); } to { transform: translate(-8vw, -165vh); } }
  @keyframes ola-frente-paso { from { transform: translate(0, 100vh); } to { transform: translate(-50vw, -265vh); } }
  @keyframes marea-salir { 0% { translate: 0 0; } 51% { translate: 0 -5vh; opacity: 1; } 52%, 100% { translate: 0 -5vh; opacity: 0; } }
  @keyframes marea-mostrar { 0%, 51% { opacity: 0; } 52%, 100% { opacity: 1; } }
  @keyframes marea-ocultar { 0%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
  /* La foto compartida se desliza y cambia de tamaño hacia su nuevo lugar con la curva de calma. */
  ::view-transition-group(foto-compartida) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.37, 0, 0.18, 1); }
  ::view-transition-old(foto-compartida), ::view-transition-new(foto-compartida) { height: 100%; object-fit: cover; }
}

/* Movimiento ligado al scroll (CSS nativo, sin JS: corre fuera del hilo principal y se deshace al subir).
   --rizo es el rizo del cabello del logo: la cresta de .marca lo lee como grados de giro. */
@property --rizo { syntax: "<number>"; inherits: true; initial-value: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Deriva: dentro de su marco fijo, el medio se acerca al entrar y se mueve más lento que la página.
       El marco nunca cambia de tamaño; solo se mueve lo de adentro (translate + scale). */
    /* Agua que se calma: la foto se enfoca y toma su color conforme sube por la pantalla; ya nítida,
       flota dentro de su marco (±3 %, cubierto por el 1.08 de escala: nunca asoma el borde). */
    html.js .revelar-img { view-timeline: --foto block; }
    html.js .revelar-img :is(img, video), html.js .revelar-img.en-vista :is(img, video) {
      filter: none;
      opacity: 1;
      animation: foto-aclarar linear both, foto-flotar linear both;
      animation-timeline: --foto, --foto;
      animation-range: entry 0% cover 45%, cover 0% cover 100%;
    }
    [data-deriva] :is(img, video) {
      animation: deriva-medio linear both, acercar-medio linear both;
      animation-timeline: view(), view();
      animation-range: cover, entry 0% cover 50%;
    }
    /* Rizo: el cabello del logo se enrosca al pasar por la pantalla. */
    [data-rizo] { animation: rizar linear both; animation-timeline: view(); animation-range: cover; }
  }
}
/* Ref. Air, para todo el sitio:
   - data-a-sangre: el medio entra como tarjeta con márgenes y esquinas y se abre a todo el ancho al llegar
     al centro de la pantalla (clip-path: el marco no cambia de tamaño ni empuja nada).
   - data-cascada: sus hijos suben uno tras otro al entrar y se asientan (cada uno con su propia línea de
     tiempo y un retraso por posición). Usa translate/scale/opacity: el transform del hover (.flota) sigue libre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-a-sangre] {
      margin-inline: 0 !important;
      border-radius: 0 !important;
      animation: a-sangre linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    [data-cascada] > * {
      animation: cascada-subir cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry calc(var(--c, 0) * 12%) entry calc(85% + var(--c, 0) * 12%);
    }
    [data-cascada] > :nth-child(2) { --c: 1; }
    [data-cascada] > :nth-child(3) { --c: 2; }
    [data-cascada] > :nth-child(4) { --c: 3; }
    [data-cascada] > :nth-child(n + 5) { --c: 4; }
  }
}
@keyframes a-sangre { from { clip-path: inset(0 clamp(0.75rem, 7vw, 6rem) round 32px); } to { clip-path: inset(0 0 round 0px); } }
@keyframes cascada-subir { from { opacity: 0; translate: 0 12vh; scale: 0.94; } }

@keyframes foto-aclarar { from { filter: blur(12px) brightness(1.1) saturate(0.75); opacity: 0.4; } to { filter: blur(0) brightness(1) saturate(1); opacity: 1; } }
@keyframes foto-flotar { from { translate: 0 -3%; } to { translate: 0 3%; } }
@keyframes deriva-medio { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes acercar-medio { from { scale: 1.08; } to { scale: 1; } }
@keyframes rizar { from { --rizo: 7; } to { --rizo: -9; } }

/* Lenis (scroll suave). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }



::selection { background: var(--c-cielo); color: var(--c-tinta); }


/* ---------- Tabletas (secciones blancas flotantes, radio 40 px, una sola sombra) ---------- */
.tableta {
  border-radius: var(--radio-tableta);
  background: var(--c-blanco);
  box-shadow: var(--sombra);
  padding: clamp(1.75rem, 5vw, 4rem);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Al entrar, la tableta se posa: sube y crece apenas (solo transform: no repinta). */
    .tableta[data-posar] { animation: posar linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes posar { from { translate: 0 6vh; scale: 0.96; } }

/* ---------- Texto que se ilumina con el scroll (TextoLuz.astro) ----------
   Cada palabra pasa de tenue a tinta según avanza la línea de tiempo del párrafo; al salir por arriba
   el párrafo se desenfoca. Sin soporte: el texto se ve completo. */
/* La línea de tiempo ignora el 30 % inferior de la pantalla: el texto termina de encenderse antes de
   llegar al centro, en cualquier alto de pantalla, y no se queda gris mientras se lee. */
.texto-luz { view-timeline-name: --luz; view-timeline-inset: 0% 30%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .texto-luz .p {
      opacity: 0.35; /* apagadas pero legibles antes del scroll */
      animation: encender linear both;
      animation-timeline: --luz;
      animation-range: cover calc(var(--k) * 14%) cover calc(5% + var(--k) * 14%);
    }
    .texto-luz { animation: desenfocar linear both; animation-timeline: view(); animation-range: exit 30% exit 100%; }
  }
}
@keyframes encender { to { opacity: 1; } }
@keyframes desenfocar { to { filter: blur(6px); opacity: 0.2; } }


/* ---------- Capítulos: bandas de color de marca que se funden entre sí (la marea, sin líneas) ----------
   La banda se extiende 7rem arriba y abajo y se desvanece, así nunca hay un corte entre secciones. */
.capitulo { position: relative; isolation: isolate; overflow-x: clip; } /* la bruma deriva de lado sin crear scroll */
.capitulo::before {
  content: "";
  position: absolute;
  inset: -7rem 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--capitulo) 7rem, var(--capitulo) calc(100% - 7rem), transparent);
}
.capitulo--cielo { --capitulo: color-mix(in oklab, var(--c-cielo) 30%, var(--c-espuma)); }
.capitulo--arena { --capitulo: color-mix(in oklab, var(--c-arena-dorada) 17%, var(--c-blanco)); }

/* Lo que se puede tocar flota al pasar el cursor (la única sombra del sistema).
   Usa transform (no translate) para no chocar con la entrada de .revelar, y la regla combinada lista
   todas las transiciones juntas: si no, la de .revelar anularía la del hover y el cambio sería brusco. */
@media (hover: hover) {
  .flota:is(:hover, :focus-within) { box-shadow: var(--sombra-flotar); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .flota { transition: box-shadow 0.9s var(--entrada-curva), transform 0.9s var(--entrada-curva); }
  .flota:is(:hover, :focus-within) { transform: translateY(-4px); }
  html.js .flota.revelar {
    transition: opacity 1.2s var(--entrada-curva), translate 1.4s var(--entrada-curva), filter 1.2s var(--entrada-curva),
      box-shadow 0.9s var(--entrada-curva), transform 0.9s var(--entrada-curva);
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
  }
}


/* ---------- Bruma: nubes de luz muy tenues que derivan despacio en los capítulos cielo (ref. Recess) ----------
   Gradientes radiales (sin blur ni filtros: no cuestan) que se mueven solo con transform. */
.capitulo--cielo::after {
  content: "";
  position: absolute;
  inset: -4rem -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 30%, color-mix(in oklab, var(--c-blanco) 70%, transparent), transparent 70%),
    radial-gradient(30% 26% at 82% 70%, color-mix(in oklab, var(--c-blanco) 55%, transparent), transparent 70%),
    radial-gradient(24% 20% at 60% 15%, color-mix(in oklab, var(--c-cielo) 22%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .capitulo--cielo::after { animation: bruma 46s ease-in-out infinite alternate; }
}
@keyframes bruma { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }


/* Alto del borde de la orilla (el footer baja al mar con agua real). */
:root { --ola-borde: clamp(9rem, 24vh, 16rem); }

/* Las olas del cambio de página: fuera de pantalla, debajo; solo las captura la transición.
   Miden el doble del ancho para poder derivar de lado sin mostrar orillas. */
.ola-paso { position: fixed; left: 0; top: 100%; z-index: 300; width: 200vw; pointer-events: none; } /* sobre el encabezado: la ola lo cubre todo */
.ola-paso > div { width: 100% !important; } /* la capa ya mide 200vw: la ola ocupa su ancho */
.ola-paso--fondo { height: 120vh; view-transition-name: ola-fondo; opacity: 0.8; }
.ola-paso--media { height: 160vh; view-transition-name: ola-media; opacity: 0.92; }
.ola-paso--frente { height: 260vh; view-transition-name: ola-frente; }
@media (prefers-reduced-motion: reduce) {
  .ola-paso { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --color-white: #fff;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base, components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: 0;
  }

  .z-0 {
    z-index: 0;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .inline-block {
    display: inline-block;
  }

  .table {
    display: table;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .w-full {
    width: 100%;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .fill-\[\#FFFFFF\] {
    fill: #fff;
  }

  .fill-arena-dorada\/40 {
    fill: var(--c-arena-dorada);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fill-arena-dorada\/40 {
      fill: color-mix(in oklab, var(--c-arena-dorada) 40%, transparent);
    }
  }

  .fill-arena-dorada\/55 {
    fill: var(--c-arena-dorada);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fill-arena-dorada\/55 {
      fill: color-mix(in oklab, var(--c-arena-dorada) 55%, transparent);
    }
  }

  .fill-white {
    fill: var(--color-white);
  }

  .stroke-arena-dorada\/40 {
    stroke: var(--c-arena-dorada);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-arena-dorada\/40 {
      stroke: color-mix(in oklab, var(--c-arena-dorada) 40%, transparent);
    }
  }

  .stroke-\[0\.5\] {
    stroke-width: .5px;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-top {
    object-position: top;
  }

  .align-middle {
    vertical-align: middle;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .dark\:fill-\[\#262626\]:is(.dark *) {
    fill: #262626;
  }

  .dark\:fill-\[\#404040\]:is(.dark *) {
    fill: #404040;
  }

  .dark\:stroke-\[\#404040\]:is(.dark *) {
    stroke: #404040;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
.marca[data-astro-cid-yjz3n4l7] {
  display: block;
  overflow: visible;
  fill: var(--relleno);
}

.tono-figura[data-astro-cid-yjz3n4l7] {
  fill: var(--c-cielo);
}

.cresta[data-astro-cid-yjz3n4l7], .luna[data-astro-cid-yjz3n4l7] {
  transform-box: view-box;
  transform-origin: var(--g, var(--giro));
}

.cresta[data-astro-cid-yjz3n4l7] {
  rotate: calc(var(--rizo, 0) * 1deg);
}

.letra-l[data-astro-cid-yjz3n4l7], .letra-a[data-astro-cid-yjz3n4l7], .letra-sub[data-astro-cid-yjz3n4l7], .burbuja[data-astro-cid-yjz3n4l7] {
  transform-box: fill-box;
  transform-origin: 50%;
}

.barrido[data-astro-cid-yjz3n4l7] {
  transform: translateX(var(--fin));
}

@media (prefers-reduced-motion: no-preference) {
  html.js .marca--dibujar[data-astro-cid-yjz3n4l7]:not(.en-vista) .barrido[data-astro-cid-yjz3n4l7] {
    transform: none;
  }

  html.js .marca--dibujar[data-astro-cid-yjz3n4l7]:not(.en-vista) [data-astro-cid-yjz3n4l7]:is(.luna, .burbuja) {
    opacity: 0;
  }

  html.js .marca--dibujar[data-astro-cid-yjz3n4l7]:not(.en-vista) [data-astro-cid-yjz3n4l7]:is(.letra-l, .letra-a, .letra-sub) {
    transform: translateY(105%);
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .barrido[data-astro-cid-yjz3n4l7] {
    animation: barrer 2.6s cubic-bezier(.65, 0, .35, 1) var(--r) both;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .cresta[data-astro-cid-yjz3n4l7] {
    animation: asentar 2.4s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + .7s) both,
        oleaje 9s ease-in-out calc(var(--r) + 3.1s) infinite alternate;
  }

  .marca--respirar[data-astro-cid-yjz3n4l7] .cresta[data-astro-cid-yjz3n4l7] {
    animation: 9s ease-in-out infinite alternate oleaje;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .luna[data-astro-cid-yjz3n4l7] {
    animation: enroscar 2s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + var(--i) * .14s) both,
        mecer 8s ease-in-out calc(var(--r) + 2.2s + var(--i) * .6s) infinite alternate;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .burbuja[data-astro-cid-yjz3n4l7] {
    animation: burbujear 1.4s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + .9s + var(--i) * .16s) both,
        flotar 4.5s ease-in-out calc(var(--r) + 2.4s + var(--i) * .7s) infinite alternate;
  }

  .marca--respirar[data-astro-cid-yjz3n4l7] .luna[data-astro-cid-yjz3n4l7] {
    animation: mecer 8s ease-in-out calc(var(--i) * .6s) infinite alternate;
  }

  .marca--respirar[data-astro-cid-yjz3n4l7] .burbuja[data-astro-cid-yjz3n4l7] {
    animation: flotar 4.5s ease-in-out calc(var(--i) * .7s) infinite alternate;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .letra-l[data-astro-cid-yjz3n4l7] {
    animation: subir 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + .35s) both;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .letra-a[data-astro-cid-yjz3n4l7] {
    animation: subir 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + .47s) both;
  }

  .marca--dibujar[data-astro-cid-yjz3n4l7].en-vista .letra-sub[data-astro-cid-yjz3n4l7] {
    animation: subir 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + .85s + var(--i) * 40ms) both;
  }
}

@keyframes barrer {
  from {
    transform: none;
  }

  to {
    transform: translateX(var(--fin));
  }
}

@keyframes asentar {
  from {
    transform: rotate(-14deg) scale(.9);
  }

  to {
    transform: none;
  }
}

@keyframes oleaje {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-2.2deg) scale(1.012);
  }
}

@keyframes enroscar {
  from {
    opacity: 0;
    transform: rotate(calc(-60deg - var(--i) * 25deg)) scale(.94);
  }

  40% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mecer {
  to {
    transform: rotate(calc(2.5deg - var(--i) * 1.6deg));
  }
}

@keyframes burbujear {
  from {
    opacity: 0;
    transform: translateY(140%) scale(.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes flotar {
  to {
    transform: translateY(-28%);
  }
}

@keyframes subir {
  from {
    transform: translateY(105%);
  }

  to {
    transform: none;
  }
}
.ola[data-astro-cid-phyzfi6b] {
  display: flex;
  flex-direction: column;
  width: 200%;
  height: 100%;
}

.cresta[data-astro-cid-phyzfi6b] {
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  height: clamp(70px, 11vh, 150px);
  margin-bottom: -1px;
}

.cuerpo[data-astro-cid-phyzfi6b] {
  flex: 1;
  background: linear-gradient(to bottom, oklab(100% 0 5.96046e-8 / .35), transparent 18vh),
      linear-gradient(to bottom, var(--arriba) 0%, var(--abajo) 55%, var(--cola) 100%);
}
.encabezado[data-astro-cid-ocp5e6q2] {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid #0000;
  transition: translate .7s var(--curva), background .5s var(--curva), border-color .5s var(--curva);
}

html.desplazado .encabezado[data-astro-cid-ocp5e6q2] {
  background: color-mix(in oklab, var(--c-blanco) 78%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-color: var(--linea);
}

html.bajando .encabezado[data-astro-cid-ocp5e6q2]:not(:has(:focus-visible)) {
  translate: 0 -100%;
}

.barra[data-astro-cid-ocp5e6q2] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.logo[data-astro-cid-ocp5e6q2] {
  flex: none;
  display: block;
}

.logo[data-astro-cid-ocp5e6q2] .logo-marca {
  height: 2.6rem;
  width: auto;
}

html.intro .logo[data-astro-cid-ocp5e6q2] .logo-marca {
  --r: 2.1s !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.visitada .logo[data-astro-cid-ocp5e6q2] .barrido {
    animation: none !important;
    transform: translateX(var(--fin)) !important;
  }

  html.visitada .logo[data-astro-cid-ocp5e6q2] :is(.luna, .burbuja, .letra-l, .letra-a, .letra-sub) {
    animation-delay: -10s !important;
  }

  html.visitada .logo[data-astro-cid-ocp5e6q2] .cresta {
    animation: 9s ease-in-out infinite alternate oleaje !important;
  }
}

.encabezado[data-astro-cid-ocp5e6q2] {
  view-transition-name: encabezado;
}

.nav-escritorio[data-astro-cid-ocp5e6q2] {
  position: relative;
  margin-inline: auto;
  padding: .3rem;
  border: 1px solid color-mix(in oklab, var(--c-arena-dorada) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--c-blanco) 55%, transparent);
  backdrop-filter: blur(10px);
}

.nav-escritorio[data-astro-cid-ocp5e6q2] ul[data-astro-cid-ocp5e6q2] {
  position: relative;
  z-index: 1;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-escritorio[data-astro-cid-ocp5e6q2] a[data-astro-cid-ocp5e6q2] {
  display: block;
  padding: .55rem clamp(.85rem, 1.4vw, 1.25rem);
  border-radius: 999px;
  font-family: var(--f-sub);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-tinta);
  transition: color .4s var(--curva);
}

.nav-escritorio[data-astro-cid-ocp5e6q2] a[data-astro-cid-ocp5e6q2][aria-current="page"] {
  color: var(--c-mar);
}

.indicador[data-astro-cid-ocp5e6q2] {
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  left: 0;
  width: var(--w, 0);
  translate: var(--x, 0) 0;
  border-radius: 999px;
  background: var(--c-blanco);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--c-cafe-arena) 25%, transparent),
      0 6px 18px -8px color-mix(in oklab, var(--c-cafe-arena) 45%, transparent);
  opacity: 0;
  transition: opacity .3s var(--curva);
}

.nav-escritorio[data-astro-cid-ocp5e6q2][data-indicador] .indicador[data-astro-cid-ocp5e6q2] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-escritorio[data-astro-cid-ocp5e6q2][data-listo] .indicador[data-astro-cid-ocp5e6q2] {
    transition: translate .65s var(--entrada-curva), width .65s var(--entrada-curva), opacity .3s var(--curva);
  }
}

.app-pill[data-astro-cid-ocp5e6q2] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--c-cafe);
  text-decoration: none;
}

.app-icono[data-astro-cid-ocp5e6q2] {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-cielo);
  padding: 6px;
  box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--c-cafe-arena) 70%, transparent);
}

.app-icono[data-astro-cid-ocp5e6q2] svg {
  width: 100%;
}

.pronto[data-astro-cid-ocp5e6q2] {
  font-family: var(--f-sub);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.pronto[data-astro-cid-ocp5e6q2] b[data-astro-cid-ocp5e6q2] {
  display: block;
  font-weight: 400;
  color: var(--c-tinta);
}

.reservar[data-astro-cid-ocp5e6q2] {
  min-height: 42px;
  padding: .6em 1.25em;
  font-size: var(--t-xs);
}

.menu-boton[data-astro-cid-ocp5e6q2] {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.menu-boton[data-astro-cid-ocp5e6q2] span[data-astro-cid-ocp5e6q2] {
  width: 24px;
  height: 1.5px;
  background: var(--c-tinta);
  border-radius: 2px;
}

.menu-boton[data-astro-cid-ocp5e6q2] span[data-astro-cid-ocp5e6q2]:last-child {
  width: 16px;
  translate: 4px;
}

#menu-movil[data-astro-cid-ocp5e6q2] {
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  border: 0;
  padding: 6.5rem var(--gutter) 2rem;
  background: none;
  color: var(--c-tinta);
  overflow: hidden;
  transition: display 1.1s allow-discrete, overlay 1.1s allow-discrete;
}

#menu-movil[data-astro-cid-ocp5e6q2]::backdrop {
  background: none;
}

.marea[data-astro-cid-ocp5e6q2] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.capa[data-astro-cid-ocp5e6q2] {
  --cresta: clamp(70px, 11vh, 150px);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cresta) * -1);
  height: calc(100% + var(--cresta));
  translate: 0;
  transition: translate .9s cubic-bezier(.37, 0, .63, 1) var(--abre, 0s);
}

.c-fondo[data-astro-cid-ocp5e6q2] {
  --abre: 0s;
  --cierra: .16s;
}

.c-media[data-astro-cid-ocp5e6q2] {
  --abre: 90ms;
  --cierra: 80ms;
}

.c-frente[data-astro-cid-ocp5e6q2] {
  --abre: .18s;
  --cierra: 0s;
}

#menu-movil[data-astro-cid-ocp5e6q2]:not(:popover-open) .capa[data-astro-cid-ocp5e6q2] {
  translate: 0 100%;
  transition-delay: var(--cierra);
}

@starting-style {
  #menu-movil[data-astro-cid-ocp5e6q2]:popover-open .capa[data-astro-cid-ocp5e6q2] {
    translate: 0 100%;
  }
}

#menu-movil[data-astro-cid-ocp5e6q2]:popover-open .capa[data-astro-cid-ocp5e6q2] .ola {
  animation: 22s linear infinite menu-derivar;
}

#menu-movil[data-astro-cid-ocp5e6q2]:popover-open .c-media[data-astro-cid-ocp5e6q2] .ola {
  animation-duration: 17s;
  animation-direction: reverse;
}

#menu-movil[data-astro-cid-ocp5e6q2]:popover-open .c-frente[data-astro-cid-ocp5e6q2] .ola {
  animation-duration: 30s;
}

.menu-vidrio[data-astro-cid-ocp5e6q2] {
  position: absolute;
  right: -12%;
  bottom: -4%;
  width: min(78vw, 26rem);
  height: auto;
  opacity: .55;
  pointer-events: none;
  filter: drop-shadow(0 18px 30px #2b607833);
  translate: 0;
  transition: opacity .7s var(--curva) .45s, translate .9s var(--curva) .45s;
}

#menu-movil[data-astro-cid-ocp5e6q2]:popover-open .menu-vidrio[data-astro-cid-ocp5e6q2] {
  animation: 6s ease-in-out infinite menu-mecer;
}

#menu-movil[data-astro-cid-ocp5e6q2]:not(:popover-open) .menu-vidrio[data-astro-cid-ocp5e6q2] {
  opacity: 0;
  translate: 0 20%;
  transition-delay: 0s;
}

@starting-style {
  #menu-movil[data-astro-cid-ocp5e6q2]:popover-open .menu-vidrio[data-astro-cid-ocp5e6q2] {
    opacity: 0;
    translate: 0 20%;
  }
}

#menu-movil[data-astro-cid-ocp5e6q2] ul[data-astro-cid-ocp5e6q2] {
  position: relative;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

#menu-movil[data-astro-cid-ocp5e6q2] li[data-astro-cid-ocp5e6q2] {
  opacity: 1;
  translate: 0;
  filter: blur();
  transition-property: opacity, translate, filter;
  transition-duration: .75s;
  transition-timing-function: var(--curva);
  transition-delay: calc(.52s + var(--i) * 80ms);
}

#menu-movil[data-astro-cid-ocp5e6q2]:not(:popover-open) li[data-astro-cid-ocp5e6q2] {
  opacity: 0;
  translate: 0 2rem;
  filter: blur(8px);
  transition-duration: .3s;
  transition-delay: 0s;
}

@starting-style {
  #menu-movil[data-astro-cid-ocp5e6q2]:popover-open li[data-astro-cid-ocp5e6q2] {
    opacity: 0;
    translate: 0 2rem;
    filter: blur(8px);
  }
}

.menu-pie[data-astro-cid-ocp5e6q2] {
  transition: opacity .6s var(--curva) .78s;
}

#menu-movil[data-astro-cid-ocp5e6q2]:not(:popover-open) .menu-pie[data-astro-cid-ocp5e6q2] {
  opacity: 0;
  transition-duration: .25s;
  transition-delay: 0s;
}

@starting-style {
  #menu-movil[data-astro-cid-ocp5e6q2]:popover-open .menu-pie[data-astro-cid-ocp5e6q2] {
    opacity: 0;
  }
}

.cerrar[data-astro-cid-ocp5e6q2] {
  transition: opacity .5s var(--curva) .6s;
}

#menu-movil[data-astro-cid-ocp5e6q2]:not(:popover-open) .cerrar[data-astro-cid-ocp5e6q2] {
  opacity: 0;
  transition-duration: .2s;
  transition-delay: 0s;
}

@starting-style {
  #menu-movil[data-astro-cid-ocp5e6q2]:popover-open .cerrar[data-astro-cid-ocp5e6q2] {
    opacity: 0;
  }
}

@keyframes menu-derivar {
  to {
    transform: translateX(-50%);
  }
}

@keyframes menu-mecer {
  50% {
    transform: translateY(-3%) rotate(3deg);
  }
}

.cerrar[data-astro-cid-ocp5e6q2] {
  position: absolute;
  top: 1.25rem;
  right: var(--gutter);
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--c-cafe-arena);
  border-radius: 999px;
  background: var(--c-blanco);
  color: var(--c-cafe);
  font-family: var(--f-sub);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

#menu-movil[data-astro-cid-ocp5e6q2] li[data-astro-cid-ocp5e6q2] a[data-astro-cid-ocp5e6q2] {
  display: block;
  padding: .8rem 0;
  font-family: var(--f-marca);
  text-transform: uppercase;
  font-size: clamp(2.25rem, 9vw, 3rem);
  text-decoration: none;
  background: linear-gradient(var(--c-cafe), var(--c-cafe)) no-repeat 0 100% / 0% 2px;
  border-bottom: 1px solid var(--linea);
  transition: background-size .6s var(--curva);
}

#menu-movil[data-astro-cid-ocp5e6q2] li[data-astro-cid-ocp5e6q2] a[data-astro-cid-ocp5e6q2]:is(:hover, :focus-visible, :active) {
  background-size: 100% 2px;
}

#menu-movil[data-astro-cid-ocp5e6q2] li[data-astro-cid-ocp5e6q2] a[data-astro-cid-ocp5e6q2][aria-current="page"] {
  color: var(--c-mar);
}

.menu-pie[data-astro-cid-ocp5e6q2] {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .encabezado[data-astro-cid-ocp5e6q2], #menu-movil[data-astro-cid-ocp5e6q2], #menu-movil[data-astro-cid-ocp5e6q2] li[data-astro-cid-ocp5e6q2], .capa[data-astro-cid-ocp5e6q2], .menu-vidrio[data-astro-cid-ocp5e6q2], .menu-pie[data-astro-cid-ocp5e6q2], .cerrar[data-astro-cid-ocp5e6q2] {
    transition: none;
  }

  #menu-movil[data-astro-cid-ocp5e6q2] .capa[data-astro-cid-ocp5e6q2] .ola, #menu-movil[data-astro-cid-ocp5e6q2] .menu-vidrio[data-astro-cid-ocp5e6q2] {
    animation: none !important;
  }
}

@media (width <= 1100px) {
  .nav-escritorio[data-astro-cid-ocp5e6q2], .reservar[data-astro-cid-ocp5e6q2] {
    display: none;
  }

  .app-pill[data-astro-cid-ocp5e6q2] {
    margin-left: auto;
  }

  .menu-boton[data-astro-cid-ocp5e6q2] {
    display: inline-flex;
    position: relative;
    z-index: 60;
    margin-left: 0;
  }
}

@media (width <= 480px) {
  .barra[data-astro-cid-ocp5e6q2] {
    gap: .75rem;
  }

  .app-pill[data-astro-cid-ocp5e6q2] {
    gap: .45rem;
  }
}
.orilla-agua[data-astro-cid-5e2g2tlt] {
  --ancho-borde: max(100%, 1300px);
  position: relative;
  overflow: clip;
  mask: url("/marca/orilla-mascara.svg") 50% 0 / var(--ancho-borde) var(--borde) no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--borde) - 2px) / 100% 100% no-repeat;
}

.foto-agua[data-astro-cid-5e2g2tlt] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.espuma[data-astro-cid-5e2g2tlt] {
  position: absolute;
  inset: 0 0 auto;
  height: var(--borde);
  background: url("/marca/espuma.svg") 50% 0 / var(--ancho-borde) 100% no-repeat;
}
.pie[data-astro-cid-kb2vq6wp] {
  position: relative;
  margin-top: var(--sec);
  color: var(--c-tinta);
}

.pie[data-astro-cid-kb2vq6wp] {
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(to bottom, var(--fondo) 0, color-mix(in oklab, var(--c-arena-dorada) 26%, var(--c-blanco)) calc(var(--ola-borde) * .55),
      color-mix(in oklab, var(--c-arena-dorada) 34%, var(--c-blanco)) var(--ola-borde));
}

.mar[data-astro-cid-kb2vq6wp] {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.mar[data-astro-cid-kb2vq6wp] .mar-agua {
  position: absolute;
  inset: 0;
}

.profundidad[data-astro-cid-kb2vq6wp] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0, transparent var(--ola-borde), color-mix(in oklab, var(--c-espuma) 42%, transparent) calc(var(--ola-borde) + 6rem),
        color-mix(in oklab, var(--c-cielo) 30%, transparent) 60%, color-mix(in oklab, var(--c-mar) 38%, transparent) 100%);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mar[data-astro-cid-kb2vq6wp] .mar-agua {
      animation: linear both entra-ola;
      animation-timeline: view();
      animation-range: entry entry 70%;
    }

    .mar[data-astro-cid-kb2vq6wp] .foto-agua {
      animation: linear both hundirse;
      animation-timeline: view();
      animation-range: entry exit 0%;
    }
  }
}

@keyframes entra-ola {
  from {
    transform: translateY(22vh);
  }
}

@keyframes hundirse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.18);
  }
}

.cuerpo[data-astro-cid-kb2vq6wp] {
  padding-top: calc(var(--ola-borde) * .85);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.placa[data-astro-cid-kb2vq6wp] {
  padding-inline: clamp(1.25rem, 3.5vw, 3rem);
  padding-bottom: 1.25rem;
  border-radius: 14px;
  background: color-mix(in oklab, var(--c-espuma) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid color-mix(in oklab, var(--c-blanco) 70%, transparent);
}

.cierre[data-astro-cid-kb2vq6wp] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid color-mix(in oklab, var(--c-cafe-arena) 45%, transparent);
}

.cierre[data-astro-cid-kb2vq6wp] .etiqueta[data-astro-cid-kb2vq6wp] {
  color: var(--c-tinta);
}

.pie[data-astro-cid-kb2vq6wp] .cierre-titulo[data-astro-cid-kb2vq6wp] {
  font-family: var(--f-marca);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  line-height: 1;
  margin: .4em 0 .5em;
}

.cierre-acciones[data-astro-cid-kb2vq6wp] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
}

.cierre-figura[data-astro-cid-kb2vq6wp] {
  max-width: 26rem;
  justify-self: end;
  width: 100%;
}

.cierre-figura[data-astro-cid-kb2vq6wp] img[data-astro-cid-kb2vq6wp] {
  display: block;
  width: 100%;
  height: auto;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cierre-figura[data-astro-cid-kb2vq6wp] img[data-astro-cid-kb2vq6wp] {
      animation: linear both escultura;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes escultura {
  from {
    transform: translateY(8vh) rotate(-5deg) scale(.94);
    opacity: .4;
  }

  45% {
    opacity: 1;
  }

  to {
    transform: translateY(-6vh) rotate(4deg) scale(1);
  }
}

.rejilla[data-astro-cid-kb2vq6wp] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}

.logo[data-astro-cid-kb2vq6wp] {
  width: 7rem;
  height: auto;
}

.pie[data-astro-cid-kb2vq6wp] p[data-astro-cid-kb2vq6wp], .pie[data-astro-cid-kb2vq6wp] li[data-astro-cid-kb2vq6wp] {
  margin-block: 0 .5rem;
  font-size: var(--t-s);
}

.pie[data-astro-cid-kb2vq6wp] ul[data-astro-cid-kb2vq6wp] {
  list-style: none;
  margin-block: 0;
  padding: 0;
}

.pie[data-astro-cid-kb2vq6wp] a[data-astro-cid-kb2vq6wp]:not(.boton) {
  display: inline-block;
  padding-block: .3rem;
  color: var(--c-tinta);
}

.rejilla[data-astro-cid-kb2vq6wp] .etiqueta[data-astro-cid-kb2vq6wp] {
  color: var(--c-tinta);
  margin-bottom: 1rem;
  opacity: .8;
}

.pendiente[data-astro-cid-kb2vq6wp] {
  font-size: var(--t-xs);
}

.firma[data-astro-cid-kb2vq6wp] {
  display: flex;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--c-cafe-arena) 45%, transparent);
}

.firma[data-astro-cid-kb2vq6wp] p[data-astro-cid-kb2vq6wp] {
  margin: 0 !important;
  font-size: var(--t-xs) !important;
}

@media (width <= 760px) {
  .cierre[data-astro-cid-kb2vq6wp] {
    grid-template-columns: 1fr;
  }

  .cierre-figura[data-astro-cid-kb2vq6wp] {
    max-width: 11rem;
    justify-self: start;
    order: -1;
  }

  .rejilla[data-astro-cid-kb2vq6wp] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
    padding-block: 2.5rem 1.5rem;
  }

  .rejilla[data-astro-cid-kb2vq6wp] > [data-astro-cid-kb2vq6wp]:first-child {
    display: none;
  }

  .rejilla[data-astro-cid-kb2vq6wp] > [data-astro-cid-kb2vq6wp]:nth-child(2), .rejilla[data-astro-cid-kb2vq6wp] > [data-astro-cid-kb2vq6wp]:nth-child(4) {
    grid-column: 1 / -1;
  }

  .rejilla[data-astro-cid-kb2vq6wp] > [data-astro-cid-kb2vq6wp]:nth-child(4) ul[data-astro-cid-kb2vq6wp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .rejilla[data-astro-cid-kb2vq6wp] .etiqueta[data-astro-cid-kb2vq6wp] {
    margin-bottom: .5rem;
  }

  .pie[data-astro-cid-kb2vq6wp] p[data-astro-cid-kb2vq6wp], .pie[data-astro-cid-kb2vq6wp] li[data-astro-cid-kb2vq6wp] {
    margin-block: 0 .2rem;
  }
}
.intro[data-astro-cid-vnmok4ev] {
  display: none;
}

html.intro .intro[data-astro-cid-vnmok4ev] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--c-blanco);
  animation: 1.2s cubic-bezier(.65, 0, .25, 1) 1.8s forwards intro-subir;
}

html.intro body {
  overflow: hidden;
}

.centro[data-astro-cid-vnmok4ev] {
  display: grid;
  justify-items: center;
}

.intro[data-astro-cid-vnmok4ev] .logo-intro {
  width: clamp(13rem, 34vw, 22rem);
}

.intro[data-astro-cid-vnmok4ev]:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22vh;
  background: linear-gradient(to bottom, var(--c-blanco), color-mix(in oklab, var(--c-blanco) 0%, transparent));
}

@keyframes intro-subir {
  to {
    translate: 0 calc(-100% - 22vh);
  }
}
.saltar[data-astro-cid-hkbrpulz] {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--c-mar);
  color: var(--c-blanco);
  border-radius: 8px;
}

.saltar[data-astro-cid-hkbrpulz]:focus {
  top: 1rem;
}