/* ==========================================
   Pizzería San Francisco - Carta
========================================== */

/*==================================================
01. CONTENEDOR GENERAL
==================================================*/

.psf-carta{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}


/*==================================================
02. BOTONES DE CATEGORÍAS
==================================================*/

.psf-categorias{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;

    margin-bottom:35px;

}

.psf-categorias button{

    background:#fff;
    color:#333;
    border:2px solid #b8860b;
    border-radius:12px;

    padding:14px 22px;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.psf-categorias button:hover{

    background:#b8860b;
    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.psf-categorias button.activo{

    background:#b8860b;
    color:#fff;

    box-shadow:0 6px 16px rgba(184,134,11,.35);

}

.psf-categorias button:active{

    transform:scale(.96);

}


/*==================================================
03. CONTENEDOR DE LA CARTA
==================================================*/

.psf-contenido{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 5px 25px rgba(0,0,0,.08);

}


/*==================================================
04. CATEGORÍAS
==================================================*/

.psf-seccion{

    display:none;
    animation:aparecer .25s ease;

}

.psf-seccion.activa{

    display:block;

}


/*==================================================*
*05. TÍTULO DE LAS CATEGORÍAS*
*==================================================*/

.psf-seccion h2{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    text-align:center;

    color:#b8860b;

    font-size:48px;

    font-weight:700;

    letter-spacing:1px;

    margin:25px 0 55px;

    padding-bottom:18px;

    border-bottom:2px solid #e7d3a2;

}


/*==================================================
06. PRODUCTOS
==================================================*/

.psf-producto{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:18px 0;

    border-bottom:1px dashed #ccc;

}


/*==================================================
07. INFORMACIÓN DEL PRODUCTO
==================================================*/

.psf-info{

    flex:1;

}

.psf-info h3{

    margin:0 0 8px;

    font-size:21px;

    color:#222;

    font-weight:700;

}

.psf-info p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.8;

}


/*==================================================
08. PRECIO
==================================================*/

.psf-precio{

    font-size:1.7rem;

    font-weight:800;

    color:#b22222;

    white-space:nowrap;

}


/*==================================================
09. ANIMACIÓN
==================================================*/

@keyframes aparecer{

    from{

        opacity:0;
        transform:translateY(8px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/*==================================================
10. RESPONSIVE
==================================================*/

@media(max-width:768px){

    .psf-contenido{

        padding:20px;

    }

    .psf-categorias button{

        width:calc(50% - 12px);

        font-size:14px;

        padding:10px;

    }

    .psf-producto{

        flex-direction:column;

        gap:8px;

    }

    .psf-precio{

        align-self:flex-end;

    }

.psf-seccion h2{

    font-size:38px;

    gap:10px;

    margin:20px 0 35px;

    padding-bottom:14px;

}

}