/* ============================================================
   Artisan — Hoja de estilos del sitio público
   Crema de la carta · negro para el texto y los marcos · verde de detalle

   El fondo es el mismo crema del PDF de la carta impresa: #f3f1e6,
   medido sobre los márgenes limpios de las cuatro páginas.

   Ese crema tiene 0,877 de luminancia contra 1,0 del blanco, así que
   TODO lo que va encima pierde un 12% de contraste. Por eso el verde de
   texto y el gris tenue están más oscuros que en la versión blanca: con
   los valores de antes quedaban en 4,38:1 y 4,40:1, abajo del 4,5 de AA.

   Sobre el verde: el de la marca es el verde lúpulo del logo (#b8d070).
   Sobre el crema tiene 1,5:1, así que como TEXTO es ilegible. Por eso hay
   dos: el claro para rellenos (con texto negro encima da 11:1) y uno
   oscuro para texto, links y precios, que da 5,2:1 y cumple WCAG AA.
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
    /* --- Verdes de la marca --- */
    --verde-lavado: #dde8b9;   /* rellenos suaves: chips, hover, avisos */
    --verde-claro:  #cfe39a;
    --verde:        #b8d070;   /* el verde del lúpulo del logo */
    --verde-medio:  #9bb94f;   /* botones */
    --verde-osc:    #526d11;   /* texto y links: 5,2:1 sobre el crema */
    --verde-prof:   #3a4f0e;   /* hover de los links */

    /* --- Rojizos de otoño: las hojas y los frutos del logo ---
       El lúpulo verde es la cerveza; estas hojas rojizas son el vermú, que
       es la otra mitad del negocio. Los tres salen del logo mismo: el
       #8f3340 es el rojo de las hojas sin retocar, y da 6,8:1 sobre el
       crema, así que alcanza para texto. */
    --otono-lavado: #f2dcd8;   /* rellenos suaves: el par del verde-lavado */
    --otono-claro:  #d9a69e;   /* bordes */
    --otono:        #8f3340;   /* títulos y acentos: 6,8:1 */
    --otono-prof:   #5e1c26;   /* hover: 11,1:1 */

    /* --- Negros --- */
    --negro:        #121211;   /* la barra de arriba y el pie */
    --negro-prof:   #080807;

    /* --- Superficies --- */
    --fondo:        #f3f1e6;   /* el crema de la carta impresa */
    --fondo-alt:    #eae7d6;   /* secciones alternas, un tono más hondo */
    --superficie:   #f3f1e6;
    --campo:        #eae7d6;
    --borde:        #e0dcc9;   /* separadores */
    --borde-fuerte: #8a8370;   /* contorno de campos y contadores: 3,3:1 */

    /* --- Textos sobre el crema --- */
    --texto:        #1a1a18;   /* 15,4:1 */
    --texto-suave:  #5a5a55;   /*  6,1:1 */
    --texto-tenue:  #67675f;   /*  5,0:1 */

    --radio:        16px;
    --radio-sm:     10px;
    --radio-pill:   999px;

    --sombra-sm:    0 1px 3px rgba(18, 18, 17, .06), 0 1px 2px rgba(18, 18, 17, .04);
    --sombra:       0 4px 16px rgba(18, 18, 17, .08);
    --sombra-md:    0 10px 34px rgba(18, 18, 17, .10);
    --sombra-lg:    0 24px 60px rgba(18, 18, 17, .14);

    --fuente-titulo: "Fraunces", "Georgia", "Times New Roman", serif;
    --fuente-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --ancho:        1180px;
    --alto-header:  72px;
    --transicion:   .28s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* El navegador esconde los [hidden] con display:none, pero cualquier
   regla nuestra que declare display le gana (misma especificidad, y las
   del autor mandan sobre las del navegador). Con .plato{display:grid}
   eso dejaba los platos a la vista aunque el filtro los hubiera
   marcado. Esta línea lo zanja de una vez para todo el sitio. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-header) + 72px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 16px;
    line-height: 1.65;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 .5em;
    color: var(--texto);
}
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p  { margin: 0 0 1rem; }

::selection { background: var(--verde); color: var(--negro); }

:focus-visible {
    outline: 3px solid var(--verde-osc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 3. Utilidades ---------- */
.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}
.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--verde); color: var(--negro); padding: .8rem 1.3rem;
    border-radius: 0 0 var(--radio-sm) 0; font-weight: 600;
}
.saltar-al-contenido:focus { left: 0; }

.seccion { padding: clamp(3.2rem, 7vw, 5.8rem) 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion--blanca { background: var(--fondo); }

.encabezado-seccion { max-width: 640px; margin-bottom: 2.6rem; }
.encabezado-seccion.centrado { margin-inline: auto; text-align: center; }

.volanta {
    display: inline-block;
    font-family: var(--fuente-texto);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--verde-osc);
    margin-bottom: .85rem;
}
.volanta::before {
    content: ""; display: inline-block; width: 26px; height: 2px;
    background: var(--verde); vertical-align: middle; margin-right: .7rem;
}
.encabezado-seccion p { color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 0; }

