@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Outfit:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --lima: #B6E51D;
  --lima-suave: #D3F36A;
  --lima-oscuro: #7FA30C;
  --azul-950: #071030;
  --azul-900: #0A1740;
  --azul-800: #0D1E52;
  --azul-700: #12266A;
  --azul-600: #1B3490;
  --azul: #3D5AFE;
  --azul-claro: #8FA5FF;
  --panel: #0E2057;
  --panel-2: #132868;
  --borde: #24397F;
  --borde-lima: rgba(182,229,29,.45);
  --texto: #F0F4FF;
  --muted: #9FAEDC;
  --oro: #FFD24A;
  --plata: #C7D3E8;
  --bronce: #E09B5C;
  --rojo: #FF5A6B;
  --tx-sec: #0A1400;
  --fondo: #0A1740;
  --f-body: 'Outfit', -apple-system, sans-serif;
  --f-disp: 'Rajdhani', 'Outfit', sans-serif;
}

html { background: var(--azul-900); }
body {
  background:
    radial-gradient(1100px 600px at 90% -5%, rgba(61,90,254,.35), transparent 55%),
    radial-gradient(900px 500px at -5% 25%, rgba(182,229,29,.08), transparent 55%),
    radial-gradient(1000px 700px at 50% 115%, rgba(27,52,144,.6), transparent 60%),
    linear-gradient(170deg, var(--azul-900) 0%, var(--azul-800) 45%, var(--azul-950) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100vh, 100% 100vh, 100% 100vh, 100% 100%;
  color: var(--texto);
  font-family: var(--f-body);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.full { width: 100vw; margin-left: calc(50% - 50vw); }
a { color: var(--lima); text-decoration: none; transition: color .15s; }
a:hover { color: var(--lima-suave); }
svg.ico { width: 18px; height: 18px; vertical-align: -3px; }

/* ===== Header ===== */
.topbar {
  background: rgba(7,16,48,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  padding: 14px 0;
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-disp); font-size: 27px; font-weight: 700; letter-spacing: .04em; color: var(--texto); text-transform: uppercase; }
.logo:hover { color: var(--texto); }
.logo .mark { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(182,229,29,.55)); }
.logo b { color: var(--lima); font-weight: 700; }
.logo small { font-size: 12px; color: var(--azul-claro); border: 1px solid var(--azul); border-radius: 4px; padding: 1px 7px; letter-spacing: .12em; }
.topbar nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted); font-family: var(--f-disp); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .08em; padding: 7px 13px;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--lima); border-bottom-color: var(--lima); }
.btn-nav {
  background: var(--lima); color: var(--tx-sec) !important; font-weight: 700 !important;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  padding: 9px 24px !important; border-bottom: 0 !important;
}
.btn-nav:hover { background: var(--lima-suave); }

main { min-height: 62vh; padding: 34px 0 70px; }
main.interior { padding-top: 34px; }

/* ===== Tipografía ===== */
h1, h2, h3 { font-family: var(--f-disp); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: 36px; font-weight: 700; margin-bottom: 14px; }
h2 { font-size: 26px; font-weight: 700; margin: 40px 0 20px; }
p { margin-bottom: 10px; }
.muted { color: var(--muted); font-size: 14px; }
.kicker {
  font-family: var(--f-disp); color: var(--lima); font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .38em; margin-bottom: 6px;
}
.sec-head { text-align: center; margin: 46px 0 26px; }
.sec-head h2 { margin: 0; font-size: 32px; }
.sec-head .kicker::before, .sec-head .kicker::after { content: "—"; color: var(--lima); margin: 0 10px; opacity: .6; }

/* ===== Hero / Portada ===== */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(7,16,48,.94) 22%, rgba(10,23,64,.6) 55%, rgba(10,23,64,.2) 100%),
    url('/assets/img/hero.jpg') center 30% / cover no-repeat,
    var(--azul-800);
  border-bottom: 0;
  padding: 80px 0 110px;
  margin-top: -34px;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 52px;
  background: var(--lima);
  clip-path: polygon(0 100%, 0 55%, 100% 0, 100% 100%);
  z-index: 3;
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 58px;
  background: var(--lima-oscuro); opacity: .85;
  clip-path: polygon(0 100%, 0 60%, 100% 0, 100% 100%);
  z-index: 2;
}
.hero .wrap { position: relative; z-index: 4; display: flex; align-items: center; gap: 30px; }
.hero-texto { flex: 1.2; }
.hero h1 { font-size: 54px; line-height: 1.02; margin: 10px 0 14px; }
.hero h1 .glow { color: var(--lima); text-shadow: 0 0 30px rgba(182,229,29,.55); }
.hero p.sub { color: var(--muted); max-width: 540px; font-size: 17.5px; margin-bottom: 24px; }
.hero-arte { flex: 1; max-width: 400px; }
.hero-arte svg { width: 100%; height: auto; overflow: visible; }
.flota-a { animation: flotar 4.5s ease-in-out infinite; }
.flota-b { animation: flotar 5.8s ease-in-out .8s infinite; }
.flota-c { animation: flotar 5s ease-in-out 1.6s infinite; }
@keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 820px) {
  .hero h1 { font-size: 38px; }
  .hero-arte { display: none; }
  .hero { padding: 44px 0 84px; }
}

/* ===== Pasos: Participa · Compite · Gana ===== */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 10px; }
.paso-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform .15s, border-color .15s;
}
.paso-card:hover { transform: translateY(-4px); border-color: var(--borde-lima); }
.paso-img { position: relative; height: 185px; background-size: cover; background-position: center; }
.paso-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,16,48,.85)); }
.paso-num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--lima); color: var(--tx-sec);
  font-family: var(--f-disp); font-size: 21px; font-weight: 700;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.paso-body { padding: 16px 20px 20px; }
.paso-body h3 { font-size: 20px; color: var(--lima); margin-bottom: 4px; }
.paso-body p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ===== Banda próximo evento (contador ancho completo) ===== */
.prox-banda {
  background: linear-gradient(90deg, rgba(182,229,29,.1), rgba(61,90,254,.14) 60%), var(--azul-950);
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  padding: 26px 0 30px; text-align: center; margin-bottom: 10px;
}
.prox-banda .titulo { font-family: var(--f-disp); font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 14px; }
.prox-banda .titulo a { color: var(--texto); }
.prox-banda .titulo a:hover { color: var(--lima); }

