/* ==========================================
   1. ESTILOS BASE Y PALETA PREMIUM
   ========================================== */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    /* AJUSTE: Espacio perfecto para el nuevo tamaño de la cabecera */
    padding-top: 170px; 
    background: radial-gradient(circle, #2a1a10 0%, #1a1a1a 100%);
    color: #ffffff;
}

/* ==========================================
   2. CABECERA Y LOGO (Versión Compacta y Fija)
   ========================================== */
header {
    background: linear-gradient(180deg, #101010 0%, #202020 100%);
    padding: 10px 20px; 
    text-align: center;
    border-bottom: 4px solid #b2945d; 
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000; 
    transition: all 0.3s ease-in-out; /* Suaviza el cambio de tamaño */
    
    display: flex;
    justify-content: center; /* Al inicio mantiene todo al centro */
    align-items: center;
}

/* Estilos base del logo */
.logo-especial {
    max-width: 320px; 
    width: 100%;      
    height: auto;     
    display: inline-block;
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.8));
    transition: all 0.3s ease-in-out;
    
    /* TRUCO: Al inicio, si el contenedor del texto mide algo, 
       este margen asegura que el logo ignore el empuje y se quede centrado */
    margin: 0 auto; 
}

/* ==========================================
   EFECTOS CUANDO SE HACE SCROLL (Versión Premium con Texto y Botón)
   ========================================== */
header.scroll-activo {
    padding: 6px 40px;          
    background: #0c0c0c; 
    justify-content: space-between; 
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
}

header.scroll-activo .logo-especial {
    max-width: 110px; 
    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.9));
    margin: 0; 
}

/* Contenedor central y derecho (¡TOTALMENTE DESACTIVADO AL INICIO!) */
.header-scroll-content {
    display: none; /* Aquí está el truco: desaparece por completo para que el logo se centre libremente */
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Se activa e inicia la animación solo cuando hay scroll */
header.scroll-activo .header-scroll-content {
    display: flex; /* Entra en acción en el scroll */
    opacity: 1;
}

/* La Frase del Centro (Efecto Fuego con Mayúsculas/Minúsculas) */
.header-frase {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;          /* AJUSTE: Subió de 1.1rem a 1.3rem (más visible sin exagerar) */
    font-weight: 700;           /* Un poco más gruesa para que resalte el color */
    margin: 0 auto; 
    letter-spacing: 0.5px;
    
    /* 🔥 EFECTO DEGRADADO DE FUEGO PREMIUM */
    background: linear-gradient(135deg, #ff512f 0%, #f09819 50%, #ffcc00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Hace que el degradado pinte solo las letras */
    
    /* Sombra negra profunda detrás del texto para que se lea perfecto sobre cualquier fondo */
    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.9)); 
}

/* El Botón de WhatsApp Premium (Borde Dorado Reforzado) */
.btn-whatsapp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #0fa958; 
    color: #ffffff;
    padding: 10px 22px; 
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 50px; 
    text-transform: uppercase;
    
    /* 👑 REFUERZO DORADO AQUÍ */
    border: 4px solid #b2945d; /* AJUSTE: Más grueso (subió a 3px) */
    box-shadow: 0 0 12px rgba(178, 148, 93, 0.6); /* AJUSTE: Brillo dorado constante a los lados */
    
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-whatsapp-header:hover {
    background-color: #12c064; 
    color: #ffffff;
    /* Al pasar el mouse, el brillo se intensifica mezclando el dorado con la brasa */
    box-shadow: 0 0 20px rgba(255, 115, 0, 0.7), 0 0 10px rgba(178, 148, 93, 0.8); 
    transform: translateY(-2px); 
}

/* Estilo para que el icono SVG tenga el tamaño perfecto y sea blanco */
.icon-ws-svg {
    width: 30px;  /* AJUSTE: Subió de 18px a 22px para que se note más */
    height: 30px; /* AJUSTE: Subió de 18px a 22px */
    fill: #ffffff; 
}

/* ==========================================
   AJUSTE RESPONSIVE (Para que no se amontone en celulares)
   ========================================== */
@media (max-width: 768px) {
    .header-frase {
        display: none;
    }
    header.scroll-activo {
        padding: 6px 15px;
    }
    .header-scroll-content {
        margin-left: 15px;
        justify-content: flex-end;
    }
}

/* ==========================================
   AJUSTE RESPONSIVE (Para que no se amontone en celulares)
   ========================================== */
