/* ============================================================================
   SOMOS TRUFAS — BASE COMPARTIDA
   ============================================================================

   Lo que vive aquí lo usan LAS DOS páginas (index.html y media-kit/).
   Antes estaba copiado en el <style> de cada una: 31 reglas idénticas y 19
   que se habían ido separando sin querer (la hamburguesa medía 38px en una
   y 36px en la otra, los enlaces del menú .78rem y .74rem…). Un componente
   con el mismo nombre y dos comportamientos es el bug que aún no ha pasado.

   REGLA: si algo se ve igual en las dos páginas, va aquí. Si una necesita
   otra medida, la sobrescribe en su propio <style>, que se carga después.

   Lo que NO está aquí, a propósito:
     · paleta de gráficos   solo la usa el media kit
     · .card / .card-in     MISMO nombre, componentes distintos en cada
                            página. Unificarlos sería mezclar una tarjeta de
                            evento con una de pilar. Cada una la suya.
     · .hero*               maquetas distintas
     · prefers-reduced-motion más allá del scroll: cada página tiene sus
                            animaciones y su forma de apagarlas
   ========================================================================== */

/* ---------- LA TIPOGRAFÍA DE LA MARCA ----------
   DHARMA GOTHIC M, LA DE VERDAD. Hasta ahora el sitio pedía Big Shoulders
   Display a Google Fonts como SUSTITUTO: la del manual es Dharma Gothic M,
   que es de pago y no está en ningún servicio público. El parecido llegaba
   para el aire condensado, pero no es la letra de la marca, y en el manual la
   letra no es un detalle.

   Los archivos viven en /assets/fonts/ y salen de la carpeta de marca
   (Drive → Somos Trufas → Directiva → Branding Público → Fonts). Se sirven
   desde nuestro dominio: es la licencia de la organización, no una copia
   pública, así que no se enlaza desde fuera ni se sube a ningún CDN.

   VAN EN WOFF2 Y NO EN TTF, que es como llegaron: 15 KB por peso en vez de
   55. El navegador que no entienda woff2 —ninguno de los últimos diez años—
   se queda con Impact, que es la reserva condensada de la pila.

   TRES PESOS Y NO CATORCE: el sitio pide 500, 700 y 800 a la display, y cada
   peso que se declara es un archivo que alguien descarga. Las cursivas no
   entran porque la display nunca va en cursiva (el `em` del titular está
   puesto a font-style:normal a propósito).

   `font-display:swap` es el mismo trato que había con Google Fonts: primero
   se lee con la letra de reserva y la de marca entra cuando llega. Nunca hay
   un hueco en blanco esperando a una fuente.

   Los rangos de peso —100 600, 800 900— cubren de sobra lo que se pida: sin
   ellos, un font-weight:600 suelto en cualquier hoja se quedaría sin cara y
   el navegador engordaría la Regular a la fuerza. */
