/* ════════════════════════════════════════════════════════════════
   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: 'Anton';
  src: url('/fonts/anton.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600; 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: 'Inter', -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: 840px; }

h1, h2, h3 {
  font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  line-height: 0.95; color: var(--texto); text-wrap: balance;
}
h1 em, h2 em { font-style: normal; font-weight: 400; }

.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); margin-bottom: 12px;
}
.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);
}

/* ── Botón secundario, para superficies SÓLIDAS ────────────────────
   El de cristal no vale dentro de una tarjeta blanca: no hay nada detrás
   que refractar, así que se queda en un texto flotando y casi no se ve.
   Pasó literalmente en las tarjetas de /planes.

   REGLA: `.btn-glass` solo donde detrás haya algo que deshacer (el fondo de
   la página con su luz de agua, una foto, una banda oscura). Sobre blanco o
   sobre un color plano, `.btn-sec`. */
.btn-sec {
  background: none;
  color: var(--tinta);
  border: 1px solid var(--campo);
  transition: border-color .25s, background .25s, transform .2s cubic-bezier(.4,0,.2,1);
}
.btn-sec:hover { border-color: var(--texto-3); background: var(--fondo); }
.btn-sec:active { transform: scale(0.975); }

/* ── 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; }
/* El extremo derecho de la cápsula: "Soy socio" y la hamburguesa. Iba con un
   style en línea repetido en las ocho páginas; aquí es una sola vez. */
.nav-fin { display: flex; align-items: center; gap: 12px; }
.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;
}
/* Sin pastilla deslizante (táctil, o sin JS) el hover y el activo se marcan
   con el mismo vidrio, no con blanco plano. */
.nav-links a:hover { color: var(--texto); background: rgba(255,255,255,0.34); }
.nav-links a.on {
  color: var(--texto); font-weight: 600;
  background: linear-gradient(180deg,
      rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.36) 50%, rgba(255,255,255,0.44) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(11,27,51,0.06);
}
@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. */
    /* SIN anclaje de scroll. Estuvo en `proximity` justamente para no
       secuestrar la rueda, y aun así secuestraba.
       El motivo: estas secciones miden UNA PANTALLA, así que estés donde
       estés siempre caes cerca de un punto de anclaje, y `proximity` acaba
       comportándose igual que `mandatory`. No hay ninguna propiedad CSS para
       decirle «solo si estoy a menos de X píxeles»: el umbral lo decide el
       navegador.
       Así que la única forma de que no te bloquee es que no haya anclaje.
       A cambio la rueda puede dejar dos secciones a medias, que era lo que
       esto venía a evitar. Es un precio pequeño: una sección cortada se
       arregla siguiendo el scroll, y sentir que la página te agarra, no. */
  }
  /* 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; }
}

/* 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); }
/* ── Ritmo vertical ────────────────────────────────────────────────
   El espacio mira las DOS dimensiones y se queda con la MAYOR.

   Estaba en vw y en un portátil de 1440x780 la sección de Planes no cabía.
   Se pasó todo a vh, y con eso este margen bajó de 60 a 40px en una
   pantalla normal: un tercio menos de aire EN TODO EL SITIO para arreglar
   una sola sección. Y se notó: la web se quedó apretada.

   Con `max(vw, vh)` manda la dimensión más generosa, que es la que hace que
   respire, y el mínimo de la clamp sigue protegiendo los portátiles bajos.
   La sección que iba justa se aprieta en su propia página, sin arrastrar al
   resto. El tamaño del titular sí usa `min()`, porque ahí lo que se quiere
   es lo contrario: que no se pase ni de ancho de línea ni de alto. */
.sec-head { max-width: 660px; margin-bottom: clamp(34px, max(4vw, 4.4vh), 68px); }
.sec-head h2 { font-size: clamp(32px, min(4.8vw, 5.9vh), 48px); margin-top: 18px; }
.sec-head p { font-size: 16.5px; color: var(--texto-2); margin-top: 18px; max-width: 50ch; }

/* Cabecera de página interior. Es lo primero que se ve, así que aquí el aire
   es el propio mensaje: un titular de 64px con el subtítulo a 18px pegado
   debajo se lee como una plantilla apretada, no como una marca. */
