@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url("/vendor/fonts/unbounded-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/vendor/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("/vendor/fonts/fraunces-italic-latin.woff2") format("woff2")}
/* ===== Give&Grow International - design system (rebuild v4) ===== */
:root{
  --g:#1F5C38;--gm:#2E7D4F;--gl:#E8F5EC;--gn:#4ade80;--gd:#16402A;
  --ink-deep:#0E2118;
  --cream:#F7F4EF;
  --mu:#5C636F;--bd:#DAD3C3;--bds:#EDE8DC;
  --amber:#A84D00;--amberl:#FEF3E0;
  /* EL VERDE DE «SALIO BIEN». Faltaba: `var(--ok)` no estaba definido en
     ninguna parte de esta hoja, asi que el unico sitio que lo usa —el mensaje
     que le dice a una familia que sus fotos se subieron— caia en su respaldo,
     `var(--g)`, que no se aclara de noche. De dia vale lo mismo que antes. */
  --ok:#1F5C38;
  /* Rojo de error. No existía: `app.js` lo invocaba tres veces como
     `var(--err,#c0392b)` y caía SIEMPRE al fallback, así que había tres rojos
     distintos sueltos por el sitio. Al definirlo aquí, esas tres llamadas
     empiezan a resolver solas. */
  --err:#8C2F1E;
  /* Botones flotantes. El verde de WhatsApp es marca ajena y por eso vive en su
     propio token, acotado a ese botón: es el único lugar del sitio donde el
     reconocimiento del canal pesa más que la paleta de la casa.
     Las sombras van en dos capas —una cerrada que asienta el botón y otra
     abierta que lo levanta— en vez de la plana teñida de antes. */
  --wa-marca:#25D366;
  /* Tinta sobre superficie oscura (el check de las casillas, y en adelante todo
     el texto que hoy escribe `#fff` a mano). */
  --on-dark:#fff;
  /* Escala de blanco sobre superficie oscura. Había 70 usos con 24 opacidades
     distintas —.95, .92, .85, .82, .8, .75, .72, .7…— que nadie diseñó: son
     capas de deriva. Seis pasos con rol, y el componente elige por lo que la
     cosa ES, no por el número que le quedó bien a alguien ese día. */
  --on-dark-2:rgba(255,255,255,.85);   /* texto secundario */
  --on-dark-3:rgba(255,255,255,.70);   /* texto de apoyo */
  --on-dark-4:rgba(255,255,255,.55);   /* texto tenue y líneas marcadas */
  --on-dark-line:rgba(255,255,255,.16);/* líneas y separadores */
  --on-dark-fill:rgba(255,255,255,.12);/* superficie sutil */
  --on-dark-fill-2:rgba(255,255,255,.07);/* superficie apenas insinuada */
  /* Fondo para logotipos ajenos. NO es `--on-dark` ni `--surface`: es una
     superficie que debe seguir siendo blanca en los dos modos, porque los
     logos de fundaciones y empresas vienen con fondo blanco horneado y sobre
     papel oscuro se recortarían en un rectángulo sucio. */
  --logo-bg:#fff;
  --fab-shadow:0 1px 2px rgba(14,33,24,.16), 0 6px 18px rgba(14,33,24,.14);
  --fab-shadow-hover:0 2px 4px rgba(14,33,24,.20), 0 12px 28px rgba(14,33,24,.22);
  --r:12px;--rl:13px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:0 10px 30px rgba(0,0,0,.10);
  --maxw:1120px;
  --font-display:"Unbounded",sans-serif;
  /* ===== Escala tipográfica editorial — v5 Etapa 2 "La voz" =====
     Ritmo modular fluido (base 16px). Gravedad de informe anual, no de landing.
     El término medio del clamp usa vw + rem para respetar el zoom del usuario. */
  /* ===== escala pequeña, cerrada =====
     Había 26 tamaños distintos y 72 de ellos con medio punto —12.5, 13.5,
     14.5…— que nadie eligió a propósito: son el resultado de ajustar a ojo,
     una y otra vez, hasta que se veía bien ese día. Estos siete pasos son
     TODO lo que hay por debajo del cuerpo. `--fs-eyebrow` y `--fs-control`
     se quedan como nombres de rol de dos de ellos. */
  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --fs-17:17px;
  --fs-eyebrow:12px;
  /* Etiqueta de control (los dos botones flotantes). Estaba escrito a mano en
     los dos sitios; al ser token, no pueden separarse. */
  --fs-control:13px;
  --fs-body:clamp(16px,.28vw + .96rem,17px);
  --fs-lead:clamp(18.5px,.7vw + .95rem,21px);
  --fs-h4:clamp(17px,.5vw + .95rem,20px);
  --fs-h3:clamp(20px,1.1vw + .9rem,26px);
  --fs-h2:clamp(30px,3.4vw + .6rem,52px);
  --fs-h1:clamp(38px,5.2vw + .6rem,76px);
  --fs-display:clamp(56px,9vw + .5rem,128px);
  --lh-display:.94;
  --lh-tight:1.06;
  --lh-heading:1.12;
  --lh-snug:1.4;
  --lh-body:1.6;
  --tr-display:-.03em;
  --tr-heading:-.02em;
  --tr-eyebrow:.14em;
  /* tokens semánticos de tema (día por defecto) — Etapa v5: papel institucional */
  --bg:#F3EFE6;--surface:#FBF8F1;--surface-2:var(--cream);
  --ink:#191813;--ink-soft:#47443B;
  --acc:#1F5C38;--acc-2:#2E7D4F;
  --nav-bg:rgba(243,239,230,.90);
  /* EL VELO DEL HERO Y EL ICONO DE `.path`, que estaban escritos sueltos.
     Se vuelven tokens porque Mira Mi Casa los necesita en otro color: sobre
     su paleta azul, un velo verde tinta y un icono verde claro se leen como
     un despiste. Van en tripleta RGB y no en hex porque el degradado les
     pone alfa. */
  --hero-velo:14,33,24;
  --ic-path:#cfeede;
  --skel-a:#ece9e2;--skel-b:#f7f5ef;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-16);scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;font-size:var(--fs-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:var(--lh-body);overflow-x:hidden}
h1,h2{font-family:var(--font-display);line-height:var(--lh-heading);letter-spacing:var(--tr-heading);font-weight:700}
h3,h4{font-family:"Inter",sans-serif;line-height:var(--lh-tight);letter-spacing:var(--tr-heading);font-weight:700}
/* ENCABEZADO DE COMPONENTE — el NIVEL y la APARIENCIA son dos cosas distintas.
   ==========================================================================
   Hasta el 16 sep 2026 estaban atadas: el tamaño de un titular salía de su
   etiqueta, así que para que una tarjeta se viera como tarjeta había que
   escribirla `h3`. Resultado: 14 páginas saltaban de h1 a h3 sin un h2 en
   medio, que es WCAG 1.3.1 y es lo primero que reporta una auditoría
   automática de accesibilidad.

   Ahora el nivel lo fija el esquema del documento y la apariencia la fija esta
   clase. `h-comp3` se ve como se veía un h3; `h-comp4`, como un h4. Los valores
   son los del navegador (1.17em y 1em) a propósito: reproducen EXACTAMENTE lo
   que había, para que un arreglo de accesibilidad no traiga de contrabando un
   cambio de diseño que nadie pidió. */
.h-comp3,.h-comp4{font-family:"Inter",sans-serif;line-height:var(--lh-tight);
  letter-spacing:var(--tr-heading);font-weight:700}
.h-comp3{font-size:1.17em}
.h-comp4{font-size:1em}
/* Y las reglas de componente lo alcanzan con `:is(h3:not(:where(.h-comp4)),:where(.h-comp3))`, que NO
   es lo mismo que `:is(h3,.h-comp3)`. La segunda forma sube la especificidad de
   (0,1,1) a (0,2,0) y le gana a reglas que antes mandaban: se midió, y movía el
   margen de las seis tarjetas de programas del Hub, los tres peldaños de
   Medición y el titular de la brigada. `:where()` aporta cero, así que el
   selector conserva EXACTAMENTE la especificidad que tenía cuando decía `h3`. */
/* Y la rama `h3` lleva `:not(:where(.h-comp4))` por el fallo simétrico: 14
   titulares que eran `h4` ahora son `h3`, así que empezaron a caer dentro de
   reglas escritas para `h3` que antes no los veían. Medido: los tres peldaños
   de Medición viven dentro de un `.os-row` y se llevaban su tamaño; el titular
   de la brigada, dentro de un `.prose` y se llevaba sus márgenes. */
em.fr{font-family:"Fraunces",serif;font-style:italic;font-weight:400}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%;object-fit:cover}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.mu{color:var(--mu)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid var(--gm);outline-offset:2px;border-radius:4px}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px 0;padding-top:calc(14px + env(safe-area-inset-top));transition:background .3s,box-shadow .3s}
nav.sol{background:var(--nav-bg);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--bd)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nlogo{font-family:var(--font-display);font-size:var(--fs-16);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.nlogo em{font-style:normal;color:var(--gm)}
.nlinks{display:flex;align-items:center;gap:6px}
.nlink{position:relative;padding:8px 11px;border-radius:8px;font-size:var(--fs-14);font-weight:600;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.nlink:hover{background:var(--gl);color:var(--acc)}
.ndrop-t{background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.ndrop-t::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .18s var(--ease);opacity:.65}
.ndrop-t[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.ndrop{position:relative}
.ndrop-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s var(--ease)}
.ndrop:hover .ndrop-menu,.ndrop:focus-within .ndrop-menu,.ndrop.open .ndrop-menu{opacity:1;visibility:visible;transform:none}
.ndrop-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:var(--fs-14);font-weight:500;color:var(--ink)}
.ndrop-menu a:hover{background:var(--gl);color:var(--acc)}
/* menú con descriptor: distingue ítems de nombre parecido (Evidencia vs ImpactOS) */
.ndrop-menu-desc{min-width:308px}
.ndrop-menu-desc a{padding:10px 12px}
.nd-t{display:block;font-weight:600;line-height:1.3}
.nd-d{display:block;margin-top:2px;font-size:var(--fs-13);font-weight:400;line-height:1.35;color:var(--mu)}
.ndrop-menu-desc a:hover .nd-d{color:var(--ink-soft)}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--bd);border-radius:999px;overflow:hidden}
.lang button{padding:5px 11px;font-size:var(--fs-12);font-weight:700;color:var(--mu)}
.lang button.on{background:var(--g);color:var(--on-dark)}
/* El aviso de que el diccionario inglés no llegó. Discreto a proposito: es un
   estorbo, no una emergencia. Sin tokens nuevos. */
.lang-fallo{position:fixed;left:0;right:0;z-index:199;margin:0;
  padding:10px 24px;background:var(--surface);color:var(--mu);
  font-size:var(--fs-13);line-height:1.45;text-align:center;border-bottom:1px solid var(--bd)}
.burger{display:none;width:40px;height:40px;border-radius:8px;font-size:22px;color:var(--ink)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:var(--fs-15);transition:transform .15s var(--ease),box-shadow .15s,background .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--g);color:var(--on-dark);box-shadow:0 4px 14px rgba(31,92,56,.28)}
.btn-g:hover{background:var(--gm)}
.btn-o{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
.btn-o:hover{background:var(--gl)}
.btn-w{background:var(--surface);color:var(--ink);border:1.5px solid var(--bd)}
.btn-w:hover{border-color:var(--acc);color:var(--acc)}

/* ===== PAGES ===== */
.page{display:none;padding-top:calc(78px + env(safe-area-inset-top))}
.page.active{display:block}
section{padding:72px 0}
.ey{display:inline-block;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.h-sec{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tr-heading);margin-bottom:18px;max-width:16ch}
.lead{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--mu);max-width:60ch;margin-bottom:8px}
.center .h-sec,.center .lead{margin-left:auto;margin-right:auto}
.center .h-sec{max-width:20ch}

/* Cifra monumental — UNA por página, Unbounded. El dato verificable como pieza
   tipográfica (v5 E2). Acompañar siempre de una etiqueta con la fuente. */
.figure-xl{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.figure-xl .u{font-size:.42em;font-weight:600;letter-spacing:-.01em}
.figure-lab{display:block;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--mu);margin-top:8px}

/* Momento editorial Fraunces — cita/lead destacado, uso puntual */
.pull{font-family:"Fraunces",serif;font-style:italic;font-weight:400;font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--ink-soft);max-width:32ch}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ===== HERO ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:var(--on-dark);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:brightness(.92)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--hero-velo),.82) 0%,rgba(var(--hero-velo),.5) 48%,rgba(var(--hero-velo),.1) 100%)}
.hero-eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--gn);font-weight:800;margin-bottom:18px}
.hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-display);max-width:14ch;margin-bottom:22px}
.hero h1 em{color:var(--gn)}
.hero-lead{font-family:var(--font-display);font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:1.55;letter-spacing:-.01em;max-width:44ch;color:var(--on-dark-2);margin-bottom:34px}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px}
.path{background:var(--on-dark-fill-2);border:1px solid var(--on-dark-line);border-radius:var(--rl);padding:22px;text-align:left;backdrop-filter:blur(6px);transition:transform .2s var(--ease),background .2s}
.path:hover{transform:translateY(-4px);background:var(--on-dark-fill)}
.path-ic{width:46px;height:46px;border-radius:12px;background:var(--on-dark-fill);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.path :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){font-size:18px;margin-bottom:4px}
.path p{font-size:var(--fs-14);color:var(--on-dark-3)}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:16px;text-align:left}
.stats .stat{background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl);padding:24px 22px;transition:transform .3s var(--ease)}
.stats .stat:hover{transform:translateY(-3px)}
.stats .stat:first-child{background:var(--g);border-color:var(--g)}
.stats .stat:first-child .num{color:var(--on-dark)}
.stats .stat:first-child .lab{color:var(--on-dark-2)}
.stat .num{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--acc)}
.stat .lab{font-size:var(--fs-13);color:var(--mu);margin-top:4px}
@media (max-width:880px){.stats{grid-template-columns:1fr 1fr}}

