/* Zona 14 · sistema «Midnight command center, coral neon» (guía de John, 20/10/2026) */
:root{
  --canvas:#040506; --card:#07080a; --recessed:#111214; --graphite:#1b1c1e; --border:#363739;
  --ice:#ffffff; --frost:#e6e6e6; --mist:#9c9c9d; --fog:#6a6b6c; --on-tint:#fff;
  --coral:#ff6363; --ember:#452324; --sky:#63a1ff; --cobalt:#143ca3; --deepspace:#02193b; --green:#59d499;
  --btn:#e6e6e6; --btn-txt:#454647;
  --edge:rgba(255,255,255,.08); --edge-strong:rgba(255,255,255,.18);
  --glass:#07080a; --wash:rgba(255,255,255,.05); --tint:#1b1c1e;
  --skywash:none;
  --sh-key:rgba(255,255,255,.05) 0 1px 0 0 inset, rgba(255,255,255,.12) 0 0 0 1px, rgba(0,0,0,.2) 0 -1px 0 0 inset;
  --sh-card:var(--sh-key);
  --sh-modal:rgba(255,255,255,.1) 0 1px 0 0 inset, rgba(0,0,0,.4) 0 30px 50px 0, rgba(3,15,129,.09) 0 4px 24px 0, rgba(255,255,255,.06) 0 0 0 1px inset;
  --sh-btn:rgba(0,0,0,.03) 0 7px 3px 0, rgba(0,0,0,.25) 0 4px 4px 0;
  --deep:#07080a; --header:rgba(4,5,6,.6);
  --f-body:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --f-display:'Inter',system-ui,sans-serif;
  --f-mono:'Geist Mono','JetBrains Mono',Menlo,monospace;
  /* colores que lee la animación */
  --pitch:#307d51; --pitch-alt:#348a59; --pitch-line:rgba(255,255,255,.55); --pitch-grid:rgba(255,255,255,.025);
  --att:#ff6363; --def:#16213a; --oro:#e8b923; --recibe:#ffd23f; --halo:#ff6363; --pass:rgba(255,255,255,.75); --shot:#63a1ff; --violet:#ff6363; --blueprint:#ff6363;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--frost);font:400 16px/1.55 var(--f-body);font-feature-settings:'calt','kern','liga','ss03';overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.h{font-family:var(--f-display);font-weight:500;line-height:1.15;margin:0;color:var(--ice);letter-spacing:.004em}
.grad{color:var(--ice)}
.muted{color:var(--mist)} .helper{color:var(--fog)}

/* etiqueta de sección */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mist)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--coral);transform:rotate(45deg);border-radius:1px;flex:none}
.eyebrow.left{justify-content:flex-start}

/* cabecera: barra de cristal flotante */
header{position:sticky;top:12px;z-index:10;padding:0 16px}
header .wrap{display:flex;align-items:center;gap:16px;padding:8px 8px 8px 16px;flex-wrap:wrap;background:var(--header);backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px);border:1px solid var(--border);border-radius:12px;max-width:1168px}
.logo{display:flex;align-items:center;gap:8px;font:500 14px var(--f-body);text-decoration:none;color:var(--ice)}
.logo::before{content:"";width:12px;height:12px;background:var(--coral);transform:rotate(45deg);border-radius:2px}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1;justify-content:center}
nav a{text-decoration:none;font:500 13px var(--f-body);padding:6px 10px;border-radius:8px;color:var(--mist)}
nav a:hover,nav a.on{color:var(--ice);background:var(--wash)}
.pill{display:inline-block;text-decoration:none;font:500 13px var(--f-body);padding:8px 12px;border-radius:8px;color:var(--frost);background:var(--wash);border:1px solid var(--border);cursor:pointer}
.pill:hover{color:var(--ice);border-color:#4a4b4d}
.pill.solid{background:var(--graphite)}
.pill.cta{background:var(--btn);color:var(--btn-txt);border-color:transparent;box-shadow:var(--sh-btn)}
.pill.cta:hover{background:#fff;color:#2f3031}
select.pill{appearance:none;padding-right:12px}
select.pill option{background:var(--card);color:var(--frost)}
.tema{width:36px;padding:7px 0;text-align:center}

/* portada: composición de luz roja y azul */
.hero{position:relative;padding:120px 0 64px;text-align:center;margin-top:-64px;overflow:hidden}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:-10%;right:-10%;top:90px;height:240px;
  background:linear-gradient(100deg,transparent 18%,rgba(255,99,99,.85) 32%,rgba(255,99,99,.35) 46%,transparent 52%,transparent 58%,rgba(255,99,99,.55) 70%,transparent 84%);
  filter:blur(40px);transform:rotate(-8deg);opacity:.75}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%)}
