/* ============================================================
   Alto Restobar — Carta digital
   Sistema claro, editorial. Verde #538635 · lima #95C11F.
   Montserrat + Roboto. Mobile-first. WCAG AA.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --green:#538635; --green-d:#42702b; --green-l:#6a9d4a;
  --lime:#95c11f; --lime-d:#7aa016; --lime-soft:#eef4df;

  /* Neutros (base clara) */
  --paper:#fff; --soft:#f6f8f1; --soft-2:#eef2e6;
  --line:#e8eae1; --line-strong:#d6dac9;
  --bar:rgba(255,255,255,.94);          /* fondo appbar / familynav */

  /* Texto */
  --ink:#1c1e19; --body:#4a4c45; --muted:#7b7d74; --on-green:#fff; --on-lime:#1c1e19;

  /* Acento del tema (cambia por carta) */
  --accent:var(--green); --accent-d:var(--green-d); --on-accent:#fff;
  --code-fg:var(--green); --code-bg:var(--lime-soft);

  /* Badges */
  --veggie:#4a7c1e; --veggie-bg:#eef4df;
  --vegan:#1f7a52;  --vegan-bg:#e3f3ec;
  --spicy:#b84a1e;  --spicy-bg:#fbeade;

  /* Radios / espaciado */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --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:"Montserrat",system-ui,-apple-system,sans-serif;
  --font-ui:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(2rem,6vw,3rem);
  --fs-h2:clamp(1.5rem,4.5vw,2.2rem); --fs-h3:1.2rem;
  --fs-lg:1.1rem; --fs-base:1rem; --fs-sm:.925rem; --fs-xs:.8125rem; --fs-2xs:.6875rem;
  --ls-caps:.14em;

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

  --topbar-h:150px;   /* fallback; el JS publica el alto real de la barra */
}

/* ============================================================
   TEMAS POR CARTA — el fondo identifica qué carta se está viendo
   ============================================================ */

/* Restaurante: hueso, cálido */
body.tema-restaurante{
  --paper:#f8f5ed; --soft:#f1ece0; --soft-2:#e8e2d2;
  --line:#e2dbca; --line-strong:#d0c7b2;
  --bar:rgba(248,245,237,.94);
  --accent:var(--green); --accent-d:var(--green-d); --on-accent:#fff;
  --code-fg:#3f6a26; --code-bg:#e6eed6;
}

/* Delivery: negro, nocturno */
body.tema-delivery{
  --paper:#121211; --soft:#1c1c1a; --soft-2:#242422;
  --line:#2b2b28; --line-strong:#3c3c37;
  --bar:rgba(18,18,17,.92);
  --ink:#f5f3ec; --body:#c8c6bc; --muted:#93918a;
  --accent:var(--lime); --accent-d:var(--lime-d); --on-accent:#12120f;
  --code-fg:var(--lime); --code-bg:rgba(149,193,31,.14);
  --veggie:#b5d94a; --veggie-bg:rgba(149,193,31,.15);
  --vegan:#5fd3a0;  --vegan-bg:rgba(67,192,138,.16);
  --spicy:#ff9a6b;  --spicy-bg:rgba(228,87,46,.18);
}

/* ---------- 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.6;
  color:var(--body); background:var(--paper);
  -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:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.price,.product__price{ font-variant-numeric:tabular-nums; }

/* ---------- Wordmark (logo oficial) ---------- */
.wordmark{ display:inline-flex; line-height:1; }
.wordmark__mark{ width:auto; display:block; }
.wordmark--lg .wordmark__mark{ width:190px; height:auto; }
.wordmark--md .wordmark__mark{ width:140px; height:auto; }
.wordmark--sm .wordmark__mark{ width:110px; height:auto; }

/* ============================================================
   LANDING — selector de carta
   ============================================================ */
.landing{ position:relative; min-height:100dvh; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--soft),var(--paper) 70%);
  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,.10), transparent 70%);
  pointer-events:none; }
.landing__inner{ position:relative; width:100%; max-width:620px; display:flex;
  flex-direction:column; align-items:center; gap:var(--sp-5); text-align:center; }
.tagline{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg);
  color:var(--green); letter-spacing:-.01em; }

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

.landing__prompt{ margin-top:var(--sp-2); font-family:var(--font-display); font-weight:700;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.choices{ width:100%; display:grid; gap:var(--sp-3); }
@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;
  border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6); overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), background var(--dur-3) var(--ease-out); }