/* ===== Splash de entrada (cápsulas foto + panel verde) ===== */
.sp-fila {
  position: relative; display: flex; align-items: stretch;
  min-height: 148px; margin-bottom: 18px;
  border-radius: 28px; overflow: hidden;
  background: var(--panel); text-align: left;
  box-shadow: 0 14px 36px rgba(0,0,0,.3);
  animation: filaSube .55s ease-out backwards;
  transition: transform .2s, box-shadow .2s;
}
.sp-fila:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 22px 48px rgba(0,0,0,.4); }
.splash-in .sp-fila:nth-of-type(2) { animation-delay: .1s; }
.splash-in .sp-fila:nth-of-type(3) { animation-delay: .2s; }
.splash-in .sp-fila:nth-of-type(4) { animation-delay: .3s; }
.splash-in .sp-fila:nth-of-type(5) { animation-delay: .4s; }
.sp-lado {
  position: relative; z-index: 2; flex: 0 0 176px;
  background: var(--lima);
  padding: 18px 14px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 10px;
}
.sp-lado::after {
  content: ""; position: absolute; top: -12%; right: -36px;
  width: 72px; height: 124%; background: var(--lima); border-radius: 50%;
}
.sp-ico {
  position: relative; z-index: 2;
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-950); color: var(--lima);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.l-prox .sp-ico { color: var(--oro); }
.sp-chips { position: relative; z-index: 2; display: flex; gap: 6px; margin: 0; }
.sp-fila .sp-chips span {
  background: var(--texto); color: var(--azul-950); border: 0; border-radius: 9px;
  min-width: 42px; padding: 6px 4px 3px;
  font-family: var(--f-disp); font-weight: 700; font-size: 17px; text-align: center;
}
.sp-fila .sp-chips span i { color: var(--azul-950); opacity: .65; font-size: 8.5px; letter-spacing: .16em; }
.sp-fila .sp-chips span:nth-child(4) { display: none; }
.sp-foto { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; }
.sp-foto-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: kenburns 16s ease-in-out infinite alternate;
}
.sp-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.12) 65%);
}
.sp-titulo {
  position: relative; z-index: 2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0 24px 0 58px;
  color: var(--lima);
  font-family: var(--f-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4.4vw, 46px); line-height: 1.04; letter-spacing: .01em;
  text-shadow: 0 3px 16px rgba(0,0,0,.65);
}
.sp-titulo small { display: block; font-size: .45em; letter-spacing: .08em; margin-top: 5px; }
#splash .sp-btn { border-radius: 40px; clip-path: none; padding: 15px 38px; font-size: 17px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translateX(-2%); } }
@media (min-width: 1100px) {
  #splash .splash-in { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; align-items: stretch; }
  .splash-logo { grid-column: 1 / -1; margin-bottom: 4px; }
  #splash .sp-btn { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }
  .sp-fila { margin-bottom: 0; min-height: 148px; }
  .sp-fila:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
  .sp-lado { flex: 0 0 130px; padding: 13px 11px; }
  .sp-lado::after { right: -28px; width: 56px; }
  .sp-ico { width: 44px; height: 44px; border-radius: 12px; }
  .sp-fila .sp-chips { gap: 5px; }
  .sp-fila .sp-chips span { min-width: 34px; font-size: 14px; padding: 4px 3px 2px; }
  .sp-titulo { font-size: clamp(19px, 1.8vw, 27px); padding: 0 16px 0 42px; }
  .sp-fila:nth-of-type(odd):last-of-type .sp-titulo { font-size: clamp(26px, 2.8vw, 40px); }
}
@media (max-width: 620px) {
  .sp-fila { min-height: 120px; border-radius: 22px; margin-bottom: 14px; }
  .sp-lado { flex: 0 0 122px; padding: 12px 10px; }
  .sp-lado::after { right: -26px; width: 52px; }
  .sp-ico { width: 42px; height: 42px; border-radius: 12px; }
  .sp-chips { gap: 4px; }
  .sp-fila .sp-chips span { min-width: 31px; font-size: 13px; border-radius: 7px; padding: 4px 3px 2px; }
  .sp-titulo { padding: 0 12px 0 38px; font-size: clamp(17px, 5.4vw, 24px); }
}

#splash {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(0,0,0,.25), transparent 65%),
    var(--fondo);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  animation: splashIn .4s ease-out;
  transition: opacity .35s;
}
#splash.splash-fuera { opacity: 0; pointer-events: none; }
@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }
.splash-in { width: 100%; max-width: 560px; text-align: center; }
.splash-in .launcher { margin-bottom: 22px; }
.splash-in .lanz-row { animation: filaSube .5s ease-out backwards; }
.splash-in .lanz-row:nth-child(2) { animation-delay: .08s; }
.splash-in .lanz-row:nth-child(3) { animation-delay: .16s; }
.splash-in .lanz-row:nth-child(4) { animation-delay: .24s; }
.splash-in .lanz-row:nth-child(5) { animation-delay: .32s; }
@keyframes filaSube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.splash-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-disp); font-size: 30px; font-weight: 700; letter-spacing: .05em;
  color: var(--texto); text-transform: uppercase; margin-bottom: 22px;
}
.splash-logo b { color: var(--lima); }
.splash-logo .mark { width: 44px; height: 44px; filter: drop-shadow(0 0 12px rgba(182,229,29,.55)); }

