/* ════════════════════════════════════════════════════════════════════════════
   cd-hero-v4.css — HERO TOP (propuesta v4 "orfebrería fina")
   Sustituye por completo al salón anterior. NO toca la lógica de datos:
   sigue pintando en #dash-top-streamers-banner / #dash-top-droppers y
   conserva #dash-countdown para el contador existente.
   ════════════════════════════════════════════════════════════════════════════ */
#dash-banner{
  --h-gold:#e8c25a; --h-gold-hi:#fff3d0;
  --h-vio:#9b86ff;  --h-vio-hi:#efeaff;
  --h-tx:#f4f2ee; --h-tx2:rgba(244,242,238,.55); --h-tx3:rgba(244,242,238,.32);
  --h-line:rgba(255,255,255,.07);
  margin:0 18px 14px;position:relative;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(760px 420px at 12% 34%,rgba(232,194,90,.17),transparent 62%),
    radial-gradient(760px 420px at 88% 34%,rgba(155,134,255,.19),transparent 62%),
    radial-gradient(340px 300px at 50% 46%,rgba(6,6,11,.92),transparent 74%),
    linear-gradient(180deg,#12111c,#0a0a12);
  border:1px solid var(--h-line);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.045);
  padding:clamp(22px,3vw,38px) clamp(10px,2vw,30px) clamp(24px,3vw,36px)}
/* hilo de luz bicolor superior */
#dash-banner::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent 4%,var(--h-gold) 30%,rgba(255,255,255,.55) 50%,var(--h-vio) 70%,transparent 96%);
  opacity:.5}

.hv4-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,2vw,28px);position:relative;z-index:1}
@media (max-width:900px){.hv4-grid{grid-template-columns:1fr;gap:30px}
  #dash-clock-col{order:-1}}

/* ── territorio de cada bando ── */
.hv4-side{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.2vw,28px);padding:20px clamp(6px,1.4vw,20px) 26px;border-radius:20px;
  background:radial-gradient(125% 96% at 50% 6%,color-mix(in srgb,var(--sc) 15%,transparent),transparent 60%),
             linear-gradient(180deg,color-mix(in srgb,var(--sc) 6%,transparent),transparent 55%);
  border:1px solid color-mix(in srgb,var(--sc) 14%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sc) 12%,transparent),
             0 24px 60px -34px color-mix(in srgb,var(--sc) 40%,transparent)}
.hv4-warm{--sc:var(--h-gold)} .hv4-cold{--sc:var(--h-vio)}
.hv4-side::after{content:'';position:absolute;left:12%;right:12%;bottom:8px;height:60px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--sc) 26%,transparent),transparent 72%);
  filter:blur(9px);opacity:.85}

.hv4-h{text-align:center;position:relative;z-index:1}
.hv4-h .k{font-size:9.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sc) 62%,var(--h-tx3))}
.hv4-h .t{margin-top:6px;font-size:clamp(17px,2vw,24px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.hv4-warm .hv4-h .t{color:var(--h-gold-hi)} .hv4-cold .hv4-h .t{color:var(--h-vio-hi)}
.hv4-h .rule{margin:11px auto 0;width:58px;height:1px;position:relative}
.hv4-warm .hv4-h .rule{background:linear-gradient(90deg,transparent,var(--h-gold),transparent)}
.hv4-cold .hv4-h .rule{background:linear-gradient(90deg,transparent,var(--h-vio),transparent)}
.hv4-h .rule::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;
  border-radius:50%;transform:translate(-50%,-50%) rotate(45deg)}
.hv4-warm .hv4-h .rule::after{background:var(--h-gold);box-shadow:0 0 9px var(--h-gold)}
.hv4-cold .hv4-h .rule::after{background:var(--h-vio);box-shadow:0 0 9px var(--h-vio)}

/* ── podio ── */
.hv4-podium{display:flex;align-items:flex-end;justify-content:center;
  /* El marco sobresale un 46% del avatar: el hueco entre columnas debe dejarle
     sitio o los marcos se pisan entre sí en pantallas pequeñas. */
  gap:clamp(10px,3vw,22px);perspective:1200px;min-height:clamp(118px,26vw,150px);
  padding:0 4px;flex-wrap:nowrap;max-width:100%}
/* Cada campeón ocupa EXACTAMENTE el ancho de su avatar. Antes no tenía ancho
   propio y lo definía el nombre (fijo en 118px), así que en móvil la columna
   era más ancha que el avatar y los nombres de al lado se montaban. */
.hv4-champ{display:flex;flex-direction:column;align-items:center;gap:10px;
  width:var(--sz);min-width:0;flex:0 0 auto;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hv4-warm .hv4-champ{--c:var(--h-gold);--c-hi:var(--h-gold-hi)}
.hv4-cold .hv4-champ{--c:var(--h-vio); --c-hi:var(--h-vio-hi)}
.hv4-p1{--sz:clamp(74px,20vw,140px)}
.hv4-p2{--sz:clamp(58px,15vw,102px);padding-bottom:16px}
.hv4-p3{--sz:clamp(52px,13vw,86px);padding-bottom:24px}

.hv4-frame{position:relative;width:var(--sz);height:var(--sz);display:grid;place-items:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hv4-av{position:relative;z-index:1;width:90%;height:90%;border-radius:50%;overflow:hidden;
  border:2px solid #0a0a12;background:#2a2342;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .5s}
/* BUG 23-jul-2026 (Max): las iniciales se veían ENCIMA de la foto en el podio.
   Causa: .hv4-ini es position:absolute y la <img> era estática; en el orden de
   pintado de CSS, un elemento posicionado se dibuja SIEMPRE por encima de los
   hermanos sin posicionar, aunque en el HTML vaya antes. La intención del
   código (comentada en cd-core-banner.js) era la contraria: la inicial DEBAJO,
   como respaldo si la foto no carga. Se posiciona la foto para que gane. */
.hv4-av img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.hv4-ini{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;
  color:rgba(255,255,255,.55);letter-spacing:.04em}
.hv4-sheen{position:absolute;z-index:2;width:90%;height:90%;border-radius:50%;
  overflow:hidden;pointer-events:none}
.hv4-sheen i{position:absolute;top:-60%;left:-130%;width:50%;height:220%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}
.hv4-halo{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .6s cubic-bezier(.2,.8,.2,1)}
.hv4-guard{position:absolute;inset:-11px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 13%,transparent);
  transition:.55s cubic-bezier(.2,.8,.2,1)}
.hv4-guard2{position:absolute;inset:-19px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--c) 8%,transparent);opacity:0;
  transition:.55s cubic-bezier(.2,.8,.2,1)}

.hv4-motes{position:absolute;inset:-16px;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}
.hv4-motes i{position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%;
  background:var(--c-hi);box-shadow:0 0 7px var(--c);animation:hv4Orbit 5s linear infinite}
.hv4-motes i:nth-child(2){animation-duration:6.4s;animation-delay:-1.3s;width:2px;height:2px}
.hv4-motes i:nth-child(3){animation-duration:5.4s;animation-delay:-2.7s}
.hv4-motes i:nth-child(4){animation-duration:7.2s;animation-delay:-3.9s;width:2px;height:2px}
.hv4-motes i:nth-child(5){animation-duration:8s;animation-delay:-5.1s;width:2px;height:2px}
@keyframes hv4Orbit{from{transform:rotate(0) translateX(calc(var(--sz)*.64)) rotate(0)}
                    to{transform:rotate(360deg) translateX(calc(var(--sz)*.64)) rotate(-360deg)}}

.hv4-n{max-width:100%;width:100%;font-size:clamp(10px,2.6vw,12px);font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:var(--h-tx);
  transition:letter-spacing .5s,color .4s}
.hv4-p1 .hv4-n{font-size:clamp(11px,3vw,14.5px)}
.hv4-v{max-width:100%;font-size:clamp(9px,2.2vw,10.5px);color:var(--h-tx3);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.04em;transition:color .4s}
.hv4-p1 .hv4-v{color:var(--h-tx2);font-size:clamp(9.5px,2.4vw,11.5px)}
.hv4-v b{color:var(--c-hi);font-weight:700}
.hv4-base{width:100%;height:2px;border-radius:2px;margin-top:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 50%,transparent),transparent);
  transition:.5s}
