/* Chivitos La Tuerca
   Layout: el cartel rojo de la fachada arriba, la carta impresa del local (pastillas + círculos amarillos)
   en el medio y el pedido como una comanda. La tuerca aparece solo como guiño: contador, viñetas y pin. */
:root {
  --rojo: #c8151b;          /* cartel de la fachada */
  --rojo-claro: #dc2c31;
  --rojo-hondo: #8e0e13;    /* círculo del logo */
  --tinta: #1f1612;         /* madera oscura del salón */
  --mostaza: #f4b223;       /* círculos del menú impreso */
  --blanco: #ffffff;
  --azulejo: #f6f0ee;       /* neutro con sesgo al rojo, para secciones alternas */
  --papel: #fffcf5;         /* ticket de comanda */
  --linea: #e7dcd8;
  --gris: #6a5a53;
  --wa: #15803d;
  --wa-hondo: #11672f;
  --ok: #3ddc84;

  --f-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radio: 16px;
  --sombra: 0 18px 40px -18px rgb(31 22 18 / .45);
  --sombra-suave: 0 8px 24px -14px rgb(31 22 18 / .35);
  --cab-alto: 76px;
  --cab-compacto: 60px;
  --hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.3, 1.5, .5, 1);

  color-scheme: light;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 132px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--tinta); color: var(--blanco); padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.saltar:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.envoltura {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) {
  .envoltura { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 1rem/1.1 var(--f-texto); text-decoration: none; text-align: center;
  transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }
.btn--grande { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn--blanco { background: var(--blanco); color: var(--rojo-hondo); }
.btn--linea-clara { border-color: rgb(255 255 255 / .7); color: var(--blanco); }
.btn--rojo { background: var(--rojo); color: var(--blanco); }
.btn--linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--wa { background: var(--wa); color: var(--blanco); }
@media (hover: hover) {
  .btn--blanco:hover { background: var(--mostaza); color: var(--tinta); }
  .btn--linea-clara:hover { background: var(--blanco); color: var(--rojo); border-color: var(--blanco); }
  .btn--rojo:hover { background: var(--rojo-hondo); }
  .btn--linea:hover { background: var(--tinta); color: var(--blanco); }
  .btn--wa:hover { background: var(--wa-hondo); }
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--blanco);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .4s var(--curva);
}
.cabecera.is-compacta { background: var(--blanco); color: var(--tinta); box-shadow: 0 6px 24px -16px rgb(31 22 18 / .5); }
.cabecera.is-oculta:not(.is-abierta) { transform: translateY(-110%); }
.cabecera.is-abierta { background: var(--blanco); color: var(--tinta); }
.cabecera__in {
  display: flex; align-items: center; gap: 12px;
  height: var(--cab-alto);
  max-width: 1240px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  transition: height .3s var(--curva);
}
.is-compacta .cabecera__in { height: var(--cab-compacto); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca__logo {
  width: 50px; height: 50px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--blanco);
  transition: width .3s var(--curva), height .3s var(--curva);
}
.is-compacta .marca__logo { width: 42px; height: 42px; }
.marca__nombre {
  font: 900 1rem/.92 var(--f-display); font-stretch: 78%; text-transform: uppercase; letter-spacing: .02em;
}
.nav { display: none; }
.nav__lista { display: flex; gap: 2px; }
.nav__lista a {
  position: relative; display: block; padding: 12px 12px;
  font-weight: 700; font-size: .98rem; text-decoration: none;
}
.nav__lista a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--mostaza); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva);
}
.nav__lista a.is-activo::after { transform: scaleX(1); }
@media (hover: hover) { .nav__lista a:hover::after { transform: scaleX(1); } }
.cabecera__acciones { display: flex; align-items: center; gap: 6px; }
.cabecera__wa { display: none; min-height: 44px; padding: 0 16px; font-size: .95rem; }
.bolsa-btn, .menu-btn {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  transition: background-color .2s ease;
}
.bolsa-btn svg, .menu-btn svg { width: 24px; height: 24px; }
@media (hover: hover) { .bolsa-btn:hover, .menu-btn:hover { background: rgb(127 127 127 / .14); } }