.choice:nth-child(1){ background:var(--green); color:var(--on-green); }
.choice:nth-child(1):hover{ background:var(--green-d); }
.choice:nth-child(2){ background:var(--lime); color:var(--on-lime); }
.choice:nth-child(2):hover{ background:var(--lime-d); }
.choice__icon{ width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(255,255,255,.2); border-radius:var(--r-md); }
.choice:nth-child(2) .choice__icon{ background:rgba(0,0,0,.1); }
.choice__icon svg{ width:24px; height:24px; }
.choice__text{ display:flex; flex-direction:column; gap:2px; }
.choice__title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); }
.choice__sub{ font-size:var(--fs-xs); opacity:.9; }
.choice__arrow{ margin-left:auto; font-size:1.3rem;
  transition:transform var(--dur-2) var(--ease-out); }
@media (hover:hover){
  .choice:hover{ transform:translateY(-3px); }
  .choice:hover .choice__arrow{ transform:translateX(4px); }
}
.choice:active{ transform:translateY(0); }

.landing__footer{ display:flex; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--muted); }
.landing__footer a{ transition:color var(--dur-2) var(--ease-out); }
.landing__footer a:hover{ color:var(--green); }

/* 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
   ============================================================ */
.topbar{ position:sticky; top:0; z-index:50;
  background:var(--bar); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-3) var(--ease-out); }
.topbar[data-scrolled="true"]{ border-color:var(--line); }

.appbar{ 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:none; }
.appbar__logo{ display:flex; align-items:center; }
.appbar__logo img{ width:100px; height:auto; display:block; }

/* Indicador de carta activa — protagonista del appbar */
.appbar__current{ display:inline-flex; align-items:baseline; gap:6px;
  background:var(--accent); color:var(--on-accent);
  border-radius:var(--r-pill); padding:7px 16px; }
.appbar__current-k{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:var(--ls-caps); opacity:.75; }
.appbar__current-v{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-base);
  letter-spacing:-.01em; }

.carta-switch{ font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700;
  color:var(--ink); background:none; border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill); padding:8px 15px; white-space:nowrap;
  transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out); }
.carta-switch:hover{ border-color:var(--accent); background:var(--soft); }
.carta-switch:active{ transform:translateY(1px); }

.familynav{ background:none; border-top: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-family:var(--font-display); font-size:var(--fs-xs); font-weight:600; color:var(--body);
  background:var(--soft); 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(--ink); border-color:var(--line-strong); } }
.chip[aria-current="true"]{ background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); }
.chip--divider{ font-family:var(--font-display); font-weight:700; color:var(--accent);
  background:none; border:0; border-left:1px solid var(--line-strong);
  border-radius:0; padding:9px 8px 9px 16px; cursor:default;
  letter-spacing:var(--ls-caps); text-transform:uppercase; font-size:var(--fs-2xs); }

/* ============================================================
   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-2);
  text-align:center; padding:var(--sp-10) 0 var(--sp-4); }
.carta__concept{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  color:var(--muted); letter-spacing:.02em; }
.carta__tagline{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg);
  color:var(--accent); }

.family{ scroll-margin-top:calc(var(--topbar-h) + var(--sp-4)); padding:var(--sp-12) 0 var(--sp-2); }
.family__header{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  padding-bottom:var(--sp-3); border-bottom:2px solid var(--ink); }
.family__title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  color:var(--ink); line-height:1.1; letter-spacing:-.02em; }
.family__subtitle{ font-family:var(--font-display); font-size:var(--fs-xs); color:var(--accent);
  font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); }
.family__desc{ font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-4); max-width:62ch; }

.group{ margin-top:var(--sp-8); }
.group__title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
  color:var(--ink); margin-bottom:var(--sp-2); letter-spacing:-.01em; }
.group__note{ font-family:var(--font-ui); font-weight:400; font-size:var(--fs-xs);
  color:var(--muted); text-transform:none; letter-spacing:0; }
.group__note--solo{ margin-bottom:var(--sp-3); font-size:var(--fs-sm); }
.group__flat{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  color:var(--muted); margin-bottom:var(--sp-2); }
.group__flat strong{ font-weight:800; color:var(--accent); }

/* Productos: filas con línea, sin tarjetas */
.menu-list{ display:grid; gap:0; }
@media (min-width:820px){ .menu-list{ grid-template-columns:1fr 1fr; column-gap:var(--sp-12); } }

.product{ display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-3); align-items:center;
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
  transition:background var(--dur-2) var(--ease-out); }
@media (hover:hover){
  .product:hover{ background:var(--soft); }
  .product{ padding-inline:var(--sp-3); margin-inline:calc(var(--sp-3) * -1); border-radius:var(--r-sm); }
}
.product__head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.product__code{ font-family:var(--font-display); font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.06em; color:var(--code-fg); background:var(--code-bg);
  padding:2px 7px; border-radius:var(--r-pill); }
.product__name{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-base);
  color:var(--ink); line-height:1.3; }
