:root {
    --bg-carta-completa: #000000; 
}

/* =========================================================
   VERSIÓN ESCRITORIO (PC / TABLET HORIZONTAL)
   ========================================================= */
@media (min-width: 1024px) {
    
    body {
        background-color: var(--bg-carta-completa);
        margin: 0;
        color: white;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .carta-header { 
        width: 85%; 
        max-width: 1400px; 
        padding: 30px 0; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin: 0 auto; 
        flex-shrink: 0;
    }
    
    .logo-img { 
        height: 40px; 
        max-width: 150px; 
        object-fit: contain; 
        object-position: left center; 
    }

    /* Convertir el contenedor principal en una cuadrícula de 3 columnas */
    .carta-main {
        width: 85%;
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        gap: 40px 50px; 
        align-content: start; 
        grid-template-columns: repeat(3, 1fr);
        padding-top: 20px;
        padding-bottom: 60px;
        flex-grow: 1; 
        overflow-y: auto; 
        scrollbar-width: none;
    }
    .carta-main::-webkit-scrollbar { display: none; }

    /* Asegurar que los TÍTULOS DE CATEGORÍA ocupen el ancho completo (las 3 columnas) */
    .titulo-categoria-seccion {
        display: block; 
        grid-column: 1 / -1; 
        font-family: var(--f-tit, 'Montserrat', sans-serif);
        font-size: 2.8rem; 
        font-weight: 800;
        margin: 50px 0 10px 0; 
        color: #fff;
        width: 100%; 
        text-align: left;
    }

    /* Ajustes del plato para escritorio */
    .plato-card {
        width: 100%;
        margin: 0; 
        align-items: flex-start; 
        display: flex; 
        gap: 15px;
    }

    .plato-img {
        width: 110px;
        height: 110px;
        border-radius: 20px;
        object-fit: cover; 
        flex-shrink: 0; 
        background-color: #222; 
        cursor: pointer;
    }

    .plato-info { 
        justify-content: flex-start; 
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        text-align: left; 
        cursor: pointer;
    }
    .plato-titulo { font-size: 1.15rem; margin: 0 0 8px 0; font-weight: bold; line-height: 1.2;}
    .plato-desc { font-size: 0.85rem; margin: 0 0 12px 0; opacity: 0.8; line-height: 1.4;}

    .plato-precio-alergenos { display: flex; align-items: center; gap: 12px; }
    .precio { font-size: 1.1rem; font-weight: bold;}
    .contenedor-alergenos { display: flex; gap: 5px; }

    /* Pie de página centrado */
    .carta-footer { 
        padding: 30px 0; 
        width: 100%; 
        background: #000; 
        flex-shrink: 0;
    }
    .separador-footer { width: 85%; max-width: 1400px; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 0 auto; }
    .separador-footer.superior { margin-bottom: 15px; }
    .separador-footer.inferior { margin-top: 15px; margin-bottom: 15px; }
    
    .contenedor-categorias-scroll {
        width: 85%;
        max-width: 1400px;
        margin: 0 auto;
        justify-content: center; 
        display: flex; 
        overflow-x: auto; 
        gap: 15px; 
        padding: 0 5%; 
        box-sizing: border-box; 
        scrollbar-width: none;
    }
    .contenedor-categorias-scroll::-webkit-scrollbar { display: none; }
    
    .cat-item { white-space: nowrap; font-size: 0.9rem; padding: 6px 15px; border-radius: 50px; cursor: pointer; transition: 0.3s; color: rgba(255,255,255,0.7);}
    .cat-item.activa { background-color: white; color: black !important; font-weight: bold !important; opacity: 1; }

    .botones-accion-container {
        width: 85%;
        max-width: 900px;
        margin: 0 auto;
        justify-content: center; 
        gap: 30px;
        display: flex; 
        align-items: center; 
    }
    .btn-accion {
        flex: none; 
        padding: 12px 35px;
        font-size: 0.8rem;
        text-align: center; 
        border-radius: 50px; 
        font-weight: 600; 
        text-transform: uppercase; 
        white-space: nowrap; 
        text-decoration: none !important; 
        transition: 0.3s; 
    }
    .btn-transparente { background-color: transparent !important; color: #ffffff !important; border: none !important; opacity: 0.8; }
    .btn-solido { background-color: #ffffff !important; color: #000000 !important; border: none !important; }
}