/* =============================================================================
   ASELA — Hoja de estilos  ·  PIEL NUEVA (propuesta)
   ---------------------------------------------------------------------------
   PALETA .... extraída pixel a pixel del logo de Las Enseñanzas de Luis.
   BASE ...... la receta de la Pasarela de Pagos (resplandor ambiental +
               rejilla fina + Syne/DM Sans), pero en claro en lugar de oscuro.
   INFLUENCIAS (piezas sueltas, no estilos completos):
     · Cinematográfica → hero a pantalla casi completa, tiempo lento,
                         entrada escalonada, indicador de scroll.
     · Motion Design   → titular que entra letra a letra, bloque que se dibuja.
     · Scrollytelling  → el recorrido de 9 pasos con figura fija que avanza.
     · Futurista / IA  → constelación de nodos detrás del mapa del ecosistema.
   REGLA .... todo el movimiento es decorativo. Sin JavaScript, sin animación
              o con "reducir movimiento" activado, la página se lee completa.
   Todos los pares de color cumplen WCAG AA o AAA.
   ========================================================================== */

:root{
  /* ── ESCALA TEAL — nace del bloque del rótulo #94BDBA ───────────────────
     Los dos primeros son SOLO relleno (no alcanzan contraste de texto);
     del tercero en adelante se pueden usar para letra.                     */
  --teal:         #94BDBA;   /* los bloques del rótulo — color de marca      */
  --teal-medio:   #6AA39D;   /* relleno intermedio, iconos sobre oscuro      */
  --teal-vivo:    #3F7D77;   /* bordes, títulos grandes  (4.18:1)           */
  --teal-tinta:   #1B5B56;   /* texto y botones          (6.89:1)           */
  --teal-hondo:   #123F3B;   /* hover de botón          (10.25:1)           */
  --teal-noche:   #0C2A28;   /* el teal llevado al fondo (13.40:1)          */

  /* ── NEONES — el mismo tono del logo, subido de luz ─────────────────────
     No son colores nuevos: son los del logo llevados a alta luminosidad,
     conservando el matiz exacto. Solo se usan SOBRE fondo oscuro.          */
  --neon:         #6DE3DB;   /* del bloque del rótulo  (tono 175.6°) 10.91:1 */
  --neon-indigo:  #8585E0;   /* de la corbata          (tono 240°)    5.13:1 */
  --neon-calido:  #FF9670;   /* del rostro             (tono 16°)     7.87:1 */

  /* ── ESCALA PIZARRA — nace del pantalón #6C8286 ────────────────────────── */
  --pizarra:      #6C8286;   /* bordes y detalles                            */
  --tinta-suave:  #4F6266;   /* texto secundario         (5.64:1)           */
  --pizarra-honda:#3D5A63;   /* texto de apoyo con peso  (6.50:1)           */
  --pizarra-noche:#22343A;   /* superficie oscura fría  (11.39:1)           */

  /* ── El resto del logo ─────────────────────────────────────────────────── */
  --tinta:        #120E11;   /* el negro del logo                            */
  --vino:         #743B3C;   /* el libro — acento cálido                     */
  --cafe:         #845140;   /* el puntero — acento cálido secundario        */
  --piel:         #EBCABE;   /* el rostro — acento cálido SOBRE oscuro       */
  --indigo:       #41415E;   /* la corbata — terciario, uso escaso           */
  --gris:         #888888;   /* el chaleco                                   */

  /* ── Superficies: tres claras y tres oscuras ───────────────────────────── */
  --papel:        #FFFFFF;   /* blanco del logo — tarjetas                   */
  --papel-hondo:  #F4F8F7;   /* segunda superficie clara                     */
  --fondo:        #EAF2F0;   /* fondo general, un punto más hondo que antes:
                                así el blanco de las tarjetas SÍ resalta     */
  --noche:        #12201F;   /* tinta + teal: el guiño al estilo de Pagos    */
  --noche-alt:    #1A2E2C;   /* tarjeta sobre fondo noche                    */
  --teal-tenue:   #E1EDEB;   /* relleno suave                                */
  --borde:        #CFE0DD;
  --borde-fuerte: #A9C6C2;

  --radio:        18px;
  --radio-chico:  12px;
  --sombra:       0 1px 2px rgba(18,32,31,.06), 0 6px 16px rgba(18,32,31,.08);
  --sombra-alta:  0 2px 6px rgba(18,32,31,.08), 0 18px 44px rgba(18,32,31,.16);
  --sombra-bloque: 5px 5px 0 rgba(108,130,134,.26);  /* la del rótulo del logo */

  --display:      "Syne", "Segoe UI", system-ui, sans-serif;
  --texto:        "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ancho:        1060px;
  --toque:        56px;      /* altura mínima cómoda para el dedo */
  --lento:        cubic-bezier(.16,.84,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--fondo); }

body{
  margin:0;
  position:relative;
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Ambiente: los dos resplandores y la rejilla, como en Pagos ─────────────
   En Pagos van sobre negro al 12 %. Aquí, sobre claro, necesitan más cuerpo
   para notarse. Influencia cinematográfica: respiran muy despacio. */
body::before{
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px circle at 10% 0%,  rgba(148,189,186,.62), transparent 62%),
    radial-gradient(560px circle at 94% 6%,  rgba(148,189,186,.34), transparent 64%),
    radial-gradient(520px circle at 78% 96%, rgba(235,202,190,.32), transparent 66%);
  animation:respirar 26s var(--lento) infinite alternate;
}
@keyframes respirar{
  from{ transform:scale(1)    translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.5%,-1%,0); }
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(18,63,59,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,63,59,.075) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 88%);
}
.barra, main, .pie{ position:relative; z-index:1; }

