/* Plan de Trabajo Cody Guamán · Chambo 2027–2031
   Concepto: una sola columna de lectura que se abre en dos en escritorio;
   tinta plana de la marca RAÍZ, sin degradados; el azul hondo marca los
   bloques de compromiso y el magenta solo subraya lo que se promete. */
/* Tipografías alojadas en el propio sitio (licencia SIL OFL)
   Anton: titulares, cifras y golpes (eco del logotipo RAÍZ). Barlow: todo lo demás. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2")}

:root{
  --hondo:#14456B;      /* azul hondo: titulares y bloques oscuros */
  --azul:#0F6E96;       /* azul medido del logo RAÍZ */
  --teal:#1A9DB6;       /* turquesa medido del logo RAÍZ (rellenos) */
  --teal-t:#0A6F84;     /* turquesa legible sobre blanco y hueso (5,4:1) */
  --mag:#BC1E76;        /* fucsia medido del logo RAÍZ (blanco encima 5,9:1) */
  --mag-t:#A5176A;      /* fucsia para texto y estados activos */
  --ladrillo:#B4602A;   /* solo como color de categoría (economía local) */
  --tinta:#10263A;
  --texto:#3C5163;
  --suave:#5C7183;
  --fondo:#F2F6F7;
  --papel:#FFFFFF;
  --linea:#D9E4E8;
  --hueso:#E9F1F3;
  --gris-moneda:#C9D6DC;

  --p-srv:var(--azul); --p-amb:var(--teal); --p-eco:var(--ladrillo); --p-mun:var(--hondo); --p-soc:var(--mag);

  --f-titular:"Anton", Impact, "Arial Narrow", sans-serif;
  --f-disp:"Barlow", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-text:"Barlow", "Segoe UI", Roboto, system-ui, sans-serif;

  --r-s:8px; --r-m:14px; --r-l:22px;
  --sombra:0 1px 0 rgba(20,69,107,.06), 0 14px 34px -22px rgba(20,69,107,.45);
  --ancho:1120px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mag);outline-offset:3px;border-radius:6px}
::selection{background:var(--teal);color:var(--tinta)}
.vis-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

section[id]{scroll-margin-top:110px}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--hondo);margin:0;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.1rem,6.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,4.4vw,2.6rem)}
h3{font-size:1.28rem}
p{margin:0}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.etiqueta{font-family:var(--f-disp);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-t)}
.lead{font-size:1.12rem;color:var(--texto);max-width:62ch}
.num{font-variant-numeric:tabular-nums}
.raiz{font-family:var(--f-disp);font-weight:600;letter-spacing:.06em;font-size:.72em;color:var(--mag-t);white-space:nowrap}

