/**
 * MACONDO — Estilos Diapositivas (Carousel en container)
 * Archivo: /assets/css/diapositivas.css
 */

/* =========================
   Diapositivas – Carousel en container
   ========================= */

/*
.diapositivas-section {
  position: relative;
  margin: 0;
  	background: rgba(0,0,0,0.2);
}*/



.diapositivas-section {
  position: relative;
  margin: 0;
  position: relative;
  background-image: url('../img/1.jpg') !important;
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 60px!important;
   padding-bottom: 120px!important;
}

.diapositivas-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
  pointer-events: none;
  z-index: 0;
}

.diapositivas-section > * {
  position: relative;
  z-index: 1;
}


/*
.diapositivas-section {
  position: relative;
  margin: 0;
  background-image: url('../img/mountain4.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
*/


/* El carrusel vive dentro de .container (no full bleed) */
.diapositivas-carousel {
  width: 100%;
  height: 70vh;
  max-height: 720px;
 /* border-radius: 12px;*/
 	border: 16px solid #fff;
  overflow: hidden;
}
.diapositivas-carousel {
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.diapositivas-carousel .carousel-inner,
.diapositivas-carousel .carousel-item {
  height: 100%;
}

/* Contenedor de la imagen */
.diapositivas-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Imagen cubre el área recortando si hace falta */
.diapositivas-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
}

/* Overlay con degradado y texto */
.diapositivas-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 2.5rem 2rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.0) 80%
  );
  pointer-events: none;
}

.diapositivas-caption {
  max-width: 720px;
  color: #fff;
  pointer-events: auto;
}

.diapositivas-title {
  font-size: clamp(2.0rem, 2.8vw, 3.0rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.diapositivas-text {
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  line-height: 1.4;
  opacity: 0.9;
}

/* Transición del fade */
.diapositivas-carousel.carousel-fade .carousel-item {
  transition: opacity 0.9s ease-in-out;
}

/* Zoom suave por diapositiva */
.diapositivas-carousel .carousel-item.diapositivas-zoom .diapositivas-image {
  animation: diapositivasZoom 6s ease-out forwards;
}

@keyframes diapositivasZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* =========================
   Controles (flechas)
   ========================= */

.diapositivas-control {
  width: auto;
  padding: 0 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  background: transparent;
}

.diapositivas-control i {
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.85);
}

.diapositivas-control:hover,
.diapositivas-control:focus {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}

/* Quitamos el icono default de Bootstrap */
.diapositivas-control .carousel-control-prev-icon,
.diapositivas-control .carousel-control-next-icon {
  background-image: none;
}

/* =========================
   Indicadores tipo barras
   ========================= */

.diapositivas-indicators {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
}

.diapositivas-indicators [data-bs-target] {
  box-sizing: content-box;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

.diapositivas-indicators .active {
  background-color: rgba(255, 255, 255, 0.9);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 767.98px) {
  .diapositivas-carousel {
    height: 52vh;
    max-height: 520px;
   /* border-radius: 10px;*/
  }

  .diapositivas-overlay {
    padding: 1.5rem 1.25rem;
    align-items: flex-end;
  }

  .diapositivas-title {
    font-size: 1.9rem;
  }

  .diapositivas-text {
    font-size: 1rem;
  }

  .diapositivas-control i {
    font-size: 2.2rem;
  }

  .diapositivas-indicators {
    bottom: 1rem;
  }

  .diapositivas-indicators [data-bs-target] {
    width: 28px;
  }
}