/* ===== Lanzador de eventos (estilo app) ===== */
.launcher { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; text-align: left; }
.lanz-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 92px; padding: 12px 18px;
  background-size: cover; background-position: center;
  border: 1px solid var(--borde); border-radius: 14px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  overflow: hidden; color: var(--texto);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lanz-row::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,16,48,.92) 15%, rgba(7,16,48,.65) 55%, rgba(7,16,48,.35) 100%);
}
.lanz-row > * { position: relative; z-index: 2; }
.lanz-row:hover { transform: translateX(6px); border-color: var(--borde-lima); box-shadow: 0 8px 30px rgba(4,10,32,.5); color: var(--texto); }
.lanz-icono {
  flex: 0 0 auto; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(182,229,29,.15); color: var(--lima);
  border: 1px solid var(--borde-lima); border-radius: 12px;
}
.lanz-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lanz-info b { font-family: var(--f-disp); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }
.lanz-info small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.lanz-der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lanz-etq { font-family: var(--f-disp); font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .2em; }
.lanz-go {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--azul-claro); border-radius: 50%; color: var(--azul-claro);
  transition: background .15s, color .15s, border-color .15s;
}
.lanz-row:hover .lanz-go { background: var(--lima); border-color: var(--lima); color: var(--tx-sec); }
.lanz-row.l-prox .lanz-icono { background: rgba(255,210,74,.15); color: var(--oro); border-color: rgba(255,210,74,.4); }
@media (max-width: 620px) {
  .lanz-row {
    display: grid; grid-template-columns: 42px 1fr 32px; column-gap: 10px;
    grid-template-areas: "ico info go" "ico der go";
    padding: 12px; min-height: 84px; align-items: center;
  }
  .lanz-icono { grid-area: ico; width: 42px; height: 42px; }
  .lanz-info { grid-area: info; }
  .lanz-info b { font-size: 15.5px; }
  .lanz-info small { font-size: 11.5px; }
  .lanz-der { grid-area: der; flex-direction: row; align-items: center; gap: 8px; margin-top: 6px; }
  .lanz-der .cd { margin: 0; }
  .lanz-der .cd.cd-mini span { min-width: 30px; font-size: 12.5px; }
  .lanz-go { grid-area: go; width: 32px; height: 32px; }
}

/* ===== Countdown ===== */
.cd { display: inline-flex; gap: 8px; margin: 6px 0; }
.cd span {
  min-width: 52px; text-align: center;
  background: rgba(7,16,48,.8); border: 1px solid var(--borde);
  border-radius: 8px; padding: 7px 8px 4px;
  font-family: var(--f-disp); font-weight: 700; font-size: 20px; color: var(--lima);
}
.cd span i { display: block; font-style: normal; font-size: 9.5px; color: var(--muted); letter-spacing: .2em; font-weight: 600; }
.cd.cd-azul span { color: var(--azul-claro); }
.cd.cd-xl { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cd.cd-xl span { min-width: 96px; font-size: 42px; padding: 12px 10px 8px; border-radius: 12px; border-color: var(--borde); box-shadow: inset 0 0 24px rgba(61,90,254,.15); }
.cd.cd-xl span i { font-size: 11.5px; }
.cd.cd-mini span { min-width: 38px; font-size: 15px; padding: 4px 5px 2px; border-radius: 6px; }
.cd.cd-mini span i { font-size: 8px; }

/* ===== Tarjetas de evento (estilo torneo) ===== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tarjeta-ev {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tarjeta-ev:hover { transform: translateY(-4px); border-color: var(--borde-lima); box-shadow: 0 14px 40px rgba(4,10,32,.5); }
.tv-img {
  display: block; height: 158px; position: relative;
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--borde);
}
.tv-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7,16,48,.72));
  transition: background .15s;
}
.tarjeta-ev:hover .tv-img::after { background: linear-gradient(180deg, transparent 50%, rgba(7,16,48,.55)); }

.ev-banner {
  position: relative;
  background-size: cover; background-position: center;
  border: 1px solid var(--borde);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  padding: 64px 28px 24px; margin-bottom: 22px;
  overflow: hidden;
}
.ev-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,16,48,.25), rgba(7,16,48,.88) 85%);
}
.ev-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--lima), transparent 70%);
}
.ev-banner-in { position: relative; z-index: 2; }
.ev-banner h1 { margin-bottom: 8px; text-shadow: 0 2px 18px rgba(4,10,32,.8); }

.tv-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 0 14px 0 0; border-bottom: 1px solid var(--borde);
  background: rgba(7,16,48,.45);
}
.ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lima); color: var(--tx-sec);
  font-family: var(--f-disp); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 22px 9px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.ribbon.r-oro { background: var(--oro); }
.ribbon.r-prox { position: relative; justify-content: center; background: var(--azul-950, #0A1740); color: #fff; }
.ribbon.r-prox .pw-espacio { visibility: hidden; }
.ribbon.r-prox .pw {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; letter-spacing: .34em;
  transition: opacity .8s ease, letter-spacing .8s ease;
}
.ribbon.r-prox .pw.activa { opacity: 1; letter-spacing: .06em; }
.tv-body { padding: 20px 20px 22px; text-align: center; }
.tv-kicker { font-family: var(--f-disp); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; margin-bottom: 2px; }
.tv-body h3 { font-size: 21px; margin-bottom: 10px; }
.tv-body h3 a { color: var(--texto); }
.tv-body h3 a:hover { color: var(--lima); }
.premio-box {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.45); border-radius: 8px;
  color: var(--oro); font-weight: 700; font-size: 17px;
  font-family: var(--f-disp); text-transform: uppercase; letter-spacing: .04em;
  padding: 12px; margin: 12px 0 6px;
  box-shadow: 0 0 22px rgba(255,210,74,.12);
}
.entrada-mini { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.entrada-mini.e-gratis { color: var(--lima); }
.premio-hero {
  font-family: var(--f-disp); font-size: 26px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--oro); text-shadow: 0 0 26px rgba(255,210,74,.55);
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px;
}
.tv-body .cd { margin: 4px 0 2px; }
.tv-pie { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; }
.tv-pie form { display: inline; margin: 0; }

/* ===== Filas anchas (en juego / finalizados) ===== */
.fila-ev {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--panel-2), var(--panel) 70%);
  border: 1px solid var(--borde);
  border-radius: 14px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  padding: 18px 24px; margin-bottom: 14px;
  transition: border-color .15s, transform .15s;
}
.fila-ev:hover { border-color: var(--borde-lima); transform: translateX(4px); }
.fila-ev .nombre { flex: 2; min-width: 200px; }
.fila-ev .nombre h3 { font-size: 19px; margin-bottom: 2px; }
.fila-ev .nombre h3 a { color: var(--texto); }
.fila-ev .nombre h3 a:hover { color: var(--lima); }
.fila-ev .col { flex: 1; min-width: 120px; }
.fila-ev .col .etq { display: block; font-family: var(--f-disp); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .22em; }
.fila-ev .col .val { font-family: var(--f-disp); font-size: 17px; font-weight: 700; color: var(--oro); }
.fila-ev .col .val.v-lima { color: var(--lima); }