/* ===== CARDS ===== */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl);padding:26px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-empty{border-style:dashed;background:transparent;box-shadow:none}
.card-empty:hover{transform:none;box-shadow:none}
.card-empty h3{color:var(--ink)}
.card-empty p{color:var(--mu)}
.tier-price{margin:4px 0 10px}
.tier-price b{font-family:var(--font-display);font-size:23px;color:var(--acc)}
.tier-price span{font-size:var(--fs-13);color:var(--mu);margin-left:6px}
.tier-more{font-size:var(--fs-13);font-weight:700;color:var(--ink);margin:14px 0 8px}
.tier-ben{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.tier-ben li{position:relative;padding-left:20px;font-size:var(--fs-14);color:var(--mu);line-height:1.45}
.tier-ben li::before{content:"";position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.cta-note{font-size:var(--fs-13);color:var(--mu);max-width:480px;margin:22px auto 0;line-height:1.5}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--gl);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.partner-logo{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:1px solid var(--bd);border-radius:14px;background:var(--logo-bg);margin-bottom:14px}
.partner-logo img{display:block;width:auto;height:auto;max-width:200px;max-height:88px}
.card :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){font-size:19px;margin-bottom:8px}
.card p{font-size:var(--fs-15);color:var(--mu)}
.card .eco-row{justify-content:flex-start;margin-left:0;margin-right:0}
.tag{display:inline-block;font-size:var(--fs-11);font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--gl);color:var(--acc)}
.tag.new{background:var(--amberl);color:var(--amber)}
.tag.soon{background:var(--bds);color:var(--mu)}
.card>.tag{margin-bottom:12px}

/* trazabilidad steps */
.steps{counter-reset:s;display:grid;gap:18px}
.step{display:flex;gap:18px;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--g);color:var(--on-dark);font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center}
.step-n{display:none}
.step :is(h4,:where(.h-comp4)){font-size:var(--fs-17);margin-bottom:3px}
.step p{font-size:var(--fs-14);color:var(--mu)}

/* banded section */
.band{background:var(--ink-deep);color:var(--on-dark)}
.band .ey{color:var(--gn)}
.band .lead,.band .mu{color:var(--on-dark-3)}
.band .card{background:var(--on-dark-fill-2);border-color:var(--on-dark-fill);color:var(--on-dark)}
.band .card p{color:var(--on-dark-3)}
/* El boton de contorno hereda `--acc`, que es el verde institucional pleno, y
   `.band` es fondo verde-tinta en LOS DOS MODOS: quedaba en 2.1:1, borde
   incluido. No es un fallo de modo noche — en dia se ve igual de mal. */
.band .btn-o{color:var(--gn);border-color:var(--gn)}
/* Y su hover no puede seguir siendo `--gl`: en dia eso es casi blanco y dejaria
   el verde claro flotando encima. Se usa el mismo relleno tenue de las tarjetas. */
.band .btn-o:hover{background:var(--on-dark-fill)}
/* Y `.card-link` corre exactamente la misma suerte, por la misma razón: hereda
   `--acc` y sobre `--ink-deep` da 1,43:1 — el mismo número que ya se midió en
   el «Mi» del logotipo del pie. Hasta el 16 sep 2026 no había ni un solo
   `.card-link` dentro de un `.band` en todo el sitio, así que la regla faltaba
   sin que se notara: la primera que lo pusiera se llevaba el enlace invisible. */
.band .card-link{color:var(--gn)}
.cream{background:var(--surface-2)}

/* ===== CALCULATOR ===== */
.calc{background:var(--ink-deep);color:var(--on-dark);border-radius:16px;padding:32px;max-width:560px;margin:0 auto}
.calc-tabs{display:flex;gap:8px;margin-bottom:22px}
.calc-tab{flex:1;padding:10px;border-radius:10px;background:var(--on-dark-fill-2);color:var(--on-dark-3);font-weight:700;font-size:var(--fs-14)}
.calc-tab.on{background:var(--gm);color:var(--on-dark)}
.cur-toggle{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.cur-toggle button{padding:5px 16px;border-radius:999px;border:1px solid var(--on-dark-line);color:var(--on-dark-3);font-size:var(--fs-13);font-weight:700}
.cur-toggle button.on{background:var(--on-dark);color:var(--ink-deep)}
.calc-amount{text-align:center;margin-bottom:6px}
#calc-display{font-family:var(--font-display);font-size:clamp(22px,7vw,42px);font-weight:800;color:var(--gn);letter-spacing:-.01em;line-height:1.05;white-space:nowrap}
#calc-manual{width:100%;background:var(--on-dark-fill-2);border:1px solid var(--on-dark-fill);color:var(--on-dark);border-radius:10px;padding:10px;text-align:center;font-size:var(--fs-16);margin:6px 0 4px}
#calc-rate{font-size:var(--fs-12);color:var(--on-dark-4);text-align:center;margin-bottom:16px;min-height:16px}
input[type=range]{width:100%;accent-color:var(--gn);margin:8px 0 4px}
.calc-hints{display:flex;justify-content:space-between;font-size:var(--fs-11);color:var(--on-dark-4);margin-bottom:16px}
.calc-quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px}
.qbtn{padding:5px 12px;border-radius:16px;border:1px solid var(--on-dark-line);color:var(--on-dark-2);font-size:var(--fs-12);font-weight:700}
.qbtn:hover{border-color:var(--gn);color:var(--gn)}
.calc-out{background:var(--on-dark-fill-2);border-radius:14px;padding:18px;display:grid;gap:10px}
.calc-row{display:flex;justify-content:space-between;font-size:var(--fs-14)}
.calc-row b{color:var(--gn)}
.member{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--on-dark-fill-2)}
#m-ic{font-size:30px}
#m-name{font-weight:800;font-family:"Inter",sans-serif}
#m-sub{font-size:var(--fs-13);color:var(--on-dark-4)}

/* ===== PAYMENTS ===== */
.pay-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.pay-tab{padding:10px 20px;border-radius:999px;border:1px solid var(--bd);font-weight:700;font-size:var(--fs-14);color:var(--ink)}
.pay-tab.on{background:var(--g);color:var(--on-dark);border-color:var(--g)}
.pay-panel{display:none;background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl);padding:26px;max-width:520px;margin:0 auto}
.pay-panel.on{display:block}
.pay-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--bds);font-size:var(--fs-15)}
.pay-row:last-child{border:0}
.copy{padding:5px 14px;border-radius:8px;background:var(--gl);color:var(--acc);font-weight:700;font-size:var(--fs-13)}

/* ===== GALLERY ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-item{position:relative;display:block;padding:0;border:0;background:none;border-radius:var(--r);overflow:hidden;cursor:pointer}
.gal-item img{width:100%;height:260px;display:block;transition:transform .3s var(--ease),filter .3s}
.gal-item:focus-visible{outline:3px solid var(--gm);outline-offset:2px}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.03);filter:brightness(.88)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:var(--fs-13);font-weight:600;line-height:1.3;color:var(--on-dark);text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.gal-item img,.gal-cap{transition:none}}
.lightbox{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;flex-direction:column;padding:24px}
.lightbox.on{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:var(--r)}
#lb-cap{color:var(--on-dark);margin-top:14px;font-size:var(--fs-14)}
#lb-count{color:var(--on-dark-4);font-size:var(--fs-12);margin-top:4px}
.lb-x{position:absolute;top:24px;right:28px;color:var(--on-dark);font-size:34px;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--on-dark);font-size:40px;padding:0 18px;opacity:.8}
.lb-prev{left:8px}.lb-next{right:8px}

/* ===== ACCORDION ===== */
.acc-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
/* `color` explícito y no heredado: sin él, el <button> toma el negro por
   defecto del navegador, que en modo noche cae sobre superficie oscura y
   desaparece (1.21:1 medido). Solo la pestaña activa declaraba color. */
.acc-tab{padding:9px 18px;border-radius:999px;border:1px solid var(--bd);font-weight:700;font-size:var(--fs-14);color:var(--ink);background:transparent}
.acc-tab.on{background:var(--g);color:var(--on-dark);border-color:var(--g)}
.acc-panel{display:none}
.acc-panel.on{display:block}
#map-box{height:380px;border-radius:var(--rl);overflow:hidden;border:1px solid var(--bd);position:relative}
#map-box:not(.leaflet-container)::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--skel-a) 35%,var(--skel-b) 50%,var(--skel-a) 65%);background-size:200% 100%;animation:skel 1.1s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){#map-box:not(.leaflet-container)::before{animation:none}}
.gg-pin{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid var(--on-dark);box-shadow:0 2px 6px rgba(0,0,0,.28)}
/* Desde tokens: el `#B4690E` de los comercios estaba fuera de paleta y era la
   deuda que este plan tenía anotada. `--amber` ya existía con sus dos modos. */
.gg-pin-foundation{background:var(--gm)}
.gg-pin-company{background:var(--amber)}
.gg-pin-hub{background:var(--g)}
.map-legend{background:var(--surface);border:1px solid var(--bd);border-radius:10px;padding:8px 12px;font-size:var(--fs-12);display:flex;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.map-legend span{display:flex;align-items:center;gap:5px;color:var(--mu);white-space:nowrap}
.gg-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.faq-cta{display:inline-block;margin:0 0 20px;font-weight:700;font-size:var(--fs-14);color:var(--acc)}
#blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--bd)}
.faq-q{width:100%;text-align:left;padding:20px 0;font-weight:700;font-size:var(--fs-17);display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq-q .pm{color:var(--acc-2);font-size:24px;transition:transform .2s}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-in{padding:0 0 20px;color:var(--mu);font-size:var(--fs-15)}

/* ===== ALMA — panel lateral =====
   No es una burbuja de chat: es una columna de documento que entra por el borde
   derecho. Papel, reglas de 1px, radio 2px, cero sombra difusa. Vive fuera de las
   .page, así que está disponible desde cualquier ruta. */
.alma-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:600;width:min(420px,100vw);
  display:flex;flex-direction:column;
  background:var(--surface);color:var(--ink);
  border-left:1px solid var(--bd);
  transform:translateX(100%);visibility:hidden;
  transition:transform .28s var(--ease),visibility .28s var(--ease);
}
.alma-panel.open{transform:translateX(0);visibility:visible}
/* Con el panel abierto (aria-modal) la página de atrás no se desplaza. */
body.alma-lock{overflow:hidden}
body.alma-lock .alma-fab,body.alma-lock .wa{display:none}
.alma-scrim{
  position:fixed;inset:0;z-index:599;background:rgba(14,33,24,.34);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.alma-scrim.open{opacity:1;visibility:visible}
.alma-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 16px;border-bottom:1px solid var(--bd);
}
.alma-panel-t{
  display:block;font-size:var(--fs-15);font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.alma-panel-sub{
  display:block;margin-top:3px;font-size:var(--fs-12);line-height:1.4;color:var(--mu);
}
.alma-x{
  flex:0 0 auto;width:30px;height:30px;border:1px solid var(--bd);border-radius:50%;
  background:transparent;color:var(--mu);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;
}
.alma-x:hover{color:var(--ink);border-color:var(--ink-soft)}
#alma-msgs{
  flex:1;min-height:0;overflow-y:auto;padding:20px 22px;
  display:flex;flex-direction:column;gap:16px;
}
.amsg{max-width:88%;font-size:var(--fs-body);line-height:var(--lh-body)}
.amsg.bot{align-self:flex-start;color:var(--ink)}
/* La respuesta del visitante se marca con una regla, no con un globo de color. */
.amsg.you{
  align-self:flex-end;text-align:right;color:var(--ink-soft);
  border-right:2px solid var(--acc);padding-right:12px;
}
.amsg p{margin:0 0 8px}.amsg p:last-child{margin:0}
.alma-in{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--bd)}
#alma-input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--bd);color:var(--ink);
  border-radius:var(--r);padding:11px 13px;font-size:var(--fs-15);
}
#alma-input::placeholder{color:var(--mu)}
#alma-input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.alma-send{
  padding:0 16px;border-radius:999px;background:var(--g);color:var(--on-dark);
  font-weight:600;font-size:var(--fs-14);transition:background .15s;
}
.alma-send:hover{background:var(--gm)}
html[data-theme="dark"] .alma-send{background:var(--acc);color:#0F1613}
.alma-note{
  margin:0;padding:0 22px 16px;font-size:var(--fs-12);line-height:1.45;color:var(--mu);
}
.alma-panel .alma-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px}
@media(max-width:640px){
  .alma-panel{width:100vw;border-left:0}
}
@media(prefers-reduced-motion:reduce){
  .alma-panel,.alma-scrim{transition:none}
}

/* ===== forms ===== */
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--fs-13);font-weight:700;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 14px;border:1px solid var(--bd);border-radius:10px;font-family:inherit;font-size:var(--fs-16)}
/* select del form: mismo fondo/tinta que los inputs (día y noche) + flecha propia */
.field select{background-color:var(--surface);color:var(--ink);appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
/* --acc Y NO --g. Son el MISMO color de dia, token por token; de noche --acc
   se aclara y --g no se mueve. Con --g, el borde de un campo enfocado
   quedaba en 2.03:1 contra el fondo del campo y en 1.59:1 contra el borde sin
   foco: verde oscuro sobre verde oscuro. Y como aqui se quita el outline, no
   habia indicador de repuesto — de noche no se veia en que campo estabas.
   De dia no cambia nada. */
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc)}

/* ===== prose ===== */
.prose{max-width:720px;margin:0 auto}
.prose p{margin-bottom:16px;color:var(--ink-soft)}
.prose :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){margin:28px 0 10px}
.prose ul{margin:0 0 16px 20px;color:var(--ink-soft)}
.prose li{margin-bottom:6px}

/* ===== footer ===== */
footer{background:var(--ink-deep);color:var(--on-dark-3);padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px}
/* h2 y no h4: son los dos agrupadores del pie y aparecen en TODAS las rutas, asi
   que su nivel decidia el unico salto de encabezados que tenia el sitio entero.
   El tamaño no cambia — lo fija esta regla, no el nivel. */