.hv4-p2 .hv4-base{opacity:.5} .hv4-p3 .hv4-base{opacity:.32}

/* ── el momento del cursor ── */
.hv4-champ:hover{transform:translateY(-9px)}
.hv4-champ:hover .hv4-frame{transform:rotateX(10deg) rotateY(-6deg) scale(1.05)}
.hv4-champ:hover .hv4-guard{inset:-16px;border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.hv4-champ:hover .hv4-guard2{inset:-26px;opacity:1;transform:rotate(30deg)}
.hv4-champ:hover .hv4-halo{box-shadow:0 0 32px 5px color-mix(in srgb,var(--c) 26%,transparent),
                                      0 0 84px 18px color-mix(in srgb,var(--c) 11%,transparent)}
.hv4-champ:hover .hv4-av{transform:scale(1.05);filter:brightness(1.08) contrast(1.03)}
.hv4-champ:hover .hv4-sheen i{animation:hv4Sweep .95s cubic-bezier(.3,0,.2,1)}
@keyframes hv4Sweep{from{left:-130%}to{left:165%}}
.hv4-champ:hover .hv4-motes{opacity:1}
.hv4-champ:hover .hv4-n{letter-spacing:.05em;color:var(--c-hi)}
.hv4-champ:hover .hv4-v{color:var(--h-tx2)}
.hv4-champ:hover .hv4-base{height:3px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  box-shadow:0 0 15px color-mix(in srgb,var(--c) 45%,transparent)}
/* el marco SVG también reacciona (hereda de cd-frames.css) */
.hv4-champ:hover .cd-frame .cf-trav{animation-duration:1.6s;opacity:.95}
.hv4-champ:hover .cd-frame .cf-cg{transform:translateY(-6px) scale(1.08)}
.hv4-champ:hover .cd-frame .cf-cl{transform:scale(1.12) rotate(-7deg)}
.hv4-champ:hover .cd-frame .cf-md{transform:scale(1.15) rotate(-14deg)}

/* ── instrumento central ── */
#dash-clock-col{display:flex;flex-direction:column;align-items:center;gap:13px;position:relative;z-index:1}
.hv4-k{font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--h-tx3)}
.hv4-dial{position:relative;width:clamp(112px,11vw,146px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#17161f,#0b0a12 74%);border:1px solid var(--h-line)}
.hv4-dial::before{content:'';position:absolute;inset:7px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.055)}
.hv4-arc{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  transform:rotate(-90deg)}
.hv4-arc circle{fill:none;stroke-width:2;stroke-linecap:round}
.hv4-arc .trk{stroke:rgba(255,255,255,.05)}
.hv4-arc .run{stroke:url(#hv4Bi)}
#dash-countdown{font:600 clamp(18px,2vw,24px)/1 Inter,system-ui,sans-serif;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;text-align:center;color:var(--h-tx)}
.hv4-units{display:block;text-align:center;font-size:8px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--h-tx3);margin-top:7px}
.hv4-sub{font-size:11px;color:var(--h-tx3);text-align:center}

@media (prefers-reduced-motion:reduce){
  .hv4-motes i{animation:none}
  .hv4-champ:hover .hv4-sheen i{animation:none}
}