/* ════════════════════════════════════════════════════════════════════════════
   FUNDACIÓN AMOR POR SERVIR — v3 · EL MERGE
   Grupo Ancla · pro bono · 2026-07-29

   QUÉ ES ESTE ARCHIVO: el sistema visual de la v1 (estilo STICKER — plano +
   contorno de tinta, olas orgánicas, arco-arcoíris, Fredoka+Figtree) con los
   COLORES OFICIALES QUE DICTÓ KARLA sustituyendo a los que la v1 había medido
   del arte del logo:

       salmón   #FF6F5A   ←  sustituye al coral    #ED7962   (protagonista)
       azulito  #63D0D0   ←  sustituye al teal     #7ECCCF
       amarillo #FEE587   ←  sustituye al amarillo #FAEB94
       rosadito #FADCE6   ←  sustituye al rosa     #F5DDE2
       tinta    #26282A   ·  blanco #FFFFFF        (se mantienen de la v1)

   Los nombres de token se renombraron a los de Karla (--salmon / --azul /
   --amarillo / --rosa) para que el archivo hable su idioma, no el nuestro.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   === BRAND TOKENS ===  ÚNICO lugar donde vive el color de marca.

   PALETA CERRADA DE SEIS + CUATRO DERIVADOS DE TEXTO.
   Todo color del sitio (CSS, JS y HTML) es uno de estos valores, o el mismo
   valor con opacidad. NADA más.

   ── POR QUÉ EL SISTEMA STICKER SOBREVIVE AL CAMBIO DE PALETA ──
   La v1 se sostenía sobre una regla: EL TEXTO VA EN TINTA, SIEMPRE. Se
   recalculó con los cuatro literales de Karla (WCAG 2.1, calculado no estimado):

       tinta / blanco    14.80:1  ✅        tinta / amarillo  11.82:1  ✅
       tinta / salmón     5.41:1  ✅        tinta / rosadito  11.59:1  ✅
       tinta / azulito    8.08:1  ✅

   Los cinco pasan AA. El sistema entra intacto: los literales oficiales se usan
   a color pleno como RELLENO (puertas, chips, botones, washes) y encima va tinta.

   ── LA REGLA DE KARLA (títulos salmón · subtítulos azul · cuerpo negro) ──
   Medidos como TEXTO sobre blanco, sus cuatro literales NO sirven:
       salmón 2.74:1 ✗ · azulito 1.83:1 ✗ · amarillo 1.25:1 ✗ · rosadito 1.28:1 ✗
   (el brief estimaba ~3:1 para el salmón; medido da 2.74 — no llega ni a AA large)
   Por eso hay CUATRO DERIVADOS de texto: mismo matiz y saturación, luminosidad
   bajada lo MÍNIMO para cruzar el umbral. Se reutilizan tal cual de la v2.
   ⚠ Los derivados sólo sirven SOBRE BLANCO. Sobre los pasteles caen a 1.6-3.6:1,
     así que en campos de color manda la regla 1 (tinta). Medido, no supuesto.

   ── EL RESTO DEL SISTEMA STICKER (heredado de la v1, intacto) ──
     1. El TEXTO va en TINTA sobre cualquier campo de color de marca.
     2. BLANCO sobre SALMÓN sólo a tamaño display y SIEMPRE con anillo de tinta
        (--ink-ring): es la firma del sello. 2.74:1 desnudo — nunca sin anillo,
        nunca a cuerpo.
     3. CONTORNOS de tinta (2-3px) en puertas, tarjetas, chips, botones y olas.
        Sustituyen sombras suaves y tints: cero box-shadow difuso en el sitio.
     4. Superficies: blanco + los tres pasteles LITERALES a sangre.
        Salmón = color protagonista (puerta 01, CTA, deck, cajón de datos).
     5. Jerarquía de texto secundario = la MISMA tinta con opacidad. No hay grises.

   Cuando lleguen los vectores/tipografías oficiales de Sara, se cambia SOLO aquí.
   (Excepción: los 4 colores del deck también están en main.js, porque el fondo se
    interpola por scroll; y los data-color de las puertas en index.html.)
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── LOS SEIS ─────────────────────────────────────────────────── */
  --white:#FFFFFF;
  --salmon:#FF6F5A;          /* OFICIAL · protagonista · puerta Dona */
  --amarillo:#FEE587;        /* OFICIAL · puerta Empresas · la estrella del sello */
  --azul:#63D0D0;            /* OFICIAL · puerta Voluntariado */
  --rosa:#FADCE6;            /* OFICIAL · washes y acentos */
  --ink:#26282A;             /* el delineado del arte. Texto, contornos, footer */

  /* ── DERIVADOS DE TEXTO (la regla de Karla, sólo sobre BLANCO) ──
     Mismo matiz y saturación que el literal; sólo baja la luminosidad. Vienen
     medidos de la v2 y se recomprobaron aquí. Ratio contra BLANCO: */
  --salmon-title:#FF5F48;    /* 3.01:1 ✅ AA large — títulos display ≥24px */
  --salmon-deep:#E91E00;     /* 4.52:1 ✅ AA        — títulos chicos, enlaces */
  --azul-title:#32A4A5;      /* 3.00:1 ✅ AA large — subtítulos grandes */
  --azul-deep:#288383;       /* 4.50:1 ✅ AA        — eyebrows, subtítulos chicos */

  /* ── TINTA CON OPACIDAD (única fuente de jerarquía secundaria) ──
     Compone sobre la superficie real, así que se adapta a blanco y a los tres
     pasteles. Ratios del color compuesto contra su superficie, recalculados
     para los literales de Karla. */
  --ink-soft:rgba(38,40,42,.78);   /* texto secundario · blanco 7.23 · amarillo 6.28
                                      · rosadito 6.19 · azulito 4.95 → ✅ AA en los 4.
                                      ⚠ NO sobre salmón (3.81 ✗): ahí va tinta plena */
  /* (los tres valores de abajo son la MISMA tinta a distinta opacidad) */
  --ink-faint:rgba(38,40,42,.26);  /* filetes internos (tablas, separadores) */
  --ink-veil:rgba(38,40,42,.08);   /* velo (placeholder de imagen) */
  --ink-0:rgba(38,40,42,0);        /* tinta transparente. Se usa en vez de la palabra
                                      `transparent` en gradientes y máscaras: esa
                                      palabra resuelve a un NEGRO de alfa cero, que
                                      ensuciaba la auditoría de paleta y que en algunos
                                      motores tiñe el degradado hacia el gris. */

  /* ── PRIMITIVAS STICKER ───────────────────────────────────────── */
  --edge:2px;                /* grosor del contorno estándar */
  --edge-lg:3px;             /* contorno de piezas grandes (puertas, cajón) */

  /* Anillo de tinta para TIPOGRAFÍA display (sombra dura ×8, sin blur, en em para
     que escale con el cuerpo). Es lo que hace legible el blanco sobre salmón. */
  --ink-ring:
     .036em 0 0 var(--ink), -.036em 0 0 var(--ink),
     0 .036em 0 var(--ink), 0 -.036em 0 var(--ink),
     .026em .026em 0 var(--ink), -.026em .026em 0 var(--ink),
     .026em -.026em 0 var(--ink), -.026em -.026em 0 var(--ink);

  /* Contorno de tinta para MARCAS vectoriales/enmascaradas (estrellas, arcos del
     anillo, olas): 4 drop-shadow duros. Delinea la silueta ya recortada. */
  --ink-out:
     drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
     drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));

  /* tipografía — Fredoka NO tiene itálica → el énfasis en titulares es el STICKER
     salmón con contorno de tinta (§2b regla 2), no inclinación ni color de texto. */
  --display:"Fredoka", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --sans:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* forma */
  --r:22px;
  --r-sm:14px;
  --r-lg:28px;
  --pad:clamp(20px,5vw,68px);
  --maxw:1280px;

  /* Estrella-sticker del sello APS: amarillo LITERAL con contorno de TINTA, para
     viñetas y eyebrows. Va como SVG con fill+stroke y NO como máscara + filter:
     el orden de composición es filter → mask, así que la máscara recortaba el
     contorno y la estrella salía en amarillo plano (invisible sobre blanco, 1.25:1).
     ⚠ Los dos colores van url-encoded (%23FEE587 amarillo · %2326282A tinta) porque
       un data-URI no puede leer var(); son los MISMOS dos valores de la paleta. */
  --star-sticker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.4 -1.6 28.8 25.6'%3E%3Cpath d='M12 2.6l2.55 5.5 6 .8-4.4 4.15 1.15 5.9-5.3-2.95-5.3 2.95 1.15-5.9L3.45 8.9l6-.8z' fill='%23FEE587' stroke='%2326282A' stroke-width='2.7' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* curva firma (espejo de CustomEase "sol" en main.js) */
  --ease:cubic-bezier(.22,.9,.24,1);

  /* ── color de acento por página (el color de la puerta por la que se entra) ──
     El lobby es blanco; cada mundo pinta su hero y su cortina con su literal. */
  --page-accent:var(--white);
  --halo:var(--rosa);        /* disco-sticker detrás de la estrella-mascota */
  --mbody:var(--amarillo);        /* relleno del cuerpo de la estrella-mascota */
}

/* Acentos por página. Los tres son LITERALES del sello; la TINTA encima pasa AA en
   los cuatro casos (salmón 5.41 · azulito 8.08 · amarillo 11.82 · rosa 11.59).
   Sobre campo de color el halo de la mascota pasa a BLANCO (sticker sobre sticker). */
.page-dona         {--page-accent:var(--salmon); --halo:var(--white); --mbody:var(--amarillo)}
.page-voluntariado {--page-accent:var(--azul);  --halo:var(--white); --mbody:var(--amarillo)}
.page-empresas     {--page-accent:var(--amarillo);   --halo:var(--white); --mbody:var(--salmon)}
.page-conocenos    {--page-accent:var(--rosa);  --halo:var(--white); --mbody:var(--amarillo)}

/* ─────────── RESET ─────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color:var(--ink);background:var(--white)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0}
legend{padding:0}
::selection{background:var(--amarillo);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ─────────── TIPOGRAFÍA ───────────
   Fredoka es redondeada, ancha y de x-height alta: pide MENOS cuerpo, MÁS interlínea
   y menos tracking negativo (ver BRAND-PROVISIONAL.md §3). */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.018em}
h2{font-size:clamp(29px,4.3vw,58px)}
h3{font-size:clamp(21px,2.6vw,34px)}
em{font-style:italic}
/* ÉNFASIS EN DISPLAY: Fredoka no tiene itálica y el navegador la falsearía.
   El énfasis de los titulares es COLOR (salmón del logo), nunca inclinación. */
h1 em,h2 em,h3 em,
.mf em,.curtain-word em,.pnav-word em,.foot-word em,
.deck-word em,
.door-h em,.lobby-out-h em{font-style:normal}
/* ═══ v6 · EL ÉNFASIS ES UN STICKER, NO UN COLOR DE TEXTO ═══
   Sobre blanco o pastel: TINTA sobre un sello SALMÓN con contorno de tinta.
   ink sobre salmón = 5.41:1 ✅ AA (también a cuerpo). El salmón literal por fin
   funciona como énfasis sin oscurecerlo, porque no es el texto: es el sello. */
h1 em,h2 em,h3 em,.lobby-h1 em,.mf em,.curtain-word em,.cierre h2 em,.lobby-out-h em{
  color:var(--ink);
  background:var(--salmon);
  box-shadow:0 0 0 2px var(--ink);
  border-radius:.13em;
  padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  /* El sello no se parte: si el <em> se cortaba a mitad de línea salían dos chips, uno
     de ellos huérfano de una palabra ("en" / "números."), y se leía como error de
     maquetación. Con nowrap el énfasis baja entero a la línea siguiente = un solo
     sello. Se libera en móvil (≤820px), donde una frase entera no cabe en una línea. */
  white-space:nowrap;
}
@media (max-width:820px){
  h1 em,h2 em,h3 em,.lobby-h1 em,.mf em,.curtain-word em,.cierre h2 em,.lobby-out-h em{white-space:normal}
}
/* Sobre un CAMPO SALMÓN el sello desaparece → ahí el énfasis es la firma del logo:
   BLANCO con anillo de tinta (sólo display; ver §2b regla 2).
   (El cajón "¿Sabías que?" es salmón pero su texto vive en una tarjeta BLANCA, así que
    no entra aquí: ahí manda la regla 1, tinta sobre blanco.) */
