/* Los Fundadores · Authentic Sandwich & Burger
   Sistema: azul pizarra y crema del logo, verde de su etiqueta, papel y frambuesa de la carta impresa.
   Titulares en letra condensada gastada (como sus historias); texto en Source Sans 3.
   La carta sobre papel, la barra de noche. Precios como etiquetas: tocarlos suma a «Mi mesa». */

@font-face { font-family: "Fundadores"; src: url("fonts/display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sans"; src: url("fonts/sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Sans"; src: url("fonts/sans-it.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  /* marca */
  --azul: #363f50;
  --azul-hondo: #2a313f;
  --noche: #1b1f27;
  --logo: #dfcdaf;
  --crema: #eac5a6;
  --crema-2: #f3dcc6;
  --verde: #4c7d6c;
  --verde-hondo: #3b6456;
  --papel: #f4eee3;
  --papel-2: #ebe3d4;
  --linea: #d9cdb7;
  --tinta: #1f2530;
  --tinta-2: #4a4f5a;
  --frambuesa: #a8324f;
  --estrella: #d99a2b;

  --f-display: "Fundadores", "Rockwell Condensed", "Arial Narrow", serif;
  --f-texto: "Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* escala */
  --t-xl: clamp(3rem, 12.5vw, 6.5rem);
  --t-l: clamp(2.9rem, 7vw, 5.75rem);
  --t-m: clamp(2rem, 3.6vw, 2.75rem);
  --t-plato: clamp(1.375rem, 1.8vw, 1.625rem);
  --sec: clamp(80px, 11vw, 160px);
  --margen: clamp(16px, 4.4vw, 56px);
  --ancho: 1320px;
  --hdr: 64px;

  /* movimiento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);
  --rapido: 160ms;
  --medio: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 60px); }
body {
  margin: 0; background: var(--azul); color: var(--logo); overflow-x: clip;
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, figure, blockquote, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--frambuesa); color: var(--papel); }
:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }
.carta :focus-visible, .antojos :focus-visible, .resenas :focus-visible, .mesa :focus-visible { outline-color: var(--frambuesa); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--crema); color: var(--azul); padding: 10px 16px; font-weight: 700; }
.saltar:focus { top: 12px; }
.solo-js, .solo-js-i { display: none; }
.js .solo-js { display: inline; }
.js .solo-js-i { display: inline-flex; }
html:not(.js) .solo-js-b { display: none; }

/* letra gastada, como los títulos de sus historias */
.gastado {
  font-family: var(--f-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: .005em; line-height: .88;
  -webkit-text-stroke: .045em currentColor; paint-order: stroke fill;
  -webkit-mask-image: url("img/desgaste.png"); mask-image: url("img/desgaste.png");
  -webkit-mask-size: 360px; mask-size: 360px;
  text-wrap: balance;
}
/* rótulo chico sobre cada título */
.ceja { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- acciones ---------- */
.btn {
  --canto: rgba(0,0,0,.35);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 4px 28px 0; border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--f-display); font-size: 1.5rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; text-decoration: none;
  outline: 2px solid currentColor; outline-offset: -7px;
  box-shadow: 0 3px 0 var(--canto);
  transition: transform var(--rapido) var(--ease-out), box-shadow var(--rapido) var(--ease-out), background-color var(--medio) var(--ease-out);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--canto); }
.btn:focus-visible { outline: 3px solid var(--frambuesa); outline-offset: 3px; }
.btn-chico { min-height: 48px; padding: 3px 20px 0; font-size: 1.25rem; outline-offset: -5px; }
.btn-crema { background: var(--crema); color: var(--azul-hondo); --canto: #b98a66; }
.btn-azul { background: var(--azul); color: var(--crema); --canto: #171b23; }
.btn-borde { background: transparent; color: var(--crema); outline-offset: -2px; box-shadow: none; }
.btn-borde:active { box-shadow: none; }
.btn-flecha { position: relative; width: 20px; height: 2px; background: currentColor; transform: translateY(-2px); transition: transform var(--medio) var(--ease-out); }
.btn-flecha::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.btn-texto { background: none; border: 0; padding: 0 6px; min-height: 44px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.btn-texto:disabled { opacity: .4; cursor: default; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-top: 4px; line-height: 1.1; }
.enlace-flecha::after { content: "→"; transition: transform var(--medio) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-crema:hover { background: var(--crema-2); }
  .btn-azul:hover { background: var(--azul-hondo); }
  .btn-borde:hover { background: rgba(234,197,166,.1); }
  .btn:hover .btn-flecha, .enlace-flecha:hover::after { transform: translateX(4px); }
}

/* precio = etiqueta. Tocarla agrega el producto a «Mi mesa» */
.agregar {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 2px 4px 0 18px; border: 0; cursor: pointer;
  background: var(--papel-2); color: var(--tinta);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: .02em; line-height: 1;
  transition: background-color var(--medio) var(--ease-out), transform var(--rapido) var(--ease-out);
}
.agregar::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--papel); }
.agregar small { font-family: var(--f-texto); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-right: -2px; }
.agregar-mas { position: relative; width: 32px; height: 32px; margin-top: -2px; background: var(--verde); }
.agregar-mas::before, .agregar-mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--papel); transition: transform var(--medio) var(--ease-out); }
.agregar-mas::after { transform: rotate(90deg); }
.agregar:active { transform: scale(.96); }
.agregar.sumado .agregar-mas::before { transform: translate(-2px, 2px) rotate(45deg) scaleX(.5); }
.agregar.sumado .agregar-mas::after { transform: translate(2px, 0) rotate(-45deg) scaleX(.9); }
@media (hover: hover) and (pointer: fine) { .agregar:hover { background: var(--crema); } }
.agregar-grande { min-height: 56px; font-size: 2rem; padding-left: 24px; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); }
.agregar-grande::before { left: 12px; }
.agregar-grande .agregar-mas { width: 46px; height: 46px; }
html:not(.js) .agregar { cursor: default; }
html:not(.js) .agregar-mas { display: none; }

/* ---------- cabecera ---------- */
.barra-sup { position: sticky; top: 0; z-index: 40; background: var(--azul); border-bottom: 1px solid rgba(223,205,175,.14); }
.barra-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); height: var(--hdr); display: flex; align-items: center; gap: 22px; }
.marca img { width: 152px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 1rem; padding: 8px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--ease-out); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav-reservar { color: var(--crema); }
.mesa-btn { align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border: 2px solid var(--crema); border-radius: 3px; background: transparent; color: var(--crema); cursor: pointer; font-weight: 700; transition: background-color var(--medio) var(--ease-out); }
.mesa-btn-n { min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; background: var(--crema); color: var(--azul-hondo); font-size: .875rem; border-radius: 2px; font-variant-numeric: tabular-nums; }
.mesa-btn-total { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: .02em; padding-right: 8px; font-variant-numeric: tabular-nums; }
.mesa-btn.vacia .mesa-btn-total { display: none; }
.mesa-btn.salta .mesa-btn-n { animation: salta 420ms var(--ease-out); }
@keyframes salta { 30% { transform: scale(1.3); } }
@media (hover: hover) and (pointer: fine) { .mesa-btn:hover { background: rgba(234,197,166,.12); } }
.menu-btn { display: none; }
@media (max-width: 980px) {
  .marca img { width: 128px; }
  .mesa-btn { margin-left: auto; }
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
  .menu-ico, .menu-ico::before { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform var(--medio) var(--ease-out); }
  .menu-ico::before { content: ""; position: absolute; top: 7px; }
  .menu-ico { transform: translateY(-3.5px); }
  .menu-btn[aria-expanded="true"] .menu-ico { transform: translateY(0) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-ico::before { transform: translateY(-7px) rotate(-90deg); }
  .js .nav {
    position: absolute; left: 0; right: 0; top: var(--hdr); margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--azul-hondo); padding: 8px var(--margen) 24px;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--medio) var(--ease-out), transform var(--medio) var(--ease-out), visibility 0s linear var(--medio);
  }
  .js .nav.abierta { visibility: visible; opacity: 1; transform: none; transition: opacity var(--medio) var(--ease-out), transform var(--medio) var(--ease-out); }
  .js .nav a { padding: 14px 0; font-family: var(--f-display); font-size: 1.75rem; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid rgba(223,205,175,.12); }
  .js .nav a::after { display: none; }
  html:not(.js) .nav { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 420px) {
  .mesa-btn-total { display: none; }
  .mesa-btn { padding-right: 6px; }
}

