@import url('tokens.css');
html[data-contrast="high"]{
  --bone:#1B1815; --bone-deep:#141210; --paper:#211D19; --charcoal:#F6F1E7; --muted:#C9BEAC;
  --line:#493F33; --nopal:#93B586; --terracota:#EB9764;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* overflow-x:clip (no "hidden"): oculta el desbordamiento horizontal igual,
   pero sin crear una caja de scroll propia en html/body — con "hidden" en
   ambos a la vez, el header con position:sticky dejaba de pegarse al
   hacer scroll (bug ya presente en producción, no introducido ahora). */
html, body{overflow-x:clip;}
/* Evita que el navegador mueva el scroll solo cuando el contenido arriba
   de tu posición actual cambia de tamaño (ej. un acordeón que se abre o
   cierra arriba de donde estás viendo). */
html, body{overflow-anchor:none;}
body{
  margin:0; background-color:var(--bone);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.045"/></svg>');
  background-repeat:repeat;
  background-size:200px 200px;
  color:var(--charcoal);
  font-family:var(--font-sans);
  line-height:1.6; font-size:calc(15px * var(--fs-scale));
  transition:background-color .2s,color .2s;
}
/* El tray-bar flota fijo sobre el contenido — solo cuando hay algo en la
   selección reservamos espacio abajo, para que el footer sea de verdad
   lo último que se ve el resto del tiempo. */
body.tray-active{padding-bottom:90px;}
h1,h2,h3{color:var(--charcoal); text-wrap:balance; font-family:var(--font-serif);}
::selection{background:var(--terracota); color:#fff;}
.macro, details.subcat{scroll-margin-top:16px;}

/* ================= HEADER — masthead editorial, se desplaza con la página ================= */
.site-header{
  background:color-mix(in srgb, var(--bone) 94%, transparent);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:640px; margin:0 auto; padding:20px 20px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.brand-mark{display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;}
.brand-logo-small{height:44px; display:block;}
.header-inner .nav{display:flex; gap:26px; justify-content:center; align-items:center;}
.nav a{
  padding:2px 0; border:none; border-bottom:1px solid transparent; border-radius:0;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); background:none;
  font-family:var(--font-sans); font-weight:500;
  transition:color 150ms ease, border-color 150ms ease, font-size 150ms ease;
}
/* Letra por letra: cada carácter del label vive en su propio <span class="nc">
   (ver luxia_nav_chars() en render_helpers.php). En reposo son letras
   normales; solo en :hover se "redibujan" con un pequeño retraso en
   cascada por letra (--i, puesto por PHP). Es puro CSS/:hover — sin JS —
   así que funciona igual en menu.php que en las páginas institucionales. */
.nav a .nc{display:inline-block;}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--charcoal);}
  .nav a:hover .nc{
    animation:luxiaNavChar 380ms var(--ease-out) backwards;
    animation-delay:calc(var(--i, 0) * 16ms);
  }
}
@keyframes luxiaNavChar{
  from{opacity:0; transform:translateY(55%) scale(0.85); filter:blur(2px);}
  to{opacity:1; transform:none; filter:blur(0);}
}
.nav a.active{color:var(--terracota); border-color:var(--terracota);}
.nav a.nav-home{color:var(--muted); letter-spacing:0.02em; text-transform:none; font-size:11.5px;}
/* Página actual del sitio (luxia_site_header): más resaltada que el
   resto — color de acento, un poco más grande/gruesa y con su propio
   subrayado fijo (no solo al hover). */
.nav a.is-active{
  color:var(--terracota); font-weight:700; font-size:12.5px;
  border-bottom-color:color-mix(in srgb, var(--terracota) 55%, transparent);
}
@media (hover:hover) and (pointer:fine){
  .nav a.is-active:hover{color:var(--terracota);}
}
.a11y-controls{
  position:absolute; right:14px; top:14px; display:flex; gap:2px;
}
.a11y-btn{
  width:30px; height:30px; border-radius:6px; border:none; background:none;
  color:var(--muted); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color 150ms ease, background-color 150ms ease;
}
.a11y-btn:active{color:var(--terracota); background:color-mix(in srgb, var(--terracota) 10%, transparent);}
.a11y-btn.active{color:var(--terracota);}