.door-1 em,.page-dona .whero-h em{
  color:var(--white);background:transparent;box-shadow:none;padding:0;
  text-shadow:var(--ink-ring);
}
/* Énfasis a tamaño CHICO (nav): un sello no cabe → subrayado salmón grueso. */
.pnav-word em{
  color:inherit;background:transparent;box-shadow:none;padding:0;
  text-decoration:underline;text-decoration-color:var(--salmon);
  text-decoration-thickness:.14em;text-underline-offset:.12em;
}
/* En el pie (fondo tinta) el énfasis no necesita subrayado: el amarillo literal ya
   destaca solo, 11.82:1 sobre la tinta. */
.foot-word em{background:transparent;box-shadow:none;padding:0;text-decoration:none}

/* Los rótulos de bloque ("Beneficios", "Inscripción", "Preguntas frecuentes"…).
   Iban a 12px: por debajo del cuerpo (16-19px), así que leían como letra menuda
   en vez de como el escalón de jerarquía que son. Suben a 16-18px (+33/+50%) —
   por encima del cuerpo, muy por debajo del h2 (que en el deck llega a 52px).
   El tracking baja de .17em a .13em: a mayor cuerpo, menos tracking, o las
   versalitas se desarman. Color sin tocar (--azul-deep 4.50:1 sobre blanco,
   --ink sobre los campos de marca). */
.eyebrow{
  display:inline-flex;align-items:flex-start;gap:8px;
  font-size:clamp(16px,1.25vw,18px);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink);
}
/* La estrella del sello como viñeta de TODOS los eyebrows. Decorativa.
   v6: amarillo LITERAL delineado con tinta (--ink-out) — el amarillo solo desaparece
   sobre blanco (1.25:1), el contorno es lo que lo hace visible, igual que en el arte.
   vfinal: pasa a `em` para que siga proporcional al rótulo, que ahora crece. */
.eyebrow::before{
  content:"";flex:none;width:1.05em;height:1.05em;margin-top:.1em;
  background:var(--star-sticker) center/contain no-repeat;
}

.sec-head{max-width:820px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head-c{margin-left:auto;margin-right:auto;text-align:center}
.sec-sub{margin-top:22px;color:var(--ink-soft);font-size:clamp(16px,1.4vw,19px);max-width:62ch}
.sec-head-c .sec-sub{margin-left:auto;margin-right:auto}

/* etiqueta reutilizable de "esto está pendiente de la clienta" */
.prov{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);white-space:nowrap;   /* rgba(tinta,.78) = 7.23:1 sobre blanco */
}
/* ─────────── BOTONES ───────────
   El botón es un sticker: relleno salmón literal, TEXTO EN TINTA (5.41:1 ✅ AA)
   y contorno de tinta. Sin sombra: el contorno es lo que lo separa del fondo.
   Regla dura de la clienta y de la medición: NUNCA blanco sobre salmón (2.74:1). */
.btn{
  --bg:var(--salmon);--fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border:var(--edge) solid var(--ink);border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:.005em;
  cursor:pointer;position:relative;
  transition:transform .45s var(--ease),background .35s ease,color .35s ease,border-color .35s ease;
}
/* v6 · el botón es un sticker: relleno salmón literal, TEXTO EN TINTA (5.41:1 ✅ AA)
   y contorno de tinta. Sin sombra: el contorno es lo que lo separa del fondo. */
.btn:hover{
  background:var(--ink);border-color:var(--ink);color:var(--white);   /* 14.80:1 */
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-ghost{--bg:transparent;--fg:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:none}
.btn-sm{padding:10px 22px;font-size:15px}
.btn-block{width:100%;padding:17px 30px}
/* v5 · botón para usar SOBRE un campo de color de marca (puertas y heroes de mundo):
   blanco con tinta encima = 14.80:1 ✅ AAA. El botón primario es SALMÓN, y sobre un
   campo salmón desaparecería, así que ahí manda el blanco. */
/* botón para usar SOBRE un campo de color de marca: blanco con tinta = 14.80:1 */
.btn-white{--bg:var(--white);--fg:var(--ink)}
.btn-white:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover i{transform:translateX(4px)}

/* Las fotos de la clienta son de teléfono/WhatsApp → NUNCA a sangre.
   Van siempre enmarcadas: ver `.pic` y `.pic-circle` en el bloque v3. */
/* el paspartú es rosa LITERAL (era un tint de salmón al 25%) */
/* ─────────── REVEALS ─────────── */
.rv{opacity:0;transform:translateY(24px)}
.is-ready .rv{opacity:1;transform:none}   /* fallback si GSAP no carga */
/* .lv = reveals de entrada (lobby y heroes de mundo): los pinta la intro, no el scroll */
html:not(.has-motion) .lv{opacity:1 !important;transform:none !important}

/* ════════════════════════════════════════════════════════════
   v5 · OLAS ORGÁNICAS
   Ningún campo de color se separa con una línea recta. La ola se pinta con el
   color del campo SIGUIENTE (--wv) y se ancla al borde del campo actual.
   Tres variantes de path para que no se lea mecánico.
   ════════════════════════════════════════════════════════════ */
.wave{
  position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(34px,4.4vw,76px);
  z-index:3;line-height:0;pointer-events:none;
}
.wave svg{display:block;width:100%;height:100%}
.wave path{fill:var(--wv,var(--white))}
/* v6 · CANTO DE TINTA. Una sombra dura desplazada 2.5px hacia arriba dibuja una
   banda de tinta SÓLO a lo largo de la curva (los otros tres lados de la silueta
   quedan tapados por el propio relleno) → la ola se lee recortada a mano, como las
   bandas del anillo del sello. Sin blur y sin línea recta. */
.wave{filter:drop-shadow(0 -2.5px 0 var(--ink))}
.wave-top{filter:drop-shadow(0 2.5px 0 var(--ink))}
.wave-top{top:-1px;bottom:auto}

/* ola-arcoíris del pie: los tres anillos del sello siguiendo la misma curva y la
   tinta cerrando. Reemplaza la franja recta tricolor de v4 (.foot::before). */
.wavebow{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(64px,8.4vw,132px);z-index:4;pointer-events:none;
}
.wavebow .wave{height:100%;bottom:0}
.wavebow .wave:nth-child(2){height:79%}
.wavebow .wave:nth-child(3){height:58%}
.wavebow .wave:nth-child(4){height:37%}

/* ════════════════════════════════════════════════════════════
   v5 · LA ESTRELLA-MASCOTA
   La estrella del sello APS con una carita mínima, sobre un círculo pálido de
   spotlight. Es una PROTO-mascota: cambia de pose por puerta.
   ⚠ NO es la mascota oficial — la definirá Sara (BRAND-PROVISIONAL §3c).
   Todo es decorativo (aria-hidden en el HTML).
   ════════════════════════════════════════════════════════════ */
.mascot-wrap{position:relative;display:block;line-height:0}
.mascot-halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:128%;aspect-ratio:1;border-radius:50%;background:var(--halo);z-index:0;
  border:var(--edge) solid var(--ink);   /* disco-sticker delineado */
}
/* poses — rotación y escala, nada más: es una estrella, no un personaje articulado */
/* ════════════════════════════════════════════════════════════
   v5 · CORTINA (transición ENTRE páginas)
   Del color de la puerta por la que se entró, así la expansión de la puerta y la
   carga del mundo se leen como un solo movimiento.

   v8: se le quitó la barra de progreso falsa. Era el "loader" de la v1 —una
   animación CSS de 1.15s que no medía nada— y competía con el loader real de abajo.
   La cortina ya no simula carga: sólo tapa el salto entre dos documentos.
   ════════════════════════════════════════════════════════════ */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.curtain.is-done{opacity:0;visibility:hidden;pointer-events:none}
.curtain-world{background:var(--page-accent)}
.curtain-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.curtain-word{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,4.2vw,46px);letter-spacing:-.015em;line-height:1.1;
}
.curtain-world .curtain-word{color:var(--ink)}

/* ════════════════════════════════════════════════════════════
   v8 · LOADER — el sello con un cuarto anillo que se dibuja
   Sólo en la ENTRADA INICIAL al sitio (main.js §LOADER decide con sessionStorage;
   de la segunda página en adelante manda la cortina, que es más corta).

   IDEA: el sello de APS ya tiene tres anillos concéntricos —rosa, azulito,
   amarillo— alrededor del disco salmón. El progreso es un CUARTO ANILLO en salmón
   que se dibuja alrededor. No es un widget encima del logo: es el logo creciendo.

   CONTORNO DE TINTA EN UN ARCO: un `stroke` no admite contorno propio, así que cada
   anillo son DOS círculos con el mismo dash — el de tinta más grueso debajo, el de
   color más fino encima. Mismo principio que la ola (banda + canto de tinta).

   TODO EL PROGRESO LO ESCRIBE JS directamente en `stroke-dashoffset` y en el
   `transform` de la estrella. NADA de @keyframes ni de transition en las piezas que
   indican avance: bajo `prefers-reduced-motion` el reset global de este archivo
   anula animaciones y transiciones, y el indicador tiene que seguir informando.
   ════════════════════════════════════════════════════════════ */
.ld{
  position:fixed;inset:0;z-index:300;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;will-change:transform;
}
/* Estado final del loader: fuera de la capa de hit-testing y del árbol accesible.
   `visibility:hidden` además desactiva sus transiciones internas. */
.ld.is-done{opacity:0;visibility:hidden;pointer-events:none}

/* VERSIÓN EXPRESS — de la segunda página en adelante.
   La clase la pone el script inline del <head> leyendo sessionStorage, ANTES del
   primer pixel: si la decisión esperara a main.js (que va al final del <body>) el
   loader ya habría pintado un fotograma y cada navegación entraría con un parpadeo.
   En express manda la cortina, que es más corta y ya venía diseñada para eso — pero
   main.js la retiene igual hasta que las imágenes críticas de la página estén
   cargadas (con techo propio), así que sigue habiendo precarga, sin ceremonia. */
html.aps-express .ld{display:none}

.ld-in{
  position:relative;z-index:4;
  display:flex;flex-direction:column;align-items:center;
  padding:0 22px;
  /* el peel de salida rota y escala este bloque completo (sello + % + copy),
     así se despega como UNA calcomanía y no como tres piezas suributantes */
  will-change:transform;
}

/* ── El sello y su anillo ── */
.ld-seal{
  position:relative;
  /* 300 y no 268: el sello YA lleva un anillo rosa exterior, así que el anillo del
     progreso necesita aire para no leerse como un duplicado del que trae el arte.
     El logo baja a 68% y ese aire aparece — medido, 27px de claro. */
  width:min(300px,62vw);aspect-ratio:1;
  display:grid;place-items:center;
}
.ld-ring{
  position:absolute;inset:0;width:100%;height:100%;
  /* -90° para que el anillo empiece a dibujarse ARRIBA (las 12 en punto) y no a
     las 3, que es el default de SVG y se lee como un arco torcido. */
  transform:rotate(-90deg);overflow:visible;
}
.ld-ring circle{fill:none;stroke-linecap:round}
.ld-tr-ink{stroke:var(--ink);stroke-width:13}
.ld-tr    {stroke:var(--rosa);stroke-width:8.5}
.ld-ar-ink{stroke:var(--ink);stroke-width:13}
.ld-ar    {stroke:var(--salmon);stroke-width:8.5}
/* Estado 0% EN CSS, no en JS: si main.js tarda un fotograma en arrancar, sin esto el
   arco se pintaría COMPLETO (dasharray por defecto = línea continua) y el loader
   abriría en 100% para luego caer a 0. 703.72 = 2π·112, el r del SVG. */
.ld-ar,.ld-ar-ink{stroke-dasharray:703.72;stroke-dashoffset:703.72}

.ld-logo{
  position:relative;z-index:2;
  width:68%;height:auto;display:block;
}
/* La estrella del sello viaja en la punta del arco. El wrapper gira desde el centro
   del sello y la estrella cuelga en el radio del anillo (top:-4.5% ≈ r del arco). */
.ld-star{
  position:absolute;inset:0;z-index:3;line-height:0;
  transform:rotate(0deg);transform-origin:50% 50%;
}
.ld-star svg{
  position:absolute;left:50%;top:-4.5%;
  width:15%;height:auto;transform:translateX(-50%);
}
/* amarillo LITERAL con contorno de tinta: sobre blanco vale 1.25:1 y sin contorno
   no existiría. Es la misma receta que `--star-sticker` y que `.rings .rs`. */
.ld-star path{fill:var(--amarillo);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}

