/* ==========================================================
   Kitchen Chips & food · menú digital
   Paleta extraída del PDF (MenuKitchen.pdf):
   crema #FEE9D9 · vino #66121E · naranja #D75314
   cobre #B76A3A · verde oscuro #112216 · amarillo #FBBB44
   Tipografías: RUMIKON -> Lilita One · Aloevera Display -> Montserrat
   Animaciones: solo transform, opacity y clip-path
   (más el trazo del logo en la intro).
   ========================================================== */
:root {
  --cream: #FEE9D9;
  --wine: #66121E;
  --orange: #D75314;
  --copper: #B76A3A;
  --green: #112216;
  --yellow: #FBBB44;

  --line: rgba(102, 18, 30, .2);

  --f-display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", Impact, system-ui, sans-serif;
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, .7, .2, 1);
  --nav-h: 56px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--nav-h); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--wine);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* controles táctiles: respuesta inmediata (sin espera de doble toque) y sin seleccionar el texto al mantener el dedo */
button, a, [role="button"], .tab, .dish { touch-action: manipulation; }
button, .btn, .tab, .fab, .ctl { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 300;
  background: var(--wine); color: var(--cream); padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
[data-theme="wine"] :focus-visible, [data-theme="green"] :focus-visible, .group--green :focus-visible { outline-color: var(--yellow); }

/* ---------- Logo SVG (clonado por JS) ---------- */
.logo-src { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo .lyr { fill: currentColor; }
.logo path { transform-box: fill-box; transform-origin: 50% 100%; }
.logo .lyr--b { opacity: 0; transition: opacity .5s ease; }
.logo .lyr--stroke { fill: none; }
.logo .lyr--stroke path { fill: none; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; stroke-dasharray: 1 1.5; stroke-dashoffset: 1; }
/* paralaje por capas (muy sutil) */
.logo .lg-face { transform: translate(calc(var(--px, 0) * 1.9px), calc(var(--py, 0) * 1.5px)); }
.logo .lg-type { transform: translate(calc(var(--px, 0) * -1.1px), calc(var(--py, 0) * -.9px)); }
.logo .lg-tag  { transform: translate(calc(var(--px, 0) * -.5px), calc(var(--py, 0) * -.4px)); }
/* firma de la marca: ondulación + brillo al tocar */
.logo.is-wave .lyr path { animation: wave .85s var(--w, 0s) ease-in-out; }
.logo .sheen { opacity: 0; transform: translateX(-70px) skewX(-18deg); }
.logo.is-wave .sheen { animation: sheen 1s .05s ease-in-out; }
@keyframes wave {
  0%, 100% { transform: none; }
  35% { transform: translateY(-5%) scaleY(1.07); }
  65% { transform: translateY(1.5%) scaleY(.98); }
}
@keyframes sheen {
  0%   { opacity: 1; transform: translateX(-70px) skewX(-18deg); }
  100% { opacity: 1; transform: translateX(190px) skewX(-18deg); }
}

/* ---------- Intro de marca ---------- */
.intro { display: none; }
.intro-on .intro { display: block; }
.intro__bg { position: fixed; inset: 0; z-index: 150; background: var(--wine); }
.intro__logo {
  --w: min(52vw, 250px);
  position: fixed; inset: 0; margin: auto; z-index: 170; pointer-events: none;
  width: var(--w); height: calc(var(--w) * 1.1841);
}
.intro .lyr--cream { color: var(--cream); opacity: 0; }
.intro .lyr--wine  { color: var(--wine); opacity: 0; }
.intro .lyr--stroke { color: var(--cream); }
.intro.is-drawing .lyr--stroke path { animation: draw .95s var(--d, 0s) cubic-bezier(.5, 0, .3, 1) forwards; }
.intro.is-drawing .lyr--cream { animation: fade-in .6s 1.25s ease forwards; }
.intro.is-drawing .lyr--stroke { animation: fade-out .45s 1.55s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }

html.intro-on #page { position: relative; z-index: 160; clip-path: circle(0px at 50% 50%); }
html.intro-on .brand__logo { opacity: 0; }
html.intro-on .hero *, html.intro-on .hero *::before { animation-play-state: paused; }
html.intro-on.intro-reveal .hero *, html.intro-on.intro-reveal .hero *::before { animation-play-state: running; }

/* ---------- Botones ---------- */
.ico { width: 20px; height: 20px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .02em; text-decoration: none;
  border: 1.5px solid var(--wine); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease);
}
.btn--primary { background: var(--wine); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--wine); }
.btn--light { background: var(--cream); color: var(--wine); border-color: var(--cream); }
[data-theme="cream"] .btn--light { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.btn:active { transform: scale(.97); }
.menu .btn--ghost { color: inherit; border-color: currentColor; }

/* ---------- Navegación fija ---------- */
.nav { position: sticky; top: 0; z-index: 30; }
/* fondo: transparente arriba, crema con desenfoque suave al bajar (solo cambia la opacidad) */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(254, 233, 217, .9); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0; transition: opacity .3s ease;
}
.nav.is-scrolled::before { opacity: 1; }
.nav__inner {
  position: relative; max-width: 1120px; margin: 0 auto;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
}
.brand {
  width: 56px; height: var(--nav-h); display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.brand__logo { display: block; width: 34px; color: var(--wine); }
.brand__logo img { width: 34px; height: auto; }
.brand:active .brand__logo { transform: scale(.92); }

.tabs {
  --fl: 0px; --fr: 0px;
  min-width: 0; transition: opacity .25s ease;
  /* desvanecido en el borde solo cuando hay más pestañas a ese lado: ninguna se corta en seco */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.tabs.fade-l { --fl: 28px; }
.tabs.fade-r { --fr: 28px; }
.nav.search-open .tabs { opacity: 0; pointer-events: none; }
.tabs__track {
  position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 0 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs__track::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1; flex: none; height: var(--nav-h); padding: 0 14px;
  display: flex; align-items: center; justify-content: center;
  color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
  font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.tab > span { display: block; opacity: .75; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.tab:active > span { transform: scale(.94); }
.tab[aria-current="true"] > span { opacity: 1; }
/* "gota": la píldora y su texto en crema comparten el mismo recorte animado */
.tabs__pill, .tabs__ink {
  position: absolute; left: 0; top: 0; height: var(--nav-h); pointer-events: none;
  clip-path: inset(10px 100% 10px 0 round 18px); transition: opacity .25s ease;
}
.tabs__pill { z-index: 0; background: var(--wine); }
.tabs__ink { z-index: 2; display: flex; gap: 4px; padding: 0 4px; color: var(--cream); }
.tabs__ink .tab { cursor: default; z-index: auto; }
.tabs__ink .tab > span { opacity: 1; }
.nav.no-active .tabs__pill, .nav.no-active .tabs__ink,
.nav.is-search .tabs__pill, .nav.is-search .tabs__ink { opacity: 0; }

/* buscador: ícono sencillo que se expande en un campo dentro de la propia barra */
.search-toggle {
  width: 44px; height: 44px; margin-right: 6px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent; transition: opacity .2s ease;
}
.search-toggle svg { width: 22px; height: 22px; }
.search-toggle:active { transform: scale(.9); }
.nav.search-open .search-toggle { opacity: 0; pointer-events: none; }

.search {
  position: absolute; left: 56px; right: 6px; top: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none; visibility: hidden; transition: visibility 0s .4s;
}
.search.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.search__field {
  position: relative; width: min(100%, 520px); height: 42px; display: flex; align-items: center;
  background: rgba(255, 252, 248, .96); border: 1.5px solid rgba(102, 18, 30, .4); border-radius: 21px;
  clip-path: inset(0 0 0 calc(100% - 44px) round 21px);
  transition: clip-path .4s var(--ease);
}
.search.is-open .search__field { clip-path: inset(0 0 0 0 round 21px); }
.search__field:focus-within { border-color: var(--orange); }
.search__ico { flex: none; width: 20px; height: 20px; margin-left: 14px; display: block; }
.search__ico svg { width: 20px; height: 20px; }
.search input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px 0 10px;
  background: transparent; border: 0; outline: none; font-size: 16px; /* evita zoom en iOS */
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: rgba(102, 18, 30, .72); }
.search input::-webkit-search-cancel-button { display: none; }
.search__close {
  flex: none; width: 44px; height: 44px; margin-right: -2px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: inherit;
}
.search__close svg { width: 18px; height: 18px; }
.search__close:active { transform: scale(.9); }

/* ---------- Portada ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 28px max(var(--gutter), env(safe-area-inset-right, 0px)) 44px max(var(--gutter), env(safe-area-inset-left, 0px));
  text-align: center;
  --rib-rot: -3.5deg; --stripe-rot: -8deg;
}
.hero__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.hero__logo {
  display: block; width: min(50vw, 214px); margin: 0 auto; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--wine);
  -webkit-tap-highlight-color: transparent;
  animation: logo-in 1s var(--ease) both;
}
.hero__logo img { width: 100%; height: auto; }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(76px, 24vw, 128px); line-height: .95; letter-spacing: .01em;
  margin-top: 20px; text-transform: uppercase;
  animation: rise .8s .25s var(--ease) both;
}
.hero__band { position: relative; margin: 36px -16px 0; }
.hero__band::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: 58px; height: 120px;
  background: var(--copper); transform: rotate(var(--stripe-rot));
  animation: stripe-in 1.1s .35s var(--ease) both;
}
.hero__ribbon {
  position: relative; padding: 14px 40px; margin: 0 -24px;
  background: var(--orange); color: var(--cream);
  font-weight: 700; font-size: 1.17rem; line-height: 1.3; letter-spacing: .03em;
  transform: rotate(var(--rib-rot));
  animation: ribbon-in .9s .45s var(--ease) both;
}
.hero__ribbon span { display: block; max-width: 330px; margin: 0 auto; text-wrap: balance; }
.hero__food { position: relative; height: 210px; margin-top: 6px; pointer-events: none; }
.food { position: absolute; height: auto; filter: drop-shadow(0 14px 14px rgba(102, 18, 30, .28)); }
.food--bowl { left: -3%; bottom: 14px; width: 40%; animation: food-in .9s .75s var(--ease) both; }
.food--burger { right: -6%; bottom: 0; width: 60%; animation: food-in .9s .6s var(--ease) both; }
.hero__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 22px;
  animation: rise .8s .7s var(--ease) both;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ribbon-in { from { opacity: 0; transform: translateX(-36px) rotate(var(--rib-rot)); } to { opacity: 1; transform: translateX(0) rotate(var(--rib-rot)); } }
@keyframes stripe-in { from { opacity: 0; transform: translateX(-40px) rotate(var(--stripe-rot)); } to { opacity: 1; transform: translateX(0) rotate(var(--stripe-rot)); } }
@keyframes food-in { from { opacity: 0; transform: translateY(34px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Destacados (carrusel, solo si hay platos con featured:true) ---------- */
.featured { padding: 36px 0 8px; }
.featured__title { text-align: center; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 10vw, 56px); line-height: 1; }
.featured__track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 20px calc(50% - min(40vw, 280px)) 28px;
}
.featured__track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: none; width: min(80vw, 560px); overflow: hidden;
  scroll-snap-align: center; border-radius: 28px; padding: 22px 22px 24px;
  --pill-bd: var(--orange); --pill-tx: var(--cream);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--wine); color: var(--cream); cursor: pointer; text-align: left;
  opacity: var(--o, 1); transform: scale(var(--s, 1));
}
.slide[data-theme="green"] { background: var(--green); --pill-bd: var(--yellow); --pill-tx: var(--yellow); }
.slide__media { height: 170px; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; pointer-events: none; }
.slide__img { max-width: 72%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: translateX(calc(var(--p, 0) * 44px)); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .35)); }
.slide__name { font-family: var(--f-display); font-size: clamp(32px, 8vw, 44px); line-height: 1; text-transform: uppercase; color: var(--yellow); }
.slide__desc { font-style: italic; font-size: 14px; }
.slide .price { align-self: flex-start; margin-top: 6px; }

