/* ============================================================================
   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-title);}      /* 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);}
/* ---- MEDIDA DE LOS ENCABEZADOS (Karla, 2026-09-07) ----
   «En varias partes el texto pudiera llegar hasta el otro extremo». Tenía razón
   y la causa era única: TODO encabezado de sección iba topado a 760px dentro de
   un contenedor de 1180, así que el párrafo se cortaba a media caja y dejaba un
   vacío a la derecha que leía como error de maquetación.

   La regla que se aplica: el texto ALINEADO A LA IZQUIERDA se extiende hasta el
   borde; el CENTRADO conserva su medida. Un párrafo centrado y muy ancho obliga
   al ojo a saltar de un extremo al otro para encontrar el inicio de cada línea,
   y eso sí molesta de verdad. Por eso .center mantiene el tope.

   Los demás topes del archivo se quedan a propósito: los bloques .wrap.center
   (los CTA), la tarjeta .dona, .big-quote, .foot-quote y .tl-body son piezas
   centradas o de anchura calculada, no prosa corrida. */
.section-head{max-width:none; margin-bottom:clamp(28px,4vw,48px);}
.section-head.center{max-width:760px;}
.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);}

/* ============================================================================
   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 — BURGER EN TODOS LOS ANCHOS       (petición de Karla, 2026-08-21)

   Antes: nueve pestañas en línea + botón salmón "Quiero donar", y un drawer que
   sólo aparecía por debajo de 820px. Karla: «los tabs se ven muchos juntos» y
   «unificar Quiero donar con Donaciones».

   POR QUÉ EL BURGER TAMBIÉN EN ESCRITORIO: con nueve destinos, la barra
   horizontal sólo cabía encogiendo la tipografía a .8rem y escondiendo el
   nombre de la fundación (eso hacía el @media de 1180px). Es decir, la barra ya
   estaba rota en escritorio; lo que faltaba era admitirlo. Detrás del burger los
   nueve caben a 1.15rem en tres columnas y se leen de un golpe.

   LO QUE SE GANA DE PASO: el sello + el nombre completo vuelven a verse en TODOS
   los anchos (antes .brand span desaparecía bajo 1180px).

   EL PANEL NO ES UN OVERLAY: baja dentro del <header>, que es sticky. Así el
   contenido no se bloquea, no hace falta secuestrar el scroll y el loader no se
   entera de nada (sigue esperando la misma imagen `data-crit` del sello).
   ============================================================================ */
.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;
}

/* ---- El botón ---- */
.nav-toggle{
  display:inline-flex; align-items:center; gap:11px; margin-left:auto;
  background:var(--salmon); border:2px solid var(--negro); border-radius:999px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.9rem; color:var(--negro);
  padding:9px 18px; cursor:pointer; line-height:1;
  transition:background .18s var(--ease);
}
.nav-toggle:hover{background:var(--amarillo);}
/* Las tres rayas: mismo negro y mismo grosor que el contorno del botón, para que
   se lean como parte de la misma pieza y no como un icono importado. */
.nav-burger{display:grid; gap:4px; width:19px;}
.nav-burger i{display:block; height:2.5px; background:var(--negro); border-radius:2px;
  transition:transform .22s var(--ease), opacity .16s var(--ease);}
/* Abierto = X. La raya del medio se desvanece y las otras dos se cruzan sobre
   ella (translateY de 6.5px = alto de raya 2.5 + hueco 4). */
.nav-toggle[aria-expanded="true"] .nav-burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-burger i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---- El panel ---- */
.nav-panel{display:none; background:var(--blanco); border-bottom:3px solid var(--negro);}
.nav-panel.open{display:block;}
.nav-panel .wrap{max-width:1320px; padding-block:18px 24px;}
.np-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
/* Los NUEVE llevan contorno, no sólo los dos con relleno. Con el borde sólo en
   "Inicio" y "Donaciones", las otras siete quedaban como texto suelto flotando
   en una rejilla muy ancha y el panel se leía a medio hacer. Con contorno en
   todos, la rejilla se lee como nueve piezas iguales y el relleno pasa a ser lo
   que distingue (actual = azulito, donar = salmón), que es como funciona el
   resto del sitio. El contorno en reposo va tenue para no competir con el 3px
   de las tarjetas; al pasar por encima pasa a negro pleno. */
