/* Abre estilos para *. */
* {
  /* Define el margen exterior. */
  margin: 0;
  /* Define el espacio interior. */
  padding: 0;
  /* Controla como se calcula el tamano. */
  box-sizing: border-box;
  /* Define la fuente del texto. */
  font-family: "Bebas Neue", "Montserrat", sans-serif;
  /* Define el grosor del texto. */
  font-weight: 400;
  /* Define el estilo de la fuente. */
  font-style: normal;
  /* Quita estilos de lista. */
  list-style: none;
  /* Controla decoracion de enlaces. */
  text-decoration: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para body. */
body {
  /* Define el color base antes de cargar recursos externos. */
  background-color: black;
  /* Evita desplazamiento horizontal accidental. */
  overflow-x: hidden;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para secciones animadas por scroll. */
.scroll-reveal {
  /* Define la transparencia inicial de la seccion. */
  opacity: 1;
  /* Desplaza suavemente la seccion antes de entrar. */
  transform: none;
  /* Anade transicion suave al aparecer. */
  transition: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para secciones visibles por scroll. */
.scroll-reveal.is-visible {
  /* Muestra la seccion al entrar en pantalla. */
  opacity: 1;
  /* Devuelve la seccion a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para secciones abiertas desde enlaces internos. */
section.scroll-reveal:target,
/* Abre estilos para el pie visible si queda enlazado. */
footer.scroll-reveal:target {
  /* Muestra la seccion enlazada sin esperar al observador. */
  opacity: 1;
  /* Devuelve la seccion enlazada a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para elementos internos animados por scroll. */
.inner-reveal {
  /* Define la transparencia inicial del elemento interno. */
  opacity: 0;
  /* Desplaza suavemente el elemento antes de aparecer. */
  transform: translateY(22px) scale(0.98);
  /* Anade una transicion suave y natural. */
  transition: opacity 0.85s ease, transform 0.85s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para elementos internos visibles por scroll. */
.scroll-reveal.is-visible .inner-reveal {
  /* Muestra el elemento interno. */
  opacity: 1;
  /* Devuelve el elemento a su posicion natural. */
  transform: translateY(0) scale(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el segundo elemento interno visible. */
.scroll-reveal.is-visible .inner-reveal:nth-of-type(2) {
  /* Retrasa un poco la entrada del segundo bloque. */
  transition-delay: 0.12s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para header. */
header {
  /* Define el ancho. */
  width: 100%;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Define el modo de posicionamiento. */
  position: fixed;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Controla la capa visual. */
  z-index: 2;
  /* Define el fondo. */
  background: transparent;
  /* Anade sombra visual. */
  box-shadow: transparent;
  /* Anade transiciones suaves. */
  transition: background 0.3s ease, opacity 1s;
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: space-between;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Permite que el menu movil baje de linea. */
  flex-wrap: wrap;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para header:hover. */
header:hover {
  /* Anade sombra visual. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  /* Define el fondo. */
  background: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #logohomesick. */
#logohomesick {
  /* Define el ancho. */
  width: 4rem;
  /* Define la transparencia. */
  opacity: 0.8;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .nav. */
.nav {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: flex-end;
  /* Define separacion entre elementos. */
  gap: 2rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .menu-toggle. */
.menu-toggle {
  /* Oculta el boton hamburguesa en escritorio. */
  display: none;
  /* Define el color de fondo. */
  background-color: transparent;
  /* Quita el borde del boton. */
  border: 0;
  /* Define el espacio interior. */
  padding: 0.35rem;
  /* Define el cursor al pasar encima. */
  cursor: pointer;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define separacion entre lineas. */
  gap: 0.32rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .menu-toggle span. */
.menu-toggle span {
  /* Define el ancho de cada linea. */
  width: 1.7rem;
  /* Define la altura de cada linea. */
  height: 2px;
  /* Define el color de cada linea. */
  background-color: black;
  /* Anade transiciones suaves. */
  transition: transform 0.3s ease, opacity 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .menu-toggle.active span:first-child. */
.menu-toggle.active span:first-child {
  /* Gira la primera linea al abrir el menu. */
  transform: translateY(7px) rotate(45deg);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .menu-toggle.active span:nth-child(2). */
.menu-toggle.active span:nth-child(2) {
  /* Oculta la linea central al abrir el menu. */
  opacity: 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .menu-toggle.active span:last-child. */
.menu-toggle.active span:last-child {
  /* Gira la tercera linea al abrir el menu. */
  transform: translateY(-7px) rotate(-45deg);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para header.scrolled. */
header.scrolled {
  /* Define el color de fondo. */
  background-color: white;
  /* Anade sombra visual. */
  box-shadow: 0 4px 8px grey;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #video-background. */
#video-background {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100vw;
  /* Define la altura. */
  height: 100%;
  /* Ajusta recorte visual del contenido. */
  object-fit: cover;
  /* Controla la capa visual. */
  z-index: 0;
  /* Define la transparencia. */
  opacity: 1;
  /* Anade transiciones suaves. */
  transition: opacity 0.5s ease;
  /* Avisa al navegador de cambios de transparencia. */
  will-change: opacity;
  /* Fuerza composicion del video en su propia capa. */
  transform: translateZ(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .nav .elento. */
.nav .elento {
  /* Define el color del texto o icono. */
  color: black;
  /* Define el tamano del texto. */
  font-size: 1.5rem;
  /* Define la transparencia. */
  opacity: 0.8;
  /* Anade transiciones suaves. */
  transition: color 0.3s ease;
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Define espacio inferior interno. */
  padding-bottom: 0.3rem;
  /* Controla decoracion de enlaces. */
  text-decoration: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .nav .elento::after. */
.nav .elento::after {
  /* Inserta contenido decorativo. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Ajusta la posicion inferior. */
  bottom: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 2px;
  /* Define el fondo. */
  background: black;
  /* Aplica una transformacion visual. */
  transform: scaleX(0);
  /* Anade transiciones suaves. */
  transition: transform 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .nav .elento:hover::after. */
.nav .elento:hover::after {
  /* Aplica una transformacion visual. */
  transform: scaleX(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .nav .elento.scrolled. */
.nav .elento.scrolled {
  /* Define el color del texto o icono. */
  color: rgba(125, 205, 253, 1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #overlay. */
#overlay {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100vw;
  /* Define la altura. */
  height: 100%;
  /* Define el color de fondo. */
  background-color: rgba(0, 0, 0, 0);
  /* Aplica la propiedad pointer-events al elemento. */
  pointer-events: none;
  /* Controla la capa visual. */
  z-index: 1;
  /* Anade transiciones suaves. */
  transition: background-color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #index. */
#index {
  /* Mantiene el video de portada dentro de su propia seccion. */
  position: relative;
  /* Recorta el video para que no se vea en secciones siguientes. */
  overflow: hidden;
  /* Aisla las capas internas de la portada. */
  isolation: isolate;
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el color del texto o icono. */
  color: white;
  /* Define la altura. */
  height: 100vh;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #video-container. */
#video-container {
  /* Coloca el video como fondo interno de portada. */
  position: absolute;
  /* Ajusta todos los lados posicionados. */
  inset: 0;
  /* Controla la capa visual dentro de portada. */
  z-index: 0;
  /* Evita que el video afecte a eventos del contenido. */
  pointer-events: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para elementos visibles de portada. */
#index > :not(#video-container) {
  /* Coloca logo, redes y flecha por encima del video. */
  position: relative;
  /* Controla la capa visual dentro de portada. */
  z-index: 2;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #homesick. */
#homesick {
  /* Define el ancho. */
  width: 50rem;
  /* Define la transparencia. */
  opacity: 0.6;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .icon. */
.icon {
  /* Define el tamano del texto. */
  font-size: 3rem;
  /* Define la transparencia. */
  opacity: 0.6;
  /* Anade transiciones suaves. */
  transition: transform 0.3s ease;
  /* Define el color del texto o icono. */
  color: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .icon:hover. */
.icon:hover {
  /* Aplica una transformacion visual. */
  transform: scale(1.2);
  /* Define la transparencia. */
  opacity: 0.8;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .redes. */
.redes {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define separacion entre elementos. */
  gap: 3rem;
  /* Define margen superior. */
  margin-top: 1rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .redes-footer a. */
.redes-footer a {
  /* Define margen superior. */
  margin-top: 0;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tamano del texto. */
  font-size: 1.35rem;
  /* Prepara los iconos del footer para entrada suave. */
  opacity: 0;
  /* Desplaza los iconos antes de entrar. */
  transform: translateY(10px);
  /* Anade transicion suave a iconos del footer. */
  transition: opacity 0.65s ease, transform 0.3s ease, color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer.is-visible .redes-footer a. */
footer.is-visible .redes-footer a {
  /* Muestra los iconos del footer. */
  opacity: 1;
  /* Devuelve los iconos a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer.is-visible .redes-footer a:nth-child(2). */
footer.is-visible .redes-footer a:nth-child(2) {
  /* Retrasa ligeramente el segundo icono. */
  transition-delay: 0.06s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer.is-visible .redes-footer a:nth-child(3). */
footer.is-visible .redes-footer a:nth-child(3) {
  /* Retrasa ligeramente el tercer icono. */
  transition-delay: 0.12s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer.is-visible .redes-footer a:nth-child(4). */
footer.is-visible .redes-footer a:nth-child(4) {
  /* Retrasa ligeramente el cuarto icono. */
  transition-delay: 0.18s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer .redes-footer a:hover. */
footer .redes-footer a:hover {
  /* Eleva el icono al pasar el raton. */
  transform: translateY(-2px) scale(1.12);
  /* Cambia el color del icono a gris claro complementario. */
  color: rgba(225, 225, 225, 1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .redes-footer. */
.redes-footer {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define separacion entre elementos. */
  gap: 1.25rem;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Permite salto de elementos flex. */
  flex-wrap: wrap;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .scroll-container. */
.scroll-container {
  /* Aplica una animacion. */
  animation: bounce 1s infinite;
  /* Define la transparencia. */
  opacity: 0.6;
  /* Define margen superior. */
  margin-top: 6rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .scroll-arrow. */
.scroll-arrow {
  /* Fuerza la flecha de portada a color blanco. */
  color: white;
  /* Fuerza el relleno blanco del icono SVG. */
  fill: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .scroll-arrow path. */
.scroll-arrow path {
  /* Hereda el color blanco definido en la flecha. */
  fill: currentColor;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para @keyframes bounce. */
@keyframes bounce {
  /* Abre estilos para 0%, 100%. */
  0%, 100% {
    /* Aplica una transformacion visual. */
    transform: translateY(0);
  /* Cierra el bloque de estilos. */
  }
  /* Abre estilos para 50%. */
  50% {
    /* Aplica una transformacion visual. */
    transform: translateY(-20px);
  /* Cierra el bloque de estilos. */
  }
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single. */
#new-single {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Controla el desbordamiento. */
  overflow: hidden;
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la altura minima. */
  min-height: 100vh;
  /* Define el color de fondo. */
  background-color: black;
  /* Muestra una foto de la banda detras de los videos. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.58)), url("../assets/images/gallery/HOMESICK BAND 2025.jpeg");
  /* Ajusta la foto para cubrir la seccion. */
  background-size: cover;
  /* Centra la foto de fondo. */
  background-position: center;
  /* Mantiene el fondo estable durante el scroll. */
  background-attachment: scroll;
  /* Define el espacio interior. */
  padding: 6rem 1rem 3rem;
  /* Controla como se calcula el tamano. */
  box-sizing: border-box;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single > *. */
#new-single > * {
  /* Coloca el contenido por encima del fondo. */
  position: relative;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single::before. */
#new-single::before {
  /* Inserta un degradado para suavizar la entrada desde portada. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 9rem;
  /* Crea una transicion oscura entre secciones. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0));
  /* Evita interaccion con el degradado. */
  pointer-events: none;
  /* Controla la capa visual. */
  z-index: 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame. */
.youtube-frame {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Define el ancho. */
  width: 100%;
  /* Mantiene una proporcion visual. */
  aspect-ratio: 16 / 9;
  /* Controla el desbordamiento. */
  overflow: hidden;
  /* Redondea esquinas. */
  border-radius: 20px;
  /* Define el color de fondo. */
  background-color: #111;
  /* Anade sombra visual. */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  /* Mantiene visibles las miniaturas durante la entrada. */
  opacity: 1;
  /* Desplaza la miniatura antes de entrar. */
  transform: translateY(30px) scale(0.975);
  /* Anade transicion suave a la miniatura. */
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  /* Evita parpadeos durante animaciones. */
  backface-visibility: hidden;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single.is-visible .youtube-frame. */
#new-single.is-visible .youtube-frame {
  /* Devuelve la miniatura a su posicion natural. */
  transform: translateY(0) scale(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single:target .youtube-frame. */
#new-single:target .youtube-frame {
  /* Devuelve la miniatura a su posicion natural. */
  transform: translateY(0) scale(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #new-single.is-visible .youtube-frame-main. */
#new-single.is-visible .youtube-frame-main,
/* Abre estilos para #new-single:target .youtube-frame-main. */
#new-single:target .youtube-frame-main {
  /* Define el retardo del video principal. */
  transition-delay: 0.08s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el primer video secundario visible. */
#new-single.is-visible .youtube-frame-small:nth-of-type(1),
/* Abre estilos para el primer video secundario desde menu. */
#new-single:target .youtube-frame-small:nth-of-type(1) {
  /* Retrasa el primer video secundario. */
  transition-delay: 0.2s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el segundo video secundario visible. */
#new-single.is-visible .youtube-frame-small:nth-of-type(2),
/* Abre estilos para el segundo video secundario desde menu. */
#new-single:target .youtube-frame-small:nth-of-type(2) {
  /* Retrasa el segundo video secundario. */
  transition-delay: 0.32s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-thumb. */
.youtube-thumb {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta todos los lados posicionados. */
  inset: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 100%;
  /* Ajusta recorte visual del contenido. */
  object-fit: cover;
  /* Redondea esquinas. */
  border-radius: 20px;
  /* Define el tipo de caja visual. */
  display: block;
  /* Anade transiciones suaves. */
  transition: transform 0.5s ease, filter 0.5s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame iframe. */
.youtube-frame iframe {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta todos los lados posicionados. */
  inset: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 100%;
  /* Quita borde del reproductor. */
  border: 0;
  /* Redondea esquinas. */
  border-radius: 20px;
  /* Define el tipo de caja visual. */
  display: block;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame::after. */
.youtube-frame::after {
  /* Inserta una capa para mejorar el contraste del play. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta todos los lados posicionados. */
  inset: 0;
  /* Define el fondo. */
  background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.36));
  /* Evita interaccion con la capa. */
  pointer-events: none;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Oculta la capa decorativa cuando el reproductor esta cargado. */
.youtube-frame:has(iframe)::after {
  /* Oculta la capa para no tapar el reproductor. */
  display: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame:hover .youtube-thumb. */
.youtube-frame:hover .youtube-thumb {
  /* Amplia un poco la miniatura al pasar el raton. */
  transform: scale(1.04);
  /* Ilumina la miniatura al pasar el raton. */
  filter: brightness(1.08);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-play. */
.youtube-play {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Centra el boton verticalmente. */
  top: 50%;
  /* Centra el boton horizontalmente. */
  left: 50%;
  /* Aplica una transformacion visual. */
  transform: translate(-50%, -50%);
  /* Controla la capa visual. */
  z-index: 2;
  /* Define el color de fondo. */
  background-color: rgba(255, 255, 255, 0.9);
  /* Define el color del texto o icono. */
  color: #111;
  /* Define borde del elemento. */
  border: 2px solid rgba(255, 255, 255, 0.65);
  /* Define el cursor al pasar encima. */
  cursor: pointer;
  /* Quita decoracion nativa del boton. */
  appearance: none;
  /* Redondea el boton. */
  border-radius: 50%;
  /* Define el ancho. */
  width: 4.8rem;
  /* Define la altura. */
  height: 4.8rem;
  /* Define el tipo de caja visual. */
  display: inline-flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el tamano del texto. */
  font-size: 2.8rem;
  /* Anade sombra visual. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  /* Anade transiciones suaves. */
  transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  /* Lanza una entrada suave del boton. */
  animation: youtube-play-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
/* Cierra el bloque de estilos. */
}

/* Define la animacion del boton play de YouTube. */
@keyframes youtube-play-in {
  /* Define el estado inicial del boton. */
  from {
    /* Mantiene el boton visible desde el principio. */
    opacity: 1;
    /* Reduce y centra el boton antes de aparecer. */
    transform: translate(-50%, calc(-50% + 14px)) scale(0.86);
  /* Cierra el estado inicial. */
  }

  /* Define el estado final del boton. */
  to {
    /* Devuelve el boton a su tamano normal. */
    transform: translate(-50%, -50%) scale(1);
  /* Cierra el estado final. */
  }
/* Cierra la animacion del boton play. */
}

/* Abre estilos para .youtube-play:hover. */
.youtube-play:hover {
  /* Define el color de fondo. */
  background-color: #ff0033;
  /* Define el color del texto o icono. */
  color: white;
  /* Aplica una transformacion visual. */
  transform: translate(-50%, -50%) scale(1.08);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame-main. */
.youtube-frame-main {
  /* Limita el ancho maximo. */
  max-width: 1280px;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .youtube-frame-small. */
.youtube-frame-small {
  /* Limita el ancho maximo. */
  max-width: 560px;
  /* Define comportamiento flexible. */
  flex: 1 1 320px;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .single-container. */
.single-container {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define separacion entre elementos. */
  gap: 1rem;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define el ancho. */
  width: min(100%, 1320px);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .container-old. */
.container-old {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define separacion entre elementos. */
  gap: 1rem;
  /* Define la direccion de elementos flex. */
  flex-direction: row;
  /* Permite salto de elementos flex. */
  flex-wrap: wrap;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define el ancho. */
  width: 100%;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos. */
#conciertos {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Controla el desbordamiento. */
  overflow: hidden;
  /* Define la altura minima. */
  min-height: 80vh;
  /* Define el color de fondo. */
  background-color: black;
  /* Muestra una foto de la banda detras de conciertos. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.62)), url("../assets/images/gallery/DSCF1440.jpg");
  /* Ajusta la foto para cubrir la seccion. */
  background-size: cover;
  /* Centra la foto de fondo. */
  background-position: center;
  /* Mantiene el fondo estable durante el scroll. */
  background-attachment: scroll;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el espacio interior. */
  padding: 6rem 1rem 4rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos > *. */
#conciertos > * {
  /* Coloca el contenido por encima del fondo. */
  position: relative;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos::before. */
#conciertos::before {
  /* Inserta un degradado para suavizar la entrada a conciertos. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 8rem;
  /* Crea una transicion oscura entre imagenes. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
  /* Evita interaccion con el degradado. */
  pointer-events: none;
  /* Controla la capa visual. */
  z-index: 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-container. */
.shows-container {
  /* Define el ancho. */
  width: min(100%, 1040px);
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-container h2. */
.shows-container h2 {
  /* Define el tamano del texto. */
  font-size: 3rem;
  /* Define el color del texto o icono. */
  color: white;
  /* Define margen inferior. */
  margin-bottom: 0.35rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-status. */
.shows-status {
  /* Define el tamano del texto. */
  font-size: 1.2rem;
  /* Define la transparencia. */
  opacity: 0.72;
  /* Define margen inferior. */
  margin-bottom: 2rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-block. */
.shows-block {
  /* Define margen superior. */
  margin-top: 2rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos .shows-block. */
#conciertos .shows-block {
  /* Prepara cada bloque de conciertos para aparecer suave. */
  opacity: 0;
  /* Desplaza el bloque antes de entrar. */
  transform: translateY(24px);
  /* Anade transicion al bloque de conciertos. */
  transition: opacity 0.85s ease, transform 0.85s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos.is-visible .shows-block. */
#conciertos.is-visible .shows-block {
  /* Muestra el bloque al entrar la seccion. */
  opacity: 1;
  /* Devuelve el bloque a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos:target .shows-block. */
#conciertos:target .shows-block {
  /* Muestra los bloques si se llega desde el menu. */
  opacity: 1;
  /* Devuelve los bloques a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos.is-visible .shows-block:nth-of-type(2). */
#conciertos.is-visible .shows-block:nth-of-type(2) {
  /* Retrasa un poco el bloque de ultimo concierto. */
  transition-delay: 0.14s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-block-title. */
.shows-block-title {
  /* Define el tamano del texto. */
  font-size: 1.7rem;
  /* Define el color del texto o icono. */
  color: white;
  /* Define la transparencia. */
  opacity: 0.85;
  /* Define margen inferior. */
  margin-bottom: 1rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-empty. */
.shows-empty {
  /* Define borde del elemento. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* Redondea esquinas. */
  border-radius: 8px;
  /* Define el color de fondo. */
  background-color: rgba(255, 255, 255, 0.04);
  /* Define el espacio interior. */
  padding: 1.2rem;
  /* Define el tamano del texto. */
  font-size: 1.25rem;
  /* Define la transparencia. */
  opacity: 0.75;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos .shows-empty. */
#conciertos .shows-empty {
  /* Prepara el aviso de proximas fechas para entrada suave. */
  transform: translateY(12px);
  /* Anade transicion al aviso. */
  transition: opacity 0.85s ease, transform 0.85s ease, border-color 0.4s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos.is-visible .shows-empty. */
#conciertos.is-visible .shows-empty {
  /* Ilumina un poco el aviso al aparecer. */
  border-color: rgba(255, 255, 255, 0.34);
  /* Devuelve el aviso a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shows-list. */
.shows-list {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define separacion entre elementos. */
  gap: 1rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-item. */
.show-item {
  /* Define el tipo de caja visual. */
  display: grid;
  /* Define columnas de la cuadricula. */
  grid-template-columns: 120px 1fr auto;
  /* Define separacion entre elementos. */
  gap: 1.5rem;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el espacio interior. */
  padding: 1.2rem;
  /* Define borde del elemento. */
  border: 1px solid rgba(255, 255, 255, 0.38);
  /* Redondea esquinas. */
  border-radius: 8px;
  /* Define el color de fondo. */
  background-color: rgba(255, 255, 255, 0.06);
  /* Anade sombra visual. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  /* Prepara la fila para aparecer con la seccion. */
  opacity: 0;
  /* Desplaza la fila antes de aparecer. */
  transform: translateY(20px);
  /* Anade transiciones suaves a la fila. */
  transition: opacity 0.75s ease, transform 0.75s ease;
  /* Evita parpadeos durante animaciones. */
  backface-visibility: hidden;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos.is-visible .show-item. */
#conciertos.is-visible .show-item {
  /* Muestra la fila de concierto. */
  opacity: 1;
  /* Devuelve la fila a su posicion natural. */
  transform: translateY(0);
  /* Retrasa la fila para crear entrada escalonada. */
  transition-delay: 0.12s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos:target .show-item. */
#conciertos:target .show-item {
  /* Muestra la fila si se llega desde el menu. */
  opacity: 1;
  /* Devuelve la fila a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-date. */
.show-date {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define borde del elemento. */
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  /* Define el espacio interior. */
  padding-right: 1rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-day. */
.show-day {
  /* Define el tamano del texto. */
  font-size: 3rem;
  /* Define la altura de linea. */
  line-height: 0.9;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-month. */
.show-month {
  /* Define el tamano del texto. */
  font-size: 1.4rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-year. */
.show-year {
  /* Define el tamano del texto. */
  font-size: 1rem;
  /* Define la transparencia. */
  opacity: 0.7;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-details. */
.show-details {
  /* Alinea el texto. */
  text-align: left;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-city. */
.show-city {
  /* Define el tamano del texto. */
  font-size: 1.1rem;
  /* Define la transparencia. */
  opacity: 0.7;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-details h3. */
.show-details h3 {
  /* Define el tamano del texto. */
  font-size: 2rem;
  /* Define el color del texto o icono. */
  color: white;
  /* Define margen exterior. */
  margin: 0.2rem 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-details p. */
.show-details p {
  /* Define el tamano del texto. */
  font-size: 1.1rem;
  /* Define la transparencia. */
  opacity: 0.8;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-actions. */
.show-actions {
  /* Ordena el boton y enlace del concierto. */
  display: flex;
  /* Apila acciones para mantener la fila compacta. */
  flex-direction: column;
  /* Alinea acciones al centro. */
  align-items: center;
  /* Define separacion entre acciones. */
  gap: 0.55rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-ticket. */
.show-ticket {
  /* Define borde del elemento. */
  border: 2px solid white;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el espacio interior. */
  padding: 0.75rem 1.25rem;
  /* Define el tamano del texto. */
  font-size: 1.25rem;
  /* Alinea el texto. */
  text-align: center;
  /* Anade transiciones suaves. */
  transition: background-color 0.4s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos.is-visible .show-ticket. */
#conciertos.is-visible .show-ticket {
  /* Lanza una entrada breve del estado de tickets. */
  animation: ticket-pop 0.75s ease 0.48s both;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #conciertos:target .show-ticket. */
#conciertos:target .show-ticket {
  /* Lanza la entrada si se llega desde el menu. */
  animation: ticket-pop 0.75s ease 0.48s both;
/* Cierra el bloque de estilos. */
}

/* Define la animacion del estado de tickets. */
@keyframes ticket-pop {
  /* Define el estado inicial de la animacion. */
  from {
    /* Reduce ligeramente el tamano inicial. */
    transform: scale(0.92);
  /* Cierra el estado inicial. */
  }

  /* Define el estado final de la animacion. */
  to {
    /* Devuelve el tamano normal. */
    transform: scale(1);
  /* Cierra el estado final. */
  }
/* Cierra la animacion del estado de tickets. */
}

/* Abre estilos para .show-ticket:hover. */
.show-ticket:hover {
  /* Define el color de fondo. */
  background-color: white;
  /* Define el color del texto o icono. */
  color: black;
  /* Aplica una transformacion visual. */
  transform: scale(1.05);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-ticket-disabled. */
.show-ticket-disabled {
  /* Reduce la opacidad del estado pasado. */
  opacity: 0.55;
  /* Evita interaccion visual de boton activo. */
  pointer-events: none;
  /* Define borde del estado pasado. */
  border-color: rgba(255, 255, 255, 0.55);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-ticket-disabled:hover. */
.show-ticket-disabled:hover {
  /* Mantiene fondo transparente en estado pasado. */
  background-color: transparent;
  /* Mantiene texto blanco en estado pasado. */
  color: white;
  /* Evita escala en estado pasado. */
  transform: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-reference. */
.show-reference {
  /* Define el tamano del texto. */
  font-size: 0.9rem;
  /* Define el color del enlace de referencia. */
  color: rgba(255, 255, 255, 0.65);
  /* Controla decoracion de enlaces. */
  text-decoration: underline;
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .show-reference:hover. */
.show-reference:hover {
  /* Aumenta visibilidad del enlace de referencia. */
  color: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .merch-tape. */
.merch-tape {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Controla el desbordamiento de la cinta. */
  overflow: hidden;
  /* Aisla la cinta para que no herede capas de otras secciones. */
  isolation: isolate;
  /* Define el color de fondo. */
  background-color: #111;
  /* Define borde superior de la cinta. */
  border-top: 2px solid rgba(255, 206, 58, 0.72);
  /* Define borde inferior de la cinta. */
  border-bottom: 2px solid rgba(255, 206, 58, 0.72);
  /* Anade sombra visual. */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
  /* Gira ligeramente la cinta para efecto caution. */
  transform: rotate(-1.2deg);
  /* Ajusta margen para compensar el giro. */
  margin: -1.5rem -1rem 1.5rem;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .merch-tape::before. */
.merch-tape::before {
  /* Inserta franjas diagonales sobre la cinta. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta todos los lados posicionados. */
  inset: 0;
  /* Define el fondo con rayas tipo caution. */
  background: repeating-linear-gradient(135deg, rgba(255, 206, 58, 0.82) 0 18px, rgba(255, 206, 58, 0.82) 18px 34px, rgba(0, 0, 0, 0.7) 34px 50px, rgba(0, 0, 0, 0.7) 50px 68px);
  /* Define la transparencia. */
  opacity: 0.48;
  /* Evita interaccion con la capa. */
  pointer-events: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .merch-tape-track. */
.merch-tape-track {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Evita saltos de linea en la cinta. */
  white-space: nowrap;
  /* Define el ancho necesario para animacion continua. */
  width: max-content;
  /* Define separacion entre mensajes. */
  gap: 2.4rem;
  /* Define el espacio interior. */
  padding: 0.85rem 0;
  /* Aplica una animacion. */
  animation: merch-tape-scroll 22s linear infinite;
  /* Avisa al navegador del movimiento horizontal. */
  will-change: transform;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .merch-tape-track span. */
.merch-tape-track span {
  /* Define el tipo de caja visual. */
  display: inline-flex;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define separacion entre icono y texto. */
  gap: 0.75rem;
  /* Define el color del texto o icono. */
  color: rgba(255, 206, 58, 1);
  /* Define el tamano del texto. */
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  /* Define espacio entre letras. */
  letter-spacing: 0.04em;
  /* Anade sombra al texto. */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.95), -1px -1px 0 rgba(255, 255, 255, 0.18);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .merch-tape-track i. */
.merch-tape-track i {
  /* Define el color del icono triangular. */
  color: rgba(255, 206, 58, 1);
  /* Define el tamano del icono. */
  font-size: 1.2em;
  /* Anade sombra al icono. */
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.95));
/* Cierra el bloque de estilos. */
}

/* Define la animacion de la cinta de merch. */
@keyframes merch-tape-scroll {
  /* Define el estado inicial de la cinta. */
  from {
    /* Empieza la cinta en su posicion inicial. */
    transform: translateX(0);
  /* Cierra el estado inicial. */
  }

  /* Define el estado final de la cinta. */
  to {
    /* Desplaza media pista para bucle continuo. */
    transform: translateX(-50%);
  /* Cierra el estado final. */
  }
/* Cierra la animacion de la cinta de merch. */
}

/* Abre estilos para #listen. */
#listen {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la altura. */
  height: 100vh;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .listen-cont. */
.listen-cont {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: row;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Define separacion entre elementos. */
  gap: 1rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .ep-video. */
.ep-video {
  /* Redondea esquinas. */
  border-radius: 20px;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #Merch. */
#Merch {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la altura. */
  height: 100vh;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea el texto. */
  text-align: center;
  /* Define el color de fondo. */
  background-color: black;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .cont-merch. */
.cont-merch {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define separacion entre elementos. */
  gap: 2rem;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Alinea el texto. */
  text-align: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .cont-items. */
.cont-items {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: row;
  /* Define separacion entre elementos. */
  gap: 2rem;
  /* Permite salto de elementos flex. */
  flex-wrap: wrap;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .cont-merch img. */
.cont-merch img {
  /* Limita el ancho maximo. */
  max-width: 100%;
  /* Define la altura. */
  height: auto;
  /* Define el ancho. */
  width: 20rem;
  /* Define el color de fondo. */
  background-color: grey;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Redondea esquinas. */
  border-radius: 10px;
  /* Anade transiciones suaves. */
  transition: transform 0.3s ease;
  /* Anade sombra visual. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .cont-merch img:hover. */
.cont-merch img:hover {
  /* Aplica una transformacion visual. */
  transform: scale(1.1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shop-bottom. */
.shop-bottom {
  /* Define borde del elemento. */
  border: 2px solid white;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el espacio interior. */
  padding: 1rem;
  /* Define el tamano del texto. */
  font-size: 1.6rem;
  /* Alinea el texto. */
  text-align: center;
  /* Anade transiciones suaves. */
  transition: background-color 0.4s ease, color 0.3s ease, transform 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .shop-bottom:hover. */
.shop-bottom:hover {
  /* Define el color del texto o icono. */
  color: black;
  /* Define el color de fondo. */
  background-color: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .cont-merch:hover. */
.cont-merch:hover {
  /* Define el color del texto o icono. */
  color: grey;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #contacto. */
#contacto {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Controla el desbordamiento. */
  overflow: hidden;
  /* Define la altura minima. */
  min-height: 100vh;
  /* Define el color de fondo. */
  background-color: black;
  /* Muestra una foto de la banda detras de contacto. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.66)), url("../assets/images/gallery/DSCF1409.jpg");
  /* Ajusta la foto para cubrir la seccion. */
  background-size: cover;
  /* Centra la foto de fondo. */
  background-position: center;
  /* Mantiene el fondo estable durante el scroll. */
  background-attachment: scroll;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el espacio interior. */
  padding: 6rem 1rem 4rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #contacto > *. */
#contacto > * {
  /* Coloca el contenido por encima del fondo. */
  position: relative;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #contacto::before. */
#contacto::before {
  /* Inserta un degradado para suavizar la entrada a contacto. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 8rem;
  /* Crea una transicion oscura entre secciones. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
  /* Evita interaccion con el degradado. */
  pointer-events: none;
  /* Controla la capa visual. */
  z-index: 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-container. */
.contact-container {
  /* Define el ancho. */
  width: min(100%, 1040px);
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define separacion entre elementos. */
  gap: 1.3rem;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form-block. */
.contact-form-block {
  /* Define el ancho. */
  width: min(100%, 620px);
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define el espacio interior. */
  padding: 2.4rem;
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Recorta brillos internos del formulario. */
  overflow: hidden;
  /* Define borde del elemento. */
  border: 1px solid rgba(255, 255, 255, 0.34);
  /* Redondea esquinas. */
  border-radius: 8px;
  /* Define el color de fondo. */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  /* Anade sombra visual. */
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  /* Aplica desenfoque al fondo del formulario. */
  backdrop-filter: blur(8px);
  /* Prepara el formulario para aparecer con scroll. */
  opacity: 0;
  /* Desplaza el formulario antes de entrar. */
  transform: translateY(26px) scale(0.985);
  /* Anade transicion suave al formulario. */
  transition: opacity 0.75s ease, transform 0.75s ease;
  /* Evita parpadeos durante animaciones. */
  backface-visibility: hidden;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #contacto.is-visible .contact-form-block. */
#contacto.is-visible .contact-form-block {
  /* Muestra el formulario al entrar en pantalla. */
  opacity: 1;
  /* Devuelve el formulario a su posicion natural. */
  transform: translateY(0) scale(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #contacto:target .contact-form-block. */
#contacto:target .contact-form-block {
  /* Muestra el formulario si se llega desde el menu. */
  opacity: 1;
  /* Devuelve el formulario a su posicion natural. */
  transform: translateY(0) scale(1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form-block::before. */
.contact-form-block::before {
  /* Inserta una capa decorativa dentro del formulario. */
  content: '';
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 4px;
  /* Define el fondo. */
  background: linear-gradient(90deg, rgba(125, 205, 253, 0), rgba(125, 205, 253, 0.9), rgba(255, 255, 255, 0));
  /* Evita interaccion con la linea decorativa. */
  pointer-events: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-container h2. */
.contact-container h2 {
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tamano del texto. */
  font-size: 2.4rem;
  /* Define espacio entre letras. */
  letter-spacing: 0;
  /* Aplica la propiedad margin-bottom al elemento. */
  margin-bottom: 1.4rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form. */
.contact-form {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define separacion entre elementos. */
  gap: 0.8rem;
  /* Define el ancho. */
  width: 100%;
  /* Alinea el texto. */
  text-align: left;
/* Cierra el bloque de estilos. */
}

/* Aplica entrada suave a controles del formulario. */
.contact-form label,
/* Aplica entrada suave a campos del formulario. */
.contact-form input,
/* Aplica entrada suave al mensaje del formulario. */
.contact-form textarea,
/* Aplica entrada suave al boton del formulario. */
.contact-form button,
/* Aplica entrada suave al estado del formulario. */
.contact-form .form-status {
  /* Prepara controles para entrada escalonada. */
  opacity: 0;
  /* Desplaza los controles antes de entrar. */
  transform: translateY(12px);
  /* Anade transicion de entrada a controles. */
  transition: opacity 0.65s ease, transform 0.65s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.4s ease, color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Aplica visibilidad a controles cuando contacto entra. */
#contacto.is-visible .contact-form label,
/* Aplica visibilidad a campos cuando contacto entra. */
#contacto.is-visible .contact-form input,
/* Aplica visibilidad al mensaje cuando contacto entra. */
#contacto.is-visible .contact-form textarea,
/* Aplica visibilidad al boton cuando contacto entra. */
#contacto.is-visible .contact-form button,
/* Aplica visibilidad al estado cuando contacto entra. */
#contacto.is-visible .contact-form .form-status {
  /* Muestra cada control del formulario. */
  opacity: 1;
  /* Devuelve cada control a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Aplica visibilidad a controles si se llega desde el menu. */
#contacto:target .contact-form label,
/* Aplica visibilidad a campos si se llega desde el menu. */
#contacto:target .contact-form input,
/* Aplica visibilidad al mensaje si se llega desde el menu. */
#contacto:target .contact-form textarea,
/* Aplica visibilidad al boton si se llega desde el menu. */
#contacto:target .contact-form button,
/* Aplica visibilidad al estado si se llega desde el menu. */
#contacto:target .contact-form .form-status {
  /* Muestra cada control del formulario. */
  opacity: 1;
  /* Devuelve cada control a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el primer label del formulario visible. */
#contacto.is-visible .contact-form label:nth-of-type(1) {
  /* Retrasa ligeramente la entrada del primer label. */
  transition-delay: 0.14s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el primer campo del formulario visible. */
#contacto.is-visible .contact-form input:nth-of-type(4) {
  /* Retrasa ligeramente la entrada del primer campo. */
  transition-delay: 0.2s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el segundo label del formulario visible. */
#contacto.is-visible .contact-form label:nth-of-type(2) {
  /* Retrasa ligeramente la entrada del segundo label. */
  transition-delay: 0.26s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el segundo campo del formulario visible. */
#contacto.is-visible .contact-form input:nth-of-type(5) {
  /* Retrasa ligeramente la entrada del segundo campo. */
  transition-delay: 0.32s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el tercer label del formulario visible. */
#contacto.is-visible .contact-form label:nth-of-type(3) {
  /* Retrasa ligeramente la entrada del tercer label. */
  transition-delay: 0.38s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el mensaje del formulario visible. */
#contacto.is-visible .contact-form textarea {
  /* Retrasa ligeramente la entrada del mensaje. */
  transition-delay: 0.44s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para el boton del formulario visible. */
#contacto.is-visible .contact-form button {
  /* Retrasa ligeramente la entrada del boton. */
  transition-delay: 0.52s;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para campos visibles del formulario al pasar el raton. */
#contacto.is-visible .contact-form input:hover,
/* Abre estilos para mensaje visible del formulario al pasar el raton. */
#contacto.is-visible .contact-form textarea:hover {
  /* Mantiene el pequeno movimiento al pasar el raton. */
  transform: translateY(-1px);
/* Cierra el bloque de estilos. */
}

/* Aplica estilos a etiquetas del formulario. */
.contact-form label,
/* Aplica la propiedad .contact-info p, al elemento. */
.contact-info p,
/* Abre estilos para .contact-info a. */
.contact-info a {
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tamano del texto. */
  font-size: 1.2rem;
  /* Define espacio entre letras. */
  letter-spacing: 0.04em;
/* Cierra el bloque de estilos. */
}

/* Aplica estilos a campos del formulario. */
.contact-form input,
/* Aplica estilos al mensaje del formulario. */
.contact-form textarea {
  /* Define el ancho. */
  width: 100%;
  /* Define el color de fondo. */
  background-color: rgba(0, 0, 0, 0.48);
  /* Define el color del texto o icono. */
  color: white;
  /* Define borde del elemento. */
  border: 1px solid rgba(255, 255, 255, 0.45);
  /* Redondea esquinas. */
  border-radius: 6px;
  /* Define el espacio interior. */
  padding: 0.9rem 1rem;
  /* Define la fuente del texto. */
  font-family: "Montserrat", sans-serif;
  /* Define el tamano del texto. */
  font-size: 1rem;
  /* Permite redimensionar el campo. */
  resize: vertical;
  /* Anade transiciones suaves. */
  transition: opacity 0.65s ease, transform 0.65s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form input:hover. */
.contact-form input:hover,
/* Abre estilos para .contact-form textarea:hover. */
.contact-form textarea:hover {
  /* Sube un poco el campo al pasar el raton. */
  transform: translateY(-1px);
  /* Ilumina el borde del campo. */
  border-color: rgba(255, 255, 255, 0.72);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form input:focus. */
.contact-form input:focus,
/* Abre estilos para .contact-form textarea:focus. */
.contact-form textarea:focus {
  /* Quita el contorno por defecto. */
  outline: none;
  /* Ilumina el borde al escribir. */
  border-color: white;
  /* Ilumina suavemente el campo activo. */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
  /* Oscurece el campo activo para mejorar lectura. */
  background-color: rgba(0, 0, 0, 0.62);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form button. */
.contact-form button {
  /* Alinea un elemento dentro de flex. */
  align-self: center;
  /* Define borde del elemento. */
  border: 2px solid white;
  /* Redondea esquinas. */
  border-radius: 6px;
  /* Define el color de fondo. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(170, 170, 170, 0.18), rgba(255, 255, 255, 0.08));
  /* Define el color del texto o icono. */
  color: white;
  /* Define el espacio interior. */
  padding: 0.85rem 2rem;
  /* Define margen superior. */
  margin-top: 0.8rem;
  /* Define el tamano del texto. */
  font-size: 1.4rem;
  /* Define el cursor al pasar encima. */
  cursor: pointer;
  /* Anade transiciones suaves. */
  transition: opacity 0.65s ease, transform 0.28s ease, background 0.35s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form button:hover. */
.contact-form button:hover {
  /* Define el color de fondo. */
  background: linear-gradient(135deg, white, rgba(205, 205, 205, 0.92));
  /* Define el color del texto o icono. */
  color: black;
  /* Ilumina el borde del boton. */
  border-color: rgba(235, 235, 235, 1);
  /* Aplica una transformacion visual. */
  transform: translateY(-2px) scale(1.06);
  /* Anade sombra al boton activo. */
  box-shadow: 0 14px 32px rgba(255, 255, 255, 0.18), 0 8px 22px rgba(0, 0, 0, 0.35);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-form button:active. */
.contact-form button:active {
  /* Reduce el boton al pulsarlo. */
  transform: translateY(0) scale(1.01);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .form-status. */
.form-status {
  /* Define la altura minima para evitar saltos al mostrar mensaje. */
  min-height: 1.4rem;
  /* Define margen superior. */
  margin-top: 0.3rem;
  /* Alinea el texto. */
  text-align: center;
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tamano del texto. */
  font-size: 1rem;
  /* Define espacio entre letras. */
  letter-spacing: 0.03em;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .form-status.is-success. */
.form-status.is-success {
  /* Define el color del mensaje correcto. */
  color: rgba(150, 255, 190, 1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .form-status.is-error. */
.form-status.is-error {
  /* Define el color del mensaje de error. */
  color: rgba(255, 170, 170, 1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-info. */
.contact-info {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Define separacion entre elementos. */
  gap: 0.55rem;
  /* Define el ancho. */
  width: min(100%, 620px);
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define margen superior. */
  margin-top: 0.2rem;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-info > div. */
.contact-info > div {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Alinea el texto. */
  text-align: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-info p. */
.contact-info p {
  /* Evita desbordes de correos largos. */
  overflow-wrap: anywhere;
/* Cierra el bloque de estilos. */
}

/* Aplica la propiedad .contact-info a al elemento. */
.contact-info a {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Anade transiciones al correo y redes. */
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-info p a:hover. */
.contact-info p a:hover {
  /* Ilumina el correo al pasar el raton. */
  color: rgba(235, 235, 235, 1);
  /* Anade brillo suave al correo. */
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-social. */
.contact-social {
  /* Define el tipo de caja visual. */
  display: inline-flex;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define el tamano del texto. */
  font-size: 1.4rem;
  /* Anade transiciones suaves. */
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-socials. */
.contact-socials {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define separacion entre elementos. */
  gap: 1rem;
  /* Define margen superior. */
  margin-top: 1rem;
  /* Permite salto de elementos flex. */
  flex-wrap: wrap;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define la direccion de elementos flex. */
  flex-direction: row;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para .contact-social:hover. */
.contact-social:hover {
  /* Aplica una transformacion visual. */
  transform: translateY(-2px) scale(1.12);
  /* Cambia el color del icono a blanco complementario. */
  color: white;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para html. */
html {
  /* Aplica la propiedad scroll-behavior al elemento. */
  scroll-behavior: smooth;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para usuarios con movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  /* Abre estilos para html. */
  html {
    /* Quita el desplazamiento animado si el usuario lo prefiere. */
    scroll-behavior: auto;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para secciones animadas por scroll. */
  .scroll-reveal {
    /* Muestra la seccion sin animacion. */
    opacity: 1;
    /* Quita desplazamientos visuales. */
    transform: none;
    /* Quita transiciones para reducir movimiento. */
    transition: none;
  /* Cierra el bloque de estilos. */
  }

  /* Aplica movimiento reducido a elementos internos. */
  .inner-reveal,
  /* Aplica movimiento reducido a miniaturas de video. */
  #new-single .youtube-frame,
  /* Aplica movimiento reducido al boton de video. */
  #new-single .youtube-play,
  /* Aplica movimiento reducido a la cinta de merch. */
  .merch-tape-track,
  /* Aplica movimiento reducido a bloques de conciertos. */
  #conciertos .shows-block,
  /* Aplica movimiento reducido a filas de conciertos. */
  #conciertos .show-item,
  /* Aplica movimiento reducido al formulario. */
  #contacto .contact-form-block,
  /* Aplica movimiento reducido a controles del formulario. */
  #contacto .contact-form label,
  /* Aplica movimiento reducido a campos del formulario. */
  #contacto .contact-form input,
  /* Aplica movimiento reducido al mensaje del formulario. */
  #contacto .contact-form textarea,
  /* Aplica movimiento reducido al boton del formulario. */
  #contacto .contact-form button,
  /* Aplica movimiento reducido al estado del formulario. */
  #contacto .contact-form .form-status,
  /* Aplica movimiento reducido al texto del footer. */
  footer p,
  /* Aplica movimiento reducido a iconos del footer. */
  footer .redes-footer a {
    /* Muestra los elementos sin animacion. */
    opacity: 1;
    /* Quita desplazamientos visuales. */
    transform: none;
    /* Quita transiciones internas. */
    transition: none;
    /* Quita animaciones internas. */
    animation: none;
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos para usuarios con movimiento reducido. */
}

/* Abre estilos para h1. */
h1 {
  /* Define el tamano del texto. */
  font-size: 5rem;
  /* Define el color del texto o icono. */
  color: grey;
/* Cierra el bloque de estilos. */
}


/* Abre estilos para footer. */
footer {
  /* Define el color de fondo. */
  background: linear-gradient(180deg, #101010 0%, #050505 100%);
  /* Define el color del texto o icono. */
  color: white;
  /* Define el espacio interior. */
  padding: 2rem 1rem 2.2rem;
  /* Alinea el texto. */
  text-align: center;
  /* Define el tamano del texto. */
  font-size: 0.875rem;
  /* Aplica la propiedad border-top al elemento. */
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  /* Define el tipo de caja visual. */
  display: flex;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la altura minima. */
  min-height: 9rem;
  /* Anade sombra visual. */
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.72);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer p. */
footer p {
  /* Define margen inferior. */
  margin-bottom: 1rem;
  /* Define el tamano del texto. */
  font-size: 1rem;
  /* Define la transparencia inicial. */
  opacity: 0;
  /* Prepara el texto del footer para entrada suave. */
  transform: translateY(10px);
  /* Anade transicion suave al texto. */
  transition: opacity 0.65s ease, transform 0.65s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer.is-visible p. */
footer.is-visible p {
  /* Muestra el texto del footer. */
  opacity: 0.82;
  /* Devuelve el texto a su posicion natural. */
  transform: translateY(0);
/* Cierra el bloque de estilos. */
}


/* Abre estilos para footer .redes. */
footer .redes {
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Define separacion entre elementos. */
  gap: 1.25rem;
  /* Define el margen exterior. */
  margin: 0;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer .redes .icon. */
footer .redes .icon {
  /* Define el color del texto o icono. */
  color: white;
  /* Define el tamano del texto. */
  font-size: 1.35rem;
  /* Anade transiciones suaves. */
  transition: color 0.3s ease, transform 0.3s ease;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer a. */
footer a {
  /* Define el color del texto o icono. */
  color: white;
  /* Controla decoracion de enlaces. */
  text-decoration: none;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para footer a:hover. */
footer a:hover {
  /* Define el color del texto o icono. */
  color: rgba(225, 225, 225, 1);
/* Cierra el bloque de estilos. */
}

/* Abre estilos para #galeria. */
#galeria {
  background-image: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.62)), url("../assets/images/gallery/HOMESICK 2025.jpeg");
  /* Ajusta la foto para cubrir la seccion. */
  background-size: cover;
  /* Centra la foto de fondo. */
  background-position: center;
  /* Mantiene el fondo fijo en pantallas grandes. */
  /* Define el tipo de caja visual. */
  display: flex;
  /* Alinea elementos en el eje principal. */
  justify-content: center;
  /* Alinea elementos en el eje secundario. */
  align-items: center;
  /* Define la altura. */
  height: 100vh;
  /* Define la direccion de elementos flex. */
  flex-direction: column;
  /* Alinea el texto. */
  text-align: center;
  /* Define el color de fondo. */
  background-color: black;
/* Cierra el bloque de estilos. */
}


/* Abre estilos para .slideshow. */
.slideshow {
  /* Define el modo de posicionamiento. */
  position: relative;
  /* Define el ancho. */
  width: 100%;
  /* Limita el ancho maximo. */
  max-width: 1200px;
  /* Define el margen exterior. */
  margin: auto;
  /* Controla el desbordamiento. */
  overflow: hidden;
  /* Define la altura. */
  height: 500px;
  /* Redondea esquinas. */
  border-radius: 15px;
  /* Anade sombra visual. */
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  /* Define el color de fondo. */
  background-color: #000;
/* Cierra el bloque de estilos. */
}


/* Abre estilos para .slideshow img. */
.slideshow img {
  /* Define el modo de posicionamiento. */
  position: absolute;
  /* Ajusta la posicion superior. */
  top: 0;
  /* Ajusta la posicion izquierda. */
  left: 0;
  /* Define el ancho. */
  width: 100%;
  /* Define la altura. */
  height: 100%;
  /* Ajusta recorte visual del contenido. */
  object-fit: cover;
  /* Define la transparencia. */
  opacity: 0;
  /* Anade transiciones suaves. */
  transition: opacity 1.5s ease-in-out;
  /* Controla la capa visual. */
  z-index: 0;
/* Cierra el bloque de estilos. */
}


/* Abre estilos para .slideshow img.active. */
.slideshow img.active {
  /* Define la transparencia. */
  opacity: 1;
  /* Controla la capa visual. */
  z-index: 1;
/* Cierra el bloque de estilos. */
}

/* Abre estilos para @media (max-width: 900px). */
@media (max-width: 900px) {
  /* Abre estilos para header. */
  header {
    /* Alinea elementos en el eje secundario. */
    align-items: flex-start;
    /* Define separacion entre elementos. */
    gap: 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav. */
  .nav {
    /* Permite salto de elementos flex. */
    flex-wrap: wrap;
    /* Define separacion entre elementos. */
    gap: 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #homesick. */
  #homesick {
    /* Define el ancho. */
    width: min(90vw, 50rem);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-container. */
  .contact-container {
    /* Define separacion entre elementos. */
    gap: 3rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-info. */
  .contact-info {
    /* Define una sola columna en pantallas medianas. */
    grid-template-columns: 1fr;
  /* Cierra el bloque de estilos. */
  }
/* Cierra el bloque de estilos. */
}

/* Abre estilos para @media (max-width: 520px). */
@media (max-width: 520px) {
  /* Abre estilos para header. */
  header {
    /* Define el espacio interior. */
    padding: 0.8rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #logohomesick. */
  #logohomesick {
    /* Define el ancho. */
    width: 3rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav .elento. */
  .nav .elento {
    /* Define el tamano del texto. */
    font-size: 1.1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .redes. */
  .redes {
    /* Define separacion entre elementos. */
    gap: 1.4rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .icon. */
  .icon {
    /* Define el tamano del texto. */
    font-size: 2.4rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-container h2. */
  .contact-container h2 {
    /* Define el tamano del texto. */
    font-size: 2rem;
  /* Cierra el bloque de estilos. */
  }

  /* Aplica la propiedad .contact-info p, al elemento. */
  .contact-info p,
  /* Abre estilos para .contact-info a. */
  .contact-info a {
    /* Define el tamano del texto. */
    font-size: 1rem;
  /* Cierra el bloque de estilos. */
  }
/* Cierra el bloque de estilos. */
}

/* Abre estilos responsive para pantallas grandes. */
@media (min-width: 1400px) {
  /* Abre estilos para .single-container. */
  .single-container {
    /* Limita el ancho en monitores grandes. */
    width: min(100%, 1240px);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .slideshow. */
  .slideshow {
    /* Aumenta la altura de galeria en escritorio amplio. */
    height: 62vh;
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos responsive para pantallas grandes. */
}

/* Abre estilos responsive para tablets. */
@media (max-width: 1024px) {
  /* Abre estilos para header. */
  header {
    /* Reduce el espacio de la cabecera. */
    padding: 0.85rem 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav .elento. */
  .nav .elento {
    /* Reduce el tamano de enlaces de menu. */
    font-size: 1.35rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #new-single. */
  #new-single {
    /* Ajusta el espacio vertical de videos. */
    padding: 5rem 1rem 2.5rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .youtube-frame-small. */
  .youtube-frame-small {
    /* Permite que los videos secundarios ocupen media fila. */
    flex-basis: min(100%, 420px);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .slideshow. */
  .slideshow {
    /* Ajusta la altura de galeria para tablets. */
    height: min(62vh, 480px);
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos responsive para tablets. */
}

/* Abre estilos responsive para moviles. */
@media (max-width: 700px) {
  /* Abre estilos para .merch-tape. */
  .merch-tape {
    /* Reduce el giro de la cinta en movil. */
    transform: rotate(-0.7deg);
    /* Ajusta margen de cinta en movil. */
    margin: -0.75rem -0.5rem 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .merch-tape-track. */
  .merch-tape-track {
    /* Ajusta velocidad de cinta en movil. */
    animation-duration: 18s;
    /* Reduce separacion entre mensajes en movil. */
    gap: 1.6rem;
    /* Ajusta espacio interior en movil. */
    padding: 0.7rem 0;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para header. */
  header {
    /* Mantiene logo y boton en la misma fila. */
    flex-direction: row;
    /* Centra los elementos de cabecera. */
    align-items: center;
    /* Separa logo y boton del menu. */
    justify-content: space-between;
    /* Define separacion compacta. */
    gap: 0.65rem;
    /* Mantiene fondo visible para lectura. */
    background-color: rgba(255, 255, 255, 0.96);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .menu-toggle. */
  .menu-toggle {
    /* Muestra el boton hamburguesa en movil. */
    display: flex;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav. */
  .nav {
    /* Oculta el menu cerrado en movil. */
    display: none;
    /* Ocupa todo el ancho de cabecera. */
    width: 100%;
    /* Ordena los enlaces en columna. */
    flex-direction: column;
    /* Centra los enlaces del menu. */
    align-items: center;
    /* Ajusta separacion entre enlaces. */
    gap: 0.75rem;
    /* Anade espacio superior del menu desplegado. */
    padding-top: 0.35rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav.active. */
  .nav.active {
    /* Muestra el menu abierto en movil. */
    display: flex;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav .elento. */
  .nav .elento {
    /* Ajusta los enlaces para pantallas estrechas. */
    font-size: clamp(1rem, 5vw, 1.25rem);
    /* Define el espacio interior de enlaces moviles. */
    padding: 0.15rem 0;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #index. */
  #index {
    /* Anade espacio para cabecera fija en movil. */
    padding: 7rem 1rem 2rem;
    /* Mantiene altura util sin cortes. */
    min-height: 100svh;
    /* Permite crecer si el contenido necesita espacio. */
    height: auto;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #homesick. */
  #homesick {
    /* Ajusta el logo principal al ancho disponible. */
    width: min(88vw, 28rem);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .redes. */
  .redes {
    /* Permite que los iconos bajen de linea. */
    flex-wrap: wrap;
    /* Centra los iconos. */
    justify-content: center;
    /* Ajusta separacion de iconos. */
    gap: 1.2rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .scroll-container. */
  .scroll-container {
    /* Reduce espacio superior del indicador. */
    margin-top: 3rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .scroll-arrow. */
  .scroll-arrow {
    /* Reduce la flecha en moviles. */
    width: 54px;
    /* Reduce la altura de la flecha en moviles. */
    height: 54px;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #new-single. */
  #new-single {
    /* Ajusta el espacio de la seccion de videos. */
    padding: 5rem 0.75rem 2rem;
    /* Evita problemas de fondo fijo en moviles. */
    background-attachment: scroll;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .single-container. */
  .single-container {
    /* Quita exceso de padding interior. */
    padding: 0;
    /* Usa todo el ancho disponible. */
    width: 100%;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .youtube-frame. */
  .youtube-frame {
    /* Reduce redondeo en pantallas pequenas. */
    border-radius: 12px;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .youtube-thumb. */
  .youtube-thumb {
    /* Igual redondeo que su contenedor. */
    border-radius: 12px;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .youtube-play. */
  .youtube-play {
    /* Reduce el ancho del boton en movil. */
    width: 3.9rem;
    /* Reduce la altura del boton en movil. */
    height: 3.9rem;
    /* Reduce el icono en movil. */
    font-size: 2.3rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .youtube-frame-small. */
  .youtube-frame-small {
    /* Hace que cada video secundario ocupe toda la fila. */
    flex-basis: 100%;
    /* Quita limite de ancho para movil. */
    max-width: 100%;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #contacto. */
  #contacto {
    /* Ajusta espacio interno de contacto en movil. */
    padding: 4.5rem 1rem 3rem;
    /* Evita problemas de fondo fijo en moviles. */
    background-attachment: scroll;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-form-block. */
  .contact-form-block {
    /* Reduce espacio interior de la caja del formulario. */
    padding: 1.4rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #conciertos. */
  #conciertos {
    /* Ajusta el espacio de conciertos en movil. */
    padding: 4.5rem 1rem 3rem;
    /* Evita problemas de fondo fijo en moviles. */
    background-attachment: scroll;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .show-item. */
  .show-item {
    /* Cambia la fila de concierto a una columna. */
    grid-template-columns: 1fr;
    /* Centra el contenido de concierto. */
    text-align: center;
    /* Reduce separacion de concierto. */
    gap: 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .show-date. */
  .show-date {
    /* Quita la linea lateral en movil. */
    border-right: 0;
    /* Anade linea inferior en movil. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    /* Ajusta espacio de fecha. */
    padding: 0 0 1rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .show-details. */
  .show-details {
    /* Centra el texto del concierto en movil. */
    text-align: center;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .show-ticket. */
  .show-ticket {
    /* Hace que el boton de entradas sea ancho completo. */
    width: 100%;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .show-actions. */
  .show-actions {
    /* Ocupa todo el ancho de la tarjeta movil. */
    width: 100%;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-info. */
  .contact-info {
    /* Reduce separacion en contacto. */
    gap: 0.55rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-info p. */
  .contact-info p {
    /* Permite cortar emails largos sin desbordar. */
    overflow-wrap: anywhere;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-socials. */
  .contact-socials {
    /* Mantiene las redes en horizontal con salto limpio. */
    flex-direction: row;
    /* Ajusta separacion de redes pequenas. */
    gap: 0.9rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #galeria. */
  #galeria {
    /* Ajusta altura de galeria para movil. */
    height: auto;
    /* Anade espacio vertical a la galeria. */
    padding: 3rem 0.75rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .slideshow. */
  .slideshow {
    /* Ajusta altura estable de galeria en movil. */
    height: min(62vh, 420px);
    /* Reduce redondeo de galeria. */
    border-radius: 10px;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para footer. */
  footer {
    /* Ajusta espacio de pie de pagina en movil. */
    padding: 1.7rem 0.8rem 1.9rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .redes-footer. */
  .redes-footer {
    /* Ajusta separacion de iconos del pie. */
    gap: 1rem;
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos responsive para moviles. */
}

/* Abre estilos responsive para moviles estrechos. */
@media (max-width: 380px) {
  /* Abre estilos para header. */
  header {
    /* Reduce aun mas el espacio de cabecera. */
    padding: 0.7rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .nav. */
  .nav {
    /* Reduce separacion del menu en pantallas muy estrechas. */
    gap: 0.65rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .icon. */
  .icon {
    /* Ajusta iconos para pantallas muy estrechas. */
    font-size: 2rem;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .contact-info. */
  .contact-info {
    /* Mantiene el correo de banda sin caja en pantallas estrechas. */
    gap: 0.5rem;
  /* Cierra el bloque de estilos. */
  }

  /* Aplica estilos a campos del formulario. */
  .contact-form input,
  /* Aplica estilos al mensaje del formulario. */
  .contact-form textarea {
    /* Reduce padding de campos en pantallas muy estrechas. */
    padding: 0.7rem;
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos responsive para moviles estrechos. */
}

/* Abre estilos responsive para moviles en horizontal. */
@media (max-height: 520px) and (orientation: landscape) {
  /* Abre estilos para #index. */
  #index {
    /* Deja respirar la portada en landscape bajo. */
    padding-top: 5rem;
    /* Evita cortes verticales en landscape bajo. */
    min-height: 120vh;
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para #homesick. */
  #homesick {
    /* Reduce logo de portada en landscape bajo. */
    width: min(54vw, 28rem);
  /* Cierra el bloque de estilos. */
  }

  /* Abre estilos para .scroll-container. */
  .scroll-container {
    /* Reduce espacio de la flecha en landscape bajo. */
    margin-top: 1.2rem;
  /* Cierra el bloque de estilos. */
  }
/* Cierra estilos responsive para moviles en horizontal. */
}