/* FUENTES Y VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

@font-face {
    font-family: 'Loubag';
    src: url('../fonts/Loubag.woff2') format('woff2');
    font-display: swap;
}

:root {
    --primary: #085434;
    --secondary: #56896b;
    --accent: #f39c12;
    --text-white: #ffffff;
    --gray-bg: #f9f9f9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background: #fff; color: #333; }

/* HEADER */
header { 
    background: rgba(8, 84, 52, 0.98);
    padding: 10px 0; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 2000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.header-container { 
    width: 90%; max-width: 1200px; margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center; 
}

/* LOGO */
.logo { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; flex-shrink: 0; }
.logo i { font-size: 2.2rem; }
.logo h1 { font-family: 'Loubag', sans-serif; font-size: 1.6rem; color: white; margin: 0; white-space: nowrap; }

/* NAVEGACIÓN */
nav { display: block; flex-grow: 1; text-align: center; } 
nav ul { display: inline-flex; list-style: none; gap: 25px; align-items: center; }
nav a { color: white; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: 0.3s; }
nav a:hover { color: var(--accent); }

/* CONTENEDOR DERECHO */
.user-actions { display: flex; align-items: center; gap: 15px; }

/* BOTÓN LOGIN ESCRITORIO (Se oculta en móvil) */
.desktop-login {
    background: transparent; color: white;
    padding: 6px 15px; border-radius: 20px;
    font-weight: 600; font-size: 0.85rem;
    text-decoration: none; transition: 0.3s;
    border: 1px solid white;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.desktop-login:hover { background: white; color: var(--primary); }

/* ENLACE LOGIN MÓVIL (Se oculta en escritorio) */
.mobile-login { display: none; }

.menu-toggle { display: none; color: white; font-size: 1.5rem; cursor: pointer; margin-left: 10px; }

/* CARRITO */
.cart-wrapper { position: relative; display: flex; align-items: center; }
.cart-icon { position: relative; cursor: pointer; color: white; font-size: 1.4rem; padding: 5px; }
.cart-count { 
    position: absolute; top: -2px; right: -5px; 
    background: var(--accent); color: white; 
    font-size: 0.7rem; padding: 2px 5px; 
    border-radius: 50%; font-weight: bold;
}

/* HERO */
.hero { 
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1574071318508-1cdbab80d002?q=80&w=2000');
    background-size: cover; background-position: center;
    background-attachment: fixed;
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; color: white;
    padding-top: 60px;
}
.hero h2 { font-family: 'Loubag', sans-serif; font-size: 4.5rem; margin-bottom: 10px; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
.hero p { font-size: 1.3rem; max-width: 600px; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }

/* SECCIONES */
section { padding: 50px 0; }
.section-title { text-align: center; margin-bottom: 30px; margin-top: 0; }
.section-title h2 { font-family: 'Loubag', sans-serif; font-size: 2.5rem; color: var(--primary); }

/* PRODUCTOS */
.menu-grid { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; width: 90%; max-width: 1200px; margin: 0 auto; 
}

.product-card { 
    background: white; border-radius: 15px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    overflow: hidden; border: 1px solid #eee; 
    transition: transform 0.3s;
}
.product-card:hover { transform: translateY(-5px); }

.product-img { width: 100%; height: 200px; object-fit: cover; }
.product-info { padding: 15px; text-align: center; }
.product-info h4 { font-family: 'Loubag', sans-serif; color: var(--primary); font-size: 1.3rem; margin-bottom: 5px; }

/* BOTONES */
.card-actions { display: flex; gap: 10px; margin-top: 15px; border-top: 1px solid #f9f9f9; padding-top: 15px; }
.btn-ingredientes, .btn-agregar { flex: 1; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: 0.3s; }
.btn-ingredientes { background: white; border: 1px solid #ccc; color: #666; }
.btn-ingredientes:hover { background: #f0f0f0; color: #333; }
.btn-agregar { background: var(--primary); border: none; color: white; }
.btn-agregar:hover { background: var(--secondary); }

/* FORMULARIO */
.form-container { background: white; padding: 40px; border-radius: 15px; width: 90%; max-width: 800px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }

/* FOOTER */
footer { background: #222; color: white; padding: 50px 0 20px; margin-top: 80px; }
.footer-container { width: 90%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-col h3 { font-family: 'Loubag', sans-serif; color: var(--secondary); margin-bottom: 20px; }
.footer-col p, .footer-col li { color: #ccc; margin-bottom: 10px; font-size: 0.9rem; list-style: none; }

/* MODALES */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 400px; position: relative; animation: slideIn 0.3s; }
.modal-close { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 1.2rem; color: #999; }
.modal-title { font-family: 'Loubag', sans-serif; color: var(--primary); font-size: 1.5rem; margin-bottom: 15px; text-align: center; }

#add-qty { border: none; background: transparent; font-size: 1.2rem; font-weight: bold; color: var(--primary); width: 40px; }
#add-qty:focus { outline: none; }

/* RESPONSIVE */
@media (max-width: 900px) {
    /* Header ajustes */
    .header-container { padding: 0 10px; }
    .logo i { font-size: 1.8rem; }
    .logo h1 { font-size: 1.4rem; }
    
    /* Ocultar elementos de escritorio */
    nav { display: none; } 
    .desktop-login { display: none; }
    
    .menu-toggle { display: block; }
    
    /* Menú móvil desplegable */
    nav.active { 
        display: block; position: absolute; top: 100%; left: 0; width: 100%; 
        background: rgba(8, 84, 52, 0.98); padding: 30px 20px; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.1);
    }
    nav ul { display: flex; flex-direction: column; gap: 20px; width: 100%; }
    
    /* Estilo botón login móvil */
    .mobile-login { 
        display: inline-block; /* Visible solo aquí */
        background: white; color: var(--primary); 
        padding: 10px 30px; border-radius: 25px; 
        font-weight: 700; margin-top: 10px;
    }
    
    .hero h2 { font-size: 3rem; }
}

@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }