/* ============================================================================
   FUNDACIÓN AMOR POR SERVIR — SITIO v2 ("FIEL A LA CLIENTA")
   Grupo Ancla · pro bono · 2026-07-28

   Este archivo implementa LAS REGLAS DE COLOR QUE DICTÓ KARLA:
       títulos = salmón · subtítulos = azul · cuerpo = negro
   con los cuatro colores oficiales:
       rosadito #FADCE6 · azulito #63D0D0 · amarillo #FEE587 · salmón #FF6F5A

   ⚠ DECISIÓN DE CONTRASTE (documentada en README §Contraste).
   Medidos contra blanco, los literales de marca NO sirven como color de TEXTO:
       salmón   #FF6F5A → 2.74:1  ✗ (no pasa ni AA large, que pide 3.0)
       azulito  #63D0D0 → 1.83:1  ✗
       amarillo #FEE587 → 1.25:1  ✗
       rosadito #FADCE6 → 1.28:1  ✗
   Por eso el sistema separa DOS usos:
     (a) LITERALES  → rellenos, washes, formas, chips, botones. Nunca texto sobre blanco.
     (b) VARIANTES DE TEXTO → mismo tono y saturación, oscurecidas lo MÍNIMO necesario:
         --salmon-title #FF5F48 → 3.01:1 ✅ AA large (≥24px normal / ≥18.7px bold)
         --salmon-deep  #E91E00 → 4.52:1 ✅ AA normal
         --azul-title   #32A4A5 → 3.00:1 ✅ AA large
         --azul-deep    #288383 → 4.50:1 ✅ AA normal
   Sobre RELLENOS de marca el texto va SIEMPRE en negro (7.67–16.77:1 ✅).
   NUNCA blanco sobre salmón (2.74:1 ✗).
   ============================================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* literales oficiales de la clienta — SOLO rellenos/formas */
  --rosadito:#FADCE6;
  --azulito:#63D0D0;
  --amarillo:#FEE587;
  --salmon:#FF6F5A;

  /* variantes de TEXTO (mismo matiz, oscurecidas al mínimo para pasar AA) */
  --salmon-title:#FF5F48;   /* 3.01:1 sobre blanco — títulos display */
  --salmon-deep:#E91E00;    /* 4.52:1 — títulos pequeños, enlaces */
  --azul-title:#32A4A5;     /* 3.00:1 — subtítulos grandes */
  --azul-deep:#288383;      /* 4.50:1 — subtítulos pequeños, eyebrows */

  --negro:#111111;          /* cuerpo — 18.9:1 */
  --negro-soft:rgba(17,17,17,.72); /* ~7.6:1 */
  --negro-faint:rgba(17,17,17,.10);

  --blanco:#FFFFFF;

  /* washes muy suaves para bandas de sección */
  --wash-rosa:#FEF6F9;
  --wash-azul:#F1FBFB;
  --wash-amarillo:#FFFCF0;

  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px;
  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto es OBLIGATORIO: los atributos width/height del <img> (que están
   ahí para reservar espacio y evitar layout shift) actúan como presentational
   hints y fijan una altura definitiva, lo que ANULA cualquier aspect-ratio del
   CSS. Sin esto las fotos se dibujan a su altura natural (p. ej. 1067px). */
img,video{max-width:100%; height:auto; display:block;}
a{color:var(--salmon-deep); text-decoration-thickness:1.5px; text-underline-offset:3px;}
a:hover{color:var(--negro);}
h1,h2,h3,h4{font-family:"Fredoka",system-ui,sans-serif; font-weight:600; line-height:1.12; margin:0; letter-spacing:-.01em;}
p{margin:0 0 1em;}
ul{margin:0; padding:0; list-style:none;}
:focus-visible{outline:3px solid var(--salmon-deep); outline-offset:3px; border-radius:6px;}