/* El contador es una tuerca: cada producto que sumás la ajusta 60° */
.tuerca-badge {
  --giro: 0deg;
  position: absolute; top: -2px; right: -4px;
  display: grid; place-items: center; width: 26px; height: 26px;
  color: var(--tinta); font: 900 .78rem/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.tuerca-badge::before {
  content: ''; position: absolute; inset: 0; background: var(--mostaza); clip-path: var(--hex);
  transform: rotate(var(--giro)); transition: transform .55s var(--rebote);
}
.tuerca-badge b { position: relative; }
.tuerca-badge.is-salto b { animation: salto .45s var(--rebote); }
@keyframes salto { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.menu-movil {
  border-top: 1px solid var(--linea);
  background: var(--blanco); color: var(--tinta);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  box-shadow: 0 24px 40px -24px rgb(31 22 18 / .5);
}
.menu-movil ul { display: grid; margin-bottom: 16px; }
.menu-movil a:not(.btn) {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--linea);
  font: 900 1.9rem/1 var(--f-display); font-stretch: 78%; text-transform: uppercase; text-decoration: none;
}
.menu-movil .btn { width: 100%; }

@media (min-width: 760px) {
  .cabecera__wa { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .menu-movil { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding-top: calc(var(--cab-alto) + env(safe-area-inset-top, 0px) + 20px);
  background: radial-gradient(120% 90% at 12% 0%, var(--rojo-claro) 0%, var(--rojo) 52%, var(--rojo-hondo) 140%);
  color: var(--blanco);
}
/* la franja blanca de abajo: el plato apoya entre el cartel y la página */
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 72px; background: var(--blanco); }
.hero__in {
  position: relative; z-index: 1;
  display: grid; gap: 8px;
  max-width: 1240px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hero__texto { display: grid; justify-items: start; gap: 18px; }
.estado {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgb(31 22 18 / .22); font-weight: 600; font-size: .92rem; line-height: 1.3;
}
.estado__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--mostaza); flex: none; }
.estado.is-abierto .estado__punto { background: var(--ok); box-shadow: 0 0 0 0 rgb(61 220 132 / .6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgb(61 220 132 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0); } }
.hero__titulo {
  font: 900 clamp(4rem, 17vw, 9.5rem)/.84 var(--f-display); font-stretch: 70%;
  text-transform: uppercase; letter-spacing: -.005em;
}
.hero__titulo span { display: block; }
.hero__titulo span:first-child { font-size: .42em; letter-spacing: .14em; font-stretch: 100%; margin-bottom: .12em; }
.hero__bajada { max-width: 36ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: rgb(255 255 255 / .92); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__plato { position: relative; align-self: end; margin-top: 8px; }
.hero__parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero__img { width: 100%; filter: drop-shadow(0 28px 26px rgb(31 22 18 / .38)); }
.sello {
  position: absolute; top: -6%; right: 0; width: clamp(96px, 26vw, 156px);
  transform: rotate(var(--giro, -12deg));
  filter: drop-shadow(0 10px 14px rgb(31 22 18 / .3));
}
.sello__fondo { fill: var(--mostaza); }
.sello__linea { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 2 5; }
.sello__aro { fill: var(--tinta); font: 800 19px var(--f-display); font-stretch: 85%; letter-spacing: .04em; }
.sello__num { fill: var(--tinta); font: 900 64px var(--f-display); font-stretch: 70%; }
.etiqueta {
  position: absolute; left: 0; bottom: 34%;
  display: grid; padding: 10px 16px 10px 30px;
  background: var(--blanco); color: var(--tinta); border-radius: 8px;
  transform: rotate(-5deg); box-shadow: var(--sombra);
}
.etiqueta::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: var(--rojo); clip-path: var(--hex);
}
.etiqueta__nombre { font: 800 .72rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .12em; }
.etiqueta__precio { font: 900 1.9rem/1 var(--f-display); font-stretch: 80%; color: var(--rojo); font-variant-numeric: tabular-nums; }
.etiqueta__nota { font-size: .78rem; color: var(--gris); }

@media (min-width: 1024px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: 24px; }
  .hero__texto { padding-bottom: 120px; }
  .hero__titulo { font-size: clamp(5rem, 8.4vw, 8.6rem); }
  .hero__plato { margin-top: 0; margin-right: -24px; }
  .etiqueta { left: -6%; bottom: 38%; }
}