@font-face{
  font-family:'Dharma Gothic M';
  src:url('/assets/fonts/DharmaGothicM-Regular.woff2') format('woff2');
  font-weight:100 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Dharma Gothic M';
  src:url('/assets/fonts/DharmaGothicM-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Dharma Gothic M';
  src:url('/assets/fonts/DharmaGothicM-ExBold.woff2') format('woff2');
  font-weight:800 900;font-style:normal;font-display:swap;
}

/* ---------- TOKENS ----------
   Marca: Mikado Yellow #FFC621 · Liver #583F37 (Manual TRUFAS)
   Display: Dharma Gothic M  → la del manual, servida desde /assets/fonts/
   Texto:   Poppins          → según manual, desde Google Fonts
   Este es el único sitio donde se declaran los colores de marca. */
:root{
  --ink:#17110D;
  --surface:#241A15;
  --surface-2:#2E211A;
  --line:#4A362B;
  --cream:#F2E8DC;
  --muted:#B09781;
  --yellow:#FFC621;
  --brown:#583F37;
  --live:#FF4D3D;

  --bevel: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --bevel-sm: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  /* En rem, no en px, y esto importa más de lo que parece: toda la
     tipografía del sitio va en rem, así que si alguien tiene la fuente
     base del navegador por encima de 16px el texto crecía mientras el
     ancho de columna se quedaba clavado. Resultado: las tarjetas se
     estiraban a lo alto, la miniatura seguía igual de baja y las fechas
     se partían en dos renglones. Con la maqueta en la misma unidad que
     el texto, todo escala junto y la proporción se mantiene.
     73.75rem × 16 = los 1180px de siempre. */
  --wrap: 73.75rem;
  /* UNA SOLA ALTURA DE BARRA PARA TODO EL SITIO. Antes la portada iba a 68 y
     el media kit a 64, y cada página redeclaraba la suya. Cuatro píxeles no
     los identifica nadie a simple vista, pero al pasar de una página a otra
     se percibe que la barra "encoge", que es peor que si la diferencia fuera
     grande: se nota y no se sabe por qué.
     Si alguna página necesitara otra medida, que la sobrescriba con un motivo
     escrito al lado — no por haberse quedado así. */
  --nav-h: 68px;
}

/* ---------- RESET Y ELEMENTOS BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

h1,h2,h3{
  font-family:'Dharma Gothic M','Oswald',Impact,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:.01em;
}

.eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yellow);
}

:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* El acento del titular ("…para ayudar") baja de línea y va en amarillo.
   Es el mismo gesto de marca en las dos portadas; el tamaño del h1 no,
   que lo fija cada página. */
.hero h1 em{font-style:normal;color:var(--yellow);display:block}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.85rem 1.5rem;
  clip-path:var(--bevel-sm);
  transition:transform .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;border:none;
}
.btn-primary{background:var(--yellow);color:#1A1207}
.btn-primary:hover{transform:translateY(-2px);background:#FFD558}
.btn-ghost{background:rgba(242,232,220,.07);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:rgba(242,232,220,.13)}
.btn-sm{padding:.6rem 1.05rem;font-size:.7rem}
/* BOTÓN DE SOLO ICONO — el Discord de la barra. Estaba en el <style> de la
   portada y se sube aquí al estrenarlo /esports/: es la misma pieza, con el
   mismo logotipo y el mismo tamaño, y dos copias del mismo botón son dos
   sitios donde acaba midiendo distinto. Cada página conserva sus propios
   retoques por ancho, que dependen de sus puntos de ruptura y no de esto.

   El alto sale de --btn-h y no del relleno: así los tres botones de la barra
   —icono, texto y hamburguesa— miden lo mismo aunque su contenido no. */
.btn-icon{padding:0 1rem;height:var(--btn-h,38px);justify-content:center}
.btn-icon svg{width:22px;height:22px;fill:currentColor;display:block;flex:none}

/* ---------- BARRA DE PROGRESO DE LECTURA ----------
   El hilo amarillo de 2px que cruza arriba y avanza al bajar. Lo estrenó el
   media kit y ahora lo usa también la portada, así que la definición vive
   aquí en vez de copiada en las dos hojas — que es como empezaron .nav-brand
   y compañía antes de divergir.

   `position:fixed` y no `sticky`: tiene que quedarse cruzando la pantalla
   pase lo que pase debajo, y no depender de dónde esté en el documento.

   El ancho lo escribe el JS de cada página. Nace en 0, así que si ese JS no
   llega a ejecutarse no se ve nada raro: simplemente no hay hilo. */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--yellow);width:0;z-index:100}

/* ---------- BARRA EN VIVO (armazón común) ----------
   Vive aquí y no en la hoja del home porque la barra sale en TODAS las
   páginas, igual que la barra de navegación de abajo. La rellena
   assets/eventos-render.js con lo que esté abierto en ese momento.

   Va por encima de la navegación en el documento y NO es pegajosa: se va
   con el scroll y deja el sitio a la navegación, que sí lo es. Dos bandas
   fijas una encima de otra se comen media pantalla en un móvil. */
/* La banda roja es .livebar y la fila de contenido es .livebar-in. Están
   separadas porque el contenido se desvanece al cambiar de turno cuando hay
   varios eventos a la vez, y el fondo NO debe desvanecerse con él: si se
   fuera la banda entera, la página daría un salto de altura en cada relevo. */
