/* Próximas fechas.
   Parte de styles/ — se cargan en orden desde index.html. */

/* Las filas salen a sangre completa —fuera del respiro de la sección— y el
   texto se queda en la línea del título con su propio padding. Antes la caja
   empezaba justo donde empieza el texto y se veía apretado contra el borde;
   moviendo el texto hacia dentro se habría perdido la alineación con
   "Próximas fechas", así que se mueve la caja hacia fuera. */
.fechas__lista {
  display: grid; gap: 1px;
  margin-inline: calc(var(--bleed) * -1);
  background: var(--hueso-08);
  border-block: 1px solid var(--hueso-08);
}

.fecha {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.4rem) var(--bleed);
  background: rgb(7 8 15 / .58);
  text-decoration: none;
  transition: background-color .4s var(--ease), padding-inline .4s var(--ease);
}
.fecha:hover { background: rgb(7 8 15 / .82); padding-inline: calc(var(--bleed) + 1.25rem); }

.fecha__cuando { display: grid; gap: .2rem; }
.fecha__dia {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
}
.fecha__num {
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .9;
  text-transform: uppercase;
}
.fecha__mes { font-family: var(--mono); font-size: .74rem; color: var(--hueso-70); text-transform: uppercase; letter-spacing: .1em; }

.fecha__que { min-width: 0; }
.fecha__serie {
  margin: 0 0 .35rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--hueso-45);
}
.fecha__lineup {
  margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem .9rem;
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 2rem);
  line-height: 1.1; text-transform: uppercase;
}
.fecha__lineup li { list-style: none; }
.fecha__lineup .es-residente { color: var(--oro); }
.fecha__lineup .origen {
  font-family: var(--mono); font-size: .58em; font-weight: 400;
  color: var(--hueso-45); text-transform: none; letter-spacing: .04em;
  margin-left: .3em;
}
.fecha__sede { margin: .7rem 0 0; font-family: var(--mono); font-size: .76rem; color: var(--hueso-70); }

.fecha__poster {
  width: clamp(76px, 9vw, 116px); aspect-ratio: 4/5; overflow: hidden;
  border-radius: 3px; border: 1px solid var(--hueso-08);
}
.fecha__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fecha:hover .fecha__poster img { transform: scale(1.07); }

/* Estado entre temporadas. Va sobre la parte más brillante del cielo, así que
   lleva su propio fondo oscuro: con el texto suelto no se leía. */
.fechas__vacio {
  display: grid; justify-items: start; gap: .9rem;
  padding: clamp(2rem, 5vw, 3.25rem) var(--bleed);
  background: rgb(7 8 15 / .55);
}
.fechas__vacio-titulo {
  margin: 0;
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em;
}
.fechas__vacio-nota {
  margin: 0; max-width: 46ch;
  font-family: var(--mono); font-size: .8rem; line-height: 1.7;
  color: var(--hueso-70);
}
.fechas__vacio .boton { margin-top: .4rem; }

@media (max-width: 780px) {
  .fecha { grid-template-columns: 5.5rem 1fr; }
  .fecha__poster { display: none; }   /* el cartel no cabe y no aporta aquí */
}