/* ---------- TIPOGRAFÍA: la regla de Karla ---------- */
/* TÍTULOS = salmón */
.t-title{color:var(--salmon-title);}          /* display ≥24px */
.t-title-sm{color:var(--salmon-deep);}        /* títulos pequeños */
/* SUBTÍTULOS = azul */
.t-sub{color:var(--azul-title);}
/* Los rótulos azules de bloque ("Beneficios", "Inscripción", "Preguntas
   frecuentes"…). Iban a .78rem (12.5px): más CHICOS que el cuerpo, así que
   leían como letra menuda y no como el escalón de jerarquía que son. Suben a
   ~17-19px (+35/+50%) — por encima del cuerpo, muy por debajo del h2 salmón
   (30-48px), que sigue mandando. Al crecer, el tracking de .16em se abría
   demasiado: baja a .1em (regla clásica de versalitas — a más cuerpo, menos
   tracking).

   CONTRASTE — el tamaño ARREGLA un problema que ya venía de antes. El color no
   cambia (--azul-deep #288383), pero a 12.5px/600 el rótulo era "texto normal"
   y exigía 4.5:1, y sobre los pasteles NO llegaba: 3.53:1 en rosadito y 3.60:1
   en amarillo (y 4.24-4.38:1 en los washes). Al pasar a ≥18.66px con peso 700
   entra en el escalón "large text" de WCAG, que exige 3:1 — y ahí TODAS las
   combinaciones pasan, incluidas las tarjetas pastel que antes fallaban. Por
   eso el suelo del clamp es 1.18rem (18.88px) y no menos: por debajo de 18.66px
   se pierde el escalón y las tarjetas vuelven a incumplir. */
.t-eyebrow{
  color:var(--azul-deep);
  font-family:"Fredoka",sans-serif; font-weight:700;
  font-size:clamp(1.18rem,1.35vw,1.28rem); letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 .8rem;
}
/* CUERPO = negro (por defecto en body) */
.lead{font-size:clamp(1.05rem,2.1vw,1.28rem); color:var(--negro); line-height:1.6;}
.muted{color:var(--negro-soft);}

