/* ===========================================================
   Hotel Cacique · Menú digital — Sistema visual compartido
   Concepto: "Carta de cocina con guiño cósmico"
   =========================================================== */
:root{
  /* Vino / granate */
  --wine-900:#4a2237;
  --wine-800:#5e2c45;
  --wine-700:#6d3650;
  --wine-600:#7c2f4f;
  --wine-500:#8a3d5d;
  --wine-tint:#7a3a57;

  /* Dorado */
  --gold-700:#a87d34;
  --gold-600:#bd9043;
  --gold-500:#c79a4c;
  --gold-400:#d8b569;
  --gold-200:#e6d5a3;

  /* Crema / hueso / papel */
  --cream-50:#fffdf6;
  --cream-100:#fbf5e6;
  --cream-200:#f5ecd6;
  --cream-300:#efe3c8;
  --paper:#f4ead4;
  --card:#fffdf7;

  /* Tinta */
  --ink-900:#33202c;
  --ink-700:#4a3340;
  --ink-500:#74606b;
  --ink-400:#917f89;

  /* Acentos cartoon */
  --tomato:#d9542f;
  --tomato-soft:#e0603a;
  --leaf:#5a7d3c;

  --line-soft:rgba(120,80,60,.16);
  --line-gold:rgba(167,125,52,.38);

  --shadow-sm:0 1px 2px rgba(74,34,55,.06), 0 1px 3px rgba(74,34,55,.05);
  --shadow-md:0 4px 14px rgba(74,34,55,.10), 0 2px 6px rgba(74,34,55,.06);
  --shadow-lg:0 18px 50px rgba(74,34,55,.22), 0 6px 18px rgba(74,34,55,.12);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:30px;

  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-serif:"Instrument Serif", Georgia, serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-script:"Sacramento", cursive;

  --maxw:480px;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); color:var(--ink-900);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Paper texture: layered soft radial + faint grain, lightweight (no images) */
.paper-bg{
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,253,246,.9), rgba(255,253,246,0) 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(199,154,76,.10), rgba(199,154,76,0) 55%),
    radial-gradient(90% 60% at 0% 90%, rgba(125,47,79,.06), rgba(125,47,79,0) 55%);
}

::selection{ background:var(--gold-400); color:var(--wine-900); }

/* Hairline gold rule echoing the penacho line work */
.rule-gold{ height:1px; background:linear-gradient(90deg,transparent,var(--line-gold) 12%,var(--line-gold) 88%,transparent); border:0; }

.brand-wordmark{
  font-family:var(--font-display); font-weight:800; letter-spacing:.14em;
  line-height:.92; text-transform:uppercase;
}
.script{ font-family:var(--font-script); }
.serif{ font-family:var(--font-serif); }

/* Buttons (admin + shared) */
.btn{ font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:999px; padding:10px 18px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s;
  display:inline-flex; align-items:center; gap:8px; line-height:1; white-space:nowrap; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--wine-700); color:var(--cream-50); }
.btn-primary:hover{ background:var(--wine-600); box-shadow:var(--shadow-md); }
.btn-gold{ background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); color:var(--wine-900); }
.btn-gold:hover{ box-shadow:0 6px 18px rgba(167,125,52,.4); }
.btn-ghost{ background:transparent; color:var(--wine-700); border-color:var(--line-gold); }
.btn-ghost:hover{ background:rgba(199,154,76,.12); }
.btn-danger{ background:transparent; color:var(--tomato); border-color:rgba(217,84,47,.4); }
.btn-danger:hover{ background:rgba(217,84,47,.10); }
.btn-sm{ padding:7px 12px; font-size:13px; }
.btn-icon{ padding:8px; width:36px; height:36px; justify-content:center; border-radius:10px; }

/* Form controls (admin) */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ font-size:12.5px; font-weight:700; color:var(--ink-700); letter-spacing:.02em; }
.input, .textarea, .select{
  font-family:var(--font-body); font-size:15px; color:var(--ink-900);
  background:var(--cream-50); border:1.5px solid var(--line-soft); border-radius:12px;
  padding:11px 13px; width:100%; transition:border-color .15s, box-shadow .15s; }