/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-disp); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; padding: 4px 13px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.b-abierto { background: rgba(182,229,29,.16); color: var(--lima); }
.b-prox { background: rgba(255,210,74,.15); color: var(--oro); }
.b-juego { background: rgba(61,90,254,.28); color: var(--azul-claro); }
.b-fin { background: rgba(159,174,220,.14); color: var(--muted); }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lima); color: var(--tx-sec); border: 0;
  font-family: var(--f-disp); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 28px; cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--lima-suave); box-shadow: 0 0 26px rgba(182,229,29,.4); color: var(--tx-sec); }
.btn-sec { background: var(--azul-700); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--azul); }
.btn-sec:hover { background: var(--azul-600); box-shadow: inset 0 0 0 1.5px var(--azul-claro), 0 0 18px rgba(61,90,254,.35); color: #fff; }
.btn-peligro { background: transparent; color: var(--rojo); box-shadow: inset 0 0 0 1.5px var(--rojo); }
.btn-peligro:hover { background: rgba(255,90,107,.12); box-shadow: inset 0 0 0 1.5px var(--rojo); color: var(--rojo); }
.btn-mini { padding: 7px 18px; font-size: 13.5px; }

/* ===== Tarjeta genérica (interior + admin) ===== */
.tarjeta {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 22px; margin-bottom: 16px;
}
.tarjeta::before { content: ""; position: absolute; top: 0; left: 0; width: 44%; height: 3px; background: linear-gradient(90deg, var(--lima), transparent); }
.tarjeta:hover { border-color: var(--borde-lima); }
.tarjeta h3 { font-size: 19px; margin-bottom: 8px; }
.tarjeta h3 a { color: var(--texto); }
.tarjeta h3 a:hover { color: var(--lima); }

/* ===== Formularios ===== */
form .campo { margin-bottom: 15px; }
label { display: block; font-family: var(--f-disp); font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
input, select, textarea {
  width: 100%; background: var(--azul-950); border: 1px solid var(--borde);
  border-radius: 8px; padding: 11px 13px; color: var(--texto);
  font-size: 15px; font-family: var(--f-body); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lima); box-shadow: 0 0 0 3px rgba(182,229,29,.15); }
.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 150px; }

/* ===== Tablas ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--borde); font-size: 15px; }
th { font-family: var(--f-disp); color: var(--lima); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(61,90,254,.1); }
tr.yo { background: rgba(182,229,29,.09); box-shadow: inset 3px 0 0 var(--lima); }
.pos { font-family: var(--f-disp); font-weight: 700; font-size: 17px; color: var(--muted); }
.p1 .pos { color: var(--oro); text-shadow: 0 0 12px rgba(255,210,74,.6); }
.p2 .pos { color: var(--plata); }
.p3 .pos { color: var(--bronce); }

/* ===== Stats ===== */
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.stat {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  padding: 18px 24px; flex: 1; min-width: 150px; text-align: center;
}
.stat b { display: block; font-family: var(--f-disp); font-size: 38px; font-weight: 700; color: var(--lima); text-shadow: 0 0 20px rgba(182,229,29,.4); line-height: 1.1; }
.stat span { font-family: var(--f-disp); font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; }

/* ===== Opciones de respuesta con foto ===== */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 8px; }
.op-card {
  position: relative; display: block; cursor: pointer;
  background: var(--azul-950); border: 2px solid var(--borde); border-radius: 12px;
  padding: 10px; text-align: center;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.op-card:hover { border-color: var(--azul-claro); transform: translateY(-2px); }
.op-card input { position: absolute; opacity: 0; pointer-events: none; }
.op-foto {
  display: block; width: 100%; aspect-ratio: 1;
  background-size: cover; background-position: center;
  border-radius: 8px; margin-bottom: 8px; background-color: var(--panel-2);
}
.op-nombre { display: block; font-family: var(--f-disp); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--texto); }
.op-check {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  background: var(--lima); color: var(--tx-sec); border-radius: 50%;
  box-shadow: 0 0 12px rgba(182,229,29,.6);
}
.op-card:has(input:checked) { border-color: var(--lima); box-shadow: 0 0 18px rgba(182,229,29,.25); background: rgba(182,229,29,.06); }
.op-card:has(input:checked) .op-check { display: flex; }
.op-card:has(input:checked) .op-nombre { color: var(--lima); }

/* ===== Podio y feed en vivo ===== */
.podio {
  background: linear-gradient(180deg, rgba(255,210,74,.08), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255,210,74,.4);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  padding: 24px; margin-bottom: 18px;
}
.podio-fila { display: flex; justify-content: center; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.podio-item { text-align: center; }
.podio-medalla { font-family: var(--f-disp); font-size: 22px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.podio-item.p-1 .podio-medalla { font-size: 34px; }
.podio-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--plata); }
.podio-foto-vacia { display: inline-block; background: var(--azul-950); border: 3px solid var(--borde); }
.podio-item.p-1 .podio-foto { width: 92px; height: 92px; border-color: var(--oro); box-shadow: 0 0 28px rgba(255,210,74,.45); }
.podio-item.p-3 .podio-foto { border-color: var(--bronce); }
.podio-nombre { font-family: var(--f-disp); font-weight: 700; font-size: 16px; margin-top: 8px; }
.podio-item.p-1 .podio-nombre { font-size: 20px; color: var(--oro); }
.podio-pts { color: var(--lima); font-family: var(--f-disp); font-weight: 700; }
.podio-premio { text-align: center; color: var(--oro); font-weight: 600; margin-top: 14px; }