h1,h2,h3{
  font-family:var(--display);
  line-height:1.15; margin:0; font-weight:800; letter-spacing:-.02em;
}
p{ margin:0 0 1rem; }
a{ color:var(--teal-tinta); }

/* Firma de marca: el bloque teal detrás de la palabra, igual que el rótulo. */
.resalte{
  position:relative; display:inline-block;
  padding:.04em .2em; color:var(--tinta);
  isolation:isolate;
}
.resalte::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--teal); border-radius:3px;
  box-shadow:var(--sombra-bloque);
  transform-origin:left center;
}

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px; }
.contenedor--angosto{ max-width:680px; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--teal-tinta); color:#fff; padding:12px 18px; border-radius:0 0 var(--radio-chico) 0;
}
.saltar:focus{ left:0; }

:focus-visible{ outline:3px solid var(--vino); outline-offset:3px; border-radius:6px; }

/* ── Barra de avance de lectura (influencia scrollytelling) ─────────────── */
.avance{
  position:fixed; top:0; left:0; height:3px; width:100%;
  z-index:40; pointer-events:none;
  background:transparent;
}
.avance__linea{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--teal-tinta));
  transition:width .1s linear;
}

/* ─────────────────────────────── Encabezado ────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:30;
  background:rgba(234,242,240,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--borde);
  padding:10px 20px;
}
.barra__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; max-width:var(--ancho); margin:0 auto;
}
/* Que el encabezado fijo no tape el título al saltar a una sección. */
section[id]{ scroll-margin-top:78px; }

