/*
 * EL TRAJE DE BLAZE.
 *
 * Todo sale del escudo de la liga: negro, su rojo, el verde de la greca y
 * blanco hueso. Dos reglas de color que no se negocian: el ROJO es la acción
 * (botones, lo elegido, el líder) y el VERDE es lo vivo (la cuenta regresiva,
 * quien ganó, los enlaces de "ver más"). Nada redondo: las tarjetas son
 * placas con las esquinas cortadas.
 *
 * ESTA HOJA NO PASA POR EL EMPAQUETADOR. Vive en public/ y solo la pide la
 * liga que trae el traje puesto (un <link> que pone el layout o el marco):
 * las hojas importadas viajan a TODAS las ligas, y este traje viste el sitio
 * entero, panel incluido en la ruta. El precio es que aquí no hay prefijos
 * automáticos ni anidado: se escribe CSS llano, que entienda un iPhone viejo.
 */
[data-traje="blaze"].micrositio:not(.panel-claro):not(:has(.panel-claro)),
[data-traje="blaze"]:not(.micrositio) {
  --bz-noche: #070707;
  --bz-carbon: #131314;
  --bz-carbon2: #1e1e20;
  --bz-linea: #333336;
  --bz-hueso: #efeae0;
  --bz-gris: #9a968e;
  --bz-fuego: #c8141f;
  --bz-verde: #35b558;
  --bz-llama: linear-gradient(112deg, #2a0306 0%, #8e0f18 45%, #c8141f 100%);
  --bz-slab: var(--bz-fuente-slab), Rockwell, serif;
  --bz-rotulo: var(--bz-fuente-rotulo), Impact, sans-serif;

  /* los tokens de la casa: lo que el traje no viste hereda la paleta */
  --background: var(--bz-noche);
  --foreground: var(--bz-hueso);
  --card: var(--bz-carbon);
  --card-foreground: var(--bz-hueso);
  --popover: var(--bz-carbon);
  --popover-foreground: var(--bz-hueso);
  --primary: var(--bz-fuego);
  --primary-foreground: #fff;
  --secondary: var(--bz-carbon2);
  --secondary-foreground: var(--bz-hueso);
  --muted: var(--bz-carbon2);
  --muted-foreground: var(--bz-gris);
  --accent: var(--bz-carbon2);
  --accent-foreground: var(--bz-hueso);
  --border: var(--bz-linea);
  --input: var(--bz-linea);
  --ring: var(--bz-verde);
  /* los estados de la casa, en oscuro: el "clasifica" de la tabla es verde
     vivo sobre un tinte, no un renglón claro donde no se lee el nombre */
  --ok: #5fd07f;
  --ok-suave: #35b55826;
  --ok-punto: #35b558;
  --pendiente: #f0b65a;
  --pendiente-suave: #f0b65a22;
  --pendiente-punto: #e09a2b;
  --error: #ff7a70;
  --error-suave: #c8141f33;
  --error-punto: #ef4444;
  --info: #8ab8ee;
  --info-suave: #4d8fd62b;
  --info-punto: #4d8fd6;
  --radius: 0.1875rem;
  --font-heading: var(--bz-slab);

  color-scheme: dark;
  color: var(--bz-hueso);
  font-family: var(--bz-fuente-texto), system-ui, sans-serif;
  background:
    radial-gradient(120% 60vh at 50% 0, #1a0505 0, transparent 60%),
    repeating-linear-gradient(115deg, #ffffff05 0 1px, transparent 1px 9px),
    var(--bz-noche);
}


/* la greca del escudo: la firma, y solo bajo el encabezado */
[data-traje="blaze"] .bz-greca {
  height: 12px;
  background: #000
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 11h5V1h14v8H9V5h5' fill='none' stroke='%2335b558' stroke-width='2'/%3E%3C/svg%3E")
    repeat-x left center / 24px 12px;
}

/* la placa: esquinas cortadas en diagonal, de tamaño --c */
[data-traje="blaze"] .bz-placa {
  clip-path: polygon(0 0, calc(100% - var(--c, 18px)) 0, 100% var(--c, 18px), 100% 100%, var(--c, 18px) 100%, 0 calc(100% - var(--c, 18px)));
}

/* letra de bloque: títulos y cifras */
[data-traje="blaze"] .bz-cifra,
[data-traje="blaze"] .bz-titulo,
[data-traje="blaze"] .bz-dia {
  font-family: var(--bz-slab);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
}
[data-traje="blaze"] .bz-titulo {
  font-size: clamp(26px, 5vw, 52px);
}
[data-traje="blaze"] .bz-titulo b {
  font-weight: 400;
  color: var(--bz-fuego);
}

/* ── portada ── */
[data-traje="blaze"] .bz-hoy {
  position: relative;
  overflow: hidden;
  padding: 24px 22px 30px;
  background: var(--bz-llama);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 40px) 100%, 0 100%);
}
[data-traje="blaze"] .bz-hoy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, #ffffff14 0 2px, transparent 2px 26px);
  pointer-events: none;
}
[data-traje="blaze"] .bz-hoy > * {
  position: relative;
}
[data-traje="blaze"] .bz-hoy .bz-hoy-escudo {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #00000055, 0 10px 24px -8px #000;
}
[data-traje="blaze"] .bz-vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  max-width: calc(100% - 92px);
  padding: 4px 12px;
  border-radius: 3px;
  background: #0b0b0b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-traje="blaze"] .bz-vivo span {
  font-family: inherit;
  white-space: nowrap;
}
[data-traje="blaze"] .bz-vivo i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bz-verde);
  box-shadow: 0 0 0 4px #35b55844;
}
[data-traje="blaze"] .bz-dia {
  margin: 14px 0 6px;
  font-size: clamp(56px, 17vw, 128px);
  line-height: 0.9;
  text-shadow: 0 4px 0 #00000026;
}
[data-traje="blaze"] .bz-dia span {
  display: block;
  font-size: 0.5em;
  letter-spacing: 0.04em;
}
[data-traje="blaze"] .bz-dia-nombre {
  max-width: calc(100% - 92px);
  font-size: clamp(34px, 9vw, 84px);
  overflow-wrap: anywhere;
}