/* ---------- Menú: capítulos (cada categoría con su propio fondo, como en el PDF) ---------- */
.menu { position: relative; color: var(--cream); scroll-margin-top: var(--nav-h); }
.menu, .sheet {
  --fg: var(--cream);
  --gtitle: var(--yellow);
  --pill-bd: var(--orange);
  --pill-tx: var(--cream);
  --card-bg: rgba(254, 233, 217, .07);
  --card-bd: rgba(254, 233, 217, .22);
  --leader: rgba(254, 233, 217, .32);
  --glare: rgba(254, 233, 217, .16);
  --btn-bg: var(--cream); --btn-tx: var(--wine);
}
[data-theme="green"] { --pill-bd: var(--yellow); --pill-tx: var(--yellow); --card-bg: rgba(254, 233, 217, .06); --btn-bg: var(--yellow); --btn-tx: var(--green); }
[data-theme="cream"] {
  --fg: var(--wine); --gtitle: var(--wine);
  --pill-bd: var(--orange); --pill-tx: var(--wine);
  --card-bg: rgba(255, 255, 255, .42); --card-bd: rgba(102, 18, 30, .2);
  --leader: rgba(102, 18, 30, .28); --glare: rgba(255, 255, 255, .6);
  --btn-bg: var(--wine); --btn-tx: var(--cream);
}
.chapter, .results { position: relative; overflow: hidden; color: var(--fg); scroll-margin-top: var(--nav-h); }
.chapter[data-theme="wine"] { background: var(--wine); }
.chapter[data-theme="green"] { background: var(--green); }
.chapter[data-theme="cream"], .results { background: var(--cream); }
.chapter + .chapter { border-top: 3px solid var(--copper); }
/* manchas de color suaves detrás del contenido */
.chapter::before, .chapter::after { content: ""; position: absolute; width: min(130vw, 900px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.chapter::before { left: -35%; top: 2%; background: radial-gradient(closest-side, rgba(215, 83, 20, .16), transparent); }
.chapter::after { right: -40%; bottom: 4%; background: radial-gradient(closest-side, rgba(251, 187, 68, .10), transparent); }
.chapter__in { position: relative; z-index: 1; padding-top: 64px; }
.results { min-height: 70vh; }
.stage { position: relative; }
.panel__in { max-width: 1120px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 96px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.results .panel__in { padding-top: 24px; }

/* entrada discreta de títulos, notas y cierres al aparecer en pantalla */
.rv { opacity: 0; transform: translateY(16px); }
.rv.in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .5s var(--ease); }

.tone-cream  { --tc: var(--cream); }
.tone-yellow { --tc: var(--yellow); }
.tone-orange { --tc: var(--orange); }
.tone-wine   { --tc: var(--wine); }

/* Cabecera de categoría con fotos recortadas */
.cat-head {
  --ph-h: clamp(130px, 42vw, 190px);          /* altura reservada para las fotos: el texto nunca queda debajo de ellas */
  position: relative; text-align: center; margin-bottom: 30px; padding-top: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 22px;
  grid-template-areas: "l r" "t t"; align-items: end;
}
.cat-head__text { grid-area: t; min-width: 0; }
.cat-head--search { padding-top: 40px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "t"; }
.cat-eyebrow { font-weight: 500; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.cat-title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--tc);
  font-size: clamp(38px, 11vw, 78px); line-height: 1; letter-spacing: .005em;
}
/* título que se escribe con máscara de texto */
.cat-title .w { display: inline-block; white-space: nowrap; }
.cat-title .ch { display: inline-block; clip-path: inset(-.4em -.06em 0 -.06em); }
.cat-title .ch i { display: inline-block; font-style: normal; transform: translateY(112%); }
.chapter.ready .cat-title .ch i { animation: ch-up .7s var(--cd, 0s) var(--ease) forwards; }
@keyframes ch-up { to { transform: none; } }
.cat-intro { max-width: 520px; margin: 16px auto 0; font-style: italic; font-size: 15px; line-height: 1.6; text-wrap: balance; }

.cat-photo {
  height: var(--ph-h); display: flex; align-items: flex-end; min-width: 0; pointer-events: none;
  animation: photo-in .9s var(--d, .1s) var(--ease) both; animation-play-state: paused;
}
.chapter.ready .cat-photo { animation-play-state: running; }
.cat-photo--left  { grid-area: l; justify-content: flex-start; margin-left: calc(var(--gutter) * -.5); --r0: -7deg; }
.cat-photo--right { grid-area: r; justify-content: flex-end; margin-right: calc(var(--gutter) * -.5); --r0: 7deg; }
.cat-photo__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .3)); animation: float 7s ease-in-out infinite; animation-play-state: paused;
}
.chapter.ready .cat-photo__img { animation-play-state: running; }
.cat-photo--right .cat-photo__img { animation-delay: -3.2s; }
.chapter.is-off .cat-photo__img { animation-play-state: paused; }   /* fuera de pantalla no se anima */
[data-theme="cream"] .cat-photo__img { filter: drop-shadow(0 12px 12px rgba(102, 18, 30, .22)); }
@keyframes photo-in { from { opacity: 0; transform: translateY(26px) rotate(var(--r0, 0deg)) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Grupos */
.group { margin-top: 56px; }
.group:first-of-type { margin-top: 0; }
.group__head { margin-bottom: 18px; }
.group__eyebrow { font-weight: 500; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.group__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--tc, var(--gtitle));
  font-size: clamp(32px, 8.5vw, 44px); line-height: 1.05; letter-spacing: .01em;
}
.group__note { margin-top: 6px; font-style: italic; font-size: 14px; line-height: 1.55; max-width: 560px; }
.group--green {
  --fg: var(--cream); --gtitle: var(--yellow); --tc: var(--yellow);
  --pill-bd: var(--yellow); --pill-tx: var(--yellow);
  --card-bg: rgba(254, 233, 217, .06); --card-bd: rgba(254, 233, 217, .22);
  --leader: rgba(254, 233, 217, .3); --glare: rgba(254, 233, 217, .16);
  --btn-bg: var(--yellow); --btn-tx: var(--green);
  background: var(--green); color: var(--cream);
  border-radius: 28px; padding: 30px 18px 22px;
}
.group + .group:not(.group--green) { padding-top: 48px; border-top: 1px solid var(--leader); }
.group--green + .group, .group + .group--green { margin-top: 64px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* ---------- Tarjeta de plato ---------- */
.dish {
  display: block; border-radius: 18px; cursor: pointer; outline: none;
  opacity: 0; transform: translate(-14px, 22px);
  -webkit-tap-highlight-color: transparent;
}
.dish.in {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease) var(--rd, 0ms), transform .45s var(--ease) var(--rd, 0ms);
}
.dish:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
[data-theme="wine"] .dish:focus-visible, [data-theme="green"] .dish:focus-visible, .group--green .dish:focus-visible { outline-color: var(--yellow); }
.dish__card {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: 18px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--sc, 1));
  transition: transform .28s var(--ease);
}
.dish:active .dish__card { --ty: 0px; --sc: .985; }
/* brillo que sigue el cursor */
.dish__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--glare), transparent 62%);
}

