/*==========================================
PRODUCTOS
==========================================*/

.productos{
    width:100%;
    max-width:1300px;
    margin:auto;
    padding:80px 20px;
}



.producto{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    margin:90px 0;
}



.producto-info{
    flex:1;
}



.producto-info h2{
    color:var(--primary);
    font-size:40px;
	font-family:Calibri;
    margin-bottom:15px;
}



.producto-info ul{
    columns:3;
}



.producto-info li{
    margin-bottom:14px;
    font-size:18px;
	font-family:Calibri;
    color:#555;
}



.producto-imagen{

    flex:1;

    position:relative;

    overflow:hidden;

}



.marco{

    position:absolute;

    width:100%;

    height:100%;

    background:var(--secondary);

    top:18px;

    left:18px;

    z-index:1;

    border-radius:20px;

}



.producto-imagen img{

    position:relative;

    z-index:2;

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}



.izquierda{

    transform:translateX(-120px);

}



.derecha{

    transform:translateX(120px);

}



.animar{

    opacity:0;

}



.fade{

    opacity:0;

    transform:translateY(60px);

}



.animar.visible{

    animation:entrarImagen .9s ease-out forwards;

}



.fade.visible{

    animation:entrarTexto .8s ease-out forwards;

}



@keyframes entrarImagen{

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes entrarTexto{

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:900px){

    .producto{

        flex-direction:column;

    }

    .producto.inverso{

        flex-direction:column-reverse;

    }

    .producto-info{

        width:100%;

    }

    .producto-info ul{

        columns:1;

    }

    .producto-info h2{

        font-size:30px;

    }

    .izquierda,
    .derecha{

        transform:translateY(80px);

    }

}