.active {
    color: var(--primario) !important;
}

.productos {
    display: grid;
    grid-template-columns: 30% 70%;
}

.nombre__producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    background-color: var(--backOscuro);
    height: 95vh;
}

.nombre__producto button:first-child {
    margin-top: 5rem;
}

.nombre__producto button {
    color: var(--secundario);
    font-size: 2.8rem;
    font-weight: bold;
    background-color: transparent;
    border: None;
    cursor: pointer;
}

.nombre__producto button:hover {
    color: var(--primario);
}

/* Manejo dinámico */


#desProductoUno.off {
    display: None;
}

#desProductoUno.on {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


#desProductoDos.off {
    display: None;
}

#desProductoDos.on {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*  Termino de danejo dinámico */

.margin_productoUno {
    top: -2rem;
}

.img_mujer {
    bottom: 0;
    height: 70%;
    max-width: 45rem;
}

#desProductoDos {
    background: black;
    color: var(--blanco);
}


.listado_producto {
    font-size: 1.8rem;
}

.listado_producto li {
    margin: 1.3rem 0;
    color: var(--primario);
    font-size: 1.9rem;
}

.listado_producto li span {
    color: black;
}

@media (max-width: 1000px) {
    .img_mujer {
        display: none;
    }

    .productos {
        display: flex;
        flex-direction: column;
    }

    .nombre__producto {
        gap: 3rem;
        background-color: var(--backOscuro);
        height: 30vh;
        justify-content: center;
    }

    #desProductoDos {
        height: auto;
    }

    #desProductoUno {
        height: auto;
    }

    .listado_producto{
        position: relative;
        top: .2rem;
        width: auto;
        background-color: transparent;
        z-index: 0;
        height: auto;
        left: auto;
        text-align: left;
    }

    .nombre__producto button:first-child {
        margin-top: 0;
    }

}