.sig-badge{
  display:inline-block; margin-left:8px; font-family:var(--font-sans); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--terracota); border:1px solid color-mix(in srgb, var(--terracota) 55%, transparent);
  border-radius:3px; padding:1.5px 6px 1px; vertical-align:middle; font-weight:600;
}

/* ---- Promoción del mes: tarjeta fija arriba de Alimentos (no es acordeón) ---- */
.promo-card{
  background:color-mix(in srgb, var(--terracota) 9%, var(--paper));
  border:1px solid var(--terracota); border-radius:14px; padding:22px 20px 20px; margin:0 0 30px;
}
.promo-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px;}
.promo-badge{
  display:inline-block; font-family:var(--font-sans); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--terracota-deep); border-radius:4px; padding:4px 9px 3px; font-weight:600;
}
.promo-save{font-family:var(--font-sans); font-size:11px; color:var(--nopal-deep); font-weight:600;}
.promo-name{font-family:var(--font-serif); font-size:21px; margin:0 0 7px; color:var(--charcoal);}
.promo-desc{font-size:13.5px; color:var(--muted); margin:0 0 11px; line-height:1.55;}
.promo-includes{margin:0 0 15px; padding-left:19px; font-size:13px; color:var(--charcoal);}
.promo-includes li{margin-bottom:3px;}
.promo-price-row{display:flex; align-items:baseline; gap:10px;}
.promo-price{font-family:var(--font-serif); font-size:27px; color:var(--terracota-deep); font-weight:600;}
.promo-price-original{font-size:14px; color:var(--muted); text-decoration:line-through;}
.promo-note{font-size:11px; color:var(--muted); font-style:italic; margin:9px 0 0;}
.promo-card.signature-flash{animation:flash 1.4s ease-in-out 0s 2;}

.macro{position:relative;}
/* Mientras la bienvenida está abierta, bloqueamos el scroll de la página
   de atrás — si no, en pantallas chicas (o con la promo + 7 opciones que
   agregamos) el dedo puede arrastrar el body detrás del overlay, y al
   cerrar la bienvenida el menú aparece a la mitad en vez de arriba. */
html.welcome-lock, body.welcome-lock{overflow:hidden; height:100%;}

/* ================= Fotobandas — fotos reales de LUXIA, a modo parallax:
   fondo fijo que se va revelando al hacer scroll, sin degradado ni glow en
   los bordes — el corte limpio contra el marfil es intencional. ================= */
.photo-band{
  position:relative; width:100vw; left:50%; transform:translateX(-50%);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment:fixed;
}
.photo-section{height:200px;}
@media (min-width:860px){ .photo-section{height:280px;} }

.photo-bebidas{background-image:url('../img/photo-bebidas.jpg');}
.photo-alimentos{background-image:url('../img/photo-alimentos.jpg');}

.pre-footer-deco{
  position:relative; width:100vw; left:50%; transform:translateX(-50%);
  height:190px; margin:30px 0 0; overflow:hidden;
  background-image:url('../img/photo-prefooter.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment:fixed;
}

@media (max-width:480px){
  .photo-section{height:160px;}
  .pre-footer-deco{height:150px;}
}

/* ================= WELCOME / HERO ================= */
.welcome{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; align-items:safe center; justify-content:center; padding:24px;
  background-color:var(--bone); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.welcome[hidden]{display:none;}
.welcome-card{max-width:420px; width:100%; text-align:center; position:relative; z-index:2;}
.welcome .brand-logo{height:80px; margin:0 auto 22px; display:block;}
.welcome-eyebrow{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracota); font-weight:600; margin:0 0 10px;
  font-family:var(--font-sans);
}
.welcome h1{
  font-family:var(--font-serif); font-size:28px; margin:0 0 8px; font-weight:600; letter-spacing:-0.01em;
}
.welcome-sub{font-size:12.5px; color:var(--muted); margin:0 0 26px; font-style:italic;}
.mood-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mood-btn{
  grid-column:span 1; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:17px 10px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-size:13.5px; color:var(--charcoal); cursor:pointer; font-family:var(--font-sans);
  transition:border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .mood-btn:hover{border-color:var(--terracota);}
}
.mood-btn:active{transform:scale(0.97); border-color:var(--terracota);}
.mood-icon{width:34px; height:34px; flex-shrink:0;}
.mood-icon img{display:block; width:100%; height:100%; object-fit:contain;}
.welcome-skip{margin-top:22px; background:none; border:none; color:var(--muted); text-decoration:underline; font-size:12.5px; cursor:pointer; font-family:var(--font-sans);}
/* ---- "Para llevar": mismo tamaño de tarjeta que un antojo, pero con
   relleno sólido para que se lea como una acción (empezar un pedido),
   no como un antojo más — el mismo tratamiento visual que ya usamos en
   la promo del mes. El ícono es de thiings.co, igual que los otros 7. ---- */
.mood-btn-takeout{background:var(--nopal-deep); border-color:var(--nopal-deep); color:var(--bone);}
.mood-btn-takeout:active{border-color:var(--nopal-deep);}
@media (hover:hover) and (pointer:fine){
  .mood-btn-takeout:hover{background:var(--nopal); border-color:var(--nopal);}
}
.mood-btn-takeout .mood-icon-bag{width:34px; height:34px; flex-shrink:0;}
.mood-btn-takeout .mood-icon-bag img{display:block; width:100%; height:100%; object-fit:contain;}

/* ---- Promoción del mes: banner de bienvenida ---- */
.promo-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:var(--terracota-deep); color:var(--bone); border:none; border-radius:12px;
  padding:14px 16px; margin:0 0 20px; cursor:pointer; font-family:var(--font-sans); text-align:left;
  transition:transform 120ms var(--ease-out), background-color 150ms ease;
}
.promo-teaser:active{transform:scale(0.98);}
@media (hover:hover) and (pointer:fine){
  .promo-teaser:hover{background:var(--terracota);}
}
.promo-teaser-icon{width:28px; height:28px; flex-shrink:0;}
.promo-teaser-icon img{display:block; width:100%; height:100%; object-fit:contain;}
.promo-teaser-info{display:flex; flex-direction:column; gap:3px; min-width:0;}
.promo-teaser-badge{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.85; font-weight:600;}
.promo-teaser-name{font-family:var(--font-serif); font-size:15px; line-height:1.25;}
.promo-teaser-price{display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; margin-left:auto;}
.promo-teaser-now{font-family:var(--font-serif); font-size:16px; font-weight:600;}
.promo-teaser-was{font-size:11px; opacity:.75; text-decoration:line-through;}

/* ---- Animación de entrada de la bienvenida: crecen y rebotan un poquito
   al cargar (referencia: thiings.co) — una curva "ease-out-back" hace que
   el valor pase de largo un poquito antes de asentarse, sin necesitar pasos
   intermedios en el keyframe. ---- */