.marca{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.marca__logo{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:var(--papel); border:1px solid var(--borde);
  object-fit:contain; padding:2px;
}
.marca__texto{ display:flex; flex-direction:column; line-height:1.15; }
.marca__texto strong{ font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:.04em; }
.marca__texto small{ font-size:12px; color:var(--tinta-suave); }

/* ─────────────────────────── Navegación ──────────────────────────────────
   Teléfono: un botón que abre un desplegable.
   Desde 820 px: los enlaces se muestran en fila y el botón desaparece.    */
.nav{ position:relative; flex:none; }

.nav__boton{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:9px 15px;
  border:1px solid var(--borde-fuerte); border-radius:999px;
  background:var(--papel); color:var(--teal-tinta);
  font-family:var(--texto); font-size:15px; font-weight:600;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav__boton:hover{ background:var(--teal-tenue); border-color:var(--teal-vivo); }

/* Las tres barras, hechas con una sola caja y sus dos pseudoelementos. */
.nav__barras, .nav__barras::before, .nav__barras::after{
  display:block; width:19px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .26s var(--lento), opacity .18s ease;
}
.nav__barras{ position:relative; }
.nav__barras::before, .nav__barras::after{ content:""; position:absolute; left:0; }
.nav__barras::before{ top:-6px; }
.nav__barras::after{ top:6px; }
/* Abierto: las barras se cruzan en X. */
.nav__boton[aria-expanded="true"] .nav__barras{ transform:rotate(45deg); }
.nav__boton[aria-expanded="true"] .nav__barras::before{ transform:translateY(6px) rotate(-90deg); }
.nav__boton[aria-expanded="true"] .nav__barras::after{ opacity:0; }

.nav__menu{
  list-style:none; margin:0; padding:8px;
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:244px;
  background:var(--papel); border:1px solid var(--borde);
  border-radius:16px; box-shadow:var(--sombra-alta);
  gap:2px; transform-origin:top right;
  display:none;                 /* cerrado: fuera del alcance del teclado */
}
.nav__menu.abierto{ display:grid; animation:desplegar .22s var(--lento) both; }
@keyframes desplegar{
  from{ opacity:0; transform:translateY(-8px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.nav__menu a{
  display:flex; align-items:center; min-height:48px; padding:10px 14px;
  border-radius:11px; text-decoration:none; color:var(--tinta);
  font-size:16px; font-weight:600;
  transition:background .16s ease, color .16s ease;
}
.nav__menu a:hover{ background:var(--teal-tenue); color:var(--teal-tinta); }

/* De 820 px para arriba: enlaces en fila, sin botón ni desplegable. */
@media (min-width:820px){
  .nav__boton{ display:none; }
  .nav__menu, .nav__menu.abierto{
    display:flex; position:static; animation:none;
    min-width:0; padding:0; gap:4px;
    background:none; border:0; box-shadow:none;
  }
  .nav__menu a{
    min-height:40px; padding:8px 13px; font-size:15px; font-weight:600;
    color:var(--tinta-suave); border-radius:999px;
  }
  .nav__menu a:hover{ color:var(--teal-tinta); background:var(--teal-tenue); }
}
@media (max-width:479px){
  .marca__texto small{ display:none; }   /* en pantallas muy angostas estorba */
}

/* ═════════════════════════════════  HERO  ═════════════════════════════════
   Influencia cinematográfica: ocupa casi toda la pantalla y el tiempo va
   lento. Influencia motion: el titular entra letra a letra.                */
.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding:44px 0 92px;
  border-bottom:1px solid var(--borde);
}
.hero > .contenedor{ position:relative; z-index:2; }

/* ── Aurora: el fondo con movimiento de la parte superior ──────────────────
   Tres manchas de luz muy desenfocadas que se desplazan y respiran en
   ciclos largos y distintos (34 s, 42 s, 38 s), así nunca se repite el
   mismo dibujo. Son colores del logo: teal del rótulo, neón y piel.
   Se animan solo con transform, que va por GPU y no repinta la página.   */
.aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora__mancha{
  position:absolute; border-radius:50%;
  filter:blur(62px); will-change:transform;
}
.aurora__mancha--1{
  width:52vw; height:52vw; left:-12vw; top:-18vw;
  background:radial-gradient(circle, rgba(148,189,186,.85), transparent 68%);
  animation:deriva1 34s ease-in-out infinite alternate;
}
.aurora__mancha--2{
  width:42vw; height:42vw; right:-8vw; top:-8vw;
  background:radial-gradient(circle, rgba(109,227,219,.52), transparent 68%);
  animation:deriva2 42s ease-in-out infinite alternate;
}
.aurora__mancha--3{
  width:38vw; height:38vw; left:34%; bottom:-20vw;
  background:radial-gradient(circle, rgba(235,202,190,.70), transparent 68%);
  animation:deriva3 38s ease-in-out infinite alternate;
}
@keyframes deriva1{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(9vw,7vw,0) scale(1.22); }
}
@keyframes deriva2{
  from{ transform:translate3d(0,0,0) scale(1.1); }
  to  { transform:translate3d(-7vw,9vw,0) scale(.9); }
}
@keyframes deriva3{
  from{ transform:translate3d(0,0,0) scale(.95); }
  to  { transform:translate3d(-10vw,-8vw,0) scale(1.25); }
}

/* ── El logo dentro del hero ──────────────────────────────────────────────
   El personaje señala con el puntero hacia la izquierda, o sea hacia el
   titular. Por eso va a la derecha: apunta al mensaje.                    */
.hero__marca{ position:relative; justify-self:center; margin-top:34px; text-align:center; }
.hero__marca::before{           /* halo suave detrás */
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:112%; height:112%; border-radius:50%;
  background:radial-gradient(circle, rgba(148,189,186,.42), transparent 66%);
  filter:blur(26px); z-index:-1;
}
.hero__marca img{
  width:min(190px,62vw); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 16px 34px rgba(18,32,31,.20));
  animation:flotar 7s ease-in-out infinite alternate;
}
@keyframes flotar{
  from{ transform:translateY(-7px); }
  to  { transform:translateY(9px); }
}
.hero__saludo{
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cafe); margin-bottom:16px;
}
.hero__titulo{
  font-size:clamp(31px, 8.4vw, 62px); margin-bottom:20px; max-width:15ch;
  line-height:1.22; text-wrap:balance;
}
.hero__texto{ font-size:18px; color:var(--tinta-suave); max-width:52ch; margin-bottom:28px; }
.hero__texto strong{ color:var(--tinta); font-weight:600; }
/* Qué significan las siglas. Va un punto más chico y más claro para que
   explique sin robarle el peso a la frase. */
.siglas{ font-size:.87em; color:var(--pizarra-honda); }
.hero__acciones{ display:flex; flex-direction:column; gap:12px; }

/* Indicador de scroll — pieza prestada del estilo cinematográfico. */
.hero__pista{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); text-decoration:none;
}
.hero__pista span{ display:block; width:1px; height:30px; background:linear-gradient(var(--pizarra), transparent); }
.hero__pista::after{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-tinta);
  animation:caer 2.4s var(--lento) infinite;
}
@keyframes caer{
  0%   { transform:translateY(-14px); opacity:0; }
  35%  { opacity:1; }
  100% { transform:translateY(6px);   opacity:0; }
}

/* ── Entrada escalonada (cine + motion). Estado inicial y llegada. ─────────
   Todo lo que empieza oculto está condicionado a .js-listo: si el
   JavaScript no carga, la página aparece completa y quieta.              */
.js-listo .entra{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--lento), transform .9s var(--lento);
}
.js-listo .entra.dentro{ opacity:1; transform:none; }
.entra--1{ transition-delay:.05s; } .entra--2{ transition-delay:.20s; }
.entra--3{ transition-delay:.60s; } .entra--4{ transition-delay:.78s; }
.entra--5{ transition-delay:.96s; }

/* Titular letra a letra: cada letra es un span creado por JavaScript.
   Las letras se agrupan por palabra para que el renglón NUNCA se parta a
   mitad de una palabra (que es lo que pasa si cada letra va suelta). */
.palabra{ display:inline-block; white-space:nowrap; }
.letra{ display:inline-block; }
.js-listo .letra{
  opacity:0; transform:translateY(.42em) rotate(2deg);
  transition:opacity .5s var(--lento), transform .5s var(--lento);
}
.js-listo .letra.dentro{ opacity:1; transform:none; }
/* El bloque teal se dibuja después de que aterrizan las letras. */
.js-listo .resalte::before{ transform:scaleX(0); transition:transform .55s var(--lento) .1s; }
.js-listo .resalte.dibujado::before{ transform:scaleX(1); }