footer h2{color:var(--on-dark);font-size:var(--fs-15);margin-bottom:14px;font-family:"Inter",sans-serif;line-height:var(--lh-tight);letter-spacing:var(--tr-heading);font-weight:700}
footer a{display:block;padding:4px 0;font-size:var(--fs-14)}
footer a:hover{color:var(--gn)}
.foot-bottom{border-top:1px solid var(--on-dark-fill-2);padding-top:20px;font-size:var(--fs-13);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ===== whatsapp ===== */
/* ===== BOTONES FLOTANTES · ALMA y WhatsApp =====
   Un PAR: misma silueta, mismo tamaño, misma sombra, misma reacción. Lo que
   los distingue es el color y el icono, no la forma — antes uno era pastilla y
   el otro círculo, y por eso no se leían como hermanos.

   La sombra va en dos capas: una cerrada que asienta el botón sobre el papel y
   otra abierta que lo levanta. La de antes era una sola, plana y teñida de
   verde al 40%, que es lo que le daba el aire de app.

   Al pasar el cursor suben 2px en vez de crecer: `scale` deforma el icono y
   delata el truco; la elevación es lo que hace un objeto físico. */
.wa,.alma-fab{
  position:fixed;right:24px;z-index:400;
  width:56px;height:56px;padding:0;
  border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--on-dark);
  box-shadow:var(--fab-shadow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.wa:hover,.alma-fab:hover{transform:translateY(-2px);box-shadow:var(--fab-shadow-hover)}
.wa:active,.alma-fab:active{transform:translateY(0);box-shadow:var(--fab-shadow)}

.wa{bottom:24px;background:var(--wa-marca)}
.wa svg{width:28px;height:28px;fill:currentColor}

.alma-fab{bottom:92px;background:var(--g)}
.alma-fab svg{width:25px;height:25px}
html[data-theme="dark"] .alma-fab{background:var(--acc);color:var(--ink-deep)}

/* La etiqueta ya no vive dentro del botón: sale al pasar el cursor o al recibir
   el foco. Así ALMA conserva su nombre —que no se adivina por el icono, a
   diferencia de WhatsApp— sin romper la simetría de los dos círculos. */
.wa span,.alma-fab span{
  position:absolute;right:calc(100% + 12px);
  white-space:nowrap;pointer-events:none;
  background:var(--ink-deep);color:var(--on-dark);
  font-family:"Inter",sans-serif;font-size:var(--fs-control);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:7px 11px;border-radius:8px;
  box-shadow:var(--shadow);
  opacity:0;transform:translateX(6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.wa:hover span,.alma-fab:hover span,
.wa:focus-visible span,.alma-fab:focus-visible span{opacity:1;transform:none}

/* ALMA lleva su nombre puesto, no escondido en el hover.
   El icono de destellos es hoy el signo convencional de «asistente», así que
   lo que falta no es decir QUÉ es sino DE QUIÉN es: sin el nombre, el botón es
   una IA genérica; con él, es ALMA. WhatsApp no lo necesita —su icono se
   reconoce solo— y conserva la etiqueta al pasar el cursor.
   Va en pastilla de superficie y no en texto suelto porque estos botones
   flotan sobre fotografía: sin fondo, el nombre se pierde según la imagen. */
.alma-fab span{
  opacity:1;transform:none;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--bd);border-radius:999px;
  box-shadow:var(--shadow);
  padding:6px 13px;letter-spacing:.1em;
}
.alma-fab:hover span{border-color:var(--g)}
html[data-theme="dark"] .alma-fab span{background:var(--surface);color:var(--ink);border-color:var(--bd)}
html[data-theme="dark"] .alma-fab:hover span{border-color:var(--acc)}
html[data-theme="dark"] .wa span,html[data-theme="dark"] .alma-fab span{background:var(--surface);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .wa,.alma-fab,.wa span,.alma-fab span{transition:none}
  .wa:hover,.alma-fab:hover{transform:none}
}

/* ===== responsive ===== */
@media(max-width:1024px){
  .nlinks{display:none}
  .burger{display:flex;align-items:center;justify-content:center}
}
@media(max-width:880px){
  .nlinks{display:none}
  .burger{display:flex;align-items:center;justify-content:center}
  .nav-mobile{display:none;position:fixed;inset:calc(78px + env(safe-area-inset-top)) 0 0 0;background:var(--surface);border-bottom:1px solid var(--bd);padding:14px 24px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:4px;z-index:199;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:12px;border-radius:8px;font-weight:600}
  .nav-mobile a:hover{background:var(--gl)}
  /* con el menú abierto, ocultar flotantes para que no tapen los ítems */
  body.menu-open .wa, body.menu-open .alma-fab{display:none!important}
  .paths,.gallery,#blog-grid{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .gal-item img{height:220px}
}
.nav-mobile{display:none}

/* ---- SVG line icons ---- */
.ic-svg{width:30px;height:30px;display:block}
.path-ic .ic-svg{width:24px;height:24px;color:var(--ic-path)}
.card .ic .ic-svg{width:24px;height:24px;color:var(--acc)}
/* ---- chips de ecosistema (usados en #hub y #gratitud) ---- */
.eco-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.eco-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--surface);font-size:var(--fs-14);font-weight:600;color:var(--ink)}
.eco-chip .ic-svg{width:18px;height:18px;color:var(--acc)}
/* ---- dark cards on navy band ---- */
.band .card-d{background:var(--on-dark-fill-2);border:1px solid var(--on-dark-fill)}
.band .card-d h3{color:var(--on-dark)}
.band .card-d p{color:var(--on-dark-3)}
/* ---- CTA box ---- */
.cta-box{margin-top:34px;text-align:center;background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl);padding:34px}
.cta-box :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){font-size:22px;margin-bottom:8px}
.cta-box p{color:var(--mu);max-width:560px;margin:0 auto 18px}
/* ---- 4-col grid ---- */
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.g4{grid-template-columns:1fr}}

.card-link{display:inline-block;margin-top:14px;color:var(--acc);font-weight:700;font-size:var(--fs-14);text-decoration:none}
.card-link:hover{text-decoration:underline}

#m-ic{display:inline-flex;align-items:center}
#m-ic .ic-svg{width:30px;height:30px;color:var(--acc)}

.origen-img{width:100%;border-radius:var(--rl);aspect-ratio:16/9;max-height:520px;object-fit:cover;object-position:50% 45%;display:block}

@media(max-width:600px){.g2,.g3{grid-template-columns:1fr}}

#page-origen .steps{position:relative}
#page-origen .steps::before{content:"";position:absolute;left:20px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--g) 0%,var(--bd) 100%)}
#page-origen .step{position:relative}
@supports (animation-timeline: view()){
  #page-origen .step{animation:msIn both;animation-timeline:view();animation-range:entry 5% entry 45%}
}
@keyframes msIn{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#page-origen .step{animation:none!important}}

.ic-svg path,.ic-svg circle,.ic-svg rect,.ic-svg line,.ic-svg polyline,.ic-svg polygon{stroke-dasharray:1;stroke-dashoffset:0}
.card:hover .ic-svg *,.path:hover .ic-svg *{animation:draw .8s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.routes{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,320px);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 4px 20px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.routes>.card{scroll-snap-align:start;position:relative}
.routes>.card:not(:last-child)::after{content:"";position:absolute;top:50%;right:-20px;width:20px;height:2px;background:var(--bd)}
.hero-impact{display:inline-flex;align-items:center;gap:8px;margin:-16px 0 30px;padding:8px 16px;border-radius:999px;background:var(--on-dark-fill);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:var(--fs-14);color:var(--on-dark-2);border:1px solid var(--on-dark-line)}
.hero-impact b{color:var(--gn);font-weight:700}
@media (prefers-reduced-motion:reduce){.card:hover .ic-svg *,.path:hover .ic-svg *{animation:none}.stats .stat:hover{transform:none}}
.btn-nav{background:var(--g);color:var(--on-dark);padding:9px 20px;border-radius:999px;font-weight:700;font-size:var(--fs-14);white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-nav:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,92,56,.35)}
@media (max-width:600px){.btn-nav{padding:8px 14px;font-size:var(--fs-13)}}
.mnav-g{display:block;font-size:var(--fs-11);letter-spacing:1.2px;text-transform:uppercase;color:var(--acc);font-weight:800;margin:16px 0 4px}
.pcard{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl);padding:16px 18px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,92,56,.12)}
.pcard-logo{width:56px;height:56px;object-fit:contain;background:var(--logo-bg);padding:5px;box-sizing:border-box;border-radius:12px;border:1px solid var(--bd);flex:0 0 auto}
.pcard-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pcard-body b{font-family:"Inter",sans-serif;font-weight:700;font-size:var(--fs-16);color:var(--ink);line-height:1.25}
.pcard-body .mu{font-size:var(--fs-13)}
.pcard-go{margin-left:auto;color:var(--acc);font-weight:700;transition:transform .25s var(--ease)}
.pcard:hover .pcard-go{transform:translateX(4px)}
/* tarjeta de empresa aliada: reciprocidad + modalidad (acento ámbar = "empresa" en la red) */
.pcard-emp{align-items:flex-start}
.emp-mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.emp-mod{font-size:var(--fs-12);font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;background:rgba(180,105,14,.10);color:#8a4f0b;border:1px solid rgba(180,105,14,.28)}
.emp-recips{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.emp-recip{font-size:var(--fs-13);color:var(--ink-soft);line-height:1.35}
.emp-recip i{font-style:normal;font-weight:700;color:var(--acc);margin-right:4px}
html[data-theme="dark"] .emp-mod{background:rgba(224,150,50,.14);color:#e6a44e;border-color:rgba(224,150,50,.35)}
.ficha-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px}
.ficha-logo{width:110px;height:110px;object-fit:contain;padding:10px;box-sizing:border-box;border-radius:18px;border:1px solid var(--bd);background:var(--logo-bg)}
.ficha-name{font-size:clamp(26px,4vw,40px);margin:0 0 8px}
/* descripción propia de la fundación, bajo el nombre */
.ficha-tagline{font-size:var(--fs-17);line-height:1.45;color:var(--ink-soft);margin:0 0 12px;max-width:54ch}
.ficha-impact{border-left:4px solid var(--g)}
.ficha-cta-btn{display:inline-block;margin-top:14px;background:var(--g);color:var(--on-dark);padding:12px 26px;border-radius:999px;font-weight:700}
.cta-box{position:relative;overflow:hidden}
.cta-box>*{position:relative;z-index:1}
.cta-box::before{content:"";position:absolute;inset:-40%;z-index:0;background:radial-gradient(42% 55% at 28% 28%,rgba(31,92,56,.08),transparent 62%),radial-gradient(34% 48% at 74% 68%,rgba(180,105,14,.05),transparent 62%);pointer-events:none}

/* ---------- Galería de ficha (curada, auto-alojada) ---------- */
.gal-strip{display:flex;gap:14px;overflow-x:auto;padding:16px 2px 18px;margin-top:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gal-item{flex:0 0 auto;width:min(300px,72vw);aspect-ratio:4/3;padding:0;border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;background:var(--surface);cursor:zoom-in;scroll-snap-align:start;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.gal-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-empty{margin-top:14px;max-width:70ch}
.gal-lb{border:none;border-radius:var(--rl);padding:0;background:transparent;max-width:min(960px,92vw);overflow:visible;margin:auto;width:fit-content;position:fixed;inset:0}
.gal-lb::backdrop{background:rgba(14,33,24,.82);backdrop-filter:blur(3px)}
.gal-lb-fig{margin:0;background:var(--surface);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-lg)}
.gal-lb-fig img{display:block;max-width:100%;max-height:76vh;margin:0 auto}
.gal-lb-fig figcaption{padding:12px 18px;font-size:var(--fs-14)}
.gal-lb-fig figcaption:empty{display:none}
.gal-lb-btn{position:absolute;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--bd);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);z-index:2}
.gal-lb-btn .ic-svg{width:22px;height:22px}
.gal-lb-x{top:-16px;right:-16px}
.gal-lb-prev{left:-16px;top:50%;transform:translateY(-50%)}
.gal-lb-next{right:-16px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .gal-lb-x{top:-52px;right:2px}
  .gal-lb-prev{left:2px;top:auto;bottom:-56px;transform:none}
  .gal-lb-next{right:2px;top:auto;bottom:-56px;transform:none}
}
.ficha-share{background:none;border:none;cursor:pointer;font:inherit;padding:0;margin-left:18px}

/* Frase de la fundación (profile.quote, llega con el cuestionario) */
.ficha-quote{margin:26px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--g);font-family:"Fraunces",serif;font-size:21px;line-height:1.4;color:var(--ink);max-width:56ch}

/* ---------- Modo noche (tokens del handoff: #0F1613/#1A231D/#EFEDE6/#6FB08D) ----------
   Activado por data-theme="dark" en <html>. El modo por defecto es automático
   según la hora local (día 6:00–18:00); ver theme en app.js. */
html[data-theme="dark"]{
  --bg:#0F1613;--surface:#1A231D;--surface-2:#141C17;
  --ink:#EFEDE6;--ink-soft:#C9CFC6;--mu:#9AA79D;
  --bd:#2A362E;--bds:#222C25;
  --acc:#6FB08D;--acc-2:#7FBD9B;
  --gl:#1D2F24;--gd:#0C1710;
  --ink-deep:#111B15;
  /* Más claro y desaturado que el de día: el rojo institucional sobre fondo
     oscuro se apaga y deja de leerse. */
  --err:#E58E76;
  /* De noche si se aclara, como --amber y --err. Los tres son estados y los
     tres tienen que leerse igual de bien; el de exito era el unico que no. */
  --ok:#6FB08D;
  --amber:#E8A24C;--amberl:#33260F;
  --nav-bg:rgba(15,22,19,.94);
  --skel-a:#1A231D;--skel-b:#222C25;
  --shadow:0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5);
  /* En noche la sombra no puede ser «más oscuro»: el fondo ya lo es. Se cierra
     y se apoya en un halo tenue de luz para que el botón siga despegando. */
  --fab-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.45);
  --fab-shadow-hover:0 2px 6px rgba(0,0,0,.55), 0 14px 32px rgba(0,0,0,.55);
}
html[data-theme="dark"] .hero-bg img{filter:brightness(.8)}
html[data-theme="dark"] .cur-toggle button.on{color:#0E2118}

/* Transición suave al cambiar de tema (respetando reduced-motion global) */
html.theming, html.theming body, html.theming nav, html.theming .card,
html.theming .stats .stat, html.theming .pay-panel, html.theming footer,
html.theming .band, html.theming section, html.theming .nav-mobile{
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)!important
}

/* ---------- Toggle día/noche (reloj) ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;padding:4px 2px;color:var(--ink)}
.tt-track{position:relative;width:46px;height:24px;border-radius:999px;background:var(--bg2,rgba(0,0,0,.08));border:1px solid var(--bd);display:flex;align-items:center;transition:background .3s}
.tt-track svg{width:14px;height:14px;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s;pointer-events:none}
.tt-sun{left:6px;color:#E8A33D;opacity:1}
.tt-moon{right:6px;color:#6FB08D;opacity:.35}
.tt-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--on-dark);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tt-auto{display:none}
.theme-toggle[data-mode="auto"] .tt-knob::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--acc)}
/* estado oscuro: perilla a la derecha, luna activa */
html[data-theme="dark"] .tt-track{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .tt-knob{transform:translateX(22px)}
html[data-theme="dark"] .tt-sun{opacity:.35}
html[data-theme="dark"] .tt-moon{opacity:1}
/* modo auto: muestra la etiqueta "auto" y un borde de acento sutil */
.theme-toggle[data-mode="auto"] .tt-auto{opacity:1}
.theme-toggle[data-mode="auto"] .tt-track{border-color:var(--acc)}

/* ---------- Foto-banner editorial (pausa fotográfica) ---------- */
.foto-banner{position:relative;padding:0;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden}
.foto-banner picture,.foto-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,33,24,0) 38%,rgba(14,33,24,.72) 100%)}
.fb-in{position:relative;z-index:1;padding:0 24px 46px;max-width:var(--maxw);margin:0 auto;width:100%}
.fb-ey{display:block;font-size:var(--fs-12);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gn);margin-bottom:10px}
.fb-quote{font-family:"Fraunces",serif;font-style:italic;font-weight:450;font-size:clamp(26px,4.2vw,44px);line-height:1.15;color:var(--on-dark);max-width:18ch;margin:0 0 14px;letter-spacing:-.01em}
.fb-link{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-2);font-weight:700;font-size:var(--fs-15);border-bottom:1.5px solid var(--on-dark-4);padding-bottom:2px;transition:border-color .15s,color .15s}
.fb-link:hover{color:var(--gn);border-color:var(--gn)}
@media(max-width:640px){.foto-banner{min-height:68vh}.fb-in{padding-bottom:38px}}

/* ---------- disparador de ALMA ----------
   Rectangular, 2px de radio, borde de 1px. Sin píldora, sin sombra difusa,
   sin brillo, sin rebote al hover: se comporta como una pestaña de archivo. */
/* La silueta de ALMA se define arriba, junto a la de WhatsApp: son un par. */
html[data-theme="dark"] .alma-fab:hover{background:var(--acc-2);border-color:var(--acc-2)}

/* ---------- barra de recorrido (0 a 100) ---------- */
/* El Recorrido — riel de progreso sutil de la guía de 12 paradas (v5) */
.journey{margin-top:40px;border-top:1px solid var(--bd);padding:15px 0 2px;display:flex;flex-direction:column;gap:8px}
.j-meta{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mu)}
.j-meta b{color:var(--acc)}
.j-track{display:flex;gap:4px}
.j-seg{flex:1;height:2px;border-radius:2px;background:var(--bd);transition:background .35s var(--ease)}
.j-seg.on{background:var(--acc)}
.j-links{display:flex;align-items:center;gap:16px}
.j-prev{font-size:var(--fs-13);font-weight:600;color:var(--mu);transition:color .15s}
.j-prev:hover{color:var(--ink)}
.j-next{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);font-weight:700;color:var(--acc);transition:gap .15s var(--ease)}
.j-next:hover{gap:9px}
.j-done{margin-left:auto;font-size:var(--fs-13);font-weight:700;color:var(--acc)}
@media(prefers-reduced-motion:reduce){.j-seg,.j-next{transition:none}}

/* ---------- ImpactOS: tres bloques separados por reglas finas ----------
   Sustituye la cuadrícula de módulos. Sin tarjetas, sin sellos de "en desarrollo":
   filas de informe anual. */
.os-rows{margin-top:34px;border-top:1px solid var(--bd)}
.os-row{padding:26px 0;border-bottom:1px solid var(--bd)}
.os-row :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){font-size:var(--fs-h4);margin-bottom:8px}
.os-row p{max-width:62ch}
.os-row p + p{margin-top:10px}
/* "Ya lo estás usando": pruebas con enlace al propio sitio */
.os-uses{margin-top:18px;display:grid;gap:18px}
.os-use{padding-left:16px;border-left:2px solid var(--bd)}
.os-use b{display:block;font-size:var(--fs-16);color:var(--ink);margin-bottom:4px}
.os-use p{margin:0 0 6px;max-width:62ch;font-size:var(--fs-15)}
/* Anatomía de un registro: ledger sobrio (elemento firma de la página) */
.rec-ledger{margin-top:20px;padding:22px 24px;background:var(--surface-2);border:1px solid var(--bd);border-radius:var(--rl)}
.rec-cap{font-size:var(--fs-12);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--mu);margin:0 0 10px}
.rec-list{margin:0 0 22px}
.rec-list:last-of-type{margin-bottom:12px}
.rec-item{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--bd)}
.rec-item:last-child{border-bottom:0}
.rec-item dt{font-size:var(--fs-14);color:var(--ink-soft)}
.rec-item dd{margin:0;font-size:var(--fs-14);font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rec-note{font-size:var(--fs-13);margin:0}

/* ---------- cierres de página y "empieza aquí" ---------- */
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero-tour{display:inline-block;margin-top:22px;font-size:var(--fs-14);font-weight:700;color:var(--on-dark-2);letter-spacing:.2px;border-bottom:1px dashed var(--on-dark-4);padding-bottom:2px;transition:color .15s,border-color .15s}
.hero-tour:hover{color:var(--on-dark);border-color:var(--on-dark)}

/* ---------- logos de programas en ficha de fundación ---------- */
.prog-card{display:flex;flex-direction:column}
.prog-logo{display:flex;align-items:center;justify-content:center;height:76px;margin:-4px 0 12px;padding:10px;border-radius:12px;background:#111;border:1px solid var(--bd)}
.prog-logo img{max-height:100%;max-width:80%;object-fit:contain}
html[data-theme="dark"] .prog-logo{background:#000}

/* ---------- calculadora: selector de destino y nota ---------- */
.calc-dest{margin:2px 0 12px}
.calc-dest-lbl,.calc-cap{display:block;font-size:var(--fs-13);font-weight:700;color:var(--on-dark-2);margin-bottom:6px;letter-spacing:.2px}
.calc-select{width:100%;background:var(--on-dark-fill-2);border:1px solid var(--on-dark-line);color:var(--on-dark);border-radius:10px;padding:11px 12px;font-size:var(--fs-15);font-weight:600;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.calc-select:focus{outline:none;border-color:var(--on-dark-4)}
/* Blanco literal a propósito en optgroup/option: la lista desplegable la pinta el
   sistema operativo y no todos los navegadores resuelven var() ahí dentro. */
.calc-select optgroup{color:#0E2118;background:#fff;font-weight:800}
.calc-select option{color:#0E2118;background:#fff;font-weight:500}
.calc-note{margin-top:16px;text-align:left}
.calc-note label{display:block;font-size:var(--fs-13);font-weight:700;color:var(--on-dark-2);margin-bottom:6px}
.calc-note textarea{width:100%;background:var(--on-dark-fill-2);border:1px solid var(--on-dark-line);color:var(--on-dark);border-radius:10px;padding:10px 12px;font-size:var(--fs-14);font-family:inherit;resize:vertical;box-sizing:border-box}
.calc-note textarea::placeholder{color:var(--on-dark-4)}
.calc-note textarea:focus{outline:none;border-color:var(--on-dark-4)}
.calc-note-count{display:block;text-align:right;font-size:var(--fs-11);color:var(--on-dark-4);margin-top:4px}
/* SAFARI EN iOS HACE ZOOM al enfocar un campo con letra menor de 16px, y lo hace
   justo cuando la persona esta escribiendo en la pagina donde se pide dinero: la
   vista salta, el panel se sale del encuadre y hay que volver a buscarlo con los
   dedos. `#calc-manual` ya estaba en `--fs-16` —alguien lo supo y lo aplico solo
   ahi—; el destino (15px) y la dedicatoria (14px) se quedaron fuera.
   Solo en pantallas estrechas: en escritorio la escala se respeta tal cual. */
@media(max-width:640px){
  .calc-select,
  .calc-note textarea{font-size:var(--fs-16)}
}

/* nota legal pequeña bajo el beneficio tributario */
.calc-legal{font-size:var(--fs-11);line-height:1.5;color:var(--on-dark-4);margin:2px 0 8px;max-width:52ch}
/* `.mu` es el gris apagado del fondo PAPEL, y `.calc` es oscuro en los DOS
   temas. Un `.mu` que caiga aquí dentro queda en 2,28:1 —medido— cuando el
   mínimo es 4,5. Le pasaba a la nota de equivalencia de impacto, visible, de
   13px y en la página donde se pide dinero. Se corrige por regla y no en el
   elemento para que el próximo `.mu` que alguien ponga aquí ya nazca legible. */
.calc .mu{color:var(--on-dark-4)}
/* Zona final de la calc: el pago en línea. Vive DENTRO del panel oscuro y `.calc`
   es oscuro en los dos temas — por eso los colores van fijos y no por token de tema. */
.pay-now{margin-top:22px;padding-top:20px;border-top:1px solid var(--on-dark-fill);text-align:left}
.pay-now .ey{display:block;margin-bottom:6px;color:var(--gn)}
.pay-now-t{font-size:var(--fs-h4);margin:0 0 8px;color:var(--on-dark)}
.pay-now-p{margin:0;font-size:var(--fs-14);line-height:1.55;color:var(--on-dark-3);max-width:52ch}
.pay-now-rec{margin:14px 0 0;font-size:var(--fs-14);line-height:1.55;color:var(--on-dark-2);border-left:3px solid #E8A24C;padding-left:14px}
.pay-now-btn{margin-top:20px;width:100%;background:var(--gm);box-shadow:none}
.pay-now-btn:hover{background:#37955F}
.pay-now-btn:disabled{opacity:.6;cursor:default}
.pay-now-msg{margin:12px 0 0;font-size:var(--fs-14);color:var(--on-dark-3)}
.pay-now-msg.err{color:#f0857a}

/* skip link accesible: invisible hasta recibir foco de teclado */
/* oculto visualmente pero disponible para lectores de pantalla */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--g);color:var(--on-dark);font-weight:700;padding:10px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
main.page:focus{outline:none}

/* nav compacto en anchos intermedios: evita quiebres y desproporción */
@media(max-width:1360px){
  .nlink{padding:8px 8px;font-size:var(--fs-14)}
  .nlinks{gap:2px}
  .nav-actions{gap:8px}
  .btn-nav{padding:8px 16px}
}

/* ============ sección HUB en inicio (protagonismo del valor diferencial) ============ */
.home-hub{background:linear-gradient(180deg,var(--gd) 0%,var(--g) 100%);color:var(--on-dark)}
.home-hub .ey{color:var(--gn)}
.home-hub .h-sec{color:var(--on-dark);max-width:20ch}
.home-hub .lead{color:var(--on-dark-2);max-width:60ch}
.hub-flow{display:flex;align-items:stretch;gap:12px;margin:34px 0 30px;flex-wrap:wrap}
.hf-step{flex:1;min-width:200px;background:var(--on-dark-fill-2);border:1px solid var(--on-dark-fill);border-radius:16px;padding:22px 18px;transition:transform .25s,background .25s}
.hf-step:hover{transform:translateY(-4px);background:var(--on-dark-fill-2)}
.hf-hub{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4)}
.hf-ev{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.3)}
.hf-ic{width:44px;height:44px;border-radius:12px;background:var(--on-dark-fill-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--gn)}
.hf-ic svg{width:24px;height:24px}
.hf-step h3{font-size:var(--fs-16);font-weight:700;margin:0 0 6px;color:var(--on-dark)}
.hf-step p{font-size:var(--fs-14);line-height:1.5;color:var(--on-dark-2);margin:0}
.hf-arrow{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--gn);flex:0 0 auto;font-weight:700}
.hf-back{color:var(--on-dark-4)}
.home-hub .btn-g{background:var(--gn);color:var(--gd);font-weight:700}
.home-hub .btn-g:hover{background:var(--on-dark)}
@media(max-width:860px){
  .hub-flow{flex-direction:column;gap:8px}
  .hf-arrow{transform:rotate(90deg);padding:2px 0}
  .hf-step{min-width:0}
}

/* ============ estados de foco visibles (accesibilidad de teclado) ============ */
a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gn);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.btn-g:focus-visible,.btn-o:focus-visible{outline-offset:3px}
.theme-toggle:focus-visible{outline:3px solid var(--gn);outline-offset:3px}
.nlink:focus-visible{outline:2px solid var(--gn);outline-offset:2px}

/* ============ página 404 con marca ============ */
.e404-sec{min-height:66vh;display:flex;align-items:center}
.e404-wrap{text-align:center;max-width:52ch;margin:0 auto}
.e404-code{font-family:var(--font-display,inherit);font-size:clamp(90px,18vw,180px);font-weight:800;line-height:1;color:var(--gl);letter-spacing:-2px}
html[data-theme="dark"] .e404-code{color:var(--gd)}
.e404-title{font-size:clamp(26px,4vw,38px);margin:8px 0 14px}
.e404-lead{color:var(--ink-soft);font-size:var(--fs-16);line-height:1.6;margin:0 auto 26px}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* chips de sugerencia de ALMA (migrado de estilos inline) */
/* Píldora, como el resto de chips del sitio (.tag, .bc-level). */
.alma-chip{padding:7px 12px;border:1px solid var(--bd);border-radius:999px;background:transparent;font-size:var(--fs-13);font-weight:500;color:var(--ink-soft);cursor:pointer;text-align:left;transition:color .15s,border-color .15s}
.alma-chip:hover{color:var(--ink);border-color:var(--ink-soft)}

/* ===== flotantes en móvil: ALMA y WhatsApp no deben chocar ni tapar contenido ===== */
@media(max-width:768px){
  /* Los dos círculos bajan a 52px y se separan a lados opuestos: apilados en la
     misma esquina taparían contenido en una pantalla de teléfono. */
  .wa{bottom:18px;right:18px;width:52px;height:52px}
  .wa svg{width:25px;height:25px}
  .alma-fab{bottom:18px;left:18px;right:auto;width:52px;height:52px}
  .alma-fab svg{width:23px;height:23px}
  /* Sin etiqueta: en táctil no hay hover que la dispare y estorbaría. */
  .wa span,.alma-fab span{display:none}
}

/* ============ Rastrea tu donación ============ */
.track-box{max-width:640px;margin-top:26px}
/* PUEDE ENVOLVER, Y EL CAMPO PUEDE ENCOGER. Los dos hacen falta: «flex:1» no
   sirve de nada mientras el item conserve «min-width:auto», que es el valor por
   omision y que le pone de suelo el ancho intrinseco del input —veinte
   caracteres monoespaciados mas relleno—. Con el boton en «flex:0 0 auto», la
   fila no podia encoger y el borde derecho se quedaba clavado en 377 px:
   2 px fuera a 375, 18 a 360 y 57 a 320. Medido en produccion.
   Esta es la pantalla a la que llega un donante desde su recibo, y en un
   telefono de 320 el boton de buscar quedaba medio fuera. */
.track-search{display:flex;gap:10px;flex-wrap:wrap}
.track-search input{flex:1 1 12rem;min-width:0;padding:14px 16px;border:1.5px solid var(--bd);border-radius:12px;font-size:var(--fs-16);font-family:var(--mono,monospace);letter-spacing:.5px;background:var(--surface);color:var(--ink);text-transform:uppercase}
.track-search input:focus{outline:none;border-color:var(--acc)}
.track-search .btn{flex:0 0 auto;white-space:nowrap}
.track-noguide{margin-top:14px;background:none;border:none;color:var(--g);font-weight:600;font-size:var(--fs-14);cursor:pointer;text-decoration:underline;padding:4px 0}
html[data-theme="dark"] .track-noguide{color:var(--gn)}
.track-noguide:hover{opacity:.75}
.track-result{margin-top:24px;max-width:640px}
.track-loading{color:var(--ink-soft);font-size:var(--fs-15)}
.track-error,.track-nf p{color:var(--ink-soft)}
.track-card{background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:24px}
.track-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.track-guide{display:block;font-family:var(--mono,monospace);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:.5px}
.track-date{display:block;font-size:var(--fs-13);color:var(--mu);margin-top:2px}
.track-badge{font-size:var(--fs-12);font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.track-badge-recibida{background:var(--gl);color:var(--gd)}
/* DE NOCHE, TINTA CLARA. `--gl` se oscurece de noche (#E8F5EC → #1D2F24) y
   `--gd` es casi negro en los dos temas, asi que esta insignia quedaba a 1.30:1
   — tinta oscura sobre verde oscuro, ilegible. Es la trampa de `--gl` que ya
   esta documentada, y esta insignia es la unica de las tres que usa tokens: las
   otras dos (`en_distribucion` y `entregada`) se escribieron con hex claros y
   por eso sobrevivieron al modo noche.
   Medido en la pagina real, modo oscuro: #0C1710 sobre #1D2F24. `--gn` es el
   token que el sistema define para esto — verde que se aclara lo justo sobre
   superficie oscura — y sirve para las dos marcas. */
html[data-theme="dark"] .track-badge-recibida{color:var(--gn)}
.track-badge-en_distribucion{background:#FEF3C7;color:#92400E}
.track-badge-entregada{background:#D1FAE5;color:#065F46}
/* línea de tiempo */
.track-timeline{display:flex;justify-content:space-between;position:relative;margin:8px 0 20px}
.track-timeline::before{content:"";position:absolute;top:9px;left:8%;right:8%;height:2px;background:var(--bd);z-index:0}
.tl-step{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;flex:1}
.tl-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--bd);background:var(--surface);transition:all .3s}
.tl-step.done .tl-dot{background:var(--g);border-color:var(--g)}
.tl-step.current .tl-dot{background:var(--gn);border-color:var(--g);box-shadow:0 0 0 4px var(--gl)}
.tl-label{font-size:var(--fs-13);color:var(--mu);text-align:center;font-weight:600}
.tl-step.done .tl-label,.tl-step.current .tl-label{color:var(--ink)}
.track-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-14);color:var(--ink-soft);padding-top:16px;border-top:1px solid var(--bd)}
.track-ev{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px;background:var(--gl);border-radius:12px}
.track-ev-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--g);color:var(--on-dark);display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:700}
.track-ev p{margin:2px 0 0;font-size:var(--fs-14);color:var(--ink-soft)}
.track-foot{margin-top:16px;font-size:var(--fs-13);color:var(--mu);line-height:1.5}
.track-noguide-box{margin-top:24px;max-width:520px;background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:24px}
.track-noguide-box :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){margin:0 0 8px}
.track-noguide-box p{color:var(--ink-soft);font-size:var(--fs-14);margin:0 0 16px}

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

