/* ============================================================================
   /calendario/ · LOS DIRECTOS Y LA TEMPORADA (15 oct 2026)
   ============================================================================
   La hoja de calendario/index.html; el marcado lo pinta assets/calendario.js.
   Solo tokens de marca.css. Las medidas de MAQUETA que ningún token cubre
   van aquí abajo como variables locales, con su porqué, y se proponen en el
   informe por si alguna merece subir a marca.css:

     --cal-agenda      ancho de la agenda al lado del mes (escritorio)
     --cal-dia-alto    alto mínimo de una casilla del mes: cabe el número y
                       un banner 16:9 a ~110 px de ancho sin que la fila salte
     --cal-tira-alto   alto máximo de un pulso de la tira de la temporada
     --cal-mini        ancho de la miniatura 16:9 de la agenda

   Los contenedores, como manda la skill: la tarjeta de directo y el mes son
   cajas de capa doble (fondo = filo, relleno 1 px por dentro); la rejilla
   del mes es una REJILLA ABIERTA (filetes de 1 px en --line, sin bisel);
   botones y chips llevan el aro --filo-sm. Nada de sombras ni esquinas
   redondeadas. Todo lo que se mueve tiene su estado quieto con
   prefers-reduced-motion.
   ========================================================================== */
.contenido{
  --cal-agenda:22rem;
  --cal-dia-alto:6.75rem;
  --cal-tira-alto:3.5rem;
  --cal-mini:6.5rem;
}

/* ---------- LAS DOS SECCIONES ---------- */
.cal-directos{padding:var(--esp-bloque) 0 var(--esp-seccion)}
.cal-temporada{padding:0 0 var(--esp-seccion)}
.cal-cabeza{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--esp-rejilla);margin-bottom:var(--esp-cabecera);
}
.cal-cabeza h1{font-size:var(--tipo-hero);margin-top:.6rem}
.cal-cabeza h2{font-size:var(--tipo-titulo);margin-top:.6rem}
.cal-bajada{margin-top:.9rem;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cal-aviso{margin-top:var(--esp-rejilla);font-size:var(--tipo-descripcion);color:var(--texto-2)}
.cal-aviso a{color:var(--yellow)}

.dir-flechas{display:flex;gap:.5rem}
.dir-flecha,.mes-flecha{padding:0;width:2.5rem;height:2.5rem;justify-content:center}
.dir-flecha svg,.mes-flecha svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
.dir-flecha:disabled{opacity:.35;cursor:default}          /* estado, no nivel de texto */
.dir-flecha[hidden]{display:none}

/* ============================================================
   01 · EL CARRUSEL DE DIRECTOS
   ============================================================ */
.dir-carril{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--yellow-bajo) transparent;
  padding-bottom:.75rem;outline-offset:4px;
  overscroll-behavior-x:contain;
}
.dir-carril::-webkit-scrollbar{height:4px}
.dir-carril::-webkit-scrollbar-thumb{background:var(--yellow-bajo)}
.dir-carril::-webkit-scrollbar-thumb:hover{background:var(--yellow)}
.dir-carril.arrastrando{scroll-snap-type:none;cursor:grabbing;user-select:none}
.dir-carril.arrastrando .dir-tarjeta{pointer-events:none}
.dir-lista{list-style:none;display:flex;gap:var(--esp-rejilla)}
.dir-item{flex:0 0 82%;scroll-snap-align:start;min-width:0}
@media (min-width:45rem){ .dir-item{flex-basis:calc((100% - var(--esp-rejilla)) / 2)} }
@media (min-width:64rem){ .dir-item{flex-basis:calc((100% - 2 * var(--esp-rejilla)) / 3)} }

/* LA TARJETA: la imagen manda. Capa doble como .card de la portada —el
   fondo del enlace es el contorno, .dir-in va recortado 1 px por dentro—,
   así el bisel sale con sus dos chaflanes enteros. */
.dir-tarjeta{
  display:block;position:relative;aspect-ratio:16/9;padding:1px;
  background:var(--line);clip-path:var(--bevel);color:var(--texto-1);
  -webkit-user-drag:none;
}
.dir-in{
  position:relative;height:100%;overflow:hidden;clip-path:var(--bevel);background:var(--surface);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--esp-rejilla);
}
.dir-img{position:absolute;inset:0;background:
  repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 9px, transparent 9px 18px), var(--surface-2)}
