/* ============================================================================
   LA PORTADA: EVENTOS (15 oct 2026)
   ============================================================================

   Desde la reorganización del 15 oct 2026 (db/plan-reorganizacion-web.md)
   la portada ES la parrilla de eventos: torneos, noches de comunidad,
   sorteos y retos juntos, sin agrupar por día. Lo que era la portada vive
   en /nosotros/. La pinta assets/portada-eventos.js con los mismos datos que
   el resto del sitio (assets/eventos.js + assets/eventos-datos.js).

   LAS DECISIONES DEL COO QUE ESTA HOJA DA POR HECHAS
   · Rejilla tipo bento y TODO en 16:9. Cuatro columnas en escritorio; uno o
     dos destacados de 2 × 2 celdas (2 × 2 de 16:9 sigue siendo 16:9).
   · La imagen manda, a sangre en toda la tarjeta, con una viñeta oscura
     abajo para que el texto se lea. Texto MUY mínimo: fecha corta y nombre.
     Los banners no traen texto, y los que vengan se diseñan dejando libre
     el tercio de abajo, que es donde va el nuestro.
   · Un chip pequeño con bisel para «más información», y la tarjeta entera
     también se pulsa: las dos abren el detalle.

   NADA DE ESTO VA EN componentes.css: solo existe en esta página.
   ========================================================================== */

/* ---------- LA CABECERA: BREVE A PROPÓSITO ----------
   Lo primero que se ve tienen que ser los eventos, no un hero. Antetítulo y
   un h1 a `--tipo-titulo` (y no a `--tipo-hero`, que es el h1 de las demás
   páginas): a 102 px «EVENTOS» se comía un cuarto del lienzo de 720 y
   empujaba la rejilla bajo el pliegue. Excepción escrita en el informe de la
   reorganización para que la skill la recoja. Los filtros, a la derecha en
   la misma fila. */
.pe{padding-block:var(--esp-rejilla) var(--esp-seccion)}
.pe-cabecera{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--esp-rejilla) var(--esp-bloque);margin-bottom:var(--esp-rejilla);
}
.pe-cabecera h1{font-size:var(--tipo-titulo);margin:.35rem 0 0;line-height:.9}

/* ---------- LOS FILTROS ----------
   Chips de control: bisel de 9 px y su aro (la skill, «Contenedores»). El
   pulsado va macizo en amarillo, que es la única acción amarilla de la
   cabecera. Botones que se quedan hundidos (aria-pressed), no pestañas. */
.pe-filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.pe-filtro{
  position:relative;cursor:pointer;border:0;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-leyenda);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:.8rem 1.1rem;color:var(--texto-2);background:rgba(242,232,220,.05);
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .15s ease, background .15s ease;
}
.pe-filtro:hover{color:var(--texto-1);--filo-color:var(--muted)}
.pe-filtro[aria-pressed="true"]{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:var(--yellow)}
.pe-filtro small{font-size:var(--tipo-etiqueta);font-weight:600;margin-left:.35em;color:inherit;opacity:.7}

/* ---------- LA REJILLA BENTO ----------
   Cuatro columnas y filas que salen del 16:9 de las pequeñas. El destacado
   ocupa 2 × 2 y `dense` rellena los huecos: con uno, las cuatro primeras
   pequeñas caen a su derecha en 2 × 2; con dos, los dos arriba y debajo las
   filas de cuatro. No hay que colocar nada a mano.

   EL DESTACADO LLEVA `align-self:stretch` ADEMÁS DE SU 16:9, y no sobra:
   un elemento de rejilla con `aspect-ratio` se alinea arriba en vez de
   estirarse, y 2 × 2 celdas miden un hueco más que dos tarjetas, así que
   quedaba una raya vacía de medio hueco debajo. Estirado ocupa sus dos
   filas exactas; y cuando no hay pequeñas a su lado (dos destacados), su
   16:9 es lo que da alto a esas filas. */
.pe-rejilla{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:row dense;gap:var(--esp-rejilla);
  list-style:none;margin:0;padding:0;
}
.pe-rejilla > li{min-width:0;display:grid}
.pe-rejilla > .pe-grande{grid-column:span 2;grid-row:span 2;align-self:stretch}

