/* Estilos generales del cuerpo */
/* --- Variables de tema (neutras) --- */
:root{
    --brand-primary: #1f2a44;
    --brand-secondary: #2f3f58;
    --brand-accent: #c59d5f;
    --brand-surface: rgba(255, 255, 255, 0.94);
    --text-main: #333;
    --text-inverse: #ffffff;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('img/fondo_pagina.jpg');
    background-size: cover;
    background-position: center;
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6, .nav-button, .cta-button {
    font-family: 'Playfair Display', serif;
}

/* Estilos del encabezado */
header {
    background: linear-gradient(180deg, rgba(15,27,46,0.8), rgba(15,27,46,0.35)), url('./img/banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text-inverse);
    padding: 2rem 0;
    position: relative;
}

.header-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    padding-right: 2rem;
}

nav {
    display: flex;
    gap: 1rem; /* Espacio entre los botones */
    margin-left: auto;
}

.lang-switch {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-inverse);
    font-weight: 700;
    z-index: 1800;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

.lang-switch label {
    font-size: 0.95rem;
    color: var(--text-inverse);
    white-space: nowrap;
}

.lang-switch select {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.16);
    color: var(--text-inverse);
    padding: 0.3rem 0.6rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    cursor: pointer;
    min-width: 110px;
}

.lang-switch select option {
    background: #ffffff;
    color: #1f2a44;
}

.lang-switch select:focus-visible {
    outline: 2px solid var(--text-inverse);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .header-container { padding-right: 7rem; }
    .lang-switch {
        position: absolute;
        right: 4rem;
        top: 50%;
        transform: translateY(-50%);
        gap: 0.25rem;
        margin-left: 0;
    }
    .lang-switch label { display: none; }
    .lang-switch select { min-width: 90px; padding: 0.3rem 0.5rem; }
}

.nav-button {
    color: var(--text-inverse);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 6px;
    transition: background-color 0.25s, color 0.25s, transform 0.15s, border-color 0.25s;
}

.nav-button:hover,
.nav-button.active {
    background-color: var(--text-inverse);
    color: var(--brand-primary);
    border-color: var(--text-inverse);
    transform: translateY(-2px);
}



.logo {
    height: 100px; /* Puedes ajustar esta altura */
}

/* Limpieza de adornos navideños: sin guirnaldas ni iconografía estacional */

/* Contenedor principal para el contenido */
main {
    flex: 1 0 auto; /* Permite que el main crezca para empujar el footer hacia abajo */
    padding: 1rem;
    /* Usamos un ancho relativo al viewport para que el contenido ocupe ~70% en desktop */
    width: 70vw;
    max-width: 1100px; /* límite razonable en pantallas muy grandes */
    min-width: 360px; /* evita que se encoja demasiado en pantallas medianas */
    margin: 1rem auto;
    box-sizing: border-box;
}

/* Ajustes por breakpoint para escalar el ancho del contenedor principal */
@media (max-width: 1024px) {
    main { width: 80vw; }
}

@media (max-width: 768px) {
    main { width: 90vw; }
}

@media (max-width: 520px) {
    main { width: 95vw; padding: 0.75rem; }
}

/* Estilos para cada sección */
main section {
    /* Hacemos el fondo de la sección semi-transparente para ver la imagen de fondo */
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

main section h2 {
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

/* --- Estilos neutros para secciones principales --- */
#seccion1, #seccion2, #seccion3 {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.75rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    position: relative;
    overflow: visible;
}

#seccion1 h2, #seccion2 h2, #seccion3 h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--brand-primary);
    text-shadow: none;
    margin-bottom: 0.5rem;
}

#seccion1 .feature-image, #seccion2 .feature-image, #seccion3 .feature-image {
    border: 3px solid rgba(31,42,68,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

/* Se eliminan adornos y animaciones estacionales */
#seccion1::after, #seccion2::after, #seccion3::after { display: none; }

#seccion1 .feature-text li::before, #seccion2 .feature-text li::before, #seccion3 .feature-text li::before {
    color: var(--brand-primary);
}