.track-cta{margin-top:24px;background:var(--gl);border-radius:16px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.track-cta :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){margin:0 0 4px;color:var(--gd)}
html[data-theme="dark"] .track-cta :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){color:var(--ink)}
.track-cta p{margin:0;font-size:var(--fs-14);color:var(--ink-soft);max-width:46ch}
.track-cta .btn{flex:0 0 auto}

/* ============ contadores en vivo ============ */
.live-stats{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.live-stat{flex:1;min-width:150px;background:var(--on-dark-fill-2);border:1px solid var(--on-dark-fill);border-radius:14px;padding:20px}
.live-num{font-size:40px;font-weight:800;line-height:1;color:var(--gn);font-family:var(--font-display,inherit)}
.live-track{font-size:28px;letter-spacing:1px}
.live-lab{font-size:var(--fs-13);color:var(--on-dark-3);margin-top:8px;font-weight:600}
.live-note{margin-top:14px;font-size:var(--fs-13);color:var(--on-dark-4);max-width:60ch}
@media(max-width:600px){.live-stat{min-width:0;flex:1 1 100%}}

/* ============ formulario "Quiero ser aliado" ============ */
.ally-form{max-width:760px;margin-top:28px}
.ally-sec{font-size:var(--fs-16);font-weight:700;margin:28px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.ally-sec:first-child{margin-top:0}
.ally-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ally-wide{grid-column:1 / -1}
.ally-form .field{display:flex;flex-direction:column;gap:6px}
.ally-form label{font-size:var(--fs-13);font-weight:600;color:var(--ink-soft)}
/* `url` estaba fuera de la lista y el campo "Sitio web" quedaba con el borde de
   1px del estilo genérico, medio punto más fino que sus vecinos. */
.ally-form input[type=text],.ally-form input[type=email],.ally-form input[type=tel],.ally-form input[type=url]{padding:11px 13px;border:1.5px solid var(--bd);border-radius:10px;font-size:var(--fs-16);background:var(--surface);color:var(--ink)}
.ally-form input:focus{outline:none;border-color:var(--acc)}
.ally-form textarea{width:100%;padding:11px 13px;border:1.5px solid var(--bd);border-radius:10px;font-size:var(--fs-16);font-family:inherit;background:var(--surface);color:var(--ink);resize:vertical;min-height:96px;box-sizing:border-box}
.ally-form textarea:focus{outline:none;border-color:var(--acc)}
.ally-mods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* LAS DOS REGLAS QUE EVITAN QUE EL SITIO SE ARRASTRE DE LADO EN UN TELEFONO
   PEQUEÑO. Las dos son la misma historia contada de dos maneras.

   1) Un item de rejilla conserva «min-width:auto», asi que su suelo es el ancho
      minimo de su contenido. En «Contacto» eso era el ancho intrinseco de un
      input —veinte caracteres, que es el valor por omision de `size`—, y la
      columna calculaba 301 px dentro de una rejilla de 272. Medido a 320 px.

   2) Un correo o una URL no tienen donde partirse, asi que fijan un suelo que
      ningun ancestro puede bajar. «privacidad@thegiveandgrowproject.org» sacaba
      35 px la Politica de Privacidad, y el enlace de Wompi 14 px la Brigada.
      Al enlace le hacen falta las DOS: «min-width:0» para que pueda encoger
      cuando es item flex —el de Wompi lo es— y «break-word» para partir la
      cadena una vez tiene sitio. «break-word» y no «anywhere» a proposito:
      «anywhere» parte por cualquier punto y afea el texto normal. */
.grid > *{min-width:0}
a{min-width:0;overflow-wrap:break-word}

.ally-check{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1.5px solid var(--bd);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.ally-check:hover{border-color:var(--gm)}
/* ===== casillas de verificación =====
   Una casilla nativa no acepta `border-radius`: el navegador la dibuja él y
   `accent-color` solo le cambia el relleno. Para redondearla hay que apagar el
   dibujo del sistema (`appearance:none`) y componerla: el cuadro es el propio
   input y el check es su `::before`, recortado con `clip-path`.

   Sigue siendo un `<input type=checkbox>` de verdad, así que conserva el
   teclado, el estado para lectores de pantalla y el envío del formulario. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;width:19px;height:19px;margin:0;
  /* `--mu` y no `--bd`: el borde de una casilla NO es decorativo, es el límite
     de un control, y WCAG pide 3:1 para eso. Con `--bd` —el borde de tarjeta
     del sitio— la casilla sin marcar daba 1.41:1 y casi no se veía. La nativa
     no tenía el problema porque la dibujaba el sistema operativo. */
  border:1.5px solid var(--mu);border-radius:6px;
  background:var(--surface);
  display:grid;place-content:center;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
input[type=checkbox]::before{
  content:"";width:11px;height:11px;
  background:var(--on-dark);
  clip-path:polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 68%);
  transform:scale(0);
  transition:transform .13s var(--ease);
}
input[type=checkbox]:checked{background:var(--g);border-color:var(--g)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:hover:not(:checked){border-color:var(--gm)}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
/* Explícito y no heredado de la regla global: al apagar `appearance` se pierde
   también el anillo de foco que dibujaba el sistema, y una casilla sin foco
   visible deja el formulario inservible con el teclado. */
input[type=checkbox]:focus-visible{outline:3px solid var(--gm);outline-offset:2px}
html[data-theme="dark"] input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
html[data-theme="dark"] input[type=checkbox]::before{background:var(--ink-deep)}
@media(prefers-reduced-motion:reduce){input[type=checkbox],input[type=checkbox]::before{transition:none}}

.ally-check input{margin-top:2px}
/* MISMO CASO QUE «.track-search»: este span es item flex y conserva
   «min-width:auto», asi que su suelo es el ancho de su contenido mas largo
   sin partir — que aqui es el correo de privacidad—. A 320 px el span media
   255 donde cabian 220 y se salia de la pantalla. Las dos propiedades hacen
   falta: sin «min-width:0» no encoge, y sin poder partir el correo sigue
   saliendose. Afecta a la casilla de Ley 1581 de los ocho formularios. */
.ally-check span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:break-word}
.ally-check b{font-size:var(--fs-15);color:var(--ink)}
.ally-check small{font-size:var(--fs-13);color:var(--mu);line-height:1.4}
.ally-cond{margin-top:8px;padding:18px;background:var(--gl);border-radius:14px}
.ally-cond .ally-sec{margin-top:0;border-color:rgba(31,92,56,.2)}
.ally-auts{display:flex;flex-direction:column;gap:10px}
.ally-auts .ally-check span{font-size:var(--fs-14);color:var(--ink-soft);line-height:1.45}
.ally-submit{margin-top:24px;width:100%;padding:15px}
.ally-msg{margin-top:14px;font-size:var(--fs-15);font-weight:600;text-align:center}
.ally-legal{margin-top:14px;font-size:var(--fs-13);color:var(--mu);line-height:1.5;text-align:center}
@media(max-width:640px){.ally-grid,.ally-mods{grid-template-columns:1fr}}

/* ============ Programa de Gratitud: tarjetas de comercios aliados ============ */
.grat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:26px}
.grat-card{background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:22px;transition:transform .2s,box-shadow .2s}
.grat-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.grat-card-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.grat-logo{width:56px;height:56px;border-radius:12px;object-fit:contain;background:var(--logo-bg);border:1px solid var(--bd);flex:0 0 auto}
.grat-logo-ph{display:flex;align-items:center;justify-content:center;background:var(--gl);color:var(--g);font-size:24px;font-weight:800}
.grat-card-head h3{margin:0;font-size:var(--fs-17)}
.grat-card-head h3 a{color:var(--ink);text-decoration:none}
.grat-card-head h3 a:hover{color:var(--g);text-decoration:underline}
/* `--gl` tambien cambia de valor en noche (#1D2F24): la inicial del comercio sin
   logo quedaba en verde oscuro sobre verde oscuro, 1.78:1. Y el hover del nombre
   apagaba el enlace justo al pasar por encima — dos estados que el barrido del
   navegador no alcanza a ver: uno pide un comercio sin logo, el otro pide el raton. */