h1{font-size:clamp(2.3rem,6.4vw,4.3rem);}
h2{font-size:clamp(1.9rem,4.4vw,3rem);}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem);}
h4{font-size:1.05rem;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);}
.section{padding-block:clamp(56px,9vw,110px);}
.section--rosa{background:var(--wash-rosa);}
.section--azul{background:var(--wash-azul);}
.section--amarillo{background:var(--wash-amarillo);}
.section-head{max-width:760px; margin-bottom:clamp(28px,4vw,48px);}
.center{text-align:center; margin-inline:auto;}
.grid{display:grid; gap:clamp(16px,2.4vw,28px);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

/* ---------- BADGE DEMO ---------- */
.demo-badge{
  position:fixed; right:12px; bottom:12px; z-index:120;
  background:var(--amarillo); color:var(--negro);
  border:2px solid var(--negro);
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.7rem;
  letter-spacing:.14em; padding:7px 13px; border-radius:999px;
  pointer-events:none;
}

/* ============================================================================
   LOADER — la puerta de entrada al sitio      (portado de la v3, 2026-08-03)

   IDEA: el sello de APS con un ANILLO DE PROGRESO dibujándose a su alrededor, y
   la estrella del propio sello montada en la punta del arco. No es un widget
   encima del logo: es el sello creciendo un anillo.

   ── CÓMO SE ADAPTÓ AL REGISTRO DE LA v2 ──
   La v3 lo resuelve en su sistema sticker. Aquí manda el vocabulario de la v2, que
   es igual de definido: relleno pastel + LÍNEA NEGRA DE 3px (la misma de .card,
   .stat, .cal-item), Fredoka para las cifras, y la ola del footer como cierre.
     · campo BLANCO — la v2 no tiene campos de color a pantalla completa;
     · pista del anillo en ROSADITO y arco en SALMÓN: los dos anillos decorativos
       del hero (.ring--1 rosadito / .ring--2 amarillo) ya dijeron que un anillo
       pastel alrededor del sello es lenguaje de la casa;
     · el % en Fredoka 600 negro con cifras tabulares = la receta exacta de .stat b;
     · la línea de espera con el tratamiento de .t-eyebrow (versalitas, azul-deep);
     · al pie, FOOT_WAVE tal cual: rosadito con su canto negro de 3px.
   CERO COLORES NUEVOS. Ningún token inventado.

   CONTORNO NEGRO EN UN ARCO: un `stroke` no admite contorno propio, así que cada
   anillo son DOS círculos con el mismo dash — el negro más grueso debajo, el de
   color más fino encima. Misma composición "pastel + línea" del resto de la v2.

   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 del final de este
   archivo anula animaciones y transiciones, y el indicador tiene que seguir
   informando.

   ⚠ EL CAMPO ESTÁ EN display:none POR DEFECTO. Sólo lo muestra `html.aps-ld`, que
     pone el script inline del <head>. Así, por construcción: sin JS no hay overlay
     que retirar (más seguro que un <noscript> que tenga que borrarlo), en pestaña
     de fondo —donde rAF está congelado y el bucle no correría— no aparece, y en
     navegación interna tampoco (EXPRESS: la ceremonia no se repite).
   ============================================================================ */
.ld{
  position:fixed; inset:0; z-index:300; background:var(--blanco);
  display:none; align-items:center; justify-content:center;
  overflow:hidden; will-change:transform;
}
html.aps-ld .ld{display:flex;}
/* Estado final: fuera de la capa de hit-testing y del árbol accesible.
   visibility:hidden además desactiva cualquier transición interna. */
.ld.is-done{opacity:0; visibility:hidden; pointer-events:none;}

.ld-in{
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  padding:0 22px;
  /* la salida rota y escala este bloque completo (sello + % + copy): se despega
     como UNA pieza y no como tres cosas sueltas */
  will-change:transform;
}

/* ---- El sello y su anillo ---- */
.ld-seal{
  position:relative;
  /* 300 y no 268: el sello YA trae un anillo exterior en su arte, así que el
     anillo del progreso necesita aire para no leerse como un duplicado. El logo
     baja a 68% y ese aire aparece. */
  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(--negro); stroke-width:14;}
.ld-tr    {stroke:var(--rosadito); stroke-width:8;}
.ld-ar-ink{stroke:var(--negro); stroke-width:14;}
.ld-ar    {stroke:var(--salmon); stroke-width:8;}
/* 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 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 línea negra: sobre blanco el amarillo vale 1.25:1 y sin el
   contorno no existiría. Es la misma receta que .chip--amarillo y .tag-pending. */
.ld-star path{fill:var(--amarillo); stroke:var(--negro); stroke-width:2.6; stroke-linejoin:round;}

/* ---- El número ---- */
.ld-pct{
  font-family:"Fredoka",sans-serif; font-weight:600; color:var(--negro);
  font-size:clamp(38px,7vw,62px); line-height:1; letter-spacing:-.02em;
  /* margin-bottom:0 NO es decorativo: el reset de la v2 le da a <p> un margen
     inferior de 1em, y en un tipo de 62px eso son 62px de aire muerto entre el
     número y la línea de espera. Medido, no supuesto. Lo mismo en .ld-cap. */
  margin:clamp(20px,3.4vh,34px) 0 0;
  font-variant-numeric:tabular-nums;   /* el ancho no baila al contar */
}
/* El signo % es secundario pero sigue siendo TEXTO: se queda en el escalón
   documentado (--negro-soft, ~7.6:1) 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; color:var(--negro-soft);}

.ld-cap{
  font-family:"Fredoka",sans-serif; font-weight:600; color:var(--azul-deep);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  margin:clamp(9px,1.4vh,14px) 0 0; text-align:center;
}

/* La ola del pie: la MISMA del footer, sin variar una coma, para que el loader
   pertenezca a este sitio y no parezca una pantalla prestada. */
.ld-wave{position:absolute; left:0; right:0; bottom:-4px; z-index:1;}

/* ---- PANTALLAS CORTAS ----
   El sello a 300px + 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;}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--negro-faint);
}
.nav-in{
  max-width:1320px; margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto;}
.brand img{width:44px; height:44px;}
.brand span{
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1rem;
  color:var(--negro); line-height:1.1;
}
.nav-links{display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:nowrap;}
.nav-links a{
  font-family:"Fredoka",sans-serif; font-weight:500; font-size:.86rem;
  color:var(--negro); text-decoration:none;
  padding:8px 10px; border-radius:999px; white-space:nowrap;
  transition:background .18s var(--ease);
}
.nav-links a:hover{background:var(--rosadito);}
.nav-links a[aria-current="page"]{background:var(--azulito); font-weight:600;}
.nav-cta{
  background:var(--salmon); color:var(--negro) !important;   /* 7.67:1 ✅ */
  font-weight:600 !important; padding:9px 16px !important;
  border:2px solid var(--negro);
}
.nav-cta:hover{background:var(--amarillo) !important;}
.nav-toggle{
  display:none; margin-left:auto;
  background:var(--salmon); border:2px solid var(--negro); border-radius:999px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.85rem; color:var(--negro);
  padding:9px 16px; cursor:pointer;
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:999px; border:2px solid var(--negro);
  text-decoration:none; color:var(--negro); cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px); color:var(--negro);}
