/* Fuentes alojadas en la propia web (antes Google Fonts: enviaba la IP del visitante a Google). Licencia SIL OFL. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/plex-sans-latin.woff2) format("woff2"); }

/* ¿A quién votarías? — sistema visual (segunda vuelta, 19 oct. 2026)
   Tinta y papel, como una noche electoral bien hecha. El único color de marca es el eje izquierda-derecha
   (rojo → neutro → azul), siempre como línea con sentido. El amarillo «rotulador» marca solo lo que eres tú.
   Superficies separadas por tono (sin sombras en reposo); sombras solo en lo que flota (menús, ventanas, avisos). */
:root {
  --page-ink: #eef1f8; --page-ink-soft: #cfd5e6;
  --bg: #0e1426; --surface: #18213b; --surface2: #232d4c; --ink: #eef1f8; --ink-soft: #cfd5e6; --muted: #9ba4c0;
  --line: #2c3657; --hair: rgba(238,241,248,.10);
  --on-ink: #0e1426;
  --accent: var(--ink); --accent-ink: var(--on-ink);
  --mark: #ffd65c; --mark-ink: #101218;
  --left: #ff6b6b; --right: #6b9bff; --prog: #b39cff; --cons: #d4a15f; --mid: #46507a;
  --spectrum: linear-gradient(90deg, #ff6b6b 0%, var(--mid) 50%, #6b9bff 100%);
  --grad: var(--spectrum);
  --q1: rgba(255,107,107,.07); --q2: rgba(107,155,255,.07); --q3: rgba(179,156,255,.06); --q4: rgba(212,161,95,.07);
  --ok: #4cc685; --warn: #f0b04c; --err: #ff7b7b;
  --no: #ff6369; --yes: #3dd68c;
  --poster: #141c35; --poster-2: #1e2846;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-body: 1.0625rem; --fs-h3: 1.25rem;
  --fs-lead: 1.25rem; --fs-h3b: clamp(1.375rem, 1.1rem + 1vw, 1.625rem); --fs-stmt: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-display: clamp(3.25rem, .9rem + 10.4vw, 7.25rem);
  --radius: 22px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --shadow: none;
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -16px rgba(0,0,0,.7);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: linear(0, 0.049, 0.1616, 0.2949, 0.4454, 0.5792, 0.6985, 0.8058, 0.8854, 0.9497, 0.9923, 1.0207, 1.0385, 1.0462, 1.0476, 1.0448, 1.0395, 1.0326, 1.0259, 1.0191, 1.0135, 1.0089, 1.0049, 1.0022, 1.0001, 0.9988, 0.9981, 0.9978, 0.9977, 0.9979, 0.9982, 0.9985, 0.9988, 0.9991, 0.9994, 0.9996, 0.9998, 0.9999, 1, 1.0001, 1);
  --dots: rgba(238,241,248,.07);
  color-scheme: dark;
}
:root.light {
  --page-ink: #101218; --page-ink-soft: #2b2f3a;
  --bg: #eceef1; --surface: #f7f8fa; --surface2: #e0e3e8; --ink: #101218; --ink-soft: #2b2f3a; --muted: #565c6a;
  --line: #d1d5de; --hair: rgba(16,18,24,.10);
  --on-ink: #ffffff;
  --mark: #ffcf3a; --mark-ink: #101218;
  --left: #c9343b; --right: #2a5fc0; --prog: #6b4bb0; --cons: #8a5a1f; --mid: #c3c7d0;
  --spectrum: linear-gradient(90deg, #c9343b 0%, var(--mid) 50%, #2a5fc0 100%);
  --grad: var(--spectrum);
  --q1: rgba(201,52,59,.06); --q2: rgba(42,95,192,.06); --q3: rgba(107,75,176,.05); --q4: rgba(138,90,31,.06);
  --ok: #18794e; --warn: #9a5b00; --err: #c23030;
  --no: #e5484d; --yes: #18a36a;
  --poster: #111319; --poster-2: #1b1e27;
  --dots: rgba(16,18,24,.09);
  color-scheme: light;
}
/* Islas oscuras (cartel del resultado, bloque de grupo, llamadas finales): mismos componentes con tokens oscuros */
.dark-island, .result-hero, .group-promo, .seo-cta {
  --bg: var(--poster); --surface: var(--poster-2); --surface2: #262a35; --ink: #f2f3f7; --ink-soft: #d3d6df; --muted: #a3a9b7;
  --line: rgba(242,243,247,.16); --hair: rgba(242,243,247,.12); --on-ink: #111319;
  --left: #ff7a7a; --right: #78a4ff; --prog: #bba6ff; --cons: #ddb06f; --mid: #4a5060;
  --spectrum: linear-gradient(90deg, #ff7a7a 0%, var(--mid) 50%, #78a4ff 100%);
  --q1: rgba(255,122,122,.08); --q2: rgba(120,164,255,.08); --q3: rgba(187,166,255,.07); --q4: rgba(221,176,111,.08);
  color-scheme: dark; color: var(--ink); background-color: var(--bg);
}
/* grano fino: da materia a los bloques oscuros y evita las bandas de los degradados */
.grain, .result-hero, .group-promo, .seo-cta { position: relative; isolation: isolate; }
.grain::after, .result-hero::after, .group-promo::after, .seo-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: url(/img/grain.png) repeat; background-size: 128px; opacity: .9; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.55 var(--font-body); position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; caret-color: var(--ink); font-optical-sizing: auto; }
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
/* papel cuadriculado de puntos, como el del mapa político; se desvanece hacia abajo */
body::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 760px; pointer-events: none;
  background-image: radial-gradient(var(--dots) 1px, transparent 1.4px); background-size: 24px 24px; background-position: center -12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.45) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.45) 45%, transparent 100%); }
::selection { background: var(--mark); color: var(--mark-ink); }
p, li, .lede { text-wrap: pretty; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-thickness: .07em; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); transition: text-decoration-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -.03em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.75rem); letter-spacing: -.04em; }
h2 { font-size: 1.6rem; }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; }
p { margin: 0; }
.eyebrow { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.center { text-align: center; }
.stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.stack-lg { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; gap: 6px; }
.row.stretch { align-items: stretch; }
.err { color: var(--err); font-size: var(--fs-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Estructura */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--bg); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
/* firma de la marca: el eje izquierda-derecha, como el rótulo de una noche electoral */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--spectrum); transform-origin: left center; }
/* la línea del espectro bajo la barra superior crece según lo que llevas leído (donde el navegador lo permite) */
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  html:not(.deep) .topbar::after { animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { from { transform: scaleX(.04); } }
} }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: -.025em; white-space: nowrap; }
.logo-mark { width: 30px; height: 30px; flex: none; display: block; overflow: visible; }
.logo-mark .lm-ballot { transform-box: view-box; transition: transform 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .logo:hover .lm-ballot { transform: translateY(3px); } }
.logo .q { color: inherit; }
.topnav { display: flex; align-items: center; gap: 10px; }
.topnav a { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; font-weight: 600; }
.topnav a.pill, .pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease-out), opacity 160ms ease; }
.topnav a.pill:active { transform: scale(.96); }
main { max-width: 47.5rem; margin: 0 auto; padding: 22px 16px 48px; }
.view { display: grid; gap: 18px; }
/* al cambiar de pantalla, la nueva entra con un fundido corto */
.view:not([hidden]) { animation: view-in 320ms var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.footer { max-width: 70rem; margin: 40px auto 0; padding: 40px 16px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: var(--fs-sm); display: grid; gap: 28px; grid-template-columns: 1fr 1.2fr; }
.foot-brand { display: grid; gap: 10px; align-content: start; max-width: 40ch; }
.footer .logo { font-size: 1.05rem; } .footer .logo-mark { width: 26px; height: 26px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 18px; }
.foot-cols div { display: grid; gap: 2px; align-content: start; }
.foot-cols b { color: var(--ink); font-size: var(--fs-sm); font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.foot-cols a { padding: 6px 0; } /* objetivos táctiles más altos en el móvil */
.footer a { color: var(--muted); text-decoration: none; transition: color 150ms ease; } .footer a:hover { color: var(--ink); }
.foot-note { grid-column: 1 / -1; font-size: var(--fs-xs); }
@media (max-width: 640px) { .footer { grid-template-columns: 1fr; } }
/* la marca a todo lo ancho, muy tenue, como cierre de la página */
.footer::after { content: "¿A quién votarías?" / ""; grid-column: 1 / -1; font-family: var(--font-display); font-weight: 650; font-size: clamp(2.6rem, 10.6vw, 9.6rem); letter-spacing: -.055em; line-height: .8; color: color-mix(in srgb, var(--ink) 9%, var(--bg)); white-space: nowrap; overflow: hidden; margin-top: 8px; user-select: none; padding: 0 0 .14em .1em; margin-left: -.1em; margin-bottom: -.14em; }
/* (el «¿» sobresale a la izquierda: sin ese margen interior el recorte se lo comía) */
body.has-sticky .footer { padding-bottom: 120px; }

/* Superficies: un escalón de tono sobre el papel, sin borde ni sombra */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 16px; min-width: 0; }
.card.narrow { max-width: 560px; width: 100%; margin: 0 auto; }
.card > h2:first-child, .card > .stack:first-child h2 { font-size: 1.6rem; }

/* Botones y formularios: planos, de un solo color; el de acción en tinta */
button, input, select, textarea { font: inherit; color: inherit; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--surface2); padding: 12px 19px; border-radius: 999px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.2; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, opacity 150ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in srgb, var(--surface2) 80%, var(--ink)); } }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); } }
.btn.big { padding: 17px 26px; font-size: 1.0625rem; }
.btn.ghost { background: transparent; color: var(--muted); padding-inline: 10px; }
@media (hover: hover) { .btn.ghost:hover { color: var(--ink); background: transparent; } }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(3px); } }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); font-size: var(--fs-sm); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, textarea, select.btn { width: 100%; padding: 13px 14px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--surface2); font-weight: 400; font-size: 1rem; transition: border-color 150ms ease, background-color 150ms ease; }
.field input:focus, .field select:focus, textarea:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.field input::placeholder, .join-row input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
select.btn { width: auto; font-weight: 500; border-radius: 999px; padding: 9px 14px; }
textarea { font-family: var(--font-mono); font-size: 16px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ink); }

/* Elegir modo (rápido / completo) */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.modes legend { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; padding: 0; }
.mode { position: relative; display: grid; gap: 2px; padding: 14px; border-radius: var(--r-md); border: 1.5px solid transparent; background: var(--surface2); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode .mode-ico { display: block; color: var(--ink); margin-bottom: 4px; } .mode .mode-ico .ico { width: 22px; height: 22px; }
.mode b { font-family: var(--font-display); font-size: 1.15rem; }
.mode span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.mode:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.mode:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.mode .tick { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--surface); }
.mode:has(input:checked) .tick, .mode input:checked + .tick { background: var(--ink); border-color: var(--ink); }
.mode input:checked + .tick::after, .mode:has(input:checked) .tick::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