.dir-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter .9s ease-out}
/* LA VIÑETA: densa abajo, donde se lee el título, y un velo arriba para la
   hora. El banner sigue mandando en el centro. */
.dir-vineta{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top, rgba(23,17,13,.94) 0%, rgba(23,17,13,.55) 38%, rgba(23,17,13,0) 62%),
  linear-gradient(to bottom, rgba(23,17,13,.7) 0%, rgba(23,17,13,0) 30%)}
.dir-arriba,.dir-abajo{position:relative;z-index:2}
.dir-arriba{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.dir-cuando{display:flex;flex-direction:column;line-height:1.05;
  font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.dir-cuando b{font-weight:700;font-size:var(--tipo-entradilla);color:var(--yellow)}
.dir-cuando span{font-size:var(--tipo-dato);color:var(--texto-1)}
.dir-plat{display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-1)}
.ico-plat{width:1.5em;height:1.5em;fill:currentColor;flex:none}
.dir-titulo{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);
  letter-spacing:.01em;line-height:.95}
.dir-sub{margin-top:.35rem;font-size:var(--tipo-leyenda);color:var(--texto-2)}
/* La cuenta atrás del más cercano: numeral en la E, como el cronómetro. */
/* Va sobre una placa de tinta: hay banners amarillos y la cifra amarilla
   se perdía encima. */
.dir-cuenta{display:inline-block;margin-bottom:.4rem;padding:.1rem .45rem;clip-path:var(--bevel-xs);
  background:rgba(23,17,13,.8);font-family:var(--fuente-display-e);font-weight:800;
  font-size:var(--tipo-dato);letter-spacing:.04em;color:var(--yellow);font-variant-numeric:tabular-nums}

/* LA TARJETA QUE SE ENCIENDE (skill, «Interacción y movimiento»): el banner
   se acerca en 3,5 s; solo lo activo —aquí, lo que está EN VIVO— dibuja el
   contorno, levanta la nebulosa y pasa el título a amarillo. Lo próximo
   hace solo el zoom. */
.dir-tarjeta:is(:hover,:active,:focus-visible) .dir-img 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}
.dir-tarjeta[data-state="vivo"]{background:var(--yellow)}
.dir-tarjeta[data-state="vivo"] .dir-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}
.dir-tarjeta[data-state="vivo"]:is(:hover,:active,:focus-visible) .dir-in::before{opacity:.6;
  transition:opacity 1.8s cubic-bezier(.22,1,.36,1)}
.dir-tarjeta[data-state="vivo"] .dir-titulo{transition:color .9s ease}
.dir-tarjeta[data-state="vivo"]:is(:hover,:active,:focus-visible) .dir-titulo{color:var(--yellow)}
@media (prefers-reduced-motion: no-preference){
  .dir-tarjeta[data-state="vivo"]:is(:hover,:focus-visible) .dir-in::before{
    animation:nebulosa-giro 24s linear infinite, nebulosa-respira 6s ease-in-out infinite alternate}
}
/* Lo próximo: al pasar, el contorno se aclara a amarillo bajo (no se
   dibuja: eso es de lo activo). El foco va por dentro, a 2 px, porque el
   outline de siempre caería fuera del recorte. */
.dir-tarjeta[data-state="proximo"]:hover{background:var(--yellow-hondo)}
.dir-tarjeta:focus-visible{outline:none;background:var(--yellow);padding:2px}
.dir-tarjeta:focus-visible .dir-in{clip-path:var(--bevel)}

/* El vacío y el error: una caja horizontal con su salida. */
.dir-vacio-item{flex-basis:100%!important}
.dir-vacio{display:flex;align-items:center;gap:var(--esp-rejilla);padding:var(--esp-caja);flex-wrap:wrap}
.dir-vacio > div{flex:1 1 16rem;min-width:0}
.dir-vacio-ico{color:var(--yellow);flex:none}
.dir-vacio-ico .ico-plat{width:2.75rem;height:2.75rem}
.dir-vacio-titulo{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);
  text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.dir-vacio-txt{margin-top:.4rem;font-size:var(--tipo-descripcion);color:var(--texto-2)}

/* ---------- LOS ESQUELETOS ----------
   Una franja que pasa despacio sobre el marrón: dice «cargando» sin girar
   nada. Quieta con menos movimiento. */
