/* Páginas aparte (calendario, boletas, tabla, patrocinadores): el mismo sistema de la portada.
   70 % blanco cancha, rojo para una idea por bloque, negro para datos. Una sola apariencia clara. */
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url(fuentes/anton-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(fuentes/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url(fuentes/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fuentes/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(fuentes/barlow-condensed-800.woff2) format('woff2')}
@font-face{font-family:'Graduate';font-weight:400;font-display:swap;src:url(fuentes/graduate-400.woff2) format('woff2')}
:root{
  --blanco:#fff;--hielo:#f3f3f5;--linea:#e2e2e6;--gris:#6b6b73;--rojo:#d71d24;--rojo-tinta:#b3151c;--negro:#0b0a0b;
  --f-tit:"Anton","Arial Narrow",Impact,sans-serif;--f-lbl:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-txt:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--f-num:"Graduate","Courier New",monospace;
  --gutter:clamp(16px,4vw,48px);color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--blanco);color:var(--negro);overflow-x:hidden}
body{font-family:var(--f-txt);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.tn{font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.lbl{font-family:var(--f-lbl);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--gris)}
.lbl.rojo{color:var(--rojo-tinta)}
.tit{margin:0;font-family:var(--f-tit);font-weight:400;text-transform:uppercase;line-height:.92;transform:skewX(-10deg);transform-origin:0 100%;text-wrap:balance}
.tit em{font-style:normal;color:var(--rojo);display:block}
h2.tit{font-size:clamp(34px,5.4vw,58px)}
p{margin:0}
.barra{display:inline-block;max-width:100%;transform:skewX(-10deg);background:var(--negro);color:var(--blanco);padding:9px 20px}
.barra.r{background:var(--rojo)}
.barra > span{display:inline-block;transform:skewX(10deg);font-family:var(--f-lbl);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(14px,1.8vw,19px)}
.franjas{position:absolute;pointer-events:none;background:repeating-linear-gradient(to bottom,var(--rojo) 0 3px,transparent 3px 22px);transform:rotate(-9deg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);opacity:.18;z-index:-1}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;text-decoration:none;font-family:var(--f-lbl);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:16px;border:2px solid var(--negro);color:var(--negro);background:var(--blanco);transition:background .15s,color .15s}
.btn:hover{background:var(--negro);color:var(--blanco)}
.btn.r{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.btn.r:hover{background:var(--rojo-tinta);border-color:var(--rojo-tinta)}

/* Barra superior: menú entre páginas (se desliza de lado en el celular) */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid var(--linea);background:rgba(255,255,255,.96)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marca img{width:36px;height:36px;object-fit:contain}
.marca span{font-family:var(--f-tit);text-transform:uppercase;font-size:20px;line-height:1;transform:skewX(-10deg)}
.top nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.top nav::-webkit-scrollbar{display:none}
.top nav a{flex:none;padding:8px 10px;text-decoration:none;font-family:var(--f-lbl);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--gris);border-bottom:3px solid transparent;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{color:var(--negro);border-bottom-color:var(--rojo)}

/* Portada de cada página */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(36px,6vw,72px) clamp(24px,4vw,40px)}
.hero .franjas{right:-6%;top:14%;width:55%;height:120px}
.hero h1{font-size:clamp(46px,8.6vw,100px)}
.hero .lead{margin-top:20px;font-size:clamp(18px,2vw,21px);max-width:56ch}
.hero .datos-cab{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
section{padding-block:clamp(36px,5vw,64px)}
section + section{border-top:1px solid var(--linea)}
section > .wrap{display:grid;gap:22px}
.cab{display:grid;gap:10px;max-width:720px}
.cab p{color:var(--gris);max-width:58ch}
.hielo{background:var(--hielo)}
.nota{font-size:14px;color:var(--gris);max-width:70ch}

/* Juegos (mismo diseño que la agenda de la portada) */
.agenda{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.fila{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--hielo);padding:14px 16px 14px 22px;min-width:0}
.hielo .fila{background:var(--blanco)}
.fila.casa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--rojo)}
.fila .f{display:grid;justify-items:center;font-family:var(--f-lbl);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:13px;line-height:1.1}
.fila .f b{font-family:var(--f-num);font-weight:400;font-size:32px;line-height:1;letter-spacing:0}
.fila .p{display:grid;gap:4px;min-width:0}
.fila .eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--f-tit);text-transform:uppercase;font-size:clamp(18px,2.2vw,24px);line-height:1}
.fila .eqt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.fila .vs{font-family:var(--f-tit);font-size:16px;color:var(--gris)}
.fila .marc{font-family:var(--f-num);font-size:22px;color:var(--negro);white-space:nowrap}
.fila .eq img{width:34px;height:34px;flex:none;object-fit:contain;background:var(--blanco);border-radius:8px;padding:3px}
.hielo .fila .eq img{background:var(--hielo)}
.fila .d{font-family:var(--f-lbl);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--gris)}
.fila .d strong{color:var(--negro)}
.chip{font-family:var(--f-lbl);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12px;padding:4px 9px;border:1px solid var(--linea);background:var(--blanco);color:var(--gris);white-space:nowrap}
.chip.casa,.chip.s{border-color:var(--rojo);color:var(--rojo-tinta)}
.chip.prox,.chip.g{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.chip.vivo{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.vacio{padding:24px;background:var(--hielo);color:var(--gris);text-align:center}

/* Boletería */
.dos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center}
.precios{margin:0;padding:0;list-style:none;display:grid;max-width:520px}
.precios li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:2px solid var(--linea)}
.precios span{font-family:var(--f-lbl);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:20px}
.precios b{font-family:var(--f-num);font-weight:400;font-size:clamp(32px,4.6vw,48px);line-height:1}
.precios li.vip b{color:var(--rojo)}
.taquilla{display:grid;gap:10px;margin-top:24px;justify-items:start}
.moti-bol{position:relative;display:flex;justify-content:center;isolation:isolate;min-width:0;overflow:hidden}
.moti-bol .franjas{right:-10%;top:18%;width:110%;height:150px;opacity:.85}
.moti-bol img{height:clamp(260px,38vw,460px);width:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(11,10,11,.18))}
.pasos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:paso}
.pasos li{counter-increment:paso;background:var(--blanco);border:1px solid var(--linea);padding:18px;display:grid;gap:6px;align-content:start}
.pasos li::before{content:counter(paso);font-family:var(--f-num);font-size:30px;line-height:1;color:var(--rojo)}
.pasos b{font-family:var(--f-lbl);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:17px}
.pasos p{font-size:15px;color:var(--gris)}