/* ── El número ── */
.ld-pct{
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(38px,7vw,62px);line-height:1;letter-spacing:-.02em;
  margin-top:clamp(20px,3.4vh,34px);
  font-variant-numeric:tabular-nums;   /* el ancho no baila al contar */
}
/* El signo % es secundario, pero sigue siendo TEXTO: la opacidad se queda en el
   escalón documentado (.78 = --ink-soft, 7.23:1 sobre blanco) y no en un gris
   decorativo. La jerarquía la hace el TAMAÑO, no el desvanecido. */
.ld-pct i{font-style:normal;font-size:.5em;margin-left:.06em;opacity:.78}

.ld-cap{
  font-family:var(--sans);font-weight:600;color:var(--ink-soft);
  font-size:clamp(12px,1.5vw,14px);text-transform:uppercase;letter-spacing:.16em;
  margin-top:clamp(9px,1.4vh,14px);text-align:center;
}

/* La ola rosadita del pie del loader: el mismo cierre orgánico que separa las
   bandas en el resto del sitio, para que el loader pertenezca al sitio. */
.ld > .wave{z-index:1}

/* ── PANTALLAS CORTAS ──
   El sello a 268px + número + copy no cabe bajo ~640px de alto sin comerse el aire.
   Se encoge el sello, no la tipografía: el % es la información. */
@media (max-height:640px){
  .ld-seal{width:min(184px,44vw)}
  .ld-pct{font-size:clamp(32px,6vw,44px);margin-top:16px}
}

/* ── MOVIMIENTO REDUCIDO ──
   El loader SE QUEDA (es funcional: informa y evita ver el sitio a medio pintar),
   pero pierde la coreografía. La estrella viajera se retira —es adorno en órbita— y
   el peel de salida lo cambia main.js por un fundido corto. El anillo sigue
   dibujándose porque es el indicador, y lo escribe JS, no una animación. */
@media (prefers-reduced-motion:reduce){
  .ld-star{display:none}
}

/* ════════════════════════════════════════════════════════════
   v5 · NAV PÍLDORA FLOTANTE + HOJA DE MENÚ
   Las puertas nunca son la única ruta: de aquí se llega a todo.
   ════════════════════════════════════════════════════════════ */
.pnav{
  position:fixed;top:clamp(14px,2vw,24px);left:clamp(14px,2vw,26px);z-index:100;
  display:flex;align-items:center;gap:10px;
}
.pnav-brand{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 15px 8px 9px;border-radius:100px;
  background:var(--white);border:var(--edge) solid var(--ink);
}
.pnav-word{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.012em;white-space:nowrap}
.pnav-demo{
  padding:3px 8px;border:1.5px solid var(--ink);border-radius:100px;
  font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);
}
.pnav-burger{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--white);border:var(--edge) solid var(--ink);cursor:pointer;position:relative;
}
.pnav-burger span{
  position:absolute;left:13px;width:18px;height:2.2px;border-radius:2px;background:var(--ink);
  transition:transform .4s var(--ease);
}
.pnav-burger span:nth-child(1){top:19px}
.pnav-burger span:nth-child(2){top:25px}
.pnav-burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.pnav-burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.pnav-burger:focus-visible,.dyk-btn:focus-visible,.door-tab:focus-visible,
.dyk-arrow:focus-visible,.dyk-close:focus-visible,.sheet-close:focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;
}

.sheet{
  position:fixed;inset:0;z-index:99;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4vh,38px);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.sheet.is-open{opacity:1;visibility:visible}
.sheet-nav{display:flex;flex-direction:column;align-items:center;gap:2px}
.sheet-nav a{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4.4vw,44px);letter-spacing:-.02em;padding:5px 0;
  transition:color .3s ease;
}
.sheet-nav a:hover{
  text-decoration:underline;text-decoration-color:var(--salmon);
  text-decoration-thickness:5px;text-underline-offset:6px;
}
/* la página actual es un sticker salmón con tinta encima (5.41:1 ✅) */
.sheet-nav a[aria-current]{
  background:var(--salmon);box-shadow:0 0 0 2px var(--ink);
  border-radius:.13em;padding:0 .14em;
}
.sheet-foot{text-align:center;max-width:46ch;padding:0 var(--pad);font-size:13px;color:var(--ink-soft)}
.sheet-foot a{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--salmon);text-decoration-thickness:2px;text-underline-offset:3px}
.sheet-foot p{margin-top:8px}
.sheet-close{
  position:absolute;bottom:clamp(20px,4vh,40px);left:50%;transform:translateX(-50%);
  padding:11px 24px;border-radius:100px;background:var(--white);
  border:var(--edge) solid var(--ink);color:var(--ink);cursor:pointer;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
}

/* ════════════════════════════════════════════════════════════
   v7 · EL LOBBY (secuencia pineada, conducida por scroll)
   Escritorio (≥1081px) CON motion: #lobby mide 100svh y ScrollTrigger lo PINEA
   durante 360vh. La geometría del escenario y de las tres puertas la calcula
   main.js (depende del ancho) y la conduce el `progress` del scrub.
   Móvil (≤1080px) y sin motion: scroll normal y puertas apiladas — §RESPONSIVE
   y §LOBBY APILADO.
   `z-index:0` es a propósito: crea un contexto de apilamiento para que el z-index
   de las puertas (6) NO compita con el nav píldora (100) ni con el cajón (96)
   cuando ScrollTrigger pasa el lobby a position:fixed durante el pin.
   ════════════════════════════════════════════════════════════ */
.lobby{position:relative;height:100svh;overflow:hidden;z-index:0}

.lobby-stage{
  position:absolute;top:0;left:0;height:100%;
  overflow:hidden;z-index:1;
  display:grid;align-content:center;
}
.lobby-copy{
  position:relative;z-index:2;
  /* ⚠ EL PADDING INFERIOR RESERVA LA BANDA DEL BOTÓN "¿Sabías que?".
     Ese botón es `position:fixed` abajo-izquierda (≈49px de alto + su offset), y
     el señuelo de scroll vive justo ahí. Medido a 1440×817: la pista ocupaba
     y 716..761 y el botón y 738..787 — se pisaban 23px, con las cajas solapadas
     también en X. La v1 no lo veía porque su escenario tenía una línea menos de
     copy; el mensaje inspirador oficial (que es más largo) destapó la colisión.
     Con 92px de reserva el señuelo termina en ~703 y quedan ~35px de aire. */
  padding:clamp(84px,10vh,124px) clamp(26px,4.4vw,74px) clamp(78px,10vh,96px);
  max-width:min(820px,100%);
}
.lobby-h1{
  /* El lema se compone en CUATRO líneas cortas. A 6.3vw en una sola línea larga
     ("no sirve para vivir.") reventaba la columna y el escalonado se perdía:
     medido en navegador a 1440px. 5.4vw × 4 líneas ≈ 320px de alto, que cabe
     holgado en el lobby fijo junto al eyebrow, la atribución y la pista. */
  font-size:clamp(36px,4.8vw,74px);
  line-height:1.02;letter-spacing:-.028em;
  margin:14px 0 18px;
}
/* Composición escalonada (líneas desalineadas a propósito, como la referencia).
   El padding-bottom generoso es obligatorio: el clip-reveal (overflow:hidden) se
   comía el descendente de la "p" en Fredoka. Ver BRAND-PROVISIONAL §3. */
.ln{display:block;overflow:hidden;padding-bottom:.19em;margin-bottom:-.13em}
/* Con el énfasis-sello (fondo salmón + contorno), dos líneas seguidas de <em> se
   pisaban y el contorno de la de arriba quedaba cortado por la de abajo: el
   compensador -.13em está calibrado para texto plano, no para cajas. Se afloja
   sólo donde hay sello. Medido a 1440px. */
.lobby-h1 .ln:has(em){margin-bottom:-.02em;overflow:visible}
.lobby-h1 .ln:has(em)+.ln:has(em){margin-top:.05em}
.ln>span{display:block}
.ln-2{padding-left:7%}
.ln-3{padding-left:2.5%}
.ln-4{padding-left:11%}

.lobby-attr{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);
}
.star{width:15px;height:15px;flex:none;color:var(--amarillo);filter:var(--ink-out)}   /* delineada */
.lobby-hint{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(16px,2.4vh,26px);
  font-size:14.5px;font-weight:700;color:var(--ink);
}
.lobby-hint i{font-style:normal;display:inline-block;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
.lobby-hint a{
  font-weight:500;color:var(--ink-soft);
  text-decoration:underline;text-decoration-color:var(--salmon);
  text-decoration-thickness:2px;text-underline-offset:3px;
}

/* ── v7 · EL SEÑUELO DE SCROLL ─────────────────────────────────────────────
   La mecánica nueva se conduce BAJANDO, así que en el primer frame tiene que
   haber una instrucción visible. Es un sticker literal (§2b): relleno SALMÓN
   —el color de la acción en este sitio— con TINTA encima (5.41:1 ✅ AA) y
   contorno de tinta de 2px. La flecha rebota hacia ABAJO, no hacia el lado:
   el gesto del adorno tiene que ser el gesto que se pide. */
.cue{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px 9px 13px;border-radius:100px;
  background:var(--salmon);color:var(--ink);border:var(--edge) solid var(--ink);
}
.cue-star{
  flex:none;width:16px;height:16px;
  background:var(--star-sticker) center/contain no-repeat;
}
.cue i{animation:nudge-dn 2.2s var(--ease) infinite}
@keyframes nudge-dn{0%,58%,100%{transform:translateY(0)}28%{transform:translateY(5px)}}
.only-m{display:none}

/* El escenario recorta (overflow:hidden) y el contorno del disco quedaba cortado a
   medio trazo contra la primera puerta, que se lee como error y no como recorte.
   Aquí el disco va SIN contorno; el que lleva contorno es el de las puertas y mundos,
   donde cabe entero. */
/* v6 · a color PLENO: al 85/80% de opacidad estas dos olas eran de facto un tint de
   rosa y de azulito sobre blanco — el recurso que la paleta cerrada elimina. */
/* v9 · Y A ANCHO DE VIEWPORT. Estas dos olas dejaron de ser hijas del escenario
   (que mide W − 3·T para dejarle sitio a las pestañas) y pasaron a ser hijas
   directas de `#lobby`: `left:0;right:0` heredado de `.wave` ahora vale el
   viewport entero, así que la franja derecha NUNCA se ve blanca — ni durante el
   intro, mientras las tres pestañas todavía vienen de fuera, ni en el primer
   fotograma tras el loader (cuya ola rosadita del pie sí corre a 1440px: ahora
   las dos rosas se encuentran en toda la anchura y el relevo se funde).
   ⚠ `z-index:2` ES LA MITAD DE LA PETICIÓN. `.wave` trae 3 de serie y las
   puertas reciben 3/4/5 de `applyScrub` (y 6 del CSS antes del primer frame):
   a 3 la ola habría empatado con la puerta 01 y el desempate lo decidiría el
   orden del DOM. A 2 queda garantizado que los tres colores entran POR ENCIMA
   de la ola. La opacidad la conduce main.js con la misma `so` del escenario, así
   que el barrido del scrub se ve exactamente igual que antes. */
.lobby-wv-1,.lobby-wv-2{height:clamp(40px,5vw,90px);z-index:2}

/* ── v7 · EL CIERRE DEL LOBBY ──────────────────────────────────────────────
   Antes (v5/v6) esto era `.lobby-mfoot` y sólo existía en móvil, porque el lobby
   de escritorio no scrolleaba. Ahora el pin se suelta después de la tercera
   puerta y este remate es el ATERRIZAJE de la secuencia: la cuarta ruta
   (Conócenos) y el aviso de que esto es un demo. Existe en los dos anchos. */
.lobby-out{
  position:relative;background:var(--white);
  padding:clamp(88px,13vh,150px) var(--pad) clamp(96px,15vh,150px);
  text-align:center;
}
.lobby-out-in{max-width:660px;margin:0 auto}
.lobby-out .eyebrow{margin-bottom:16px}
.lobby-out-h{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,4.4vw,60px);line-height:1.07;letter-spacing:-.022em;
  margin:0 0 18px;
}
.lobby-out-t{color:var(--ink-soft);font-size:clamp(16px,1.4vw,19px);margin-bottom:clamp(26px,4vh,38px)}
.lobby-out-note{
  margin-top:clamp(46px,7vh,72px);padding-top:clamp(26px,4vh,34px);
  border-top:1.5px solid var(--ink-faint);
  font-size:13.5px;color:var(--ink-soft);
}
.lobby-out-ig{margin-top:12px}
.lobby-out-ig a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--salmon);text-decoration-thickness:2px;text-underline-offset:3px}

