@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy:#0a1628; --navy-deep:#060d1a; --navy2:#0f1d34;
  --lime:#c6f22c; --lime-dark:#94b81a;
  --blue:#1741c9; --red:#e63946;
  --ink:#f3f6fa; --muted:#93a0b8; --line:#20304f;
  --turf:#3ea66b; --amber:#e8b93c;
  --disp:'Anton',sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Inter',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--body); background:var(--navy); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--lime); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }

/* ================= HERO sólido: logo + título + cuenta regresiva ================= */
.hero { position:relative; overflow:hidden; padding:38px 18px 32px; border-bottom:4px solid var(--lime);
  background:var(--navy-deep); }
.hero-logo { position:relative; z-index:2; display:block; max-width:240px; margin:0 auto 16px; }
.hero-dots { position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; opacity:.35; z-index:1; }
.hero-inner { position:relative; z-index:2; max-width:640px; margin:0 auto; text-align:center; }

/* ================= Fondo de la web: foto de canchas degradada ================= */
.fondo-canchas { position:relative; }
.fondo-canchas::before {
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,13,26,.90) 0%, rgba(6,13,26,.80) 30%, rgba(6,13,26,.94) 100%),
    url('img/canchas.jpg') center 30% / cover no-repeat;
}
.countdown { display:flex; justify-content:center; gap:14px; margin-top:8px; }
.countdown .stat { min-width:110px; padding:14px 18px; }
.countdown .stat b { font-size:34px; }
.eyebrow { font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:4px;
  color:var(--red); text-transform:uppercase; }
.hero h1 { font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(42px,13vw,68px); line-height:0.92; letter-spacing:1px; margin:12px 0 2px;
  color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.25); }
.hero h1 .lime { color:var(--lime); display:block; }
.hero .banda { display:inline-block; background:#fff; color:var(--navy); font-family:var(--disp);
  font-size:clamp(15px,4vw,20px); padding:4px 18px; margin-top:8px; transform:skewX(-8deg); }
.hero .banda span { display:inline-block; transform:skewX(8deg); }
.hero .meta { font-family:var(--cond); font-weight:600; color:var(--muted); font-size:16px;
  margin:16px 0 20px; letter-spacing:.3px; }
