@charset "UTF-8";
/* CSS Document */

#slide1 {
  background-image: url("../img/eventos/la_roca/venue_la_roca_quarry_studios.jpg");
  font-size: 40px;
}

#slide2 {
  background-image: url("../img/eventos/foro_4/Foro4_venue_QuarryStudios_10.jpg");
}

#slide3 {
  background-image: url("../img/eventos/backlot/Backlot_venue_QuarryStudios_11.jpg");
}

#slide4 {
  background-image: url("../img/eventos/bar/Bar_venue_QuarryStudios_2.jpg");
}

.container {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide {
  position: sticky;
  top: 0;
  min-height: 100vh; /* Cambié 'height' por 'min-height' para evitar el recorte en dispositivos móviles */
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.2em;
  background-size: cover;
  background-position: center center;
}

.slide::before {
  content: ''; 
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1; 
}

.slide > * {
  position: relative;
  z-index: 2; /* Esto asegura que el contenido de la slide (texto, etc.) esté por encima de la capa negra */
}

.slide h1 {
  font-size: 5vw; /* Tamaño de fuente en función del ancho de la ventana */
  text-transform: uppercase;
  letter-spacing: -3px;
  transition: 990ms ease;
  font-variation-settings: "wght" 311;
  margin-bottom: 0.8rem;
  color: #FFFDF1;
  outline: none;
  text-align: center;
  font-family: "Orbitron";
  font-stretch: ultra-expanded;
}

/* Ajuste en la transición en pantallas más pequeñas */
@media (max-width: 768px) {
  .slide h1 {
    font-size: 15vw; /* Aumenta el tamaño del texto en pantallas más pequeñas */
    letter-spacing: -2px;
    transition: 500ms ease; /* Ajusta la transición para pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .slide h1 {
    font-size: 20vw; /* Aumenta aún más el tamaño del texto en pantallas pequeñas */
    letter-spacing: 0; /* Ajusta el espaciado de las letras */
  }
}

h1:hover {
  font-variation-settings: "wght" 582;
  letter-spacing: 1px;
}

.enlace {
  color: #FA7B24;
  text-decoration: none;
  background-color: transparent;
}

.enlace:hover {
  color: #FA7B24;
  cursor: pointer;
}

/* De forma predeterminada, oculta la imagen para smartphone */
.imagen-sm {
  display: none;
}

/* En pantallas grandes (PC), muestra la imagen de la PC y oculta la de smartphone */
@media (min-width: 768px) {
  .imagen-pc {
    display: block; /* Muestra la imagen de la PC */
  }
  .imagen-sm {
    display: none; /* Oculta la imagen de smartphone */
  }
}

/* En pantallas pequeñas (smartphone), muestra la imagen de smartphone y oculta la de PC */
@media (max-width: 767px) {
  .imagen-pc {
    display: none; /* Oculta la imagen de PC */
  }
  .imagen-sm {
    display: block; /* Muestra la imagen de smartphone */
  }
}

/* Ajustes generales de márgenes y rellenos */
@media (max-width: 768px) {
  .slide {
    margin: 0 10px; /* Añadir márgenes laterales para dispositivos más pequeños */
  }
}