.livebar{
  background:var(--live);color:#fff;
  padding:.6rem 24px;font-size:.75rem;font-weight:500;
  letter-spacing:.04em;text-align:center;
}
.livebar[hidden]{display:none}
/* UNA SOLA LÍNEA, SIEMPRE, MIDA LO QUE MIDA EL TEXTO.

   Envolvía, y con eso la altura pasaba a depender del largo del título: en
   pantallas de 405 a 475px "Sorteo de Nitro" cabía en un renglón y "Sorteo:
   1 Juego a Elección" no, así que la barra saltaba de 38 a 72px cada seis
   segundos al relevarse y empujaba la página entera con ella.

   Ajustar márgenes no lo arreglaba: cualquier número elegido para que quepan
   los títulos de hoy se rompe con el primer título más largo de mañana. Lo
   que se quita es la dependencia — nowrap, y el título se recorta. */
.livebar-in{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  flex-wrap:nowrap;
}
/* min-width:0 es lo que permite que un hijo flexible se encoja por debajo de
   su contenido. Sin él, el navegador respeta el ancho del texto y el recorte
   del título no llega a activarse nunca. */
.lb-msg{display:inline-flex;align-items:center;gap:.55rem;min-width:0}
.lb-titulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El botón no se encoge ni se parte: es la acción, y media acción no sirve. */
.lb-cta{flex:none;white-space:nowrap}

/* En móvil se va "EVENTO ABIERTO —", que ocupa 118px de los 327 útiles de un
   teléfono. Sin él los títulos entran de sobra a partir de 360px.

   No se pierde el mensaje: la franja roja a pantalla completa y el punto
   latiendo ya dicen que hay algo en marcha, y debajo va el título y el botón.
   La etiqueta es la que menos aporta de las tres cosas, así que es la que
   cede el sitio. En escritorio sigue estando. */
@media (max-width:620px){
  .lb-tag,.lb-sep{display:none}
}
.livebar strong{font-weight:600}
.livebar a{text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* El punto late a medio segundo, dos veces por segundo. Empezó en 1,6s y se
   leía como algo apagándose en vez de como un pulso: a ese ritmo pasa más
   tiempo desvanecido que encendido y deja de parecer que hay alguien al otro
   lado. Es el número que más se ha tocado de esta barra, así que si vuelve a
   moverse, aquí es. */
/* VA ACOTADO A .livebar, Y NO POR ORDEN.

   `.dot` es un nombre corto y el media kit ya tenía el suyo: el círculo del
   final de sus minigráficas (`.spark .dot`). Al subir este bloque desde la
   hoja del home a la compartida, aquella pasó a heredar `animation:pulse` y
   se puso a parpadear dos veces por segundo dentro de un documento para
   marcas. Acotándolo, cada uno se queda con el suyo.

   La separación con lo que venga detrás ya no es un margen suyo: la pone el
   `gap` de .lb-msg, que es quien coloca las piezas. Con margen propio se
   sumaban los dos y el punto quedaba a la deriva. */
.livebar .dot{
  width:8px;height:8px;border-radius:50%;background:#fff;
  display:inline-block;flex:none;
  animation:pulse .5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.15}}

/* EL RELEVO ENTRE EVENTOS.

   Antes solo se desvanecía, y con la barra roja de fondo el cambio pasaba
   desapercibido: si no estabas mirando justo ahí, el segundo evento no
   existía. Ahora el texto sale por arriba, entra por abajo y la banda entera
   pega un destello, que es lo que hace girar la cabeza.

   Se hace con animación y no con transición a propósito: el texto tiene que
   SALTAR de arriba abajo sin que se vea el salto, y eso con transiciones
   pide desactivarlas a mano en mitad del cambio. En una animación ese salto
   es simplemente el fotograma 36%.

   LOS TIEMPOS ESTÁN ACOPLADOS A eventos-render.js: el texto se sustituye a
   los 200ms, que es el punto ciego entre el 35% y el 36% de estos 550ms. Si
   cambias la duración aquí, cambia MS_RELEVO y MS_RELEVO_CIEGO allí. */