/* ===== Perfil: pestañas + slider horizontal ===== */
.perfil-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 6px; }
.pt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
  padding: 10px 20px; border-radius: 40px; background: var(--panel-2); border: 1px solid var(--borde);
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pt-btn:hover { border-color: var(--borde-lima); color: var(--texto); }
.pt-btn.activo { background: var(--lima); color: var(--tx-sec); border-color: var(--lima); }
.pt-num { background: rgba(0,0,0,.18); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.pt-btn:not(.activo) .pt-num { background: var(--azul-950); color: var(--texto); }
.perfil-panel { display: none; animation: v3up .35s ease-out; }
.perfil-panel.activo { display: block; }
.slider-h {
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 2px 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.slider-h > .tarjeta-ev { flex: 0 0 300px; scroll-snap-align: start; margin: 0; }
.slider-h::-webkit-scrollbar { height: 8px; }
.slider-h::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 20px; }
@media (max-width: 600px) { .slider-h > .tarjeta-ev { flex-basis: 82vw; } }

/* ===== Dashboard admin: bienvenida limpia ===== */
.dash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--panel-2), var(--panel)); border: 1px solid var(--borde);
  border-radius: 22px; padding: 28px 30px; margin-bottom: 22px; overflow: hidden;
}
.dash-hero-txt { flex: 1; min-width: 260px; }
.dash-hero-txt h1 { margin: 4px 0 8px; }
.dash-hero-txt p { max-width: 480px; }
.dash-hero-art { flex: 0 0 auto; width: 200px; }
.dash-hero-art svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 640px) { .dash-hero-art { display: none; } }

.dash-alerta {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  background: rgba(255,90,107,.1); border: 1px solid rgba(255,90,107,.4); border-radius: 16px; padding: 16px 20px;
  color: var(--texto); transition: border-color .15s, transform .15s;
}
.dash-alerta:hover { border-color: var(--rojo); transform: translateX(3px); color: var(--texto); }
.dash-alerta .da-ico { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,90,107,.16); color: var(--rojo); }
.dash-alerta b { display: block; font-family: var(--f-disp); font-size: 17px; text-transform: uppercase; }
.dash-alerta small { color: var(--muted); font-size: 13.5px; }
.dash-alerta .da-flecha { margin-left: auto; color: var(--rojo); }

.dash-hito {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px 24px;
}
.dash-hito h3 a { color: var(--texto); }
.dash-hito h3 a:hover { color: var(--lima); }

/* ===== Dashboard admin: tiles de acceso (legado, no usado) ===== */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.admin-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px; color: var(--texto);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.admin-tile:hover { transform: translateY(-3px); border-color: var(--borde-lima); box-shadow: 0 12px 30px rgba(0,0,0,.3); color: var(--texto); }
.admin-tile .at-ico { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(182,229,29,.12); color: var(--lima); margin-bottom: 8px; }
.admin-tile b { font-family: var(--f-disp); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.admin-tile small { color: var(--muted); font-size: 13px; }
.admin-tile.destacado { border-color: var(--borde-lima); background: linear-gradient(180deg, rgba(182,229,29,.1), var(--panel)); }
.at-badge { position: absolute; top: 16px; right: 16px; background: var(--rojo); color: #fff; font-family: var(--f-disp); font-weight: 700; font-size: 13px; min-width: 24px; height: 24px; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 7px; }

/* ===== Responder (modal + área de trabajo) ===== */
.embed .topbar, .embed .pie { display: none; }
.embed main { padding: 20px 0 28px; }
.resp-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.resp-work { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.resp-lista { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.resp-lista::-webkit-scrollbar { width: 7px; }
.resp-lista::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 20px; }
.resp-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--borde); color: var(--muted); transition: background .12s, color .12s, border-color .12s; }
.resp-item:hover { border-color: var(--borde-lima); color: var(--texto); }
.resp-item.activa { background: var(--lima); color: var(--tx-sec); border-color: var(--lima); }
.resp-item.hecha:not(.activa) { border-color: rgba(182,229,29,.35); }
.resp-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--azul-950); font-family: var(--f-disp); font-weight: 700; font-size: 13px; }
.resp-item.activa .resp-n { background: rgba(0,0,0,.2); }
.resp-item.hecha .resp-n { color: var(--lima); }
.resp-txt { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resp-centro { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--borde); border-radius: 18px; padding: 24px; min-height: 300px; }
.resp-final { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--borde); text-align: center; }
@media (max-width: 760px) {
  .resp-work { grid-template-columns: 1fr; }
  .resp-lista { flex-direction: row; overflow-x: auto; max-height: none; }
  .resp-lista .resp-item { flex: 0 0 200px; }
}

/* Modal de respuestas (sobre la lista de eventos) */
.resp-modal { position: fixed; inset: 0; z-index: 300; background: rgba(4,10,32,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: detIn .2s ease-out; }
.resp-modal-box { position: relative; width: 100%; max-width: 1040px; height: 88vh; background: var(--panel); border: 1px solid var(--borde-lima); border-radius: 22px; overflow: hidden; animation: detBox .25s ease-out; }
.resp-modal-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.resp-modal-box .det-cerrar { z-index: 3; }
.resp-modal-box.reglas-box { max-width: 680px; height: 86vh; }
.reglas-scroll { height: 100%; overflow-y: auto; padding: 34px 30px 30px; }
.reglas h3 { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; }
.reglas ul { margin: 0 0 6px; padding-left: 20px; }
.reglas li { margin-bottom: 7px; line-height: 1.5; }
.reglas p { line-height: 1.55; }
.reglas-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; position: sticky; bottom: -30px; background: var(--panel); padding: 16px 0 6px; }