.page-head { padding-block: clamp(60px, max(8vw, 9vh), 110px) clamp(48px, max(5vw, 6vh), 76px); }
.page-head h1 { font-size: clamp(40px, 6.2vw, 68px); margin-top: 24px; }
.page-head p { font-size: 17.5px; color: var(--texto-2); margin-top: 24px; 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); } }
/* El interruptor de accesibilidad iba en el <style> de inicio.html, aunque las
   dos capas se declaran aquí. Mismo caso que `@keyframes llenar`: al migrar la
   portada, dentro de un módulo CSS `.w1` y `.w2` se renombran y esta parada
   habría dejado de existir sin avisar — las olas seguirían moviéndose para
   quien pide expresamente que nada se mueva. Va donde van las olas. */
@media (prefers-reduced-motion: reduce) { .w1, .w2 { animation: none; } }

/* ── 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 ── */
/* padding-top separado del inferior: la cabecera flotante (#hdr, 88px con
   la clase .scrolled) tapaba el titular de estas cinco franjas al entrar en
   pantalla. Con el suelo de 64px, el titular pasaba hasta 24px por detrás
   del cristal, medido con getComputedStyle en un móvil real, no a ojo. El
   suelo sube a 100px (88 + 12 de margen, número redondo) solo arriba; abajo
   no hay cabecera con la que chocar, así que se queda igual. */
.cta { position: relative; overflow: hidden; text-align: center;
  padding-top: clamp(100px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px); }
.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(34px, 5.2vw, 55px); }
.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 Anton 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: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: clamp(27px, 3.5vw, 38px);
  letter-spacing: 0.005em; color: var(--texto); line-height: 1;
}
.foot-marca .fb i { font-style: normal; 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: 'Inter', 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;
  /* Blanco al 80% dentro de una cápsula translúcida al 26-44% se leía como
     una pegatina pegada encima: dos materiales distintos en la misma pieza.
     Ahora es el MISMO vidrio, un punto más denso para que se distinga, con
     su filo de luz arriba. Se nota qué página es sin romper el material. */
  background: linear-gradient(180deg,
      rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.36) 50%, rgba(255,255,255,0.44) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(255,255,255,0.4),
    0 1px 2px rgba(11,27,51,0.06);
  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; }
}

/* ══ Escena del túnel ══════════════════════════════════════════════
   Vivía en el <style> de inicio.html. Se comparte porque /el-tunel es la
   página que va justo sobre esto y tenía cuatro cajas oscuras vacías con
   un icono genérico dentro: menos que el resumen de la portada.

   Los selectores usan .escena y no #escena: con un id solo puede haber una
   instancia por página, y en /el-tunel hay una por fase.

   Cada instancia enseña la fase que diga su data-f. En la portada lo va
   cambiando web.js; en /el-tunel va fijo, uno por fila. */
.tunel-vis { position: relative; background: var(--sup); border: 1px solid var(--linea);
  border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--sombra); }
.tunel-vis svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.vis-pie { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 15px; border-top: 1px solid var(--linea); }
.vis-n { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--agua-2);
  font-variant-numeric: tabular-nums; }
.vis-l { font-size: 15px; font-weight: 600; color: var(--texto); }
.vis-barra { flex: 1; height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.vis-barra i { display: block; height: 100%; background: var(--agua-2); transform-origin: left;
  transform: scaleX(0); }
.escena.corriendo .vis-barra i { animation: llenar 3.2s linear forwards; }
/* Los fotogramas vivían en el <style> de inicio.html, no aquí, aunque la regla
   de arriba es de esta hoja y la comparten las ocho páginas. Funcionaba de
   milagro: la portada era la única página que a la vez definía `llenar` y
   recibía la clase `corriendo` de web.js, así que la barra se llenaba SOLO
   ahí y por casualidad de estar las dos cosas en el mismo fichero.
   Al migrar la portada esto se rompía en silencio: dentro de un módulo CSS el
   nombre de la animación se renombra, esta regla no habría encontrado ningún
   `llenar`, y como `.vis-barra i` parte de `transform: scaleX(0)` la barra se
   habría quedado invisible para siempre sin un solo aviso. */
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cada capa vive solo en su fase. Entra y sale con el mismo tiempo que
   el texto de al lado, para que se lean como una sola cosa. */
.cap { opacity: 0; transition: opacity .55s cubic-bezier(.22,.61,.36,1); }
.escena[data-f="1"] .c1, .escena[data-f="2"] .c2,
.escena[data-f="3"] .c3, .escena[data-f="4"] .c4 { opacity: 1; }
.tinte { transition: opacity .7s cubic-bezier(.22,.61,.36,1); }

/* 1 · el agua sale de las boquillas. Cada chorro con su propio retardo:
   seis líneas moviéndose a la vez se leen como una persiana, no como agua. */
.escena[data-f="1"] .chorros path { animation: chorro 0.85s ease-in infinite; }
.chorros path:nth-child(2) { animation-delay: .14s; }
.chorros path:nth-child(3) { animation-delay: .28s; }
.chorros path:nth-child(4) { animation-delay: .42s; }
.chorros path:nth-child(5) { animation-delay: .07s; }
.chorros path:nth-child(6) { animation-delay: .35s; }
@keyframes chorro {
  0%   { transform: translateY(-14px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.escena[data-f="1"] .gotas circle { animation: salpicar 1.1s ease-out infinite; }
.gotas circle:nth-child(2) { animation-delay: .3s; }
.gotas circle:nth-child(3) { animation-delay: .6s; }
.gotas circle:nth-child(4) { animation-delay: .15s; }
.gotas circle:nth-child(5) { animation-delay: .75s; }
.gotas circle:nth-child(6) { animation-delay: .45s; }
@keyframes salpicar {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(26px) scale(0.4); opacity: 0; }
}

/* Sin esto, un scale() dentro de un SVG toma como centro la esquina 0,0
   del lienzo y la burbuja se va a la otra punta en vez de hincharse. */
.espuma circle, .gotas circle { transform-box: fill-box; transform-origin: center; }

/* 2 · la espuma sube desde el suelo y respira. Impar e par van desfasados
   para que la masa se deforme en vez de subir en bloque. */
.escena[data-f="2"] .espuma circle { animation: espumar 3.4s ease-in-out infinite alternate; }
.espuma circle:nth-child(odd)  { animation-delay: -1.6s; }
.espuma g:last-child circle    { animation-duration: 4.2s; }
@keyframes espumar {
  from { transform: translateY(10px) scale(0.94); }
  to   { transform: translateY(-8px) scale(1.04); }
}

/* 3 · los rodillos giran de verdad: las bandas de cerdas corren dentro
   del recorte del rodillo. El recorrido es exactamente el alto de un
   ciclo (24px), y por eso el bucle no da tirón al reiniciarse. */
.escena[data-f="3"] .cerdas { animation: rodar 0.5s linear infinite; }
.cerdas.der { animation-direction: reverse; }
@keyframes rodar { from { transform: translateY(0); } to { transform: translateY(24px); } }

/* 4 · el aire barre hacia fuera: el izquierdo a la izquierda, el derecho
   a la derecha. Barrer los dos al mismo lado sería viento, no secado. */
.escena[data-f="4"] .aire path:nth-child(odd)  { animation: soplarIzq 1.5s ease-in-out infinite; }
.escena[data-f="4"] .aire path:nth-child(even) { animation: soplarDer 1.5s ease-in-out infinite; }
.aire path:nth-child(3), .aire path:nth-child(4) { animation-delay: .25s; }
.aire path:nth-child(5), .aire path:nth-child(6) { animation-delay: .5s; }
@keyframes soplarIzq {
  0% { transform: translateX(16px); opacity: 0; } 40% { opacity: 1; }
  100% { transform: translateX(-18px); opacity: 0; }
}
@keyframes soplarDer {
  0% { transform: translateX(-16px); opacity: 0; } 40% { opacity: 1; }
  100% { transform: translateX(18px); opacity: 0; }
}

.coche { filter: drop-shadow(0 12px 22px rgba(11,27,51,0.14)); }

@media (prefers-reduced-motion: reduce) {
  .cap, .cap *, .cerdas, .vis-barra i { animation: none !important; }
  .vis-barra i { transform: scaleX(1); }
}