.product__desc{ font-size:var(--fs-sm); color:var(--muted); line-height:1.5; margin-top:3px;
  max-width:52ch; }
.product__price{ font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:var(--fs-base); white-space:nowrap; text-align:right; align-self:center; }

.price-variants{ display:grid; gap:3px; }
.price-variant{ display:flex; justify-content:flex-end; align-items:baseline; gap:var(--sp-3); }
.price-variant__label{ font-family:var(--font-ui); font-size:var(--fs-2xs); color:var(--muted);
  font-weight:400; text-transform:uppercase; letter-spacing:.06em; }
.price-variant__val{ font-family:var(--font-display); font-weight:700; color:var(--ink); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-display); font-size:var(--fs-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:var(--r-pill);
  line-height:1.3; }
.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__header{ border-bottom-color:var(--accent); }
.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:var(--soft); border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-6);
  transition:transform var(--dur-2) var(--ease-out); }
@media (hover:hover){ .promo:hover{ transform:translateY(-3px); } }
.promo__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; padding-bottom:var(--sp-2); border-bottom:1px solid var(--line-strong); }
.promo__name{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
  color:var(--ink); letter-spacing:-.01em; }
.promo__price{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg);
  color:var(--accent); white-space:nowrap; }
.promo__note{ font-family:var(--font-display); font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:.08em; font-weight:700; color:var(--accent); margin-top:var(--sp-2); }
.promo__lines{ margin-top:var(--sp-3); display:grid; gap:7px; }
.promo__lines li{ position:relative; padding-left:var(--sp-4); font-size:var(--fs-sm); color:var(--body); }
.promo__lines li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }
.promo__footnote{ margin-top:var(--sp-6); text-align:center; font-family:var(--font-display);
  font-weight:600; font-size:var(--fs-base); color:var(--accent); }

/* ---------- 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-family:var(--font-display); font-weight:600; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); }
.carta__social{ font-size:var(--fs-sm); color:var(--muted); }
.carta__social a{ transition:color var(--dur-2) var(--ease-out); }
.carta__social a:hover{ color:var(--accent); }
.carta__note{ font-size:var(--fs-xs); color:var(--muted); max-width:48ch; }

/* ---------- Volver arriba ---------- */
.totop{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:45;
  width:46px; height:46px; display:grid; place-items:center; font-size:1.2rem;
  color:var(--on-accent); background:var(--accent); border-radius:var(--r-pill);
  box-shadow:0 12px 24px -12px rgba(0,0,0,.4); 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; }

/* En móvil el logo es casi cuadrado: a 100px de ancho el appbar se come
   media pantalla junto al nav de familias. Se compacta sin perder legibilidad. */
@media (max-width:600px){
  .appbar{ padding:var(--sp-2) var(--sp-4);
    padding-top:max(var(--sp-2), env(safe-area-inset-top)); }
  .appbar__logo img{ width:72px; }
  .appbar__current{ padding:6px 12px; }
  .appbar__current-k{ display:none; }        /* basta el nombre de la carta */
  .appbar__current-v{ font-size:var(--fs-sm); }
  .carta-switch{ font-size:var(--fs-2xs); padding:7px 12px; }
  .familynav__track{ padding:var(--sp-2) var(--sp-4); }
  .chip{ padding:8px 14px; }
}

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

/* ============================================================
   BUSCAR EN LA CARTA
   ============================================================ */
.buscar-abrir{
  flex:0 0 auto; display:grid; place-items:center; cursor:pointer;
  width:38px; height:38px; padding:0; margin-left:auto;
  background:none; border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
  color:var(--body);
  transition:border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.buscar-abrir svg{ width:18px; height:18px; }
.buscar-abrir:hover{ border-color:var(--accent); color:var(--accent); }
.appbar__current{ margin-left:auto; }
.buscar-abrir + .carta-switch{ margin-left:0; }

.buscador{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--line);
}
.buscador[hidden]{ display:none; }
.buscador__campo{
  flex:1; min-width:0;
  font-family:inherit; font-size:1rem; padding:.6rem .9rem;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink);
  transition:border-color var(--dur-2) var(--ease-out);
}
.buscador__campo::placeholder{ color:var(--muted); }
.buscador__campo:focus{ border-color:var(--accent); outline:none; }
.buscador__cerrar{
  flex:0 0 auto; cursor:pointer; font-size:1.5rem; line-height:1;
  width:36px; height:36px; padding:0;
  background:none; border:0; color:var(--muted);
}
.buscador__cerrar:hover{ color:var(--ink); }
.buscador__cuenta{
  flex:1 0 100%; margin:0; font-size:var(--fs-xs); color:var(--muted);
}
body.buscando .carta__intro{ display:none; }

