/* Fundación Morei · prototipo de la nueva web
   Paleta: cal (muro encalado), añil (puertas campesinas y mariposa), noche de Fómeque,
   bombillos de colores (herencia de Morei) y páramo. */
/* El atributo hidden siempre gana (8-oct-2026): reglas como `.donar form { display: grid }` lo anulaban
   y los 4 pasos del flujo de donación se veían a la vez. */
[hidden] { display: none !important; }

:root {
  /* Paleta oficial de Morei, medida por píxel en el logo (Estudio Motion, MARCA.md §3, 7-oct-2026).
     El acento coral es uno solo por pantalla: el botón principal de donar. */
  --blanco: #ffffff;
  --cielo: #a8d8e4;
  --cielo-claro: #ecf6f9;
  --cielo-suave: #d8edf3;
  --ala-noche: #31313a;
  --indigo: #2b3757;
  --azul-real: #324e8a;
  --azul-morei: #008dd2;
  --verde: #009846;
  --lima: #dbe285;
  --turquesa: #4eb0de;
  --celeste: #74c9e8;
  --coral: #e6717d;

  /* Tonos derivados (mezclas de la paleta, para texto y superficies) */
  --tinta-coral: #26262e;      /* texto sobre coral: 4,8:1 */
  --coral-claro: #ec8a94;      /* hover del coral, mantiene el contraste */
  --lima-claro: #e9edb4;
  --noche-alta: #3d3d48;       /* superficie elevada sobre Ala noche */
  --indigo-alto: #36446a;      /* superficie elevada sobre Índigo */
  --indigo-hondo: #232d48;
  --texto-noche: #a8d8e4;      /* texto secundario sobre oscuro (Cielo) */
  --texto-noche-3: #a9bccd;    /* notas sobre oscuro: ≥4,8:1 en todas las superficies oscuras */
  --linea-noche: rgba(168, 216, 228, .18);
  --verde-tinta: #006b35;      /* texto verde legible sobre claro */
  --foco: var(--azul-real);

  /* Roles con los nombres heredados del prototipo (así el resto del CSS migra solo) */
  --cal: var(--blanco);
  --cal-2: var(--cielo-claro);
  --tinta: var(--ala-noche);
  --tinta-suave: #5a637c;
  --anil: var(--azul-real);
  --anil-hondo: var(--indigo);
  --noche: var(--indigo);
  --paramo: var(--verde-tinta);
  --maiz: var(--lima);
  /* Bombillos: los colores de la mariposa (MARCA.md §5: el multicolor de Morei) */
  --b-rojo: var(--coral);
  --b-maiz: var(--lima);
  --b-verde: #3bb77a;
  --b-azul: var(--turquesa);
  --b-rosa: var(--celeste);
  --linea: rgba(43, 55, 87, .14);
  --radio-arco: 999px 999px 18px 18px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --display: "Young Serif", "Georgia", "Times New Roman", serif;
  --texto: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
/* Superficies del navegador con la paleta de marca */
::selection { background: var(--celeste); color: var(--ala-noche); }
html { scrollbar-color: var(--azul-real) var(--cielo-claro); caret-color: var(--azul-morei); }
/* Sobre fondos oscuros el foco se vuelve celeste (lima sobre el azul real) */
.aviso, .barra-sup, .menu-movil, .portada, .abuelo, .honor, .causas, .pie, .empuje { --foco: var(--celeste); }
.familia { --foco: var(--lima); }

.envoltura { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
p { margin: 0; max-width: 62ch; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--tinta-suave); }

/* Aviso de prototipo */
.aviso {
  background: var(--tinta); color: var(--cal);
  font-size: .85rem; text-align: center; padding: .5rem var(--gutter);
}
.aviso strong { color: var(--maiz); font-weight: 600; }

/* Encabezado */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--cal) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.marca svg { width: 42px; height: auto; }
.marca span { font-family: var(--display); font-size: 1.55rem; line-height: 1; }
.marca small { display: block; font-family: var(--texto); font-size: .72rem; color: var(--tinta-suave); letter-spacing: .02em; }
.menu { display: flex; gap: 1.4rem; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a:hover { color: var(--anil); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 1rem/1 var(--texto); text-decoration: none; cursor: pointer;
  padding: .95rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .2s, color .2s, transform .2s;
}
.boton:active { transform: scale(.98); }
.boton-anil { background: var(--anil); color: #fff; }
.boton-anil:hover { background: var(--anil-hondo); }
.boton-maiz { background: var(--maiz); color: var(--tinta); }
.boton-maiz:hover { background: var(--lima-claro); }
/* Coral: el único acento de la marca. Solo para el botón principal de donar de cada pantalla. */
.boton-coral { background: var(--coral); color: var(--tinta-coral); }
.boton-coral:hover { background: var(--coral-claro); }
.boton-borde { border-color: currentColor; color: inherit; background: transparent; }
.boton-borde:hover { background: rgba(255, 255, 255, .08); }
.enlace { font-weight: 600; color: var(--anil); text-underline-offset: .25em; }

/* 1 · Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 6rem); }
.hero .envoltura { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.6vw, 6.2rem); letter-spacing: -.02em; line-height: 1.02; }
.hero h1 .vuelo { display: block; color: var(--anil); }
.hero .lead { margin-top: 1.6rem; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: 2rem; }
.hero .respaldo { margin-top: 1.6rem; font-size: .92rem; color: var(--tinta-suave); }
.arco { border-radius: var(--radio-arco); overflow: hidden; background: var(--cal-2); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.hero figure { margin: 0; position: relative; }
.hero .arco { aspect-ratio: 4 / 5.4; }
.hero figcaption { position: absolute; left: -1.2rem; bottom: 2.2rem; background: var(--cal); padding: .7rem 1rem; border-radius: 14px; font-size: .88rem; max-width: 15rem; box-shadow: 0 10px 30px rgba(43, 55, 87, .12); }

/* 2 · El abuelo: noche de Fómeque y bombillos */
.abuelo { background: var(--noche); color: #fff; position: relative; overflow: hidden; }
.abuelo-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 6vw, 5rem); }
.guirnalda { width: 100%; height: auto; display: block; margin-bottom: clamp(1.5rem, 4vw, 3rem); overflow: visible; }
.guirnalda .cable { fill: none; stroke: #56627f; stroke-width: 2; }
.bombillo .vidrio { fill: #3b4870; transition: fill .35s, filter .35s; }
.bombillo .rosca { fill: #7d879f; }
.bombillo.encendido .vidrio { fill: var(--c); filter: drop-shadow(0 0 7px var(--c)) drop-shadow(0 0 18px var(--c)); }
.abuelo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.abuelo h2 { color: #fff; }
.abuelo p { color: var(--texto-noche); }
.copla { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; color: var(--maiz); margin: 1.6rem 0; }
.copla-nota { font-size: .8rem; color: var(--texto-noche-3); }
.historia-texto { display: grid; gap: 1rem; margin-top: 1.2rem; }
.audio-rocio { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; padding: 1rem 1.2rem; border: 1px solid var(--linea-noche); border-radius: 16px; max-width: 34rem; }
.audio-rocio button { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--maiz); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.audio-rocio button svg { width: 22px; height: 22px; }
.audio-rocio p { font-size: .92rem; color: var(--texto-noche); }
.audio-rocio .transcripcion { margin-top: .4rem; font-size: .85rem; color: var(--texto-noche-3); font-style: italic; }
.anio-actual { font-family: var(--display); font-size: clamp(4rem, 9vw, 7.5rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hitos { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .15rem; border-left: 2px solid var(--linea-noche); }
.hitos li { padding: .5rem 0 .5rem 1.1rem; color: var(--texto-noche-3); transition: color .3s; position: relative; }
.hitos li b { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .6rem; }
.hitos li.visto { color: var(--texto-noche); }
.hitos li.actual { color: #fff; }
.hitos li.actual::before { content: ""; position: absolute; left: -7px; top: 1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--maiz); box-shadow: 0 0 0 4px var(--noche); }
.abuelo-relato { padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem); }
.abuelo-relato .copla { margin-top: 0; }
.abuelo-relato .abuelo-grid { align-items: center; }
.foto-morei { margin-top: 1.8rem; border: 2px dashed var(--linea-noche); border-radius: var(--radio-arco); aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--texto-noche-3); font-size: .9rem; max-width: 22rem; }

/* 3 · La nieta */
.nieta { padding-block: clamp(4rem, 9vw, 8rem); }
.nieta .envoltura { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.nieta .arco { aspect-ratio: 3 / 4.2; }
.cita { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.15; margin: 0; text-wrap: balance; }
.cita-autor { margin-top: 1.5rem; font-weight: 600; }
.cita-autor span { display: block; font-weight: 400; color: var(--tinta-suave); }
.nieta .lead { margin-top: 1.8rem; }

/* 4 · Metamorfosis */
.meta { background: var(--cal-2); overflow: hidden; }
.meta-cabeza { padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.meta-cabeza .lead { margin-top: 1rem; }
.meta-pista { display: flex; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--gutter); padding-bottom: clamp(3.5rem, 7vw, 6rem); width: max-content; }
.etapa { width: min(78vw, 980px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; background: var(--cal); border-radius: 28px; padding: clamp(1.2rem, 2.5vw, 2rem); }
.etapa .foto { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--cal-2); }
.etapa .foto img { width: 100%; height: 100%; object-fit: cover; }
.etapa-estado { font-family: var(--display); font-size: 1.1rem; color: var(--anil); }
.etapa h3 { margin-top: .5rem; font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.etapa p { margin-top: 1rem; color: var(--tinta-suave); }
.etapa .pendiente { margin-top: 1rem; font-size: .82rem; color: var(--paramo); background: #dcf1e4; padding: .45rem .7rem; border-radius: 8px; display: inline-block; }
.foto-vacia { display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--tinta-suave); font-size: .9rem; border: 2px dashed var(--linea); }

/* 5 · Lo que hemos encendido */
.cifras { padding-block: clamp(4rem, 8vw, 7rem); }
.cifras-lista { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--linea); }
.cifras-lista li { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr auto; gap: 1rem 2rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--linea); }
.cifra { font-family: var(--display); font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1; color: var(--anil); font-variant-numeric: tabular-nums; }
.cifras-lista p { font-size: 1.12rem; }
.fuente { font-size: .82rem; color: var(--tinta-suave); text-align: right; max-width: 16rem; }
.territorios { margin-top: 2rem; color: var(--tinta-suave); }
.territorios strong { color: var(--tinta); }

/* 6 · Causas activas */
.causas { background: var(--tinta); color: #fff; padding-block: clamp(4rem, 8vw, 7rem); }
.causas h2 { color: #fff; }
.causas .lead { color: var(--texto-noche); margin-top: 1rem; }
.causas-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 1.5rem; margin-top: 2.5rem; }
.causa { background: var(--noche-alta); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.causa-insignia { grid-row: span 2; }
.causa .foto { aspect-ratio: 16 / 9; overflow: hidden; }
.causa-insignia .foto { aspect-ratio: 4 / 3; }
.causa .foto img { width: 100%; height: 100%; object-fit: cover; }
.causa-cuerpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.causa h3 { color: #fff; }
.causa p { color: var(--texto-noche); font-size: .98rem; }
.barra { height: 10px; background: var(--linea-noche); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--turquesa), var(--celeste)); border-radius: 99px; }
.avance { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .92rem; color: var(--texto-noche); font-variant-numeric: tabular-nums; }
.avance b { color: #fff; }
.ejemplo { font-size: .78rem; color: var(--texto-noche-3); }
.causa .boton { margin-top: auto; align-self: flex-start; }
.tienda { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; border-top: 1px solid var(--linea-noche); }
.tienda li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea-noche); font-size: .95rem; color: var(--texto-noche); }
.tienda b { color: var(--maiz); font-variant-numeric: tabular-nums; white-space: nowrap; }
.abre { display: inline-block; background: rgba(219, 226, 133, .14); color: var(--maiz); font-weight: 600; font-size: .9rem; padding: .35rem .75rem; border-radius: 8px; align-self: flex-start; }

/* 7 · Nietos de Morei */
.nietos { padding-block: clamp(4rem, 9vw, 8rem); }
.nietos .envoltura { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.nietos .lead { margin-top: 1.2rem; }
.recibes { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.recibes li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; }
.recibes svg { width: 26px; height: 20px; margin-top: .25rem; }
.selector { background: #fff; border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 20px 60px rgba(43, 55, 87, .1); border: 1px solid var(--linea); }
.selector h3 { font-size: 1.5rem; }
.niveles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.4rem; border: 0; padding: 0; }
.niveles legend { font-weight: 600; margin-bottom: .6rem; padding: 0; }
.nivel input { position: absolute; opacity: 0; pointer-events: none; }
.nivel label { display: block; cursor: pointer; border: 2px solid var(--linea); border-radius: 16px; padding: .9rem 1rem; transition: border-color .2s, background-color .2s; height: 100%; }
.nivel label span { display: block; font-size: .85rem; color: var(--tinta-suave); }
.nivel label strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.nivel input:checked + label { border-color: var(--anil); background: var(--cielo-claro); }
.nivel input:focus-visible + label { outline: 3px solid var(--maiz); outline-offset: 2px; }
.equivale { margin-top: 1.2rem; padding: 1rem 1.1rem; background: var(--cal); border-radius: 14px; font-size: .98rem; min-height: 4.5rem; }
.equivale small { display: block; color: var(--tinta-suave); margin-top: .3rem; }
.selector .boton { width: 100%; margin-top: 1.2rem; font-size: 1.08rem; }
.letra-chica { margin-top: .9rem; font-size: .88rem; color: var(--tinta-suave); text-align: center; }
.otro-monto { margin-top: .8rem; }
.otro-monto label { font-size: .9rem; font-weight: 600; }
.otro-monto input { display: block; width: 100%; margin-top: .35rem; font: 500 1.1rem var(--texto); padding: .75rem .9rem; border-radius: 12px; border: 2px solid var(--linea); background: #fff; }

/* 8 · Cuentas claras */
.cuentas { background: var(--cal-2); padding-block: clamp(4rem, 8vw, 7rem); }
.cuentas .envoltura { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cuentas .lead { margin-top: 1rem; }
.cuentas .acciones { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 2rem; align-items: center; }
.ficha { margin: 0; display: grid; grid-template-columns: max-content 1fr; background: var(--cal); border-radius: 22px; overflow: hidden; border: 1px solid var(--linea); }
.ficha dt, .ficha dd { margin: 0; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-weight: 600; color: var(--tinta-suave); font-size: .95rem; }
.ficha dd { font-variant-numeric: tabular-nums; }
.ficha dt:nth-last-of-type(1), .ficha dd:last-of-type { border-bottom: 0; }
.ficha dd { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { border-bottom: 0; padding-bottom: .1rem; font-size: .85rem; }
  .ficha dd { padding-top: 0; }
}
.estado { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 6px; margin-left: .4rem; vertical-align: .1em; }
.estado-ok { background: #dcf1e4; color: var(--paramo); }
.estado-tramite { background: #f1f4cf; color: var(--ala-noche); }
.seguridad { margin-top: 1.4rem; font-size: .95rem; color: var(--tinta-suave); }

/* 9 · Historias */
.historias { padding-block: clamp(4rem, 8vw, 7rem); }
.historias-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem var(--gutter) 1rem; margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; }
.relato { scroll-snap-align: start; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 15; background: var(--tinta); color: #fff; margin: 0; }
.relato img { width: 100%; height: 100%; object-fit: cover; }
.relato figcaption { position: absolute; inset: auto 0 0 0; padding: 3.5rem 1.1rem 1.1rem; background: linear-gradient(to top, rgba(35, 45, 72, .92), rgba(35, 45, 72, 0)); font-size: .95rem; line-height: 1.4; }
.relato figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin-bottom: .3rem; }

/* 10 · Aliados */
.aliados { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.aliados-caja { border-top: 1px solid var(--linea); padding-top: 3rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.aliados-lista { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1rem; font-family: var(--display); font-size: 1.25rem; color: var(--tinta-suave); list-style: none; padding: 0; }
.aliados .nota { font-size: .82rem; color: var(--tinta-suave); margin-top: .8rem; }

/* 11 · Familia */
.familia { background: var(--anil); color: #fff; padding-block: clamp(4rem, 8vw, 7rem); position: relative; overflow: hidden; }
.familia .envoltura { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; position: relative; }
.familia h2 { color: #fff; }
.familia p { color: var(--texto-noche); margin-top: 1rem; }
.suscripcion { display: grid; gap: .8rem; }
.suscripcion label { font-weight: 600; font-size: .95rem; }
.suscripcion input { font: 500 1.05rem var(--texto); padding: .9rem 1rem; border-radius: 14px; border: 0; width: 100%; }
.suscripcion .confirmacion { font-size: .95rem; color: #fff; background: rgba(255, 255, 255, .14); padding: .8rem 1rem; border-radius: 12px; }
.mariposas-fondo { position: absolute; right: -40px; top: -30px; width: 340px; opacity: .14; pointer-events: none; }

/* Pie */
.pie { background: var(--ala-noche); color: var(--texto-noche); padding-block: 3.5rem 6rem; font-size: .92rem; }
.pie .envoltura { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem 3rem; }
.pie h3 { font-family: var(--texto); font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: .7rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--maiz); }
.pie .marca span { color: #fff; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid var(--linea-noche); padding-top: 1.4rem; color: var(--texto-noche-3); font-size: .85rem; }

/* Barra fija de donación en celular */
.barra-donar { display: none; }

/* Responsivo */
@media (max-width: 960px) {
  .menu { display: none; }
  .cabecera .boton { margin-left: auto; padding: .75rem 1.1rem; }
  .hero .envoltura, .abuelo-grid, .nieta .envoltura, .nietos .envoltura, .cuentas .envoltura, .familia .envoltura, .aliados-caja { grid-template-columns: 1fr; }
  .hero figure { max-width: 460px; }
  .hero figcaption { left: .8rem; }
  .nieta .arco { max-width: 380px; }
  .causas-grid { grid-template-columns: 1fr; }
  .causa-insignia { grid-row: auto; }
  .meta-pista { width: auto; flex-direction: column; }
  .etapa { width: 100%; grid-template-columns: 1fr; }
  .cifras-lista li { grid-template-columns: 1fr; gap: .4rem; }
  .fuente { text-align: left; }
  .pie .envoltura { grid-template-columns: 1fr; }
  .barra-donar {
    display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--cal) 94%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
  }
  .barra-donar .boton { flex: 1; padding: .85rem 1rem; }
  /* La guirnalda se fija también en el celular: todo debe caber en una pantalla (8-oct-2026) */
  .abuelo-pin {
    min-height: 100vh; min-height: 100svh; justify-content: center;
    padding-block: calc(var(--barra-alto, 64px) + .5rem) 1rem;
  }
  /* Más grande que la pantalla: app.js la desliza al ritmo del scroll (sin movimiento reducido cabe completa) */
  .abuelo-pin .guirnalda { width: 165%; max-width: none; margin-inline: calc(-1 * var(--gutter)) 0; margin-bottom: 1.4rem; will-change: transform; }
  .abuelo-pin .abuelo-grid { gap: 1rem; }
  .abuelo-pin h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .abuelo-pin .lead { margin-top: .6rem !important; font-size: 1rem; }
  .abuelo-pin .anio-actual { font-size: clamp(3rem, 15vw, 4.2rem); }
  .abuelo-pin .hitos { margin-top: .5rem; gap: 0; }
  .abuelo-pin .hitos li { padding: .28rem 0 .28rem 1rem; font-size: .9rem; line-height: 1.3; }
  .abuelo-pin .hitos li.actual::before { top: .55rem; }
}
/* Con movimiento reducido no hay fijado ni deslizamiento: la guirnalda cabe completa */
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .abuelo-pin { min-height: 0; }
  .abuelo-pin .guirnalda { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
}
/* Celulares bajitos (iPhone SE y similares): sin la frase de apoyo para que quepan los siete hitos */
@media (max-width: 960px) and (max-height: 700px) {
  .abuelo-pin .lead { display: none; }
  .abuelo-pin .guirnalda { margin-bottom: .8rem; }
  .abuelo-pin .hitos li { padding-block: .2rem; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ===== Activadores: prueba social, empujón hacia la meta y actividad reciente ===== */
.prueba-social { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; font-size: .98rem; }
.prueba-social b { font-variant-numeric: tabular-nums; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--b-verde); flex: none; } /* estático: los datos del ticker son de ejemplo, no en vivo */
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(0, 152, 70, .5); } 70% { box-shadow: 0 0 0 9px rgba(0, 152, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 152, 70, 0); } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }
.marca-ejemplo { font-size: .78rem; font-weight: 600; color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 5px; padding: .05rem .35rem; }
.causas .marca-ejemplo { color: var(--texto-noche-3); border-color: var(--linea-noche); }
.ticker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; color: var(--texto-noche); font-size: .98rem; background: var(--noche-alta); border-radius: 999px; padding: .55rem 1rem; width: fit-content; max-width: 100%; }
.empujon { color: var(--maiz); font-weight: 600; font-size: .95rem; }
.acciones-causa { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: auto; padding-top: .4rem; }
.enlace-claro { color: #fff; }

/* ===== Flujo de donación ===== */
.donar { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); color: var(--tinta); }
.donar::backdrop { background: rgba(35, 45, 72, .62); backdrop-filter: blur(3px); }
.donar-caja { background: var(--cal); border-radius: 26px; padding: clamp(1.2rem, 4vw, 2rem); position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; }
.donar-cerrar { position: absolute; top: .8rem; right: .9rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cal-2); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.donar-pasos { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 3rem 1.2rem 0; font-size: .82rem; color: var(--tinta-suave); counter-reset: paso; }
.donar-pasos li { counter-increment: paso; display: flex; align-items: center; gap: .35rem; }
.donar-pasos li::before { content: counter(paso); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cal-2); font-weight: 700; font-size: .75rem; }
.donar-pasos li.activo { color: var(--tinta); font-weight: 600; }
.donar-pasos li.activo::before { background: var(--anil); color: #fff; }
.donar form, .donar section { display: grid; gap: .8rem; }
.donar h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
.donar label { font-weight: 600; font-size: .92rem; }
.donar input:not([type="checkbox"]):not([type="radio"]), .donar select { font: 500 1.05rem var(--texto); padding: .8rem .9rem; border-radius: 12px; border: 2px solid var(--linea); background: #fff; width: 100%; color: var(--tinta); }
.donar input:focus, .donar select:focus { border-color: var(--anil); outline: none; }
.donar-causa { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: center; background: #fff; border-radius: 16px; padding: .6rem; border: 1px solid var(--linea); }
.donar-causa img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.donar-causa select { margin-top: .25rem; padding: .5rem .6rem; }
.frecuencia { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; background: var(--cal-2); padding: .35rem; border-radius: 14px; }
.frecuencia input { position: absolute; opacity: 0; pointer-events: none; }
.frecuencia label { text-align: center; padding: .7rem .5rem; border-radius: 10px; cursor: pointer; font-size: 1rem; }
.frecuencia label small { display: block; font-weight: 500; font-size: .75rem; color: var(--tinta-suave); }
.frecuencia input:checked + label { background: #fff; box-shadow: 0 2px 10px rgba(43, 55, 87, .1); color: var(--anil); }
.frecuencia input:focus-visible + label { outline: 3px solid var(--maiz); }
.montos-d { display: grid; gap: .5rem; }
.monto-d { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: center; text-align: left; font: inherit; background: #fff; border: 2px solid var(--linea); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; color: var(--tinta); }
.monto-d b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.monto-d span { font-size: .92rem; color: var(--tinta-suave); }
.monto-d[aria-pressed="true"] { border-color: var(--anil); background: var(--cielo-claro); }
.otro-d { display: grid; gap: .3rem; }
.impacto-d { background: #f1f4cf; border-radius: 12px; padding: .8rem 1rem; font-weight: 500; }
.error-d { color: #a3261a; font-weight: 600; font-size: .92rem; }
.donar-siguiente { width: 100%; font-size: 1.08rem; }
.donar-confianza { font-size: .82rem; color: var(--tinta-suave); text-align: center; }
.donar-sub { color: var(--tinta-suave); }
.check-d { display: grid !important; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 500 !important; }
.check-d input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--anil); }
.donar-botones { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .4rem; }
.donar-botones .enlace { background: none; border: 0; font: 600 1rem var(--texto); cursor: pointer; padding: .5rem 0; }
.resumen-d { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: .4rem 1rem; }
.resumen-d p { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); max-width: none; }
.resumen-d p:last-child { border-bottom: 0; }
.resumen-d span { color: var(--tinta-suave); }
.wompi-d { background: var(--cal-2); border-radius: 14px; padding: .9rem 1rem; }
.medios-d { font-size: .9rem; color: var(--tinta-suave); margin-top: .2rem; }
.aviso-prototipo { font-size: .85rem; color: var(--ala-noche); background: #f1f4cf; border-radius: 10px; padding: .6rem .8rem; }
.gracias-d { text-align: center; justify-items: center; padding-top: .6rem; }
.gracias-d p { margin-inline: auto; }
.bombillo-gracias { width: 96px; height: auto; overflow: visible; margin-block: 1rem .4rem; }
.vidrio-g { fill: #3b4870; transition: fill .8s ease, filter .8s ease; }
.vidrio-g.prendido { fill: var(--maiz); filter: drop-shadow(0 0 10px var(--maiz)) drop-shadow(0 0 26px var(--maiz)); }
.mensual-d { background: var(--cielo-claro); border-radius: 16px; padding: 1rem; display: grid; gap: .8rem; justify-items: center; }

/* ===== Empujón a mitad de página ===== */
.empuje { position: fixed; z-index: 40; right: 20px; bottom: 20px; max-width: 360px; background: var(--tinta); color: #fff; border-radius: 20px; padding: 1.1rem 3rem 1.1rem 1.2rem; display: grid; gap: .8rem; box-shadow: 0 20px 50px rgba(35, 45, 72, .35); }
.empuje[hidden] { display: none; } /* sin esto, display:grid anulaba el atributo hidden y el empujón se veía siempre */
.empuje p { color: var(--texto-noche); }
.empuje b { color: #fff; }
.empuje .boton { justify-self: start; }
.empuje-x { position: absolute; top: .5rem; right: .6rem; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; width: 36px; height: 36px; }
@media (max-width: 960px) {
  .empuje { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .monto-d { grid-template-columns: 6.3rem 1fr; }
}

/* =====================================================================
   HERO v02 · Moreicito sigue el cursor (7-oct-2026)
   La paleta oficial y el nombre del personaje siguen SIN decidir:
   se cambian aquí (colores) y en portada.js (PERSONAJE, WHATSAPP).
   ===================================================================== */
:root {
  /* Colores del logo (medidos por píxel). Paleta oficial POR CONFIRMAR */
  --marca-verde: var(--verde);
  --marca-azul: var(--azul-morei);
  --marca-azul-claro: var(--celeste);
  /* Fondo del hero: colores medidos en hero_data.json */
  --hero-fondo-texto: #0b4929;
  --hero-fondo-borde: #052516;
  --hero-fondo-arriba: #085531;
  --hero-fondo-abajo: #072616;
  /* Botón principal de donar */
  --boton-donar: var(--coral);
  --boton-donar-hover: var(--coral-claro);
  --barra-alto: 64px;
}
html { scroll-padding-top: calc(var(--barra-alto) + 8px); }

/* --- Barra superior fija --- */
.barra-sup {
  position: sticky; top: 0; z-index: 50;
  height: var(--barra-alto); margin-bottom: calc(var(--barra-alto) * -1);
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: var(--gutter); color: #fff;
  transition: background-color .3s, box-shadow .3s;
}
.barra-sup.solida {
  background: color-mix(in srgb, var(--indigo) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.barra-marca { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; min-height: 44px; }
.barra-marca span { font-family: var(--display); font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.barra-mariposa { width: 30px; height: auto; color: var(--marca-azul-claro); flex: none; }
.barra-menu { display: flex; align-items: baseline; margin-inline: auto; font-weight: 500; font-size: 1rem; }
.barra-menu span { margin-right: .45em; opacity: .7; }
.barra-menu a { text-decoration: none; padding-block: .6rem; }
.barra-menu a:hover { text-decoration: underline; text-underline-offset: .3em; }
.barra-donar-enlace {
  background: none; border: 0; color: inherit; cursor: pointer; padding: .6rem .2rem; min-height: 44px;
  font: 600 1rem/1 var(--texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em;
  text-decoration-color: var(--boton-donar);
}
.barra-donar-enlace:hover { color: var(--boton-donar); }
.hamburguesa { display: none; }

/* Menú del celular: capa oscura con desenfoque */
.menu-movil {
  position: fixed; inset: 0; z-index: 45;
  background: color-mix(in srgb, var(--indigo-hondo) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: calc(var(--barra-alto) + 2rem) var(--gutter) 2rem;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.menu-movil.abierto { opacity: 1; visibility: visible; transition: opacity .25s; }
.menu-movil nav { display: grid; gap: .3rem; justify-items: start; }
.menu-movil a { font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); color: #fff; text-decoration: none; padding-block: .35rem; }
.menu-movil .boton { margin-top: 1.4rem; min-width: 12rem; }

/* --- Hero --- */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--aviso-alto, 0px));
  min-height: calc(100svh - var(--aviso-alto, 0px));
  display: flex; align-items: center;
  padding: calc(var(--barra-alto) + 2rem) var(--gutter) 3rem;
  background: var(--hero-fondo-texto); color: #fff;
  touch-action: pan-y;
}
.portada-escena { position: absolute; inset: 0; z-index: -1; }
.portada-escena picture, .portada-poster { display: block; width: 100%; height: 100%; }
.portada-poster { object-fit: cover; object-position: 35% 30%; } /* igual que ALINEAR en portada.js */
.portada-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.portada-lienzo.listo { opacity: 1; }

.portada-texto { width: 100%; max-width: min(36rem, 40vw); } /* deja libre el ala del sombrero cuando gira a la izquierda */
.portada-etiqueta {
  font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: rgba(255, 255, 255, .9);
  filter: blur(4px); user-select: none; pointer-events: none;
}
.portada-titulo {
  position: relative; margin-top: 1.1rem;
  font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(2rem, 3.1vw, 3.2rem); line-height: 1.12; letter-spacing: -.01em;
  text-wrap: wrap; /* sin balance: el texto escrito y el completo deben cortar igual */
}
.maquina-visible { position: absolute; inset: 0; pointer-events: none; }
.maquina-visible .resto { color: transparent; }
.maquina-cursor { position: relative; }
.maquina-cursor::before {
  content: ""; position: absolute; left: .03em; top: .08em; width: .07em; height: 1em;
  background: var(--celeste); animation: parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }
/* Con la máquina activa, el texto real sigue ahí (lectores de pantalla y SEO) pero transparente */
.maquina .portada-titulo .maquina-texto { color: transparent; }

/* Píldoras */
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2rem; }
.pildora {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .7rem 1.15rem; border-radius: 999px;
  font: 600 .98rem/1.15 var(--texto); text-decoration: none; text-align: center;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .2);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.pildora:hover { background: #fff; color: var(--hero-fondo-texto); border-color: #fff; }
.pildora:active { transform: scale(.98); }
.pildora:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.pildora-principal { background: var(--boton-donar); color: var(--tinta-coral); border-color: var(--boton-donar); font-size: 1.05rem; padding: .85rem 1.45rem; }
.pildora-principal:hover { background: var(--boton-donar-hover); border-color: var(--boton-donar-hover); color: var(--tinta-coral); }
.pildora-confianza { background: var(--celeste); border-color: var(--celeste); color: var(--ala-noche); }
.pildora-confianza:hover { background: var(--cielo); border-color: var(--cielo); color: var(--ala-noche); }
.pildora-borde { background: transparent; border-color: rgba(255, 255, 255, .6); }
.pildora-grupo { display: inline-flex; align-items: center; gap: .2rem; }
.pildora-copiar {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background-color .2s;
}
.pildora-copiar:hover { background: rgba(255, 255, 255, .14); }
.pildora-copiar svg { width: 18px; height: 18px; }
.pildora-copiado { font-size: .85rem; font-weight: 600; color: var(--boton-donar); }

@media (prefers-reduced-motion: no-preference) {
  .portada-acciones > * { animation: pildora-entra .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(400ms + var(--i, 0) * 60ms); }
  .portada-acciones > :nth-child(2) { --i: 1; }
  .portada-acciones > :nth-child(3) { --i: 2; }
  .portada-acciones > :nth-child(4) { --i: 3; }
  .portada-acciones > :nth-child(5) { --i: 4; }
  .hamburguesa span { transition: transform .25s, opacity .2s; }
}
@keyframes pildora-entra { from { opacity: 0; transform: translateY(8px); } }

/* En la portada, la barra de donación del celular se esconde: el hero ya tiene sus botones */
.barra-donar { transition: transform .3s; }
body.en-portada .barra-donar, body.en-capullo .barra-donar, body.en-guirnalda .barra-donar { transform: translateY(110%); }

/* Menú: hamburguesa en pantallas medianas y chicas */
@media (max-width: 900px) {
  .barra-menu { display: none; }
  .barra-donar-enlace { margin-left: auto; }
  .hamburguesa {
    display: grid; align-content: center; justify-items: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 10px;
  }
  .hamburguesa span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Celular y tableta vertical: textos arriba, Moreicito anclado abajo y más ancho que la pantalla.
   (La misma media query está en index.html y en portada.js: VERTICAL) */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .portada {
    flex-direction: column; align-items: stretch;
    padding: calc(var(--barra-alto) + .4rem) 0 0;
    background: linear-gradient(to bottom, var(--hero-fondo-texto) 0%, var(--hero-fondo-texto) 35%, var(--hero-fondo-borde) 100%);
  }
  /* el texto se monta un poco sobre el fundido del canvas (la franja de arriba es verde vacío) */
  .portada-texto { max-width: 36rem; padding-inline: var(--gutter); position: relative; z-index: 1; margin-bottom: -2.2rem; }
  .portada-escena {
    --ancho: min(180vw, 107vh);
    --ancho: min(180vw, 107svh);
    position: relative; inset: auto; z-index: 0; flex: none; order: 2;
    width: var(--ancho); aspect-ratio: 16 / 9;
    margin-top: auto; margin-left: calc(50% - var(--ancho) * .6755); /* la cara del muñeco, al centro */
    /* fundido arriba para que no se note el corte; termina antes del sombrero (11 % del alto) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
  }
  .portada-poster { object-position: 50% 50%; }
  .portada-etiqueta { font-size: .95rem; }
  .portada-titulo { font-size: clamp(1.45rem, 6.2vw, 2.2rem); margin-top: .8rem; line-height: 1.16; }
  .portada-acciones { gap: .45rem; margin-top: 1.1rem; }
  .pildora { font-size: .9rem; padding: .55rem .9rem; }
  .pildora-principal { font-size: 1rem; padding: .7rem 1.2rem; }
}
@media (max-width: 760px) {
  .aviso { font-size: .78rem; line-height: 1.35; padding-block: .35rem; }
  .barra-sup { gap: .8rem; }
}
/* Celulares bajos: estas dos píldoras se quedan en el menú para que Moreicito quepa en la primera pantalla */
@media (max-width: 760px) and (max-height: 720px) {
  .portada-acciones .pildora-opcional { display: none; }
  .portada-titulo { font-size: clamp(1.3rem, 5.8vw, 1.9rem); }
}
/* Pantallas muy angostas (320 px): "Donar" queda en el menú y en el botón principal del hero */
@media (max-width: 359px) {
  .barra-donar-enlace { display: none; }
  .hamburguesa { margin-left: auto; }
  .barra-marca span { font-size: 1.15rem; }
}


/* =====================================================================
   3b · Reconocimientos de la Dra. Rocío (v2, 8-oct-2026)
   Noche índigo con la lima del arco como luz de honor. El coral queda
   para un solo botón: "Súmate a su trabajo".
   ===================================================================== */
.honor {
  background: var(--indigo); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 9rem);
  background-image: radial-gradient(56rem 32rem at 92% -10%, rgba(219, 226, 133, .13), transparent 62%);
}
.honor h2, .honor h3, .honor h4 { color: #fff; }
.honor p { color: var(--texto-noche); }

.honor-cabeza { max-width: 54rem; }
.honor-cabeza h2 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1.03; letter-spacing: -.015em; }
.honor-cabeza h2 span { display: block; color: var(--lima); }
.honor-cabeza .lead { margin-top: 1.5rem; color: var(--texto-noche); max-width: 60ch; }

/* Destacado: Galardones Gacetas de Colombia */
.honor-destacado {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  background: var(--indigo-alto); border: 1px solid var(--linea-noche); border-radius: 28px;
  padding: clamp(1rem, 2.4vw, 1.8rem);
  box-shadow: 0 30px 60px rgba(15, 20, 35, .35);
}
.honor-premio { padding: .4rem clamp(0rem, 1.5vw, 1rem) .4rem 0; }
.honor-premio h3 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; color: var(--lima); }
.honor .honor-meta { margin-top: .7rem; font-size: .95rem; font-weight: 600; color: #fff; letter-spacing: .01em; }
.honor .honor-mencion { margin-top: 1.3rem; font-size: 1.15rem; line-height: 1.5; color: #fff; }
.honor-mencion strong { font-weight: 700; }
.honor-premio p + p { margin-top: .9rem; }
.honor .honor-fuente { font-size: .8rem; color: var(--texto-noche-3); margin-top: 1.3rem; }

/* Video de YouTube: se carga solo al hacer clic (más rápido y más privado) */
.honor-video { position: relative; }
.yt-fachada, .yt-marco {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: var(--indigo-hondo); border: 0; padding: 0; cursor: pointer; color: #fff;
}
.yt-fachada img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s; filter: brightness(.86); }
.yt-fachada:hover img { transform: scale(1.03); filter: brightness(.95); }
.yt-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lima); color: var(--ala-noche);
  box-shadow: 0 14px 34px rgba(15, 20, 35, .45);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.yt-play svg { width: 32px; height: 32px; margin-left: 4px; }
.yt-fachada:hover .yt-play { transform: scale(1.07); }
.yt-etiqueta {
  position: absolute; left: 14px; bottom: 14px; font-size: .88rem; font-weight: 600;
  background: rgba(35, 45, 72, .88); padding: .4rem .8rem; border-radius: 999px;
}
.yt-fachada:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.yt-marco { cursor: auto; }
.yt-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Palmarés: nombramientos y distinciones */
.palmares { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.palmares-cabeza h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.palmares-cabeza p { margin-top: .8rem; max-width: 52ch; }
.palmares-lista { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--linea-noche); }
.palmares-lista > li {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .4rem 1.8rem;
  padding-block: 1.7rem; border-bottom: 1px solid var(--linea-noche);
}
.palmares-anio { font-family: var(--display); font-size: 1.65rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.palmares-anio--texto { font-size: 1.2rem; padding-top: .2rem; }
.palmares-anio small { display: block; margin-top: .4rem; font-family: var(--texto); font-size: .8rem; line-height: 1.3; color: var(--texto-noche-3); }
.palmares-lista h4 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.honor .palmares-entidad { margin-top: .45rem; font-size: .95rem; font-weight: 600; color: var(--lima); }
.palmares-lista li > div > p:not(.palmares-entidad) { margin-top: .6rem; font-size: 1rem; }
.honor .palmares-anio { color: #fff; }
.palmares-lista blockquote { margin: .9rem 0 0; font-family: var(--display); font-size: 1.08rem; line-height: 1.45; color: #fff; max-width: 52ch; }
.palmares-nota {
  display: inline-block; margin-top: .8rem; font-size: .78rem; font-weight: 600; color: var(--texto-noche-3);
  border: 1px solid var(--linea-noche); border-radius: 6px; padding: .15rem .5rem;
}
.honor-ver {
  margin-top: 1rem; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); font: 600 .95rem var(--texto);
  transition: background-color .2s, color .2s, border-color .2s;
}
.honor-ver:hover { background: #fff; color: var(--indigo); border-color: #fff; }

.palmares-fotos { display: grid; gap: 1.2rem; position: sticky; top: calc(var(--barra-alto) + 1.5rem); }
.palmares-fotos figure { margin: 0; }
.palmares-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--indigo-hondo); }
.palmares-fotos figcaption { margin-top: .55rem; font-size: .82rem; line-height: 1.4; color: var(--texto-noche-3); }

/* Cierre */
.honor-cierre { margin: clamp(4rem, 8vw, 6.5rem) auto 0; max-width: 46rem; text-align: center; }
.honor-cierre blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.14; color: #fff; text-wrap: balance; }
.honor-cierre figcaption { margin-top: 1rem; color: var(--lima); font-weight: 600; }
.honor .honor-libro { margin: 1.4rem auto 0; max-width: 44ch; font-size: 1rem; }
.honor-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.6rem; margin-top: 2.2rem; }

/* Visor del certificado */
.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); max-height: 92dvh; overflow: visible; }
.visor::backdrop { background: rgba(35, 45, 72, .86); }
.visor img { width: 100%; height: auto; max-height: 82dvh; object-fit: contain; border-radius: 14px; background: #fff; }
.visor p { text-align: center; color: var(--texto-noche); font-size: .85rem; margin: .6rem auto 0; }
.visor-cerrar {
  position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--lima); color: var(--ala-noche); font-size: 1.6rem; line-height: 1; box-shadow: 0 6px 20px rgba(15, 20, 35, .35);
}

@media (max-width: 960px) {
  .honor-destacado, .palmares { grid-template-columns: 1fr; }
  .honor-premio { padding: 0 .4rem .6rem; }
  .palmares-fotos { position: static; grid-template-columns: 1fr 1fr; order: -1; }
}
@media (max-width: 560px) {
  .palmares-lista > li { grid-template-columns: 1fr; gap: .5rem; }
  .palmares-anio { font-size: 1.35rem; }
  .palmares-anio small { display: inline; margin: 0 0 0 .5rem; }
  .yt-play { width: 62px; height: 62px; }
  .visor-cerrar { top: 6px; right: 6px; }
}

/* =====================================================================
   5b · El capullo: scrollytelling cuadro a cuadro (8-oct-2026)
   Los colores de empalme son los medidos en los bordes de los fotogramas
   (capullo_data.json → formatos.<f>.colores_borde).
   ===================================================================== */
.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.capullo {
  --capullo-arriba: #232a44;   /* 16:9 · inicio.arriba */
  --capullo-abajo: #91bdcb;    /* 16:9 · final.abajo */
  --capullo-vecino-arriba: var(--blanco);   /* fondo de "Lo que hemos encendido" */
  --capullo-vecino-abajo: var(--ala-noche); /* fondo de "Causas activas" */
  position: relative; background: var(--capullo-arriba);
}
.capullo-empalme--arriba {
  height: 18vh; height: 18svh;
  background: linear-gradient(to bottom, var(--capullo-vecino-arriba), var(--capullo-arriba));
}
/* Safari en iPhone: el pin mide la pantalla GRANDE (sin barras). Con 100svh, al esconderse la barra
   de Safari quedaba una franja abajo que solo se cerraba al terminar el fijado (8-oct-2026).
   El dibujo se centra en la pantalla chica (capullo.js) y el borde se rellena con el degradado del fotograma. */
.capullo-pin { height: 100vh; height: 100lvh; --franja-safari: 0px; }
@supports (height: 100lvh) { .capullo-pin { --franja-safari: calc(100lvh - 100svh); } }
.capullo-sonda { position: absolute; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.capullo-escenario { position: relative; height: 100%; overflow: hidden; background: var(--capullo-arriba); }
.capullo-escenario picture, .capullo-poster { display: block; width: 100%; height: 100%; }
.capullo-poster { object-fit: cover; object-position: 50% 50%; }
.capullo-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.capullo-lienzo.listo { opacity: 1; }

/* Controles sobre la animación: legibles tanto en la noche del inicio como en el cielo del final */
.capullo-controles {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--franja-safari, 0px));
  display: flex; gap: .5rem; --foco: var(--celeste);
}
.capullo-boton {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem .5rem .8rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  background: rgba(35, 45, 72, .78); color: #fff; font: 600 .9rem/1 var(--texto);
  transition: background-color .2s, transform .2s;
}
.capullo-boton:hover { background: rgba(35, 45, 72, .95); }
.capullo-boton:active { transform: scale(.98); }
.capullo-boton svg { width: 18px; height: 18px; flex: none; }
.capullo-boton--reducido { display: none; }

/* Debajo de la animación: línea, botón y texto accesible */
.capullo-pie {
  background: linear-gradient(to bottom, var(--capullo-abajo) 0, var(--capullo-abajo) calc(100% - 18vh), var(--capullo-vecino-abajo) 100%);
  padding: clamp(2.5rem, 6vw, 4rem) 0 calc(18vh + 2rem);
  text-align: center; color: var(--ala-noche);
}
.capullo-linea { margin-inline: auto; font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.capullo-cta { margin-top: 1.6rem; font-size: 1.08rem; padding: 1rem 1.7rem; }
.capullo-cta.resaltado { animation: capullo-resalte 1.6s cubic-bezier(.2, .7, .2, 1) 1; }
@keyframes capullo-resalte {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 113, 125, .55); }
  35% { transform: scale(1.06); box-shadow: 0 10px 28px rgba(49, 49, 58, .28); }
  100% { transform: scale(1); box-shadow: 0 6px 18px rgba(49, 49, 58, .18); }
}
.capullo-texto { margin: 2rem auto 0; max-width: 38rem; text-align: left; }
.capullo-texto summary {
  cursor: pointer; font-weight: 600; text-align: center; list-style-position: inside;
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.capullo-texto > div { display: grid; gap: .7rem; margin-top: .6rem; padding: 1.1rem 1.3rem; background: rgba(255, 255, 255, .55); border-radius: 16px; }
.capullo-texto p { max-width: none; }

/* Reproductor del video con sonido */
.capullo-reproductor { border: 0; padding: 0; background: transparent; overflow: visible; max-width: min(94vw, 1100px); }
.capullo-reproductor::backdrop { background: rgba(35, 45, 72, .9); }
.capullo-reproductor video { display: block; width: 100%; max-height: 86dvh; border-radius: 14px; background: #000; }

/* Celular y tableta vertical: secuencia 9:16 y sus colores de borde */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .capullo { --capullo-arriba: #222840; --capullo-abajo: #90bbca; }
  .capullo-controles { left: var(--gutter); right: var(--gutter); justify-content: center; }
}

/* Movimiento reducido: sin fijado ni secuencia; póster final y el texto abierto (capullo.js abre el <details>) */
@media (prefers-reduced-motion: reduce) {
  .capullo-pin { height: auto; --franja-safari: 0px; }
  .capullo-escenario { aspect-ratio: 16 / 9; height: auto; }
  .capullo-lienzo, .capullo-boton[data-capullo-video="sonido"] { display: none; }
  .capullo-boton--reducido { display: inline-flex; }
  .capullo-empalme--arriba { background: linear-gradient(to bottom, var(--capullo-vecino-arriba), var(--capullo-abajo)); }
  .capullo, .capullo-escenario { background: var(--capullo-abajo); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px), (prefers-reduced-motion: reduce) and (orientation: portrait) and (max-width: 1100px) {
  .capullo-escenario { aspect-ratio: 9 / 16; max-height: 100svh; }
}


/* =====================================================================
   Cursor de mariposa (8-oct-2026) · lógica en cursor-mariposa.js
   Solo con ratón. Reposa con las alas entrecerradas; sobre lo pulsable las abre y revolotea;
   al hacer clic da un aletazo y suelta bombillos. En campos de texto vuelve el cursor normal.
   ===================================================================== */
html.con-cursor-mariposa, html.con-cursor-mariposa * { cursor: none !important; }
html.con-cursor-mariposa :is(input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="range"]), textarea, [contenteditable="true"]) { cursor: text !important; }
.cursor-mariposa {
  position: fixed; top: 0; left: 0; z-index: 2147483647; width: 36px; height: 36px;
  pointer-events: none; opacity: 0; transition: opacity .15s; will-change: transform; contain: layout style;
}
.cursor-mariposa.cm-visible { opacity: 1; }
.cursor-mariposa svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(20, 24, 40, .4));
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
  transform-origin: 18px 11.5px;
}
/* Halo de bombillo detrás de la cabeza: aparece sobre lo pulsable */
.cursor-mariposa::before {
  content: ""; position: absolute; left: 18px; top: 16px; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: radial-gradient(circle, rgba(219, 226, 133, .55) 0, rgba(219, 226, 133, .18) 45%, transparent 70%);
  transform: scale(.2); opacity: 0; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .25s;
}
.cm-giro { transform-box: view-box; transform-origin: 32px 20.4px; transform: rotate(calc(-24deg + var(--cm-giro, 0deg))); }
.cm-ala { transform-box: view-box; transform-origin: 32px 30px; transform: scaleX(.7); animation: cm-respiro 2.8s ease-in-out infinite; }
.cm-ala-ant { fill: var(--indigo); }
.cm-ala-pos { fill: var(--azul-real); }
.cm-ala-ant, .cm-ala-pos { stroke: rgba(255, 255, 255, .92); stroke-width: 1.4; stroke-linejoin: round; paint-order: stroke; }
.cm-borde { fill: none; stroke: var(--turquesa); stroke-width: 2.4; stroke-linecap: round; opacity: .5; }
.cm-punto { fill: var(--turquesa); }
.cm-punto--claro { fill: var(--celeste); }
.cm-coral { fill: var(--coral); }
.cm-coral--fino { fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.cm-antena { fill: none; stroke: #c3c9dc; stroke-width: 1.3; stroke-linecap: round; }
.cm-antena-punta { fill: var(--lima); }
.cm-cuerpo { fill: var(--ala-noche); stroke: rgba(255, 255, 255, .85); stroke-width: .9; paint-order: stroke; }

/* Sobre algo pulsable: abre las alas, revolotea y se enciende el halo */
.cursor-mariposa.cm-pulsable svg { transform: scale(1.14); }
.cursor-mariposa.cm-pulsable::before { transform: scale(1); opacity: 1; }
.cursor-mariposa.cm-pulsable .cm-ala { animation: cm-revoloteo .5s ease-in-out infinite alternate; }
/* Clic: aletazo (cierra y abre de golpe) */
.cursor-mariposa.cm-aleteo svg { transform: scale(1.22); }
.cursor-mariposa.cm-aleteo .cm-ala { animation: cm-aletazo .46s cubic-bezier(.3, .7, .3, 1) 1; }

@keyframes cm-respiro { 0%, 100% { transform: scaleX(.7); } 50% { transform: scaleX(.56); } }
@keyframes cm-revoloteo { from { transform: scaleX(1.06); } to { transform: scaleX(.5); } }
@keyframes cm-aletazo {
  0% { transform: scaleX(1.06); }
  28% { transform: scaleX(.08); }
  62% { transform: scaleX(1.22); }
  100% { transform: scaleX(1); }
}

/* Bombillos que suelta el aletazo */
.cm-bombillo {
  position: fixed; z-index: 2147483646; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px 1px var(--c); pointer-events: none;
  animation: cm-bombillo .75s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes cm-bombillo {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-ala, .cursor-mariposa.cm-pulsable .cm-ala { animation: none; }
  .cursor-mariposa.cm-pulsable .cm-ala { transform: scaleX(1.06); }
  .cursor-mariposa.cm-aleteo .cm-ala { animation-duration: .01s; }
  .cursor-mariposa svg, .cursor-mariposa::before { transition: none; }
}

/* =====================================================================
   3a · A quién acompañamos (8-oct-2026): lista explícita de poblaciones,
   cada una con su bombillo de color (los de la guirnalda).
   ===================================================================== */
.donde { padding-block: clamp(3rem, 7vw, 6rem); background: var(--cielo-claro); }
.donde .envoltura { max-width: 62rem; }
.donde-pregunta { font-family: var(--display); color: var(--azul-real); font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 0 0 .4rem; }
.donde h2 { margin: 0; text-wrap: balance; }
.donde-lista {
  list-style: none; padding: 0; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.donde-lista li {
  --c: var(--turquesa);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem .7rem .9rem; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta);
  font-weight: 600; font-size: clamp(.95rem, 1.6vw, 1.05rem); line-height: 1.25;
}
.donde-lista li::before {
  content: ""; flex: none; width: .7rem; height: .9rem; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 0 10px color-mix(in srgb, var(--c) 55%, transparent);
}
.donde-lista li:nth-child(5n+1) { --c: var(--coral); }
.donde-lista li:nth-child(5n+2) { --c: var(--lima); }
.donde-lista li:nth-child(5n+3) { --c: var(--turquesa); }
.donde-lista li:nth-child(5n+4) { --c: var(--verde); }
.donde-lista li:nth-child(5n+5) { --c: var(--azul-morei); }
.donde-cierre { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--tinta-suave); max-width: 40rem; }

/* =====================================================================
   Logo real en la barra superior (8-oct-2026, pedido del usuario).
   Versión "sobre verde" del vector v01 (LOGOS VECTOR v01/morei-logo-sobre-verde_v01.svg):
   arco, globo y mariposa a color; "Morei" azul; abuelos y "Fundación" en blanco. Sin disco: directo sobre el verde.
   Grande mientras se ve la portada; se encoge cuando la barra se vuelve sólida (índigo).
   ===================================================================== */
.barra-sup { overflow: visible; }
.barra-marca { position: relative; z-index: 2; align-self: flex-start; padding-top: 10px; }
.barra-logo {
  display: block; flex: none; height: 148px; aspect-ratio: 2353/2397;
  filter: drop-shadow(0 4px 14px rgba(3, 28, 15, .35));
  transition: height .35s cubic-bezier(.3, .7, .3, 1);
}
.barra-logo { position: relative; }
.barra-logo picture { display: block; width: 100%; height: 100%; transition: opacity .3s; }
.barra-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Sobre la barra índigo el logo pequeño a color se pierde: se cambia por la versión blanca de una tinta */
.barra-logo .barra-logo-solida { position: absolute; inset: 0; opacity: 0; }
.barra-sup.solida .barra-logo > picture:first-child { opacity: 0; }
.barra-sup.solida .barra-logo .barra-logo-solida { opacity: 1; }
.barra-sup.compacta .barra-marca, .barra-sup.solida .barra-marca { padding-top: 5px; }
.barra-sup.compacta .barra-logo, .barra-sup.solida .barra-logo { height: 54px; }
@media (max-width: 760px) {
  .barra-logo { height: 92px; }
  .barra-marca { padding-top: 8px; }
  .barra-sup.compacta .barra-logo, .barra-sup.solida .barra-logo { height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .barra-logo { transition: none; } }

/* =====================================================================
   10 · Aliados con logos (8-oct-2026). Tarjetas iguales; cada logo con su escala óptica (--esc).
   9-oct-2026: 9 aliados. Filas de 3 centradas (flex), 2 en el celular; la tarjeta suelta queda centrada.
   ===================================================================== */
.aliados { padding-block: clamp(3.5rem, 7vw, 6rem); }
.aliados-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2.5rem; border-top: 1px solid var(--linea); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.aliados-pre { font-family: var(--display); color: var(--azul-real); font-size: 1.1rem; margin: 0 0 .3rem; }
.aliados-cabeza h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); text-wrap: balance; }
.aliados-texto { margin-top: .6rem; color: var(--tinta-suave); max-width: 34rem; }
.aliados-logos { --col: 3; --sep: clamp(.8rem, 2vw, 1.4rem); list-style: none; padding: 0; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sep); }
.aliados-logos li {
  flex: 0 0 calc((100% - (var(--col) - 1) * var(--sep)) / var(--col)); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: clamp(.8rem, 2vw, 1.4rem);
  background: #fff; border: 1px solid var(--linea); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(49, 49, 58, .04), 0 8px 24px rgba(43, 55, 87, .06);
  transition: transform .25s cubic-bezier(.3, .7, .3, 1), box-shadow .25s;
}
.aliados-logos li:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(49, 49, 58, .05), 0 14px 32px rgba(43, 55, 87, .1); }
.aliados-logos li { position: relative; min-height: 0; }
.aliados-logos img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(78% * var(--esc, .9)); max-height: calc(70% * var(--esc, .9)); object-fit: contain; }
@media (max-width: 760px) { .aliados-logos { --col: 2; } .aliados-logos li { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .aliados-logos li { transition: none; } }

/* Palmarés limpio (8-oct-2026): solo títulos; lo dicho en audio lleva un asterisco y una sola nota al pie */
.palmares-ast { font-size: .55em; vertical-align: super; margin-left: .15em; color: var(--lima); font-family: var(--texto); font-weight: 600; }
.palmares-pie { margin-top: 1.2rem; font-size: .8rem; color: var(--texto-noche-3); }
.palmares-anio--texto { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* =====================================================================
   Relatos en video (8-oct-2026): reels verticales con póster; el reproductor se carga al clic (relatos.js)
   ===================================================================== */
.relatos-video { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.relatos-video h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.relatos-video-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.relato-video, .relato-video-marco {
  display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 22px; overflow: hidden;
  background: var(--ala-noche); box-shadow: 0 10px 30px rgba(43, 55, 87, .14);
}
.relato-video { position: relative; cursor: pointer; }
.relato-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.relato-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35, 45, 72, .35), transparent 45%); }
.relato-video:hover img, .relato-video:focus-visible img { transform: scale(1.04); }
.relato-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--indigo);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .25s;
}
.relato-play svg { width: 26px; height: 26px; margin-left: 3px; }
.relato-video:hover .relato-play { transform: scale(1.08); }
.relato-cita { margin: .9rem 0 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; color: var(--tinta); }
.relato-quien { margin: .35rem 0 0; font-size: .85rem; color: var(--tinta-suave); font-weight: 600; }
@media (max-width: 960px) {
  .relatos-video-lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .relatos-video-lista li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .relato-video img, .relato-play { transition: none; } }

/* Morei en video (8-oct-2026): material de archivo de 2009, pequeño y con marco */
.retrato-morei .arco img { filter: saturate(.92) contrast(1.03); }
.morei-video { margin-top: 1.4rem; max-width: 24rem; }
.morei-video .yt-fachada { aspect-ratio: 4 / 3; }

/* Del diario de Morei (8-oct-2026): enlaces a las notas conservadas de la web anterior */
.diario-notas { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.diario-notas h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.notas-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.nota-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tinta); background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.nota-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43, 55, 87, .1); }
.nota-card img { width: 100%; height: auto; flex: none; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.nota-fecha { margin: .8rem .9rem 0; font-size: .75rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.nota-card b { margin: .25rem .9rem 0; font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.25; }
.nota-resumen { margin: .3rem .9rem 1rem; font-size: .85rem; color: var(--tinta-suave); }
@media (max-width: 960px) {
  .notas-lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .notas-lista li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .nota-card { transition: none; } }
.diario-ver-todo { margin-top: 1.2rem; }

/* Página /diario/ (8-oct-2026): índice de todas las notas, con filtros por categoría (diario.js) */
.diario-pagina { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.diario-pagina h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.01em; margin-top: .8rem; }
.diario-pagina .lead { margin-top: 1rem; max-width: 60ch; }
.diario-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.diario-filtros a { padding: .5rem 1rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 600; font-size: .92rem; text-decoration: none; }
.diario-filtros a:hover { border-color: var(--anil); color: var(--anil); }
.diario-filtros a[aria-current] { background: var(--anil); border-color: var(--anil); color: #fff; }
.diario-filtros a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.diario-conteo { margin-top: 1rem; font-size: .9rem; color: var(--tinta-suave); }
.notas-lista.diario-lista { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (max-width: 960px) {
  .notas-lista.diario-lista { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
}

/* ---- Causas activas (8-oct-2026): la Navidad + los seis programas, cada uno enlaza a su página ---- */
.causas-programas { grid-row: span 2; background: var(--noche-alta); border-radius: 24px; padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; }
.causas-programas .pre { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--maiz); }
.causas-programas h3 { color: #fff; margin-top: -.4rem; }
.programas-mini { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea-noche); }
.programas-mini li { border-bottom: 1px solid var(--linea-noche); }
.programas-mini a { display: grid; grid-template-columns: 56px 1fr; gap: .9rem; align-items: center; padding: .7rem .4rem .7rem 0; color: inherit; text-decoration: none; border-radius: 12px; transition: background-color .2s; }
.programas-mini a:hover { background: rgba(168, 216, 228, .08); }
.programas-mini a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.programas-mini img { width: 56px; height: 56px; border-radius: 999px 999px 10px 10px; object-fit: cover; box-shadow: 0 0 0 2px var(--acento); }
.programas-mini span { display: grid; gap: .1rem; min-width: 0; }
.programas-mini small { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-noche); } /* el acento va solo en el aro de la foto: el azul y el verde no dan contraste AA sobre la noche */
.programas-mini b { color: #fff; font-size: 1.02rem; }
.programas-mini span span { font-size: .9rem; color: var(--texto-noche); }
.causas-programas .boton { align-self: flex-start; margin-top: .3rem; }

/* ---- PayPal con el valor ya puesto, dentro del paso 1 de la donación (8-oct-2026) ---- */
.paypal-d { display: grid; gap: .5rem; justify-items: center; padding-top: .3rem; }
.paypal-montos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .5rem; }
.paypal-monto { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--anil); text-decoration: none; font-variant-numeric: tabular-nums; }
.paypal-monto:hover { border-color: var(--anil); background: var(--cielo-claro); }
.paypal-montos .enlace { font-size: .88rem; }
@media (max-width: 960px) { .causas-programas { grid-row: auto; } }
.paypal-tarjeta { flex-basis: 100%; margin-top: .2rem; }

/* ---- Etapa "Oruga" con la voz de Kevin (8-oct-2026) ---- */
.etapa-cita { margin: 1.2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--coral); }
.etapa .etapa-cita p { margin-top: 0; font-family: var(--display); font-size: 1.12rem; line-height: 1.4; color: var(--tinta); }
.etapa-cita cite { display: block; margin-top: .4rem; font-style: normal; font-size: .85rem; color: var(--tinta-suave); }

/* ---- "Únete a la familia Morei" (8-oct-2026): el enlace de la política era azul real sobre el fondo azul real (invisible) ---- */
.familia .enlace { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; }
.familia .enlace:hover { color: #fff; }
.familia .letra-chica { opacity: 1 !important; color: var(--cielo) !important; }

/* ---- Guirnalda fijada con CSS (8-oct-2026) ----
   .con-recorrido la pone app.js solo si hay animación (GSAP cargó y no se pidió reducir el movimiento).
   overflow: clip recorta igual que hidden pero, a diferencia de hidden, deja funcionar position: sticky. */
.abuelo { overflow: clip; }
/* El recorrido se suma DESPUÉS de la sección (::after), así mide siempre 1700 px aunque la sección pase de 100vh */
.abuelo.con-recorrido .abuelo-recorrido::after { content: ""; display: block; height: 1700px; }
.abuelo.con-recorrido .abuelo-pin { position: sticky; top: 0; }
@media (max-width: 960px) {
  .abuelo.con-recorrido .abuelo-recorrido::after { height: 190vh; }
}

/* ---- Baile en la calle, pandemia 2020 (8-oct-2026). El original mide 640×288: no se agranda más para que no se pixele ---- */
/* 9-oct-2026: el baile de la pandemia como bloque destacado (tarjeta Índigo a todo el ancho, video + el porqué). El original mide 640×288: no se agranda más */
.baile-pandemia { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; max-width: none; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; background: var(--indigo); color: #fff; border-radius: 28px; padding: clamp(1.1rem, 2.6vw, 2rem); overflow: hidden; }
.baile-video { position: relative; }
.baile-pandemia video { display: block; width: 100%; height: auto; aspect-ratio: 640 / 288; border-radius: 18px; background: var(--tinta); object-fit: cover; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.baile-pandemia figcaption { font-size: .98rem; color: var(--texto-noche); }
.baile-pandemia figcaption p { margin: 0; }
.baile-pre { font-family: var(--display); color: var(--lima); font-size: 1rem; margin-bottom: .4rem; }
.baile-pandemia figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: #fff; margin-bottom: .6rem; text-wrap: balance; }
.baile-porque { margin-top: 1rem !important; padding: .9rem 1.1rem; background: var(--indigo-hondo); border-left: 3px solid var(--lima); border-radius: 0 14px 14px 0; color: var(--texto-noche-3); }
.baile-porque strong { color: #fff; }
@media (max-width: 960px) { .baile-pandemia { grid-template-columns: 1fr; } }

/* ---- Capullo fijado con CSS (8-oct-2026). capullo.js pone .con-recorrido y el largo en --capullo-recorrido ---- */
.capullo.con-recorrido .capullo-pin { position: sticky; top: 0; }
.capullo.con-recorrido .capullo-recorrido::after { content: ""; display: block; height: var(--capullo-recorrido, 0px); }
.programas-mini .mini-icono { width: 56px; height: 56px; border-radius: 999px 999px 10px 10px; display: grid; place-items: center; background: var(--indigo); color: var(--lima); box-shadow: 0 0 0 2px var(--acento); }
.programas-mini .mini-icono svg { width: 28px; height: 28px; }

/* =====================================================================
   7b · Donar con QR (9-oct-2026). Sección oscura (Índigo) entre Nietos y Cuentas claras;
   el QR va dentro de un celular dibujado en CSS. Botón secundario sobre oscuro: Lima.
   ===================================================================== */
.qr { background: var(--indigo); color: #fff; padding-block: clamp(4rem, 8vw, 7rem); }
.qr .envoltura { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.qr h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); text-wrap: balance; }
.qr-pre { font-family: var(--display); color: var(--lima); font-size: 1.1rem; margin: 0 0 .5rem; }
.qr .lead { color: var(--texto-noche); margin-top: 1rem; }
.qr .enlace { color: var(--lima); }
.qr-pasos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.qr-pasos li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.qr-num { width: 44px; height: 44px; border-radius: 999px 999px 12px 12px; background: var(--indigo-alto); color: var(--lima); font-family: var(--display); font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--lima); }
.qr-pasos b { display: block; font-size: 1.08rem; }
.qr-pasos div > span { display: block; color: var(--texto-noche-3); margin-top: .2rem; }
.qr-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; }
.qr-nota { margin-top: 1.4rem; font-size: .92rem; color: var(--texto-noche-3); padding: .9rem 1.1rem; background: var(--indigo-hondo); border: 1px solid var(--linea-noche); border-radius: 14px; }
/* Celular vestido (9-oct-2026, tarde): barra de estado, cabecera tipo app, tarjeta del QR, bancos, bombillos y mariposa */
.qr { overflow-x: clip; }
.qr-figura { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.qr-figura figcaption { font-size: .88rem; color: var(--texto-noche-3); text-align: center; max-width: 36ch; }
.qr-escena { position: relative; width: min(100%, 360px); padding: 1.6rem 1.4rem 1.2rem; }
.qr-telefono { position: relative; z-index: 1; background: var(--ala-noche); border-radius: 48px; padding: 10px; box-shadow: 0 34px 70px rgba(0, 0, 0, .42), inset 0 0 0 2px rgba(255, 255, 255, .14); }
.qr-pantalla { position: relative; background: linear-gradient(180deg, var(--cielo-claro) 0%, #fff 42%); border-radius: 40px; padding: .55rem .8rem 3.4rem; display: grid; gap: .7rem; overflow: hidden; }
.qr-pantalla::before { content: ""; position: absolute; top: 9px; left: 50%; translate: -50%; width: 84px; height: 22px; border-radius: 999px; background: var(--ala-noche); }
.qr-estado { display: flex; justify-content: space-between; align-items: center; min-height: 26px; padding: 0 .45rem; font: 600 .8rem var(--texto); color: var(--tinta); }
.qr-estado-iconos { display: inline-flex; align-items: flex-end; gap: 2px; }
.qr-estado-iconos i { display: block; width: 3px; background: var(--tinta); border-radius: 1px; }
.qr-estado-iconos i:nth-child(1) { height: 5px; } .qr-estado-iconos i:nth-child(2) { height: 8px; } .qr-estado-iconos i:nth-child(3) { height: 11px; }
.qr-estado-iconos b { position: relative; display: block; width: 20px; height: 10px; margin-left: 6px; border: 1.5px solid var(--tinta); border-radius: 3px; }
.qr-estado-iconos b::after { content: ""; position: absolute; inset: 1.5px; right: 4px; background: var(--verde); border-radius: 1px; }
.qr-app { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .55rem; align-items: center; }
.qr-app img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 8px rgba(43, 55, 87, .2); }
.qr-app b { display: block; font-family: var(--display); font-weight: 400; font-size: .95rem; line-height: 1.1; color: var(--tinta); }
.qr-app small { display: block; font-size: .7rem; color: var(--tinta-suave); margin-top: .1rem; }
.qr-chip { font-size: .66rem; font-weight: 700; letter-spacing: .02em; padding: .32rem .6rem; border-radius: 999px; background: var(--azul-real); color: #fff; white-space: nowrap; }
.qr-tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: .55rem .55rem .7rem; box-shadow: 0 12px 26px rgba(43, 55, 87, .12); display: grid; gap: .3rem; justify-items: center; }
.qr-tarjeta img { display: block; width: 100%; height: auto; }
.qr-datos { margin: 0; text-align: center; font-size: .72rem; color: var(--tinta-suave); line-height: 1.3; }
.qr-datos b { display: block; font-size: .95rem; letter-spacing: .1em; color: var(--tinta); }
.qr-bancos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.qr-bancos li { font-size: .66rem; font-weight: 600; color: var(--indigo); background: var(--cielo-suave); padding: .22rem .5rem; border-radius: 999px; }
.qr-red { margin: 0; text-align: center; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.qr-bombillo { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 22px 7px var(--c); opacity: .85; }
.qr-bombillo--1 { --c: var(--b-maiz); top: 4%; left: 0; }
.qr-bombillo--2 { --c: var(--b-rojo); top: 24%; right: 2px; }
.qr-bombillo--3 { --c: var(--b-azul); bottom: 28%; left: 4px; }
.qr-bombillo--4 { --c: var(--b-verde); bottom: 6%; right: 6%; }
.qr-mariposa { position: absolute; z-index: 2; top: -6px; right: -4px; width: 76px; height: 57px; rotate: -14deg; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.qr-sello { position: absolute; z-index: 2; left: -4px; bottom: 2.5%; display: flex; align-items: center; gap: .55rem; background: #fff; color: var(--tinta); border-radius: 999px; padding: .45rem .95rem .45rem .5rem; box-shadow: 0 16px 34px rgba(0, 0, 0, .32); font-size: .78rem; font-weight: 600; line-height: 1.15; }
.qr-sello svg { width: 32px; height: 32px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: #dcf1e4; color: var(--verde-tinta); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .qr-bombillo { animation: qr-flotar 5s ease-in-out infinite; }
  .qr-bombillo--2 { animation-duration: 6.5s; animation-delay: -2s; } .qr-bombillo--3 { animation-duration: 7s; animation-delay: -1s; } .qr-bombillo--4 { animation-duration: 5.5s; animation-delay: -3s; }
  .qr-sello { animation: qr-flotar 6s ease-in-out infinite; }
  .qr-mariposa { animation: qr-aletear 4s ease-in-out infinite; }
  @keyframes qr-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  @keyframes qr-aletear { 0%, 100% { rotate: -14deg; } 50% { rotate: -4deg; translate: 0 -4px; } }
}
@media (max-width: 400px) { .qr-sello { font-size: .72rem; padding-right: .75rem; } .qr-chip { font-size: .6rem; } }
@media (max-width: 960px) {
  .qr .envoltura { grid-template-columns: 1fr; }
  .qr-figura { order: 1; }
}