/**===para 2 divs y un tercero al centro===*/
.contenedor_tres_divs {
    position: relative;

}

.div-arriba {
    background-color: black;
    height: 670px;

}

.div-abajo {
    background-color: white;
    height: auto;
    /* para que se adapte lo que viene abajo */
}

.div-centro {
    position: absolute;
    top: 670px;
    /*misma altura que el div-arriba*/
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
    width: 100%;
    height: auto;
    z-index: 100;
    border-radius: 5px;
    opacity: 1;
    background-color: transparent;
    /*background-image: linear-gradient(rgb(20, 5, 105),rgb(0, 0, 255))*/
}
/**=== fin para 2 divs y un tercero al centro===*/ 
 
 
 /*para pantallas grandes */
@media screen and (min-width: 576px) {
    
    .carousel_de_cards .carousel-inner {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden !important; /* Importante: oculta el contenido que sobresale. no funciona*/
        width: 100%;

    }

    .carousel_de_cards .carousel-item {
        display: block;
        margin-right: 0;
        flex: 0 0 calc(100%/4);/*mostrar 4 tarjetas*/
        transition: transform 1s ease-in-out;
    }
}

/*fin para pantallas grandes */

.carousel_de_cards .carousel-inner {
    padding: 80px 7%;
    /**10% de la pantalla */
    /*background-color: rgba(128, 128, 128, 0);*/
}

.carousel_de_cards .card {
    margin: 0 0.7rem;
    height:27rem;
}

.carousel_de_cards .card img {
    height: 15rem;
    object-fit: cover;
}

.carousel_de_cards .carousel-control-prev, .carousel_de_cards .carousel-control-next {
    margin:0 2%;
    width: 6vh;
    height: 6vh;
    background-color: rgba(10, 10, 10, 0.54);
    border-radius: 50%; 
    top: 7%;
    transform: translateY(-50%);
    opacity: 0.8;
}


.carousel_de_cards .carousel-indicators button{
    border-radius: 50%;
    height: 15px !important;
    width:15px !important;
}
.carousel_de_cards .btn{
    background-color: var(--color-dominante-verde-rgb);
    border:none;
}
.carousel_de_cards .card{
    border:none;
    border-radius:15px;
    transition: all 0.3s; /*transición suave*/
    box-shadow: 7px -7px 15px rgba(0,0,0,0.3);/*se pone sombra*/
}
.carousel_de_cards .btn:hover{
    background-color: var(--color-dominante-verde-rgb);
    opacity: 0.8;
}  
.carousel_de_cards .card:hover{
    transform: scale(1.09);/*se aumenta la escala*/
    box-shadow: 7px -7px 15px rgba(0,0,0,0.3);/*se pone sombra*/
}