html[data-theme="dark"] .grat-logo-ph{color:var(--gn)}
html[data-theme="dark"] .grat-card-head h3 a:hover{color:var(--gn)}
.grat-cat{font-size:var(--fs-13);color:var(--mu);font-weight:600}
.grat-benefit{font-size:var(--fs-15);color:var(--ink);font-weight:600;line-height:1.4;margin:0 0 14px;padding:12px 14px;background:var(--gl);border-radius:10px}
.grat-meta{margin:0;display:flex;flex-direction:column;gap:8px}
.grat-meta div{display:flex;flex-direction:column;gap:1px}
.grat-meta dt{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mu)}
.grat-meta dd{margin:0;font-size:var(--fs-14);color:var(--ink-soft);line-height:1.4}
/* Cupón institucional de beneficio (ficha de comercio) — elemento firma */
.benefit-coupon{position:relative;margin-top:26px;border:1.5px solid var(--bd);border-radius:16px;background:var(--surface);overflow:hidden}
.benefit-coupon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g)}
.bc-main{padding:28px 30px 22px 34px}
.bc-eyebrow{display:block;font-size:var(--fs-12);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.bc-benefit{font-family:var(--font-display,inherit);font-size:clamp(21px,3.4vw,30px);line-height:1.16;font-weight:700;color:var(--ink);margin:0}
.bc-level{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 15px;border-radius:999px;background:var(--gl);color:var(--acc);font-size:var(--fs-13);font-weight:700}
.bc-level::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.bc-perf{height:0;border-top:2px dashed var(--bd);margin:0 30px 0 34px}
.bc-terms{margin:0;padding:22px 30px 26px 34px;display:grid;gap:16px}
.bc-terms dt{font-size:var(--fs-12);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.bc-terms dd{margin:0;font-size:var(--fs-15);color:var(--ink-soft);line-height:1.5}
.com-address{margin-top:14px;font-size:var(--fs-15);color:var(--mu)}
.grat-empty{text-align:center;max-width:52ch;margin:26px auto 0;padding:32px;background:var(--cream);border:1px dashed var(--bd);border-radius:16px}
.grat-empty p{color:var(--ink-soft);margin:0 0 18px}
/* "La red ya forma" (#hub): el programa arriba, la fundación que lo ejecuta debajo */
.form-card{display:flex;flex-direction:column;gap:4px}
.form-card h3{margin:0}
.form-fund{font-size:var(--fs-13);font-weight:600;letter-spacing:.02em;color:var(--acc);margin-bottom:6px}
.form-card p{margin:0 0 12px;flex:1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.form-card .card-link{margin-top:auto}
.form-mira{max-width:70ch;margin:22px 0 0;font-size:var(--fs-15);line-height:1.6}

/* ===== #voluntariado ===== */
/* lista de cuidado: reglas finas, sin viñetas decorativas */
.vol-care{list-style:none;margin:24px 0 0;padding:0;max-width:74ch;border-top:1px solid var(--bd)}
.vol-care li{padding:14px 0 14px 22px;border-bottom:1px solid var(--bd);color:var(--ink-soft);line-height:1.55;position:relative}
.vol-care li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:1px;background:var(--g)}

/* explicación del método: objetivo técnico, subtítulos y prosa */
.mira-obj{margin:10px 0 0;max-width:70ch;font-size:var(--fs-15);color:var(--mu);border-left:3px solid var(--bd);padding-left:14px}
.mira-sub{margin:38px 0 10px;font-size:var(--fs-h4)}
.mira-prose{max-width:70ch;color:var(--ink-soft);line-height:1.65;margin:0 0 12px}
.mira-teo{max-width:70ch;font-size:var(--fs-14);line-height:1.55;margin:14px 0 0}

/* la sigla, letra por letra: la letra en display, la función al lado */
.mira-sigla{margin-top:18px;max-width:76ch;border-top:1px solid var(--bd)}
.mira-sig{display:grid;grid-template-columns:auto 1fr;gap:2px 20px;padding:18px 0;border-bottom:1px solid var(--bd)}
.mira-sig-l{grid-row:span 2;align-self:start;font-family:var(--font-display);font-size:34px;line-height:.9;font-weight:700;color:var(--g);width:1.1em;text-align:center}
html[data-theme="dark"] .mira-sig-l{color:var(--gn)}
.mira-sig-n{font-size:var(--fs-16);font-weight:700;color:var(--ink);align-self:center}
.mira-sig-p{margin:0;font-size:var(--fs-15);line-height:1.55;color:var(--ink-soft)}

/* MIRA en doble vía — elemento firma. Espina central con las 4 fases;
   ámbar = quien llega (externo), verde = quien participa (comunidad). */
.mira-flow{margin-top:26px;border-top:1px solid var(--bd)}
.mira-head,.mira-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 18px;border-bottom:1px solid var(--bd)}
.mira-head{padding:10px 0}
.mira-head span{font-size:var(--fs-11);font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.mira-hv{text-align:right;color:var(--amber)}
.mira-hp{color:var(--acc)}
.mira-row{padding:16px 0;align-items:center}
.mira-row p{margin:0;font-size:var(--fs-15);line-height:1.5;color:var(--ink-soft)}
.mira-v{text-align:right}
.mira-ph{font-family:var(--font-display);font-size:var(--fs-13);font-weight:700;color:var(--ink);white-space:nowrap;padding:7px 14px;border:1px solid var(--bd);border-radius:999px;background:var(--surface)}
.mira-cierre{margin:18px 0 0;font-size:var(--fs-15);color:var(--ink);max-width:62ch}
html[data-theme="dark"] .mira-hv{color:#e6a44e}
@media(max-width:760px){
  .mira-head{grid-template-columns:1fr 1fr}
  .mira-hph{display:none}
  .mira-hv{text-align:left}
  .mira-row{grid-template-columns:1fr 1fr;grid-template-areas:"ph ph" "v p";row-gap:8px}
  .mira-ph{grid-area:ph;justify-self:start;margin-bottom:4px}
  .mira-v{grid-area:v;text-align:left}
  .mira-p{grid-area:p}
}

/* ---------- formulario de voluntariado (Fase 3) ----------
   Reusa .ally-form, .field y .ally-check. Solo añade el grupo de niveles y sus
   dos textos de apoyo. */
.vf-set{border:0;padding:0;margin:6px 0 18px}
.vf-set legend{font-size:var(--fs-13);font-weight:700;color:var(--ink-soft);padding:0;margin-bottom:6px}
.vf-help{margin:0 0 12px;font-size:var(--fs-14);line-height:1.55;color:var(--mu);max-width:64ch}
/* El aviso de terreno lleva regla ámbar: no es una alerta, es una condición del
   programa que conviene leer antes de enviar. */
.vf-aviso{margin:14px 0 0;padding-left:14px;border-left:3px solid var(--amber);
  font-size:var(--fs-14);line-height:1.55;color:var(--ink-soft);max-width:66ch}

/* ---------- pago en línea (Fase 2): el camino principal de #donar ----------
   Bloque de papel con regla fina, no tarjeta de app. La audacia de esta página
   ya está gastada en la calculadora; esto tiene que ser tranquilo y claro. */
/* «Más allá del dinero»: hermano de las pestañas de pago, sobre fondo CLARO.
   Los chips usan el estilo base de .eco-chip — aquí no hay overrides oscuros. */
.give-extra{max-width:520px;margin:34px auto 0;padding-top:26px;border-top:1px solid var(--bd)}
.give-extra-p{font-size:var(--fs-15);line-height:1.6;color:var(--ink-soft);margin:0 auto 16px;max-width:52ch}
.give-extra .eco-row{margin-bottom:18px}
/* La transferencia baja de categoría: sigue estando, pero deja de ser el camino */
.pay-other-cap{margin:34px 0 12px;text-align:center}

/* ---------- #medicion (Fase 7): marco de medición ----------
   Sin tokens nuevos. Reusa .os-rows/.os-row, .rec-cap y .vol-care.
   Elemento firma de la página: la escalera de tres peldaños, cuyo tercer
   escalón está dibujado pero no lleno — es honestidad hecha de tipografía. */
.med-note{max-width:70ch;font-size:var(--fs-14);line-height:1.6;margin:16px 0 0}
/* el par contribución / atribución */
.med-claim{margin-top:18px;max-width:74ch;border-top:1px solid var(--bd)}
.med-cl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--bd)}
.med-cl-k{font-size:var(--fs-11);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap}
.med-cl-k.is-yes{color:var(--g)}
.med-cl-k.is-no{color:var(--mu)}
html[data-theme="dark"] .med-cl-k.is-yes{color:var(--gn)}
.med-cl-v{margin:0;font-family:"Fraunces",serif;font-style:italic;font-size:var(--fs-17);line-height:1.45;color:var(--ink)}
.med-cl-v.is-no{color:var(--mu)}
/* la escalera de tres peldaños */
.med-steps{margin-top:20px;max-width:76ch;border-top:1px solid var(--bd)}
.med-step{display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;padding:20px 0;border-bottom:1px solid var(--bd);align-items:baseline}
.med-step-n{grid-row:span 2;align-self:start;font-family:var(--font-display);font-size:32px;line-height:.95;font-weight:700;color:var(--g);width:1.1em;text-align:center}
html[data-theme="dark"] .med-step-n{color:var(--gn)}
.med-step-t{font-size:var(--fs-16);font-weight:700;color:var(--ink);align-self:center}
.med-step-p{grid-column:2/span 2;margin:0;font-size:var(--fs-15);line-height:1.6;color:var(--ink-soft);max-width:64ch}
.med-step-s{align-self:center;font-size:var(--fs-11);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap;padding:5px 11px;border-radius:999px;border:1px solid transparent}
.med-step-s.is-on{color:var(--g);background:var(--gl);border-color:var(--gl)}
.med-step-s.is-wip{color:var(--amber);background:var(--amberl);border-color:var(--amberl)}
.med-step-s.is-none{color:var(--mu);background:transparent;border:1px dashed var(--mu)}
html[data-theme="dark"] .med-step-s.is-on{color:var(--gn)}
/* el peldaño que no existe: número hueco, no relleno. El trazo va en --mu y no en
   --bd porque con --bd el glifo desaparecía en modo noche (~1.5:1) y con él el gesto. */
.med-step.is-off .med-step-n{color:transparent;-webkit-text-stroke:1px var(--mu);text-stroke:1px var(--mu)}
/* mapeo a ODS/GRI/ESG: tabla de informe, con scroll propio en móvil */
.med-tw{margin-top:22px;overflow-x:auto}
.med-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-14)}
.med-tbl th{text-align:left;font-size:var(--fs-11);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--mu);padding:0 16px 10px 0;border-bottom:1px solid var(--bd)}
.med-tbl td{padding:13px 16px 13px 0;border-bottom:1px solid var(--bd);color:var(--ink-soft);vertical-align:top;line-height:1.45}
.med-tbl td:first-child{color:var(--ink);font-weight:600}
.med-tbl tr:last-child td{border-bottom:0}

/* ============ Tabla que se apila (solo el panel interno) ============
   El acta de entrega se publica EN TERRENO, desde un celular, después de una
   jornada. Medido el 12 ago 2026 en el panel a 375px: la tabla de entregas
   tenía 633px de contenido en una ventana de 327 —306px de desplazamiento
   horizontal a ciegas— y sus tres controles («+ foto», «Publicar», «Anular»)
   quedaban FUERA de pantalla, con 26px de alto.

   `eco-stack` va solo en esa tabla y no en `.med-tbl`, porque esa misma clase
   la usa la tabla pública de medición y no es asunto de este cambio.
   `toca` sube los controles a 44px, y va como clase aparte porque `.copy` es
   también el botón «Copiar» del número de cuenta en el sitio público. */
.eco-stack .toca{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:6px 14px}
@media(max-width:700px){
  /* Sin esto, el min-width de .med-tbl seguiría forzando el desplazamiento. */
  .eco-stack{min-width:0;font-size:var(--fs-15)}
  /* La cabecera se esconde sin salir del árbol de accesibilidad. */
  .eco-stack thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);border:0}
  .eco-stack tr{display:block;padding:14px 0;border-bottom:1px solid var(--bd)}
  .eco-stack tr:last-child{border-bottom:0}
  .eco-stack td{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:12px;
    align-items:baseline;padding:4px 0;border:0}
  .eco-stack td::before{content:attr(data-label);font-size:var(--fs-11);font-weight:700;
    letter-spacing:.9px;text-transform:uppercase;color:var(--mu);line-height:1.8}
  /* La celda de acciones rompe la rejilla: los botones necesitan el ancho. */
  .eco-stack td[data-label="Acción"],.eco-stack td[data-label="Fotos"]{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
  .eco-stack td[data-label="Acción"]::before,.eco-stack td[data-label="Fotos"]::before{
    flex:0 0 9ch}
  .eco-stack .toca{min-height:44px;padding:0 18px;font-size:var(--fs-14)}
  /* El estado vacío ocupa la fila entera y no necesita etiqueta. */
  .eco-stack td[colspan]::before{content:none}
  .eco-stack td[colspan]{display:block}
}
/* plantilla de reporte: bloque con aire de documento, hermano de .rec-ledger */
.rep-doc{margin-top:24px;max-width:74ch;padding:24px 26px;background:var(--surface);border:1px solid var(--bd);border-radius:var(--rl)}
.rep-hd{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--bd)}
.rep-ttl{font-family:var(--font-display);font-size:var(--fs-15);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.rep-meta{font-size:var(--fs-13);color:var(--mu)}
.rep-grp{padding:16px 0;border-bottom:1px solid var(--bd)}
.rep-grp:last-of-type{border-bottom:0;padding-bottom:6px}
.rep-list{list-style:none;margin:0;padding:0}
.rep-list li{position:relative;padding:5px 0 5px 20px;font-size:var(--fs-15);line-height:1.5;color:var(--ink-soft)}
.rep-list li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--bd)}
.rep-note{margin:6px 0 0;padding:13px 16px;background:var(--surface-2);border-left:3px solid var(--g);border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-14);line-height:1.55;color:var(--ink-soft)}
html[data-theme="dark"] .rep-note{border-left-color:var(--acc)}
@media(max-width:640px){
  .med-step{grid-template-columns:auto 1fr;row-gap:8px}
  .med-step-s{grid-column:2;justify-self:start}
  .med-step-p{grid-column:1/span 2}
  .med-cl{grid-template-columns:1fr;row-gap:4px}
  .rep-doc{padding:20px 18px}
}

/* documento legal (#privacidad): lectura cómoda, tono institucional, día/noche */
.legal-doc{max-width:72ch;margin-top:24px}
.legal-doc h3{font-family:"Inter",sans-serif;font-size:var(--fs-17);font-weight:700;color:var(--ink);margin:30px 0 8px;letter-spacing:-.01em}
.legal-doc p{color:var(--ink-soft);line-height:1.65;margin:0 0 12px}
.legal-doc ul{margin:0 0 14px;padding-left:20px;color:var(--ink-soft);line-height:1.6}
.legal-doc li{margin:5px 0}
.legal-doc strong{color:var(--ink);font-weight:700}
.legal-doc a{color:var(--g);font-weight:600;text-decoration:underline}
html[data-theme="dark"] .legal-doc a{color:var(--gn)}
.legal-meta{font-size:var(--fs-14);color:var(--mu);border-left:3px solid var(--bd);padding-left:14px;margin:0 0 8px}
.ally-policy-link{display:inline-block;margin-top:4px;font-size:var(--fs-14);color:var(--g);font-weight:600}
html[data-theme="dark"] .ally-policy-link{color:var(--gn)}
html[data-theme="dark"] .grat-empty{background:rgba(255,255,255,.03)}

/* ============ tarjeta de comercio clickeable + ficha ============ */
.grat-card-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.grat-card-link h3{color:var(--ink)}
.grat-card-more{display:inline-block;margin-top:14px;font-size:var(--fs-13);font-weight:700;color:var(--g)}
html[data-theme="dark"] .grat-card-more{color:var(--gn)}
.grat-card-link:hover .grat-card-more{text-decoration:underline}
/* logo de comercio en la ficha: fondo claro (logos suelen ser oscuros) */
.ficha-logo-light{background:var(--logo-bg);border:1px solid var(--bd);object-fit:contain;padding:6px}
/* Mini-calculadora de impacto en ficha de fundación */
.fimp-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.fimp-q{padding:8px 16px;border-radius:999px;border:1.5px solid var(--bd);background:var(--surface);color:var(--ink-soft);font-size:var(--fs-14);font-weight:700;font-family:inherit;cursor:pointer}
.fimp-q.on{background:var(--g);border-color:var(--g);color:var(--on-dark)}
#fimp-out{margin:4px 0 0;font-size:var(--fs-16);color:var(--ink-soft);line-height:1.5}
#fimp-out b{color:var(--acc)}
/* Filtros y resumen del mapa de red */
.map-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.map-fchip{padding:8px 16px;border-radius:999px;border:1.5px solid var(--bd);background:var(--surface);color:var(--ink-soft);font-size:var(--fs-14);font-weight:700;font-family:inherit;cursor:pointer}
.map-fchip.on{background:var(--g);border-color:var(--g);color:var(--on-dark)}
.map-summary{margin:14px 0 0;font-size:var(--fs-15);color:var(--mu)}

/* LAS PILDORAS SELECCIONADAS, DE NOCHE. Las cuatro pestañas/chips que marcan lo
   elegido lo hacen rellenandose con --g, y --g no se aclara de noche: la pildora
   quedaba en 2.19 contra el fondo de su zona, por debajo del 3.0 que pide
   WCAG 1.4.11 para un indicador que no es texto.
   Y era el UNICO indicador: la tinta de la elegida y la de las demas quedan en
   1.17 entre si —las dos son claras de noche—, asi que el relleno es todo lo que
   distingue «Bancolombia» de «PayPal» en la pantalla de donar.
   Se sube a --gm, que es el mismo verde un paso mas claro: 3.45 contra el fondo
   y 5.05 para el texto blanco de dentro. La tinta no se toca, asi que el aspecto
   es el mismo un punto mas legible. De dia no cambia nada. */
html[data-theme="dark"] .pay-tab.on,
html[data-theme="dark"] .acc-tab.on,
html[data-theme="dark"] .fimp-q.on,
html[data-theme="dark"] .map-fchip.on{background:var(--gm);border-color:var(--gm)}

/* ===========================================================================
   BRIGADA DE ATENCIÓN A EMERGENCIA — página de campaña (agosto 2026)
   ===========================================================================
   Campaña, no sección permanente: cuando cierre, esta hoja se retira o se
   convierte en el registro de lo que ocurrió. Por eso vive al final del
   archivo y reutiliza los componentes que ya existen (.rec-ledger, .card,
   .rec-cap) en vez de inventar un lenguaje nuevo para algo temporal.
   =========================================================================== */

/* Aviso de portada. Una sola línea sobre el hero: es una emergencia y tiene que
   encontrarse, pero no puede convertir la home en un cartel. */
.brig-aviso{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:12px 24px;background:var(--gd);color:var(--on-dark);font-size:var(--fs-15);line-height:1.45;
  border-bottom:2px solid var(--gn);transition:background .15s}
.brig-aviso:hover{background:var(--g)}
.brig-aviso strong{font-weight:800}
.brig-aviso span{color:var(--on-dark-2)}
.brig-aviso span::after{content:" →";color:var(--gn);font-weight:700}
@media(min-width:760px){.brig-aviso{justify-content:center;padding:12px 24px}}

.brig-nota{font-size:var(--fs-14);line-height:1.6;max-width:64ch;margin-top:16px}

/* Estado de la brigada. La cuenta es el ÚNICO elemento firma de la página: una
   cifra en display, grande, y todo lo demás quieto. Reusa la caja del ledger
   (papel, regla de 1px, radio del sistema) para que no parezca un banner
   pegado encima del documento, sino la primera fila del documento. */
.brig-estado{margin-top:22px;padding:22px 24px;background:var(--surface-2);
  border:1px solid var(--bd);border-radius:var(--rl)}
.brig-cifra{font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,5.2vw,44px);line-height:1.06;letter-spacing:-.015em;margin:6px 0 0}
.brig-est-p{font-size:var(--fs-15);line-height:1.6;max-width:62ch;margin:12px 0 0;color:var(--ink-soft)}
.brig-nec-cap{margin-top:24px;padding-top:18px;border-top:1px solid var(--bd)}
.brig-nec4{display:grid;gap:16px 26px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.brig-n b{display:block;font-size:var(--fs-15);font-weight:700;letter-spacing:.01em}
.brig-n small{display:block;margin-top:4px;font-size:var(--fs-14);line-height:1.55;color:var(--mu)}

/* Manos y contactos: dos bloques hermanos, reglas finas, sin tarjetas. */
.brig-mc{display:grid;gap:26px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.brig-mc-b{padding-top:18px;border-top:2px solid var(--g)}
.brig-mc-b :is(h4,:where(.h-comp4)){font-size:var(--fs-h4);margin:0 0 10px}
.brig-mc-b p{font-size:var(--fs-15);line-height:1.65;max-width:56ch;margin:0 0 16px}

/* Ledger de sectores: misma gramática que la tabla de transparencia. */
.brig-sec{margin-top:26px}
.brig-sec .sec-fila{display:grid;grid-template-columns:1fr auto auto;gap:8px 18px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--bd)}
.brig-sec .sec-ciudad{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.01em}
.brig-sec .sec-meta{font-size:var(--fs-15);font-weight:700;font-variant-numeric:tabular-nums}
/* Ámbar solo donde falta un dato — no como color de alarma. */
.brig-sec .sec-estado{font-size:var(--fs-13);font-weight:600;color:var(--amber)}
@media(max-width:620px){
  .brig-sec .sec-fila{grid-template-columns:1fr auto}
  .brig-sec .sec-estado{grid-column:1/-1}
}

/* Categorías. El numeral cuelga y la razón va en Fraunces: es la voz humana
   dentro de un documento de logística, y por eso cambia de familia. */
.brig-cats{display:grid;gap:20px;margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.brig-cat{padding-top:18px;border-top:2px solid var(--g)}
.brig-num{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--fs-13);
  color:var(--acc);opacity:.5;letter-spacing:-.01em;margin-bottom:8px}
.brig-cat :is(h3:not(:where(.h-comp4)),:where(.h-comp3)){font-size:var(--fs-h4);margin-bottom:8px}
.brig-r{font-family:"Fraunces",serif;font-style:italic;font-size:var(--fs-17);line-height:1.4;
  color:var(--acc);margin-bottom:10px}
.brig-d{font-size:var(--fs-15);line-height:1.55;color:var(--ink-soft)}

/* Vías de aporte */
.brig-via{padding:20px 0;border-top:1px solid var(--bd)}
.brig-via-v{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.01em;margin:6px 0 8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-variant-numeric:tabular-nums}
.brig-via-v a{border-bottom:1px solid var(--bd)}
.brig-via-v a:hover{border-color:var(--acc);color:var(--acc)}
.brig-via-p{font-size:var(--fs-15);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin-bottom:14px}

/* Un acopio: nombre, dirección y cómo llegar. Sin tarjeta — regla fina a la
   izquierda, que es la gramática del resto de la página. La dirección va en
   display porque es el dato que alguien va a copiar o a leer en voz alta a un
   taxista, no un párrafo. */
.brig-acopio{padding:12px 0 12px 16px;border-left:2px solid var(--g);margin:14px 0}
.brig-acopio-n{font-size:var(--fs-13);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mu);margin:0 0 4px}
.brig-acopio-d{font-family:var(--font-display);font-weight:700;font-size:var(--fs-17);line-height:1.3;
  letter-spacing:-.005em;margin:0 0 6px}
.brig-acopio-c{font-size:var(--fs-14);font-weight:600;margin:0}
.brig-acopio-c a{color:var(--acc);border-bottom:1px solid var(--bd)}
.brig-acopio-c a:hover{border-color:var(--acc)}
.brig-acopio-aviso{margin-top:14px}
.brig-cert{margin-top:26px}

/* Reglas. Lo que NO se hace genera más confianza que cualquier promesa. */
.brig-nos{margin-top:24px}
.brig-no{padding:16px 0;border-top:1px solid var(--bd)}
.brig-no-t{font-weight:800;font-size:var(--fs-16);line-height:1.3;margin-bottom:4px}
.brig-no-d{font-size:var(--fs-15);line-height:1.55;color:var(--ink-soft)}
.brig-cierre{margin-top:28px;padding-top:20px;border-top:2px solid var(--g);
  font-family:"Fraunces",serif;font-style:italic;font-size:var(--fs-h4);color:var(--acc)}

/* ---- evidencia: entregas publicadas (Fase 6) ----
   Cada entrega es un registro, no una tarjeta de galería: encabezado con número
   de acta y fecha, el dato duro, y las fotos al final como prueba, no como
   decoración. */
.ev-lista{display:flex;flex-direction:column;gap:28px;margin-top:26px}
.ev-item{padding-top:18px;border-top:2px solid var(--g)}
.ev-cab{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-12);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mu);font-variant-numeric:tabular-nums}
.ev-num{color:var(--acc)}
.ev-sector{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.01em;margin:10px 0 0}
.ev-lugar{font-family:"Inter",sans-serif;font-weight:400;font-size:var(--fs-15);color:var(--ink-soft)}
.ev-meta{font-size:var(--fs-15);color:var(--ink-soft);margin-top:6px}
.ev-res{font-size:var(--fs-15);line-height:1.6;color:var(--ink);margin-top:10px;max-width:64ch}
.ev-fotos{display:grid;gap:10px;margin-top:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.ev-foto{display:block;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;
  background:var(--surface-2)}
.ev-foto img{width:100%;height:150px;object-fit:cover;transition:transform .2s var(--ease)}
.ev-foto:hover img{transform:scale(1.03)}
.ev-vacio{font-size:var(--fs-15);line-height:1.6;color:var(--ink-soft);max-width:60ch;margin-top:22px;
  padding-left:14px;border-left:3px solid var(--bd)}

/* Segundo contacto de acopio. El número manda y quién lo atiende va detrás, en
   voz baja: dos líneas de igual peso harían dudar a cuál escribir. */
.brig-quien{font-family:"Inter",sans-serif;font-weight:600;font-size:var(--fs-13);
  letter-spacing:.02em;color:var(--mu);text-transform:none}

/* Formulario de ofrecimiento en especie: vive dentro del bloque de acopios, así
   que se separa con una regla en vez de con una tarjeta. */
.of-t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.01em;margin:26px 0 6px;padding-top:22px;border-top:1px solid var(--bd)}
#of{margin-top:16px;max-width:560px}
#of select{width:100%;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-15)}

/* Rastreo: de dónde salió el dato, y las entregas del destino. */
.track-fuente{font-size:var(--fs-12);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mu);margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.track-ev-box{margin-top:28px;padding-top:24px;border-top:2px solid var(--g)}
.track-ev-box h3{font-size:var(--fs-h4);margin-bottom:8px}
.track-ev-box .mu{font-size:var(--fs-15);line-height:1.6;max-width:64ch}
.track-ev-box .ev-lista{margin-top:8px}

/* ---- carnet de miembro ----
   Página propia, no una sección del sitio: se abre en el celular de quien
   atiende una caja y tiene que leerse de un vistazo, en una mano y con prisa.
   Por eso vive sobre el panel oscuro y el estado es lo más grande después del
   nombre. */
.carnet{max-width:400px;width:100%;background:var(--ink-deep);color:var(--on-dark);
  border-radius:18px;padding:30px 28px 24px;border:1px solid var(--on-dark-fill-2)}
.carnet-top{display:flex;align-items:baseline;gap:10px;margin-bottom:26px}
.carnet-amp{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--gn);line-height:1}
.carnet-marca{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:10px;
  color:var(--on-dark-3);line-height:1.4}
.carnet-nivel{font-family:var(--font-display);font-weight:700;font-size:var(--fs-13);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gn);margin-bottom:6px}
.carnet-nombre{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,7vw,32px);
  line-height:1.08;letter-spacing:-.02em;color:var(--on-dark);margin-bottom:24px;text-wrap:balance}
.carnet-datos{display:flex;flex-direction:column;gap:0;margin-bottom:22px}
.carnet-datos > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--on-dark-fill-2)}
.carnet-datos dt{font-size:var(--fs-13);color:var(--on-dark-4)}
.carnet-datos dd{font-size:var(--fs-14);font-weight:700;font-variant-numeric:tabular-nums}
.carnet-estado{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-15);
  letter-spacing:.04em;padding:9px 20px;border:2px solid;border-radius:999px;margin-bottom:20px}
.carnet-pie{font-size:var(--fs-12);line-height:1.5;color:var(--on-dark-4)}
.carnet-nit{font-size:var(--fs-11);letter-spacing:.06em;color:var(--on-dark-4);margin-top:16px}

/* Reporte de transferencia */
.rep-link{font-weight:700;color:var(--acc);border-bottom:1px solid var(--bd)}
.rep-link:hover{border-color:var(--acc)}
#rep select,#rep input[type=date],#rep input[type=number]{width:100%;padding:11px 12px;
  border:1px solid var(--bd);border-radius:10px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--fs-15)}
.rep-ok{margin-top:26px;padding-top:24px;border-top:2px solid var(--g);max-width:600px}
.rep-guia{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,6vw,38px);
  color:var(--acc);letter-spacing:-.02em;margin:6px 0 14px}
.rep-ok-p{font-size:var(--fs-15);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin-bottom:16px}
.rep-sube-t{font-size:var(--fs-h4);margin:22px 0 6px;padding-top:20px;border-top:1px solid var(--bd)}
#rep-file{font-size:var(--fs-14);margin-top:6px}

/* ============================================================================
   IMPRESIÓN
   ============================================================================
   No existía una sola regla @media print. Imprimir cualquier página se llevaba
   el menú, los dos botones flotantes, la barra del recorrido y el pie entero —
   y en modo noche, un rectángulo de tinta verde.

   Esto es la Fase 3 del plan visual: Transparencia como hoja en carta. Existe
   por una razón concreta: a quien se le pide una bodega, un camión o entregar
   junto a nosotros, lo primero que pregunta es quién es la entidad. Esta es la
   hoja que responde eso, y ninguno de sus datos es financiero — la regla de no
   publicar cifras hasta el cierre de 2025 queda intacta.
   ============================================================================ */
