/* =========================
  VARIABLES DE DISEÑO
  ========================= */

:root {
  --color-bg: #050509;           /* Fondo principal casi negro */
  --color-bg-alt: #0d1117;       /* Fondo alternativo oscuro */
  --color-primary: #e11d48;      /* Rojo sabinero para acentos */
  --color-accent: #fbbf24;       /* Mostaza tipo cartel */
  --color-text: #f9fafb;         /* Blanco suave para texto */
  --color-text-muted: #9ca3af;   /* Gris para textos secundarios */
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.65);

  --font-base: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display: "Bebas Neue", system-ui, sans-serif; /* Títulos */
  --font-hand: "Caveat", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif; /* Detalles manuscritos */
}

/* =========================
  RESET BÁSICO
  ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Scroll suave para los anclajes */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* =========================
  FONDO DE VÍDEO GLOBAL
  ========================= */

.bg-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000; /* por si tarda en cargar el vídeo */
}

/* =========================
  CONTENEDOR GENERAL
  ========================= */

.container {
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
}

/* Enlaces por defecto */
a {
  color: rgb(225, 29, 72);
  text-decoration: none;
}

/* Hover para escritorio ( “link” ) */
a:hover {
  color: #6c0e22;
}

/* Títulos de sección futuros */
.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Detalles manuscritos (por si los usamos luego) */
.handwritten {
  font-family: var(--font-hand);
}

/* =========================
  BOTONES REUTILIZABLES
  ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  border-radius: 3px; /* redondeo sutil */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, #fb7185, var(--color-primary));
  color: #0b0b0f;
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background: linear-gradient(135deg, #fecaca, var(--color-primary));
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: rgba(249, 250, 251, 0.4);
}

.btn--secondary:hover {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: var(--color-primary);
}

/* Saltito en TODOS los botones */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.8);
}

/* =========================
   CABECERA / MENÚ PRINCIPAL
   ========================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40; /* por encima del contenido; el vídeo está en -2 */
  /* Fondo oscuro semitransparente + ligero blur */
  background:
    linear-gradient(to bottom, rgba(3, 7, 18, 0.96), rgba(3, 7, 18, 0.9));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}

/* El header ocupa TODO el ancho, con paddings laterales */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 90px;
  padding-inline: 1.5rem;
}

/* Logo imagen */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo-img {
  display: block;
  height: 70px;
  width: auto;
}

/* Navegación desktop */
.site-nav {
  display: flex;
  align-items: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--color-text-muted);
  position: relative;
  padding-bottom: 0.1rem;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}

/* Subrayado fino en hover */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transform: translateX(-50%);
  transition: width 0.2s ease;
}

.site-nav__link:hover {
  color: var(--color-text);
}

.site-nav__link:hover::after {
  width: 70%;
}

/* CTA de contratación */
.site-nav__item--cta {
  margin-left: 1.2rem;
}

.site-nav__cta {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

/* ==========
   MENÚ MÓVIL
   ========== */

/* Checkbox oculto (control del menú) */
.site-header__checkbox {
  display: none;
}

/* Botón hamburguesa: oculto en escritorio */
.site-header__toggle {
  display: none;
}

/* Responsive: a partir de aquí adaptamos para pantallas pequeñas */
@media (max-width: 900px) {
  .site-header__inner {
    min-height: 70px;
  }

  /* Ocultamos el menú horizontal y usamos hamburguesa */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Menú desplegable bajo la cabecera ocupando TODA la pantalla en ancho */
    background:
      linear-gradient(to bottom, rgba(3, 7, 18, 0.98), rgba(3, 7, 18, 0.98));
    border-bottom: 1px solid rgba(15, 23, 42, 0.9);
    display: none; /* por defecto oculto */
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.4rem 1.4rem;
  }

  .site-nav__item--cta {
    margin-left: 0;
    margin-top: 0.4rem;
    width: 100%;
  }

  .site-nav__cta {
    width: 100%;
    justify-content: center;
  }

  /* Mostramos el botón hamburguesa */
  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
    width: 30px;
    height: 30px;
    margin-left: 1rem;
    cursor: pointer;
  }

  .site-header__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background-color: var(--color-text);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  /* Cuando el checkbox está activado, mostramos el menú */
  .site-header__checkbox:checked ~ .site-nav {
    display: block;
  }

  /* Animación del icono hamburguesa a "X" */
  .site-header__checkbox:checked + .site-header__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .site-header__checkbox:checked + .site-header__toggle span:nth-child(2) {
    opacity: 0;
  }
  .site-header__checkbox:checked + .site-header__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* =========================
   ANCLAS CON CABECERA FIJA
   ========================= */