/* ---------- LA TARJETA ----------
   CAPA DOBLE, como `.caja`: el fondo de la tarjeta es el contorno y
   `.pe-in`, 1 px por dentro y con el mismo bisel, lleva la imagen. Así el
   contorno da la vuelta entera, chaflanes incluidos (el error del contorno
   comido por `clip-path`, en la skill). No se usa `.caja` tal cual porque
   el contorno de lo activo es un cónico que se dibuja (abajo) y la imagen
   tiene que ir a sangre dentro del relleno. */
.pe-tarjeta{
  position:relative;display:block;aspect-ratio:16/9;min-width:0;
  clip-path:var(--bevel);background:var(--line);
  color:var(--texto-1);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.pe-grande .pe-tarjeta{aspect-ratio:auto;height:100%;min-height:100%}
.pe-in{
  position:absolute;inset:1px;clip-path:var(--bevel);overflow:hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 9px, transparent 9px 18px),
    var(--surface-2);
}
/* La imagen a sangre. El zoom lento es la «tarjeta que se enciende» de la
   skill: 1 → 1.08 en 3,5 s, en TODAS (lo próximo y lo terminado solo
   hacen esto). */
.pe-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter .9s ease-out;
}
.pe-tarjeta:is(:hover,:focus-visible) .pe-img{
  transform:scale(1.08);filter:saturate(1.12) brightness(1.06);
  transition:transform 3.5s cubic-bezier(.25,.6,.3,1), filter .9s ease-out;
}
/* Sin imagen, o si no carga: el rayado de siempre y el nombre en grande
   (abajo) bastan para reconocerla. */
.pe-img.rota{display:none}

/* LA VIÑETA: el tercio de abajo se oscurece hasta el fondo de la página, que
   es lo único que hace legible un texto crema sobre cualquier banner. Un
   poco de sombra también arriba, donde va la píldora. */
.pe-in::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 94%, transparent) 0%,
      color-mix(in srgb, var(--ink) 62%, transparent) 30%,
      color-mix(in srgb, var(--ink) 0%, transparent) 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 45%, transparent), transparent 28%);
}

/* El texto, abajo a la izquierda. El relleno lateral salva el chaflán de
   abajo a la izquierda (14 px); el chip va abajo a la derecha, que es la
   esquina que el bisel no corta. */
