/* ════════════════════════════════════════════════════════════════
   Tsunami Club · hoja de estilos compartida de la web pública
   Sistema "Aire". La usan inicio, planes, el-tunel, consejos y contacto.
   Cada página solo añade lo suyo propio.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted';
  src: url('/fonts/schibsted-grotesk.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --tinta: #102340; --tinta-h: #0b1b33;
  --texto: #0b1b33; --texto-2: #556377; --texto-3: #93a0b1;
  --linea: #e4e9f0; --campo: #dbe1ea; --fondo: #eef1f6; --sup: #ffffff;
  --agua-1: #4aaee3; --agua-2: #1769be;
  --sombra: 0 1px 2px rgba(11,27,51,0.04), 0 18px 50px -30px rgba(11,27,51,0.26);
  --maxw: 1200px;

    /* ── Cristal ─────────────────────────────────────────────────────
     La prueba de si un cristal está bien hecho: detrás se ve el COLOR,
     nunca la FORMA. En la barra de iOS se adivina la mancha verde de un
     icono, pero la palabra que hay debajo es ilegible. Ese es el listón.

     Antes fallaba por dos sitios a la vez: 26px de desenfoque no deshacen
     un texto de 15px, y un blanco al 22% en el centro no tapa nada. Se
     leía todo lo de detrás, y por eso parecía una lámina transparente.

     Son DOS efectos distintos y hacen falta los dos:

     1. El CUERPO deshace lo que hay detrás. Desenfoque grande, blanco
        medio y contraste bajado. Lo de detrás pierde brillo y por tanto
        deja de identificarse, pero el color sigue pasando.

     2. El CANTO refracta. En un vidrio grueso el borde no difumina: DESVÍA.
        Por eso, cuando algo pasa por detrás del canto, se ve estirado y
        arrastrado hacia dentro, como el icono azul en la barra de iOS.
        Eso no lo hace ningún desenfoque: hace falta desplazar píxeles, y
        eso solo lo da un filtro SVG (feDisplacementMap) aplicado sobre el
        fondo. Ver el bloque de la lente más abajo.

     Un intento anterior fue subir el blanco al 52% para tapar el texto.
     Tapaba, sí, pero también el color, y quedaba un botón blanco. El que
     tiene que borrar la forma es el desenfoque; el blanco solo pone
     cuerpo. Deshacer sin tapar: eso es. */
  --vidrio-blur: blur(32px) saturate(180%) contrast(0.88);
  /* Hasta dónde entra el desenfoque fuerte antes de desvanecerse. No es el
     grosor de un borde: es la distancia en la que el centro se convierte
     en canto, y por eso es generosa. En horizontal entra más porque la
     pieza es mucho más ancha que alta. */
  --vidrio-nucleo-x: 30px;
  --vidrio-nucleo-y: 17px;
  --vidrio-filo: rgba(11,27,51,0.10);
  /* El blanco del cuerpo y el del aro tienen que quedar CERCA. Si el cuerpo
     es bastante más claro, su borde se dibuja solo y aparece una segunda
     cápsula dentro de la cápsula. En un vidrio la claridad sube hacia el
     canto, nunca al revés. */
  --vidrio-fondo: linear-gradient(
      180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.34) 100%);
  /* El cuerpo NO lleva brillo propio. Lo llevaba, y como está metido hacia
     dentro el grosor del canto, ese brillo dibujaba su propio contorno: se
     veía una segunda cápsula dentro de la cápsula. El destello es uno y va
     en el aro, que es donde entra la luz en un vidrio de verdad. */
  --vidrio-sombra:                            /* va FUERA, en la pieza */
      0 1px 1px rgba(11,27,51,0.05),
      0 10px 26px -8px rgba(11,27,51,0.2);

  /* Sobre oscuro se invierte: ahí el canto SÍ es blanco, como en Apple */
  --vidrio-filo-osc: rgba(255,255,255,0.18);
  --vidrio-fondo-osc: linear-gradient(
      180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.18) 100%);
  --vidrio-sombra-osc:
      inset 0 1px 0.5px rgba(255,255,255,0.4),
      inset 0 -1px 0.5px rgba(255,255,255,0.16),
      0 8px 24px -8px rgba(0,0,0,0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Schibsted', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6;
  position: relative; overflow-x: clip;
}
/* ── Luz de agua bajo la cabecera ──────────────────────────────────
   Un cristal solo se ve si detrás hay algo que refractar. La cápsula del
   menú se apoyaba sobre gris plano, y desenfocar un color plano devuelve
   el mismo color plano: por eso parecía un botón blanco por mucho que se
   ajustara la receta. El problema no estaba en el vidrio, estaba detrás.

   Va en el body y no en cada página para que las 8 se vean igual, y se
   mueve muy despacio para que el reflejo del canto no quede clavado. */