/* Menú «Tu espacio» y grupos */
.menu-btn, .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface2); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: transform 140ms var(--ease-out), background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover, .icon-btn:hover { background: color-mix(in srgb, var(--surface2) 80%, var(--ink)); } }
.menu-btn:active, .icon-btn:active { transform: scale(.94); }
.menu-btn .ico, .icon-btn .ico { width: 20px; height: 20px; }
.badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mark); color: var(--mark-ink); font: 700 .6875rem/18px var(--font-body); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.modal.sheet { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
/* en el móvil, «Tu espacio» es una hoja que sube desde abajo, con la curva de los cajones de iOS */
@media (max-width: 560px) { .modal.sheet { margin: auto auto 0; border-radius: 28px 28px 0 0; width: 100vw; max-width: 100vw; padding-top: 30px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .modal.sheet[open] { animation: sheet-up 440ms var(--ease-drawer); }
  .modal.sheet::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line); } }
.group-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color 150ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .group-item:hover { background: color-mix(in srgb, var(--surface) 92%, var(--ink)); } }
.group-item:active { transform: scale(.985); }
.gi-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--ink); }
.gi-ico .ico { width: 20px; height: 20px; }
.gi-txt { display: grid; min-width: 0; }
.gi-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-txt span { font-size: var(--fs-xs); color: var(--muted); }
.gi-go { color: var(--muted); } .gi-go .ico { width: 18px; height: 18px; }
.modal .group-item { background: var(--surface2); }
.home-groups { display: grid; gap: 8px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--surface2); font-size: 1rem; }
.join-row input:focus { outline: none; border-color: var(--ink); }
.menu-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-sm); padding-top: 6px; }
.menu-links a { color: var(--muted); text-decoration: none; font-weight: 600; } .menu-links a:hover { color: var(--ink); }

/* Iconos */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ico.sm { width: 14px; height: 14px; }
.btn .ico { width: 18px; height: 18px; }
/* las etiquetas encima de los títulos sobran: el título ya dice lo que hay (el texto sigue en el DOM) */
.kicker, #start-eyebrow { display: none; }

/* ---------- Portada ---------- */
.view.home { gap: 0; }
.hero { display: grid; gap: 30px; padding: 18px 0 8px; align-items: center; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.hero h1 { font-size: var(--fs-display); line-height: .9; letter-spacing: -.045em; font-weight: 650; margin-left: -.04em; }
/* titular palabra a palabra, cada una saliendo de su máscara (una sola vez, al cargar) */
.split .w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split .w > span { display: inline-block; }
.js-motion .split .w > span { animation: word-up 900ms var(--ease-expo) both; animation-delay: calc(80ms + var(--i, 0) * 90ms); }
@property --wg { syntax: "<number>"; inherits: true; initial-value: 650; }
.js-motion .hero h1.split { animation: weight-in 1400ms var(--ease-expo) 200ms both; font-variation-settings: "wght" var(--wg); }
@keyframes weight-in { from { --wg: 300; } to { --wg: 650; } }
@keyframes word-up { from { transform: translateY(105%); } }
.hero .lede { font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; color: var(--ink-soft); }
.hero .lede b { font-weight: 600; color: var(--ink); }
.js-motion .hero .lede, .js-motion .hero-ctas, .js-motion .trust { animation: rise 800ms var(--ease-expo) both; }
.js-motion .hero .lede { animation-delay: 360ms; } .js-motion .hero-ctas { animation-delay: 460ms; } .js-motion .trust { animation-delay: 540ms; }
@media (max-width: 600px) {
  .js-motion .split .w > span { animation-delay: 0ms !important; }
  .js-motion .hero .lede, .js-motion .hero-ctas, .js-motion .trust { animation-delay: 80ms !important; }
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-ctas .btn { flex: 1 1 200px; }
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; list-style: none; margin: 0; padding: 0; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .ico { color: var(--ink); width: 16px; height: 16px; stroke-width: 2.6; }
#home-extra { gap: 8px 18px; }

/* Hemiciclo del Congreso (350 escaños): la imagen de la noche electoral */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: -120px; bottom: -40px; pointer-events: none;
  background: radial-gradient(60% 55% at var(--sx, 72%) var(--sy, 62%), color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%); opacity: 0; transition: opacity 700ms ease;
  /* se desvanece en los bordes: sin esto, el brillo se cortaba en seco y se veía una línea a media página */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%); }
.congreso { margin: 0; position: relative; display: grid; gap: 14px; min-width: 0; }
.cg-chart .hemi { width: 100%; height: auto; display: block; overflow: visible; }
.hemi circle { fill: var(--c); transform-box: fill-box; transform-origin: center; transition: opacity 260ms ease, transform 260ms var(--ease-out); }
.hemi-g.dim circle { fill: color-mix(in srgb, var(--ink) 13%, var(--bg)); }
.hemi-g { cursor: pointer; }
.hemi.picking .hemi-g:not(.on) circle { opacity: .22; }
.hemi-maj { stroke: var(--ink); stroke-width: .6; stroke-dasharray: 1.5 1.5; opacity: .5; }
/* el hemiciclo de la portada viene en el HTML: la entrada empieza con la primera pintura (sin parpadeos) */
/* los escaños salen de la urna (el centro) y vuelan a su sitio con un muelle, de izquierda a derecha */
/* el Congreso ya no está en el héroe: los escaños vuelan cuando la sección llega a la pantalla (clase .in) */
.js-motion .cg-block:not(.in) #cg-hero .hemi circle { opacity: 0; }
.js-motion .cg-block.in #cg-hero .hemi circle { animation: seat-fly 1000ms cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(120ms + var(--i, 0) * 2.4ms); }
/* sin linear(): en Safari un linear() no va por la GPU y con 350 escaños se notaría; la curva con rebote basta */
@keyframes seat-fly { from { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.35); opacity: 0; } 18% { opacity: 1; } to { transform: none; opacity: 1; } }
.cg-chart { aspect-ratio: 220 / 118; }
@keyframes seat-in { from { opacity: 0; transform: scale(.3); } }
.cg-center { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 220 / 118; display: grid; align-content: end; justify-items: center; padding-bottom: 2%; z-index: 1; pointer-events: none; }
.cg-center > * { pointer-events: auto; }
.cg-center b { font-family: var(--font-display); font-weight: 650; font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4rem); line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cg-center > span { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }   /* solo «escaños»: no las piezas del contador que rueda */
.cg-cap { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; text-wrap: balance; min-height: 2.6em; }
.cg-cap b { color: var(--ink); }
.cg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.cg-legend button { border: 0; background: transparent; padding: 4px 8px; border-radius: 99px; font: 500 var(--fs-xs)/1.2 var(--font-body); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 150ms ease; }
.cg-legend button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cg-legend button b { font-weight: 600; color: var(--ink); }
.cg-legend button[aria-pressed="true"] { background: var(--surface2); }
.cg-legend button.off { color: var(--muted); }
.cg-legend button.off i { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); }
.cg-chart.armed .hemi circle { opacity: 0; }
.cg-chart.intro .hemi circle { animation: seat-in 620ms var(--ease-expo) both; animation-delay: calc(120ms + var(--i, 0) * 3.2ms); }
.cg-mine { max-width: 560px; justify-self: center; width: 100%; }
@media (hover: hover) and (pointer: fine) { .cg-legend button:hover { background: var(--surface2); } }

/* «Así te situamos»: el mapa se queda fijo y los pasos pasan por encima (estilo reportaje interactivo) */
.story { padding-top: 104px; }
.story .story-head { position: relative; z-index: 2; }
.story-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.story-viz { position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); height: min(52vh, 420px); display: grid; place-items: center; z-index: 0; margin-top: 18px; }
.story-map { width: min(100%, 52vh, 420px); aspect-ratio: 1; }
.story-map svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: var(--font-body); }
.story-dots { position: absolute; bottom: -6px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.story-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.story-dots i.on { width: 20px; background: var(--ink); }
.story-steps { position: relative; z-index: 1; margin-top: -8vh; }
.step { min-height: 78vh; display: flex; align-items: flex-end; padding-bottom: 8vh; }
.step > div { --bg: var(--poster); --surface: var(--poster-2); --ink: #f2f3f7; --ink-soft: #d3d6df; --muted: #a3a9b7; background: var(--bg); color: var(--ink); border-radius: var(--r-lg); padding: 20px 22px; max-width: 34rem; opacity: .8; transition: opacity 300ms ease; }
.step > div a { color: var(--ink); }
.step.on > div { opacity: 1; }
.step h3 { font-size: var(--fs-h3b); letter-spacing: -.03em; font-weight: 650; margin-bottom: 6px; }
.step p { color: var(--ink-soft); }
.step:last-child { min-height: 70vh; }
/* elementos del mapa del reportaje */
.st-axis { stroke: var(--line); stroke-width: 1.2; transition: stroke 400ms ease, stroke-width 400ms ease; }
.st-lab { font-size: 11px; font-weight: 600; opacity: .35; transition: opacity 400ms ease; }
.st-box { fill: var(--surface); }
.st-party { opacity: 0; transition: opacity 500ms ease, transform 600ms var(--ease-expo); transform: translateY(6px); transform-box: fill-box; }
.st-party text { font-size: 9px; font-weight: 700; fill: var(--muted); }
.st-party.near rect { stroke: var(--ink); stroke-width: 2; }
.st-party.near text { fill: var(--ink); }
.st-you { transition: transform 900ms var(--ease-expo); }
.st-you circle.core { fill: var(--mark); stroke: var(--ink); stroke-width: 2.5; }
.st-you circle.halo { fill: var(--mark); opacity: .25; }
.st-ring { fill: none; stroke: var(--ink); stroke-dasharray: 2 3; opacity: 0; transition: opacity 400ms ease; }
.st-link { stroke: var(--ink); stroke-width: 1.5; opacity: 0; transition: opacity 300ms ease; }
.st-ghost { fill: var(--mark); stroke: var(--ink); stroke-width: 1.5; opacity: 0; }
.s1 .st-axis.h, .s2 .st-axis.v { stroke: var(--ink); stroke-width: 2; }
.s1 .st-lab.h, .s2 .st-lab.v, .s3 .st-lab, .s4 .st-lab { opacity: 1; }
.s3 .st-party, .s4 .st-party { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }
.s5 .st-party { opacity: .25; transform: none; }
.s4 .st-party:not(.near) { opacity: .45; }
.s4 .st-ring, .s4 .st-link { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .s1 .st-you { animation: sway-x 2.6s var(--ease-in-out) infinite alternate; }
  .s2 .st-you { animation: sway-y 2.6s var(--ease-in-out) infinite alternate; }
  .s5 .st-ghost { opacity: .8; animation: cancel 2.4s var(--ease-in-out) infinite alternate; }
  .s5 .st-ghost.b { animation-name: cancel-b; }
}
@keyframes sway-x { from { transform: translate(var(--yx), var(--yy)) translateX(-70px); } to { transform: translate(var(--yx), var(--yy)) translateX(70px); } }
@keyframes sway-y { from { transform: translate(var(--yx), var(--yy)) translateY(-70px); } to { transform: translate(var(--yx), var(--yy)) translateY(70px); } }
@keyframes cancel { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes cancel-b { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* inclinación 3D suave de tarjetas al pasar el ratón (solo ordenador; la pone app.js) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 500ms var(--ease-out); will-change: transform; }
.tilt.tilting { transition-duration: 120ms; }

/* Demo: la primera afirmación del test, de verdad; tu respuesta mueve tu punto y el test sigue desde la 2 */
.demo { min-width: 0; margin: 0; background: var(--surface); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 16px; position: relative; }
.js-motion .demo { animation: rise 900ms var(--ease-expo) 300ms both; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.demo-top b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3b); line-height: 1.15; letter-spacing: -.022em; text-wrap: balance; }
.demo .boxes { gap: 5px; }
.demo .box { border-radius: 10px; font-size: .9375rem; }
.demo-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.demo .hv-map { width: 100%; max-width: 380px; justify-self: center; }
.hv-map { position: relative; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.you-dot { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--mark); border: 3px solid var(--ink); display: grid; place-items: center; font: 700 .95rem var(--font-display); color: #101218; pointer-events: none; left: 50%; top: 50%; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform 760ms var(--ease-expo); will-change: transform; }
.you-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,207,58,.6); animation: ping 2.4s var(--ease-out) infinite; }
.hv-map.moving .you-dot::after { animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,207,58,.6); } 80%, 100% { box-shadow: 0 0 0 16px rgba(255,207,58,0); } }
.demo-cap { font-size: var(--fs-sm); color: var(--muted); min-height: 2.9em; text-wrap: balance; }
.demo-cap b { color: var(--ink); font-weight: 600; }
.demo-go { justify-self: start; }
.demo-go:not([hidden]) { animation: rise 520ms var(--ease-expo) both; }
.promo-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.promo-map [data-party] { transition: opacity 240ms ease; }
.promo-map.near [data-party] { opacity: .3; }
.promo-map.near [data-party].on { opacity: 1; }
.promo-map [data-party] rect { transform-box: fill-box; transform-origin: center; transition: transform 260ms var(--ease-out); }
.promo-map [data-party].on rect { transform: scale(1.6); }
/* entrada de los partidos en el mapa, uno tras otro (una vez) */
.promo-map.intro [data-party] { animation: dot-in 600ms var(--ease-expo) both; animation-delay: calc(520ms + var(--i, 0) * 70ms); }
.hv-map.intro .you-dot { animation: you-in 700ms var(--ease-expo) 1000ms both; }
@keyframes dot-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes you-in { from { opacity: 0; transform: translate(var(--x, 0px), calc(var(--y, 0px) - 20px)) scale(.9); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Secciones de la portada: mucho aire entre capítulos, el título manda */
.block { display: grid; gap: 24px; padding-top: 96px; }
.block-head { display: grid; gap: 10px; }
.block-head h2, .faq h2, .group-promo h2, .final-cta h2 { font-size: var(--fs-h2); letter-spacing: -.04em; line-height: 1; font-weight: 650; }
.block-head p { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 40ch; line-height: 1.4; }

/* Frase con cifras: se va entintando al bajar (de gris a tinta), como quien lee */
.figures { padding-top: 104px; }
.figures p { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-stmt); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; max-width: 30ch; }
.figures .ink { color: color-mix(in srgb, var(--ink) 52%, var(--bg)); transition: color 700ms ease; }
.figures .ink b { font-weight: inherit; font-variant-numeric: tabular-nums lining-nums; }
.figures .ink.on { color: var(--ink); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .figures .ink { transition: none; animation: ink-fill linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
    @keyframes ink-fill { from { color: color-mix(in srgb, var(--ink) 52%, var(--bg)); } to { color: var(--ink); } }
  }
}

/* «Lo que te llevas»: una papeleta (el objeto del tema) con casillas que se marcan al verla */
.ballot-sheet { --surface: #ffffff; --ink: #101218; --ink-soft: #2b2f3a; --muted: #565c6a; color: var(--ink); list-style: none; margin: 0; padding: 10px 24px; display: grid; grid-template-columns: minmax(0, 1fr); background: #ffffff; border-radius: 4px; position: relative;
  -webkit-mask: radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 0 0 / 18px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 0 0 / 18px 100% repeat-x; }
.ballot-sheet li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 18px 0; align-items: start; }
.ballot-sheet li { padding: 14px 0; }
.ballot-sheet h3 { font-size: var(--fs-h3); margin-bottom: 2px; }
.ballot-sheet p { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 44ch; }
.bs-box { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 4px; display: grid; place-items: center; margin-top: 1px; background: var(--surface); }
.bs-box svg { width: 24px; height: 24px; overflow: visible; }
.bs-box path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24 40; stroke-dashoffset: 0; }
.ballot-sheet.armed .bs-box path { stroke-dashoffset: 25; }
.ballot-sheet.armed.in .bs-box path { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }

/* Ejemplos del resultado con dos personajes de ficción, uno de cada lado (sin partidos: regla de neutralidad) */
.samples { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sample { border-radius: var(--r-lg); padding: 20px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 104px; align-items: end; min-height: 200px; overflow: hidden; }
.sample .who { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.sample .who b { color: var(--ink); font-weight: 600; }
.sample .ideo { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-h3b); letter-spacing: -.035em; line-height: 1; }
.sample .like { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; }
.sample .like b { color: var(--ink-soft); font-weight: 600; }
.sample .poster-map { width: 104px; }
.samples-note { font-size: var(--fs-xs); color: var(--muted); }
.what { display: grid; gap: 18px; }

/* Modo grupo: un capítulo oscuro con grano */
.group-promo { margin-top: 104px; position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 34px 24px; display: grid; gap: 26px; }
.group-promo p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; }
.gp-frame { justify-self: center; width: 100%; max-width: 340px; min-width: 300px; min-height: 220px; display: grid; place-items: center; }
.gp-art { width: 100%; height: auto; font-family: var(--font-display); }
.gp-dot { transform-box: fill-box; transform-origin: center; }
.group-promo.armed:not(.in) .gp-dot { opacity: 0; }
.group-promo.in .gp-dot { animation: dot-in 640ms var(--ease-expo) both; animation-delay: calc(var(--i) * 90ms); }
.ticks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.ticks .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--surface2); color: var(--mark); stroke-width: 3; flex: none; }

/* Neutral por diseño: lista en letra grande, sin cajas ni iconos en baldosa */
.pillars { display: grid; gap: 44px; }
.pillar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.pillar > .ico { display: none; }
.pillar h3 { font-size: var(--fs-stmt); letter-spacing: -.035em; font-weight: 650; line-height: 1; }
.pillar p { color: var(--ink-soft); max-width: 46ch; }

/* Explora: nombres grandes que llevan a cada sección */
.explore { display: grid; gap: 8px; }
.explore-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color 150ms ease, transform 140ms var(--ease-out); }
.explore-card .feature-ico { display: none; }
.explore-card > span:nth-child(2) { display: grid; gap: 4px; }
.explore-card b { font-family: var(--font-display); font-size: var(--fs-h3b); font-weight: 650; letter-spacing: -.035em; line-height: 1.02; }
.explore-card span span { color: var(--muted); font-size: var(--fs-sm); }
.explore-card .go { color: var(--ink); width: 28px; height: 28px; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .explore-card:hover { background: color-mix(in srgb, var(--surface) 92%, var(--ink)); } .explore-card:hover .go { transform: translateX(6px); } }
.explore-card:active { transform: scale(.985); }

/* Preguntas frecuentes */
.faq { display: grid; gap: 0; padding-top: 96px; }
.faq h2 { margin-bottom: 18px; }
details { padding-top: 10px; }
.faq details { padding: 0; }
.faq details { background: var(--surface); border-radius: var(--r-md); padding: 0 20px; margin-bottom: 8px; }
.faq summary { padding: 18px 0; font-size: 1.0625rem; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; transition: color 150ms ease; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 260ms var(--ease-out); }
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) { summary:hover { color: var(--muted); } }
details p { margin-top: 8px; color: var(--muted); }
.faq details p { margin: 0 0 20px; max-width: 64ch; color: var(--ink-soft); }
/* el contenido se despliega con suavidad donde el navegador lo permite (::details-content) */
details::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
details[open]::details-content { block-size: auto; }

/* Cierre: la cuenta atrás hasta el 29N es la cifra que manda */
.final-cta { margin-top: 104px; display: grid; gap: 14px; justify-items: start; padding: 0; }
.final-cta .count { color: var(--ink); font-family: var(--font-display); font-weight: 650; font-size: clamp(7rem, 3rem + 22vw, 17rem); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums lining-nums; display: flex; align-items: flex-start; margin-left: -.05em; }
.final-cta .count small { font-size: .22em; letter-spacing: -.02em; line-height: 1; margin: .35em 0 0 .12em; font-weight: 600; }
.final-cta h2 { max-width: 14ch; }
.final-cta p { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 36ch; }
.final-cta .btn { margin-top: 8px; }
/* cifras que ruedan como un marcador (se rellenan desde app.js) */
[data-armed] { visibility: hidden; }
.roll, .rolled { display: inline-flex; overflow: clip; height: 1em; line-height: 1; vertical-align: top; font-variant-numeric: tabular-nums lining-nums; }
.roll .col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 1300ms var(--ease-expo); transition-delay: calc(var(--k, 0) * 80ms); }
.roll .col span { height: 1em; line-height: 1; }
.urn { width: 56px; height: 56px; overflow: visible; }
.urn-ballot { transform-box: view-box; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .final-cta:has(.btn:hover) .urn-ballot { transform: translateY(14px); } }
.final-cta:has(.btn:active) .urn-ballot, .final-cta:has(.btn:focus-visible) .urn-ballot { transform: translateY(14px); }
.home-group { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }

/* En ordenador: héroe a dos columnas sobre un eje, secciones con título a la izquierda */
@media (min-width: 900px) {
  main:has(> #v-home:not([hidden])) { max-width: 73.75rem; padding-inline: 28px; }
  .hero { grid-template-columns: .95fr 1.05fr; gap: 48px; padding-top: 56px; align-items: center; }
  .story-body { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .story-viz { grid-column: 2; grid-row: 1; height: 72vh; top: 14vh; margin-top: 0; }
  .story-map { width: min(100%, 64vh, 520px); }
  .story-steps { grid-column: 1; grid-row: 1; margin-top: 0; }
  .step { align-items: center; padding-bottom: 0; min-height: 86vh; }
  .step > div { opacity: .76; --bg: inherit; --surface: inherit; --ink: inherit; --ink-soft: inherit; --muted: inherit; background: transparent; padding: 0; }
  .story-head { position: static; }
  .step h3 { font-size: var(--fs-stmt); }
  .story { padding-top: 144px; }
  .block, .faq { grid-template-columns: 5fr 7fr; column-gap: 56px; align-items: start; padding-top: 144px; }
  .block-head, .faq h2 { position: sticky; top: 96px; }
  .faq > details { grid-column: 2; }
  .faq h2 { grid-row: 1 / span 9; }
  .figures { padding-top: 152px; }
  .ballot-sheet { padding: 12px 32px; }
  .group-promo { margin-top: 152px; padding: 56px 56px; grid-template-columns: 1fr 340px; align-items: center; gap: 48px; }
  .group-promo .gp-frame { order: 2; }
  .samples { grid-template-columns: 1fr 1fr; }
  .what { grid-template-columns: minmax(0, 1fr); }
  .pillars { gap: 36px; }
  .final-cta { margin-top: 160px; grid-template-columns: auto 1fr; column-gap: 48px; align-items: end; }
  .final-cta .count { grid-row: 1 / span 4; }
}

/* ---------- Cuestionario ---------- */
.ballot { background: var(--surface); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 22px; }
.progress { display: grid; gap: 10px; }
.progress-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; container-type: inline-size; }
/* la barra de progreso es el eje izquierda-derecha: se va descubriendo de izquierda a derecha */
.progress-bar i { display: block; height: 100%; background: var(--spectrum); background-size: 100cqi 100%; width: 0; transition: width 480ms var(--ease-expo); border-radius: 3px; }
.qhead { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.qhead .num { font-size: var(--fs-sm); }
.axis-tag { font-size: var(--fs-xs); font-weight: 600; padding: 4px 11px; border-radius: 99px; color: var(--ink-soft); background: var(--surface2); }
.statement { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.15rem); line-height: 1.13; min-height: 4.7em; text-wrap: balance; letter-spacing: -.025em; }
.q-extra { font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface2); }
/* escala del 1 al 10: de rojo (nada de acuerdo) a verde (totalmente de acuerdo). Elegir es instantáneo (se hace 30 veces) */
.boxes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.box { --c: var(--muted); appearance: none; aspect-ratio: 1; max-width: 100%; border: 1.5px solid var(--c); border-radius: 12px; background: var(--surface); cursor: pointer; padding: 0; display: grid; place-items: center; font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9375rem; color: var(--ink); transition: transform 140ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative; }
@supports (color: color-mix(in srgb, red, red)) {
  .box { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--surface)); color: color-mix(in srgb, var(--c) 45%, var(--ink)); }
}
@media (hover: hover) and (pointer: fine) { .box:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); } }
.box:active { transform: scale(.94); }
.box.on { background: var(--c); border-color: var(--c); color: var(--t, #fff); font-weight: 700; }
/* la casilla elegida lleva una marca, como en la papeleta */
.box.on::after { content: ""; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.box svg { display: none; }
.scale-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); gap: 12px; font-weight: 500; }
.scale-ends span:first-child { color: color-mix(in srgb, var(--no) 70%, var(--ink)); } .scale-ends span:last-child { color: color-mix(in srgb, var(--yes) 62%, var(--ink)); text-align: right; }
.qnav { display: flex; justify-content: space-between; gap: 8px; }
/* Deslizador «¿Cuánto te importa este tema?» (1-5, empieza en el centro): cuanto más relleno, más pesa esa respuesta */
.imp { --p: 50%; display: grid; gap: 4px; padding: 10px 14px 8px; border-radius: var(--r-md); background: var(--surface2); }
.imp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.imp-head label { font-weight: 600; color: var(--ink-soft); }
.imp-val { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--surface); color: var(--muted); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.imp[data-level="4"] .imp-val, .imp[data-level="5"] .imp-val { background: var(--ink); color: var(--on-ink); }
.imp[data-level="1"] .imp-val, .imp[data-level="2"] .imp-val { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.imp input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.imp input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ink) 0 var(--p), var(--line) var(--p) 100%); }
.imp input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.imp input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.imp input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(16,18,24,.18); }
.imp input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.imp input[type=range]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.imp-ends { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--muted); }
.imp-ends span:last-child { text-align: right; }
.imp-star { color: var(--ink); font-weight: 700; }
/* hitos del test: un tercio, dos tercios */
.q-milestone { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 25; translate: -50% 0; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); pointer-events: none; animation: milestone 2200ms var(--ease-expo) both; white-space: nowrap; }
@keyframes milestone { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 14%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- Resultado ---------- */
/* Secciones del resultado: planas, separadas por aire (las superficies se reservan a lo que se toca) */
#v-result.view { gap: 0; }
#v-result > .card:not(.result-hero) { background: transparent; border-radius: 0; padding: 72px 0 0; gap: 18px; }
#v-result > .card:not(.result-hero) > .stack:first-child h2, #v-result > .card:not(.result-hero) > h2:first-child { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); letter-spacing: -.04em; font-weight: 650; line-height: 1.02; }
#v-result > #g-head.card { padding-top: 6px; padding-bottom: 18px; }
#v-result > #r-notice:not(:empty) { margin-bottom: 14px; }
/* El cartel: lo que se comparte. Oscuro, con grano y el mapa con tu punto */
.result-hero { background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--party, transparent) 50%, transparent), transparent 64%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--party, transparent) 22%, transparent), transparent 60%), var(--bg); position: relative; overflow: hidden; gap: 16px; padding: 30px 22px 24px; border-radius: var(--r-xl); }
.result-hero .eyebrow, .result-hero .muted { color: var(--muted); }
.result-hero .mode-badge { justify-self: start; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--surface2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hero-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.ideology { font-size: clamp(2.6rem, 1.2rem + 7vw, 4.6rem); letter-spacing: -.05em; line-height: .92; font-weight: 650; }
.poster-grid { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px 18px; align-items: end; }
.vote-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-body); }
.aff-line { display: flex; align-items: flex-end; gap: 2px 10px; flex-wrap: wrap; margin-top: 6px; }
.aff-num { font-family: var(--font-display); font-weight: 650; font-size: clamp(4rem, 2.6rem + 7vw, 6.5rem); line-height: .82; letter-spacing: -.06em; font-variant-numeric: tabular-nums lining-nums; display: inline-flex; }
.aff-num small { font-size: .4em; letter-spacing: -.02em; margin-left: .04em; font-weight: 600; }
.aff-txt { color: var(--muted); font-size: var(--fs-sm); padding-bottom: .5em; }
/* nota presidencial: la cifra manda */
.pres-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; }
.pres-num { font-family: var(--font-display); font-weight: 650; font-size: clamp(4rem, 2.6rem + 7vw, 6.5rem); line-height: .82; letter-spacing: -.06em; font-variant-numeric: tabular-nums lining-nums; }
.pres-num small { font-size: .3em; letter-spacing: -.02em; color: var(--muted); margin-left: .08em; }
.pres-line > span:last-child { padding-bottom: .4em; color: var(--ink-soft); max-width: 30ch; }
.poster-map { width: 132px; justify-self: end; align-self: end; }
.poster-map svg { width: 100%; height: auto; display: block; }
.party-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--surface2); font-weight: 700; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -.01em; }
.party-chip i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.extend { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); font-size: var(--fs-sm); }
.extend .btn { justify-self: start; }
.result-hero .btn { background: var(--surface2); }
.result-hero .btn.primary { background: var(--ink); color: var(--on-ink); }
#r-share-row { margin-top: 4px; }
/* «Calculando tu posición…»: un instante de trabajo visible antes del resultado */
.calc { display: none; }
.reveal.calculating .calc { display: grid; gap: 14px; position: absolute; inset: 0; z-index: 3; place-content: center; justify-items: center; background: var(--bg); padding: 24px; text-align: center; border-radius: inherit; }
.calc b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.calc-axes { display: grid; gap: 10px; width: min(260px, 70vw); }
.calc-axes i { display: block; height: 4px; border-radius: 2px; background: var(--surface2); position: relative; }
.calc-axes i::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mark); left: 50%; animation: seek 900ms var(--ease-in-out) infinite alternate; }
.calc-axes i:nth-child(2)::after { animation-duration: 760ms; animation-delay: -300ms; }
.calc-axes i:nth-child(3)::after { animation-duration: 1040ms; animation-delay: -500ms; }
@keyframes seek { from { left: 12%; } to { left: 88%; } }
/* al descubrir el resultado: la ideología palabra a palabra, luego lo demás en cascada */
.reveal .result-hero > :not(.calc):not(h1) { animation: rise 800ms var(--ease-expo) both; animation-delay: 560ms; }
.reveal .result-hero > .hero-top { animation-delay: 60ms; }
.reveal .result-hero > .poster-grid { animation-delay: 320ms; }
.mini-me { transition: transform 1400ms var(--ease-expo) 200ms; }
.reveal.calculating .result-hero > :not(.calc) { animation-play-state: paused; }
.reveal.calculating .result-hero .w > span { animation-play-state: paused; }
.reveal .ideology .w > span { animation: word-up 900ms var(--ease-expo) both; animation-delay: calc(120ms + var(--i, 0) * 100ms); }
.axes { display: grid; gap: 22px; }
.axis { display: grid; gap: 8px; }
.axis-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; gap: 8px; }
/* pista neutra con los extremos marcados en su color: el dato es el punto, no el degradado */
.axis-track { position: relative; height: 6px; border-radius: 3px; background: var(--surface2) !important; }
.axis-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cl, var(--left)) 0 6px, transparent 6px calc(100% - 6px), var(--cr, var(--right)) calc(100% - 6px)); }
.axis-track::after { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1.5px; margin-left: -.75px; background: var(--muted); opacity: .5; }
.axis-dot { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--mark); border: 3px solid var(--ink); transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 0 0 3px var(--bg); }
.axis-dot.sm { width: 16px; height: 16px; border-width: 2px; }
.axis-dot.other { background: var(--ink-soft); }
.axis-val { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; }
.dot.me { background: var(--mark); border: 1.5px solid var(--ink); }
.dot.other { background: var(--ink-soft); }
.analysis { display: grid; gap: 14px; max-width: 64ch; }
.analysis p { font-size: var(--fs-body); }
.parties { display: grid; gap: 10px; }
.pbar { display: grid; grid-template-columns: 7.5rem 1fr 3.2rem; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.pbar .name { font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink-soft); }
.pbar .track { height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.pbar .track i { display: block; height: 100%; border-radius: 6px; transform-origin: left center; opacity: .5; }
/* el partido más cercano a todo color; el resto, igual de apagados (nadie destaca más que otro) */
.pbar.top .name { font-weight: 700; color: var(--ink); }
.pbar.top .track i { opacity: 1; }
.pbar.top .pct { font-weight: 700; color: var(--ink); }
.parties.armed .track i { transform: scaleX(0); }
.parties.armed.in .track i { transform: none; transition: transform 1000ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 55ms); }
.pbar .pct { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pbar .ptag { grid-column: 1 / -1; font-size: var(--fs-xs); line-height: 1.2; margin-top: -6px; }
.notice { border-radius: var(--r-md); padding: 14px 16px; font-size: var(--fs-sm); background: var(--surface); display: grid; gap: 8px; }
#v-result > .card .notice { background: var(--surface); }
.notice.ok { box-shadow: inset 3px 0 0 var(--ok); }
.notice.warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.fig-box { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; border: 0 !important; }
.fig-box b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; letter-spacing: -.03em; font-weight: 650; }
a.fig-box { color: inherit; text-decoration: none; transition: transform 140ms var(--ease-out), background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { a.fig-box:hover { background: color-mix(in srgb, var(--surface) 92%, var(--ink)); } }
a.fig-box:active { transform: scale(.985); }
.fig-more { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; }
.fig-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 3rem; gap: 10px; align-items: center; padding: 10px 0; box-shadow: 0 -1px 0 var(--hair); font-size: var(--fs-sm); }
.fig-row .who { text-align: left; color: var(--ink); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.fig-row .fig-link { font-weight: 600; overflow-wrap: anywhere; }
.fig-row .pct { text-align: right; }
#gf-tabs button { padding: 7px 14px; }
a.name { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
#fig-tabs { max-width: 100%; }
#fig-tabs button { padding: 7px 14px; }
.cta-card { position: relative; }
.support { background: transparent; }
.code-box { font-family: var(--font-mono); font-size: .85rem; word-break: break-all; background: var(--surface2); padding: 10px 12px; border-radius: 10px; user-select: all; }

/* Grupo */
.group-head { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.group-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -.035em; font-weight: 650; }
.h-group { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem); letter-spacing: -.045em; font-weight: 650; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 0; background: var(--surface2); border-radius: 99px; padding: 6px 13px; font-size: var(--fs-sm); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out); }
.chip:active { transform: scale(.96); }
#j-members .chip { padding: 8px 14px; color: var(--ink); }
.chip.on { background: var(--ink); color: var(--on-ink) !important; }
.j-pick { gap: 10px; }
.chart-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.chart-wrap.wide { max-width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-wrap text { font-family: var(--font-body); }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.toggles label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 7px 13px; border-radius: 99px; background: var(--surface2); font-weight: 500; transition: background-color 150ms ease, color 150ms ease; }
.toggles label:has(input:checked) { background: var(--ink); color: var(--on-ink); }
.toggles input { accent-color: var(--ink); margin: 0; }
.list { display: grid; }
.member { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 4px; box-shadow: 0 -1px 0 var(--hair); min-width: 0; }
.member:first-child { box-shadow: none; }
.member .who { min-width: 0; display: grid; gap: 2px; cursor: pointer; background: none; border: 0; text-align: left; padding: 0; color: inherit; }
.member .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .who:hover b { text-decoration: underline; }
.member .meta { font-size: var(--fs-xs); color: var(--muted); }
.award { display: grid; grid-template-columns: 2.4rem 1fr; gap: 4px 10px; align-items: start; }
.award .ico { font-size: 1.7rem; line-height: 1; grid-row: span 3; }
.award b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; }
.empty { text-align: center; padding: 18px; color: var(--muted); background: var(--surface); border-radius: 14px; }