.pe-texto{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;
  padding:0 .9rem .85rem 1.15rem;
}
.pe-txt{min-width:0;display:flex;flex-direction:column;gap:.3rem}
.pe-nombre{
  margin:0;font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;
  font-size:var(--tipo-dato);line-height:.95;text-transform:uppercase;color:var(--texto-1);
  transition:color .9s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* La etiqueta mínima de fecha: metadato sin caja (la skill, «Etiquetas»),
   un punto más claro que --texto-3 porque va sobre imagen. */
.pe-fecha{
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* La píldora de estado arriba a la izquierda: solo «● En vivo» (o «Sorteo
   abierto», «Reto abierto») en las pequeñas; en el destacado, la que toque. */
.pe-estado{position:absolute;top:.85rem;left:.85rem;z-index:2}

/* EL CHIP DE «MÁS INFORMACIÓN». No es un botón aparte: la tarjeta entera es
   el enlace (un control dentro de otro no es válido), y esto es la señal
   visible de que se abre. 32 px de alto → bisel y aro de 9 px. */
.pe-mas{
  position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:2rem;min-width:2rem;padding:0 .55rem;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-etiqueta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-1);
  background:color-mix(in srgb, var(--ink) 70%, transparent);
  clip-path:var(--bevel-sm);--filo-color:rgba(242,232,220,.35);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:background .2s ease, color .2s ease;
}
.pe-mas svg{width:.9rem;height:.9rem;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
.pe-tarjeta:is(:hover,:focus-visible) .pe-mas{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:var(--yellow)}

/* ---------- EL DESTACADO ----------
   Lo mismo a lo grande: el nombre en la display M 800 (es un titular), la
   fecha y, si empieza o cierra pronto, la cuenta atrás. */
.pe-grande .pe-texto{padding:0 1.25rem 1.25rem 1.6rem;gap:1.25rem}
.pe-grande .pe-txt{gap:.55rem}
.pe-grande .pe-nombre{
  font-family:var(--fuente-display);font-weight:800;letter-spacing:0;
  font-size:var(--tipo-titulo);line-height:.88;
}
.pe-grande .pe-fecha{font-size:var(--tipo-leyenda);letter-spacing:.12em}
.pe-grande .pe-estado{top:1.25rem;left:1.25rem}
.pe-grande .pe-mas{height:2.5rem;padding:0 1rem}
.pe-cuenta{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
}
.pe-cuenta b{
  font-family:var(--fuente-display-e);font-weight:800;letter-spacing:.01em;
  font-size:var(--tipo-dato);line-height:1;color:var(--texto-1);font-variant-numeric:tabular-nums;
}

/* ---------- LO ACTIVO SE ENCIENDE ----------
   La «tarjeta que se enciende» de la skill y del muestrario («9»), aplicada
   a esta tarjeta: el contorno amarillo se dibuja dando la vuelta (cónico
   con `--trazo`, declarado con @property en base.css), sube la nebulosa
   crema/amarilla y el nombre pasa a amarillo. SOLO lo abierto y lo que está
   en vivo; lo próximo y lo terminado se quedan en el zoom, para que no
   parezca que todavía puedes apuntarte. Lo que está en vivo ya lleva el
   contorno amarillo en reposo: es lo que se ve primero en la rejilla. */
.pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]){
  background:conic-gradient(from 200deg, var(--yellow) var(--trazo), var(--line) 0);
  transition:--trazo .5s ease-in;
}
.pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]):is(:hover,:focus-visible){
  --trazo:360deg;transition:--trazo 1.1s cubic-bezier(.45,0,.2,1);
}
.pe-tarjeta[data-estado="vivo"]{background:var(--yellow)}
.pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]) .pe-in::before{
  content:'';position:absolute;inset:-25%;pointer-events:none;z-index:1;
  background:
    radial-gradient(40% 30% at 28% 84%, rgba(255,184,20,.75), transparent 70%),
    radial-gradient(32% 24% at 76% 72%, rgba(255,226,150,.5), transparent 70%),
    radial-gradient(34% 26% at 60% 98%, rgba(255,160,20,.6), transparent 70%);
  filter:blur(18px);mix-blend-mode:screen;opacity:0;transition:opacity .9s ease-in;
}
.pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]):is(:hover,:focus-visible) .pe-in::before{
  opacity:.55;transition:opacity 1.8s cubic-bezier(.22,1,.36,1);
}
.pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]):is(:hover,:focus-visible) .pe-nombre{color:var(--yellow)}
@media (prefers-reduced-motion: no-preference){
  .pe-tarjeta:is([data-estado="abierto"],[data-estado="vivo"]):is(:hover,:focus-visible) .pe-in::before{
    animation:nebulosa-giro 24s linear infinite, nebulosa-respira 6s ease-in-out infinite alternate}
}
/* LO TERMINADO, APAGADO: es un estado, no un nivel de texto (la misma
   excepción que `.card-done` en base.css). */
.pe-tarjeta[data-estado="finalizado"]{opacity:.62;transition:opacity .2s ease}
.pe-tarjeta[data-estado="finalizado"]:is(:hover,:focus-visible){opacity:.9}

/* EL FOCO DE TECLADO: el contorno entero en amarillo y a 2 px, por dentro
   (el relleno se mete un píxel más). Un `outline` caería fuera del recorte
   y no se vería. */
.pe-tarjeta:focus-visible{outline:none;background:var(--yellow)}
.pe-tarjeta:focus-visible .pe-in{inset:2px}

/* ---------- CARGANDO: ESQUELETOS 16:9 CON BRILLO ----------
   La misma forma que lo que va a llegar —un destacado y cuatro pequeñas—,
   para que al pintarse no salte nada. Un barrido lento de crema muy bajo;
   con menos movimiento, quietos. */