.hero,
.section-show,
.section-video,
.section-gallery,
.section-agenda,
.section-band,
.section-contact {
  scroll-margin-top: 100px; /* para que los títulos no queden escondidos */
}

/* =========================
  HERO / PORTADA
  ========================= */

.hero {
  position: relative;
  min-height: 100vh;
  padding: 12rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

/* Contenido principal en dos columnas */
.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: 3rem;
  align-items: flex-start;
  padding-bottom: 3rem;
}

/* Columna de texto izquierda */
.hero__text {
  max-width: 600px;
}

/* Título principal */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Overlay para oscurecer el vídeo de fondo */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.9)),
    linear-gradient(135deg, rgba(15, 23, 42, 0.6), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Subtítulo */
.hero__subtitle {
  margin: 2rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-base);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: left;
}

/* Logo "Joaquín Sabina" debajo del subtítulo */
.hero__sabina-mark {
  margin-bottom: 1.2rem;
}

.hero__sabina-logo {
  display: block;
  max-width: 80%;
  width: 100%;
  height: auto;
  opacity: 0.9;
}

/* Columna visual derecha: tarjeta de presentación */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 5px 5px 0 0;
  border: 0px solid rgba(148, 163, 184, 0.5);
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.8rem;
  max-width: 700px;
  position: relative;
  overflow: hidden;
}

/* Detalle pop: banda de color en el borde superior */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 3.5px solid var(--color-primary);
  border-left: 0 solid rgba(250, 204, 21, 0.7);
  opacity: 0.6;
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -80px;
  width: 220px;
  height: 70px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.8), transparent);
  opacity: 0.7;
  pointer-events: none;
  transform: rotate(8deg);
}

.hero-card__title {
  margin: 0 0 0.8rem;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
}

.hero-card__text {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.hero-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text);
}

.hero-card__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.hero-card__list li::before {
  content: "•";
  font-size: 1.1rem;
  color: var(--color-accent);
}

/* Botones debajo de las columnas */

.hero__actions {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-bottom: 3rem;
}

.hero__actions--center {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* =========================
  TICKER INFERIOR "PRÓXIMA PARADA"
  ========================= */

.hero__ticker {
  position: relative;
  z-index: 2;
  border-top: 2px solid rgb(225, 29, 72, 0.6);
  background: linear-gradient(
    to left,
    rgba(15, 23, 42, 0.96),
    rgba(15, 23, 42, 0.7)
  );
  backdrop-filter: blur(10px);
  background-color: rgb(251, 189, 35);
}

/* Contenedor interior: fila principal arriba + marquesina debajo */
.hero__ticker-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.7rem 0;
  font-size: 0.85rem;
  font-family: var(--font-base);
}

/* Fila principal (label + fecha + lugar + enlace) */
.hero__ticker-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}

.hero__ticker-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.hero__ticker-date {
  font-weight: 700;
}

.hero__ticker-location {
  color: var(--color-text-muted);
}

/* Clave: empuja el botón al extremo derecho en escritorio */
.hero__ticker-link {
  margin-left: auto;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(248, 250, 252, 0.3);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.hero__ticker-link:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  background-color: rgba(15, 23, 42, 0.9);
}

/* HERO TICKER / MARQUESINA INFERIOR */

.hero__ticker-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

.hero__ticker-marquee-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  animation: hero-ticker-scroll 22s linear infinite;
}

.hero__ticker-marquee-track span {
  padding-right: 3rem;
}

