/* ============================================================
   17 para el 27 — micrositio (Fase 5A)
   Sin librerías externas. Bootstrap 5 + utilidades nativas.
   ============================================================ */

:root {
    --bct-red: #E50914;
    --bct-red-dark: #B60710;
    --bct-dark: #0E0E11;
    --bct-darker: #07070A;
    --bct-card-dark: #16161B;
    --bct-card-border: #26262E;
    --bct-text: #ECECEC;
    --bct-text-muted: #8A8A92;
    --bct-light: #F5F5F2;
    --bct-light-card: #FFFFFF;
}

.election-section {
    padding: 4rem 0;
}

.election-section--dark {
    background: var(--bct-dark);
    color: var(--bct-text);
}

.election-section--light {
    background: var(--bct-light);
    color: #1A1A1A;
}

.election-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin-bottom: 0.5rem;
}

.election-section--light .election-eyebrow {
    color: #555;
}

.election-card-dark {
    background: var(--bct-card-dark);
    border: 1px solid var(--bct-card-border);
    color: var(--bct-text);
}

/* ===== HERO (rediseño mayo 2026: oscuro + accent rojo) ===== */
.election-hero-band {
    background: #0A0A0E;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.election-hero-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    flex-wrap: wrap;
}
.election-hero-band__left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.election-hero-band__badge {
    display: inline-block;
    background: var(--bct-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 2px;
}
.election-hero-band__eyebrow {
    color: rgba(255,255,255,0.85);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.election-hero-band__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}
.election-hero-band__nav a {
    color: rgba(255,255,255,0.82);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}
.election-hero-band__nav a:hover {
    color: var(--bct-red);
    text-decoration: none;
}

/* Hero base — gradient editorial para state pages, figure pages y cualquier
   otro consumidor de .election-hero. El landing micrositio sobrescribe abajo. */
.election-hero {
    background:
        radial-gradient(circle at 15% 110%, rgba(229,9,20,0.18) 0%, rgba(229,9,20,0) 55%),
        #0B0B0F;
    color: #fff;
    padding: 4.5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}
.election-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    opacity: 0.55;
}
.election-hero > .container { position: relative; z-index: 3; }

/* Hero del landing del micrositio — id especifico, sobrescribe el bg base
   con la imagen editorial. NO afecta state/figure pages que solo usan la clase. */
#election-hero {
    background:
        /* Scrim horizontal: oscurece la izquierda (legibilidad del texto);
           fade hacia la derecha (mapa/Palacio del asset visible). */
        linear-gradient(90deg,
            rgba(8, 8, 12, 0.85) 0%,
            rgba(8, 8, 12, 0.55) 35%,
            rgba(8, 8, 12, 0.1) 65%,
            rgba(8, 8, 12, 0) 100%),
        /* Atmosfera completa (mapa + halos + Palacio + grid + glow) via PNG.
           position: center top → top siempre visible, recorte va por el bottom. */
        url('/images/election-hero-bg.png') center top / cover no-repeat,
        /* Fallback dark si el asset no carga */
        #0B0B0F;
}
#election-hero::before {
    /* Grid sutil del base removido en el landing — la atmosfera vive en el PNG */
    content: none;
}

/* =====================================================================
   FASE HERO ATMOSPHERE OVERLAY
   Capa de movimiento sutil entre bg image y contenido del hero.
   Newsroom premium / political intelligence — NO sci-fi, NO gaming.
   - 6 pulsos territoriales (zona derecha, alineados con dots del bg)
   - 3 connection curves SVG con stroke-dashoffset trace
   - 1 scan line vertical lado derecho (sweep lento)
   - Micro flicker integrado en los pulsos
   - CSS keyframes puros, cero GSAP, transform/opacity only
   - Mobile: capa oculta completamente
   ===================================================================== */
.election-hero__atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Dot grid animado — refuerza el patron de dots estatico del bg image.
   Posicion: ellipse mask anclada upper-left, fade radial. Animacion:
   breathing opacity 0.16<->0.32 cada 7s + ripple wave que emana cada 8s. */
.election-hero__atm-dotsgrid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(229, 9, 20, 0.5) 1px, transparent 1.5px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 18% 28%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 18% 28%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 75%);
    opacity: 0.22;
    pointer-events: none;
    animation: hero-atm-dotsgrid-breathe 7s ease-in-out infinite;
    will-change: opacity;
}
.election-hero__atm-dotsgrid::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 18%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 9, 20, 0.5);
    transform: scale(0);
    opacity: 0;
    animation: hero-atm-dotsgrid-ripple 8s ease-out infinite;
    will-change: transform, opacity;
}

@keyframes hero-atm-dotsgrid-breathe {
    0%, 100% { opacity: 0.14; }
    50%      { opacity: 0.32; }
}
@keyframes hero-atm-dotsgrid-ripple {
    0%   { transform: scale(0); opacity: 0; }
    12%  { opacity: 0.55; }
    100% { transform: scale(7); opacity: 0; }
}

/* Pulso territorial: dot rojo solid + ring expanding via ::after */
.election-hero__atm-pulse {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--bct-red);
    box-shadow: 0 0 8px var(--bct-red), 0 0 18px rgba(229, 9, 20, 0.4);
    opacity: 0.55;
    animation: hero-atm-flicker 12s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: opacity;
}
.election-hero__atm-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--bct-red);
    transform: scale(1);
    opacity: 0.55;
    animation: hero-atm-ring 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}

@keyframes hero-atm-ring {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(4.5); opacity: 0; }
}
/* Flicker pseudo-irregular: 3 dips en 12s, asincronos */
@keyframes hero-atm-flicker {
    0%, 100% { opacity: 0.55; }
    14%      { opacity: 0.35; }
    17%      { opacity: 0.55; }
    46%      { opacity: 0.4; }
    49%      { opacity: 0.6; }
    78%      { opacity: 0.32; }
    81%      { opacity: 0.55; }
}

/* Connection curves SVG */
.election-hero__atm-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.election-hero__atm-curve {
    fill: none;
    stroke: rgba(229, 9, 20, 0.22);
    stroke-width: 0.35;
    stroke-linecap: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: hero-atm-curve-trace 8s linear infinite;
}
.election-hero__atm-curve:nth-of-type(2) { animation-delay: 2.6s; }
.election-hero__atm-curve:nth-of-type(3) { animation-delay: 5.2s; }

@keyframes hero-atm-curve-trace {
    0%   { stroke-dashoffset: 60;  opacity: 0; }
    15%  { opacity: 1; }
    50%  { stroke-dashoffset: 0;   opacity: 1; }
    72%  { opacity: 1; }
    100% { stroke-dashoffset: -60; opacity: 0; }
}

/* Scan line halo: vertical sweep en zona derecha */
.election-hero__atm-scan {
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(229, 9, 20, 0) 0%,
        rgba(229, 9, 20, 0.06) 35%,
        rgba(229, 9, 20, 0.1) 50%,
        rgba(229, 9, 20, 0.06) 65%,
        rgba(229, 9, 20, 0) 100%);
    transform: translateY(-100%);
    animation: hero-atm-scan 14s ease-in-out infinite;
    will-change: transform;
}
@keyframes hero-atm-scan {
    0%   { transform: translateY(-100%); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(0%);    opacity: 1; }
    92%  { opacity: 0; }
    100% { transform: translateY(100%);  opacity: 0; }
}

/* Responsive: degradacion progresiva */
@media (max-width: 1199.98px) {
    /* lg: quita scan line + tercera curva */
    .election-hero__atm-scan { display: none; }
    .election-hero__atm-curve:nth-of-type(3) { display: none; }
}
@media (max-width: 991.98px) {
    /* md: solo 3 pulsos + 1 curva */
    .election-hero__atm-pulse:nth-of-type(n+4) { display: none; }
    .election-hero__atm-curve:nth-of-type(n+2) { display: none; }
}
@media (max-width: 767.98px) {
    /* sm/xs: oculta capa completa, solo bg + scrim */
    .election-hero__atmosphere { display: none; }
}

/* prefers-reduced-motion: animaciones off, capa visible estatica tenue */
@media (prefers-reduced-motion: reduce) {
    .election-hero__atm-pulse,
    .election-hero__atm-pulse::after,
    .election-hero__atm-curve,
    .election-hero__atm-scan,
    .election-hero__atm-dotsgrid,
    .election-hero__atm-dotsgrid::after {
        animation: none;
    }
    .election-hero__atm-pulse::after { opacity: 0; }
    .election-hero__atm-curve { stroke-dashoffset: 0; opacity: 0.6; }
    .election-hero__atm-scan { opacity: 0; transform: none; }
    .election-hero__atm-dotsgrid { opacity: 0.2; }
    .election-hero__atm-dotsgrid::after { opacity: 0; }
}

.election-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
}
.election-hero__chip {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.42rem 0.85rem;
    border-radius: 2px;
}
.election-hero__chip--red {
    background: var(--bct-red);
    color: #fff;
}
.election-hero__chip--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
}

.election-hero__title {
    font-size: clamp(4.5rem, 12vw, 9.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.045em;
    margin: 0;
    color: #fff;
}
.election-hero__title-accent {
    color: var(--bct-red);
}

.election-hero__lead {
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 32rem;
    margin: 1.75rem 0 2rem;
    color: rgba(255,255,255,0.85);
}
.election-hero__lead strong {
    color: #fff;
    font-weight: 700;
}

.election-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.election-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 0.85rem 1.4rem;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.election-hero__cta--primary {
    background: var(--bct-red);
    color: #fff;
}
.election-hero__cta--primary:hover {
    background: #FF3B45;
    color: #fff;
    text-decoration: none;
}
.election-hero__cta--ghost {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.22);
    color: #fff;
}
.election-hero__cta--ghost:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
}
.election-hero__cta-arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}
.election-hero__cta:hover .election-hero__cta-arrow {
    transform: translateX(3px);
}

.election-hero__stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.election-hero__stat {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1.1rem 1.4rem;
    border-radius: 4px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.election-hero__stat:hover {
    border-color: rgba(229,9,20,0.35);
    background: rgba(229,9,20,0.05);
}

.election-hero__stat-value {
    font-size: 2.6rem;
    font-weight: 900;
    min-width: 5.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--bct-red);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.election-hero__stat--date .election-hero__stat-value {
    font-size: 2rem;
    line-height: 1;
}
.election-hero__stat-value-line {
    display: block;
}

.election-hero__stat-label {
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.78);
}

.election-hero__glow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(229,9,20,0) 0%, rgba(229,9,20,0.85) 50%, rgba(229,9,20,0) 100%);
    pointer-events: none;
}

/* ===== NATIONAL BOARD (refinado 5A.1) ===== */
.election-board { padding: 5rem 0; }

.election-board__header {
    margin-bottom: 2.5rem;
    max-width: 52rem;
}

.election-board__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.election-board__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 0.85rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.election-board__subtitle {
    color: var(--bct-text-muted);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    max-width: 36rem;
}

.election-board__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 480px) { .election-board__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .election-board__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .election-board__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .election-board__grid { grid-template-columns: repeat(5, 1fr); } }

.election-board__card {
    position: relative;
    background: #16161B;
    border: 1px solid #24242C;
    border-left: 2px solid #36363E;
    padding: 1.1rem 1.1rem 1rem;
    text-decoration: none;
    color: var(--bct-text);
    display: flex;
    flex-direction: column;
    min-height: 160px;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.election-board__card:hover {
    border-color: var(--bct-red);
    transform: translateY(-2px);
    color: #fff;
}

.election-board__card--active {
    border-left-color: rgba(229, 9, 20, 0.55);
}

.election-board__card--featured {
    background: linear-gradient(140deg, #1f0a0d 0%, #14080a 100%);
    border-color: rgba(229, 9, 20, 0.55);
    border-left-color: var(--bct-red);
    border-left-width: 3px;
}

.election-board__card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.election-board__code {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--bct-text-muted);
    font-weight: 700;
}

.election-board__card--featured .election-board__code { color: rgba(255, 200, 200, 0.85); }

.election-board__badge {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    background: var(--bct-red);
    color: #fff;
    padding: 0.2rem 0.5rem;
    font-weight: 800;
    white-space: nowrap;
}

.election-board__name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 0.8rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.election-board__dom {
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.election-board__dom-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    font-weight: 600;
}

.election-board__dom-name {
    font-size: 0.88rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.25;
}

.election-board__party {
    align-self: flex-start;
    display: inline-block;
    padding: 0.12rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    background: #555;
    margin-top: 0.45rem;
}

.election-board__dom--empty .election-board__dom-label {
    color: rgba(255, 255, 255, 0.28);
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: none;
    font-size: 0.72rem;
}

.election-board__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bct-text-muted);
    border: 1px dashed #2A2A32;
}

/* ============================================================
   FEATURED CONTEST (refinado 5A.2)
   Bloque editorial sin caja. Acentos rojos sobrios, jerarquía clara.
   ============================================================ */
.election-featured {
    position: relative;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 768px) {
    .election-featured { padding-left: 2.5rem; }
}

.election-featured__header {
    margin-bottom: 3rem;
}
/* Header alineado horizontalmente al body framed: mismo grid template
   (1.4fr/1fr), mismo gap, mismo padding-left/right que el frame interno
   del body. Resultado: el bloque derecho del header empieza exactamente
   en el mismo X donde empieza "Perfil dominante hoy" abajo — sidebar
   visualmente continua a la derecha. */
@media (min-width: 992px) {
    .election-featured__header {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 2.25rem;
        padding-left: 2.25rem;
        padding-right: 2.25rem;
        align-items: center;
    }
}
@media (min-width: 1200px) {
    .election-featured__header {
        gap: 2.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.election-featured__kicker {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.election-featured__kicker-line {
    width: 28px;
    height: 2px;
    background: var(--bct-red);
}

.election-featured__kicker-text {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 700;
}

.election-featured__kicker-code {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--bct-text-muted);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.8rem;
    font-weight: 700;
}

.election-featured__state {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 1rem;
}

.election-featured__lede {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.9rem;
    max-width: 40rem;
}

.election-featured__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-bottom: 1.1rem;
}

/* Tags sin border-right — cuando wrapean queda limpio.
   Separacion visual via flex gap unicamente. */
.election-featured__tag {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    font-weight: 600;
}

.election-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bct-red);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, gap 0.2s ease;
}
.election-featured__cta:hover {
    color: var(--bct-red);
    border-bottom-color: var(--bct-red);
    gap: 0.75rem;
}
.election-featured__cta-arrow { transition: transform 0.2s ease; }

.election-featured__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 992px) {
    .election-featured__body {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

.election-featured__editorial {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
}
.election-featured__editorial p { margin: 0 0 1rem; }
.election-featured__editorial p:first-of-type {
    font-size: 1.1rem;
    color: #fff;
}
.election-featured__editorial p:last-child { margin-bottom: 0; }
.election-featured__editorial-empty {
    color: var(--bct-text-muted);
    font-style: italic;
}

.election-featured__sidecol { width: 100%; }

.election-featured__metrics-row {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Baseline compartido con State.cshtml: NO modificar visualmente para no
   romper la página de estado. Solo asegura un look consistente sobrio. */
.election-featured__panel {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
}

/* ============================================================
   DOMINANT FIGURE (modifier 5A.2)
   Mejora editorial sobre el baseline del panel.
   ============================================================ */
.election-dominant {
    padding: 1.75rem;
    border-left: 3px solid var(--bct-red);
}

.election-dominant__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 700;
    margin: 0;
}

.election-dominant__name {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
}

.election-dominant__role {
    font-size: 0.85rem;
    color: var(--bct-text-muted);
    margin: 0;
    font-style: italic;
}

.election-dominant__quote {
    margin: 0 0 1.5rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid rgba(229, 9, 20, 0.55);
    font-size: 0.95rem;
    line-height: 1.55;
    color: #fff;
}
.election-dominant__quote p { margin: 0; }

.election-dominant__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    margin: 0;
}

.election-dominant__metric {
    display: flex;
    flex-direction: column;
}

.election-dominant__metric-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.election-dominant__metric-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--bct-red);
    margin: 0;
    line-height: 1;
}

/* ============================================================
   FIGURE CARDS (refinado 5A.2)
   Card editorial sobria. Jerarquía clara, pills refinadas,
   listas Fortalezas/Riesgos diferenciadas por borde de acento.
   ============================================================ */
.election-figure-card {
    background: #14141A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 2px solid rgba(255, 255, 255, 0.08);
    padding: 1.6rem 1.5rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s ease;
}
.election-figure-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: var(--bct-red);
}