@media (max-width: 768px) {
    /* En celulares ocultamos la frase del centro para que no choque con el logo, 
       pero dejamos el botón de WhatsApp a la derecha */
    .header-frase {
        display: none;
    }
    header.scroll-activo {
        padding: 6px 15px;
    }
    .header-scroll-content {
        margin-left: 15px;
        justify-content: flex-end;
    }
}

/* ==========================================
   3. SECCIÓN HERO (Fondo Animado Protegiendo Botón y Textos)
   ========================================== */
.hero {
    text-align: center;
    /* AJUSTE: Reducimos a 60px para compactar la sección y subir el botón */
    padding: 60px 20px; 
    position: relative; 
    overflow: hidden;
    border-bottom: 2px solid #b2945d;
    background-color: #000; 
}

/* CAPA EXCLUSIVA PARA LA IMAGEN: La animación se queda solo aquí */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('fondoparrilla.png') no-repeat center center/cover;
    z-index: 1; 
    animation: brilloParrilla 5s infinite ease-in-out; 
}

/* LA ANIMACIÓN DE LA IMAGEN (Modifica el brillo aquí) */
@keyframes brilloParrilla {
    0%, 100% {
        filter: brightness(0.5) contrast(1.1); /* Oscuro base */
    }
    50% {
        filter: brightness(1.1) contrast(1.4) saturate(1.3); /* Brillo máximo */
    }
}

/* CAPA DEL CONTENIDO */
.hero-content {
    position: relative;
    z-index: 2; 
}

/* Título principal con tipografía robusta */
.hero h2 {
    font-family: 'Cinzel Decorative', serif; 
    font-size: 2.8rem; /* Bajó ligeramente de 3.2rem para prevenir desbordes en laptops */
    color: #fff;
    margin: 0 auto;
    max-width: 800px;
    text-transform: uppercase;
    letter-spacing: 2px; 
    text-shadow: 
        0 4px 10px rgba(0, 0, 0, 1),   
        0 0 30px rgba(255, 69, 0, 0.8);  
}

/* Estilo general para los párrafos del Hero */
.hero p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;       
    font-weight: 500;        
    max-width: 700px;        
    margin: 15px auto;
    color: #f1e1b9;          
    line-height: 1.6;        
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9); 
}

/* Estilo exclusivo para el último párrafo (¡Directo a tu mesa!) */
.hero p:last-of-type {
    font-size: 1.4rem;       
    font-weight: 700;        
    color: #ffcc00;          
    text-transform: uppercase;
    letter-spacing: 1px;     
    margin-top: 25px;        
    margin-bottom: 35px;     
}

/* ==========================================
   BOTÓN PREMIUM INTRACTO
   ========================================== */
.btn {
    display: inline-block;
    background: linear-gradient(180deg, #f1e1b9 0%, #b2945d 100%);
    color: #202020;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 1.1rem;
    text-transform: uppercase;
    border: 1px solid #8c7340;
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4);
    transition: all 0.3s ease;
}