@keyframes hero-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive específico del ticker */
@media (max-width: 700px) {
  .hero__ticker-inner {
    gap: 0.6rem;
    padding: 0.8rem 0;
  }

  .hero__ticker-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .hero__ticker-label {
    font-size: 0.7rem;
  }

  .hero__ticker-date,
  .hero__ticker-location {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .hero__ticker-link {
    margin-left: 0;
    align-self: stretch;
    margin-top: 0.2rem;
    text-align: center;
    justify-content: center;
  }

  .hero__ticker-marquee {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

/* =========================
  RESPONSIVE HERO (resto)
  ========================= */

@media (max-width: 900px) {
  .hero {
    padding-top: 8rem;
  }

  .hero__content {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .hero__visual {
    justify-content: flex-start;
  }

  .hero-card {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 7rem;
  }

  .hero__content {
    gap: 1.8rem;
  }

  .hero__title {
    font-size: 2.2rem;
    letter-spacing: 0.12em;
  }

  .hero__subtitle {
    font-size: 0.9rem;
  }

  .hero__sabina-logo {
    max-width: 210px;
  }

  .hero__actions--center {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions--center .btn {
    width: 100%;
    max-width: none;
    white-space: normal;
    text-align: center;
  }

  .hero__ticker-inner {
    font-size: 0.78rem;
  }
}

/* =========================
  SECCIÓN EL SHOW
  ========================= */

.section-show {
  position: relative;
  z-index: 1;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.6), transparent 60%),
              rgb(5, 5, 9);
  padding: 4.5rem 0 4.2rem;
  border-bottom: 1px solid rgb(239, 68, 68);
}

.section-show__inner {
  position: relative;
}

/* Grid principal: texto + ficha */

.show__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: 3.5rem;
  align-items: flex-start;
}

/* Columna derecha */

.show__intro {
  max-width: 640px;
}

.show__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.show__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.show__subtitle {
  margin: 0 0 1.2rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.show__text {
  margin: 0 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* Columna izquierda: tarjeta/ficha */

.show__data {
  display: flex;
  justify-content: flex-start;
}

.show-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 5px;
  border: 0 solid rgba(148, 163, 184, 0.5);
  padding: 1.5rem 1.7rem 1.4rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

/* Detalle pop: franja diagonal suave */
.show-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -80px;
  width: 220px;
  height: 70px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.75), transparent);
  opacity: 0.7;
  pointer-events: none;
  transform: rotate(-8deg);
}

.show-card__title {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
}

/* Lista tipo ficha en 2 columnas */

.show-card__list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.75rem;
}

.show-card__row {
  margin: 0;
}

.show-card__row dt {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.show-card__row dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
}

.show-card__note {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Responsive - EL SHOW */

@media (max-width: 900px) {
  .section-show {
    padding: 3.5rem 0 3.8rem;
  }

  .show__grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .show__data {
    justify-content: flex-start;
  }

  .show-card {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .section-show {
    padding: 3rem 0 3.4rem;
  }

  .show__title {
    font-size: 1.7rem;
    letter-spacing: 0.14em;
  }

  .show__subtitle {
    font-size: 0.85rem;
  }

  .show-card {
    padding: 1.3rem 1.2rem 1.2rem;
  }

  .show-card__row {
    flex-direction: column;
    gap: 0.2rem;
  }

  .show-card__row dt {
    min-width: auto;
  }

  .show-card__list {
    grid-template-columns: 1fr;
  }
}

/* =========================
  SECCIÓN VÍDEOS / CÓMO SUENA
  ========================= */

.section-video {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 4.2rem;
  background:
    linear-gradient(to bottom, rgba(3, 7, 18, 0.7), rgb(5, 5, 9));
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

.section-video__inner {
  position: relative;
}

/* Cabecera */

.video__header {
  text-align: left;
  margin-bottom: 2.4rem;
}

.video__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.video__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.video__subtitle {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Grid principal: vídeo + tarjeta lateral */

.video__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  gap: 3rem;
  align-items: flex-start;
}

/* Columna izquierda: vídeo principal */

.video__main {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(15, 23, 42, 0.9);
  background-color: #020617;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Chips de tipos de bloque del show */

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.video-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  border-radius: 3px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 0 solid rgba(148, 163, 184, 0.6);
  color: var(--color-text-muted);
  background-color: rgba(15, 23, 42, 0.5);
}

/* Columna derecha: tarjeta de otros vídeos + CTA canal YouTube */

.video__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.9rem;
}

.video-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 5px;
  border: 0 solid rgba(148, 163, 184, 0.5);
  padding: 1.6rem 1.7rem 1.5rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

/* Detalle pop en la esquina (tarjeta vídeos YouTube) */
.video-card::before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -80px;
  width: 220px;
  height: 70px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.8), transparent);
  opacity: 0.7;
  pointer-events: none;
  transform: rotate(8deg);
}