body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 640px;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 52% at 18% 14%, rgba(74,174,227,0.30), transparent 68%),
    radial-gradient(40% 46% at 78% 4%,  rgba(23,105,190,0.22), transparent 70%),
    radial-gradient(32% 40% at 54% 30%, rgba(120,200,240,0.20), transparent 72%);
  animation: respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.09); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
a { color: inherit; text-decoration: none; }
img, iframe { max-width: 100%; }
::selection { background: rgba(74,174,227,0.24); }

.band { width: 100%; }
.band-white { background: var(--sup); }
.band-tinta { background: var(--tinta); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.wrap-narrow { max-width: 760px; }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 430;
  font-variation-settings: "opsz" 144; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--texto); text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 430; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--tinta);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.5; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: 999px; padding: 14px 28px; border: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), background .25s, box-shadow .25s, filter .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 10px 20px; font-size: 14.5px; }

.btn-pri {
  background: var(--tinta); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(11,27,51,0.2),
    0 10px 24px -12px rgba(11,27,51,0.55);
}
.btn-pri:hover { background: var(--tinta-h); filter: brightness(1.08); }

/* ── El vidrio, en dos capas superpuestas ──────────────────────────
   Una sola capa no puede hacerlo: el centro tiene que deshacer lo que hay
   detrás y el canto tiene que desviarlo. Pero repartirlo en un anillo y
   un relleno tampoco vale, y ese fue el error de la versión anterior:
   donde acaba un trozo y empieza el otro queda un BORDE DURO, y la
   cápsula se ve como un aro pegado alrededor de otra cosa. Se probó con
   los dos trozos al mismo desenfoque y al mismo tinte, y la línea seguía
   ahí: no venía de los valores, venía de que había dos trozos.

   Ahora las dos capas ocupan la pieza ENTERA y se suman:

   ::before  toda la pieza. Lente + desenfoque suave + el tinte, el
             destello y la sombra. El canto ya está resuelto aquí.
   ::after   toda la pieza. Solo desenfoque fuerte, SIN tinte, y con una
             máscara que se desvanece hacia los bordes. Es lo que deshace
             el centro.

   Al desvanecerse la segunda, el paso de "centro deshecho" a "canto que
   refracta" es un degradado y no hay ninguna línea que dibujar. Y como el
   tinte lo pone solo la primera, el color es el mismo en toda la pieza.

   Tienen que ser capas HERMANAS y no una dentro de otra: si el desenfoque
   estuviera en la pieza, el canto solo podría muestrear lo que ya está
   desenfocado y volveríamos a una lámina plana. */