@keyframes card-pop-in{
  from{opacity:0; transform:scale(0.75);}
  to{opacity:1; transform:scale(1);}
}
.promo-teaser, .mood-btn{
  animation:card-pop-in 850ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.promo-teaser{animation-delay:0ms;}
.mood-grid .mood-btn:nth-child(1){animation-delay:130ms;}
.mood-grid .mood-btn:nth-child(2){animation-delay:200ms;}
.mood-grid .mood-btn:nth-child(3){animation-delay:270ms;}
.mood-grid .mood-btn:nth-child(4){animation-delay:340ms;}
.mood-grid .mood-btn:nth-child(5){animation-delay:410ms;}
.mood-grid .mood-btn:nth-child(6){animation-delay:480ms;}
.mood-grid .mood-btn:nth-child(7){animation-delay:550ms;}
.mood-grid .mood-btn:nth-child(8){animation-delay:620ms;}

/* ================= MAIN / SECTIONS ================= */
main{max-width:var(--content-w); margin:0 auto; padding:0 20px;}
.section-intro{
  max-width:var(--content-w); margin:0 auto; padding:24px 20px 4px; text-align:center;
}
.section-intro p{font-size:13px; color:var(--muted); font-style:italic; margin:0; max-width:480px; margin:0 auto; font-family:var(--font-serif);}

.macro{margin:0 0 4px; padding:38px 0 8px;}
.macro-head{max-width:var(--content-w); margin:0 auto 18px; text-align:center;}
.macro-kicker{
  display:block; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--nopal); font-weight:600; margin-bottom:8px;
  font-family:var(--font-sans);
}
.macro-title{
  font-family:var(--font-serif); font-weight:600; font-size:32px; margin:0 0 12px; letter-spacing:-0.01em;
  display:inline-block; position:relative; padding-bottom:14px;
}
.macro-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:38px; height:1.5px; background:var(--terracota);
}
.macro > .subcat:first-of-type{border-top:1px solid var(--line);}
details.subcat{border-bottom:1px solid var(--line); max-width:var(--content-w); margin:0 auto;}
details.subcat summary{
  list-style:none; cursor:pointer; padding:17px 2px; display:flex;
  align-items:center; gap:2px;
}
@media (min-width:860px){
  .subcat-body .item-list{ columns:2; column-gap:52px; }
  .subcat-body .item-list .item{ break-inside:avoid; }
  .subcat-body .note{ break-inside:avoid; }
}
details.subcat summary::-webkit-details-marker{display:none;}
.subcat-title{font-family:var(--font-serif); font-size:18px; font-weight:600; flex:1;}
.chevron{
  position:relative; width:15px; height:15px; margin-left:10px; flex-shrink:0;
  border-radius:50%; box-sizing:border-box; border:1.6px solid transparent;
  transition:border-color 120ms ease;
}
.chevron::before, .chevron::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--terracota);
  transform:translate(-50%,-50%); transition:opacity 120ms ease;
}
.chevron::before{ width:13px; height:1.6px; }
.chevron::after{ width:1.6px; height:13px; transition:opacity 180ms ease, transform 180ms var(--ease-out); }
details[open] > summary .chevron::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
/* Mientras el acordeón se abre o se cierra, el signo +/- se apaga y en su
   lugar gira un anillo — al terminar la animación (JS quita esta clase)
   vuelve a aparecer el signo que corresponde. */
.chevron.is-spinning{
  border-color:color-mix(in srgb, var(--terracota) 30%, transparent);
  border-top-color:var(--terracota);
  animation:chevron-spin 650ms linear infinite;
}
.chevron.is-spinning::before, .chevron.is-spinning::after{ opacity:0 !important; }
@keyframes chevron-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .chevron.is-spinning{ animation:none; border-top-color:transparent; }
}
.subcat-body{padding:0 2px 22px;}
.item-list{list-style:none; margin:0; padding:0;}
.item{padding:12px 0; border-top:1px solid var(--line); transition:background-color 150ms ease;}
.item:first-child{border-top:none;}
.item-line{display:flex; align-items:baseline;}
.item-name{order:1; font-size:calc(14.5px * var(--fs-scale)); font-family:var(--font-sans);}
.item-line::after{content:""; order:2; flex:1 1 auto; border-bottom:1px dotted var(--line); margin:0 8px 4px; min-width:10px;}
.item-price{
  order:3; font-size:calc(14.5px * var(--fs-scale)); font-variant-numeric:tabular-nums; color:var(--terracota);
  white-space:nowrap; font-weight:600; font-family:var(--font-sans);
}
.item-desc{font-size:calc(12.5px * var(--fs-scale)); color:var(--muted); margin-top:5px; max-width:94%; line-height:1.55;}
/* ---- "Agregar para llevar": existe en el HTML de todos los platillos, pero
   solo se muestra cuando el body trae .takeout-mode (ver JS) — así el menú
   normal se queda como una carta para consultar, y únicamente quien entró por
   "PARA LLEVAR" puede mandar algo al pedido de WhatsApp. ---- */