/* el buscador: el mismo de toda la casa, con la placa del traje */
[data-traje="blaze"] .bz-buscar > div {
  max-width: none;
}
[data-traje="blaze"] .bz-buscar input {
  height: 60px;
  border: 0;
  border-radius: 3px;
  background: var(--bz-carbon);
  box-shadow: inset 0 0 0 2px var(--bz-fuego);
  font-size: 17px;
  font-weight: 600;
}
[data-traje="blaze"] .bz-buscar input:focus {
  box-shadow: inset 0 0 0 3px var(--bz-verde);
}
[data-traje="blaze"] .bz-buscar ul {
  top: 66px;
  border-radius: 3px;
}
[data-traje="blaze"] .bz-buscar li button {
  min-height: 44px;
}

/* ── escudos de equipo ── */
[data-traje="blaze"] .bz-esc {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--t, 44px);
  height: var(--t, 44px);
  overflow: hidden;
  border-radius: 4px;
  background: var(--bz-carbon2);
  box-shadow: 0 0 0 1.5px #ffffff1f;
}
[data-traje="blaze"] .bz-esc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-traje="blaze"] .bz-esc-mono {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(160deg, #c8141f, #4a0609);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  padding-bottom: calc(var(--t, 44px) * 0.14);
  font-family: var(--bz-slab);
  font-size: calc(var(--t, 44px) * 0.36);
  color: #fff;
}

/* ── partidos ── */
[data-traje="blaze"] .bz-juego {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 132px;
  height: 100%;
  padding: 14px 14px 14px 22px;
  background: var(--bz-carbon);
}
[data-traje="blaze"] .bz-juego::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--bz-fuego);
}
[data-traje="blaze"] .bz-cat,
[data-traje="blaze"] .bz-cinta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--bz-hueso);
  color: var(--bz-noche);
  font: 800 14px var(--bz-rotulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
[data-traje="blaze"] .bz-cat {
  margin-bottom: 8px;
}
[data-traje="blaze"] .bz-eq {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
[data-traje="blaze"] .bz-eq b {
  margin-left: auto;
  font-size: 24px;
}
[data-traje="blaze"] .bz-perdio {
  color: var(--bz-gris);
}
[data-traje="blaze"] .bz-gano b {
  color: var(--bz-verde);
}
[data-traje="blaze"] .bz-campo {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 78px;
  min-height: 78px;
  padding: 8px;
  border-radius: 3px;
  background: var(--bz-carbon2);
}
[data-traje="blaze"] .bz-campo small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bz-gris);
}
[data-traje="blaze"] .bz-campo b {
  font-size: 26px;
  color: var(--bz-verde);
}

/* ── tu equipo ── */
[data-traje="blaze"] .bz-mio {
  display: grid;
  align-content: start;
  gap: 12px;
  height: 100%;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #1e1e20, #131314);
  box-shadow: inset 0 3px 0 var(--bz-verde);
}
[data-traje="blaze"] .bz-mio .bz-cat {
  margin-bottom: 4px;
}

/* ── tabla ── */
[data-traje="blaze"] .bz-fila {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 30px 44px 52px;
  align-items: center;
  gap: 6px;
  min-height: 60px;
  padding: 6px 8px 6px 6px;
  background: var(--bz-carbon);
  text-align: center;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
[data-traje="blaze"] .bz-fila-cab {
  min-height: 28px;
  background: none;
  clip-path: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bz-gris);
}
[data-traje="blaze"] .bz-pos {
  font-size: 22px;
  color: var(--bz-gris);
}
[data-traje="blaze"] .bz-dif {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 3px;
  background: var(--bz-carbon2);
  font-size: 17px;
}
[data-traje="blaze"] .bz-lider {
  background: var(--bz-llama);
  color: #fff;
}
[data-traje="blaze"] .bz-lider .bz-pos {
  color: #fff;
}
[data-traje="blaze"] .bz-lider .bz-dif {
  background: #0b0b0b;
}

/* ── MVP de la semana ── */
[data-traje="blaze"] .bz-carrusel {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 4px 16px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
[data-traje="blaze"] .bz-carrusel li {
  flex: none;
  width: 78%;
  max-width: 300px;
  scroll-snap-align: start;
}
[data-traje="blaze"] .bz-mvp {
  --c: 22px;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 10px;
  height: 100%;
  min-height: 290px;
  padding: 16px;
  overflow: hidden;
  background: linear-gradient(150deg, #c8141f 0%, #5a0810 48%, #131314 100%);
  color: #fff;
}
[data-traje="blaze"] .bz-mvp::before {
  content: attr(data-n);
  position: absolute;
  right: -6px;
  top: -26px;
  font: 400 170px/1 var(--bz-slab);
  color: #00000038;
}
[data-traje="blaze"] .bz-mvp > * {
  position: relative;
}
[data-traje="blaze"] .bz-cinta {
  justify-self: start;
  font-size: 15px;
}
[data-traje="blaze"] .bz-retrato {
  position: relative;
  flex: none;
  width: 104px;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: #0b0b0b;
  box-shadow: 0 0 0 2px var(--bz-hueso), 0 12px 24px -10px #000;
}
[data-traje="blaze"] .bz-retrato > img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
}
[data-traje="blaze"] .bz-retrato .bz-esc {
  position: absolute;
  right: -14px;
  bottom: -12px;
  box-shadow: 0 0 0 2px #0b0b0b;
}
[data-traje="blaze"] .bz-logro {
  padding: 6px 10px;
  border-radius: 3px;
  background: #0b0b0bcc;
  font-size: 13px;
  font-weight: 600;
}
[data-traje="blaze"] .bz-logro b {
  margin-right: 4px;
  font: 400 16px var(--bz-slab);
  color: var(--bz-verde);
}

/* ── la cinta de equipos ── */
[data-traje="blaze"] .bz-cinta-eq {
  margin: 0 -16px;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-traje="blaze"] .bz-cinta-eq > div {
  display: flex;
  width: max-content;
}
[data-traje="blaze"] .bz-cinta-eq ul {
  display: flex;
  gap: 10px;
  padding: 4px 10px 12px 0;
}
[data-traje="blaze"] .bz-cinta-eq ul:first-child {
  padding-left: 16px;
}
[data-traje="blaze"] .bz-eqc {
  --c: 14px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 132px;
  height: 100%;
  min-height: 168px;
  padding: 16px 8px 12px;
  background: var(--bz-carbon);
  text-align: center;
  transition: background 0.18s, transform 0.18s;
}
[data-traje="blaze"] .bz-eqc b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
[data-traje="blaze"] .bz-eqc small {
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--bz-hueso);
  color: var(--bz-noche);
  font: 800 13px var(--bz-rotulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-traje="blaze"] .bz-eqc:hover {
  background: var(--bz-fuego);
  transform: translateY(-3px);
}

/* ── torneos: una placa por rama, una ficha por categoría ── */
[data-traje="blaze"] .bz-rama {
  height: 100%;
  padding: 16px;
  background: var(--bz-carbon);
  box-shadow: inset 4px 0 0 var(--bz-fuego);
}
[data-traje="blaze"] .bz-div {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 6px;
  border-radius: 3px;
  background: var(--bz-carbon2);
  box-shadow: inset 0 -3px 0 var(--bz-linea);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
[data-traje="blaze"] .bz-div b {
  font-size: 22px;
}
[data-traje="blaze"] .bz-div small {
  font-size: 12px;
  color: var(--bz-gris);
}
[data-traje="blaze"] .bz-div:hover {
  background: var(--bz-fuego);
  box-shadow: inset 0 -3px 0 #00000055;
  color: #fff;
}
[data-traje="blaze"] .bz-div:hover small {
  color: #ffffffcc;
}

/* el botón del traje: placa con la esquina cortada y letra de rótulo */
[data-traje="blaze"] .bz-boton,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) [class~="group/button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: auto;
  padding: 6px 18px;
  border: 0;
  border-radius: 0;
  background: var(--bz-fuego);
  color: #fff;
  font: 800 17px/1.1 var(--bz-rotulo);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
[data-traje="blaze"] .bz-boton:hover,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) [class~="group/button"]:hover {
  background: #e21a26;
  color: #fff;
}
[data-traje="blaze"] .bz-boton-hueco,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) [class~="group/button"].border-border {
  background: var(--bz-carbon2);
  color: var(--bz-hueso);
  box-shadow: inset 0 -3px 0 var(--bz-fuego);
}

/* ── EL SITIO ENTERO ──
   Con el traje publicado, el layout de la liga pone el data-traje en su
   envoltorio y los tokens de arriba visten rol, tabla, equipos y fichas sin
   tocar sus componentes. Lo de aquí abajo es lo único que se escribe a mano
   fuera de la portada, y TODO va con el candado del panel: ese envoltorio
   también rodea al panel de la liga, que no se viste. */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header {
  border-bottom: 0;
  background: rgba(7, 7, 7, 0.94);
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header > span[aria-hidden] {
  display: none;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header::after {
  content: "";
  display: block;
  height: 12px;
  background: #000
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 11h5V1h14v8H9V5h5' fill='none' stroke='%2335b558' stroke-width='2'/%3E%3C/svg%3E")
    repeat-x left center / 24px 12px;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header .truncate {
  font-family: var(--bz-slab);
  font-weight: 400;
  text-transform: uppercase;
}
/* la letra de bloque solo trae un peso: pedirle negrita la engorda a la
   fuerza y sale borrosa */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) h1,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) h2,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) [style*="font-heading"] {
  font-weight: 400;
  letter-spacing: 0;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) h1 {
  text-transform: uppercase;
}
/* en el rol el nombre del equipo se lee completo, en dos renglones si hace
   falta, en vez de cortarse en "Raptors…" */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) a[href*="/partidos/"] .truncate {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header [class~="group/button"] {
  min-height: 40px;
  padding: 4px 12px;
  font-size: 15px;
}
/* la greca va una sola vez: bajo el encabezado, no otra vez en la portada */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) .bz-greca {
  display: none;
}
/* nada redondo: las pastillas que se tocan son placas */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) a.rounded-full,
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) button.rounded-full {
  border-radius: 3px;
}
/* los escudos de equipo, en buen tamaño en todos lados */
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) .escudo-equipo.size-5 {
  width: 28px;
  height: 28px;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) .escudo-equipo.size-7 {
  width: 40px;
  height: 40px;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) img.escudo-equipo {
  border-radius: 4px;
}
[data-traje="blaze"].micrositio:not(:has(.panel-claro)) span.escudo-equipo {
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(160deg, #c8141f, #4a0609) !important;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  padding-bottom: 12%;
  font-family: var(--bz-slab) !important;
  font-weight: 400;
}

@media (min-width: 768px) {
  [data-traje="blaze"].micrositio:not(:has(.panel-claro)) .escudo-equipo.size-5 {
    width: 32px;
    height: 32px;
  }
  [data-traje="blaze"] .bz-hoy {
    padding: 40px 40px 52px;
  }
  [data-traje="blaze"] .bz-hoy .bz-hoy-escudo {
    right: 40px;
    top: 40px;
    width: 150px;
    height: 150px;
  }
  [data-traje="blaze"] .bz-vivo,
  [data-traje="blaze"] .bz-dia-nombre {
    max-width: calc(100% - 190px);
  }
  [data-traje="blaze"] .bz-carrusel {
    margin: 0;
    padding: 4px 0 14px;
    scroll-padding-left: 0;
  }
  [data-traje="blaze"] .bz-carrusel li {
    width: 240px;
  }
  [data-traje="blaze"] .bz-fila {
    grid-template-columns: 44px minmax(0, 1fr) 44px 60px 64px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-traje="blaze"] .bz-vivo i {
    animation: bz-pulso 1.6s infinite;
  }
  /* la greca camina: es la firma, y es lo único que se mueve siempre */
  [data-traje="blaze"] .bz-greca,
  [data-traje="blaze"].micrositio:not(:has(.panel-claro)) > header::after {
    animation: bz-greca 1.4s linear infinite;
  }
  /* la placa del día entra de golpe y sus rayas corren despacio */
  [data-traje="blaze"] .bz-hoy::before {
    inset: 0 -52px 0 0;
    animation: bz-rayas 3s linear infinite;
  }
  [data-traje="blaze"] .bz-dia {
    animation: bz-golpe 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  [data-traje="blaze"] .bz-hoy .bz-hoy-escudo {
    animation: bz-late 4s ease-in-out infinite;
  }
  /* las placas suben una tras otra */
  [data-traje="blaze"] .bz-lista > li {
    animation: bz-sube 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  [data-traje="blaze"] .bz-lista > li:nth-child(2) { animation-delay: 0.06s; }
  [data-traje="blaze"] .bz-lista > li:nth-child(3) { animation-delay: 0.12s; }
  [data-traje="blaze"] .bz-lista > li:nth-child(4) { animation-delay: 0.18s; }
  [data-traje="blaze"] .bz-lista > li:nth-child(5) { animation-delay: 0.24s; }
  [data-traje="blaze"] .bz-lista > li:nth-child(6) { animation-delay: 0.3s; }
  [data-traje="blaze"] .bz-lista > li:nth-child(n + 7) { animation-delay: 0.36s; }
  /* la cinta corre sola y se detiene al poner el dedo o el cursor */
  [data-traje="blaze"] .bz-cinta-eq {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  [data-traje="blaze"] .bz-cinta-eq ul:first-child {
    padding-left: 0;
  }
  [data-traje="blaze"] .bz-cinta-eq > div {
    animation: bz-corre var(--bz-dur, 60s) linear infinite;
  }
  [data-traje="blaze"] .bz-cinta-eq:hover > div,
  [data-traje="blaze"] .bz-cinta-eq:active > div,
  [data-traje="blaze"] .bz-cinta-eq:focus-within > div {
    animation-play-state: paused;
  }
  [data-traje="blaze"] .bz-juego,
  [data-traje="blaze"] .bz-mvp,
  [data-traje="blaze"] .bz-mio,
  [data-traje="blaze"] a.bz-fila {
    transition: transform 0.18s, filter 0.18s;
  }
  [data-traje="blaze"] .bz-juego:hover,
  [data-traje="blaze"] .bz-mvp:hover,
  [data-traje="blaze"] .bz-mio:hover,
  [data-traje="blaze"] a.bz-fila:hover {
    transform: translateY(-3px);
    filter: brightness(1.18);
  }
  [data-traje="blaze"] .bz-juego:active,
  [data-traje="blaze"] .bz-mvp:active,
  [data-traje="blaze"] .bz-mio:active,
  [data-traje="blaze"] .bz-div:active,
  [data-traje="blaze"] .bz-boton:active {
    transform: scale(0.97);
  }
}

@keyframes bz-pulso {
  50% {
    box-shadow: 0 0 0 8px #35b55800;
  }
}
@keyframes bz-greca {
  to {
    background-position-x: -24px;
  }
}
@keyframes bz-rayas {
  to {
    transform: translateX(-52px);
  }
}
@keyframes bz-golpe {
  from {
    opacity: 0;
    transform: scale(1.18) translateY(8px);
  }
}
@keyframes bz-late {
  50% {
    transform: scale(1.05) rotate(-3deg);
  }
}
@keyframes bz-corre {
  to {
    transform: translateX(-50%);
  }
}
@keyframes bz-sube {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}