/* ============================================================
   Alto Resto Bar — Carta digital
   Sistema: verde lima nikkei sobre carbón. Mobile-first. WCAG AA.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Verdes de marca */
  --green-lime-400:#A9D923; --green-lime-500:#95C11F; --green-lime-600:#7BA318;
  --green-ink:#3F5E1E; --green-forest:#2C4416; --green-forest-deep:#16210E;

  /* Neutros (tema oscuro) */
  --ink-950:#0D0D0D; --ink-900:#141414; --ink-850:#1A1A1A; --ink-800:#232323; --ink-700:#2E2E2E;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);

  /* Texto */
  --text-hi:#F4F2EA; --text-mid:#BDBAB0; --text-low:#908E85; --on-lime:#0D0D0D;

  /* Badges */
  --veggie:#A9D923; --veggie-bg:rgba(149,193,31,.14);
  --vegan:#43C08A;  --vegan-bg:rgba(67,192,138,.15);
  --spicy:#FF8A5C;  --spicy-bg:rgba(228,87,46,.16);

  /* Sombras / gradientes */
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.38);
  --glow-green:0 0 0 1px rgba(149,193,31,.40), 0 10px 34px rgba(149,193,31,.20);
  --grad-hero:radial-gradient(120% 80% at 50% -10%, rgba(149,193,31,.16), transparent 58%),
              linear-gradient(180deg,#0F0F0D 0%,#0D0D0D 60%);
  --grad-lime:linear-gradient(135deg,#A9D923,#7BA318);

  /* Radios / espaciado */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Tipografía */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-script:"Caveat","Segoe Script",cursive;
  --fs-hero:clamp(3rem,14vw,5rem); --fs-h1:clamp(2rem,6vw,3rem);
  --fs-h2:clamp(1.5rem,4.5vw,2.25rem); --fs-h3:1.25rem;
  --fs-lg:1.125rem; --fs-base:1rem; --fs-sm:.9375rem; --fs-xs:.8125rem; --fs-2xs:.6875rem;
  --ls-caps:.08em;

  /* Motion */
  --dur-2:180ms; --dur-3:240ms; --dur-4:360ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);

  --appbar-h:56px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-ui); font-size:var(--fs-base); line-height:1.5;
  color:var(--text-hi); background:var(--ink-950);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--green-lime-400); outline-offset:3px; border-radius:4px; }
.price,.product__price{ font-variant-numeric:tabular-nums; }

/* ---------- Wordmark (logo oficial: alto + RESTOBAR) ---------- */
.wordmark{ display:inline-flex; line-height:1; }
.wordmark__mark{ width:auto; display:block; }
.wordmark--lg .wordmark__mark{ height:150px; }
.wordmark--md .wordmark__mark{ height:100px; }
.wordmark--sm .wordmark__mark{ height:72px; }

/* ============================================================
   LANDING
   ============================================================ */
.landing{ position:relative; min-height:100dvh; display:grid; place-items:center;
  background:var(--grad-hero); padding:var(--sp-12) var(--sp-5); overflow:hidden; }
.landing__glow{ position:absolute; inset:auto 0 -30% 0; height:60%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(149,193,31,.12), transparent 70%);
  pointer-events:none; }
.landing__inner{ position:relative; width:100%; max-width:560px; display:flex;
  flex-direction:column; align-items:center; gap:var(--sp-6); text-align:center; }
.tagline{ font-family:var(--font-script); font-size:var(--fs-h2); color:var(--green-lime-400); }

.seals{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); }
.seal{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--text-mid); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px; }

.landing__prompt{ margin-top:var(--sp-2); font-size:var(--fs-sm); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--text-low); }

.choices{ width:100%; display:grid; gap:var(--sp-4); }
@media (min-width:640px){ .choices{ grid-template-columns:1fr 1fr; } }

.choice{ position:relative; display:flex; align-items:center; gap:var(--sp-4); text-align:left;
  background:var(--ink-850); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-6); overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out); }
