/* =========================================
   0. SISTEMA DE IDIOMAS (ES / EN / FR)
   ========================================= */
.t-en, .t-fr { display: none; }
.t-es, .t-en, .t-fr { font: inherit; letter-spacing: inherit; text-transform: inherit; }

body.idioma-en .t-es, body.idioma-en .t-fr { display: none; }
body.idioma-en .t-en { display: inline; }

body.idioma-fr .t-es, body.idioma-fr .t-en { display: none; }
body.idioma-fr .t-fr { display: inline; }

/* =========================================
   1. CONFIGURACIÓN BASE Y VARIABLES
   ========================================= */
html { 
    scroll-behavior: auto; 
    scroll-padding-top: 130px; /* ¡Aumentamos el colchón para que la barra de dos líneas no estorbe en celular! */
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Arial, sans-serif; }
body { background-color: #F0F5F2; color: #2C3E35; min-height: 100vh; margin: 0; }

/* =========================================
   2. HERO SECTION (Portada) & SWITCH IDIOMA
   ========================================= */
.hero { position: relative; background-color: #acc4b9; color: #2C3E35; text-align: center; padding: 3rem 1rem 2rem; margin-bottom: 2rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.contenedor-idioma { position: absolute; top: 20px; right: 20px; z-index: 10; }
.selector-idioma {
    background-color: #FDFBF7;
    border: 2px solid #487767;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #487767;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
}

.logo-mariposa { max-width: clamp(75px, 14vw, 120px); height: auto; margin-bottom: 0.5rem; }
.img-titulo { width: clamp(240px, 65vw, 500px); max-width: 100%; height: auto; margin-bottom: 0.5rem; }
.hero h2 { font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem; color: #4A3320; }

.btn-bajar { background-color: #5F8271; color: white; padding: 12px 24px; border-radius: 30px; text-decoration: none; font-weight: bold; letter-spacing: 1px; margin: 1rem 0 2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.15); transition: all 0.3s ease; display: inline-block; }
.btn-bajar:hover { background-color: #4A3320; transform: translateY(-3px); }

.alerta-alergia { background-color: #e3e0d9; border-left: 5px solid #487667; color: #2C3E35; padding: 12px 18px; border-radius: 8px; font-size: 0.75rem; font-weight: bold; line-height: 1.4; max-width: 90%; margin: 0 auto; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* =========================================
   3. MENÚ NAVEGACIÓN (Sticky Bar)
   ========================================= */
.nav-pegajosa { position: sticky; top: 0; background-color: #FDFBF7; z-index: 100; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 15px 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); margin-bottom: 2rem; }
.nav-link { text-decoration: none; color: #5F8271; font-size: 0.9rem; font-weight: bold; padding: 8px 16px; border-radius: 20px; transition: all 0.3s ease; background-color: #E8EFEA; }

.nav-link[href="#comidas"]:hover, .nav-link[href="#comidas"].activo { background-color: #e3e0d9; color: #4A3320; }
.nav-link[href="#desayunos"]:hover, .nav-link[href="#desayunos"].activo { background-color: #487667; color: #FDFBF7; }
.nav-link[href="#bebidas"]:hover, .nav-link[href="#bebidas"].activo { background-color: #b2c29d; color: #4A3320; }
.nav-link[href="#delhorno"]:hover, .nav-link[href="#delhorno"].activo { background-color: #698b64; color: #FDFBF7; }

.btn-inicio-nav {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.btn-inicio-nav:hover { transform: scale(1.1); }

.mariposa-nav {
    width: clamp(22px, 5vw, 30px);
    height: auto;
    margin-right: 6px;
    animation: aletear 3s ease-in-out infinite;
}
@keyframes aletear {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    50% { transform: scale(0.85, 1.05) rotate(-4deg); }
}

/* =========================================
   4. TARJETAS PREMIUM DE INICIO
   ========================================= */
.grid-tarjetas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 1rem; margin-bottom: 3rem; }

.tarjeta-comidas   { --bg-tarjeta: #e3e0d9; --color-deco: #477566; --color-texto: #4A3320; }
.tarjeta-desayunos { --bg-tarjeta: #487667; --color-deco: #B3C09B; --color-texto: #FDFBF7; }
.tarjeta-bebidas   { --bg-tarjeta: #b2c29d; --color-deco: #6D7C50; --color-texto: #4A3320; }
.tarjeta-delhorno  { --bg-tarjeta: #698b64; --color-deco: #BABD4F; --color-texto: #FDFBF7; }

.tarjeta-premium { position: relative; display: block; background-color: var(--bg-tarjeta); border-radius: 12px; padding: 2rem 1rem; text-align: center; text-decoration: none; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tarjeta-premium:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.contenido-tarjeta { position: relative; z-index: 2; }

.titulo-cafe { color: var(--color-texto); font-size: clamp(1.15rem, 6.5vw, 2.2rem); font-weight: 900; letter-spacing: clamp(0.5px, 0.6vw, 2px); margin-bottom: 0.2rem; }
.mariposa-mini { width: clamp(28px, 6vw, 40px); margin: 0.5rem 0; }
.subtitulo-cursiva { font-family: 'Brush Script MT', cursive; color: var(--color-texto); font-size: 1.5rem; margin-bottom: 1rem; }

.separador { display: flex; flex-direction: column; align-items: center; color: var(--color-deco); }
.separador hr { width: 80%; border: none; border-top: 1.5px solid var(--color-deco); margin: 5px 0; }
.separador .horario { color: var(--color-texto); }
.horario { font-size: 0.75rem; letter-spacing: 2px; font-weight: bold; }

.hoja { position: absolute; width: clamp(100px, 27vw, 250px); opacity: 0.8; z-index: 1; transition: transform 0.5s ease; }
.hoja-izq { top: -40px; left: -40px; transform-origin: top left; }
.hoja-der { top: -40px; right: -40px; transform-origin: top right; }

@keyframes brisa-izq { 0% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } 100% { transform: rotate(0deg); } }
@keyframes brisa-der { 0% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } 100% { transform: rotate(0deg); } }
.tarjeta-premium:hover .hoja-izq { animation: brisa-izq 2s ease-in-out infinite; }
.tarjeta-premium:hover .hoja-der { animation: brisa-der 2s ease-in-out infinite; }

/* =========================================
   5. FOOTER GLOBAL Y MAPA
   ========================================= */
footer { background-color: #acc4b9; padding: 3rem 1rem; text-align: center; border-top-left-radius: 30px; border-top-right-radius: 30px; margin-top: 3rem; }
.mapa-container iframe { width: 100%; max-width: 600px; height: 300px; border-radius: 12px; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 2rem; }

.footer-heading {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: #4A3320;
    margin-bottom: 1.2rem;
}
.footer-heading::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #487667;
    margin: 10px auto 0 auto;
    opacity: 0.6;
}

.info-contacto { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 2rem; }
.enlace-bonito { color: #4A3320; text-decoration: none; font-size: 0.95rem; font-weight: 500; border-bottom: 1px dashed #4A3320; padding-bottom: 2px; transition: all 0.3s ease; }
.enlace-bonito:hover { color: #FDFBF7; border-bottom-color: #FDFBF7; }
.icono-contacto { margin-right: 4px; }
.handle-ig { font-family: 'Brush Script MT', cursive; font-style: italic; font-size: 1.2rem; }

.qr-card {
    display: inline-block;
    margin: 0 auto 1.5rem auto;
    background-color: #acc4b9;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.qr-card:hover { transform: scale(1.05); box-shadow: 0 6px 14px rgba(0,0,0,0.2); }
.qr-ig { display: block; width: clamp(85px, 18vw, 110px); height: clamp(85px, 18vw, 110px); }

/* =========================================
   6. DISEÑO DE LOS PLATILLOS INDIVIDUALES
   ========================================= */
#contenedor-menus { max-width: 800px; margin: 0 auto; padding: 0 1rem 4rem 1rem; }
.seccion-platillos { 
    padding: 50px 1rem 4rem 1rem; 
    margin-bottom: 2rem; 
    border-radius: 20px; 
    overflow: hidden; 
    position: relative; 
}

.cabecera-seccion {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem 1rem 2rem 1rem;
}

.cabecera-seccion h2, 
.cabecera-seccion .subtitulo-cursiva, 
.horario-detalle, 
.categoria-menu h3, 
.item-header h4, 
.precios,
.extras li,
.precio-extra {
    color: var(--color-texto);
}

.cabecera-seccion h2 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 2.5rem;
    color: var(--color-texto);
}
.horario-detalle { font-size: 0.85rem; font-weight: bold; letter-spacing: 1px; }
.categoria-menu h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.cabecera-seccion h2,
.cabecera-seccion .subtitulo-cursiva,
.cabecera-seccion .separador-seccion,
.cabecera-seccion .mariposa-seccion {
    position: relative;
    z-index: 2;
}

.hoja-seccion {
    position: absolute;
    width: clamp(150px, 40vw, 360px);
    opacity: 0.6; 
    z-index: 1;
    pointer-events: none; 
}

.hoja-izq-seccion { top: -50px; left: -40px; transform-origin: top left; }
.hoja-der-seccion { top: -50px; right: -40px; transform-origin: top right; }

.seccion-platillos .hoja-izq-seccion { animation: brisa-izq 2s ease-in-out infinite; }
.seccion-platillos .hoja-der-seccion { animation: brisa-der 2s ease-in-out infinite; }

.separador-seccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}

.separador-seccion hr {
    width: 90%;
    max-width: 450px;
    border: none;
    border-top: 1.5px solid var(--color-titulos);
    margin: 6px 0;
}

.item-menu { 
    background-color: var(--bg-item);
    padding: 1.2rem 1.5rem; 
    border-radius: 12px; 
    margin-bottom: 1rem; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    border-left: 5px solid var(--color-titulos); 
    transition: transform 0.2s ease; 
}
.item-menu:hover { transform: scale(1.02); }

.item-header {
    display: grid;
    grid-template-columns: 1fr 50px 50px;
    align-items: baseline;
    border-bottom: 1px dashed var(--color-titulos);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.item-header .precios:only-of-type {
    grid-column: 2 / 4;
    text-align: right;
}

.item-header h4 { font-size: 1.2rem; }
.precios { font-weight: bold; font-size: 1.1rem; }
.desc-item { font-size: 0.9rem; color: var(--color-desc); } 

.extras { list-style: none; margin-top: 0.5rem; padding: 0; }
.extras li { display: flex; justify-content: space-between; font-style: italic; font-size: 0.85rem; margin-bottom: 0.3rem; padding-left: 1rem; }
.precio-extra { font-weight: bold; }

/* =========================================
   7. COLORES Y ESTILOS POR SECCIÓN DE MENÚ
   ========================================= */
.tema-comidas { background-color: #e3e0d9; --color-titulos: #477566; --color-texto: #645047; --bg-item: rgba(255, 255, 255, 0.6); --color-desc: #555; }
.tema-desayunos { background-color: #487667; --color-titulos: #B3C09B; --color-texto: #FDFBF7; --bg-item: rgba(0, 0, 0, 0.15); --color-desc: #E8EFEA; }
.tema-bebidas { background-color: #b2c29d; --color-titulos: #6D7C50; --color-texto: #645047; --bg-item: rgba(255, 255, 255, 0.5); --color-desc: #555; }
.tema-delhorno { background-color: #698b64; --color-titulos: #BABD4F; --color-texto: #FDFBF7; --bg-item: rgba(0, 0, 0, 0.15); --color-desc: #E8EFEA; }

/* =========================================
   8. DECORACIÓN FOOTER DE SECCIONES
   ========================================= */
.decoracion-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    margin-top: 4rem;
    padding-bottom: 1rem;
    width: 100%; 
}

.deco-rama {
    width: clamp(60px, 15vw, 170px); 
    height: auto;
    object-fit: contain;
}

.tema-bebidas .deco-rama, .tema-delhorno .deco-rama {
    width: clamp(45px, 9vw, 100px);
}

.texto-deco {
    color: var(--color-titulos);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 1.6rem;
    text-transform: uppercase;
}

@keyframes brisa-expandir-izq {
    0% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
    100% { transform: translateX(0); }
}

@keyframes brisa-expandir-der {
    0% { transform: translateX(0); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(0); }
}

.decoracion-footer .hoja-izq-footer { animation: brisa-expandir-izq 3s ease-in-out infinite; }
.decoracion-footer .hoja-der-footer { animation: brisa-expandir-der 3s ease-in-out infinite; }

.encabezado-precios {
    display: grid;
    grid-template-columns: 1fr 50px 50px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--color-desc);
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    padding: 0 1.5rem 0.5rem 1.5rem;
}
.encabezado-precios span { text-align: center; }
.encabezado-precios span:first-child { grid-column: 2; }
.nota-leches { text-align: right; font-size: 0.7rem; font-style: italic; color: var(--color-desc); margin-top: 1rem; padding: 0 1.5rem; }

/* =========================================
   10. PESTAÑAS DE SUBCATEGORÍA
   ========================================= */
.subnav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 1rem 2rem 1rem;
}

.tab-link {
    flex: 0 0 auto;
    background-color: var(--bg-item);
    border: 1.5px solid var(--color-titulos);
    color: var(--color-texto);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.tab-link:hover { filter: brightness(1.1); }
.tab-link.activo { background-color: var(--color-titulos); color: #FDFBF7; border-color: var(--color-titulos); }

.categoria-tab { display: none; }
.categoria-tab.mostrar { display: block; }

.seccion-platillos { display: none; }
.seccion-platillos.visible { display: block; }

@media (max-width: 480px) {
    .hoja-izq { top: -20px; left: -20px; }
    .hoja-der { top: -20px; right: -20px; }
    .hoja-izq-seccion { top: -25px; left: -20px; }
    .hoja-der-seccion { top: -25px; right: -20px; }
    .texto-deco { font-size: 1.2rem; letter-spacing: 1.5px; }
    .cabecera-seccion h2 { font-size: 1.9rem; }
}

@media (max-width: 768px) {
    .seccion-platillos {
        padding-top: 20px; /* Hace que el contenido suba un poco más de forma natural */
    }
}