/* =========================================================
   BOX8 · EL CUADRO (.b8b-) — piel «Transmisión de TV» (la que eligió Pato, 29-sep-2026).
   El HTML lo escribe scripts/box8-cuadro.mjs (texto real); box8-cuadro.js solo lo vuelve interactivo.
   Pieza del CHASIS BOX8: amarillo de la casa (--gold) + casi negro; --cat-* marca la pestaña de cada estilo.
   · Placa amarilla = ganó · Ring BOX8 = de Top 8 en adelante · línea gruesa = camino del campeón
   Mariposa siempre: horizontal si el cuadro tiene >=1000 px, vertical (una mitad arriba, otra abajo) si no.
   Fuente de las placas: Barlow Condensed (Google Fonts, se agrega al <link> de la página).
   ========================================================= */
/* La piel de la edición llega en el style del .b8b (JSON «piel»); sin ella, el amarillo de la casa. */
.b8b,.b8b-modal,.b8b-tip{--b8b-a:var(--gold);--b8b-a2:var(--gold);--b8b-ta:var(--ink-000);--b8b-ta2:var(--ink-000);--b8b-dim:#707070}
.b8b{--cat:var(--cat-allstyle);--tv:'Barlow Condensed',var(--font-display);display:grid;gap:1.5rem;min-width:0;container-type:inline-size}
.b8b [hidden],.b8b-modal[hidden]{display:none!important}
.b8b ol,.b8b ul{list-style:none;margin:0;padding:0}
.b8b :is(a,button,select):focus-visible,.b8b-modal :is(a,button):focus-visible{outline:2px solid var(--b8b-a);outline-offset:3px}
.b8b-sr,.b8b.is-js .b8b-panel__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.b8b-total{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.b8b-total b{color:var(--bone);font-weight:700}

/* --- Pestañas (con JS): elegir categoría --- */
.b8b-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem} /* una fila, cuantas categorías haya */
@media (max-width:640px){.b8b-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.b8b-tab:last-child:nth-child(odd){grid-column:1/-1}}
.b8b-tab{position:relative;display:grid;gap:.25rem;align-content:center;min-height:64px;padding:.8rem 1rem .7rem;text-align:left;background:var(--ink-050);border:1px solid var(--ink-200);color:var(--ash);font:inherit;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease)}
.b8b-tab::before{content:'';position:absolute;inset:-1px -1px auto;height:3px;background:var(--c);opacity:.3}
.b8b-tab b{font-family:var(--tv);font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.b8b-tab small{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b8b-dim)}
.b8b-tab:hover{border-color:var(--ink-400);color:var(--bone)}
.b8b-tab[aria-selected="true"]{color:var(--b8b-ta);border-color:var(--b8b-a);background:var(--b8b-a)}
.b8b-tab[aria-selected="true"]::before{background:var(--c);opacity:1}
.b8b-tab[aria-selected="true"] small{color:var(--ink-300)}

.b8b-panel{display:grid;gap:1.25rem;min-width:0}
.b8b-panel__h{font-family:var(--tv);font-weight:800;font-size:2.25rem;line-height:1;text-transform:uppercase;color:var(--bone);border-top:3px solid var(--cat);padding-top:.75rem}
.b8b-panel__h small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.16em;color:var(--b8b-a)}

/* --- Barra: sigue a un bailarín + leyenda --- */
.b8b-barra{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.b8b-sigue{display:grid;gap:.4rem;flex:0 1 340px;min-width:0}
.b8b-sigue label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.b8b-sigue select{appearance:none;color-scheme:dark;width:100%;min-height:48px;padding:.6rem 2.5rem .6rem .9rem;background:var(--ink-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M0 0h12L6 8z'/%3E%3C/svg%3E") no-repeat right .9rem center/11px;border:1px solid var(--ink-300);border-radius:0;color:var(--bone);font-family:var(--font-body);font-size:1rem;cursor:pointer}
.b8b-sigue option{background:var(--ink-050);color:var(--bone)} /* la lista nativa (Windows) no hereda el fondo del select */
.b8b-sigue output{min-height:1.3em;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b8b-a)}
.b8b-leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.b8b-leyenda li{display:flex;align-items:center;gap:.5rem}
.b8b-leyenda li::before{content:'';width:18px;height:10px;background:#1c1c1c;border-left:3px solid #3a3a3a}
.b8b-leyenda .is-ring::before{background:none;border:1px solid color-mix(in srgb,var(--b8b-a2) 50%,transparent)}
.b8b-leyenda .is-camino::before{height:3px;border:0;background:var(--b8b-a)}
.b8b-leyenda .is-recordada::before{height:auto;width:auto;content:'★';border:0;background:none;color:var(--b8b-a2)}
.b8b-leyenda .is-falta::before{border:1px dashed #5a5a5a;background:none}

/* --- El cuadro: la mariposa en una grilla (cada llave trae su celda en --c/--f/--s y, traspuesta, --f0/--r2) --- */
/* --F y --filas llegan como números: un «repeat(» en el style inline lo aplasta a 1 columna la regla móvil de style.css (≤480 px) */
.b8b-cuadro{--vert:0;position:relative;display:grid;grid-template-columns:repeat(var(--F),minmax(0,1fr)) minmax(0,1.45fr) repeat(var(--F),minmax(0,1fr));grid-template-rows:auto repeat(var(--filas),auto);gap:16px 18px;padding:46px 12px 18px}
.b8b-h{grid-column:var(--c);grid-row:1;align-self:end;justify-self:center;z-index:1;white-space:nowrap;padding:3px 16px;background:var(--bone);color:var(--ink-000);font-family:var(--tv);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.b8b-h.is-ring{background:var(--b8b-a2);color:var(--b8b-ta2)}
.b8b-ring{grid-column:var(--ra)/var(--rb);grid-row:1/-1;position:relative;margin:-34px -9px -8px;pointer-events:none;border:1px solid color-mix(in srgb,var(--b8b-a2) 35%,transparent);background:linear-gradient(var(--b8b-a2),var(--b8b-a2)) 0 0/22px 3px no-repeat,linear-gradient(var(--b8b-a2),var(--b8b-a2)) 0 0/3px 22px no-repeat,linear-gradient(var(--b8b-a2),var(--b8b-a2)) 100% 100%/22px 3px no-repeat,linear-gradient(var(--b8b-a2),var(--b8b-a2)) 100% 100%/3px 22px no-repeat}
.b8b-ring b{position:absolute;top:-11px;left:22px;display:flex;align-items:center;gap:7px;white-space:nowrap;padding:3px 14px 3px 10px;background:var(--b8b-a2);color:var(--b8b-ta2);font-family:var(--tv);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.b8b-ring b::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--b8b-ta2)}
.b8b-lineas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.b8b-lineas path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.b8b-lineas .is-ring{stroke:color-mix(in srgb,var(--b8b-a2) 45%,transparent)}
.b8b-lineas .is-camino{stroke:var(--b8b-a);stroke-width:2.6}

/* Llave = un par de placas de marcador. Con video es un enlace (sin JS abre YouTube) */
.b8b-llave{grid-column:var(--c);grid-row:var(--f)/span var(--s);align-self:center;z-index:1;display:grid;gap:3px;min-width:0;color:#7a7a7a;text-decoration:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
a.b8b-llave:hover{transform:translateY(-2px)}
a.b8b-llave:hover .b8b-llave__b:not(.is-gana){color:var(--bone)}
.b8b-llave__b{display:flex;align-items:center;gap:10px;min-width:0;min-height:32px;padding:5px 18px 4px 0;background:linear-gradient(90deg,#1f1f1f,#141414);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);font-family:var(--tv);font-weight:700;font-size:clamp(15px,1.45cqw,20px);line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
.b8b-llave__b i{flex:none;align-self:stretch;width:6px;margin-block:-5px -4px;background:#3a3a3a}
.b8b-llave__b>span:not(.b8b-sr){min-width:0}
.b8b-llave__b.is-gana{background:linear-gradient(90deg,var(--b8b-a),color-mix(in srgb,var(--b8b-a) 88%,#000));color:var(--b8b-ta)}
.b8b-llave__b.is-gana i{background:var(--b8b-ta)}
.b8b-llave.is-R .b8b-llave__b{flex-direction:row-reverse;text-align:right;padding:5px 0 4px 18px;background:linear-gradient(270deg,#1f1f1f,#141414);clip-path:polygon(9px 0,100% 0,100% 100%,0 100%)}
.b8b-llave.is-R .b8b-llave__b.is-gana{background:linear-gradient(270deg,var(--b8b-a),color-mix(in srgb,var(--b8b-a) 88%,#000))}
.b8b-llave__marca{justify-self:start;margin-bottom:2px;padding:2px 10px;border:1px solid var(--b8b-a2);color:var(--b8b-a2);font-family:var(--tv);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.b8b-llave__marca::before{content:'★ '}
.b8b-llave.is-R .b8b-llave__marca{justify-self:end}
.b8b-llave.is-sin-video{cursor:default}
/* Batalla de Estilos: el estilo de cada bailarín, al lado del nombre (solo donde hay espacio) */
.b8b-estilo{display:block;margin-top:1px;font-family:var(--font-mono);font-size:.5em;font-weight:400;letter-spacing:.12em;line-height:1.2}
/* Llaves sin video: se sabe quién pasó, no contra quién */
.b8b-llave__b.is-hueco{background:none;color:#808080;box-shadow:inset 0 0 0 1px #2e2e2e;font-size:.8em;letter-spacing:.1em}
.b8b-llave__b.is-hueco i{background:#2e2e2e}
.b8b [data-v]{cursor:pointer}
/* ▶ al pie de cada batalla: solo donde no hay hover (celular, tablet, pantallas táctiles) */
.b8b-llave__ver{display:none;align-items:center;gap:4px;padding-top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--b8b-a);font-variant-numeric:tabular-nums}
@media (hover:none){.b8b-llave__ver{display:flex}}
.b8b-llave.is-R .b8b-llave__ver{justify-content:flex-end}
.b8b-fin .b8b-llave__ver{justify-content:center;font-size:12px}
/* Mini card del hover (la crea box8-cuadro.js, position fixed) */
.b8b-tip{position:fixed;z-index:9000;width:220px;display:grid;gap:4px;padding:6px 6px 9px;background:#101010;border:1px solid var(--b8b-a);box-shadow:0 12px 30px rgba(0,0,0,.6);cursor:pointer}
.b8b-tip[hidden]{display:none}
.b8b-tip__media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:4px;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--b8b-a2) 16%,transparent),transparent 65%),#060606}
.b8b-tip__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.b8b-tip__media .b8b-play{position:relative}
.b8b-tip__ver{font-family:'Barlow Condensed',var(--font-display);font-weight:800;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--b8b-a)}
.b8b-tip__ronda,.b8b-tip__gana{padding-inline:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a}
.b8b-tip__gana{color:#f5f5f5}

/* Sigue a un bailarín: solo su camino lleva el acento; el resto queda en gris, pero legible (nada de opacidad) */
.b8b-panel.is-filtro .b8b-llave:not(.is-sigue) .b8b-llave__b.is-gana{background:#262626;color:#a3a3a3}
.b8b-panel.is-filtro .b8b-llave:not(.is-sigue) .b8b-llave__b.is-gana i{background:#4a4a4a}
.b8b-llave__b.is-sigue{box-shadow:inset 0 0 0 2px var(--bone)}
.b8b-panel.is-filtro .b8b-lineas{opacity:.3}

/* El campeón: placa de TV entera y al centro */
.b8b-fin{grid-column:var(--c);grid-row:2/-1;align-self:center;display:flex;flex-direction:column;gap:14px;z-index:1;min-width:0}
.b8b-fin .b8b-llave{align-self:stretch}
.b8b-fin .b8b-llave__b,.b8b-fin .b8b-llave.is-R .b8b-llave__b{justify-content:center;min-height:44px;padding-inline:18px;font-size:clamp(20px,2cqw,28px);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.b8b-fin .b8b-llave__b i{display:none}
.b8b-campeon{display:grid;justify-items:stretch;text-align:center;filter:drop-shadow(0 12px 30px color-mix(in srgb,var(--b8b-a2) 20%,transparent))}
.b8b-campeon svg{justify-self:center;width:46px;margin-bottom:8px;color:var(--b8b-a2);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--b8b-a2) 50%,transparent))}
.b8b-campeon small{justify-self:center;padding:4px 18px;background:var(--b8b-a2);color:var(--b8b-ta2);font-family:var(--tv);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.b8b-campeon b{padding:12px 14px 6px;background:var(--bone);color:var(--ink-000);font-family:var(--tv);font-weight:800;font-size:clamp(40px,4.4cqw,66px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
.b8b-campeon span{padding:7px 12px;border-top:3px solid var(--b8b-a2);background:#1a1a1a;color:var(--ash);font-family:var(--tv);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* Celular y tablet: la misma mariposa, en vertical */
@container (max-width:999px){
  .b8b-cuadro{--vert:1;grid-template-columns:repeat(var(--filas),minmax(0,1fr));grid-template-rows:none;gap:6px 4px;padding:10px 0 6px}
  .b8b-h{grid-column:1/-1;grid-row:var(--hr);margin-top:12px;font-size:12px;padding:3px 14px}
  .b8b-ring{grid-column:1/-1;grid-row:var(--ma)/var(--mb);margin:0 -4px}
  .b8b-ring b{top:6px;left:8px;font-size:11px;z-index:2}
  .b8b-largo{display:none}
  .b8b-llave{grid-column:var(--f0)/span var(--s);grid-row:var(--r2);justify-self:center;width:100%;max-width:260px;gap:2px}
  .b8b-llave__b,.b8b-llave.is-R .b8b-llave__b{flex-direction:row;text-align:left;gap:5px;min-height:28px;padding:5px 4px 4px 0;background:#181818;clip-path:none;font-size:12px;letter-spacing:-.01em}
  .b8b-llave__b.is-gana,.b8b-llave.is-R .b8b-llave__b.is-gana{background:var(--b8b-a)}
  .b8b-llave__b i{width:3px}
  .b8b-llave.r1 .b8b-llave__b,.b8b-llave.r2 .b8b-llave__b{min-height:32px;font-size:15px;letter-spacing:.02em}
  .b8b-llave.is-R .b8b-llave__marca{justify-self:start}
  .b8b-estilo{display:none}
  .b8b-llave__ver,.b8b-llave.is-R .b8b-llave__ver{display:flex;justify-content:flex-start;font-size:9px}
  .b8b-fin .b8b-llave__ver{justify-content:center;font-size:11px}
  .b8b-llave__marca{padding:1px 6px;font-size:10px;letter-spacing:.08em}
  .b8b-fin{grid-column:1/-1;grid-row:var(--r2);justify-self:center;width:min(100%,300px);margin-block:6px}
  .b8b-fin .b8b-llave{max-width:none}
  .b8b-fin .b8b-llave__b,.b8b-fin .b8b-llave.is-R .b8b-llave__b{min-height:40px;font-size:23px;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
  .b8b-fin .b8b-llave__b.is-gana{background:var(--b8b-a)}
  .b8b-campeon b{font-size:50px}
}

/* Revelación por rondas (box8-cuadro.js agrega .is-rev; sin JS o con reduced-motion el cuadro queda completo) */
.b8b-revelar{align-self:flex-end;min-height:48px;padding:0 18px;background:none;border:1px solid var(--b8b-a);color:var(--bone);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.b8b-revelar:hover{background:var(--b8b-a);color:var(--b8b-ta)}
.b8b-llave,.b8b-campeon{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1.15)}
.b8b-cuadro.is-rev .b8b-llave:not(.ve){opacity:0;transform:translateY(8px);pointer-events:none}
.b8b-cuadro.is-rev .b8b-lineas path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s ease,stroke .5s ease,stroke-width .5s ease}
.b8b-cuadro.is-rev .b8b-lineas path.on{stroke-dashoffset:0}
.b8b-cuadro.is-rev:not(.trazo) .b8b-lineas .is-camino{stroke:color-mix(in srgb,var(--b8b-a2) 45%,transparent);stroke-width:1.5}
.b8b-cuadro.is-rev .b8b-lineas .is-camino.r1{transition-delay:0s,.25s,.25s}
.b8b-cuadro.is-rev .b8b-lineas .is-camino.r2{transition-delay:0s,.5s,.5s}
.b8b-cuadro.is-rev .b8b-campeon:not(.ve){opacity:0;transform:translateY(12px) scale(.94)}
.b8b-cuadro.is-rev .b8b-campeon.ve svg{animation:b8b-corona .9s cubic-bezier(.2,.8,.3,1.3) both}
.b8b-cuadro.is-rev .b8b-llave:not(.lit) .b8b-llave__b.is-gana{background:#181818;color:#7a7a7a}
.b8b-cuadro.is-rev .b8b-llave:not(.lit) .b8b-llave__b.is-gana i{background:#3a3a3a}
.b8b-cuadro.is-rev .b8b-llave.lit .b8b-llave__b.is-gana{animation:b8b-enciende .6s ease-out}
@keyframes b8b-corona{from{opacity:0;transform:translateY(-20px) scale(.5)}to{opacity:1;transform:none}}
@keyframes b8b-enciende{from{filter:brightness(2.2)}to{filter:none}}
@media (prefers-reduced-motion:reduce){.b8b-llave,.b8b-campeon,.b8b-lineas path{transition:none!important;animation:none!important}}

/* --- 7 to Smoke --- */
.b8b-smoke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.25rem,3vw,2.5rem);border:1px solid color-mix(in srgb,var(--b8b-a2) 35%,transparent);background:var(--ink-050)}
@container (max-width:860px){.b8b-smoke{grid-template-columns:minmax(0,1fr)}}
.b8b-smoke__info{display:grid;gap:1rem;align-content:start;min-width:0}
.b8b-smoke__eyebrow,.b8b-extra__sub{justify-self:start;padding:3px 14px;background:var(--b8b-a2);color:var(--b8b-ta2);font-family:var(--tv);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.b8b-smoke__campeon{display:flex;align-items:stretch;justify-self:start;max-width:100%;background:var(--bone);color:var(--ink-000);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.b8b-smoke__campeon svg{flex:none;width:34px;box-sizing:content-box;padding:14px;background:var(--b8b-a2);color:var(--b8b-ta2)}
.b8b-smoke__campeon span{display:grid;align-content:center;padding:6px 30px 6px 14px;min-width:0}
.b8b-smoke__campeon small{font-family:var(--tv);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#555}
.b8b-smoke__campeon b{font-family:var(--tv);font-weight:800;font-size:clamp(2.4rem,5cqw,4rem);line-height:.9;text-transform:uppercase;overflow-wrap:anywhere}
.b8b-smoke__regla{max-width:42ch;color:var(--ash);font-size:.95rem}
/* Tabla de puntos: lugar (o entrada) · bailarín · 7 fichas y el número */
.b8b-tabla{display:grid;gap:3px}
.b8b-tabla__cab,.b8b-tabla__fila{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:center;gap:10px}
.b8b-tabla__cab{padding:0 10px 4px 0;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.b8b-tabla__cab span:first-child{padding-left:10px}
.b8b-tabla__fila{min-height:34px;padding:4px 12px 3px 0;background:#181818;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);font-family:var(--tv);font-weight:700;font-size:1.1rem;line-height:1.05;text-transform:uppercase;color:#8a8a8a}
.b8b-tabla__fila>span:first-child{align-self:stretch;display:grid;place-items:center;margin-block:-4px -3px;background:#2a2a2a;color:var(--bone);font-variant-numeric:tabular-nums}
.b8b-tabla__fila small{margin-left:6px;font-size:.7rem;letter-spacing:.12em}
.b8b-tabla__fila.is-campeon{background:var(--b8b-a);color:var(--b8b-ta)}
.b8b-tabla__fila.is-campeon>span:first-child{background:var(--b8b-ta);color:var(--b8b-a)}
.b8b-pips{display:flex;align-items:center;gap:4px}
.b8b-pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid #4a4a4a}
.b8b-pips i.on{background:var(--b8b-a);border-color:var(--b8b-a)}
.b8b-tabla__fila.is-campeon .b8b-pips i{border-color:rgba(0,0,0,.45)}
.b8b-tabla__fila.is-campeon .b8b-pips i.on{background:var(--b8b-ta);border-color:var(--b8b-ta)}
.b8b-pips b{min-width:1.6em;margin-left:6px;text-align:right;font-variant-numeric:tabular-nums}
.b8b-tabla__nota{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
@container (max-width:420px){.b8b-pips{gap:3px}.b8b-pips i{width:8px;height:8px}.b8b-tabla__cab,.b8b-tabla__fila{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:6px}}
.b8b-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;align-content:start;min-width:0}

/* Tarjeta de video (7 to Smoke y extras) */
.b8b-vid{position:relative;display:flex;align-items:flex-end;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--ink-300);background:var(--ink-100);color:var(--bone);text-decoration:none;transition:border-color .25s var(--ease)}
.b8b-vid.is-caido{cursor:default;color:var(--ash)}
.b8b-vid.is-caido small{margin-left:auto;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase}
.b8b-vid:hover{border-color:var(--b8b-a)}
.b8b-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.b8b-vid__txt{position:relative;display:flex;align-items:center;gap:.8rem;width:100%;padding:.8rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.95) 35%,transparent)}
.b8b-vid b{font-family:var(--tv);font-weight:700;font-size:1.5rem;line-height:1;text-transform:uppercase}
.b8b-vid small{margin-left:auto;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--ash);font-variant-numeric:tabular-nums}
.b8b-play{flex:none;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--bone);border-radius:50%;background:rgba(0,0,0,.45)}
.b8b-play::after{content:'';margin-left:3px;border-left:12px solid var(--bone);border-block:7.5px solid transparent}

/* --- Fuera del cuadro --- */
.b8b-extras{display:grid;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--ink-200)}
.b8b-extras__h{font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.b8b-extras__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@container (max-width:760px){.b8b-extras__grid{grid-template-columns:minmax(0,1fr)}}
.b8b-extra{display:grid;gap:.75rem;align-content:start;min-width:0;padding:1.25rem;border:1px solid var(--ink-200);background:var(--ink-050)}
.b8b-extra__t{font-family:var(--tv);font-weight:800;font-size:2rem;line-height:.95;text-transform:uppercase;color:var(--bone);text-wrap:balance}
.b8b-extra__vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}
.b8b-extra .b8b-vid b{font-size:1.25rem}

/* --- Modal del video (lo crea box8-cuadro.js) --- */
.b8b-modal{position:fixed;inset:0;height:100dvh;z-index:10000;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top,0px)) 1rem max(1rem,env(safe-area-inset-bottom,0px));overflow-y:auto;background:rgba(0,0,0,.93)}
.b8b-modal__caja{width:min(100%,1000px);background:var(--ink-050);border:1px solid var(--ink-300);border-top:3px solid var(--b8b-a)}
.b8b-modal__barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem .4rem .4rem 1rem}
.b8b-modal__meta{padding:3px 14px;background:var(--b8b-a);color:var(--b8b-ta);font-family:'Barlow Condensed',var(--font-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.b8b-modal__meta:empty{display:none}
.b8b-modal__cerrar{flex:none;width:48px;height:48px;margin-left:auto;background:none;border:1px solid transparent;color:var(--bone);font-family:var(--font-mono);font-size:1.75rem;line-height:1;cursor:pointer}
.b8b-modal__cerrar:hover{border-color:var(--ink-400)}
.b8b-modal__media{position:relative;aspect-ratio:16/9;max-width:100%;background:#000}
.b8b-modal__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.b8b-modal__pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;padding:1rem}
.b8b-modal__txt{flex:1 1 320px;min-width:0}
.b8b-modal__titulo{font-family:'Barlow Condensed',var(--font-display);font-weight:800;font-size:clamp(1.75rem,4vw,2.5rem);line-height:.95;text-transform:uppercase;color:var(--bone);text-wrap:balance}
.b8b-modal__res{margin-top:.35rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b8b-a)}
.b8b-modal__desc{margin-top:.5rem;max-width:62ch;color:var(--ash);font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b8b-modal__desc:empty{display:none}
.b8b-modal__acc{display:flex;flex-wrap:wrap;gap:.6rem}
.b8b-modal__doc{min-height:48px;padding:.8rem 1.1rem;background:none;border:1px solid var(--b8b-a2);color:var(--bone);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.b8b-modal__yt{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.8rem 1.25rem;background:var(--b8b-a);color:var(--b8b-ta);font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.b8b-modal__yt::after{content:'↗'}
.b8b-modal__nota{flex-basis:100%;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b8b-dim)}
/* Vista previa sin iframes (artifact): un marco que enlaza a YouTube */
.b8b-modal__mini{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none}
.b8b-modal__marco{position:absolute;inset:0;display:grid;align-content:end;padding:1.5rem;outline:1px solid var(--ink-300);outline-offset:-10px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--b8b-a2) 14%,transparent),transparent 65%),var(--ink-000)}
.b8b-modal__marco span{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--b8b-a)}
.b8b-modal__mini .b8b-play{position:relative;width:72px;height:72px}
.b8b-modal__mini .b8b-play::after{border-left-width:18px;border-block-width:11px}