.choice::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad-lime); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-3) var(--ease-out); }
.choice__icon{ width:52px; height:52px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ink-800); border-radius:var(--r-md); color:var(--green-lime-400); }
.choice__icon svg{ width:26px; height:26px; }
.choice__text{ display:flex; flex-direction:column; gap:2px; }
.choice__title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); color:var(--text-hi); }
.choice__sub{ font-size:var(--fs-sm); color:var(--text-mid); }
.choice__arrow{ margin-left:auto; font-size:1.35rem; color:var(--green-lime-400);
  transition:transform var(--dur-2) var(--ease-out); }
@media (hover:hover){
  .choice:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:var(--glow-green); }
  .choice:hover::before{ transform:scaleX(1); }
  .choice:hover .choice__arrow{ transform:translateX(4px); }
}
.choice:active{ transform:translateY(-1px) scale(.99); }

.landing__footer{ display:flex; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--text-mid); }
.landing__footer a:hover{ color:var(--green-lime-400); }

/* Entrada escalonada */
@keyframes riseIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.landing__inner>*{ animation:riseIn var(--dur-4) var(--ease-out) both; }
.landing__inner>*:nth-child(1){ animation-delay:40ms; }
.landing__inner>*:nth-child(2){ animation-delay:100ms; }
.landing__inner>*:nth-child(3){ animation-delay:160ms; }
.landing__inner>*:nth-child(4){ animation-delay:200ms; }
.choices .choice:nth-child(1){ animation-delay:240ms; }
.choices .choice:nth-child(2){ animation-delay:300ms; }

/* ============================================================
   CARTA — appbar + nav
   ============================================================ */
.appbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5); min-height:var(--appbar-h);
  padding-top:max(var(--sp-3), env(safe-area-inset-top));
  background:rgba(13,13,13,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-3) var(--ease-out); }
.appbar[data-scrolled="true"]{ border-color:var(--line); }
.appbar__logo{ display:flex; align-items:center; }
.appbar__logo img{ height:34px; width:auto; display:block;
  transition:height var(--dur-3) var(--ease-out); }
.appbar[data-scrolled="true"] .appbar__logo img{ height:28px; }
.appbar__current{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-base);
  color:var(--text-hi); }
.carta-switch{ font-size:var(--fs-sm); font-weight:600; color:var(--text-hi);
  background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; white-space:nowrap;
  transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.carta-switch:hover{ background:var(--ink-700); border-color:var(--line-strong); }

.familynav{ position:sticky; top:var(--appbar-h); z-index:40;
  background:rgba(13,13,13,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.familynav__track{ display:flex; gap:var(--sp-2); overflow-x:auto; scroll-snap-type:x proximity;
  padding:var(--sp-3) var(--sp-5); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.familynav__track::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; scroll-snap-align:center; white-space:nowrap; cursor:pointer;
  font-size:var(--fs-sm); font-weight:600; color:var(--text-mid);
  background:var(--ink-850); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px;
  transition:background var(--dur-2) var(--ease-pop), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out); }
@media (hover:hover){ .chip:hover{ color:var(--text-hi); border-color:var(--line-strong); } }
.chip[aria-current="true"]{ background:var(--green-lime-500); color:var(--on-lime);
  border-color:var(--green-lime-500); }
.chip--divider{ font-family:var(--font-display); color:var(--green-lime-400);
  background:none; border:0; border-left:1px solid var(--line-strong);
  border-radius:0; padding:9px 8px 9px 16px; cursor:default; letter-spacing:.02em; }

/* ============================================================
   CARTA — contenido
   ============================================================ */
.carta{ max-width:1120px; margin-inline:auto; padding:0 var(--sp-5) var(--sp-16); }
.carta__intro{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  text-align:center; padding:var(--sp-10) 0 var(--sp-4); }
.carta__concept{ font-size:var(--fs-sm); color:var(--text-mid); }
.carta__tagline{ font-family:var(--font-script); font-size:1.6rem; color:var(--green-lime-400); }

.family{ scroll-margin-top:calc(var(--appbar-h) + 64px); padding:var(--sp-10) 0 var(--sp-4); }
.family__header{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.family__title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h2);
  color:var(--text-hi); line-height:1.15; }
.family__title::after{ content:""; display:block; width:44px; height:3px; margin-top:8px;
  background:var(--grad-lime); border-radius:2px; }
.family__subtitle{ font-size:var(--fs-sm); color:var(--green-lime-400); font-weight:600; }
.family__desc{ font-size:var(--fs-sm); color:var(--text-mid); margin-top:var(--sp-3); max-width:60ch; }

.group{ margin-top:var(--sp-6); }
.group__title{ font-family:var(--font-ui); font-weight:700; font-size:var(--fs-h3);
  color:var(--text-hi); margin-bottom:var(--sp-3); }
.group__note{ font-weight:500; font-size:var(--fs-sm); color:var(--text-low); }
.group__note--solo{ margin-bottom:var(--sp-3); }

.menu-list{ display:grid; gap:var(--sp-3); }
@media (min-width:768px){ .menu-list{ grid-template-columns:1fr 1fr; gap:var(--sp-4); } }
@media (min-width:1200px){ .menu-list{ grid-template-columns:1fr 1fr 1fr; } }

.product{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-4); align-items:start;
  background:var(--ink-850); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out); }