.btn:hover {
    background: linear-gradient(180deg, #fff 0%, #f1e1b9 100%);
    box-shadow: 0 6px 20px rgba(255, 69, 0, 0.6);
    transform: translateY(-2px);
}

/* ==========================================
   4. MENÚ Y CUADRÍCULA
   ========================================== */
.seccion {
    padding: 60px 20px;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}

.seccion h2 {
    color: #f1e1b9;
    border-bottom: 2px solid #b2945d;
    padding-bottom: 15px;
    font-size: 2.2rem;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.menu-item {
    background-color: #101010;
    padding: 30px;
    border-radius: 8px;
    border: 2px solid #b2945d;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 69, 0, 0.3);
}

.menu-item h3 {
    margin-top: 0;
    color: #ffcc00;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.menu-item p {
    color: #ccc;
    line-height: 1.6;
}

/* ==========================================
   5. PIE DE PÁGINA
   ========================================== */
footer {
    background-color: #000000;
    text-align: center;
    padding: 30px;
    font-size: 1rem;
    border-top: 4px solid #b2945d;
    margin-top: 60px;
    color: #8c7340;
}

/* ==========================================
   6. RESPONSIVE (Celulares y Tablets)
   ========================================== */

/* ➔ REGLA GLOBAL DE SEGURIDAD PARA EL INICIO (Evita que el logo se mueva a la izquierda antes del scroll) */
header {
    display: block !important; /* Fuerza el centrado absoluto al inicio en cualquier pantalla */
}
header.scroll-activo {
    display: flex !important; /* Solo activa el flex al hacer scroll */
}

/* ➔ AJUSTE PARA COMPACTAR EL BOTÓN DE WHATSAPP EN TABLETS Y CELULARES (Menos de 768px) */
@media (max-width: 768px) {
    /* 📱 Oculta el "Pedir por" en tablets y móviles para que el botón sea más corto */
    .texto-ocultar-movil {
        display: none !important;
    }
    
    /* Reducimos un poco el relleno del botón para que encaje perfecto en pantallas medianas y chicas */
    .btn-whatsapp-header {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ➔ AJUSTE EXCLUSIVO PARA TABLETS GRANDES/MEDIANAS (Aquí sí cabe la frase) */
@media (min-width: 601px) and (max-width: 768px) {
    header.scroll-activo .header-frase {
        display: block;
        font-size: 1.1rem; /* Un poco más pequeña para asegurar que entre en un solo renglón */
        letter-spacing: 0px;
        margin: 0 10px;
    }

    header.scroll-activo {
        padding: 6px 20px;
    }

    .header-scroll-content {
        margin-left: 20px;
        display: flex;
        justify-content: space-between;
    }
}

/* ➔ AJUSTE PARA TABLETS CHICAS Y CELULARES (Menos de 600px: Desaparece la frase antes de que se haga vertical) */
@media (max-width: 600px) {
    /* Ocultamos la frase por completo en este punto para evitar que se amontone */
    .header-frase {
        display: none !important;
    }
    
    header.scroll-activo {
        padding: 6px 15px;
    }
    
    header.scroll-activo .header-scroll-content {
        margin-left: 15px;
        display: flex;
        justify-content: flex-end; /* Empuja el botón de WhatsApp a la derecha */
    }
}

/* ➔ AJUSTE EXCLUSIVO PARA CELULARES (Pantallas de 480px o menos - Sección Hero) */
@media (max-width: 480px) {
    .logo-especial {
        max-width: 300px; 
    }
    
    /* Ajuste Hero Compacto para que el botón "Ver el menú" sea visible de inmediato */
    .hero {
        padding: 25px 15px;
    }
    
    .hero h2 {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .hero p {
        font-size: 1rem;      
        max-width: 100%;        
        line-height: 1.4;       
        margin: 8px auto;
    }
    
    .hero p:last-of-type {
        font-size: 1.1rem;      
        margin-top: 12px;       
        margin-bottom: 18px;
    }
    
    .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 12px 20px;
    }
    
    .menu-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   7. ESTILOS EXCLUSIVOS: PESTAÑA MENÚ DIGITAL PREMIUM
   ========================================== */
.contenedor-menu-pagina {
    padding-top: 50px;
    min-height: 80vh;
    display: flex;
    justify-content: center;
}

.menu-premium-wrapper {
    width: 100%;
    max-width: 750px; /* Tamaño ideal tipo carta para leer en móviles y PC */
    margin: 0 auto;
    padding: 20px 25px;
    box-sizing: border-box;
}

/* Títulos principales */
.titulo-menu-digital {
    font-family: 'Cinzel Decorative', serif;
    color: #f1e1b9;
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.subtitulo-menu-digital {
    font-family: 'Montserrat', sans-serif;
    color: #a6937c;
    text-align: center;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 40px;
    font-style: italic;
}

/* Estructura de la Lista */
.lista-menu-premium {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Separación limpia entre platillos */
}

.item-menu-premium {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.item-menu-premium:hover {
    transform: translateX(4px); /* Pequeño efecto dinámico al pasar el cursor */
}

/* Fila de Nombre, Puntos y Precio */
.fila-principal {
    display: flex;
    align-items: baseline; /* Alinea perfectamente las letras con los números */
    justify-content: space-between;
}

.nombre-platillo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap; /* Evita que el nombre se parta en dos renglones */
}

/* Los puntitos guías elegantes */
.linea-puntos {
    flex-grow: 1;
    border-bottom: 2px dotted rgba(178, 148, 93, 0.3); /* Puntos dorados sutiles */
    margin: 0 15px;
    position: relative;
    top: -4px;
}

.precio-platillo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffcc00; /* El color amarillo brasa resalta el precio */
}

/* Estilo para las descripciones de abajo */
.ingredientes-platillo {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #b0b0b0;
    margin: 5px 0 0 0;
    line-height: 1.4;
}

/* Ajustes finos para pantallas muy pequeñas (Celulares) */
@media (max-width: 480px) {
    .titulo-menu-digital {
        font-size: 1.8rem;
    }
    .nombre-platillo, .precio-platillo {
        font-size: 1.1rem;
    }
    .ingredientes-platillo {
        font-size: 0.88rem;
    }
    .linea-puntos {
        margin: 0 8px; /* Menos espacio en celulares */
    }
}