/* Anuncios */
.ad-slot { display: grid; gap: 4px; justify-items: center; min-height: 60px; }
.ad-label { font-size: .6875rem; color: var(--muted); }
.ad-slot.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); min-height: 0; box-shadow: var(--shadow-lg); }

/* Ventanas y avisos (esto sí flota: lleva sombra) */
.modal { border: 0; border-radius: 28px; padding: 24px; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.modal::backdrop { background: rgba(8,10,16,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: pop 280ms var(--ease-out); }
.modal[open]::backdrop { animation: fade 280ms ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.seg { display: inline-flex; border-radius: 999px; overflow: hidden; width: max-content; padding: 3px; background: var(--surface2); }
.seg button { border: 0; background: transparent; padding: 7px 16px; cursor: pointer; font-weight: 600; color: var(--muted); border-radius: 999px; transition: background-color 180ms ease, color 180ms ease; }
.seg button.on { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .seg button:not(.on):hover { color: var(--ink); } }
.share-preview { display: grid; place-items: center; background: var(--surface2); border-radius: 16px; padding: 10px; max-height: 52vh; }
.share-preview img { max-height: 48vh; width: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.consent { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--surface); border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--shadow-lg); max-width: 560px; margin: 0 auto; font-size: var(--fs-sm); }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 30px) scale(.97); opacity: 0; transition: transform 320ms var(--ease-out), opacity 220ms ease; background: var(--ink); color: var(--on-ink); padding: 11px 18px; border-radius: 999px; font-weight: 600; z-index: 50; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--shadow-lg); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .card, .ballot { padding: 20px 16px; }
  .result-hero { padding: 26px 18px 20px; }
  .demo { padding: 18px 16px; }
  .boxes { gap: 4px; }
  .box { font-size: .8125rem; border-radius: 9px; }
  .pbar { grid-template-columns: 5.8rem 1fr 2.8rem; gap: 10px; }
  .qnav .btn { padding: 12px 15px; }
  .logo-mark { width: 28px; height: 28px; }
  .topnav a.pill { padding: 8px 13px; }
  .poster-grid { grid-template-columns: minmax(0, 1fr) 112px; }
  .poster-map { width: 112px; }
}
@media (max-width: 420px) { #top-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- Páginas legales, metodología y fichas (generadas por scripts/build-seo.mjs) ---------- */
.doc { max-width: 47.5rem; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 16px; }
.doc h1 { font-size: clamp(2.5rem, 1.4rem + 5.4vw, 4.4rem); letter-spacing: -.045em; line-height: .95; font-weight: 650; }
.doc h2 { margin-top: 40px; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem); letter-spacing: -.035em; font-weight: 650; }
.doc h3 { margin-top: 12px; }
.doc p, .doc li { color: var(--ink-soft); max-width: 60ch; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.doc th { font-weight: 600; color: var(--muted); }
.doc th, .doc td { box-shadow: 0 -1px 0 var(--hair); padding: 10px 8px; text-align: left; vertical-align: top; }
.table-wrap { overflow-x: auto; }
.doc.seo { gap: 18px; }
.doc .lede { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.45; max-width: 40ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.seo-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.sw { width: 14px; height: 14px; border-radius: 4px; flex: none; display: inline-block; margin-top: 4px; }
.sw.lg { width: 44px; height: 44px; border-radius: 12px; margin: 0; }

.seo-map { margin: 4px 0; background: var(--surface); border-radius: var(--r-lg); padding: 14px; }
.seo-map svg { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; font-family: var(--font-body); }
.seo-map figcaption { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.seo-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color 150ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seo-card:hover { background: color-mix(in srgb, var(--surface) 92%, var(--ink)); } }
.seo-card:active { transform: scale(.985); }
.seo-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.seo-card span span { font-size: var(--fs-xs); color: var(--muted); }
.doc .axes.card { padding: 20px; }
.seo-cta { display: grid; gap: 12px; justify-items: start; padding: 34px 24px; border-radius: var(--r-xl); margin-top: 32px; position: relative; overflow: hidden; }
.seo-cta h2 { margin: 0; font-size: var(--fs-h2); }
.seo-cta p { color: var(--ink-soft); max-width: 40ch; }
.doc .faq { padding-top: 24px; }
/* Fichas de personajes: iniciales sobre tono neutro (el tipo de personaje lo dice la forma del marcador, no el color) */
.fig-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font: 700 .8125rem/1 var(--font-display); color: var(--ink); background: var(--surface2); letter-spacing: .01em; }
.fig-av.fam { border-radius: 10px; }
.fig-av.fic { background: var(--ink); color: var(--on-ink); }
.fig-av.lg { width: 64px; height: 64px; font-size: 1.375rem; }
.ans-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ans { background: var(--surface); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.ans-q { font-weight: 600; color: var(--ink); }
.ans-q .axis-tag { margin-right: 4px; }
.ans-a { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: var(--fs-sm); color: var(--ink-soft); }
.ans-chip { min-width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-grid; place-items: center; color: #101218; font-weight: 700; background-image: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.32)); }
.seg-links { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-links a { padding: 7px 15px; border-radius: 99px; background: var(--surface2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .seg-links a:hover { background: color-mix(in srgb, var(--surface2) 80%, var(--ink)); } }
.seo-map svg a { cursor: pointer; }

/* Nombres largos sin espacios: que partan en vez de salirse */
h1, h2, h3, .award b, .linkbtn, .chip, .fig-box b, .party-chip, .eyebrow, .analysis p, .axis-val, .notice { overflow-wrap: anywhere; }
.hero h1, .ideology { overflow-wrap: normal; }
select { max-width: 100%; }
.card > *, .stack > * { min-width: 0; }
.award > *, .pbar > *, .member > * { min-width: 0; }
.notice.account { margin: 0 auto 14px; max-width: 520px; text-align: left; }
/* En pantallas muy estrechas (iPhone SE) los botones del test caben en una fila */
@media (max-width: 360px) {
  .qnav { gap: 4px; }
  .qnav .btn { padding: 10px 10px; font-size: .9rem; }
}

/* Test en el móvil: casillas grandes (2 filas de 5), botones abajo al alcance del pulgar y sin pie de página */
body.in-quiz .footer { display: none; }
.qnav .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .gp-frame { min-width: 0; }
  .boxes { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .box { aspect-ratio: auto; height: 52px; font-size: 1.0625rem; }
  .demo .boxes { gap: 6px; }
  .demo .box { height: 44px; font-size: .9375rem; }
  body.in-quiz main { padding-bottom: 16px; }
  body.in-quiz .ballot { min-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; }
  body.in-quiz .statement { flex: 1; min-height: 0; display: flex; align-items: center; }
  body.in-quiz .ballot { gap: 16px; }
}
@media (max-width: 400px) { .hide-xs { display: none; } }
/* móviles bajos (iPhone SE): todo el test cabe sin tapar los botones */
@media (max-width: 560px) and (max-height: 720px) {
  body.in-quiz .ballot { gap: 12px; padding: 16px 14px; }
  body.in-quiz .statement { font-size: 1.375rem; }
  body.in-quiz .imp { padding: 8px 12px 6px; }
  body.in-quiz .imp-ends { display: none; }
  body.in-quiz .box { height: 48px; }
}

.deep #v-home { display: none; }
.btn.wa { background: #1fa855; color: #fff; }
.home-me { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; }

.passbox { display: grid; gap: 8px; }
.passbox input[type=password] { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid transparent; background: var(--surface2); font-size: 1rem; }
.passbox input[type=password]:focus { outline: none; border-color: var(--ink); }


/* ---------- Noche continua en la portada + papeletas (sexta vuelta) ----------
   La portada es una sola noche de arriba abajo (sin paneles que choquen) y el color lo ponen las
   papeletas 3D del fondo (js/ballots.js), que toman la paleta de cada sección. Otras pantallas, igual que antes. */
:root.home-night, [data-tone="night"] {
  --bg: #0b1020; --surface: #161d36; --surface2: #222a48; --ink: #f4f6fc; --ink-soft: #d0d6e8; --muted: #9ca5c2;
  --line: rgba(244,246,252,.16); --hair: rgba(244,246,252,.12); --on-ink: #0b1020; --dots: rgba(244,246,252,.07);
  --left: #ff7a7a; --right: #78a4ff; --prog: #c2b0ff; --cons: #e2b577; --mid: #4a5274;
  --spectrum: linear-gradient(90deg, #ff7a7a 0%, #b9a3ff 50%, #78a4ff 100%);
  --q1: rgba(255,122,122,.08); --q2: rgba(120,164,255,.08); --q3: rgba(187,166,255,.07); --q4: rgba(221,176,111,.08);
  --poster: #121a33; --poster-2: #1b2442; --mark: #ffd65c;
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -16px rgba(0,0,0,.7);
  color-scheme: dark; }
/* fondo de respaldo (y primer pintado): noche con un poco de luz de color en los bordes */
:root.home-night body { background:
  radial-gradient(70vw 50vh at 100% 0%, rgba(120,164,255,.10), transparent 70%),
  radial-gradient(60vw 50vh at 0% 30%, rgba(255,122,122,.07), transparent 70%),
  var(--bg); background-attachment: fixed; }
:root.home-night body::before { display: none; }
.ballots { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1400ms ease; }
.ballots.on { opacity: 1; }
:root:not(.field-on) .ballots { display: none; }
/* las secciones se separan por aire y por una línea fina, no por color */
:root.home-night #v-home > :is(.block, .story, .faq, .final-cta, .group-promo) { position: relative; }
:root.home-night #v-home > :is(.block, .story, .faq, .final-cta)::before { content: ""; position: absolute; top: 40px; left: 0; width: 56px; height: 2px; border-radius: 2px; background: var(--spectrum); opacity: .8; }
@media (min-width: 900px) { :root.home-night #v-home > :is(.block, .story, .faq, .final-cta)::before { top: 44px; } }
/* el cierre no tiene relleno arriba (la cifra empieza en el borde): su raya va en el hueco de encima, no sobre el «41» */
:root.home-night #v-home > .final-cta::before { top: -52px; }
.hero::before { opacity: 1; }
/* tarjetas en la noche: cristal oscuro con borde fino, así las papeletas se intuyen detrás */
:root.home-night #v-home :is(.demo, .sample, .faq details, .home-me, .home-group, .explore-card) {
  background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--hair); }
:root.home-night .congreso .hemi { filter: drop-shadow(0 6px 22px rgba(0,0,0,.35)); }

/* ---------- Cartel holográfico (resultado) ----------
   Se inclina hacia el ratón (o con el giro del móvil en Android) y un brillo irisado de todo el espectro
   recorre la superficie, como una tarjeta coleccionable. Al revelarse, un destello lo cruza una vez. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --holo { syntax: "<number>"; inherits: true; initial-value: 0; }
.result-hero { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease-out), --holo 500ms ease; transform-style: preserve-3d; }
.result-hero.holo-on { transition: transform 140ms linear, --holo 300ms ease; }
.holo-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: var(--holo);
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 25%, transparent 55%);
  mix-blend-mode: soft-light; }
/* el irisado solo vive cerca del puntero, como el reflejo de una tarjeta de verdad */
.holo-shine::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(115deg, rgba(255,110,110,0) 0%, rgba(255,120,110,.5) 7%, rgba(255,214,92,.5) 13%, rgba(110,230,170,.5) 19%, rgba(110,170,255,.55) 25%, rgba(190,150,255,.5) 31%, rgba(255,110,110,0) 38%);
  background-size: 240% 240%; background-position: calc(var(--mx) * 1.3) calc(var(--my) * 1.3);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 22%, transparent 48%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 22%, transparent 48%);
  mix-blend-mode: color-dodge; opacity: .42; }
@supports not (mix-blend-mode: color-dodge) { .holo-shine::before { mix-blend-mode: screen; opacity: .18; } }
/* destello al revelarse */
.result-hero.holo-sweep { animation: holo-sweep 1500ms var(--ease-in-out) both; }
@keyframes holo-sweep { 0% { --holo: 0; --mx: -10%; --my: 10%; } 20% { --holo: 1; } 80% { --holo: .8; } 100% { --holo: 0; --mx: 110%; --my: 70%; } }
@media (prefers-reduced-motion: reduce) { .holo-shine { display: none; } .result-hero { transform: none; } }

/* ---------- Resultado con el color de tu partido ----------
   La parte de arriba de la página toma el color del partido de «Votarías a» y se funde con el fondo al bajar.
   Misma intensidad para todos los partidos. El borde superior coincide con la barra del navegador
   (`paintChrome()` en app.js usa los mismos porcentajes: 30 % en claro y 40 % en oscuro). */
:root.party-tint { --tint-k: 30%; --tint-glow: 20%; }
@media (prefers-color-scheme: dark) { :root.party-tint { --tint-k: 40%; --tint-glow: 32%; } }
:root.party-tint body {
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 380px at 50% 160px, color-mix(in srgb, var(--party) var(--tint-glow), transparent), transparent 80%),
    linear-gradient(to bottom, color-mix(in srgb, var(--party) var(--tint-k), var(--bg)) 0, color-mix(in srgb, var(--party) calc(var(--tint-k) * .45), var(--bg)) 300px, var(--bg) 760px);
  background-repeat: no-repeat; background-size: 100% 900px; }

/* ---------- Resultado por capítulos y cartel del color del partido (19 oct. 2026) ----------
   El cartel ya no es negro: su fondo es el color de tu partido muy oscurecido (misma mezcla para todos), con
   superficies translúcidas dentro. El resultado va por capítulos con cabecera y una barra fija para saltar entre ellos. */
.result-hero {
  --bg: color-mix(in srgb, var(--party, #5b6478) 36%, #0c1122);
  --surface: rgba(255,255,255,.08); --surface2: rgba(255,255,255,.14); --mid: rgba(255,255,255,.32);
  --line: rgba(255,255,255,.18); --hair: rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--party, #5b6478) 55%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--party, #5b6478) 26%, transparent), transparent 60%),
    var(--bg); }
.result-hero .muted, .result-hero .eyebrow, .result-hero .aff-txt { color: rgba(255,255,255,.72); }

.ch-nav { position: sticky; top: calc(52px + env(safe-area-inset-top, 0px)); z-index: 15; margin: 18px -16px 0; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.ch-nav[hidden] { display: none; }
.ch-nav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ch-nav-in::-webkit-scrollbar { display: none; }
.ch-chip { flex: none; appearance: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--surface2); color: var(--ink-soft);
  font: 600 var(--fs-sm)/1.1 var(--font-body); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ch-chip:active { transform: scale(.96); }
.ch-chip.on { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .ch-chip:not(.on):hover { color: var(--ink); } }
.ch-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.chapter { display: flex; align-items: center; gap: 12px; padding-top: 96px; scroll-margin-top: 120px; }
.chapter[hidden] { display: none; }
.chapter .ch-n { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--on-ink); background: var(--ink); border-radius: 8px; padding: 3px 7px; line-height: 1.2; }
.chapter .ch-t { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.chapter::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--spectrum); opacity: .55; }
#v-result > .card.ch-first { padding-top: 26px; }
/* el primer capítulo va justo después de la barra */
.ch-nav + .chapter, .ch-nav[hidden] + .chapter { padding-top: 40px; }
@media (min-width: 900px) { .ch-nav { margin-inline: 0; border-radius: 999px; padding: 6px; } }

/* ---------- Movimiento del resultado (resultMotion en app.js) ----------
   Solo con JS y sin «reducir movimiento» (las clases `rv`, `in` y `play` las pone resultMotion; sin ellas todo
   se ve quieto). Capítulos: el número rebota, el título se desliza y la raya se dibuja. Tarjetas: suben con un
   fundido. Dentro: cascada de listas, barras que crecen, medidor de la nota, Congreso en ola y puntos del mapa. */
.chapter.rv .ch-n { transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1), opacity 260ms ease; }
.chapter.rv .ch-t { transition: transform 800ms var(--ease-expo) 90ms, opacity 500ms ease 90ms; }
.chapter.rv::after { transform-origin: left center; transition: transform 1200ms var(--ease-expo) 160ms; }
.chapter.rv:not(.in) .ch-n { transform: scale(.4) rotate(-12deg); opacity: 0; }
.chapter.rv:not(.in) .ch-t { transform: translateX(-12px); opacity: 0; }
.chapter.rv:not(.in)::after { transform: scaleX(0); }
#v-result > .card.rv { transition: opacity 550ms var(--ease-out), transform 750ms var(--ease-expo); }
#v-result > .card.rv:not(.in) { opacity: 0; transform: translateY(28px); }
.rv.play .stagger > * { animation: rv-rise 700ms var(--ease-expo) both; animation-delay: calc(160ms + var(--i, 0) * 70ms); }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } }
.rv:not(.in) .pbar .track i { transform: scaleX(0); }
.rv.in .pbar .track i { transition: transform 1000ms var(--ease-expo); transition-delay: calc(220ms + var(--i, 0) * 55ms); }
.rv.play .award .ico { animation: rv-pop 650ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(320ms + var(--i, 0) * 70ms); }
@keyframes rv-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
/* mapa del grupo: cada persona aparece en su punto */
.chart-wrap .pt { transform-box: fill-box; transform-origin: center; }
.rv.play .chart-wrap .pt { animation: rv-pt 650ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(260ms + var(--i, 0) * 80ms); }
@keyframes rv-pt { from { transform: scale(0); opacity: 0; } }
/* medidor de la nota presidencial (100 = perfil ideal) */
.pres-meter { height: 10px; max-width: 520px; margin-top: 14px; border-radius: 5px; background: var(--surface2); overflow: hidden; }
.pres-meter i { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: var(--mark); transform-origin: left center; }
.rv:not(.in) .pres-meter i { transform: scaleX(0); }
.rv.in .pres-meter i { transition: transform 1500ms var(--ease-expo) 350ms; }
/* lluvia de papeletas al descubrir el resultado */
.burst { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; perspective: 600px; }
.burst-b { position: absolute; left: 0; top: 0; width: 22px; height: 30px; margin: -15px 0 0 -11px; border-radius: 3px; will-change: transform;
  background: linear-gradient(var(--c, #8a93a8) 0 24%, transparent 24%), repeating-linear-gradient(transparent 0 4px, rgba(20,24,36,.16) 4px 5px) 4px 11px / 13px 15px no-repeat, #fbfaf6;
  box-shadow: 0 3px 8px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .burst { display: none; } }
/* revelado: tus respuestas convergen en tu punto (answerSwarm) */
.swarm { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; border-radius: inherit; }
.reveal .result-hero > canvas.swarm:not(.calc) { animation: none; opacity: 1; }
.result-hero.swarming .calc-axes { visibility: hidden; }
.result-hero.swarming .calc { align-content: end; padding-bottom: 34px; }

/* ---------- Fichas (partidos, ideologías, personajes, metodología, legales) ----------
   Cabecera de color como el cartel del resultado: azul noche, o el color del partido oscurecido en su ficha
   (`--party` y `--bg` los pone build-seo.mjs; misma mezcla para todos los partidos). Dentro caen papeletas
   (js/hero-field.js). El contenido entra al bajar con animaciones ligadas al scroll (sin JS). */
.doc-hero { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 14px; margin: 4px -8px 10px;
  padding: clamp(22px, 5vw, 46px) clamp(20px, 4.4vw, 44px) clamp(26px, 5.4vw, 52px); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--party, #4f5fa8) 48%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--party, #a85a7a) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.doc-hero:not([style*="--bg"]) { --bg: #0b1020; --surface: #161d36; --surface2: #222a48; }
.doc-hero[style*="--bg"] { --surface: rgba(255,255,255,.08); --surface2: rgba(255,255,255,.16); }
.doc-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; border-radius: inherit; background: url(/img/grain.png) repeat; background-size: 128px; opacity: .55; }
.doc-hero .hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms ease; }
.doc-hero .hero-field.on { opacity: 1; }
.doc-hero h1 { margin: 0; max-width: 16ch; text-wrap: balance; }
.doc-hero .lede, .doc-hero p { color: var(--ink-soft); }
.doc-hero .crumbs, .doc-hero .crumbs a { color: var(--muted); }
.doc-hero .crumbs a:hover { color: var(--ink); }
.doc-hero .seo-hero { margin-top: 2px; }
.doc-hero .sw.lg { box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
@media (min-width: 900px) { .doc-hero { margin-inline: -28px; } }
/* entrada de la cabecera al cargar */
@media (prefers-reduced-motion: no-preference) {
  .doc-hero > * { animation: hero-up 800ms var(--ease-expo) both; }
  .doc-hero > .crumbs { animation-delay: 40ms; } .doc-hero > h1 { animation-delay: 110ms; } .doc-hero > :is(.lede, .seo-hero, p) { animation-delay: 220ms; }
  .doc-hero > .hero-field { animation: none; }
}
@keyframes hero-up { from { opacity: 0; transform: translateY(16px); } }
/* la llamada final de una ficha de partido, con su color */
.doc.seo[style*="--party"] .seo-cta { background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--party) 45%, transparent), transparent 64%), var(--bg); }

