/* assets/css/main.css */
body {
    font-family: Arial, sans-serif;
  }
  
  .hero {
    background-size: cover;
    background-position: center;
  }
  
  .navbar-brand img {
    height: 50px;
  }

/* Limita la altura del carousel y mantiene proporción
#heroCarousel .carousel-item img {
  max-height: 400px;
  object-fit: cover; // recorta sin deformar 
}


// Hace que las flechas siempre sean visibles y más grandes 
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  background-size: 100% 100%;
  width: 3rem;
  height: 3rem;
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.4); // fondo oscuro semitransparente
    width: 5%;
}
*/

#heroCarousel {
  max-height: 400px; /* Ajustá a la altura que quieras */
  overflow: hidden;
}

#heroCarousel .hero-img {
  height: 400px;         /* misma altura que el contenedor */
  object-fit: cover;     /* recorta para cubrir todo el ancho */
  object-position: center;
}

.img-uniforme {
    width: 100%;
    height: 250px;       /* Ajustá este valor al alto estándar que quieras */
    object-fit: contain; /* Mantiene proporción sin recortar la imagen */
    background: #fff;    /* Fondo blanco detrás de imágenes más pequeñas */
}

.btn-rotate-izq svg {
    transition: transform .2s ease, color .2s ease;
}

.btn-rotate-izq:hover svg {
    transform: rotate(-15deg);
    color: #0d6efd; /* azul bootstrap */
}

.btn-rotate-der svg {
    transition: transform .2s ease, color .2s ease;
}

.btn-rotate-der:hover svg {
    transform: rotate(15deg);
    color: #0d6efd; /* azul bootstrap */
}