/* --- Estilos del carrusel en seccion2 --- */
.carousel {
    position: relative;
    /* ocupar más espacio en desktop para imágenes grandes */
    flex: 0 0 65%;
    max-width: 65%;
    width: 65%;
    margin: 0;

    overflow: hidden; /* clip para que las imágenes no se salgan */
    box-sizing: border-box;
    min-height: 420px;
    align-self: center; /* centra verticalmente dentro del contenedor */
}
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    /* Si por alguna razón las slides son absolutas, garantizamos altura */
    min-height: 320px;
}
.carousel-slide {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    box-sizing: border-box;
    padding: 0.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 980ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

.carousel-slide.active img {
    animation: carouselZoomIn 6.5s ease-out both;
}

@keyframes carouselZoomIn {
    from {
        transform: scale(1.02);
    }
    to {
        transform: scale(1.08);
    }
}

/* Forzar que imágenes dentro del carousel no usen el ancho global de .feature-image */
.carousel .feature-image { width: 100%; max-width: 100%; }

/* En la disposición reverse, centra verticalmente el contenido para que el carrusel quede alineado */
.feature-content.reverse { align-items: center; }
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    border: 2px solid rgba(0,0,0,0.08);
    color: var(--brand-primary);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    z-index: 30;
}
.carousel-control.prev { left: 14px; }
.carousel-control.next { right: 14px; }
.carousel-control:hover { transform: translateY(-50%) scale(1.03); }

/* Indicators (dots) */
.carousel-indicators {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    gap: 8px;
    z-index: 2010;
}
.carousel-indicators .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 0;
    cursor: pointer;
}
.carousel-indicators .carousel-dot.active {
    background: var(--brand-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Make indicators larger on touch devices */
@media (max-width: 768px) {
    .carousel-indicators .carousel-dot { width: 14px; height: 14px; }
}

/* Responsive: reduce el tamaño y mueve controles dentro */
@media (max-width: 768px) {
    .carousel { max-width: 100%; }
    .carousel-control.prev { left: 12px; }
    .carousel-control.next { right: 12px; }
}


/* --- Clases de utilidad --- */
/* Tamaño específico para imágenes de la página Desayunos */
.breakfast-image {
    width: 100%;
    max-width: 760px; /* más grande en desktop */
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 1rem auto;
}

.text-center {
    text-align: center;
}

/* Estilos del pie de página */
footer {
    background-color: #34495e;
    color: white;
    padding: 0.3rem 0.7rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    row-gap: 0.2rem;
    align-items: center;
    font-size: 0.8rem;
    position: relative;
    z-index: 10010;
}

footer p {
    margin: 0;
    text-align: center;
    grid-column: 1 / 3;
}

.footer-legal {
    grid-column: 1 / 3;
    justify-self: center;
    /* Estilo neutral por defecto */
    font-size: 0.78rem;
    padding: 0.22rem 0.62rem !important;
    border-width: 1px;
    border-radius: 5px;
}

/* --- Estilos para los iconos de redes sociales en el footer --- */
.social-media {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    justify-self: end;
}

.social-icon {
    height: 30px; /* Tamaño más discreto por defecto */
    width: 30px;
    border-radius: 6px;
    transition: transform 0.18s ease, opacity 0.2s ease;
    object-fit: cover;
    display: inline-block;
}

@media (max-width: 520px) {
    main { width: 95vw; padding: 0.75rem; }
}

/* Estilos para cada sección */

/* --- Widget de chat FAQ --- */
.wd-chat-toggle {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); /* Más alto para liberar footer */
    z-index: 12000;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--text-inverse);
    padding: 0.8rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.wd-chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.28); }

.wd-chat-panel {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    width: min(360px, 92vw);
    max-height: min(70vh, 520px);
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 12000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.2s ease, visibility 0.2s ease;
}

.wd-chat-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wd-chat-header {
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--text-inverse);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.wd-chat-header h3 { margin: 0; font-size: 1rem; }
.wd-chat-header button { background: transparent; border: none; color: var(--text-inverse); cursor: pointer; font-size: 1.1rem; }

.wd-chat-body {
    padding: 0.85rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: #f8fafc;
}

.wd-chat-msg { display: flex; gap: 0.5rem; align-items: flex-start; }
.wd-chat-msg .bubble {
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    max-width: 90%;
    line-height: 1.45;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.wd-chat-msg.user { justify-content: flex-end; }
.wd-chat-msg.user .bubble { background: #e8edf7; color: #1f2a44; }
.wd-chat-msg.bot .bubble { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); }

/* Indicador de escritura */
.wd-chat-msg.bot.typing .bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c4cad6;
    animation: typing-bounce 1s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.75; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.wd-chat-footer {
    padding: 0.8rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.wd-chat-input { flex: 1; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); font-size: 0.95rem; }
.wd-chat-send { padding: 0.65rem 0.95rem; border-radius: 10px; border: none; background: var(--brand-primary); color: var(--text-inverse); font-weight: 700; cursor: pointer; }

.wd-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wd-chat-chip {
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

@media (max-width: 520px) {
    .wd-chat-panel { right: 0.5rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); width: 94vw; max-height: 72vh; }
    .wd-chat-toggle { right: 0.65rem; bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)); padding: 0.7rem 0.9rem; }
    .wd-chat-header h3 { font-size: 0.95rem; }
    .wd-chat-input { font-size: 0.9rem; }
}