/* ---------- Franja de datos ---------- */
.franja {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px 28px;
  max-width: 1240px; margin-inline: auto;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 30px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 760px) { .franja { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.franja li { display: flex; align-items: center; gap: 12px; color: var(--gris); font-size: .98rem; line-height: 1.35; }
.franja b { color: var(--tinta); }
.franja svg { width: 26px; height: 26px; color: var(--rojo); flex: none; }

/* ---------- Encabezados de sección ---------- */
.carta, .pedi, .nosotros, .ubicacion, .resenas, .faq, .contacto { padding-block: clamp(64px, 9vw, 120px); }
.seccion__cabeza { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.antetitulo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 .82rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .18em; color: var(--rojo);
}
.antetitulo::before { content: ''; width: 12px; height: 12px; background: currentColor; clip-path: var(--hex); }
.titulo {
  font: 900 clamp(2.4rem, 6.6vw, 4.6rem)/.9 var(--f-display); font-stretch: 74%;
  text-transform: uppercase; text-wrap: balance;
}
.seccion__bajada { max-width: 60ch; color: var(--gris); }
.seccion__cabeza--clara .antetitulo { color: var(--mostaza); }
.seccion__cabeza--clara .seccion__bajada { color: rgb(255 255 255 / .82); }

/* títulos que suben palabra por palabra */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palabra > span { display: inline-block; transition: transform .8s var(--curva); transition-delay: calc(var(--i) * 60ms); }
.js .por-revelar .palabra > span { transform: translateY(110%); }

/* aparición suave de bloques */
.js [data-revelar] { transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-revelar].por-revelar { opacity: 0; transform: translateY(26px); }

/* ---------- Carta ---------- */
.chips {
  position: sticky; z-index: 20;
  top: calc(var(--cab-compacto) + env(safe-area-inset-top, 0px));
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block: 1px solid var(--linea);
  transition: top .4s var(--curva);
}
.cab-oculta .chips { top: env(safe-area-inset-top, 0px); }
.chips__in {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  max-width: 1240px; margin-inline: auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
}
.chips__in::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .chips__in { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco);
  font-weight: 700; font-size: .96rem; text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chip.is-activo { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
@media (hover: hover) { .chip:not(.is-activo):hover { border-color: var(--tinta); } }

.carta__cuerpo { display: grid; gap: clamp(48px, 6vw, 72px); padding-top: 32px; }
.cat { scroll-margin-top: 136px; }
.cat__cabeza { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pastilla {
  padding: .26em 1.5em .2em .75em; border-radius: 999px;
  background: var(--rojo); color: var(--blanco);
  font: 900 clamp(1.55rem, 4vw, 2.2rem)/1 var(--f-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .01em;
}
.pastilla__icono {
  display: grid; place-items: center; width: 60px; height: 60px; margin-left: -26px;
  border-radius: 50%; background: var(--mostaza); color: var(--tinta); box-shadow: 0 0 0 4px var(--blanco);
}
.pastilla__icono svg { width: 34px; height: 34px; }
.cat__nota { flex-basis: 100%; margin-top: 12px; color: var(--gris); font-size: .98rem; }
.cat__grid { display: grid; column-gap: 40px; }
@media (min-width: 760px) { .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.plato {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding-block: 20px; border-bottom: 1.5px dashed var(--linea);
}
.plato__txt { min-width: 0; }
.plato__tag {
  display: inline-block; margin-bottom: 8px; padding: 4px 8px; border-radius: 5px;
  background: var(--mostaza); color: var(--tinta);
  font: 800 .7rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .12em;
}
.plato__nombre { font: 800 1.28rem/1.08 var(--f-display); font-stretch: 84%; text-transform: uppercase; }
.plato__desc { margin: 6px 0 8px; color: var(--gris); font-size: .96rem; line-height: 1.45; max-width: 46ch; }
.plato__precio { font: 900 1.4rem/1 var(--f-display); font-stretch: 86%; color: var(--rojo); font-variant-numeric: tabular-nums; }
.plato__precio--consultar { font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.plato__lado { display: grid; gap: 10px; width: 112px; justify-items: stretch; }
.plato__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  transition: transform .5s var(--curva);
}
@media (hover: hover) { .plato:hover .plato__foto { transform: scale(1.04) rotate(-1.5deg); } }
.plato__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--blanco); font-weight: 700; font-size: .92rem;
  transition: background-color .2s ease, transform .15s ease;
}
.plato__add svg { width: 16px; height: 16px; transition: transform .45s var(--rebote); }
.plato__add:active { transform: scale(.95); }
@media (hover: hover) { .plato__add:hover { background: var(--rojo); } .plato__add:hover svg { transform: rotate(90deg); } }
.plato__add.is-ok { background: var(--wa); }
@media (max-width: 400px) { .plato__lado { width: 100px; } }

/* ---------- Pedí ---------- */
.pedi { background: var(--tinta); color: var(--blanco); }
.pedi__in { display: grid; gap: clamp(28px, 4vw, 44px); justify-items: start; }
.pedi .seccion__cabeza { margin-bottom: 0; }
.pasos { display: grid; gap: 28px; width: 100%; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paso { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid rgb(255 255 255 / .16); }
.paso__n { font: 900 4.6rem/.8 var(--f-display); font-stretch: 66%; color: var(--mostaza); }
.paso h3 { font: 800 1.35rem/1.1 var(--f-display); font-stretch: 84%; text-transform: uppercase; }
.paso p { color: rgb(255 255 255 / .78); max-width: 36ch; }
.pedi__datos { display: grid; gap: 14px 40px; width: 100%; }
@media (min-width: 760px) { .pedi__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pedi__datos p { display: flex; gap: 14px; align-items: flex-start; color: rgb(255 255 255 / .82); }
.pedi__datos svg { width: 28px; height: 28px; color: var(--mostaza); flex: none; }
.pedi__datos b { color: var(--blanco); }

/* ---------- Nosotros ---------- */
.nosotros { background: var(--azulejo); }
.nosotros__in { display: grid; gap: 28px; }
.nosotros .seccion__cabeza { margin-bottom: 0; }
.nosotros__texto { display: grid; gap: 16px; max-width: 60ch; color: var(--gris); }
.nosotros__lead { font: 700 clamp(1.35rem, 2.4vw, 1.75rem)/1.25 var(--f-display); font-stretch: 92%; color: var(--tinta); }
.redes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.red {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 18px 10px 14px;
  border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco);
  color: var(--tinta); text-decoration: none; line-height: 1.25; font-size: .92rem;
  transition: border-color .2s ease, transform .2s var(--curva);
}
.red svg { width: 26px; height: 26px; color: var(--rojo); }
.red b { display: block; font-size: 1rem; }
@media (hover: hover) { .red:hover { border-color: var(--rojo); transform: translateY(-2px); } }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.galeria__item { position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 1; background: var(--linea); }
.galeria__item--alta { grid-row: span 2; aspect-ratio: auto; }
.galeria__item--ancha { grid-column: span 2; aspect-ratio: 16 / 10; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
@media (hover: hover) { .galeria__item:hover img { transform: scale(1.05); } }
.galeria figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 6px;
  background: rgb(31 22 18 / .78); color: var(--blanco);
  font: 800 .72rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .12em;
}
@media (min-width: 1024px) {
  .nosotros__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 56px; }
  .galeria { grid-column: 2; grid-row: 1 / span 2; }
  .nosotros__texto { align-content: start; }
}

/* ---------- Ubicación ---------- */
.ubicacion__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .ubicacion__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 44px; } }
.mapa-marco { border-radius: 20px; overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); background: var(--azulejo); }
.mapa { height: clamp(320px, 48vw, 470px); background: var(--azulejo); }
.mapa .leaflet-tile-pane { filter: grayscale(.85) sepia(.12) contrast(1.04) brightness(1.04); }
.mapa .leaflet-control-attribution { font: 500 .7rem var(--f-texto); }
.leaflet-container { font-family: var(--f-texto); }
.pin-tuerca { position: relative; }
.pin-tuerca__nuez {
  position: absolute; inset: 6px; display: grid; place-items: center;
  background: var(--rojo); clip-path: var(--hex);
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35));
}
.pin-tuerca__nuez::after { content: ''; width: 34%; height: 34%; border-radius: 50%; background: var(--blanco); }
.pin-tuerca__pulso {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--rojo); opacity: 0;
  animation: pulso 2.4s ease-out infinite;
}
.pin-tuerca__pulso + .pin-tuerca__pulso { animation-delay: 1.2s; }
@keyframes pulso { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--sombra); }
.leaflet-popup-content { margin: 14px 16px; line-height: 1.45; font-size: .92rem; color: var(--tinta); }
.popup b { display: block; font: 900 1.15rem/1.1 var(--f-display); font-stretch: 82%; text-transform: uppercase; }
.popup a { color: var(--rojo-hondo); font-weight: 700; }
.ubicacion__info { display: grid; gap: 22px; }
.direccion { display: flex; gap: 12px; align-items: flex-start; color: var(--gris); }
.direccion svg { width: 30px; height: 30px; color: var(--rojo); flex: none; margin-top: 4px; }
.direccion b { display: block; color: var(--tinta); font: 900 2.1rem/1 var(--f-display); font-stretch: 76%; text-transform: uppercase; }
.ubicacion__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.horario { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horario caption {
  text-align: left; padding-bottom: 8px;
  font: 800 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .16em; color: var(--rojo);
}
.horario th, .horario td { padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.horario th { text-align: left; font-weight: 600; }
.horario td { text-align: right; color: var(--gris); }
.horario tr.is-hoy th, .horario tr.is-hoy td { background: var(--azulejo); color: var(--tinta); font-weight: 700; }
.horario tr.is-hoy th::after {
  content: 'Hoy'; margin-left: 8px; padding: 2px 7px; border-radius: 4px; background: var(--rojo); color: var(--blanco);
  font: 800 .66rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .1em; vertical-align: 2px;
}
.nota-chica { font-size: .875rem; color: var(--gris); line-height: 1.5; }

/* ---------- Reseñas ---------- */
.resenas { background: var(--azulejo); overflow: hidden; }
.puntajes { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.puntajes li { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; color: var(--gris); font-size: .92rem; }
.puntajes b { grid-row: span 2; font: 900 3.2rem/1 var(--f-display); font-stretch: 74%; color: var(--tinta); }
.estrellas { display: flex; gap: 2px; color: var(--mostaza); }
.estrellas svg { width: 18px; height: 18px; }
.estrellas .media { opacity: .35; }
.cinta {
  margin-top: 36px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cinta__pista { display: flex; gap: 16px; width: max-content; padding-block: 6px; animation: cinta 90s linear infinite; }
.cinta:hover .cinta__pista, .cinta:focus-within .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(calc(-50% - 8px)); } }
.resena {
  flex: 0 0 clamp(270px, 30vw, 360px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 24px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea);
}
.resena p { font-size: 1.02rem; line-height: 1.5; }
.resena footer { display: grid; gap: 2px; }
.resena__autor { font-weight: 700; }
.resena__fuente { font-size: .84rem; color: var(--gris); }
.resenas__nota { margin-top: 24px; }
.resenas__nota a { color: var(--rojo-hondo); font-weight: 600; }

/* ---------- Preguntas ---------- */
.faq__in { display: grid; gap: 12px; }
@media (min-width: 900px) { .faq__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; } }
.faq__lista { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 800 1.2rem/1.2 var(--f-display); font-stretch: 88%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background:
    linear-gradient(var(--blanco), var(--blanco)) center / 12px 2.5px no-repeat,
    linear-gradient(var(--blanco), var(--blanco)) center / 2.5px 12px no-repeat,
    var(--rojo);
  transition: transform .35s var(--rebote);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--curva), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq__resp { padding-bottom: 20px; color: var(--gris); max-width: 62ch; }

/* ---------- Contacto ---------- */
.contacto { background: var(--rojo); color: var(--blanco); }
.contacto__grid { display: grid; gap: 16px; }
@media (min-width: 600px) { .contacto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .contacto__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dato {
  display: grid; align-content: start; gap: 6px; padding: 24px;
  border-radius: var(--radio); background: var(--blanco); color: var(--tinta);
}
.dato > svg { width: 30px; height: 30px; color: var(--rojo); margin-bottom: 6px; }
.dato__rotulo { font: 800 .75rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .14em; color: var(--gris); }
.dato__valor { font: 900 1.65rem/1.1 var(--f-display); font-stretch: 82%; font-variant-numeric: tabular-nums; }
.dato__valor a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dato__extra { color: var(--gris); font-size: .95rem; }
.copiar {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco);
  font-weight: 600; font-size: .88rem; transition: border-color .2s ease;
}
.copiar svg { width: 18px; height: 18px; }
@media (hover: hover) { .copiar:hover { border-color: var(--tinta); } }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: rgb(255 255 255 / .78); padding-block: 48px 120px; }
.pie__in { display: grid; gap: 28px; }
@media (min-width: 1024px) { .pie__in { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; } .pie { padding-bottom: 48px; } }
.pie__marca { display: flex; align-items: center; gap: 14px; }
.pie__marca img { width: 56px; height: 56px; border-radius: 50%; }
.pie__marca p { font: 900 1.1rem/1.1 var(--f-display); font-stretch: 80%; text-transform: uppercase; color: var(--blanco); }
.pie__marca span { font: 500 .85rem var(--f-texto); text-transform: none; color: rgb(255 255 255 / .7); }
.pie__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie__nav a { display: inline-block; padding: 8px 0; text-decoration: none; font-weight: 600; }
@media (hover: hover) { .pie__nav a:hover { color: var(--blanco); text-decoration: underline; } }
.pie__legal { display: grid; gap: 6px; font-size: .85rem; max-width: 46ch; }
.pie__legal a { color: rgb(255 255 255 / .9); }
.credit {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: rgb(255 255 255 / .7); transition: color .25s ease;
}
.credit svg { width: auto; height: 1.375rem; fill: currentColor; }
@media (hover: hover) { .credit:hover { color: var(--blanco); } }