.btn-glass, .nav, .vidrio {
  position: relative; isolation: isolate;
  background: none; border: none;
  box-shadow: var(--vidrio-sombra);
}
/* Capa 1 · la pieza entera: refracta el canto y pone el color */
.btn-glass::before, .nav::before, .vidrio::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  -webkit-backdrop-filter: blur(7px) saturate(1.8) contrast(0.88);
          backdrop-filter: blur(7px) saturate(1.8) contrast(0.88);
  /* El brillo diagonal va SUMADO al tinte común, no en su lugar: el canto
     se ve iluminado sin cambiar de material. */
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0)    38%,
      rgba(255,255,255,0)    62%,
      rgba(255,255,255,0.1)  100%),
    var(--vidrio-fondo);
  /* El destello, en una línea de un píxel */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.5);
  transition: background .5s;
}
/* Capa 2 · el núcleo: deshace el centro y se desvanece hacia el canto */
.btn-glass::after, .nav::after, .vidrio::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur);
  /* Dos degradados, uno por eje, que se cruzan: opaco en el centro y
     transparente en los bordes. La caída es progresiva, y ahí está la
     diferencia con el anillo recortado de antes. El vertical entra menos
     porque la pieza es mucho más baja que ancha. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--vidrio-nucleo-x), #000 calc(100% - var(--vidrio-nucleo-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--vidrio-nucleo-y), #000 calc(100% - var(--vidrio-nucleo-y)), transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 var(--vidrio-nucleo-x), #000 calc(100% - var(--vidrio-nucleo-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--vidrio-nucleo-y), #000 calc(100% - var(--vidrio-nucleo-y)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ── La lente del canto ────────────────────────────────────────────
   Lo que convierte el canto en vidrio de verdad: cuando algo pasa por
   detrás del borde, sale ESTIRADO y arrastrado hacia dentro, igual que
   el icono azul en la barra de búsqueda de iOS. No es desenfoque: es
   desplazamiento de píxeles, y solo lo da un filtro SVG.

   El mapa es una rampa: gris neutro (128) en el centro, y sube o baja
   solo cerca de los bordes. Van dos pasadas, una por eje, porque cada
   canal del mapa mueve en una dirección y así cada mapa es una rampa
   simple de un solo eje en vez de una imagen de dos canales.

   Va en la capa 1, la que ocupa la pieza entera, y va PRIMERA en la
   cadena: primero se desvía y luego se desenfoca, no al revés. Así lo
   estirado se ve borroso, que es como se ve en la barra de iOS, y no una
   franja nítida pegada a un centro deshecho.

   La clase la pone web.js DESPUÉS de inyectar el SVG. Si se pusiera en
   el CSS a secas, entre que carga la hoja y aparece el filtro habría un
   momento en que `url(#ts-lente)` apunta a nada, y ahí los navegadores
   no se comportan igual: unos ignoran el filtro y otros no pintan el
   elemento. Con la clase, o está todo o no está nada.

   Sin soporte (Safari y Firefox hoy) queda el aro con su desenfoque
   mínimo, que ya distingue el canto del centro. Se pierde el estirado,
   no la pieza. */
/* La lente va PRIMERA en la cadena: se desvía y luego se desenfoca, no al
   revés. Así lo estirado se ve borroso, que es como se ve en la barra de
   iOS, y no una franja nítida pegada a un centro deshecho.

   El desenfoque del aro es 9px y el del cuerpo 32px. La diferencia tiene
   que ser suficiente para que el canto se lea como canto, pero no tanta
   como para que parezca otro material: con 1,2px se veía la línea del
   borde. La saturación y el contraste son los mismos que en el cuerpo. */