/* ════════════════════════════════════════════════════════════
   v5 · LAS TRES PUERTAS
   Cerrada: una pestaña vertical de color con su etiqueta girada.
   Abierta: llena el viewport (menos las otras dos pestañas) y su etiqueta CRECE
   hasta ser el nombre gigante vertical del borde derecho. El mismo elemento hace
   de control (aria-expanded) y de titular gigante — un solo objeto, cero duplicación.
   Toda la tipografía va en --ink: sobre los tres literales da 5.41 / 8.08 / 11.82 ✅ AA.
   ════════════════════════════════════════════════════════════ */
.door{
  position:absolute;top:0;height:100%;overflow:hidden;z-index:6;
  background:var(--dc);color:var(--ink);
}
.door-1{--dc:var(--salmon);      --halo:var(--white); --mbody:var(--amarillo)}
.door-2{--dc:var(--azul);       --halo:var(--white); --mbody:var(--amarillo)}
.door-3{--dc:var(--amarillo);        --halo:var(--white); --mbody:var(--salmon)}
/* v6 · CANTO DE TINTA en el borde izquierdo de cada puerta: el corte entre bandas de
   color es un contorno, no un cambio de tono (las bandas del anillo del sello).
   Es un pseudo-elemento y NO un border para no tocar la geometría que calcula main.js. */
.door::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--edge-lg);
  background:var(--ink);z-index:8;pointer-events:none;
}

.door-tab-h{margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}
.door-tab{
  position:absolute;top:0;right:0;bottom:0;width:100%;
  z-index:4;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 clamp(26px,3.4vh,40px);
  transition:width .85s var(--ease);
}
.door-tab-t{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-weight:600;
  font-size:clamp(14px,1.1vw,17px);letter-spacing:.03em;white-space:nowrap;
  transition:font-size .85s var(--ease),letter-spacing .85s var(--ease),
             color .3s linear,text-shadow .3s linear;
}
/* Abierta: la pestaña se convierte en el nombre gigante vertical del borde derecho,
   centrado a la altura del panel (como la referencia). El tamaño se acota TAMBIÉN por
   altura de viewport: "Empresas aliadas" son 16 caracteres y a 104px en un viewport
   bajo se saldría por arriba y por abajo (el .door tiene overflow:hidden). */
.door.is-open .door-tab{width:clamp(96px,9.4vw,158px);align-items:center;padding:0}
/* --dvh es el techo por ALTURA, y va por puerta porque depende del largo de la
   etiqueta: el texto vertical mide ≈ nº_caracteres × 0.55em. Con un único techo,
   "Dona" (4) quedaba tan chica como "Empresas aliadas" (16). Medido a 1440×981. */
.door.is-open .door-tab-t{font-size:clamp(42px,min(7.2vw,var(--dvh,9vh)),104px);letter-spacing:-.024em}
/* ═══ v6 · LA FIRMA DEL SELLO ═══
   El rótulo gigante de la puerta SALMÓN va en BLANCO con anillo de tinta: es la "S"
   blanca delineada del logo a escala de sitio (§2b regla 2). Sólo aquí, y por una
   razón medida: el blanco sobre salmón vale 2.74:1 y es el anillo el que lo sostiene;
   sobre los tres pasteles el blanco cae a 1.2-1.8:1 y ningún contorno lo rescata,
   porque el relleno y el campo son igual de claros. Por eso los rótulos de las puertas
   azulito y amarilla se quedan en TINTA (8.08 y 11.82 ✅ AA).
   Nunca se ven dos rótulos gigantes a la vez (sólo hay una puerta abierta), así que la
   asimetría no llega a leerse como incoherencia. */
.door-1.is-open .door-tab-t{
  color:var(--white);
  /* anillo más grueso que el estándar: este glifo es el más grande del sitio y el
     contorno es su único portador de contraste */
  text-shadow:
     .05em 0 0 var(--ink), -.05em 0 0 var(--ink),
     0 .05em 0 var(--ink), 0 -.05em 0 var(--ink),
     .036em .036em 0 var(--ink), -.036em .036em 0 var(--ink),
     .036em -.036em 0 var(--ink), -.036em -.036em 0 var(--ink);
  /* ⚠ EL RETARDO ES OBLIGATORIO. La pestaña crece de 17px a 104px en .85s; si el
     relleno se vuelve blanco al instante, durante medio segundo hay texto blanco
     PEQUEÑO sobre salmón con un anillo de .05em ≈ 0.9px, es decir ilegible (2.74:1
     sin contorno efectivo). Con .55s de retardo el glifo ya está ~95% crecido
     (la curva --ease es fast-out) y el anillo mide ~3.7px. Detectado midiendo el
     estado intermedio en navegador, no leyendo el CSS. Al cerrar no hay retardo:
     la regla desaparece y vuelve a tinta con la transición base. */
  transition:font-size .85s var(--ease),letter-spacing .85s var(--ease),
             color .3s linear .55s,text-shadow .3s linear .55s;
}
.door-1{--dvh:13vh}    /* "Quiero donar" · 12 caracteres */
.door-2{--dvh:7.4vh}   /* "Quiero ser voluntario" · 21 */
.door-3{--dvh:9.2vh}    /* "Quiero ser aliado" · 17 */

.door-panel{
  position:absolute;inset:0;z-index:3;
  padding:clamp(96px,13vh,150px) clamp(112px,11.5vw,196px) clamp(56px,8vh,100px) clamp(28px,5vw,86px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(20px,4vw,64px);
  /* La aparición del contenido se hace en CSS (no en GSAP) a propósito: si los CDN
     fallan o el usuario pide reduced-motion, un tween ausente dejaba el panel en
     opacity:0 y la puerta se abría VACÍA. Bug encontrado en QA v5. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s var(--ease) .22s;
}
.door.is-open .door-panel{opacity:1;visibility:visible;pointer-events:auto}
.door-copy{max-width:min(52ch,100%)}
.door-h{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.6vw,54px);line-height:1.07;letter-spacing:-.022em;
  margin:14px 0 18px;
}
.door-txt{font-size:clamp(15px,1.3vw,18.5px);max-width:46ch;color:var(--ink)}
.door-cta{margin-top:clamp(22px,3vh,32px)}
.door-mascot{width:clamp(150px,17vw,250px)}

/* ════════════════════════════════════════════════════════════
   v7 · MODO SCRUB — cuando el SCROLL conduce la apertura
   `html.has-scrub` lo pone main.js sólo cuando el scrub está vivo (escritorio
   ≥1081px + GSAP + sin reduced-motion). Todo lo que arriba se anima con una
   TRANSICIÓN DE TIEMPO (.85s / .55s) tiene que apagarse aquí: en scrub el valor
   lo escribe main.js frame a frame como estilo inline, y una transición encima
   lo persigue con retraso — se ve como lag, no como suavidad.
   ════════════════════════════════════════════════════════════ */
.has-scrub .door-tab,
.has-scrub .door-tab-t{transition:none}
.has-scrub .door-panel{
  /* visibility:hidden sacaría el contenido del orden de tabulación, y en v7 el
     contenido de las tres puertas TIENE que ser alcanzable con Tab sin depender
     del scroll (main.js lleva el scroll al tramo correcto en `focusin`).
     Con opacity:0 el elemento sigue siendo enfocable; los clics fantasma los
     corta el `pointer-events` que escribe main.js. */
  visibility:visible;transition:none;
}
/* En scrub la pestaña NO usa la clase `.is-open` (main.js escribe width, font-size,
   letter-spacing y padding-bottom directamente): se queda en `align-items:flex-end`
   y el centrado vertical del rótulo abierto sale del padding calculado. `align-items`
   no se interpola, y el salto flex-end → center se veía como un tirón a mitad de
   tramo. Por eso `.is-open` no se pone: no existe un estado binario que anunciar,
   sólo un progreso. */

/* ═══ v7 · LA FIRMA DEL SELLO, AHORA CON UMBRAL DE PROGRESO ═══
   El mismo problema de v6 (blanco CHICO sobre salmón = 2.74:1 con un anillo de
   0.9px, ilegible) reaparece en scrub, pero peor: sin scrub el estado intermedio
   duraba medio segundo; con scrub el usuario puede PARARSE ahí. Por eso el
   retardo deja de ser de TIEMPO (.55s) y pasa a ser de PROGRESO: main.js pone
   `.is-lit` sólo cuando la puerta va >60% abierta, y ahí el glifo ya mide ~70px
   y el anillo ~3.5px. Medido en navegador a 1440×981, no leído del CSS. */
.has-scrub .door-1.is-lit .door-tab-t{
  color:var(--white);
  text-shadow:
     .05em 0 0 var(--ink), -.05em 0 0 var(--ink),
     0 .05em 0 var(--ink), 0 -.05em 0 var(--ink),
     .036em .036em 0 var(--ink), -.036em .036em 0 var(--ink),
     .036em -.036em 0 var(--ink), -.036em -.036em 0 var(--ink);
  transition:color .2s linear,text-shadow .2s linear;
}
/* La pestaña es un ATAJO, no el mecanismo. El cursor lo dice. */
.has-scrub .door-tab{cursor:pointer}

/* ════════════════════════════════════════════════════════════
   v5 · HERO DE MUNDO
   Banda del color de la puerta por la que se entró, cerrada con una ola.
   ════════════════════════════════════════════════════════════ */
.whero{
  position:relative;overflow:hidden;
  background:var(--page-accent);color:var(--ink);
  padding:clamp(120px,16vh,196px) 0 clamp(86px,12vh,148px);
}
.whero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.whero-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(18px,3vh,28px);
  padding:8px 17px;border-radius:100px;background:var(--white);
  border:1.5px solid var(--ink);
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  transition:transform .4s var(--ease);
}
.whero-back i{font-style:normal}
.whero-back:hover{transform:translateX(-3px)}
.whero-h{
  font-size:clamp(36px,5.9vw,84px);line-height:1.03;letter-spacing:-.028em;
  margin:14px 0 24px;
}
.whero-lead{font-size:clamp(17px,1.5vw,21px);max-width:54ch}
.whero-jump{margin-top:clamp(20px,3vh,30px);font-weight:700;font-size:14.5px}
.whero-jump a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2.5px}
.whero-jump i{font-style:normal;display:inline-block}
.whero-mascot{
  position:absolute;right:clamp(-30px,2vw,46px);bottom:clamp(56px,9vh,110px);
  width:clamp(140px,18vw,270px);z-index:1;
}

/* ════════════════════════════════════════════════════════════
   MANIFIESTO (el lema) — conocenos.html
   ════════════════════════════════════════════════════════════ */
.manifesto{
  position:relative;
  padding:clamp(80px,12vh,150px) var(--pad) clamp(100px,14vh,180px);
  background:var(--azul);
}
.mf-in{max-width:1000px;margin:0 auto;text-align:center}
.mf-in .eyebrow{margin-bottom:clamp(20px,3vh,34px)}
.mf{
  max-width:1000px;margin:0 auto;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3.4vw,46px);line-height:1.2;letter-spacing:-.02em;
}

/* ─── TRIPLE ANILLO DEL SELLO APS como ARCOS concéntricos ───
   Tres semicírculos anidados + la estrella en el centro: la geometría literal del
   logo a escala de divisor. Decorativo puro. Trazo de 11px a propósito: estos
   pastel se perciben por ÁREA, no por contraste. */
.rings{display:block;width:min(206px,54vw);margin:clamp(26px,3.6vh,40px) auto 0}
.rings svg{display:block;width:100%;height:auto;overflow:visible}
/* v6 · los tres arcos son los LITERALES y el conjunto se delinea con tinta
   (--ink-out sobre el <svg>): el amarillo y el rosa sobre blanco valen 1.2-1.3:1 y
   sin contorno no existirían. Es exactamente el sistema del arte: banda + contorno. */
.rings svg{filter:var(--ink-out)}
.rings path{fill:none;stroke-width:11;stroke-linecap:round}
.rings .a1{stroke:var(--rosa)}
.rings .a2{stroke:var(--amarillo)}
.rings .a3{stroke:var(--azul)}
.rings .rs{fill:var(--amarillo);stroke:none}

.mf-attr{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:clamp(20px,2.6vh,30px);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);
}
/* ════════════════════════════════════════════════════════════
   BANDA AMARILLA — el cierre del lobby con las 6 cifras oficiales
   ════════════════════════════════════════════════════════════ */
.impacto{
  position:relative;
  padding:clamp(80px,12vh,150px) 0 clamp(105px,14vh,180px);
  background:var(--amarillo);
}
/* v6 · la cifra va en TINTA (11.82:1 sobre el amarillo) y el salmón entra como
   DESREGISTRO — una copia desplazada, como una plancha mal registrada. El color
   acompaña; el contraste lo carga la tinta. */