/* ---------- Barra superior ---------- */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--papel);border-bottom:1px solid var(--linea)}
.barra .envoltura{display:flex;align-items:center;gap:14px;min-height:62px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hondo);flex-shrink:0}
.marca img{height:40px;width:auto}
.marca b{font-family:var(--f-disp);font-weight:600;font-size:1.02rem;line-height:1.05;display:block}
.marca small{display:block;font-size:.72rem;color:var(--suave);letter-spacing:.02em}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;justify-content:safe flex-end}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--f-disp);font-weight:500;font-size:.95rem;color:var(--texto);text-decoration:none;padding:8px 10px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--hueso);color:var(--hondo)}
.nav a.activo{background:var(--hondo);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-family:var(--f-disp);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;line-height:1.1;transition:transform .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-mag{background:var(--mag);color:#fff}
.btn-mag:hover{background:var(--mag-t)}
.btn-hondo{background:var(--hondo);color:#fff}
.btn-hondo:hover{background:#0d3352}
.btn-borde{background:transparent;color:var(--hondo);box-shadow:inset 0 0 0 2px var(--hondo)}
.btn-borde:hover{background:var(--hueso)}
.btn-wa{background:#128C45;color:#fff}
.btn-wa:hover{background:#0F7239}
.btn-chico{padding:8px 14px;font-size:.9rem}
.barra .btn{flex-shrink:0}
@media (max-width:760px){
  .barra .envoltura{flex-wrap:wrap;gap:6px 10px;padding-block:8px}
  .nav{order:3;flex-basis:100%;justify-content:flex-start;margin-inline:-6px}
  .marca small{display:none}
  .barra .btn{margin-left:auto}
}

/* ---------- Franja de campaña ---------- */
.franja{background:var(--mag);color:#fff;text-align:center;font-family:var(--f-disp);font-weight:600;padding:9px 16px;font-size:1rem}
.franja b{font-size:1.15em;letter-spacing:.04em}

/* ---------- Portada ---------- */
.portada{padding-block:clamp(28px,6vw,64px) clamp(28px,5vw,48px);background:var(--papel)}
.portada .envoltura{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(24px,5vw,56px);align-items:center}
.portada .texto{display:grid;gap:20px;min-width:0}
.sello{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:600;font-size:.9rem;color:var(--hondo);background:var(--hueso);border-radius:999px;padding:6px 14px 6px 6px;justify-self:start}
.sello i{font-style:normal;background:var(--hondo);color:#fff;border-radius:999px;padding:3px 10px;font-size:.78rem;letter-spacing:.06em}
.portada h1 .linea2{display:block;color:var(--mag-t)}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linea)}
.cifra{background:var(--papel);padding:14px 14px 12px}
.cifra b{display:block;white-space:nowrap;font-family:var(--f-disp);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--hondo);line-height:1.05}
.cifra span{display:block;font-size:.82rem;color:var(--suave);line-height:1.3;margin-top:4px}
.foto-portada{position:relative;min-width:0}
.foto-portada img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:var(--r-l);background:var(--hueso)}
.foto-portada figcaption{position:absolute;left:14px;right:14px;bottom:14px;background:var(--papel);border-radius:var(--r-m);padding:12px 14px;box-shadow:var(--sombra);display:grid;gap:2px}
.foto-portada figcaption b{font-family:var(--f-disp);font-weight:600;color:var(--hondo);font-size:1.08rem;line-height:1.15}
.foto-portada figcaption span{font-size:.85rem;color:var(--texto);line-height:1.35}
@media (max-width:860px){
  .portada .envoltura{grid-template-columns:1fr}
  .foto-portada{order:-1;max-width:460px;width:100%;justify-self:center}
  .foto-portada img{aspect-ratio:5/4;object-position:50% 12%}
  .foto-portada figcaption{left:10px;right:auto;bottom:10px;padding:8px 12px}
  .foto-portada figcaption span{display:none}
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(48px,8vw,88px)}
.seccion.blanca{background:var(--papel)}
.seccion.oscura{background:var(--hondo);color:#E4EEF3;--p-mun:#9CC3DA}
.seccion.oscura h2,.seccion.oscura h3{color:#fff}
.seccion.oscura .etiqueta{color:#7FD3E0}
.seccion.oscura .lead{color:#C9DCE6}
.cabeza{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px);max-width:760px}

/* Método: tres pasos */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:paso}
.paso{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);padding:20px;display:grid;gap:8px;align-content:start}
.paso::before{counter-increment:paso;content:counter(paso);font-family:var(--f-disp);font-weight:600;width:36px;height:36px;border-radius:50%;background:var(--hueso);color:var(--hondo);display:grid;place-items:center;font-size:1.1rem}
.paso p{color:var(--texto);font-size:.98rem}
.paso h3{font-size:1.15rem}
@media (max-width:760px){.pasos{grid-template-columns:1fr}}
.cita-metodo{margin-top:24px;font-family:var(--f-disp);font-weight:500;font-size:clamp(1.15rem,2.6vw,1.45rem);color:var(--hondo);max-width:52ch;line-height:1.3}
.cita-metodo em{font-style:normal;color:var(--mag-t)}

/* ---------- De cada dólar ---------- */
.dolar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
.monedas{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:420px;width:100%}
.moneda{aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.14);transition:background .25s ease,transform .25s ease}
.moneda.obra{background:var(--teal)}
.moneda.tenue{opacity:.28}
.moneda.resalta{transform:scale(1.12)}
.leyenda-dolar{display:grid;gap:4px;margin-top:20px}
.leyenda-dolar button{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;background:transparent;border:0;padding:7px 10px;border-radius:var(--r-s);text-align:left;cursor:pointer;color:#D6E5EC;font-size:.95rem}
.leyenda-dolar button:hover,.leyenda-dolar button.activo{background:rgba(255,255,255,.08)}
.leyenda-dolar i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.3)}
.leyenda-dolar .obra i{background:var(--teal)}
.leyenda-dolar .obra{color:#fff;font-weight:700}
.leyenda-dolar b{font-family:var(--f-disp);font-weight:600;color:#fff}
.dolar-texto{display:grid;gap:18px}
.gran-cifra{font-family:var(--f-disp);font-weight:600;font-size:clamp(3rem,9vw,5.2rem);line-height:.9;color:#fff}
.gran-cifra small{display:block;font-size:.26em;color:#9FC6D6;font-weight:500;margin-top:10px;letter-spacing:.01em;line-height:1.3}
.capacidad{background:rgba(255,255,255,.06);border-radius:var(--r-m);padding:18px;display:grid;gap:12px}
.capacidad .tira{display:flex;height:22px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12)}
.capacidad .tira span{display:block;height:100%}
.capacidad .ejes{display:flex;justify-content:space-between;font-size:.82rem;color:#A9C6D3}
.capacidad p{font-size:.95rem;color:#D3E3EA}
.capacidad .mini-leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:#C2D7E0}
.capacidad .mini-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.nota-ley{border-left:3px solid var(--mag);padding:4px 0 4px 14px;font-size:.95rem;color:#D3E3EA}
.nota-ley b{color:#fff}
@media (max-width:860px){.dolar{grid-template-columns:1fr}.monedas{max-width:340px}}

/* ---------- Escucha ---------- */
.escucha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:start}
.barras{display:grid;gap:4px}
.barra-p{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 3.4em;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--r-s);border:0;background:transparent;cursor:pointer;text-align:left;font-size:.95rem;color:var(--tinta)}
.barra-p:hover{background:var(--hueso)}
.barra-p.activo{background:var(--hondo);color:#fff}
.barra-p .pista{height:12px;background:var(--hueso);border-radius:999px;overflow:hidden}
.barra-p.activo .pista{background:rgba(255,255,255,.18)}
.barra-p .pista i{display:block;height:100%;background:var(--azul);border-radius:999px}
.barra-p.activo .pista i{background:var(--teal)}
.barra-p .pct{font-family:var(--f-disp);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.respuesta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(18px,3vw,28px);display:grid;gap:14px;position:sticky;top:130px;box-shadow:var(--sombra)}
.respuesta h3{font-size:1.45rem}
.respuesta p{color:var(--texto)}
.respuesta .dato{font-family:var(--f-disp);font-weight:600;color:var(--mag-t);font-size:1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-p{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linea);background:var(--papel);border-radius:999px;padding:6px 12px 6px 8px;font-family:var(--f-disp);font-weight:500;font-size:.92rem;cursor:pointer;color:var(--hondo)}
.chip-p:hover{border-color:var(--hondo)}
.chip-p i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chip-p small{font-family:var(--f-text);font-size:.72rem;color:var(--suave);font-weight:400}
.nota{font-size:.84rem;color:var(--suave);line-height:1.5}
@media (max-width:860px){.escucha{grid-template-columns:1fr}.respuesta{position:static}}

/* ---------- Explorador de proyectos ---------- */
.filtros{display:grid;gap:12px;margin-bottom:22px}
.fila-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtro{border:1px solid var(--linea);background:var(--papel);border-radius:999px;padding:8px 14px;font-family:var(--f-disp);font-weight:500;font-size:.92rem;cursor:pointer;color:var(--texto);display:inline-flex;align-items:center;gap:8px}
.filtro i{width:10px;height:10px;border-radius:50%}
.filtro:hover{border-color:var(--hondo);color:var(--hondo)}
.filtro[aria-pressed="true"]{background:var(--hondo);border-color:var(--hondo);color:#fff}
.segmento{display:inline-flex;background:var(--hueso);border-radius:999px;padding:4px;gap:2px;flex-wrap:wrap}
.segmento button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font-family:var(--f-disp);font-weight:500;font-size:.9rem;cursor:pointer;color:var(--texto)}
.segmento button[aria-pressed="true"]{background:var(--papel);color:var(--hondo);box-shadow:0 1px 3px rgba(20,69,107,.18)}
.buscar{flex:1;min-width:min(260px,100%);border:1px solid var(--linea);border-radius:999px;padding:10px 16px;font:inherit;font-size:.95rem;background:var(--papel);color:var(--tinta)}
.buscar:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(46,124,166,.18)}
.contador{font-size:.9rem;color:var(--suave)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);padding:18px;display:grid;gap:10px;align-content:start;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.tarjeta:hover{border-color:var(--hondo);transform:translateY(-2px)}
.tarjeta .arriba{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prog{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--suave);letter-spacing:.02em}
.prog i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pill{font-family:var(--f-disp);font-weight:600;font-size:.72rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.alta{background:#FBE3EC;color:var(--mag-t)}
.pill.media{background:var(--hueso);color:var(--hondo)}
.pill.baja{background:#F1F3F4;color:var(--suave)}
.pill.gestion{background:#FFF1E2;color:#9A4E15}
.tarjeta h3{font-size:1.3rem}
.tarjeta h3 .raiz{display:block;margin-top:3px}
.tarjeta p{font-size:.95rem;color:var(--texto);line-height:1.45}
.tarjeta .pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--linea)}
.costo{font-family:var(--f-disp);font-weight:600;color:var(--hondo);font-size:.98rem}
.costo small{display:block;font-family:var(--f-text);font-weight:400;font-size:.72rem;color:var(--suave)}
.anios{display:grid;grid-template-columns:repeat(4,14px);gap:3px}
.anios i{height:14px;border-radius:3px;background:var(--hueso)}
.vacio{padding:30px;text-align:center;color:var(--suave);background:var(--papel);border-radius:var(--r-m);border:1px dashed var(--linea)}

/* ---------- Ficha (diálogo) ---------- */
.velo{position:fixed;inset:0;background:rgba(10,30,47,.55);z-index:80;display:grid;place-items:end center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.velo[hidden]{display:none!important}
.ficha{background:var(--papel);border-radius:var(--r-l);width:min(720px,100%);max-height:min(88vh,900px);overflow:auto;padding:clamp(20px,4vw,32px);display:grid;gap:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:sube .22s ease}
@keyframes sube{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:700px){.velo{place-items:center}}
.ficha .cierre{justify-self:end;border:0;background:var(--hueso);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--hondo);margin:-6px -6px -30px 0;position:relative;z-index:1}
.ficha h3{font-size:clamp(1.6rem,4vw,2.1rem);padding-right:40px}
.ficha .frase{font-family:var(--f-disp);font-weight:500;color:var(--mag-t);font-size:1.12rem;line-height:1.3}
.datos-ficha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-m);overflow:clip;margin:0}
.datos-ficha div{background:var(--papel);padding:10px 12px}
.datos-ficha dt{font-size:.72rem;color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
.datos-ficha dd{margin:2px 0 0;font-family:var(--f-disp);font-weight:600;color:var(--hondo);font-size:1rem;line-height:1.2}
@media (max-width:560px){.datos-ficha{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bloque-ficha{display:grid;gap:6px}
.bloque-ficha h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-t);font-weight:600}
.bloque-ficha p{color:var(--texto)}
.aviso-gestion{background:#FFF6EC;border-radius:var(--r-m);padding:12px 14px;color:#7A3F12;font-size:.95rem}
.partes{display:grid;gap:6px}
.partes div{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;padding:8px 12px;background:var(--fondo);border-radius:var(--r-s)}
.ficha .acciones{border-top:1px solid var(--linea);padding-top:14px}

/* ---------- Mi comunidad ---------- */
.comunidad{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,40px);align-items:start}
.selector{display:grid;gap:12px;position:sticky;top:130px}
.selector label{font-family:var(--f-disp);font-weight:600;color:var(--hondo)}
.selector select{font:inherit;font-size:1.05rem;padding:12px 14px;border-radius:var(--r-m);border:2px solid var(--hondo);background:var(--papel);color:var(--tinta);width:100%}
.lista-lugares{display:flex;flex-wrap:wrap;gap:6px;max-height:300px;overflow:auto;padding:2px}
.lista-lugares button{border:1px solid var(--linea);background:var(--papel);border-radius:999px;padding:5px 11px;font-size:.86rem;cursor:pointer;color:var(--texto)}
.lista-lugares button:hover{border-color:var(--hondo);color:var(--hondo)}
.lista-lugares button[aria-pressed="true"]{background:var(--mag);border-color:var(--mag);color:#fff}
.resultado{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(18px,3vw,28px);display:grid;gap:18px;box-shadow:var(--sombra);min-width:0}
.resultado .tit{display:grid;gap:4px}
.resultado h3{font-size:clamp(1.6rem,4vw,2.2rem)}
.resultado .tipo{font-size:.9rem;color:var(--suave)}
.menciones{display:grid;gap:8px}
.mencion{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:#FCEEF3;border-radius:var(--r-m);padding:12px 14px;border:0;text-align:left;cursor:pointer;color:var(--tinta);font-size:.95rem;line-height:1.45}
.mencion:hover{background:#F9E0EA}
.mencion b{font-family:var(--f-disp);font-weight:600;color:var(--mag-t);white-space:nowrap}
.zona-barras{display:grid;gap:6px}
.zona-barras div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) 3em;gap:10px;align-items:center;font-size:.9rem}
.zona-barras .pista{height:10px;background:var(--hueso);border-radius:999px;overflow:hidden}
.zona-barras .pista i{display:block;height:100%;background:var(--teal);border-radius:999px}
.zona-barras span:last-child{font-family:var(--f-disp);font-weight:600;text-align:right;color:var(--hondo)}
@media (max-width:860px){.comunidad{grid-template-columns:1fr}.selector{position:static}.lista-lugares{max-height:180px}}

/* ---------- Calendario ---------- */
.gantt-caja{overflow-x:auto;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(12px,2vw,20px)}
.gantt{min-width:640px;display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(4,minmax(0,1fr));column-gap:4px;row-gap:3px;font-size:.9rem}
.gantt .h{font-family:var(--f-disp);font-weight:600;color:var(--hondo);padding:6px 4px 10px;line-height:1.15}
.gantt .h small{display:block;font-family:var(--f-text);font-weight:400;color:var(--suave);font-size:.74rem}
.gantt .h.nota-27{grid-column:2;}
.gantt .nom{border:0;background:transparent;text-align:left;cursor:pointer;padding:5px 6px;border-radius:6px;color:var(--tinta);display:flex;align-items:center;gap:8px;font-size:.9rem}
.gantt .nom:hover{background:var(--hueso)}
.gantt .nom i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.gantt .c{background:var(--fondo);border-radius:4px;min-height:26px}
.gantt .c.on{border-radius:4px}
.gantt .c.on.g{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 5px,transparent 5px 10px)}
.leyenda-gantt{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.85rem;color:var(--texto)}
.leyenda-gantt i{display:inline-block;width:22px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--azul)}
.leyenda-gantt i.g{background-color:var(--azul);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 5px,transparent 5px 10px)}

/* ---------- Garantía laboral ---------- */
.garantia{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.garantia blockquote{margin:0;font-family:var(--f-disp);font-weight:600;font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.08;color:#fff}
.garantia blockquote span{color:#7FD3E0}
.garantia ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.garantia li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:#D3E3EA;font-size:.98rem}
.garantia li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--teal);margin-top:7px}
@media (max-width:860px){.garantia{grid-template-columns:1fr}}

/* ---------- Cuentas ---------- */
.cuentas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cuenta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);padding:18px;display:grid;gap:6px;align-content:start}
.cuenta .cuando{font-family:var(--f-disp);font-weight:600;font-size:.8rem;color:var(--mag-t);letter-spacing:.06em;text-transform:uppercase}
.cuenta h3{font-size:1.12rem}
.cuenta p{font-size:.93rem;color:var(--texto)}
@media (max-width:860px){.cuentas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cuentas{grid-template-columns:1fr}}
.revocatoria{margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:var(--hondo);color:#E4EEF3;border-radius:var(--r-l);padding:clamp(18px,3vw,28px)}
.revocatoria .art{font-family:var(--f-disp);font-weight:600;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;color:var(--teal)}
.revocatoria .art small{display:block;font-size:.3em;color:#9FC6D6;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.revocatoria p{font-size:1.05rem}
.revocatoria b{color:#fff}
@media (max-width:560px){.revocatoria{grid-template-columns:1fr}}

/* ---------- Cody ---------- */
.cody{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,5vw,56px);align-items:center}
.cody img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--r-l)}
.cody .texto{display:grid;gap:16px}
.cody .texto p{color:var(--texto);font-size:1.05rem;max-width:58ch}
.cody .texto .lema{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.8rem,5vw,2.8rem);color:var(--mag-t);line-height:1}
@media (max-width:860px){.cody{grid-template-columns:1fr}.cody img{max-width:440px;justify-self:center}}

/* ---------- Cierre y pie ---------- */
.cierre-cta{background:var(--teal);color:var(--tinta);padding-block:clamp(40px,7vw,72px)}
.cierre-cta .envoltura{display:grid;gap:18px;justify-items:start}
.cierre-cta h2{color:var(--tinta);max-width:22ch}
.cierre-cta p{max-width:60ch;font-size:1.05rem}
.copiado{font-size:.9rem;font-weight:700;color:var(--hondo);min-height:1.4em}
.pie-pagina{background:#0C2D47;color:#A9C2D0;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));font-size:.88rem}
.pie-pagina .envoltura{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}
.pie-pagina h4{color:#fff;font-size:1rem;margin-bottom:10px}
.pie-pagina ol{margin:0;padding-left:18px;display:grid;gap:6px}
.pie-pagina a{color:#7FD3E0}
.pie-pagina .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;line-height:1.55}
@media (max-width:760px){.pie-pagina .envoltura{grid-template-columns:1fr}}

@media (max-width:560px){
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tarjeta{padding:14px;gap:8px}
  .tarjeta h3{font-size:1.1rem}
  .tarjeta p{font-size:.88rem}
  .tarjeta .arriba{flex-wrap:wrap}
  .tarjeta .prog{display:none}
  .costo small{display:none}
}
@media (max-width:760px){
  #f-prog{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  #f-prog::-webkit-scrollbar{display:none}
  #f-prog .filtro{flex-shrink:0}
  .segmento button{padding:7px 11px;font-size:.85rem}
}

/* =================== V2: más movimiento, menos texto =================== */
.sello{padding:4px 14px 4px 4px}
.sello img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.portada{position:relative;padding-bottom:0;overflow:hidden}
.portada .envoltura{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);position:relative;z-index:1}
.portada .lead{font-size:1.25rem;color:var(--hondo);font-family:var(--f-disp);font-weight:500}

/* Reproductor de clips verticales */
.reproductor{display:grid;gap:12px;justify-items:center;min-width:0}
.pantalla{position:relative;width:min(340px,100%);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:var(--hondo);box-shadow:0 30px 60px -30px rgba(20,69,107,.6),0 0 0 8px var(--papel),0 0 0 9px var(--linea);cursor:pointer}
.play-centro{position:absolute;inset:auto 14px 14px auto;z-index:6;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.play-centro svg{width:24px;height:24px;fill:var(--hondo)}
.pantalla.corre .play-centro{opacity:.55;transition:opacity .3s}
.pantalla.corre:hover .play-centro{opacity:1}
.clips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.clips button{width:52px;height:52px;border-radius:50%;border:2px solid var(--linea);background:var(--papel);color:var(--hondo);display:grid;place-items:center;cursor:pointer;padding:10px;transition:transform .2s ease,background .2s ease}
.clips button:hover{transform:translateY(-2px)}
.clips button[aria-selected="true"]{background:var(--hondo);border-color:var(--hondo);color:#fff}
.clips svg{width:100%;height:100%}
.clip-titulo{font-family:var(--f-disp);font-weight:600;color:var(--hondo);font-size:1rem;text-align:center;min-height:1.4em}

/* Paisaje de Chambo */
.paisaje{position:relative;height:clamp(120px,16vw,220px);margin-top:clamp(18px,3vw,36px)}
.paisaje svg{position:absolute;inset:0;width:100%;height:100%}
.cerro-lejos{fill:#BCD5E1}.nieve{fill:#fff}
.cerro-medio{fill:#7FB7C4}.campo1{fill:#8CC49F}
.parcelas path{stroke:#6FAE86;stroke-width:3;fill:none;stroke-linecap:round}
.rio{fill:none;stroke:var(--teal);stroke-width:7;stroke-linecap:round;stroke-dasharray:22 16;animation:corre 3s linear infinite}
.pueblo rect{fill:#fff;stroke:#C8D6DC;stroke-width:1.5}
.pueblo .techo{fill:var(--ladrillo)}
.pueblo .iglesia{fill:#fff}
.pueblo .cupula{fill:var(--azul)}
.pueblo .cruz{stroke:var(--hondo);stroke-width:3;stroke-linecap:round}
.horno path{fill:var(--ladrillo)}
.humo{fill:#DCE6EA;animation:humo 4.5s ease-out infinite;transform-box:fill-box;transform-origin:center}
.h2{animation-delay:1.5s}.h3{animation-delay:3s}
.nubes{fill:#fff;animation:nubes 40s linear infinite alternate}
@keyframes corre{to{stroke-dashoffset:-76}}
@keyframes humo{0%{transform:translate(0,0) scale(.6);opacity:.9}100%{transform:translate(-30px,-70px) scale(2.2);opacity:0}}
@keyframes nubes{to{transform:translateX(120px)}}

/* Revelado al hacer scroll (visible por defecto; anima solo si JS lo pide) */
.js-anima .revela.listo{animation:entra .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}

/* Iconos que se dibujan */
.ico{width:100%;height:100%;display:block}
.dibuja .ico [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
.js-anima .dibuja.listo .ico [pathLength]{animation:traza 1.2s ease-out both}
.js-anima .dibuja.listo .ico [pathLength]:nth-child(2){animation-delay:.15s}
.js-anima .dibuja.listo .ico [pathLength]:nth-child(3){animation-delay:.3s}
.js-anima .dibuja.listo .ico [pathLength]:nth-child(n+4){animation-delay:.45s}
@keyframes traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Pasos con icono */
.paso::before{display:none}
.paso{justify-items:start;padding:24px}
.paso-ico{width:72px;height:72px;border-radius:22px;background:var(--hueso);color:var(--hondo);padding:14px;display:block}
.paso:nth-child(1) .paso-ico{color:var(--tealT,var(--teal-t))}
.paso:nth-child(3) .paso-ico{color:var(--mag-t)}
.paso p{font-size:1rem}

/* Tarjetas con icono grande */
.tarjeta .ico-p{width:64px;height:64px;padding:12px;border-radius:20px;background:var(--hueso);transition:transform .25s ease}
.tarjeta:hover .ico-p{transform:rotate(-6deg) scale(1.08)}
.tarjeta h3{font-size:1.22rem}
.tarjeta .arriba{align-items:flex-start}

/* Monedas: animación de llenado */
.js-anima .monedas:not(.listo) .moneda.obra{background:rgba(255,255,255,.14)}
.js-anima .monedas.listo .moneda{animation:moneda .5s ease-out both}
@keyframes moneda{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}

/* Barras que crecen */
.js-anima .barras:not(.listo) .pista i{width:0!important}
.pista i{transition:width 1s cubic-bezier(.2,.8,.2,1)}
.js-anima .gantt-caja:not(.listo) .c.on{transform:scaleX(0)}
.gantt .c.on{transform-origin:left center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* Cuentas con icono */
.cuentas{grid-template-columns:repeat(4,minmax(0,1fr))}
.cuenta{justify-items:start;gap:10px}
.cuenta .c-ico{width:60px;height:60px;padding:12px;border-radius:18px;background:var(--hueso);color:var(--hondo)}
.cuenta h3{font-size:1.05rem;line-height:1.2}
@media (max-width:860px){.cuentas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Garantía: lista breve */
.garantia li{font-size:1.1rem;color:#E4EEF3}

/* Cody */
.cody .texto p{font-size:1.15rem}

/* Descargas de video */
.descargas{display:grid;gap:12px;margin-top:10px;width:100%}
.descargas h3{color:var(--tinta);font-size:1.2rem}
.lista-videos{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;max-width:100%}
.lista-videos a{flex-shrink:0;width:120px;display:grid;gap:6px;text-decoration:none;color:var(--tinta);font-family:var(--f-disp);font-weight:500;font-size:.85rem;line-height:1.15}
.lista-videos img{width:120px;aspect-ratio:9/16;object-fit:cover;border-radius:14px;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}

@media (max-width:860px){
  .portada .envoltura{grid-template-columns:1fr}
  .pantalla{width:min(300px,78vw)}
}
@media (prefers-reduced-motion:reduce){.rio,.humo,.nubes{animation:none}}

/* =================== V3: Anton + Barlow =================== */
body{font-weight:400;font-size:18px}
h1,h2,.gran-cifra,.cifra b,.revocatoria .art,.cody .texto .lema,.garantia blockquote,.costo,.datos-ficha dd,.barra-p .pct{font-family:var(--f-titular);font-weight:400;letter-spacing:.01em}
h1,h2,.garantia blockquote,.cody .texto .lema{text-transform:uppercase;line-height:1}
h1{font-size:clamp(2.4rem,6.4vw,4.3rem)}
h2{font-size:clamp(2rem,5vw,3.3rem)}
h3,h4{font-family:var(--f-disp);font-weight:700;letter-spacing:0}
.raiz{font-family:var(--f-disp);font-weight:700;letter-spacing:.14em;font-size:.42em;vertical-align:middle}
h2 .raiz{display:inline-block;margin-left:.3em}
.portada .lead{font-family:var(--f-disp);font-weight:600}
.etiqueta{font-family:var(--f-disp);font-weight:700;letter-spacing:.22em}
.btn,.nav a,.filtro,.segmento button,.sello,.pill,.chip-p,.clip-titulo,.marca b,.prog,.cuenta .cuando{font-family:var(--f-disp)}
.btn{font-weight:700;letter-spacing:.02em}
.cifra b{font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1}
.gran-cifra{font-size:clamp(3.4rem,10vw,6rem);line-height:.95}
.gran-cifra small{font-family:var(--f-disp);font-weight:500;letter-spacing:0}
.revocatoria .art small{font-family:var(--f-disp);font-weight:700}
.costo{font-size:1.15rem;letter-spacing:.02em}
.costo small{font-family:var(--f-disp)}
.tarjeta h3{font-size:1.25rem}
.garantia blockquote{font-size:clamp(2rem,5vw,3.4rem)}
.cody .texto .lema{font-size:clamp(2.4rem,6vw,3.8rem)}
.paso h3,.cuenta h3{font-weight:700}
/* sello de marca en la barra superior */
.marca b{font-family:var(--f-titular);font-weight:400;font-size:1.35rem;letter-spacing:.12em}
.marca small{font-family:var(--f-disp);font-weight:700;letter-spacing:.32em;font-size:.62rem;color:var(--mag-t)}
/* sonido del reproductor */
.sonido{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 14px;background:var(--hondo);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:.9rem;cursor:pointer}
.sonido svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sonido[aria-pressed="true"]{background:var(--mag)}
.controles{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
h1,h2,.garantia blockquote{line-height:1.07}

/* =================== V4: arco emocional =================== */
.portada h1{font-size:clamp(3rem,8.4vw,6rem);line-height:1}
.portada .lead{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;font-weight:500;color:var(--tinta);max-width:34ch}
.firma-hero{font-family:var(--f-titular);letter-spacing:.18em;text-transform:uppercase;color:var(--mag-t);font-size:1.05rem;display:flex;align-items:center;gap:12px}
.firma-hero::before{content:"";width:34px;height:2px;background:var(--mag)}
.confianza{font-size:.92rem;color:var(--suave);max-width:52ch}
.confianza a{color:var(--hondo);font-weight:700}
/* Lo que vivimos */
.vivencias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vivencia{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r-m);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.vivencia .v-ico{width:64px;height:64px;color:var(--teal);display:block}
.vivencia h3{color:#fff;font-size:1.25rem;line-height:1.25}
.vivencia p{color:#A9C6D3;font-size:.98rem}
.remate{margin-top:clamp(28px,5vw,48px);font-family:var(--f-titular);text-transform:uppercase;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.05;color:#fff}
.remate span{display:block;color:var(--teal)}
@media (max-width:960px){.vivencias{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.vivencias{grid-template-columns:1fr}.vivencia{grid-template-columns:56px minmax(0,1fr);align-items:start}.vivencia .v-ico{width:52px;height:52px;grid-row:span 2}}
/* Cody */
.valores{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.valores li{font-family:var(--f-disp);font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:999px;background:var(--hueso);color:var(--hondo)}
.valores li::before{content:"✓ ";color:var(--mag-t)}
/* Promesas */
.promesas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.promesa{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r-l);background:var(--fondo);border:1px solid var(--linea)}
.promesa .pr-ico{width:72px;height:72px;color:var(--hondo);display:block;padding:14px;border-radius:22px;background:#fff}
.promesa:nth-child(3n+2) .pr-ico{color:var(--teal-t)}
.promesa:nth-child(3n) .pr-ico{color:var(--mag-t)}
.promesa h3{font-family:var(--f-titular);font-weight:400;text-transform:uppercase;font-size:1.65rem;line-height:1.05;letter-spacing:.01em;color:var(--hondo)}
.promesa p{color:var(--texto)}
.abre{justify-self:start;border:0;background:transparent;color:var(--mag-t);font-family:var(--f-disp);font-weight:700;font-size:.95rem;cursor:pointer;padding:6px 0;display:inline-flex;gap:8px;align-items:center}
.abre span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mag);color:#fff;font-size:1rem;line-height:1}
.ver-todo{margin-top:24px;text-align:center}
@media (max-width:960px){.promesas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.promesas{grid-template-columns:1fr}}
/* Cifras en sección oscura */
.cifras-osc{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1);grid-template-columns:repeat(3,minmax(0,1fr))}
.cifras-osc .cifra{background:var(--hondo)}
.cifras-osc .cifra b{color:#fff}
.cifras-osc .cifra span{color:#A9C6D3}
.sub-cal{margin:clamp(32px,5vw,56px) 0 14px;font-size:1.3rem}
/* Cierre */
.cierre-cta h2{max-width:none}
.cierre-cta h2 span{display:block;color:var(--hondo)}

[hidden]{display:none!important}
.portada h1{line-height:1.08}

/* ===== V5 · foto de la papeleta (recortada): misma cara que verá el votante ===== */
.sello img{background:var(--teal);object-position:50% 0}
.firma-hero::before{display:none}
.firma-hero img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:52% 0;background:var(--teal);flex-shrink:0}
.cierre-top{display:grid;gap:20px;align-items:end;width:100%}
.cierre-txt{display:grid;gap:18px;justify-items:start}
.cara-pop{width:min(300px,72vw);aspect-ratio:600/650;position:relative;justify-self:center;order:-1}
.cara-pop::before{content:"";position:absolute;left:6.67%;right:6.67%;bottom:0;aspect-ratio:1;border-radius:50%;background:var(--hondo)}
.cara-pop::after{content:"";position:absolute;inset:0;background:url(../img/cody-papeleta.webp) 7.5% 200%/93.3% auto no-repeat;
  -webkit-mask-image:radial-gradient(43.33% 40% at 50% 60%,#000 99.4%,transparent 100%),linear-gradient(#000,#000);-webkit-mask-size:100% 100%,100% 60%;-webkit-mask-repeat:no-repeat;
  mask-image:radial-gradient(43.33% 40% at 50% 60%,#000 99.4%,transparent 100%),linear-gradient(#000,#000);mask-size:100% 100%,100% 60%;mask-repeat:no-repeat}
@media (min-width:860px){.cierre-top{grid-template-columns:1fr 320px}.cara-pop{order:0;width:320px}}

/* ===== V6 · «Lo que vivimos» interactivo ===== */
.sub-viv{color:#A9C6D3;margin:.4rem 0 0;font-size:1rem}
.yo-tambien{justify-self:start;font:inherit;font-family:var(--f-disp);font-weight:700;font-size:.95rem;color:#fff;background:transparent;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:44px;transition:background .2s ease,border-color .2s ease}
.yo-tambien:hover{border-color:#fff}
.yo-tambien[aria-pressed="true"]{background:var(--mag);border-color:var(--mag)}
.yo-tambien[aria-pressed="true"]::before{content:"✓ "}
.vivencia.marcada{background:rgba(188,30,118,.16);border-color:rgba(255,255,255,.28)}
.vivencia .eco{color:#fff;font-size:.98rem;margin:0}
.vivencia .eco a{color:#9ADFEA;font-weight:700}
#vivimos .remate{transition:transform .4s ease}
#vivimos .remate.encendido{transform:scale(1.04)}
@media (max-width:540px){.yo-tambien,.vivencia .eco{grid-column:1 / -1}}
/* V7 · Así se vota (solo en campaña) */
.asi-se-vota{display:grid;gap:6px;background:var(--mag);color:#fff;border-radius:22px;padding:16px 20px;max-width:520px;line-height:1.35}
.asi-se-vota>b{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.25rem}
.asi-se-vota span b{white-space:nowrap}

/* V8 · Iglesia Matriz de Chambo en el paisaje del inicio (fachada salmón, agujas rojizas) */
.pueblo .matriz .m-muro{fill:#F0B48E;stroke:#E39A72;stroke-width:1}
.pueblo .matriz .m-aguja{fill:var(--mag)}
.pueblo .matriz .m-vano{fill:#33465A}

/* V9 · plata propia */
.plata-propia{margin-top:18px;padding:16px 18px;border-radius:var(--r-m);background:rgba(255,255,255,.08);border-left:4px solid var(--teal)}
.plata-propia h3{margin:0 0 8px;font-size:1.1rem;color:#fff}
.plata-propia p{margin:0 0 8px;font-size:.95rem;line-height:1.5;color:#D3E3EA}
.plata-propia p:last-child{margin-bottom:0}

/* V10 · ficha de proyecto: cabecera compacta, botón de video, etiqueta en tarjetas */
.cabecera-ficha{display:flex;align-items:center;gap:14px}
.cabecera-ficha .ico-p{width:64px;height:64px;padding:12px;border-radius:18px;background:var(--hueso);flex-shrink:0}
.cabecera-ficha .ico-p svg{width:100%;height:100%;display:block}
.cabecera-ficha h3{padding-right:0;margin:2px 0 0}
.cabecera-ficha .prog{display:block}
.ficha .frase{font-size:1.25rem}
.ver-video{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;background:var(--hondo);color:#fff;border-radius:var(--r-m);padding:12px 14px;font-family:var(--f-disp)}
.ver-video .play{width:40px;height:40px;border-radius:50%;background:var(--mag);display:grid;place-items:center;font-size:.95rem;flex-shrink:0;padding-left:3px}
.ver-video b{display:block;font-size:1rem;font-weight:700}
.ver-video small{display:block;font-size:.82rem;opacity:.8}
.ver-video:hover .play{transform:scale(1.08)}
.tarjeta .pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pill.vid{background:var(--hondo);color:#fff}

/* V11 · pista de desplazamiento del calendario y barra fija móvil */
.pista-scroll{display:none;margin:-6px 0 10px;font-size:.84rem;color:var(--suave)}
@media (max-width:700px){.pista-scroll{display:block}}
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--linea);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25);transform:translateY(110%);transition:transform .25s ease}
.barra-fija .btn{flex:1;justify-content:center;text-align:center;padding:12px 10px;font-size:.95rem;white-space:nowrap}
@media (max-width:760px){.barra-fija{display:flex}.barra-fija.visible{transform:none}body.con-barra{padding-bottom:72px}}

/* V12 · botón único pausa/reproducir */
.sonido .ico-play{display:none}.sonido.en-pausa .ico-pausa{display:none}.sonido.en-pausa .ico-play{display:block;fill:#fff}

/* V13 · un solo control dentro de la animación: pausa mientras corre, play cuando está detenida */
.play-centro .ico-pausa{display:none;fill:none;stroke:var(--hondo);stroke-width:3;stroke-linecap:round}
.pantalla.corre .play-centro .ico-play{display:none}
.pantalla.corre .play-centro .ico-pausa{display:block}

/* 30-oct-2026 · logo Dr. Cody grande en la portada */
.logo-hero{display:block;width:min(100%,460px);height:auto;justify-self:start;margin-bottom:-4px}
@media (max-width:700px){.logo-hero{width:min(82%,340px)}}
/* 30-oct-2026 · lo que nos dijeron, sin cifras */
.barra-p.sin-cifra{grid-template-columns:2.2em minmax(0,1fr);font-size:1.02rem}
.barra-p.sin-cifra .pct{text-align:center;font-size:1.35rem;color:var(--mag)}
.barra-p.sin-cifra.activo .pct{color:#fff}
.chip-tema{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--hueso);color:var(--hondo);font-weight:600;font-size:.9rem;margin:0 6px 6px 0}