/* Tabla de posiciones (misma guía de la portada: escudos derechos en recuadro blanco, rojo solo para Motilones) */
.corte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.confs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.conf{min-width:0}
.conf h3{display:inline-block;margin:0 0 10px;transform:skewX(-10deg);background:var(--negro);color:var(--blanco);padding:6px 16px;font-weight:400}
.conf h3 span{display:inline-block;transform:skewX(10deg);font-family:var(--f-lbl);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:15px}
.tp{width:100%;border-collapse:collapse;table-layout:fixed}
.tp th{font-family:var(--f-lbl);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--gris);text-align:center;padding:8px 4px;border-bottom:3px solid var(--negro)}
.tp th.eqc{text-align:left}
.tp td{position:relative;padding:0 4px;height:58px;text-align:center;border-bottom:1px solid var(--linea);font-family:var(--f-num);font-size:17px;font-variant-numeric:tabular-nums}
.tp .c-pos{width:34px;color:var(--gris)}
.tp .c-n{width:44px}
.tp .c-tan{width:96px;font-size:14px;color:var(--gris)}
.tp .c-pts{width:52px;font-size:21px}
.tp td.eqc{text-align:left;font-family:var(--f-lbl);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:17px}
.tp .eqn{display:flex;align-items:center;gap:10px;min-width:0}
.tp .eqn span{min-width:0;line-height:1.1;overflow-wrap:break-word}
.tp .eqn i{width:40px;height:40px;flex:none;background:var(--blanco);border-radius:9px;box-shadow:0 0 0 1px var(--linea);display:grid;place-items:center;padding:4px}
.tp .eqn img{max-width:100%;max-height:100%;object-fit:contain}
.tp .corto{display:none}
.tp tr.mot td{color:var(--blanco);border-bottom-color:transparent;isolation:isolate}
.tp tr.mot td::before{content:"";position:absolute;inset:4px 0;z-index:-1;background:var(--rojo)}
.tp tr.mot td:first-child::before{left:6px;transform:skewX(-10deg);transform-origin:0 100%}
.tp tr.mot td:last-child::before{right:6px;transform:skewX(-10deg);transform-origin:100% 0}
.tp tr.mot .eqn i{box-shadow:none}
.reglas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reglas div{background:var(--blanco);border:1px solid var(--linea);padding:18px;display:grid;gap:6px;align-content:start}
.reglas b{font-family:var(--f-lbl);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:17px}
.reglas p{font-size:15px;color:var(--gris)}

/* Patrocinadores */
.vp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.vp-card{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:10px;background:var(--blanco);border:1px solid var(--linea);padding:18px 18px 20px 24px;min-width:0}
.vp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--rojo)}
.vp-logo{height:110px;display:grid;place-items:center;border-bottom:1px solid var(--linea);margin:-4px 0 4px;padding-bottom:12px}
.vp-logo a{width:100%;height:100%;display:grid;place-items:center}
.vp-logo img{width:calc(74px*var(--r));height:calc(74px/var(--r));max-width:100%;max-height:96px;object-fit:contain}
.vp-card h3{margin:0;font-family:var(--f-tit);font-weight:400;text-transform:uppercase;font-size:22px;line-height:1.05}
.vp-card p{font-size:15px}
.vp-card .lbl{font-size:12px}
.vp-card .web{font-family:var(--f-lbl);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--rojo-tinta);text-decoration:none;align-self:end}
.vp-card .web:hover{text-decoration:underline}
.vp-cta{background:var(--negro);color:var(--blanco);border-color:var(--negro);align-content:center}
.vp-cta h3{font-size:28px}
.vp-cta h3 em{font-style:normal;color:var(--rojo)}
.vp-cta p{color:#d6d6da}
.vp-cta .correo{font-weight:700;color:var(--blanco);user-select:all;overflow-wrap:anywhere}
.vp-cta .btn{justify-self:start;margin-top:6px}
.moti-hero{position:absolute;right:var(--gutter);bottom:0;height:clamp(200px,26vw,320px);width:auto}
.vp-liga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vp-liga article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:var(--hielo);padding:20px;min-width:0}
.vp-liga .vp-l{width:120px;height:90px;display:grid;place-items:center;background:var(--blanco);border:1px solid var(--linea);padding:10px}
.vp-liga .vp-l img{width:100%;height:100%;object-fit:contain}
.vp-liga h3{margin:4px 0 6px;font-family:var(--f-tit);font-weight:400;text-transform:uppercase;font-size:24px;line-height:1}
.vp-liga p{font-size:15px}
.vp-liga a{color:var(--rojo-tinta);font-weight:600}

/* Foto del Coliseo Toto Hernández: gris, corte diagonal */
.toto{position:relative;margin:0;overflow:hidden;clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);background:var(--negro)}
.toto img{display:block;width:100%;height:auto;min-height:220px;object-fit:cover;object-position:52% 60%;filter:grayscale(1) contrast(1.05)}
.toto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(11,10,11,.55));pointer-events:none}
.toto figcaption{position:absolute;left:clamp(12px,2.5vw,24px);bottom:clamp(12px,2.5vw,22px);z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.toto figcaption span{background:var(--negro);color:var(--blanco);padding:4px 10px;font-family:var(--f-lbl);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:14px}
.toto figcaption span.r{background:var(--rojo)}

footer{border-top:1px solid var(--linea);padding-block:28px;font-size:14px;color:var(--gris)}
footer .wrap{display:grid;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 14px}
footer nav a{text-decoration:none;font-family:var(--f-lbl);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--negro)}
footer nav a:hover{color:var(--rojo-tinta)}
.pie-seo{max-width:90ch;line-height:1.55}
.pie-seo strong{color:var(--negro)}
.pie-seo a{color:var(--rojo-tinta);font-weight:600}

@media (max-width:860px){
  .vp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-liga,.confs,.dos{grid-template-columns:minmax(0,1fr)}
  .pasos,.reglas{grid-template-columns:minmax(0,1fr)}
  .moti-hero{display:none}
}
@media (max-width:640px){
  .top .wrap{flex-wrap:wrap;gap:0;padding-block:6px}
  .top nav{margin-left:0;width:100%}
  .fila{grid-template-columns:50px minmax(0,1fr);align-items:start;padding:14px 14px 14px 16px;gap:4px 12px}
  .fila.casa{padding-left:20px}
  .fila .f b{font-size:26px}
  .fila .eq{flex-direction:column;align-items:flex-start;gap:6px;font-size:19px}
  .fila .eq .vs{display:none}
  .fila .eq img{width:30px;height:30px}
  .fila .d{font-size:13px;margin-top:4px}
  .fila .chip{grid-column:2;justify-self:start;margin-top:6px}
  .tp .c-tan{display:none}
  .tp .largo{display:none}.tp .corto{display:inline}
  .tp .c-n{width:34px}
  .tp td{height:54px;font-size:15px}
  .tp .c-pts{width:42px;font-size:19px}
  .tp .eqn{gap:8px}
  .tp .eqn i{width:34px;height:34px;border-radius:8px}
  .btn{flex:1 1 100%}
}
@media (max-width:520px){
  .vp-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .vp-card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto;gap:4px 14px;padding:14px 14px 14px 20px;align-items:center}
  .vp-card .vp-logo{grid-row:1/span 3;height:72px;margin:0;padding:0 12px 0 0;border-bottom:0;border-right:1px solid var(--linea)}
  .vp-card .vp-logo img{width:calc(40px*var(--r));height:calc(40px/var(--r));max-height:64px}
  .vp-card > .lbl{display:none}
  .vp-card h3{font-size:19px}
  .vp-card p{font-size:14px;line-height:1.4}
  .vp-cta{grid-template-columns:minmax(0,1fr);padding:18px 18px 20px 22px}
  .vp-liga article{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