.res-ok { display: flex; align-items: center; gap: 8px; color: var(--lima); font-weight: 600; flex-wrap: wrap; }
.res-ops { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.res-op-form { margin: 0; }
.res-op {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  background: var(--azul-950); border: 2px solid var(--borde); border-radius: 14px; padding: 10px 12px;
  color: var(--texto); font-family: var(--f-disp); font-weight: 600; font-size: 14px; min-width: 96px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.res-op:hover { border-color: var(--lima); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.3); color: var(--lima); }
.res-op-foto { width: 70px; height: 70px; border-radius: 10px; background-size: cover; background-position: center; }
@media (max-width: 900px) { .resolver-grid { grid-template-columns: 1fr; } .resolver-live { position: static; } }

/* ===== Editor de evento 3 columnas ===== */
.editor3 { display: grid; grid-template-columns: 200px 1fr 300px; gap: 18px; align-items: start; }
.ed-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 6px; }
.ed-nav button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px;
  padding: 12px 15px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--borde);
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ed-nav button:hover { border-color: var(--borde-lima); color: var(--texto); }
.ed-nav button.activo { background: var(--lima); color: var(--tx-sec); border-color: var(--lima); }
.ed-work { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--borde); border-radius: 18px; padding: 24px; min-height: 380px; }
.ed-sec { display: none; animation: v3up .3s ease-out; }
.ed-sec.activo { display: block; }
.ed-sec-tit { font-size: 18px; margin-bottom: 14px; }
.ed-guardar { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borde); }
.ed-preview { position: sticky; top: 78px; }
.ed-preview #ed-card .tarjeta-ev { margin: 0; }
.ed-preview .tv-img { height: 130px; }
.editor3.modo-preguntas { grid-template-columns: 200px 1fr; }
.editor3.modo-preguntas .ed-preview { display: none; }
@media (max-width: 900px) {
  .editor3 { grid-template-columns: 1fr; }
  .ed-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .ed-nav button { width: auto; }
  .ed-preview { position: static; max-width: 340px; margin: 0 auto; }
}

/* ===== Foto actual en editor ===== */
.foto-actual { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.foto-prev { width: 120px; height: 68px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--borde); flex: 0 0 auto; }

/* ===== Slider admin ===== */
.slider-admin { display: flex; flex-wrap: wrap; gap: 12px; }
.slide-item { width: 160px; }
.slide-img { display: block; width: 160px; height: 90px; background-size: cover; background-position: center; border-radius: 12px; border: 1px solid var(--borde); }
.slide-acc { display: flex; gap: 4px; margin-top: 6px; }
.slide-acc .btn-mini { padding: 4px 10px; }

/* ===== Slider de portada (frontend) ===== */
.hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease-in-out; animation: kenburns 20s ease-in-out infinite alternate;
}
.hero-slide.activo { opacity: 1; }
.hero-slider::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(7,16,48,.9) 20%, rgba(10,23,64,.5) 60%, rgba(10,23,64,.2) 100%);
}

/* ===== Selector de iconos (admin) ===== */
.icono-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.ico-op { position: relative; cursor: pointer; }
.ico-op input { position: absolute; opacity: 0; pointer-events: none; }
.ico-op > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 58px; height: 58px; border-radius: 12px; color: var(--muted);
  background: var(--azul-950); border: 2px solid var(--borde); transition: all .12s;
  font-family: var(--f-disp); font-size: 11px; line-height: 1.1;
}
.ico-op > span small { font-size: 8.5px; color: var(--muted); }
.ico-op:hover > span { border-color: var(--azul-claro); color: var(--texto); }
.ico-op:has(input:checked) > span { border-color: var(--lima); color: var(--lima); background: rgba(182,229,29,.08); box-shadow: 0 0 12px rgba(182,229,29,.2); }