.btn--salmon{background:var(--salmon);}      /* negro sobre salmón 7.67:1 ✅ */
.btn--azul{background:var(--azulito);}       /* 11.46:1 ✅ */
.btn--amarillo{background:var(--amarillo);}  /* 16.77:1 ✅ */
.btn--rosa{background:var(--rosadito);}      /* 16.44:1 ✅ */
.btn--ghost{background:transparent;}
.btn--ghost:hover{background:var(--rosadito);}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px;}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--blanco); padding-block:clamp(36px,6vw,72px);}
.hero-grid{display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(28px,4vw,52px); align-items:center;}
/* los tres CTA oficiales de la clienta deben caber en una sola fila */
.hero .btn-row .btn{font-size:.95rem; padding:13px 20px;}
.hero-logo{width:clamp(86px,11vw,124px); height:auto; margin-bottom:22px;}
.hero h1{margin-bottom:20px;}
.hero-quote{
  font-size:clamp(1rem,1.9vw,1.16rem); line-height:1.62; color:var(--negro);
  border-left:5px solid var(--azulito); padding-left:20px; margin-bottom:6px;
}
.hero-media{position:relative;}
.hero-media img{
  width:100%; border-radius:var(--r-xl);
  border:3px solid var(--negro); aspect-ratio:4/5; object-fit:cover;
  object-position:center 20%;
  max-height:min(64vh,560px);   /* que el hero completo quepa sobre el pliegue */
}
/* anillo decorativo del sello (rosa/amarillo/teal) */
.ring{position:absolute; border-radius:50%; pointer-events:none; z-index:-1;}
.ring--1{width:260px; height:260px; border:16px solid var(--rosadito); top:-70px; right:-70px;}
.ring--2{width:170px; height:170px; border:13px solid var(--amarillo); bottom:-52px; left:-52px;}

/* ---------- CONTADORES ---------- */
.stats{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,2vw,22px);}
.stat{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-md);
  padding:22px 14px; text-align:center;
}
.stat:nth-child(6n+1){background:var(--rosadito);}
.stat:nth-child(6n+2){background:var(--azulito);}
.stat:nth-child(6n+3){background:var(--amarillo);}
.stat:nth-child(6n+4){background:var(--rosadito);}
.stat:nth-child(6n+5){background:var(--azulito);}
.stat:nth-child(6n+6){background:var(--amarillo);}
.stat b{
  display:block; font-family:"Fredoka",sans-serif; font-weight:600;
  font-size:clamp(1.9rem,4vw,2.7rem); line-height:1; color:var(--negro);
}
.stat span{display:block; margin-top:8px; font-size:.83rem; line-height:1.35; color:var(--negro);}

/* ============================================================================
   LOGOS DE LOS ALIADOS          (entraron 2026-08-03 · sustituyen los chips)

   Una sola pieza —la tarjeta .lgc— sirve a las dos zonas: el MARQUEE de la portada
   y la REJILLA de aliados.html. Es deliberadamente la misma tarjeta que .stat y
   .cal-item: blanco, línea negra de 3px, radio --r-md. Los 24 logos traen 24
   paletas ajenas; sueltos sobre los washes pastel serían 24 colores flotando.
   Encerrados en la tarjeta el color ajeno queda ACOTADO y la página conserva sus
   seis colores.

   ── EL TRUCO DEL TAMAÑO (leer build.py §LOGOS) ──
   Cada .webp se generó con su tamaño intrínseco = 2× el de pantalla y con la
   normalización ÓPTICA ya calculada (los wordmarks anchos topan por ancho, las
   marcas cuadradas por alto). Por eso aquí bastan 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 NO ES LIBRE ──
   204 de ancho − 2×17 de padding − 2×3 de línea = 164px útiles para un logo que
   topa a 150 → 7px de holgura por lado. La v3 llega al mismo claro con 204 y
   línea de 2px; aquí la línea es de 3px (la de la v2) y el padding se recalculó a
   17 en vez de copiar el 18. Si alguien cambia --lgw, tiene que mover el ancho.

   ⚠ Y EL ANCHO NO LO DECIDE SÓLO LA TARJETA: tiene que caber CINCO veces dentro de
     .wrap. Medido, .wrap deja 1084px útiles (1180 − 2×48 de padding). El primer
     intento usó tarjetas de 206 → 5×206 + 4×14 = 1086px, DOS PÍXELES de más, y la
     rejilla caía a cuatro columnas. Con 204 la cuenta da 1076 y entran las cinco.
   ============================================================================ */