.social-icon:hover {
    transform: translateY(-2px) scale(1.02);
    opacity: 0.95;
}

/* --- Aviso legal layout --- */
.legal-container {
    max-width: 920px;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.75;
    display: grid;
    gap: 1.15rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 12px 26px rgba(0,0,0,0.1);
}

.legal-container h2,
.legal-container h3 {
    text-align: center;
    margin-bottom: 0.3rem;
}

.legal-title {
    color: var(--brand-primary);
    font-size: 2rem;
}

.legal-intro {
    margin: 0;
    color: #2f3f58;
}

.legal-meta {
    display: grid;
    gap: 0.55rem;
    background: rgba(31, 42, 68, 0.05);
    border: 1px solid rgba(31, 42, 68, 0.12);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.legal-meta p {
    margin: 0;
}

.legal-note {
    margin: 0;
    font-size: 0.96rem;
    color: #4b596d;
    text-align: center;
}

.legal-container h3 {
    color: var(--brand-primary);
    margin-top: 0.35rem;
}

.legal-container p,
.legal-container ul {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    box-sizing: border-box;
}

.legal-container ul {
    padding-left: 2rem;
    margin: 0;
}

.legal-container li { margin-bottom: 0.35rem; }

.legal-highlight {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 1rem;
}

.legal-highlight ul {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0.4rem 0 0;
    list-style: none;
}

.legal-highlight li {
    margin-bottom: 0.4rem;
}

.legal-back {
    background: linear-gradient(180deg, #2f3f58, #1f2a44);
    border-color: rgba(15, 27, 46, 0.95);
    color: var(--text-inverse);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.legal-back:hover {
    background: linear-gradient(180deg, #38506f, #263753);
}

/* --- Estilos para la página de Menú --- */
.menu-grid {
    display: grid;
    /* Crea una cuadrícula responsive que se ajusta al tamaño de la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Estela de cursor (desktop) */
.wd-cursor-trail {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    overflow: visible;
}

.wd-spark {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, #ffd166 0%, #fca311 45%, rgba(255, 209, 102, 0.1) 100%);
    border-radius: 50%;
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(var(--rot, 0deg));
    animation: wd-spark-float 0.8s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.7)) drop-shadow(0 0 10px rgba(255, 209, 102, 0.45));
    mix-blend-mode: screen;
}

@keyframes wd-spark-float {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) translate(0, 0) scale(var(--scale, 1)) rotate(var(--rot, 0deg));
    }
    70% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, -12px)) scale(calc(var(--scale, 1) * 1.15)) rotate(var(--rot, 0deg));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(calc(var(--dx, 0px) * 1.2), calc(var(--dy, -12px) * 1.1)) scale(calc(var(--scale, 1) * 0.7)) rotate(var(--rot, 0deg));
    }
}

.menu-detail {
    width: min(100%, 900px);
    margin: 0 auto;
}

.menu-detail img,
.detail-image {
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: 0 auto 1rem;
}

.menu-item {
    display: block;
    position: relative;
    overflow: hidden; /* Oculta las partes de la imagen que se salen al hacer zoom */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-5px); /* Eleva la tarjeta al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.menu-item img {
    width: 100%;
    height: 250px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
    display: block;
    transition: transform 0.3s ease;
}

.menu-item:hover img {
    transform: scale(1.05); /* Efecto de zoom suave sobre la imagen */
}

.menu-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 2rem 1rem 1rem;
    text-align: center;
    font-weight: 700;
}

.menu-item-name h3 {
    margin: 0;
    font-size: 1.25rem;
}

.menu-detail .button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.72rem 1.55rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-inverse);
    background: linear-gradient(180deg, #9ca2aa, #7e858f);
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.menu-detail .button:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 22px rgba(0,0,0,0.24);
    filter: brightness(1.03);
}

.menu-detail .button:active {
    transform: translateY(0) scale(0.99);
}

.menu-detail .button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

/* Controles flotantes para música de fondo (eliminados en versión post-navidad) */