.election-figure-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.election-figure-card__head-text { min-width: 0; flex: 1; }
.election-figure-card__head-metric { text-align: right; flex-shrink: 0; }

.election-figure-card__role {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.election-figure-card__name {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
    word-break: break-word;
}

.election-figure-card__metric {
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 0.9;
    letter-spacing: -0.03em;
    display: block;
}

.election-figure-card__metric-suffix {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin-top: 0.25rem;
    font-weight: 600;
}

.election-figure-card__metric--empty {
    font-size: 0.75rem;
    color: var(--bct-text-muted);
    font-style: italic;
}

.election-figure-card__parties {
    margin-bottom: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.election-figure-card__party {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.22rem 0.55rem;
    color: #fff;
    background: #555;
    border-radius: 2px;
    text-transform: uppercase;
}

.election-figure-card__lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
@media (min-width: 480px) {
    .election-figure-card__lists { grid-template-columns: 1fr 1fr; }
}

.election-figure-card__sublist {
    padding: 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}
.election-figure-card__sublist--strength { border-left-color: #2A9F4A; }
.election-figure-card__sublist--risk     { border-left-color: #C44; }

.election-figure-card__list-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin: 0 0 0.5rem;
    border: 0;
    padding: 0;
}

.election-figure-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
}
.election-figure-card__list li {
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.88);
    position: relative;
    padding-left: 0.7rem;
}
.election-figure-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
}
.election-figure-card__sublist--strength .election-figure-card__list li::before { background: #2A9F4A; }
.election-figure-card__sublist--risk     .election-figure-card__list li::before { background: #C44; }

.election-figure-card__ranking {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin: 0 0 1rem;
    padding: 0.6rem 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.election-figure-card__ranking strong {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.election-figure-card__lectura-bct {
    background: linear-gradient(135deg, #A60510 0%, var(--bct-red-dark) 100%);
    color: #fff;
    padding: 1rem 1.1rem;
    margin-top: auto;
    margin-bottom: 1rem;
    border-left: 3px solid #FFB3B5;
}

.election-figure-card__lectura-bct-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.85);
}

.election-figure-card__lectura-bct-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.election-figure-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.15s ease, gap 0.2s ease;
}
.election-figure-card__cta:hover {
    color: var(--bct-red);
    gap: 0.75rem;
}

/* ===== STATE TABS ===== */
.election-state-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--bct-card-border);
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
}
.election-state-tab {
    color: var(--bct-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border: 1px solid transparent;
}
.election-state-tab:hover { color: #fff; }
.election-state-tab--active {
    color: #fff;
    border-color: var(--bct-red);
    background: rgba(229,9,20,0.15);
}

/* ===== MINI BLOCKS ===== */
.election-mini-block {
    border-top: 2px solid var(--bct-red);
    padding: 1rem 0;
}
.election-mini-block__eyebrow {
    font-size: 0.65rem;
    color: var(--bct-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.election-mini-block__title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0.4rem 0;
}
.election-mini-block__body {
    color: var(--bct-text-muted);
    font-size: 0.88rem;
}

/* ============================================================
   EDITORIAL BCT FULL (refinado 5A.2)
   Pieza editorial estilo revista: columna estrecha de lectura,
   tipografía serif-feel sin agregar fuentes nuevas.
   ============================================================ */
.election-editorial {
    padding: 5rem 0 4.5rem;
    background: var(--bct-light);
    color: #1A1A1A;
    position: relative;
}
.election-editorial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bct-red);
    opacity: 0.85;
}

.election-editorial__inner {
    max-width: 44rem;
    margin: 0 auto;
}

.election-editorial__chip {
    display: inline-block;
    color: var(--bct-red);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(229, 9, 20, 0.25);
}

.election-editorial__title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1A1A1A;
    margin: 0 0 2rem;
}
.election-editorial__title em {
    color: var(--bct-red);
    font-style: normal;
}

