/* ============================================
   HERO / INTRO CAROUSEL — PATCH LIMPIO
   (Añadir al FINAL de tu style.css)
   ============================================ */

/* Alturas garantizadas para que la imagen pueda llenar su columna */
#intro,
#intro .container,
#introCarousel,
#introCarousel .carousel-slide {
  min-height: 100dvh;
}

#introCarousel .carousel-slide .row,
#introCarousel .carousel-slide .col-md-5,
#introCarousel .carousel-slide .col-md-6,
#introCarousel .carousel-slide .col-md-7 {
  height: 100%;
}

/* Imagen (columna derecha): llenar toda la altura en desktop/tablet */
#introCarousel .intro-img {
  position: relative;
  overflow: hidden;
}
#introCarousel .intro-img img {
  position: absolute;
  inset: 0;                /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* rellena sin deformar (puede recortar bordes) */
  display: block;
}

/* Texto (columna izquierda): centrado vertical */
#introCarousel .intro-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Video de fondo del hero siempre detrás del contenido */
#intro .video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
#intro::before { /* overlay para legibilidad */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 1;
}

/* ------- MÓVIL ------- */
@media (max-width: 767.98px) {
  /* Apilar y dejar respirar el contenido */
  #intro .carousel-slide {
    position: relative;
    min-height: 75dvh;
    padding: 24px 0 56px; /* espacio para CTA y barra de progreso */
  }

  /* La imagen ya no llena: se muestra proporcionada y centrada */
  #introCarousel .intro-img {
    overflow: visible;
    height: auto;
    text-align: center;
  }
  #introCarousel .intro-img img {
    position: static;      /* quitamos absolute */
    width: 85%;            /* tamaño cómodo en móvil */
    height: auto;
    max-height: 320px;     /* evita que se “coma” el banner */
    object-fit: contain;
    margin: 0 auto;
  }

  #introCarousel .intro-info {
    text-align: center;
    margin-top: 12px;
  }
}

/* ------- Opcional: encuadre por slide (desktop) ------- */
/*
#introCarousel .carousel-slide:nth-child(1) .intro-img img { object-position: center right; }
#introCarousel .carousel-slide:nth-child(2) .intro-img img { object-position: center; }
#introCarousel .carousel-slide:nth-child(3) .intro-img img { object-position: 60% center; }
*/