.dish__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; min-width: 0; }
.dish__photo { flex: none; aspect-ratio: 16 / 10; overflow: hidden; animation: photo-fade .5s var(--ease) both; }
.dish__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes photo-fade { from { opacity: 0; } to { opacity: 1; } }

.dish__crumb { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.dish__top { display: flex; align-items: center; }
.dish__name {
  flex: 0 1 auto; min-width: 0;
  font-weight: 600; font-size: 15px; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance;
}
.dish__leader { position: relative; flex: 1 1 14px; min-width: 14px; height: 1px; margin: 0 12px 0 16px; background: var(--leader); }
.dish__leader::before { content: ""; position: absolute; left: -6px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.dish__desc { font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.55; }
.price {
  flex: none; display: inline-block; text-align: center;
  padding: 3px 14px; border: 1.5px solid var(--pill-bd); border-radius: 999px;
  color: var(--pill-tx); font-weight: 700; font-size: 1.2rem; line-height: 1.4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price--xl { font-size: 1.9rem; padding: 6px 24px; }

/* Etiquetas con íconos animados */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tag svg { width: 14px; height: 14px; flex: none; }
.tag--veg { background: var(--green); color: var(--cream); border-color: var(--green); }
.group--green .tag--veg, [data-theme="green"] .tag--veg { background: var(--yellow); color: var(--green); border-color: var(--yellow); }
.sheet[data-theme="wine"] .tag--veg { background: var(--yellow); color: var(--green); border-color: var(--yellow); }
.ico-flame  { transform-origin: 50% 92%; animation: flicker 1.7s ease-in-out infinite; }
.ico-leaf   { transform-origin: 18% 92%; animation: sway 3.4s ease-in-out infinite; }
.ico-people { transform-origin: 50% 50%; animation: pulse 2.8s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  25% { transform: scale(.93, 1.1) rotate(2deg); opacity: .85; }
  55% { transform: scale(1.05, .95) rotate(-3deg); opacity: 1; }
  80% { transform: scale(.96, 1.07) rotate(1deg); opacity: .9; }
}
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.empty { text-align: center; padding: 28px 0 8px; }
.empty__msg { font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.empty__hint { font-style: italic; font-size: 14px; margin-bottom: 20px; }
.empty__admin { max-width: 46ch; margin: -8px auto 20px; font-size: 13px; line-height: 1.5; opacity: .85; }
.search-summary { margin-top: 10px; font-style: italic; font-size: 15px; }
.res { margin-top: 38px; }
.res:first-of-type { margin-top: 0; }
.res__title {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; color: var(--wine);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 7.5vw, 38px); line-height: 1.05;
}
.res__count { font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .14em; }

/* Cierre de hamburguesas */
.finale { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; margin-top: 56px; }
.finale__img { width: min(86%, 400px); height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); }
.slogan { text-align: center; font-family: var(--f-display); text-transform: uppercase; line-height: .95; letter-spacing: .02em; font-size: clamp(40px, 11vw, 60px); }
.slogan small {
  display: inline-block; margin: 6px 0; padding: 4px 18px; background: var(--orange); color: var(--cream);
  font-family: var(--f-body); font-weight: 700; font-size: 1.17rem; letter-spacing: .24em; transform: rotate(-3deg);
}

/* ---------- Detalle del plato (transición compartida) ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; color: var(--fg); background: var(--wine); }
.sheet[data-theme="green"] { background: var(--green); }
.sheet[data-theme="cream"] { background: var(--cream); }
.sheet__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__body { max-width: 640px; min-height: 100%; margin: 0 auto; padding: 76px var(--gutter) 56px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.sheet__close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: transparent; color: inherit; border: 1.5px solid currentColor;
  opacity: 0; transition: opacity .2s ease .1s, transform .18s var(--ease);
}
.sheet__close svg { width: 22px; height: 22px; }
.sheet__close:active { transform: scale(.92); }
.sheet.is-open .sheet__close { opacity: 1; }
.sheet__body > * { opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .32s var(--ease); }
.sheet.is-open .sheet__body > * { opacity: 1; transform: none; transition-delay: calc(.12s + var(--k, 0) * .035s); }
.sheet__photo { width: 100%; display: grid; place-items: center; min-height: 40px; }
.sheet__photo img { width: min(70%, 320px); height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); animation: float 7s ease-in-out infinite; }
.sheet__photo img.is-dish { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; filter: none; animation: none; }
[data-theme="cream"] .sheet__photo img { filter: drop-shadow(0 14px 14px rgba(102, 18, 30, .25)); }
.sheet__crumb { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.sheet__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 11vw, 64px); line-height: 1; color: var(--gtitle); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance; }
.sheet__desc { font-style: italic; font-size: 16px; line-height: 1.65; max-width: 520px; }
.sheet .tags { justify-content: center; }
.sheet__buy { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 10px; }

/* ---------- Controles de pedido en cada plato ---------- */
.ctl { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; min-height: 48px; }
.dish__body .ctl { margin-top: auto; padding-top: 6px; }
.ctl__add {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-tx); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease);
}
.ctl__add svg { width: 16px; height: 16px; }
.ctl__add:active { transform: scale(.94); }
.ctl__step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-tx); }
.ctl__btn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: inherit; font-size: 24px; font-weight: 700; line-height: 1; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease);
}
.ctl__btn:active { transform: scale(.86); }
.ctl__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.ctl__qty { min-width: 30px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.ctl__qty.pop { animation: bump .35s var(--ease); }
.ctl :focus-visible { outline-color: var(--orange); }
#sheet-ctl .ctl { justify-content: center; }

/* ---------- Panel del pedido ---------- */
.cart {
  position: fixed; inset: 0; z-index: 120;
  --btn-bg: var(--wine); --btn-tx: var(--cream); --pill-bd: var(--orange); --pill-tx: var(--wine);
}
.cart__backdrop { position: absolute; inset: 0; background: rgba(17, 34, 22, .58); opacity: 0; transition: opacity .3s ease; }
.cart__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 580px; margin: 0 auto;
  max-height: 92vh; max-height: min(92dvh, 780px); display: flex; flex-direction: column;
  background: var(--cream); color: var(--wine); border-radius: 28px 28px 0 0;
  transform: translateY(100%); transition: transform .45s var(--ease);
}
.cart.is-open .cart__backdrop { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.cart__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 36px; line-height: 1; }
.cart__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; background: none; cursor: pointer; }
.cart__close svg { width: 20px; height: 20px; }
.cart__close:active { transform: scale(.92); }
.cart__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 14px; }
.cart__empty { font-style: italic; padding: 18px 0 10px; }
.ci { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.ci__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ci__info { min-width: 0; }
.ci__name { font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ci__crumb { font-size: 13px; font-style: italic; margin-top: 2px; }
.ci__del { flex: none; width: 44px; height: 44px; margin: -4px -6px 0 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ci__del svg { width: 20px; height: 20px; }
.ci__del:active { transform: scale(.88); }
.ci__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci__note, .cart__form input, .cart__form textarea {
  width: 100%; border: 1.5px solid rgba(102, 18, 30, .35); border-radius: 14px; padding: 11px 14px;
  background: rgba(255, 255, 255, .55); font-size: 16px; /* evita zoom en iOS */
}
.ci__note::placeholder, .cart__form input::placeholder, .cart__form textarea::placeholder { color: rgba(102, 18, 30, .7); }
.cart__form { padding-top: 18px; display: grid; gap: 16px; }
.cart__field { display: grid; gap: 6px; }
.cart__label { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cart__label span { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .85; }
.cart__form textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.cart__foot { padding: 14px 20px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cart__total { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.cart__note { font-size: 13px; font-style: italic; line-height: 1.5; }
.cart__wa { width: 100%; }
.cart__sent { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(102, 18, 30, .08); font-size: 14px; }
.cart__sent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cart__sent-actions .btn { min-height: 44px; padding: 0 18px; }
.cart__clear { justify-self: center; min-height: 44px; padding: 0 16px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; transition: transform .16s var(--ease); }
.cart__clear:active { transform: scale(.96); }
.cart .btn--ghost { color: var(--wine); }

/* ---------- Pie ---------- */
.foot { position: relative; overflow-x: clip; background: var(--wine); color: var(--cream); padding: 64px max(var(--gutter), env(safe-area-inset-right, 0px)) 120px max(var(--gutter), env(safe-area-inset-left, 0px)); text-align: center; }
.foot::before { content: ""; position: absolute; left: -6%; right: -6%; top: -20px; height: 40px; background: var(--copper); transform: rotate(-1.4deg); }
.foot__inner { position: relative; max-width: 560px; margin: 0 auto; }
.foot__logo { width: 140px; height: auto; margin: 0 auto 24px; }
.foot__tag { font-family: var(--f-display); text-transform: uppercase; font-size: 26px; line-height: 1.1; letter-spacing: .02em; }
.foot__tag span { display: block; font-family: var(--f-body); font-weight: 400; font-size: 15px; letter-spacing: .3em; text-transform: lowercase; margin: 6px 0; }
.foot__list { margin-top: 28px; display: grid; gap: 4px; font-size: 15px; }
.foot__h { margin-top: 36px; font-weight: 600; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; padding-top: 24px; border-top: 1px solid rgba(254, 233, 217, .25); }
.foot__social { margin-top: 14px; display: grid; gap: 4px; justify-items: center; }
.foot__social a, .foot__bakery a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; text-underline-offset: 4px; }
.foot__social b { font-weight: 600; }
.foot__bakery { margin-top: 20px; font-size: 15px; }
.foot__bakery a { font-weight: 600; }
.foot__copy { margin-top: 36px; font-size: 12px; letter-spacing: .08em; opacity: .85; }
.foot a:focus-visible { outline-color: var(--yellow); }

/* ---------- Botón flotante ---------- */
.fab {
  position: fixed; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 16px;
  background: var(--wine); color: var(--cream); border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; border: 2px solid var(--cream);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  animation: fab-in .7s 1.1s var(--ease) backwards;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fab:active { transform: scale(.96); }
.fab.is-away { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* guardado mientras se baja leyendo el menú (no tapa el "Agregar" de las tarjetas) */
.fab.is-tucked { opacity: 0; transform: translateY(24px); pointer-events: none; }
.fab.is-tucked:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--cream); color: var(--wine); font-size: 14px; font-variant-numeric: tabular-nums;
}
.fab__count.bump { animation: bump .45s var(--ease); }
.fab__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Aviso de copia guardada y panel del dueño (?admin=1) ---------- */
.aviso, .admin {
  position: relative; z-index: 2; width: calc(100% - 2 * var(--gutter)); max-width: 1040px; margin: 20px auto 0;
  border-radius: 18px; color: var(--wine);
}
.aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; background: rgba(215, 83, 20, .12); border: 1.5px solid rgba(215, 83, 20, .45); }
.aviso__txt { flex: 1 1 240px; font-size: 14px; line-height: 1.5; }
.aviso__btn { min-height: 44px; }
.admin { padding: 18px 20px; background: #FFF8F2; border: 2px dashed var(--orange); font-size: 14px; line-height: 1.5; }
.admin__title { font-family: var(--f-display); font-weight: 400; font-size: 26px; text-transform: uppercase; }
.admin__sum { margin-top: 6px; font-weight: 600; }
.admin__list { margin-top: 10px; display: grid; gap: 6px; list-style: disc; padding-left: 20px; }
.admin__ok { margin-top: 10px; font-weight: 600; color: var(--green); }
.admin__hint { margin-top: 12px; font-style: italic; opacity: .85; }

/* ---------- Grano de papel (muy sutil, se mueve despacio) ---------- */
/* textura fija: el papel no necesita moverse y así no gasta batería en el celular */
.grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .07;
  background: url("grain.svg") 0 0 / 220px 220px;
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .group--green { padding: 36px 28px 28px; }
  .hero { padding-top: 40px; }
  /* la cinta y la franja cruzan la pantalla de lado a lado (antes terminaban en seco a mitad de pantalla) */
  .hero__band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .hero__ribbon { margin-left: -40px; margin-right: -40px; }
  .hero__food { height: 260px; max-width: 760px; margin-left: auto; margin-right: auto; }
  .food--bowl { width: 30%; left: 4%; }
  .food--burger { width: 44%; right: 2%; }
  .cat-head { --ph-h: 220px; }
  .finale { flex-direction: row; justify-content: center; gap: 36px; }
  .finale__img { width: min(46%, 380px); }
}

/* ---------- Escritorio ---------- */
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .hero { padding: 48px var(--gutter) 56px; }
  .hero__band::before { height: 150px; top: 64px; }
  .hero__food { height: 320px; }
  .cat-head {
    --ph-h: clamp(200px, 22vw, 300px); padding-top: 24px; margin-bottom: 40px; column-gap: 28px; row-gap: 0; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 540px) minmax(0, 1fr); grid-template-areas: "l t r";
  }
  .cat-head--search { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t"; }
  .cat-photo--left, .cat-photo--right { margin-left: 0; margin-right: 0; }
  .cat-title { font-size: clamp(38px, 6.4vw, 78px); }
  .hero { --rib-rot: -2.2deg; --stripe-rot: -4.5deg; }
  .group--green { padding: 44px 40px 36px; border-radius: 36px; }
}

/* ---------- Hover: solo con mouse (en el celular el efecto se quedaba pegado tras tocar) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.97); }
  .tab:hover > span { opacity: 1; }
  .dish:hover .dish__card { --ty: -3px; }
  .dish:active .dish__card { --ty: 0px; --sc: .985; }
  .dish:hover .dish__card::after { opacity: 1; }
  .fab:not(.is-away):hover { transform: translateY(-2px); }
}

/* ---------- Movimiento reducido: sin intro, paralaje, tilt ni fondos animados ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .intro, .grain { display: none !important; }
  .dish { transform: none; }
  .dish.in, .sheet__body > *, .sheet__close { transition: opacity .25s ease !important; }
  .sheet__body > * { transform: none; }
  .cat-title .ch i { transform: none; }
  .rv { transform: none; }
  .rv.in { transition: opacity .25s ease !important; }
  .search__field { clip-path: none; opacity: 0; transition: opacity .2s ease !important; }
  .search.is-open .search__field { opacity: 1; }
  .nav::before { transition: none !important; }
  .cart__backdrop { transition: opacity .2s ease !important; }
  .cart__panel { transform: none; opacity: 0; transition: opacity .2s ease !important; }
  .cart.is-open .cart__panel { opacity: 1; }
}