.esq{display:block;background:linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size:300% 100%}
@media (prefers-reduced-motion: no-preference){
  .esq{animation:cal-esq 1.6s linear infinite}
  @keyframes cal-esq{from{background-position:100% 0} to{background-position:0 0}}
}
.es-esqueleto .dir-in{justify-content:flex-end;gap:.6rem}
.esq-linea{height:.7rem;width:40%}
.esq-linea.corta{width:25%}
.esq-titulo{height:1.6rem;width:70%}

/* ============================================================
   02 · LOS FILTROS
   ============================================================ */
.cal-filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.cal-filtro{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1rem;border:0;cursor:pointer;background:transparent;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-control);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .2s ease, background .2s ease;
}
/* El testigo: un cuadrado que se llena al encender el filtro. */
.cal-filtro::before{content:'';width:.6rem;height:.6rem;flex:none;
  box-shadow:inset 0 0 0 1px currentColor;transition:background .2s ease}
.cal-filtro[aria-pressed="true"]{color:var(--texto-1);--filo-color:rgba(255,198,33,.45)}
.cal-filtro[aria-pressed="true"]::before{background:var(--yellow);box-shadow:none}
.cal-filtro:hover{color:var(--texto-1);background:rgba(242,232,220,.06)}
.cal-filtro:focus-visible{outline:none;--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .cal-filtro::after{content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-sm);background:var(--filo-color)}
  .cal-filtro:focus-visible::after{clip-path:var(--filo-foco-sm)}
}

/* ============================================================
   02 · LA TIRA DE LA TEMPORADA — doce pulsos
   ============================================================
   Cada mes es una barra cuya ALTURA dice cuántos eventos tiene (--nivel, de
   0 a 1, lo pone el JS). Es el navegador: se pulsa un mes y el calendario
   salta allí. El mes elegido va macizo en amarillo; el de hoy lleva su
   marca debajo; los pasados, apagados; el que tiene algo EN VIVO late. */
.cal-tira{margin-bottom:var(--esp-rejilla)}
.tira-meses{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
.tira-boton{
  width:100%;display:flex;flex-direction:column;align-items:stretch;gap:.35rem;
  padding:.4rem .15rem .5rem;border:0;background:transparent;cursor:pointer;color:var(--texto-3);
  font-family:'Poppins',sans-serif;transition:background .25s ease, color .25s ease;
}
.tira-cifra{height:1em;line-height:1;font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-rotulo);
  letter-spacing:.04em;text-align:center;color:var(--texto-3)}
.tira-pulso{position:relative;height:var(--cal-tira-alto);display:flex;align-items:flex-end;justify-content:center}
.tira-pulso::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.tira-barra{
  width:min(100%, 1.75rem);
  height:max(2px, calc(var(--nivel, 0) * 100%));
  background:var(--yellow-hondo);
  transform-origin:bottom;
  transition:background .25s ease, height .5s cubic-bezier(.22,1,.36,1);
}
.tira-nombre{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  white-space:nowrap;overflow:hidden}
/* AL PASAR, LA TIRA SE ILUMINA: el mes bajo el cursor sube a amarillo alto y
   sus vecinos se aclaran un punto, como una onda. */
.tira-boton:hover{background:var(--surface);color:var(--texto-1)}
.tira-boton:hover .tira-barra{background:var(--yellow-alto)}
.tira-mes:has(+ .tira-mes .tira-boton:hover) .tira-boton:not([aria-pressed="true"]) .tira-barra,
.tira-mes:has(.tira-boton:hover) + .tira-mes .tira-boton:not([aria-pressed="true"]) .tira-barra{background:var(--yellow-bajo)}
.tira-boton[aria-pressed="true"]{background:var(--surface);color:var(--texto-1)}
.tira-boton[aria-pressed="true"] .tira-barra{background:var(--yellow)}
.tira-boton[aria-pressed="true"] .tira-cifra{color:var(--yellow)}
.tira-boton:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.es-pasado .tira-barra{opacity:.55}                 /* estado: ya pasó */
.es-pasado .tira-boton:is(:hover,[aria-pressed="true"]) .tira-barra{opacity:1}
.es-hoy .tira-nombre{color:var(--yellow)}
.es-hoy .tira-nombre::after{content:'';display:block;width:.35rem;height:.35rem;margin:.25rem auto 0;background:var(--yellow)}
@media (prefers-reduced-motion: no-preference){
  .es-vivo .tira-barra{animation:cal-late 1.8s ease-in-out infinite}
  @keyframes cal-late{0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.12)}}
}
.tira-inicial{display:none}
/* A 360 «MAY» y «AGO» no caben en 27 px: se queda la inicial, como en
   cualquier calendario de bolsillo. El nombre entero lo dice el aria-label. */