.lgc{
  --lgw:150px; --lgh:52px;
  list-style:none; display:grid; place-items:center;
  min-height:92px; padding:14px 17px;
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-md);
}
.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 (la versión blanca es la única que publica el colegio), Lux Mundi
   (texto blanco + flama dorada) y Decolor (el tagline "by NicaDom" es blanco)
   DESAPARECEN sobre tarjeta blanca — comprobado renderizándolos sobre blanco /
   azulito / negro antes de decidir, no supuesto. El azulito los deja legibles COMO
   FORMA y mantiene el registro pastel; la alternativa medida era tarjeta negra
   (más contraste, pero un rectángulo negro en medio del sistema).
   ⚠ Importadora Nicadom NO va aquí: su "Dom" es cian y se disolvería. */
.lgc--azul{background:var(--azulito);}

/* ---- 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. Ninguno pasa de 1.2× su píxel nativo. */
.lgc--sm{--lgw:108px; --lgh:39px;}

/* ---- MARQUEE (portada) ----
   CSS puro y a propósito: la página ya vive de ScrollTrigger y del módulo de
   donación; 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 quita el corte seco de la
   pista (y despeja la esquina donde flota el badge DEMO). */
.lgm{margin-top:clamp(26px,3.6vw,40px); display:grid; gap:14px;}
/* ANCHO FIJO EN EL MARQUEE, a propósito: 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. 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. */
.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(20px,2.6vw,28px); text-align:center;
  font-size:.88rem; color:var(--negro-soft);
}
.lgm-note a{color:var(--salmon-deep);}

/* ---- REJILLA (aliados.html) ----
   Sin movimiento: ésta 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
   dejan una tarjeta huérfana a la izquierda, 6 dejan tres). Con flex +
   justify-content:center la fila incompleta queda centrada. El max-width de 1076px
   es exactamente 5×204 + 4×14: cinco al ancho sin que el navegador redondee nada,
   y cabe en los 1084px útiles de .wrap. */
.lgg{
  list-style:none; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  max-width:1076px; margin:clamp(24px,3.2vw,36px) auto 0; padding:0;
}
.lgg .lgc{width:204px;}
.lgg-note{
  max-width:70ch; margin:clamp(24px,3.2vw,34px) auto 0; text-align:center;
  font-size:.85rem; line-height:1.6; color:var(--negro);
}
.lgg-note strong{font-family:"Fredoka",sans-serif; font-weight:600;}

/* 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;
}

/* ---------- CHIPS ----------
   Ya NO se usan para los aliados (entraron los logos reales), pero .chip sigue vivo:
   lo usan los valores de nosotros.html. */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.chip{
  font-family:"Fredoka",sans-serif; font-weight:500; font-size:.92rem;
  padding:9px 18px; border-radius:999px; border:2px solid var(--negro);
  background:var(--blanco); color:var(--negro);
}
.chip--rosa{background:var(--rosadito);}
.chip--azul{background:var(--azulito);}
.chip--amarillo{background:var(--amarillo);}
.chip--salmon{background:var(--salmon);}

/* ---------- CARDS ---------- */
.card{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  display:flex; flex-direction:column;
  /* sin height:100% — como .card suele SER el grid item, el estirado lo da
     align-items:stretch del grid. Con height:100% no se podía pedir
     align-items:start puntualmente (ej. Donaciones). */
}
.card h3{margin-bottom:10px; color:var(--salmon-deep);}
.card--rosa{background:var(--rosadito);}
.card--azul{background:var(--azulito);}
.card--amarillo{background:var(--amarillo);}
/* salmón: entró con la tarjeta VALORES de nosotros.html (2026-08-03). La tinta
   sobre salmón pasa AA de sobra, igual que en .chip--salmon. */
.card--salmon{background:var(--salmon);}
/* sobre relleno de marca, el título va en NEGRO (el salmón no contrasta ahí) */
.card--rosa h3,.card--azul h3,.card--amarillo h3,.card--salmon h3{color:var(--negro);}
.card-media{
  border-radius:var(--r-md); border:3px solid var(--negro);
  overflow:hidden; margin-bottom:18px;
}
/* La mayoría de las fotos de la clienta son VERTICALES (de teléfono). Recortar
   un vertical a 4/3 se come el motivo, así que hay dos variantes y cada uso
   elige según la orientación del original. Ver README §Fotos. */
.card-media img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.card-media--tall img{aspect-ratio:3/4;}
.card-media--sq img{aspect-ratio:1/1;}