/* ---------- 4. Botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .82rem 1.7rem;
    border: 1.5px solid transparent;
    border-radius: var(--radio-pill);
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    cursor: pointer; text-align: center;
    transition: transform var(--transicion), background var(--transicion),
                color var(--transicion), border-color var(--transicion),
                box-shadow var(--transicion);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Primario: verde con texto negro (8,5:1) y borde para que se recorte del blanco */
.boton--primario {
    background: var(--verde-medio); color: var(--negro);
    border-color: var(--verde-osc); box-shadow: var(--sombra-sm);
}
.boton--primario:hover { background: var(--verde); box-shadow: var(--sombra-md); }

/* Negro: para la acción secundaria fuerte */
.boton--negro { background: var(--negro); color: #fff; }
.boton--negro:hover { background: var(--verde-osc); color: #fff; }

.boton--linea { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.boton--linea:hover { background: var(--negro); color: #fff; border-color: var(--negro); }

/* Sobre fondo negro (la barra de arriba, el pie) */
.boton--claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.boton--claro:hover { background: var(--verde); color: var(--negro); border-color: var(--verde); }

.boton--chico { padding: .52rem 1.1rem; font-size: .85rem; }
.boton--ancho { width: 100%; }
.boton .ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- 5. Barra de aviso ---------- */
.barra-aviso {
    background: var(--verde); color: var(--negro);
    text-align: center; padding: .6rem 1.25rem;
    font-size: .88rem; font-weight: 500;
    position: relative; z-index: 60;
}
.barra-aviso a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. Cabecera negra ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: var(--negro);
    transition: box-shadow var(--transicion);
}
.cabecera.pegada { box-shadow: 0 2px 18px rgba(18,18,17,.22); }
.cabecera__interior {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    height: var(--alto-header);
}

.marca { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.marca__logo { height: 42px; width: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre {
    font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 600;
    color: #fff; letter-spacing: -.02em;
}
.marca__bajada {
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--verde); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: .2rem; }
.nav a {
    padding: .5rem .85rem; border-radius: var(--radio-pill);
    font-size: .93rem; font-weight: 500; color: rgba(255,255,255,.88);
    transition: background var(--transicion), color var(--transicion);
}
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav a.activo { color: var(--verde); }

.cabecera__acciones { display: flex; align-items: center; gap: .6rem; }

/* Pastilla con la cantidad del carrito */
.nav-carrito { position: relative; }
.nav-carrito__cuenta {
    position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: var(--radio-pill);
    background: var(--verde); color: var(--negro);
    font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
    display: none;
}
.nav-carrito.tiene-items .nav-carrito__cuenta { display: block; }

.hamburguesa {
    display: none; width: 44px; height: 44px; border: 0; background: transparent;
    cursor: pointer; padding: 10px; border-radius: var(--radio-sm);
}
.hamburguesa:hover { background: rgba(255,255,255,.10); }
.hamburguesa span {
    display: block; height: 2px; background: #fff; border-radius: 2px;
    transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--fondo-alt);
    padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 7vw, 4.5rem);
    border-bottom: 1px solid var(--borde);
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 55% at 88% 8%, rgba(184,208,112,.34), transparent 64%),
        radial-gradient(ellipse 50% 45% at 4% 96%, rgba(184,208,112,.18), transparent 62%);
}
.hero__interior {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero__contenido { max-width: 640px; }

.hero__estado {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--fondo); border: 1.5px solid var(--borde-fuerte);
    padding: .4rem 1rem; border-radius: var(--radio-pill);
    font-size: .84rem; font-weight: 500; margin-bottom: 1.5rem;
    box-shadow: var(--sombra-sm);
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-osc); flex-shrink: 0; }
.punto--abierto { animation: latido 2.4s infinite; }
.punto--cerrado { background: #b0632f; }
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(90,122,22,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(90,122,22,0); }
    100% { box-shadow: 0 0 0 0 rgba(90,122,22,0); }
}