/* ---------- A. portada: la comida manda ---------- */
.hero { background: url("img/grano.png") repeat, var(--azul); }
.hero-in { max-width: var(--ancho); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--margen) clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-ceja { color: var(--crema); }
.hero-titulo { margin-top: 18px; font-size: var(--t-xl); color: var(--logo); }
.hero-sub { margin-top: 26px; max-width: 40ch; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; }
.hero-acciones { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-acciones .enlace-flecha { color: var(--crema); }
.hero-dir { margin-top: 34px; font-size: .9375rem; }
.hero-dir a { text-decoration: none; border-bottom: 1px solid rgba(223,205,175,.5); }
.hero-dir::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--verde); vertical-align: 1px; }
.hero-foto { position: relative; }
.hero-img { width: 100%; border-radius: 2px; }
.hero-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: linear-gradient(transparent, rgba(20,16,12,.7)); }
.hero-pie-n { font-family: var(--f-display); font-size: 1.75rem; text-transform: uppercase; color: var(--papel); letter-spacing: .02em; line-height: 1; -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
@media (max-width: 1000px) and (min-width: 701px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; }
  .hero-titulo { font-size: clamp(3rem, 7.4vw, 4.5rem); }
}
@media (max-width: 700px) {
  .hero-in { grid-template-columns: 1fr; padding-top: 28px; gap: 32px; }

  .hero-foto { margin: 0 calc(var(--margen) * -1); }
  .hero-img { border-radius: 0; }
}