.input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(199,154,76,.18); }
.textarea{ resize:vertical; min-height:74px; line-height:1.45; }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge-hidden{ background:rgba(116,96,107,.16); color:var(--ink-700); }
.badge-ref{ background:rgba(199,154,76,.18); color:var(--gold-700); }
.badge-new{ background:var(--wine-700); color:var(--gold-200); }

.scrollbar-thin::-webkit-scrollbar{ height:6px; width:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:var(--line-gold); border-radius:999px; }
.scrollbar-thin::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* Hotel Cacique · Estilos del menú del cliente */

body.menu{
  background:
    radial-gradient(120% 90% at 50% 0%, #5e2c45 0%, #4a2237 45%, #3a1b2c 100%);
  min-height:100vh;
}
.app{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:var(--paper);
  background-image:
    radial-gradient(130% 70% at 50% -10%, rgba(255,253,246,.85), rgba(255,253,246,0) 55%),
    radial-gradient(90% 50% at 100% 102%, rgba(199,154,76,.10), rgba(199,154,76,0) 55%);
  box-shadow:0 0 70px rgba(0,0,0,.4);
  overflow-x:clip;
}

/* ============ Portada / marca ============ */
.cover{
  position:relative;
  padding:26px 22px 30px;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(199,154,76,.20), rgba(199,154,76,0) 55%),
    linear-gradient(165deg, var(--wine-700) 0%, var(--wine-800) 55%, var(--wine-900) 100%);
  color:var(--cream-50);
  overflow:hidden;
  border-bottom:2px solid var(--gold-500);
}
.cover__penacho{
  position:absolute; left:-46px; top:-18px; width:230px; opacity:.13;
  filter:saturate(1.2); pointer-events:none; transform:rotate(-4deg);
}
.cover__inner{ position:relative; z-index:2; }
.cover__top{ display:flex; justify-content:flex-start; }
.cover__eyebrow{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--gold-200); border:1px solid var(--line-gold); padding:4px 11px; border-radius:999px;
  background:rgba(0,0,0,.12);
}
.cover__lockup{ margin-top:12px; }
.cover__wordmark{
  margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.84; letter-spacing:.06em; font-size:clamp(42px,15vw,60px);
  color:var(--gold-400);
  display:flex; flex-direction:column;
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.cover__wordmark span:last-child{ color:var(--gold-500); }
.cover__tagline{
  margin:2px 0 0; font-size:clamp(27px,8vw,36px); color:var(--cream-100);
  line-height:1; transform:rotate(-3deg); transform-origin:left; padding-left:6px;
}
.cover__astro{
  position:absolute; right:2px; top:-14px; width:104px; z-index:3;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.cover__contact{ display:flex; gap:9px; margin-top:26px; flex-wrap:wrap; }
.chip-contact{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:12.5px; font-weight:600; color:var(--cream-50);
  border:1px solid var(--line-gold); background:rgba(0,0,0,.14);
  padding:7px 13px; border-radius:999px; transition:background .15s, border-color .15s;
}
.chip-contact:hover{ background:rgba(199,154,76,.18); border-color:var(--gold-400); }
.chip-contact svg{ color:var(--gold-400); }

/* ============ Contenido ============ */
.content{ position:relative; }

/* ============ Banner promocional (carrusel) ============ */
.promo-carousel-wrap{ margin:18px 0 8px; }
.promo-carousel{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; cursor:grab; scrollbar-width:none; }
.promo-carousel::-webkit-scrollbar{ display:none; }
.promo-carousel:active{ cursor:grabbing; }
.promo-slide{ flex:0 0 100%; min-width:0; scroll-snap-align:center; padding:6px 16px; box-sizing:border-box; }
.promo-dots{ display:flex; gap:7px; justify-content:center; margin-top:10px; }
.promo-dot{ width:7px; height:7px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:var(--line-gold); opacity:.7; transition:all .2s ease; }
.promo-dot:hover{ opacity:1; }
.promo-dot.is-active{ background:var(--wine-700); width:20px; opacity:1; }

.promo{
  position:relative; margin:0;
  display:flex; gap:14px; align-items:stretch;
  background:linear-gradient(160deg,var(--cream-50),var(--cream-100));
  border:1.5px solid var(--gold-500);
  border-radius:var(--radius-lg);
  padding:14px; cursor:pointer; overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease;
}
.promo:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.promo__glow{ position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0%, rgba(199,154,76,.16), transparent 60%); pointer-events:none; }
.promo__penacho{ position:absolute; right:-30px; bottom:-30px; width:150px; opacity:.10; pointer-events:none; }
.promo__media{
  flex:0 0 92px; width:92px; border-radius:16px; align-self:stretch; min-height:96px;
  background-size:cover; background-position:center;
  background-color:var(--wine-700);
}
.promo__media--astro{ display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, var(--wine-600), var(--wine-800));
  border:1px solid var(--line-gold);
}
.promo__media--astro img{ width:80px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.promo__body{ position:relative; z-index:2; display:flex; flex-direction:column; min-width:0; }
.promo__kicker{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--gold-700); }
.promo__title{ font-family:var(--font-serif); font-size:27px; line-height:1.02; margin:4px 0 0; color:var(--wine-800); }
.promo__text{ font-size:13px; line-height:1.4; color:var(--ink-500); margin:7px 0 0; text-wrap:pretty; }
.promo__cta{ margin-top:10px; padding-top:2px; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--wine-700); white-space:nowrap; }
.promo__cta b{ font-weight:700; color:var(--gold-700); }
.promo__cta svg{ transition:transform .15s; }
.promo:hover .promo__cta svg{ transform:translateX(3px); }