/* Variante pop para la tarjeta de Spotify */
.video-card--master::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -80px;
  bottom: auto;
  left: auto;
  width: 220px;
  height: 70px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.85), transparent);
  opacity: 0.8;
  pointer-events: none;
  transform: rotate(-8deg);
}

.video-card__title {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
}

.video-card__text {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.video-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
}

.video-card__list li {
  margin-bottom: 0.4rem;
}

.video-card__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  padding-left: 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
}

/* Iconito de play al inicio del enlace */
.video-card__list a::before {
  content: "▶";
  position: absolute;
  left: 0;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Hover links lista vídeos */
.video-card__list a:hover {
  color: var(--color-primary);
  border-color: rgba(225, 29, 71, 0.265);
  transform: translateX(1px);
}

.video-card__note {
  margin: 0.6rem 0 0;
  font-size: 1.2rem;
  color: var(--color-text-muted);
}

/* CTA al canal de YouTube debajo de la tarjeta */

.video-channel-cta {
  margin-top: 0.2rem;
  width: 100%;
  max-width: 380px;
}

.video-channel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: 0px solid rgba(248, 250, 252, 0.12);
  color: rgb(225, 29, 72);
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.08), transparent),
    rgba(15, 23, 42, 0.9);
  box-shadow: var(--shadow-soft);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.video-channel-link:hover {
  background: linear-gradient(
    135deg,
    rgba(225, 29, 72, 0.18),
    rgba(15, 23, 42, 0.95)
  );
  border-color: rgba(225, 29, 72, 0.85);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

/* BLOQUE SPOTIFY DENTRO DE VÍDEOS */

.video__grid--spotify {
  margin-top: 2.6rem;
  align-items: flex-start;
}

.video__side--left {
  justify-content: flex-start;
  align-items: flex-start;
}

.audio-frame {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 0px solid rgba(15, 23, 42, 0.9);
  background-color: #020617;
}

.audio-frame iframe {
  width: 100%;
  min-height: 380px;
  border: 0;
}

/* Responsive - VÍDEOS */

@media (max-width: 900px) {
  .section-video {
    padding: 3.6rem 0 3.8rem;
  }

  .video__grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .video__side {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .video-card {
    max-width: 100%;
  }

  .video-channel-cta {
    width: 100%;
    max-width: 100%;
  }

  .video-channel-link {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.88rem;
  }
}

@media (max-width: 600px) {
  .section-video {
    padding: 3rem 0 3.4rem;
  }

  .video__title {
    font-size: 1.7rem;
    letter-spacing: 0.14em;
  }

  .video__subtitle {
    font-size: 0.9rem;
  }

  .video-frame {
    border-radius: 3px;
  }

  .video-tags {
    gap: 0.45rem;
  }

  .video-tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.7rem;
  }

  .video-card {
    padding: 1.3rem 1.2rem 1.2rem;
  }

  .video-channel-link {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }
}

/* =========================================================================
    SECCIÓN GALERÍA / MOMENTOS DEL DIRECTO + SECCIÓN NOTICIAS EN LA LANDING
   ======================================================================== */

.section-gallery {
  position: relative;
  padding: 4.2rem 0 4rem;
  background:
    radial-gradient(circle at bottom, rgba(15, 23, 42, 0.6), transparent 60%),
    #050509;
}

.section-gallery__inner {
  position: relative;
}

/* Cabecera */

.gallery__header {
  text-align: left;
  margin-bottom: 2.1rem;
}

.gallery__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.gallery__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gallery__subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Carrusel */

.gallery-carousel {
  position: relative;
  margin-top: 1.5rem;
  padding-bottom: 0.4rem;
}

.gallery-carousel__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  cursor: grab;
}

/* Ocultar barra de scroll */
.gallery-carousel__track::-webkit-scrollbar {
  display: none;
}
.gallery-carousel__track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tarjetas */

.gallery-card {
  margin: 0;
  flex: 0 0 260px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.9);
  background-color: #020617;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  transform-origin: center center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.gallery-card__image {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Hover: un pelín más grande y luminosa */
.gallery-card:hover {
  transform: scale(1.03);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.9);
  border-color: rgba(248, 250, 252, 0.4);
}

/* Footer (botón galería completa) */

.gallery__footer {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
}

/* =========================
   DOTS GENÉRICOS PARA CARRUSELES
   ========================= */

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease,
    border-color 0.18s ease;
}

.carousel-dot--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .carousel-dot {
    width: 6px;
    height: 6px;
  }
}

