/* Escenas por área (va-motion · [va_escena]) — 05/10. Colores del tema de la sección (claro u oscuro). */
.va-scene{margin-top:clamp(32px,4vw,56px);color:var(--fg)}
.va-scene .readout{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.va-scene .readout b{font-family:var(--va-display);font-weight:200;font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.va-scene .readout span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.va-scene .scene-note{font-size:13px;color:var(--fg3);margin:14px 0 0;max-width:62ch}
.va-scene svg{width:100%;height:auto;display:block;overflow:visible}
.va-scene text{font-family:var(--va-body);fill:var(--fg)}
.va-scene .scene-note{font-size:13px;color:var(--fg3);margin:14px 0 0;max-width:60ch}
.va-scene .readout{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.va-scene .readout b{font-family:var(--va-display);font-weight:200;font-size:clamp(44px,5vw,72px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.va-scene .readout span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.va-scene .readout.penal span{color:var(--fg)}
/* euro */
svg.euro .g{fill:var(--fg4);opacity:.35}
svg.euro .route{fill:none;stroke:var(--fg);stroke-width:1;opacity:.55}
svg.euro .cap{fill:var(--fg)}
svg.euro .cap-t{font-size:12px;fill:var(--fg2)}
svg.euro .halo{fill:none;stroke:var(--fg);stroke-width:1}
svg.euro .core{fill:var(--fg)}
svg.euro .hq-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.va-scene .phases4{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.va-scene .phases4 li{border-top:1px solid var(--line2);padding-top:12px;display:grid;gap:4px;align-content:start}
.va-scene .phases4 .n{font-size:11px;letter-spacing:.2em;color:var(--fg3)}
.va-scene .phases4 b{font-family:var(--va-display);font-weight:400;font-size:17px}
.va-scene .phases4 span:last-child{font-size:12.5px;color:var(--fg2);line-height:1.45}
/* tasa */
svg.tasa .z{fill:var(--fg);opacity:.12;transition:opacity .25s}
svg.tasa .zl{font-size:13px;opacity:.35}
svg.tasa .axis,svg.tasa .tk{stroke:var(--fg3);stroke-width:1}
svg.tasa .tk-t{font-size:11px;fill:var(--fg3);font-variant-numeric:tabular-nums}
svg.tasa .blood line{stroke:var(--fg);stroke-dasharray:3 4}
svg.tasa .blood text{font-size:11px;letter-spacing:.08em;fill:var(--fg2)}
svg.tasa .needle line{stroke:var(--fg);stroke-width:1.6}
svg.tasa .needle circle{fill:var(--fg)}
/* drogas */
svg.drogas .sub{font-family:var(--va-display);font-size:20px;font-weight:300}
svg.drogas .sm{font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--fg3)}
svg.drogas .rail{stroke:var(--line2);stroke-width:1}
svg.drogas .fill{stroke:var(--fg2);stroke-width:3}
svg.drogas .row.over .fill{stroke:var(--fg)}
svg.drogas .thr{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 3}
svg.drogas .thr-t{font-size:13px;letter-spacing:.06em}
/* jurado */
svg.jurado .seat circle{fill:none;stroke:var(--fg3);stroke-width:1;transition:fill .3s,stroke .3s}
svg.jurado .seat text{font-size:12px;fill:var(--fg3)}
svg.jurado .seat.on circle{fill:var(--fg);stroke:var(--fg)}
svg.jurado .seat.on text{fill:var(--bg)}
svg.jurado .mp rect{fill:none;stroke:var(--line2)}
svg.jurado .mp text{font-size:11px;letter-spacing:.1em;fill:var(--fg2)}
.va-scene .votes{display:flex;align-items:end;gap:20px;margin-top:22px}
.va-scene .vbar{flex:1;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;padding-bottom:22px}
.va-scene .vbar i{height:8px;background:var(--line2);position:relative;transition:background .3s}
.va-scene .vbar i.on{background:var(--fg)}
.va-scene .vbar i[data-mark]::after{content:attr(data-mark);position:absolute;right:-2px;top:14px;font-style:normal;font-size:10px;letter-spacing:.08em;white-space:nowrap;color:var(--fg3);border-right:1px solid var(--fg3);padding-right:6px;line-height:1.2}
.va-scene .vbar.done i:nth-child(7)::after{color:var(--fg)}
.va-scene .vcount{display:flex;align-items:baseline;gap:8px}
.va-scene .vcount b{font-family:var(--va-display);font-weight:200;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.va-scene .vcount span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
/* estafa */
svg.estafa .node rect{fill:var(--bg2);stroke:var(--fg2);stroke-width:1}
svg.estafa .node text{font-family:var(--va-display);font-size:16px}
svg.estafa .node .num{font-family:var(--va-body);font-size:11px;letter-spacing:.2em;fill:var(--fg3)}
svg.estafa .node.dim{opacity:.3!important;transition:opacity .4s}
svg.estafa .wire{stroke:var(--fg);stroke-width:1.2;fill:none}
svg.estafa .cut line{stroke:var(--fg);stroke-width:2}
.va-scene .estafa-note{font-family:var(--va-display);font-size:clamp(18px,2vw,24px);font-weight:300;color:var(--fg)}
/* recursos */
svg.recursos .stair{fill:none;stroke:var(--fg);stroke-width:1.2}
svg.recursos .t{font-family:var(--va-display);font-size:19px;font-weight:300}
svg.recursos .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--fg3)}
svg.recursos .d{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
svg.recursos .dot{fill:var(--fg)}
/* rapido */
svg.rapido .rail{stroke:var(--line2);stroke-width:1}
svg.rapido .lit{stroke:var(--fg);stroke-width:1.6}
svg.rapido .m circle{fill:var(--bg);stroke:var(--fg3);stroke-width:1}
svg.rapido .m .t{font-family:var(--va-display);font-size:16px;fill:var(--fg3)}
svg.rapido .m .k{font-size:11px;letter-spacing:.1em;fill:var(--fg4)}
svg.rapido .m.on circle{fill:var(--fg);stroke:var(--fg)}
svg.rapido .m.on .t{fill:var(--fg)}
svg.rapido .m.on .k{fill:var(--fg2)}
/* alejamiento */
svg.aleja .st{stroke:var(--line2);stroke-width:1;opacity:.7}
svg.aleja .av{stroke:var(--line);stroke-width:2}
svg.aleja .scale line{stroke:var(--fg3);stroke-width:1}
svg.aleja .scale text{font-size:11px;fill:var(--fg3)}
svg.aleja .r500{fill:none;stroke:var(--fg2);stroke-width:1;stroke-dasharray:4 5}
svg.aleja .r200{fill:var(--fg);fill-opacity:.07;stroke:var(--fg);stroke-width:1}
svg.aleja .c{fill:var(--fg)}
svg.aleja .who{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--fg2)}
svg.aleja .rl line{stroke:var(--fg2);stroke-width:1}
svg.aleja .rl text{font-size:13px;letter-spacing:.06em}
svg.aleja .rl .sm2{font-size:11px;fill:var(--fg2)}

@media (max-width:820px){
  .va-scene .phases4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* móvil: el esquema entra entero (sin deslizar) y los rótulos crecen en unidades del dibujo para seguir legibles */
  .va-scene svg text{font-size:19px}
  .va-scene svg.drogas .sub{font-size:30px}
  .va-scene svg.euro .cap-t{font-size:17px}
  .va-scene svg.euro .hq-t,.va-scene svg.tasa .tk-t,.va-scene svg.rapido .m .k{font-size:16px}
  .va-scene svg.tasa .zl{font-size:17px}
  .va-scene svg.tasa .zl2{display:none}
  .va-scene svg.recursos .t{font-size:26px}
  .va-scene svg.estafa .node text{font-size:20px}
  .va-scene svg.jurado .mp text{font-size:17px}
  .va-scene svg.aleja .rl text{font-size:22px}
  .va-scene .vbar i[data-mark]::after{font-size:9px}
  .va-scene .vbar i:nth-child(5)::after{top:auto;bottom:12px}
  .va-scene .votes{gap:12px}
  .va-scene .readout{flex-wrap:wrap;row-gap:4px}
  .va-scene svg.drogas .sm{display:none}
  .va-scene svg.drogas .thr-t{font-size:24px}
  .va-scene svg.euro .cap-t{font-size:20px}
  .va-scene svg.tasa .tk-t{font-size:20px}
  .va-scene svg.tasa .blood text{font-size:19px}
  .va-scene svg.recursos .k{display:none}
  .va-scene svg.recursos .d{font-size:19px}
  .va-scene svg.rapido .m .t{font-size:20px}
  .va-scene svg.rapido .m .k{font-size:19px}
  .va-scene svg.aleja .scale text{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.va-scene *{transition:none!important}}
/* móvil (clase .m que pone scenes.js con el encuadre propio de cada escena) */
.va-scene.m svg.estafa .node text{font-size:17px}
.va-scene.m svg.estafa .node .num{font-size:12px}
.va-scene.m svg.jurado .mp text{font-size:17px}
.va-scene.m svg.aleja .who{font-size:16px}
.va-scene.m svg.aleja .rl text{font-size:17px}
.va-scene.m svg.aleja .rl .sm2{font-size:15px}
.va-scene.m svg.aleja .scale text{font-size:15px}
.va-scene.m .vbar i[data-mark]::after{font-size:11px}