/* ===== Gráfica de barras del ranking ===== */
.grafica {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  padding: 26px 14px 18px; margin-bottom: 18px; overflow-x: auto;
  background: linear-gradient(180deg, rgba(255,210,74,.06), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde); border-radius: 22px;
}
.gbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 0 0 auto; width: 96px; cursor: pointer; }
.gbar-fotowrap { position: relative; }
.gbar-foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--borde); background: var(--azul-950); display: block; }
.gbar.g1 .gbar-foto { width: 78px; height: 78px; border-color: var(--oro); box-shadow: 0 0 24px rgba(255,210,74,.55); }
.gbar.g2 .gbar-foto { border-color: var(--plata); }
.gbar.g3 .gbar-foto { border-color: var(--bronce); }
.gbar-corona {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--oro); color: #3a2600;
  display: flex; align-items: center; justify-content: center; border: 3px solid var(--panel);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.gbar-nombre {
  font-family: var(--f-disp); font-weight: 700; font-size: 13px; margin-top: 12px; text-align: center;
  line-height: 1.15; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbar.g1 .gbar-nombre { color: var(--oro); font-size: 14px; }
.gbar-pts { font-family: var(--f-disp); font-weight: 700; font-size: 15px; color: var(--lima); margin: 2px 0 8px; }
.gbar-col {
  width: 56px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--azul), var(--azul-700));
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  transform-origin: bottom; animation: growBar .7s cubic-bezier(.2,.8,.2,1) backwards;
}
.gbar.g1 .gbar-col { background: linear-gradient(180deg, var(--oro), #C8901A); }
.gbar.g2 .gbar-col { background: linear-gradient(180deg, var(--plata), #8a94a8); }
.gbar.g3 .gbar-col { background: linear-gradient(180deg, var(--bronce), #a86a34); }
.gbar-rank { font-family: var(--f-disp); font-weight: 700; font-size: 18px; color: rgba(255,255,255,.85); }
.gbar.g1 .gbar-rank, .gbar.g2 .gbar-rank, .gbar.g3 .gbar-rank { color: rgba(0,0,0,.55); }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.grafica-tit { width: 100%; text-align: center; }
@media (max-width: 600px) {
  .grafica { gap: 8px; justify-content: flex-start; padding: 20px 10px 14px; }
  .gbar { width: 62px; }
  .gbar-foto { width: 46px; height: 46px; }
  .gbar.g1 .gbar-foto { width: 56px; height: 56px; }
  .gbar-col { width: 44px; }
  .gbar-nombre { font-size: 11px; margin-top: 9px; }
  .gbar.g1 .gbar-nombre { font-size: 12px; }
  .gbar-pts { font-size: 13px; }
  .gbar-corona { width: 26px; height: 26px; }
}

.feed-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.feed-item:last-child { border-bottom: 0; }
.feed-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(182,229,29,.18); color: var(--lima);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.feed-correcta { color: var(--lima); font-weight: 700; }

/* Filas clicables + chip "ver" */
tr.clicable { cursor: pointer; }
tr.clicable:hover { background: rgba(182,229,29,.08); }
.ver-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-disp); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--azul-claro); border: 1px solid var(--borde); border-radius: 20px; padding: 3px 10px;
}
tr.clicable:hover .ver-chip { color: var(--lima); border-color: var(--borde-lima); }
.podio-item { cursor: pointer; }

/* Modal de desglose */
.det-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4,10,32,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: detIn .2s ease-out;
}
@keyframes detIn { from { opacity: 0; } to { opacity: 1; } }
.det-box {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde-lima); border-radius: 22px; padding: 24px;
  animation: detBox .25s ease-out;
}
@keyframes detBox { from { transform: translateY(18px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.det-cerrar {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--azul-950); border: 1px solid var(--borde); color: var(--texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transform: rotate(180deg);
}
.det-cerrar:hover { border-color: var(--borde-lima); color: var(--lima); }
.det-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 40px; }
.det-head .avatar { border-radius: 50%; object-fit: cover; background: var(--azul-950); }
.det-nombre { font-family: var(--f-disp); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.det-total { color: var(--lima); font-family: var(--f-disp); font-weight: 700; font-size: 16px; }
.det-fila { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--borde); }
.det-fila:last-child { border-bottom: 0; }
.det-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(182,229,29,.15); color: var(--lima); font-family: var(--f-disp); font-weight: 700; font-size: 13px;
}
.det-cuerpo { flex: 1; min-width: 0; }
.det-cuerpo > b { font-size: 15px; line-height: 1.3; }
.det-resp { display: flex; align-items: center; gap: 8px; margin: 5px 0 2px; font-size: 14.5px; }
.det-flag { width: 26px; height: 20px; border-radius: 4px; background-size: cover; background-position: center; flex: 0 0 auto; }
.det-hora { font-family: var(--f-disp); font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
.det-estado { flex: 0 0 auto; text-align: right; }
.det-ok { color: var(--lima); font-family: var(--f-disp); font-weight: 700; font-size: 14px; white-space: nowrap; }
.det-no { color: var(--rojo); font-family: var(--f-disp); font-weight: 700; font-size: 14px; }
.det-pend { color: var(--muted); font-size: 12px; }
.det-x2 { color: var(--oro); font-family: var(--f-disp); font-weight: 700; font-size: 12px; }

.barra-linea { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.barra-etq { flex: 0 0 180px; font-family: var(--f-disp); font-weight: 600; font-size: 14px; text-align: right; }
.barra { flex: 1; background: var(--azul-950); border: 1px solid var(--borde); border-radius: 6px; height: 24px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--azul); transition: width .4s; }
.barra span.b-ok { background: var(--lima); box-shadow: 0 0 14px rgba(182,229,29,.4); }
.barra-num { flex: 0 0 80px; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .barra-etq { flex-basis: 110px; font-size: 12.5px; } }

tr.sube { animation: flashSube 2.2s ease-out; }
tr.baja { animation: flashBaja 2.2s ease-out; }
@keyframes flashSube { 0% { background: rgba(182,229,29,.35); } 100% { background: transparent; } }
@keyframes flashBaja { 0% { background: rgba(255,90,107,.3); } 100% { background: transparent; } }

/* ===== Varios ===== */
.flash { padding: 13px 18px; margin-bottom: 18px; font-size: 15px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.f-ok { background: rgba(182,229,29,.12); color: var(--lima); box-shadow: inset 3px 0 0 var(--lima); }
.f-err { background: rgba(255,90,107,.12); color: var(--rojo); box-shadow: inset 3px 0 0 var(--rojo); }

.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--panel-2); border: 2px solid var(--lima); }
.premio-linea { display: flex; align-items: center; gap: 8px; color: var(--oro); font-weight: 600; }
.pregunta-caja { clip-path: none; border-left: 3px solid var(--lima); }
.pregunta-caja::before { display: none; }
.cuenta-banco { background: var(--azul-950); border: 1px dashed var(--borde); border-radius: 8px; padding: 13px; margin-bottom: 10px; }
.codigo-ref { font-family: var(--f-disp); font-size: 32px; font-weight: 700; color: var(--lima); letter-spacing: 6px; text-shadow: 0 0 22px rgba(182,229,29,.45); }

/* ===== Footer ===== */
.pie { border-top: 3px solid var(--lima); background: var(--azul-950); padding: 0; }
.pie-cols { display: flex; gap: 40px; flex-wrap: wrap; padding: 40px 0 30px; }
.pie-col { flex: 1; min-width: 220px; }
.pie .marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-disp); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.pie .marca b { color: var(--lima); }
.pie .marca .mark { width: 34px; height: 34px; }
.pie p { color: var(--muted); font-size: 14px; }
.pie h4 { font-family: var(--f-disp); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--texto); margin-bottom: 12px; }
.pie ul { list-style: none; }
.pie ul li { margin-bottom: 8px; }
.pie ul a { color: var(--muted); font-size: 14.5px; }
.pie ul a:hover { color: var(--lima); }
.pie-bajo { border-top: 1px solid var(--borde); padding: 16px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pie-bajo b { color: var(--lima); }

@media (max-width: 600px) {
  h1 { font-size: 27px; }
  .sec-head h2 { font-size: 24px; }
  .cd.cd-xl span { min-width: 68px; font-size: 30px; }
  .topbar nav a { padding: 6px 8px; font-size: 13.5px; }
  .fila-ev { padding: 16px 18px; }
}

/* ============================================================
   V3 — Lenguaje redondeado y animado en TODO el portal
   (hereda el estilo del splash: cápsulas, chips blancos, píldoras)
   ============================================================ */

/* Cápsulas redondeadas en lugar de esquinas cortadas */
.tarjeta, .tarjeta-ev, .stat, .paso-card, .podio, .ev-banner, .fila-ev, .cuenta-banco {
  clip-path: none; border-radius: 22px;
}
.tarjeta-ev, .paso-card, .ev-banner { overflow: hidden; }
.tarjeta { transition: transform .18s, box-shadow .18s, border-color .18s; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.tarjeta::before { width: 38%; border-radius: 22px 0 12px 0; }
.fila-ev { border-radius: 22px; }
.podio, .ev-banner { border-radius: 26px; }

/* Botones y etiquetas en píldora */
.btn, .btn-nav { clip-path: none; border-radius: 40px; }
.badge { clip-path: none; border-radius: 20px; padding: 4px 14px; }
.flash { clip-path: none; border-radius: 16px; }
.paso-num { clip-path: none; border-radius: 12px; }
.ribbon { clip-path: none; border-radius: 14px; margin: 10px 0 10px 12px; padding: 8px 18px; }

/* Contadores: chips blancos con números azules (como el splash) */
.cd span, .cd.cd-mini span, .cd.cd-xl span {
  background: var(--texto); color: var(--azul-950); border: 0; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.cd span i { color: var(--azul-950); opacity: .6; }
.cd.cd-xl span { border-radius: 16px; }

/* Formularios y opciones */
input, select, textarea { border-radius: 12px; }
.op-card { border-radius: 18px; }
.op-foto { border-radius: 12px; }
.pregunta-caja { border-radius: 22px; border-left: 6px solid var(--lima); }

/* Entrada animada en cascada para tarjetas, filas y stats */
@keyframes v3up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.grid > *, .pasos > *, .stats > *, .fila-ev, .pregunta-caja, .podio {
  animation: v3up .45s ease-out backwards;
}
.grid > *:nth-child(2), .pasos > *:nth-child(2), .stats > *:nth-child(2), .fila-ev:nth-of-type(2), .pregunta-caja:nth-of-type(2) { animation-delay: .08s; }
.grid > *:nth-child(3), .pasos > *:nth-child(3), .stats > *:nth-child(3), .fila-ev:nth-of-type(3), .pregunta-caja:nth-of-type(3) { animation-delay: .16s; }
.grid > *:nth-child(4), .stats > *:nth-child(4), .fila-ev:nth-of-type(4), .pregunta-caja:nth-of-type(4) { animation-delay: .24s; }
.grid > *:nth-child(5), .stats > *:nth-child(5), .fila-ev:nth-of-type(5), .pregunta-caja:nth-of-type(5) { animation-delay: .32s; }
.grid > *:nth-child(6), .fila-ev:nth-of-type(6), .pregunta-caja:nth-of-type(6) { animation-delay: .4s; }

/* Fotos de tarjetas con vida (mismo Ken Burns del splash) */
.tv-img { background-size: cover; }
.tarjeta-ev:hover .tv-img { animation: kenburns 10s ease-in-out infinite alternate; }

/* Tablas: posición en chip circular */
.pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.1); font-size: 15px;
}
.p1 .pos { background: rgba(255,210,74,.2); }
.p2 .pos { background: rgba(199,211,232,.15); }
.p3 .pos { background: rgba(224,155,92,.15); }

/* Suavizado general */
main { animation: v3up .35s ease-out; }
.stat { transition: transform .18s; }
.stat:hover { transform: translateY(-3px); }

/* ============================================================
   Página de evento (rediseño premium)
   ============================================================ */
.ev-hero {
  position: relative; border-radius: 26px; overflow: hidden;
  min-height: 320px; display: flex; align-items: flex-end;
  padding: 34px; margin-bottom: 22px;
  background-size: cover; background-position: center;
  animation: v3up .5s ease-out;
}
.ev-hero .ev-hero-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: kenburns 18s ease-in-out infinite alternate;
}
.ev-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,16,48,.2) 0%, rgba(7,16,48,.5) 45%, rgba(7,16,48,.95) 100%);
}
.ev-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--lima), transparent 65%);
}
.ev-hero-in { position: relative; z-index: 3; width: 100%; }
.ev-hero .kicker { margin-bottom: 6px; }
.ev-hero h1 { font-size: clamp(27px, 4.2vw, 46px); line-height: 1.04; margin: 4px 0 14px; text-shadow: 0 3px 22px rgba(0,0,0,.75); }
.ev-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-premio-grande {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,210,74,.14); border: 1.5px solid rgba(255,210,74,.5);
  border-radius: 16px; padding: 9px 20px; margin-bottom: 14px;
  color: var(--oro); font-family: var(--f-disp); font-weight: 700; text-transform: uppercase;
  font-size: clamp(17px, 2.3vw, 25px); letter-spacing: .02em;
  box-shadow: 0 0 30px rgba(255,210,74,.16);
}