/* LIGHTBOX – COMÚN (CARRUSEL + GALERÍA COMPLETA) */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999999;
}

.gallery-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Contenedor de la imagen dentro del lightbox */
.gallery-lightbox__inner {
  position: relative;
  max-width: min(1200px, 95vw);
  max-height: 90vh;
}

/* Imagen en grande */
.gallery-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
}

/* Botón de cerrar */
.gallery-lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  border: none;
  color: #f9fafb;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.gallery-lightbox__close:hover {
  color: var(--color-accent);
}

/* El cursor cambia a mano sobre las fotos clicables */
.gallery-card,
.gallery-page-card {
  cursor: zoom-in;
}

/* Cuando el lightbox está abierto, bloqueamos el scroll del body */
body.no-scroll {
  overflow: hidden;
}

/* Responsive galería */
@media (max-width: 900px) {
  .section-gallery {
    padding: 3.6rem 0 3.6rem;
  }

  .gallery-card {
    flex: 0 0 220px;
  }

  .gallery-card__image {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .section-gallery {
    padding: 3.2rem 0 3.4rem;
  }

  .gallery__title {
    font-size: 1.7rem;
    letter-spacing: 0.14em;
  }

  .gallery__subtitle {
    font-size: 0.9rem;
  }

  .gallery-card {
    flex: 0 0 190px;
  }

  .gallery-card__image {
    height: 200px;
  }
}

/* =========================
  BARRA SOCIAL / SÍGUENOS EN REDES
  ========================= */

.social-bar {
  position: relative;
  z-index: 2;
  border-top: 2px solid rgb(225, 29, 72, 0.6);
  background: linear-gradient(
    to left,
    rgba(15, 23, 42, 0.96),
    rgba(15, 23, 42, 0.7)
  );
  backdrop-filter: blur(10px);
  background-color: rgb(251, 189, 35);
  overflow: hidden;
}

.social-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 0;
}

/* Texto izquierda */

.social-bar__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.social-bar__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Iconos derecha */

.social-bar__icons {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: 0;
  transition: transform 0.12s linear;
}

.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  background-color: transparent;
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

/* Colores por red (hover) */