html.ts-lente .btn-glass::before,
html.ts-lente .nav::before,
html.ts-lente .vidrio::before {
  -webkit-backdrop-filter: url(#ts-lente) blur(7px) saturate(1.8) contrast(0.88);
          backdrop-filter: url(#ts-lente) blur(7px) saturate(1.8) contrast(0.88);
}

.btn-glass {
  /* El núcleo se mide contra el tamaño de la pieza, no en absoluto: los
     valores de la cápsula en un botón de 46px no dejarían centro. */
  --vidrio-nucleo-x: 20px;
  --vidrio-nucleo-y: 12px;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s;
  color: var(--tinta);
}
/* ── Hover del cristal ─────────────────────────────────────────────
   Nada de destellos que cruzan: eso llama la atención sobre el efecto,
   no sobre el botón. Lujo es contención. Tres cosas a la vez, lentas y
   pequeñas, que juntas se leen como que la pieza se levanta:
     · la luz crece POR DENTRO del vidrio (halo interior)
     · la sombra proyectada se hunde y se abre
     · el botón sube 2px
   Medio segundo, no un cuarto: la prisa es lo que abarata un gesto. */
.btn-glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 1px rgba(11,27,51,0.06), 0 18px 38px -10px rgba(11,27,51,0.26);
}
/* El aro se enciende: la luz recorre el canto al levantarse la pieza */
/* Al levantarse, la luz recorre el canto: sube el brillo diagonal sin
   tocar el tinte, que es común a toda la pieza. */
.btn-glass:hover::before {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0)    38%,
      rgba(255,255,255,0)    62%,
      rgba(255,255,255,0.22) 100%),
    var(--vidrio-fondo);
}
.btn-glass:active { transform: translateY(0) scale(0.975); transition-duration: .12s; }


/* Sobre fondo oscuro el vidrio se invierte: el canto brilla en blanco */
.on-dark .btn-glass, .btn-glass-dark { color: #fff; box-shadow: var(--vidrio-sombra-osc); }
.on-dark .btn-glass::before, .btn-glass-dark::before { background: var(--vidrio-fondo-osc); }
/* Mismo gesto contenido sobre oscuro, con el bisel oscuro: el canto no
   puede volverse blanco de golpe o el botón parpadea. */
.on-dark .btn-glass:hover, .btn-glass-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.55), var(--vidrio-sombra-osc);
}
.on-dark .btn-glass:hover::before, .btn-glass-dark:hover::before {
  background: rgba(255,255,255,0.3);
  box-shadow: inset 0 0 24px 5px rgba(255,255,255,0.1);
}

/* Chip de cristal para etiquetas pequeñas sobre fondo oscuro (el carnet).
   Aquí el desenfoque no aporta, porque detrás solo hay un degradado: lo que
   se ve es el canto, y basta para que la etiqueta parezca incrustada. */
.chip-glass {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: rgba(255,255,255,0.1); color: #cfe0f2;
  box-shadow: var(--vidrio-sombra-osc);
  /* Centrado ÓPTICO, no matemático. Dos correcciones:
     · abajo 1px menos: la caja reserva sitio para las colas de las letras
       (p, g) y en mayúsculas no hay ninguna, así que sobra hueco debajo.
     · izquierda 2px más: el espaciado entre letras deja un hueco tras la
       última, que empuja el texto hacia la izquierda. */
  line-height: 1;
  padding: 6px 11px 5px 13px;
}

/* Sin desenfoque no hay nada que deshaga el fondo, así que el tinte tiene
   que opacar por sí solo o el texto de dentro se pierde. La capa del
   núcleo sobra: sin desenfoque no aporta nada y su máscara solo pondría
   un degradado raro. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-glass::after, .nav::after, .vidrio::after { display: none; }
  .btn-glass::before, .vidrio::before { background: rgba(255,255,255,0.9); }
  .nav::before { background: rgba(255,255,255,0.93); }
  .on-dark .btn-glass::before, .btn-glass-dark::before { background: rgba(22,45,78,0.85); }
}

/* ── Cabecera: cápsula flotante ────────────────────────────────────
   La barra no cruza la pantalla de lado a lado: es una pieza de cristal
   que envuelve solo a sus elementos y flota sobre el contenido, como la
   barra de reproducción de iOS.

   La franja de la cabecera es transparente y NO captura el ratón
   (pointer-events), o el hueco invisible a los lados taparía los clics
   del contenido que hay debajo. */