@media (max-width:30rem){
  .tira-largo{display:none}
  .tira-inicial{display:inline}
  .contenido{--cal-tira-alto:2.5rem}
}

/* ============================================================
   02 · EL MES Y SU AGENDA
   ============================================================ */
.cal-cuerpo[hidden],.cal-tira[hidden]{display:none}
.cal-cuerpo{display:grid;gap:var(--esp-rejilla);align-items:start}
@media (min-width:64rem){
  .cal-cuerpo{grid-template-columns:minmax(0,1fr) var(--cal-agenda)}
  .cal-agenda{position:sticky;top:calc(var(--nav-h) + var(--esp-rejilla))}
}
.cal-mes{padding:var(--esp-rejilla);min-width:0}
.mes-barra{display:flex;align-items:center;gap:.5rem;margin-bottom:var(--esp-rejilla)}
.mes-titulo{flex:1;min-width:0;text-align:center;font-family:var(--fuente-display-e);font-weight:700;
  font-size:var(--tipo-subtitulo);letter-spacing:.01em;line-height:1}
.mes-hoy{order:-1}
.mes-hoy + .mes-flecha{margin-left:auto}
.mes-ayuda{margin-top:.75rem;font-size:var(--tipo-leyenda);color:var(--texto-3)}
@media (hover:none){ .mes-ayuda{display:none} }

/* EL MARCO RECORTA EL DESLIZAMIENTO: la rejilla que entra de lado no puede
   empujar la página a lo ancho. */
.mes-marco{overflow:hidden}
.mes-rejilla{display:flex;flex-direction:column;gap:1px;background:var(--line);
  box-shadow:0 0 0 1px var(--line)}          /* rejilla abierta: filetes, sin bisel */
.mes-fila{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.mes-sem{background:var(--surface);padding:.45rem .5rem;font-size:var(--tipo-etiqueta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
@media (prefers-reduced-motion: no-preference){
  .mes-rejilla.entra-der{animation:cal-entra-der .46s cubic-bezier(.22,1,.36,1)}
  .mes-rejilla.entra-izq{animation:cal-entra-izq .46s cubic-bezier(.22,1,.36,1)}
  @keyframes cal-entra-der{from{translate:3rem 0;opacity:0} to{translate:0 0;opacity:1}}
  @keyframes cal-entra-izq{from{translate:-3rem 0;opacity:0} to{translate:0 0;opacity:1}}
}

/* LA CASILLA */
.dia{background:var(--surface);min-height:var(--cal-dia-alto);position:relative;min-width:0}
.dia.es-fuera{background:var(--ink)}
.dia-boton{
  width:100%;height:100%;min-height:inherit;display:flex;flex-direction:column;align-items:stretch;gap:.4rem;
  padding:.45rem;border:0;background:transparent;color:var(--texto-1);cursor:pointer;text-align:left;
  font:inherit;transition:background .2s ease;
}
.dia-boton:hover{background:var(--surface-2)}
.dia-boton:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.dia[aria-selected="true"]{background:var(--surface-2)}
.dia[aria-selected="true"]::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--yellow)}      /* casilla recta: aquí el borde sí cierra */
.dia-num{align-self:flex-start;position:relative;min-width:1.6rem;padding:.1rem .3rem;
  font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-entradilla);line-height:1.1;
  letter-spacing:.02em;text-align:center}
.dia.es-pasado .dia-num{color:var(--texto-3)}
.dia.es-otro-mes .dia-num{color:var(--texto-3)}

/* HOY LATE: el número va sobre amarillo y un halo cuadrado sale de él cada
   pocos segundos. Quieto con menos movimiento. */
.dia.es-hoy .dia-num{background:var(--yellow);color:var(--sobre-amarillo);clip-path:var(--bevel-xs)}
.dia.es-hoy .dia-boton{position:relative}
@media (prefers-reduced-motion: no-preference){
  .dia.es-hoy .dia-boton::before{content:'';position:absolute;top:.45rem;left:.45rem;width:1.6rem;height:1.55rem;
    background:var(--yellow);opacity:0;pointer-events:none;animation:cal-hoy 2.8s ease-out infinite}
  @keyframes cal-hoy{0%{opacity:.45;scale:1} 70%,100%{opacity:0;scale:1.9}}
}
/* Un día con algo en vivo: un punto amarillo junto al número. */
.dia.es-vivo .dia-num::after{content:'';position:absolute;top:.15rem;right:-.5rem;width:.4rem;height:.4rem;background:var(--yellow)}