.pe-esqueleto{aspect-ratio:16/9;clip-path:var(--bevel);background:var(--surface);position:relative;overflow:hidden}
.pe-grande .pe-esqueleto{aspect-ratio:auto;height:100%}
.pe-esqueleto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(242,232,220,.06) 50%, transparent 70%);
  background-size:250% 100%;background-position:100% 0;
}
@media (prefers-reduced-motion: no-preference){
  .pe-esqueleto::after{animation:pe-brillo 1.6s ease-in-out infinite}
}
@keyframes pe-brillo{to{background-position:-150% 0}}

/* ---------- VACÍO Y ERROR ----------
   Una caja (capa doble) a todo el ancho con su texto y sus salidas: nunca
   una pantalla sin botón. */
.pe-aviso{grid-column:1/-1;padding:var(--esp-caja);display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.pe-aviso h2{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);letter-spacing:.01em;margin:0}
.pe-aviso p{color:var(--texto-2);font-size:var(--tipo-descripcion);max-width:52ch;margin:0}
.pe-aviso-acciones{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- LOS ANTERIORES, PLEGADOS ----------
   Lo terminado no se mezcla con lo que viene: va detrás de un botón al
   final, con la misma rejilla y sin destacados. */
.pe-anteriores{margin-top:var(--esp-bloque);border-top:1px solid var(--line);padding-top:var(--esp-rejilla)}
.pe-anteriores[hidden]{display:none}
.pe-plegar{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:0;background:none;padding:.4rem 0;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-control);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);transition:color .15s ease;
}
.pe-plegar:hover,.pe-plegar[aria-expanded="true"]{color:var(--texto-1)}
.pe-plegar:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.pe-plegar svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s ease}
.pe-plegar[aria-expanded="true"] svg{transform:rotate(180deg)}
.pe-plegar small{font-size:var(--tipo-etiqueta);color:var(--yellow)}
#pe-anteriores-lista{margin-top:var(--esp-rejilla)}
#pe-anteriores-lista[hidden]{display:none}

/* ---------- EL DETALLE (un <dialog> modal) ----------
   showModal() ya deja el resto de la página inerte y atrapa el foco;
   Escape lo cierra el navegador y el clic fuera, assets/portada-eventos.js.
   El <dialog> es transparente: la caja biselada es `.pe-hoja`, dentro, para
   que el recorte no se coma el fondo oscurecido. */
.pe-detalle{
  /* `margin:auto` a mano: el reseteo de base.css (`*{margin:0}`) le quita
     al <dialog> el centrado que trae de serie y se quedaba pegado arriba a
     la izquierda. */
  position:fixed;inset:0;margin:auto;height:fit-content;
  padding:0;border:0;background:transparent;color:var(--texto-1);
  width:min(46rem, calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);
  overflow:visible;
}
.pe-detalle::backdrop{background:color-mix(in srgb, var(--ink) 82%, transparent)}
.pe-hoja{
  --caja-fondo:var(--surface);max-height:calc(100dvh - 2rem);overflow:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
}
.pe-hoja-banner{position:relative;aspect-ratio:16/9;margin:1px 1px 0;overflow:hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 9px, transparent 9px 18px),
    var(--surface-2);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
