/* Digital Pro's · sitio web v3 · tokens del Design System v2 (identidad Meta) */
:root{
  --brand:#0F6E56; --brand-strong:#0A4F3E; --brand-light:#7CE3C3; --brand-tint:#DDF2EA;
  --accent:#E9A400; --accent-tint:#FFF2CC; --ink:#14212B; --ink-muted:#5B6B75; --ink-on-brand:#FFFFFF;
  --surface:#F5F8F6; --surface-raised:#FFFFFF; --dark:#0B1411; --dark-raised:#121E1A; --dark-hair:#223129; --dark-ink:#EEF3F1; --dark-muted:#A3B2AC;
  --hairline:#D3DDD8; --focus:#0F6E56; --ok:#1B7F3B; --warn:#B86E00; --critical:#B3261E; --scrim:#14212B99;
  --font-display:"Sora","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-sans:"Public Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:28px; --radius-pill:999px;
  --shadow-float:0 8px 24px rgba(20,33,43,.12); --shadow-deep:0 30px 80px rgba(0,0,0,.45);
  --container:640px; --gutter:16px; --measure:62ch;
  --touch-min:44px; --control-h:48px; --nav-h:64px;
  --fs-hero:clamp(38px,1.6rem + 3.4vw,84px); --fs-xl:clamp(32px,1.4rem + 2.4vw,58px); --fs-lg:clamp(26px,1.3rem + 1.4vw,40px); --fs-h:clamp(21px,1.2rem + .5vw,26px);
  --fs-metric:clamp(44px,2rem + 2.6vw,80px); --fs-body:clamp(16px,.95rem + .14vw,18px);
  --fluid-gutter:clamp(16px,.5rem + 1.5vw,32px); --fluid-section:clamp(64px,3rem + 4vw,128px);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --brand:#2FB38F; --brand-strong:#5CCDAA; --brand-tint:#163B31; --accent:#F5C242; --accent-tint:#3F3414;
  --ink:#EEF3F1; --ink-muted:#A3B2AC; --ink-on-brand:#0E1A17; --surface:#0E1A17; --surface-raised:#162521;
  --hairline:#2A3B35; --focus:#7CE3C3; --ok:#4CC36F; --warn:#F0A33A; --critical:#F27C74; --scrim:#00000099; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --brand:#2FB38F; --brand-strong:#5CCDAA; --brand-tint:#163B31; --accent:#F5C242; --accent-tint:#3F3414;
  --ink:#EEF3F1; --ink-muted:#A3B2AC; --ink-on-brand:#0E1A17; --surface:#0E1A17; --surface-raised:#162521;
  --hairline:#2A3B35; --focus:#7CE3C3; --ok:#4CC36F; --warn:#F0A33A; --critical:#F27C74; --scrim:#00000099; color-scheme:dark;
}
@media (min-width:768px){ :root{ --container:960px; --gutter:24px; } }
@media (min-width:1024px){ :root{ --container:1200px; --gutter:32px; } }
@media (min-width:1440px){ :root{ --container:1360px; } }
@media (min-width:1920px){ :root{ --container:1520px; } }
@media (hover:hover) and (pointer:fine){ :root{ --control-h:46px; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (prefers-contrast:more){ :root{ --ink-muted:var(--ink); } }

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.6 var(--font-sans);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--surface-raised);color:var(--ink);padding:10px 14px;border-radius:var(--radius-md);z-index:400;border:1px solid var(--hairline)}
.skip:focus{top:var(--space-4)}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance}
h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.045em;line-height:1}
h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.035em;line-height:1.06}
h3{font-size:var(--fs-h);font-weight:600;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lead{font-size:var(--fs-body);line-height:1.6;color:var(--ink-muted);max-width:var(--measure)}
.muted{color:var(--ink-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
section{padding-block:var(--fluid-section)}
.sec-head{display:grid;gap:var(--space-4);max-width:860px;margin-bottom:clamp(32px,5vw,64px)}

/* ---------- marca ---------- */
.wm{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap;display:inline-flex;align-items:baseline;color:var(--ink)}
.wm .apo{display:inline-block;width:.17em;height:.46em;border-radius:.1em;background:var(--accent);transform:skewX(-14deg);margin:0 .06em 0 .05em;position:relative;top:-.42em;transform-origin:center;animation:apo 5.2s cubic-bezier(.2,.8,.2,1) infinite}
/* El apóstrofo entra en el mismo ciclo de 5.2 s que la persona del logotipo: cae, rebota, descansa y se desvanece. */
@keyframes apo{
  0%,24%{opacity:0;transform:skewX(-14deg) translateY(-.4em)}
  36%{opacity:1;transform:skewX(-14deg) translateY(0) scale(1.18)}
  42%{transform:skewX(-14deg) translateY(0) scale(1)}
  86%{opacity:1;transform:skewX(-14deg)}
  94%,100%{opacity:0;transform:skewX(-14deg)}
}
.on-dark .wm{color:var(--dark-ink)} .on-dark .wm .apo{background:#F5C242}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-anim{display:block;flex:none}
.logo .logo-anim{width:40px;height:40px}
.logo .wm{font-size:22px}
.tema-claro{display:block} .tema-oscuro{display:none}
.on-dark .tema-claro{display:none} .on-dark .tema-oscuro{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tema-claro{display:none} :root:not([data-theme="light"]) .tema-oscuro{display:block} }
:root[data-theme="dark"] .tema-claro{display:none} :root[data-theme="dark"] .tema-oscuro{display:block}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);padding:0 24px;border-radius:var(--radius-md);font:600 15px/1 var(--font-sans);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn.primario{background:var(--brand);color:var(--ink-on-brand)}
.btn.primario:hover{background:var(--brand-strong)}
.on-dark .btn.primario{background:#2FB38F;color:#0B1411} .on-dark .btn.primario:hover{background:#5CCDAA}
.btn.secundario{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn.secundario:hover{border-color:var(--brand);color:var(--brand-strong)}
.on-dark .btn.secundario{color:var(--dark-ink);border-color:#2A3B35} .on-dark .btn.secundario:hover{border-color:#7CE3C3;color:#7CE3C3}
.btn.terciario{background:transparent;color:var(--brand-strong);padding:0 8px}
.acciones{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
@media (max-width:479px){.acciones{flex-direction:column;align-items:stretch}.acciones .btn{width:100%}}
.cta-fila{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:clamp(32px,4vw,48px)}

/* ---------- header (oscuro, se funde con el hero) ---------- */
.top{position:sticky;top:0;z-index:100;background:rgba(11,20,17,.82);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--dark-hair);padding-top:env(safe-area-inset-top,0px)}
.top .container{display:flex;align-items:center;gap:var(--space-4);min-height:var(--nav-h)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-8)}
.nav a.link{color:var(--dark-ink);text-decoration:none;font-weight:500;font-size:14.5px;padding:10px 0;opacity:.85}
.nav a.link:hover{opacity:1;color:#7CE3C3}
.menu-btn{margin-left:auto;display:none;width:var(--touch-min);height:var(--touch-min);border:1px solid var(--dark-hair);border-radius:var(--radius-md);background:transparent;color:var(--dark-ink);align-items:center;justify-content:center;cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px} .menu-btn span::after{position:absolute;top:6px}
@media (max-width:1023px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 auto 0;background:var(--dark);border-bottom:1px solid var(--dark-hair);flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2) var(--gutter) var(--space-6);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all var(--duration-base) var(--ease);box-shadow:var(--shadow-deep)}
  .nav.abierto{transform:none;opacity:1;pointer-events:auto}
  .nav a.link{min-height:var(--touch-min);display:flex;align-items:center;border-bottom:1px solid var(--dark-hair);font-size:17px}
  .nav .btn{margin-top:var(--space-4)}
}

/* ---------- hero oscuro ---------- */
.hero{background:var(--dark);color:var(--dark-ink);padding-block:clamp(56px,8vw,120px) clamp(48px,6vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 78% 40%, rgba(124,227,195,.14), transparent 70%),
  linear-gradient(rgba(124,227,195,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,227,195,.05) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px;pointer-events:none}
.hero .container{position:relative;display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:1024px){.hero .container{grid-template-columns:1.1fr .9fr}}
.hero .eyebrow{color:#7CE3C3}
.hero h1{margin:var(--space-4) 0 var(--space-6);color:#fff}
.hero .lead{color:var(--dark-muted);margin-bottom:var(--space-8)}
.hero .nota-cta{font-size:14px;color:var(--dark-muted);margin-top:var(--space-4)}
.hero-visual{display:grid;justify-items:center;gap:var(--space-3);position:relative;text-align:center}
.logo-pila{position:relative;width:clamp(200px,26vw,380px);aspect-ratio:1;filter:drop-shadow(0 30px 60px rgba(124,227,195,.18))}
.logo-pila .logo-grande{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--duration-slow) var(--ease)}
.logo-pila .logo-grande.activo{opacity:1}
.cand-nombre{display:grid;gap:4px;margin-top:var(--space-2)}
.cand-nombre b{font:600 clamp(22px,1.2rem + 1vw,30px)/1.15 var(--font-display);letter-spacing:-.02em;color:#fff}
.cand-nombre span{font-size:14px;color:var(--dark-muted)}
.hero-voto{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;align-items:center;margin-top:var(--space-2)}
.hero-voto .btn.secundario.votado{background:#F5C242;color:#0B1411;border-color:#F5C242}
.on-dark .btn.terciario{color:#7CE3C3} .on-dark .btn.terciario:hover{color:#fff}
.hero-conteo{font:500 12.5px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--dark-muted);min-height:1em}
.hero-conteo b{color:#F5C242;font-weight:500}
.hero-visual .lema{margin-top:var(--space-4);white-space:nowrap;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
@media (max-width:479px){.hero-voto{flex-direction:column;align-items:stretch;width:100%}.hero-voto .btn{width:100%}}
.cifras-hero{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-8);margin-top:clamp(40px,6vw,72px);padding-top:var(--space-8);border-top:1px solid var(--dark-hair)}
@media (min-width:768px){.cifras-hero{grid-template-columns:repeat(4,1fr)}}
.cifras-hero b{display:block;font:500 clamp(28px,2.6vw,40px)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.02em}
.cifras-hero span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--dark-muted)}
.pie-cifras{font-size:12.5px;color:var(--dark-muted);margin-top:var(--space-4)}

/* ---------- definición ---------- */
.definicion{padding-block:var(--space-12) 0}
.definicion p{max-width:var(--measure);font-size:15.5px;line-height:1.65;color:var(--ink-muted);padding-left:var(--space-6);border-left:3px solid var(--brand)}

/* ---------- problema: lista editorial ---------- */
.fallas{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.fallas li{display:grid;grid-template-columns:72px 1fr;gap:var(--space-4);padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--hairline);align-items:start}
@media (min-width:768px){.fallas li{grid-template-columns:120px 1fr 1.2fr}}
.fallas .n{font:500 14px/1 var(--font-mono);color:var(--brand);padding-top:6px}
.fallas h3{font-size:clamp(20px,1.3rem + .8vw,30px)}
.fallas p{color:var(--ink-muted);max-width:52ch}
@media (max-width:767px){.fallas p{grid-column:2}}
.giro{font:600 var(--fs-lg)/1.15 var(--font-display);letter-spacing:-.03em;margin-top:clamp(32px,5vw,56px);max-width:24ch;text-wrap:balance}
.giro span{display:block;font:400 var(--fs-body)/1.55 var(--font-sans);color:var(--ink-muted);margin-top:var(--space-3);letter-spacing:0;max-width:50ch}

/* ---------- cómo funciona: texto fijo + teléfono ---------- */
.alt{background:var(--surface-raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.como{display:grid;gap:clamp(32px,5vw,80px);align-items:start}
@media (min-width:1024px){.como{grid-template-columns:1fr 1fr}.como .texto{position:sticky;top:calc(var(--nav-h) + 32px)}}
.pasos{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:0}
.pasos li{display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);padding:var(--space-6) 0;border-top:1px solid var(--hairline)}
.pasos .pt{width:40px;height:40px;border-radius:var(--radius-pill);display:grid;place-items:center;font:500 13px var(--font-mono);background:var(--brand-tint);color:var(--brand-strong)}
.pasos li.humano .pt{background:var(--accent);color:#14212B}
.pasos h3{font-size:19px;margin-bottom:6px}
.pasos p{color:var(--ink-muted);font-size:15px}
.phone{width:min(100%,390px);margin-inline:auto;background:var(--dark);border-radius:var(--radius-xl);padding:14px;box-shadow:var(--shadow-deep);position:relative}
.phone .pantalla{background:#0E1A17;border-radius:20px;overflow:hidden;min-height:620px;display:flex;flex-direction:column;color:#EEF3F1}
.phone .barra{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#121E1A;border-bottom:1px solid var(--dark-hair)}
.phone .barra .av{width:36px;height:36px;border-radius:50%;background:#163B31;display:grid;place-items:center;color:#7CE3C3;font:600 14px var(--font-display)}
.phone .barra b{display:block;font:600 14px var(--font-display)} .phone .barra span{font-size:12px;color:var(--dark-muted)}
.phone .feed{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.phone .hora{align-self:center;font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--dark-muted);text-transform:uppercase}
.phone .burbuja{background:#162521;border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:14px;line-height:1.5;max-width:92%}
.phone .burbuja.respuesta{background:#163B31;border-radius:14px 14px 4px 14px;align-self:flex-end}
.compuerta{background:var(--surface-raised);color:var(--ink);border-radius:16px;padding:14px;display:grid;gap:12px;container-type:inline-size;border-top:4px solid var(--accent)}
.compuerta .quien{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-muted)}
.compuerta .prop{background:var(--surface);border-radius:var(--radius-md);padding:12px;font-size:14px;line-height:1.5;border:1px solid var(--hairline)}
.compuerta .acciones{gap:10px}
.compuerta .btn{min-height:44px;padding:0 16px;font-size:14px;flex:1}
@container (max-width:339px){.compuerta .acciones{flex-direction:column;align-items:stretch}}
.compuerta.aprobada .prop{border-color:var(--ok)}
.compuerta .estado{font-size:12.5px;color:var(--ink-muted)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font:600 12px/1 var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.chip.pendiente{background:var(--accent-tint);color:#14212B;box-shadow:inset 0 0 0 1px var(--accent)}
.chip.cumplida{background:var(--brand-tint);color:var(--ok)}
.chip.corriendo{background:#163B31;color:#7CE3C3}
.casilla{display:inline-block;width:12px;height:12px;border-radius:3px;background:currentColor;transform:skewX(-14deg)}

/* ---------- tabla comparativa ---------- */
.tabla-wrap{overflow-x:auto;margin-top:clamp(40px,6vw,72px);border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--surface-raised)}
.comparativa{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px}
.comparativa caption{text-align:left;font:600 15px var(--font-display);letter-spacing:-.01em;padding:16px 20px;border-bottom:1px solid var(--hairline)}
.comparativa th,.comparativa td{padding:14px 20px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.comparativa tbody tr:last-child th,.comparativa tbody tr:last-child td{border-bottom:0}
.comparativa thead th{font:600 11.5px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.comparativa tbody th{font-weight:500;color:var(--ink)}
.comparativa td{color:var(--ink-muted)}
.comparativa .dp{color:var(--ink);font-weight:600;background:var(--brand-tint)}
.comparativa thead th.dp{color:var(--brand-strong)}

/* ---------- agentes: lista ---------- */
.agentes{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.agentes li{display:grid;grid-template-columns:48px 1fr;gap:var(--space-4);padding:clamp(18px,2.5vw,26px) 0;border-bottom:1px solid var(--hairline);align-items:start}
@media (min-width:900px){.agentes li{grid-template-columns:56px 1.1fr 1.6fr .9fr;align-items:center}}
.agentes .av{width:48px;height:48px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-strong);display:grid;place-items:center;font:600 17px var(--font-display)}
.agentes h3{font-size:19px}
.agentes p{color:var(--ink-muted);font-size:15px}
.agentes .kpi{font:500 12px/1.5 var(--font-mono);letter-spacing:.02em;color:var(--brand-strong)}
@media (max-width:899px){.agentes p,.agentes .kpi{grid-column:2}}

/* ---------- método: línea de tiempo hacia la meta ---------- */
.ruta{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);position:relative}
@media (min-width:1024px){.ruta{grid-template-columns:repeat(5,1fr);gap:var(--space-4)}.ruta::before{content:"";position:absolute;left:20px;right:20px;top:19px;height:2px;background:var(--hairline)}}
.ruta li{position:relative;display:grid;gap:8px}
@media (min-width:1024px){.ruta li{padding-top:56px}}
.ruta .pt{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface);border:2px solid var(--brand);color:var(--brand-strong);display:grid;place-items:center;font:500 13px var(--font-mono);position:relative;z-index:1}
@media (min-width:1024px){.ruta .pt{position:absolute;top:0;left:0}}
.ruta li.meta .pt{background:var(--accent);border-color:var(--accent);color:#14212B}
.ruta .t{font:600 19px/1.2 var(--font-display);letter-spacing:-.02em}
.ruta .d{font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.ruta p{color:var(--ink-muted);font-size:14.5px}
.ruta .r{color:var(--ink);font-weight:600;font-size:14px}
@media (max-width:1023px){.ruta li{grid-template-columns:40px 1fr;column-gap:var(--space-4)}.ruta li > *{grid-column:2}.ruta li .pt{grid-column:1;grid-row:1 / span 5}}

/* ---------- resultados: banda oscura ---------- */
.banda-oscura{background:var(--dark);color:var(--dark-ink)}
.banda-oscura .eyebrow{color:#7CE3C3}
.banda-oscura h2{color:#fff}
.banda-oscura .lead{color:var(--dark-muted)}
.res{display:grid;gap:clamp(32px,5vw,80px);align-items:start}
@media (min-width:1024px){.res{grid-template-columns:1fr 1fr}}
.metricas{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--dark-hair)}
.metrica{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:baseline;padding:clamp(16px,2.4vw,24px) 0;border-bottom:1px solid var(--dark-hair)}
.metrica .l{font:600 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted)}
.metrica .v{font:500 var(--fs-metric)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:#fff;text-align:right}
.metrica .v.acc{color:#F5C242}
.metrica .p{grid-column:1 / -1;font-size:13.5px;color:var(--dark-muted)}
.metrica .ok{color:#4CC36F;font-weight:600}
.ejemplo{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);border:1px solid var(--dark-hair);border-radius:var(--radius-pill);padding:5px 10px;display:inline-block}
.promesas{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-4)}
.promesas li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--dark-muted)}
.promesas b{color:#fff}
.promesas .casilla{margin-top:6px;color:#7CE3C3;flex:none}
.banda-oscura .pie-cifras{margin-top:var(--space-4)}

/* ---------- quién ---------- */
.quien{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:1024px){.quien{grid-template-columns:1.25fr 1fr;align-items:start}}
.cita{font:500 clamp(22px,1.2rem + 1.4vw,36px)/1.25 var(--font-display);letter-spacing:-.025em;text-wrap:balance;max-width:26ch}
.cita::before{content:"“";color:var(--accent);margin-right:2px}
.cita::after{content:"”";color:var(--accent);margin-left:2px}
.firma{margin-top:var(--space-6);display:grid;gap:4px}
.firma b{font:600 15px var(--font-display)} .firma span{font-size:14px;color:var(--ink-muted)}
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hairline)}
.cifras div{padding:var(--space-6) 0;border-bottom:1px solid var(--hairline)}
.cifras div:nth-child(odd){padding-right:var(--space-6);border-right:1px solid var(--hairline)}
.cifras div:nth-child(even){padding-left:var(--space-6)}
.cifras b{display:block;font:500 clamp(30px,2.6vw,44px)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cifras span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-muted);line-height:1.4}

/* ---------- para quién ---------- */
.para{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:900px){.para{grid-template-columns:1.2fr 1fr}}
.lista{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--hairline)}
.lista li{padding:14px 0;border-bottom:1px solid var(--hairline);font-size:16px;display:flex;justify-content:space-between;gap:12px}
.lista li::after{content:"→";color:var(--brand);font-family:var(--font-mono)}

/* ---------- faq ---------- */
.faqs{display:grid;gap:0;max-width:860px;border-top:1px solid var(--hairline)}
.faqs details{border-bottom:1px solid var(--hairline)}
.faqs summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--touch-min);padding:18px 0}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary h3{font-size:18px;margin:0;font-weight:500}
.faqs summary::after{content:"+";font:400 26px/1 var(--font-mono);color:var(--brand);flex:none}
.faqs details[open] summary::after{content:"−"}
.faqs details p{padding:0 0 var(--space-6);color:var(--ink-muted);max-width:var(--measure)}

/* ---------- contacto (oscuro) ---------- */
.contacto .wrap{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:1024px){.contacto .wrap{grid-template-columns:1fr 1fr;align-items:start}}
.datos{display:grid;gap:var(--space-6);align-content:start}
.datos .dato small{display:block;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:6px}
.datos .dato a{font:600 18px/1.3 var(--font-sans);color:#fff;text-decoration:none;word-break:break-word}
.datos .dato a:hover{color:#7CE3C3}
.form{display:grid;gap:var(--space-4);background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-lg);padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-deep)}
.form-titulo{font:600 20px var(--font-display);letter-spacing:-.02em}
.campo{display:grid;gap:6px}
.campo label{font:600 13px var(--font-sans)}
.campo input,.campo select,.campo textarea{font:400 16px var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);min-height:var(--control-h);padding:10px 12px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-tint)}
.campo textarea{min-height:110px;resize:vertical}
.dos{display:grid;gap:var(--space-4)}
@media (min-width:480px){.dos{grid-template-columns:1fr 1fr}}
.aviso{font-size:12.5px;color:var(--ink-muted)}
.enviado{font-size:14px;color:var(--ok);font-weight:600}

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--dark-muted);padding-block:var(--space-12) calc(var(--space-8) + env(safe-area-inset-bottom,0px));font-size:14px;border-top:1px solid var(--dark-hair)}
footer .container{display:grid;gap:var(--space-8)}
@media (min-width:768px){footer .container{grid-template-columns:1.4fr 1fr;align-items:end}}
footer .logo .logo-anim{width:48px;height:48px}
footer .logo .wm{font-size:24px}
footer a{color:var(--dark-ink);text-decoration:none}
footer a:hover{color:#7CE3C3}
footer .legal{display:flex;gap:var(--space-6);flex-wrap:wrap}
footer p{max-width:60ch}

/* ---------- whatsapp flotante ---------- */
.wa-flotante{position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px));z-index:150;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px 0 14px;border-radius:var(--radius-pill);background:#25D366;color:#0B1411;font:600 14px var(--font-sans);text-decoration:none;box-shadow:var(--shadow-float)}
.wa-flotante:hover{filter:brightness(.95)}
@media (max-width:479px){.wa-flotante span{display:none}.wa-flotante{padding:0 12px}}

/* ---------- encabezado: logotipo rotatorio (un candidato a la vez) y panel de votación ---------- */
.logo-rota{position:relative;width:40px;height:40px;flex:none;display:block}
.logo-rota .logo-anim{position:absolute;inset:0;width:40px;height:40px;opacity:0;transition:opacity var(--duration-slow) var(--ease)}
.logo-rota .logo-anim.activo{opacity:1}
.voto-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 10px;border-radius:var(--radius-pill);border:1px solid var(--dark-hair);background:rgba(255,255,255,.04);color:var(--dark-ink);font:500 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap;margin-left:var(--space-2);transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease)}
.voto-chip b{font-weight:600;color:#F5C242}
.voto-chip span{color:var(--dark-muted)}
.voto-chip:hover,.voto-chip[aria-expanded="true"]{border-color:#7CE3C3;background:rgba(124,227,195,.08)}
.voto-chip:hover span,.voto-chip[aria-expanded="true"] span{color:#7CE3C3}
@media (max-width:479px){.voto-chip b{display:none}.voto-chip{padding:0 10px}}
.voto-panel{position:absolute;top:100%;left:0;right:0;margin-inline:auto;width:min(100% - 2*var(--gutter),var(--container));background:var(--dark-raised);color:var(--dark-ink);border:1px solid var(--dark-hair);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-6);box-shadow:var(--shadow-deep);display:grid;gap:var(--space-4);z-index:110}
@media (min-width:768px){.voto-panel{left:auto;right:calc((100% - var(--container))/2);width:min(520px,100% - 2*var(--gutter));margin:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:var(--space-6)}}
.voto-panel[hidden]{display:none}
.voto-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.voto-pregunta{font:600 18px/1.3 var(--font-display);letter-spacing:-.01em;color:#fff}
.voto-cerrar{width:var(--touch-min);height:var(--touch-min);border-radius:50%;border:1px solid var(--dark-hair);background:transparent;color:var(--dark-ink);font:400 24px/1 var(--font-sans);cursor:pointer;flex:none}
.voto-cerrar:hover{border-color:#7CE3C3;color:#7CE3C3}
.voto-lista{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--dark-hair)}
.voto-lista li{display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--dark-hair)}
.voto-lista img{width:56px;height:56px;flex:none}
.voto-lista li > div:first-of-type{display:grid;gap:4px;min-width:0}
.voto-lista b{font:600 16px/1.2 var(--font-display);letter-spacing:-.01em;color:#fff}
.voto-lista li > div:first-of-type > span:not(.nivel){font-size:13px;color:var(--dark-muted)}
.voto-lista .nivel{display:block;height:6px;border-radius:999px;background:var(--dark-hair);overflow:hidden;margin-top:4px}
.voto-lista .nivel i{display:block;height:100%;width:0;background:#2FB38F;border-radius:999px;transition:width var(--duration-slow) var(--ease)}
.voto-lista li.mio b{color:#F5C242}
.voto-lista li.mio .nivel i{background:#F5C242}
.voto-col{display:grid;gap:4px;justify-items:center}
.voto-col .btn{min-height:40px;padding:0 14px;font-size:14px}
.voto-lista li.mio .btn{background:#F5C242;color:#0B1411;border-color:#F5C242}
.voto-col .cifra{font:500 12.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--dark-muted);min-height:1em}
.voto-estado{font-size:12.5px;line-height:1.45;color:var(--dark-muted)}
@media (max-width:479px){.voto-lista li{grid-template-columns:44px 1fr auto;gap:var(--space-3)}.voto-lista img{width:44px;height:44px}.voto-col .btn{padding:0 10px}}