.election-editorial__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2A2A2A;
}
.election-editorial__body > *:first-child {
    font-size: 1.18rem;
    line-height: 1.55;
    color: #1A1A1A;
}
.election-editorial__body p { margin: 0 0 1.1rem; }
.election-editorial__body p:last-child { margin-bottom: 0; }
.election-editorial__body strong { color: #1A1A1A; }
.election-editorial__body a {
    color: var(--bct-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.election-editorial__body blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-left: 3px solid var(--bct-red);
    font-size: 1.2rem;
    line-height: 1.5;
    color: #1A1A1A;
    font-style: italic;
}

.election-editorial__byline {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #DDD;
    font-size: 0.78rem;
    color: #6A6A6A;
    letter-spacing: 0.08em;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.election-editorial__byline-author {
    color: #1A1A1A;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.election-editorial__byline-sep { color: #BBB; }
.election-editorial__byline-date {
    text-transform: lowercase;
    color: #6A6A6A;
}

/* ===== CALENDAR ===== */
.election-calendar {
    padding: 3rem 0 4rem;
    background: var(--bct-light);
    color: #1A1A1A;
}
.election-calendar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 1.2rem;
}
@media (min-width: 768px) { .election-calendar__grid { grid-template-columns: repeat(4, 1fr); } }
.election-calendar__cell {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-top: 3px solid var(--bct-red);
    padding: 1rem;
}
.election-calendar__stage {
    font-size: 0.65rem;
    color: #888;
    letter-spacing: 0.15em;
    font-weight: 700;
}
.election-calendar__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0.3rem 0;
    line-height: 1.2;
}
.election-calendar__date {
    color: var(--bct-red);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.election-calendar__note {
    font-size: 0.7rem;
    color: #777;
    margin-top: 1rem;
}

/* ===== RELATED ARTICLES ===== */
.election-news {
    padding: 3rem 0 4rem;
    background: var(--bct-light);
}
.election-news__card {
    background: #fff;
    border: 1px solid #E0E0E0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.election-news__thumb {
    background: #ddd;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}
.election-news__chip {
    display: inline-block;
    background: var(--bct-red);
    color: #fff;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    margin: 0.8rem;
    text-transform: uppercase;
}
.election-news__title {
    padding: 0 0.8rem 0.8rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1A1A1A;
    text-decoration: none;
    display: block;
    line-height: 1.25;
}
.election-news__title:hover { color: var(--bct-red); }
.election-news__meta {
    padding: 0 0.8rem 0.8rem;
    font-size: 0.7rem;
    color: #888;
    margin-top: auto;
}


/* ===== NEWSLETTER ===== */
.election-newsletter {
    background: var(--bct-red);
    color: #fff;
    padding: 3rem 0;
}
.election-newsletter__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}
.election-newsletter__form {
    display: flex;
    gap: 0.5rem;
    max-width: 30rem;
}
.election-newsletter__form input[type=email] {
    flex: 1;
    border: 0;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.25);
    color: #fff;
}
.election-newsletter__form input[type=email]::placeholder { color: rgba(255,255,255,0.6); }
.election-newsletter__form button {
    background: #fff;
    color: var(--bct-red);
    border: 0;
    padding: 0.75rem 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

/* ===== METRICS BARS (reusable simple barras) ===== */
.election-bar {
    margin-bottom: 0.8rem;
}
.election-bar__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.election-bar__track {
    height: 6px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.election-bar__fill {
    height: 100%;
    background: var(--bct-red);
}

/* ===== HEADERS DE SECCIÓN ===== */
.election-section-header {
    margin-bottom: 2rem;
}
.election-section-header__eyebrow {
    color: var(--bct-red);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.election-section-header__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    margin: 0.4rem 0 0.5rem;
}
.election-section-header__lead {
    color: var(--bct-text-muted);
    max-width: 50rem;
}
.election-section--light .election-section-header__lead { color: #555; }

/* ============================================================
   EMPTY STATE (5A.1)
   Hero full-viewport con gradient editorial. Footer global se
   atenúa via body class para no competir con el hero.
   ============================================================ */

.election-empty-hero {
    min-height: calc(100vh - 140px);
    background: var(--bct-red);
    background-image:
        linear-gradient(135deg, #B60710 0%, var(--bct-red) 45%, #C40712 100%);
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding: 4rem 0;
}

.election-empty-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.32) 0%, transparent 50%),
        repeating-linear-gradient(135deg, transparent 0px, transparent 80px, rgba(255, 255, 255, 0.02) 80px, rgba(255, 255, 255, 0.02) 81px);
    pointer-events: none;
}

.election-empty-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 50rem;
}

.election-empty-hero__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 2.5rem;
    font-weight: 600;
    display: inline-block;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.election-empty-hero__title {
    font-size: clamp(4.5rem, 15vw, 12rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 0 0 2.5rem;
}

.election-empty-hero__title-line {
    display: block;
}

.election-empty-hero__title-line--soft {
    color: rgba(255, 255, 255, 0.42);
}

.election-empty-hero__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.55;
    margin: 0 0 2.5rem;
    color: rgba(255, 255, 255, 0.94);
    max-width: 42rem;
}

.election-empty-hero__divider {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    margin-bottom: 1.5rem;
}

.election-empty-hero__note {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-weight: 600;
}

/* Footer atenuado solo cuando se renderiza Empty State */
body.election-empty-page footer.bct-footer {
    opacity: 0.45;
    transition: opacity 0.25s ease;
}
body.election-empty-page footer.bct-footer:hover {
    opacity: 1;
}

@media (max-width: 575px) {
    .election-empty-hero {
        min-height: calc(100vh - 80px);
        padding: 3rem 0;
    }
    .election-empty-hero__eyebrow {
        margin-bottom: 1.8rem;
        letter-spacing: 0.22em;
    }
}

/* ============================================================
   MEXICO MAP SVG (5B.1)
   SVG base: simplemaps.com (free for commercial use, attribution).
   Colores por estado se inyectan vía <style> server-side en el partial.
   ============================================================ */
.mx-map {
    margin: 0 auto 3rem;
    max-width: 920px;
}

.mx-map__svg-wrap {
    background: #0B0B0F;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.mx-map svg {
    width: 100%;
    height: auto;
    display: block;
}

.mx-map__attribution {
    text-align: right;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin: 0.6rem 0 0;
}
.mx-map__attribution a {
    color: var(--bct-text-muted);
    text-decoration: underline;
}
.mx-map__attribution a:hover { color: var(--bct-red); }

@media (max-width: 575px) {
    .mx-map__svg-wrap { padding: 0.6rem; }
    .mx-map { margin-bottom: 2rem; }
}

/* ============================================================
   FIGURE PAGE (5B.1)
   Composición editorial vertical: hero + stats + lectura + contienda.
   ============================================================ */
.election-figure-page {
    background: var(--bct-darker);
    color: var(--bct-text);
}

.election-figure-page__hero {
    padding: 3.5rem 0 3rem;
    background: linear-gradient(180deg, #16161C 0%, var(--bct-darker) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.election-figure-page__breadcrumb {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.election-figure-page__breadcrumb a {
    color: var(--bct-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.election-figure-page__breadcrumb a:hover { color: var(--bct-red); }

.election-figure-page__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 768px) {
    .election-figure-page__hero-grid {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 3rem;
    }
}
@media (min-width: 1200px) {
    .election-figure-page__hero-grid {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 4rem;
    }
}

.election-figure-page__photo {
    max-width: 280px;
}
@media (max-width: 767px) {
    .election-figure-page__photo { max-width: 160px; }
}

.election-figure-page__photo-frame {
    aspect-ratio: 1 / 1;
    background-color: #2A2A32;
    background-size: cover;
    background-position: center center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.election-figure-page__intro { min-width: 0; }

.election-figure-page__role {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 800;
    margin: 0 0 0.7rem;
}

.election-figure-page__name {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 1.2rem;
    word-break: break-word;
}

.election-figure-page__dominant-badge {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    background: var(--bct-red);
    padding: 0.35rem 0.7rem;
    margin-bottom: 1.2rem;
}

.election-figure-page__lede {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 42rem;
}
.election-figure-page__lede strong { color: #fff; }

/* === STATS BAND === */
.election-figure-page__stats {
    background: var(--bct-darker);
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.election-figure-page__stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 0;
}
@media (min-width: 576px) {
    .election-figure-page__stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    .election-figure-page__stat + .election-figure-page__stat {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 1.5rem;
    }
}

.election-figure-page__stat dt {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.election-figure-page__stat dd {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* === LECTURA BCT === */
.election-figure-page__lectura {
    background: var(--bct-light);
    color: #1A1A1A;
    padding: 4.5rem 0 4rem;
    position: relative;
}
.election-figure-page__lectura::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bct-red);
}

.election-figure-page__lectura-inner {
    max-width: 44rem;
    margin: 0 auto;
}

.election-figure-page__lectura-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 800;
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(229, 9, 20, 0.25);
}

.election-figure-page__lectura-quote {
    margin: 0;
    padding: 0;
    border: 0;
}
.election-figure-page__lectura-quote p {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.45;
    color: #1A1A1A;
    margin: 0;
    letter-spacing: -0.01em;
}
.election-figure-page__lectura-quote p::before {
    content: "“";
    color: var(--bct-red);
    font-weight: 800;
    margin-right: 0.15em;
    font-size: 1.2em;
    line-height: 0;
    vertical-align: -0.2em;
}

.election-figure-page__lectura-byline {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid #DDD;
    font-size: 0.78rem;
    color: #6A6A6A;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.election-figure-page__lectura-byline > span:first-child {
    color: #1A1A1A;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* === CONTEST CONTEXT === */
.election-figure-page__contest {
    padding: 4rem 0;
    background: var(--bct-darker);
}

.election-figure-page__contest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 992px) {
    .election-figure-page__contest-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

.election-figure-page__contest-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.4rem 0 0.8rem;
}

.election-figure-page__contest-sub {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bct-text-muted);
    margin: 0 0 1.2rem;
}

.election-figure-page__contest-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.election-figure-page__contest-cta {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.election-figure-page__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
    background: var(--bct-red);
    padding: 0.95rem 1.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    transition: background 0.15s ease, gap 0.2s ease;
}
.election-figure-page__cta:hover {
    background: #C40712;
    color: #fff;
    gap: 0.9rem;
}
.election-figure-page__cta--ghost {
    background: transparent;
    color: var(--bct-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.election-figure-page__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* === EXPANSION NOTE === */
.election-figure-page__expansion {
    padding: 2.5rem 0 4rem;
    background: var(--bct-darker);
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.election-figure-page__expansion-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--bct-text-muted);
    font-style: italic;
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   RESPONSIVE FINO GLOBAL (5B.1)
   Ajustes específicos para breakpoints reales sin rehacer layouts.
   ============================================================ */

/* Hero principal (landing): stats stacked más temprano y métrica más compacta */
@media (max-width: 575px) {
    .election-hero {
        padding: 2.75rem 0 3.5rem;
    }
    .election-hero-band__inner {
        gap: 0.6rem;
    }
    .election-hero-band__nav {
        gap: 0.85rem;
    }
    .election-hero-band__nav a {
        font-size: 0.66rem;
        letter-spacing: 0.16em;
    }
    .election-hero__stats { gap: 0.55rem; }
    .election-hero__stat {
        padding: 0.85rem 1rem;
        gap: 1rem;
    }
    .election-hero__stat-value { font-size: 1.9rem; min-width: 4rem; }
    .election-hero__stat--date .election-hero__stat-value { font-size: 1.5rem; }
    .election-hero__stat-label { font-size: 0.8rem; }
    .election-hero__cta {
        font-size: 0.72rem;
        padding: 0.7rem 1.1rem;
    }
}

/* Featured contest: kicker que pueda envolver bien */
@media (max-width: 575px) {
    .election-featured {
        padding-left: 1rem;
    }
    .election-featured__kicker {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .election-featured__kicker-code {
        padding-left: 0;
        border-left: 0;
    }
    .election-featured__cta {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }
    .election-featured__tags { gap: 0.4rem 0.8rem; }
}

/* Dominant figure: padding más justo en mobile */
@media (max-width: 575px) {
    .election-dominant {
        padding: 1.25rem;
    }
    .election-dominant__metrics {
        gap: 0.6rem;
    }
    .election-dominant__metric-value { font-size: 1.25rem; }
}

/* Political figure card: métrica grande no debe romper en pantallas chicas */
@media (max-width: 419px) {
    .election-figure-card {
        padding: 1.3rem 1.2rem 1.2rem;
    }
    .election-figure-card__name { font-size: 1.2rem; }
    .election-figure-card__metric { font-size: 2rem; }
    .election-figure-card__head { gap: 0.7rem; }
}

/* Editorial block: padding más vivible en mobile */
@media (max-width: 575px) {
    .election-editorial {
        padding: 3rem 0 2.5rem;
    }
    .election-editorial__body { font-size: 1rem; line-height: 1.6; }
    .election-editorial__body > *:first-child { font-size: 1.08rem; }
}

/* Sections en general: padding vertical más ajustado en mobile */
@media (max-width: 575px) {
    .election-section { padding: 2.5rem 0; }
    .election-board { padding: 3rem 0; }
    .election-section-header { margin-bottom: 1.5rem; }
}

/* Calendar: cards 2col en mobile pero más compactas */
@media (max-width: 575px) {
    .election-calendar__cell {
        padding: 0.75rem;
    }
    .election-calendar__title { font-size: 0.85rem; }
    .election-calendar__date { font-size: 0.78rem; }
}

/* Newsletter: form stacked en mobile */
@media (max-width: 575px) {
    .election-newsletter__form {
        flex-direction: column;
        gap: 0.6rem;
    }
    .election-newsletter__form button { width: 100%; }
}

/* National board cards: assegurar lectura en mobile */
@media (max-width: 419px) {
    .election-board__card { min-height: 130px; padding: 0.95rem; }
    .election-board__name { font-size: 1rem; }
}

/* ============================================================
   FASE 6 — PR1 QUICK WINS
   Overrides editoriales sin tocar markup (excepto calendar IsKey).
   Mantener al final del archivo para trazabilidad.
   ============================================================ */

/* === Eyebrows consistentes (tracking 0.28em uniforme) === */
.election-eyebrow,
.election-section-header__eyebrow,
.election-board__eyebrow,
.election-mini-block__eyebrow,
.election-figure-card__role,
.election-dominant__kicker,
.election-featured__kicker-text,
.election-editorial__chip,
.election-figure-card__list-title,
.election-figure-card__lectura-bct-label,
.election-figure-page__role,
.election-figure-page__lectura-eyebrow,
.election-dominant__metric-label,
.election-board__dom-label {
    letter-spacing: 0.28em;
}

/* Eyebrows que requieren un tracking aún más amplio para sensación premium */
.election-empty-hero__eyebrow,
.election-empty-hero__note,
.election-figure-page__breadcrumb {
    letter-spacing: 0.32em;
}

/* === Section rhythm — más respiración en desktop === */
@media (min-width: 992px) {
    .election-section { padding: 6rem 0; }
    .election-board { padding: 6rem 0; }
    .election-editorial { padding: 6rem 0 5rem; }
    .election-calendar { padding: 5rem 0 6rem; }
    .election-news { padding: 5rem 0 6rem; }
}
@media (min-width: 1200px) {
    .election-section { padding: 7rem 0; }
    .election-section-header { margin-bottom: 3.5rem; }
}

/* === Mini-blocks: más contraste y peso === */
.election-mini-block {
    border-top-width: 3px;
    padding: 1.25rem 0 0.5rem;
}
.election-mini-block__eyebrow {
    color: rgba(255,255,255,0.55);
    font-weight: 700;
}
.election-mini-block__title {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 0.7rem;
}
.election-mini-block__body {
    line-height: 1.55;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
}

/* === Editorial BCT: columna de lectura más generosa === */
.election-editorial__inner { max-width: 50rem; }
.election-editorial__body { line-height: 1.75; font-size: 1.1rem; }
.election-editorial__body > *:first-child { font-size: 1.22rem; line-height: 1.5; }

/* === Calendar: jornada electoral destacada === */
.election-calendar__cell--key {
    background: var(--bct-red);
    color: #fff;
    border-top-color: rgba(255,255,255,0.85);
}
.election-calendar__cell--key .election-calendar__stage {
    color: rgba(255,255,255,0.65);
}
.election-calendar__cell--key .election-calendar__title {
    color: #fff;
}
.election-calendar__cell--key .election-calendar__date {
    color: rgba(255,255,255,0.95);
    font-weight: 800;
}

/* === Section header lead: más legible === */
.election-section-header__lead {
    font-size: 1.02rem;
    line-height: 1.55;
}

/* =====================================================================
   FASE 6 — PR2 COMPONENT REFINEMENT
   - Map legend
   - Featured contest re-card
   - Dominant war-room metrics
   - Political figure card: stacked lists, bigger metric, rank chip
   - News tabs + thumb fallback + CTA
   - Social cards: media wrapper, brand tint, play overlay
   ===================================================================== */

/* ---- Mapa: leyenda ---- */
.mx-map__legend {
    list-style: none;
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    max-width: 760px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.02em;
}
.mx-map__legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.mx-map__legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.35);
    display: inline-block;
}
.mx-map__legend-swatch--featured { background: #E50914; }
.mx-map__legend-swatch--active   { background: rgba(229, 9, 20, 0.55); }
.mx-map__legend-swatch--inactive { background: #1F1F26; }

/* ---- Featured contest re-card ---- */
.election-featured {
    border: 1px solid rgba(255,255,255,0.06);
    background:
        linear-gradient(180deg, rgba(229,9,20,0.04) 0%, rgba(0,0,0,0) 40%),
        rgba(255,255,255,0.015);
    border-radius: 6px;
    padding: 2rem 1.75rem 2.25rem;
}
@media (min-width: 992px) {
    .election-featured {
        padding: 2.75rem 2.5rem 2.5rem;
    }
}
.election-featured__header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
}

/* ---- Dominant war-room metrics ---- */
.election-dominant__warroom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(229,9,20,0.18);
    border-radius: 4px;
    position: relative;
}
.election-dominant__warroom::before {
    content: "EN MONITOREO";
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: rgba(229,9,20,0.95);
    background: #0B0B0F;
    padding: 0 0.5rem;
    font-weight: 700;
}
.election-dominant__warroom-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem 0.25rem;
}
.election-dominant__warroom-item + .election-dominant__warroom-item {
    border-left: 1px solid rgba(255,255,255,0.06);
    padding-left: 1rem;
}
.election-dominant__warroom-value {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ---- Political figure card refinement (card es OSCURO #14141A) ---- */
.election-figure-card__head {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.election-figure-card__head-metric {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}
.election-figure-card__metric {
    font-size: 3.2rem;
    line-height: 0.95;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.election-figure-card__metric-suffix {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.election-figure-card__rank-chip {
    margin-top: 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}
.election-figure-card__lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
@media (min-width: 1200px) {
    .election-figure-card__lists { grid-template-columns: 1fr; }
}
.election-figure-card__sublist {
    padding: 0.75rem 0.95rem;
    border-left: 3px solid;
    background: rgba(255,255,255,0.025);
    border-radius: 0 3px 3px 0;
}
.election-figure-card__sublist--strength {
    border-left-color: #2ECC71;
}
.election-figure-card__sublist--risk {
    border-left-color: #FF5A5F;
}
.election-figure-card__list-title {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.election-figure-card__list {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Override mobile metric size so it doesn't overflow */
@media (max-width: 419px) {
    .election-figure-card__metric { font-size: 2rem; }
}

/* ---- News: header + tabs + footer + thumb fallback ---- */
.election-news__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.election-news__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.election-news__tab {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    color: #444;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.election-news__tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.election-news__tab--active,
.election-news__tab[aria-selected="true"] {
    background: #0B0B0F;
    color: #fff;
    border-color: #0B0B0F;
}
.election-news__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(229,9,20,0.08) 0%, rgba(11,11,15,0.04) 100%),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.025) 8px 9px);
}
.election-news__thumb-mark {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    color: rgba(11,11,15,0.55);
}
.election-news__empty {
    text-align: center;
    color: rgba(0,0,0,0.55);
    padding: 2rem 1rem;
    border: 1px dashed rgba(0,0,0,0.12);
    border-radius: 4px;
}
.election-news__footer {
    margin-top: 1.75rem;
    text-align: center;
}
.election-news__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #0B0B0F;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.82rem;
    padding: 0.7rem 1.4rem;
    border: 1.5px solid #0B0B0F;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.election-news__cta:hover {
    background: #0B0B0F;
    color: #fff;
}

/* =====================================================================
   FASE 6 — PR3 POLISH
   Responsive tuning + spacing + density + hover + contraste.
   Solo ajustes CSS. No tocar markup ni backend.
   ===================================================================== */

/* ---- Focus-visible global (accesibilidad) ---- */
.election-hero__cta:focus-visible,
.election-hero-band__nav a:focus-visible,
.election-news__tab:focus-visible,
.election-news__cta:focus-visible,
.election-board__card:focus-visible,
.election-featured__cta:focus-visible,
.election-figure-card__cta:focus-visible {
    outline: 2px solid var(--bct-red);
    outline-offset: 3px;
    border-radius: 4px;
}
.election-hero-band__nav a:focus-visible {
    outline-offset: 4px;
}

/* ---- Respeto a prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .election-hero__cta,
    .election-hero__cta-arrow,
    .election-board__card,
    .election-featured__cta-arrow,
    .election-figure-card,
    .election-figure-card__cta-arrow,
    .election-news__card,
    .election-news__cta,
    .mx-map svg path,
    .election-figure-card__metric,
    .election-dominant__warroom-value {
        transition: none !important;
        animation: none !important;
    }
    .election-board__card:hover,
    .election-news__card:hover {
        transform: none !important;
    }
}

/* ---- Hero: hover refinement chips + nav ---- */
.election-hero__chip {
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.election-hero__chip--ghost:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
}
.election-hero-band__nav a {
    position: relative;
    padding-bottom: 2px;
}
.election-hero-band__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--bct-red);
    transition: right 0.2s ease;
}
.election-hero-band__nav a:hover::after {
    right: 0;
}

/* ---- Hero: tablet breakpoint (576-991) ---- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .election-hero { padding: 4rem 0 4.5rem; }
    .election-hero__title { font-size: clamp(4rem, 10vw, 7rem); }
    .election-hero__lead { font-size: 1rem; margin: 1.4rem 0 1.75rem; }
    .election-hero__stats { gap: 0.65rem; }
    .election-hero__stat-value { font-size: 2.3rem; min-width: 5rem; }
    .election-hero__stat--date .election-hero__stat-value { font-size: 1.75rem; }
}

/* ---- Hero: ultra-narrow phone (<360px) ---- */
@media (max-width: 359px) {
    .election-hero { padding: 2.25rem 0 3rem; }
    .election-hero__title { font-size: 3.6rem; }
    .election-hero-band__inner { flex-direction: column; align-items: flex-start; }
    .election-hero-band__nav { gap: 0.7rem; }
    .election-hero__chips { gap: 0.4rem; }
    .election-hero__chip { font-size: 0.66rem; padding: 0.35rem 0.65rem; letter-spacing: 0.14em; }
}

/* ---- Mexico map: legend tighter en mobile ---- */
@media (max-width: 575.98px) {
    .mx-map__legend {
        gap: 0.55rem 1.1rem;
        padding: 0.6rem 0.85rem;
        font-size: 0.74rem;
        margin-top: 0.85rem;
    }
    .mx-map__legend li { font-size: 0.74rem; }
    .mx-map__legend-swatch { width: 11px; height: 11px; }
}
.mx-map svg path {
    will-change: fill;
}

/* ---- National board: cards density ---- */
.election-board__card {
    will-change: transform;
}
.election-board__card:hover {
    transform: translateY(-2px);
}
@media (max-width: 575.98px) {
    .election-board { padding: 3.25rem 0 3.75rem; }
    .election-board__header { margin-bottom: 1.5rem; }
    .election-board__title { font-size: clamp(1.6rem, 6.5vw, 2rem); }
    .election-board__subtitle { font-size: 0.94rem; }
}
@media (min-width: 1400px) {
    .election-board__grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ---- Featured contest: tablet spacing + tag wrap ---- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .election-featured { padding: 2.25rem 1.75rem 2.25rem; }
    .election-featured__header { margin-bottom: 1.4rem; padding-bottom: 1.2rem; }
}
.election-featured__tag {
    transition: color 0.15s ease;
}
.election-featured__tag:hover {
    color: #fff;
}

/* ---- Dominant warroom: mobile tightening + contraste ---- */
@media (max-width: 575.98px) {
    .election-dominant__warroom { gap: 0.4rem; padding: 0.85rem; }
    .election-dominant__warroom-value { font-size: 1.85rem; }
    .election-dominant__warroom-item + .election-dominant__warroom-item {
        padding-left: 0.7rem;
    }
}

/* ---- Political figure card: density + hover + contrast lectura ---- */
.election-figure-card {
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.election-figure-card:hover {
    transform: translateY(-2px);
}
.election-figure-card__lectura-bct {
    background: rgba(255,255,255,0.03);
    padding: 0.85rem 1rem;
    border-radius: 3px;
    border-left: 2px solid rgba(229,9,20,0.45);
    margin-top: 0.85rem;
}
.election-figure-card__lectura-bct-text {
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}
.election-figure-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}
.election-figure-card__cta:hover {
    color: var(--bct-red);
    text-decoration: none;
}
.election-figure-card__cta-arrow {
    transition: transform 0.18s ease;
    display: inline-block;
}
.election-figure-card__cta:hover .election-figure-card__cta-arrow {
    transform: translateX(3px);
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .election-figure-card__metric { font-size: 2.6rem; }
}

/* ---- News: tabs + cards refinement ---- */
.election-news__tab {
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.election-news__tab:not(:disabled):hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.2);
}
.election-news__card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
}
.election-news__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.election-news__thumb {
    border-radius: 2px 2px 0 0;
}
@media (max-width: 575.98px) {
    .election-news__header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .election-news__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 0 -1rem;
        padding: 0 1rem;
        scrollbar-width: none;
    }
    .election-news__tabs::-webkit-scrollbar { display: none; }
    .election-news__tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ---- Calendar: cell key contrast + mobile 2col ---- */
.election-calendar__cell {
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.election-calendar__cell:hover {
    border-color: rgba(255,255,255,0.18);
}
.election-calendar__cell--key {
    box-shadow: 0 4px 18px rgba(229,9,20,0.18);
}
@media (max-width: 575.98px) {
    .election-calendar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .election-calendar__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Editorial block: legibilidad cuerpo ---- */
.election-editorial__body {
    line-height: 1.7;
}
.election-editorial__body p + p {
    margin-top: 1rem;
}
@media (max-width: 575.98px) {
    .election-editorial__title { font-size: clamp(1.65rem, 6vw, 2rem); }
}

/* ---- State page hero responsive ---- */
@media (max-width: 575.98px) {
    .election-section-header__title { font-size: clamp(1.6rem, 6vw, 2rem); }
    .election-section-header__lead { font-size: 0.95rem; }
}

/* ---- Mini-block (contexto): hover + spacing ---- */
.election-mini-block {
    transition: border-color 0.18s ease, background 0.18s ease;
}
.election-mini-block:hover {
    border-color: rgba(229,9,20,0.25);
    background: rgba(255,255,255,0.035);
}

/* ---- Section header: ritmo vertical + max-width lead ---- */
.election-section-header {
    max-width: 50rem;
}
.election-section-header__lead {
    max-width: 38rem;
}

/* ---- Smooth scroll para el sub-nav anchor ---- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- Container max-width tuning para wide screens ---- */
@media (min-width: 1400px) {
    .election-hero .container,
    .election-board .container,
    .election-news .container,
    .election-section .container,
    .election-editorial .container,
    .election-calendar .container,
    .election-hero-band__inner {
        max-width: 1280px;
    }
}

/* ---- Print: oculta elementos interactivos ---- */
@media print {
    .election-hero-band,
    .election-news__tabs,
    .election-news__footer,
    .election-hero__ctas,
    .mx-map__legend,
    .election-figure-card__cta {
        display: none !important;
    }
    .election-hero {
        background: #fff !important;
        color: #000 !important;
        padding: 1rem 0;
    }
    .election-hero__title,
    .election-hero__title-accent,
    .election-hero__lead {
        color: #000 !important;
    }
}

/* =====================================================================
   FASE 6 — PR3.2 LANDING CLEANUP — Featured Contest (BC)
   - Lede + body editorial combinados (no exclusivos)
   - Frame unificado del body (cierra la composición)
   - Métrica contest-level embebida en sidecol cuando solo hay 1
   - Mobile stack natural con divider sutil
   ===================================================================== */

/* ---- Header: compactar gap hacia el body ---- */
.election-featured__header {
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ---- Body frame: bg + border sutil que une las dos columnas ---- */
.election-featured__body--framed {
    background: linear-gradient(180deg, rgba(229,9,20,0.025) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-top: 2px solid rgba(229,9,20,0.4);
    border-radius: 4px;
    padding: 2rem 1.5rem 1.5rem;
    gap: 1.75rem;
}
@media (min-width: 992px) {
    .election-featured__body--framed {
        padding: 2.75rem 2.25rem 2rem;
        gap: 2.25rem;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}
@media (min-width: 1200px) {
    .election-featured__body--framed {
        padding: 3rem 2.5rem 2.25rem;
        gap: 2.5rem;
    }
}

/* ---- Editorial column: density mejor + lede destacado ---- */
.election-featured__editorial {
    line-height: 1.7;
}
.election-featured__editorial-lede {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 1.1rem;
    font-weight: 500;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.election-featured__editorial-body p {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.86);
}
.election-featured__editorial-body p:last-child { margin-bottom: 0; }
.election-featured__editorial-body p:first-child {
    color: #fff;
}
.election-featured__editorial-body strong {
    color: #fff;
    font-weight: 700;
}

/* ---- Sidecol: dominant ya no necesita border-left aislado ---- */
.election-featured__body--framed .election-dominant {
    border-left: 0;
    padding: 0;
    background: transparent;
}

/* Divider sutil entre dominant y embedded metric */
.election-featured__embedded-metric {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.election-featured__embedded-metric-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}
.election-featured__embedded-metric-label {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
}
.election-featured__embedded-metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.election-featured__embedded-metric-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.election-featured__embedded-metric-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}

/* ---- Mobile (<992): stack natural con divider entre columnas ---- */
@media (max-width: 991.98px) {
    .election-featured__body--framed {
        grid-template-columns: 1fr;
        padding: 1.25rem 1.25rem 1.5rem;
        gap: 1.5rem;
    }
    .election-featured__body--framed .election-featured__sidecol {
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .election-featured__editorial-lede {
        font-size: 1.02rem;
    }
}

@media (max-width: 575.98px) {
    .election-featured__body--framed {
        padding: 1rem 1rem 1.25rem;
        gap: 1.25rem;
    }
    .election-featured__embedded-metric-value { font-size: 1rem; }
    .election-featured__embedded-metric-label { letter-spacing: 0.18em; }
}

/* ---- Metrics-row (cuando hay 2+): título editorial + spacing ---- */
.election-featured__metrics-eyebrow {
    color: rgba(255,255,255,0.7);
    margin: 0 0 0.85rem;
}
.election-featured__metrics-row {
    margin-top: 1.75rem;
    padding-top: 0;
    border-top: 0;
}

/* =====================================================================
   FASE 6 — PR4 FIGURE PAGE ENRICHMENT
   - Coalición pills bajo el hero
   - Pillars: fortalezas + riesgos (split 2-col)
   - Métricas de figura (bars con label + valor)
   - Reutiliza _RelatedArticles y _SocialFeed (sin cambios visuales propios)
   ===================================================================== */

/* ---- Coalition pills ---- */
.election-figure-page__coalition {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
}
.election-figure-page__coalition-label {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
}
.election-figure-page__coalition-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.election-figure-page__party {
    display: inline-block;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 2px;
    line-height: 1;
}

/* ---- Pillars section (fortalezas + riesgos) ---- */
.election-figure-page__pillars-section {
    padding: 2.5rem 0;
    background: rgba(255,255,255,0.012);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.election-figure-page__pillars-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0.35rem 0 1.5rem;
}
.election-figure-page__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 992px) {
    .election-figure-page__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }
}
.election-figure-page__pillar {
    padding: 1.25rem 1.35rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid;
    border-radius: 2px;
}
.election-figure-page__pillar--strength { border-left-color: #2ECC71; }
.election-figure-page__pillar--risk     { border-left-color: #FF5A5F; }

.election-figure-page__pillar-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    margin: 0 0 0.85rem;
}
.election-figure-page__pillar--strength .election-figure-page__pillar-label { color: #2ECC71; }
.election-figure-page__pillar--risk .election-figure-page__pillar-label     { color: #FF5A5F; }

.election-figure-page__pillar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.election-figure-page__pillar-list li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.election-figure-page__pillar-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.election-figure-page__pillar-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.4;
}
.election-figure-page__pillar-desc {
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---- Métricas de figura ---- */
.election-figure-page__metrics-section {
    padding: 2.5rem 0;
}
.election-figure-page__metrics-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0.35rem 0 1.5rem;
}
.election-figure-page__metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .election-figure-page__metrics {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
    }
}
.election-figure-page__metric-bar {
    padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 3px;
}
.election-figure-page__metric-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}
.election-figure-page__metric-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.82);
    font-weight: 600;
}
.election-figure-page__metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.election-figure-page__metric-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}
.election-figure-page__metric-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}

/* ---- Mobile fine-tuning ---- */
@media (max-width: 575.98px) {
    .election-figure-page__pillars-section,
    .election-figure-page__metrics-section {
        padding: 1.75rem 0;
    }
    .election-figure-page__pillar {
        padding: 1rem 1.1rem;
    }
    .election-figure-page__metric-value { font-size: 1rem; }
    .election-figure-page__coalition {
        margin-top: 0.85rem;
    }
}

/* =====================================================================
   FASE 6 — PR3.3 HERO ENHANCEMENT
   - Reemplaza stats stacked del col derecho por panel Radar Nacional
     (reusa wwwroot/images/election-mexico.svg via inyección server-side)
   - KPI strip horizontal full-width debajo del row principal
   - Animaciones CSS GPU-friendly: pulse dot, waveform editorial,
     state glow breathing, radar rings, particle drift
   - Sin librerías. Sin GSAP. Sin Lottie. Sin JS.
   ===================================================================== */

/* ---- Radar panel (col derecho) ---- */
.election-hero__radar {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(229,9,20,0.06) 0%, rgba(229,9,20,0) 60%),
        rgba(8,8,12,0.78);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.election-hero__radar-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.35);
    color: rgba(229,9,20,0.7);
}