.livebar.cambiando .livebar-in{animation:relevo .55s ease}
@keyframes relevo{
  0%  {opacity:1;transform:translateY(0)}
  35% {opacity:0;transform:translateY(-7px)}
  36% {opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}
.livebar.cambiando{animation:destello .55s ease}
@keyframes destello{0%,100%{filter:brightness(1)}40%{filter:brightness(1.5)}}

/* EL ESTRENO: tres parpadeos al aparecer.

   La barra sale arriba del todo, pero arriba del todo hay más cosas
   moviéndose —las donaciones recientes deslizándose— y una banda quieta
   pierde contra algo que se mueve, esté donde esté. Estos tres golpes al
   cargar le dan el turno primero: cuando terminan, el ojo ya pasó por aquí.

   Solo brillo, sin desplazar nada: la barra empuja el resto de la página
   hacia abajo, así que animar su tamaño movería el sitio entero mientras
   alguien intenta leerlo.

   Ocurre UNA VEZ por carga, no cada vez que la barra cambia de contenido —
   para eso está `destello`, que es más corto y más suave a propósito. */
.livebar.estrenando{animation:entrada 1.1s ease}
@keyframes entrada{
  0%,24%,48%,100%{filter:brightness(1)}
  12%,36%,60%    {filter:brightness(1.85)}
}

/* Quien pide menos movimiento sigue viendo los dos eventos —el relevo ocurre
   igual, el texto se sustituye en el mismo instante—, pero sin desplazamiento,
   sin destello y sin punto parpadeando. */
@media (prefers-reduced-motion: reduce){
  .livebar.cambiando .livebar-in,
  .livebar.cambiando,
  .livebar.estrenando{animation:none}
  .livebar .dot{animation:none}
}

/* ---------- BARRA DE NAVEGACIÓN (armazón común) ----------
   Los enlaces de escritorio (.nav-links) y los CTA (.nav-cta) los pone cada
   página: no coinciden ni en número ni en punto de ruptura. Lo que sí es el
   mismo componente es la barra, la hamburguesa y el panel desplegable. */
.nav{
  position:sticky;top:0;z-index:70;
  background:rgba(23,17,13,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:2rem;height:var(--nav-h)}

/* ---------- MARCA CON NOMBRE DE SECCIÓN ----------
   El logo y, al lado, dónde estás: "MEDIA KIT", "ESPORTS". Lo usan esas dos
   páginas; la portada no, que ahí el logo va solo y con su propia clase
   (.logo) porque no hay sección que nombrar.

   VIVE AQUÍ POR LO QUE PASÓ, NO POR PULCRITUD. Estaba copiado en las dos
   páginas con dos nombres distintos —.nav-brand-kit y .nav-brand-sec— y ya
   había divergido en cuatro cosas: una en gris y otra en amarillo, .18em
   contra .2em, y solo una con hover. Es exactamente el bug que avisa la
   cabecera de este archivo, y esta vez sí había pasado.

   EL NOMBRE DE SECCIÓN VA EN GRIS, NO EN AMARILLO. El amarillo es el acento
   de "esto se puede pulsar", y en esa misma barra está el botón de Discord,
   que sí lo es. Gastarlo en una etiqueta que solo dice dónde estás le resta
   fuerza al que de verdad llama a la acción.

   La raya que separa marca y sección es este borde, no un carácter: así los
   dos se pueden pulsar por separado sin que la raya caiga dentro de ninguno
   de los dos destinos. */
.nav-brand{display:flex;align-items:center;gap:.75rem;flex:none}
/* 30px, la misma que el logo de la portada (.logo img). Antes eran 26 aquí y
   30 allí, que es de esas diferencias que se notan sin saber nombrarlas: la
   barra parecía encogerse al salir del home. */
.nav-brand img{height:30px;width:auto;display:block}
.nav-brand-logo{display:flex;align-items:center;transition:opacity .15s}
.nav-brand-logo:hover{opacity:.75}
.nav-brand-sec{
  font-family:'Poppins',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding-left:.75rem;border-left:1px solid var(--line);transition:color .15s;
}
/* El hover solo cuando de verdad es un enlace. En el media kit sube al
   principio de la página; en esports es una etiqueta y nada más, y prometer
   con el cursor algo que no responde es peor que no prometer nada. */
a.nav-brand-sec:hover{color:var(--cream)}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:0 11px;
  background:rgba(242,232,220,.07);box-shadow:inset 0 0 0 1px var(--line);
  clip-path:var(--bevel-sm);border:none;cursor:pointer;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:var(--cream);
  transition:transform .22s ease, opacity .16s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-panel{display:none;border-top:1px solid var(--line);background:var(--surface)}
.nav-panel.open{display:block}
.nav-panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem 24px;font-size:.95rem;font-weight:500;
  letter-spacing:.04em;border-bottom:1px solid var(--line);
}
.nav-panel a:last-child{border-bottom:none}
.nav-panel a::after{content:'→';color:var(--yellow);font-size:.9rem}
.nav-panel a:active{background:var(--surface-2)}

/* ---------- COPIAR AL PORTAPAPELES ----------
   Los CTA de correo y teléfono no abren mailto:/tel: (que no llevan a
   ninguna parte en un escritorio sin gestor de correo): copian el dato.
   El icono pasa de portapapeles a check, así la señal no depende solo del
   color: quien no distinga el amarillo ve igualmente el cambio de forma.
   El href se mantiene como respaldo si la copia falla. */
.copy-btn svg,.copy-mail svg{width:15px;height:15px;flex:none}
.copy-btn.is-copied{color:var(--yellow)}

.copy-mail{display:inline-flex;align-items:center;gap:.45rem}
.copy-mail .copy-ico{display:inline-flex;opacity:.4;transition:opacity .15s ease}
.copy-mail:hover .copy-ico,
.copy-mail:focus-visible .copy-ico{opacity:1}
/* Sin "display": lo gobiernan las reglas de intercambio de [data-copy], y
   al ser hijos de un inline-flex ya se blockifican solos. */
.copy-mail .copy-ico svg{width:13px;height:13px}
.copy-mail.is-copied{color:var(--yellow)}
.copy-mail.is-copied .copy-ico{opacity:1}

[data-copy] .ico-ok{display:none}
[data-copy].is-copied .ico-copy{display:none}
[data-copy].is-copied .ico-ok{display:block}

/* Solo para lectores de pantalla: anuncia el resultado de la copia. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- FIABILIDAD DE LOS DATOS ----------
   Vocabulario común a las dos páginas. Nació en el media kit y ahora lo
   comparten: una cifra sin verificar se marca igual en todo el sitio.

     .ph   inventada para la plantilla   → subrayado rojo
     .old  real pero de un corte antiguo → subrayado ámbar

   Las marcas SOLO se ven con <body class="plantilla">. Al quitar esa clase
   desaparece toda la señalización de golpe, sin tocar el marcado.

   .tpl-bar (la barra roja de aviso) la usa SOLO el media kit, que es un
   documento interno para marcas. La portada es pública: lleva los subrayados
   pero no el banner, y explica la salvedad con una línea de procedencia junto
   al dato. El estilo vive aquí porque es vocabulario del sistema, no porque
   las dos páginas deban pintarlo. */
.tpl-bar{
  display:none;position:relative;z-index:80;
  background:var(--live);color:#fff;
  padding:.55rem 24px;font-size:.74rem;font-weight:500;
  text-align:center;letter-spacing:.03em;
}
body.plantilla .tpl-bar{display:block}
.tpl-bar code{background:rgba(0,0,0,.28);padding:.12rem .4rem;border-radius:3px;font-size:.92em}

.ph,.old{border-bottom:1.5px dashed transparent;padding-bottom:1px}
body.plantilla .ph{border-bottom-color:rgba(255,77,61,.8)}
body.plantilla .old{border-bottom-color:rgba(255,198,33,.55)}


/* ============================================================================
   EVENTOS · el componente que comparten la portada y /esports/
   ============================================================================
   Vivía en el <style> de index.html, y ahí se quedó corto: el portal de
   /esports/ pinta las mismas tarjetas, con el mismo estado y la misma cuenta
   atrás, leyendo la misma lista de assets/eventos-render.js. Con el CSS en
   una sola página, la otra las habría pintado desnudas — o habría acabado
   con una copia que se va separando del original a cada retoque.

   Se movió TAL CUAL, sin cambiar una declaración. Lo que decidan estas
   reglas lo deciden en las dos páginas a la vez, que es justo lo que se
   busca: una tarjeta de evento se ve igual se mire desde donde se mire.

   QUÉ NO ESTÁ AQUÍ. `.filter-esports` —la ficha amarilla que lleva de la
   portada a /esports/— se quedó en index.html: solo existe ahí, y dentro de
   /esports/ sería un enlace a la página en la que ya estás.
   ========================================================================== */

/* Lo marca eventos-render.js cuando no hay ningún evento por venir y esconde
   el panel. Va aquí y no en la hoja de cada página porque forma parte del
   trato con el render: quien pinte un `.next` tiene que saber apagarlo.
   La rejilla de una columna la define cada página, que sabe cuál es la suya. */
/* Cuando no hay ningún evento por venir, eventos-render.js esconde el panel
   y marca esto: sin la segunda columna el texto ocupa el ancho entero en vez
   de dejar medio hero vacío. */
.hero-in.sin-proximo{grid-template-columns:1fr}

/* tarjeta del próximo evento */
.next{
  background:var(--line);padding:1px;clip-path:var(--bevel);
}
.next-in{background:var(--surface);clip-path:var(--bevel);padding:1.9rem}
.next-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem}
/* h2 y no h3: es el primer encabezado tras el h1 del hero, y saltarse un
   nivel deja un hueco en el índice que recorren los lectores de pantalla. */