/* --- Estilos para el Lightbox (ver imagen en grande) --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 3000; /* Aumentado para estar por encima del menú móvil */
}

/* Cuando el enlace apunta al ID del lightbox, se muestra */
.lightbox-overlay:target {
    display: block; /* Se muestra como bloque */
    /* Habilitamos el scroll vertical si el contenido es más alto */
    overflow-y: auto;
    /* Ocultamos el scroll horizontal para evitar problemas en móvil */
    overflow-x: hidden;
}

.lightbox-content {
    /* Usamos flexbox para centrar la imagen vertical y horizontalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    /* El contenedor debe tener al menos la altura de la pantalla para que el centrado vertical funcione */
    min-height: 100%;
    /* Añadimos un padding para que la imagen no toque los bordes */
    padding: 1rem;
    /* ¡LA CLAVE! Esto asegura que el padding se incluya en el ancho total y no cause desbordamiento */
    box-sizing: border-box;
}

.lightbox-content img {
    /* Hacemos la imagen responsive dentro del lightbox */
    max-width: 100%; /* La imagen no será más ancha que su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
}

.menu-zoomable {
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.menu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 14, 22, 0.9);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.menu-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.menu-lightbox-image {
    max-width: min(92vw, 1200px);
    max-height: 86vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
    user-select: none;
    -webkit-user-drag: none;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
}

.menu-lightbox.open .menu-lightbox-image {
    transform: scale(1);
    opacity: 1;
}

.menu-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: rgba(20, 26, 36, 0.85);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-lightbox-close:hover {
    transform: scale(1.06);
    background: rgba(44, 62, 80, 0.95);
}

.menu-zoom-hint {
    margin: 0 0 0.55rem;
    font-weight: 700;
    font-style: italic;
    color: var(--brand-primary);
    text-align: center;
}

.lightbox-close {
    position: fixed; /* La fijamos a la ventana para que siempre esté visible */
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: white;
    text-decoration: none;
    font-weight: bold;
    z-index: 3001; /* Debe estar por encima del overlay del lightbox */
}

/* --- Estilos para la página de Batidos (un solo producto) --- */
.single-product-display {
    max-width: 500px; /* Define un ancho máximo más grande para el producto */
    margin: 2rem auto; /* Centra el contenedor en la sección */
}

.single-product-display .menu-item img {
    height: 400px; /* Aumenta la altura de la imagen para que sea más grande */
}

/* --- Estilos para las secciones con imagen en index.html --- */
.feature-content {
    display: flex;
    align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
    gap: 2.5rem; /* Espacio entre la imagen y el texto */
}

/* Invierte el orden para la imagen a la derecha */
.feature-content.reverse {
    flex-direction: row-reverse; 
}

.feature-image {
    width: 60%;
    max-width: 720px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.feature-text {
    flex: 1; /* El texto ocupa el espacio restante */
}

.feature-text ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.feature-text li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

.feature-text li::before {
    content: '✓';
    color: #2c3e50; /* Color primario del tema */
    position: absolute;
    left: 0;
}

/* --- Estilos para la sección de Llamada a la Acción (CTA) --- */
.cta-section {
    text-align: center;
    background-color: rgba(52, 73, 94, 0.9); 
    color: white;
    padding: 1rem 1.25rem; /* Más compacto */
}

.cta-section h2 {
    color: white;
    border-bottom: none;
}

.cta-buttons {
    margin-top: 0.8rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Para que los botones se apilen en móvil */
}

.cta-button {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: 2px solid white;
    color: white; /* force white text for primary CTA (avoid default/visited purple) */
    background-color: transparent;
}

.cta-button:hover {
    transform: translateY(-3px);
}

.cta-button.secondary {
    background-color: transparent;
    color: white;
}

/* Ajuste: permitir imágenes grandes en secciones 1/2/3 (desktop) */
#seccion2 .feature-image,
#seccion3 .feature-image {
    max-width: 720px;
}

/* --- Estilos para la página de Información --- */
.info-layout {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se apilen si no caben */
    gap: 2rem;
    align-items: flex-start;
    margin-top: 2rem;
}