@media (hover:hover){ .product:hover{ transform:translateY(-2px); background:var(--ink-800);
  border-color:var(--line-strong); } }
.product__head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.product__code{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; color:var(--text-low); }
.product__name{ font-family:var(--font-ui); font-weight:600; font-size:var(--fs-base); color:var(--text-hi); }
@media (min-width:768px){ .product__name{ font-size:var(--fs-lg); } }
.product__desc{ font-size:var(--fs-sm); color:var(--text-mid); line-height:1.45; margin-top:4px; }
.product__price{ font-weight:700; color:var(--green-lime-400); font-size:var(--fs-base);
  white-space:nowrap; text-align:right; }

.price-variants{ display:grid; gap:4px; }
.price-variant{ display:flex; justify-content:flex-end; align-items:baseline; gap:var(--sp-3); }
.price-variant__label{ font-size:var(--fs-xs); color:var(--text-low); font-weight:500; }
.price-variant__val{ font-weight:700; color:var(--green-lime-400); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--ls-caps); padding:3px 8px; border-radius:var(--r-pill);
  line-height:1; }
.badge--veggie{ color:var(--veggie); background:var(--veggie-bg); }
.badge--vegan{ color:var(--vegan); background:var(--vegan-bg); }
.badge--spicy{ color:var(--spicy); background:var(--spicy-bg); }

/* ---------- Promos ---------- */
.family--promos .family__title::after{ background:var(--grad-lime); }
.promos-grid{ display:grid; gap:var(--sp-4); margin-top:var(--sp-6); }
@media (min-width:640px){ .promos-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .promos-grid{ grid-template-columns:1fr 1fr 1fr; } }
.promo{ background:linear-gradient(180deg, rgba(149,193,31,.06), transparent), var(--ink-850);
  border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6); }
.promo__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; }
.promo__name{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); color:var(--text-hi); }
.promo__price{ font-weight:800; font-size:var(--fs-lg); color:var(--green-lime-400); white-space:nowrap; }
.promo__note{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--green-lime-400); margin-top:var(--sp-1); }
.promo__lines{ margin-top:var(--sp-3); display:grid; gap:6px; }
.promo__lines li{ position:relative; padding-left:var(--sp-4); font-size:var(--fs-sm); color:var(--text-mid); }
.promo__lines li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--green-lime-600); }
.promo__footnote{ margin-top:var(--sp-5); text-align:center; font-family:var(--font-script);
  font-size:1.5rem; color:var(--green-lime-400); }

/* ---------- Footer carta ---------- */
.carta__footer{ margin-top:var(--sp-16); padding-top:var(--sp-10); border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); text-align:center; }
.carta__seals{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--text-low); }
.carta__social a:hover{ color:var(--green-lime-400); }
.carta__note{ font-size:var(--fs-xs); color:var(--text-low); max-width:46ch; }

/* ---------- Volver arriba ---------- */
.totop{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:45;
  width:44px; height:44px; display:grid; place-items:center; font-size:1.25rem;
  color:var(--on-lime); background:var(--green-lime-500); border-radius:var(--r-pill);
  box-shadow:var(--shadow-card); opacity:0; transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.totop[hidden]{ display:none; }
.totop.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}