.next h2{font-size:1.85rem;line-height:1;margin-bottom:.35rem}
.next .game{font-size:.75rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.5rem}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.5rem}
.count div{background:var(--surface-2);padding:.7rem .3rem;text-align:center;clip-path:var(--bevel-sm)}
.count b{
  display:block;font-family:'Dharma Gothic M','Oswald',Impact,sans-serif;font-weight:700;
  font-size:2rem;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums;
}
.count small{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Los filtros de estado son de la portada, pero las reglas viajan con el
   componente: la parrilla de /esports/ no los lleva hoy y podría llevarlos
   mañana sin mudar nada de sitio. */
/* ---------- FILTROS ---------- */
/* El margen inferior se mudó de .filters a la fila que la envuelve: si se
   quedara en .filters, al esconderla desaparecería también el hueco y el
   enlace de Esports quedaría pegado a la parrilla. */
.filters-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:2rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
/* El [hidden] va escrito porque el `display:flex` de arriba lo pisaría: las
   dos reglas pesan igual y la del navegador es la que pierde. Sin esta línea,
   esconder los filtros desde JavaScript no haría nada visible. */
.filters[hidden]{display:none}
.filter{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);
  padding:.5rem 1.1rem;font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  font-family:'Poppins',sans-serif;transition:all .15s;
}
.filter:hover{color:var(--cream);border-color:var(--muted)}
/* aria-pressed y no aria-selected: son botones que se quedan hundidos, no
   pestañas. Ver el comentario del marcado. */
