/*Sección Pizzas Empieza*/
.productos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    row-gap: 2rem;
    background: #f3f3f3;
    box-shadow: inset 0 8px 18px rgba(255,255,255, .5);
}
.productos .heading{
    font-size: clamp(1.6rem, 3vw, 4rem);
    color: #464652;
    font-weight: 300;
    padding: 0 1rem;
    border-radius: 3rem;
    background: #f8f8f8;
    width: max-content;
    box-shadow: 0 3px 5px rgba(11, 28, 59, 0.3),
                0 7px 15px rgba(7, 52, 58, 0.2);
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-style: oblique;
}
.productos .container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: .7rem;
    width: 100%;
    row-gap: 1rem;
}




.productos .container .objeto{
    display: flex;
    flex-direction: column;
    padding: .7rem;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease-in-out; 
    opacity: 1;
    row-gap: .5rem; 
    transform: translateY(0);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .1),
    0 -5px 12px #fff;
}
.productos .container .objeto:hover{
    box-shadow: 0 5px 17px rgba(0,0,0, .3);
}




.productos .container .objeto.hidden {
    opacity: 0;
    transform: scale(0.8); 
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}


.productos .container .objeto:not(.hidden) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}


.productos .container .objeto .titulo{
    font-size:1rem;
    color: var(--black);
    font-weight: 700;
}
.productos .container .objeto .image{
    position: relative;
    height: 15rem;
    overflow: hidden;
    border-radius: .5rem;
}

.productos .container .objeto .image img{
    height: 27rem;
    position: absolute;
    top: 0;
    right: -1.2rem;
}


.productos .container .objeto .descripcion{
    font-size: .8rem;
    color: #555;
    font-size: clamp(.8rem, 2vw, .9rem);
    text-transform:initial;
}




.productos .container .objeto .alergenos{
    width: 100%;
}


.productos .container .objeto .alergenos .imagecontainer{
    display: flex;
    align-items: center;
    width: 100%;
}

.productos .container .objeto .alergenos .imagecontainer img{
    width: 1.5rem;
}

.productos .container .objeto .peso{
    color: #777;
    font-size: .9rem;
    margin-top: auto;
}

.productos .container .objeto .fa-info{
    font-size: 1.3rem;
    color: var(--white);
    cursor: pointer;
    background:var(--black);
    height: 2.3rem;
    width: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 3;
}

.productos .container .objeto .fa-info:hover{
    color: var(--accent);
}




.productos .container .objeto .ragu{
    position: absolute;
    background: rgba(208, 212, 216, 0.664);
    height: 100%;
    width: 100%;
    bottom: -100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 5;
    backdrop-filter: blur(5px);
    left: 0;
    box-shadow: inset 0 8px 55px #ffffff,
                inset 0 8px 25px #fff;
    border: 2px solid #acb9c0;
    border-radius: 1rem;
}

.productos .container .objeto .ragu.active{
    bottom: 0;
}

.productos .container .objeto .ragu h1{
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    padding: .3rem.5rem;
    background: rgba(56, 66, 71, 0.808);
    width: 100%;
    border-top: 1px solid #ddd;
    text-shadow: 0 1px 2px #000;
}
.productos .container .objeto .ragu p{
    padding: .5rem;
    background:rgba(255,255,255, .8);
    font-size: 1rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
    border-bottom: 1px solid #eee;
    border-radius: 0 0 7px 7px;
    width: 100%;
    font-style: oblique;
    color: #222646;
}
.productos .container .objeto .ragu span{
    padding: .5rem;
    border-radius: 3rem;
    background: #222;
    margin-top: auto;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.productos .container .objeto .ragu span:hover{
    background:#333;
}



.productos .container .objeto .btnsGrid{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    width: 100%;
}


.productos .container .objeto .btnsGrid .precio{
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    background: #eee;
    width: 100%;
    text-align: center;
    padding: .3rem;
    border-radius: .7rem;
    font-weight: 600;
    color: #53545f;
}
.productos .container .objeto .btnsGrid .permaLink{
    width: 100%;
    background: #137a13;
    border-radius: .7rem;
    color: #ff0;
    overflow: hidden;
    box-shadow: 0 0 12px transparent;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem 0 0;
}
.productos .container .objeto .btnsGrid .permaLink i{
    padding: .5rem .7rem;
    background: #020202;
}



.productos .container .objeto .btnsGrid .permaLink:hover{
    background: #109616;
    box-shadow: 0 0 12px #0b8d11;
    border: 1px solid #109616;
}
.productos .container .objeto .btnsGrid .permaLink:hover i{
    background: #094109;
}

/* .productos .container .objeto .btnsGrid .permaLink{

} */






/*Sección Pizzas Termina*/



/*//////////////////////////////////////////////////////////////////*/




/*Sección Pizzas Empieza*/

/* .productos .heading{
    font-size: 4rem;
}



.productos .container .objeto .fa-info{
    font-size: 1.5rem;
    height: 3rem;
    width: 3rem;
}



.productos .container .objeto .titulo{
    font-weight: 400;
}

.productos .container .objeto .descripcion{
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.productos .container .objeto .precio{
    font-size: 3rem;
}

.productos .container .objeto .permaLink{
    font-size: 2rem;
}


.productos .container .objeto .permaLink i{
    margin-right: 1rem;
} */
/*Sección Pizzas Termina*/







/* @media (max-width:768px){ */

/*Sección Pizzas Empieza*/


/* .productos .heading{
    font-size: 2rem;
}


.productos .container .objeto .fa-info{
    font-size: 1.5rem;
    height: 3rem;
    width: 3rem;
}

.productos .container .objeto .titulo{
    font-weight: 300;
}

.productos .container .objeto .descripcion{
    font-size: 1.7rem;
}

.productos .container .objeto .permaLink{
    font-size: 1.5rem;
    padding: 1.5rem;
}


.productos .container .objeto .permaLink i{
    margin-right: 1rem;
    font-size: 2rem;
} */

/*Ragu Empieza*/

/* .productos .container .objeto .ragu h1{
    border-radius: 4px 4px 0 0;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 1px;
}
.productos .container .objeto .ragu p{
    font-size: 1.7rem;
    border-radius: 0 0 4px 4px;
}
.productos .container .objeto .ragu span{
    padding: 1rem 2rem;
    border-radius: 3px;
    outline: 1px solid #fff;
    background:var(--black);
    margin-top: auto;
    width: 100%;
    font-size: 1.7rem;
    color: #fff;
    cursor: pointer;
    letter-spacing: 1px;
}

.productos .container .objeto .ragu span:hover{
    background: var(--accent);
    color: var(--black);
} */

/*Ragú Termina*/

/*Sección Pizzas Termina*/
    
    
/* } */