.np-item{
  font-family:"Fredoka",sans-serif; font-weight:500; font-size:1.15rem;
  color:var(--negro); text-decoration:none;
  padding:13px 18px; border-radius:var(--r-sm);
  background:var(--salmon); border:2px solid var(--negro);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
/* ---- PANEL: TODO SALMÓN, AZULITO EL ACTIVO Y EL DE DEBAJO DEL CURSOR ----
   (Karla, 2026-08-24). Antes convivían TRES rellenos en la misma rejilla —
   blanco de base, azulito para la página actual, salmón para Donaciones— y el
   color no significaba una sola cosa. Ahora el panel es un bloque salmón y el
   azulito queda como señal ÚNICA: "aquí estás" o "esto vas a abrir".
   Contraste: negro sobre salmón 7.67:1 ✅ · negro sobre azulito 8.6:1 ✅.
   :focus-visible va junto al hover para que quien navegue con el teclado reciba
   exactamente la misma señal que quien usa el mouse. */
.np-item:hover,
.np-item:focus-visible,
.np-item[aria-current="page"]{background:var(--azulito);}
.np-item[aria-current="page"]{font-weight:600;}
/* DONACIONES ya no se distingue por color (todos son salmón). Conserva el peso
   tipográfico para no perder del todo el énfasis que se le había dado. */
.np-item--dona{font-weight:600;}

/* ---------- 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);}
/* Karla (2026-08-25): la foto no cuadraba con el texto de al lado. Era
   `align-items:center`: al ser más baja que la columna de texto, la imagen se
   centraba en la fila y flotaba — ni su canto superior ni el inferior tocaban
   nada. Con `start` su borde de arriba queda a ras del sello, que es donde
   arranca el texto. La foto conserva su proporción 4:5 y su tope de altura;
   sólo deja de flotar. */
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4vw,52px); align-items:start;}
/* 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;
}
/* El mensaje de bienvenida de la portada pasó a <blockquote> + <cite> firmado
   (Karla, 2026-08-21: "que se lea como palabras de bienvenida"). El <p> de
   dentro pierde su margen inferior de 1em para que la firma quede pegada al
   texto y se lea como firma, no como un párrafo suelto. */
.hero-quote p{margin:0;}
.hero-sign{
  display:block; margin-top:12px; font-style:normal;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.95rem;
  color:var(--azul-deep);
}
/* Karla (2026-08-25): un poco más grande y 1.5 cm más abajo (1 cm y luego
   medio más).
   El tamaño sube por la REJILLA (.82fr → .88fr, ~7% más ancha), no por la
   imagen: con width:100% la foto llena su columna, así que ensanchar la
   columna es lo que la agranda de verdad.
   El desplazamiento va en cm porque es lo que ella pidió y CSS lo entiende
   como medida real (1cm = 37.8px). Se aplica a .hero-media y no a la <img>
   para que los anillos decorativos —que cuelgan de este contenedor— bajen con
   ella y no se queden atrás. */
.hero-media{position:relative; margin-top:1.5cm;}
.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%;
  /* el tope sube con el ancho: a .88fr la altura natural ronda los 570px y con
     el tope anterior (560) se habría empezado a recortar por arriba y abajo. */
  max-height:min(68vh,600px);
}
/* 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 — 3 ARRIBA Y 3 ABAJO, MÁS GRANDES   (Karla, 2026-08-21)

   Eran seis en una fila: a 1084px útiles cada tarjeta medía ~165px y la cifra no
   podía pasar de 2.7rem sin desbordar. En dos filas de tres cada tarjeta gana
   ~180px de ancho, y con eso la cifra sube a 4rem y el rótulo cabe en UNA LÍNEA,
   que es lo que ella pidió.

   ── LA ALINEACIÓN ÓPTICA QUE ELLA SEÑALÓ ──
   Su nota: «nada se siente alineado si se alinea como esquina recta». Es exacto y
   es un problema real de tipografía, no una manía. Dos compensaciones:

   1 · HORIZONTAL. La tarjeta tiene esquinas de 22px de radio. Su borde recto
       arranca 22px más abajo/arriba de la esquina, así que a media altura el
       canto está donde toca pero en las esquinas se retira hacia dentro. El ojo
       promedia y la fila entera parece METIDA respecto al texto de la sección,
       aunque geométricamente esté a ras. Se saca la fila hacia fuera una
       fracción del radio (~0.3r ≈ 6.6px por lado). Alinear a ras sería
       "correcto" y se vería mal; esto se ve alineado.

   2 · VERTICAL. Los dígitos no tienen descendentes: llenan de la altura de
       mayúscula a la línea base y dejan vacío el espacio de la 'p' o la 'j' que
       nunca llega. Con padding igual arriba y abajo, la cifra flota alta y sobra
       aire debajo. El padding superior sube ~4px sobre el inferior para devolver
       la cifra al centro ÓPTICO de la tarjeta.

   Las dos son compensaciones de ~6px: si se notan sueltas, están mal; sólo se
   tienen que notar cuando se quitan.
   ============================================================================ */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px);
  margin-inline:calc(var(--r-md) * -.3);   /* compensación óptica (1) */
}
.stat{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-md);
  padding:30px 10px 26px; text-align:center;   /* compensación óptica (2) */
}
.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(2.5rem,5.4vw,4rem); line-height:1; color:var(--negro);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;   /* el ancho no baila mientras cuenta */
}
/* UNA SOLA LÍNEA, como pidió Karla. `nowrap` sólo donde puede cumplirse: el
   rótulo más largo ("Proyectos completados", 22 caracteres) necesita ~178px a
   .92rem, y eso existe en las tres columnas hasta que el teléfono las parte en
   dos (ver el @media de 620px, donde el nowrap se levanta). */
