/* ==========================================================================
   AZTECH METAL - AGENDA DE CONCIERTOS
   Dos formas de ver lo mismo: tarjetas con cartel para hojear, y lista
   compacta para buscar una fecha concreta. Prefijo .ag-
   ========================================================================== */

.ag-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ag-count {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gx-faint, rgba(255, 255, 255, 0.34));
  font-feature-settings: 'tnum' 1;
}

/* Interruptor de vista */
.ag-switch {
  display: flex;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ag-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.2s ease, color 0.2s ease;
}

.ag-mode svg { width: 15px; height: 15px; }

.ag-mode:hover { color: #fff; }

.ag-mode.is-on {
  background: var(--gx-red, #FF2A24);
  color: #fff;
}

.ag-mode:focus-visible { outline: 2px solid var(--gx-red, #FF2A24); outline-offset: 2px; }

/* ==========================================================================
   CARTELERA
   Fila de carteles que se arrastra, igual que el carrusel de noticias.
   Todas las tarjetas miden lo mismo pase lo que pase con la imagen.
   ========================================================================== */

/* Dos filas que corren en sentidos opuestos. Sin flechas: el movimiento es
   continuo y el dedo o el cursor mandan cuando hace falta. */
.ag-reel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ag-reel-row {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.ag-reel-row:active { cursor: grabbing; }
.ag-reel-row::-webkit-scrollbar { display: none; }
.ag-reel-row:focus-visible { outline: 2px solid var(--gx-red, #FF2A24); outline-offset: 2px; }

.ag-reel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  width: max-content;
}

/* Medida única: mismo ancho y misma altura para todas. */
.ag-poster {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  background: var(--gx-panel, #101014);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ag-poster:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--gx-red, #FF2A24);
}

.ag-poster-top { box-shadow: inset 0 3px 0 0 var(--gx-red, #FF2A24), inset 0 0 0 1px rgba(255,255,255,0.08); }

/* Cuadrado para todas. Un solo tratamiento, sin desenfoque ni franjas. */
.ag-poster-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #050506;
  flex-shrink: 0;
}

.ag-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Un cartel vertical guarda el nombre arriba: el recorte se lleva el pie. */
.ag-poster-img-cartel { object-position: center top; }

.ag-poster:hover .ag-poster-img { transform: scale(1.04); }

/* Sombra al pie para que el taco de fecha y la etiqueta se lean sobre
   cualquier foto, clara u oscura. */
.ag-poster-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.78), transparent);
  pointer-events: none;
  z-index: 1;
}

.ag-card-date {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--gx-red, #FF2A24);
  color: #fff;
  padding: 0.45rem 0.7rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.ag-card-date b {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.55rem;
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}

.ag-card-date i {
  font-style: normal;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.ag-card-kind {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  background: #fff;
  color: #08080A;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
}

.ag-card-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(5, 5, 6, 0.82);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
}

/* Cuerpo de altura pareja: el bloque de enlaces se ancla abajo. */
.ag-poster-body {
  padding: 0.95rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1;
}

.ag-card-genre {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-red, #FF2A24);
}

.ag-poster-name {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  /* Dos renglones como tope: así ninguna tarjeta crece más que las otras. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ag-poster-place {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ag-poster-place a, .ag-row-place a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.28); text-underline-offset: 3px; }
.ag-poster-place a:hover, .ag-row-place a:hover { color: var(--neon-crimson, #FF2A24); text-decoration-color: currentColor; }

.ag-poster-place i {
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.42);
}

.ag-poster-price {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.45rem;
  align-self: flex-start;
  margin-top: 0.15rem;
}

/* Enlaces al pie. La boletería es externa y lo dice con la flecha de salida. */
.ag-card-links {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ag-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  background: var(--gx-red, #FF2A24);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.ag-ticket svg { width: 11px; height: 11px; flex-shrink: 0; }
.ag-ticket:hover { background: #fff; color: #08080A; }

.ag-ticket:focus-visible,
.ag-card-note:focus-visible,
.ag-row-note:focus-visible {
  outline: 2px solid var(--gx-red, #FF2A24);
  outline-offset: 2px;
}

.ag-card-note {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.ag-card-note:hover { color: #fff; box-shadow: inset 0 0 0 1px #fff; }

/* ==========================================================================
   VISTA DE LISTA
   ========================================================================== */

.ag-list { list-style: none; margin: 0; padding: 0; }

.ag-row {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1.5fr) minmax(0, 1.2fr) auto auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.ag-list li:first-child .ag-row { border-top: 1px solid rgba(255, 255, 255, 0.09); }

.ag-row:hover { background: rgba(255, 255, 255, 0.03); padding-left: 1rem; }

.ag-row-top { box-shadow: inset 3px 0 0 var(--gx-red, #FF2A24); }

.ag-row-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--gx-red, #FF2A24);
}

.ag-row-date b {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}

.ag-row-date i {
  font-style: normal;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.2rem;
}

.ag-row-main { min-width: 0; }

.ag-row-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.ag-row:hover .ag-row-name { color: var(--gx-red, #FF2A24); }

.ag-row-with {
  display: block;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-row-place {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ag-row-place i {
  font-style: normal;
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.42);
}

.ag-row-tag {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  padding: 0.24rem 0.55rem;
  white-space: nowrap;
}

.ag-row-links {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
}

.ag-row-note {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.ag-row-note:hover { color: #fff; box-shadow: inset 0 0 0 1px #fff; }

.ag-row .ag-ticket { padding: 0.3rem 0.55rem; font-size: 0.64rem; }

/* ==========================================================================
   PIE DE FUENTES
   ========================================================================== */

.ag-fuente {
  margin: 1.6rem 0 0;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.38);
}

.ag-fuente a { color: rgba(255, 255, 255, 0.6); }
.ag-fuente a:hover { color: var(--gx-red, #FF2A24); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .ag-row {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    row-gap: 0.35rem;
  }
  .ag-row-place { grid-column: 2 / -1; }
  .ag-row-links { grid-column: 2 / -1; justify-content: flex-start; margin-top: 0.2rem; }
  .ag-row-tag { display: none; }
}

@media (max-width: 620px) {
  .ag-poster { flex-basis: 74vw; }
     /* en tactil se arrastra con el dedo */

  .ag-tools { width: 100%; justify-content: space-between; }
  .ag-row-links { grid-column: 2 / -1; justify-content: flex-start; }
  .ag-mode { padding: 0.45rem 0.6rem; font-size: 0.66rem; }
}

/* En pantallas chicas una sola fila basta: dos llenan todo el alto. */
@media (max-width: 620px) {
  .ag-reel-row[data-sentido="der"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-card, .ag-card-media img, .ag-row { transition: none; }
  .ag-card:hover { transform: none; }
  .ag-card:hover .ag-card-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   ENLACE A LA FICHA DEL EVENTO
   La imagen y el nombre de cada tarjeta llevan a la página propia del
   concierto. El botón de boletos sigue saliendo del sitio: quien va a
   comprar no debería dar un clic de más.
   -------------------------------------------------------------------------- */
.ag-poster-link { position: absolute; inset: 0; display: block; }
.ag-poster-name a { color: inherit; text-decoration: none; }
.ag-poster-name a:hover { color: var(--gx-red, #FF2A24); }
.ag-row-name a { color: inherit; text-decoration: none; }
.ag-row-name a:hover { color: var(--gx-red, #FF2A24); }

/* --------------------------------------------------------------------------
   LA AGENDA CORRE A TODO LO ANCHO
   La cartelera ya se salía del contenedor por su cuenta, pero el encabezado
   y la vista de lista seguían atados al tope de 1440 px de .hm-wrap. En un
   monitor de 1920 eso dejaba a la lista casi 600 px más angosta que las
   tarjetas de arriba.

   Se libera solo aquí, sin tocar .hm-wrap, para que el resto de la portada
   conserve su ancho de lectura. El relleno lateral es el mismo que usan las
   filas de la cartelera, así que las fechas de la lista quedan alineadas con
   los carteles.
   -------------------------------------------------------------------------- */
#agenda .hm-wrap {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Las dos últimas columnas eran automáticas, así que se ajustaban al
   contenido de cada fila: una con el botón "Boletos · Ticketmaster" empujaba
   distinto que otra con "Sitio oficial", y el recinto terminaba empezando en
   una posición diferente en cada renglón. Con la lista angosta apenas se
   notaba; a todo lo ancho el desfase llega a 80 px y se ve como si las
   columnas estuvieran rotas.

   Al fijarlas, todas las filas comparten las mismas guías verticales. El
   ancho de la última columna es el del caso más cargado: ficha, nota y
   botón de boletos juntos. */
@media (min-width: 861px) {
  .ag-row {
    grid-template-columns: 3.6rem minmax(0, 1.5fr) minmax(0, 1fr) 10.5rem 19.5rem;
  }
  .ag-row-tag { justify-self: start; }
  .ag-row-links { justify-content: flex-end; }
}

/* Enlace al mapa desde el encabezado de la agenda. */
.ag-mapa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.ag-mapa-link::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gx-red, #FF2A24);
}
.ag-mapa-link:hover {
  border-color: var(--gx-red, #FF2A24);
  color: #fff;
  background: rgba(255, 42, 36, 0.1);
}

/* Fecha sin venta abierta todavia: mismo tamaño que el botón, sin enlace. */
.ag-ticket-pendiente {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  cursor: default;
}

/* ------------------- Fecha confirmada sin cartel todavia -------------------
   El flyer suele salir semanas despues del anuncio. Mientras, la tarjeta se
   sostiene sola con el nombre en grande en vez de una imagen rota. */
.ag-poster-tipo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 42, 36, 0.16), transparent 62%),
    repeating-linear-gradient(135deg, #0d0d10 0 9px, #101014 9px 18px);
}
.ag-poster-tipo b {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.ag-poster-tipo i {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}