header {
  position: sticky; top: 0; z-index: 60; pointer-events: none;
  padding: 14px clamp(14px, 4vw, 40px);
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
header.scrolled { padding-top: 10px; }

.nav {
  pointer-events: auto;
  width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  height: 64px; padding: 0 14px 0 30px; border-radius: 999px;
  transition: box-shadow .35s;
}
.nav::before { transition: background .35s; }
.nav.wrap { /* gana a .wrap: la cápsula se ajusta al contenido, no al ancho */
  width: -moz-fit-content; width: fit-content; padding: 0 14px 0 30px;
}
/* Al bajar sube un punto la opacidad: hay contenido pasando por detrás y
   el vidrio necesita algo más de cuerpo para que el menú siga leyéndose.
   Sigue muy por debajo de tapar. */
header.scrolled .nav {
  box-shadow: 0 1px 1px rgba(11,27,51,0.06), 0 16px 38px -10px rgba(11,27,51,0.24);
}
header.scrolled .nav::before {
  background: linear-gradient(180deg,
      rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0.38) 100%);
}
.wm { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; }
.wm i { font-style: normal; color: var(--texto-3); font-weight: 400; }
/* Dentro de una cápsula el subrayado no cabe: la página activa se marca
   con una pastilla, como los selectores de iOS. */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 14.5px; color: var(--texto-2); padding: 8px 14px; border-radius: 999px;
  transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--texto); background: rgba(255,255,255,0.5); }
.nav-links a.on {
  color: var(--texto); font-weight: 600;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 1px 3px rgba(11,27,51,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
}
@media (max-width: 900px) { .nav-links { display: none; } }

/* Menú móvil */
.burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.6); border: none; border-radius: 999px; cursor: pointer;
  color: var(--texto); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(11,27,51,0.08);
}
.burger svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .burger { display: inline-flex; } }

/* Panel flotante bajo la cápsula, no una franja pegada al borde */
.movil {
  display: none; pointer-events: auto;
  max-width: 420px; margin: 12px auto 0; padding: 6px 20px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9);
  box-shadow: 0 12px 34px -12px rgba(11,27,51,0.3), var(--vidrio-sombra);
}
.movil.abierto { display: block; }
.movil .wrap { padding: 0; }
.movil a { display: block; padding: 15px 0; font-size: 16px; color: var(--texto-2); border-bottom: 1px solid var(--linea); }
.movil a:last-of-type { border-bottom: none; }
.movil a.on { color: var(--texto); font-weight: 600; }
.movil .btn { width: 100%; margin: 16px 0 20px; }
@media (min-width: 901px) { .movil { display: none !important; } }

/* ── Secciones ── */
section.blk { padding-block: clamp(60px, 9vw, 112px); }

/* ── Secciones a pantalla ──────────────────────────────────────────
   Como hace Vercel: al bajar, cada parada ocupa la pantalla entera y no
   se ven dos secciones a medias peleándose. El contenido va centrado en
   vertical, así que el aire sobra arriba y abajo por igual.

   min-height y no height: si el contenido crece (móvil, texto largo) la
   sección se estira en vez de recortarse. */
