/* * DESIGN & DEVELOPMENT BY: Antonio Salazar
 * Email: siemprenegoceando@gmail.com
 * -------------------------------------------------------
 */

/* --- Estilos del Carrusel Base (Escritorio) --- */

/* Aseguramos que el carrusel no tenga margen debajo */
#heroImageCarousel {
  margin-bottom: 0;
}

/* Altura fija/relativa para el contenedor del carrusel */
.carousel-inner {
  height: 100vh;
  /* Altura del 70% de la ventana. Ajusta este valor si es muy alto/bajo. */
}

/* Cada item del carrusel tome la altura del contenedor */
/* Cada diapositiva y su imagen deben tomar esa altura */
.carousel-item,
.carousel-img-fill {
  height: 100%;
}

/* Imagen se centre y cubra todo el espacio sin distorsión */
.carousel-img-fill {
  /*height: 100%;
  /* La imagen toma la altura del item */
  object-fit: cover;
  /* La imagen cubre el contenedor sin distorsionarse (como background-size: cover) */
  object-position: center;
  /* Centra la imagen */
  width: 100%;
  /* Asegurar que la imagen siempre ocupe todo el ancho */
}


/* --- SOLUCIÓN PARA MÓVIL (Pantallas menores a 768px) --- */
@media (max-width: 768px) {

  /* Reducimos la altura en móvil para que no sea excesiva */
  .carousel-inner {
    height: 25vh;
    /* Se reduce a 50vh de la ventana en móvil */
    /* Si quieres una altura fija en móvil (ej. 300px), usa: height: 300px; */
  }

  /* Opcional: Ajustar los indicadores (puntos) si se ven mal */
  .carousel-indicators {
    bottom: 5px;
  }

}