.election-hero__radar-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.election-hero__radar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bct-red);
    box-shadow: 0 0 0 0 rgba(229,9,20,0.55);
    animation: hero-pulse-dot 1.8s ease-out infinite;
    will-change: transform, opacity, box-shadow;
}
.election-hero__radar-live-text {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
}
.election-hero__radar-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.election-hero__radar-wave {
    flex: 1;
    min-width: 0;
    height: 14px;
    margin-left: auto;
    pointer-events: none;
    opacity: 0.55;
}
.election-hero__radar-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}
.election-hero__radar-wave svg path {
    stroke: var(--bct-red);
    stroke-width: 1;
    stroke-dasharray: 1 5;
    animation: hero-wave-scroll 7s linear infinite;
    will-change: stroke-dashoffset;
}

/* ---- Map area ---- */
.election-hero__radar-map {
    position: relative;
    padding: 1.1rem 1.1rem 1.2rem;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    pointer-events: none;
}
.election-hero__radar-map::before {
    /* sutil radar grid de fondo (sin sci-fi, solo profundidad) */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 55%, rgba(229,9,20,0.06) 0%, rgba(229,9,20,0) 50%);
    pointer-events: none;
    z-index: 0;
}
.election-hero__radar-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hero-map-breathe 7.5s ease-in-out infinite alternate;
    will-change: opacity;
}
.election-hero__radar-svg svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
}

/* ---- Radar rings overlay (3 ondas concéntricas suaves) ---- */
.election-hero__radar-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.election-hero__radar-rings span {
    position: absolute;
    border: 1px solid rgba(229,9,20,0.4);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    opacity: 0;
    will-change: transform, opacity;
}
.election-hero__radar-rings span:nth-child(1) {
    top: 38%;
    left: 22%;
    animation: hero-radar-ring 5.5s ease-out infinite;
}
.election-hero__radar-rings span:nth-child(2) {
    top: 58%;
    left: 60%;
    animation: hero-radar-ring 6s ease-out 1.8s infinite;
}
.election-hero__radar-rings span:nth-child(3) {
    top: 30%;
    left: 70%;
    animation: hero-radar-ring 7s ease-out 3.4s infinite;
}

/* ---- Particles (dots dispersos) ---- */
.election-hero__radar-particles {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 3;
}
.election-hero__radar-particles li {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(229,9,20,0.55);
    box-shadow: 0 0 4px rgba(229,9,20,0.5);
    opacity: 0.25;
    will-change: transform, opacity;
}
.election-hero__radar-particles li:nth-child(1) { top: 25%; left: 30%; animation: hero-particle-float 5.5s ease-in-out infinite; }
.election-hero__radar-particles li:nth-child(2) { top: 45%; left: 18%; animation: hero-particle-float 6.5s ease-in-out 0.4s infinite; }
.election-hero__radar-particles li:nth-child(3) { top: 65%; left: 28%; animation: hero-particle-float 5.8s ease-in-out 1.1s infinite; }
.election-hero__radar-particles li:nth-child(4) { top: 38%; left: 52%; animation: hero-particle-float 6s ease-in-out 0.8s infinite; }
.election-hero__radar-particles li:nth-child(5) { top: 70%; left: 48%; animation: hero-particle-float 6.8s ease-in-out 1.6s infinite; }
.election-hero__radar-particles li:nth-child(6) { top: 28%; left: 72%; animation: hero-particle-float 5.4s ease-in-out 0.2s infinite; }
.election-hero__radar-particles li:nth-child(7) { top: 55%; left: 78%; animation: hero-particle-float 6.2s ease-in-out 1.4s infinite; }
.election-hero__radar-particles li:nth-child(8) { top: 78%; left: 64%; animation: hero-particle-float 7s ease-in-out 2.2s infinite; }

/* ---- KPI strip (debajo del row, dentro del .container del hero) ---- */
.election-hero__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.5rem;
    background: rgba(8,8,12,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.election-hero__kpi {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.4rem;
    min-width: 0;
}
.election-hero__kpi + .election-hero__kpi {
    border-left: 1px solid rgba(255,255,255,0.06);
}
.election-hero__kpi-icon {
    color: var(--bct-red);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}
.election-hero__kpi-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.election-hero__kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.election-hero__kpi-label {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    font-weight: 700;
    line-height: 1.3;
}

/* ---- Responsive del radar + KPIs ---- */
@media (max-width: 1199.98px) {
    .election-hero__kpi-value { font-size: 1.4rem; }
    .election-hero__kpi { padding: 1rem 1.2rem; gap: 0.75rem; }
}

@media (max-width: 991.98px) {
    .election-hero__radar { margin-top: 0; }
    .election-hero__radar-map { aspect-ratio: 16 / 10; }
    .election-hero__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .election-hero__kpi:nth-child(2) { border-left: 1px solid rgba(255,255,255,0.06); }
    .election-hero__kpi:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .election-hero__kpi:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,0.06);
    }
}

@media (max-width: 767.98px) {
    .election-hero__radar-head {
        flex-wrap: wrap;
        gap: 0.6rem 0.85rem;
        padding: 0.65rem 0.85rem;
    }
    .election-hero__radar-eyebrow {
        order: 3;
        flex-basis: 100%;
        letter-spacing: 0.18em;
        font-size: 0.62rem;
    }
    .election-hero__radar-wave {
        order: 2;
        height: 12px;
    }
    .election-hero__radar-map { aspect-ratio: 4 / 3; padding: 0.9rem; }
    .election-hero__radar-rings span { width: 44px; height: 44px; }
}

@media (max-width: 575.98px) {
    .election-hero__kpi {
        padding: 0.85rem 0.95rem;
        gap: 0.6rem;
    }
    .election-hero__kpi-value { font-size: 1.2rem; }
    .election-hero__kpi-label { letter-spacing: 0.14em; font-size: 0.62rem; }
    .election-hero__kpi-icon { font-size: 1.15rem; width: 1.35rem; }
    .election-hero__kpis { margin-top: 1.75rem; }
    .election-hero__radar-map { aspect-ratio: 5 / 4; }
}

/* ---- Keyframes ---- */
@keyframes hero-pulse-dot {
    0%   { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(229,9,20,0.55); }
    70%  { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 8px rgba(229,9,20,0); }
    100% { transform: scale(0.95); opacity: 0.9;  box-shadow: 0 0 0 0 rgba(229,9,20,0); }
}

@keyframes hero-wave-scroll {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -36; }
}

@keyframes hero-state-glow {
    0%   { opacity: 0.78; }
    100% { opacity: 1; }
}

@keyframes hero-radar-ring {
    0%   { transform: scale(0.4); opacity: 0; }
    18%  { opacity: 0.5; }
    100% { transform: scale(2.4); opacity: 0; }
}

@keyframes hero-particle-float {
    0%, 100% { transform: translateY(0); opacity: 0.18; }
    50%      { transform: translateY(-4px); opacity: 0.7; }
}

@keyframes hero-map-breathe {
    0%   { opacity: 0.92; }
    100% { opacity: 1; }
}

/* ---- Respeto a prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .election-hero__radar-dot,
    .election-hero__radar-wave svg path,
    .election-hero__radar-rings span,
    .election-hero__radar-particles li,
    .election-hero__radar-svg,
    .election-hero__radar-map svg path {
        animation: none !important;
    }
    .election-hero__radar-rings span { display: none; }
    .election-hero__radar-particles { display: none; }
}

/* =====================================================================
   FASE 6 — PR3.4 HERO ATMOSPHERE
   Extiende PR3.3. No sobrescribe brutalmente — agrega capas.
   - Mapa con más presencia (padding tighter, aspect ajustado, glow externo)
   - Profundidad: ambient + grid + noise + vignette
   - Motion editorial: connection sweeps + 1 pulse trail
   - Waveform de doble capa (primary + shadow blurred)
   - KPI refinement (icono -18%, valor +10%, label menos trackeado)
   - Spacing left-col mejor respiración
   ===================================================================== */

/* ---- Panel: más presencia editorial ---- */
.election-hero__radar {
    border-color: rgba(255,255,255,0.08);
    border-radius: 6px;
    background:
        radial-gradient(circle at 30% 110%, rgba(229,9,20,0.07) 0%, transparent 45%),
        radial-gradient(circle at 70% 20%, rgba(229,9,20,0.04) 0%, transparent 40%),
        linear-gradient(180deg, rgba(10,10,14,0.85) 0%, rgba(6,6,10,0.92) 100%);
    box-shadow: 0 12px 60px -20px rgba(229,9,20,0.18);
}

/* ---- Map: padding reducido y aspect más vertical ---- */
.election-hero__radar-map {
    padding: 0.5rem 0.55rem 0.65rem;
    aspect-ratio: 16 / 10.5;
}

/* ---- LAYER 1 — Ambient red glow (respira lento) ---- */
.election-hero__radar-ambient {
    position: absolute;
    inset: 8% 8% 12% 8%;
    background:
        radial-gradient(ellipse 60% 55% at 50% 55%, rgba(229,9,20,0.10) 0%, rgba(229,9,20,0.04) 38%, rgba(229,9,20,0) 70%);
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
    animation: hero-ambient-breathe 9s ease-in-out infinite alternate;
}

/* ---- LAYER 2 — Coordinate grid (rotación casi imperceptible) ---- */
.election-hero__radar-grid {
    position: absolute;
    inset: 4%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    color: rgba(229,9,20,0.55);
    mix-blend-mode: screen;
    will-change: transform;
    animation: hero-grid-drift 140s linear infinite;
}
.election-hero__radar-grid svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- LAYER 3 — Noise grain (atmósfera, no textura visible) ---- */
.election-hero__radar-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.02;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
    background-size: 200px 200px;
    will-change: transform;
    animation: hero-noise-shift 18s steps(20) infinite;
}

/* ---- LAYER 5 — Connection sweeps (3 paths editoriales simples) ---- */
.election-hero__radar-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    color: rgba(229,9,20,0.45);
    overflow: visible;
}
.election-hero__radar-connection {
    stroke-dasharray: 6 10;
    stroke-linecap: round;
    opacity: 0.55;
    will-change: stroke-dashoffset, opacity;
}
.election-hero__radar-connection--1 {
    animation: hero-sweep-trail 14s linear infinite;
}
.election-hero__radar-connection--2 {
    animation: hero-sweep-trail 14s linear 4.6s infinite;
}
.election-hero__radar-connection--3 {
    animation: hero-sweep-trail 14s linear 9.2s infinite;
}

/* Reasignar z-index para coherencia con nuevas capas */
.election-hero__radar-svg { z-index: 1; }
.election-hero__radar-rings { z-index: 3; }
.election-hero__radar-particles { z-index: 4; }

/* ---- LAYER 7b — 1 pulse trail (solo desktop) ---- */
.election-hero__radar-pulse-trail {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(229,9,20,0.95);
    box-shadow: 0 0 8px rgba(229,9,20,0.7), 0 0 14px rgba(229,9,20,0.35);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    top: 38%;
    left: 22%;
    transform: translate3d(0,0,0);
    will-change: top, left, opacity;
    animation: hero-pulse-travel 12s ease-in-out infinite;
}