/* ---------- Flotantes ---------- */
.wa-flotante {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: var(--blanco); box-shadow: var(--sombra);
  transition: transform .25s var(--rebote), background-color .2s ease;
}
.wa-flotante svg { width: 30px; height: 30px; }
@media (hover: hover) { .wa-flotante:hover { transform: scale(1.07); background: var(--wa-hondo); } }
.barra-pedido {
  position: fixed; z-index: 40;
  left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + 58px + 12px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 20px 0 9px;
  border: 0; border-radius: 999px; background: var(--tinta); color: var(--blanco); box-shadow: var(--sombra);
  font-weight: 700; text-align: left;
  transition: transform .45s var(--rebote), opacity .3s ease;
}
@starting-style { .barra-pedido { transform: translateY(150%); opacity: 0; } }
.barra-pedido .tuerca-badge { position: relative; inset: auto; width: 40px; height: 40px; font-size: 1rem; flex: none; }
.barra-pedido__txt { flex: 1; }
.barra-pedido__total { font: 900 1.3rem/1 var(--f-display); font-stretch: 84%; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .barra-pedido { right: auto; min-width: 340px; } }

.aviso {
  position: fixed; z-index: 70; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px;
  background: var(--tinta); color: var(--blanco); font-weight: 600; font-size: .95rem; text-align: center;
  box-shadow: var(--sombra); pointer-events: none;
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s ease, transform .35s var(--curva);
}
.aviso.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Diálogos: personalizar plato y carrito ---------- */
dialog { padding: 0; border: 0; color: var(--tinta); background: var(--blanco); max-width: none; max-height: none; }
dialog::backdrop { background: rgb(31 22 18 / .55); opacity: 0; transition: opacity .35s ease, display .35s allow-discrete, overlay .35s allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
dialog.is-cerrando::backdrop { opacity: 0; }

.carrito, .hoja {
  position: fixed; margin: 0; width: 100%;
  inset: auto 0 0 0; max-height: 92dvh; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px -20px rgb(31 22 18 / .5);
  transform: translateY(0); transition: transform .45s var(--curva), display .45s allow-discrete, overlay .45s allow-discrete;
}
@starting-style { .carrito[open], .hoja[open] { transform: translateY(100%); } }
.carrito.is-cerrando, .hoja.is-cerrando { transform: translateY(100%); }
.carrito[open], .hoja[open] { display: flex; flex-direction: column; }
@media (min-width: 760px) {
  .carrito { inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: none; border-radius: 22px 0 0 22px; }
  @starting-style { .carrito[open] { transform: translateX(100%); } }
  .carrito.is-cerrando { transform: translateX(100%); }
  .hoja { inset: 0; margin: auto; width: min(540px, calc(100vw - 48px)); height: fit-content; max-height: 90dvh; border-radius: 22px; }
  @starting-style { .hoja[open] { transform: translateY(24px) scale(.97); opacity: 0; } }
  .hoja.is-cerrando { transform: translateY(24px) scale(.97); opacity: 0; }
  .hoja { transition: transform .35s var(--curva), opacity .25s ease, display .35s allow-discrete, overlay .35s allow-discrete; }
}

.hoja__in { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hoja__cerrar, .carrito__cerrar {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-suave);
}
.hoja__cerrar svg, .carrito__cerrar svg { width: 22px; height: 22px; }
.hoja__cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; }
.hoja__foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.hoja__cuerpo { display: grid; gap: 14px; padding: 22px 20px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.hoja__nombre { padding-right: 48px; font: 900 1.8rem/1 var(--f-display); font-stretch: 78%; text-transform: uppercase; }
.hoja__desc { color: var(--gris); font-size: .96rem; }
.hoja__grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.hoja__grupo legend { padding: 0; margin-bottom: 10px; font: 800 .8rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .14em; color: var(--rojo); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--linea); border-radius: 999px; font-weight: 600; font-size: .95rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.opcion input:focus-visible + span { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.opcion--sin input:checked + span { background: var(--azulejo); border-color: var(--rojo); color: var(--rojo-hondo); text-decoration: line-through; text-decoration-thickness: 2px; }
.opcion--una input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.hoja__pie {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea);
}
.hoja__agregar { flex: 1; }
.paso-cant { display: inline-flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 999px; }
.paso-cant button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.paso-cant button svg { width: 16px; height: 16px; }
.paso-cant output { min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.carrito__in { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.carrito__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); flex: none; }
.carrito__titulo { font: 900 1.7rem/1 var(--f-display); font-stretch: 76%; text-transform: uppercase; }
.carrito__cerrar { box-shadow: none; background: var(--azulejo); }
.carrito__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 22px; }
.carrito__vacio, .carrito__listo { display: grid; justify-items: center; gap: 14px; padding: 36px 8px; text-align: center; color: var(--gris); }
.carrito__vacio > svg { width: 64px; height: 64px; color: var(--mostaza); }
.carrito__vacio b, .carrito__listo b { color: var(--tinta); }
.carrito__listo > svg { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--wa); color: var(--blanco); }

.lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1.5px dashed var(--linea); }
.linea__nombre { font-weight: 700; line-height: 1.3; }
.linea__nota { display: block; color: var(--gris); font-size: .88rem; font-style: italic; }
.linea__precio { font: 800 1.1rem/1.3 var(--f-display); font-stretch: 86%; font-variant-numeric: tabular-nums; text-align: right; }
.linea__acciones { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.linea__nota-edit { grid-column: 1 / -1; }
.enlace {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px;
  border: 0; background: none; color: var(--rojo-hondo); font-weight: 600; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.enlace svg { width: 16px; height: 16px; }

.datos { display: grid; gap: 16px; margin-top: 20px; }
.campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo__rotulo { padding: 0; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.campo__input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: 12px; background: var(--blanco);
  font-size: 16px; line-height: 1.3;
  transition: border-color .2s ease;
}
.campo__input:focus { border-color: var(--rojo); outline: none; box-shadow: 0 0 0 3px rgb(244 178 35 / .55); }
textarea.campo__input { min-height: 72px; resize: vertical; }
.campo__input[aria-invalid="true"] { border-color: var(--rojo); }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmento label { position: relative; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px;
  border: 1.5px solid var(--linea); border-radius: 12px; font-weight: 700; text-align: center; line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.segmento input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.segmento input:focus-visible + span { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.error { padding: 10px 14px; border-radius: 10px; background: #fdeceb; color: var(--rojo-hondo); font-weight: 600; font-size: .92rem; }

.comanda { margin-top: 18px; }
.comanda summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--gris); }
.comanda__ticket {
  margin: 4px 0 0; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--papel); border: 1.5px dashed var(--linea); border-radius: 4px;
  font: 400 .84rem/1.6 var(--f-mono); color: var(--tinta);
}

.carrito__pie {
  display: grid; gap: 10px; flex: none;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea); background: var(--blanco);
}
.totales { display: grid; gap: 4px; margin: 0; }
.totales div { display: flex; justify-content: space-between; gap: 12px; color: var(--gris); font-size: .95rem; }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.totales .totales__total { color: var(--tinta); font: 900 1.6rem/1.1 var(--f-display); font-stretch: 80%; text-transform: uppercase; }
.totales__nota { font-size: .85rem; color: var(--gris); }
.carrito__enviar { width: 100%; }
.carrito__extra { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-revelar].por-revelar { opacity: 1; transform: none; }
  .js .por-revelar .palabra > span { transform: none; }
  .hero__parallax { transform: none; }
  .cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .cinta__pista { animation: none; }
}

html.con-dialogo { overflow: hidden; }
.mapa__error { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--gris); }
.mapa__error a { color: var(--rojo-hondo); font-weight: 700; }