/* ════════════════════════════════════════════════════════════
   DECK DE ÁLBUMES — MECANISMO FIRMA (galeria.html)
   Sticky (NO GSAP pin). Fondo interpolado + palabra gigante + lámina que cruza.
   ════════════════════════════════════════════════════════════ */
.deck{position:relative}
.deck-track{height:440svh}            /* 4 álbumes × ~110svh de pista */
.deck-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);   /* los 4 bloques son literales CLAROS → tipografía en tinta */
}
.deck-bg{position:absolute;inset:0;background:var(--salmon);z-index:0;will-change:background-color}
/* ↑ color de arranque = 1er bloque del deck. La secuencia completa (salmón → amarillo
   → rosa → azulito, los cuatro literales) la interpola main.js §DECK. */
/* las olas de entrada/salida son hijas de .deck (no del stage): entran y salen con
   el scroll en vez de quedarse pegadas mientras el stage está sticky */
.deck-wv-in,.deck-wv-out{z-index:5}

.deck-stars{position:absolute;inset:0;z-index:1;pointer-events:none;color:var(--ink)}
.deck-stars .ds{position:absolute;height:auto}
.ds-1{width:clamp(26px,3vw,42px);top:19%;left:8%;opacity:.12;transform:rotate(-10deg)}
.ds-2{width:clamp(15px,1.7vw,24px);top:34%;right:12%;opacity:.14;transform:rotate(14deg)}
.ds-3{width:clamp(19px,2.2vw,30px);bottom:16%;right:7%;opacity:.1;transform:rotate(-18deg)}

.deck-eyebrow{
  position:absolute;top:clamp(94px,13vh,116px);left:var(--pad);z-index:4;
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);   /* sólida: con alfa .85 daba 3.33:1 sobre el 4º bloque ✗ */
}
.deck-eyebrow::before{
  content:"";flex:none;width:15px;height:15px;
  background:var(--star-sticker) center/contain no-repeat;
}
.deck-count{
  position:absolute;top:clamp(94px,13vh,116px);right:var(--pad);z-index:4;
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.deck-count i{width:26px;height:2px;background:var(--ink)}

.deck-items{position:absolute;inset:0;z-index:2}
.deck-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:opacity}

/* palabra gigante — la lámina se le monta encima (profundidad tipo-detrás-de-objeto).
   OJO: `white-space:nowrap` + Fredoka (≈30% más ancha). Máximo 132px. La palabra
   más larga del deck v3 es "Voluntarios" (11 caracteres), más corta que las que
   la v1 midió a 1376px ("Campamento" daba 735px), así que el techo sigue holgado. */
.deck-word{
  position:absolute;left:0;right:0;top:50%;z-index:1;
  transform:translateY(-50%);text-align:center;
  font-size:clamp(42px,9.4vw,132px);line-height:.98;letter-spacing:-.028em;
  color:var(--ink);   /* tinta sólida: 5.41:1 en el bloque más oscuro ✅ AA */
  white-space:nowrap;pointer-events:none;will-change:transform,opacity;
}
.deck-card{
  position:relative;z-index:2;width:clamp(210px,25vw,340px);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink-veil);
  border:var(--edge-lg) solid var(--ink);will-change:transform,opacity;
}
.deck-card img{width:100%}
.deck-copy{
  /* El `bottom` reserva la banda del botón fijo "¿Sabías que?" (abajo-izquierda,
     ≈49px + su offset). Con el valor de la v1 —clamp(30px,7vh,70px)— la última
     línea del copy quedaba DEBAJO del botón. Mismo fallo que en el señuelo del
     lobby; los dos salieron de mirar la pantalla, no el CSS. */
  position:absolute;left:var(--pad);bottom:clamp(92px,13vh,124px);z-index:3;
  max-width:min(370px,72vw);will-change:transform,opacity;
}
.deck-copy .deck-kicker{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink);margin-bottom:10px;
}
.deck-copy .deck-text{font-size:clamp(15px,1.25vw,17.5px);color:var(--ink)}

/* ════════════════════════════════════════════════════════════
   BANDA ROSADITO + CHIPS
   Los chips usan los cuatro literales oficiales con --ink encima ✅ AA.

   NOTA (v10): `.chips` (el contenedor con el que se listaban los 24 aliados como
   píldoras de texto) se retiró al entrar los logos reales — ver §18b. `.chip` SE
   QUEDA: los cuatro VALORES de conocenos.html son chips y viven en `.values`.
   La regla que justifica el chip —contorno de tinta obligatorio— es la misma que
   sostiene la tarjeta de logo.
   ════════════════════════════════════════════════════════════ */
.band-rosa{position:relative;padding:clamp(56px,8vh,96px) 0 clamp(100px,13vh,150px);background:var(--rosa)}
.chip{
  padding:11px 22px;border-radius:100px;background:var(--salmon);color:var(--ink);
  /* contorno obligatorio: los pastel rondan 1.2-1.8:1 contra el blanco y sin él el
     chip desaparece como FORMA (el texto encima sí pasa AA: ≥5.41:1). */
  border:var(--edge) solid var(--ink);
  font-family:var(--display);font-size:15.5px;font-weight:500;
}
.chip:nth-child(4n+2){background:var(--amarillo)}
.chip:nth-child(4n+3){background:var(--azul)}
.chip:nth-child(4n+4){background:var(--rosa)}
/* el número de paso es un sello salmón pequeño con tinta encima (5.41:1 ✅) */
/* ════════════════════════════════════════════════════════════
   BANDA AZULITO
   ════════════════════════════════════════════════════════════ */
.band-azul{position:relative;padding:clamp(80px,12vh,150px) 0 clamp(105px,14vh,180px);background:var(--azul)}
/* ════════════════════════════════════════════════════════════
   BANDA AMARILLO (2) — testimonios en conocenos.html
   ════════════════════════════════════════════════════════════ */
.band-amarillo{position:relative;padding:clamp(80px,12vh,150px) 0 clamp(105px,14vh,180px);background:var(--amarillo)}
/* seleccionado = sello salmón con tinta encima (5.41:1 ✅) */
/* palomita en tinta: 5.41:1 */
/* foco = anillo SALMÓN sólido por fuera del contorno de tinta (nada difuso) */
/* ════════════════════════════════════════════════════════════
   GALERÍA — sección contenedora (las retículas son `.shots`, bloque v3)
   ════════════════════════════════════════════════════════════ */
.galeria{position:relative;padding:clamp(80px,13vh,160px) 0 clamp(110px,15vh,190px)}
/* Retícula de 4 columnas: fila 1 = nota (2) + 2 cuadradas · filas 2 y 3 = 2 anchas. */
/* ════════════════════════════════════════════════════════════
   CIERRE
   ════════════════════════════════════════════════════════════ */
.cierre{
  position:relative;text-align:center;background:var(--rosa);
  padding:clamp(80px,14vh,170px) 0 clamp(120px,17vh,210px);
}
.cierre h2{margin:16px 0 0;font-size:clamp(34px,5.6vw,78px)}
.cierre .rings{margin-top:clamp(26px,3.4vh,38px)}
.cierre-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3.6vh,40px)}

/* ════════════════════════════════════════════════════════════
   FOOTER
   v5: la franja recta tricolor de v4 se sustituyó por la OLA-ARCOÍRIS (.wavebow)
   que vive al final de la sección de cierre — cero líneas rectas.
   ════════════════════════════════════════════════════════════ */
/* El padding inferior es generoso a propósito: el botón flotante "¿Sabías que?" vive
   abajo-izquierda en todas las páginas y con 26px tapaba la línea del copyright. */
.foot{position:relative;background:var(--ink);color:var(--white);padding:clamp(52px,8vh,88px) 0 clamp(84px,9vh,100px)}
.foot-grid{
  display:grid;grid-template-columns:1.3fr .9fr .7fr 1.3fr;gap:clamp(26px,4vw,56px);
  padding-bottom:44px;border-bottom:1.5px solid rgba(255,255,255,.2);
}
.foot-word{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.018em}
.foot-word em{color:var(--amarillo)}   /* amarillo literal sobre tinta: 11.82:1 ✅ AAA */
.foot-brand p{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.62)}
.foot-col h4,.foot-disc h4{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;
  color:rgba(255,255,255,.5);margin-bottom:16px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14.5px;color:rgba(255,255,255,.88);transition:color .3s ease}
.foot-col a:hover{color:var(--amarillo)}
.foot-col .prov{color:rgba(255,255,255,.55);margin-left:6px;font-size:10px}   /* 5.51:1 ✅ */
.foot-disc p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.62)}
.foot-disc strong{color:rgba(255,255,255,.9)}
.foot-base{
  display:flex;justify-content:space-between;gap:16px;padding-top:22px;
  font-size:12px;color:rgba(255,255,255,.55);
}

/* ════════════════════════════════════════════════════════════
   v5 · CAJÓN PERSISTENTE "¿SABÍAS QUE?"
   Vive en las 5 páginas. Se abre en SALMÓN (el protagonista del sello) con una
   tarjeta blanca: así el módulo es el mismo en todo el sitio, sin importar el
   color de la página. Tinta sobre salmón = 5.41:1 ✅ AA.
   ════════════════════════════════════════════════════════════ */
.dyk-btn{
  position:fixed;left:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,30px);z-index:96;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px 11px 14px;border-radius:100px;
  background:var(--white);border:var(--edge) solid var(--ink);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:14.5px;cursor:pointer;
  transition:transform .4s var(--ease),background .3s ease;
}
.dyk-btn:hover{transform:translateY(-2px);background:var(--amarillo)}
.dyk-btn-star{display:grid;place-items:center;width:22px;height:22px;flex:none}
.dyk-btn-star svg{width:17px;height:17px;fill:var(--amarillo);display:block;filter:var(--ink-out)}