@media print {
  /* La paleta de DÍA siempre, pase lo que pase en pantalla. Imprimir el modo
     noche gasta tinta y se lee peor: el papel ya es el fondo. */
  :root, :root[data-theme="dark"] {
    --bg:#fff; --surface:#fff; --surface-2:#fff;
    --ink:#111; --ink-soft:#333; --mu:#555; --bd:#bbb;
    --g:#1F5C38; --acc:#1F5C38; --gl:#fff; --amber:#7a3800; --ok:#1F5C38;
    /* RED DE SEGURIDAD CONTRA LA TINTA INVISIBLE.
       Todo el texto que va sobre superficie oscura usa ahora `--on-dark`, así
       que aquí se le da la vuelta: en papel, ese token ES la tinta. Cualquier
       sección oscura que se añada mañana se imprime legible sin que nadie tenga
       que acordarse de sumarla a la lista de abajo —que es exactamente como se
       quedaron tres sueltas la primera vez—.
       La lista sigue viva: hace falta para los `rgba(255,255,255,…)` que aún no
       se migran y para apagar fondos y sombras. */
    --on-dark:#111;
  }
  @page { size: letter; margin: 16mm 15mm; }
  html, body { background:#fff !important; color:#111 !important; }

  /* Fuera del papel: nada de esto sirve impreso y todo estorba. */
  nav, .nav, footer, #journey-nav, .alma-fab, #alma-panel, .wa,
  .skip-link, .drawer, .theme, #lang, .pay-tabs, .track-noguide,
  form, button, input, select, textarea { display:none !important; }

  /* Los enlaces con pinta de botón NO se esconden: «Consultar en el RUES» es
     justo la sección de cómo verificarnos, y borrarlo dejaría la instrucción sin
     la dirección. Se imprimen como texto, y la regla de abajo les pega su URL. */
  a.btn { display:inline !important; background:none !important; border:0 !important;
    padding:0 !important; color:#1F5C38 !important; font-weight:700; text-decoration:underline }

  /* Las páginas inactivas de la SPA no existen; la activa se despliega entera. */
  .page { display:none !important; }
  .page.active { display:block !important; }
  section { padding:0 !important; background:transparent !important; }
  .wrap { max-width:none !important; padding:0 !important; }

  /* Nada de revelados al scroll: en papel no hay scroll, y un elemento en
     opacidad 0 se imprime en blanco. Es el fallo más fácil de no ver. */
  .rv, [class*="rv"] { opacity:1 !important; transform:none !important; }

  /* TINTA INVISIBLE — el fallo que casi se escapó.
     Varias superficies del sitio son oscuras y pintan su texto en blanco:
     `.band`, `.calc`, `.hero`, `.brig-aviso`, los contadores. Al forzar el papel
     a blanco, ese texto quedaba blanco sobre blanco: la sección «Gobernanza y
     control» de Transparencia se imprimía VACÍA, sin el nombre de la Revisora
     Fiscal, en un documento cuyo propósito es probar quién responde.
     Se listan los subárboles enteros porque el blanco vive en los hijos
     (`.band .lead`, `.calc-hints`, `.qbtn`…), no solo en el contenedor.
     Y la lista sale de barrer el CSS entero buscando `color:var(--on-dark)` y
     `rgba(255,255,255,…)` a nivel de contenedor — no de ir arreglando páginas
     una por una, que es como se quedan tres sueltas. */
  .band, .band *, .calc, .calc *, .hero, .hero *, .home-hub, .home-hub *,
  .foto-banner, .foto-banner *, .path, .path *, .stats, .stats *,
  .brig-aviso, .brig-aviso *, .live-stat, .live-stat *, .carnet, .carnet *,
  .pay-now-t, .pay-now-p, .pay-now-msg, .pay-now-rec, .gal-cap, .track-ev-ic {
    color:#111 !important; background:transparent !important;
    text-shadow:none !important; box-shadow:none !important;
  }
  .band .lead, .band .mu, .calc .mu, .hero-lead, .home-hub .lead,
  .path p, .live-note { color:#333 !important; }
  /* Las flechas del diagrama de doble vía no dicen nada sin su contexto visual. */
  .hf-arrow { color:#555 !important }

  /* Tarjetas → reglas finas. Una hoja institucional no lleva cajas redondeadas:
     es la misma conversión tarjetas→reglas que pide el plan v5, aplicada aquí
     porque en papel una tarjeta es un marco que no aporta nada. */
  .card, .rec-ledger, .transp-caja, .grid > div {
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:transparent !important; padding:0 !important;
  }
  .card { border-top:1px solid #bbb !important; padding-top:5pt !important; margin-bottom:9pt !important; }
  .card .ic, .ic-svg { display:none !important; }

  /* Un enlace sin su URL es papel muerto. Va sobre la página ACTIVA entera y no
     solo sobre `.prose`: el enlace al RUES —la sección de cómo verificarnos— vive
     fuera de `.prose`, y con el selector estrecho se imprimía sin dirección. */
  .page.active a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9.5pt; color:#555; word-break:break-all; font-weight:400 }
  /* Los mailto NO llevan su URL pegada: saldría «(mailto:…)». La dirección de
     contacto va una sola vez, en el pie de la hoja. */
  .page.active a[href^="mailto:"]::after { content:none }

  /* No cortar un bloque de datos a mitad de página. */
  .rec-ledger, .transp-sello, .transp-cab, dl, .brig-cat { break-inside:avoid; page-break-inside:avoid; }
  h2, h3, h4 { break-after:avoid; page-break-after:avoid; }

  .solo-impresion { display:block !important; }
  .transp-cab { display:flex !important; justify-content:space-between; align-items:baseline;
    border-bottom:1.5px solid #111; padding-bottom:6pt; margin-bottom:14pt;
    font-size:9.5pt; letter-spacing:.06em; text-transform:uppercase; font-weight:700 }
  .transp-pie { display:block !important; margin-top:18pt; padding-top:6pt;
    border-top:1px solid #bbb; font-size:9pt; color:#555 }

  body { font-size:10.5pt; line-height:1.45 }
  h2 { font-size:19pt !important; margin:0 0 4pt !important }
  h3 { font-size:12pt !important; margin:14pt 0 5pt !important;
    letter-spacing:.06em; text-transform:uppercase; color:#1F5C38 }
  .lead, .prose p { font-size:10.5pt !important }

  /* El ledger de registro, con cifras alineadas: NIT, tomos, T.P., fechas. */
  .transp-fila { font-variant-numeric:tabular-nums }
}

/* El sello institucional: NIT + RTE + fecha de corte como estampilla. Es el
   único elemento firma de la hoja, y vive SOLO en el papel — en pantalla la
   página ya tiene su propia jerarquía y un sello ahí sería decoración. */
.solo-impresion { display:none }
@media print {
  .transp-sello { display:inline-block !important; margin-top:16pt;
    border:1.5pt solid #1F5C38; padding:7pt 12pt; text-align:center; line-height:1.3 }
  .transp-sello b { display:block; font-family:var(--font-display),sans-serif;
    font-size:11pt; font-weight:700; letter-spacing:.02em; color:#1F5C38 }
  .transp-sello small { display:block; font-size:8.5pt; letter-spacing:.09em;
    text-transform:uppercase; color:#1F5C38; margin-top:2pt }
}

/* ==========================================================================
   MIRA MI CASA — piel de marca del triaje de viviendas
   ==========================================================================
   Se activa con `data-marca="mmc"` en el <html>, que el Worker inyecta SOLO
   cuando el Host es el subdominio. Sin ese atributo no aplica ni una regla:
   el sitio de la fundación no puede romperse por esto, y no por cuidado sino
   por construcción.

   NO ES UNA HOJA NUEVA. Redefine los MISMOS tokens que el sistema ya usa, así
   que .card, .btn-g, .ally-form y .steps se pintan con la marca nueva sin
   duplicar un componente.

   De dónde sale la dirección: la tarjeta de triaje —el cartón que se le cuelga
   a un paciente en urgencias— que nunca dice un diagnóstico y siempre dice a
   quién se atiende primero. Es el objeto exacto que describe este producto.
   ========================================================================== */
html[data-marca="mmc"]{
  /* Donde el sistema pone verde institucional, va azul de documento oficial.
     Ni navy corporativo ni azul de aplicación: el registro es el de una
     entidad de protección civil, que es como debe leerse quien atiende una
     emergencia sin ser la autoridad. */
  --acc:#0D3B66;  --acc-2:#12507F;
  --g:#0D3B66;    --gm:#12507F;   --gl:#E7EFF6;  --gd:#082742;
  --gn:#8FBFE0;
  --ink-deep:#0B2135;

  --bg:#FBFAF7;   --surface:#FFFFFF;  --surface-2:#F4F6F8;  --cream:#F4F6F8;
  --ink:#082742;  --ink-soft:#2A4257; --mu:#56697A;
  --bd:#CBD5DD;   --bds:#E4EAEF;

  /* --amber SIGUE SIENDO EL COLOR DE ADVERTENCIA del sistema, y NO el ámbar de
     urgencia del triaje. Solo se reencuadra al azul de esta paleta. Fusionarlos
     haría aparecer el ámbar en avisos por todo el sitio, y para cuando de
     verdad importara —una casa que hay que visitar ya— no querría decir nada. */
  /* Oscurecido de #B57500 a #9A6400 el 15 sep 2026: mismo tono (38.8) y misma
     saturacion, cinco puntos menos de luminosidad. Sobre --amberl daba 3.48 y el
     minimo son 4.5, asi que `.tag.new` y `.med-step-s.is-wip` —las dos unicas
     parejas que quedaban bajo el minimo en todo el sitio— no se leian. Se
     oscurece el TEXTO y no se aclara el fondo porque --amberl tambien es fondo
     de avisos, y aclararlo los habria vuelto invisibles sobre el papel. */
  --amber:#9A6400; --amberl:#FFF4D6;
  --nav-bg:rgba(251,250,247,.92);
  --skel-a:#EEF1F4; --skel-b:#F8FAFB;

  /* El velo del hero en el azul de documento, no en el verde de la
     fundación; y el icono de `.path` en el azul claro que ya usa el pie. */
  --hero-velo:11,33,53;
  --ic-path:#8FBFE0;
}


html[data-marca="mmc"][data-theme="dark"]{
  /* --acc SE ACLARA y --g NO, que es la convención del sistema y la pasé por
     alto en el primer intento: `--acc` se usa como TEXTO y borde sobre fondos
     oscuros, mientras que `--g` es el FONDO de .btn-g con tinta blanca encima.
     Al aclarar los dos, los botones quedaban en 2,56:1 — blanco sobre azul
     claro. El sitio base ni siquiera redefine `--g` en noche por esta razón.
     Aquí sí sube un punto, pero solo lo justo para despegar del fondo casi
     negro sin dejar de sostener tinta blanca. */
  --acc:#6FA8D0;  --acc-2:#8FBFE0;
  --g:#12507F;    --gm:#1A6398;   --gl:#122C41;  --gd:#061019;
  --gn:#8FBFE0;
  --ink-deep:#0B2135;

  --bg:#07131F;   --surface:#0F2436;  --surface-2:#0B1B29;  --cream:#0B1B29;
  --ink:#E6EDF3;  --ink-soft:#C3D0DB; --mu:#93A6B6;
  --bd:#274157;   --bds:#1A3145;

  --amber:#E8A24C; --amberl:#33260F;
  --nav-bg:rgba(7,19,31,.94);
  --skel-a:#0F2436; --skel-b:#152C40;

  /* El ámbar NO se aclara de noche: sobre fondo oscuro ya rinde de sobra con su
     tinta, y moverlo rompería que «urgente» se vea igual en los dos modos. El
     azul de campo sí sube, porque el de día se hunde contra el fondo. */
  --pri-urg:#F2B705;  --pri-urg-ink:#082742;
  --pri-prog:#2E6C9E; --pri-prog-ink:#FFFFFF;
}

/* ── La nav: esto no es la fundación ──────────────────────────────────────
   Una familia con la casa rota no tiene por qué ubicarse en un ecosistema de
   membresías y alianzas. Se deja lo suyo y se quita todo lo demás. */
/* OCULTA POR DEFECTO, y esto es lo que se me olvidó en el primer intento: sin
   esta línea los tres enlaces de Mira Mi Casa salían en la nav de la fundación.
   El aval sí lo tenía y la nav no — el mismo patrón a medias es peor que no
   tenerlo, porque uno de los dos casos te hace creer que está resuelto. */
.mmc-nav{ display:none }
html[data-marca="mmc"] .nlinks > *,
html[data-marca="mmc"] .nav-mobile > *{ display:none }
html[data-marca="mmc"] .nlinks > .mmc-nav,
html[data-marca="mmc"] .nav-mobile > .mmc-nav{ display:inline-flex }
html[data-marca="mmc"] .nav-mobile > .mmc-nav{ display:block }
html[data-marca="mmc"] .btn-nav{ display:none }

/* El logotipo es tipográfico a propósito: el nombre todavía es provisional y
   dibujar una marca que puede cambiar sería trabajo tirado. Unbounded se
   comparte con la fundación — es el hilo visible de parentesco, y resuelve el
   problema del aval con tipografía en vez de con dos logos apilados. */
html[data-marca="mmc"] .nlogo{ font-size:var(--fs-17); letter-spacing:.01em }
html[data-marca="mmc"] .nlogo em{ font-style:normal; color:var(--acc) }
/* El logotipo del PIE es blanco sobre fondo oscuro, así que ahí el acento tiene
   que ser el claro: con el azul oscuro, «Mi» quedaba en 1,43:1 — invisible.
   Dos sitios con el mismo componente y fondos opuestos. */
html[data-marca="mmc"] .foot-grid .nlogo em{ color:var(--gn) }

/* El aval, y va donde se ve primero. Una marca nueva, sin historia, pidiendo
   fotos de tu casa en zona de desastre se parece bastante a una estafa: la
   confianza no la tiene el nombre nuevo, la tiene la fundación. */
.mmc-aval{ display:none }
html[data-marca="mmc"] .mmc-aval{
  display:block; font-size:var(--fs-11); line-height:1.35; color:var(--mu);
  margin-top:2px; max-width:34ch;
}
html[data-marca="mmc"] .foot-grid .mmc-aval{ color:var(--on-dark-3); max-width:44ch }

/* El pie, por la misma razón que el aval y que la nav. Se marca con clase en
   los dos lados —`.foot-gg` lo de la fundación, `.mmc-foot` lo de aquí— y no
   por posición en la rejilla: una columna nueva en el pie no debe poder
   cambiar en silencio quién se esconde. La primera columna, la del logotipo y
   el aval, se queda en los dos sitios: es la que dice quién responde. */
.mmc-foot{ display:none }
html[data-marca="mmc"] .foot-gg{ display:none }
html[data-marca="mmc"] .mmc-foot{ display:block }
/* El rótulo de los dos enlaces que sí salen del sitio. Va como texto y no como
   un icono de «enlace externo» porque quien lo lee puede no conocer ese icono,
   y aquí la frase es la advertencia. */
html[data-marca="mmc"] .mmc-foot-fuera{
  margin:18px 0 6px; font-size:var(--fs-11); line-height:1.35;
  color:var(--on-dark-3); max-width:30ch;
}

/* ── La escala de prioridad, el elemento firma ────────────────────────────
   Lo único que este producto produce es una posición en una fila, así que la
   escala ES el sistema visual. El ámbar aparece una sola vez en todo el
   recorrido, y esa escasez es lo que lo convierte en señal. */
.mmc-pri{ display:flex; flex-direction:column; gap:5px;
  padding:16px 18px; border-radius:3px; border:1.5px solid var(--bd);
  background:var(--surface); color:var(--ink) }
.mmc-pri .k{ font-size:var(--fs-11); letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; opacity:.86 }
.mmc-pri .t{ font-family:var(--font-display); font-size:var(--fs-17);
  font-weight:700; letter-spacing:-.01em; line-height:1.2 }
.mmc-pri.urgente{ background:var(--pri-urg); border-color:var(--pri-urg);
  color:var(--pri-urg-ink) }
.mmc-pri.programada{ background:var(--pri-prog); border-color:var(--pri-prog);
  color:var(--pri-prog-ink) }
.mmc-pri.inevaluable{ background:transparent; border-style:dashed }

/* ── La portada partida ───────────────────────────────────────────────────
   La foto al lado del texto y no debajo de él. Nace de una medición: con el
   texto ENCIMA de esta fotografía —una vivienda encalada a pleno día— el
   eyebrow daba 1,34 y el titular 2,03, y el velo que los arreglaba borraba la
   casa. Al lado, la foto va a plena fuerza y el texto sobre el papel del sitio.

   `1.05fr .95fr` y no mitades: la columna de texto lleva un titular en display
   y tres botones, y necesita un punto más de aire que la imagen. */
.mmc-portada{ padding-block:clamp(40px,7vw,84px) clamp(36px,6vw,72px) }
.mmc-portada-in{ display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,52px); align-items:center }
.mmc-portada .h-sec{ max-width:17ch }
.mmc-portada-foto{ margin:0 }
/* `height:auto` NO SOBRA. El <img> lleva `width`/`height` en el marcado —hacen
   falta para que el navegador reserve el hueco y no salte el diseño— y ese
   `height="1200"` es una pista de presentación que le gana a `aspect-ratio`
   mientras nadie ponga la altura en CSS. Medido: la caja salía de 444×1200 y la
   portada crecía hasta 1382 px de alto. */
.mmc-portada-foto img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--rl); box-shadow:var(--shadow) }
.mmc-portada-foto figcaption{ margin-top:10px; font-size:var(--fs-14); line-height:1.4 }
.mmc-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }

/* EN UNA COLUMNA ANTES DE QUE APRIETE. A 860 px la foto ya bajaba de 400 px de
   ancho y el titular partía por sílabas raras; y quien abre esto lo abre casi
   siempre en un teléfono, así que el orden de una columna es el que importa:
   primero qué es, después los botones, y la foto de cierre. */
@media (max-width:860px){
  .mmc-portada-in{ grid-template-columns:1fr }
  .mmc-portada-foto img{ aspect-ratio:3/2; max-height:300px; object-position:center 60% }
}