/* ============ TOKENS ============ */
:root{
  --crema:#F5F1E6;
  --hueso:#FBF8F0;
  --olivo:#4E6B2E;
  --olivo-900:#2F421C;
  --olivo-100:#E4E8D8;
  --oro:#B39456;
  --oro-200:#E0CB9B;
  --tinta:#23261C;
  --tinta-60:#5C6152;
  --linea:#DCD6C4;

  --bg:var(--crema);
  --surface:var(--hueso);
  --surface-2:#EFEADB;
  --text:var(--tinta);
  --text-soft:var(--tinta-60);
  --rule:var(--linea);
  --accent:var(--oro);
  --accent-ink:#8A6F35;
  --band:var(--olivo);
  --band-text:#F2EEE0;
  --ok:#4E6B2E; --warn:#B07E22; --crit:#A03A26;
  --shadow:0 1px 2px rgba(35,38,28,.05), 0 12px 32px -18px rgba(35,38,28,.35);

  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(.95rem,.92rem + .15vw,1.02rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.9rem);
  --step-3:clamp(1.9rem,1.6rem + 1.4vw,2.9rem);
  --step-4:clamp(2.6rem,1.9rem + 3.2vw,5rem);
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171A12; --surface:#1F241A; --surface-2:#262C1F;
    --text:#EFE9D8; --text-soft:#A9AE9A; --rule:#3A4130;
    --accent:#CFAF6C; --accent-ink:#E0CB9B;
    --band:#2F421C; --band-text:#EFE9D8;
    --ok:#8FB35F; --warn:#D9A648; --crit:#D4705B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#171A12; --surface:#1F241A; --surface-2:#262C1F;
  --text:#EFE9D8; --text-soft:#A9AE9A; --rule:#3A4130;
  --accent:#CFAF6C; --accent-ink:#E0CB9B;
  --band:#2F421C; --band-text:#EFE9D8;
  --ok:#8FB35F; --warn:#D9A648; --crit:#D4705B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
section,div.hero,footer{scroll-margin-top:78px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,'Times New Roman',serif; margin:0; text-wrap:balance; line-height:1.08; font-weight:700}
p{margin:0}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 2.5rem,var(--maxw)); margin-inline:auto}
.eyebrow{
  font-size:var(--step--1); letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--accent-ink);
}
.num{font-variant-numeric:tabular-nums}