.pe-hoja-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pe-hoja-banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top, var(--surface) 0%, color-mix(in srgb, var(--surface) 0%, transparent) 45%)}
.pe-hoja-cuerpo{padding:0 var(--esp-caja) var(--esp-caja);margin-top:-2.5rem;position:relative}
.pe-hoja-etiquetas{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.pe-hoja h2{font-size:var(--tipo-titulo);line-height:.9;margin:0 0 .5rem}
.pe-hoja-sub{font-size:var(--tipo-descripcion);color:var(--texto-3);margin:0 0 1.25rem}
.pe-hoja-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));border-block:1px solid var(--line);margin:0 0 1.25rem}
.pe-hoja-datos > div{padding:.8rem 1rem .8rem 0;min-width:0}
.pe-hoja-datos > div + div{padding-left:1rem;border-left:1px solid var(--line)}
.pe-hoja-datos dt{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-bottom:.35rem}
.pe-hoja-datos dd{margin:0;font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:var(--tipo-dato);line-height:1.05;color:var(--texto-1)}
.pe-hoja-datos dd small{display:block;margin-top:.25rem;font-family:'Poppins',sans-serif;font-weight:400;font-size:var(--tipo-leyenda);letter-spacing:0;color:var(--texto-3)}
.pe-hoja-desc{font-size:var(--tipo-cuerpo);color:var(--texto-2);line-height:1.6;max-width:60ch;margin:0 0 1.5rem}
.pe-hoja-acciones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pe-hoja-acciones .btn[aria-disabled="true"]{cursor:not-allowed}
/* El ✕, arriba a la derecha pero por dentro del chaflán (14 px). */
.pe-cerrar{
  position:absolute;top:1.1rem;right:1.4rem;z-index:3;width:2.5rem;height:2.5rem;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0;
  color:var(--texto-1);background:color-mix(in srgb, var(--ink) 70%, transparent);
  clip-path:var(--bevel-sm);--filo-color:rgba(242,232,220,.35);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
.pe-cerrar:hover{background:var(--yellow);color:var(--sobre-amarillo);--filo-color:var(--yellow)}
.pe-cerrar svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
@media (prefers-reduced-motion: no-preference){
  .pe-detalle[open]{animation:pe-abrir .32s cubic-bezier(.22,1,.36,1)}
  .pe-detalle[open]::backdrop{animation:pe-velo .32s ease}
}
@keyframes pe-abrir{from{opacity:0;translate:0 var(--mov-desde)}to{opacity:1;translate:0 0}}
@keyframes pe-velo{from{opacity:0}to{opacity:1}}

/* Lo que el teclado enfoca dentro de la hoja. */
.pe-cerrar:focus-visible,.pe-filtro:focus-visible{outline:none;--filo-color:var(--yellow)}

/* ---------- EL ARO DEL BISEL de los chips de esta hoja ----------
   El `box-shadow` de arriba es la reserva; donde se entiende `evenodd`, el
   aro con la forma del bisel (receta junto a `--filo` en marca.css). */
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .pe-filtro::after,.pe-mas::after,.pe-cerrar::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-sm);background:var(--filo-color,transparent);
  }
  .pe-filtro:focus-visible::after,.pe-cerrar:focus-visible::after{clip-path:var(--filo-foco-sm)}
  .pe-filtro[aria-pressed="true"]:focus-visible{--filo-color:var(--sobre-amarillo)}
}

/* ---------- ANCHOS ----------
   Por debajo de 1024 no hay lienzo: la página fluye. */

/* EL CARRUSEL (revisión del COO en su móvil, 15 oct 2026). En vez de una
   columna de tarjetas que no se acaba, una fila que se desliza de lado con
   el dedo y se detiene en cada tarjeta (scroll-snap). La siguiente asoma
   por la derecha, que es lo que dice «hay más», y debajo una barra amarilla
   avanza con el recorrido (la pinta portada-eventos.js). El destacado va
   primero y se distingue por su píldora, su nombre en grande y su cuenta
   atrás, al mismo ancho que las demás: más ancho y en 16:9 salía más alto,
   y la fila quedaba con el borde de abajo a saltos (capturas en el informe).
   La fila sale hasta el borde de la pantalla, como los filtros, y el teclado
   y el lector la recorren igual: es la misma lista de enlaces. */
