/* copariver.com · página pública de la Copa River Medellín XI (diseño aprobado del prototipo v3).
   Firma: la banda diagonal roja de River. Paleta: Noche, Asfalto, Rojo River, Blanco banda, Luz de estadio
   (solo en vivo y gol) y Gris tribuna. Oscura por defecto; "Modo claro" la invierte. Con la tecnología de tallen.club. */
/* Bloques vivos (manual de marca 2026-11-07): el rojo River es el bloque protagonista, uno por pantalla; bloques
   separados por color y espacio, sin bordes ni sombras; tallen.club firma pequeño. Móvil primero, una columna que se
   abre en rejilla en tableta y escritorio. */
:root{
  --ground:#f2f3f5; --surface:#ffffff; --sunk:#e8eaee; --line:#e2e5e9; --line-strong:#7a818a;
  --ink:#111317; --on-ink:#ffffff; --muted:#585f69;
  --club:#c8102e; --on-club:#ffffff; --club-soft:#fbe6e9; --club-texto:#a60d26; --club-dot:#e0243f;
  --ambar:#f59e0b; --on-ambar:#111317; --ambar-texto:#8f5300; --ambar-soft:#fdecc8;
  --ok:#157a42; --ok-soft:#dcf3e5; --pend:#2251c9; --pend-soft:#e3eafb; --pel:#c0281f; --pel-soft:#fbe3e1;
  --focus:#111317; --kb:#d5d9df; --tj-am:#f2c200; --tj-roja:#d6202a; --proto:#23272d; --on-proto:#f2f4f6; --proto-sunk:#343a42;
  --scrim:rgba(17,19,23,.48); --shadow:0 12px 32px rgba(17,19,23,.14);
  --f-display:"Bricolage Grotesque","Arial Rounded MT Bold",Arial,sans-serif;
  --f-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-m:14px; --r-l:24px; --r-xl:32px;
  --p-bg:#0E0F13; --p-panel:#1A1C22; --p-panel2:#24262D; --p-line:#2C2F37; --p-ink:#F4F4F2; --p-on-ink:#0E0F13; --p-muted:#8A8F98;
  --p-red:#C8102E; --p-red-texto:#FF6178; --p-red-soft:#3A121A; --p-live:#FFD27A; --p-ok:#4cd38a; --p-ok-soft:#0f2a1b;
  --p-pend:#8cb2ff; --p-pend-soft:#17223b; --p-pel:#ff7b70; --p-pel-soft:#3a1714; --p-focus:#FFD27A;
  --hero-ink:#F4F4F2; --hero-muted:rgba(244,244,242,.82); --hero-stripe:#F4F4F2; --hero-btn:rgba(244,244,242,.16); --hero-shadow:0 2px 12px rgba(0,0,0,.6);
  --hero-bg:linear-gradient(0deg,rgba(14,15,19,.92) 0%,rgba(14,15,19,.35) 60%,rgba(14,15,19,.55) 100%),var(--img-ciudad) center 45%/cover no-repeat,#0E0F13;
  --img-escudo:none; --img-titulo:none; --img-masc:none; --img-ciudad:none; --img-banda:none; --img-grunge:none;
  --rebote:cubic-bezier(.34,1.56,.64,1); --suave:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0f1114; --surface:#1a1d22; --sunk:#23272d; --line:#2b3036; --line-strong:#6b737d;
  --ink:#f2f4f6; --on-ink:#111317; --muted:#a4acb6;
  --club:#c8102e; --on-club:#ffffff; --club-soft:#3a141b; --club-texto:#ff8b9b; --club-dot:#ff4d64;
  --ambar-texto:#f5a524; --ambar-soft:#33260a;
  --ok:#4cd38a; --ok-soft:#10281b; --pend:#8cb2ff; --pend-soft:#16213a; --pel:#ff7b70; --pel-soft:#3a1714;
  --focus:#f59e0b; --kb:#3a4048; --proto:#2b3036; --on-proto:#f2f4f6; --proto-sunk:#3a4048;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0f1114; --surface:#1a1d22; --sunk:#23272d; --line:#2b3036; --line-strong:#6b737d;
  --ink:#f2f4f6; --on-ink:#111317; --muted:#a4acb6;
  --club:#c8102e; --on-club:#ffffff; --club-soft:#3a141b; --club-texto:#ff8b9b; --club-dot:#ff4d64;
  --ambar-texto:#f5a524; --ambar-soft:#33260a;
  --ok:#4cd38a; --ok-soft:#10281b; --pend:#8cb2ff; --pend-soft:#16213a; --pel:#ff7b70; --pel-soft:#3a1714;
  --focus:#f59e0b; --kb:#3a4048; --proto:#2b3036; --on-proto:#f2f4f6; --proto-sunk:#3a4048;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.45;font-weight:500;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--p-bg)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
h2{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Bloques y piezas comunes */
.pagina{margin:0 auto;padding-block:16px 48px;display:flex;flex-direction:column;gap:12px}
.pagina.pub{max-width:780px}.pagina.mesa{max-width:none}.pagina.pla{max-width:1100px}
.blk{background:var(--surface);border-radius:var(--r-l);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.blk.sunk{background:var(--sunk)}
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.band{background:var(--club);color:var(--on-club);border-radius:var(--r-xl);padding:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.band.comp{padding:16px 18px;border-radius:var(--r-l)}
.esc{display:block;width:72px;height:72px;border-radius:50%;background:#ffffff var(--img-escudo) center/94% no-repeat;flex:none}
.band.comp .esc{width:52px;height:52px}
.band h1{font-size:clamp(28px,6.4vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.band.comp h1{font-size:clamp(22px,4.6vw,28px);letter-spacing:-.02em}
.band .sub{font-size:15px;font-weight:600;opacity:.92;margin-top:6px}
.band .txt{flex:1 1 220px;min-width:0}
.band .vivoc{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}
.band .vivoc::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--on-club);animation:pulso 1.4s infinite}
.band .bbtn{min-height:44px;border:0;border-radius:999px;padding:0 16px;background:rgba(255,255,255,.16);color:var(--on-club);font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.band .seg{background:rgba(0,0,0,.18)}
.band .seg button{color:var(--on-club)}
.band .seg button[aria-pressed="true"]{background:var(--on-club);color:var(--club)}

.btn{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--sunk);color:var(--ink);font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .16s var(--rebote)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ink);color:var(--on-ink)}
.btn.pel{background:var(--pel-soft);color:var(--pel)}
.btn.ok{background:var(--ok-soft);color:var(--ok)}
.btn.sf{background:var(--surface)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:999px;background:var(--sunk);color:var(--ink);font-weight:700;font-size:13px;border:0;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.pend{background:var(--pend-soft);color:var(--pend)}.chip.pel{background:var(--pel-soft);color:var(--pel)}
.chip.sf{background:var(--surface)}
button.chip,.fchip{min-height:44px;padding:0 16px;font-size:14px;cursor:pointer;background:var(--surface);border:0;border-radius:999px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.blk button.chip,.blk .fchip{background:var(--sunk)}
button.chip[aria-pressed="true"],.fchip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);color:var(--ink);border:0;font-weight:700;font-size:15px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tab[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.tab .n{background:var(--pel);color:var(--surface);border-radius:999px;font-size:12px;padding:1px 7px}

/* Estados: siempre con palabra */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.st.prog{background:var(--sunk);color:var(--muted)}
.st.vivo{background:var(--ink);color:var(--on-ink)}
.st.vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--club-dot);animation:pulso 1.4s infinite}
.st.porval{background:var(--pend-soft);color:var(--pend)}
.st.val{background:var(--ok-soft);color:var(--ok)}
.st.susp{background:var(--pel-soft);color:var(--pel)}
.st.apl,.st.wo{background:var(--sunk);color:var(--ink)}
.st.anu{background:var(--sunk);color:var(--muted);text-decoration:line-through}
.blk .st.prog,.blk .st.apl,.blk .st.wo,.blk .st.anu{background:var(--ground)}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.3}}

/* Cifras: tiles + barra + chips */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{background:var(--sunk);border-radius:var(--r-m);padding:12px 14px;min-width:0}
.tile b{display:block;font-family:var(--f-display);font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.tile small{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:700}
.tile.main{background:var(--ambar-soft)}
.tile.ok{background:var(--ok-soft)}.tile.ok b{color:var(--ok)}
.tile.pend{background:var(--pend-soft)}.tile.pend b{color:var(--pend)}
.tile.mal{background:var(--pel-soft)}.tile.mal b{color:var(--pel)}
.bar{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:inherit;transition:width .9s var(--suave)}
.cap{font-size:13px;color:var(--muted);font-weight:600}

/* Partidos (página pública) */
.lista{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.lista>.mrow:first-child,.hgrp+.mrow{border-top:0}
.mrow .hr{font-weight:700;font-size:14px;line-height:1.25}
.mrow .hr small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:2px}
.mrow .meta{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:2px}
.eq{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.eq span{min-width:0;overflow-wrap:anywhere;font-weight:600}
.eq.gana span{font-weight:800}
.eq b{font-family:var(--f-display);font-size:19px;font-weight:800;min-width:18px;text-align:right}
.eq .seed{font-weight:800}
.eq .hoy{font-weight:500;color:var(--muted);font-size:13px}
.mrow .sx{padding-top:1px}
.hgrp{font-family:var(--f-display);font-weight:700;font-size:16px;padding:14px 0 4px;display:flex;align-items:center;gap:8px}
.flash{animation:gol 1.8s var(--suave)}
@keyframes gol{0%{background:var(--club-soft);transform:scale(1.015)}100%{background:transparent;transform:none}}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.vcard{background:var(--surface);border-radius:var(--r-l);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.vcard .eq b{font-size:30px;letter-spacing:-.03em;line-height:1.05}
.vcard .eq span{font-size:15px}
.vcard.flash{animation:golc 1.8s var(--suave)}
@keyframes golc{0%{background:var(--club-soft);transform:scale(1.02)}100%{background:var(--surface);transform:none}}
.aviso{background:var(--pend-soft);color:var(--ink);border-radius:var(--r-m);padding:12px 16px;display:flex;gap:10px;align-items:flex-start}
.aviso .ic{color:var(--pend);margin-top:1px}
.aviso b{color:var(--pend)}
.filtros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld label,.lab{font-size:12.5px;font-weight:700;color:var(--muted)}
select,input[type="text"],input[type="search"],input[type="number"],input[type="time"],textarea{min-height:44px;border-radius:var(--r-m);border:0;background:var(--sunk);padding:0 12px;font-weight:600;font-size:15px;width:100%;min-width:0}
textarea{padding:10px 12px;min-height:72px;resize:vertical}
.blk select,.blk input,.blk textarea{background:var(--sunk)}
.sheet select,.sheet input{background:var(--sunk)}

/* Tablas */
.tw{overflow-x:auto;margin-inline:-6px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{font-size:12px;color:var(--muted);font-weight:700;text-align:right;padding:6px 7px;white-space:nowrap}
td{padding:9px 7px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
th.l,td.l{text-align:left}
td.eqn{white-space:normal;min-width:150px;font-weight:600}
td.pts{font-family:var(--f-display);font-weight:800;font-size:16px}
td.pos{width:28px;color:var(--muted);font-weight:700;text-align:left}
tr.lider td{background:var(--club-soft);border-top-color:transparent}
tr.lider+tr td{border-top-color:transparent}
tr.lider td:first-child{border-radius:12px 0 0 12px}
tr.lider td:last-child{border-radius:0 12px 12px 0}
tr.lider td.pos{color:var(--club-texto)}
tr.lider td.eqn{font-weight:800}
.pasa{font-size:11.5px;font-weight:700;color:var(--ok);margin-left:6px}
.mini{min-height:44px;min-width:44px;padding:0 8px;border:0;border-radius:999px;background:var(--sunk);font-weight:800;cursor:pointer}

/* Llaves */
.llave{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.llave .col{display:flex;flex-direction:column;gap:8px}
.cruce{background:var(--sunk);border-radius:var(--r-m);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cruce.final{background:var(--club-soft)}
.cruce .eyebrow{font-size:11px}
.cruce .lado{display:flex;flex-direction:column;gap:0;min-width:0}
.cruce .lado b{font-weight:800;overflow-wrap:anywhere}
.cruce .lado small{color:var(--muted);font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.cruce .vs{font-size:12px;color:var(--muted);font-weight:700}

/* Rankings */
.rk{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.rk:first-child{border-top:0}
.rk .p{font-family:var(--f-display);font-weight:800;color:var(--muted);font-size:17px}
.rk .n{font-weight:700;overflow-wrap:anywhere}
.rk .n small{display:block;color:var(--muted);font-weight:600;font-size:12.5px}
.rk .v{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.03em}
.rk:first-child .p{color:var(--club-texto)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tj{display:inline-block;width:11px;height:15px;border-radius:2px;vertical-align:-2px;flex:none}
.tj.am{background:var(--tj-am)}.tj.roja{background:var(--tj-roja)}
.regla{display:flex;flex-direction:column;gap:0}
.regla li{padding:10px 0;border-top:1px solid var(--line);list-style:none}
.regla li:first-child{border-top:0}
ol.des{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font-weight:600}
.firma{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:20px;color:var(--muted);font-size:13px;font-weight:600}
.firma .tc{font-family:var(--f-display);font-weight:800;color:var(--ink);letter-spacing:-.02em;font-size:15px}
.firma .tc i{font-style:normal;color:var(--ambar)}

/* Página pública. Firma: LA BANDA, la franja diagonal roja de la camiseta de River. Paleta: Noche, Asfalto, Rojo River,
   Blanco banda, Luz de estadio (solo en vivo y gol) y Gris tribuna. Oscura por defecto; la versión clara la activa el
   visitante o el tema claro explícito del visor. Mesa y planillero siguen claros (se usan al sol). */
body.p-claro{
  --p-bg:#F4F4F2; --p-panel:#FFFFFF; --p-panel2:#EBEBE8; --p-line:#E0E0DC; --p-ink:#0E0F13; --p-on-ink:#F4F4F2; --p-muted:#5F646D;
  --p-red-texto:#A80D26; --p-red-soft:#FBE4E8; --p-ok:#157a42; --p-ok-soft:#dcf3e5; --p-pend:#2251c9; --p-pend-soft:#e3eafb;
  --p-pel:#c0281f; --p-pel-soft:#fbe3e1; --p-focus:#0E0F13;
  --hero-ink:#0E0F13; --hero-muted:#4B5059; --hero-stripe:#0E0F13; --hero-btn:rgba(14,15,19,.08); --hero-shadow:none;
  --hero-bg:linear-gradient(rgba(244,244,242,.6),rgba(244,244,242,.6)),var(--img-banda) center 30%/cover no-repeat,#F4F4F2}
body.v-pub{background:var(--p-bg)}
.pubv{--ground:var(--p-bg); --surface:var(--p-panel); --sunk:var(--p-panel2); --line:var(--p-line); --ink:var(--p-ink); --on-ink:var(--p-on-ink);
  --muted:var(--p-muted); --club-soft:var(--p-red-soft); --club-texto:var(--p-red-texto); --ambar-soft:var(--p-red-soft); --ok:var(--p-ok);
  --ok-soft:var(--p-ok-soft); --pend:var(--p-pend); --pend-soft:var(--p-pend-soft); --pel:var(--p-pel); --pel-soft:var(--p-pel-soft);
  --focus:var(--p-focus); --f-display:"Big Shoulders Display","Bricolage Grotesque",Impact,sans-serif; color:var(--ink); color-scheme:dark}
body.p-claro .pubv{color-scheme:light}
.pubv h2{font-size:28px;font-weight:800;letter-spacing:.01em;line-height:1}
.pubv h3{font-size:22px;font-weight:800;letter-spacing:.01em;line-height:1}
.pubv .blk-h>h2::before,.pubv .blk-h>h3::before{content:"";display:inline-block;width:10px;height:.82em;margin-right:10px;background:var(--p-red);transform:skewX(-22deg);vertical-align:-.04em}
.pubv .tile b{font-size:40px;font-weight:800;letter-spacing:0}
.pubv .tile.main b{color:var(--p-ink)}
.pubv .bar i{background:var(--p-red)}
.pubv .st.vivo{background:var(--p-live);color:#0E0F13}
.pubv .st.vivo::before{background:#0E0F13}
.pubv button.chip[aria-pressed="true"]{background:var(--p-ink);color:var(--p-bg)}
.pubv .aviso{background:var(--p-panel2)}
.pubv .aviso .ic{color:var(--p-ink)}
.pubv .aviso b{color:var(--p-red-texto)}
.pubv .flash,.pubv .vi.flash{animation:golp 1.8s var(--suave)}
@keyframes golp{0%{background:rgba(255,210,122,.30)}100%{background:transparent}}
.pubv .rk .v{font-size:30px}
.pubv .blk{container-type:inline-size}
.pubv td.pts{font-size:19px}
.pshell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;padding-block:16px 48px}
.pmain{display:flex;flex-direction:column;gap:14px;min-width:0}
.pside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);align-self:start;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--p-panel);border-radius:var(--r-l);padding:14px;display:flex;flex-direction:column;gap:14px}
.titulo{display:block;aspect-ratio:1140/616;width:100%;border-radius:16px;background:var(--img-titulo) center/cover no-repeat,#0E0F13}
.titulo.sm{width:auto;height:46px;border-radius:8px}
.snav{display:flex;flex-direction:column;gap:2px}
.snav button{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 20px;border:0;border-radius:12px;background:none;color:var(--muted);font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.snav button:hover{color:var(--ink)}
.snav button[aria-current="page"]{color:var(--ink);background:var(--p-panel2)}
.snav button[aria-current="page"]::before{content:"";position:absolute;left:8px;top:11px;bottom:11px;width:5px;background:var(--p-red);transform:skewX(-22deg)}
.snav .cnt{margin-left:auto;background:var(--p-live);color:#0E0F13;border-radius:999px;font-size:12px;padding:1px 8px}
.tjic{display:inline-grid;place-items:center}
.promo{display:flex;flex-direction:column;align-items:stretch;gap:10px;border-radius:var(--r-l);padding:14px;color:#0E0F13;background:var(--img-banda) center/cover no-repeat,#F4F4F2}
.masc-l{display:block;flex:none;width:100%;height:164px;border-radius:14px;background:#FFFFFF var(--img-masc) center/contain no-repeat}
.promo-t{display:flex;flex-direction:column;gap:4px;align-items:stretch;min-width:0;background:rgba(255,255,255,.92);border-radius:14px;padding:10px 10px 10px 12px}
.promo-t b{font-family:"Big Shoulders Display",var(--f-display);font-weight:800;font-size:26px;line-height:1.05;overflow-wrap:anywhere;text-wrap:balance}
.promo-t span{font-size:13px;font-weight:700;color:#3F434B}
.promo-t .btn{margin-top:6px;width:100%;min-height:44px;padding:0 12px;font-size:14px;white-space:nowrap}
.pubv .promo{max-width:420px}
@media (max-height:980px){.pside{position:static;max-height:none;overflow:visible}}
.btn.red{background:var(--p-red);color:#FFFFFF}
.firma-s{font-size:12px;color:var(--muted);font-weight:600}
.firma-s .tc{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--ink)}
.firma-s .tc i{font-style:normal;color:var(--ambar)}
.pubv .firma .tc{font-family:"Bricolage Grotesque",sans-serif}
.ptop{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.ptop-m{display:none;align-items:center;gap:10px}
.ptit{font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:.01em;margin-right:auto;line-height:1}
.srch{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:0 8px 0 14px;min-height:44px;flex:0 1 300px;color:var(--muted)}
.srch input{background:transparent!important;min-height:44px;padding:0;flex:1;color:var(--ink)}
.chip.fecha{background:var(--surface);min-height:44px;padding:0 14px}
.tbtn{min-height:44px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-weight:700;padding:0 14px;cursor:pointer}
.esc.sm,.esc.md{width:44px;height:44px}
.ticker{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:var(--r-m);background:var(--surface);color:var(--ink);padding:10px 14px;min-height:44px;cursor:pointer}
.ticker>span:not(.chip){min-width:0;flex:1}.ticker b{color:var(--p-red-texto);margin-right:6px}
@media (max-width:1599px){.ptop .chip.fecha{display:none}}
.tb-s{display:none}
.ptop .srch{flex-basis:280px}
.ftop{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;padding:0 4px}
.ftop .ft-t{font-size:12.5px;font-weight:600;color:var(--muted)}
.tcl{font-family:"Bricolage Grotesque","Arial Rounded MT Bold",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--p-ink)}
.tcl i{font-style:normal;color:var(--ambar)}
.sep-m{display:block;height:1px;background:var(--line);margin:2px 8px}
.snav-ext{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 20px;border-radius:12px;color:var(--muted);font-weight:700;font-size:15px;text-decoration:none}
.snav-ext:hover{color:var(--ink);background:var(--p-panel2)}
.mas+.sep-m{margin:10px 0}
.mas~.snav-ext{padding-left:12px;background:var(--sunk);color:var(--ink)}
/* Hero: la banda cruza la foto nocturna del estadio */
.hero{position:relative;isolation:isolate;border-radius:28px;overflow:hidden;color:var(--hero-ink);padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:min(70vh,640px);background:var(--hero-bg)}
.hero::before{content:"";position:absolute;top:-20%;bottom:-20%;z-index:-1;transform:skewX(-24deg)}
.hero::before{left:calc(50% - 130px);width:260px;background:var(--p-red)}
.hero>*{position:relative}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hero-eb{font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-muted);text-shadow:var(--hero-shadow)}
.hero .st.prog{background:var(--hero-btn);color:var(--hero-ink)}
.hero-t{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:40px}
.hero-mid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:start}
.ht{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0;text-shadow:var(--hero-shadow)}
.ht b{font-family:"Big Shoulders Display",sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:.01em;overflow-wrap:anywhere;text-wrap:balance;line-height:1.05}
.ht ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--hero-muted);display:flex;flex-direction:column;gap:2px}
.ht ul span{color:var(--hero-ink);font-weight:800}
.hs{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:2px;color:#FFFFFF;min-width:150px}
.hs-n{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:clamp(84px,10vw,152px);line-height:.82;letter-spacing:-.01em;display:flex;gap:.08em;align-items:center}
.hs-n i{font-style:normal;font-size:.5em;opacity:.8}
.hs-n.cd{font-size:clamp(60px,7vw,100px)}
.hmin{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:26px;line-height:1;background:var(--p-live);color:#0E0F13;border-radius:999px;padding:4px 14px}
.hs small,.hero-nav span{font-weight:700;font-size:12.5px;color:#F4F4F2;background:rgba(14,15,19,.72);border-radius:999px;padding:3px 10px}
.sweep{position:absolute!important;top:-20%;bottom:-20%;left:0;width:60px;background:var(--p-live);transform:translateX(-200px) skewX(-24deg);opacity:0;z-index:2;pointer-events:none}
.hero.gol .sweep{animation:barrido 1s cubic-bezier(.2,.8,.2,1) 1}
.hero.gol .hs-n{animation:golh 1s var(--rebote) 1}
@keyframes barrido{0%{transform:translateX(-200px) skewX(-24deg);opacity:.95}100%{transform:translateX(1600px) skewX(-24deg);opacity:.6}}
@keyframes golh{0%{transform:scale(1.14)}100%{transform:none}}
.hero-nav{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:700;color:var(--hero-muted)}
.hbtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--hero-btn);color:var(--hero-ink);font-size:22px;font-weight:800;cursor:pointer}
/* Insignias: iniciales sobrias, sin escudos inventados */
.bdg{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font:800 13px/1 "Big Shoulders Display",sans-serif;letter-spacing:.02em;background:var(--p-panel2);color:var(--p-ink)}
.vi .bdg,.gm .bdg,.vacio .bdg{background:var(--p-panel)}
.bdg.s{width:28px;height:28px;font-size:11px}
.bdg.xl{width:76px;height:76px;font-size:28px;background:var(--p-ink);color:var(--p-bg)}
.bdg.escb{background:#FFFFFF var(--img-escudo) center/92% no-repeat}
.bdg.q{color:var(--muted)}
.eqc{display:flex;align-items:center;gap:8px;min-width:0}
.eqc>span{min-width:0;overflow-wrap:anywhere}
/* Inicio: rejilla de 12 columnas a todo el ancho */
.pinicio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;gap:14px;align-items:start}
.a-hero{grid-column:1/9;grid-row:1}
.a-side{grid-column:9/13;grid-row:1/3;display:flex;flex-direction:column;gap:14px;min-width:0}
.a-list{grid-column:1/9;grid-row:2;min-width:0}
.a-grupos,.a-copa{grid-column:1/-1;min-width:0}
.a-hero,.a-list{min-width:0}
.pubv .blk p{max-width:70ch}
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:14px;align-items:start}
.seg2{display:flex;gap:4px;background:var(--sunk);border-radius:999px;padding:3px;overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg2::-webkit-scrollbar{display:none}
.seg2 button{min-height:40px;border:0;border-radius:999px;background:none;color:var(--muted);font-weight:700;font-size:14px;padding:0 12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg2 button span{font-size:12px;opacity:.8}
.seg2 button[aria-pressed="true"]{background:var(--p-ink);color:var(--p-bg)}
.mx{display:grid;grid-template-columns:84px minmax(0,1fr) 30px 14px 30px minmax(0,1fr) 128px;grid-template-areas:"h l sl sep sv v m";align-items:center;gap:6px 10px;padding:12px 4px;border-top:1px solid var(--line);border-radius:12px}
.lista>.mx:first-child,.hgrp+.mx{border-top:0}
.mx-h{grid-area:h;display:flex;flex-direction:column;gap:2px;font-size:14px}
.mx-h small{color:var(--muted);font-weight:600;font-size:12px}
.mx-l{grid-area:l;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;text-align:right;min-width:0}
.mx-v{grid-area:v;display:flex;align-items:center;gap:10px;min-width:0}
.mx .nm{min-width:0;font-weight:600;overflow-wrap:anywhere;line-height:1.25}
.mx .nm.gana{font-weight:800}
.mx .nm small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.mx-sl,.mx-sv{font-family:var(--f-display);font-weight:800;font-size:28px;text-align:center;line-height:1}
.mx-sl{grid-area:sl}.mx-sv{grid-area:sv}
.mx-sep{grid-area:sep;text-align:center;color:var(--muted);font-weight:700;font-size:13px}
.mx-m{grid-area:m;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;font-size:12.5px;color:var(--muted);font-weight:700}
.vl{display:flex;flex-direction:column;gap:8px}
.vgr .vl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.vi{width:100%;text-align:left;border:0;border-radius:16px;background:var(--sunk);color:var(--ink);padding:10px 12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-height:44px}
.vi.on{box-shadow:inset 0 0 0 2px var(--p-red)}
.vi-h{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.vi-t{display:flex;align-items:center;gap:8px}
.vi-t span:not(.bdg){flex:1;min-width:0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.vi-t b{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1}
.chip.vivoch{background:var(--p-live);color:#0E0F13}
.gmini{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.gm{background:var(--sunk);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.gm-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gm-h b{font-family:var(--f-display);font-size:19px;font-weight:800}
.gm table{font-size:13px}
.gm td,.gm th{padding:6px 4px}
.gm td.eqn{min-width:0;white-space:normal}
.gm tr.lider td{background:var(--p-red-soft)}
.llh{background:var(--img-banda) center 40%/cover no-repeat,#F4F4F2;color:#0E0F13;border-radius:16px;padding:18px 16px;margin:-6px -6px 0}
.llh .chip{background:#FFFFFF;color:#0E0F13}
.rgh{background:var(--img-grunge) right 30%/cover no-repeat,#F4F4F2;color:#0E0F13;border-radius:16px;padding:22px 16px;margin:-6px -6px 0}
.rgh .chip{background:#FFFFFF;color:#0E0F13}
.vacio{display:flex;gap:14px;align-items:center;background:var(--sunk);border-radius:var(--r-m);padding:12px}
.vacio .masc{flex:0 0 56px;height:96px;border-radius:12px;background:#FFFFFF var(--img-masc) center top/cover no-repeat}
.vacio>div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vacio p{font-weight:600}
.mas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mas button{min-height:76px;border:0;border-radius:var(--r-m);background:var(--sunk);color:var(--ink);font-weight:700;font-size:15px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:12px 14px;cursor:pointer}
.pbot{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--p-panel);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -1px 0 var(--p-line)}
.pbot button{position:relative;flex:1;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:700;background:none;border:0;color:var(--muted);cursor:pointer}
.pbot button[aria-current="page"]{color:var(--ink)}
.pbot button[aria-current="page"]::before{content:"";position:absolute;top:2px;width:26px;height:5px;background:var(--p-red);transform:skewX(-30deg)}
.pbot .cnt{position:absolute;top:4px;left:calc(50% + 6px);font-style:normal;background:var(--p-live);color:#0E0F13;border-radius:999px;font-size:10.5px;padding:0 6px;line-height:16px}
@media (min-width:1800px){
  .a-list .lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .a-list .lista>.mx:nth-child(2){border-top:0}
  .a-list .mx{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"h l sl" "h v sv" "h m m"}
  .a-list .mx-l{flex-direction:row;text-align:left}
  .a-list .mx-sep{display:none}
  .a-list .mx-m{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left}
  .gmini{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
/* Tableta: barra lateral de íconos y rejilla de 2 columnas */
@media (max-width:1279px){
  .pshell{grid-template-columns:72px minmax(0,1fr)}
  .pside{padding:10px 8px;align-items:center}
  .pside .titulo,.pside .promo,.pside .firma-s{display:none}
  .snav button{width:56px;padding:0;justify-content:center}
  .snav button>span:not(.cnt):not(.tjic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .snav button[aria-current="page"]::before{left:4px}
  .pside .snav-ext{width:56px;padding:0;justify-content:center}
  .pside .snav-ext span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pside .sep-m{width:40px;margin:2px auto}
  .snav .cnt{position:absolute;top:2px;right:2px;margin:0;font-size:10.5px;padding:0 5px}
  .pside::before{content:"";width:48px;height:48px;border-radius:50%;background:#FFFFFF var(--img-escudo) center/94% no-repeat}
  .ptop-m{display:flex}
  .esc.md{display:none}
  .pinicio{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .a-hero,.a-list,.a-grupos,.a-copa{grid-column:1/-1;grid-row:auto}
  .a-side{display:contents}
  .a-hero{order:1}.c-viv{order:2}.c-cif{order:3}.a-list{order:4}.c-gol{order:5}.c-avi{order:6}.a-grupos{order:7}.a-copa{order:8}
  .c-viv,.c-cif,.c-gol,.c-avi{min-width:0}
  .hero{min-height:min(60vh,520px)}
}
/* Celular: una columna, barra inferior, hero a sangre */
@media (max-width:767px){
  .pshell{grid-template-columns:minmax(0,1fr);padding-bottom:96px}
  .pside{display:none}
  .pbot{display:flex}
  .pinicio{grid-template-columns:minmax(0,1fr)}
  .c-viv,.c-cif,.c-gol,.c-avi{grid-column:1/-1}
  .a-hero{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px))) calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
  .a-hero .hero{border-radius:0;min-height:0}
  .ptit{order:2;width:100%;font-size:32px}
  .srch{order:3;flex:1 1 100%}
  .ptop .chip.fecha{display:none}
  .ftop .ft-t{display:none}
  .tb-m{display:none}
  .tb-s{display:inline}
  .ptop .tbtn{padding:0 12px}
  .ptop .tbtn{margin-left:auto}
  body.v-pub .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .hero{padding:16px;min-height:0;border-radius:24px;gap:12px}
  .hero::before{left:calc(50% - 76px);width:152px}
  .hero-mid{gap:6px}
  .hs{min-width:110px}
  .bdg.xl{width:52px;height:52px;font-size:20px}
  .hs-n{font-size:76px}.hs-n.cd{font-size:56px}
  .hmin{font-size:20px}
  .ht b{font-size:18px}
  .ht ul{font-size:12px}
  .seg2 button span{display:none}
}

@container (max-width:780px){
  .mx{grid-template-columns:66px minmax(0,1fr) auto;grid-template-areas:"h l sl" "h v sv" "h m m";gap:6px 10px}
  .mx-l{flex-direction:row;text-align:left}
  .mx-sep{display:none}
  .mx-m{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left}
  .mx-sl,.mx-sv{font-size:24px}
}
@media (min-width:768px) and (max-width:1279px){.ptop-m .esc{display:none}}

@media (max-width:640px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtros{grid-template-columns:minmax(0,1fr)}
  .llave{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Página real ---------- */
:root{--img-escudo:url(img/escudo.webp);--img-ciudad:url(img/ciudad.webp);--img-banda:url(img/banda.webp);--img-grunge:url(img/grunge.webp)}
html{scroll-behavior:smooth}
img.titulo{object-fit:cover;background:#0E0F13;height:auto}
img.titulo.sm{height:46px;width:auto;aspect-ratio:1140/616}
img.esc{object-fit:contain;background:#FFFFFF;padding:1px}
img.masc-l{width:100%;height:164px;min-height:0;object-fit:contain;object-position:center;background:#FFFFFF}
img.masc{flex:0 0 56px;width:56px;height:96px;border-radius:12px;object-fit:cover;object-position:center top;background:#FFFFFF}
.saltar{position:absolute;left:-9999px;top:8px;z-index:80;background:var(--p-ink);color:var(--p-bg);padding:10px 16px;border-radius:999px;font-weight:700}
.saltar:focus{left:16px}
.ptit-g{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-right:auto;min-width:0}
.ptit-g .ptit{margin-right:0}
.act{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;border-radius:999px;background:transparent;margin-left:-8px;padding:0 8px!important;color:var(--muted);font-weight:700;font-size:13px;padding:0 14px;cursor:pointer}
.act .ic{color:var(--ink)}
.act.gira .ic{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.fallo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:var(--r-m);background:var(--pel-soft);color:var(--ink);padding:10px 14px}
.fallo b{color:var(--pel)}
.fallo span{flex:1 1 260px;min-width:0}
.cuenta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cuenta div{display:flex;flex-direction:column;align-items:center;min-width:72px;background:rgba(14,15,19,.72);border-radius:16px;padding:10px 12px;color:#F4F4F2}
.cuenta b{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:clamp(44px,6vw,88px);line-height:.9}
.cuenta small{font-size:12px;font-weight:700;opacity:.85}
.hero-sub{text-align:center;font-weight:700;font-size:14px;color:var(--hero-ink);text-shadow:var(--hero-shadow)}
.primeros{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.primeros span{background:rgba(14,15,19,.72);color:#F4F4F2;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700}
.pen{font-size:12px;color:var(--muted);font-weight:700}
.pubv a{color:inherit}
@media (max-width:767px){.cuenta div{min-width:60px;padding:8px}.ptit-g{order:2;width:100%}}
.hero-sub,.hero-eb{align-self:center;background:var(--hero-pill);border-radius:999px;padding:4px 12px}
.hero-eb{align-self:auto}
:root{--hero-pill:rgba(14,15,19,.55)}
body.p-claro{--hero-pill:rgba(244,244,242,.92)}