:root{
--yellow: #FFD700;
--muted: #cfcfcf;
}
html,body{height:100%;margin:0;padding:0}
body {
font-family: 'Montserrat', sans-serif;
background:
linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.85)),
url("Fondo.jpeg") no-repeat center center fixed;
background-size: cover;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 16px 60px;
overflow-x: hidden;
}
/* ---------- ENCABEZADO ---------- */
.header{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin-bottom:30px;
flex-wrap:wrap;
}
.logo-top{
width:120px;
height:70px;
background-image: url("Logo.jpeg");
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.8));
}
h1.main-title {
font-size: 58px;
font-weight: 800;
color: var(--yellow);
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
/* ---------- CONTENEDOR PRINCIPAL (GRID HORIZONTAL) ---------- */
.menu-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
/* Permite que los elementos se muevan hacia arriba para rellenar huecos */
grid-auto-flow: dense; 
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
align-items: start; /* Asegura que las tarjetas no se estiren */
}
/* ---------- TARJETAS (Comportamiento de Grid) ---------- */
.card{
/* Propiedades limpiadas de Masonry */
break-inside: initial;
display: block; 
width: initial;
margin-bottom: 0;
/* Estilos estéticos */
background: rgba(30,30,30,0.88);
border-radius:14px;
padding:22px;
box-shadow: 0 6px 22px rgba(0,0,0,0.6);
backdrop-filter: blur(6px);
transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.card:hover{
transform: translateY(-6px);
box-shadow: 0 10px 35px rgba(255,215,0,0.3);
}
/* ---------- TITULOS DE SECCIÓN ---------- */
.section-title{
font-size:18px;
font-weight:700;
color:var(--yellow);
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}
.section-title .emoji{font-size:22px;}
.divider{
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
margin-bottom:10px;
}
/* ---------- ITEMS GENERALES ---------- */
.item{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px dashed rgba(255,255,255,0.1);
}
.item:last-child{border:none;}
.name{font-size:15px;font-weight:600;color:#fff;}
.desc{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4;}
.price{font-weight:700;color:var(--yellow);margin-left:8px;white-space:nowrap;}
/* ---------- FOOTER ---------- */
.footer{
margin-top:40px;
color:rgba(255,255,255,0.6);
font-size:13px;
text-align:center;
line-height:1.5;
}
.footer span{
color:var(--yellow);
font-weight:700;
}
/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
transition: transform 0.25s ease;
}
.whatsapp-float img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.whatsapp-float:hover {
transform: scale(1.08);
filter: drop-shadow(0 4px 12px rgba(37,211,102,0.6));
}
/* ---------- RESPONSIVE Y COLOCACIÓN MANUAL (ESCRITORIO) ---------- */

/* Colocación de elementos fijos solo para escritorio (>1000px) */
@media (min-width: 1001px) {
    /* Tarjeta 1: Hamburguesas (Columna 1) */
    .menu-wrap section:nth-child(1) { grid-column: 1; }

    /* Tarjeta 2: Adicionales/Salchipapas (Columna 2) */
    .menu-wrap section:nth-child(2) { grid-column: 2; }

    /* Tarjeta 3: Picadas/Perros Calientes (Columna 3) */
    .menu-wrap section:nth-child(3) { grid-column: 3; }

    /* Tarjeta 4: Pepitos (Forzado a Columna 2, debajo de Salchipapas) */
    .menu-wrap section:nth-child(4) { grid-column: 2; }

    /* Tarjeta 5: Bebidas (Forzado a Columna 3, debajo de Perros Calientes) */
    .menu-wrap section:nth-child(5) { grid-column: 3; }
}

/* Para Tablets: bajamos a 2 columnas */
@media (max-width: 1000px) {
    .menu-wrap {
        grid-template-columns: repeat(2, 1fr);
        /* Quitamos las asignaciones de columna fija para que se ordenen linealmente */
        grid-auto-flow: row; 
    }
    
    /* Reset de la colocación fija para tablets */
    .menu-wrap section {
        grid-column: initial;
    }
}

/* Ajustes de móvil (1 columna) */
@media(max-width:800px){
    .menu-wrap{
        grid-template-columns: 1fr;
    }
    .card.pepitos, .card.bebidas{
        position: static;
        top: 0;
        margin-top: 10px;
    }
    .card.pepitos .menu-items-horizontal{
        flex-direction: column;
        gap:12px;
    }
    h1.main-title{
        font-size:38px;
        text-align:center;
    }
    .logo-top{
        order:1;
        margin-top:10px;
    }
}