/* ============ TOP BAR ============ */
.demoflag{
  background:var(--olivo-900); color:#E0CB9B; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  padding:.45rem 1rem; position:relative; z-index:60;
}
.demoflag b{color:#fff; font-weight:500}

header.nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule);
}
.nav-in{display:flex; align-items:center; gap:1.5rem; height:66px}
.brand{display:flex; align-items:center; gap:.65rem; margin-right:auto; text-decoration:none}
.brand img{width:34px; height:auto}
.brand .wm{font-family:'Playfair Display',serif; font-weight:900; font-size:1.18rem; letter-spacing:-.01em; line-height:1}
.brand .sub{font-size:.56rem; letter-spacing:.34em; color:var(--text-soft); text-transform:uppercase; margin-top:2px}
.nav-links{display:flex; gap:1.4rem; font-size:.86rem; letter-spacing:.04em}
.nav-links a{text-decoration:none; color:var(--text-soft); transition:color .2s}
.nav-links a:hover{color:var(--accent-ink)}
@media(max-width:900px){.nav-links{display:none}}
.cartbtn{
  display:flex; align-items:center; gap:.5rem; background:var(--olivo); color:#F2EEE0;
  padding:.55rem 1rem; border-radius:999px; font-size:.85rem; font-weight:500;
  transition:transform .2s, background .2s;
}
.cartbtn:hover{transform:translateY(-1px)}
.cartbtn .cnt{background:var(--oro); color:#2F421C; border-radius:999px; min-width:20px; height:20px; display:grid; place-items:center; font-size:.72rem; font-weight:600}
@media(max-width:480px){
  .nav-in{height:58px; gap:.7rem}
  .brand img{width:28px}
  .brand .wm{font-size:1rem}
  .cartbtn{padding:.5rem .8rem; font-size:.8rem; white-space:nowrap}
  .demoflag{font-size:.6rem; letter-spacing:.1em; line-height:1.5}
}

/* ============ HERO ============ */
.hero{position:relative; min-height:min(88vh,760px); display:grid; align-items:end; overflow:hidden}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.06)}
.hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(24,28,16,.55) 0%,rgba(24,28,16,.18) 38%,rgba(24,28,16,.82) 100%);
}
.hero-in{position:relative; padding:5rem 0 3.2rem}
.hero h1{
  font-size:var(--step-4); font-weight:900; color:#FBF8F0; letter-spacing:-.02em;
  margin:.6rem 0 .3rem;
}
.hero .tag{font-family:'Playfair Display',serif; font-style:italic; font-size:var(--step-1); color:var(--oro-200)}
.hero .eyebrow{color:var(--oro-200)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}
.btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; border-radius:999px;
  font-size:.9rem; font-weight:500; letter-spacing:.02em; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn-gold{background:var(--oro); color:#2B2410}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(179,148,86,.9)}
.btn-ghost{border:1px solid rgba(251,248,240,.45); color:#FBF8F0}
.btn-ghost:hover{background:rgba(251,248,240,.12)}
.btn-olive{background:var(--olivo); color:#F2EEE0}
.btn-olive:hover{transform:translateY(-2px)}
.btn-line{border:1px solid var(--rule); color:var(--text)}
.btn-line:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn[disabled]{opacity:.45; pointer-events:none}

.hero-status{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2.2rem;
  background:rgba(20,24,14,.6); border:1px solid rgba(224,203,155,.3);
  padding:.5rem .95rem; border-radius:999px; font-size:.8rem; color:#EDE7D6;
}
.dot{width:7px; height:7px; border-radius:50%; background:#8FB35F; box-shadow:0 0 0 0 rgba(143,179,95,.7); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(143,179,95,0)}100%{box-shadow:0 0 0 0 rgba(143,179,95,0)}}

/* ============ RIBBON ============ */
.ribbon{background:var(--band); color:var(--band-text); padding:.8rem 0; overflow:hidden; white-space:nowrap}
.ribbon-track{display:inline-flex; gap:2.5rem; animation:slide 38s linear infinite; will-change:transform}
.ribbon span{font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; display:inline-flex; align-items:center; gap:2.5rem}
.ribbon span::after{content:'✳'; color:var(--oro-200); letter-spacing:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.5rem; flex-wrap:wrap}
.sec-head h2{font-size:var(--step-3)}
.sec-head p{color:var(--text-soft); max-width:46ch; font-size:.92rem}
.hr{height:1px; background:var(--rule); border:0; margin:0}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .ribbon-track{animation:none}
  *{scroll-behavior:auto !important}
}

/* ============ MENU / CARTA ============ */
.carta{display:grid; grid-template-columns:1fr 1fr; gap:0 3.5rem}
@media(max-width:820px){.carta{grid-template-columns:1fr; gap:2.5rem}}
.carta h3{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:700; font-size:var(--step-2);
  padding-bottom:.6rem; border-bottom:2px solid var(--accent); margin-bottom:.4rem;
}
.row{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:.7rem;
  padding:.62rem 0; border-bottom:1px dotted var(--rule);
}
.row .nm{font-size:.94rem}
.row .nm em{font-style:normal; color:var(--text-soft); font-size:.78rem; display:block; letter-spacing:.02em}
.row .pr{font-weight:500; color:var(--accent-ink); font-variant-numeric:tabular-nums; font-size:.94rem}
.add{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center;
  font-size:1rem; line-height:1; color:var(--text-soft); transition:all .18s; flex:none;
}
.add:hover{background:var(--olivo); border-color:var(--olivo); color:#F2EEE0; transform:scale(1.1)}
.add.hit{animation:hit .4s}
@keyframes hit{50%{transform:scale(1.45); background:var(--oro); border-color:var(--oro); color:#2B2410}}

.tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2rem}
.tab{padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--rule); font-size:.83rem; letter-spacing:.05em; color:var(--text-soft); transition:all .2s}
.tab[aria-selected="true"]{background:var(--olivo); border-color:var(--olivo); color:#F2EEE0}
.pane[hidden]{display:none}

.bebrow{grid-template-columns:1fr repeat(3,58px) auto}
.bebhead{
  display:grid; grid-template-columns:1fr repeat(3,58px) auto; gap:.7rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft);
  padding-bottom:.5rem; border-bottom:1px solid var(--rule);
}
.bebhead span:not(:first-child),.bebrow .p{text-align:right}
.bebrow .p{font-variant-numeric:tabular-nums; font-size:.88rem; color:var(--accent-ink)}
.bebrow .p.off{color:var(--rule)}

/* ============ CARDS / GALERIA ============ */
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem}
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:3px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.card:hover{transform:translateY(-5px); box-shadow:0 1px 2px rgba(35,38,28,.06),0 22px 44px -22px rgba(35,38,28,.5)}
.card .ph{aspect-ratio:4/5; overflow:hidden; background:var(--surface-2)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph img{transform:scale(1.07)}
.card{display:flex; flex-direction:column}
.card .ph{flex:none}
.card .bd{padding:1.1rem 1.15rem 1.25rem; flex:1; display:flex; flex-direction:column; align-items:flex-start}
.card h4{font-size:1.08rem; margin:.35rem 0 .2rem}
.card .d{font-size:.82rem; color:var(--text-soft)}
.card .ft{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.9rem; width:100%}
.card .pz{font-weight:500; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.pill{
  display:inline-block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:999px; background:var(--olivo-100); color:var(--olivo-900);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill{background:#33421F; color:#D5E0BE}}
:root[data-theme="dark"] .pill{background:#33421F; color:#D5E0BE}
.pill.out{background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit)}
.card.sold .ph img{filter:grayscale(.75) opacity(.7)}

/* ============ MODULOS ============ */
.mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem}
.mod{
  background:var(--surface); border:1px solid var(--rule); padding:1.6rem 1.5rem 1.5rem;
  display:flex; flex-direction:column; gap:.7rem; border-radius:3px; position:relative;
}
.mod::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.0; transition:opacity .3s}
.mod:hover::before{opacity:1}
.mod .ic{font-size:1.5rem; line-height:1}
.mod h4{font-size:1.15rem}
.mod p{font-size:.86rem; color:var(--text-soft)}
.mod .go{margin-top:auto; padding-top:.6rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); display:inline-flex; gap:.4rem; align-items:center; transition:gap .2s}
.mod .go:hover{gap:.8rem}

/* ============ SELLOS ============ */
.ticket{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:1.8rem;
  box-shadow:var(--shadow); position:relative; max-width:430px;
}
.stamps{display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; margin:1.3rem 0 1.6rem}
.stamp{
  aspect-ratio:1; border:1.5px dashed var(--rule); border-radius:50%; display:grid; place-items:center;
  color:var(--rule); font-size:1.15rem; transition:all .5s cubic-bezier(.2,.7,.3,1);
}
.stamp.on{border:1.5px solid var(--olivo); background:var(--olivo); color:var(--oro-200); transform:rotate(-8deg)}
.stamp.free{border-color:var(--oro); color:var(--oro); font-size:.6rem; letter-spacing:.08em; text-align:center; border-style:solid}
.qrbox{display:flex; align-items:center; gap:1rem; padding-top:1.5rem; border-top:2px dashed var(--rule)}
.qr{width:74px; height:74px; flex:none; border-radius:3px}

/* ============ CUPONES ============ */
.cups{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem}
.cup{
  position:relative; border:1px solid var(--accent); border-radius:4px; padding:1.3rem 1.3rem 1.1rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));
  overflow:hidden;
}
.cup::before,.cup::after{
  content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--bg);
  border:1px solid var(--accent); top:50%; transform:translateY(-50%);
}
.cup::before{left:-10px} .cup::after{right:-10px}
.cup .kv{font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:900; color:var(--accent-ink); line-height:1}
.cup .cd{font-size:.85rem; color:var(--text-soft); margin:.35rem 0 .9rem}
.cup .code{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px dashed var(--accent); border-radius:3px; padding:.45rem .7rem;
  font-size:.82rem; letter-spacing:.16em; font-weight:500;
}
.cup .code button{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.cup.used{opacity:.5; filter:grayscale(.6)}

/* ============ PICK & GO / TRACKING ============ */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:2rem}}
.phone{
  background:var(--surface); border:1px solid var(--rule); border-radius:22px; padding:1.1rem;
  box-shadow:var(--shadow); max-width:360px; margin-inline:auto; width:100%;
}
.phone .scr{background:var(--surface-2); border-radius:14px; padding:1.2rem 1.1rem; min-height:330px; display:flex; flex-direction:column; gap:.9rem}
.track{display:flex; flex-direction:column; gap:0}
.tstep{display:grid; grid-template-columns:26px 1fr; gap:.8rem; padding-bottom:1.1rem; position:relative}
.tstep:last-child{padding-bottom:0}
.tstep::before{content:''; position:absolute; left:12px; top:22px; bottom:0; width:1.5px; background:var(--rule)}
.tstep:last-child::before{display:none}
.tstep .bul{
  width:25px; height:25px; border-radius:50%; border:1.5px solid var(--rule); display:grid; place-items:center;
  background:var(--surface); font-size:.7rem; color:var(--text-soft); z-index:1; transition:all .45s;
}
.tstep.done .bul{background:var(--olivo); border-color:var(--olivo); color:#F2EEE0}
.tstep.now .bul{border-color:var(--accent); color:var(--accent-ink); animation:pulse2 1.6s infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(179,148,86,.55)}50%{box-shadow:0 0 0 8px rgba(179,148,86,0)}}
.tstep .lb{font-size:.86rem; font-weight:500}
.tstep .sb{font-size:.75rem; color:var(--text-soft)}
.tstep.pend{opacity:.45}

