/* Dropdown Button */
.dropbtn, .dropbtn2, .dropbtn3, .dropbtn4, .dropbtn5, .dropbtn6 {
 background: none;
 color: white;
 padding-right: 12px;
 padding-left: 12px;
 /*padding-top: 8px;*/
 font-size: 12px;
 font-family: 'Montserrat', sans-serif;
 border: none;
 cursor: pointer;
}

/* Dropdown button on hover & focus */
/*
.dropbtn:hover, .dropbtn:focus {
 background: none;
}
*/
/* The container <div> - needed to position the dropdown content */
.dropdown {
 position: relative;
 display: inline-block;

}

button:hover {
  color: #BC955C;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
 position: absolute;
 background: #f1f1f1;
 min-width: 160px;
 box-shadow: 0px 7px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
 color: black;
 padding: 8px 16px;
 text-decoration: none;
 display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* Evita overlays oscuros en el hero */
#hero::before,
#hero .carousel-item::before,
#hero .carousel-container::before {
  content: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Si el contenedor trae un fondo semitransparente */
#hero .carousel-container {
  background: transparent !important;
}

/* Asegura que el slide se vea nítido */
#hero .carousel-item {
  background-size: cover;
  background-position: center center;
}

#hero .carousel-item {
  background-size: contain;       /* muestra toda la imagen completa */
  background-position: center;    /* centrada en el contenedor */
  background-repeat: no-repeat;   /* sin repetir */
  background-color: #000;         /* bandas negras automáticas */
}

/* Altura del carrusel (ajústala a tu gusto) */
#hero,
#hero .carousel-item {
  height: 45vh; /* o un valor fijo como 400px */
}

/* Responsive */
@media (max-width: 992px) {
  #hero,
  #hero .carousel-item {
    height: 35vh;
  }
}
@media (max-width: 576px) {
  #hero,
  #hero .carousel-item {
    height: 30vh;
  }
}