.social-icon--ig:hover {
  border-color: #e11d48;
  background: radial-gradient(circle at 30% 30%, #f97316, #e11d48, #4f46e5);
  color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.social-icon--yt:hover {
  border-color: #ef4444;
  background-color: #ef4444;
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.social-icon--fb:hover {
  border-color: #3b82f6;
  background-color: #3b82f6;
  color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Animación de entrada de los iconos (rebote suave) */

.social-bar--visible .social-icon {
  animation: social-icon-pop 0.45s ease-out forwards;
}

.social-bar--visible .social-icon:nth-child(2) {
  animation-delay: 0.08s;
}

.social-bar--visible .social-icon:nth-child(3) {
  animation-delay: 0.16s;
}

@keyframes social-icon-pop {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  60% {
    opacity: 1;
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación lateral específica para móvil */
@keyframes social-icons-mobile-slide {
  0% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(-45%);
  }
}

/* Responsive barra social */

@media (max-width: 768px) {
  .social-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .social-bar__icons {
    justify-content: flex-end;
    width: 100%;
  }

  .social-bar--visible .social-bar__icons {
    animation: social-icons-mobile-slide 5s ease-in-out infinite alternate;
  }
}

/* =========================
  SECCIÓN AGENDA / PRÓXIMOS CONCIERTOS (HOME)
  ========================= */

.section-agenda {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 4.2rem;
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5));
  border-bottom: 1px solid rgb(239, 68, 68);
}

.section-agenda__inner {
  position: relative;
}

/* Cabecera */

.agenda__header {
  text-align: left;
  margin-bottom: 2.3rem;
}

.agenda__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.agenda__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.agenda__subtitle {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Lista de conciertos */

.agenda__list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}

.agenda-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 1.4rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(251, 190, 36, 0.54);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Columna fecha */

.agenda-item__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 3px solid var(--color-primary);
  padding-left: 0.75rem;
}

.agenda-item__day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.agenda-item__month {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.agenda-item__year {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Columna info */

.agenda-item__info {
  min-width: 0;
}

.agenda-item__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
}

.agenda-item__location {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.agenda-item__details {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Columna acciones */

.agenda-item__actions {
  display: flex;
  justify-content: flex-end;
}

/* Variante "ghost" para CTA final */

.agenda-item--ghost {
  border-style: dashed;
  border-color: rgba(251, 190, 36, 0.54);
}

/* Footer de agenda */

.agenda__footer {
  text-align: left;
}

.agenda__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Responsive - AGENDA HOME */

@media (max-width: 900px) {
  .section-agenda {
    padding: 3.6rem 0 3.8rem;
  }

  .agenda-item {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: flex-start;
  }

  .agenda-item__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 0.6rem;
  }
}

@media (max-width: 600px) {
  .section-agenda {
    padding: 3.1rem 0 3.4rem;
  }

  .agenda-item {
    grid-template-columns: 1fr;
    padding: 0.9rem 1rem;
    gap: 0.7rem;
  }

  .agenda-item__date {
    flex-direction: row;
    align-items: center;
    border-left-width: 0;
    border-bottom: 2px solid var(--color-primary);
    padding-left: 0;
    padding-bottom: 0.4rem;
    gap: 0.5rem;
  }

  .agenda-item__day {
    font-size: 1.3rem;
  }

  .agenda-item__location {
    font-size: 0.85rem;
  }
}

/* =========================
  SECCIÓN LA BANDA
  ========================= */

.section-band {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 4.2rem;
  background:
    linear-gradient(to bottom, rgba(3, 7, 18, 0.5), rgba(3, 7, 18, 0.98));
  background-color: rgb(17, 24, 39);
  border-bottom: 1px solid rgb(239, 68, 68);
}

.section-band__inner {
  position: relative;
}

/* Cabecera */

.band__header {
  max-width: 720px;
  margin-bottom: 2.4rem;
}

.band__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.band__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.band__subtitle {
  margin: 0 0 0.8rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.band__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* Grid de músicos */

.band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  margin-bottom: 20px;
}

/* Tarjetas de músico */

.musician-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 5px;
  border: 0 solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Imagen */

.musician-card__figure {
  margin: 0;
}

.musician-card__image-wrap {
  position: relative;
  width: 100%;
  padding-top: 120%;
  overflow: hidden;
}

.musician-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuerpo de la tarjeta */

.musician-card__body {
  padding: 0.9rem 0.95rem 0.9rem;
}

.musician-card__name {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 600;
}

.musician-card__role {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
}

.musician-card__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Responsive - LA BANDA */

@media (max-width: 900px) {
  .section-band {
    padding: 3.8rem 0 3.8rem;
  }

  .band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 600px) {
  .section-band {
    padding: 3.2rem 0 3.4rem;
  }

  .band__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .musician-card__body {
    padding: 0.8rem 0.85rem 0.85rem;
  }

  .musician-card__name {
    font-size: 0.95rem;
  }

  .musician-card__note {
    font-size: 0.82rem;
  }
}

/* =========================
  SECCIÓN CONTACTO / CONTRATACIÓN
  ========================= */

.section-contact {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 4.2rem;
  overflow: hidden;
}

/* Capa de fondo propia de la sección contacto */
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(3, 7, 18, 0.6), rgba(3, 7, 18, 0.9)),
    url("/image/fotos/foto-portada.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.section-contact__inner {
  position: relative;
  z-index: 1;
}

/* Grid principal: columna izquierda + formulario */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: 3rem;
  align-items: flex-start;
}

/* Columna izquierda completa */

.contact__col-left {
  max-width: 620px;
}

/* Cabecera */

.contact__header {
  margin-bottom: 1.6rem;
}

.contact__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact__subtitle {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Texto e info izquierda */

.contact__intro {
  max-width: 100%;
}

.contact__text {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.contact__info-block {
  margin-top: 1.2rem;
}

.contact__info-title {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.contact__info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.contact__info-list li {
  margin-bottom: 0.4rem;
}

.contact__info-label {
  display: inline-block;
  min-width: 70px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.contact__info-list a {
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.02rem;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.contact__info-list a:hover {
  color: var(--color-primary);
  border-color: rgba(225, 29, 72, 0.7);
}

.contact__note {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Columna derecha: formulario */

.contact__form-wrap {
  display: flex;
  justify-content: flex-end;
  align-self: flex-start;
}

.contact__form {
  background: rgba(0, 0, 1, 0.3);
  border-radius: 5px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 1.6rem 1.7rem 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-soft);
}

.contact__field {
  margin-bottom: 0.9rem;
}

.contact__field label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.contact__field input,
.contact__field textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 3px;
  border: 0.3px solid rgb(156, 163, 175);
  background-color: rgba(6, 10, 17, 0.9);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 0.9rem;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: rgba(148, 163, 184, 0.8);
}

.contact__field input:focus,
.contact__field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.4);
  background-color: rgba(15, 23, 42, 1);
}

/* Campos divididos (email + teléfono) */

.contact__field--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.contact__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* Responsive - CONTACTO */

@media (max-width: 900px) {
  .section-contact {
    padding: 3.8rem 0 3.8rem;
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .contact__form-wrap {
    justify-content: flex-start;
  }

  .contact__form {
    max-width: 100%;
  }

  .contact__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .section-contact {
    padding: 3.2rem 0 3.4rem;
  }

  .contact__field--split {
    grid-template-columns: 1fr;
  }

  .contact__title {
    font-size: 1.7rem;
    letter-spacing: 0.14em;
  }

  .contact__subtitle {
    font-size: 0.9rem;
  }

  /* OCULTAMOS EL FORMULARIO DE MOMENTO HASTA QUE LO TENGAMOS BIEN CONFIGURADO */
  .contact__form-wrap {
    display: none;
  }
}

/* OCULTAMOS EL FORMULARIO DE MOMENTO (REGLA GLOBAL) */
.contact__form-wrap {
  display: none;
}

/* =========================
  FOOTER
  ========================= */

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.8), transparent 60%),
    linear-gradient(to bottom, #020617, #020617);
  color: var(--color-text-muted);
}

/* Parte superior del footer */

.site-footer__top {
  padding: 0 0 1rem;
}

/* GRID DE 3 COLUMNAS */

.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 2rem;
}

/* Marca (izquierda) */

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: start;
}

.site-footer__logo img {
  display: block;
  height: 72px;
  width: auto;
  margin-bottom: 0.6rem;
}

.site-footer__tagline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Bloques genéricos */

.site-footer__block {
  font-size: 0.9rem;
}

/* Contacto (centro) */

.site-footer__contact-block {
  justify-self: center;
  text-align: center;
}

.site-footer__title {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text);
}