.dyk{
  position:fixed;inset:0;z-index:140;background:var(--salmon);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(70px,12vh,120px) clamp(20px,9vw,140px);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.dyk.is-open{opacity:1;visibility:visible}
.dyk-card{
  width:min(760px,100%);background:var(--white);
  border-radius:var(--r-lg);overflow:hidden;
  border:var(--edge-lg) solid var(--ink);
}
.dyk-h{
  padding:18px;text-align:center;border-bottom:var(--edge) solid var(--ink);
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);
}
.dyk-body{padding:clamp(30px,5vw,56px) clamp(22px,4vw,54px);text-align:center}
.dyk-ico{
  display:grid;place-items:center;width:46px;height:46px;
  margin:0 auto clamp(18px,3vh,26px);border-radius:50%;background:var(--white);
  border:var(--edge) solid var(--ink);
}
.dyk-ico svg{width:22px;height:22px;fill:var(--amarillo);display:block;filter:var(--ink-out)}
.dyk-fact{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.5vw,32px);line-height:1.24;letter-spacing:-.015em;color:var(--ink);
}
.dyk-tag{
  margin-top:18px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);
}
.dyk-count{
  position:absolute;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.dyk-ctrl{
  position:absolute;right:clamp(52px,5.4vw,84px);bottom:clamp(74px,11vh,120px);
  display:flex;flex-direction:column;gap:12px;
}
.dyk-arrow{
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  background:var(--white);color:var(--ink);font-size:19px;
  display:grid;place-items:center;border:var(--edge) solid var(--ink);
  transition:transform .4s var(--ease);
}
.dyk-arrow i{font-style:normal;line-height:1}
.dyk-arrow:hover{transform:translateY(-2px)}
.dyk-arrow-next{background:var(--ink);color:var(--white)}
.dyk-close{
  position:absolute;left:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,30px);
  padding:11px 22px;border-radius:100px;background:var(--white);
  border:var(--edge) solid var(--ink);color:var(--ink);cursor:pointer;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ── ≤1080px: EL LOBBY DEJA DE SER FIJO ──────────────────────────────────
   La cautela del estudio de la referencia: el scroll-jack es hostil en móvil.
   Aquí las tres puertas se apilan como bandas de color a ancho completo, con su
   contenido SIEMPRE visible (no hay acordeón que esconda nada) y scroll normal.
   main.js limpia toda la geometría inline al cruzar este breakpoint. */
@media (max-width:1080px){
  .lobby{height:auto;overflow:visible;display:block}
  .lobby-stage{
    position:relative;left:auto !important;width:auto !important;opacity:1 !important;
    height:auto;overflow:visible;display:block;
  }
  .lobby-copy{padding:clamp(112px,17vh,160px) var(--pad) clamp(34px,6vh,60px);max-width:none}
  .lobby-wv-1{display:none}   /* la ola superior tapaba el nav píldora en una columna */
  .lobby-wv-2{display:none}   /* el borde del escenario lo marca ya la banda salmón */

  .door{
    position:relative !important;top:auto;left:auto !important;width:auto !important;
    height:auto;z-index:auto !important;
  }
  .door-tab-h{display:none}   /* en una columna no hay pestaña que expandir */
  .door::before{display:none}  /* apiladas, el canto lo pone la ola, no una línea */
  .door-panel{
    position:relative;inset:auto;display:block;opacity:1 !important;
    visibility:visible;pointer-events:auto;
    padding:clamp(46px,8vw,70px) var(--pad) clamp(52px,9vw,78px);
  }
  .door-copy{max-width:none}
  .door-h{margin:12px 0 16px}
  .door-mascot{width:clamp(120px,26vw,170px);margin:clamp(26px,5vw,38px) 0 0}
  .door .wave{display:block}
  /* la instrucción cambia de gesto: en una columna no hay puertas que abrir,
     hay bandas que recorrer. (Antes `.only-m` no se encendía nunca — bug de v5
     que salió al reescribir el señuelo en v7.) */
  .only-d{display:none}
  .only-m{display:inline-flex}
  .lobby-out{padding-bottom:clamp(100px,16vw,130px)}

  .whero-mascot{
    position:relative;right:auto;bottom:auto;
    width:clamp(130px,28vw,190px);margin:clamp(30px,6vw,46px) auto 0;
  }
  .whero{padding-bottom:clamp(96px,14vh,150px)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* en escritorio las olas internas de las puertas no existen (no hay bandas apiladas) */
@media (min-width:1081px){ .door .wave{display:none} }

@media (max-width:640px){
  body{font-size:16px}

  /* Fredoka es ancha: el lema a 6.3vw no cabía en 390px. Recalibrado y sin
     escalonado (en una columna estrecha el escalonado se lee como error). */
  .lobby-h1{font-size:clamp(33px,9.6vw,46px);letter-spacing:-.022em}
  .ln-2,.ln-3,.ln-4{padding-left:0}
  .lobby-hint{font-size:13.5px}
  .whero-h{font-size:clamp(31px,8.8vw,44px)}
  .door-h{font-size:clamp(25px,7.4vw,36px)}
  .dyk-fact{font-size:clamp(18px,5.4vw,24px)}

  .pnav-word{font-size:15.5px}
  .pnav-demo{display:none}   /* el badge DEMO sigue en el pie y en el menú */

  .mf{font-size:clamp(20px,5.7vw,28px)}

  /* deck en móvil: la palabra se reduce y la lámina baja para no chocar con el copy */
  .deck-track{height:400svh}
  .deck-stage{align-items:flex-start}
  .deck-word{top:26%;font-size:clamp(30px,9.6vw,46px);white-space:normal;padding:0 16px}
  .deck-card{width:min(53vw,230px);margin-top:20svh}
  .deck-copy{left:var(--pad);right:var(--pad);bottom:clamp(22px,5vh,40px);max-width:none}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-base{flex-direction:column;gap:6px}
  .cierre-cta{flex-direction:column;align-items:stretch}
  .cierre-cta .btn{width:100%}
}

/* El cajón de datos en una columna: el contador y las flechas dejan de flotar al
   borde (a 390px se montaban sobre la tarjeta) y pasan al flujo, bajo la tarjeta. */
@media (max-width:760px){
  .dyk{flex-direction:column;padding:clamp(66px,10vh,90px) 18px clamp(76px,12vh,100px)}
  .dyk-count{position:static;writing-mode:horizontal-tb;transform:none;margin-top:16px;text-align:center}
  .dyk-ctrl{position:static;flex-direction:row;justify-content:center;margin-top:16px}
  .dyk-arrow{width:48px;height:48px}
  .dyk-close{left:50%;transform:translateX(-50%)}
}

/* ─────────── ACCESIBILIDAD ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv,.lv{opacity:1 !important;transform:none !important}
  .curtain{display:none}
  .cue i{animation:none}
  .whero-mascot{position:relative;right:auto;bottom:auto;width:clamp(140px,18vw,220px);margin:clamp(30px,5vw,46px) auto 0}
  /* El marquee de logos también se apaga aquí, pero sus reglas NO pueden vivir en
     este bloque: `.lgm-row` se define en §18b, más abajo en el archivo, y ganaría
     por orden. Van en su propio @media justo después. Comprobado forzando la
     media query en el navegador: desde aquí, `overflow-x` y la máscara no
     entraban. */
}

/* ════════════════════════════════════════════════════════════
   v7 · EL LOBBY APILADO — camino sin motion
   Se aplica cuando main.js NO pudo poner `has-motion` en <html>: sin GSAP (CDN
   caído), con `prefers-reduced-motion: reduce`, o sin JS del todo. Y como la
   clase la pone JS, si el JS no corre siquiera, este bloque manda igual.
   Las tres puertas se muestran ABIERTAS, en columna, con todo su contenido —
   el mismo layout que en móvil. Es la respuesta al bug de v5 (puerta que abría
   VACÍA sin GSAP): aquí no hay nada que abrir.
   En v5/v6 estas reglas vivían dentro de @media (prefers-reduced-motion) y no
   cubrían "GSAP no cargó"; ahora sí, porque en v7 el mecanismo depende de
   ScrollTrigger y sin él no habría lobby.
   Arnés de prueba: _qa/_nomotion.html?p=index
   ════════════════════════════════════════════════════════════ */
html:not(.has-motion) .lobby{height:auto;overflow:visible;display:block}
html:not(.has-motion) .lobby-stage{position:relative;left:auto !important;width:auto !important;opacity:1 !important;height:auto;display:block}
html:not(.has-motion) .lobby-copy{padding:clamp(112px,17vh,160px) var(--pad) clamp(34px,6vh,60px);max-width:none}
html:not(.has-motion) .lobby-wv-1,html:not(.has-motion) .lobby-wv-2{display:none}
html:not(.has-motion) .only-d{display:none}
html:not(.has-motion) .only-m{display:inline-flex}
html:not(.has-motion) .door{position:relative !important;left:auto !important;width:auto !important;height:auto;z-index:auto !important}
html:not(.has-motion) .door-tab-h{display:none}
html:not(.has-motion) .door::before{display:none}
html:not(.has-motion) .door-panel{position:relative;inset:auto;display:block;opacity:1 !important;visibility:visible;pointer-events:auto !important;
            padding:clamp(46px,8vw,70px) var(--pad) clamp(52px,9vw,78px)}
html:not(.has-motion) .door .wave{display:block}
html:not(.has-motion) .door-mascot{width:clamp(130px,16vw,180px);margin:clamp(26px,4vw,38px) 0 0}

/* ════════════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════════════
   v3 · BLOQUE NUEVO — LO QUE PIDE EL CONTENIDO DE LA CLIENTA
   Todo lo de aquí abajo se añadió para montar las 11 secciones del documento de
   Karla dentro de la arquitectura de la v1. Nada de esto sustituye al sistema
   sticker: lo extiende con las mismas primitivas (relleno plano + contorno de
   tinta + esquinas redondeadas + texto en tinta).
   ════════════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   1 · LA REGLA TIPOGRÁFICA DE KARLA
   "Títulos salmón · subtítulos azul · cuerpo negro."

   Se aplica SÓLO SOBRE BLANCO, y no por gusto: medidos sobre los pasteles, los
   derivados de texto caen a 1.6-3.6:1 (ver la tabla del bloque :root). Sobre un
   campo de color manda la regla 1 del sistema sticker — TINTA — que ahí da
   5.41-11.82:1. Es la única forma de honrar su intención sin bajar de AA.
   `.on-color` es la marca explícita de "aquí estamos sobre relleno de marca".
   ──────────────────────────────────────────────────────────────────────────── */
.t-title{color:var(--salmon-title)}      /* display ≥24px · 3.01:1 sobre blanco */
.t-title-sm{color:var(--salmon-deep)}    /* títulos chicos · 4.52:1 */
.t-sub{color:var(--azul-title)}          /* subtítulos grandes · 3.00:1 */
.eyebrow.t-eyebrow{color:var(--azul-deep)} /* eyebrows · 4.50:1 */

/* Sobre campo de color de marca todo vuelve a TINTA. */
.on-color .t-title,.on-color .t-title-sm,.on-color .t-sub,
.on-color .eyebrow.t-eyebrow,
.impacto .t-title,.impacto .eyebrow.t-eyebrow,
.whero .t-title,.whero .eyebrow.t-eyebrow,
.door .t-title,.door .eyebrow.t-eyebrow,
.band-rosa .t-title,.band-rosa .eyebrow.t-eyebrow,
.band-amarillo .t-title,.band-amarillo .eyebrow.t-eyebrow,
.band-azul .t-title,.band-azul .eyebrow.t-eyebrow,
.manifesto .t-title,.manifesto .eyebrow.t-eyebrow,
.cierre .t-title,.cierre .eyebrow.t-eyebrow{color:var(--ink)}

/* enlaces de cuerpo: salmón profundo (4.52:1) y subrayado grueso */
.body-link,.rt a{
  color:var(--salmon-deep);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
.body-link:hover,.rt a:hover{color:var(--ink)}
.on-color .body-link,.on-color .rt a{color:var(--ink);text-decoration-color:var(--white)}

/* ────────────────────────────────────────────────────────────────────────────
   2 · EL LOGO REAL DE APS
   Sustituye a la "estrella-mascota" que la v1 se había inventado como stand-in.
   Reutiliza el posicionamiento y el halo de `.mascot-wrap` para no duplicar
   reglas responsive. La estrella SIGUE viva como viñeta (--star-sticker): el
   logo real la lleva dentro, así que es un acento legítimo y no un invento.
   ──────────────────────────────────────────────────────────────────────────── */
.logo-img{position:relative;z-index:1;display:block;width:100%;height:auto}
.lobby-logo{
  position:absolute;right:clamp(-10px,2vw,40px);bottom:9%;
  width:clamp(150px,19vw,272px);z-index:1;
}
.lobby-logo .mascot-halo{border:0}   /* el escenario recorta: un contorno cortado se lee como error */

/* ────────────────────────────────────────────────────────────────────────────
   3 · FOTO CIRCULAR (la que va en el hueco de la mascota, en las puertas)
   Regla de la casa: las fotos de la clienta son de teléfono/WhatsApp y NUNCA
   van a sangre — sólo enmarcadas. Un disco de 250px con contorno de tinta es
   exactamente eso, y encima recicla el halo como anillo del sticker.
   ──────────────────────────────────────────────────────────────────────────── */
.pic-circle{
  /* `display:block` es OBLIGATORIO: es un <span>, y en un elemento inline el
     navegador ignora aspect-ratio y no recorta con overflow:hidden — la foto
     salía como un rectángulo desbordando el círculo. Medido en navegador
     (la caja daba 251×27px, la imagen 245×326). */
  display:block;
  position:relative;z-index:1;width:100%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:var(--white);
  border:var(--edge-lg) solid var(--ink);
}
.pic-circle img{width:100%;height:100%;object-fit:cover}

/* ────────────────────────────────────────────────────────────────────────────
   4 · CONTADORES OFICIALES (6 cifras)
   La v1 tenía 4 en una retícula con filetes; Karla entrega SEIS, así que pasan a
   tarjetas-sticker de color cíclico. `.stat-n` se conserva porque es el gancho
   que main.js anima (data-to / data-prefix).
   ──────────────────────────────────────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.num{
  padding:clamp(20px,2.4vw,30px) 18px;text-align:center;
  background:var(--white);border:var(--edge-lg) solid var(--ink);border-radius:var(--r-lg);
}
.num:nth-child(3n+1){background:var(--rosa)}
.num:nth-child(3n+2){background:var(--azul)}
.num:nth-child(3n+3){background:var(--amarillo)}
/* …salvo sobre la propia banda amarilla, donde el tercer color del ciclo
   desaparecería como FORMA (amarillo sobre amarillo: la tarjeta se quedaba en
   puro contorno mientras sus vecinas tienen relleno). Ahí toma blanco. */
.impacto .num:nth-child(3n+3){background:var(--white)}
.num .stat-n{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.025em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  text-shadow:none;   /* el desregistro salmón de la v1 no funciona sobre 3 fondos distintos */
}
.num span{display:block;margin-top:10px;font-size:14px;line-height:1.35;color:var(--ink)}
.nums-note{margin-top:22px;font-size:13.5px;font-style:italic;color:var(--ink-soft);text-align:center}

/* ────────────────────────────────────────────────────────────────────────────
   5 · TARJETA GENÉRICA + MEDIA
   ──────────────────────────────────────────────────────────────────────────── */
.card{
  padding:clamp(24px,2.8vw,34px);background:var(--white);
  border:var(--edge-lg) solid var(--ink);border-radius:var(--r-lg);
  display:flex;flex-direction:column;
}
.card h3{margin-bottom:12px;color:var(--salmon-deep)}
.card--rosa{background:var(--rosa)} .card--azul{background:var(--azul)}
.card--amarillo{background:var(--amarillo)} .card--salmon{background:var(--salmon)}
.card--rosa h3,.card--azul h3,.card--amarillo h3,.card--salmon h3{color:var(--ink)}
.card p{color:var(--ink)}
.card--white-in{background:var(--white)}

.pic{
  border-radius:var(--r);border:var(--edge-lg) solid var(--ink);
  overflow:hidden;background:var(--rosa);
}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--ease)}
.pic--tall img{aspect-ratio:3/4}
.pic--sq img{aspect-ratio:1/1}
.pic--wide img{aspect-ratio:16/10}
a.pic:hover img,.card:hover .pic img{transform:scale(1.03)}
.pic figcaption,.piccap{
  padding:11px 2px 0;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* retículas de propósito general */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,20px)}
.g-mid{align-items:center}
.g-top{align-items:start}

/* ────────────────────────────────────────────────────────────────────────────
   6 · LISTAS CON VIÑETA-STICKER
   ──────────────────────────────────────────────────────────────────────────── */
.ticks{list-style:none}
.ticks li{position:relative;padding-left:36px;margin-bottom:15px;line-height:1.55;color:var(--ink)}
.ticks li::before{
  content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--azul);border:2.5px solid var(--ink);
}
.ticks--salmon li::before{background:var(--salmon)}
.ticks--amarillo li::before{background:var(--amarillo)}
.ticks--rosa li::before{background:var(--rosa)}

/* ────────────────────────────────────────────────────────────────────────────
   7 · MISIÓN / VISIÓN / VALORES
   ──────────────────────────────────────────────────────────────────────────── */
/* Desde 2026-08-03 son TRES tarjetas pares: Misión, Visión y Valores. Antes eran
   dos tarjetas + un bloque suelto de chips bajo un eyebrow, y los valores no leían
   al mismo nivel. A ≤1080px la fila ya colapsa a 1 columna (§RESPONSIVE), así que
   el móvil no necesita regla nueva. */
.mv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.values{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;list-style:none}
/* Dentro de la tarjeta el chip baja un punto: así "Responsabilidad" y "Compromiso"
   caben de dos en dos en una columna de ~350px y Valores no dispara la altura de
   la fila (el grid estira las tres a la más alta). Y como la tarjeta es SALMÓN, se
   reasignan los colores del ciclo: el salmón sobre salmón desaparecería. */
.mv .values{margin-top:14px;gap:10px}
.mv .values .chip{font-size:14px;padding:8px 16px}
.mv .values .chip:nth-child(4n+1){background:var(--rosa)}
.mv .values .chip:nth-child(4n+2){background:var(--amarillo)}
.mv .values .chip:nth-child(4n+3){background:var(--azul)}
.mv .values .chip:nth-child(4n+4){background:var(--white)}

/* ────────────────────────────────────────────────────────────────────────────
   8 · CALENDARIO ANUAL (las 8 fechas oficiales)
   ──────────────────────────────────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,20px);list-style:none}
.cal-item{
  padding:22px 20px;background:var(--white);
  border:var(--edge-lg) solid var(--ink);border-radius:var(--r);
}
.cal-item:nth-child(4n+1){background:var(--rosa)}
.cal-item:nth-child(4n+2){background:var(--azul)}
.cal-item:nth-child(4n+3){background:var(--amarillo)}
.cal-item i{
  display:block;font-style:normal;margin-bottom:7px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.cal-item b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.5vw,21px);line-height:1.15;color:var(--ink);
}

/* ────────────────────────────────────────────────────────────────────────────
   9 · FAQ
   ──────────────────────────────────────────────────────────────────────────── */
.faq{max-width:860px}
.faq details{
  padding:18px 24px;margin-bottom:12px;background:var(--white);
  border:var(--edge-lg) solid var(--ink);border-radius:var(--r);
}
.faq summary{
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,19px);
  cursor:pointer;list-style:none;color:var(--ink);display:flex;gap:12px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--salmon-deep);font-weight:700;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:13px;color:var(--ink-soft);font-size:15.5px}
.faq details[open]{background:var(--rosa)}
.faq details[open] p{color:var(--ink)}

/* ────────────────────────────────────────────────────────────────────────────
   10 · ANTES / DESPUÉS
   ──────────────────────────────────────────────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.ba figure{margin:0}
.ba img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:var(--edge-lg) solid var(--ink);border-radius:var(--r);
}
.ba--tall img{aspect-ratio:3/4}
.ba figcaption{
  margin-top:11px;font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--azul-deep);
}
.on-color .ba figcaption,.impacto .ba figcaption,.band-rosa .ba figcaption{color:var(--ink)}

/* ────────────────────────────────────────────────────────────────────────────
   11 · DATOS BANCARIOS
   ──────────────────────────────────────────────────────────────────────────── */
.bank{
  background:var(--white);border:var(--edge-lg) solid var(--ink);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);margin-top:18px;
}
.bank dl{display:grid;grid-template-columns:auto 1fr;gap:11px 24px;margin:0}
.bank dt{font-family:var(--display);font-weight:600;color:var(--ink)}
.bank dd{margin:0;font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink)}
.bank dd strong{
  font-size:22px;letter-spacing:.04em;
  background:var(--amarillo);box-shadow:0 0 0 2px var(--ink);border-radius:.14em;padding:1px .18em;
}
.bank-note{margin-top:18px;font-size:14px;color:var(--ink-soft)}

/* ────────────────────────────────────────────────────────────────────────────
   12 · TESTIMONIOS EN VIDEO
   Los rostros de los niños ya venían cubiertos en el material original.
   ──────────────────────────────────────────────────────────────────────────── */
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);max-width:820px}
.vid{border:var(--edge-lg) solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.vid video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.vid-cap{background:var(--white);padding:16px 20px}
.vid-cap b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.vid-cap p{margin-top:4px;font-size:14px;color:var(--ink-soft)}

/* ────────────────────────────────────────────────────────────────────────────
   13 · NOTICIAS Y RECONOCIMIENTOS
   ──────────────────────────────────────────────────────────────────────────── */
.news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
/* El rótulo de la tarjeta ("Colaboración", "Reconocimiento") también es un <p>,
   así que esta regla —más específica que `.eyebrow`— se lo llevaba por delante y
   lo dejaba en 15.5px mientras el resto del sitio subía. El :not() la limita al
   cuerpo de la tarjeta, que es lo que quería achicar. */
.news .card p:not(.eyebrow){font-size:15.5px}
.news .card .btn{margin-top:auto;align-self:flex-start}
.news .pic{margin-bottom:18px}

/* ────────────────────────────────────────────────────────────────────────────
   14 · GALERÍA POR ÁLBUMES
   ──────────────────────────────────────────────────────────────────────────── */
.album{margin-bottom:clamp(46px,6vw,80px)}
.album-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.album-head h2{font-size:clamp(26px,3.4vw,44px)}
.album-head p{
  /* `--azul-title` (3.00:1) es el token de subtítulo GRANDE: sólo vale a ≥24px.
     Aquí el subtítulo del álbum va a 15px, así que toma `--azul-deep` (4.50:1),
     que es el token AA para texto normal. Medido en navegador: con azul-title
     daba 3.00:1 contra el umbral de 4.5. */
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--azul-deep);
}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.shots img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:var(--edge) solid var(--ink);border-radius:var(--r);
  transition:transform 1.2s var(--ease);
}
.shots img:hover{transform:scale(1.03)}
.shots--tall img{aspect-ratio:3/4}

/* ────────────────────────────────────────────────────────────────────────────
   15 · AVISOS DE PENDIENTE
   Regla dura del proyecto: lo que la clienta no entregó NO se rellena con texto
   plausible — se marca. El rayado hace imposible confundirlo con contenido final.
   ──────────────────────────────────────────────────────────────────────────── */
.pending{
  padding:22px 26px;border-radius:var(--r);
  border:var(--edge-lg) dashed var(--ink);
  background:repeating-linear-gradient(45deg,
    var(--white),var(--white) 11px,var(--rosa) 11px,var(--rosa) 22px);
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.pending b{
  /* TINTA, no salmón. `--salmon-deep` (#E91E00) da 4.52:1 sobre blanco, pero el
     fondo de `.pending` es un rayado que alterna blanco y ROSADITO, y sobre el
     rosadito cae a 3.54:1 — medido en navegador: 3.61:1 a 15px, por debajo de
     AA. La tinta pasa en las dos bandas del rayado (14.80 y 11.59). */
  font-family:var(--display);font-weight:600;color:var(--ink);
}
.tag-pending{
  display:inline-block;vertical-align:baseline;
  background:var(--amarillo);border:2px solid var(--ink);border-radius:100px;
  padding:2px 11px;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;color:var(--ink);white-space:nowrap;
}

/* ────────────────────────────────────────────────────────────────────────────
   16 · BLOQUE DE CITA (la historia en 1ª persona de Karla)
   Va como CITA porque eso es literalmente lo que es: su texto, en su voz.
   ──────────────────────────────────────────────────────────────────────────── */
.saying{
  padding:clamp(26px,3vw,38px);background:var(--amarillo);
  border:var(--edge-lg) solid var(--ink);border-left:10px solid var(--salmon);
  border-radius:var(--r-lg);
}
.saying blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(18px,1.9vw,25px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);
}
.saying figcaption{
  margin-top:16px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink);
}

/* texto de cuerpo de las secciones nuevas */
.rt{font-size:clamp(16px,1.35vw,18.5px);color:var(--ink-soft);max-width:62ch}
.rt p+p{margin-top:16px}
.rt strong{color:var(--ink)}
.on-color .rt,.impacto .rt,.band-rosa .rt,.band-amarillo .rt,.band-azul .rt,.whero .rt{color:var(--ink)}
.lead-t{font-size:clamp(17px,1.5vw,21px);color:var(--ink);max-width:58ch}

/* ────────────────────────────────────────────────────────────────────────────
   17 · SECCIONES GENÉRICAS (para las páginas que no son el lobby)
   ──────────────────────────────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(72px,11vh,140px) 0}
.sec--rosa{background:var(--rosa)}
.sec--azul{background:var(--azul)}
.sec--amarillo{background:var(--amarillo)}
.sec--salmon{background:var(--salmon)}
.sec--rosa,.sec--azul,.sec--amarillo,.sec--salmon{color:var(--ink)}

/* ────────────────────────────────────────────────────────────────────────────
   18 · CIERRE DEL LOBBY: la fila de aliados
   ──────────────────────────────────────────────────────────────────────────── */
.aliados-band{position:relative;padding:clamp(70px,10vh,120px) 0 clamp(80px,12vh,140px)}
.chips-lbl{
  text-align:center;margin:clamp(26px,3.4vh,38px) 0 14px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-soft);
}

/* ════════════════════════════════════════════════════════════════════════════
   18b · LOGOS DE LOS ALIADOS (v10, 2026-07-29)
   Sustituyen los chips de texto. Dos piezas: el MARQUEE del cierre del lobby y
   la REJILLA del mundo Empresas. Las dos comparten la tarjeta `.lgc`.

   ── POR QUÉ TARJETA Y NO LOGO SUELTO ──
   Los 24 logos traen 24 paletas ajenas (rojo Colgate, verde Palmolive, morado
   Taco Bell). Sueltos sobre los washes pastel del sitio serían 24 colores nuevos
   flotando y el sistema se rompe. Encerrados en la tarjeta sticker —blanco +
   contorno de tinta, la misma pieza que puertas, chips y botones— el color ajeno
   queda ACOTADO: la página sigue teniendo seis colores y las tarjetas son
   ventanas. Es la única excepción cromática del sitio y está contenida.

   ── EL TRUCO DEL TAMAÑO (leer build.py, sección LOGOS_*) ──
   Cada .webp se generó con su tamaño intrínseco = 2× el tamaño de pantalla, con
   la normalización ÓPTICA ya calculada (wordmarks anchos topan por ancho, marcas
   cuadradas por alto). Por eso aquí basta con DOS topes: uno de los dos muerde
   siempre y el logo aterriza solo. Nada de alturas por logo en el CSS.
   ──────────────────────────────────────────────────────────────────────────── */
