/* Winter League — web pública de ranking. Valores exactos del prototipo hi-fi. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0a121d}
a{color:#b9cee0;text-decoration:none}
a:hover{color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#42586f;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

.page{
  min-height:100vh;
  font-family:'Barlow Condensed',sans-serif;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(13,22,34,.55) 0%,rgba(9,15,24,.78) 55%,rgba(6,10,17,.94) 100%),
    url('../assets/fondo_web.webp') center top / cover no-repeat fixed #0a121d;
  position:relative;
}

/* ── Hero ─────────────────────────────────────────────── */
.hero{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:28px 20px 10px;
  background:linear-gradient(180deg,rgba(20,32,48,.7) 0%,rgba(15,24,37,.45) 60%,rgba(15,24,37,0) 100%);
}
.hero-inner{display:flex;align-items:center;gap:18px}
.hero-logo{
  width:150px;height:150px;object-fit:cover;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);border:2px solid rgba(185,206,224,.4);
}
.hero-text{display:flex;flex-direction:column;align-items:flex-start}
.hero-title{
  margin:0;font-family:'Anton',sans-serif;font-weight:400;font-size:56px;line-height:1;
  letter-spacing:2px;text-transform:uppercase;text-shadow:0 4px 18px rgba(0,0,0,.5);
}
.hero-sub{font-size:22px;font-weight:600;letter-spacing:6px;text-transform:uppercase;color:#b9cee0}
.hero-pill{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  background:rgba(10,18,29,.65);border:1px solid rgba(200,240,0,.5);
  border-radius:999px;padding:6px 16px 6px 8px;
}
.hero-pill img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.hero-pill span{font-size:18px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#d3f24b}

/* ── Tabs de categoría ────────────────────────────────── */
.tabs{display:flex;justify-content:center;gap:12px;margin:22px 0 6px;flex-wrap:wrap}
.tab{
  cursor:pointer;font-family:'Anton',sans-serif;font-size:22px;letter-spacing:2px;
  text-transform:uppercase;padding:12px 30px;border-radius:6px;
  border:2px solid rgba(185,206,224,.35);background:rgba(10,18,29,.7);color:#b9cee0;
  transform:skewX(-8deg);box-shadow:none;
}
.tab:hover{filter:brightness(1.15)}
.tab.active{
  background:linear-gradient(180deg,#dbe7f2,#9fb6cc);color:#101b29;
  border-color:#c8f000;box-shadow:0 8px 24px rgba(185,206,224,.3);
}

/* ── Sub-tabs (espacio SIEMPRE reservado) ─────────────── */
.subtabs{display:flex;justify-content:center;gap:10px;margin-top:10px;min-height:38px}
.subtab{
  cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:3px;text-transform:uppercase;padding:7px 22px;border-radius:999px;
  border:1px solid rgba(200,240,0,.4);background:transparent;color:#d3f24b;
}
.subtab:hover{filter:brightness(1.2)}
.subtab.active{background:#c8f000;color:#081c3a;border-color:#c8f000}

/* ── Layout 3 columnas ────────────────────────────────── */
.columns{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start;
  padding:26px 24px 60px;position:relative;
}

/* ── Paneles laterales ────────────────────────────────── */
.panel{
  flex:1 1 260px;max-width:320px;
  border:1px solid rgba(185,206,224,.22);border-radius:12px;
  padding:18px 18px 22px;backdrop-filter:blur(4px);
}
.panel-left{background:linear-gradient(165deg,rgba(44,62,84,.5),rgba(10,18,29,.75))}
.panel-right{background:linear-gradient(195deg,rgba(44,62,84,.5),rgba(10,18,29,.75))}
.panel-head{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid #c8f000;padding-bottom:10px;margin-bottom:14px;
}
.panel-emoji{font-size:22px}
.panel-head h2{
  margin:0;font-family:'Anton',sans-serif;font-weight:400;font-size:22px;
  letter-spacing:2px;text-transform:uppercase;
}
.panel-sub{font-size:15px;font-weight:600;letter-spacing:2px;color:#b9cee0;text-transform:uppercase;margin-bottom:10px}
.mv-list{display:flex;flex-direction:column;gap:8px}
.mv-gap{margin-bottom:20px}
.mv-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1px dashed rgba(185,206,224,.18);padding-bottom:6px;
}
.mv-name{font-size:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mv-detail{font-size:15px;font-weight:500;color:#b9cee0;white-space:nowrap;text-align:right}
.panel-note{margin-top:12px;font-size:14px;color:#8fa5ba;letter-spacing:1px}
.wod-desc{
  margin-top:16px;background:rgba(200,240,0,.08);border:1px solid rgba(200,240,0,.3);
  border-radius:8px;padding:10px 12px;font-size:15px;line-height:1.4;color:#d3f24b;
}
.wod-desc:empty{display:none}

/* ── Torre de ranking ─────────────────────────────────── */
.tower{
  flex:99 1 420px;max-width:640px;
  background:linear-gradient(180deg,rgba(24,37,53,.88),rgba(9,15,24,.92));
  border:1px solid rgba(185,206,224,.28);border-radius:14px;
  padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.tower-head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid rgba(185,206,224,.35);padding-bottom:12px;margin-bottom:6px;
}
.tower-head h2{
  margin:0;font-family:'Anton',sans-serif;font-weight:400;font-size:28px;
  letter-spacing:2px;text-transform:uppercase;
}
.tower-label{font-size:15px;font-weight:600;letter-spacing:2px;color:#b9cee0;text-transform:uppercase}
.cols-head{
  display:grid;grid-template-columns:52px 1fr 92px 90px;gap:8px;padding:8px 10px;
  font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fa5ba;
}
.right{text-align:right}
.rows{display:flex;flex-direction:column;gap:6px}
.row{
  display:grid;grid-template-columns:52px 1fr 92px 90px;gap:8px;align-items:center;
  padding:10px;border-radius:8px;
  background:rgba(44,62,84,.35);border:1px solid rgba(185,206,224,.12);
}
.row.top3{
  background:linear-gradient(90deg,rgba(200,240,0,.10),rgba(44,62,84,.45));
  border-color:rgba(200,240,0,.35);
}
.row-pos{font-family:'Anton',sans-serif;font-size:24px;color:#8fa5ba}
.row.top3 .row-pos{color:#c8f000}
.row-team{display:flex;flex-direction:column}
.row-name{font-size:20px;font-weight:700;letter-spacing:.5px}
.row-members{font-size:13px;font-weight:500;letter-spacing:1.5px;color:#8fa5ba;text-transform:uppercase}
.row-time{text-align:right;font-family:'Anton',sans-serif;font-size:21px;color:#b9cee0}
.row-time.cap{color:#e88f5a}
.row-reps{text-align:right;font-size:16px;font-weight:600;color:#c8f000}
.row-reps.missing{color:#e88f5a}
.empty-note{padding:22px 10px;text-align:center;font-size:16px;letter-spacing:2px;color:#6d8199;text-transform:uppercase}

.more{
  cursor:pointer;width:100%;margin-top:14px;padding:11px;border-radius:8px;
  border:1px dashed rgba(185,206,224,.4);background:transparent;color:#b9cee0;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:3px;text-transform:uppercase;
}
.more:hover{background:rgba(185,206,224,.15)}
.tiebreak{
  margin-top:14px;text-align:center;font-size:13px;letter-spacing:1.5px;
  color:#6d8199;text-transform:uppercase;
}

/* ── Footer ───────────────────────────────────────────── */
.judge-link-wrap{display:flex;justify-content:center;padding:0 20px 18px}
.judge-link{
  font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:1px solid rgba(185,206,224,.4);border-radius:999px;padding:8px 20px;
}
.footer-line{
  text-align:center;padding:0 20px 40px;font-size:14px;letter-spacing:2px;
  color:#6d8199;text-transform:uppercase;
}

/* ── Ajustes de pantalla chica (el mock es desktop; esto evita desbordes en celular) ── */
@media (max-width:640px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-text{align-items:center}
  .hero-title{font-size:40px}
  .hero-sub{font-size:16px;letter-spacing:4px}
  .hero-logo{width:110px;height:110px}
  .cols-head,.row{grid-template-columns:40px 1fr 72px 70px}
  .row-name{font-size:17px}
  .row-time{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}