.item-add-llevar{display:none;}
body.takeout-mode .item-add-llevar{
  display:inline-block; margin-top:8px; background:none; border:1px solid var(--nopal); color:var(--nopal-deep);
  padding:6px 14px; border-radius:999px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font-sans);
  transition:background 150ms var(--ease-out), color 150ms ease, transform 120ms var(--ease-out);
}
body.takeout-mode .item-add-llevar:active{transform:scale(0.94);}
@media (hover:hover) and (pointer:fine){
  body.takeout-mode .item-add-llevar:hover:not(:disabled){background:var(--nopal); color:#fff;}
}
body.takeout-mode .item-add-llevar.added{background:var(--nopal); border-color:var(--nopal); color:#fff;}
body.takeout-mode .item-add-llevar:disabled{opacity:.4; cursor:not-allowed; border-color:var(--line); color:var(--muted);}
/* ---- Preparación (caliente/frío/frappé) y/o sabor: algunas bebidas del
   menú solo tenían nombre + precio, pero necesitan una elección obligatoria
   antes de agregarse — el bloque decía "caliente o frío" sin preguntarlo
   por bebida, o el nombre mismo listaba sabores ("Matcha: latte, fresa o
   mango") sin decir cuál. Un platillo puede traer uno o dos grupos de chips
   (ver data-group="prep"/"flavor" en gen_content.py); el botón Agregar
   nace deshabilitado hasta que TODOS los grupos presentes tengan una
   selección — nunca se manda "las tres a la vez". ---- */
.item-variants{display:none;}
body.takeout-mode .item-variants{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px;}
.item-variants-label{
  flex-basis:100%; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  font-weight:600; font-family:var(--font-sans);
}
.item-variant-opt{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:11.5px; cursor:pointer; font-family:var(--font-sans);
  background:var(--bone); color:var(--charcoal);
  transition:background 150ms var(--ease-out), border-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.item-variant-opt.sel{background:var(--nopal-deep); border-color:var(--nopal-deep); color:#fff;}
.item-variant-opt:active{transform:scale(0.94);}
.item.signature-flash{animation:flash 1.4s ease-in-out 0s 2;}
@keyframes flash{
  0%,100%{background:transparent;}
  50%{background:color-mix(in srgb, var(--terracota) 14%, transparent);}
}
.note{
  font-size:12.5px; color:var(--muted); font-style:italic; background:color-mix(in srgb, var(--nopal) 7%, var(--bone));
  border-left:2px solid var(--nopal); padding:9px 13px; margin:0 0 12px; border-radius:2px; font-family:var(--font-serif);
}

/* ---------- Bloques "arma tu plato" — continuos, sin tarjeta ---------- */
.build{
  margin:22px 0; padding:18px 0 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.build-card-head{margin-bottom:2px;}
.build-kicker{
  display:block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracota); font-weight:700; margin-bottom:6px;
  font-family:var(--font-sans);
}
.opt-label{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-top:10px; margin-bottom:4px; font-family:var(--font-sans);}
.opt-list{list-style:none; margin:0; padding:0;}
.opt-row{
  display:flex; align-items:baseline; padding:5px 0 5px 14px; font-size:13.5px; font-family:var(--font-sans);
  border-top:1px dotted var(--line);
}
.opt-row:first-child{border-top:none;}
.opt-name{order:1;}
.opt-row::after{content:""; order:2; flex:1 1 auto; border-bottom:1px dotted var(--line); margin:0 8px 3px; min-width:8px;}
.opt-price{order:3; color:var(--terracota); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ================= "Arma tu plato" — elecciones impresas =================
   Para "comer aquí" no hay wizard interactivo (el cliente elige de
   palabra y el mesero anota), así que las opciones de cada paso se
   imprimen aquí, siempre visibles. En modo "Para llevar" se ocultan:
   ahí ya se ven completas e interactivas dentro del wizard (ver
   .wizard-toggle / .wizard-mount más abajo) y repetirlas sería
   redundante. */
.build-choices{
  list-style:none; margin:10px 0 0; padding:9px 0 0; display:flex; flex-direction:column; gap:5px;
  border-top:1px dotted var(--line); font-family:var(--font-sans);
}
.build-choice-step{font-size:12.5px; line-height:1.5;}
.build-choice-label{font-weight:600; color:var(--charcoal);}
.build-choice-opts{color:var(--muted);}
body.takeout-mode .build-choices{display:none;}

/* ================= FOOTER — tinte cálido + patrón + barra degradada +
   resplandor superior (inspirado en el efecto de "franja de luz" del
   footer de referencia que mandó Xavier) ================= */
.site-footer{
  position:relative; margin-top:0; background-color:var(--charcoal); color:color-mix(in srgb, var(--bone) 92%, transparent);
  background-image:
    radial-gradient(60% 60% at 15% 0%, color-mix(in srgb, var(--terracota) 18%, transparent), transparent 70%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" viewBox="0 0 84 84"><g fill="none" stroke="%23F6F1E7" stroke-opacity="0.06" stroke-width="1"><path d="M0 42 A42 42 0 0 1 42 0"/><path d="M42 84 A42 42 0 0 1 84 42"/><circle cx="42" cy="42" r="1.4" fill="%23B15C33" fill-opacity="0.2" stroke="none"/></g></svg>');
  background-repeat:no-repeat, repeat;
  background-size:auto, 84px 84px;
}
/* Resplandor cálido que "emana" del borde superior, como la franja de luz
   naranja sobre el footer oscuro de la página de referencia. */
.footer-glow{
  position:absolute; left:0; right:0; top:0; height:220px; pointer-events:none; z-index:0;
  background:radial-gradient(55% 100% at 50% 0%, color-mix(in srgb, var(--terracota) 32%, transparent) 0%, transparent 72%);
}
.footer-rule{
  position:relative; z-index:1; height:2px;
  background:linear-gradient(90deg, transparent, var(--terracota) 20%, var(--nopal) 50%, var(--terracota) 80%, transparent);
  box-shadow:0 0 24px color-mix(in srgb, var(--terracota) 55%, transparent);
}
.footer-inner{position:relative; z-index:1; max-width:var(--content-w); margin:0 auto; padding:42px 20px 26px; text-align:center;}
.footer-logo{height:38px; margin:0 auto 18px; display:block; opacity:0.96;}
.footer-quote{
  font-family:var(--font-serif); font-style:italic; font-size:16px; line-height:1.55; font-weight:400;
  max-width:440px; margin:0 auto 22px; color:#fff;
}
/* Tabla de 3 columnas iguales — Ubicación / Contacto / Explora. Las líneas
   verticales entre columnas y el ancho parejo son lo que la hace leerse
   como una tabla ordenada y no como texto suelto flotando. */
.footer-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  max-width:880px; margin:0 auto 26px; text-align:center; font-size:12.5px;
  color:color-mix(in srgb, var(--bone) 78%, transparent); font-family:var(--font-sans);
}
.footer-col{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 36px 0;
  border-left:1px solid color-mix(in srgb, var(--bone) 16%, transparent);
}
.footer-col:first-child{border-left:none;}
/* Línea superior + marca vertical por columna — mismo truco del footer de
   referencia: una rayita que "dibuja" arriba de cada columna. En menu.css
   queda siempre visible (sin JS); site.css le agrega la animación de
   entrada solo en las páginas institucionales. */
.footer-col::before{
  content:""; position:absolute; top:0; left:50%; width:46px; height:1px;
  transform:translateX(-50%); background:color-mix(in srgb, var(--bone) 28%, transparent);
}
.footer-col::after{
  content:""; position:absolute; top:-3px; left:50%; width:1px; height:7px;
  transform:translateX(-50%); background:color-mix(in srgb, var(--terracota) 85%, transparent);
}
.footer-col-num{
  font-size:10.5px; letter-spacing:0.1em; color:color-mix(in srgb, var(--terracota) 90%, var(--bone) 10%);
  font-weight:700; font-family:var(--font-sans); opacity:0.85;
}
.footer-col-title{
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--terracota); font-weight:700; display:block;
  margin-top:-4px;
}
.footer-col p{margin:0; line-height:1.55;}
.footer-cols a{color:inherit; text-decoration:none;}
@media (hover:hover) and (pointer:fine){ .footer-cols a:hover{color:var(--terracota);} }
/* Explora: enlaces en línea horizontal, centrados, que envuelven en
   varias líneas si no caben — nunca apilados uno por renglón. */
.footer-nav-links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:7px 16px;
}
@media (max-width:560px){
  .footer-cols{grid-template-columns:1fr; gap:22px; max-width:280px;}
  .footer-col{border-left:none; padding:20px 0 0;}
}
.footer-bottom{
  border-top:1px solid color-mix(in srgb, var(--bone) 16%, transparent); padding-top:16px; margin-top:6px;
  font-size:11px; color:color-mix(in srgb, var(--bone) 60%, transparent); font-family:var(--font-sans);
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}

/* ================= Wizard =================
   "Personalizar y agregar a mi selección" también queda oculto fuera del
   modo para llevar — armar un plato paso a paso solo tiene sentido si al
   final se puede mandar el pedido por WhatsApp. */
.wizard-toggle{display:none;}
body.takeout-mode .wizard-toggle{
  margin-top:14px; display:inline-block; background:none; border:1px solid var(--terracota); color:var(--terracota);
  padding:9px 16px; border-radius:999px; font-size:12.5px; cursor:pointer; font-family:var(--font-sans); font-weight:500;
  transition:background 150ms var(--ease-out), color 150ms ease, transform 120ms var(--ease-out);
}
.wizard-toggle.active{background:var(--terracota); color:#fff;}
.wizard-toggle:active{transform:scale(0.96);}
.wizard-mount[hidden]{display:none;}
.wizard-mount{
  margin-top:14px; padding:15px; background:var(--paper); border:1px solid var(--line); border-radius:8px;
  transform-origin:top center;
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style{
  .wizard-mount:not([hidden]){opacity:0; transform:scale(0.97) translateY(-6px);}
}
.wz-step{margin-bottom:14px;}
.wz-step-label{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:6px; font-family:var(--font-sans);}
.wz-options{display:flex; flex-wrap:wrap; gap:6px;}
.wz-opt{
  padding:7px 13px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; cursor:pointer; font-family:var(--font-sans);
  background:var(--bone); color:var(--charcoal);
  transition:background 150ms var(--ease-out), border-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.wz-opt.sel{background:var(--terracota); border-color:var(--terracota); color:#fff;}
.wz-opt:active{transform:scale(0.94);}
.wz-summary{font-size:13px; margin:10px 0 6px; color:var(--charcoal); font-family:var(--font-sans);}
.wz-price{font-weight:700; color:var(--terracota);}
.wz-add{
  background:var(--terracota); color:#fff; border:none; padding:10px 18px; border-radius:999px; font-family:var(--font-sans);
  font-size:13px; cursor:pointer; transition:transform 120ms var(--ease-out), opacity 150ms ease;
}
.wz-add:disabled{opacity:.4; cursor:not-allowed;}
.wz-add:not(:disabled):active{transform:scale(0.96);}
.wz-hint{font-size:11.5px; color:var(--muted); margin-top:4px;}

/* ---------- Tray ---------- */
.tray-bar{
  position:fixed; left:50%; bottom:16px; z-index:30;
  background:var(--charcoal); color:var(--bone); padding:11px 20px; border-radius:999px; font-family:var(--font-sans);
  font-size:13px; display:flex; align-items:center; gap:10px; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  transform:translateX(-50%);
}
.tray-bar[hidden]{display:none;}
@starting-style{ .tray-bar:not([hidden]){opacity:0; transform:translateX(-50%) translateY(8px);} }
.tray-bar button{
  background:var(--terracota); color:#fff; border:none; padding:7px 13px; border-radius:999px; font-size:12px; cursor:pointer; font-family:var(--font-sans);
  transition:transform 120ms var(--ease-out);
}
.tray-bar button:active{transform:scale(0.95);}
.tray-overlay{
  position:fixed; inset:0; background:rgba(20,16,13,.45); z-index:40; display:flex; align-items:flex-end; justify-content:center;
  transition:background-color 250ms ease;
}
.tray-overlay[hidden]{display:none;}
@starting-style{ .tray-overlay:not([hidden]){background:rgba(20,16,13,0);} }
.tray-panel{
  background:var(--bone); width:100%; max-width:480px; border-radius:16px 16px 0 0; padding:22px; max-height:78vh; overflow-y:auto;
  transition:transform 300ms var(--ease-drawer);
}
.tray-overlay[hidden] .tray-panel{transform:translateY(100%);}
@starting-style{ .tray-overlay:not([hidden]) .tray-panel{transform:translateY(100%);} }
.tray-head{display:flex; justify-content:space-between; align-items:center;}
.tray-head h3{font-family:var(--font-serif); font-weight:600;}
.tray-head button{
  background:none; border:none; font-size:16px; cursor:pointer; color:var(--charcoal);
  transition:transform 120ms var(--ease-out);
}
.tray-head button:active{transform:scale(0.9);}
.tray-disclaimer{font-size:11.5px; color:var(--muted); font-style:italic; margin:6px 0 14px; font-family:var(--font-serif);}
.tray-list{list-style:none; margin:0; padding:0;}
.tray-list li{padding:10px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.tray-list li:first-child{border-top:none;}
.tray-line-name{font-size:13.5px; font-family:var(--font-sans);}
.tray-line-detail{font-size:11.5px; color:var(--muted); margin-top:2px;}
.tray-remove{background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline; font-family:var(--font-sans);}
.tray-total-row{display:flex; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:14.5px; font-family:var(--font-sans);}
/* ---- Datos de entrega — se piden antes de poder mandar el pedido por
   WhatsApp: nombre, dirección, teléfono y forma de pago. ---- */
.tray-checkout{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px;}
.tray-checkout-title{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; font-family:var(--font-sans);}
.tray-field{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-family:var(--font-sans);}
.tray-field input, .tray-field select{
  font:inherit; font-size:13.5px; color:var(--charcoal); background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; font-family:var(--font-sans); transition:border-color 150ms var(--ease-out);
}
.tray-field input:focus, .tray-field select:focus{border-color:var(--terracota); outline:none;}
.tray-field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236E6459'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%236E6459' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center;}
.tray-checkout-hint{font-size:11.5px; color:var(--terracota); margin-top:2px; display:none; font-family:var(--font-sans);}
.tray-checkout-hint.visible{display:block;}
.tray-send-wa{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; font-family:var(--font-sans);
  background:#25D366; color:#fff; border:none; border-radius:999px; padding:13px 20px; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform 120ms var(--ease-out);
}
.tray-send-wa:active{transform:scale(0.97);}
.tray-send-wa svg{width:18px; height:18px; flex-shrink:0;}
.tray-send-note{font-size:11px; color:var(--muted); text-align:center; margin-top:8px;}
/* Refuerzo: fuera de "para llevar" no hay forma de tener nada en la
   selección, pero por si acaso, la barra y el panel del pedido quedan
   ocultos también por CSS. */
body:not(.takeout-mode) .tray-bar, body:not(.takeout-mode) .tray-overlay{display:none !important;}

/* ---- Aviso de "modo para llevar activo" en el header, con salida ---- */
.takeout-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--nopal-deep); color:var(--bone); border:none;
  padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font-sans);
  transition:transform 120ms var(--ease-out), background 150ms ease;
}
.takeout-badge[hidden]{display:none;}
.takeout-badge:active{transform:scale(0.95);}
@media (hover:hover) and (pointer:fine){ .takeout-badge:hover{background:var(--nopal);} }

.wa-float{
  position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.16);
  text-decoration:none; z-index:30; transition:transform 120ms var(--ease-out);
}
.wa-float:active{transform:scale(0.93);}
.wa-float svg{width:26px; height:26px;}

@media (prefers-reduced-motion: reduce){
  .mood-btn, .a11y-btn, .nav a, .wizard-toggle, .wz-opt, .wz-add,
  .tray-bar, .tray-bar button, .tray-head button, .tray-send-wa, .wa-float,
  .wizard-mount, .tray-overlay, .tray-panel, .chevron::after, .promo-teaser,
  .item-add-llevar, .takeout-badge, .mood-btn-takeout, .item-variant-opt{ transition-duration:0ms !important; }
  .nav a .nc{ animation:none !important; }
  .mood-btn:active, .a11y-btn:active, .nav a:active, .wizard-toggle:active,
  .wz-opt:active, .wz-add:active, .tray-bar button:active, .tray-head button:active,
  .tray-send-wa:active, .wa-float:active, .promo-teaser:active,
  .item-add-llevar:active, .takeout-badge:active, .item-variant-opt:active{ transform:none !important; }
  .item.signature-flash, .promo-card.signature-flash{animation:none;}
  .promo-teaser, .mood-btn{ animation:none !important; opacity:1 !important; transform:none !important; }
}

@media (max-width:480px){
  .header-inner .nav{gap:18px;}
  .macro-title{font-size:26px;}
}