/* ─────────────────────────────────  Botones  ───────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--toque); padding:14px 24px;
  border:2px solid transparent; border-radius:999px;
  font-family:var(--texto); font-size:17px; font-weight:600;
  text-decoration:none; text-align:center;
  cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.boton:active{ transform:scale(.98); }
.boton--principal{ background:var(--teal-tinta); color:#fff; box-shadow:var(--sombra); }
.boton--principal:hover{ background:var(--teal-hondo); box-shadow:var(--sombra-alta); }
.boton--secundario{ background:transparent; color:var(--teal-tinta); border-color:var(--teal-tinta); }
.boton--secundario:hover{ background:var(--teal-tenue); }
.boton--ambar{ background:var(--vino); color:#fff; box-shadow:var(--sombra); }   /* CTA cálida */
.boton--ambar:hover{ background:#5E2F30; }
.boton--fino{ min-height:46px; padding:10px 18px; font-size:15px; }

/* ─────────────────────────────────  Secciones  ─────────────────────────── */
.seccion{ padding:56px 0; }
.seccion--clara{ background:var(--papel); border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); }
.seccion__titulo{ font-size:clamp(25px, 6.5vw, 36px); margin-bottom:12px; }
.seccion__bajada{ color:var(--tinta-suave); max-width:56ch; margin-bottom:28px; }

/* ══════════════════════  SECCIONES OSCURAS (el suelo del cristal)  ════════
   El cristal necesita luz detrás para existir: sobre fondo claro sería
   sencillamente una tarjeta oscura. Por eso las dos secciones que llevan
   tarjetas tienen suelo noche con manchas de neón y rejilla fina.         */