/* ============ Navegación categorías ============ */
.catnav{
  position:sticky; top:0; z-index:30; margin-top:12px;
  background:rgba(244,234,212,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-gold);
  box-shadow:0 6px 16px -10px rgba(74,34,55,.4);
}
.catnav__rail{
  display:flex; gap:8px; overflow-x:auto; padding:11px 16px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; touch-action:pan-x;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}
.catnav__rail::-webkit-scrollbar{ display:none; }
.catchip{
  flex:0 0 auto; font-family:var(--font-body); font-size:13.5px; font-weight:700;
  color:var(--wine-700); background:transparent; cursor:pointer;
  border:1.5px solid var(--line-gold); border-radius:999px; padding:8px 15px;
  white-space:nowrap; transition:all .16s ease;
}
.catchip:hover{ background:rgba(199,154,76,.14); }
.catchip.is-active{
  background:var(--wine-700); color:var(--gold-200); border-color:var(--wine-700);
  box-shadow:0 4px 12px -4px rgba(94,44,69,.6);
}
.catnav__rail{ cursor:grab; }
.catnav__rail.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
.catnav__rail.is-dragging .catchip{ pointer-events:none; }

/* ============ Secciones ============ */
.sections{ padding:4px 0 0; }
.section{ padding:28px 18px 6px; scroll-margin-top:64px; }
.section__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.section__rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-gold)); }
.section__head .section__rule:last-child{ background:linear-gradient(90deg,var(--line-gold),transparent); }
.section__title{
  font-family:var(--font-serif); font-size:30px; line-height:1; margin:0;
  color:var(--wine-800); text-align:center; white-space:nowrap;
}
/* Subtitulo de seccion (eyebrow): script dorado centrado bajo el titulo. Margen
   superior negativo para acercarlo al titulo pese al margin-bottom del head. */
.section__eyebrow{
  font-family:var(--font-script); text-align:center; margin:-8px 0 14px;
  font-size:19px; line-height:1; color:var(--gold-700);
}
.section__items{ display:flex; flex-direction:column; }