/* ============ ADMIN ============ */
.admin{background:var(--surface); border:1px solid var(--rule); border-radius:4px; overflow:hidden; box-shadow:var(--shadow)}
.admin-top{display:flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--rule); background:var(--surface-2)}
.admin-top .tl{display:flex; gap:.35rem}
.admin-top .tl i{width:9px; height:9px; border-radius:50%; background:var(--rule); display:block}
.admin-top .ttl{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--rule); border-bottom:1px solid var(--rule)}
.kpi{padding:1.1rem 1.2rem; background:var(--surface)}
.kpi .k{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft)}
.kpi .v{font-family:'Playfair Display',serif; font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:.2rem}
.kpi .t{font-size:.74rem; color:var(--ok)}
.spark{display:block; width:100%; height:34px; margin-top:.4rem}
.tblwrap{overflow-x:auto}
table.orders{width:100%; border-collapse:collapse; font-size:.84rem; min-width:560px}
table.orders th{
  text-align:left; font-weight:500; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-soft); padding:.7rem 1.2rem; border-bottom:1px solid var(--rule);
}
table.orders td{padding:.75rem 1.2rem; border-bottom:1px solid var(--rule); vertical-align:middle}
table.orders tr:last-child td{border-bottom:0}
table.orders .num{text-align:right}
table.orders td:first-child{text-align:left; color:var(--text-soft); font-variant-numeric:tabular-nums}
.chip{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .55rem; border-radius:3px; white-space:nowrap}
.chip.n{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn)}
.chip.h{background:color-mix(in srgb,var(--ok) 20%,transparent); color:var(--ok)}
.chip.r{background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent-ink)}
.chip.c{background:color-mix(in srgb,var(--crit) 18%,transparent); color:var(--crit)}
.newrow{animation:drop .55s cubic-bezier(.2,.7,.3,1)}
@keyframes drop{from{opacity:0; transform:translateY(-10px); background:color-mix(in srgb,var(--accent) 14%,transparent)}}
.stockbar{display:flex; align-items:center; gap:.6rem}
.bar{flex:1; height:5px; background:var(--rule); border-radius:99px; overflow:hidden; min-width:70px}
.bar i{display:block; height:100%; background:var(--olivo); border-radius:99px; transition:width .6s}
.bar i.low{background:var(--crit)}

