/* Speedcubing Venezuela — identidad del logo: V tricolor sobre azul petróleo.
   Paleta oficial: petróleo #073B4C · ámbar #FFB703 · cian #06B6D4 · azul #1D7FBF · rojo #EF3E4A */
:root{
  --bg:#04222e; --bg2:#073B4C; --bg3:#0a4a5f; --line:#11566d; --line2:#1a688233;
  --tx:#ecf6f9; --tx2:#a8c9d4; --tx3:#6f96a3;
  --am:#FFB703; --ce:#06B6D4; --az:#1D7FBF; --ro:#EF3E4A; --ok:#2dd4a7;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--tx);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--ce);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--am);outline-offset:2px;border-radius:4px}

/* firma de marca: barra tricolor del logo */
.tri{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--am) 0 25%,var(--ce) 25% 50%,var(--az) 50% 75%,var(--ro) 75% 100%)}
.tri.thin{height:3px;width:64px;margin:6px 0 0}

/* cinta borrador */
.draft{background:var(--am);color:#31250a;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px 14px}

/* navegación */
header.top{position:sticky;top:0;z-index:50;background:rgba(4,34,46,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand img{height:38px;width:auto;display:block}
.brand small{display:block;font-size:10px;font-weight:600;color:var(--tx2);letter-spacing:.14em;text-transform:uppercase}
.brand:hover{text-decoration:none}
nav.links{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
nav.links a{color:var(--tx2);font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:8px}
nav.links a:hover{color:var(--tx);background:var(--bg3);text-decoration:none}
nav.links a.on{color:var(--tx);background:var(--bg3);box-shadow:inset 0 -2px 0 var(--am)}
.cta-timer{background:linear-gradient(135deg,var(--az),var(--ce));color:#fff !important;font-weight:700;box-shadow:0 2px 10px #06b6d433}
.cta-timer:hover{filter:brightness(1.1);background:linear-gradient(135deg,var(--az),var(--ce)) !important}

/* estructura */
main{max-width:1080px;margin:0 auto;padding:26px 18px 60px}
h1{font-size:clamp(26px,4.5vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:38px 0 4px}
h2+.tri.thin{margin-bottom:16px}
.lead{color:var(--tx2);font-size:16px;max-width:62ch;margin-top:10px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--am)}

/* héroe */
.hero{display:flex;align-items:center;gap:34px;padding:38px 0 8px;flex-wrap:wrap}
.hero img{width:190px;max-width:38vw;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.hero .txt{flex:1;min-width:260px}

/* métricas */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0 6px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat b{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--tx2);letter-spacing:.06em;text-transform:uppercase}
.stat.am b{color:var(--am)} .stat.ce b{color:var(--ce)} .stat.az b{color:#6db4e8} .stat.ro b{color:#ff7a86}

/* tarjetas y rejillas */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.card h3{font-size:15.5px;font-weight:700;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--tx2)}

/* tablas */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#0a445833}
td.n{font-variant-numeric:tabular-nums;font-weight:700}
td.t{font-variant-numeric:tabular-nums;font-weight:800;color:var(--tx)}
.pos{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:8px;background:var(--bg3);font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.pos.p1{background:var(--am);color:#31250a}
.pos.p2{background:#b9d4de;color:#123} .pos.p3{background:#c98d4b;color:#2b1a06}
.nr{display:inline-block;background:var(--am);color:#31250a;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:1px 6px;margin-left:7px;vertical-align:1px}
.chip{display:inline-block;background:var(--bg3);border:1px solid var(--line);color:var(--tx2);font-size:11.5px;font-weight:600;border-radius:99px;padding:2px 10px}

/* selector de eventos */
.evbar{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.ev{background:var(--bg2);border:1px solid var(--line);color:var(--tx2);font-size:13px;font-weight:700;border-radius:10px;padding:7px 13px;cursor:pointer;font-family:inherit}
.ev:hover{color:var(--tx);border-color:var(--ce)}
.ev.on{background:var(--bg3);color:var(--tx);border-color:var(--ce);box-shadow:inset 0 -2px 0 var(--ce)}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:auto}
.toggle button{background:var(--bg2);border:none;color:var(--tx2);font-weight:700;font-size:13px;padding:7px 16px;cursor:pointer;font-family:inherit}
.toggle button.on{background:var(--ce);color:#032a33}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
select{background:var(--bg2);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:7px 12px;font-size:13.5px;font-family:inherit}

/* notas y footer */
.note{font-size:12.5px;color:var(--tx3);margin-top:10px}
.callout{border-left:4px solid var(--ce);background:var(--bg2);border-radius:0 12px 12px 0;padding:14px 18px;margin:18px 0;font-size:13.5px;color:var(--tx2)}
.callout b{color:var(--tx)}
footer{border-top:1px solid var(--line);margin-top:30px}
.foot{max-width:1080px;margin:0 auto;padding:26px 18px;font-size:12px;color:var(--tx3);line-height:1.7}
.foot .tri{margin-bottom:18px}
.foot b{color:var(--tx2)}

@media (max-width:720px){
  .hero{gap:20px;padding-top:24px}
  nav.links a{padding:7px 8px;font-size:12.5px}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* selector de idioma */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-left:8px;align-self:center}
.lang button{background:transparent;border:none;color:var(--tx3);font-weight:800;font-size:11px;letter-spacing:.05em;padding:6px 9px;cursor:pointer;font-family:inherit}
.lang button:hover{color:var(--tx)}
.lang button.on{background:var(--bg3);color:var(--am)}

/* ===== WOW layer ===== */
.heroWrap{position:relative;overflow:hidden;border-radius:0 0 26px 26px;margin:0 -18px;padding:0 18px;background:radial-gradient(1000px 420px at 70% -10%,#0a4a5f66,transparent),radial-gradient(700px 300px at 10% 110%,#1d7fbf22,transparent)}
.heroWrap canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.heroWrap .hero{position:relative;z-index:1}
.heroCta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:800;font-size:14px;border-radius:12px;padding:11px 20px;border:1px solid var(--line)}
.btn.pri{background:linear-gradient(135deg,var(--am),#ffcf57);color:#31250a;border:none;box-shadow:0 4px 18px #ffb70344}
.btn.pri:hover{filter:brightness(1.06);text-decoration:none}
.btn.sec{color:var(--tx);background:#0a4a5f55}
.btn.sec:hover{background:var(--bg3);text-decoration:none}

/* contadores */
.stat b{background:linear-gradient(135deg,var(--tx) 30%,var(--tx2));-webkit-background-clip:text;background-clip:text}
.stat.am b{background:linear-gradient(135deg,var(--am),#ffd97a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat.ce b{background:linear-gradient(135deg,var(--ce),#7ee8f5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat.az b{background:linear-gradient(135deg,#4b9de0,#9fd0f5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat.ro b{background:linear-gradient(135deg,#ff6b78,#ffb3ba);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ticker de récords */
.ticker{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--bg2);margin:22px 0;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.tickTrack{display:flex;gap:0;width:max-content;animation:tick 46s linear infinite;padding:9px 0}
.ticker:hover .tickTrack{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:8px;padding:0 22px;border-right:1px solid var(--line2);font-size:13px;color:var(--tx2);white-space:nowrap}
.tick b{color:var(--tx);font-variant-numeric:tabular-nums}
.tick .ev{border:none;background:var(--bg3);color:var(--ce);padding:2px 8px;border-radius:6px;font-size:11px;cursor:default}
@media (prefers-reduced-motion:reduce){.tickTrack{animation:none;flex-wrap:wrap;width:auto}}

/* gráficos */
.chart{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 16px 8px;margin:14px 0;overflow-x:auto}
.chart svg{display:block;min-width:520px;width:100%;height:auto}
.chart .cap{font-size:12px;color:var(--tx3);padding:6px 4px 8px}
.legend2{display:flex;gap:16px;font-size:12px;color:var(--tx2);padding:2px 4px 8px;flex-wrap:wrap}
.legend2 i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* medallero y podio */
.medalT td:first-child{width:34px}
.gold{color:var(--am);font-weight:800}.silver{color:#c9dde6;font-weight:800}.bronze{color:#d29558;font-weight:800}
.podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}
.podium .p{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.podium .p.first{border-color:var(--am);box-shadow:0 0 24px #ffb70322}
.podium .medal{font-size:26px}
.podium b{display:block;margin:6px 0 2px}
.podium .t{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--am)}

/* panel EC */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:20px 0}
.kpi{background:linear-gradient(160deg,var(--bg2),#0a4a5f44);border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--am),var(--ce),var(--az),var(--ro))}
.kpi b{display:block;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi span{font-size:11px;color:var(--tx2);letter-spacing:.08em;text-transform:uppercase}
.ok-badge{display:inline-block;background:#0d3f35;color:var(--ok);border:1px solid #17564a;font-size:11px;font-weight:800;border-radius:99px;padding:3px 12px;letter-spacing:.06em}
.lock{opacity:.75}
.lock h3::after{content:" 🔒";font-size:13px}