/* ---------- B. la que lleva el nombre ---------- */
.firma { background: url("img/grano.png") repeat, var(--verde); color: var(--papel); padding: var(--sec) 0; }
.firma-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 7vw, 120px); align-items: start; }
.firma-cab { position: sticky; top: calc(var(--hdr) + 40px); }
.firma .ceja { color: var(--crema-2); }
.firma-titulo { margin-top: 16px; font-size: var(--t-l); color: var(--crema-2); }
.firma-desc { margin-top: 22px; max-width: 42ch; font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.5; }
.firma-acciones { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.firma .agregar { background: var(--crema-2); }
.firma .agregar::before { background: var(--verde); }
.firma .agregar-mas { background: var(--azul); }
.ingredientes { counter-reset: ing; border-top: 2px solid rgba(243,220,198,.35); }
.ing { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: clamp(22px, 3.2vw, 40px) 0; border-bottom: 2px solid rgba(243,220,198,.35); }
.ing-n { font-weight: 700; font-size: .9375rem; letter-spacing: .1em; color: var(--crema-2); }
.ing-t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: .95; color: var(--papel); -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.js .ing { opacity: .32; transform: translateX(-10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js .ing.ve { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .firma-in { grid-template-columns: 1fr; }
  .firma-cab { position: static; }
  .ing { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ---------- C. ¿qué se te antoja? ---------- */
.antojos { background: url("img/papel.png") repeat, var(--papel); color: var(--tinta); padding: var(--sec) 0 calc(var(--sec) * .6); }
.antojos-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.antojos-titulo { font-size: var(--t-l); color: var(--azul-hondo); }
.antojos-lista { border-top: 2px solid var(--tinta); }
.antojo { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; grid-template-areas: "img t f" "img d f"; align-items: center; column-gap: 20px; min-height: 104px; padding: 16px 0; border-bottom: 2px solid var(--tinta); text-decoration: none; }
.antojo-img { grid-area: img; width: 64px; height: auto; border-radius: 2px; }
.antojo-t { grid-area: t; align-self: end; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: .95; color: var(--azul-hondo); -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.antojo-d { grid-area: d; align-self: start; margin-top: 6px; color: var(--tinta-2); font-size: .9375rem; }
.antojo-flecha { grid-area: f; width: 28px; height: 28px; position: relative; }
.antojo-flecha::before { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; transition: transform var(--medio) var(--ease-out); }
.antojo:not(:has(img))::before { content: ""; grid-area: img; width: 64px; height: 2px; background: var(--linea); }
@media (hover: hover) and (pointer: fine) {
  .antojo:hover .antojo-t { color: var(--frambuesa); }
  .antojo:hover .antojo-flecha::before { transform: translateX(6px); }
}
.antojo:active { background: var(--papel-2); }
@media (max-width: 860px) {
  .antojos-in { grid-template-columns: 1fr; }
  .antojo { grid-template-columns: 52px minmax(0, 1fr) 24px; column-gap: 14px; min-height: 92px; }
  .antojo-img, .antojo:not(:has(img))::before { width: 52px; }
}

/* ---------- D. la carta ---------- */
.carta { background: url("img/papel.png") repeat, var(--papel); color: var(--tinta); padding: calc(var(--sec) * .5) 0 var(--sec); }
.sec-cab { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.sec-titulo { margin-top: 14px; font-size: var(--t-l); }
.carta .sec-titulo { color: var(--azul-hondo); }
.carta .ceja { color: var(--frambuesa); }
.sec-sub { margin-top: 18px; max-width: 52ch; font-size: 1.125rem; }

.buscador { max-width: var(--ancho); margin: 32px auto 0; padding: 0 var(--margen); }
.buscar-campo { position: relative; display: block; max-width: 560px; }
.buscar-campo input { width: 100%; min-height: 54px; padding: 10px 16px 10px 50px; border: 2px solid var(--tinta); border-radius: 3px; background: #fffdf8; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.buscar-campo input::placeholder { color: #7d7a72; }
.buscar-campo input:focus-visible { outline: 3px solid var(--frambuesa); outline-offset: 2px; }
.lupa { position: absolute; left: 17px; top: 50%; width: 17px; height: 17px; margin-top: -10px; border: 2px solid var(--tinta); border-radius: 50%; pointer-events: none; }
.lupa::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 7px; height: 2px; background: var(--tinta); transform: rotate(45deg); }
.resultados { margin-top: 18px; padding: 8px 0 4px; border-top: 2px solid var(--tinta); }
.resultados-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resultados-n { font-weight: 700; }
.ir-a { margin-top: 6px; background: none; border: 0; padding: 6px 0; min-height: 36px; font-weight: 700; font-size: .875rem; color: var(--frambuesa); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* navegación de categorías: queda fija bajo la cabecera mientras recorres la carta */
.cat-nav { position: sticky; top: var(--hdr); z-index: 20; margin-top: 36px; background: url("img/papel.png") repeat, var(--papel); border-bottom: 2px solid var(--tinta); }
.cat-nav-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cat-nav-in::-webkit-scrollbar { display: none; }
.cat-link { flex: none; position: relative; padding: 16px 0 13px; text-decoration: none; font-weight: 700; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; transition: color var(--medio) var(--ease-out); }
.cat-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--frambuesa); transform: scaleY(0); transform-origin: bottom; transition: transform var(--medio) var(--ease-out); }
.cat-link[aria-current="true"] { color: var(--tinta); }
.cat-link[aria-current="true"]::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .cat-link:hover { color: var(--tinta); } }

.cats { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.cat { padding-top: clamp(56px, 7vw, 96px); }
.cat-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "b n"; align-items: end; column-gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--tinta); }
.cat-titulo { grid-area: t; font-family: var(--f-display); text-transform: uppercase; font-size: var(--t-m); line-height: .95; letter-spacing: .01em; color: var(--azul-hondo); -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.cat-baj { grid-area: b; margin-top: 6px; font-style: italic; color: var(--frambuesa); font-weight: 600; }
.cat-n { grid-area: n; font-weight: 700; font-size: .875rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cat-n::after { content: " en la carta"; font-weight: 400; }
.cat-nota { margin-top: 14px; font-size: .9375rem; font-weight: 600; color: var(--verde-hondo); }
.cat-plegable > summary { list-style: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto 32px; grid-template-areas: "t n p" "b n p"; }
.cat-plegable > summary::-webkit-details-marker { display: none; }
.plegar { grid-area: p; width: 32px; height: 32px; border: 2px solid currentColor; border-radius: 50%; position: relative; align-self: center; }
.plegar::before, .plegar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform var(--medio) var(--ease-out); }
.plegar::after { transform: rotate(90deg); }
.cat-plegable[open] .plegar::after { transform: rotate(0); }
.cat-plegable .cat-n::after { content: " · toca para ver"; }
.cat-plegable[open] .cat-n::after { content: " en la carta"; }

/* platos: lista a dos columnas; los que tienen foto real ocupan todo el ancho */
.platos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.plato { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.plato-txt { min-width: 0; }
.plato-nombre { font-family: var(--f-display); text-transform: uppercase; font-size: var(--t-plato); line-height: 1; letter-spacing: .02em; color: var(--tinta); -webkit-text-stroke: .025em currentColor; paint-order: stroke fill; }
.plato-desc { margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--tinta-2); max-width: 46ch; }
.plato-precios { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sello { display: inline-block; margin-left: 10px; padding: 3px 7px 2px; vertical-align: 4px; background: var(--frambuesa); color: var(--papel); font-family: var(--f-texto); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; line-height: 1.2; }
.plato.resaltado { animation: resalta 1.6s var(--ease-out); }
@keyframes resalta { 0%, 30% { background: rgba(234,197,166,.7); } 100% { background: transparent; } }

/* franja de platos con foto real: la foto completa, sin recortes */
.destacados { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 44px); padding: 28px 0 32px; border-bottom: 2px solid var(--tinta); }
.destacados-1 { --cols: 1; } .destacados-3 { --cols: 3; }
.plato-destacado { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 16px; padding: 0; border: 0; }
.plato-destacado .plato-fig { align-self: end; }
.destacados-1 .plato-destacado { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: clamp(24px, 4vw, 56px); }
.plato-img { width: 100%; border-radius: 2px; }
.plato-destacado .plato-nombre { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: .92; }
.plato-destacado .plato-desc { margin-top: 10px; font-size: 1rem; }
.plato-destacado .plato-precios { margin-top: 16px; flex-direction: row; align-items: center; justify-content: flex-start; }

.platos-compactos .plato { padding: 13px 0; }
.platos-compactos .plato-nombre { font-size: 1.25rem; }
.platos-compactos .plato-desc { font-size: .875rem; }

@media (max-width: 760px) {
  .platos { grid-template-columns: 1fr; }
  .destacados { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-right: calc(var(--margen) * -1); padding-right: var(--margen); }
  .destacados::-webkit-scrollbar { display: none; }
  .destacados-1 { grid-auto-columns: 100%; margin-right: 0; padding-right: 0; }
  .destacados { grid-template-rows: auto auto; }
  .destacados-1 .plato-destacado { grid-template-columns: none; grid-row: span 2; grid-template-rows: subgrid; }
  .plato-destacado { scroll-snap-align: start; }
}

/* armador del Fundador Jr. (categoría Agregados) */
.armador { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-areas: "d d" "o t"; gap: 22px clamp(28px, 4vw, 64px); padding-top: 22px; align-items: start; }
.armador-desc { grid-area: d; max-width: 70ch; color: var(--tinta-2); }
.armador-desc strong { color: var(--tinta); }
.opciones { grid-area: o; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--linea); }
.opcion { width: 100%; min-height: 56px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 4px; border: 0; border-bottom: 1px solid var(--linea); background: none; text-align: left; cursor: pointer; transition: background-color var(--medio) var(--ease-out); }
.opcion-check { width: 22px; height: 22px; border: 2px solid var(--tinta); border-radius: 2px; position: relative; transition: background-color var(--rapido) var(--ease-out); }
.opcion-check::after { content: ""; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px; border-right: 2.5px solid var(--papel); border-bottom: 2.5px solid var(--papel); transform: rotate(45deg) scale(.4); opacity: 0; transition: transform var(--rapido) var(--ease-out), opacity var(--rapido) var(--ease-out); }
.opcion-n { font-weight: 600; line-height: 1.2; }
.opcion-n small { display: block; font-weight: 400; font-size: .8125rem; color: var(--tinta-2); }
.opcion-p { font-family: var(--f-display); font-size: 1.1875rem; letter-spacing: .02em; }
.opcion[aria-pressed="true"] .opcion-check { background: var(--verde); border-color: var(--verde); }
.opcion[aria-pressed="true"] .opcion-check::after { opacity: 1; transform: rotate(45deg) scale(1); }
.opcion[aria-pressed="true"] { background: rgba(76,125,108,.1); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { background: var(--papel-2); } }
.armador-total { grid-area: t; position: sticky; top: calc(var(--hdr) + 80px); padding: 22px; background: var(--azul); color: var(--logo); border-radius: 3px; }
.armador-lista { font-weight: 600; min-height: 3em; }
.armador-precio { margin-top: 8px; font-family: var(--f-display); font-size: 3.25rem; line-height: 1; color: var(--crema); font-variant-numeric: tabular-nums; }
.armador-acciones { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.armador-acciones .btn { width: 100%; background: var(--crema); color: var(--azul-hondo); --canto: #b98a66; }
html:not(.js) .opcion, html:not(.js) .armador-acciones { pointer-events: none; }
html:not(.js) .armador-acciones { display: none; }
@media (max-width: 860px) {
  .armador { grid-template-columns: 1fr; grid-template-areas: "d" "o" "t"; }
  .armador-total { position: sticky; bottom: 12px; top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 16px; }
  .armador-lista { grid-column: 1 / -1; min-height: 0; font-size: .875rem; }
  .armador-precio { margin: 0; font-size: 2.25rem; }
  .armador-acciones { margin: 0; }
  .armador-acciones .btn { min-height: 48px; font-size: 1.25rem; padding: 3px 16px 0; outline-offset: -5px; }
  .armador-acciones .btn-texto { display: none; }
}
@media (max-width: 560px) { .opciones { grid-template-columns: 1fr; } }

/* ---------- E. la barra, de noche ---------- */
.barra { background: url("img/grano.png") repeat, var(--noche); color: var(--logo); padding: var(--sec) 0; }
.barra .ceja { color: var(--crema); }
.barra .sec-titulo { color: var(--crema-2); }
.botellas { max-width: var(--ancho); margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--margen); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: end; }
.botella-img { width: 100%; border-radius: 2px; }
.botella figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.botella-n { font-family: var(--f-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--crema-2); letter-spacing: .02em; -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
@media (max-width: 860px) {
  .botellas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .botellas::-webkit-scrollbar { display: none; }
  .botella { scroll-snap-align: start; }
}
.barra .cat-nav { background: url("img/grano.png") repeat, var(--noche); border-bottom-color: rgba(223,205,175,.4); margin-top: clamp(48px, 6vw, 80px); }
.barra .cat-link { color: #a7a196; }
.barra .cat-link[aria-current="true"] { color: var(--crema-2); }
.barra .cat-link::after { background: var(--crema); }
@media (hover: hover) and (pointer: fine) { .barra .cat-link:hover { color: var(--crema-2); } }
.barra .cat-cab { border-bottom-color: rgba(223,205,175,.4); }
.barra .cat-titulo { color: var(--crema-2); }
.barra .cat-n { color: #a7a196; }
.barra .plato { border-bottom-color: rgba(223,205,175,.14); }
.barra .plato-nombre { color: var(--papel); }
.barra .plato-desc { color: #b9b3a8; }
.barra .agregar { background: #2c323e; color: var(--crema-2); }
.barra .agregar::before { background: var(--noche); }
@media (hover: hover) and (pointer: fine) { .barra .agregar:hover { background: #3a4252; } }
.barra :focus-visible { outline-color: var(--crema); }
.barra .platos-compactos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub { margin-top: 28px; }
.sub-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crema); border-bottom: 1px solid rgba(223,205,175,.25); }
.sub-precio { letter-spacing: .04em; font-family: var(--f-display); font-size: 1.25rem; color: var(--crema-2); }
@media (max-width: 1100px) { .barra .platos-compactos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .barra .platos-compactos { grid-template-columns: 1fr; } }

/* ---------- reseñas ---------- */
.resenas { background: url("img/papel.png") repeat, var(--papel); color: var(--tinta); padding: var(--sec) 0; }
.resenas .ceja { color: var(--frambuesa); }
.resenas .sec-titulo { color: var(--azul-hondo); }
.resenas-fila { max-width: var(--ancho); margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--margen); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.resena { padding: 32px 0; border-top: 2px solid var(--tinta); display: flex; flex-direction: column; gap: 22px; }
.resena blockquote p { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.45; }
.resena figcaption { display: grid; gap: 2px; }
.estrellas { color: var(--estrella); letter-spacing: .12em; font-size: 1.0625rem; }
.resena-autor { font-weight: 700; }
.resena-meta { font-size: .875rem; color: var(--tinta-2); }
@media (max-width: 860px) { .resenas-fila { grid-template-columns: 1fr; } }

.dejar { max-width: var(--ancho); margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
.dejar-titulo { font-size: var(--t-m); color: var(--azul-hondo); }
.dejar-txt p { margin-top: 16px; max-width: 38ch; }
.dejar-form { background: var(--azul); color: var(--logo); border-radius: 3px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 22px; }
.dejar-form :focus-visible { outline-color: var(--crema); }
.estrellas-elegir { border: 0; padding: 0; }
.estrellas-elegir legend, .dejar-campo > span { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.estrellas-fila { display: flex; gap: 4px; }
.estrellas-fila label { width: 48px; height: 48px; cursor: pointer; display: grid; place-items: center; transition: transform var(--rapido) var(--ease-out); }
.estrellas-fila label::before { content: "★"; font-size: 2.125rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--crema); transition: color var(--rapido) var(--ease-out); }
.estrellas-fila label.on::before { color: var(--crema); }
.estrellas-fila label:active { transform: scale(.9); }
.estrellas-fila input:focus-visible + label { outline: 2px solid var(--crema); outline-offset: 2px; }
.dejar-campo { display: grid; }
.dejar-campo textarea { font-size: 1.0625rem; line-height: 1.45; color: var(--tinta); background: var(--papel); border: 0; border-radius: 3px; padding: 14px 16px; resize: vertical; min-height: 120px; }
.dejar-nota { font-size: .875rem; line-height: 1.45; opacity: .85; }
@media (max-width: 860px) { .dejar { grid-template-columns: 1fr; } }

/* ---------- F y G. el lugar ---------- */
.lugar { background: url("img/grano.png") repeat, var(--azul); padding: var(--sec) 0; }
.lugar-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "salon txt" "salon fachada"; gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: start; }
.lugar-salon { grid-area: salon; }
.lugar-salon img, .lugar-fachada img { width: 100%; border-radius: 2px; }
.lugar-txt { grid-area: txt; }
.lugar .ceja { color: var(--crema); }
.lugar .sec-titulo { color: var(--logo); }
.lugar-comuna { margin-top: 10px; font-family: var(--f-display); text-transform: uppercase; font-size: 1.75rem; color: var(--crema); letter-spacing: .02em; -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.lugar-reserva { margin-top: 22px; max-width: 40ch; font-size: 1.125rem; }
.lugar-acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.lugar-ig { margin-top: 26px; color: var(--crema); }
.lugar-fachada { grid-area: fachada; max-width: 360px; justify-self: end; }
@media (max-width: 860px) {
  .lugar-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "txt txt" "salon fachada"; }
  .lugar-fachada { max-width: none; align-self: end; }
  .lugar-acciones .btn { flex: 1 1 240px; }
}

.pie { background: url("img/grano.png") repeat, var(--azul-hondo); padding: clamp(56px, 7vw, 96px) var(--margen) calc(40px + env(safe-area-inset-bottom)); }
.pie-marca { width: min(100%, 1100px); margin: 0 auto; opacity: .95; }
.pie-datos { max-width: 1100px; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: .9375rem; }
.pie-nota { opacity: .7; }

/* ---------- Mi mesa ---------- */
.mesa-barra {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
  display: none; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px 0 18px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--azul); color: var(--crema-2); box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  transform: translateY(140%); transition: transform 380ms var(--ease-out);
}
.mesa-barra-n { font-weight: 700; }
.mesa-barra-total { margin-left: auto; font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.mesa-barra-ver { padding: 10px 14px 8px; background: var(--crema); color: var(--azul-hondo); font-family: var(--f-display); text-transform: uppercase; font-size: 1.125rem; letter-spacing: .04em; line-height: 1; border-radius: 2px; }
.mesa-barra.visible { transform: none; }
@media (max-width: 980px) { .js .mesa-barra:not([hidden]) { display: flex; } .con-mesa .pie { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }

.mesa {
  margin: 0 0 0 auto; padding: 0; border: 0; height: 100%; max-height: none; max-width: none; width: min(440px, 100%);
  background: var(--papel); color: var(--tinta); overscroll-behavior: contain;
}
.mesa::backdrop { background: rgba(20,24,32,.5); }
.mesa[open] { animation: mesa-entra 340ms var(--ease-out); }
.mesa[open]::backdrop { animation: velo 340ms var(--ease-out); }
.mesa.saliendo { animation: mesa-sale 200ms var(--ease-in-out) forwards; }
@keyframes mesa-entra { from { transform: translateX(100%); } }
@keyframes mesa-sale { to { transform: translateX(100%); } }
@keyframes velo { from { opacity: 0; } }
.mesa-in { min-height: 100%; display: flex; flex-direction: column; }
.mesa-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; background: var(--azul); color: var(--logo); }
.mesa-titulo { font-size: 2.75rem; color: var(--crema-2); }
.mesa-sub { margin-top: 6px; font-size: .9375rem; }
.cerrar { position: relative; flex: none; width: 44px; height: 44px; border: 2px solid currentColor; border-radius: 50%; background: none; cursor: pointer; transition: transform var(--rapido) var(--ease-out); }
.cerrar::before, .cerrar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.cerrar::after { transform: rotate(-45deg); }
.cerrar:active { transform: scale(.92); }
.mesa-cuerpo { flex: 1; padding: 8px 22px 24px; display: flex; flex-direction: column; }
.mesa-vacia { padding: 28px 0; display: grid; gap: 14px; justify-items: start; }
.mesa-vacia-t { font-family: var(--f-display); text-transform: uppercase; font-size: 1.75rem; line-height: 1; color: var(--azul-hondo); -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.mesa.con-items .mesa-vacia, .mesa:not(.con-items) .mesa-calc { display: none; }
.mesa-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "c q"; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.mesa-lista li.nuevo { animation: entra-fila 420ms var(--ease-out); }
@keyframes entra-fila { from { background: rgba(234,197,166,.8); } }
.m-nombre { grid-area: n; font-weight: 700; line-height: 1.25; }
.m-unit { display: block; font-weight: 400; font-size: .875rem; color: var(--tinta-2); }
.m-sub { grid-area: s; font-family: var(--f-display); font-size: 1.375rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: right; }
.m-cant { grid-area: c; display: flex; align-items: center; gap: 2px; justify-self: start; background: var(--papel-2); border-radius: 3px; }
.m-cant button, .m-quitar { width: 40px; height: 40px; border: 0; background: none; border-radius: 3px; font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: transform var(--rapido) var(--ease-out); }
.m-cant button:active, .m-quitar:active { transform: scale(.9); }
.m-cant output { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-quitar { grid-area: q; justify-self: end; width: auto; padding: 0 4px; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-2); }
.mesa-calc { margin-top: 18px; display: grid; gap: 14px; }
.fila { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.propina { border: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.propina legend { float: left; font-weight: 400; padding: 0; }
.propina-ops { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--tinta); border-radius: 3px; overflow: hidden; }
.propina-ops label { min-height: 48px; display: grid; place-content: center; text-align: center; font-weight: 700; cursor: pointer; line-height: 1.1; transition: background-color var(--rapido) var(--ease-out), color var(--rapido) var(--ease-out); }
.propina-ops label:not(:first-of-type) { border-left: 1px solid var(--tinta); }
.propina-ops small { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; }
.propina-ops input:checked + label { background: var(--tinta); color: var(--papel); }
.propina-ops input:focus-visible + label { outline: 3px solid var(--frambuesa); outline-offset: -3px; }
.propina-monto { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; }
.fila.total { padding-top: 12px; border-top: 2px solid var(--tinta); font-weight: 700; font-size: 1.1875rem; }
.dividir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.paso { display: flex; align-items: center; gap: 4px; border: 2px solid var(--tinta); border-radius: 3px; }
.paso button { width: 46px; height: 44px; border: 0; background: none; font-size: 1.375rem; font-weight: 700; cursor: pointer; }
.paso button:disabled { opacity: .3; cursor: default; }
.paso output { min-width: 28px; text-align: center; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.por-persona { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--azul); color: var(--logo); border-radius: 3px; }
.pp-lbl { font-weight: 700; }
.pp-monto { font-family: var(--f-display); font-size: 2.75rem; line-height: 1; color: var(--crema-2); font-variant-numeric: tabular-nums; }
.mesa-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mesa-acciones .btn { flex: 1 1 220px; }
.mesa-nota { margin-top: auto; padding-top: 22px; font-size: .8125rem; line-height: 1.45; color: var(--tinta-2); }
@media (max-width: 600px) {
  .mesa { width: 100%; height: 92dvh; margin: auto 0 0; border-radius: 10px 10px 0 0; }
  .mesa[open] { animation-name: mesa-sube; }
  .mesa.saliendo { animation-name: mesa-baja; }
  .mesa-cab { border-radius: 10px 10px 0 0; padding: 16px 18px 14px; }
  .mesa-titulo { font-size: 2.25rem; }
  .mesa-cuerpo { padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }
  @keyframes mesa-sube { from { transform: translateY(100%); } }
  @keyframes mesa-baja { to { transform: translateY(100%); } }
}

/* aviso breve: confirma lo que pasó y ofrece una acción */
.aviso {
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  width: fit-content; max-width: calc(100% - 24px); margin: 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; min-height: 52px;
  background: var(--tinta); color: var(--papel); border-radius: 3px; font-weight: 600; font-size: .9375rem; line-height: 1.3;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.aviso.ver { opacity: 1; transform: none; pointer-events: auto; }
.aviso-accion { min-height: 36px; padding: 0 12px; border: 0; border-radius: 2px; background: var(--crema); color: var(--azul-hondo); font-weight: 700; cursor: pointer; white-space: nowrap; }
.mesa .aviso { left: auto; right: 16px; width: min(408px, calc(100% - 32px)); bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 980px) { .con-mesa .aviso { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* entradas: solo los títulos de cada sección */
.js .r { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .r.ve { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .r, .js .ing { opacity: 1; transform: none; }
}