@media (min-width: 900px) {
  section.blk.pantalla {
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    /* El mínimo era 72px y en un portátil corto se comía 144px de los 685
       útiles. Con 48 la sección respira igual en un monitor grande (donde
       manda el 7vh) y cabe en el portátil. */
    padding-block: clamp(48px, 7vh, 110px);
    /* Ancla al empezar la sección: sin esto la rueda deja la pantalla a
       medio camino y se ven dos secciones cortadas. Con "proximity" y no
       "mandatory", solo ajusta si ya estás cerca: si el visitante quiere
       parar en medio a leer, puede. Mandatory le quitaría el control. */
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  html { scroll-snap-type: y proximity; }
  /* La cápsula del menú flota encima: sin este margen taparía el filete
     y la primera línea de cada sección al anclar. */
  section.blk.pantalla { scroll-margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }

/* Costura entre dos secciones del mismo suelo. Sin ella el espacio se
   lee como vacío en vez de como respiro. El filete ya es parte del
   lenguaje (pasos, fases, opiniones), así que separa sin añadir adorno. */
section.blk.filete { border-top: 1px solid var(--linea); }
/* Cierre de bloque: más aire antes del momento oscuro, para que el salto
   a Tinta llegue después de una pausa y no de golpe. */
section.blk.cierre { padding-bottom: clamp(84px, 12vw, 150px); }
/* El ritmo vertical se mide en ALTO, no en ancho.
   Estaba en vw, y en un portátil de 1440x780 sobra ancho y falta alto: la
   cabecera se llevaba 271px de los 685 útiles y la sección no cabía en
   pantalla. Con vh, en un monitor grande queda igual de generosa y en un
   portátil se recoge sola. El título usa min() de las dos: no puede pasarse
   ni de ancho de línea ni de alto disponible. */
.sec-head { max-width: 660px; margin-bottom: clamp(28px, 4.5vh, 56px); }
.sec-head h2 { font-size: clamp(30px, min(4.5vw, 5.6vh), 46px); margin-top: 16px; }
.sec-head p { font-size: 16.5px; color: var(--texto-2); margin-top: 14px; max-width: 50ch; }

/* Cabecera de página interior */
.page-head { padding-block: clamp(48px, 8vw, 92px) clamp(36px, 5vw, 56px); }
.page-head h1 { font-size: clamp(38px, 6vw, 64px); margin-top: 20px; }
.page-head p { font-size: 17.5px; color: var(--texto-2); margin-top: 18px; max-width: 54ch; }

/* ── Mapa real ── */
.mapa {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linea); box-shadow: var(--sombra);
  background: var(--campo); min-height: 320px;
}
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
/* Etiqueta flotante sobre el mapa: el otro sitio donde el cristal aporta,
   porque debajo hay un mapa de verdad. Sube al 62% de opacidad, no menos:
   sobre una imagen con detalle el texto necesita más base que sobre color. */
.mapa-tag {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.9); backdrop-filter: blur(16px) saturate(1.9);
  border: none; border-radius: 14px; padding: 11px 15px;
  box-shadow: 0 3px 12px rgba(11,27,51,0.2), var(--vidrio-sombra);
}
.mapa-tag b { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.mapa-tag span { font-size: 12.5px; color: var(--texto-2); }

/* ── Agua ambiental ────────────────────────────────────────────────
   Vive aquí y no en una página porque es EL activo de marca: si solo
   aparece en el hero, el resto de la web podría ser de cualquier negocio. */
.amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow {
  position: absolute; left: 50%; bottom: -35%; width: 150%; height: 95%; transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 60%, rgba(74,174,227,0.16), transparent 72%);
}
.waves {
  position: absolute; left: -25%; bottom: -6%; width: 150%; height: 320px; filter: blur(2px);
  -webkit-mask-image: radial-gradient(120% 150% at 50% 60%, #000 22%, transparent 78%);
          mask-image: radial-gradient(120% 150% at 50% 60%, #000 22%, transparent 78%);
}
/* Bucle SIN salto.
   El tirón se veía porque el recorrido (33%) no caía en un número entero
   de ondas: al reiniciar, la ola no estaba donde empezó.
   Ahora el dibujo mide 800 unidades con 4 ondas exactas de 200, la capa
   ocupa el doble de ancho, y el recorrido de -50% equivale justo a 2
   ondas completas. El final coincide con el principio y no se nota. */
.wlayer {
  position: absolute; top: 0; left: 0; width: 200%; height: 100%;
  will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.wlayer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w1 { animation: drift 40s linear infinite; }
.w2 { animation: drift 62s linear infinite reverse; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ── Superficie oscura ─────────────────────────────────────────────
   Dos momentos oscuros en toda la home, cada uno con un motivo: el túnel
   (por dentro es oscuro de verdad) y el cierre. No es alternar franjas. */
.on-dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark .eyebrow { color: #8fb4d8; }
.on-dark .sec-head p, .on-dark p { color: #aebfd6; }
.on-dark .sec-head { position: relative; z-index: 1; }

/* ── Cristal sobre fondo oscuro ────────────────────────────────────
   Sobre claro basta con desenfocar el fondo, pero sobre un fondo oscuro
   y sólido el desenfoque no tiene nada que difuminar: el vidrio se veía
   como un rectángulo gris. Hay que dibujarlo:
     · degradado propio, más claro arriba, como cristal recibiendo luz
     · filo superior brillante, que es donde la luz engancha
     · borde fino visible, porque sin él no hay pieza
     · sombra proyectada abajo, para que despegue del fondo */
.card-glass {
  position: relative; z-index: 1; border-radius: 16px; padding: 24px 22px;
  background: linear-gradient(158deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.035) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 0 14px 2px rgba(255,255,255,0.05),
    0 14px 34px -14px rgba(0,0,0,0.6);
  transition: background .3s, border-color .3s, transform .3s cubic-bezier(.4,0,.2,1);
}
/* Reflejo en la esquina superior, donde daría la luz.
   z-index -1: la tarjeta crea su propio contexto, así que el reflejo cae
   sobre el fondo pero POR DEBAJO del texto. Sin esto lo teñiría. */
.card-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 55% at 18% 0%, rgba(255,255,255,0.16), transparent 62%);
}
.card-glass:hover {
  background: linear-gradient(158deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 42%, rgba(255,255,255,0.05) 100%);
  border-color: rgba(255,255,255,0.26);
  transform: translateY(-3px);
}

/* ── Luz que sigue al cursor ───────────────────────────────────────
   Sustituye a las burbujas, que quedaban baratas. Una luz difusa con
   retardo se lee como reflejo sobre el agua, no como un adorno. */
.luz {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(74,174,227,0.24) 0%, rgba(74,174,227,0.1) 36%, transparent 68%);
}
.luz.on { opacity: 1; }

/* ── CTA final ── */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(64px, 10vw, 120px) 0; }
.cta .fglow {
  position: absolute; left: 50%; bottom: -50%; width: 90%; height: 130%; transform: translateX(-50%);
  background: radial-gradient(48% 55% at 50% 50%, rgba(74,174,227,0.34), transparent 68%); pointer-events: none;
}
.cta h2 { position: relative; color: #fff; font-size: clamp(32px, 5vw, 52px); }
.cta p { position: relative; color: #aebfd6; font-size: 16.5px; margin: 18px auto 32px; max-width: 42ch; }
.cta .btns { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta .btn-pri { background: #fff; color: var(--tinta); }
.cta .btn-pri:hover { background: #eef1f6; }

/* ── Footer ──────────────────────────────────────────────────────
   Sobre el mismo suelo que el resto: lo separa un filete, no un cambio
   de fondo. La marca en Fraunces y a tamaño grande: el pie es el último
   sitio donde la firma puede pesar, y es donde casi todas las webs la
   dejan caer a letra pequeña. */
footer { padding-block: clamp(64px, 8vw, 96px) 40px; border-top: 1px solid var(--linea); }
/* La marca va ARRIBA y los enlaces DEBAJO, en fila.
   Con la marca a la izquierda y las columnas a su derecha, el bloque
   quedaba descolgado hacia un lado. Apilado se lee de arriba abajo, que
   es como se lee un pie. */
.foot-marca {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; padding-bottom: clamp(34px, 4vw, 48px); border-bottom: 1px solid var(--linea);
}
.foot-marca .fb {
  font-family: 'Fraunces', Georgia, serif; font-weight: 430;
  font-variation-settings: "opsz" 144; font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.02em; color: var(--texto); line-height: 1;
}
.foot-marca .fb i { font-style: italic; color: var(--texto-3); }
/* Los datos del local son la firma de un negocio físico, no una descripción */
.foot-datos { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-datos span, .foot-datos a { font-size: 13.5px; color: var(--texto-3); }
.foot-datos a:hover { color: var(--texto); }

.foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(34px, 4vw, 48px); }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 400px) { .foot { grid-template-columns: 1fr; gap: 28px; } }

.foot-col h4 {
  font-family: 'Schibsted', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 18px;
}
/* El enlace se subraya al pasar, y el subrayado CRECE desde la izquierda.
   Es el único movimiento del pie: suficiente para que se note cuidado. */
/* block + width fit-content: apilados uno debajo de otro, pero el
   subrayado solo mide lo que el texto. Con inline-block salían en fila. */
.foot-col a {
  display: block; width: -moz-fit-content; width: fit-content;
  font-size: 14.5px; color: var(--texto-2);
  margin-bottom: 13px; position: relative; transition: color .25s;
}
.foot-col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.foot-col a:hover { color: var(--texto); }
.foot-col a:hover::after { transform: scaleX(1); }

.foot-legal {
  max-width: var(--maxw); margin: clamp(48px, 6vw, 72px) auto 0; padding: 26px clamp(20px,4vw,40px) 0;
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--texto-3);
}
.foot-legal .horario { display: inline-flex; align-items: center; gap: 8px; }
.foot-legal .pulso {
  width: 6px; height: 6px; border-radius: 50%; background: #128a3a;
  box-shadow: 0 0 0 3px rgba(18,138,58,0.16); flex-shrink: 0;
}

/* ── Pastilla deslizante del menú ──────────────────────────────────
   Una sola pastilla que viaja al enlace que señalas y vuelve a la página
   activa al soltar. Es un movimiento con sentido: sigue tu intención. */
.nav-links { position: relative; }
.nav-ind {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 1px 3px rgba(11,27,51,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
  opacity: 0; pointer-events: none; z-index: 0;
  /* Medio segundo largo: a esta velocidad el ojo SIGUE la pastilla en vez
     de verla aparecer al otro lado. Ahí está la diferencia. */
  transition: transform .55s cubic-bezier(.3,.9,.35,1), width .55s cubic-bezier(.3,.9,.35,1), opacity .3s;
}
.nav-links a { position: relative; z-index: 1; }
/* Con pastilla móvil, el fondo fijo del activo sobra */
.nav-links a.on { background: none; box-shadow: none; }

/* ── Transición al cambiar de página ───────────────────────────────
   Navegación entre documentos: el contenido se cruza. Solo en navegadores
   que lo soportan; en el resto la navegación es la de siempre.

   AQUÍ NO PUEDE IR `view-transition-name` EN LA CABECERA.
   Lo llevaba, para que la cápsula se quedara quieta al cambiar de página.
   Pero esa propiedad convierte al elemento en raíz de composición aislada,
   y entonces NADA de dentro puede muestrear lo que hay detrás: el
   backdrop-filter del vidrio dejaba de hacer efecto y la barra se veía
   transparente. Costó varias rondas encontrarlo porque el CSS del vidrio
   era correcto y el fallo estaba a trescientas líneas de distancia.

   Se quita y no se pierde nada apreciable: la barra es idéntica en las 8
   páginas, así que cruzarla con el resto no se nota. El vidrio sí. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtSale .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtEntra .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes vtSale  { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vtEntra { from { opacity: 0; transform: translateY(10px); } }

/* ── Movimiento ────────────────────────────────────────────────────
   Dos detalles y nada más. Cada uno significa algo: uno dice "esto es
   agua", el otro dice "ha llegado contenido nuevo". Decorar por decorar
   es lo que hace que una web parezca hecha por una plantilla. */

/* Aparición al entrar en pantalla. La clase la pone JS, así que sin JS
   no se oculta nada. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.visible {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, header, .nav { transition: none; }
  .reveal { opacity: 1; transform: none; }
}