.hero .meta b { color:var(--lime); font-weight:700; }
.stats { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.stat { background:rgba(198,242,44,.08); border:1.5px solid var(--lime); border-radius:2px;
  padding:9px 16px; min-width:92px; }
.stat b { display:block; font-family:var(--disp); font-size:24px; color:#fff; line-height:1; }
.stat span { font-family:var(--cond); font-size:11px; color:var(--lime); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }

.countdown-live { display:flex; justify-content:center; align-items:center; gap:2px; margin-top:14px;
  flex-wrap:nowrap; width:100%; }
.cd-box { background:linear-gradient(180deg,rgba(198,242,44,.14),rgba(198,242,44,.05));
  border:2px solid var(--lime); border-radius:10px; padding:10px 2px 8px;
  text-align:center; flex:1 1 0; min-width:0; max-width:110px;
  box-shadow:0 0 18px rgba(198,242,44,.35), inset 0 0 12px rgba(198,242,44,.08); }
.cd-box b { display:block; font-family:var(--disp); font-weight:400; line-height:1; color:#fff;
  font-size:clamp(26px,9vw,46px); font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(198,242,44,.85); }
.cd-box span { font-family:var(--cond); font-size:clamp(9px,2.4vw,12px); color:var(--lime);
  text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.cd-colon { font-family:var(--disp); color:var(--lime); font-size:clamp(20px,7vw,36px);
  padding:0 1px; align-self:flex-start; margin-top:8px; animation:cdBlink 1s steps(1) infinite; }
@keyframes cdBlink { 0%,49%{opacity:1;} 50%,100%{opacity:.15;} }
@keyframes cdPulse { 0%{transform:scale(1);} 50%{transform:scale(1.06);} 100%{transform:scale(1);} }
.cd-box.tick { animation:cdPulse .35s ease; }

/* ================= Layout ================= */
.wrap { max-width:640px; margin:0 auto; padding:22px 16px 60px; }
.wrap-ancho { max-width:1100px; margin:0 auto; padding:22px 16px 60px; }

/* ================= Cards ================= */
.card { background:var(--navy2); border:1px solid var(--line); border-radius:6px; padding:22px; margin-bottom:16px;
  border-left:4px solid var(--lime); }
.card h2 { font-family:var(--disp); font-weight:400; text-transform:uppercase; letter-spacing:.5px;
  font-size:19px; color:var(--ink); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.card h2 .n { font-family:var(--cond); font-weight:700; font-size:13px; color:var(--navy); background:var(--lime);
  border-radius:3px; padding:2px 9px; }

/* ================= Categorías (panel estilo flyer) ================= */
.cat-panel { border:2px solid var(--lime); border-radius:10px; padding:18px 20px; }
.cat-panel h3 { font-family:var(--disp); font-weight:400; color:var(--lime); font-size:16px;
  text-transform:uppercase; margin:14px 0 8px; letter-spacing:.5px; }
.cat-panel h3:first-child { margin-top:0; }
.cat-panel ul { list-style:none; }
.cat-panel li { font-family:var(--cond); font-weight:600; font-size:15px; color:var(--ink);
  padding:3px 0 3px 14px; position:relative; }
.cat-panel li::before { content:'•'; color:var(--lime); position:absolute; left:0; }

/* ================= Tabs de categoría ================= */
.tabs { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 14px; justify-content:center; }
@media (max-width:560px){
  .tabs { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c6f22c #0a1730;
    padding-bottom:10px; }
}
.tabs::-webkit-scrollbar { height:8px; }
.tabs::-webkit-scrollbar-track { background:#0a1730; border-radius:8px; }
.tabs::-webkit-scrollbar-thumb { background:#c6f22c; border-radius:8px; }
.tab { flex:0 0 auto; font-family:var(--cond); font-weight:700; font-size:14px; padding:9px 18px;
  border-radius:3px; background:var(--navy2); border:1.5px solid var(--line); color:var(--muted);
  cursor:pointer; white-space:nowrap; text-transform:uppercase; }
.tab.on { background:var(--lime); color:var(--navy); border-color:var(--lime); }

/* ================= Avatar de pareja ================= */
.duo { display:inline-flex; align-items:center; margin-right:10px; flex-shrink:0; }
.duo .c1, .duo .c2 { width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--disp); font-weight:400; font-size:12px; border:2px solid var(--navy2); }
.duo .c1 { background:var(--blue); color:#fff; position:relative; z-index:2; }
.duo .c2 { background:var(--lime); color:var(--navy); margin-left:-10px; }
.fila-pareja { display:flex; align-items:center; gap:2px; padding:11px 4px; border-bottom:1px solid var(--line); }
.fila-pareja:last-child { border-bottom:0; }
.fila-pareja .nombres { font-size:14px; line-height:1.4; font-family:var(--body); }
.fila-pareja .nombres b { color:var(--ink); }
.fila-pareja .seed { font-family:var(--cond); font-weight:700; color:var(--lime); font-size:14px; width:28px; flex-shrink:0; }

/* ================= Forms ================= */
label { display:block; font-family:var(--cond); font-weight:600; font-size:13px; color:var(--muted);
  margin:12px 0 4px; text-transform:uppercase; letter-spacing:.5px; }
input, select { width:100%; padding:12px 13px; border-radius:4px; border:1.5px solid var(--line);
  background:#0a1730; color:var(--ink); font-size:15px; font-family:var(--body); }
input:focus, select:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(198,242,44,.15); }
.fila { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .fila { grid-template-columns:1fr; } }

.btn { display:block; width:100%; margin-top:20px; padding:15px; border:0; border-radius:4px;
  background:var(--lime); color:var(--navy); font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:18px; cursor:pointer; text-align:center; text-decoration:none; letter-spacing:.5px; }
.btn:hover { text-decoration:none; filter:brightness(1.08); }
.btn.alt { background:transparent; border:1.5px solid var(--lime); color:var(--lime); }
.btn.danger { background:var(--red); color:#fff; }

.aviso { background:rgba(62,166,107,.14); border:1px solid var(--turf); color:#a8e8c2; padding:13px 15px;
  border-radius:6px; font-size:14px; margin-bottom:16px; }
.error { background:rgba(230,57,70,.14); border:1px solid var(--red); color:#ffc9cf; padding:13px 15px;
  border-radius:6px; font-size:14px; margin-bottom:16px; }

.precio { text-align:center; margin:6px 0; }
.precio strong { font-family:var(--disp); font-weight:400; color:var(--lime); font-size:44px; }
.bancos { font-size:14px; line-height:2; color:#d6dee9; font-family:var(--body); }
.bancos b { color:#fff; font-weight:700; }
.codigo { text-align:center; font-family:var(--disp); font-weight:400; font-size:28px; color:var(--lime);
  letter-spacing:3px; background:#0a1730; border-radius:6px; padding:16px; margin:14px 0; border:2px dashed var(--lime); }
small.pie { display:block; text-align:center; color:var(--muted); margin-top:26px; line-height:1.8; font-size:12.5px; font-family:var(--body); }

/* ================= Tags de estado ================= */
.tag { font-family:var(--cond); font-weight:700; padding:3px 9px; border-radius:3px; font-size:11px;
  letter-spacing:.4px; text-transform:uppercase; }
.t-pendiente, .t-pending { background:rgba(232,185,60,.16); color:var(--amber); }
.t-validada, .t-validated { background:rgba(62,166,107,.16); color:var(--turf); }
.t-rechazada, .t-rejected { background:rgba(230,57,70,.16); color:#ff9aa2; }

/* ================= Sponsors ================= */
.sponsors { background:var(--navy-deep); border-top:1px solid var(--line); padding:30px 16px 36px; text-align:center; }
.sponsors .eyebrow { display:block; margin-bottom:16px; }
.sponsors-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px; max-width:900px; margin:0 auto; }
.sponsors-grid img { max-height:42px; max-width:130px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.85; }
.sponsors-grid a:hover img { filter:none; opacity:1; }
.sponsor-video { max-width:640px; margin:18px auto 0; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.sponsor-video.vertical { max-width:300px; }
.sponsor-video video { width:100%; display:block; }

/* ================= Admin (tablas, funcional) ================= */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:9px 7px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--lime); text-transform:uppercase; font-size:10.5px; letter-spacing:1px; font-family:var(--cond); font-weight:700; }
.mini { padding:7px 11px; font-size:12px; border-radius:4px; border:0; cursor:pointer; font-weight:700; font-family:var(--cond); text-transform:uppercase; }
.ok { background:var(--lime); color:var(--navy); }
.no { background:var(--red); color:#fff; }
.resumen { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.resumen div { background:#0a1730; border-radius:6px; padding:12px 14px; font-size:13px; border:1px solid var(--line); }
.resumen b { color:var(--lime); font-size:20px; display:block; font-family:var(--disp); font-weight:400; }
.barra { background:#0a1730; border-radius:20px; height:14px; overflow:hidden; margin-top:8px; border:1px solid var(--line); }
.barra span { display:block; height:100%; background:var(--lime); }

.logo { text-align:center; padding:6px 0 4px; }
.logo img { max-width:170px; margin:0 auto 6px; }
.logo h1 { font-family:var(--disp); font-weight:400; font-size:28px; text-transform:uppercase; }
.logo h1 span { color:var(--lime); }
.logo p { color:var(--red); font-weight:700; font-family:var(--cond); letter-spacing:3px; font-size:12px; }
.sub { text-align:center; color:var(--muted); font-size:13.5px; margin:6px 0 22px; font-family:var(--body); }

.search { position:relative; margin-bottom:14px; }
.search input { padding-left:38px; }
.search::before { content:'🔍'; position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.5; }