/* ============ Tarjeta de plato ============ */
.dish{
  display:flex; gap:13px; align-items:flex-start;
  padding:15px 4px; border-bottom:1px solid var(--line-soft);
}
.dish:last-child{ border-bottom:0; }
.dish__photo{
  flex:0 0 66px; width:66px; height:66px; border-radius:14px;
  background-size:cover; background-position:center; margin-top:2px;
  box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
}
.dish__main{ flex:1; min-width:0; }
.dish__head{ display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.dish__name{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2;
  margin:0; color:var(--ink-900);
}
.dish__name > *{ vertical-align:middle; }
.dish__tag{
  display:inline-flex; align-items:center; margin-left:7px; white-space:nowrap;
  font-family:var(--font-body); font-size:10.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold-700);
  border:1px solid var(--line-gold); border-radius:6px; padding:1px 6px;
}
/* color por tipo (paleta cacique: vino/dorado/crema); el resto usa el dorado base */
.dish__tag--spicy,.dish__tag--popular{ color:#a32d2a; border-color:rgba(163,45,42,.4); }
.dish__tag--vegano,.dish__tag--vegetariano{ color:#2f7d4f; border-color:rgba(47,125,79,.42); }
.dish__tag--nuevo{ color:#b5642a; border-color:rgba(181,100,42,.42); }
.dish__tag--premium{ color:var(--ink-900); background:var(--gold-200); border-color:var(--gold-500); }
/* Recomendado (featured, Task 3.3): dorado solido, coherente con la paleta cacique */
.dish__tag--featured{ color:var(--ink-900); background:var(--gold-500); border-color:var(--gold-600); }
.dish__name .badge{ margin-left:7px; white-space:nowrap; }
.dish__desc{ font-size:13.5px; line-height:1.45; color:var(--ink-500); margin:6px 0 0; text-wrap:pretty; }
/* Credito / origen del plato (linea pequena bajo el nombre), forma simil a yokono. */
.dish__credit{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-700); margin-top:4px; }

/* modo acordeón */
.dish__head.is-clickable{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dish__chevron{ display:inline-flex; align-items:center; color:var(--gold-600); margin-left:2px;
  transition:transform .22s ease; }
.dish__chevron.is-open{ transform:rotate(180deg); }

/* precio único */
.price-one{
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--wine-700);
  white-space:nowrap; flex:0 0 auto; line-height:1.2; margin-top:1px;
}
.price-one.is-out{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--tomato); }

/* precios por variante (P/M/F o 2 opciones) */
.price-grid{
  display:flex; gap:0; margin-top:10px;
  background:linear-gradient(180deg,var(--cream-100),var(--cream-200));
  border:1px solid var(--line-gold); border-radius:13px; overflow:hidden;
  width:fit-content; max-width:100%;
}
.price-cell{
  display:flex; flex-direction:column; gap:2px; align-items:center;
  padding:7px 16px; border-right:1px solid var(--line-gold); min-width:78px;
}
.price-cell:last-child{ border-right:0; }
.price-cell__label{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); }
.price-cell__val{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--wine-700); }


/* ============ Tabla compacta (extras por tamaño) ============ */
.matrix{ padding:2px 4px 4px; }
.matrix__legend{ font-size:12.5px; color:var(--ink-400); text-align:center; margin:0 0 12px; font-style:italic; }
.matrix__head{
  display:grid; grid-template-columns:1fr 52px 52px 52px; gap:6px; align-items:end;
  padding:0 6px 9px; border-bottom:1px solid var(--line-gold);
}
.matrix__col{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-700); text-align:center; }
.matrix__row{
  display:grid; grid-template-columns:1fr 52px 52px 52px; gap:6px; align-items:center;
  padding:12px 6px; border-bottom:1px solid var(--line-soft);
}
.matrix__row:last-child{ border-bottom:0; }
.matrix__name{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink-900);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.matrix__price{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--wine-700); text-align:center; }

