/* LA PÁGINA DE INICIO (7.0.6). Todo va colgado de `.ini` para no pisar
   nada del resto del sitio. Los colores salen de los del sitio, así que
   claro y oscuro funcionan solos. Oswald es la misma autohospedada del
   marcador: nada por CDN. */
@font-face{font-family:"Oswald";font-weight:600;font-display:swap;src:url("marcador/fonts/oswald-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-weight:700;font-display:swap;src:url("marcador/fonts/oswald-latin-700-normal.woff2") format("woff2")}
.ini{--panel2:var(--panel-2);--sobre-marca:#1a0d02;--display:"Oswald","Arial Narrow",Impact,sans-serif;--cuerpo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ini h1,.ini h2,.ini h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:.01em;text-wrap:balance;margin:0}
.ini p{margin:0}
.ini a{text-decoration:none}
.ini .etq{font:600 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--frio)}
.ini .btn-marca{background:var(--marca);color:var(--sobre-marca)}
.ini .btn-linea{background:transparent;color:var(--texto);border:1.5px solid var(--borde)}
.ini .btn-linea:hover{border-color:var(--suave);color:var(--texto)}
/* ---------- hero ---------- */
.ini .hero{position:relative;overflow:hidden;isolation:isolate;padding:44px 0 64px}
.ini .hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(900px 480px at 85% -10%,rgba(249,115,22,.30),transparent 60%),
             radial-gradient(700px 420px at 0% 100%,rgba(0,218,243,.16),transparent 60%)}
.ini .cancha-fondo{position:absolute;right:-120px;top:-40px;width:760px;max-width:none;z-index:-1;opacity:.13;color:var(--texto)}
.ini .hero-rejilla{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.ini .hero-rejilla{grid-template-columns:1.15fr .85fr}
.ini .hero{padding:72px 0 88px}}
.ini .hero h1{font-size:clamp(2.6rem,8.4vw,5rem);text-transform:uppercase}
.ini .hero h1 em{font-style:normal;color:var(--marca-usable)}
.ini .hero p.sub{margin-top:16px;color:var(--suave);font-size:1.1rem;max-width:34ch}
.ini .buscador{margin-top:28px;display:flex;gap:8px;padding:8px;border-radius:999px;background:var(--panel);border:1px solid var(--borde);box-shadow:var(--sombra);max-width:560px}
.ini .buscador input{flex:1;min-width:0;border:0;background:transparent;color:var(--texto);font:inherit;padding:0 14px;outline:none}
.ini .buscador input::placeholder{color:var(--tenue)}
.ini .buscador .btn{min-height:44px;padding:0 20px}
.ini .atajos{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.ini .atajo{padding:8px 14px;border-radius:999px;border:1px solid var(--borde);background:var(--panel);font-size:.88rem;color:var(--suave);display:inline-flex;gap:8px;align-items:center}
.ini .atajo:hover{color:var(--texto);border-color:var(--suave)}
.ini .punto-vivo{width:8px;height:8px;border-radius:50%;background:var(--vivo);box-shadow:0 0 0 0 var(--vivo);animation:ini-late 1.6s infinite}
@keyframes ini-late{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.ini .punto-vivo{animation:none}}
/* celular de adorno */
.ini .tel{position:relative;width:min(290px,78vw);margin-inline:auto;padding:10px;border-radius:38px;background:#05080f;border:1px solid #2a3552;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.03)}
.ini .tel::before{content:"";position:absolute;top:16px;left:50%;translate:-50% 0;width:70px;height:18px;border-radius:12px;background:#05080f;z-index:2}
.ini .pantalla{border-radius:30px;background:#0B1326;padding:38px 14px 16px;color:#E8EDFF;min-height:440px}
.ini .pantalla .enc{display:flex;justify-content:space-between;font:600 .68rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7A8399}
.ini .ficha{margin-top:14px;position:relative;background:#131B2E;border:1px solid #263047;border-radius:18px;padding:22px 12px 14px;text-align:center}
.ini .cinta{position:absolute;top:-11px;left:50%;translate:-50% 0;white-space:nowrap;padding:5px 12px;border-radius:999px;font:600 .64rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.ini .cinta.vivo{background:#FF6B6B;color:#2a0606;display:inline-flex;gap:6px;align-items:center}
.ini .cinta.viene{background:#00DAF3;color:#04222a}
.ini .cruce{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.ini .esc{width:54px;height:54px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font:700 1rem/1 var(--display);color:#fff;border:3px solid rgba(255,255,255,.14)}
.ini .nom{font:600 .72rem/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.ini .marc{font:700 2.1rem/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em}
.ini .marc small{display:block;margin-top:6px;font:600 .58rem/1 var(--display);letter-spacing:.14em;color:#7A8399}
.ini .mini-tabla{margin-top:14px;background:#131B2E;border:1px solid #263047;border-radius:14px;padding:6px 10px}
.ini .mini-tabla div{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:.74rem;border-bottom:1px solid #1d2740}
.ini .mini-tabla div:last-child{border:0}
.ini .mini-tabla b{font:700 .8rem/1 var(--display);width:14px;color:#00DAF3}
.ini .mini-tabla i{flex:1;font-style:normal}
.ini .mini-tabla span{font:700 .8rem/1 ui-monospace,monospace}
/* ---------- torneos ---------- */
.ini .bloque{padding:56px 0}
.ini .cabeza{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.ini .cabeza h2{font-size:clamp(1.8rem,4.6vw,2.6rem);text-transform:uppercase}
.ini .cabeza a.ver{color:var(--frio);font:600 .85rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ini .tira{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 20px;margin-inline:-16px;scrollbar-width:thin}
.ini .tira::-webkit-scrollbar{height:6px}
.ini .tira::-webkit-scrollbar-thumb{background:var(--borde);border-radius:9px}
@media(min-width:1150px){.ini .tira{margin-inline:0;padding-inline:0}}
.ini .torneo{flex:0 0 min(300px,80%);scroll-snap-align:start;background:var(--panel);border:1px solid var(--borde);border-radius:22px;overflow:hidden;box-shadow:var(--sombra);transition:transform .2s,border-color .2s;display:block}
.ini .torneo:hover{transform:translateY(-4px);border-color:var(--suave)}
.ini .portada{height:132px;position:relative;display:grid;place-items:center;overflow:hidden}
.ini .portada svg.lineas{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.ini .logo{position:relative;width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;font:700 1.35rem/1 var(--display);box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.ini .badge{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;font:600 .66rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;background:rgba(5,8,15,.65);backdrop-filter:blur(6px);color:#fff;display:inline-flex;gap:6px;align-items:center}
.ini .torneo .cuerpo{padding:14px 16px 18px}
.ini .torneo h3{font-size:1.3rem;text-transform:uppercase}
.ini .torneo .dato{margin-top:6px;font-size:.88rem;color:var(--suave)}
.ini .torneo .pie{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.ini .pildora{padding:5px 10px;border-radius:999px;background:var(--panel2);font-size:.78rem;color:var(--suave)}
.ini .cat{display:flex;flex-wrap:wrap;gap:8px}
/* ---------- lo que hacemos ---------- */
.ini .loque{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 40%,transparent)}
.ini .mosaico{display:grid;gap:16px}
@media(min-width:760px){.ini .mosaico{grid-template-columns:repeat(6,1fr)}
.ini .m-a{grid-column:span 4}
.ini .m-b{grid-column:span 2}
.ini .m-c{grid-column:span 2}
.ini .m-d{grid-column:span 4}}
.ini .tile{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--borde);background:var(--panel);padding:26px;min-height:330px;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .25s,border-color .25s}
.ini .tile:hover{transform:translateY(-4px);border-color:var(--suave)}
.ini .tile h3{font-size:1.65rem;text-transform:uppercase;position:relative}
.ini .tile p{margin-top:8px;color:var(--suave);max-width:34ch;position:relative}
.ini .tile .arte{flex:1;display:flex;align-items:center;justify-content:center;padding:4px 0 22px;min-height:150px}
.ini .t-naranja{background:linear-gradient(160deg,rgba(249,115,22,.22),var(--panel) 65%)}
.ini .t-frio{background:linear-gradient(160deg,rgba(0,218,243,.16),var(--panel) 65%)}
/* mini rol */
.ini .rol{width:100%;max-width:420px;display:grid;gap:8px}
.ini .rol div{display:grid;grid-template-columns:54px 1fr auto 1fr;gap:10px;align-items:center;background:var(--panel2);border-radius:12px;padding:9px 12px;font-size:.82rem}
.ini .rol b{font:700 .8rem/1 var(--display);letter-spacing:.06em;color:var(--marca-usable)}
.ini .rol span:nth-child(4){text-align:right}
.ini .rol em{font-style:normal;font:700 .7rem/1 var(--display);color:var(--tenue)}
/* mini llave */
.ini .llave{width:100%;max-width:320px}
.ini .llave text{font:700 11px var(--display);fill:var(--texto);stroke:none;stroke-dasharray:none;letter-spacing:.05em}
/* compartir */
.ini .chat{display:grid;gap:8px;width:100%;max-width:250px}
.ini .burbuja{padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--panel2);font-size:.8rem;width:fit-content}
.ini .burbuja.tu{justify-self:end;border-radius:14px 14px 4px 14px;background:rgba(0,218,243,.16)}
.ini .vista-link{display:flex;gap:10px;align-items:center;background:var(--panel2);border-radius:10px;padding:8px;margin-top:6px}
.ini .vista-link i{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--marca),#7c2d12);flex:none}
.ini .vista-link span{font-size:.72rem;line-height:1.25;color:var(--suave)}
/* lista de cosas chicas */
.ini .chicas{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.ini .chicas span{display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid var(--borde);background:var(--panel);font-size:.92rem}
.ini .chicas svg{width:18px;height:18px;color:var(--marca)}
/* ---------- marcador ---------- */
.ini .marcador-banda{position:relative;overflow:hidden;border-radius:30px;padding:34px;background:linear-gradient(120deg,#1a0f05,#2a1404 45%,#0f1a2e);border:1px solid #3a2410;display:grid;gap:26px;align-items:center}
@media(min-width:860px){.ini .marcador-banda{grid-template-columns:1.1fr .9fr;padding:48px}}
.ini .marcador-banda h2{font-size:clamp(1.9rem,5vw,3rem);text-transform:uppercase;color:#fff}
.ini .marcador-banda p{margin-top:12px;color:#c9b8a6;max-width:40ch}
.ini .marcador-banda .chip-g{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ini .marcador-banda .chip-g span{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#fde7d3;font-size:.84rem}
.ini .tablero{background:#05080f;border:1px solid #2a3552;border-radius:22px;padding:18px;color:#fff;box-shadow:0 30px 60px -30px #000}
.ini .tablero .fila{display:flex;justify-content:space-between;align-items:center}
.ini .tablero .pts{font:700 3.6rem/1 ui-monospace,monospace}
.ini .tablero .eq{font:600 .8rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#A7B0CC}
.ini .tablero .reloj{font:700 1.3rem/1 ui-monospace,monospace;color:#00DAF3;text-align:center}
.ini .botones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.ini .botones b{display:grid;place-items:center;height:46px;border-radius:12px;background:#131B2E;border:1px solid #263047;font:700 1rem/1 var(--display)}
/* celular con el marcador real */
.ini .marcador-banda{overflow:visible}
.ini .tel-m{justify-self:center;width:min(290px,100%);border-radius:38px;padding:10px;background:#0a0f1c;border:1px solid #2a3552;box-shadow:0 40px 70px -30px #000,0 0 0 1px #000}
.ini .tel-m-pantalla{background:#0B1326;border-radius:30px;padding:14px;display:grid;gap:12px;color:#fff}
.ini .mbarra{display:flex;align-items:center;gap:8px;font:600 .72rem/1 var(--display);letter-spacing:.1em}
.ini .mbarra b{flex:1}
.ini .mlogo{width:22px;height:22px;border-radius:50%;background:var(--marca);box-shadow:inset 0 0 0 3px #1c2540}
.ini .mperiodo{font-style:normal;padding:4px 9px;border-radius:999px;background:#1c2540;color:#00DAF3}
.ini .mtarjetas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ini .mequipo{background:#131B2E;border-radius:16px;border-top:4px solid var(--ce);padding:10px;display:grid;gap:6px;justify-items:center}
.ini .mnom{font:600 .68rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ce)}
.ini .mpts{font:700 3.3rem/1 ui-monospace,monospace;transition:transform .2s}
.ini .mpts.sube{transform:scale(1.18);color:#22c55e}
.ini .mfaltas{display:flex;gap:4px}
.ini .mfaltas i{width:8px;height:8px;border-radius:50%;background:#263047}
.ini .mfaltas i.on{background:#facc15}
.ini .mrelojes{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.ini .mrelojes div{background:#131B2E;border-radius:14px;padding:10px;text-align:center}
.ini .mrelojes small{display:block;font:600 .6rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#A7B0CC;margin-bottom:6px}
.ini .mreloj{font:700 1.9rem/1 ui-monospace,monospace;color:#00DAF3}
.ini .mtiro{font:700 1.9rem/1 ui-monospace,monospace;color:#F97316}
.ini .mbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ini .mbtns.dos{grid-template-columns:1fr 1fr}
.ini .mbtns b{display:grid;place-items:center;height:44px;border-radius:12px;background:#131B2E;border:1px solid #263047;font:700 1rem/1 var(--display)}
.ini .mbtns b.act{background:linear-gradient(180deg,#fb923c,#F97316);color:#1a0d02;border-color:transparent;animation:ini-toca 2.4s infinite}
.ini .mbtns.dos b{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#A7B0CC}
.ini .mper{display:flex;gap:6px;justify-content:center}
.ini .mper i{font-style:normal;width:34px;height:28px;display:grid;place-items:center;border-radius:9px;background:#131B2E;font:600 .8rem/1 var(--display);color:#A7B0CC}
.ini .mper i.on{background:#00DAF3;color:#04222a}
@keyframes ini-toca{0%,70%,100%{transform:scale(1)}80%{transform:scale(.93)}90%{transform:scale(1.04)}}
@media(min-width:860px){.ini .tel-m{width:320px}
.ini .marcador-banda{padding:56px 48px}}
/* animaciones suaves */
@keyframes ini-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ini .flota{animation:ini-flota 6s ease-in-out infinite}
.ini-js .rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.ini-js .rev.ya{opacity:1;transform:none}
.ini .tile .arte > *{transition:transform .4s}
.ini .tile:hover .arte > *{transform:scale(1.04)}
.ini .rol div{animation:ini-entra .6s both}
.ini .rol div:nth-child(2){animation-delay:.15s}
.ini .rol div:nth-child(3){animation-delay:.3s}
@keyframes ini-entra{from{opacity:0;transform:translateX(-14px)}}
.ini .llave path{stroke-dasharray:400;stroke-dashoffset:400;animation:ini-traza 2.6s .3s forwards}
@keyframes ini-traza{to{stroke-dashoffset:0}}
.ini .burbuja{animation:ini-entra .6s both}
.ini .burbuja.tu{animation-delay:.5s}
@media(prefers-reduced-motion:reduce){.ini .flota,.ini .mbtns b.act,.ini .rol div,.ini .burbuja,.ini .llave path{animation:none}
.ini .llave path{stroke-dashoffset:0}
.ini-js .rev{opacity:1;transform:none;transition:none}}
/* ---------- cierre ---------- */
.ini .cierre{text-align:center;padding:72px 0 88px;position:relative;overflow:hidden}
.ini .cierre::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 100%,rgba(249,115,22,.25),transparent 70%);z-index:-1}
.ini .cierre h2{font-size:clamp(2.2rem,7vw,4rem);text-transform:uppercase}
.ini .cierre h2 em{font-style:normal;color:var(--marca-usable)}
.ini .cierre p{margin:14px auto 26px;color:var(--suave);max-width:44ch}
.ini .cierre .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ---------- planes ---------- */
.ini .planes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ini .planes.muchos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(270px,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 18px}
.ini .planes.muchos .plan{scroll-snap-align:start}
.ini .plan{background:var(--panel);border:1px solid var(--borde);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.ini .plan.dest{border-color:var(--marca);background:linear-gradient(180deg,rgba(249,115,22,.12),var(--panel) 60%)}
.ini .plan-mas{position:absolute;top:-12px;left:24px;background:var(--marca);color:var(--sobre-marca);font:600 .68rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.ini .plan h3{font-size:1.5rem;text-transform:uppercase}
.ini .precio{font:700 2.6rem/1 var(--display)}
.ini .precio small{font:400 .9rem var(--cuerpo);color:var(--tenue)}
.ini .plan-para{color:var(--suave);font-size:.9rem}
.ini .plan ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--suave);font-size:.94rem;flex:1}
.ini .plan li::before{content:"✓";color:var(--ok);margin-right:8px;font-weight:700}
.ini .plan li.y-mas::before{content:""}
.ini .nota-planes{margin-top:18px;color:var(--tenue);font-size:.88rem}
.ini .vacio{padding:34px;border:1px dashed var(--borde);border-radius:22px;text-align:center;color:var(--suave);display:grid;gap:14px;justify-items:center}

/* ---------- las portadas de los torneos (sin foto: color + logo) ---------- */
.ini .g1{background:linear-gradient(135deg,#c2410c,#7c2d12)}
.ini .g2{background:linear-gradient(135deg,#0e7490,#164e63)}
.ini .g3{background:linear-gradient(135deg,#7e22ce,#4c1d95)}
.ini .g4{background:linear-gradient(135deg,#15803d,#14532d)}
.ini .g5{background:linear-gradient(135deg,#be185d,#831843)}
.ini .g6{background:linear-gradient(135deg,#b45309,#78350f)}
.ini .g7{background:linear-gradient(135deg,#1d4ed8,#1e3a8a)}
.ini .g8{background:linear-gradient(135deg,#475569,#1e293b)}
.ini .logo .escudo-grande,.ini .logo .escudo-inicial{width:68px;height:68px;border-radius:50%;object-fit:cover;background:#fff;color:#7c2d12;font:700 1.35rem/1 var(--display);display:grid;place-items:center}
.ini .torneo h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini .torneo{grid-template-columns:none;padding:0;gap:0;display:block}
.ini .torneo .cuerpo h3{margin:0}
.ini .torneo .dato{margin:6px 0 0}

/* 7.2.0: precio de oferta */
.ini .plan .precio-lista{font:500 1.2rem var(--display);color:var(--tenue);text-decoration:line-through;margin-right:4px}
.ini .plan-oferta{display:inline-block;align-self:flex-start;background:var(--ok);color:#06210f;font:600 .68rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.ini .plan-hasta{margin:-4px 0 0;font-size:.82rem;color:var(--tenue)}