:root[data-theme=light] .hero-bg{opacity:.7;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 45%,#000 55%,transparent 95%);mask-image:radial-gradient(ellipse 85% 85% at 50% 45%,#000 55%,transparent 95%)}
.hero h1{font-size:clamp(64px,13vw,160px);font-weight:600;line-height:1;letter-spacing:.004em;margin:20px 0 0;text-shadow:0 4px 60px rgba(0,0,0,.5)}
.hero p.lead{max-width:560px;margin:20px auto 0;color:#c9c9ca;font-size:18px;line-height:1.4}
.meta{font:400 12px var(--f-mono);color:var(--fog);letter-spacing:.017em;margin-top:20px}
section.block{padding:56px 0 104px}
section.block .h.sec{font-size:clamp(32px,5vw,56px);font-weight:400;text-align:center;margin:16px 0 12px}
section.block .intro{max-width:560px;margin:0 auto 48px;text-align:center;color:var(--mist);font-size:18px}
.latest{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.latest h2{font-size:clamp(32px,4.5vw,56px);font-weight:400;margin:16px 0 16px}
.latest p{color:var(--mist);font-size:18px;line-height:1.45;margin:0 0 28px}

/* tarjetas tipo tecla */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{display:block;text-decoration:none;background:var(--card);border-radius:16px;padding:24px;box-shadow:var(--sh-key);transition:box-shadow .2s,background .2s}
.card:hover{background:#0b0c0f;box-shadow:rgba(255,255,255,.05) 0 1px 0 0 inset, rgba(255,255,255,.25) 0 0 0 1px, rgba(0,0,0,.2) 0 -1px 0 0 inset}
.card.warm{background:linear-gradient(180deg,var(--ember),var(--card) 70%)}
.card .top{display:flex;justify-content:space-between;gap:8px;font:400 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fog)}
.card h3{font:500 24px/1.15 var(--f-body);color:var(--ice);margin:16px 0 8px}
.card p{color:var(--mist);margin:0 0 16px;font-size:14px;line-height:1.5}
.row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--edge);padding:10px 0;font-size:14px;color:var(--fog)}
.row b{color:var(--frost);font-weight:500}
.go{color:var(--ice);font-weight:500;font-size:14px}
.badge{display:inline-block;background:var(--graphite);color:var(--ice);border-radius:6px;padding:2px 6px;font:500 12px var(--f-body)}
.badge.coral{background:var(--coral);color:#1a0505}

/* reproductor */
.player{background:var(--deep);border-radius:20px;padding:20px;box-shadow:var(--sh-modal)}
.player-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.player-head strong{font:600 24px/1.15 var(--f-body);color:var(--ice);display:block}
.player-head small{color:var(--fog);font-size:12px;line-height:1.4}
.player-head .min{background:var(--coral);color:#1a0505;font:500 13px var(--f-mono);padding:3px 8px;border-radius:6px}
.player svg{width:100%;height:auto;display:block;margin-top:16px;border-radius:12px;box-shadow:var(--sh-key)}
.player .cap{background:var(--recessed);border-radius:12px;padding:12px 14px;margin:16px 0;min-height:3.6em;font-size:14px;line-height:1.45;color:var(--mist);border-inline-start:2px solid var(--coral)}
.player .cap b{color:var(--ice);font-weight:600}
.player .cap .n{font:500 12px var(--f-mono);color:var(--coral);margin-inline-end:10px}
.player .ctrl{display:flex;align-items:center;gap:6px}
.player .bar{flex:1;height:2px;background:var(--graphite);border-radius:2px;margin-inline-end:8px}
.player .bar i{display:block;height:100%;background:var(--coral);border-radius:2px;transition:width .3s}
.player button{background:var(--graphite);border:1px solid var(--border);color:var(--frost);border-radius:8px;padding:5px 12px;font:500 13px var(--f-body);cursor:pointer}
.player button:hover{color:var(--ice);border-color:#4a4b4d}
.player .steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:s}
.player .steps li{counter-increment:s;display:flex;gap:10px;padding:6px 0;color:var(--fog);font-size:14px;line-height:1.45;cursor:pointer}
.player .steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:var(--graphite);color:var(--mist);display:grid;place-items:center;font:500 11px var(--f-mono)}
.player .steps li.on{color:var(--ice)}
.player .steps li.on::before{background:var(--coral);color:#1a0505}
.pitchwrap{position:relative;margin-top:16px}
.pitchwrap svg{margin-top:0}
.banner{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);background:var(--coral);color:#1a0505;font:600 clamp(14px,3.4vw,22px)/1 var(--f-body);padding:.6em 1.1em;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);white-space:nowrap;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.banner[hidden]{display:none}
@keyframes pop{from{transform:translateX(-50%) scale(.5);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.player-head .ttl{display:flex;gap:12px;align-items:center}
.esc{display:flex;gap:4px}.esc img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9))}
.player .note{color:var(--fog);font-size:12px;margin-top:10px}

/* artículo */
.art{max-width:760px;margin:0 auto;padding:80px 16px 120px;color:#b5b5b6;font-size:17px;line-height:1.65}
.art h1{font-size:clamp(36px,6vw,56px);font-weight:500;line-height:1.12;margin:20px 0 20px}
.art h2{font:500 28px/1.2 var(--f-body);color:var(--ice);margin:2.4em 0 .7em}
.art .lead{color:var(--frost);font-size:20px;line-height:1.45}
.art .box{background:var(--card);border-radius:16px;padding:20px 24px;margin:24px 0;font-size:15px;box-shadow:var(--sh-key)}
.art .box b{color:var(--ice);font-weight:600}
.art blockquote{margin:32px 0;padding:20px 24px;border-radius:16px;background:linear-gradient(135deg,var(--ember),var(--card));box-shadow:var(--sh-key);color:var(--ice);font:400 20px/1.45 var(--f-body)}
.art .player{margin:32px 0}

footer{border-top:1px solid var(--edge);padding:32px 0;color:var(--fog);font:400 12px var(--f-mono);letter-spacing:.017em;text-align:center}

/* tema claro (elegible con el botón de la cabecera) */
:root[data-theme=light]{
  --canvas:#f6f6f7; --card:#ffffff; --recessed:#efeff1; --graphite:#e9e9ec; --border:#dcdce0;
  --ice:#0d0e10; --frost:#2a2b2e; --mist:#5b5c60; --fog:#7d7e82; --on-tint:#0d0e10;
  --btn:#0d0e10; --btn-txt:#fff;
  --edge:rgba(0,0,0,.08); --edge-strong:rgba(0,0,0,.16); --wash:rgba(0,0,0,.04); --tint:#e9e9ec; --ember:#ffe9e9;
  --sh-key:rgba(255,255,255,1) 0 1px 0 0 inset, rgba(0,0,0,.08) 0 0 0 1px, rgba(0,0,0,.04) 0 -1px 0 0 inset, rgba(0,0,0,.04) 0 6px 16px;
  --sh-modal:rgba(0,0,0,.08) 0 0 0 1px, rgba(0,0,0,.08) 0 20px 40px;
  --deep:#ffffff; --header:rgba(255,255,255,.7);
  --def:#16213a; --pass:rgba(255,255,255,.8); --shot:#143ca3; --oro:#d9a400; --hero-line:rgba(15,25,45,.26); --recibe:#f2b400;
}
:root[data-theme=light] .hero p.lead{color:var(--mist)}
:root[data-theme=light] .hero::after{display:none}
:root[data-theme=light] .hero h1{text-shadow:none}
:root[data-theme=light] .card:hover{background:#fff}
:root[data-theme=light] .pill.cta:hover{background:#2f3031;color:#fff}

[dir=rtl] .eyebrow.left{justify-content:flex-start}
@media (max-width:860px){ .latest{grid-template-columns:1fr} .hero{padding-top:100px} nav{justify-content:flex-start} }

/* gráficos de datos del post */
.art [data-viz]{background:var(--card);border-radius:16px;padding:20px;margin:28px 0;box-shadow:var(--sh-key);color:var(--frost)}
.art [data-viz] h4{font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mist);margin:0 0 14px}
.vz-cab{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-weight:600;color:var(--ice);font-size:15px}
.vz-eq{display:flex;align-items:center;gap:8px}.vz-esc img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9));display:block}
.vz-fila{display:grid;grid-template-columns:64px 1fr 64px;gap:12px;align-items:center;padding:6px 0;font-size:15px}
.vz-fila .v{font:500 15px var(--f-mono);color:var(--ice)}.vz-fila .v.b{text-align:end}
.vz-fila small{display:block;text-align:center;color:var(--mist);font-size:12px;margin-bottom:4px}
.vz-barra{display:flex;height:6px;border-radius:999px;overflow:hidden;gap:2px}.vz-barra i{display:block}
.vz-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.vz-dos figure{margin:0}.vz-dos figcaption{margin-bottom:8px}.vz-dos figcaption .vz-eq{font-weight:600;color:var(--ice)}
.vz-dos svg{width:100%;height:auto;display:block;border-radius:10px}.vz-dos small{display:block;color:var(--fog);font-size:12px;margin-top:6px;text-align:center}
.vz-bandas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.vz-col{height:90px;display:flex;align-items:flex-end;background:var(--recessed);border-radius:8px;overflow:hidden}.vz-col i{display:block;width:100%;border-radius:8px 8px 0 0;min-height:2px}
.vz-bandas b{display:block;font:500 22px var(--f-body);color:var(--ice);margin-top:6px}.vz-bandas small{margin:0}
.vz-bandas em{display:block;font:500 12px var(--f-mono);font-style:normal;color:var(--mist)}.vz-bandas em.top{color:var(--ice);font-weight:700}
.vz-bandas span{display:block;font-size:12px;color:var(--fog);margin-top:2px}
svg.vz-xg{width:100%;height:auto;color:var(--mist)}

/* lámina de jugadas */
.plays{margin:28px 0}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.chips button{display:flex;flex-direction:column;gap:2px;text-align:start;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--frost);cursor:pointer;font:500 12px var(--f-body)}
.chips button b{font:600 18px var(--f-body);color:var(--ice)}.chips button span{color:var(--mist)}.chips button em{font:400 11px var(--f-mono);font-style:normal;color:var(--fog)}
.chips button:hover{border-color:#4a4b4d}.chips button.on{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) inset}
.plays .player{margin:0}

/* ficha del partido */
.secnav{position:sticky;top:76px;z-index:9;display:flex;gap:8px;overflow-x:auto;padding:10px 16px;margin:0 auto;max-width:1200px;scrollbar-width:none}
.secnav a{white-space:nowrap;text-decoration:none;font:500 13px var(--f-body);color:var(--frost);background:var(--header);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:999px;padding:7px 14px}
.secnav a:hover{border-color:#4a4b4d;color:var(--ice)}
.ficha{padding-top:24px}
.ficha-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.ficha h2{font:500 28px/1.15 var(--f-body);color:var(--ice);margin:0 0 16px}
.ficha ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.ficha li{color:var(--mist);font-size:15px;line-height:1.5}.ficha li b{color:var(--ice);font-weight:600}
.ficha .card{cursor:default}.ficha .claves{padding:24px}
.leyenda{color:var(--fog);font-size:13px;margin:10px 2px 0}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:36px}
.eqc h3{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.mirar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.mc{cursor:pointer!important;display:flex;flex-direction:column}.mc h3{font:600 18px/1.25 var(--f-body);margin:0 0 10px}
.mc p{flex:1}.mc .muted{color:var(--fog)}
.tg{font:500 10px var(--f-mono);font-style:normal;letter-spacing:.06em;padding:2px 6px;border-radius:6px;vertical-align:2px;margin-inline-start:6px;background:var(--graphite);color:var(--ice)}
.tg.t0{background:var(--coral);color:#1a0505}.tg.t1{background:#4a3a14;color:#ffd88a}
@media (max-width:900px){.ficha-grid{grid-template-columns:1fr}}

/* portada: equipos y destacado */
.xgbar{display:flex;height:6px;border-radius:999px;overflow:hidden;gap:2px}.xgbar i{display:block;background:var(--coral)}.xgbar i+i{background:var(--graphite)}
.spot{display:block;text-decoration:none;border-radius:20px;padding:32px;margin-top:16px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 84px),linear-gradient(100deg,#0b1a2e 0%,#141225 52%,#5a1218 100%);box-shadow:var(--sh-key);position:relative;overflow:hidden}
:root[data-theme=light] .spot{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 84px),linear-gradient(100deg,#eaf1fb 0%,#fff 52%,#ffe1e1 100%)}
.spot .liga{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-top:14px}
.spot h3{font-size:clamp(28px,4.6vw,52px);font-weight:600;line-height:1.05;letter-spacing:-.01em;margin:6px 0 14px;max-width:900px}
.spot h3 .acc{color:var(--coral)}
.spot p{color:var(--ice);opacity:.85;max-width:620px;font-size:17px;line-height:1.5}
.pill-oro{display:inline-flex;gap:6px;background:#f4c542;color:#1a1405;font:700 12px var(--f-body);letter-spacing:.12em;padding:6px 14px;border-radius:999px}
.go-oro{color:#f4c542;font-weight:600;font-size:15px}
:root[data-theme=light] .go-oro{color:#9a6b00}
.coralp{background:var(--coral);color:#1a0505;border:0;font-weight:600}
.stats3{display:flex;gap:44px;flex-wrap:wrap;margin:22px 0}
.stats3 b{display:block;font:700 clamp(30px,4vw,44px)/1 var(--f-body);color:var(--coral)}.stats3 span{display:block;font-size:13px;color:var(--mist);max-width:260px;margin-top:6px}

.byline{color:var(--mist);font-size:14px;margin:-4px 0 22px}.byline b{color:var(--ice);font-weight:600}
.autor{margin-top:18px;font:500 14px var(--f-body);color:var(--mist);letter-spacing:.02em}.autor b{color:var(--ice);font-weight:600}
footer b{color:var(--frost);font-weight:600}

/* menú por países y ligas */
.pais{position:relative}
.pais-b{display:inline-flex;align-items:center;gap:8px}.pais-b i{font-style:normal;font-size:10px;opacity:.7}
.flag{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.2);flex:none}
.menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:240px;background:var(--deep);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-modal);padding:8px;z-index:30;display:grid;gap:2px}
.menu[hidden]{display:none}
.menu a{display:flex;justify-content:space-between;gap:14px;text-decoration:none;font:500 13px var(--f-body);color:var(--frost);padding:8px 10px;border-radius:8px;white-space:nowrap}
.menu a:hover{background:var(--wash);color:var(--ice)}.menu a.todo{color:var(--ice);font-weight:600;box-shadow:inset 0 -1px 0 var(--edge);border-radius:8px 8px 0 0;margin-bottom:4px}
.menu a.vacio{color:var(--fog)}.menu em{font:500 11px var(--f-mono);font-style:normal;color:var(--mist);background:var(--graphite);border-radius:6px;padding:1px 6px}
.menu a.n4,.menu a.n5{padding-inline-start:22px}.menu a.n3{padding-inline-start:16px}.menu a.n2{padding-inline-start:10px}
nav a.dest{color:var(--oro)}nav a.dest:hover{color:var(--ice)}
.ligah{display:flex;align-items:center;gap:14px;margin-bottom:8px}.ligah .flag{width:34px;height:23px}
.subligas{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 28px}.subligas a{text-decoration:none}.subligas a.on{background:var(--coral);color:#1a0505;border-color:transparent}

/* ---------- movimiento tipo Apple: aparición, tarjetas, título ---------- */
.js .reveal{opacity:0;translate:0 32px;scale:.97;filter:blur(10px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),translate 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),scale 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),filter 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms)}
.js .reveal.in{opacity:1;translate:0 0;scale:1;filter:none}
.mcard{position:relative;overflow:hidden;padding:0;display:block;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;will-change:transform}
.mcard:hover{box-shadow:var(--sh-key),0 26px 60px -22px rgba(255,99,99,.42)}
.mcard::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,99,99,.17),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.mcard:hover::after{opacity:1}
.accent{height:4px;background:linear-gradient(90deg,var(--sky),var(--coral),var(--oro),var(--sky));background-size:300% 100%;animation:flow 7s linear infinite}
@keyframes flow{to{background-position:300% 0}}
.mbody{padding:20px 22px 22px;position:relative;z-index:1}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 6px}
.team{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:600 14px/1.2 var(--f-body);color:var(--ice)}
.team img,.ini{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mcard:hover .team img,.mcard:hover .ini,.mcard:hover .clubhead img,.mcard:hover .clubhead .ini{transform:scale(1.14) rotate(-4deg)}
.ini{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--coral),#f4c542);color:#1a0505;font:700 19px var(--f-body);filter:none}
.team:first-child .ini{background:linear-gradient(135deg,var(--sky),#8b7bff)}
.score{display:flex;align-items:center;gap:8px;font:700 clamp(34px,5vw,48px)/1 var(--f-body);letter-spacing:-.02em;color:var(--ice)}.score i{font-style:normal;opacity:.4;font-weight:400}
.lab{font:500 10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin:16px 0 6px;text-align:center}
.dual{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.dual b{font:600 18px var(--f-mono);color:var(--ice);min-width:3.6ch}.dual b.a{color:var(--sky)}.dual.eq{--ca:var(--da);--cb:var(--db)}:root[data-theme=light] .dual.eq{--ca:var(--la);--cb:var(--lb)}.dual.eq b.a{color:var(--ca)}.dual.eq b.b{color:var(--cb)}.dual.eq .bar2 i:first-child{background:var(--ca)}.dual.eq .bar2 i+i{background:var(--cb)}.dual b.b{color:var(--coral);text-align:end}
.bar2{display:flex;gap:4px;height:8px}.bar2 i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--sky)}.bar2 i+i{background:var(--coral)}
.js .reveal .bar2 i{width:0;transition:width 1.5s cubic-bezier(.2,.8,.2,1) .25s}
.js .reveal.in .bar2 i{width:var(--w)}
.ttl{margin:18px 0 4px;color:var(--mist);font-size:14px;line-height:1.45}
.mcard .go{display:inline-block;margin-top:14px;transition:transform .3s}.mcard:hover .go{transform:translateX(5px)}
.clubhead{display:flex;align-items:center;gap:14px;margin:16px 0 12px}.clubhead img,.clubhead .ini{width:64px;height:64px}.clubhead h3{margin:0;font:600 26px/1.1 var(--f-body);color:var(--ice)}
.club .row{margin-top:6px}
/* destacado: luz que se mueve */
.spot>*{position:relative;z-index:1}
.spot::before{content:"";position:absolute;width:560px;height:560px;right:-140px;top:-200px;background:radial-gradient(circle,rgba(255,99,99,.5),transparent 65%);filter:blur(34px);animation:orbe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes orbe{from{transform:translate(0,0) scale(1)}to{transform:translate(-160px,90px) scale(1.25)}}
:root[data-theme=light] .spot::before{opacity:.5}
.stats3 b{background:linear-gradient(120deg,var(--coral),#f4c542,var(--coral));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
/* título */
.hero h1.titulo{display:flex;justify-content:center;align-items:baseline;gap:.18em;font-weight:700;letter-spacing:-.035em;line-height:.95;margin:22px 0 0;font-size:clamp(66px,15vw,184px);perspective:900px}
.titulo .w,.titulo .n14{display:inline-flex}
.titulo .l,.titulo .d{display:inline-block;animation:sube 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 85ms + 120ms)}
.titulo .l{color:var(--ice)}
.titulo .d{background:linear-gradient(120deg,#ff6363,#f4c542 45%,#ff6363);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,99,99,.22));animation:giro 1.3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 110ms),0s}
@keyframes sube{from{opacity:0;transform:translateY(46px) scale(.9);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes giro{from{opacity:0;transform:translateY(60%) rotateX(-80deg);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes barrido{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero h1.titulo{transform:translateY(calc(var(--sy,0) * -.14px)) scale(calc(1 - var(--sy,0) * .00028));opacity:calc(1 - var(--sy,0) / 950)}
.hero .lead,.hero .autor{opacity:calc(1 - var(--sy,0) / 520)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1!important;translate:none!important;scale:1!important;filter:none!important}.js .reveal .bar2 i{width:var(--w)!important}}

.clubhead img{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 6px 14px rgba(0,0,0,.35))}

/* fondo de la portada: luz que se mueve (coral, azul y dorado) */
.hero::after{display:none}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:deriva 14s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;left:12%;top:-120px;background:#ff6363}
.aurora i:nth-child(2){width:460px;height:460px;right:10%;top:-60px;background:#63a1ff;animation-delay:-5s;opacity:.4}
.aurora i:nth-child(3){width:380px;height:380px;left:42%;top:120px;background:#f4c542;animation-delay:-9s;opacity:.28}
@keyframes deriva{to{transform:translate(70px,50px) scale(1.2)}}
:root[data-theme=light] .aurora i{opacity:.34}:root[data-theme=light] .aurora i:nth-child(2){opacity:.28}:root[data-theme=light] .aurora i:nth-child(3){opacity:.22}

/* campo trazado con la zona 14 alrededor del «14» (se coloca por JS) */
.dibujo{position:absolute;z-index:-1;pointer-events:none;max-width:none;left:50%;top:0;width:min(1100px,96vw);transform:translateX(-50%);overflow:visible}
.dibujo .ln{fill:none;stroke:var(--hero-line,rgba(255,255,255,.26));stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:3200;stroke-dashoffset:3200;animation:traza 3.4s cubic-bezier(.2,.7,.2,1) .3s forwards}
.dibujo .z{fill:rgba(255,99,99,.10);stroke:#ff6363;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:9 7;opacity:0;animation:apar 1.2s ease 2s forwards,marcha 2.4s linear 2s infinite,late 4s ease-in-out 3s infinite}
.dibujo .pase{fill:none;stroke:#ff6363;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:pasea 7s linear 2.4s infinite}
.dibujo .bal{fill:var(--ice);stroke:#ff6363;stroke-width:.4;filter:drop-shadow(0 0 3px rgba(255,99,99,.85))}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes apar{to{opacity:1}}
@keyframes marcha{to{stroke-dashoffset:-32}}
@keyframes late{50%{fill:rgba(255,99,99,.22)}}
@keyframes pasea{0%{stroke-dashoffset:1;opacity:.65}45%{stroke-dashoffset:0;opacity:.65}85%{stroke-dashoffset:0;opacity:.65}100%{stroke-dashoffset:0;opacity:0}}
@media (max-width:700px){.dibujo .ln{stroke-width:1}}

/* título: Montserrat extranegra en cursiva, más pequeño */
.hero h1.titulo{font-family:'Montserrat','Inter',sans-serif;font-style:italic;font-weight:900;font-size:clamp(58px,10vw,96px);letter-spacing:-.01em}
.titulo .l,.titulo .d{padding-right:.06em}

/* ---------- móvil ---------- */
@media (max-width:700px){
  header{top:8px;padding:0 10px}
  header .wrap{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .logo{order:1;margin-inline-end:auto}
  .tema{order:2}
  select.pill{order:3;padding:7px 8px;font-size:12px}
  nav{order:4;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:6px;scrollbar-width:none;margin:0 -4px;padding:2px 4px}
  nav::-webkit-scrollbar{display:none}
  nav a,.pais-b{white-space:nowrap;flex:none}
  .pais{position:static}
  .menu{position:absolute;left:8px;right:8px;top:calc(100% + 6px);min-width:0}
  .secnav{position:static;padding:8px 12px}
  .hero{padding-top:128px}
  .art{padding-top:48px}
  .mbody{padding:18px 16px 18px}
  .player{padding:14px}
  .player-head strong{font-size:20px}
  .player .ctrl{flex-wrap:wrap}
  .banner{font-size:14px}
}
.vz-dos .vz-dir{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}.vz-dos .vz-dir svg{width:130px;height:16px;border-radius:0}.vz-dos .vz-dir small{margin:0}