/* Listas */

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

.site-footer__list li {
  margin-bottom: 0.35rem;
}

.site-footer__list a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.02rem;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.site-footer__list a:hover {
  color: var(--color-primary);
  border-color: rgba(225, 29, 72, 0.7);
}

/* Lista de contacto con etiqueta + enlace */

.site-footer__list--contact li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer__list--contact span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

/* Legales (derecha) */

.site-footer__legal-block {
  justify-self: end;
  text-align: right;
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.2rem;
  font-size: 0.82rem;
  justify-content: flex-end;
}

.site-footer__legal a {
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.02rem;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.site-footer__legal a:hover {
  color: var(--color-primary);
  border-color: rgba(225, 29, 72, 0.7);
}

/* Franja inferior */

.site-footer__bottom {
  border-top: 1px solid rgba(15, 23, 42, 0.9);
  background: linear-gradient(
    to right,
    rgba(3, 4, 7, 0.96),
    rgba(3, 4, 7, 0.96)
  );
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.8rem 0;
  font-size: 0.78rem;
}

.site-footer__copy {
  margin: 0;
  color: var(--color-text-muted);
}

.site-footer__credits {
  margin: 0;
  color: var(--color-text-muted);
}

.site-footer__credits span {
  color: var(--color-text);
  font-weight: 600;
}

/* Redes sociales en el footer */
.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

/* Responsive - FOOTER */

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .site-footer__brand {
    justify-self: flex-start;
  }

  .site-footer__contact-block {
    justify-self: flex-start;
    text-align: left;
  }

  .site-footer__list--contact li {
    align-items: flex-start;
  }

  .site-footer__legal-block {
    justify-self: flex-start;
    text-align: left;
  }

  .site-footer__legal {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
}

@media (max-width: 600px) {
  .site-footer__top {
    padding: 1.6rem 0 1.4rem;
  }

  .site-footer__logo img {
    height: 60px;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.75rem;
  }
}

/* =========================
  PÁGINAS LEGALES
  ========================= */

.section-legal {
  position: relative;
  z-index: 1;
  padding: 8rem 0 4rem;
  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.6), transparent 55%),
    #050509;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

.section-legal__inner {
  position: relative;
}