/* ---- LAYER 8 — Vignette dark corners ---- */
.election-hero__radar-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background: radial-gradient(ellipse 78% 78% at center, transparent 52%, rgba(0,0,0,0.35) 100%);
}

/* ---- Waveform enhanced — 2 paths con layering ---- */
.election-hero__radar-wave { opacity: 0.8; height: 16px; }
.election-hero__radar-wave svg path.election-hero__radar-wave-shadow {
    stroke: rgba(229,9,20,0.35);
    stroke-dasharray: 2 7;
    filter: blur(2px);
    opacity: 0.45;
    will-change: stroke-dashoffset;
    animation: hero-wave-shadow 11s linear infinite;
}
.election-hero__radar-wave svg path.election-hero__radar-wave-primary {
    stroke: rgba(229,9,20,0.85);
    stroke-width: 1;
    stroke-dasharray: 1.5 6;
    opacity: 0.85;
    will-change: stroke-dashoffset;
    animation: hero-wave-scroll 7s linear infinite;
}

/* ---- KPI refinement (iconos -18%, valor +10%, label menos trackeado) ---- */
.election-hero__kpi {
    padding: 1.2rem 1.45rem;
    gap: 0.95rem;
}
.election-hero__kpi-icon {
    font-size: 1.15rem;
    width: 1.4rem;
}
.election-hero__kpi-value {
    font-size: 1.7rem;
    font-weight: 900;
}
.election-hero__kpi-label {
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
}

/* ---- Spacing left-col (vertical rhythm) ---- */
.election-hero__chips {
    margin-bottom: 1.85rem;
}
.election-hero__lead {
    margin: 1.85rem 0 2.5rem;
}
.election-hero__ctas {
    margin-bottom: 0.4rem;
}

/* ---- Responsive ajustes ---- */
@media (max-width: 1199.98px) {
    .election-hero__kpi-value { font-size: 1.55rem; }
    .election-hero__kpi { padding: 1.05rem 1.25rem; }
}

@media (max-width: 991.98px) {
    .election-hero__radar-map {
        aspect-ratio: 4 / 3;
        padding: 0.55rem 0.65rem 0.75rem;
    }
    .election-hero__radar-pulse-trail { display: none; }
    .election-hero__radar-connection--3 { display: none; }
    .election-hero__radar-grid { animation-duration: 200s; }
    .election-hero__radar-noise { opacity: 0.015; }
}

@media (max-width: 767.98px) {
    .election-hero__radar-map { aspect-ratio: 4 / 3; }
    .election-hero__radar-grid { display: none; }
    .election-hero__radar-connection--2 { display: none; }
    .election-hero__kpi-value { font-size: 1.4rem; }
    .election-hero__lead { margin: 1.4rem 0 1.85rem; }
    .election-hero__chips { margin-bottom: 1.4rem; }
}

@media (max-width: 575.98px) {
    .election-hero__radar-map { aspect-ratio: 5 / 4; }
    .election-hero__radar-connections { display: none; }
    .election-hero__radar-pulse-trail { display: none; }
    /* Reducir particles activas: 8 → 4 */
    .election-hero__radar-particles li:nth-child(5),
    .election-hero__radar-particles li:nth-child(6),
    .election-hero__radar-particles li:nth-child(7),
    .election-hero__radar-particles li:nth-child(8) {
        display: none;
    }
    .election-hero__radar-noise { display: none; }
    .election-hero__kpi-value { font-size: 1.2rem; }
}

/* ---- Keyframes nuevos ---- */
@keyframes hero-sweep-trail {
    0%   { stroke-dashoffset: 32; opacity: 0; }
    15%  { opacity: 0.6; }
    85%  { opacity: 0.6; }
    100% { stroke-dashoffset: -32; opacity: 0; }
}

@keyframes hero-noise-shift {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-3px, 2px, 0); }
    50%  { transform: translate3d(2px, -2px, 0); }
    75%  { transform: translate3d(-1px, 3px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes hero-grid-drift {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes hero-pulse-travel {
    0%   { top: 38%; left: 22%; opacity: 0; }
    8%   { opacity: 0.95; }
    50%  { top: 33%; left: 48%; opacity: 0.85; }
    90%  { opacity: 0; }
    100% { top: 28%; left: 72%; opacity: 0; }
}

@keyframes hero-wave-shadow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 36; }
}

/* ---- prefers-reduced-motion (extiende reset PR3.3) ---- */
@media (prefers-reduced-motion: reduce) {
    .election-hero__radar-ambient,
    .election-hero__radar-grid,
    .election-hero__radar-noise,
    .election-hero__radar-connection,
    .election-hero__radar-pulse-trail,
    .election-hero__radar-wave svg path.election-hero__radar-wave-shadow,
    .election-hero__radar-wave svg path.election-hero__radar-wave-primary {
        animation: none !important;
    }
    .election-hero__radar-connections,
    .election-hero__radar-pulse-trail,
    .election-hero__radar-noise {
        display: none !important;
    }
}

/* =====================================================================
   FASE 6 — PR3.5 EDITORIAL POLISH
   Extiende PR3.4. Cero nuevos widgets / animaciones / features.
   Solo: respiración, tracking, padding, transition timings, transición
   editorial sutil hacia el board.
   ===================================================================== */

/* ---- Spacing left col: vertical rhythm editorial ---- */
.election-hero__chips {
    margin-bottom: 1.95rem;
}
.election-hero__lead {
    margin: 2.1rem 0 2.85rem;
    line-height: 1.68;
    letter-spacing: -0.003em;
    max-width: 32.5rem;
    text-rendering: optimizeLegibility;
}
.election-hero__lead strong {
    color: #fff;
    font-weight: 600;
}
.election-hero__title-accent {
    text-shadow: 0 0 1px rgba(229,9,20,0.15);
}
.election-hero__ctas {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* ---- CTAs premium (luxury editorial UI) ---- */
.election-hero__cta {
    padding: 0.95rem 1.7rem;
    letter-spacing: 0.18em;
    transition: background 0.28s cubic-bezier(.2,.7,.2,1),
                border-color 0.28s cubic-bezier(.2,.7,.2,1),
                color 0.28s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-hero__cta--primary:hover {
    box-shadow: 0 4px 20px -8px rgba(229,9,20,0.32);
}
.election-hero__cta--ghost {
    border-color: rgba(255,255,255,0.22);
}
.election-hero__cta--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.36);
}
.election-hero__cta-arrow {
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-hero__cta:hover .election-hero__cta-arrow {
    transform: translateX(4px);
}

/* ---- Hero-band: micro-refinement tipográfico ---- */
.election-hero-band__badge {
    letter-spacing: 0.2em;
}
.election-hero-band__eyebrow {
    color: rgba(255,255,255,0.78);
}
.election-hero-band__nav a {
    letter-spacing: 0.18em;
    transition: color 0.32s cubic-bezier(.2,.7,.2,1);
}
.election-hero-band__nav a::after {
    transition: right 0.32s cubic-bezier(.2,.7,.2,1);
}

/* ---- Chip micro-refinement ---- */
.election-hero__chip {
    transition: background 0.28s cubic-bezier(.2,.7,.2,1),
                border-color 0.28s cubic-bezier(.2,.7,.2,1),
                transform 0.28s cubic-bezier(.2,.7,.2,1);
}

/* ---- Radar head: hierarchy refinada ---- */
.election-hero__radar-eyebrow {
    color: rgba(255,255,255,0.62);
}
.election-hero__radar-live-text {
    letter-spacing: 0.24em;
}

/* ---- KPI polish: aire interno + baseline editorial ---- */
.election-hero__kpis {
    margin-top: 3rem;
}
.election-hero__kpi {
    padding: 1.35rem 1.5rem;
    gap: 1.1rem;
    align-items: center;
}
.election-hero__kpi-icon {
    font-size: 1.1rem;
    opacity: 0.88;
}
.election-hero__kpi-value {
    letter-spacing: -0.015em;
}
.election-hero__kpi-label {
    letter-spacing: 0.16em;
    line-height: 1.35;
}

/* ---- Hero → Board: transición editorial sutil ----
   Único elemento DOM nuevo. Bleed descendente con red ambient
   extremadamente tenue (continuidad visual, no efecto decorativo). */
.election-hero__transition {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px; /* arriba del __glow hairline */
    height: 90px;
    background: linear-gradient(180deg,
        rgba(11,11,15,0) 0%,
        rgba(229,9,20,0.012) 45%,
        rgba(11,11,15,0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ---- Responsive: ajustar respiración por breakpoint ---- */
@media (max-width: 1199.98px) {
    .election-hero__lead {
        margin: 1.85rem 0 2.4rem;
    }
    .election-hero__kpis {
        margin-top: 2.75rem;
    }
    .election-hero__cta {
        padding: 0.9rem 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .election-hero__lead {
        margin: 1.6rem 0 2rem;
        max-width: none;
    }
    .election-hero__ctas {
        gap: 0.65rem;
    }
    .election-hero__kpi {
        padding: 1.2rem 1.3rem;
        gap: 0.9rem;
    }
    .election-hero__transition {
        height: 70px;
    }
}

@media (max-width: 767.98px) {
    .election-hero__chips {
        margin-bottom: 1.5rem;
    }
    .election-hero__lead {
        margin: 1.4rem 0 1.85rem;
    }
    .election-hero__kpis {
        margin-top: 2rem;
    }
    .election-hero__kpi {
        gap: 0.85rem;
        padding: 1.05rem 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .election-hero__chips {
        margin-bottom: 1.4rem;
    }
    .election-hero__lead {
        margin: 1.3rem 0 1.7rem;
    }
    .election-hero__kpis {
        margin-top: 1.85rem;
    }
    .election-hero__transition {
        height: 60px;
    }
    .election-hero__cta {
        padding: 0.78rem 1.2rem;
        letter-spacing: 0.14em;
    }
}

/* =====================================================================
   FASE 6 — PR3.6 MOBILE HERO CLEANUP
   - Fix horizontal overflow en mobile (fallback hidden + clip moderno)
   - Ocultar radar completo en ≤991.98px (smartphone + tablet portrait)
   - Bootstrap row safety: min-width 0 en cols
   - SVG max-width 100%
   - KPI strip más compacto cuando radar desaparece → hero rápido/directo
   ===================================================================== */

/* ---- Defensive overflow protection: fallback hidden + clip moderno ---- */
.election-hero,
.election-hero-band {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---- Bootstrap row safety: permitir shrink en mobile/tablet ---- */
@media (max-width: 991.98px) {
    .election-hero .row > [class*="col-"] {
        min-width: 0;
    }
}

/* ---- SVG max-width safety (universal) ---- */
.election-hero__radar-svg svg,
.election-hero__radar-grid svg,
.election-hero__radar-connections,
.election-hero__radar-wave svg {
    max-width: 100%;
}

/* ---- Ocultar radar en ≤991.98 (smartphone + tablet portrait) ---- */
@media (max-width: 991.98px) {
    /* Oculta la columna completa del radar (incluye mt-4 Bootstrap utility) */
    .election-hero .row > .col-lg-5 {
        display: none;
    }
    /* Refuerzo defensivo: si la col se renderiza, el panel queda oculto */
    .election-hero__radar {
        display: none;
    }
}

/* ---- KPI strip: ritmo apretado cuando radar desaparece ---- */
@media (max-width: 991.98px) {
    .election-hero__kpis {
        margin-top: 1.6rem;
    }
    .election-hero__kpi {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .election-hero__kpis {
        margin-top: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    .election-hero__kpis {
        margin-top: 1.25rem;
    }
}

/* =====================================================================
   FASE 7 — NATIONAL BOARD EDITORIAL UPGRADE
   - Continuidad atmosférica hero → board (red ambient extremadamente tenue)
   - Header refinement: tracking, line-height, subtitle balance
   - Mapa premium: frame editorial, border-radius, ambient sutil, shadow depth
   - Sub-header "Cobertura por estado" muted/editorial entre mapa y grid
   - State cards más editoriales, menos admin dashboard
   - Density mejorada sin saturación
   ===================================================================== */

/* ---- Section atmosphere: continuidad hero → board ---- */
.election-board {
    position: relative;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%,
            rgba(229,9,20,0.028) 0%,
            rgba(229,9,20,0) 60%),
        linear-gradient(180deg, rgba(11,11,15,1) 0%, rgba(8,8,12,1) 100%);
}

/* ---- Header refinement ---- */
.election-board__header {
    margin-bottom: 2.85rem;
}
.election-board__eyebrow {
    letter-spacing: 0.22em;
}
.election-board__title {
    line-height: 0.95;
    letter-spacing: -0.025em;
}
.election-board__subtitle {
    color: rgba(255,255,255,0.62);
    max-width: 38rem;
}

/* ---- Mapa: frame premium editorial ---- */
.mx-map {
    max-width: 900px;
    margin: 0 auto 2.25rem;
    position: relative;
}
.mx-map__svg-wrap {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(229,9,20,0.025) 0%, transparent 60%),
        #0B0B0F;
    border: 1px solid rgba(255,255,255,0.07);
    border-top: 1px solid rgba(229,9,20,0.32);
    border-radius: 4px;
    padding: 1.75rem;
    box-shadow: 0 16px 48px -24px rgba(0,0,0,0.55);
    overflow: hidden;
}
.mx-map__attribution {
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.14em;
    margin: 0.7rem 0 0;
}

/* ---- Sub-header eyebrow entre mapa y grid (muted editorial) ---- */
.election-board__grid-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    font-weight: 700;
}

/* ---- Grid: gap más generoso ---- */
.election-board__grid {
    gap: 1rem;
}

/* ---- State cards: political intelligence board ---- */
.election-board__card {
    background: linear-gradient(180deg, #16161B 0%, #131318 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid transparent;
    border-left: 0;
    padding: 1.2rem 1.2rem 1.1rem;
    will-change: transform;
    transition: border-color 0.28s cubic-bezier(.2,.7,.2,1),
                border-top-color 0.28s cubic-bezier(.2,.7,.2,1),
                transform 0.28s cubic-bezier(.2,.7,.2,1),
                background 0.28s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-board__card:hover {
    border-color: rgba(229,9,20,0.45);
    border-top-color: rgba(229,9,20,0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -14px rgba(229,9,20,0.12);
    color: #fff;
}

/* Active: solo border-left rojo translucent (cleaner default) */
.election-board__card--active {
    border-left: 3px solid rgba(229,9,20,0.55);
}

/* Featured: gradient editorial sobrio + border-left rojo solid */
.election-board__card--featured {
    background: linear-gradient(140deg, #1c0a0d 0%, #120709 100%);
    border-color: rgba(229,9,20,0.45);
    border-left: 3px solid var(--bct-red);
    border-top-color: rgba(229,9,20,0.4);
}
.election-board__card--featured:hover {
    border-color: rgba(229,9,20,0.65);
    border-top-color: rgba(229,9,20,0.7);
    box-shadow: 0 10px 32px -12px rgba(229,9,20,0.18);
}

/* ---- Card internals refinement ---- */
.election-board__code {
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.2em;
}
.election-board__card--featured .election-board__code {
    color: rgba(255,200,200,0.78);
}
.election-board__badge {
    padding: 0.22rem 0.55rem;
    border-radius: 2px;
    font-size: 0.56rem;
}
.election-board__name {
    font-size: 1.1rem;
    letter-spacing: -0.015em;
}
.election-board__dom {
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(255,255,255,0.1);
}
.election-board__dom-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
}
.election-board__dom-name {
    font-size: 0.9rem;
    font-weight: 600;
}
.election-board__party {
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}
.election-board__dom--empty .election-board__dom-label {
    color: rgba(255,255,255,0.32);
    font-size: 0.74rem;
}

/* ---- Empty state refinement ---- */
.election-board__empty {
    border-color: rgba(255,255,255,0.1);
    border-radius: 3px;
    color: rgba(255,255,255,0.5);
    padding: 3.5rem 1.25rem;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .election-board__grid { gap: 0.95rem; }
    .mx-map { margin-bottom: 2rem; }
    .mx-map__svg-wrap { padding: 1.4rem; }
}

@media (max-width: 767.98px) {
    .election-board__header { margin-bottom: 2.25rem; }
    .election-board__grid { gap: 0.9rem; }
    .mx-map__svg-wrap { padding: 1.1rem; }
    .election-board__grid-eyebrow { margin-bottom: 0.85rem; font-size: 0.66rem; }
}

@media (max-width: 575.98px) {
    .election-board__header { margin-bottom: 1.75rem; }
    .election-board__grid { gap: 0.85rem; }
    .mx-map { margin-bottom: 1.5rem; }
    .mx-map__svg-wrap {
        padding: 0.7rem;
        border-radius: 3px;
    }
    .election-board__grid-eyebrow {
        margin-bottom: 0.7rem;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
    }
    .election-board__card { padding: 1rem; }
    .election-board__name { font-size: 1rem; }
}

/* ---- prefers-reduced-motion (extiende reset existente) ---- */
@media (prefers-reduced-motion: reduce) {
    .election-board__card {
        transition: none !important;
    }
    .election-board__card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =====================================================================
   FASE 7 — FEATURED CONTEST EDITORIAL UPGRADE
   - Section atmosphere: ambient red top extremadamente tenue (0.018)
   - Header refinement: tracking, hierarchy, lede peso editorial
   - Body framed: border-top accent alineado al map, depth shadow consistente
   - Editorial flow: lede premium, párrafos con ritmo periodístico
   - Dominant profile: war room editorial sin CRM look
   - Embedded metric: bars más editoriales, value con presencia
   - Figure cards (#election-figures only): integradas al ecosistema BC
   - Cero motion nuevo / glow exagerado / glassmorphism
   ===================================================================== */

/* ---- Section atmosphere: continuidad board → featured ---- */
[data-test-id="featured-contest"] {
    position: relative;
    background:
        radial-gradient(ellipse 70% 35% at 50% 0%,
            rgba(229,9,20,0.018) 0%,
            rgba(229,9,20,0) 60%),
        rgba(8,8,12,1);
}

/* ---- Header refinement ---- */
.election-featured__header {
    margin-bottom: 2rem;
}
.election-featured__kicker-text {
    letter-spacing: 0.22em;
}
.election-featured__kicker-code {
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    letter-spacing: 0.18em;
}
.election-featured__state {
    line-height: 0.95;
    letter-spacing: -0.025em;
}
.election-featured__lede {
    color: #fff;
    font-weight: 700;
}
.election-featured__tags {
    gap: 0.5rem 0.9rem;
}
/* Tags como labels editoriales — sin padding/bg, todos texto alineado a col left */

/* CTA editorial link — sin horizontal padding, mismo arranque visual que lede y tags */
.election-featured__cta {
    letter-spacing: 0.18em;
    transition: border-color 0.28s cubic-bezier(.2,.7,.2,1),
                color 0.28s cubic-bezier(.2,.7,.2,1),
                gap 0.2s ease;
}
.election-featured__cta-arrow {
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-featured__cta:hover .election-featured__cta-arrow {
    transform: translateX(3px);
}

/* ---- Body framed: continuidad con frame del map ---- */
.election-featured__body--framed {
    border-top: 1px solid rgba(229,9,20,0.32);
    box-shadow: 0 16px 48px -24px rgba(0,0,0,0.4);
}

/* ---- Editorial column: lede premium + body rhythm ---- */
.election-featured__editorial p.election-eyebrow {
    letter-spacing: 0.22em;
}
.election-featured__editorial-lede {
    font-size: 1.12rem;
    line-height: 1.55;
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-bottom-color: rgba(255,255,255,0.1);
}
.election-featured__editorial-body p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.86);
    letter-spacing: -0.003em;
}
.election-featured__editorial-body p:last-child { margin-bottom: 0; }
.election-featured__editorial-body p strong {
    color: #fff;
    font-weight: 600;
}

/* ---- Dominant profile (war room editorial premium) ---- */
.election-dominant__kicker {
    letter-spacing: 0.22em;
    color: rgba(229,9,20,0.85);
}
.election-dominant__name {
    line-height: 1.05;
    letter-spacing: -0.015em;
}
.election-dominant__role {
    font-style: normal;
    color: rgba(255,255,255,0.62);
    letter-spacing: 0.04em;
    font-size: 0.86rem;
}
.election-dominant__quote {
    border-left: 2px solid rgba(229,9,20,0.6);
    padding-left: 1.15rem;
    font-size: 0.98rem;
    line-height: 1.6;
    letter-spacing: -0.003em;
    margin-bottom: 1.7rem;
}
.election-dominant__warroom {
    border-color: rgba(229,9,20,0.22);
    padding: 1.1rem;
}
.election-dominant__warroom-item + .election-dominant__warroom-item {
    border-left: 1px solid rgba(255,255,255,0.08);
}
.election-dominant__warroom-value {
    font-size: 2.25rem;
}

/* ---- Embedded metric: continuidad warroom + presencia editorial ---- */
.election-featured__embedded-metric {
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.election-featured__embedded-metric-label {
    letter-spacing: 0.2em;
}
.election-featured__embedded-metric-value {
    font-size: 1.2rem;
}
.election-featured__embedded-metric-track {
    height: 5px;
    border-radius: 2.5px;
}
.election-featured__embedded-metric-fill {
    border-radius: 2.5px;
}

/* ---- Metrics row (full, cuando hay 2+) ---- */
.election-featured__metrics-row {
    margin-top: 2.25rem;
}
.election-featured__metrics-eyebrow {
    letter-spacing: 0.22em;
}

/* ---- #election-figures: section atmosphere y header alineado ---- */
#election-figures .election-section-header__eyebrow {
    letter-spacing: 0.22em;
}
#election-figures .election-section-header__title {
    line-height: 0.95;
    letter-spacing: -0.025em;
}
#election-figures .election-section-header__lead {
    color: rgba(255,255,255,0.62);
}

/* ---- #election-figures: figure cards integradas al ecosistema BC ---- */
/* Material depth con contraste extremadamente bajo (no gradient visible) */
#election-figures .election-figure-card {
    background: linear-gradient(180deg, #14141A 0%, #131319 100%);
    border-color: rgba(255,255,255,0.06);
    border-top: 1px solid transparent;
    will-change: transform;
    transition: border-color 0.28s cubic-bezier(.2,.7,.2,1),
                border-top-color 0.28s cubic-bezier(.2,.7,.2,1),
                transform 0.28s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.28s cubic-bezier(.2,.7,.2,1);
}
#election-figures .election-figure-card:hover {
    border-color: rgba(229,9,20,0.45);
    border-top-color: rgba(229,9,20,0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -14px rgba(229,9,20,0.09);
}

/* ---- Figure card head + metric ---- */
#election-figures .election-figure-card__head {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom-color: rgba(255,255,255,0.07);
}
#election-figures .election-figure-card__metric {
    letter-spacing: -0.02em;
}
#election-figures .election-figure-card__metric-suffix {
    color: rgba(255,255,255,0.5);
}
#election-figures .election-figure-card__rank-chip {
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    border-color: rgba(255,255,255,0.08);
}

/* ---- Figure card pillars (strengths/risks) ---- */
#election-figures .election-figure-card__sublist {
    background: rgba(255,255,255,0.025);
    padding: 0.85rem 1rem;
}

/* ---- Figure card lectura BCT premium ---- */
#election-figures .election-figure-card__lectura-bct {
    margin-top: 1rem;
    padding: 0.95rem 1.05rem;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(229,9,20,0.55);
    border-radius: 0 3px 3px 0;
}
#election-figures .election-figure-card__lectura-bct-label {
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.7);
}
#election-figures .election-figure-card__lectura-bct-text {
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}

