body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 15px;
    line-height: 1.5;
}

.container {
    max-width: 600px;
    margin: 0 auto;
}

header {
    text-align: center;
    padding: 30px 0 20px 0;
}

h1 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subtitle {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

.category-title {
    font-size: 1.5rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 5px;
    margin: 35px 0 15px 0;
}

.menu-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.item-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.item-price {
    font-weight: 700;
    color: var(--accent);
    font-size: 1.1rem;
    white-space: nowrap;
}

.item-description {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

footer {
    text-align: center;
    margin: 50px 0 30px 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

/* Desplazamiento suave al pulsar en el menú */
html {
scroll-behavior: smooth;
/* Evita que las cabeceras se queden ocultas detrás del menú fijo */
scroll-padding-top: 75px;
}

/* Contenedor para posicionar las flechas */
.nav-wrapper {
position: relative;
display: flex;
align-items: center;
max-width: 100%;
margin: 0 auto;
}

/* Contenedor del menú fijo superior */
.nav-categories-arriba {
position: sticky;
top: 0;
background-color: var(--bg-color);
border-bottom: 1px solid var(--border);
padding: 10px 0;
z-index: 100;
margin-bottom: 20px;
}

.nav-categories {
  position: fixed;       /* Cambiado a fixed para que flote abajo */
  bottom: 0;             /* Anclado abajo del todo */
  bottom: env(safe-area-inset-bottom, 0px);   /*Forzar al navegador a clavar la barra en la zona segura inferior del móvil */
  left: 0;
  width: 100%;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border); /* El borde ahora va arriba */
  border-bottom: none;                 /* Quitamos el borde inferior anterior */
  padding: 10px 0;
  z-index: 1000;         /* Prioridad alta para que nada lo tape */
  transform: translate3d(0, 0, 0);  /*Evita saltos visuales al recalcular la altura del scroll */
}

/* Contenedor con scroll horizontal para pantallas móviles */
.nav-scroll-container {
display: flex;
gap: 10px;
overflow-x: auto;
white-space: nowrap;
padding: 5px 40px; /* Espacio a los lados para que las flechas no tapen el texto */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; /* Desplazamiento suave nativo */
scrollbar-width: none; /* Oculta scroll en Firefox */
}

.nav-scroll-container::-webkit-scrollbar {
display: none;
}
/* Botones de flechas elegantes y simples */
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.2s ease;
text-decoration: none; 
user-select: none;
}
.nav-arrow.prev { left: 5px; }
.nav-arrow.next { right: 5px; }

/* Estilo de los botones del menú */
.nav-link {
display: inline-block;
color: var(--text-color);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
padding: 6px 14px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
transition: all 0.2s ease;
}
/* Estilo para el botón activo (Sección actual en pantalla) */
.nav-link.active {
background-color: var(--accent);
color: #ffffff;
border-color: var(--accent);
}
/* Efecto al pasar el dedo o clickar */
.nav-link:hover, .nav-link:active {
background-color: var(--accent);
color: #ffffff;
border-color: var(--accent);
}
/* CONTENEDOR FLEXIBLE DE ALÉRGENOS */
.allergens-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}

/* ESTILO DEL ELEMENTO QUE CONTENDRÁ EL SVG */
.allergen-icon {
display: inline-block;
width: 24px;
height: 24px;
cursor: help;
transition: transform 0.2s ease;
}

.allergen-icon:hover {
transform: scale(1.15); /* Efecto pop visual al pasar el cursor */
}

/* CLASE INVERSA PARA EL SVG INTERNO */
.svg-icon {
width: 100%;
height: 100%;
display: block;
}
/* Buscador */
.search-wrapper {
margin-bottom: 15px;
padding: 0 5px;
transition: all 0.3s ease;
 position: relative;
 z-index: 100;
}

.search-wrapper.is-sticky {
  position: fixed;
  top: env(safe-area-inset-top, 0px);  /*Clavado arriba del todo respetando la barra de estado superior */
  margin-top: 0; /* Asegúrate de que no haya márgenes superiores heredados */
  left: 0;
  width: 100%;
  padding: 10px 15px; /* Un padding más elegante para cuando está pegado */
  background-color: var(--bg-color, #ffffff); /* Pon el color de fondo de tu web para que no se transparente el texto de abajo */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para darle efecto flotante */
   z-index: 900; /* Un nivel por debajo del nav-categories si se cruzasen */
   transform: translate3d(0, 0, 0);
}

#menu-search {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
border: 1px solid var(--border);
border-radius: 25px;
background-color: var(--card-bg);
color: var(--text-color);
box-sizing: border-box;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto de enfoque cuando el cliente pulsa para escribir */
#menu-search:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(140, 37, 28, 0.1);
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
     descarga legal
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
.legal-disclaimer {
margin-top: 25px;
padding: 15px;
background-color: #f3f0ec; /* Fondo grisáceo sutil para diferenciarlo */
border-left: 4px solid var(--accent); /* Línea lateral con tu color corporativo */
border-radius: 4px;
text-align: left;
font-size: 0.8rem;
color: #4a4543;
line-height: 1.4;
}

.legal-disclaimer p {
margin: 0 0 8px 0;
}

.legal-disclaimer p:last-child {
margin-bottom: 0;
}

/* Resalte para la advertencia al cliente */
.legal-notice {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.location-box {
background-color: #e6f4f8;
border: 1px solid #bce1ec;
color: var(--sea-blue);
padding: 1rem;
margin-top: 2rem;
text-align: center;
border-radius: 6px;
font-weight: 500;
}
img{
width:100%;
height: auto;
}

.icono-menu {
display: block;
margin: 0 auto; /* Lo centra horizontalmente */
max-width: 100%; /* Evita que se desborde */
height: 220px;
width: auto;
}