/* Karla (2026-09-07): «aumentar el tamaño de la letra debajo de los números,
   que sea en una sola línea que llegue a los bordes». Sube de .82–.95rem a
   .95–1.12rem. El `nowrap` ya estaba; lo que faltaba era ancho para gastarlo,
   así que el padding lateral de la tarjeta baja de 16 a 10px: el rótulo más
   largo ("Proyectos completados") pasa de necesitar ~178px a ~205px, y la
   columna da ~215px de caja útil, así que sigue cabiendo de una pieza. */
.stat span{
  display:block; margin-top:10px; white-space:nowrap;
  font-size:clamp(.95rem,1.35vw,1.12rem); line-height:1.3; color:var(--negro);
}

/* ============================================================================
   COMPENSACIÓN ÓPTICA DE ESQUINAS — EXTENDIDA AL RESTO DEL SITIO (2026-08-25)

   La nota de Karla era GENERAL: «por la curva de los elementos ningún elemento
   se siente bien alineado». En agosto se resolvió sólo en los contadores (ver
   el bloque de arriba, donde está el razonamiento completo). Esto lo lleva a
   las demás rejillas de tarjetas que comparten canto con el texto de su
   sección, que era donde el problema seguía vivo.

   Mismo cálculo: se retira 0.3 × radio por lado. Estas cuatro usan --r-lg
   (32px) → 9.6px. Nunca supera el --pad mínimo del .wrap (20px), así que en
   móvil ninguna rejilla se sale de la pantalla.

   QUÉ QUEDA FUERA, A PROPÓSITO:
   · .lgg (logos de Aliados) — flex CENTRADO con max-width propio. No comparte
     canto con nada; no hay borde que igualar y compensarlo no haría nada.
   · .grid.g2 de texto + imagen — ahí la columna de texto sí está a ras de
     verdad. Moverla la desalinearía de los titulares, que es el error opuesto.
   · .gal — masonry a --r-sm (14px) y SIN marco (petición de Karla): serían 4px
     de compensación sobre un borde que no se dibuja.
   ============================================================================ */
.doors,
.ic-grid,
.vids,
.tests{margin-inline:calc(var(--r-lg) * -.3);}

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

/* ---- LOGOS CUADRADOS (Nestlé y Vicky Gardens, 2026-08-24) ----
   El box de 150×52 está pensado para marcas anchas. Un logo cuadrado ahí cae a
   52px de lado y deja de leerse. 64px es el máximo que cabe SIN tocar la
   tarjeta: min-height 92 − padding 14×2 = 64. Como la tarjeta no crece, ni el
   ancho fijo del marquee ni la aritmética del bucle de −50% se enteran. */
.lgc--cuad{--lgw:64px; --lgh:64px;}

/* ---- TARJETA DE TEXTO — SIN USO DESDE 2026-08-24 ----
   Vicky Gardens, Nestlé y Recreate ya tienen su logotipo real (Karla los mandó
   en el documento de correcciones), así que hoy ninguna marca va en texto. La
   regla se conserva para la próxima marca que entre sin logo publicable.
   El logotipo que teníamos de Recreate resultó ser de OTRA empresa (ver
   §LOGOS-2026-08 en build.py) y de la verdadera no existe públicamente más que
   su foto de perfil de Instagram. Va con el nombre en Fredoka: ocupa la
   misma tarjeta, el mismo ancho fijo y la misma altura mínima que las demás, así
   que ni el bucle del marquee ni las cinco columnas de la rejilla cambian.
   Se lee como una pieza terminada y no le atribuye a nadie una marca ajena. */
.lgc-txt{
  font-family:"Fredoka",sans-serif; font-weight:600;
  font-size:1.02rem; letter-spacing:.01em; line-height:1.2;
  color:var(--negro); text-align:center;   /* sobre blanco, 18.9:1 ✅ */
}
@media (max-width:620px){ .lgc-txt{font-size:.86rem;} }

/* ---- 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. (Antes también servía para despejar la esquina del badge DEMO, retirado
   el 2026-09-07; la máscara se queda porque el corte seco sigue existiendo.) */