@media (max-width:1023px){
  .pe-rejilla{
    display:flex;gap:var(--esp-rejilla);align-items:stretch;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:-1.5rem;padding-inline:1.5rem;scroll-padding-inline:1.5rem;
    padding-block:2px;   /* el foco de 2 px de la tarjeta no se corta arriba ni abajo */
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .pe-rejilla::-webkit-scrollbar{display:none}
  .pe-rejilla > li{flex:0 0 46%;scroll-snap-align:start}
  .pe-rejilla > .pe-grande{grid-row:auto;grid-column:auto}
  .pe-rejilla > .pe-aviso{flex-basis:100%}
  .pe-grande .pe-tarjeta,.pe-grande .pe-esqueleto{aspect-ratio:16/9;height:auto;min-height:0}
  .pe-grande .pe-nombre{font-size:var(--tipo-subtitulo);font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em}
  /* EL DESTACADO A 16:9 EN ~330 PX DE ANCHO NO DA PARA CUATRO LÍNEAS (ni en
     el móvil ni en la tableta, donde la tarjeta mide lo mismo): la cuenta
     atrás ya dice cuándo, así que la fecha cede su renglón, y el chip se
     queda en el «+» (el «Más info» le quitaba ancho al nombre). */
  .pe-grande .pe-txt:has(.pe-cuenta) .pe-fecha{display:none}
  .pe-grande .pe-mas{height:2rem;padding:0 .55rem}
  .pe-grande .pe-mas > span:not(.sr-only){display:none}
  .pe-grande .pe-texto{padding:0 .9rem .85rem 1.15rem}
  .pe-grande .pe-estado{top:.85rem;left:.85rem}
  /* La entrada al bajar no va dentro del carrusel: la tarjeta que espera a
     la derecha no ha «entrado» en la pantalla y se quedaría apagada hasta
     deslizarla. Se colocan quietas, como en un repintado. */
  .pe-rejilla > li.reveal{animation:none;opacity:1;translate:none;transition:none}
  /* Arrastrar con el ratón (tableta con ratón, ventana estrecha): mientras
     se arrastra no se engancha a cada tarjeta, y la mano lo dice. */
  .pe-rejilla.arrastrando{scroll-snap-type:none;cursor:grabbing}
  .pe-rejilla.arrastrando .pe-tarjeta{pointer-events:none}

  /* LA BARRA DE PROGRESO: el carril en --line y lo recorrido en amarillo.
     `--p` (0…1) lo escribe portada-eventos.js al desplazar. */
  .pe-progreso{position:relative;height:3px;margin-top:.85rem;background:var(--line);overflow:hidden}
  .pe-progreso[hidden]{display:none}
  .pe-progreso i{position:absolute;inset:0;background:var(--yellow);transform-origin:0 50%;
    transform:scaleX(var(--p, 0));transition:transform .2s ease-out}
}
@media (min-width:1024px){ .pe-progreso{display:none} }
/* EL MÓVIL ESTRECHO: una tarjeta por vista (y la siguiente asomando).
   Medido el 15 oct 2026 a 360 y 375: dos tarjetas por fila medían ~160 × 90
   y «Sorteo: 1 juego a elección» no cabía con su fecha y el chip encima de
   la imagen; la viñeta la tapaba entera. */
@media (max-width:559px){
  /* Una tarjeta y un tercio a la vista: a 360 la tarjeta mide ~265 × 149 y
     de la siguiente asoma una franja de ~60 px. */
  .pe-rejilla{gap:.75rem}
  .pe-rejilla > li{flex-basis:85%}
  /* `nowrap`: en columna y con `wrap`, cada línea mide lo que su contenido
     y la fila de filtros ensanchaba la cabecera (scroll lateral a 360). */
  .pe-cabecera{align-items:stretch;flex-direction:column;flex-wrap:nowrap;gap:.9rem}
  /* LOS CUATRO FILTROS EN UNA FILA QUE SE DESLIZA. A 360 no caben (~320 px
     de 312) y partidos en dos renglones el cuarto quedaba solo debajo. La
     fila sale hasta el borde de la pantalla para que se note que sigue. */
  .pe-filtros{gap:.4rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-24px;padding-inline:24px}
  .pe-filtros::-webkit-scrollbar{display:none}
  .pe-filtro{padding:.75rem .85rem;flex:none}
  .pe-hoja-cuerpo{padding:0 var(--esp-caja) var(--esp-caja)}
  .pe-cerrar{top:.75rem;right:1rem}
}

/* ---------- UNA SECCIÓN, UNA PANTALLA ----------
   La portada fluye (Eventos es una de las excepciones de la skill: no mide
   una pantalla), pero a la misma escala del lienzo que el resto. Dentro del
   lienzo de 1440 la cabecera va algo más pegada a la barra amarilla. */
@media screen and (min-width:1024px){
  html.pantallas .pe{padding-top:1.75rem}
}

@media (prefers-reduced-motion: reduce){
  .pe-progreso i{transition:none}
}

@media print{
  .pe-detalle,.pe-filtros,.pe-mas,.pe-progreso{display:none}
}