/* La ARITMÉTICA de la tarjeta, que no es libre:
   ancho 204 − 2×18 de padding = 168px de caja útil para un logo que topa a 150.
   Quedan 9px de holgura por lado. Antes la tarjeta medía 178 (142 útiles) y los
   wordmarks anchos —Lux Mundi, Carol Morgan, Palmolive— SE PEGABAN al contorno
   de tinta: no se recortaban, pero la letra final tocaba la línea y la tarjeta
   dejaba de leerse como sticker. Visto en pantalla, no calculado en el aire.
   Si alguien cambia `--lgw`, tiene que mover el ancho con él. */
.lgc{
  --lgw:150px; --lgh:52px;
  list-style:none;display:grid;place-items:center;
  min-height:92px;padding:14px 18px;
  background:var(--white);border:var(--edge) solid var(--ink);border-radius:var(--r-sm);
}
/* Blanco sobre blanco: el contorno de tinta ES la tarjeta (regla 3 del sistema —
   cero box-shadow difuso en el sitio). Sobre el rosadito de empresas.html el
   blanco además separa por sí solo. */
.lgc img{max-width:var(--lgw);max-height:var(--lgh);width:auto;height:auto;display:block}

/* ── TARJETA AZULITO: los tres logos de TEXTO BLANCO ──
   Carol Morgan (versión blanca oficial), Lux Mundi (texto blanco + flama dorada) y
   Decolor (tagline "by NicaDom" en blanco) desaparecen sobre tarjeta blanca —
   comprobado renderizándolos sobre blanco / azulito / tinta antes de decidir.
   Azulito los deja legibles COMO FORMA y mantiene el registro pastel.
   ⚠ Importadora Nicadom NO va aquí: su "Dom" es cian y se disuelve. */
.lgc--azul{background:var(--azul)}

/* ── LOS TRES DE BAJA RESOLUCIÓN ──
   Letrax, El Planeta/Aremar e Importadora Nicadom sólo existen en la resolución
   que publican sus dueños. Se muestran más chicos para que el escalado no se lea
   como defecto del sitio. Pendiente: pedir originales. */
.lgc--sm{--lgw:108px; --lgh:39px}

/* ── MARQUEE (cierre del lobby) ────────────────────────────────────────────
   CSS puro y a propósito: el lobby ya vive de ScrollTrigger y el cajón "¿Sabías
   que?" de listeners; una tercera pieza con JS sería una tercera cosa que puede
   pelearse. Aquí no hay ni un listener.
   La máscara de los bordes hace dos trabajos: quita el corte seco de la pista y
   deja la esquina inferior izquierda ya difuminada, que es exactamente donde
   flota el botón del cajón. */
.lgm{margin-top:clamp(30px,4.2vh,46px);display:grid;gap:14px}
/* ── ANCHO FIJO EN EL MARQUEE, a propósito ──
   En la rejilla el ancho lo pone `1fr`; aquí lo tiene que poner el CSS. Si la
   tarjeta se midiera por su contenido, el ancho de cada PISTA dependería de
   cuántas imágenes hubieran resuelto ya, las dos copias medirían distinto y el
   bucle de -50% dejaría de cerrar (medido: 1208px vs 2042px con contenido
   idéntico). Con ancho fijo el ancho de pista es aritmética pura: 12 tarjetas +
   11 huecos, cargue lo que cargue y aunque un .webp diera 404.
   De regalo, es el mismo 178px de las celdas de la rejilla: una sola tarjeta en
   las dos zonas. La variedad la ponen los logos dentro, que es su lugar. */
.lgm .lgc{width:204px}
.lgm-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.lgm-move{display:flex;width:max-content;animation:lgm-run 64s linear infinite}
/* La pista va DUPLICADA y el desplazamiento es de -50%. Para que la costura sea
   exacta, el hueco entre las dos copias tiene que ser el mismo `gap` que dentro
   de cada una: de ahí el margin-right, que entra en el 50%. Sin él el bucle salta
   14px cada vuelta. */
.lgm-track{display:flex;gap:14px;margin-right:14px;flex:none;list-style:none;padding:0}
.lgm-row--2 .lgm-move{animation-direction:reverse;animation-duration:78s}
@keyframes lgm-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Se detiene con el cursor Y con el foco de teclado: la fila es recorrible con
   Tab (las tarjetas llevan title) y un logo en movimiento no se puede leer. */
.lgm:hover .lgm-move,.lgm:focus-within .lgm-move{animation-play-state:paused}
.lgm-note{
  margin-top:clamp(22px,3vh,30px);text-align:center;font-size:14px;color:var(--ink-soft);
}

/* ── REJILLA (mundo Empresas) ──
   Aquí no hay movimiento: esta es la lista donde una empresa se busca a sí misma.
   Es FLEX y no grid, por la última fila: 21 no cabe entero en ninguna rejilla
   (5 columnas dejaban una tarjeta huérfana pegada a la izquierda, y 6 dejaban
   tres). Con flex + `justify-content:center` la fila incompleta queda centrada y
   la lista se lee como bloque. El ancho de tarjeta es el mismo 178px del
   marquee (204px), y el max-width de 1076px es exactamente 5×204 + 4×14: cinco al
   ancho sin que el navegador tenga que redondear nada. */
.lgg{
  list-style:none;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  max-width:1076px;margin:clamp(26px,3.6vh,40px) auto 0;padding:0;
}
.lgg .lgc{width:204px}
.lgg-note{
  max-width:70ch;margin:clamp(26px,3.4vh,36px) auto 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--ink);   /* sobre rosadito: 11.59:1 ✅ */
}
.lgg-note strong{font-family:var(--display);font-weight:600}

/* ── MARQUEE DE LOGOS SIN MOVIMIENTO ──
   Va AQUÍ, después de §18b, y no en el bloque de accesibilidad de más arriba: allí
   `overflow-x` y la máscara perdían por orden contra las reglas base de `.lgm-row`.
   El reset global de reduced-motion ya dejaría el marquee quieto, pero lo dejaría
   quieto EN SU ESTADO FINAL (translate −50%) y con media pista fuera de la máscara:
   el usuario vería una fila cortada que no puede recorrer. Así que la animación se
   apaga de raíz, las filas se vuelven desplazables A MANO, la máscara se retira
   (con máscara, la primera tarjeta de un scroll manual sale fantasma) y el clon se
   esconde: sin bucle es ruido para el lector de pantalla y para el scrollbar.
   Nada se pierde — los 24 logos siguen alcanzables, y la rejilla completa de
   empresas.html no depende de esto para nada. */
@media (prefers-reduced-motion:reduce){
  .lgm-move{animation:none;transform:none;width:auto}
  .lgm-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .lgm-track[aria-hidden="true"]{display:none}
}

/* ── sólo para lector de pantalla (describe el marquee) ── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE del bloque v3 (va al final para ganar por orden, no por !important)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .g2,.mv,.news,.vids{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4,.cal,.shots{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
  .lobby-logo{
    position:relative;right:auto;bottom:auto;
    width:clamp(140px,30vw,200px);margin:6px auto clamp(30px,6vh,50px);
  }
  .vids{max-width:360px}
}
@media (max-width:640px){
  .nums,.g3,.g4,.cal,.ba{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr);gap:10px}
  .bank dl{grid-template-columns:1fr;gap:2px}
  .bank dd{margin-bottom:12px}
  .album-head h2{font-size:clamp(24px,7.4vw,34px)}
  .faq summary{font-size:16px}
  /* ── LOGOS EN MÓVIL ──
     Los dos topes bajan EN LA MISMA PROPORCIÓN (150/52 → 122/42, 108/39 → 88/32),
     así que la normalización óptica se conserva: ningún logo cambia de tamaño
     relativo, todos encogen igual. La rejilla pasa a 2 columnas fijas —con
     `auto-fit` a 390px caía a 1 y 24 tarjetas apiladas son una lista infinita. */
  .lgc{--lgw:122px; --lgh:42px;min-height:78px;padding:11px 13px}
  .lgc--sm{--lgw:88px; --lgh:32px}
  /* La misma aritmética de arriba, rehecha con los números de móvil:
     122 de logo + 2×13 de padding + 2×2 de contorno + 7 de holgura por lado = 166.
     El primer intento puso 148 y el logo volvía a tocar la línea (118px útiles
     contra un tope de 122) — el mismo error, dos veces, por copiar el ancho en vez
     de recalcularlo. */
  .lgm .lgc{width:166px}
  /* 2 al ancho: `auto-fit` a 390px caía a 1 columna y 24 tarjetas apiladas son
     una lista infinita. La última fila sigue centrándose sola (flex). */
  .lgg{gap:10px}
  .lgg .lgc{width:calc(50% - 5px)}
  .lgm{gap:10px}
  .lgm-track{gap:10px;margin-right:10px}
  /* la pista recorre menos ancho por tarjeta: se acelera para que no se arrastre */
  .lgm-move{animation-duration:44s}
  .lgm-row--2 .lgm-move{animation-duration:54s}
}
html:not(.has-motion) .lobby-logo{
  position:relative;right:auto;bottom:auto;
  width:clamp(150px,20vw,230px);margin:0 auto clamp(30px,6vh,50px);
}

/* ────────────────────────────────────────────────────────────────────────────
   19 · PIEZAS DE SHELL QUE CAMBIARON AL ENTRAR EL LOGO REAL
   La v1 dibujaba en el nav y en la cortina un disco salmón con una estrella SVG
   (stand-in del sello). Ahora se usa el PNG oficial del Drive de la clienta.
   ──────────────────────────────────────────────────────────────────────────── */
.pnav-logo{width:30px;height:30px;flex:none;display:block;border-radius:50%}
.curtain-logo{width:clamp(44px,6vw,62px);height:auto;margin-bottom:14px;display:block}
.foot-logo{width:64px;height:auto;margin-bottom:14px;display:block}

/* ── página GALERÍA: no es una puerta, así que toma el rosadito de acento ── */
.page-galeria{--page-accent:var(--rosa); --halo:var(--white); --mbody:var(--amarillo)}

/* ── el lema en el pie ── */
.foot-lema{
  margin-top:16px;font-family:var(--display);font-weight:500;font-size:15.5px;
  line-height:1.45;color:rgba(255,255,255,.9);   /* 12.27:1 sobre tinta ✅ */
}
.foot-lema span{font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.62)}

/* ── el resto del mensaje inspirador, bajo el titular del lobby ── */
.lobby-lead{
  margin:2px 0 clamp(14px,2.2vh,20px);max-width:56ch;
  font-size:clamp(15.5px,1.32vw,18px);color:var(--ink-soft);
}
.lobby-attr{align-items:flex-start;line-height:1.5;text-transform:none;letter-spacing:.02em;font-size:13px}
.lobby-attr .star{margin-top:3px}

/* ── retratos circulares de los testimonios escritos ── */
.test-face{
  width:104px;height:104px;flex:0 0 auto;object-fit:cover;border-radius:50%;
  border:var(--edge-lg) solid var(--ink);
}

/* ── el deck vive ahora en galeria.html; su lámina lleva foto REAL ──
   `loading="lazy"` está PROHIBIDO en estas cuatro: las láminas viajan con GSAP
   y en la v1 las tarjetas del deck salían EN BLANCO por ese atributo. */
.deck-card img{aspect-ratio:4/3;object-fit:cover}

/* ── Guarda de VIEWPORT BAJO para el lobby ────────────────────────────────────
   `.lobby` es 100svh con overflow:hidden, y su copy es alto: eyebrow + lema de
   4 líneas + el mensaje oficial + la atribución + el señuelo. En pantallas de
   ~700px de alto eso no cabe y el señuelo se recortaba por abajo. Aquí el
   escenario cede cuerpo en vez de perder la instrucción, que es lo único
   imprescindible del primer frame. Sólo aplica en escritorio: bajo 1080px el
   lobby ya no es una pantalla fija, se apila. */
@media (min-width:1081px) and (max-height:800px){
  .lobby-h1{font-size:clamp(34px,4.1vw,58px);margin:10px 0 14px}
  .lobby-lead{font-size:15.5px;margin-bottom:12px}
  .lobby-copy{padding-top:clamp(76px,9vh,96px);padding-bottom:clamp(76px,9.4vh,90px)}
  .lobby-attr{font-size:12px}
  /* El rótulo subió de 12px a 18px y su línea (60 caracteres de metadatos) pasó
     a ocupar dos renglones: ~39px más de alto en una pantalla que ya iba justa.
     Aquí cede como el resto del copy — el aumento se conserva donde importa
     (los rótulos de sección), no en un metadato del primer frame. */
  .lobby-copy .eyebrow{font-size:15px;margin-bottom:10px}
}