.legal__header {
  margin-bottom: 1.8rem;
}

.legal__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal__intro {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.legal__content {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.legal__content h2,
.legal__content h3 {
  font-size: 1rem;
  margin-top: 1.8rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.legal__content p {
  margin: 0 0 0.8rem;
}

.legal__content ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
}

.legal__content li {
  margin-bottom: 0.4rem;
}

/* =========================
   GALERÍA COMPLETA (galeria.html)
   ========================= */

.section-gallery-page {
  position: relative;
  padding: 4rem 0 4rem;
  background:
    radial-gradient(circle at bottom, rgba(15, 23, 42, 0.6), transparent 60%),
    #050509;
}

.section-gallery-page__inner {
  position: relative;
}

/* Cabecera de la página de galería */

.gallery-page__header {
  text-align: left;
  margin-bottom: 2rem;
}

.gallery-page__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.gallery-page__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gallery-page__subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* GRID: máximo 4 fotos por fila */

.gallery-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

/* Tarjeta de foto */

.gallery-page-card {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.9);
  background-color: #020617;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  transform-origin: center center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  cursor: zoom-in;
}

.gallery-page-card__figure {
  margin: 0;
}

.gallery-page-card__image {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Hover: un pelín más grande y luminosa */

.gallery-page-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9);
  border-color: rgba(248, 250, 252, 0.4);
}

/* Responsive galería-page */

@media (max-width: 900px) {
  .section-gallery-page {
    padding: 3.4rem 0 3.6rem;
  }

  .gallery-page-card__image {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .section-gallery-page {
    padding: 3.2rem 0 3.4rem;
  }

  .gallery-page-grid {
    gap: 0.9rem;
  }

  .gallery-page-card__image {
    height: 200px;
  }
}

/* =========================
   SECCIÓN AGENDA (PÁGINA DETALLE)
   ========================= */

.section-agenda {
  position: relative;
  z-index: 1;
  padding: 8rem 0 4.2rem;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), #020617);
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

.agenda__inner {
  position: relative;
}

.agenda__header {
  text-align: left;
  margin-bottom: 2.4rem;
}

.agenda__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.agenda__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.agenda__subtitle {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.agenda-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 5px;
  border: 0 solid rgba(148, 163, 184, 0.5);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.1rem;
}

/* Estilos del details/summary */

.agenda-details {
  border-radius: 4px;
  overflow: hidden;
}

/* Cabecera clicable del evento */
.agenda-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.15rem 0;
  transition: background 0.16s ease, transform 0.12s ease;
}

.agenda-summary::-webkit-details-marker {
  display: none;
}

.agenda-summary__main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.agenda-summary__title {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.agenda-summary__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Botón “Entradas / Info” */
.agenda-summary__cta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.9rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(15, 23, 42, 0.85);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
  position: relative;
}

/* Flechita hacia abajo al lado del texto */
.agenda-summary__cta::after {
  content: "▾";
  font-size: 2rem;
  opacity: 0.9;
  transform-origin: center;
  transition: transform 0.18s ease;
}

/* Cuando el evento está abierto, flecha gira hacia arriba */
.agenda-details[open] .agenda-summary__cta::after {
  transform: rotate(-180deg);
}

/* Hover: pequeño “saltito” del botón y resaltado */
.agenda-summary:hover .agenda-summary__cta {
  background: rgba(30, 64, 175, 0.3);
  border-color: rgba(248, 250, 252, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Cuerpo desplegable */

.agenda-details__body {
  margin-top: 0.85rem;
  border-top: 1px solid rgba(30, 41, 59, 0.9);
  padding-top: 0.75rem;
}

.agenda-details__body p {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.agenda-details__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
}

.agenda-details__list li {
  margin-bottom: 0.3rem;
}

/* CONTENEDOR DEL CARTEL / IMAGEN */
.agenda-details__media {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0;
}

/* Cartel más pequeño y controlado */
.agenda-details__media img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
}

/* Enlaces adicionales dentro del detalle */

.agenda-details__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.agenda-details__links a {
  font-size: 0.85rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.05rem;
  color: var(--color-primary);
  text-decoration: none;
}

.agenda-details__links a:hover {
  border-color: rgba(225, 29, 72, 0.7);
}

/* Responsive agenda detalle */

@media (max-width: 700px) {
  .agenda-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .agenda-summary__cta {
    align-self: flex-start;
  }
}