/* ============ Footer ============ */
.foot{
  position:relative; margin-top:30px; padding:34px 22px 40px;
  background:linear-gradient(180deg,var(--wine-800),var(--wine-900));
  color:var(--cream-100); text-align:center; overflow:hidden;
  border-top:2px solid var(--gold-500);
}
.foot__penacho{ position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:170px; opacity:.10; }
.foot__brand{ position:relative; font-size:21px; color:var(--gold-400); letter-spacing:.16em; }
.foot__tag{ position:relative; font-size:25px; color:var(--cream-100); margin:8px 0 18px; line-height:1.1; }
.foot__links{ position:relative; display:flex; flex-direction:column; gap:11px; align-items:center; margin-bottom:18px; }
.foot__links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--cream-50); font-size:14px; font-weight:600;
}
.foot__links a:hover{ color:var(--gold-400); }
.foot__links svg{ color:var(--gold-400); }
.foot__note{ position:relative; font-size:11px; color:var(--gold-200); opacity:.85; letter-spacing:.02em; margin:0; }
.foot__powered{ position:relative; font-size:11px; color:var(--gold-200); opacity:.6; letter-spacing:.06em; margin:14px 0 0; }
.foot__powered a{ color:var(--gold-400); text-decoration:none; font-weight:600; }
.foot__powered a:hover{ text-decoration:underline; }

/* ============ FAB admin ============ */
.admin-fab{
  position:fixed; right:max(16px, calc(50vw - var(--maxw)/2 + 16px)); bottom:18px; z-index:50;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wine-700); color:var(--gold-400);
  box-shadow:var(--shadow-lg); border:1.5px solid var(--gold-500);
  transition:transform .15s, background .15s;
}
.admin-fab:hover{ transform:rotate(35deg) scale(1.06); background:var(--wine-600); }

/* ============ Reveal (pure CSS, no JS gating) ============
   Uses scroll-driven view() timelines where supported; otherwise
   content is simply visible. Never depends on JS to show content. */
.reveal{ opacity:1; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:revealIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 22%;
    }
  }
}
@keyframes revealIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ============ Tamaño de texto (Tweak) ============ */
.size-compacto .dish__name{ font-size:15.5px; }
.size-compacto .dish__desc{ font-size:12.5px; }
.size-compacto .price-one{ font-size:16.5px; }
.size-compacto .matrix__name{ font-size:14.5px; }
.size-grande .dish__name{ font-size:19px; }
.size-grande .dish__desc{ font-size:15.5px; }
.size-grande .price-one{ font-size:20px; }
.size-grande .price-cell__val{ font-size:17px; }
.size-grande .matrix__name{ font-size:17px; }
.size-grande .matrix__price{ font-size:16.5px; }

/* nota dentro del panel de Tweaks */
.tweak-note{ font-size:11.5px; line-height:1.4; color:var(--ink-400); margin:-2px 0 4px; }

/* ============================================================
   Carrito de delivery (Task A3): FAB flotante + modal de pedido
   (bottom-sheet), llevado desde el generico (menu.css .cart-*/
   .dish-modal*) a la paleta vino/dorado/crema de Hotel Cacique en
   vez de clonar el look oscuro del generico.
   ============================================================ */
.cart-fab{
  position:fixed; z-index:60;
  right:max(16px, calc(50vw - var(--maxw)/2 + 16px)); bottom:18px;
  padding:13px 18px; gap:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold-500); border-radius:999px; cursor:pointer;
  background:var(--wine-700); color:var(--cream-50);
  box-shadow:var(--shadow-lg);
  transition:transform .15s, background .15s;
}
.cart-fab:hover{ background:var(--wine-800); }
.cart-fab:active{ transform:scale(.96); }
.cart-fab svg{ width:19px; height:19px; flex:0 0 auto; }
.cart-fab-label{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; }
.cart-fab-count{
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--gold-500); color:var(--ink-900); font-family:var(--font-display); font-weight:700; font-size:11px;
}