/* puertas de audiencia (3 CTAs) */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);}
.door{
  border:3px solid var(--negro); border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,38px); text-decoration:none; color:var(--negro);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .22s var(--ease);
}
.door:hover{transform:translateY(-5px); color:var(--negro);}
.door h3{font-size:clamp(1.3rem,2.6vw,1.75rem); color:var(--negro);}
.door p{margin:0; font-size:.95rem;}
.door--salmon{background:var(--salmon);}
.door--azul{background:var(--azulito);}
.door--amarillo{background:var(--amarillo);}
.door-arrow{font-family:"Fredoka",sans-serif; font-weight:600; margin-top:auto; padding-top:12px;}

/* ---------- LISTAS ---------- */
.ticks li{
  position:relative; padding-left:34px; margin-bottom:14px; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:5px;
  width:20px; height:20px; border-radius:50%;
  background:var(--azulito); border:2.5px solid var(--negro);
}
.ticks--salmon li::before{background:var(--salmon);}
.ticks--amarillo li::before{background:var(--amarillo);}

/* ---------- MISIÓN / VISIÓN / VALORES ----------
   Desde 2026-08-03 son TRES tarjetas pares en una fila: 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 ≤980px la fila ya colapsa a 1 columna
   (ver el @media de abajo), así que el móvil no necesita nada nuevo. */
.mv{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);}
.values{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}
/* Dentro de la tarjeta los chips van un punto más pequeños: así "Responsabilidad"
   y "Compromiso" caben de dos en dos en una columna de ~350px y la tarjeta de
   Valores no dispara la altura de la fila (el grid estira a la más alta). */
.mv .values{margin-top:14px; gap:10px;}
.mv .values .chip{font-size:.85rem; padding:8px 15px;}

/* ---------- CALENDARIO ---------- */
.cal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,20px);}
.cal-item{
  border:3px solid var(--negro); border-radius:var(--r-md);
  padding:20px 18px; background:var(--blanco);
}
.cal-item b{display:block; font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.05rem;}
.cal-item i{
  display:inline-block; font-style:normal; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--negro-soft); margin-bottom:6px;
}
.cal-item:nth-child(4n+1){background:var(--rosadito);}
.cal-item:nth-child(4n+2){background:var(--azulito);}
.cal-item:nth-child(4n+3){background:var(--amarillo);}

/* ---------- FAQ ---------- */
.faq details{
  border:3px solid var(--negro); border-radius:var(--r-md);
  padding:16px 20px; margin-bottom:12px; background:var(--blanco);
}
.faq summary{
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.02rem;
  cursor:pointer; list-style:none; color:var(--negro);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"  +"; color:var(--salmon-deep); font-weight:700;}
.faq details[open] summary::after{content:"  –";}
.faq p{margin:12px 0 0; color:var(--negro-soft);}

/* ---------- ANTES / DESPUÉS ---------- */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px);}
.ba figure{margin:0;}
.ba img{
  width:100%; aspect-ratio:4/5; object-fit:cover;   /* compromiso para pares mixtos */
  border:3px solid var(--negro); border-radius:var(--r-md);
}
.ba--tall img{aspect-ratio:3/4;}   /* cuando las dos fotos del par son verticales */
.ba--wide img{aspect-ratio:4/3;}   /* cuando las dos son horizontales */
.ba figcaption{
  margin-top:10px; font-family:"Fredoka",sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--azul-deep);
}

/* ---------- GALERÍA ---------- */
.album{margin-bottom:clamp(38px,5vw,64px);}
.album-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.gal img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:3px solid var(--negro); border-radius:var(--r-md);
}
.gal--tall img{aspect-ratio:3/4;}

/* ---------- TESTIMONIOS (video) ---------- */
.vids{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,32px); max-width:820px;}
.vid{border:3px solid var(--negro); border-radius:var(--r-lg); overflow:hidden; background:var(--negro);}
.vid video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block;}
.vid-cap{background:var(--blanco); padding:16px 18px;}
.vid-cap b{font-family:"Fredoka",sans-serif; font-weight:600;}