/* ---- Figure card CTA ---- */
#election-figures .election-figure-card__cta {
    transition: color 0.28s cubic-bezier(.2,.7,.2,1);
}
#election-figures .election-figure-card__cta-arrow {
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
#election-figures .election-figure-card__cta:hover .election-figure-card__cta-arrow {
    transform: translateX(3px);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .election-featured__editorial-lede { font-size: 1.05rem; }
    .election-dominant__warroom-value { font-size: 2rem; }
    .election-featured__embedded-metric-value { font-size: 1.1rem; }
}

@media (max-width: 767.98px) {
    .election-featured__header { margin-bottom: 1.6rem; }
    .election-featured__editorial-lede { font-size: 1rem; padding-bottom: 0.85rem; }
    .election-featured__editorial-body p { font-size: 0.95rem; line-height: 1.65; }
    .election-dominant__quote { font-size: 0.95rem; line-height: 1.55; padding-left: 1rem; margin-bottom: 1.4rem; }
    .election-dominant__warroom-value { font-size: 1.85rem; }
}

@media (max-width: 575.98px) {
    .election-featured__header { margin-bottom: 1.4rem; }
    .election-featured__editorial-body p { font-size: 0.92rem; }
    .election-dominant__warroom-value { font-size: 1.7rem; }
    .election-dominant__quote { padding-left: 0.85rem; }
    .election-featured__embedded-metric-value { font-size: 1rem; }
}

/* ---- prefers-reduced-motion (extiende reset existente) ---- */
@media (prefers-reduced-motion: reduce) {
    #election-figures .election-figure-card,
    .election-featured__cta,
    .election-featured__cta-arrow,
    #election-figures .election-figure-card__cta,
    #election-figures .election-figure-card__cta-arrow {
        transition: none !important;
    }
    #election-figures .election-figure-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =====================================================================
   FASE 7 — WHITE EDITORIAL SYSTEM
   - Tonal bridge dark → light (60px desktop, 50px mobile)
   - Hairline rojo top (continuidad con hero __glow + board frame)
   - Editorial premium: chip / title / body / blockquote / byline
   - Calendar editorial timeline (no UI dashboard)
   - News header system unificado
   - White section headers consistentes (eyebrow tracking 0.22em)
   - Cero motion nuevo / glow / glassmorphism
   ===================================================================== */

/* ---- DARK → LIGHT TRANSITION (tonal bridge) ---- */
.election-editorial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg,
        rgba(8,8,12,1) 0%,
        rgba(8,8,12,0.55) 25%,
        rgba(229,9,20,0.028) 55%,
        rgba(244,244,242,0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}
.election-editorial::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(229,9,20,0.42);
    pointer-events: none;
    z-index: 1;
}
.election-editorial > .container {
    position: relative;
    z-index: 2;
}

/* ---- WHITE EDITORIAL: premium polish ---- */
.election-editorial__inner {
    max-width: 46rem;
}
.election-editorial__chip {
    letter-spacing: 0.22em;
}
.election-editorial__title {
    line-height: 1.03;
    letter-spacing: -0.025em;
}
.election-editorial__body {
    letter-spacing: -0.003em;
}
.election-editorial__body strong {
    color: #1A1A1A;
    font-weight: 600;
}
.election-editorial__body blockquote {
    border-left: 2px solid var(--bct-red);
    padding: 0.5rem 0 0.5rem 1.35rem;
    font-size: 1.18rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.election-editorial__body a {
    color: var(--bct-red);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-editorial__body a:hover {
    color: #FF3B45;
}
.election-editorial__byline {
    border-top: 1px solid rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.55);
}
.election-editorial__byline-author {
    color: #1A1A1A;
    letter-spacing: 0.14em;
}
.election-editorial__byline-sep {
    color: rgba(0,0,0,0.25);
}
.election-editorial__byline-date {
    color: rgba(0,0,0,0.55);
}

/* ---- WHITE SECTION HEADERS UNIFIED ---- */
.election-calendar .election-section-header__eyebrow,
.election-news .election-section-header__eyebrow {
    color: rgba(0,0,0,0.5);
    letter-spacing: 0.22em;
    font-weight: 700;
}
.election-calendar .election-section-header__title,
.election-news .election-section-header__title {
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1A1A1A;
}
.election-calendar .election-section-header__lead,
.election-news .election-section-header__lead {
    color: rgba(0,0,0,0.55);
}

/* ---- CALENDAR refinement: editorial timeline ---- */
.election-calendar__grid {
    gap: 0.85rem;
}
.election-calendar__cell {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-top: 2px solid var(--bct-red);
    padding: 1.15rem;
    transition: border-color 0.28s cubic-bezier(.2,.7,.2,1),
                border-top-color 0.28s cubic-bezier(.2,.7,.2,1);
}
.election-calendar__cell:hover {
    border-color: rgba(0,0,0,0.12);
    border-top-color: rgba(229,9,20,0.45);
}
.election-calendar__stage {
    color: rgba(0,0,0,0.5);
    letter-spacing: 0.18em;
}
.election-calendar__title {
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    color: #1A1A1A;
}
.election-calendar__date {
    letter-spacing: 0.14em;
    color: var(--bct-red);
}
.election-calendar__note {
    color: rgba(0,0,0,0.45);
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

/* ---- NEWS header refinement: divider + spacing ---- */
.election-news__header {
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.election-news__tab {
    transition: background 0.28s cubic-bezier(.2,.7,.2,1),
                color 0.28s cubic-bezier(.2,.7,.2,1),
                border-color 0.28s cubic-bezier(.2,.7,.2,1);
}

/* ---- Responsive: bridge mobile más corto ---- */
@media (max-width: 991.98px) {
    .election-editorial__inner { max-width: 44rem; }
}

@media (max-width: 767.98px) {
    .election-editorial::before { height: 50px; }
    .election-editorial__body blockquote {
        font-size: 1.05rem;
        padding-left: 1.1rem;
    }
    .election-news__header {
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .election-editorial::before { height: 50px; }
    .election-calendar__cell { padding: 0.95rem; }
    .election-calendar__title { font-size: 0.92rem; }
    .election-calendar__date { font-size: 0.78rem; letter-spacing: 0.12em; }
}

/* ---- prefers-reduced-motion (extiende reset) ---- */
@media (prefers-reduced-motion: reduce) {
    .election-calendar__cell,
    .election-editorial__body a,
    .election-news__tab {
        transition: none !important;
    }
}

/* =====================================================================
   PR5.2 — POLITICAL AVATAR SYSTEM
   Reemplaza portrait cinematográfico 4:5 por avatar editorial circular 1:1.
   - Foto humana reconocible (filtros casi nulos, sin grayscale)
   - Border sutil + fallback dark + hover glow rojo tenue
   - Mismos selectores que PR5.1 → cero cambios de markup
   ===================================================================== */

/* ---- Dominant profile avatar ---- */
.election-dominant__portrait {
    width: 88px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 8, 12, 0.4);
}
.election-dominant__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ---- Figure card avatar ---- */
.election-figure-card__head {
    align-items: center;
}
.election-figure-card__portrait {
    width: 52px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 8, 12, 0.4);
    margin-right: 0.85rem;
}
.election-figure-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ---- Responsive sizing (avatar circular, no portrait alto) ---- */
@media (max-width: 991.98px) {
    .election-dominant__portrait { width: 80px; }
    .election-figure-card__portrait { width: 48px; margin-right: 0.75rem; }
}
@media (max-width: 767.98px) {
    .election-dominant__portrait { width: 72px; }
    .election-figure-card__portrait { width: 46px; margin-right: 0.7rem; }
}
@media (max-width: 575.98px) {
    .election-dominant__portrait { width: 64px; }
    .election-figure-card__portrait { width: 44px; margin-right: 0.65rem; }
}

/* =====================================================================
   FASE 8 — PR5.1 EDITORIAL MOTION
   Polish atmosférico CSS-only. Sin GSAP, sin JS, sin nuevas dependencias.
   - 1 keyframe nuevo: hero-live-flicker (pseudo-orgánico, 22s)
   - Cero nuevas capas en hero map (solo refino existente)
   - Hover transitions slow ease en KPIs / Dominant / Cards / Social
   - Grain layer global: SOLO dark sections, opacity 0.008 subconsciente
   - Mobile (≤575): grain oculto (cost overlay blend)
   - prefers-reduced-motion: pausa flicker
   ===================================================================== */

/* ---- Hero EN VIVO flicker (pseudo-orgánico, sin ritmo detectable) ---- */
.election-hero__radar-live-text {
    will-change: opacity;
    animation: hero-live-flicker 22s linear infinite;
}
@keyframes hero-live-flicker {
    /* Timeline 22s con 3 micro dips a posiciones y profundidades irregulares.
       Gaps entre dips: 14% → 27% → 32% (no uniformes → no rítmico). */
    0%, 14%, 14.7%, 41%, 41.6%, 73%, 73.5%, 100% { opacity: 1; }
    14.3% { opacity: 0.86; }
    41.3% { opacity: 0.82; }
    73.25% { opacity: 0.88; }
}

/* ---- KPI hover: editorial premium, no sci-fi dashboard ---- */
.election-hero__kpi {
    transition: background 0.5s cubic-bezier(.2,.7,.2,1);
}
.election-hero__kpi:hover {
    background: rgba(255,255,255,0.018);
}
.election-hero__kpi-icon {
    transition: opacity 0.5s cubic-bezier(.2,.7,.2,1);
}
.election-hero__kpi:hover .election-hero__kpi-icon {
    opacity: 0.95;
}
.election-hero__kpi-label {
    transition: color 0.5s cubic-bezier(.2,.7,.2,1);
}
.election-hero__kpi:hover .election-hero__kpi-label {
    color: rgba(255,255,255,0.62);
}

/* ---- Dominant profile hover: red edge sutil + avatar ring glow ---- */
.election-featured__body--framed .election-dominant {
    transition: box-shadow 0.6s cubic-bezier(.2,.7,.2,1);
}
.election-featured__body--framed .election-dominant:hover {
    box-shadow: 0 0 0 1px rgba(229,9,20,0.14);
}
.election-dominant__portrait {
    transition: border-color 0.5s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.5s cubic-bezier(.2,.7,.2,1);
}
.election-featured__body--framed .election-dominant:hover .election-dominant__portrait {
    border-color: rgba(229, 9, 20, 0.5);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.08);
}

/* ---- Figure cards: avatar ring glow en hover ---- */
#election-figures .election-figure-card__portrait {
    transition: border-color 0.5s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.5s cubic-bezier(.2,.7,.2,1);
}
#election-figures .election-figure-card:hover .election-figure-card__portrait {
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.08);
}