/* ============ CATERING ============ */
.form{display:grid; gap:1rem}
.fld{display:grid; gap:.35rem}
.fld label{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft)}
.fld input,.fld select,.fld textarea{
  font:inherit; font-size:.9rem; padding:.7rem .85rem; background:var(--surface); color:var(--text);
  border:1px solid var(--rule); border-radius:3px; width:100%;
}
.fld input:focus,.fld select:focus{border-color:var(--accent); outline:none}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.quote{
  background:var(--olivo); color:#F2EEE0; border-radius:4px; padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.quote .ln{display:flex; justify-content:space-between; font-size:.86rem; color:#D6DCC6}
.quote .tot{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(224,203,155,.3); padding-top:.7rem; margin-top:.3rem}
.quote .tot b{font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--oro-200); font-variant-numeric:tabular-nums}

/* ============ SUCURSALES / FOOTER ============ */
.suc{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem}
.sucard{border:1px solid var(--rule); padding:1.4rem 1.4rem 1.3rem; background:var(--surface); border-radius:3px}
.sucard h4{font-size:1.15rem; margin-bottom:.3rem}
.sucard .ad{font-size:.85rem; color:var(--text-soft); margin-bottom:.7rem}
.sucard dl{display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem; font-size:.82rem; margin:0}
.sucard dt{color:var(--text-soft)}
.sucard dd{margin:0; font-variant-numeric:tabular-nums}
footer{background:var(--olivo-900); color:#D6DCC6; padding:3.5rem 0 2rem; margin-top:0}
footer .fin{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:760px){footer .fin{grid-template-columns:1fr; gap:1.8rem}}
footer h5{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-200); margin:0 0 .7rem; font-weight:500; font-family:'Jost',sans-serif}
footer a{color:#D6DCC6; text-decoration:none; font-size:.86rem; display:block; padding:.15rem 0}
footer a:hover{color:var(--oro-200)}
footer .fnote{border-top:1px solid rgba(224,203,155,.2); margin-top:2.5rem; padding-top:1.3rem; font-size:.75rem; color:#98A188; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ============ CART DRAWER ============ */
.scrim{position:fixed; inset:0; background:rgba(20,24,14,.55); backdrop-filter:blur(3px); z-index:80; opacity:0; pointer-events:none; transition:opacity .3s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg); z-index:90;
  transform:translateX(102%); transition:transform .42s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);
}
.drawer.on{transform:none}
.dhead{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem; border-bottom:1px solid var(--rule)}
.dhead h3{font-size:1.3rem}
.dbody{flex:1; overflow-y:auto; padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.9rem}
.dfoot{border-top:1px solid var(--rule); padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.8rem}
.citem{display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; padding-bottom:.9rem; border-bottom:1px dotted var(--rule)}
.citem .cn{font-size:.9rem}
.citem .cp{font-variant-numeric:tabular-nums; color:var(--accent-ink); font-size:.9rem}
.qty{display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--rule); border-radius:999px; padding:.15rem .5rem; justify-self:start}
.qty button{width:20px; height:20px; display:grid; place-items:center; color:var(--text-soft); font-size:.95rem; line-height:1}
.qty button:hover{color:var(--accent-ink)}
.qty span{font-size:.82rem; font-variant-numeric:tabular-nums; min-width:14px; text-align:center}
.empty{text-align:center; color:var(--text-soft); font-size:.88rem; padding:3rem 1rem}
.empty div{font-size:2rem; margin-bottom:.6rem; opacity:.4}
.modeseg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.3rem; background:var(--surface-2); padding:.25rem; border-radius:999px}
.modeseg button{padding:.5rem .3rem; border-radius:999px; font-size:.75rem; letter-spacing:.04em; color:var(--text-soft); transition:all .2s}
.modeseg button[aria-pressed="true"]{background:var(--olivo); color:#F2EEE0}
.totrow{display:flex; justify-content:space-between; align-items:baseline}
.totrow b{font-family:'Playfair Display',serif; font-size:1.6rem; font-variant-numeric:tabular-nums}
.mini{font-size:.74rem; color:var(--text-soft); text-align:center}

/* ============ MODAL ============ */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.2rem; opacity:0; pointer-events:none; transition:opacity .28s}
.modal.on{opacity:1; pointer-events:auto}
.modal .bx{
  background:var(--bg); border:1px solid var(--rule); border-radius:6px; width:min(520px,100%);
  max-height:88vh; overflow-y:auto; padding:1.8rem; box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.98); transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.modal.on .bx{transform:none}