/* ============================================================
   MI LISTA — elegir y sumar
   ============================================================ */
.product{ position:relative; }

/* Discreto hasta que se usa: un círculo con borde, sin relleno. */
.pedir{
  display:flex; flex-direction:column; gap:4px; align-items:flex-end;
  flex:none;
}
.pedir__mas{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  touch-action:manipulation;
  min-width:30px; height:30px; padding:0 9px;
  background:none; border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
  color:var(--muted); font-family:var(--font-display); font-weight:700; font-size:.9rem;
  transition:border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out);
}
.pedir__mas:hover{ border-color:var(--accent); color:var(--accent); }
.pedir__mas--activo{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.pedir__cual{ font-size:.68rem; font-weight:600; opacity:.85; }
.pedir__signo{ font-variant-numeric:tabular-nums; }

.pedir--varias{ gap:5px; }

/* Barra flotante: solo existe cuando hay algo elegido. */
.mi-lista{
  position:fixed; left:50%; bottom:var(--sp-5); z-index:46;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--sp-3);
  max-width:calc(100vw - 2 * var(--sp-5));
  padding:.7rem .8rem .7rem 1rem;
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-pill);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  font-size:var(--fs-sm);
  animation:subeLista 260ms var(--ease-out) both;
}
@keyframes subeLista{
  from{ opacity:0; transform:translate(-50%, 14px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}
.mi-lista__n{
  display:grid; place-items:center; flex:none;
  min-width:24px; height:24px; padding:0 6px;
  background:var(--accent); color:var(--on-accent);
  border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:800; font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.mi-lista__que{ color:rgba(255,255,255,.7); }
.mi-lista__total{
  font-family:var(--font-display); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.mi-lista__ir{
  flex:none; background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs);
  padding:.45rem .9rem; border-radius:var(--r-pill);
}
body.con-lista .totop{ bottom:calc(var(--sp-5) + 60px); }

/* ============================================================
   PÁGINA DE RESUMEN
   ============================================================ */
.resumen{ max-width:38rem; }
.resumen__vacio{ text-align:center; padding:var(--sp-12) 0; color:var(--muted); }
.resumen__volver{
  display:inline-block; margin-top:var(--sp-4);
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  padding:.8rem 1.6rem; border-radius:var(--r-pill);
}

.resumen__lista{ margin:0; padding:0; list-style:none; }
.resumen__item{
  display:grid; grid-template-columns:1fr auto auto;
  gap:var(--sp-3); align-items:center;
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.resumen__nombre{ font-family:var(--font-display); font-weight:600; color:var(--ink); }
.resumen__variante{
  display:block; font-family:var(--font-ui); font-weight:400;
  font-size:var(--fs-xs); color:var(--muted);
}
.resumen__cantidad{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.resumen__menos,.resumen__mas{
  width:30px; height:30px; cursor:pointer; padding:0;
  display:grid; place-items:center;
  background:none; border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
  color:var(--body); font-size:1.05rem; line-height:1;
  transition:border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.resumen__menos:hover,.resumen__mas:hover{ border-color:var(--accent); color:var(--accent); }
.resumen__num{
  min-width:1.4rem; text-align:center;
  font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums;
}
.resumen__precio{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.resumen__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:var(--sp-6) 0 0; padding-top:var(--sp-4);
  border-top:2px solid var(--ink);
  font-family:var(--font-display); font-size:var(--fs-lg);
}
.resumen__total span{ color:var(--muted); font-weight:600; }
.resumen__monto{ font-weight:800; font-size:1.5rem; color:var(--accent); font-variant-numeric:tabular-nums; }

.resumen__nota{
  margin:var(--sp-5) 0 0; font-size:var(--fs-xs); color:var(--muted);
  background:var(--soft); border-radius:var(--r-md); padding:var(--sp-4);
}
.resumen__acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.btn-resumen{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); cursor:pointer;
  padding:.8rem 1.5rem; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); background:none; color:var(--ink);
  transition:border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn-resumen:hover{ border-color:var(--accent); color:var(--accent); }
.btn-resumen--vaciar{ color:var(--muted); }

@media (max-width:560px){
  .product{ gap:var(--sp-2); padding:var(--sp-3) 0; }
  .product__desc{ margin-top:2px; }
  .mi-lista__que{ display:none; }
  .resumen__item{ grid-template-columns:1fr auto; grid-template-areas:"nombre precio" "cantidad cantidad"; }
  .resumen__nombre{ grid-area:nombre; }
  .resumen__precio{ grid-area:precio; }
  .resumen__cantidad{ grid-area:cantidad; margin-top:var(--sp-2); }
}

/* De qué parte de la carta salió: distingue los que se llaman igual. */
.resumen__donde{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}