/* ---- National board cards: brightness micro shift en hover ---- */
.election-board__card {
    transition: border-color 0.5s cubic-bezier(.2,.7,.2,1),
                border-top-color 0.5s cubic-bezier(.2,.7,.2,1),
                transform 0.5s cubic-bezier(.2,.7,.2,1),
                background 0.5s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.5s cubic-bezier(.2,.7,.2,1),
                filter 0.5s cubic-bezier(.2,.7,.2,1);
}
.election-board__card:hover {
    filter: brightness(1.04);
}

/* ---- Grain noise layer (atmospheric, SOLO dark sections) ---- */
.election-section--dark {
    position: relative;
}
.election-section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='ng'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23ng)' opacity='0.6'/></svg>");
    background-size: 180px 180px;
    opacity: 0.008;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.election-section--dark > .container {
    position: relative;
    z-index: 1;
}

/* Mobile (≤575): ocultar grain (mix-blend-mode overlay cost) */
@media (max-width: 575.98px) {
    .election-section--dark::before {
        display: none;
    }
}

/* ---- prefers-reduced-motion: pausa flicker ---- */
@media (prefers-reduced-motion: reduce) {
    .election-hero__radar-live-text {
        animation: none !important;
    }
    /* Hover transitions son event-driven, no requieren disable */
}

/* =====================================================================
   FASE 9 — INTERACTIVE NATIONAL BOARD (PR6)
   - Estado activo SVG: off-white editorial (#F5F2ED)
   - Stage wrapper con overlays editoriales (main panel BL + radar TR)
   - Selector "SALTAR A" terminal/editorial compacto
   - Radar político: lectura editorial (no scoreboard, micro indicators)
   - Mobile: stack vertical sin overlays, selector horizontal scroll
   ===================================================================== */

/* ---- Override PR2 legend swatches: nuevo sistema 3-niveles ---- */
.mx-map__legend-swatch--featured { background: #F5F2ED; }
.mx-map__legend-swatch--active   { background: #E50914; }
.mx-map__legend-swatch--inactive { background: #1F1F26; }

/* ---- Stage wrapper para overlays ---- */
.election-board__stage {
    position: relative;
    margin-bottom: 1.5rem;
}

/* ---- Main panel — overlay editorial premium (no card superpuesta) ---- */
.election-board__main-panel {
    background:
        linear-gradient(180deg, rgba(11,11,15,0.88) 0%, rgba(8,8,12,0.94) 100%);
    border-left: 2px solid var(--bct-red);
    padding: 1.6rem 1.75rem 1.65rem;
    max-width: 320px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 992px) {
    .election-board__main-panel {
        position: absolute;
        bottom: 4.25rem;
        left: 1.5rem;
        z-index: 4;
    }
}
.election-board__main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.election-board__main-code {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
}
.election-board__main-badge {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--bct-red);
    color: #fff;
    padding: 0.22rem 0.55rem;
    border-radius: 2px;
    font-weight: 800;
    white-space: nowrap;
}
.election-board__main-name {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 1.15rem;
}
.election-board__main-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.election-board__main-figure {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.7rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.election-board__main-party-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
}
.election-board__main-party {
    display: inline-block;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    line-height: 1;
}
.election-board__main-lead {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.2rem;
    letter-spacing: -0.003em;
}
.election-board__main-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(229,9,20,0.55);
    transition: color 0.4s cubic-bezier(.2,.7,.2,1),
                border-color 0.4s cubic-bezier(.2,.7,.2,1);
}
.election-board__main-cta:hover {
    color: #FF3B45;
    border-color: var(--bct-red);
    text-decoration: none;
}

/* ---- Radar político — overlay top-right ---- */
.election-board__radar-panel {
    background: linear-gradient(180deg, rgba(11,11,15,0.88) 0%, rgba(8,8,12,0.94) 100%);
    border: 1px solid rgba(229,9,20,0.32);
    padding: 1.1rem 1.2rem 1.15rem;
    max-width: 290px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    margin-top: 1.5rem;
}
@media (min-width: 992px) {
    .election-board__radar-panel {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        z-index: 4;
        margin-top: 0;
    }
}
.election-board__radar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.election-board__radar-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(229,9,20,0.85);
    font-weight: 800;
}
.election-board__radar-code {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    font-weight: 700;
}
.election-board__radar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.election-board__radar-item {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.election-board__radar-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.election-board__radar-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}
.election-board__radar-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.election-board__radar-party {
    display: inline-block;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.14rem 0.42rem;
    border-radius: 2px;
    line-height: 1;
    flex-shrink: 0;
}
.election-board__radar-role {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.52);
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.3;
}

/* Micro meter editorial — tick + dots, NO progress bar largo */
.election-board__radar-meter {
    position: relative;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.06) 100%);
    margin-top: 0.3rem;
}
.election-board__radar-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: calc(var(--pct, 0) * 1%);
    width: 1px;
    background: rgba(229,9,20,0.78);
    transform: translateX(-50%);
}

.election-board__radar-empty {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.42);
    font-style: italic;
}

/* State tabs band — cintillo full-width estilo .election-hero-band.
   Wrapper full-bleed; container interno mantiene max-width Bootstrap.
   Estructura: intro (eyebrow + lead + hairline) → selector pills. */
.election-state-band {
    background: #0A0A0E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.95rem 0 0.85rem;
}
.election-state-band__intro {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.election-state-band__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bct-red);
    font-weight: 700;
}
.election-state-band__lead {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}
.election-state-band .election-board__selector {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    gap: 0.65rem;
}

/* ---- Selector "SALTAR A" — terminal editorial compacto ---- */
.election-board__selector {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}
.election-board__selector-label {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    flex-shrink: 0;
}
.election-board__selector-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.election-board__selector-item {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.55);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.32rem 0.55rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 0;
    text-decoration: none; /* compat <a> (state tabs reusa este BEM) */
    transition: color 0.4s cubic-bezier(.2,.7,.2,1),
                border-color 0.4s cubic-bezier(.2,.7,.2,1),
                background 0.4s cubic-bezier(.2,.7,.2,1);
    font-variant-numeric: tabular-nums;
}
.election-board__selector-item:hover {
    color: #fff;
    border-color: rgba(229,9,20,0.45);
}
.election-board__selector-item.is-active {
    background: var(--bct-red);
    border-color: var(--bct-red);
    color: #fff;
}
.election-board__selector-item:focus-visible {
    outline: 1px solid rgba(229,9,20,0.7);
    outline-offset: 2px;
}

/* ---- Mobile: stack vertical, selector scroll horizontal ---- */
@media (max-width: 991.98px) {
    .election-board__main-panel,
    .election-board__radar-panel {
        max-width: 100%;
        margin-top: 1.25rem;
    }
    .election-board__main-panel { padding: 1.4rem 1.5rem; }
    .election-board__radar-panel { padding: 1rem 1.15rem; }
}

@media (max-width: 767.98px) {
    .election-board__main-name { font-size: 1.35rem; }
    .election-board__main-figure { font-size: 1rem; }
    .election-board__selector {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
        padding-top: 1rem;
        margin-top: 1.25rem;
    }
    .election-board__selector-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 0.4rem;
        scrollbar-width: none;
    }
    .election-board__selector-list::-webkit-scrollbar { display: none; }
    .election-board__selector-item { flex-shrink: 0; }
}

@media (max-width: 575.98px) {
    .election-board__main-panel { padding: 1.2rem 1.25rem; }
    .election-board__main-name { font-size: 1.25rem; }
    .election-board__main-eyebrow { font-size: 0.6rem; }
    .election-board__radar-name { font-size: 0.82rem; }
}

/* ---- prefers-reduced-motion: ya cubierto por transitions slow ease + cero animaciones continuas ---- */

/* =====================================================================
   FASE 9 — PR6.1 SPACING POLISH
   - Eliminar frame visual del mapa (border, radius, padding-as-frame, shadow)
   - Conservar atmósfera/glow ambiental moviéndolos al stage
   - Centrar selector "SALTAR A" (terminal navigation editorial)
   - Compactar spacing vertical ~15% (header, mapa, selector, panels)
   - Mapa respira horizontalmente al perder padding del wrap
   - Cero rediseño — solo polish espacial
   ===================================================================== */

/* ---- Section: padding compactado ---- */
.election-board {
    padding: 3.5rem 0 3.75rem;
}

/* ---- Header: margin-bottom reducido ---- */
.election-board__header {
    margin-bottom: 1.85rem;
}

/* ---- Mapa: sin frame, sin padding, glow ambient se traslada al stage ---- */
.mx-map {
    margin: 0 auto 0.85rem;
    max-width: 980px;
}
.mx-map__svg-wrap {
    background: transparent;
    border: 0;
    border-top: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

/* ---- Stage: ambient red glow ahora vive aquí (antes en svg-wrap) ---- */
.election-board__stage {
    position: relative;
    margin-bottom: 0.5rem;
    background: radial-gradient(ellipse 70% 55% at 50% 45%,
        rgba(229,9,20,0.025) 0%,
        rgba(229,9,20,0) 65%);
}

/* ---- Overlays: reposicionar para frame-less map ---- */
@media (min-width: 992px) {
    .election-board__main-panel {
        bottom: 3.75rem;
        left: 0.5rem;
    }
    .election-board__radar-panel {
        top: 0.25rem;
        right: 0.5rem;
    }
}

/* ---- Main panel: padding compactado ---- */
.election-board__main-panel {
    padding: 1.3rem 1.5rem 1.35rem;
    max-width: 300px;
}
.election-board__main-name {
    margin: 0 0 0.95rem;
}
.election-board__main-figure {
    margin: 0 0 0.6rem;
}
.election-board__main-party-row {
    margin: 0 0 0.85rem;
}
.election-board__main-lead {
    margin: 0 0 1rem;
}

/* ---- Radar panel: padding compactado, sin whitespace innecesario abajo ---- */
.election-board__radar-panel {
    padding: 0.95rem 1.15rem 0.9rem;
    max-width: 280px;
}
.election-board__radar-head {
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
}
.election-board__radar-list {
    gap: 0.7rem;
}
.election-board__radar-item {
    padding-bottom: 0.7rem;
}
.election-board__radar-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ---- Leyenda: más cerca del mapa ---- */
.mx-map__legend {
    margin: 0.75rem auto 0;
    padding: 0.55rem 0.85rem;
}

/* ---- Atribución: más compacta ---- */
.mx-map__attribution {
    margin: 0.4rem 0 0;
}

/* ---- Selector: centrado editorial terminal ---- */
.election-board__selector {
    justify-content: center;
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    gap: 0.7rem;
}
.election-board__selector-list {
    justify-content: center;
}

/* ---- Mobile: compactación adicional + selector centrado ---- */
@media (max-width: 991.98px) {
    .election-board { padding: 2.75rem 0 3rem; }
    .election-board__main-panel { margin-top: 0.85rem; padding: 1.2rem 1.35rem; }
    .election-board__radar-panel { margin-top: 0.85rem; padding: 0.85rem 1rem; }
    .election-board__stage { margin-bottom: 0.25rem; }
}

@media (max-width: 767.98px) {
    .election-board { padding: 2.25rem 0 2.5rem; }
    .election-board__header { margin-bottom: 1.4rem; }
    .election-board__selector {
        flex-direction: column;
        align-items: center; /* centro también en mobile */
        gap: 0.55rem;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }
    .election-board__selector-list {
        justify-content: flex-start; /* scroll horizontal natural */
    }
}

/* =====================================================================
   FASE 9 — PR6.2 BALANCE PASS
   Equilibrio espacial premium/editorial. NO compactar más.
   - Mapa ~9% más pequeño para que el módulo cierre en viewport desktop
   - Radar panel +24px más abajo (más respiración editorial superior)
   - Main panel: gaps internos compactados, CTA más cerca del contenido
   - Mapa visualmente más alto (legend separation sutil)
   - Cero cambios: leyenda, selector centrado, interacción, hover, atmósfera, motion
   ===================================================================== */

/* ---- Mapa: reducir escala ~9% (980 → 890) ---- */
.mx-map {
    max-width: 890px;
}

/* ---- Mapa visualmente más alto: añadir respiración entre map y leyenda ---- */
.mx-map__legend {
    margin-top: 1.25rem;
}

/* ---- Radar panel: bajar ~24px (top 0.25rem → 1.75rem) ---- */
@media (min-width: 992px) {
    .election-board__radar-panel {
        top: 1.75rem;
    }
    /* Compensar legend offset para que main panel mantenga su posición sobre el SVG */
    .election-board__main-panel {
        bottom: 4.25rem;
    }
}

/* ---- Main panel: compactación interna (CTA más cerca del contenido) ---- */
.election-board__main-name {
    margin: 0 0 0.75rem;
}
.election-board__main-figure {
    margin: 0 0 0.5rem;
}
.election-board__main-party-row {
    margin: 0 0 0.7rem;
}
.election-board__main-lead {
    margin: 0 0 0.7rem;
    line-height: 1.5;
}
.election-board__main-eyebrow {
    margin: 0 0 0.32rem;
}
.election-board__main-head {
    margin-bottom: 0.6rem;
}

/* =====================================================================
   FASE 9 — PR6.3 HIERARCHY RESTORE
   - Mapa -13.5% (890 → 770) para devolver protagonismo al título
   - Stage capped al ancho del mapa: overlays siguen los edges del mapa
   - Cero compactación vertical adicional
   - Cero cambios en overlays conceptuales (mantienen su posición editorial)
   - Flujo visual restaurado: título → subtítulo → mapa → overlays → exploración
   ===================================================================== */

/* ---- Mapa: reducción ~13.5% (890 → 770) ---- */
.mx-map {
    max-width: 770px;
}

/* ---- Stage: capped al ancho del mapa para que overlays sigan los edges del SVG ---- */
.election-board__stage {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Overlays: micro re-balance dentro del nuevo bounding box ---- */
@media (min-width: 992px) {
    .election-board__main-panel {
        bottom: 4rem;
        left: 0;
    }
    .election-board__radar-panel {
        top: 1.5rem;
        right: 0;
    }
}

/* =====================================================================
   FASE 9 — PR6.4 RESTORE OVERLAY COMPOSITION
   Corrección espacial de PR6.3.
   - Revertir cap del stage: el área compositiva vuelve a ser amplia
   - Mapa un poco más pequeño aún (770 → 720) para protagonismo del título
   - Overlays restaurados a posiciones laterales amplias (no pegados al SVG)
   - El mapa es el centro del escenario; overlays respiran en la escena editorial
   ===================================================================== */

/* ---- Stage: revertir cap, volver al ancho editorial del container ---- */
.election-board__stage {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ---- Mapa: un poco más pequeño (770 → 720) ---- */
.mx-map {
    max-width: 720px;
}

/* ---- Overlays: restaurar a composición amplia (laterales, no anclados al SVG) ---- */
@media (min-width: 992px) {
    .election-board__main-panel {
        bottom: 4.25rem;
        left: 0.5rem;
    }
    .election-board__radar-panel {
        top: 1.75rem;
        right: 0.5rem;
    }
}

/* =====================================================================
   FASE 9 — PR6.5 BOARD LEGEND TO TOOLTIP
   - Ocultar leyenda fija (gana espacio vertical)
   - Mapa ligeramente más grande (720 → 800)
   - Subir selector "SALTAR A" reduciendo su top spacing
   - Tooltip editorial dark al hover de estados (vanilla JS, sin libs)
   - Mobile (pointer coarse): tooltip oculto, selector como vía principal
   ===================================================================== */

/* ---- Ocultar leyenda solo en el board interactivo ---- */
#national-board .mx-map__legend {
    display: none;
}

/* ---- Mapa: respiración hacia 800px ---- */
.mx-map {
    max-width: 800px;
}

/* ---- Selector: subir tras hide legend ---- */
.election-board__selector {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

/* ---- Atribución compacta ---- */
.mx-map__attribution {
    margin: 0.3rem 0 0;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}

/* ---- Tooltip editorial dark ---- */
.election-board__tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(8,8,12,0.95);
    border: 1px solid rgba(229,9,20,0.32);
    border-left-width: 2px;
    padding: 0.5rem 0.75rem 0.55rem;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(.2,.7,.2,1);
    max-width: 220px;
    transform: translate3d(0, 0, 0);
    will-change: transform, left, top;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    top: 0;
    left: 0;
}
.election-board__tooltip.is-visible {
    opacity: 1;
}
.election-board__tooltip-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 0.18rem;
    letter-spacing: -0.01em;
}
.election-board__tooltip-status {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.election-board__tooltip-status--active {
    color: rgba(229,9,20,0.85);
}

/* ---- Mobile / pointer coarse: tooltip nunca visible ---- */
@media (pointer: coarse), (max-width: 575.98px) {
    .election-board__tooltip {
        display: none !important;
    }
}

/* ---- prefers-reduced-motion: tooltip sin transition ---- */
@media (prefers-reduced-motion: reduce) {
    .election-board__tooltip {
        transition: none;
    }
}

/* =====================================================================
   FASE 9 — PR6.6 EDITORIAL HEADER SPACING
   - Más respiración entre navbar global y título "Tablero nacional"
   - Mapa sube ligeramente (header→map gap se cierra)
   - Total height del módulo prácticamente sin cambio
   - Cero rediseño, solo micro-ajuste editorial
   ===================================================================== */

.election-board {
    padding-top: 5rem; /* era 3.5rem PR6.1 → +24px breathing arriba */
}

.election-board__header {
    margin-bottom: 0.5rem; /* era 1.85rem PR6.1 → -22px (mapa sube 22px relativo al header) */
}

/* =====================================================================
   FASE 9 — PR6.7 ACTIVE STATE UX FEEDBACK
   - Transition refinada a 220ms editorial cubic-bezier
   - Active state con drop-shadow halo sutil (no neon, no gaming)
   - Jerarquía: activo > hover > normal (active wins via specificity + !important)
   - Cero cambios en tooltip / selector / overlays / radar / spacing / mapa size /
     leyenda / interaction logic / JS structure
   ===================================================================== */

/* ---- Refinar transición fill + filter (220ms editorial) ---- */
#national-board .mx-map svg path {
    transition: fill 220ms cubic-bezier(.2,.7,.2,1),
                filter 220ms cubic-bezier(.2,.7,.2,1);
}

/* ---- Active state: emphasis halo (jerarquía dominante) ---- */
/* !important porque rules per-state #MX{Code} usan id (specificity más alta)
   y necesitamos garantizar que active wins en hover sobre cualquier estado. */
#national-board .mx-map svg path.is-active,
#national-board .mx-map svg path.is-active:hover {
    fill: #F5F2ED !important;
    cursor: default !important;
    filter: drop-shadow(0 0 6px rgba(245,242,237,0.4))
            drop-shadow(0 0 14px rgba(245,242,237,0.18)) !important;
}

/* ---- prefers-reduced-motion: sin animación de filter ---- */
@media (prefers-reduced-motion: reduce) {
    #national-board .mx-map svg path {
        transition: fill 0s !important;
    }
}

/* =====================================================================
   FASE 10 — LANDING RHYTHM + KPI MOTION (PR7 conservador)
   - Rhythm pass moderado: -10 a -13% en sections desktop
   - Calendario: -20 a -25% (única reducción más focalizada)
   - News: -10% (mínimo; flag content issue como deuda)
   - KPI motion editorial alive: count-up subtle + reveal casi imperceptible
   ===================================================================== */

/* ---- Section rhythm: reducción conservadora ---- */
@media (min-width: 992px) {
    .election-section { padding: 5.25rem 0; }
    .election-editorial { padding: 5.25rem 0 4.5rem; }
    .election-news { padding: 4.5rem 0 5rem; }
    .election-calendar { padding: 4rem 0 4.5rem; }
}
@media (min-width: 1200px) {
    .election-section { padding: 6.25rem 0; }
}

/* ---- Calendario: focalizado (whitespace excesivo identificado) ---- */
.election-calendar { padding: 2.5rem 0 3rem; }
.election-calendar__grid { margin-top: 0.85rem; }
.election-calendar__note { margin-top: 0.6rem; }

/* ---- KPI Motion: states ---- */
/* Reveal: estado inicial oculto (preparación antes de transición) */
.election-hero__kpi-value.kpi-reveal-prep {
    opacity: 0;
    transform: translateY(4px);
}
/* Reveal: estado final con transición editorial */
.election-hero__kpi-value.kpi-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms cubic-bezier(.2,.7,.2,1),
                transform 500ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}

/* prefers-reduced-motion: skip transition (texto siempre visible) */
@media (prefers-reduced-motion: reduce) {
    .election-hero__kpi-value.kpi-reveal-prep,
    .election-hero__kpi-value.kpi-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   FASE 10 — PR7.1 FIX: CALENDAR KEY CELL VISIBILIDAD
   Causa raíz: PR4.2 (.election-calendar__cell {background:#fff}) sobrescribe
   por orden en cascada la regla --key (PR1 quick wins). Resultado: cell
   key con bg blanco + texto blanco = invisible.
   Fix: específico .cell.cell--key con doble class (specificity 0,0,2,0)
   garantiza que el bg rojo sobrio + texto blanco se aplique siempre.
   ===================================================================== */

.election-calendar__cell.election-calendar__cell--key {
    background: var(--bct-red);
    border: 1px solid var(--bct-red);
    border-top: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(229,9,20,0.22);
}
.election-calendar__cell.election-calendar__cell--key:hover {
    border-color: var(--bct-red);
    border-top-color: rgba(255,255,255,0.85);
}
.election-calendar__cell.election-calendar__cell--key .election-calendar__stage {
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.18em;
}
.election-calendar__cell.election-calendar__cell--key .election-calendar__title {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.election-calendar__cell.election-calendar__cell--key .election-calendar__date {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* =====================================================================
   FASE 9 — PR6.7 STATE TRANSITION SOFTNESS
   - Paneles main + radar con fade subtle al cambiar de estado
   - JS coordina: add .is-swapping → 90ms → swap content → remove class
   - Duración 180ms ease-out (editorial breve)
   - translateY 2px casi imperceptible (no sliding)
   - prefers-reduced-motion: skip total (swap directo sin fade)
   ===================================================================== */

.election-board__main-panel,
.election-board__radar-panel {
    transition: opacity 180ms cubic-bezier(.2,.7,.2,1),
                transform 180ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}

.election-board__main-panel.is-swapping,
.election-board__radar-panel.is-swapping {
    opacity: 0.4;
    transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
    .election-board__main-panel,
    .election-board__radar-panel {
        transition: none !important;
    }
    .election-board__main-panel.is-swapping,
    .election-board__radar-panel.is-swapping {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =====================================================================
   FASE 10 — PR7.2 REDUCE FEATURED GAP
   Diagnóstico:
     Gap board ↔ featured contest:
       ≥1200: board pb 3.75rem + featured pt 6.25rem = 10rem (~160px) ← excesivo
       ≥992 : board pb 3.75rem + featured pt 5.25rem = 9rem
   Target: -50% aprox.
   Fix quirúrgico: reducir SOLO board.padding-bottom + featured.padding-top.
   ===================================================================== */

/* Board: padding-bottom reducido */
.election-board {
    padding-bottom: 1.75rem;
}
@media (max-width: 991.98px) {
    .election-board {
        padding-bottom: 1.5rem;
    }
}
@media (max-width: 767.98px) {
    .election-board {
        padding-bottom: 1.25rem;
    }
}

/* Featured contest: padding-top reducido (override de .election-section) */
[data-test-id="featured-contest"] {
    padding-top: 2.5rem;
}
@media (min-width: 992px) {
    [data-test-id="featured-contest"] {
        padding-top: 3rem;
    }
}
@media (min-width: 1200px) {
    [data-test-id="featured-contest"] {
        padding-top: 3rem;
    }
}

/* =====================================================================
   PR7.3 — Sub-bar nav alignment (sin tags a la izquierda)
   Al eliminar el bloque .election-hero-band__left, la nav queda como
   único hijo del flex container y se alinea al inicio. Restauramos su
   posición original (alineada a la derecha) con margin-left: auto.
   ===================================================================== */
.election-hero-band__inner > .election-hero-band__nav:only-child {
    margin-left: auto;
}
@media (max-width: 359px) {
    /* En extra-small el inner colapsa a column → respeta flex-start */
    .election-hero-band__inner > .election-hero-band__nav:only-child {
        margin-left: 0;
    }
}

/* =====================================================================
   PR8 — GSAP EDITORIAL REVEAL — initial-hidden states (anti-FOUC)
   Gating con .js-motion: si JS+GSAP cargan, agrega la clase y los
   targets arrancan ocultos hasta que el timeline / ScrollTrigger los
   revela. Sin JS: nada se oculta, render normal del servidor.
   prefers-reduced-motion: la clase .js-motion se elimina por JS.
   ===================================================================== */

/* Hero pieces — arriba del fold, fade en load timeline */
.js-motion #election-hero .election-hero__chips,
.js-motion #election-hero .election-hero__title,
.js-motion #election-hero .election-hero__lead,
.js-motion #election-hero .election-hero__ctas,
.js-motion #election-hero .election-hero__radar,
.js-motion #election-hero .election-hero__kpis {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
}

/* Sections post-hero — fade-in cuando entran a viewport */
.js-motion [data-test-id="national-board"],
.js-motion [data-test-id="featured-contest"],
.js-motion [data-test-id="editorial-bct"],
.js-motion [data-test-id="calendar"],
.js-motion [data-test-id="related-articles"],
.js-motion [data-test-id="social-feed"],
.js-motion [data-test-id="newsletter"] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    will-change: opacity, transform;
}

/* Figure cards section — section root no se oculta, sólo header + cards */
.js-motion #election-figures .election-section-header,
.js-motion #election-figures .election-state-tabs,
.js-motion #election-figures [data-test-id="figure-card"] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
}

/* prefers-reduced-motion: revertir todo. Doble cinturón: aunque JS quita
   .js-motion, este media query asegura que tampoco haya estado oculto
   en el flash entre parsing y ejecución del script. */
@media (prefers-reduced-motion: reduce) {
    .js-motion #election-hero .election-hero__chips,
    .js-motion #election-hero .election-hero__title,
    .js-motion #election-hero .election-hero__lead,
    .js-motion #election-hero .election-hero__ctas,
    .js-motion #election-hero .election-hero__radar,
    .js-motion #election-hero .election-hero__kpis,
    .js-motion [data-test-id="national-board"],
    .js-motion [data-test-id="featured-contest"],
    .js-motion [data-test-id="editorial-bct"],
    .js-motion [data-test-id="calendar"],
    .js-motion [data-test-id="related-articles"],
    .js-motion [data-test-id="social-feed"],
    .js-motion [data-test-id="newsletter"],
    .js-motion #election-figures .election-section-header,
    .js-motion #election-figures .election-state-tabs,
    .js-motion #election-figures [data-test-id="figure-card"] {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }
}

/* =====================================================================
   PR8 FIX — Section boundary backgrounds (anti franja blanca)
   site.css define html/body sin background, default es blanco. Cuando
   PR8 oculta una dark section con opacity:0, el body blanco se filtra
   como "franja blanca" entre secciones dark.
   Solución: pintar SOLO main dark cuando estamos en la landing del
   especial, usando :has() (Chrome 105+, Safari 15.4+, FF 121+).
   - body queda intacto → el <header> superior (logo + fecha + buscador)
     conserva su fondo blanco original.
   - main es el contenedor inmediato de las secciones; todas las dark
     pintan sobre dark, las white (editorial, calendar, news, newsletter)
     pintan su fondo blanco encima → revelan como spotlight editorial.
   ===================================================================== */
main:has(#election-hero) {
    background-color: var(--bct-dark);
}

/* =====================================================================
   PR9 — Social section (EmbedSocial + CTA "Síguenos")
   Layout/spacing/alignment via Bootstrap utilities en el markup.
   Custom CSS sólo para typography editorial (eyebrow/title) e icon button
   system (44px circular hover) — cosas que utilities no expresan limpio.
   ===================================================================== */
.election-social-cta__eyebrow {
    color: var(--bct-red);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.election-social-cta__title {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.election-social-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.election-social-cta__icon:hover {
    border-color: var(--bct-red);
    background: rgba(229, 9, 20, 0.08);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .election-social-cta__icon { transition: none; }
    .election-social-cta__icon:hover { transform: none; }
}

/* =====================================================================
   HERO FOLD-FIT (desktop) — el hero del LANDING ocupa exactamente 100svh - navbar.
   - Scoped a #election-hero (id solo en _ElectionHero.cshtml). State/figure
     pages usan .election-hero por clase → conservan su alto por contenido.
   - Sub-nav band movida DENTRO del hero como absolute top: 0.
   - Hero: min-height calc + flex column → titulo arriba, KPIs abajo.
   - Tipografia fluida combinando vw y vh para viewports cortos.
   - --bct-nav-h lo publica el script inline al final de _ElectionHero.cshtml
     midiendo .bct-nav.offsetHeight; el fallback 64px coincide con scroll-padding-top.
   - Solo desktop (>=992px): mobile/tablet conservan layout por contenido.
   ===================================================================== */
@media (min-width: 992px) {
    #election-hero {
        min-height: calc(100svh - var(--bct-nav-h, 64px));
        /* Reserva en padding-top el espacio que ocupa la band absolute,
           mas un breathing fluido por vh. */
        padding-top: calc(var(--election-band-h, 44px) + clamp(1.25rem, 3vh, 2.75rem));
        padding-bottom: clamp(1.5rem, 3vh, 3rem);
        display: flex;
        align-items: stretch;
    }
    #election-hero > .election-hero-band {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4;
    }
    #election-hero > .container {
        display: flex;
        flex-direction: column;
        gap: clamp(1rem, 2vh, 2rem);
        width: 100%;
    }
    /* La row de chips/titulo/lead/ctas mantiene su alto natural arriba */
    #election-hero > .container > .row {
        flex: 0 0 auto;
    }
    /* KPI strip se ancla al borde inferior del fold */
    #election-hero > .container > .election-hero__kpis {
        margin-top: auto;
    }
    /* Tipografia escalada por vw + vh: en viewports cortos no se come el alto */
    #election-hero .election-hero__title {
        font-size: clamp(4rem, min(11vw, 15vh), 9rem);
    }
}

/* Desktop con altura limitada (laptops 13-14" tipo 1366x768) — densificar.
   Tambien scoped al landing — state pages no necesitan compactarse. */
@media (min-width: 992px) and (max-height: 820px) {
    #election-hero .election-hero__chips { margin-bottom: 1rem; }
    #election-hero .election-hero__title { font-size: clamp(2.8rem, 8vh, 5.5rem); }
    #election-hero .election-hero__lead {
        font-size: 0.95rem;
        margin: 0.85rem 0 1.1rem;
        line-height: 1.5;
    }
    #election-hero .election-hero__cta {
        font-size: 0.74rem;
        padding: 0.7rem 1.15rem;
    }
    #election-hero .election-hero__kpi {
        padding: 0.7rem 0.95rem;
        gap: 0.7rem;
    }
    #election-hero .election-hero__kpi-value { font-size: 1.35rem; }
    #election-hero .election-hero__kpi-icon { font-size: 1.2rem; }
}

/* ---- CALENDAR — descripción editorial por etapa ----
   El calendario ahora viene de wwwroot/data/election-calendar.json con 10 etapas
   y un párrafo descriptivo por celda. Reduzco la rejilla de 4→2 cols en desktop
   para dar respiro de lectura; en tablet/mobile mantengo apilado.
   La descripción usa color muted y line-height generoso para legibilidad larga. */
@media (min-width: 768px) {
    .election-calendar__grid { grid-template-columns: repeat(2, 1fr); }
}
.election-calendar__cell {
    display: flex;
    flex-direction: column;
}
.election-calendar__desc {
    margin: 0.75rem 0 0;
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.86rem;
    line-height: 1.55;
    letter-spacing: 0.005em;
}
.election-calendar__cell--key .election-calendar__desc {
    color: rgba(255, 255, 255, 0.82);
}