/* ---------- PENDIENTE / PLACEHOLDER ---------- */
.pending{
  border:3px dashed var(--negro); border-radius:var(--r-md);
  padding:22px; background:repeating-linear-gradient(45deg,#fff,#fff 10px,var(--wash-amarillo) 10px,var(--wash-amarillo) 20px);
}
.pending b{font-family:"Fredoka",sans-serif; color:var(--salmon-deep);}
.tag-pending{
  display:inline-block; background:var(--amarillo); border:2px solid var(--negro);
  border-radius:999px; padding:3px 11px; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; font-family:"Fredoka",sans-serif;
}

/* ---------- DATOS BANCARIOS ---------- */
.bank{
  border:3px solid var(--negro); border-radius:var(--r-lg);
  background:var(--rosadito); padding:clamp(24px,3.4vw,36px);
}
.bank dl{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0;}
.bank dt{font-family:"Fredoka",sans-serif; font-weight:600;}
.bank dd{margin:0; font-variant-numeric:tabular-nums; font-size:1.05rem;}

/* ---------- MÓDULO DE DONACIÓN (demo, sin pasarela) ----------
   Mismo vocabulario que el resto del sitio: borde negro de 3px, radios grandes,
   Fredoka en las etiquetas. El relleno de "seleccionado" usa salmón (negro
   sobre salmón = 7.67:1) y el check usa azulito (11.46:1). */
.dona{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,38px); max-width:760px;
}
.dona[hidden],.dona-done[hidden]{display:none;}
.dona-demo{
  background:var(--amarillo); border:2px solid var(--negro); border-radius:var(--r-sm);
  padding:11px 16px; font-size:.9rem; line-height:1.5; margin-bottom:26px;
}
.dona-demo b{font-family:"Fredoka",sans-serif;}
.dona-fs{border:0; padding:0; margin:0 0 24px;}
.dona-lbl{
  display:block; padding:0; margin-bottom:13px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.02rem;
  color:var(--azul-deep);
}
.pills{display:flex; flex-wrap:wrap; gap:12px;}
.pill{cursor:pointer;}
/* el input real se esconde pero sigue siendo focusable (nada de display:none) */
.pill input,.check input{position:absolute; opacity:0; width:1px; height:1px;}
.pill span{
  display:inline-block; padding:11px 20px; background:var(--blanco);
  border:2px solid var(--negro); border-radius:999px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.98rem;
  font-variant-numeric:tabular-nums;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.pill:hover span{transform:translateY(-2px);}
.pill input:checked + span{background:var(--salmon);}
.pill input:focus-visible + span{outline:3px solid var(--azul-deep); outline-offset:3px;}
.dona-note{font-size:.85rem; line-height:1.55; margin-top:13px;}
.free{margin-top:24px;}
.free-in{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px;
  background:var(--blanco); border:2px solid var(--negro); border-radius:999px;
}
.free-in:focus-within{outline:3px solid var(--azul-deep); outline-offset:3px;}
.free-in > span{font-family:"Fredoka",sans-serif; font-weight:600;}
.free-in input{
  width:9ch; border:0; outline:0; background:transparent;
  font:inherit; font-size:1.05rem; color:var(--negro); font-variant-numeric:tabular-nums;
}
.check{display:flex; align-items:flex-start; gap:14px; cursor:pointer; margin-bottom:24px;}
.check-box{
  flex:0 0 auto; width:26px; height:26px; margin-top:2px; position:relative;
  background:var(--blanco); border:2px solid var(--negro); border-radius:8px;
  transition:background .18s var(--ease);
}
.check input:checked + .check-box{background:var(--azulito);}
.check input:checked + .check-box::after{
  content:""; position:absolute; left:8px; top:3px; width:6px; height:12px;
  border:solid var(--negro); border-width:0 3px 3px 0; transform:rotate(45deg);
}
.check input:focus-visible + .check-box{outline:3px solid var(--azul-deep); outline-offset:3px;}
.check-txt{line-height:1.5;}
.check-txt em{
  display:block; font-style:normal; font-size:.86rem;
  color:var(--negro-soft); margin-top:4px;
}
.dona-sum{
  border-top:2px dashed rgba(17,17,17,.25); padding-top:18px; margin-bottom:22px;
  font-family:"Fredoka",sans-serif; font-size:1.1rem;
}
.dona-sum strong{color:var(--salmon-deep);}
.dona-done{
  background:var(--rosadito); border:3px solid var(--negro); border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,38px); max-width:760px;
}
.dona-done:focus{outline:none;}
.dona-done:focus-visible{outline:3px solid var(--negro); outline-offset:4px;}
.dona-done-eyebrow{
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--azul-deep); margin-bottom:8px;
}
.dona-done h3{color:var(--negro); margin-bottom:14px;}
.dona-done .bank{margin:16px 0;}

/* ---------- PÁGINA: encabezado interno ---------- */
.pagehead{padding-block:clamp(38px,6vw,72px) clamp(20px,3vw,36px); background:var(--blanco);}
.pagehead h1{margin-bottom:14px;}
.pagehead .lead{max-width:720px;}

/* ---------- FOOTER ---------- */
.foot-wave{display:block; width:100%; height:auto; margin-bottom:-6px;}
.foot{background:var(--rosadito); padding-block:clamp(38px,5vw,62px) 26px; border-top:3px solid var(--negro);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
.foot h4{font-family:"Fredoka",sans-serif; margin-bottom:12px;}
.foot a{color:var(--negro); text-decoration:none;}
.foot a:hover{text-decoration:underline;}
.foot li{margin-bottom:7px; font-size:.95rem;}
.foot-logo{width:70px; margin-bottom:14px;}
.foot-bottom{
  margin-top:32px; padding-top:18px; border-top:2px solid rgba(17,17,17,.2);
  font-size:.82rem; color:var(--negro-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ---------- MOTION (reveal) ----------
   IMPORTANTE: por defecto .rv es VISIBLE. El contenido sólo se esconde cuando
   un script en el <head> confirma que las animaciones VAN a poder correr
   (hay JS, no hay prefers-reduced-motion, y la pestaña está visible) y añade
   .js-anim al <html>.
   Motivo: si la página carga en una pestaña de fondo (cmd+clic en un enlace),
   el navegador congela requestAnimationFrame, GSAP nunca avanza y el usuario
   se encontraría un hero en blanco para siempre. La visibilidad no puede
   depender de que una animación llegue a ejecutarse. */
.js-anim .rv{opacity:0; transform:translateY(24px);}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1180px){
  .nav-links a{font-size:.8rem; padding:8px 8px;}
  .brand span{display:none;}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero-media img{aspect-ratio:4/3; object-position:center 25%;}
  .stats{grid-template-columns:repeat(3,1fr);}
  .doors{grid-template-columns:1fr;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .cal{grid-template-columns:repeat(2,1fr);}
  .gal{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .mv{grid-template-columns:1fr;}
}
@media (max-width:820px){
  /* NAV MÓVIL: drawer */
  .nav-toggle{display:block;}
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--blanco); border-bottom:3px solid var(--negro);
    padding:14px var(--pad) 22px;
    max-height:calc(100vh - 66px); overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-links a{font-size:1rem; padding:12px 14px;}
  .nav-cta{text-align:center; justify-content:center;}
  .brand span{display:block;}
}
@media (max-width:620px){
  body{font-size:16px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .cal{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,1fr);}
  .ba{grid-template-columns:1fr;}
  .vids{grid-template-columns:1fr; max-width:340px;}
  .foot-grid{grid-template-columns:1fr;}
  .bank dl{grid-template-columns:1fr; gap:2px 0;}
  .bank dd{margin-bottom:12px;}
  .ring--1,.ring--2{display:none;}
  .hero-quote{padding-left:14px;}
  /* ---- LOGOS EN MÓVIL ----
     Los dos topes bajan EN LA MISMA PROPORCIÓN (150/52 → 122/42 y 108/39 → 88/32),
     así que la normalización óptica se conserva: ningún logo cambia de tamaño
     RELATIVO, todos encogen igual.
     Y la aritmética de la tarjeta se REHACE con los números de móvil, no se copia:
     122 de logo + 2×13 de padding + 2×3 de línea + 7 de holgura por lado = 168. */
  .lgc{--lgw:122px; --lgh:42px; min-height:78px; padding:11px 13px;}
  .lgc--sm{--lgw:88px; --lgh:32px;}
  .lgm .lgc{width:168px;}
  .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;}
  /* 2 al ancho: con tarjeta fija a 390px caía a 1 columna, y 24 tarjetas apiladas
     son una lista infinita. La última fila se sigue centrando sola (flex). */
  .lgg{gap:10px;}
  .lgg .lgc{width:calc(50% - 5px);}
}

/* ---------- ACCESIBILIDAD: movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv{opacity:1 !important; transform:none !important;}

  /* ---- MARQUEE DE LOGOS SIN MOVIMIENTO ----
     El reset de arriba 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
     aliados.html no depende de esto para nada.
     ⚠ Este bloque tiene que ir DESPUÉS de las reglas base de .lgm-row (que están
       más arriba en el archivo) para ganar por orden y no por !important. */
  .lgm-move{animation:none !important; transform:none !important; width:auto;}
  .lgm-row{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  .lgm-track[aria-hidden="true"]{display:none;}

  /* El loader SE QUEDA (es funcional: informa y evita ver la página a medio
     pintar) pero pierde el adorno: la estrella no orbita —el % y el anillo los
     escribe JS directo en el DOM, así que siguen informando— y la salida es un
     fundido corto en vez de la coreografía. Ver assets/main.js §LOADER. */
  .ld-star{display:none;}
}