/* icono de ideología: rejilla 3×3 con su casilla (y un punto en la esquina si es extrema) */
.ideo-glyph { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.ideo-glyph .off { fill: color-mix(in srgb, var(--ink) 14%, transparent); }
.ideo-glyph.lg { width: 48px; height: 48px; margin: 0; }

/* contenido de las fichas: entra al bajar (navegadores con animaciones ligadas al scroll; si no, quieto) */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .doc.seo > :is(h2, p, .seo-grid, .seo-map, .axes, .table-wrap, table, ul, ol, details, .seg-links, figure),
  .doc.seo .seo-grid > *, .doc.seo .faq details {
    animation: seo-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .doc.seo .seo-map svg [data-party], .doc.seo .seo-map svg .fig-mark { animation: seo-pop linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; transform-box: fill-box; transform-origin: center; }
} }
@keyframes seo-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes seo-pop { from { opacity: 0; transform: scale(.3); } }

/* ---------- Héroe: baraja de personajes (build-deck.mjs + homeDeck en app.js) ----------
   Cartas como el cartel del resultado, apiladas en 3D; la de delante sale volando hacia atrás y entra la
   siguiente. Color de cada carta = su lado del eje económico. En ordenador la baraja se inclina hacia el ratón y un
   brillo sigue al puntero. Tocar la baraja pasa a la siguiente. */