/* Panel de acción destacado */
.ev-accion {
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1.5px solid var(--borde-lima);
  border-radius: 24px; padding: 26px 28px; margin-bottom: 22px; text-align: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.ev-accion-tit { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; font-size: 19px; letter-spacing: .04em; margin-bottom: 10px; }
.ev-accion .cd { justify-content: center; margin: 4px 0 20px; }
.ev-accion .btn { font-size: 18px; padding: 15px 42px; }
.ev-accion .btn + .btn { margin-left: 10px; }
.ev-accion .muted { margin-top: 12px; }
.ev-accion form { display: inline; }

/* Estadísticas del evento */
.ev-mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ev-mini {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px; text-align: center;
  transition: transform .18s, border-color .18s;
}
.ev-mini:hover { transform: translateY(-3px); border-color: var(--borde-lima); }
.ev-mini .ev-mini-ico { color: var(--lima); margin-bottom: 4px; display: inline-flex; }
.ev-mini b { display: block; font-family: var(--f-disp); font-size: 22px; font-weight: 700; color: var(--texto); line-height: 1.15; }
.ev-mini.oro b { color: var(--oro); }
.ev-mini span { font-family: var(--f-disp); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }

/* Dos columnas */
.ev-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .ev-cols { grid-template-columns: 1fr; } }

/* Preview de preguntas */
.ev-preg-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--borde); }
.ev-preg-item:last-child { border-bottom: 0; }
.ev-preg-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(182,229,29,.15); color: var(--lima);
  font-family: var(--f-disp); font-weight: 700; font-size: 15px;
}
.ev-preg-txt { flex: 1; min-width: 0; }
.ev-preg-txt b { display: block; font-size: 15.5px; line-height: 1.3; }
.ev-preg-txt small { color: var(--muted); font-size: 12.5px; }
.ev-preg-pts { flex: 0 0 auto; color: var(--lima); font-family: var(--f-disp); font-weight: 700; font-size: 15px; white-space: nowrap; }
.ev-datos li { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 14.5px; }
.ev-datos li:last-child { border-bottom: 0; }
.ev-datos li span:first-child { color: var(--muted); }
.ev-datos li b { font-weight: 600; text-align: right; }