@charset "utf-8";
/* 4-monitor/galeria.css */


.galeria {
  height: 70vh;
  position: relative;
  overflow: hidden;
}

/* SLIDES */
.slides {
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 20s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }

/* Fade cinematográfico */
@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

/* DEGRADADO OSCURO */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.3) 30%,
    rgba(0,0,0,0) 60%
  );
}



/* TEXTO SOBRE IMÁGENES */
.caption {
  position: absolute;
  bottom: 35%;
  color: white;
  width: 100%;
  text-align: center;
  opacity: 0;
  animation: textFade 20s infinite;
}

/* sincronizamos con tus slides */
.slide:nth-child(1) .caption { animation-delay: 0s; }
.slide:nth-child(2) .caption { animation-delay: 5s; }
.slide:nth-child(3) .caption { animation-delay: 10s; }
.slide:nth-child(4) .caption { animation-delay: 15s; }

@keyframes textFade {
  0%   { opacity: 0; transform: translateY(30px); }
  10%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 1; }
  35%  { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0; }
}

.caption {
  font-family: "Sora", sans-serif;
}

.caption h1 {
  font-weight: normal;
  font-size: 3rem;
}

.caption p {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.8;
}



/* Mobile */
@media (max-width: 768px) {

  .galeria {
    height: 90vh;
    position: relative;
    overflow: hidden;
  }

  .caption {
    left: 5%;
    bottom: 10%;
    max-width: 90%;
  }
}