.map-container {
    flex: 2 1 400px; /* flex-grow, flex-shrink, flex-basis */
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

.info-details {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 8px;
}

.info-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-details li {
    margin-bottom: 1rem;
}

.info-details li:last-child {
    margin-bottom: 0;
}

.contact-dashboard {
    margin-top: 1.6rem;
}

.info-intro p {
    margin-top: 0.8rem;
    max-width: 68ch;
    line-height: 1.75;
    color: var(--brand-secondary);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1.75rem;
}

.info-panel {
    background: var(--brand-surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 1.3rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.info-panel h3 {
    margin: 0 0 1.1rem;
    color: var(--brand-primary);
    font-size: 1.6rem;
    letter-spacing: 0.01em;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table th,
.schedule-table td {
    text-align: left;
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.schedule-table thead th {
    background-color: rgba(197, 157, 95, 0.18);
    color: var(--brand-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.schedule-table tbody th {
    color: var(--brand-primary);
    font-weight: 700;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.65;
}

.contact-list strong {
    color: var(--brand-primary);
}

.contact-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.professional-map {
    margin-top: 1.8rem;
}

.professional-map iframe {
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.reservation-cta-wrap {
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
}

.reservation-call-btn {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(180deg, #8f9399, #727780);
    color: var(--text-inverse);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 0.8rem 2.1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    animation: reservationPulse 2.6s ease-in-out infinite;
}

.reservation-call-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    filter: brightness(1.05);
}

.reservation-call-btn:active {
    transform: translateY(0) scale(0.99);
}

.reservation-call-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

@keyframes reservationPulse {
    0%,
    100% {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
    }
}

/* --- Carrusel de reseñas --- */
.reviews-section {
    margin-top: 2.5rem;
    background: var(--brand-surface);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.reviews-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.reviews-header h2 { margin: 0; }

.reviews-header p {
    margin: 0;
    color: #556;
    font-size: 0.98rem;
}

.reviews-carousel {
    position: relative;
    margin-top: 1rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.5rem;
    overflow: hidden;
}

.reviews-track {
    position: relative;
    min-height: 180px;
}

.review-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 320ms ease-in-out;
}

.review-slide.active { opacity: 1; }

.review-card {
    background: linear-gradient(180deg, #fff, #f9fafc);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,0.05);
    background: #eef2f7;
}

.review-author { font-weight: 700; color: #1f2a44; }
.review-date { color: #6b7280; font-size: 0.9rem; }

.review-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #d97706;
    font-weight: 700;
}

.review-text {
    margin: 0.25rem 0 0;
    line-height: 1.6;
    color: #2f3f58;
}

.reviews-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}

.reviews-control:hover { transform: translateY(-50%) scale(1.03); box-shadow: 0 10px 18px rgba(0,0,0,0.16); }

.reviews-control.prev { left: 6px; }
.reviews-control.next { right: 6px; }

.reviews-indicators {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.reviews-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.05);
    padding: 0;
    cursor: pointer;
}

.reviews-indicators button.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.reviews-note {
    margin-top: 0.75rem;
    color: #6b7280;
    font-size: 0.92rem;
}

@media (max-width: 768px) {
    .reviews-section { padding: 1.1rem; }
    .reviews-carousel { padding: 0.9rem 0.9rem 1.1rem; }
    .reviews-control { width: 34px; height: 34px; }
    .review-card { padding: 0.9rem; }
}

/* --- Estilos para el Menú Hamburguesa (oculto en escritorio) --- */
.menu-toggle {
    display: none;
}

.menu-icon {
    display: none; /* Se mostrará solo en móviles */
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
}

.menu-icon span {
    background: white;
    display: block;
    height: 3px;
    width: 25px;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .feature-content,
    .feature-content.reverse {
        flex-direction: column; /* Apila los elementos verticalmente */
        text-align: center;
    }

    /* --- Estilos para el menú de navegación en móvil --- */
    .header-container {
        position: relative;
        padding: 0 1rem; /* Mantiene el espaciado en los bordes */
        padding-right: 6rem; /* espacio reservado para banderas + menú */
        justify-content: space-between; /* Mostrar logo a la izquierda y menú a la derecha */
        align-items: center;
        gap: 1rem;
    }

    .logo {
        display: block; /* Mostrar logo en móvil */
        height: 52px; /* Tamaño medio para que destaque sin ocupar demasiado */
    }

    .menu-icon {
        display: block; /* Mostramos el icono de hamburguesa */
    }

    nav {
        position: fixed; /* Se posiciona sobre toda la página */
        top: 0;
        left: 0;
        width: 100%;
    transition: width 0.2s ease, opacity 0.2s ease, min-width 0.2s ease;
        height: 100vh; /* Ocupa toda la altura */
        background-color: rgba(120, 128, 138, 0.94); /* Gris más claro */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        opacity: 0;
        transform: perspective(900px) translateZ(-180px) scale(0.94);
        transform-origin: center center;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
        pointer-events: none;
        z-index: 1000;
    }

    /* Cuando el checkbox está activo, mostramos el menú */

.audio-controls.collapsed {
    padding: 0.35rem 0.45rem;
    gap: 0.25rem;
}

.audio-controls.collapsed .audio-slider {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}

.audio-controls.collapsed .audio-mute {
    display: none;
}

.audio-controls.collapsed .audio-btn.audio-play {
    padding: 0.35rem;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    .menu-toggle:checked ~ nav {
        opacity: 1;
        transform: perspective(900px) translateZ(0) scale(1);
        pointer-events: auto;
    }

    .nav-button {
        font-size: 1.5rem;
        border-width: 3px;
    }

    /* Animación del icono de hamburguesa a una 'X' */
    .menu-toggle:checked ~ .menu-icon span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle:checked ~ .menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle:checked ~ .menu-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -8px);
    }

    /* Hacemos que en móvil los detalles de información no tengan fondo y se ajusten */
    .info-details {
        background-color: transparent;
        padding: 1.5rem 0 0 0; /* Solo un poco de espacio arriba */
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-panel {
        padding: 1rem;
    }

    .info-panel h3 {
        font-size: 1.35rem;
    }

    .info-intro p {
        margin-top: 0.6rem;
        line-height: 1.65;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.65rem 0.55rem;
        font-size: 0.96rem;
    }

    .reservation-call-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    /* Ajustamos el banner y la sección CTA para que no sean tan grandes en móvil */
    header {
        padding: 1.5rem 0;
    }

    .cta-section h2 {
        font-size: 1.8rem; /* Reducimos el tamaño del título en la CTA */
    }

    /* Mejoras para imágenes en secciones y carrusel en móvil */
    /* Hacemos que las imágenes ocupen más espacio y sean más grandes */
    .feature-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        max-height: 420px; /* Limitamos la altura para que no sobrepase la pantalla */
        margin: 0 auto 1rem auto;
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(0,0,0,0.32);
    }

    /* Secciones 1/2/3: quitar la restricción de max-width específica para seccion2/3 */
    #seccion2 .feature-image,
    #seccion3 .feature-image {
        max-width: 100%;
    }

    /* Carrusel ocupa toda la fila y se muestra más alto en móvil */
    .carousel { flex: 0 0 100%; max-width: 100%; width: 100%; min-height: 520px; }
    .carousel-track { min-height: 520px; }
    .carousel-slide img { max-height: 900px; }

    /* Coloca los controles a los lados dentro del contenedor para que sean fáciles de tocar */
    .carousel-control.prev { left: 10px; }
    .carousel-control.next { right: 10px; }
}

/* Forzar que el banner sea visible en móviles: asegurar altura mínima y posición */
@media (max-width: 768px) {
    header {
        background-position: center top;
        background-size: cover;
        padding: 0.9rem 0; /* equilibrio entre presencia y espacio */
        min-height: 140px; /* más alto para que el banner sea visible sin recortes extraños */
    }

    /* Asegurar que el garland no oculte el banner en móviles */
    .garland { top: -10px; height: 30px; }
    .garland .strand { height: 14px; }
}
/* Ajustes específicos en móvil para imágenes de detalle y tarjetas */
@media (max-width: 768px) {
    .menu-item img { height: 180px; }
    .menu-detail img { max-height: 420px; width: 100%; height: auto; }
}

@media (max-width: 520px) {
    .menu-item img { height: 140px; }
    .menu-detail img { max-height: 300px; }
    .feature-image { max-height: 300px !important; }
    .carousel { min-height: 260px; }
    .carousel-track { min-height: 260px; }
}

/* Media query para el pie de página en pantallas muy pequeñas */
@media (max-width: 520px) {
    footer {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* --- Estilos para la animación de scroll --- */

/* Estado inicial de los elementos a animar: ocultos y ligeramente desplazados */
.feature-section {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.menu-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estado final cuando el elemento es visible */
.visible {
    opacity: 1;
    transform: none;
}

/* Efectos estacionales eliminados */

/* Social icon responsive sizes */
@media (max-width: 1024px) {
    .social-icon { height: 32px; width: 32px; }
}

@media (max-width: 768px) {
    .social-icon { height: 30px; width: 30px; }
}

@media (max-width: 520px) {
    .social-icon { height: 26px; width: 26px; }
}