/* =========================================================
   Cuenta regresiva a las elecciones — barra fina + bloque grande
   ========================================================= */

/* ---------- Barra fina (va en todas las páginas) ---------- */
.elec-barra{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,var(--naranja-osc),var(--naranja) 45%,var(--naranja-vivo));
  color:#fff; font-size:.86rem;
}
.elec-barra[hidden]{display:none}
.elec-barra__interior{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:42px; padding-block:7px; flex-wrap:wrap; position:relative; z-index:2;
}
.elec-barra__urna{display:inline-flex; align-items:center}
.elec-barra__titulo{font-family:var(--titulo); font-weight:700; letter-spacing:-.01em}
.elec-barra__reloj{
  font-variant-numeric:tabular-nums; font-weight:700;
  background:rgba(0,0,0,.22); padding:4px 12px; border-radius:100px; letter-spacing:.02em;
}
.elec-barra__cta{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px}
.elec-barra__cta:hover{color:#14100D}

/* Reflejo que cruza la barra */
.elec-barra__cinta{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  background-size:220% 100%;
  animation:elec-cinta 4.5s linear infinite;
}
@keyframes elec-cinta{from{background-position:160% 0} to{background-position:-60% 0}}

/* ---------- Bloque grande (home y página de elecciones) ---------- */
.elec{
  position:relative; overflow:hidden; color:#fff;
  border-radius:var(--radio);
  background:
    radial-gradient(700px 320px at 15% -20%, rgba(255,163,92,.5), transparent 60%),
    linear-gradient(135deg,#8E2D00,var(--naranja-osc) 40%,var(--naranja) 100%);
  box-shadow:var(--sombra-alta);
  padding:38px 28px;
}
.elec[hidden]{display:none}
.elec__brillo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  background-size:260% 100%;
  animation:elec-cinta 6s linear infinite;
}
.elec__interior{position:relative; z-index:1; text-align:center}

.elec__chip{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.24); padding:7px 15px; border-radius:100px; margin-bottom:16px;
}
.elec__punto{
  width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.75); animation:elec-latido 1.8s ease-out infinite;
}
@keyframes elec-latido{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

.elec__titulo{
  color:#fff; font-size:clamp(1.5rem,3.6vw,2.35rem); margin:0 0 6px;
}
.elec__fecha{
  color:rgba(255,255,255,.9); font-family:var(--titulo); font-weight:600;
  font-size:1.02rem; margin:0 0 26px; text-transform:capitalize;
}

/* Reloj */
.elec__reloj{display:flex; align-items:flex-start; justify-content:center; gap:6px; margin-bottom:24px}
.elec__reloj[hidden]{display:none}
.elec__caja{
  background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:14px 10px; min-width:88px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.elec__num{
  font-family:var(--titulo); font-weight:800; font-size:clamp(1.9rem,5vw,2.9rem);
  line-height:1; font-variant-numeric:tabular-nums; display:block;
}
.elec__num--late{animation:elec-late .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes elec-late{
  0%{transform:translateY(-42%) scale(.82); opacity:.25; filter:blur(1px)}
  60%{transform:translateY(3%) scale(1.04); opacity:1; filter:none}
  100%{transform:none}
}
.elec__lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.75)}
.elec__sep{
  font-family:var(--titulo); font-weight:800; font-size:clamp(1.4rem,3.6vw,2.1rem);
  line-height:1; padding-top:16px; color:rgba(255,255,255,.45);
  animation:elec-parpadeo 1s steps(1,end) infinite;
}
@keyframes elec-parpadeo{50%{opacity:.2}}

/* Días de votación */
.elec__dias{display:flex; justify-content:center; gap:10px; margin-bottom:26px}
.elec__dia{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:14px;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.24);
  transition:all var(--trans);
}
.elec__dia b{font-family:var(--titulo); font-size:1.25rem; line-height:1}
.elec__dia small{font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.75)}
.elec__dia--activo{
  background:#fff; color:var(--naranja-osc); border-color:#fff; transform:scale(1.12);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.elec__dia--activo small{color:var(--naranja)}

.elec__acciones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Estado "hoy se vota": todo late un poco más */
.elec--hoy{animation:elec-pulso 2.4s ease-in-out infinite}
@keyframes elec-pulso{
  50%{box-shadow:0 12px 50px rgba(242,92,5,.55)}
}
.elec--terminada{background:linear-gradient(135deg,#3A2A20,#241C16)}
.elec--terminada .elec__brillo{display:none}

@media (max-width:620px){
  .elec{padding:30px 18px}
  .elec__caja{min-width:0; flex:1 1 0; padding:12px 4px}
  .elec__sep{display:none}
  .elec__reloj{gap:8px}
  .elec-barra__interior{gap:8px; font-size:.8rem}
  .elec-barra__cta{width:100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .elec-barra__cinta,.elec__brillo,.elec__punto,.elec__sep,.elec--hoy{animation:none}
  .elec__num--late{animation:none}
}