.dish-modal-backdrop{
  position:fixed; inset:0; z-index:80;
  background:rgba(51,32,44,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:dmFade .22s ease both;
}
.dish-modal-backdrop.closing{ animation:dmFadeOut .23s ease both; }
.dish-modal{
  position:relative; width:100%; max-width:var(--maxw);
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--cream-50); border:1px solid var(--line-gold); border-bottom:none;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-lg);
  animation:dmSlide .28s cubic-bezier(.2,.8,.3,1) both;
}
.dish-modal.closing{ animation:dmSlideOut .24s cubic-bezier(.4,0,.7,1) both; }
/* Entrada/salida del bottom-sheet (mismo timing que el generico, menu.css):
   backdrop fade + modal slide-up desde abajo. closeDish() (window.dishSheet)
   agrega .closing y desmonta a los 230ms, alineado con dmSlideOut. */
@keyframes dmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dmFadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes dmSlide{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes dmSlideOut{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce){
  .dish-modal-backdrop, .dish-modal, .dish-modal-backdrop.closing, .dish-modal.closing{ animation:none; }
}
.dish-modal::before{
  content:""; position:sticky; top:0; display:block;
  width:42px; height:4px; margin:9px auto 0; border-radius:999px; background:var(--gold-200);
}
.dm-close{
  position:absolute; top:14px; right:14px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--wine-700); border:1px solid var(--gold-500); color:var(--cream-50);
}
.dm-close:hover{ background:var(--wine-800); }
.dm-close svg{ width:17px; height:17px; }
.dm-name{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink-900); margin:0; }
.dm-body{ padding:18px 20px 26px; }
.cart-body{ padding:18px 20px 26px; }
.cart-empty{ color:var(--ink-500); font-size:14px; margin-top:8px; }

/* --- Detalle de plato dentro del bottom-sheet (partials/dish-sheet) ---
   El chrome (.dish-modal/.dm-body/.dm-close/.dm-name) ya esta arriba; esto
   estiliza el contenido interno (foto, tags, desc, precio, variantes, nota)
   a la paleta vino/dorado/crema, scoped a .dish-modal para no chocar con las
   clases de precio de las tarjetas. */
.dm-photo{ position:relative; width:100%; aspect-ratio:16/11; overflow:hidden; background:var(--wine-900); margin-top:-13px; }
.dm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dm-photo--vertical{ aspect-ratio:3/4; }
.dm-photo--none{ display:grid; place-items:center; aspect-ratio:16/8; background:radial-gradient(80% 100% at 50% 0%, rgba(167,125,52,.22), var(--wine-900) 70%); }
.dm-photo--none .tbg-logo{ width:110px; height:110px; object-fit:contain; opacity:.92; }
.dm-photo--none .dm-name{ color:var(--gold-200); }
.dm-stamp{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:15px; color:var(--tomato); }
.dish-modal .dm-tags{ margin-top:10px; }
.dish-modal .tags{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.dish-modal .tag{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:11px; background:var(--cream-200); color:var(--ink-700); }
.dish-modal .tag svg{ width:12px; height:12px; }
.dish-modal .tag.spicy{ background:rgba(217,84,47,.14); color:var(--tomato); }
.dish-modal .tag.premium{ background:rgba(167,125,52,.16); color:var(--gold-700); }
.dm-desc{ margin:12px 0 0; font-family:var(--font-body); font-size:15px; line-height:1.55; color:var(--ink-500); text-wrap:pretty; }
.dm-desc .dish-credit{ color:var(--ink-400); }
.dm-price{ margin-top:16px; }
.dish-modal .dm-price .price{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--ink-900); }
.dish-modal .amt-ref{ white-space:nowrap; }
.dm-add{ margin-top:12px; width:100%; padding:11px 16px; border:none; border-radius:var(--radius-sm); background:var(--wine-700); color:var(--cream-50); cursor:pointer; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; }
.dm-add:hover{ background:var(--wine-800); }
.dm-variants{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-gold); display:grid; gap:10px; }
.dish-modal .variant{ display:flex; align-items:center; gap:8px; }
.dish-modal .v-label{ font-family:var(--font-body); font-size:14px; color:var(--ink-900); }
.dish-modal .v-vol{ font-size:11px; color:var(--ink-400); margin-left:3px; }
.dish-modal .v-leader{ flex:1; border-bottom:1.5px dotted var(--line-gold); align-self:flex-end; margin-bottom:5px; min-width:10px; }
.dish-modal .variant .price{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-900); }
.dm-add--variant{ flex:0 0 auto; margin-top:0; width:34px; height:34px; padding:0; font-size:18px; line-height:1; display:grid; place-items:center; border-radius:50%; }
.dish-modal .note{ margin-top:16px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--cream-100); border:1px solid var(--line-gold); font-size:13px; color:var(--ink-700); display:grid; gap:2px; }
.dish-modal .note-label{ font-weight:700; font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--gold-700); }