.deck { margin: 0; display: grid; gap: 16px; justify-items: center; min-width: 0; }
.deck-q { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); letter-spacing: -.03em; color: var(--ink); text-align: center; }
.deck-stage { position: relative; width: min(74vw, 300px); aspect-ratio: 5 / 7; perspective: 1300px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.deck-cards { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 600ms var(--ease-out); }
.deck-stage.tilting .deck-cards { transition-duration: 140ms; }
.dcard { --k: 0; position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 6px; padding: 18px 18px 16px; border-radius: 24px; color: #f4f6fc; overflow: hidden; isolation: isolate;
  background: radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--tone) 62%, transparent), transparent 62%),
              radial-gradient(110% 70% at 0% 100%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 60%), #10162b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -26px rgba(0,0,0,.7);
  transform: translate3d(calc(var(--k) * var(--dx, 13px)), calc(var(--k) * -11px), calc(var(--k) * -46px)) rotate(calc(var(--k) * var(--dr, 3.5deg)));
  z-index: calc(20 - var(--k)); opacity: calc(1 - var(--k) * .2);
  transition: transform 850ms cubic-bezier(.34, 1.25, .64, 1), opacity 500ms ease; }
.dcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: url(/img/grain.png) repeat; background-size: 128px; opacity: .5; }
.dcard.gone { opacity: 0; pointer-events: none; transform: translate3d(0, 0, -200px) scale(.9); }   /* escondida detrás: no ensancha la página */
@media (max-width: 899px) { .deck-stage { --dx: 7px; --dr: 2.4deg; width: min(66vw, 280px); } }
.dcard:not(.front) { pointer-events: none; }
.dc-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: rgba(244,246,252,.72); }
.dc-kind { padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,.12); color: #f4f6fc; font-weight: 600; }
.dc-work { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dc-name { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.2rem); line-height: .95; letter-spacing: -.04em; margin-top: 10px; }
.dc-ideo { font-weight: 600; color: rgba(244,246,252,.88); font-size: var(--fs-sm); }
.dc-map { width: 100%; max-width: 170px; justify-self: center; align-self: center; overflow: visible; font-family: var(--font-body); }
.dc-map text { font-size: 6.4px; fill: rgba(244,246,252,.5); }
.dc-mapbg { fill: rgba(255,255,255,.07); }
.dc-axis { stroke: rgba(255,255,255,.22); stroke-width: .8; fill: none; }
.dc-dot { fill: #fff; stroke: var(--tone); stroke-width: 2.4; }
.dc-halo { fill: color-mix(in srgb, var(--tone) 45%, transparent); }
.dc-desc { font-size: var(--fs-xs); color: rgba(244,246,252,.74); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-link { font-size: var(--fs-xs); font-weight: 600; color: #f4f6fc; text-decoration: none; justify-self: start; }
.dc-link:hover { text-decoration: underline; }
.dc-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.2), rgba(255,255,255,.05) 26%, transparent 55%); mix-blend-mode: soft-light; }
.deck-stage.tilting .dcard.front .dc-shine { opacity: 1; }
.deck-dots { display: flex; gap: 6px; }
.deck-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.deck-dots i.on { width: 18px; background: var(--ink); }
.deck-cap { font-size: var(--fs-sm); color: var(--muted); text-align: center; max-width: 32ch; }
.deck-cap a { color: var(--ink); }
@media (min-width: 900px) { .deck-stage { width: min(26vw, 20rem); } }
@media (prefers-reduced-motion: reduce) { .dcard, .deck-cards { transition: none; } }