.hero h1 { margin-bottom: .4em; }
.hero h1 em { font-style: italic; color: var(--verde-osc); }
.hero__bajada {
    font-size: clamp(1.02rem, 2vw, 1.2rem);
    color: var(--texto-suave); max-width: 54ch; margin-bottom: 2rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__sello { justify-self: center; max-width: 300px; width: 100%; }
.hero__sello img { width: 100%; filter: drop-shadow(0 16px 34px rgba(18,18,17,.18)); }

.hero__datos {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 2.2rem;
    margin-top: clamp(2.4rem, 5vw, 3.4rem);
    padding-top: 1.8rem; border-top: 1px solid var(--borde-fuerte);
}
.hero__dato { display: flex; align-items: center; gap: .7rem; font-size: .92rem; }
.hero__dato .ico { width: 19px; height: 19px; color: var(--verde-osc); flex-shrink: 0; }
.hero__dato strong { display: block; font-weight: 600; }
.hero__dato span { color: var(--texto-suave); font-size: .84rem; }

/* ---------- 8. Franja de valores ---------- */
.valores {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    background: var(--borde);
    border-bottom: 1px solid var(--borde);
}
.valor { background: var(--fondo); padding: 2rem 1.6rem; text-align: center; }
.valor .ico { width: 30px; height: 30px; color: var(--verde-osc); margin: 0 auto .8rem; }
.valor h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.valor p  { font-size: .88rem; color: var(--texto-suave); margin: 0; }

/* ---------- 9. Atajos a la carta (portada) ---------- */
.atajos {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.atajo {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1.5rem 1.5rem 1.4rem;
    background: var(--fondo); border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.atajo:hover {
    border-color: var(--verde-medio); transform: translateY(-3px); box-shadow: var(--sombra-md);
}
.atajo__nombre { font-family: var(--fuente-titulo); font-size: 1.22rem; font-weight: 600; }
.atajo__desc { font-size: .88rem; color: var(--texto-suave); }
.atajo__flecha {
    margin-top: .7rem; font-size: .82rem; font-weight: 600; color: var(--verde-osc);
    letter-spacing: .02em;
}

/* ---------- 10. Sobre nosotros ---------- */
.sobre { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.sobre__texto p { color: var(--texto-suave); font-size: 1.02rem; }
.sobre__texto p:first-of-type {
    font-size: 1.16rem; color: var(--texto); font-family: var(--fuente-titulo);
    line-height: 1.5; font-weight: 400;
}
.sobre__firma {
    margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--borde);
    font-family: var(--fuente-titulo); font-style: italic; font-size: 1.18rem; color: var(--verde-osc);
}
.sobre__visual {
    position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio);
    background: var(--negro);
    box-shadow: var(--sombra-lg); overflow: hidden;
    display: grid; place-items: center; padding: 2rem;
}
.sobre__visual img { width: 100%; height: 100%; object-fit: cover; }
.sobre__visual--logo img { object-fit: contain; }
.sobre__sello {
    position: absolute; right: -18px; bottom: 30px;
    background: var(--verde); color: var(--negro);
    padding: .9rem 1.4rem; border-radius: var(--radio-sm);
    box-shadow: var(--sombra-md); text-align: center; line-height: 1.25;
}
.sobre__sello strong { display: block; font-family: var(--fuente-titulo); font-size: 1.45rem; }
.sobre__sello span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- 11. Barra del menú ---------- */
.menu-barra {
    position: sticky; top: var(--alto-header); z-index: 40;
    /* El mismo crema del fondo, apenas translúcido para que se note que
       los platos pasan por debajo al scrollear. */
    background: rgba(243,241,230,.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--borde);
    padding: .7rem 0;
}
.menu-barra__fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.menu-barra__fila + .menu-barra__fila { margin-top: .6rem; }

.buscador { position: relative; flex: 1 1 240px; min-width: 0; }
.buscador .ico {
    position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--texto-tenue); pointer-events: none;
}
.buscador input {
    width: 100%; padding: .68rem 2.6rem .68rem 2.7rem;
    border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-pill);
    background: var(--campo); font-size: .95rem;
    transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.buscador input::placeholder { color: var(--texto-tenue); }
.buscador input:focus {
    outline: none; background: var(--fondo); border-color: var(--verde-osc);
    box-shadow: 0 0 0 3px rgba(90,122,22,.16);
}
.buscador__limpiar {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: var(--borde); color: var(--texto);
    cursor: pointer; display: none; place-items: center; font-size: 1.05rem; line-height: 1;
}
.buscador.tiene-texto .buscador__limpiar { display: grid; }

.filtros-dieta { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
    padding: .42rem .9rem; border-radius: var(--radio-pill);
    border: 1.5px solid var(--borde-fuerte); background: var(--fondo);
    font-size: .82rem; font-weight: 500; color: var(--texto-suave);
    cursor: pointer; white-space: nowrap;
    transition: all var(--transicion);
}
.chip:hover { border-color: var(--verde-medio); color: var(--texto); }
.chip[aria-pressed="true"] {
    background: var(--verde); border-color: var(--verde-osc); color: var(--negro); font-weight: 600;
}

/* Pestañas de sección: la navegación principal del menú en el celular */
.menu-secciones {
    display: flex; gap: .4rem; overflow-x: auto;
    padding: .15rem .1rem .3rem;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    width: 100%;
}
.menu-secciones::-webkit-scrollbar { display: none; }
.menu-seccion-tab {
    padding: .55rem 1.2rem; border-radius: var(--radio-pill);
    border: 1.5px solid var(--borde); background: var(--fondo-alt);
    font-size: .92rem; font-weight: 600; color: var(--texto-suave);
    cursor: pointer; white-space: nowrap; transition: all var(--transicion);
    scroll-snap-align: start;
}
.menu-seccion-tab:hover { background: var(--verde-lavado); color: var(--texto); }
.menu-seccion-tab[aria-selected="true"] {
    background: var(--negro); border-color: var(--negro); color: #fff;
}

/* ---------- 12. Secciones y categorías del menú ---------- */
/* El mismo margen de scroll que las categorías: la cabecera y la barra de
   secciones suman 146px de alto fijo, así que sin esto el título queda
   debajo de la barra, tanto al tocar una solapa como al entrar con un
   enlace terminado en "#seccion-...", que es lo que usa un QR por sección. */
.menu-seccion { padding-top: 2.6rem; scroll-margin-top: calc(var(--alto-header) + 96px); }
.menu-seccion__titulo {
    display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
    margin-bottom: 1.8rem; padding-bottom: .9rem;
    border-bottom: 2px solid var(--negro);
}
.menu-seccion__titulo h2 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.menu-seccion__titulo span { color: var(--texto-tenue); font-size: .9rem; }

.categoria { margin-bottom: 3rem; scroll-margin-top: calc(var(--alto-header) + 96px); }
.categoria__cabecera {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    margin-bottom: .3rem;
}
.categoria__cabecera h3 { font-size: clamp(1.35rem, 2.8vw, 1.75rem); margin: 0; }
.categoria__cuenta {
    font-size: .76rem; color: var(--texto-tenue); letter-spacing: .05em;
    text-transform: uppercase; font-weight: 600;
}

/* ---------- 12 bis. La vermutería, en el rojizo del logo ----------
   El logo tiene dos cosas enredadas: lúpulo verde y hojas de otoño rojizas.
   El verde ya estaba repartido por todo el sitio; el rojizo marca la otra
   mitad del negocio.

   Va SOLO donde aparece el vermú —la sección "Vermús y tragos", su solapa,
   su atajo de la portada y el bloque "Carta de vermús"—, y se engancha del
   data-seccion que ya traía el HTML. Repartirlo por el resto del sitio lo
   dejaría sin significar nada: el color acá dice de qué mitad de la casa
   estás leyendo. */
.menu-seccion-tab[data-seccion="alcohol"]:hover { background: var(--otono-lavado); }
.menu-seccion-tab[data-seccion="alcohol"][aria-selected="true"] {
    background: var(--otono); border-color: var(--otono); color: #fff;
}
.menu-seccion[data-seccion="alcohol"] .menu-seccion__titulo { border-bottom-color: var(--otono); }
.menu-seccion[data-seccion="alcohol"] .menu-seccion__titulo h2 { color: var(--otono); }

.atajo[data-seccion="alcohol"] .atajo__flecha { color: var(--otono); }
.atajo[data-seccion="alcohol"]:hover { border-color: var(--otono-claro); }

.valor--vermu .ico { color: var(--otono); }
.categoria__desc {
    color: var(--verde-osc); font-size: .9rem; font-weight: 600; max-width: 68ch;
    margin: 0 0 1.2rem; letter-spacing: .01em;
}

/* ---------- 13. Lista de platos ---------- */
.platos { display: grid; gap: 0; }
/* Sin foto son dos columnas (datos | precio); con foto, tres.
   Las fotos vienen apagadas, así que lo normal es la versión de dos. */
.plato {
    display: grid; grid-template-columns: 1fr auto; gap: 1.1rem; align-items: start;
    padding: 1.05rem .9rem; border-radius: var(--radio-sm);
    border-top: 1px solid var(--borde);
    transition: background var(--transicion);
}
.plato--confoto { grid-template-columns: auto 1fr auto; }
.plato:first-child { border-top: 0; }
.plato:hover { background: var(--verde-lavado); }

.plato__miniatura {
    width: 74px; height: 74px; border-radius: var(--radio-sm); overflow: hidden;
    background: var(--campo);
    display: grid; place-items: center; flex-shrink: 0; border: 0; padding: 0;
    cursor: zoom-in; position: relative;
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.plato__miniatura:hover { transform: scale(1.05); box-shadow: var(--sombra); }
.plato__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.plato__info { min-width: 0; }
.plato__nombre {
    font-family: var(--fuente-titulo); font-size: 1.08rem; font-weight: 600;
    margin: 0 0 .2rem; line-height: 1.3;
}
.plato__desc {
    font-size: .89rem; color: var(--texto-suave); margin: 0; line-height: 1.55;
}
.plato__etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }
.etiqueta {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: var(--radio-pill);
    background: var(--verde-lavado); color: var(--verde-prof); border: 1px solid var(--verde-claro);
}
/* Los dos rellenos van más cargados que en la versión blanca: sobre el
   crema, los tonos pastel de antes se confundían con el fondo. */
.etiqueta--keto      { background: #f7e4b4; color: #6b4708; border-color: #dcb95f; }
.etiqueta--sin-tacc  { background: #dce7f5; color: #27456e; border-color: #b4c9e3; }
.etiqueta--destacado { background: var(--negro); color: var(--verde); border-color: var(--negro); }

.plato__precio { text-align: right; flex-shrink: 0; white-space: nowrap; padding-top: .1rem; }
.plato__precio b {
    font-family: var(--fuente-titulo); font-size: 1.08rem; font-weight: 600;
    color: var(--verde-osc); display: block; line-height: 1.35;
}
.plato__precio small {
    display: block; font-size: .68rem; color: var(--texto-tenue);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.plato__precio .variante + .variante { margin-top: .35rem; }
.plato__precio .consultar {
    font-size: .82rem; color: var(--texto-suave); font-style: italic; font-family: var(--fuente-texto);
}

/* Estado vacío de la búsqueda */
.menu-vacio { display: none; text-align: center; padding: 4rem 1rem; color: var(--texto-suave); }
.menu-vacio.visible { display: block; }
.menu-vacio .ico { width: 44px; height: 44px; color: var(--borde-fuerte); margin: 0 auto 1rem; }
.menu-vacio h3 { margin-bottom: .3rem; }

.menu-nota {
    margin-top: 2.2rem; padding: 1.15rem 1.4rem;
    background: var(--verde-lavado); border-left: 4px solid var(--verde-medio);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    font-size: .89rem; color: var(--texto-suave);
}
.menu-nota strong { color: var(--texto); }

/* Aviso de carne extra: va una vez por categoría, no plato por plato.
   El precio es el mismo para todas las hamburguesas, así que repetirlo en
   cada renglón sería alargar la carta sin agregar nada. */
.aviso-extra {
    display: flex; gap: .7rem; align-items: center;
    margin: 0 0 1.1rem; padding: .65rem 1.05rem;
    background: var(--verde-lavado);
    border: 1.5px solid var(--verde-claro);
    border-radius: var(--radio-pill);
    font-size: .88rem; color: var(--texto-suave); line-height: 1.45;
}
.aviso-extra .ico { width: 19px; height: 19px; color: var(--verde-prof); flex-shrink: 0; }
.aviso-extra strong {
    color: var(--verde-prof); margin-right: .45rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.aviso-extra b { color: var(--verde-prof); font-weight: 700; white-space: nowrap; }


/* Aviso de las canillas: la pizarra del local */
.aviso-canillas {
    display: flex; gap: 1.2rem; align-items: flex-start;
    padding: 1.6rem 1.8rem;
    background: var(--negro); color: #fff;
    border-radius: var(--radio);
}
.aviso-canillas .ico { width: 34px; height: 34px; color: var(--verde); flex-shrink: 0; margin-top: .2rem; }
.aviso-canillas h3 { color: #fff; font-size: 1.2rem; margin-bottom: .35rem; }
.aviso-canillas p { color: rgba(255,255,255,.76); margin: 0; font-size: .94rem; }

/* ---------- 14. Carrito de retiro ---------- */
.takeaway-intro {
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
    padding: 1.4rem 1.6rem; margin-bottom: 2rem;
    background: var(--verde-lavado); border: 1.5px solid var(--verde-claro);
    border-radius: var(--radio);
}
.takeaway-intro p { margin: 0; font-size: .94rem; color: var(--texto-suave); }
.takeaway-intro strong { color: var(--texto); display: block; font-size: 1.02rem; margin-bottom: .2rem; }

/* Fila de producto con el contador */
.plato--pedible { grid-template-columns: 1fr auto auto; align-items: center; }
.plato--pedible.plato--confoto { grid-template-columns: auto 1fr auto auto; }
.plato--pedible > .plato__precio { text-align: right; min-width: 92px; }

.contador {
    display: inline-flex; align-items: center; gap: .2rem;
    border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-pill);
    background: var(--fondo); padding: .15rem;
}
.contador button {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: var(--texto);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: background var(--transicion), color var(--transicion);
}
.contador button:hover { background: var(--verde); color: var(--negro); }
.contador button:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.contador output {
    min-width: 28px; text-align: center; font-weight: 700; font-size: .98rem;
    font-variant-numeric: tabular-nums;
}
.contador--vacio output { color: var(--texto-tenue); font-weight: 500; }

/* Platos con dos precios (simple y doble, vaso y jarra).
   Cada opción es su propia línea con su propio contador: así se ve de
   una qué cuesta cada una y se puede pedir una de cada una, en lugar de
   tener que elegir en un desplegable y perder la otra. */
.plato--pedible.plato--variantes { grid-template-columns: 1fr auto; }
.plato--pedible.plato--variantes.plato--confoto { grid-template-columns: auto 1fr auto; }

.variantes { display: grid; gap: .45rem; min-width: 0; }
.variante-fila {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: .9rem; align-items: center;
    padding: .3rem .35rem .3rem .85rem;
    background: var(--fondo-alt);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-pill);
    transition: border-color var(--transicion), background var(--transicion);
}
.variante-fila.elegido { border-color: var(--verde-medio); background: var(--verde-lavado); }
/* Lo que ya está en el pedido queda marcado, también sin pasar el mouse */
.plato--pedible.elegido { background: var(--verde-lavado); }
.variante-fila__rotulo {
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-tenue); white-space: nowrap;
}
.variante-fila.elegido .variante-fila__rotulo { color: var(--verde-prof); }
.variante-fila b {
    font-family: var(--fuente-titulo); font-size: 1rem; font-weight: 600;
    color: var(--verde-osc); white-space: nowrap;
}
.variante-fila .contador { border: 0; background: transparent; padding: 0; }
.variante-fila .contador button { width: 32px; height: 32px; }

/* La fila de carne extra va punteada y sin relleno: se lee como una
   variación de la de arriba y no como otro producto. Cuando entra al
   pedido se pinta igual que cualquier otra. */
.variante-fila--extra { background: transparent; border-style: dashed; }
.variante-fila--extra.elegido { background: var(--verde-lavado); border-style: solid; }
/* El rótulo de la carne extra es el más largo de todos ("Doble + carne
   extra"): acá sí puede cortar en dos renglones antes que desbordar. */
.variante-fila--extra .variante-fila__rotulo { white-space: normal; }

/* Resumen del pedido */
.resumen {
    position: sticky; top: calc(var(--alto-header) + 1.5rem);
    background: var(--fondo); border: 1.5px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra);
    overflow: hidden;
}
.resumen__cab {
    padding: 1.1rem 1.4rem; background: var(--negro); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.resumen__cab h3 { margin: 0; color: #fff; font-size: 1.15rem; }
.resumen__cab span { font-size: .84rem; color: var(--verde); font-weight: 600; }
.resumen__cuerpo { padding: 1.2rem 1.4rem; }
.resumen__vacio { color: var(--texto-tenue); font-size: .92rem; text-align: center; padding: 1.4rem 0; margin: 0; }

.resumen__lista { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .7rem; }
.resumen__item {
    display: grid; grid-template-columns: auto 1fr auto; gap: .7rem;
    align-items: baseline; font-size: .91rem;
}
.resumen__cant {
    background: var(--verde-lavado); color: var(--verde-prof); border-radius: 6px;
    padding: .05rem .4rem; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums;
}
.resumen__nombre { min-width: 0; }
/* La opción elegida, cuando el plato tiene dos precios */
.resumen__opcion {
    display: block; font-style: normal;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--verde-prof);
}
.resumen__sub { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumen__quitar {
    border: 0; background: transparent; color: var(--texto-tenue); cursor: pointer;
    font-size: .78rem; text-decoration: underline; padding: 0; margin-left: .3rem;
}
.resumen__quitar:hover { color: #a3321f; }

.resumen__total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: .9rem; border-top: 2px solid var(--borde);
    font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 600;
}
.resumen__total span:last-child { color: var(--verde-osc); }

.resumen .campo { margin-bottom: .9rem; }
.resumen label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.resumen input, .resumen textarea, .resumen select {
    width: 100%; padding: .62rem .8rem;
    border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-sm);
    background: var(--campo); font-size: .94rem;
}
.resumen input:focus, .resumen textarea:focus, .resumen select:focus {
    outline: none; background: var(--fondo); border-color: var(--verde-osc);
    box-shadow: 0 0 0 3px rgba(90,122,22,.16);
}
.resumen textarea { resize: vertical; min-height: 64px; }
.resumen__ayuda { font-size: .78rem; color: var(--texto-tenue); margin: .4rem 0 0; }

.pedido-grilla { display: grid; grid-template-columns: 1fr 360px; gap: 2.4rem; align-items: start; }

/* Barra fija del carrito en el celular */
.carrito-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    background: var(--negro); color: #fff;
    padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    box-shadow: 0 -4px 20px rgba(18,18,17,.26);
    transform: translateY(110%); transition: transform var(--transicion);
}
.carrito-barra.visible { transform: none; }
.carrito-barra__datos { line-height: 1.25; }
.carrito-barra__datos strong { display: block; font-size: 1.05rem; }
.carrito-barra__datos span { font-size: .8rem; color: rgba(255,255,255,.7); }

/* ---------- 15. Lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(8,8,7,.86); backdrop-filter: blur(6px);
    display: none; place-items: center; padding: 1.5rem;
}
.lightbox.abierto { display: grid; animation: aparecer .22s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.lightbox__caja {
    max-width: 720px; width: 100%; background: var(--fondo);
    border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-lg);
    animation: subir .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes subir { from { transform: translateY(18px) scale(.98); } to { transform: none; } }
.lightbox__caja img { width: 100%; max-height: 62vh; object-fit: cover; }
.lightbox__pie { padding: 1.3rem 1.5rem 1.5rem; }
.lightbox__pie h3 { margin-bottom: .3rem; }
.lightbox__pie p { color: var(--texto-suave); font-size: .92rem; margin-bottom: .8rem; }
.lightbox__precio { font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--verde-osc); font-weight: 600; }
.lightbox__cerrar {
    position: absolute; top: 1.2rem; right: 1.2rem;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
    display: grid; place-items: center; backdrop-filter: blur(6px);
    transition: background var(--transicion);
}
.lightbox__cerrar:hover { background: rgba(255,255,255,.34); }

/* ---------- 16. Mapa ---------- */
.mapa {
    border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
    border: 1px solid var(--borde); background: var(--fondo-alt); aspect-ratio: 16 / 10;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 17. Franja CTA ---------- */
.franja-cta {
    background: var(--negro); color: #fff;
    text-align: center; padding: clamp(2.8rem, 6vw, 4.2rem) 0;
}
.franja-cta h2 { color: #fff; }
.franja-cta p { color: rgba(255,255,255,.76); max-width: 52ch; margin: 0 auto 1.8rem; }
.volanta--sobre-negro { color: var(--verde); }
.volanta--sobre-negro::before { background: var(--verde); }
.franja-cta__acciones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- 18. Pie negro ---------- */
.pie { background: var(--negro); color: rgba(255,255,255,.72); padding: 3.2rem 0 0; font-size: .92rem; }
.pie__grilla {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.4rem;
    padding-bottom: 2.6rem;
}
.pie h4 {
    color: #fff; font-family: var(--fuente-texto); font-size: .76rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie a:hover { color: var(--verde); }
.pie__marca { margin-bottom: 1rem; }
.pie__marca img { height: 54px; width: auto; }
.pie__lema { font-family: var(--fuente-titulo); font-style: italic; color: var(--verde); font-size: 1.05rem; }

.redes { display: flex; gap: .6rem; margin-top: 1.2rem; }
.redes a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.1); display: grid; place-items: center;
    transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.redes a:hover { background: var(--verde); color: var(--negro); transform: translateY(-2px); }
.redes .ico { width: 19px; height: 19px; }

.pie__base {
    border-top: 1px solid rgba(255,255,255,.14); padding: 1.3rem 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: rgba(255,255,255,.55);
}
.pie__base a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 19. WhatsApp flotante ---------- */
.wa-flotante {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45;
    width: 56px; height: 56px; border-radius: 50%;
    background: #1da851; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(29,168,81,.38);
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover { transform: scale(1.08); box-shadow: 0 12px 34px rgba(29,168,81,.5); }
.wa-flotante .ico { width: 29px; height: 29px; }
.wa-flotante::after {
    content: attr(data-texto);
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--negro); color: #fff; padding: .5rem .9rem;
    border-radius: var(--radio-pill); font-size: .84rem; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity var(--transicion);
}
.wa-flotante:hover::after { opacity: 1; }
/* Cuando está la barra del carrito, el botón sube para no taparla */
/* Acá iba una regla que subía el botón flotante para que no chocara con la
   barra del carrito. Ya no hace falta: el flotante quedó solo en la portada,
   y la portada no tiene barra de carrito. */

/* ---------- 20. Animación de entrada ---------- */
.revelar { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visible { opacity: 1; transform: none; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1040px) {
    .pedido-grilla { grid-template-columns: 1fr; }
    .resumen { position: static; scroll-margin-top: calc(var(--alto-header) + 1rem); }
}

@media (max-width: 980px) {
    .hero__interior { grid-template-columns: 1fr; }
    .hero__sello { display: none; }
    .sobre { grid-template-columns: 1fr; }
    .sobre__visual { aspect-ratio: 16 / 10; max-height: 340px; order: -1; }
    .sobre__sello { right: 16px; bottom: 16px; }
    .pie__grilla { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
    .hamburguesa { display: block; }
    .nav {
        position: fixed; inset: var(--alto-header) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--negro);
        padding: .8rem 1.25rem 1.4rem;
        box-shadow: 0 14px 30px rgba(8,8,7,.4);
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: transform var(--transicion), opacity var(--transicion);
        max-height: calc(100vh - var(--alto-header)); overflow-y: auto;
    }
    .nav.abierto { transform: none; opacity: 1; pointer-events: auto; }
    .nav a { padding: .85rem 1rem; border-radius: var(--radio-sm); }
    .nav a + a { border-top: 1px solid rgba(255,255,255,.12); }
    .cabecera__acciones .boton { display: none; }
    .marca__logo { height: 34px; }
    .takeaway-intro { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .contenedor { width: min(100% - 2rem, var(--ancho)); }
    .hero__datos { gap: 1.3rem; flex-direction: column; }

    .plato { gap: .8rem; padding: .95rem .3rem; }
    .plato__miniatura { width: 60px; height: 60px; }
    /* Con foto no entran tres columnas: el precio pasa abajo del texto. */
    .plato--confoto { grid-template-columns: auto 1fr; }
    .plato--confoto .plato__precio {
        grid-column: 2; text-align: left; margin-top: .4rem;
    }
    .plato--confoto .plato__precio b { display: inline-block; margin-right: .5rem; }
    .plato--confoto .plato__precio small { display: inline; }
    .plato--confoto .plato__precio .variante { display: inline-block; margin-right: 1rem; }
    .plato--confoto .plato__precio .variante + .variante { margin-top: 0; }

    /* En el carrito la fila se arma en dos renglones: datos arriba,
       precio y contador abajo, para que el botón + sea bien grande. */
    /* Hijos directos a propósito: los platos de dos precios llevan otro
       contador dentro de cada variante, y esa fila se arma sola. */
    .plato--pedible { grid-template-columns: 1fr auto; gap: .6rem .85rem; }
    .plato--pedible > .plato__info { grid-column: 1 / -1; }
    .plato--pedible > .plato__precio { grid-column: 1; margin-top: 0; align-self: center; text-align: left; }
    .plato--pedible > .contador { grid-column: 2; justify-self: end; }

    /* Con foto, la miniatura ocupa los dos renglones a la izquierda */
    .plato--pedible.plato--confoto { grid-template-columns: auto 1fr auto; }
    .plato--pedible.plato--confoto > .plato__miniatura { grid-row: 1 / 3; align-self: start; }
    .plato--pedible.plato--confoto > .plato__info { grid-column: 2 / -1; }
    .plato--pedible.plato--confoto > .plato__precio { grid-column: 2; }
    .plato--pedible.plato--confoto > .contador { grid-column: 3; }

    /* Con dos precios las opciones pasan debajo del nombre, a todo lo ancho */
    .plato--pedible.plato--variantes { grid-template-columns: 1fr; }
    .plato--pedible.plato--variantes.plato--confoto { grid-template-columns: auto 1fr; }
    .plato--variantes .variantes { grid-column: 1 / -1; margin-top: .2rem; }
    /* En el celular se toca con el pulgar: el botón vuelve al tamaño grande */
    .variante-fila { gap: .6rem; padding-left: .8rem; }
    .variante-fila .contador button { width: 38px; height: 38px; }

    .pie__grilla { grid-template-columns: 1fr; }
    .menu-barra__fila { gap: .6rem; }
    .wa-flotante::after { display: none; }
    .valor { padding: 1.6rem 1.2rem; }
    .aviso-canillas { flex-direction: column; gap: .8rem; padding: 1.4rem; }
}

/* ---------- 22. Impresión ---------- */
@media print {
    .cabecera, .barra-aviso, .hero, .valores, .franja-cta, .pie,
    .wa-flotante, .menu-barra, .mapa, .carrito-barra, .contador,
    .resumen, .takeaway-intro { display: none !important; }
    body { background: #fff; color: #111; font-size: 11pt; }
    .plato__precio b { color: #111; }
    .categoria { break-inside: avoid; margin-bottom: 1.2rem; }
    .plato { break-inside: avoid; padding: .3rem 0; grid-template-columns: 1fr auto; }
    .plato__miniatura { display: none; }
    .etiqueta { background: #fff !important; color: #333 !important; border-color: #bbb !important; }
    .aviso-canillas { background: #fff; color: #111; border: 1px solid #bbb; }
    .aviso-canillas h3, .aviso-canillas p { color: #111; }
    .aviso-extra { background: #fff !important; color: #111; border: 1px solid #bbb; }
    .aviso-extra strong, .aviso-extra b { color: #111 !important; }
}

/* ---------- 23. Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .revelar { opacity: 1; transform: none; }
}

/* ---------- 24. Crédito de autoría ---------- */
.credito-autor { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.credito-autor a {
    color: var(--verde); font-weight: 600; display: inline-block; padding: .3rem 0;
    text-decoration: underline; text-decoration-color: rgba(184, 208, 112, .4);
    text-underline-offset: 3px;
    transition: color var(--transicion), text-decoration-color var(--transicion);
}
.credito-autor a:hover { color: var(--verde-claro); text-decoration-color: currentColor; }