/* LA PILA: hasta tres banners 16:9 en abanico, el primero delante. Al pasar
   por el día, el abanico se abre. */
.pila{position:relative;display:block;width:100%;aspect-ratio:16/9;margin-top:auto}
.pila-hoja{position:absolute;inset:0;overflow:hidden;clip-path:var(--bevel-sm);background:
  repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 6px, transparent 6px 12px), var(--surface-2);
  transform-origin:50% 100%;
  transform:translate(calc(var(--h) * .25rem), calc(var(--h) * -.25rem)) rotate(calc(var(--h) * 3deg)) scale(calc(1 - var(--h) * .06));
  filter:brightness(calc(1 - var(--h) * .3));
  transition:transform .45s var(--mov-rebote), filter .3s ease}
.pila-hoja img{width:100%;height:100%;object-fit:cover}
.dia-boton:is(:hover,:focus-visible) .pila-hoja{
  transform:translate(calc(var(--h) * .55rem), calc(var(--h) * -.35rem)) rotate(calc(var(--h) * 6deg)) scale(calc(1 - var(--h) * .06))}
.dia-boton:is(:hover,:focus-visible) .pila-hoja[style*="--h:0"]{transform:translateY(-.15rem)}
.dia.es-pasado .pila-hoja{filter:saturate(.35) brightness(.65)}
.pila-mas{position:absolute;right:.25rem;bottom:.25rem;z-index:2;padding:.15rem .4rem;clip-path:var(--bevel-xs);
  background:var(--ink);color:var(--yellow);font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.06em}

/* LA SEMANA (móvil): siete casillas en una fila que se desliza con el dedo.
   El número arriba, la inicial del día encima y una miniatura debajo. */
.mes-rejilla.modo-semana{touch-action:pan-y}
.modo-semana .dia{min-height:0}
.modo-semana .dia-boton{align-items:center;padding:.45rem .2rem .5rem;gap:.3rem}
.modo-semana .dia-sem{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.modo-semana .dia-num{align-self:center;min-width:0}
.modo-semana .pila{margin-top:.1rem}
.modo-semana .pila-hoja{clip-path:var(--bevel-xs)}
.modo-semana .pila-mas{right:0;bottom:0;padding:.05rem .25rem}
.modo-semana .dia:not(.con-eventos) .dia-boton::after{content:'';display:block;width:100%;aspect-ratio:16/9;margin-top:.1rem}
.modo-semana .dia.es-hoy .dia-boton::before{left:50%;top:1.45rem;margin-left:-.8rem}

/* En tablet el mes es más estrecho: el banner de la casilla, más bajo. */
@media (max-width:63.99rem){ .contenido{--cal-dia-alto:5.5rem} }

/* LA AGENDA */
.cal-agenda{padding:var(--esp-rejilla);min-width:0}
.ag-cabeza{padding-bottom:var(--esp-rejilla);margin-bottom:.5rem;border-bottom:1px solid var(--line)}
.ag-rotulo{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.ag-titulo{margin-top:.35rem;font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);
  letter-spacing:.01em;line-height:1}
.ag-lista{list-style:none;display:flex;flex-direction:column}
/* La agenda se repinta con cada día elegido: sus filas no llevan .reveal
   (parpadearía). Entran con un deslizamiento corto, escalonado por --i. */
@media (prefers-reduced-motion: no-preference){
  .ag-fila{animation:cal-ag .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i, 0) * var(--mov-escalon))}
  @keyframes cal-ag{from{opacity:0;translate:0 .5rem} to{opacity:1;translate:0 0}}
}
.ag-item{
  display:grid;grid-template-columns:var(--cal-mini) minmax(0,1fr) auto;gap:.85rem;align-items:start;
  padding:.75rem .5rem;color:var(--texto-1);transition:background .2s ease;position:relative;
}
.ag-lista li + li .ag-item{border-top:1px solid var(--line)}
a.ag-item:hover{background:var(--surface-2)}
a.ag-item:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.ag-mini{display:block;width:var(--cal-mini);aspect-ratio:16/9;overflow:hidden;clip-path:var(--bevel-sm);background:
  repeating-linear-gradient(-45deg, rgba(255,198,33,.14) 0 6px, transparent 6px 12px), var(--surface-2)}