.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). */
}
/* Karla (2026-09-07): los subtítulos rojos pasan al salmón del sitio — el mismo
   --salmon-title de los titulares, así que títulos y subtítulos hablan con una
   sola voz. Sobre blanco da 3.01:1 y un h3 mide 20–25.6px con peso 600, o sea
   "texto grande": le basta 3:1, y pasa. (En Testimonios, sobre el wash rosa, se
   queda a un 5.6% del mínimo; el razonamiento está en .tgroup-ttl.) */
.card h3{margin-bottom:10px; color:var(--salmon-title);}

/* ---- LA MARCA COMO ICONO, NO COMO PALABRA (Karla, 2026-08-25) ----
   Antes el pie y las tarjetas de Contacto decían "Instagram" y "WhatsApp" en
   texto, y debajo el usuario y el número. El logo identifica el canal más
   rápido que la palabra, así que el nombre pasa a ser el glifo de la marca y
   al lado queda el dato que la gente de verdad copia.

   Son los glifos OFICIALES de cada marca (trazo único, relleno), no versiones
   dibujadas de nuevo: media marca reconocible no sirve de nada. Por eso van
   con `fill` y NO heredan el estilo de trazo de .ico, que es el lenguaje de
   los iconos propios del sitio.

   ⚠ ACCESIBILIDAD: un icono sin texto no se anuncia. La palabra sobrevive en
     un .sr-only DENTRO del enlace, así que un lector de pantalla lee
     "Instagram @amor.porservir" y no un enlace que empieza por una arroba. */
.bicon{display:inline-flex; flex:0 0 auto; width:19px; height:19px;}
.bicon svg{width:100%; height:100%; fill:var(--negro); stroke:none;}
.foot-social{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px;
  margin-top:clamp(18px,2.2vw,24px);}
.foot-social li{margin:0;}
.foot-social a{display:inline-flex; align-items:center; gap:9px;}

.brand-row{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
.brand-mark{
  display:grid; place-items:center; flex:0 0 auto;
  width:52px; height:52px; border-radius:50%;
  background:var(--blanco); border:3px solid var(--negro);
}
.brand-mark svg{width:26px; height:26px; fill:var(--negro); stroke:none;}

.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);}
/* ---- REGLA DE ALINEACIÓN DENTRO DE LAS CAJAS (2026-09-07) ----
   Karla: «que el texto de adentro esté bien centralizado o justificado, como
   pienses que se vea más organizado». El criterio que se aplica en todo el
   sitio:

     · CONTENIDO CORTO (una cifra, un rótulo, dos líneas sin párrafo) → CENTRADO.
       Son .stat, .lgc, .tl-step y ahora .cal-item.
     · CONTENIDO CON PÁRRAFO → ALINEADO A LA IZQUIERDA. Son .card, .door,
       .ic-card, .tcard, .dona. Centrar un párrafo obliga al ojo a buscar dónde
       empieza cada renglón, y además desalinea los títulos entre tarjetas de
       una misma fila, que es lo que de verdad se ve desordenado.

   NADA VA JUSTIFICADO. Sin partición de palabras —que los navegadores no hacen
   bien en español— el justificado abre ríos de espacio en blanco dentro de
   columnas estrechas como éstas. Se vería peor, no más ordenado.

   .cal-item era la excepción que quedaba: mes + actividad, dos líneas sin
   párrafo, y estaba a la izquierda, así que con ocho cajas de rótulos de largo
   muy distinto la rejilla se veía irregular. Su relleno pasa además al mismo
   clamp() que el resto de las cajas; era la única con medidas fijas. */
.cal-item{
  border:3px solid var(--negro); border-radius:var(--r-md);
  padding:clamp(18px,2.2vw,24px) clamp(14px,1.8vw,20px); background:var(--blanco);
  text-align:center;
}
.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 ---------- */

/* ============================================================================
   GALERÍA — CUADRÍCULA UNIFORME        (Karla, 2026-09-07)

   En agosto se pasó a mampostería (`columns`) para que cada foto conservara su
   proporción, y se asumió por escrito una contrapartida: «el orden de lectura
   baja por columnas y no en zigzag; en un álbum sin narrativa da igual».
   No daba igual. Ella lo señaló con esas palabras: «se ven una al lado de la
   otra y luego se mueven una abajo de la otra». Y en la misma lista pidió que
   todas midieran lo mismo, «como se ven las del bazar».

   Las dos cosas se arreglan con lo mismo: cuadrícula de verdad. El orden pasa a
   ser el de lectura —izquierda a derecha, fila por fila— y todas las celdas
   miden igual.

   PROPORCIÓN 3:4, no cuadrada: las del bazar que ella pone de referencia son
   verticales (1050×1400) y la mayoría del material es de teléfono. El 1:1 les
   cortaba la cabeza; el 3:4 recorta lo justo y las horizontales pierden sólo
   los lados.

   SIGUE SIN MARCO (su petición de agosto): sólo el radio pequeño.
   Con `aspect-ratio` en CSS el hueco queda reservado antes de que cargue la
   foto, así que ya no depende de los atributos width/height del <img> — que se
   conservan igualmente por si el CSS no llega.
   ============================================================================ */