.cart-errors{
  margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid rgba(217,84,47,.35); background:rgba(217,84,47,.08); color:var(--tomato);
  font-size:13px;
}
.cart-errors-title{ font-weight:700; margin:0 0 4px; }
.cart-errors ul{ margin:0; padding-left:18px; }

.cart-list{ list-style:none; margin:12px 0 0; padding:0; }
.cart-line{
  display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--ink-900);
}
.cart-line-name{ flex:1 1 auto; min-width:0; }
.cart-line-name em{ color:var(--ink-500); font-style:normal; font-size:12px; }
.cart-line-qty{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.cart-line-qty button{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line-gold); background:var(--cream-100);
  color:var(--ink-900); cursor:pointer; line-height:1;
}
.cart-line-price{ flex:0 0 auto; font-weight:700; }
.cart-line-del{ flex:0 0 auto; border:none; background:none; color:var(--ink-500); font-size:18px; line-height:1; cursor:pointer; }

.cart-total{
  display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line-gold); font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink-900);
}

.cart-form{ margin-top:16px; display:grid; gap:10px; }
.cart-field{ display:grid; gap:4px; font-size:12.5px; color:var(--ink-500); }
.cart-field input, .cart-field textarea, .cart-field select{
  background:var(--cream-100); border:1px solid var(--line-gold); border-radius:var(--radius-sm); color:var(--ink-900);
  font-family:var(--font-body); font-size:14px; padding:9px 11px; resize:vertical;
}
.cart-field input:focus, .cart-field textarea:focus, .cart-field select:focus{ outline:none; border-color:var(--gold-600); }
.cart-submit{
  margin-top:4px; padding:12px 16px; border:none; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--wine-700); color:var(--cream-50);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13.5px;
}
.cart-submit:hover{ background:var(--wine-800); }

/* ============ Precio como boton "Agregar" (delivery activo) ============ */
/* Cuando la tienda esta activa, cada precio de un plato disponible es tappable
   para sumarlo al carrito. Reusa las clases de precio (matrix/price-one/price-cell)
   para no romper el diseno: solo resetea el chrome del <button> y agrega feedback. */
.matrix__add, .price-one--add, .price-cell--add{
  appearance:none; -webkit-appearance:none; border:0; margin:0;
  background:none; color:inherit; font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease;
}
.matrix__add:active, .price-one--add:active, .price-cell--add:active{ transform:scale(.93); }

/* Matrix: celda de 52px, muy justa -> chip sutil en vez de badge +. */
.matrix__add{
  padding:3px 0; border-radius:9px;
  background:rgba(217,84,47,.09); box-shadow:inset 0 0 0 1px rgba(217,84,47,.18);
  transition:background .12s ease, transform .08s ease;
}
.matrix__add:hover{ background:rgba(217,84,47,.16); }

