/* SIMVERSO · página de partido (/partido/<slug>/): el marcador de estadio de UN partido, en grande.
   Plano 0 = fondo · plano 1 = hundido (mapa, listas) · plano 2 = elevado (bloques, con sombra azul).
   Móvil primero: lo importante arriba (marcador → quién se lo lleva → cómo acaba → goles). */
.pt{display:grid;gap:14px;padding-top:4px}
.pt .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- 1. cabecera de marcador ---------- */
.pt-cab{position:relative;isolation:isolate;margin:0 calc(-1 * var(--gut));padding:22px var(--gut) 20px;background:var(--tablero);
  box-shadow:var(--sombra),inset 0 -1px 0 rgba(242,242,247,.06);overflow:hidden}
.pt-cab .m-tex{opacity:.9;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 55%,#000);mask-image:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 55%,#000)}
.pt-comp{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pt-comp span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:1px;background:var(--naranja);margin:0 10px 2px 0;vertical-align:middle}
.pt-comp span:first-child{color:var(--hueso)}
.pt-eqs{margin-top:14px;display:grid;gap:2px;font:900 clamp(40px,12.4vw,96px)/.92 "Big Shoulders Display",sans-serif;text-transform:uppercase;letter-spacing:.005em}
.pt-eq{display:flex;align-items:center;gap:14px;min-width:0}
.pt-eq > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-franja{flex:none;width:10px;height:.78em;border-radius:2px;background:linear-gradient(var(--c1,#4a4ab0) 0 62%,var(--c2,#4a4ab0) 62% 100%);box-shadow:0 0 0 1px rgba(242,242,247,.2)}
.pt-vs{font:500 13px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--mut);padding-left:24px;text-transform:lowercase}
.pt-res{margin-top:10px;font-size:15px;color:var(--hueso)}
.pt-acc{margin-top:18px;display:flex;gap:8px}
.pt-b{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:8px;border:1px solid rgba(242,242,247,.18);background:rgba(20,20,92,.6);
  color:var(--hueso);font:600 14.5px "Schibsted Grotesk",sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color 160ms var(--e-out),border-color 160ms var(--e-out),transform 120ms var(--e-out)}
.pt-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.pt-b:active{transform:scale(.97)}
.pt-b[aria-pressed="true"]{border-color:var(--naranja);color:var(--naranja)}
.pt-b[aria-pressed="true"] svg{fill:var(--naranja)}
@media (hover:hover) and (pointer:fine){ .pt-b:hover{background:rgba(35,35,140,.85);border-color:rgba(242,242,247,.32)} }

/* ---------- bloques ---------- */
.pt-rejilla{display:grid;gap:14px}
.pt-sec{position:relative;background:var(--p2);border-radius:16px;padding:20px 18px 22px;box-shadow:var(--sombra)}
.pt-h{font:800 clamp(26px,7vw,34px)/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;letter-spacing:.01em}
.pt-sub,.pt-nota{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--mut)}
.pt-nota{margin-top:12px}
.pt-nota a{color:var(--hueso)}

/* ---------- 2. quién se lo lleva ---------- */
.pt-quien{padding-top:22px}
.pt-tres{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pt-tres dt{font:600 12.5px "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-tres dd{margin-top:2px;display:flex;align-items:baseline;gap:3px;font:900 clamp(40px,12vw,120px)/.9 "Big Shoulders Display",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.pt-tres dd small{font-size:.36em;font-weight:700;color:var(--mut)}
.pt-tres .fav dt,.pt-tres .fav dd,.pt-tres .fav dd small{color:var(--naranja)}
.pt-tres div:nth-child(3){text-align:right} .pt-tres div:nth-child(3) dd{justify-content:flex-end}
.pt-tres div:nth-child(2){text-align:center} .pt-tres div:nth-child(2) dd{justify-content:center}
.pt-barra{margin-top:14px;display:flex;gap:2px;height:12px}
.pt-barra i{min-width:3px;border-radius:2px;transform-origin:left;transition:transform 520ms var(--e-out)}
.pt-barra i:nth-child(1){background:var(--naranja)} .pt-barra i:nth-child(2){background:var(--lavanda)} .pt-barra i:nth-child(3){background:var(--hueso)}
.pt-frase{margin-top:16px;font-size:17px;line-height:1.5;color:#dcdcf2;max-width:46ch;text-wrap:pretty}

/* ---------- 3. cómo acaba ---------- */
.pt-lee{margin-top:10px;font-size:15px;color:var(--mut);min-height:22px}
.pt-lee b{font:900 26px/1 "Big Shoulders Display",sans-serif;color:var(--hueso);margin-right:4px;vertical-align:-2px}
.pt-mapa{margin-top:12px;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto 18px 1fr;gap:4px 6px}
.pt-eje-x{grid-column:2;grid-row:1;font-size:11px;letter-spacing:.04em;color:var(--mut);text-transform:uppercase}
.pt-eje-y{grid-column:1;grid-row:3;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.04em;color:var(--mut);text-transform:uppercase;justify-self:center;text-align:right}
.pt-eje-y{display:none}
.pt-nx{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;font-size:12px;color:var(--mut);text-align:center}
.pt-ny{grid-column:1;grid-row:3;display:grid;grid-template-rows:repeat(6,1fr);gap:3px;font-size:12px;color:var(--mut);align-items:center;text-align:center}
.pt-rej{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:3px;background:var(--celda);border-radius:10px}
.pt-c{position:relative;aspect-ratio:1;border:0;border-radius:4px;cursor:pointer;padding:0;color:var(--mut);
  background:color-mix(in oklab,var(--naranja) calc(var(--k) * 100%),var(--p1));
  display:grid;place-items:center;transition:transform 140ms var(--e-out),box-shadow 140ms var(--e-out)}
.pt-c span{font-size:clamp(9px,2.5vw,12px);letter-spacing:-.02em;opacity:.9}
.pt-c.osc{color:var(--azul)}
.pt-c.osc span{font-weight:600}
.pt-c:active{transform:scale(.94)}
.pt-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--hueso);z-index:1}
.pt-c:focus-visible{outline:2px solid var(--hueso);outline-offset:1px}
@media (hover:hover) and (pointer:fine){ .pt-c:hover{box-shadow:0 0 0 1px rgba(242,242,247,.7)} }
.pt-top{margin-top:16px;list-style:none;display:grid;gap:8px}
.pt-top li{display:grid;grid-template-columns:44px 1fr 56px;align-items:center;gap:12px;font-size:14.5px}
.pt-top li > span:last-child{text-align:right;color:var(--mut)}
.pt-tm{font:900 24px/1 "Big Shoulders Display",sans-serif!important}
.pt-tb{height:8px;border-radius:2px;background:var(--p1);overflow:hidden;display:block}
.pt-tb i{display:block;height:100%;border-radius:2px;background:var(--naranja);transform-origin:left;transition:transform 520ms var(--e-out)}
.pt-top li:not(:first-child) .pt-tb i{background:var(--lavanda)}

/* ---------- 4. goles ---------- */
.pt-gbar{margin-top:18px;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:178px}
.pt-gbar li{display:grid;grid-template-rows:auto 1fr auto;height:100%;gap:6px;text-align:center}
.pt-gv{font-size:11.5px;color:var(--hueso);white-space:nowrap;letter-spacing:-.02em}
.pt-gb{display:flex;align-items:flex-end;background:var(--p1);border-radius:4px;overflow:hidden}
.pt-gb i{display:block;width:100%;height:calc(var(--h) * 100%);background:var(--lavanda);border-radius:4px 4px 0 0;transform-origin:bottom;transition:transform 560ms var(--e-out)}
.pt-gk{font:900 22px/1 "Big Shoulders Display",sans-serif!important;color:var(--mut)}
.pt-tab{margin-top:18px;width:100%;border-collapse:collapse;font-size:15px}
.pt-tab th,.pt-tab td{padding:10px 0;border-top:1px solid rgba(242,242,247,.1);text-align:right}
.pt-tab thead th{border-top:0;padding-top:0;font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.pt-tab th[scope="row"]{text-align:left;font-weight:600}
.pt-tab td{width:30%}
.pt-ambos{margin-top:12px;padding-top:14px;border-top:1px solid rgba(242,242,247,.1);display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;font-size:15px;font-weight:600}
.pt-ambos b{font-size:17px}
.pt-ambos .pt-tb{grid-column:1/-1}
.pt-ambos .pt-tb i{background:var(--hueso)}

/* ---------- 5. cada equipo · 6. contexto ---------- */
.pt-eqs2{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt-eqb,.pt-cx{background:var(--p1);border-radius:10px;padding:14px 14px 16px;display:grid;gap:10px;align-content:start;grid-template-columns:auto 1fr;align-items:center}
.pt-eqb .pt-franja,.pt-cx .pt-franja{height:20px;width:7px}
.pt-eqb h3,.pt-cx h3{font:800 20px/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-eqb dl,.pt-cx > :not(i):not(h3){grid-column:1/-1}
.pt-eqb dl{display:grid;gap:12px}
.pt-eqb dt{font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.pt-eqb dd{font:900 clamp(34px,10vw,46px)/1 "Big Shoulders Display",sans-serif;font-variant-numeric:tabular-nums;margin-top:2px}
.pt-eqb dd small{font-size:.5em;font-weight:700;color:var(--mut);margin-left:2px}
.pt-forma{list-style:none;display:flex;gap:4px}
.pt-forma li{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--mut)}
.pt-forma b{width:26px;height:26px;display:grid;place-items:center;border-radius:4px;font:700 13px "IBM Plex Mono",monospace;background:var(--p2);color:var(--hueso)}
.pt-forma .f-V b{background:var(--hueso);color:var(--azul)} .pt-forma .f-D b{background:transparent;box-shadow:inset 0 0 0 1px rgba(242,242,247,.3)}
.pt-racha,.pt-bajas{font-size:14px;line-height:1.4;color:#dcdcf2}
.pt-bajas span{color:var(--mut)}

/* ---------- 7. universos ---------- */
.pt-loco{margin-top:16px;border-radius:12px;padding:16px 16px 18px;background:var(--tablero);box-shadow:inset 0 1px 0 rgba(242,242,247,.06)}
.pt-lk{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--naranja)}
.pt-lm{margin-top:4px;font:900 clamp(64px,20vw,104px)/.9 "Big Shoulders Display",sans-serif!important;letter-spacing:.01em}
.pt-ls{margin-top:6px;font-size:14.5px;color:var(--mut)}
.pt-ul{margin-top:12px;list-style:none;display:grid;gap:3px}
.pt-ul li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--p1);border-radius:4px;font-size:14px;color:var(--mut)}
.pt-ul li:first-child{border-radius:10px 10px 4px 4px} .pt-ul li:last-child{border-radius:4px 4px 10px 10px}
.pt-ul b{font:900 24px/1 "Big Shoulders Display",sans-serif;color:var(--hueso);letter-spacing:.01em}
.pt-ul li.nuevo{animation:pt-nuevo 320ms var(--e-out)}
@keyframes pt-nuevo{from{background:color-mix(in oklab,var(--naranja) 35%,var(--p1));transform:translateY(-4px);opacity:0}}
.pt-otro{margin-top:12px;width:100%;height:48px;border-radius:8px;border:1px solid rgba(242,242,247,.2);background:transparent;color:var(--hueso);
  font:600 15px "Schibsted Grotesk",sans-serif;cursor:pointer;transition:background-color 160ms var(--e-out),transform 120ms var(--e-out)}
.pt-otro:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .pt-otro:hover{background:rgba(242,242,247,.06)} }

/* ---------- 8. ¿acertó? ---------- */
.pt-ok{margin-top:12px;font-size:16.5px;line-height:1.5;color:#dcdcf2;text-wrap:pretty}
.pt-ok b{color:var(--hueso)}
.pt-sello{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--mut)}
.pt-sello code{padding:3px 7px;border-radius:4px;background:var(--p1);color:var(--hueso);font-size:13px}
.pt-compr{height:32px;padding:0 12px;border-radius:6px;border:1px solid rgba(242,242,247,.22);background:transparent;color:var(--hueso);font:600 13px "Schibsted Grotesk",sans-serif;cursor:pointer}
.pt-compr.ok{border-color:#7fd99a;color:#7fd99a}

/* ---------- 9. Telegram y la jornada ---------- */
.pt-tg{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:10px;background:var(--p1);color:var(--hueso);text-decoration:none;
  font:700 16px "Schibsted Grotesk",sans-serif;box-shadow:inset 0 0 0 1px rgba(242,242,247,.12);transition:background-color 160ms var(--e-out)}
.pt-tg svg{width:20px;height:20px;fill:none;stroke:var(--naranja);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .pt-tg:hover{background:#1a1a6a} }
.pt-otros{background:none;box-shadow:none;padding:6px 0 0}
.pt-otros .res-lista{margin-top:14px;display:grid}

/* ---------- entrada ---------- */
.pt-entra .pt-barra i,.pt-entra .pt-tb i{transform:scaleX(0)}
.pt-entra .pt-gb i{transform:scaleY(0)}
.pt-entra .pt-c{opacity:0;transform:scale(.6)}
.pt-c{transition:transform 140ms var(--e-out),box-shadow 140ms var(--e-out),opacity 260ms var(--e-out)}
.pt-visto .pt-c{transition-delay:calc(var(--d,0) * 18ms)}
@media (prefers-reduced-motion:reduce){
  .pt-entra .pt-barra i,.pt-entra .pt-tb i,.pt-entra .pt-gb i{transform:none} .pt-entra .pt-c{opacity:1;transform:none}
  .pt-ul li.nuevo{animation:none}
}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  .pt{gap:22px}
  .pt-cab{margin:0;border-radius:16px;padding:30px 36px 28px;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:24px}
  .pt-cab > *{grid-column:1}
  .pt-cab .pt-acc{grid-column:2;grid-row:1/span 3;align-self:start;margin-top:0}
  .pt-comp{font-size:13px}
  .pt-rejilla{grid-template-columns:repeat(12,1fr);gap:22px}
  .pt-sec{padding:28px 30px 30px}
  .pt-quien{grid-column:1/-1}
  .pt-acaba{grid-column:1/span 7} .pt-goles{grid-column:8/span 5}
  .pt-equipos{grid-column:1/span 5} .pt-univ{grid-column:6/span 7}
  .pt-contexto,.pt-despues{grid-column:1/-1}
  .pt-tres{gap:24px}
  .pt-frase{font-size:19px}
  .pt-eje-y{display:block}
  .pt-mapa{grid-template-columns:22px 22px 1fr;grid-template-rows:auto 20px 1fr}
  .pt-eje-x,.pt-nx,.pt-rej{grid-column:3} .pt-ny{grid-column:2} .pt-eje-y{grid-column:1}
  .pt-c span{font-size:12px}
  .pt-mapa{max-width:520px}
  .pt-acaba .pt-top{max-width:520px}
  .pt-equipos{align-self:start}
  .pt-tg{max-width:420px}
  .pt-otros .res-lista{grid-template-columns:1fr 1fr;gap:3px}
  .pt-otros .res-lista > *{border-radius:4px!important}
}
@media (max-width:899px){ .pag:has(> .pt){padding-top:0} }