.filter[aria-pressed="true"]{background:var(--yellow);color:#1A1207;border-color:var(--yellow)}

/* ---------- TARJETAS DE EVENTO ---------- */
/* minmax en rem por lo mismo que --wrap: el alto de la miniatura sale de
   `aspect-ratio` sobre el ancho de la tarjeta, así que si la columna no
   crece con la fuente, el texto se estira y la imagen no. 18.125rem × 16
   = los 290px de siempre. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.125rem,1fr));gap:1.15rem}
/* Aviso de calendario vacío. El 1/-1 lo cruza de lado a lado: si no, se
   quedaría encogido en la primera columna con el resto de la fila en blanco,
   que es justo el aire que viene a tapar. */
.grid-vacio{
  grid-column:1/-1;text-align:center;color:var(--muted);font-size:.95rem;
  padding:3rem 1.5rem;background:var(--surface);clip-path:var(--bevel);
}
.grid-vacio a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.card{background:var(--line);padding:1px;clip-path:var(--bevel);transition:transform .18s ease}
.card:hover{transform:translateY(-4px)}
.card-in{
  background:var(--surface);clip-path:var(--bevel);
  padding:1.5rem;display:flex;flex-direction:column;height:100%;min-height:15.625rem;
}
.card:hover .card-in{background:var(--surface-2)}
/* Fila de estado, bajo la portada. `center` y no `flex-start` porque
   ahora los dos lados son de una sola línea y se alinean por el medio. */
/* Envuelve porque la píldora no se encoge (`white-space:nowrap`) y hay
   combinaciones que no caben de lado: "● SORTEO ABIERTO" mide 134px en una
   tarjeta de 277 y deja 128 para una fecha que necesita 155, así que la
   fecha se partía en tres renglones mientras al lado sobraba sitio vacío.
   Al envolver, la fecha baja entera a su propia línea y sigue alineada a la
   derecha por el `margin-left:auto` de .card-meta.

   Las tarjetas normales no se enteran: con "ABIERTO" la píldora mide 72 y
   todo cabe en un renglón como siempre. */
.card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem}

/* Miniatura · reemplazar el <span class="thumb-ph"> por <img src="..." alt=""> */
.thumb{
  position:relative;
  margin:-1.5rem -1.5rem 1.25rem;
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 9px, transparent 9px 18px),
    var(--surface-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.thumb-ph{
  font-family:'Dharma Gothic M','Oswald',Impact,sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.2em;color:var(--yellow);
  background:rgba(23,17,13,.75);padding:.35rem .85rem;clip-path:var(--bevel-sm);
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pill{
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .65rem;clip-path:var(--bevel-sm);white-space:nowrap;
}
.pill-live{background:var(--live);color:#fff}
.pill-open{background:var(--yellow);color:#1A1207}
.pill-soon{background:rgba(242,232,220,.1);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.pill-done{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

/* Fecha y dato secundario a la derecha de la píldora, en UNA línea.
   Antes iban apilados con <br>, que partía "18 jul 2026 / 118 pico" en
   dos renglones contra el borde. En horizontal leen mejor y devuelven
   ese alto al título, que es lo que se busca al escanear. */
.card-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:.5rem;
  margin-left:auto;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;
}
.card-meta span+span::before{content:'·';margin-right:.5rem}
/* Marcador de plazas. Solo cambia de color cuando el dato pide una decisión:
   quedan pocas, o ya no queda ninguna. Con 46 de 64 libres es un dato más y
   se lee igual que la fecha — teñirlo siempre gastaría el rojo para nada. */
/* Cadencia de un evento que se repite ("Cada miércoles"). Va en el mismo
   renglón que la fecha pero un punto más apagada: la fecha dice cuándo es el
   próximo, esto solo matiza que habrá más. */
.cadencia{opacity:.75;font-style:italic;letter-spacing:.06em}
/* Cuenta atrás de la tarjeta, solo dentro de la semana. Se tiñe de amarillo
   porque es el único dato de la fila que se mueve, y sale en cifras de ancho
   fijo para que el renglón no baile al pasar de "2d 3h" a "2d 4h". */
.cuenta-corta{
  color:var(--yellow);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}
.plazas{font-weight:600}
.plazas-pocas{color:var(--live)}
.plazas-lleno{color:var(--cream);opacity:.55}
.card h3{font-size:1.5rem;line-height:1;margin-bottom:.5rem}
.card p{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-top:1rem;border-top:1px solid var(--line)}
.dest{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* El borde es el fondo de .card asomando por 1px de padding, así que
   teñirlo no cuesta ni un elemento extra y respeta el bisel.
   Mismo --live que la píldora, sin degradado: a 1px un degradado se
   pierde, y con el bisel comiendo dos esquinas nunca cerraba bien.
   Sin animación — el punto de la barra superior ya pulsa, y este sería
   el único elemento en movimiento de toda la parrilla. */
.card[data-state="vivo"]{background:var(--live)}
.card-done{opacity:.58}
.card-done:hover{opacity:.8}


/* ---------- MOVIMIENTO ----------
   Solo el scroll, que es común. Cada página apaga sus propias animaciones
   en su hoja: no comparten ni las animaciones ni la estrategia para
   detenerlas (el home corta el marquesina en seco, el kit deja que las
   suyas terminen en 0.001ms). */
/* La única regla responsive del componente. El corte de 520px lo fija la
   portada y aquí se respeta: es el ancho al que el panel deja de tener sitio
   para su relleno de 1.9rem, y eso no depende de qué página lo enseñe. */
@media(max-width:520px){
  .next-in{padding:1.5rem}
  .count b{font-size:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

@media print{
  .tpl-bar{display:none!important}
  /* Y la barra en vivo tampoco: anuncia algo que caduca, y en papel el aviso
     nace mentido. El media kit ya no la lleva —se quitó a propósito, ver su
     index.html—, así que esto cubre a quien imprima la portada o /esports/.

     Si algún día vuelve a una página que se convierta en PDF, esta línea es
     lo que impide que el robot del media kit entre en bucle: regenera el PDF
     cuando cambia assets/ y comete solo si el archivo cambió, así que un
     banner que depende del evento abierto en ese instante haría que cambiara
     siempre. Es el mismo bucle que se cerró en agosto sacando la hora de
     dentro del PDF. */
  .livebar{display:none!important}
}