.seccion--oscura{
  position:relative; overflow:hidden;
  background:var(--noche); color:#fff;
  border-top:1px solid rgba(109,227,219,.16);
  border-bottom:1px solid rgba(109,227,219,.16);
}
.seccion--oscura::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px circle at 10% 4%,  rgba(109,227,219,.23), transparent 60%),
    radial-gradient(660px circle at 92% 96%, rgba(133,133,224,.20), transparent 62%),
    radial-gradient(520px circle at 62% 42%, rgba(255,150,112,.09), transparent 66%);
}
.seccion--oscura::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(109,227,219,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,227,219,.055) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
}
.seccion--oscura > .contenedor{ position:relative; z-index:2; }
.seccion--oscura .seccion__titulo{ color:#fff; }
.seccion--oscura .seccion__bajada{ color:rgba(255,255,255,.72); }

/* ── Fundido entre lo claro y lo oscuro ───────────────────────────────────
   En vez de un corte seco, una franja de ~150 px donde el color de la
   sección anterior se disuelve en el oscuro. El relleno extra garantiza
   que ningún texto caiga dentro de la franja de transición.
   Se aplica en dos puntos:
     hero → ¿Qué necesitas hoy?   ·   Ecosistema → ¿Qué es?
   La banda de ARI (la última, antes del pie) va SIN fundido, a propósito:
   ahí el corte seco marca el cierre de la página.                         */
/* Doble clase a propósito: así gana a la regla .seccion de la consulta de
   escritorio, que si no le devuelve el relleno de 84 px y el título blanco
   acaba cayendo DENTRO de la franja clara, ilegible. */
.seccion.funde-arriba{ border-top:0; padding-top:186px; }
.seccion.funde-abajo { border-bottom:0; padding-bottom:186px; }

.seccion--oscura.funde-arriba{
  background-image:linear-gradient(180deg, var(--fondo) 0, rgba(234,242,240,0) 150px);
}
.seccion--oscura.funde-abajo{
  background-image:linear-gradient(0deg, var(--papel) 0, rgba(255,255,255,0) 150px);
}
/* El hero ya no necesita raya inferior: el fundido hace ese trabajo. */
.hero{ border-bottom:0; }

/* ── Receta de cristal, en un solo sitio ───────────────────────────────────
   La opacidad del panel NO baja de .58: es lo que garantiza que el texto
   conserve contraste pase lo que pase por detrás (medido: 14:1 en el peor
   caso, encima del resplandor más brillante).                             */
.cristal{
  background:rgba(18,32,31,.58);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(109,227,219,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 38px rgba(0,0,0,.34);
}
/* Si el navegador no sabe desenfocar, el panel se vuelve sólido. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cristal{ background:rgba(18,32,31,.92); }
}

/* Botones dentro de una sección oscura. */
.seccion--oscura .boton--secundario{
  color:var(--neon); border-color:rgba(109,227,219,.42);
}
.seccion--oscura .boton--secundario:hover{
  background:rgba(109,227,219,.12); border-color:var(--neon);
  box-shadow:0 0 22px rgba(109,227,219,.22);
}
.seccion--oscura .boton--principal{
  background:var(--neon); color:var(--noche); border-color:var(--neon);
  box-shadow:0 0 26px rgba(109,227,219,.28);
}
.seccion--oscura .boton--principal:hover{ background:#8BEBE4; border-color:#8BEBE4; }

/* La constelación queda por encima de las manchas de color pero debajo
   del contenido. Sobre suelo oscuro por fin se ve. */
.constelacion{ z-index:1; }

/* ────────────────────────── ¿Qué necesitas hoy?  ───────────────────────── */
.rutas{ display:grid; gap:12px; }

/* Tarjeta de cristal sobre suelo oscuro. Composición minimalista: aro de
   neón, título, una línea de apoyo y una flecha fina. Nada más. El color
   lo pone la luz del borde, no rellenos. */
.ruta-tarjeta{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch; width:100%;
  min-height:var(--toque); padding:24px 22px 20px;
  border-radius:20px;
  background:rgba(18,32,31,.58);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(109,227,219,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 38px rgba(0,0,0,.34);
  text-align:left; font:inherit; color:#fff; cursor:pointer;
  transition:transform .24s var(--lento), box-shadow .24s ease,
             border-color .22s ease, background .22s ease;
}
/* Filo de luz superior: la única “decoración”, y se enciende al tocar. */
.ruta-tarjeta::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity:.35; transition:opacity .3s ease, left .35s var(--lento), right .35s var(--lento);
}
.ruta-tarjeta:hover, .ruta-tarjeta:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(109,227,219,.55);
  background:rgba(18,32,31,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 0 1px rgba(109,227,219,.16),
             0 0 34px rgba(109,227,219,.20),
             0 22px 46px rgba(0,0,0,.42);
}
.ruta-tarjeta:hover::before, .ruta-tarjeta:focus-visible::before{ opacity:1; left:4%; right:4%; }
.ruta-tarjeta:active{ transform:translateY(-1px) scale(.995); }

/* Icono de trazo, sin aro ni placa. Sobre cristal, cualquier relleno sólido
   rompe la transparencia; y el aro, con un icono de línea dentro, sumaba un
   círculo que no hacía falta. Queda el puro dibujo, encendido en neón. */
.ruta-tarjeta__icono{
  flex:none; width:34px; height:34px; margin-bottom:20px;
  color:var(--neon);
  display:grid; place-items:center; font-size:24px; line-height:1;
  filter:drop-shadow(0 0 9px rgba(109,227,219,.38));
  transition:transform .3s var(--lento), filter .24s ease, color .24s ease;
}
.ruta-tarjeta__icono svg{ width:100%; height:100%; display:block; }
.ruta-tarjeta:hover .ruta-tarjeta__icono{
  filter:drop-shadow(0 0 16px rgba(109,227,219,.65));
  transform:translateY(-2px);
}
.ruta-tarjeta[aria-pressed="true"] .ruta-tarjeta__icono{
  color:#fff; filter:drop-shadow(0 0 16px rgba(109,227,219,.75));
}
.ruta-tarjeta__texto{ flex:1; min-width:0; }
.ruta-tarjeta__titulo{
  display:block; font-family:var(--display); font-size:21px; font-weight:800;
  letter-spacing:-.02em; line-height:1.2; margin-bottom:6px; color:#fff;
}
.ruta-tarjeta__sub{ display:block; font-size:15px; line-height:1.45; color:rgba(255,255,255,.70); }
.ruta-tarjeta__flecha{
  align-self:flex-end; margin-top:18px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(109,227,219,.34); background:transparent; color:var(--neon);
  display:grid; place-items:center; font-size:18px; line-height:1;
  transition:background .22s ease, color .22s ease, border-color .22s ease,
             box-shadow .22s ease, transform .24s var(--lento);
}
.ruta-tarjeta:hover .ruta-tarjeta__flecha{
  border-color:var(--neon); box-shadow:0 0 18px rgba(109,227,219,.30);
  transform:translateX(4px);
}

/* Ruta elegida: el cristal se enciende en neón y deja de ser transparente.
   Es el único elemento de la sección con relleno luminoso. */
.ruta-tarjeta[aria-pressed="true"]{
  background:rgba(109,227,219,.10);
  border-color:var(--neon);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 0 0 1px rgba(109,227,219,.35),
             0 0 44px rgba(109,227,219,.28),
             0 20px 44px rgba(0,0,0,.40);
}
.ruta-tarjeta[aria-pressed="true"]::before{ opacity:1; left:0; right:0; }
.ruta-tarjeta[aria-pressed="true"] .ruta-tarjeta__sub{ color:rgba(255,255,255,.82); }
.ruta-tarjeta[aria-pressed="true"] .ruta-tarjeta__icono{
  border-color:var(--neon); background:rgba(109,227,219,.16);
  box-shadow:0 0 28px rgba(109,227,219,.34), inset 0 0 16px rgba(109,227,219,.18);
}
.ruta-tarjeta[aria-pressed="true"] .ruta-tarjeta__flecha{
  background:var(--neon); border-color:var(--neon); color:var(--noche);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ruta-tarjeta{ background:rgba(18,32,31,.92); }
}

/* ─────────────────────────  Esta puede ser tu ruta  ────────────────────── */
/* Aquí es donde ASELA se pone oscura: el guiño directo a la Pasarela. */
.seccion--ruta{
  background:var(--noche); color:#fff; scroll-margin-top:70px;
  background-image:
    radial-gradient(600px circle at 8% 0%, rgba(148,189,186,.16), transparent 60%),
    radial-gradient(460px circle at 96% 100%, rgba(235,202,190,.10), transparent 62%);
}
.seccion--ruta .seccion__titulo{ color:#fff; }

.ruta-cabeza{ display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.ruta-cabeza__icono{ font-size:34px; line-height:1; }
.ruta-cabeza__etiqueta{
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin:0 0 4px;
}
.ruta-intro{ color:rgba(255,255,255,.86); max-width:52ch; margin:8px 0 26px; }

.pasos{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:0; }
.paso{ position:relative; padding:0 0 22px 52px; }
.paso:last-child{ padding-bottom:4px; }
.paso::before{           /* línea vertical que une los pasos */
  content:""; position:absolute; left:17px; top:36px; bottom:0; width:2px;
  background:rgba(148,189,186,.30);
}
.paso:last-child::before{ display:none; }
.paso__numero{
  position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--teal); color:var(--tinta);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:17px;
}
.paso__titulo{ font-family:var(--display); font-size:19px; font-weight:700; margin:5px 0 4px; }
.paso__texto{ color:rgba(255,255,255,.82); font-size:16px; margin:0 0 12px; }
.paso__enlaces{ display:flex; flex-wrap:wrap; gap:10px; }
.paso__enlace{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:10px 18px;
  background:rgba(255,255,255,.10); border:1.5px solid rgba(148,189,186,.55);
  border-radius:999px; color:#fff; text-decoration:none; font-weight:600; font-size:16px;
  transition:background .15s ease;
}
.paso__enlace:hover{ background:rgba(148,189,186,.22); }
.paso__enlace--destacado{ background:var(--teal); border-color:var(--teal); color:var(--tinta); }
.paso__enlace--destacado:hover{ background:#A8CAC7; }

.ruta-pie{ display:flex; flex-wrap:wrap; gap:12px; padding-top:20px; border-top:1px solid rgba(148,189,186,.28); }
.ruta-pie .boton--secundario{ color:#fff; border-color:rgba(148,189,186,.65); }
.ruta-pie .boton--secundario:hover{ background:rgba(148,189,186,.16); }

/* ═══════════════════  Mapa del ecosistema + constelación  ═════════════════
   Influencia futurista / IA: una red de nodos respira detrás del mapa.
   Es puramente ambiental: no lleva ninguna información y se apaga sola en
   teléfono y con "reducir movimiento".                                     */
.seccion--mapa{ position:relative; scroll-margin-top:60px; overflow:hidden; }
.constelacion{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.9;
}
.seccion--mapa > .contenedor{ position:relative; z-index:1; }

/* El centro del mapa: cristal encendido en neón, el punto más luminoso de
   la sección. Todo lo demás gravita alrededor. */
.mapa__centro{
  position:relative;
  border-radius:20px; padding:26px 22px; margin-bottom:16px; text-align:center;
  color:#fff;
  background:rgba(109,227,219,.08);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(109,227,219,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 0 40px rgba(109,227,219,.16), 0 18px 44px rgba(0,0,0,.36);
}
.mapa__centro-etiqueta{
  display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); margin-bottom:10px;
}
.mapa__centro strong{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(20px, 5.5vw, 27px); }
.mapa__centro-nota{ display:block; margin-top:10px; font-size:15px; color:rgba(255,255,255,.74); }

.mapa__areas{ display:grid; gap:12px; }

.area{
  border-radius:20px; overflow:hidden;
  background:rgba(18,32,31,.58);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(109,227,219,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 38px rgba(0,0,0,.32);
  color:#fff;
  transition:transform .22s var(--lento), box-shadow .22s ease, border-color .22s ease;
}
.area:hover{
  transform:translateY(-3px); border-color:rgba(109,227,219,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 30px rgba(109,227,219,.16), 0 22px 46px rgba(0,0,0,.40);
}
.area__cabeza{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:var(--toque); padding:17px 16px;
  background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.area__icono{
  flex:none; width:28px; height:28px;
  color:var(--neon);
  display:grid; place-items:center; font-size:21px; line-height:1;
  filter:drop-shadow(0 0 8px rgba(109,227,219,.34));
  transition:filter .22s ease;
}
.area__icono svg{ width:100%; height:100%; display:block; }
.area:hover .area__icono{ filter:drop-shadow(0 0 14px rgba(109,227,219,.6)); }
.area__cabeza[aria-expanded="true"] .area__icono{
  color:#fff; filter:drop-shadow(0 0 14px rgba(109,227,219,.7));
}
.area__nombres{ flex:1; min-width:0; }
.area__nombre{ display:block; font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.015em; color:#fff; }
.area__descripcion{ display:block; font-size:14px; line-height:1.42; color:rgba(255,255,255,.68); }
.area__mas{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:transparent; border:1px solid rgba(109,227,219,.34); color:var(--neon);
  display:grid; place-items:center; font-size:19px; font-weight:700;
  transition:transform .24s var(--lento), background .2s ease, color .2s ease,
             border-color .2s ease, box-shadow .2s ease;
}

/* Área abierta: el "+" se llena de neón y gira. */
.area__cabeza[aria-expanded="true"] .area__mas{
  transform:rotate(45deg); background:var(--neon); border-color:var(--neon); color:var(--noche);
  box-shadow:0 0 20px rgba(109,227,219,.40);
}

.area__cuerpo{
  padding:2px 16px 8px; background:rgba(0,0,0,.22);
  border-top:1px solid rgba(109,227,219,.16);
}
.area__cuerpo[hidden]{ display:none; }

.proyecto{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.proyecto:last-child{ border-bottom:0; }
.proyecto__nombre{ font-family:var(--display); font-size:17px; font-weight:700; margin:0 0 3px; color:#fff; }
.proyecto__tagline{ font-size:14px; color:var(--neon-calido); font-weight:600; margin:0 0 6px; }
.proyecto__descripcion{ font-size:15px; color:rgba(255,255,255,.70); margin:0 0 12px; }
.proyecto__enlace{
  display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:10px 18px;
  border:1px solid rgba(109,227,219,.40); border-radius:999px;
  color:var(--neon); text-decoration:none; font-weight:600; font-size:15px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.proyecto__enlace:hover{
  background:rgba(109,227,219,.12); border-color:var(--neon);
  box-shadow:0 0 20px rgba(109,227,219,.24);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .area{ background:rgba(18,32,31,.92); }
  .mapa__centro{ background:rgba(20,52,50,.94); }
}

/* ────────────────────────  ¿Qué es Las Enseñanzas?  ────────────────────── */
.texto-grande{ font-size:19px; }

.etiquetas{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:22px 0 6px; }
.etiquetas li{
  background:var(--teal-tenue); color:var(--teal-tinta);
  border:1px solid var(--borde);
  border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600;
}

/* ══════════════════  EL RECORRIDO  ·  scrollytelling  ═════════════════════
   La única parte de la página donde el scroll cuenta algo: los nueve pasos
   del recorrido, con una figura fija al lado que avanza contigo.
   Sin JavaScript esto es, simplemente, una lista de nueve pasos legible.  */
.seccion--recorrido{ background:var(--fondo); border-top:1px solid var(--borde); }

.recorrido{ display:grid; gap:26px; }

.recorrido__figura{ display:none; }          /* en teléfono no hay columna fija */
.recorrido__lienzo{ width:100%; height:auto; display:block; }
.sendero__base{ fill:none; stroke:var(--borde); stroke-width:3; stroke-linecap:round; }
.sendero__avance{ fill:none; stroke:var(--teal-tinta); stroke-width:3.5; stroke-linecap:round; }
.sendero__hito{ fill:var(--papel); stroke:var(--borde); stroke-width:2.5; }
.sendero__hito.activo{ fill:var(--teal); stroke:var(--teal-tinta); }
.sendero__viajero{ fill:var(--vino); stroke:var(--papel); stroke-width:3; }
.recorrido__marcador{
  font-family:var(--display); font-weight:800;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave);
  margin-top:14px; text-align:center;
}
.recorrido__marcador b{ display:block; font-size:30px; letter-spacing:-.02em; color:var(--teal-tinta); }

.recorrido__pasos{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:etapa; }
.etapa{
  position:relative;
  background:var(--papel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:20px 20px 20px 74px;
  box-shadow:var(--sombra);
  transition:border-color .35s var(--lento), transform .35s var(--lento), box-shadow .35s ease, opacity .35s ease;
}
.js-listo .etapa{ opacity:.55; }
.etapa.vista{ opacity:1; }
.etapa.activa{ opacity:1; border-color:var(--teal-vivo); transform:translateX(5px); box-shadow:var(--sombra-alta); }

/* El número es una placa, no una etiqueta de texto chica. Además marca el
   avance: pendiente (claro) → recorrida (oscura) → en la que estás (teal). */
.etapa__numero{
  position:absolute; left:20px; top:20px;
  width:38px; height:38px; border-radius:12px;
  background:var(--teal-tenue); border:1px solid var(--borde-fuerte); color:var(--teal-tinta);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:16px; line-height:1;
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--lento);
}
.etapa.vista .etapa__numero{ background:var(--teal-tinta); border-color:var(--teal-tinta); color:#fff; }
.etapa.activa .etapa__numero{
  background:var(--teal); border-color:var(--teal-vivo); color:var(--tinta); transform:scale(1.08);
}
.etapa__nombre{ font-family:var(--display); font-size:20px; font-weight:800; margin:0 0 4px; }
.etapa__texto{ margin:0; font-size:16px; color:var(--tinta-suave); }

.recorrido__nota{
  margin:22px 0 0; font-weight:600; color:var(--teal-tinta);
  border-top:1px solid var(--borde); padding-top:18px;
}

/* ────────────────────────────────  ASELA / ARI  ────────────────────────── */
.seccion--ari{
  background:var(--noche); color:#fff;
  background-image:radial-gradient(620px circle at 50% 110%, rgba(148,189,186,.16), transparent 62%);
}
.ari{ display:grid; gap:18px; text-align:center; }
.ari__par{ padding:6px 0; }
.ari__nombre{ font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:.06em; margin:0 0 2px; color:var(--teal); }
.ari__rol{ font-size:17px; margin:0 0 6px; }
.ari__pregunta{ margin:0; color:var(--piel); font-style:italic; }
.ari__division{ height:1px; background:rgba(148,189,186,.28); }
.ari__accion{ margin-top:24px; text-align:center; }

/* ══════════════════════════  Botón de WhatsApp  ═══════════════════════════
   Flotante, siempre al alcance. Deliberadamente NO es el círculo verde de
   siempre: usa el mismo cristal y el mismo neón que el resto del sitio, y
   el glifo de WhatsApp basta para que se reconozca al instante.
   No aparece de entrada: espera a que pases el hero, para no competir con
   el botón principal ("Encontrar mi ruta").                               */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:35;
  display:inline-flex; align-items:center; gap:12px;
  min-height:58px; padding:0 22px 0 17px;
  border-radius:999px; text-decoration:none; color:#fff;
  font-family:var(--texto); font-size:15px; font-weight:600;
  background:rgba(18,32,31,.74);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(109,227,219,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 26px rgba(109,227,219,.16),
             0 14px 34px rgba(0,0,0,.34);
  transition:opacity .32s var(--lento), transform .32s var(--lento),
             visibility .32s, border-color .2s ease, box-shadow .2s ease;
}
/* Solo se esconde si hay JavaScript para volver a mostrarlo. Sin JS, el
   botón está siempre visible: nunca se pierde el contacto. */
.js-listo .wa{ opacity:0; visibility:hidden; transform:translateY(16px) scale(.96); }
.js-listo .wa.visible{ opacity:1; visibility:visible; transform:none; }
.wa:hover{
  border-color:var(--neon);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 0 42px rgba(109,227,219,.34),
             0 18px 40px rgba(0,0,0,.40);
  transform:translateY(-2px);
}
.wa__icono{
  width:27px; height:27px; flex:none; color:var(--neon);
  filter:drop-shadow(0 0 8px rgba(109,227,219,.5));
}
.wa__num{ white-space:nowrap; }

/* Aro que respira: una llamada de atención discreta, cada 4 s. */
.wa::before{
  content:""; position:absolute; inset:-1px; border-radius:999px;
  border:1px solid var(--neon); opacity:0; pointer-events:none;
  animation:latido 4s ease-out infinite;
}
@keyframes latido{
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.14); opacity:0; }
  100% { transform:scale(1.14); opacity:0; }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa{ background:rgba(18,32,31,.94); }
}
@media (max-width:600px){
  /* En teléfono solo el glifo: ocupa menos y no tapa contenido. */
  .wa{ right:16px; bottom:16px; width:58px; padding:0; justify-content:center; }
  .wa__num{ display:none; }
  .wa{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(18,32,31,.94); }
}

/* ────────────────────────────────  Pie  ────────────────────────────────── */
.pie{ background:var(--tinta); color:rgba(255,255,255,.76); padding:34px 0 40px; text-align:center; }
.pie__marca{ font-family:var(--display); font-size:23px; font-weight:800; letter-spacing:.12em; color:#fff; margin-bottom:6px; }
.pie__lema{ color:var(--teal); margin-bottom:14px; }
.pie__significado{ font-size:14px; margin-bottom:16px; }
.pie__legal{ font-size:14px; margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLAS MÁS GRANDES
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:600px){
  .hero__acciones{ flex-direction:row; flex-wrap:wrap; }
  .seccion{ padding:66px 0; }
  .rutas{ grid-template-columns:repeat(2,1fr); }
  .mapa__areas{ grid-template-columns:repeat(2,1fr); }
  .ari{ grid-template-columns:1fr auto 1fr; align-items:center; gap:26px; }
  .ari__division{ width:1px; height:76px; }
  .paso{ padding-left:58px; }
}

@media (min-width:900px){
  body{ font-size:18px; }

  /* En escritorio el hero sí ocupa casi toda la pantalla (influencia
     cinematográfica) y se parte en dos: mensaje y logo. */
  .hero{ min-height:88vh; min-height:88svh; padding:60px 0 96px; }
  .hero__reja{ display:grid; grid-template-columns:1.32fr .68fr; gap:44px; align-items:center; }
  /* En dos columnas manda el ancho de la columna, no un tope de caracteres:
     con el tope de 15ch el titular se partía en cuatro renglones. */
  .hero__titulo{ font-size:clamp(38px, 4.1vw, 54px); max-width:none; }
  .hero__marca{ margin-top:0; }
  .hero__marca img{ width:min(330px,100%); }

  .rutas{ grid-template-columns:repeat(3,1fr); }
  .mapa__areas{ grid-template-columns:repeat(3,1fr); }
  .mapa__centro{ padding:30px 24px; margin-bottom:18px; }
  .seccion{ padding:84px 0; }

  /* Aquí sí aparece la columna fija del recorrido. */
  .recorrido{ grid-template-columns:300px 1fr; gap:54px; align-items:start; }
  .recorrido__figura{
    display:block; position:sticky; top:110px;
    padding:22px; background:var(--papel);
    border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra);
  }
  .recorrido__pasos{ gap:18px; }
  /* Ojo: el relleno izquierdo tiene que dejar sitio a la placa del número
     (38 px + márgenes). Si se baja, el número se encima con el título. */
  .etapa{ padding:22px 24px 22px 78px; }
  .etapa__numero{ left:22px; top:22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TELÉFONO: cristal sin desenfoque
   El desenfoque de fondo es el efecto más caro de esta hoja y donde más
   duele es en un teléfono modesto. Debajo de 700 px los paneles pasan a
   sólido: se ven casi igual y no cuestan batería.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:699px){
  .cristal, .ruta-tarjeta, .area, .mapa__centro{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .ruta-tarjeta, .area{ background:rgba(18,32,31,.90); }
  .mapa__centro{ background:rgba(20,52,50,.92); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPETO AL MOVIMIENTO REDUCIDO
   Con esta preferencia activada la página se queda quieta y completa:
   todo visible, nada atenuado, ninguna animación.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .entra, .letra{ opacity:1 !important; transform:none !important; }
  .js-listo .resalte::before{ transform:scaleX(1) !important; }
  .js-listo .etapa{ opacity:1 !important; }
  .hero__pista{ display:none; }
  .constelacion{ display:none; }
  .hero{ min-height:0; padding:56px 0 64px; }
  /* La aurora se queda: sigue dando color, pero deja de moverse. */
  .aurora__mancha, .hero__marca img{ animation:none !important; transform:none !important; }
  /* El botón de WhatsApp se queda quieto y siempre visible. */
  .wa::before{ display:none; }
  .js-listo .wa{ opacity:1 !important; visibility:visible !important; transform:none !important; }
}