/* Precio unico y celdas de variante: badge "+" al lado del valor. */
.price-one--add{ display:inline-flex; align-items:center; }
.price-cell--add:hover .add-plus, .price-one--add:hover .add-plus{ background:var(--tomato); color:#fff; }
.add-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:5px; border-radius:50%;
  background:rgba(217,84,47,.16); color:var(--tomato);
  font-family:var(--font-display); font-weight:800; font-size:12px; line-height:1;
  vertical-align:middle; transition:background .12s ease, color .12s ease;
}
.matrix__add:focus-visible, .price-one--add:focus-visible, .price-cell--add:focus-visible{
  outline:2px solid var(--tomato); outline-offset:2px; border-radius:9px;
}

/* ---------------------------------------------------------------------------
   Densidad comprimida (settings.theme.density = compacta).
   Hasta 2026-08-20 este ajuste existia pero SOLO lo leia la plantilla generica:
   en cacique/yokono/ciao se guardaba y no hacia nada, sin aviso. Mismos saltos
   que menu.css para que "comprimida" signifique lo mismo en las cuatro cartas.
   --------------------------------------------------------------------------- */
[data-density="compacta"] .dish{ padding:11px 4px; gap:10px; }
[data-density="compacta"] .dish__name{ font-size:15.5px; }
[data-density="compacta"] .dish__desc{ font-size:13px; }
[data-density="compacta"] .dish__photo{ flex:0 0 54px; width:54px; height:54px; }

/* Modo combinado: el equivalente en Bs bajo el precio en dolares. La clase la
   comparten las cuatro plantillas (menu.css ya la tenia del modo dual viejo). */
.amt-bs{ font-size:.72em; font-weight:600; opacity:.62; margin-top:2px; white-space:nowrap; text-align:right; }

/* Modo combinado: precio arriba, equivalente en Bs debajo. El envoltorio hace
   falta porque el contenedor del precio es flex EN FILA en cacique (.dish__head)
   y en ciao (.plato-linea): sin el, el renglon en Bs se pone AL LADO. */
.price-stack{ display:flex; flex-direction:column; align-items:flex-end; }

/* Ancla del plato (#plato-ID): el banner que apunta a un plato aterriza aca, y
   sin este margen el plato queda debajo de la cabecera fija. Mismo
   desplazamiento que usa la seccion en esta carta. */
.dish{ scroll-margin-top:64px; }

/* Las filas del modo matrix tambien son ancla de plato (#plato-ID). */
.matrix__row{ scroll-margin-top:64px; }

/* Direccion y horario del pie: linea chica, no el cuerpo grande de .foot__tag. */
.foot__linea{ position:relative; font-size:12.5px; color:var(--cream-100); opacity:.85; margin:0 0 6px; }

/* Densidad comprimida: la descripcion sale de la fila (sigue completa al abrir
   el plato). Acotada a data-detalle="panel": en acordeon la gobierna Alpine
   (x-show al abrir) y esconderla dejaria la fila abierta sin nada que mostrar. */
.app[data-detalle="panel"][data-density="compacta"] .dish__desc{ display:none; }

/* La lupa del buscador va fija al final de la barra, fuera del riel de chips. */
.catnav{ display:flex; align-items:center; padding-right:8px; }
.catnav__rail{ flex:1; min-width:0; }

/* Agotado en el lugar de los precios de la fila matrix. */
.matrix__out{ grid-column:2 / -1; text-align:right; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--tomato); }

/* Acordeon: la descripcion crece y se recoge en lugar de aparecer de golpe.
   grid-template-rows 0fr->1fr anima a cualquier alto sin medir nada en JS, y
   al ser CSS puro el interruptor de animaciones del panel ya la apaga. */
.desc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.desc-fold.is-open { grid-template-rows: 1fr; }
.desc-fold > * { overflow: hidden; min-height: 0; margin: 0; padding-top: 0;
  transition: padding-top .26s ease; }
.desc-fold.is-open > * { padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .desc-fold, .desc-fold > * { transition: none; } }

/* El boton del banner y las anclas de plato navegan por hash: sin esto el salto
   es seco. El interruptor de animaciones lo pisa con scroll-behavior:auto. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }