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

.productos{

    background:var(--color-fondo-suave);

}

/*======================================
=               GRID
======================================*/

.productos__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/*======================================
=             TARJETAS
======================================*/

.producto-card{

    background:#FFF;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--sombra-suave);

    transition:.35s;

}

.producto-card:hover{

    transform:translateY(-10px);

}

/*======================================
=             IMAGEN
======================================*/

.producto-card__imagen{

    overflow:hidden;

}

.producto-card__imagen img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.producto-card:hover img{

    transform:scale(1.08);

}

/*======================================
=             CONTENIDO
======================================*/

.producto-card__contenido{

    padding:30px;

}

.producto-card__contenido h3{

    color:var(--color-primario);

    margin-bottom:15px;

    font-size:1.5rem;

}

.producto-card__contenido p{

    color:var(--color-texto-secundario);

    margin-bottom:25px;

}

.producto-card__contenido a{

    color:var(--color-secundario);

    font-weight:bold;

}


.modal-productos{

    display:none;

    position:fixed;

    inset:0;

    z-index:9999;

    background:rgba(0,0,0,.65);

    justify-content:center;

    align-items:center;

    padding:20px;

    overflow-y:auto;

}



.modal-productos__contenido{

    background:#FFF;

    width:100%;

    max-width:900px;

    max-height:90vh;

    overflow-y:auto;

    padding:40px;

    border-radius:15px;

    position:relative;

}



.modal-cerrar
{

    position:absolute;
    right:20px;
    top:10px;
    font-size:35px;
    cursor:pointer;

}


.modal-producto{

    display:flex;

    gap:35px;

    align-items:flex-start;

}

.modal-producto__imagen{

    flex:0 0 320px;

}

.modal-producto__imagen img{

    width:100%;

    border-radius:10px;

}

.modal-producto__texto{

    flex:1;

}


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

/*======================================
TABLETS
======================================*/

@media (max-width:1024px){

    .productos__grid{

        grid-template-columns:repeat(2,1fr);
        gap:30px;

    }

    .producto-card__imagen img{

        height:240px;

    }

    .modal-productos__contenido{

        width:90%;
        margin:10% auto;
        padding:30px;

    }

}


/*======================================
CELULARES
======================================*/

@media (max-width:768px){

    .productos__grid{

        grid-template-columns:1fr;
        gap:25px;

    }

    .producto-card{

        max-width:550px;
        margin:0 auto;

    }

    .producto-card__imagen img{

        height:230px;

    }

    .producto-card__contenido{

        padding:25px;

    }

    .producto-card__contenido h3{

        font-size:1.35rem;

    }

    .modal-productos{

        padding:15px;

    }
	
    .modal-productos__contenido{

        padding:25px;

        max-height:95vh;

    }

    .modal-cerrar{

        right:15px;
        top:10px;
        font-size:30px;

    }

}

@media (max-width:768px){

    .modal-producto{

        flex-direction:column;

    }

    .modal-producto__imagen{

        flex:none;

        width:100%;

    }

    .modal-producto__imagen img{

        max-width:350px;

        margin:auto;

    }

}

/*======================================
CELULARES PEQUEÑOS
======================================*/

@media (max-width:480px){

    .producto-card__imagen img{

        height:200px;

    }

    .producto-card__contenido{

        padding:20px;

    }

    .producto-card__contenido h3{

        font-size:1.25rem;

    }

.modal-productos{

        padding:10px;

    }

    .modal-productos__contenido{

        padding:18px;

        border-radius:10px;

    }

    .modal-cerrar{

        font-size:28px;

    }

}