#bannerPrincipal,nav {
    position: relative;
    z-index: 1040;
  }
  
  
  
  #bannerPrincipal .carousel-inner {
    height: auto; /* alto fijo */
    width: 100%;
  }
  
  
  #bannerPrincipal .carousel-inner img {
    height: auto;         /* ocupa toda la altura del carrusel */
    width: 100%;
  }
  
  #bannerprincipalcuadrado{
    display: none;
  
  }
  
  section#bannerprincipalcuadrado {
    margin-top: 120px;  
    display: none;
  }
  
#bannerPrincipal,
#bannerprincipalcuadrado {
  margin-top: 90px; /* deja espacio para el navbar */
  position: relative;
  z-index: 1; /* el banner siempre debajo */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.6); /* fondo oscuro translúcido */
  border-radius: 50%;                   /* forma circular */
  padding: 20px;                        /* tamaño del círculo */
  background-size: 50%, 50%;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* evita que ocupen mucho espacio lateral */
}
  
  
  @media (max-width: 768px) {
  
    #bannerPrincipal .carousel-inner {
      height: auto; /* alto fijo */
    }
    
    
    #bannerPrincipal .carousel-inner img {
      height: auto;         /* ocupa toda la altura del carrusel */
    }
  
    #bannerprincipalcuadrado{
      display: block;
    }
  
    section#bannerprincipalcuadrado { 
      display: block;
    }
  
    #bannerPrincipal{
      display: none;
    }

    #bannerPrincipal,
    #bannerprincipalcuadrado {
     margin-top: 0px; /* deja espacio para el navbar */
    }
  }