.modal h3{font-size:1.5rem; margin-bottom:.4rem}
.modal .cl{position:absolute; top:1rem; right:1.2rem; font-size:1.4rem; color:var(--text-soft)}
.pgcode{
  font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:900; letter-spacing:.14em;
  color:var(--accent-ink); text-align:center; padding:1rem 0;
}
.toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%,120%); z-index:110;
  background:var(--olivo-900); color:#EDE7D6; padding:.8rem 1.3rem; border-radius:999px;
  font-size:.85rem; transition:transform .4s cubic-bezier(.2,.7,.3,1); box-shadow:var(--shadow);
}
.toast.on{transform:translate(-50%,0)}

/* ================= AÑADIDOS DE LA VERSIÓN FUNCIONAL ================= */

/* ---- estado de la tienda ---- */
.closedbar{background:#8A3520; color:#FBEFE6; text-align:center; padding:.7rem 1rem; font-size:.86rem}

/* ---- formulario dentro del carrito ---- */
.dfields{display:grid; gap:.7rem; padding-top:.2rem}
.dfields input,.dfields select,.dfields textarea{
  font:inherit; font-size:.88rem; padding:.6rem .75rem; width:100%;
  background:var(--surface); color:var(--text); border:1px solid var(--rule); border-radius:3px;
}
.dfields textarea{resize:vertical; min-height:56px}
.dfields input:focus,.dfields select:focus,.dfields textarea:focus{border-color:var(--accent); outline:none}
.dfields label{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); display:block; margin-bottom:.25rem}
.cupbox{display:flex; gap:.4rem}
.cupbox input{text-transform:uppercase; letter-spacing:.1em}
.cupbox button{
  flex:none; padding:.6rem 1rem; border:1px solid var(--rule); border-radius:3px;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink);
}
.cupbox button:hover{border-color:var(--accent)}
.errbox{
  background:color-mix(in srgb,var(--crit) 14%,transparent); color:var(--crit);
  border:1px solid color-mix(in srgb,var(--crit) 40%,transparent);
  padding:.6rem .8rem; border-radius:3px; font-size:.82rem;
}
.okbox{
  background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  padding:.6rem .8rem; border-radius:3px; font-size:.82rem;
}
.spin{display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- variantes de bebida ---- */
.varsel{display:inline-flex; gap:.2rem; background:var(--surface-2); border-radius:999px; padding:.15rem}
.varsel button{font-size:.66rem; padding:.25rem .55rem; border-radius:999px; color:var(--text-soft); letter-spacing:.04em}
.varsel button[aria-pressed="true"]{background:var(--olivo); color:#F2EEE0}

/* ---- página de estado del pedido ---- */
.pagepad{padding:clamp(2.5rem,6vw,5rem) 0}
.panelcard{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding:1.8rem; box-shadow:var(--shadow); max-width:560px; margin-inline:auto;
}
.bigcode{
  font-family:'Playfair Display',Georgia,serif; font-size:clamp(2.4rem,9vw,3.4rem); font-weight:900;
  letter-spacing:.16em; color:var(--accent-ink); text-align:center; padding:.6rem 0 1rem;
}
.linelist{display:grid; gap:.45rem; margin:1rem 0}
.linelist .li{display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; border-bottom:1px dotted var(--rule); padding-bottom:.4rem}
.statebadge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
.st-nuevo{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn)}
.st-horneando{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn)}
.st-listo{background:color-mix(in srgb,var(--ok) 20%,transparent); color:var(--ok)}
.st-camino{background:color-mix(in srgb,var(--accent) 24%,transparent); color:var(--accent-ink)}
.st-entregado{background:var(--surface-2); color:var(--text-soft)}
.st-cancelado{background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit)}

/* ---- tarjeta del club ---- */
.qrwrap{display:grid; place-items:center; gap:.8rem; padding:1.4rem 0}
.qrwrap canvas,.qrwrap svg{width:190px; height:190px; background:#fff; padding:10px; border-radius:6px}
.histrow{display:flex; justify-content:space-between; font-size:.8rem; color:var(--text-soft); padding:.35rem 0; border-bottom:1px dotted var(--rule)}

/* ---- planes de suscripción ---- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.2rem}
.plan{
  border:1px solid var(--rule); background:var(--surface); border-radius:4px; padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.plan .pz{font-family:'Playfair Display',Georgia,serif; font-size:2.2rem; font-weight:900; color:var(--accent-ink); line-height:1}
.plan .pz small{font-family:'Jost',sans-serif; font-size:.8rem; font-weight:400; color:var(--text-soft)}
.plan ul{list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.4rem; font-size:.85rem; color:var(--text-soft)}
.plan li::before{content:'—'; color:var(--accent); margin-right:.5rem}
.plan .btn{margin-top:auto; justify-content:center}