/* ---------- Congreso en su propia sección (antes en el héroe) ---------- */
.cg-block .congreso { max-width: 640px; width: 100%; justify-self: center; }
/* en pantallas anchas el texto de la izquierda se queda fijo al bajar: el botón va a la derecha, bajo el hemiciclo (si no, el texto le pasaba por encima) */
@media (min-width: 900px) { .cg-block > div:last-child { justify-self: center; } }
/* regla general: en las secciones con el título fijo a la izquierda, todo lo demás va a la columna derecha */
@media (min-width: 900px) { #v-home > .block > :not(.block-head) { grid-column: 2; } }

/* ---------- Escena del grupo (homeGroupScene en app.js) ----------
   Los amigos llegan volando a su sitio en el mapa; luego se dibujan la pareja con más química, la que nunca debería
   cenar junta y la corona de quien presidiría; la media del grupo late. Se repite. Sin JS: todo visible y quieto. */
.gscene { display: grid; gap: 12px; padding: 14px; }
.gs-map { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-body); }
.gs-bg { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.12); }
.gs-axis { stroke: rgba(255,255,255,.26); stroke-width: 1.2; fill: none; }
.gs-grid { stroke: rgba(255,255,255,.08); stroke-dasharray: 3 4; fill: none; }
.gs-lab { font-size: 9px; fill: rgba(244,246,252,.55); }
.gs-p circle { fill: var(--c); stroke: #0f1222; stroke-width: 2.5; }
.gs-p text { font-size: 12px; font-weight: 800; fill: #0f1222; }
.gs-mean path { fill: none; stroke: #fff; stroke-width: 1.8; }
.gs-crown path { fill: #ffd65c; stroke: #0f1222; stroke-width: 1.4; stroke-linejoin: round; }
.gs-chem { stroke: #ff8fb6; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,143,182,.8)); }
.gs-clash { stroke: #ff6b6b; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .9; }
.gs-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gs-b { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: var(--fs-sm); color: var(--ink-soft); }
.gs-b b { color: var(--ink); }
.gs-e { font-size: 1.05rem; }
/* coreografía: la arma JS con .play; cada fase añade una clase */
.gscene.play .gs-p { opacity: 0; }
.gscene.play .gs-clash { opacity: 0; }
.gscene.play .gs-chem { opacity: 0; }
.gscene.play .gs-mean, .gscene.play .gs-crown { opacity: 0; }
.gscene.play .gs-b { opacity: .28; transform: none; }
.gscene .gs-chem, .gscene .gs-clash, .gscene .gs-mean, .gscene .gs-crown, .gscene .gs-b { transition: opacity 500ms ease, transform 600ms var(--ease-out), background-color 400ms ease; }
/* la media late en su sitio: el latido va en el rombo (centro propio), no en el grupo (que está trasladado y se movía de lado a lado) */
.gs-mean text { font-size: 8.5px; fill: rgba(244,246,252,.75); }
.gscene.ph-mean .gs-mean { opacity: 1; }
.gscene.ph-mean .gs-mean path { animation: gs-pulse 1600ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gs-pulse { 50% { transform: scale(1.35); } }
.gscene.play .gs-chem { stroke-dasharray: 100; stroke-dashoffset: 100; }
.gscene.ph-chem .gs-chem { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease-out), opacity 200ms ease; }
.gscene.ph-clash .gs-clash { opacity: .9; animation: gs-clash 900ms ease both; }
@keyframes gs-clash { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .3; } 50%, 100% { opacity: .9; } }
.gscene.ph-crown .gs-crown { opacity: 1; animation: gs-crown 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes gs-crown { from { translate: 0 -10px; scale: .3; } }
.gscene .gs-crown path { transform-box: fill-box; }
.gscene.ph-chem .gs-b[data-b="chem"], .gscene.ph-clash .gs-b[data-b="clash"], .gscene.ph-crown .gs-b[data-b="pres"] { opacity: 1; background: rgba(255,255,255,.13); }
.gscene.fade .gs-chem, .gscene.fade .gs-clash, .gscene.fade .gs-crown, .gscene.fade .gs-mean { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gscene .gs-mean path { animation: none; } }
.deck-next { font-size: var(--fs-sm); }
@media (max-width: 899px) { .dc-map { max-width: 128px; } .dcard { gap: 5px; padding: 16px 16px 14px; } }

/* ---------- Cualquier tamaño de pantalla (revisión del 19 oct. 2026: 13 tamaños, de 320 px a 2560 px) ---------- */
/* Pantallas muy grandes: la letra (y con ella los anchos, que van en rem) crece un poco para no quedar diminuta. */
@media (min-width: 1700px) { html { font-size: 112.5%; } }
@media (min-width: 2200px) { html { font-size: 125%; } }
@media (min-width: 2800px) { html { font-size: 140%; } }
/* Titulares grandes: además del ancho, miran el alto (móvil en horizontal: antes ocupaban casi toda la pantalla). */
:root { --fs-display: clamp(2.6rem, min(.9rem + 10.4vw, 1rem + 14vh), 7.25rem); }
.doc h1 { font-size: clamp(2.1rem, min(1.4rem + 5.4vw, .8rem + 11vh), 4.4rem); }
.ideology { font-size: clamp(2.2rem, min(1.2rem + 7vw, .8rem + 12vh), 4.6rem); }
/* Pantallas táctiles: más zona para tocar los enlaces pequeños sin cambiar cómo se ven. */
@media (pointer: coarse) {
  .crumbs a, .linkbtn, .dc-link, .deck-next, a.name, .fig-link, .footer a { padding-block: 9px; margin-block: -9px; display: inline-block; }
  .topbar .logo { padding-block: 8px; margin-block: -8px; }
  .crumbs { row-gap: 10px; }
}
/* Móvil en horizontal: el test en dos columnas para que la afirmación, las casillas y los botones quepan sin desplazarse. */
@media (orientation: landscape) and (max-height: 520px) {
  body.in-quiz main { padding-top: 10px; padding-bottom: 12px; max-width: 60rem; }
  body.in-quiz .ballot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 20px; row-gap: 10px; padding: 14px 18px; align-items: start; }
  body.in-quiz .ballot > .progress { grid-column: 1 / -1; }
  body.in-quiz .ballot > .q-extra { grid-column: 1 / -1; grid-row: 2; }
  body.in-quiz .ballot:has(> .q-extra:not([hidden])) > .imp { grid-row: 3; }
  body.in-quiz .ballot:has(> .q-extra:not([hidden])) > .stack { grid-row: 4; }
  body.in-quiz .ballot:has(> .q-extra:not([hidden])) > .qnav { grid-row: 5; }
  body.in-quiz .ballot:has(> .q-extra:not([hidden])) > .statement { grid-row: 3 / span 3; }
  body.in-quiz .ballot > .statement { grid-column: 1; grid-row: 2 / span 3; font-size: clamp(1.05rem, .6rem + 2.6vh, 1.45rem); margin: 0; }
  body.in-quiz .ballot > .imp { grid-column: 2; grid-row: 2; padding: 6px 12px 4px; align-self: start; }
  body.in-quiz .imp-head label { font-size: var(--fs-xs); }
  body.in-quiz .ballot > .stack { grid-column: 2; grid-row: 3; align-self: start; }
  body.in-quiz .ballot > .qnav { grid-column: 2; grid-row: 4; align-self: start; }
  body.in-quiz .ballot > #q-err { grid-column: 1 / -1; }
  body.in-quiz .imp-ends { display: none; }
  body.in-quiz .boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  body.in-quiz .box { height: min(42px, 9.5vh); aspect-ratio: auto; }
  body.in-quiz #q-prev .hide-xs { display: none; }
  body.in-quiz .qnav .btn { padding: 8px 14px; min-height: 0; }
  body.in-quiz .scale-ends { font-size: var(--fs-xs); white-space: nowrap; }
  body.in-quiz .scale-ends .hide-xs { display: none; }
  body.in-quiz .ballot > .stack { gap: 4px !important; }
  body.in-quiz .imp input[type=range] { margin-block: 2px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) {
  body.in-quiz .imp-val { font-size: 11px; padding: 2px 8px; }
  body.in-quiz main { padding-inline: 10px; }
}
/* (horizontal, test) más compacto aún: en un iPhone real la barra de Safari quita ~50 px de alto */
@media (orientation: landscape) and (max-height: 520px) {
  body.in-quiz .topbar { padding-block: calc(4px + env(safe-area-inset-top, 0px)) 4px; }
  body.in-quiz .logo-mark { width: 24px; height: 24px; }
  body.in-quiz main { padding-top: 6px; }
  body.in-quiz .ballot { padding: 10px 16px 12px; row-gap: 6px; }
  body.in-quiz .progress { gap: 6px; }
  body.in-quiz .box { height: min(38px, 9vh); }
  body.in-quiz .qnav .btn { padding: 6px 14px; }
}
@media (orientation: landscape) and (max-height: 350px) {
  body.in-quiz .ballot { row-gap: 4px; padding-block: 8px 10px; }
  body.in-quiz .imp { padding-block: 4px 2px; }
  body.in-quiz .scale-ends { margin-top: -2px; }
}

/* ---------- Mejoras interactivas y virales (oct. 2026) ---------- */
[data-imp-set] { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 150ms ease, opacity 150ms ease; }
[data-imp-set]:hover { color: var(--ink); }
.ch-member-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); font-size: var(--fs-xs); color: var(--muted); overflow-x: auto; scrollbar-width: none; }
.ch-member-bar::-webkit-scrollbar { display: none; }
.ch-member-bar[hidden] { display: none; }
.ch-m-label { flex: none; font-weight: 600; margin-right: 2px; }
.ch-m-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface2); color: var(--ink-soft); font: 600 var(--fs-xs)/1.2 var(--font-body); padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.ch-m-btn .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ch-m-btn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cg-pact-bar { display: flex; justify-content: center; margin-top: 4px; }
.share-quick { justify-content: center; gap: 8px; }
.share-quick .btn { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: var(--fs-sm); text-align: center; justify-content: center; }
#share-kinds { display: flex; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
#share-kinds[hidden] { display: none; }
#share-kinds::-webkit-scrollbar { display: none; }
#share-kinds button { flex: 1 0 auto; white-space: nowrap; font-size: var(--fs-xs); padding: 7px 11px; }
.guess-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.guess-streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); font-weight: 700; font-size: var(--fs-xs); color: var(--ink); }
.guess-others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hair); }
.guess-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface2); font-size: var(--fs-xs); color: var(--ink-soft); }
.guess-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.stance-list { display: grid; gap: 10px; margin: 14px 0; }
.stance-item { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hair); }
.stance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stance-badge { flex: none; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; background: var(--surface2); color: var(--ink); }
.stance-badge.pro { background: color-mix(in srgb, #24c87e 20%, var(--surface2)); color: var(--ink); }
.stance-badge.con { background: color-mix(in srgb, #ff6b6b 20%, var(--surface2)); color: var(--ink); }
.tema-parties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tema-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface2); font-size: var(--fs-xs); text-decoration: none; color: var(--ink); }
.tema-pill:hover { background: var(--line); }

/* ---------- Radiografía de partidos y personajes + Comparador cara a cara ---------- */
.pbar[role="button"] { cursor: pointer; border-radius: var(--r-sm); padding: 4px 6px; margin-inline: -6px; transition: background-color 150ms ease; }
.pbar[role="button"]:hover, .pbar.sel { background: var(--surface2); }
.pbar.sel .name { font-weight: 700; color: var(--ink); }

.cg-hero-info:empty { display: none; }
.cg-hero-info { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); text-align: left; }
.cgi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cgi-title { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: var(--ink); }
.cgi-title i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cgi-meta { color: var(--muted); }
.cgi-lead, .cgi-who { margin: 0; line-height: 1.45; }
.cgi-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.home-actors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.ha-col { padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ha-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.party-focus, .fig-focus { display: grid; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); min-width: 0; }
.pf-picker { display: grid; gap: 6px; min-width: 0; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface2); color: var(--ink-soft); font: 600 var(--fs-xs)/1.2 var(--font-body); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.pf-tab i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pf-tab:hover { border-color: var(--line); color: var(--ink); }
.pf-tab.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pf-body { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--hair); min-width: 0; }
.pf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-title-wrap { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 200px; }
.pf-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: 5px; }
.pf-aff { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); font-weight: 700; font-size: var(--fs-xs); color: var(--ink); }
.pf-who { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
.pf-axes { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.pf-axis { display: grid; gap: 4px; min-width: 0; }
.pf-axis-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.pf-dual-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); margin: 3px 0; }
.pf-dual-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pf-dot-you, .pf-dot-them { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.pf-dot-you { width: 11px; height: 11px; background: var(--ink); border: 2px solid var(--surface); z-index: 2; }
.pf-dot-them { width: 10px; height: 10px; border: 1.5px solid var(--surface); z-index: 1; }
.pf-ans-wrap { padding-top: 10px; border-top: 1px solid var(--hair); min-width: 0; }
.pf-ans-grid { display: grid; gap: 8px; }
.pf-ans-item { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--hair); min-width: 0; }
.pf-ans-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pf-ans-q { margin: 0; font-weight: 600; font-size: var(--fs-sm); line-height: 1.38; color: var(--ink); }
.pf-ans-scores { margin: 0; color: var(--ink-soft); }
.pf-badge { flex: none; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; background: var(--surface2); color: var(--ink-soft); }
.pf-badge.ok { background: color-mix(in srgb, #24c87e 22%, var(--surface2)); color: var(--ink); }
.pf-badge.mid { background: color-mix(in srgb, #f0a600 22%, var(--surface2)); color: var(--ink); }
.pf-badge.clash { background: color-mix(in srgb, #ff6b6b 22%, var(--surface2)); color: var(--ink); }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* Comparador cara a cara de partidos en /partidos/ */
.p-comp { display: grid; gap: 14px; margin: 22px 0; }
.p-comp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p-comp-head h2 { margin: 2px 0 4px; }
.p-comp-head p { margin: 0; }
.p-comp-Badge { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--hair); font-weight: 800; font-size: var(--fs-md); color: var(--ink); }
.p-comp-Badge small { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
.p-comp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.p-comp-presets .chip { cursor: pointer; font: 600 var(--fs-xs)/1.2 var(--font-body); }
.p-comp-presets .chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.p-comp-pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--hair); }
.p-comp-sel { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); min-width: 0; }
.p-comp-sel select { width: 100%; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 var(--fs-sm)/1.2 var(--font-body); }
.p-comp-vs { font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--muted); padding-bottom: 9px; }
#pc-body { display: grid; gap: 14px; min-width: 0; }
.p-comp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.p-comp-col { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--hair); border-top: 3px solid var(--pc, var(--line)); align-content: start; min-width: 0; }
.p-comp-col p { margin: 0; }
.p-comp-top { display: flex; align-items: center; gap: 9px; }
.p-comp-top div { display: grid; gap: 1px; min-width: 0; }
.p-comp-axes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.p-comp-topics { display: grid; gap: 10px; }
.p-comp-topic { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--hair); }
.p-comp-topic h3 { margin: 0; font-size: var(--fs-md); }
.p-comp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: var(--fs-sm); line-height: 1.48; color: var(--ink-soft); }
.p-comp-pair > div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--hair); min-width: 0; }
.p-comp-qs { display: grid; gap: 10px; }
.p-comp-qs > h3 { margin: 4px 0 0; }
.pc-q { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--hair); min-width: 0; }
.pc-q-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); line-height: 1.38; }
.pc-match { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.pc-match.same { background: color-mix(in srgb, #24c87e 22%, var(--surface)); color: var(--ink); }
.pc-match.mid { background: color-mix(in srgb, #f0a600 22%, var(--surface)); color: var(--ink); }
.pc-match.clash { background: color-mix(in srgb, #ff6b6b 22%, var(--surface)); color: var(--ink); }
@media (max-width: 520px) {
  .p-comp-pickers { grid-template-columns: 1fr; }
  .p-comp-vs { display: none; }
}