.ag-mini img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
a.ag-item:hover .ag-mini img{transform:scale(1.08);transition-duration:3.5s}
.ag-texto{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ag-hora{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-entradilla);letter-spacing:.03em;
  color:var(--yellow);line-height:1.1}
.ag-nombre{font-weight:600;font-size:var(--tipo-cuerpo);line-height:1.3;overflow-wrap:anywhere}
.ag-sub{font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.4}
.ag-etiquetas{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.ag-flecha{align-self:center;color:var(--texto-3);transition:color .2s ease, translate .25s var(--mov-rebote)}
a.ag-item:hover .ag-flecha{color:var(--yellow);translate:.2rem 0}
.ag-item[data-state="finalizado"] .ag-mini img{filter:saturate(.35) brightness(.7)}
.ag-item[data-state="finalizado"] .ag-hora{color:var(--texto-3)}
.ag-vacio{padding:var(--esp-rejilla) .25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.ag-vacio p{font-size:var(--tipo-descripcion);color:var(--texto-2)}
.es-esqueleto.ag-item{grid-template-columns:var(--cal-mini) 1fr}
.es-esqueleto .ag-mini{background:none}

/* EL AVISO: copia local o error, en gris (avisa, no se pulsa), con su
   «Reintentar». Una caja, nunca un modal. */
.cal-estado{
  margin-top:var(--esp-rejilla);display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;padding:var(--esp-rejilla);
  position:relative;clip-path:var(--bevel);--filo-color:var(--gris-2);--caja-fondo:var(--gris-1);background:var(--filo-color);
}
.cal-estado::before{content:'';position:absolute;inset:1px;z-index:-1;clip-path:var(--bevel);background:var(--caja-fondo)}
.cal-estado{isolation:isolate}
.cal-estado[hidden]{display:none}
.cal-estado p{flex:1 1 14rem;font-size:var(--tipo-descripcion);color:var(--gris-4)}

/* LO ANUNCIADO SIN DÍA */
.cal-sinfecha{margin-top:var(--esp-bloque)}
.cal-sinfecha[hidden]{display:none}
.sf-lista{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}
.sf-item{position:relative;display:flex;align-items:center;gap:.75rem;padding:.45rem .9rem .45rem .45rem;
  clip-path:var(--bevel-sm);--filo-color:var(--line);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));transition:background .2s ease}
.sf-item:hover{background:var(--surface-2);--filo-color:var(--yellow-bajo)}
.sf-item:focus-visible{outline:none;--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .sf-item::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .sf-item:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.sf-mini{display:block;width:3.5rem;aspect-ratio:16/9;overflow:hidden;clip-path:var(--bevel-xs);background:var(--surface-2);flex:none}
.sf-mini img{width:100%;height:100%;object-fit:cover}
.sf-nombre{font-size:var(--tipo-descripcion);font-weight:600}
.sf-juego{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}

/* ---------- MÓVIL ---------- */
@media (max-width:44.99rem){
  .cal-cabeza{align-items:flex-start}
  .cal-mes,.cal-agenda{padding:.85rem}
  .mes-barra{gap:.35rem}
  .dir-vacio{padding:var(--esp-rejilla)}
  .dir-in{padding:.85rem}
  /* En 16:9 a 290 px de ancho no caben dos pisos arriba y tres abajo: la
     hora sube a la línea de la fecha y la cuenta baja un escalón. */
  .dir-cuando{flex-direction:row;align-items:baseline;gap:.4rem}
  .dir-cuando span{font-size:var(--tipo-entradilla)}
  .dir-cuenta{font-size:var(--tipo-entradilla);margin-bottom:.15rem}
  .contenido{--cal-mini:5.5rem}
}
/* En estrecho el dedo ya desliza: las flechas solo ocuparían un renglón
   entre el titular y las tarjetas. El teclado sigue moviendo el carril. */
@media (max-width:44.99rem){ .dir-flechas{display:none} }

/* UNA SECCIÓN, UNA PANTALLA. Las dos secciones fluyen (son de las
   excepciones, como Eventos en la portada): un calendario no se corta a la
   altura de una pantalla. En el lienzo solo se ajusta el arranque. */
@media screen and (min-width:1024px){
  html.pantallas .cal-directos{padding-top:2.5rem}
}