.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%; height:auto; aspect-ratio:3/4; object-fit:cover;
  display:block; border:0; border-radius:var(--r-sm);
}` de la versión con marcos ya no existe. */
.gal img{
  width:100%; height:auto;
  border:0; border-radius:var(--r-sm);
  margin:0 0 12px; break-inside:avoid;
}
/* La toma de conjunto del mural: una sola foto ancha que cierra el álbum de
   antes/después. Sí lleva marco, porque pertenece al par de comparación. */

/* ============================================================================
   TARJETAS CON ICONO — "¿Cómo podemos colaborar?" (Aliados)

   Karla escribió las seis con emoji (🤝 🎁 💡 🌱 👥 📣). Se dibujan como SVG
   propios: un emoji lo pinta el sistema operativo, así que serían seis
   ilustraciones y seis paletas ajenas dentro de un sitio de cuatro colores, y
   distintas en cada máquina. Estos usan la receta de la casa —relleno pastel
   con línea negra— y ciclan por azulito / amarillo / rosadito.
   ============================================================================ */
.ic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);}
.ic-card{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.ic-card h3{color:var(--salmon-title); margin:0;}
/* El cuerpo llegó en la segunda entrega de Karla (2026-08-21). El gap del flex
   ya separa el icono del título, así que el párrafo sólo necesita quitarse su
   margen inferior heredado y acercarse al título: -6px lo pega al h3 sin
   deshacer el ritmo de la tarjeta. */
.ic-card p{margin:-6px 0 0; font-size:.95rem; line-height:1.55;}
.ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:56px; height:56px; border-radius:50%;
  background:var(--ico-bg); border:3px solid var(--negro);
}
.ico svg{width:28px; height:28px; fill:none; stroke:var(--negro);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

/* ============================================================================
   LÍNEA DE TIEMPO — "De una colaboración a una relación" (Aliados)
   Cinco pasos. En escritorio corren en horizontal unidos por una línea que pasa
   POR DETRÁS de los números (de ahí el ::before del <ol> y el fondo opaco de la
   bolita). En móvil la línea se vuelve vertical y los pasos se apilan.
   ============================================================================ */
.tl{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.6vw,18px);
}
.tl::before{
  content:""; position:absolute; left:10%; right:10%; top:29px; height:3px;
  background:var(--negro); z-index:0;
}
/* `align-content:start` NO es decorativo. El .tl estira los cinco pasos a la
   altura del más alto; dentro de cada paso, con el reparto por defecto
   (`stretch`) ese sobrante se mete EN LAS FILAS, así que los cuatro pasos de
   texto corto empujaban su título 10px por debajo del único de cuatro líneas y
   los cinco rótulos quedaban desalineados. Anclando las filas arriba, los cinco
   arrancan en el mismo punto y el sobrante queda abajo, donde no se ve. */
.tl-step{
  position:relative; z-index:1; text-align:center;
  display:grid; gap:14px; justify-items:center; align-content:start;
}
.tl-num{
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:var(--blanco); border:3px solid var(--negro);
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.15rem;
  font-variant-numeric:tabular-nums; color:var(--negro);
}
.tl-step:nth-child(2n) .tl-num{background:var(--rosadito);}
.tl-step:nth-child(3n) .tl-num{background:var(--azulito);}
.tl-ttl{font-size:clamp(1rem,1.6vw,1.2rem); color:var(--negro); margin:0 0 8px;}
/* Con la descripción de cada paso (llegó 2026-08-21) el paso deja de ser un
   rótulo suelto. El texto se acota a 26ch: en cinco columnas de ~200px una
   medida libre daría renglones de dos o tres palabras. */
.tl-body{max-width:26ch;}
.tl-body p{margin:0; font-size:.9rem; line-height:1.5; color:var(--negro-soft);}

/* ---------- FRASE GRANDE DE CIERRE ----------
   El remate que Karla pidió al final de los beneficios de Aliados, y el hueco
   de la cita del aliado. Es tipografía, no una tarjeta: el peso lo da el
   tamaño y la línea azul de la izquierda, la misma de .hero-quote. */
.big-quote{
  margin:clamp(28px,4vw,44px) auto 0; max-width:34ch; text-align:center;
  font-family:"Fredoka",sans-serif; font-weight:500;
  font-size:clamp(1.3rem,2.9vw,2rem); line-height:1.25; color:var(--negro);
}

/* ---------- TARJETA DE TESTIMONIO ----------
   Con la cita completa (2026-08-21) la tarjeta dejó de ser "retrato + nombre en
   una fila" y pasó a <figure>: retrato, cita, firma. En columna y no en fila
   porque las citas son de tres a cinco renglones: al lado de un círculo de
   110px la medida se quedaba en ~28ch y la cita se leía como una columna
   estrecha. El grid las estira a la más alta, así que la firma se ancla abajo
   con margin-top:auto y las cuatro firmas quedan a la misma altura. */
/* ---- TESTIMONIOS ESCRITOS: FOTO COMPLETA Y TEXTO AL LADO (2026-09-07) ----
   Karla: «organizar para que se vea la imagen completa y al lado el texto, así
   se aprovecha la foto». Antes era un círculo de 152px encima de la cita: la
   máscara redonda recortaba las esquinas del encuadre y la foto pesaba poco.

   Ahora cada testimonio es UNA tarjeta a todo el ancho, con la foto cuadrada a
   la izquierda y la cita a la derecha. Los archivos son 900×900, así que con
   `aspect-ratio:1` la caja tiene la misma proporción que el original y
   object-fit:cover NO recorta nada: se ve la foto entera.

   La foto manda la altura de la tarjeta (una cita ronda las 4-5 líneas, bastante
   menos que un cuadrado de ~290px), por eso el texto va centrado vertical: si se
   alineara arriba quedaría colgando con un hueco largo debajo. */
.tgroup{margin-bottom:clamp(30px,4vw,46px);}
/* Los subtítulos usan EL MISMO salmón que los títulos (--salmon-title), por
   petición expresa de Karla el 2026-09-07: «cambia todos los subtítulos que
   están en rojo y ponlos del color salmón del website», repetida al ver que el
   tono intermedio le seguía leyendo rojo.

   ⚠ CONCESIÓN CONSCIENTE, ANOTADA PARA QUIEN VENGA DESPUÉS: sobre el wash rosa
     de esta sección ese salmón da 2.83:1 y el mínimo para texto grande es 3:1.
     Se queda a un 5.6%. Se acepta porque el titular "Testimonios escritos" que
     va justo encima YA vive con ese mismo 2.83:1 —o sea, no introduce una
     excepción nueva, la iguala— y porque la unidad visual que ella pide vale
     más que ese margen. Sobre blanco (las tarjetas de Nosotros, Aliados y
     Noticias) sí pasa: 3.01:1.
     SI SE QUIERE CUMPLIR DEL TODO: basta con que esta sección deje de ser
     .section--rosa y pase a fondo blanco; ahí sube a 3.01:1 y cumple.

   El suelo de 1.18rem (18.88px) con peso 700 se mantiene: por encima de 18.66px
   en negrita cuenta como texto grande, que es lo que rebaja el mínimo a 3:1. */
.tgroup-ttl{font-size:clamp(1.18rem,1.9vw,1.4rem); font-weight:700;
  color:var(--salmon-title); margin:0 0 6px;}
/* Karla: «que los textos se puedan extender completamente hasta donde termina
   el cuadro». Fuera el tope de 62ch. */
.tgroup-sub{margin:0 0 clamp(16px,2vw,22px); color:var(--negro-soft);}

.tcard{
  background:var(--blanco); border:3px solid var(--negro); border-radius:var(--r-lg);
  margin:0 0 clamp(14px,1.8vw,20px); overflow:hidden;
  display:grid; grid-template-columns:minmax(170px,26%) 1fr; align-items:stretch;
}
/* ⚠ LA FOTO NO SE ESTIRA. Con `align-self:stretch` la caja de la imagen crecía
   hasta la altura de la tarjeta, y en la tarjeta doble —que lleva dos citas y
   por tanto mide casi el doble— la caja quedaba alta y estrecha: `cover`
   recortaba por los LADOS y cortaba las caras de las dos, que están una al lado
   de la otra. Con `align-self:center` la foto conserva su cuadrado y se centra;
   el sobrante de la columna queda en blanco, que es el fondo de la tarjeta. */
.tcard img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  align-self:center;
}
/* La línea divisoria se mueve de la foto al cuerpo: en el <img> sólo llegaba
   hasta donde llegaba la foto y dejaba el corte a medias. En el cuerpo, que sí
   se estira, recorre la tarjeta entera. */
.tcard-body{
  padding:clamp(20px,2.8vw,32px); display:flex; flex-direction:column;
  gap:14px; justify-content:center; border-left:3px solid var(--negro);
}
.tcard blockquote{margin:0;}
/* Karla (2026-09-07): «que el texto sea un poco más grande para que no sobre
   tanto espacio en los rectángulos». La foto manda la altura de la tarjeta —es
   un cuadrado de ~300px— y la cita ocupaba unas cinco líneas, así que sobraba
   aire arriba y abajo. Subiendo el cuerpo a 1.06–1.22rem la cita gana un par de
   líneas y llena la caja sin que nada se descuadre: la altura la sigue fijando
   la foto, no el texto. */
.tcard blockquote p{margin:0; line-height:1.6; font-size:clamp(1.06rem,1.55vw,1.22rem);}
.tcard figcaption{
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.12rem; color:var(--negro);
}
/* TARJETA CON DOS TESTIMONIOS (Salma y Miranda comparten foto). Dos citas no
   caben bajo un solo <figcaption>, así que cada <blockquote> lleva su <cite> y
   el figcaption queda para la empresa, que es lo que ambas comparten. */
.tcard cite{
  display:block; margin-top:8px; font-style:normal;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.05rem; color:var(--negro);
}
/* La tarjeta doble mide casi el doble que las demás, así que su foto SÍ llena
   la columna en vez de quedarse cuadrada y centrada. Puede hacerlo porque tiene
   recorte propio: `test-salma-miranda.webp`, las dos de hombros para arriba en
   4:5, con aire alrededor de las caras. Ahí lo que recorta `cover` es fondo, no
   gente — que era justo el problema del cuadrado estirado.
   La columna se ensancha (26% → 36%) para que la caja no quede tan estrecha y
   el recorte lateral sea aún menor. */
.tcard--duo{grid-template-columns:minmax(220px,36%) 1fr;}
.tcard--duo img{aspect-ratio:auto; height:100%; align-self:stretch;}
.tcard--duo .tcard-body{gap:18px;}
.tcard--duo blockquote + blockquote{
  padding-top:16px; border-top:2px solid rgba(17,17,17,.14);
}
.tcard--duo figcaption{color:var(--azul-deep); font-size:1rem;}

/* ---------- CITA DESTACADA (testimonio del aliado, Aliados) ----------
   Una sola cita larga junto a la foto del equipo. No usa .big-quote (que es la
   frase de remate, centrada y a 2rem): aquí el texto es de seis renglones y a
   ese cuerpo sería un muro. Se queda en tamaño de lectura con la barra azul de
   .hero-quote, que es como el sitio marca "esto es una voz". */
.pull-quote{
  margin:0; border-left:5px solid var(--azulito); padding-left:22px;
}
.pull-quote p{
  margin:0 0 16px;
  font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.62; color:var(--negro);
}
.pull-quote cite{
  font-style:normal; font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.05rem;
  color:var(--negro);
}
.pull-quote cite span{
  display:block; font-weight:400; font-size:.9rem; color:var(--azul-deep);
}

/* ---------- 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:none;}
/* ---- CABECERA QUE TERMINA EN BOTÓN (Aliados, 2026-08-25) ----
   El aire inferior de .pagehead (20–36px) está calculado para que cierre un
   PÁRRAFO. Un botón pesa más: tiene borde, relleno y color, y con ese mismo
   aire queda rozando el canto de la sección que sigue —que en Aliados además
   es de color, así que el roce se ve. Cuando la cabecera termina en botón, el
   aire de abajo iguala al de arriba y el bloque queda centrado entre el
   titular y el corte de color. */
.pagehead--cta{padding-bottom:clamp(38px,6vw,72px);}

/* ============================================================================
   FOOTER

   ── BUG QUE REPORTÓ KARLA: "espacio blanco extraño antes del footer" ──
   La ola es un SVG: su path pinta el rosadito del pie, y todo lo que queda por
   ENCIMA del path dentro del viewBox es transparente. Mientras la última
   sección de la página fuera blanca, ese hueco transparente era invisible. Pero
   la portada termina en wash amarillo (Testimonios en rosa, Contacto en azul), y
   ahí el hueco dejaba ver el blanco del <body>: una cuña blanca entre el color y
   el pie. No era un margen de más — era el fondo del propio hueco de la ola.
   ARREGLO: la ola va dentro de .foot-lead, que pinta el MISMO wash de la sección
   que la precede. Cada página declara cuál en PAGES[...]["footbg"] (build.py).
   `line-height:0` mata el hueco de línea base que un SVG en flujo deja debajo.
   ============================================================================ */
.foot-lead{background:var(--blanco); line-height:0;}
.foot-lead--rosa{background:var(--wash-rosa);}
.foot-lead--azul{background:var(--wash-azul);}
.foot-lead--amarillo{background:var(--wash-amarillo);}
.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);}
/* ---- PIE CENTRADO Y A TODO EL ANCHO (Karla, 2026-08-25) ----
   En agosto se resolvió a medias: la celda de "El sitio" se ensanchó y su lista
   pasó a dos columnas dentro de una rejilla 1.3fr / 1.5fr / 1fr. Funcionaba
   mientras la tercera celda tenía tres contactos; al quitar el correo se quedó
   con dos renglones y volvió el problema que ella señalaba —media franja vacía
   a la derecha— esta vez peor.

   El error de fondo era la rejilla: repartir a lo ANCHO tres bloques de altura
   muy distinta deja huecos por definición. Ahora cada bloque ocupa una franja
   completa y centrada, apiladas. Los nueve enlaces se despliegan en HORIZONTAL,
   que es exactamente donde estaba el espacio sobrante, y el pie usa el ancho
   entero sin que nada quede colgando.

   El separador superior lo pone .foot-nav (no un <hr>): así la marca queda como
   cabecera del pie y la navegación arranca su propio bloque. */
.foot-top{display:grid; justify-items:center; text-align:center; gap:10px;}
.foot-logo{width:70px; margin:0;}
.foot-tag{max-width:44ch; margin:0; font-size:.95rem; color:var(--negro-soft);}

.foot-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px;
  margin-top:clamp(26px,3.2vw,36px);
  padding-top:clamp(20px,2.6vw,28px);
  border-top:2px solid rgba(17,17,17,.2);
}
.foot-nav a{font-family:"Fredoka",sans-serif; font-weight:500; font-size:1rem;}
/* La página en la que estás va en negrita, igual criterio que el menú. */
.foot-nav a[aria-current="page"]{font-weight:600; text-decoration:underline;}

.foot-quote{margin:clamp(24px,3vw,34px) auto 0; max-width:36ch; text-align:center;}
.foot-quote p{
  margin:0 0 5px; font-family:"Fredoka",sans-serif; font-weight:500;
  font-size:1.05rem; line-height:1.35;
}
.foot-quote cite{font-style:normal; font-size:.85rem; color:var(--negro-soft);}

.foot a{color:var(--negro); text-decoration:none;}
.foot a:hover{text-decoration:underline;}
.foot li{font-size:.95rem;}
.foot-bottom{
  margin-top:clamp(26px,3vw,34px); padding-top:18px;
  border-top:2px solid rgba(17,17,17,.2);
  font-size:.82rem; color:var(--negro-soft); text-align:center;
  display:flex; justify-content:center; gap:6px 24px; 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
   ============================================================================ */
/* El @media de 1180px que encogía las pestañas y escondía el nombre de la
   fundación se retiró junto con la barra horizontal: ya no hay nada que
   encoger, y el sello + "Amor Por Servir" se ven ahora en TODOS los anchos. */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero-media{margin-top:0;}   /* apilada no hay nada al lado que cuadrar */
  .hero-media img{aspect-ratio:4/3; object-position:center 25%;}
  .doors{grid-template-columns:1fr;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .ic-grid{grid-template-columns:repeat(2,1fr);}
  .cal{grid-template-columns:repeat(2,1fr);}
  .gal{grid-template-columns:repeat(3,1fr);}
  .mv{grid-template-columns:1fr;}
  /* La línea de tiempo se pone de pie: cinco pasos en horizontal a menos de
     980px dejan los títulos en tres renglones cada uno. La regla corrida pasa a
     ser vertical y cada paso se lee como un renglón: número a la izquierda,
     título al lado. */
  .tl{grid-template-columns:1fr; gap:0;}
  .tl::before{left:29px; right:auto; top:12px; bottom:12px; width:3px; height:auto;}
  .tl-step{
    grid-template-columns:58px 1fr; justify-items:start; text-align:left;
    align-items:center; gap:18px; padding-block:12px;
  }
}
@media (max-width:820px){
  .np-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  body{font-size:16px;}
  /* 3+3 sólo existe mientras quepan tres columnas. En un teléfono de 390px, tres
     tarjetas dejan ~110px cada una: ni la cifra a 2.5rem ni el rótulo en una
     línea caben. Bajan a 2×3 y el rótulo recupera el permiso de partirse. */
  .stats{grid-template-columns:repeat(2,1fr); margin-inline:0;}
  .stat{padding:24px 12px 20px;}
  .stat span{white-space:normal;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .ic-grid{grid-template-columns:1fr;}
  .np-grid{grid-template-columns:1fr; gap:6px;}
  .np-item{font-size:1.05rem; padding:12px 14px;}
  .cal{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,1fr); gap:10px;}
  /* en móvil la tarjeta se apila: foto arriba, cita debajo. */
  .tcard{grid-template-columns:1fr;}
  .tcard img{aspect-ratio:4/3;}
  /* apilada, la doble vuelve a la proporción de las demás */
  .tcard--duo{grid-template-columns:1fr;}
  .tcard--duo img{height:auto; aspect-ratio:4/3;}
  .tcard-body{border-left:0; border-top:3px solid var(--negro);}
  .pull-quote{padding-left:16px;}
    .vids{grid-template-columns:1fr; max-width:340px;}
  .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;}
  .lgc--cuad{--lgw:56px; --lgh:56px;}
  .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;}
}