/* Aroma · Café Cocina Bar
   Concepto: el día de Aroma (café → cocina → bar) guía el sitio. Beige del menú, verde del logo,
   café espresso para texto y noche. Fotos reales del local como protagonistas. */
:root{
  --bg:#F3E9E1; --bg-2:#E8D9CC; --surface:#FBF7F3; --ink:#3B2418; --ink-soft:#6B4E3D;
  --roast:#7A4A2E; --green:#2F6B1F; --green-hover:#255816; --on-green:#FFFFFF; --line:#D9C5B5;
  --night:#2A1A12; --night-ink:#F3E9E1; --night-soft:#CDB8A8; --night-accent:#A6D388;
  --wa:#1F8A4C; --danger:#A3341F;
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script:"Allura", "Brush Script MT", cursive;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow:0 10px 30px -12px rgba(59,36,24,.35);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1F1611; --bg-2:#2A1E17; --surface:#2E221A; --ink:#F1E6DC; --ink-soft:#C9B4A4;
  --roast:#D7A47F; --green:#82B866; --green-hover:#97C97C; --on-green:#13210C; --line:#4A372B;
  --night:#140D09; --night-ink:#F1E6DC; --night-soft:#C2AD9D; --night-accent:#A6D388;
  --wa:#3DBB6E; --danger:#F08A73; --shadow:0 10px 30px -12px rgba(0,0,0,.6); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#1F1611; --bg-2:#2A1E17; --surface:#2E221A; --ink:#F1E6DC; --ink-soft:#C9B4A4;
  --roast:#D7A47F; --green:#82B866; --green-hover:#97C97C; --on-green:#13210C; --line:#4A372B;
  --night:#140D09; --night-ink:#F1E6DC; --night-soft:#C2AD9D; --night-accent:#A6D388;
  --wa:#3DBB6E; --danger:#F08A73; --shadow:0 10px 30px -12px rgba(0,0,0,.6); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--f-body); -webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}
.wrap{max-width:1120px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; clip:auto; z-index:100; background:var(--surface); padding:.6rem 1rem; border-radius:8px}
.tnum{font-variant-numeric:tabular-nums}
.note{font-size:.9rem; color:var(--ink-soft)}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:0 1.25rem;
  border-radius:999px; border:1.5px solid transparent; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none}
.btn-green{background:var(--green); color:var(--on-green)}
.btn-green:hover{background:var(--green-hover)}
.btn-line{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-line:hover{background:var(--ink); color:var(--bg)}
.btn-light{background:var(--night-ink); color:var(--night)}
.btn-block{width:100%}
.ctas{display:flex; flex-wrap:wrap; gap:.75rem}

/* Encabezado */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.logo{display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--green); line-height:1}
.logo b{font:400 30px/1 var(--f-display); letter-spacing:-.01em}
.logo small{font:600 8.5px/1 var(--f-display); letter-spacing:.22em; margin-top:3px}
.nav{display:none; gap:1.4rem}
.nav a{text-decoration:none; font-weight:500; color:var(--ink-soft); padding:.4rem 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--green)}
.nav a[aria-current="page"]{color:var(--green); border-bottom-color:var(--green)}
.top-actions{display:flex; gap:.5rem; align-items:center}
.icon-btn{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--green); color:var(--on-green); font:700 12px/20px var(--f-body); text-align:center}
.menu-sheet{border-top:1px solid var(--line); background:var(--bg)}
.menu-sheet nav{display:grid; padding-block:.5rem 1rem}
.menu-sheet a{padding:.85rem 0; font:400 22px/1.2 var(--f-display); text-decoration:none; border-bottom:1px solid var(--line)}
.menu-sheet a[aria-current="page"]{color:var(--green)}
@media (min-width:960px){ .nav{display:flex} #menuToggle{display:none} .menu-sheet{display:none!important} }

/* Secciones */
section{padding-block:3.5rem}
.sec-head{display:grid; gap:.6rem; margin-bottom:1.75rem; max-width:60ch}
.sec-head h2{font-size:clamp(2rem,6vw,3rem)}
.sec-head p{color:var(--ink-soft)}
.alt{background:var(--bg-2)}
.page-head{padding-block:2.25rem 1.5rem}
.page-head h1{font-size:clamp(2.6rem,9vw,4.2rem); letter-spacing:-.015em}
.page-head p{color:var(--ink-soft); margin-top:.75rem; max-width:52ch; font-size:1.05rem}
.page-head + section{padding-top:1rem}

/* Foto */
.photo{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-2); max-width:100%; margin:0}
.photo img{width:100%; height:100%; object-fit:cover}

/* Hero de inicio */
.hero{padding-block:1.5rem 2.5rem}
.hero-grid{display:grid; gap:1.75rem}
.now{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--green); font-size:.95rem}
.now i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent);animation:pulse 2.4s infinite}
.now.closed{color:var(--roast)} .now.closed i{background:var(--roast);animation:none}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--green) 0%,transparent)}}
.hero h1{font-size:clamp(2.5rem, 9vw, 4.6rem); margin-top:.75rem; letter-spacing:-.015em}
.hero .lede{font-size:1.1rem; color:var(--ink-soft); margin-top:1rem; max-width:34ch}
.hero .ctas{margin-top:1.5rem}
.hero .photo{aspect-ratio:4/3.2}
.hero .photo figcaption{position:absolute; left:.75rem; bottom:.75rem; background:var(--surface); color:var(--ink); font-size:.82rem; font-weight:600; padding:.3rem .7rem; border-radius:999px}
@media (min-width:900px){
  .hero{padding-block:3.5rem 3rem}
  .hero-grid{grid-template-columns:1.05fr .95fr; align-items:center; gap:3.5rem}
  .hero .photo{aspect-ratio:4/4.6}
}

/* Línea del día */
.day{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem 1.1rem 1rem}
.day-head{display:flex; justify-content:space-between; align-items:baseline; gap:.25rem 1rem; flex-wrap:wrap}
.day-head h2{font-size:1.15rem}
.day-head span{color:var(--ink-soft); font-size:.9rem}
.tl{position:relative; margin-top:1.6rem; display:grid; gap:.45rem}
.tl-row{display:grid; grid-template-columns:5.6rem 1fr; align-items:center; gap:.6rem; font-size:.88rem}
.tl-row b{font-weight:600}
.tl-track{position:relative; height:26px; border-radius:6px; background:var(--bg-2)}
.tl-seg{position:absolute; top:0; bottom:0; border-radius:6px; background:var(--green); color:var(--on-green); font-size:.75rem; font-weight:600; display:flex; align-items:center; padding:0 .5rem; white-space:nowrap; overflow:hidden}
.tl-seg.roast{background:var(--roast); color:var(--surface)}
.tl-seg.night{background:var(--night); color:var(--night-accent)}
.tl-axis{display:grid; grid-template-columns:5.6rem 1fr; gap:.6rem; font-size:.75rem; color:var(--ink-soft)}
.tl-axis div{position:relative; height:1.1rem}
.tl-axis span{position:absolute; transform:translateX(-50%)}
.tl-now{position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink); pointer-events:none}
.tl-now::after{content:"Ahora"; position:absolute; top:-1.15rem; left:50%; transform:translateX(-50%); font-size:.7rem; font-weight:700}
.tl-overlay{position:absolute; top:0; bottom:1.1rem; left:calc(5.6rem + .6rem); right:0}

/* Momentos (inicio) */
.moments{display:grid; gap:1rem}
@media (min-width:760px){ .moments{grid-template-columns:repeat(3,1fr)} }
.moment{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:#fff; aspect-ratio:4/3.3; background:var(--night)}
@media (min-width:760px){ .moment{aspect-ratio:3/4} }
.moment img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.moment:hover img{transform:scale(1.04)}
.moment::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,13,9,.85) 0%, rgba(20,13,9,.15) 55%, transparent 75%)}
.moment div{position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:1}
.moment .s{font:400 2.4rem/1 var(--f-script)}
.moment h3{font-size:1.5rem; margin-top:.1rem}
.moment p{font-size:.92rem; opacity:.9; margin-top:.25rem}

/* Banda tarjeta (inicio) */
.band{background:var(--green); color:var(--on-green); border-radius:var(--r-lg); padding:1.6rem; display:grid; gap:1.25rem; align-items:center}
.band h2{font-size:clamp(1.8rem,5vw,2.4rem)}
.band p{opacity:.92; margin-top:.4rem}
.band .btn{background:var(--on-green); color:var(--green)}
.mini-stamps{display:flex; gap:.3rem; flex-wrap:wrap}
.mini-stamps span{width:24px; height:24px; border-radius:50%; border:2px dashed color-mix(in srgb, var(--on-green) 60%, transparent)}
.mini-stamps span.on{background:var(--on-green); border-style:solid}
@media (min-width:860px){ .band{grid-template-columns:1.3fr auto auto; padding:2rem 2.25rem} }

/* Visita (inicio) y sucursal */
.visit{display:grid; gap:1.5rem; align-items:center}
.visit .photo{aspect-ratio:4/3.4}
@media (min-width:860px){ .visit{grid-template-columns:1fr 1fr; gap:3rem} .visit .photo{aspect-ratio:4/4.4} }
.dl{display:grid; gap:.9rem; margin:0}
.dl div{display:grid; gap:.1rem}
.dl dt{font-size:.82rem; color:var(--ink-soft)}
.dl dd{margin:0; font-weight:600}
.tag{display:inline-block; font-size:.82rem; color:var(--roast); border:1px solid var(--roast); border-radius:999px; padding:.15rem .6rem; width:fit-content}
.map{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-soft); aspect-ratio:16/10; max-width:100%; margin-top:2rem}
.map > svg{position:absolute; inset:0; width:100%; height:100%}
.map .pin{position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); display:grid; justify-items:center; gap:.3rem}
.map .pin span{background:var(--green); color:var(--on-green); font-weight:700; font-size:.85rem; padding:.35rem .7rem; border-radius:999px; box-shadow:var(--shadow)}
.map .pin svg{width:34px; height:34px; color:var(--green)}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:600px){ .map{aspect-ratio:1/1} }

/* Menú */
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media (min-width:700px){ .tabs{grid-template-columns:repeat(4,1fr)} }
.tab{min-width:0; text-align:left; min-height:60px; padding:.5rem 1.1rem; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.1}
.tab .s{font:400 1.7rem/1 var(--f-script)}
.tab small{font-size:.72rem; color:var(--ink-soft)}
.tab[aria-selected="true"]{background:var(--green); border-color:var(--green); color:var(--on-green)}
.tab[aria-selected="true"] small{color:inherit; opacity:.85}
.menu-tools{display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; align-items:center}
.search{flex:1 1 240px; position:relative}
.search input{width:100%; min-height:48px; padding:0 1rem 0 2.6rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface)}
.search svg{position:absolute; left:.95rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-soft)}
.menu-banner{margin-top:1.25rem; aspect-ratio:16/6; border-radius:var(--r-md)}
@media (max-width:600px){ .menu-banner{aspect-ratio:16/8} }
.promo{display:flex; gap:.75rem; align-items:center; margin-top:1rem; padding:.85rem 1rem; border-radius:var(--r-md); background:var(--night); color:var(--night-ink)}
.promo strong{font:400 1.6rem/1 var(--f-display); color:var(--night-accent)}
.cats{display:grid; gap:2.25rem; margin-top:1.75rem}
.cat h2{font-size:1.45rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--green); color:var(--green)}
.cat h2 small{font:500 .85rem var(--f-body); color:var(--ink-soft)}
.items{list-style:none; margin:0; padding:0}
.item{display:grid; grid-template-columns:1fr auto auto; gap:.25rem .9rem; align-items:center; padding:.8rem 0; border-bottom:1px dashed var(--line)}
.item .n{font-weight:600; min-width:0}
.item .d{grid-column:1; font-size:.86rem; color:var(--ink-soft)}
.item .p{grid-row:1; grid-column:2; font-weight:700; color:var(--roast)}
.item .add{grid-row:1 / span 2; grid-column:3; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--green); background:transparent; color:var(--green); cursor:pointer; display:grid; place-items:center; transition:background .2s,color .2s}
.item .add:hover,.item .add.added{background:var(--green); color:var(--on-green)}
.item .add svg{width:18px;height:18px}
.empty{padding:2rem 0; color:var(--ink-soft)}
@media (min-width:900px){ .cats{grid-template-columns:1fr 1fr; gap:2.5rem 3.5rem} }

/* Fidelidad */
.loyal-grid{display:grid; gap:2rem}
@media (min-width:900px){ .loyal-grid{grid-template-columns:1fr 1fr; align-items:start} }
.card{background:var(--green); color:var(--on-green); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--shadow); position:relative; overflow:hidden; max-width:460px}
.card .card-top{display:flex; justify-content:space-between; align-items:flex-start}
.card .logo{color:inherit; align-items:flex-start}
.card .who{text-align:right; font-size:.85rem; opacity:.9}
.card .who b{display:block; font:400 1.25rem var(--f-display); opacity:1}
.stamps{display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-top:1.4rem}
.stamp{aspect-ratio:1; border-radius:50%; border:2px dashed color-mix(in srgb, currentColor 55%, transparent); display:grid; place-items:center}
.stamp svg{width:58%; height:58%; opacity:0}
.stamp.on{background:var(--on-green); border-style:solid; border-color:var(--on-green); color:var(--green)}
.stamp.on svg{opacity:1}
.card .msg{margin-top:1.1rem; font-weight:600}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.25rem}
.panel h2,.panel h3{font-size:1.4rem; margin-bottom:.35rem}
.steps{margin:1rem 0 0; padding-left:1.2rem; display:grid; gap:.4rem; color:var(--ink-soft)}
.demo{margin-top:1rem; padding:.75rem 1rem; border-radius:var(--r-sm); border:1.5px dashed var(--roast); color:var(--roast); font-size:.88rem}
.linkish{background:none;border:0;padding:0;color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer;min-height:44px}
.faq{display:grid; gap:.5rem; margin-top:2.5rem; max-width:720px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:.25rem 1rem}
.faq summary{cursor:pointer; font-weight:600; min-height:48px; display:flex; align-items:center}
.faq details p{padding-bottom:.9rem; color:var(--ink-soft)}

/* Formularios */
form{display:grid; gap:1rem}
.field{display:grid; gap:.35rem; min-width:0}
.field label{font-weight:600; font-size:.92rem}
.field .hint{font-size:.82rem; color:var(--ink-soft); font-weight:400}
.field input,.field select,.field textarea{width:100%; min-height:48px; padding:.7rem .9rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface)}
.field textarea{min-height:96px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}
.field[data-error] input,.field[data-error] select,.field[data-error] textarea{border-color:var(--danger)}
.err{color:var(--danger); font-size:.85rem; font-weight:500}
.row2{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
.row3{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (min-width:600px){ .row3{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:420px){ .row2.stack{grid-template-columns:1fr} }
fieldset.field{border:0; padding:0; margin:0}
fieldset.field legend{font-weight:600; font-size:.92rem; margin-bottom:.35rem; padding:0}
.seg{display:flex; gap:.5rem; flex-wrap:wrap}
.seg label{flex:1 1 0; min-width:0; position:relative}
.seg input{position:absolute; opacity:0}
.seg span{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 .75rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-weight:500; text-align:center}
.seg input:checked + span{border-color:var(--green); background:color-mix(in srgb,var(--green) 12%,var(--surface)); color:var(--green); font-weight:700}
.seg input:focus-visible + span{outline:3px solid var(--green); outline-offset:2px}
.status{font-weight:600; min-height:1.5em}
.status.ok{color:var(--green)} .status.bad{color:var(--danger)}

/* Reservas */
.book-grid{display:grid; gap:2rem}
@media (min-width:900px){ .book-grid{grid-template-columns:.8fr 1.2fr; align-items:start} }
.facts{display:grid; gap:1rem}
.fact{display:grid; grid-template-columns:44px 1fr; gap:.85rem; align-items:start}
.fact .ic{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.fact .ic svg{width:20px;height:20px}
.fact b{display:block}
.fact span{color:var(--ink-soft); font-size:.92rem}
.side-photo{aspect-ratio:4/3; margin-top:1.5rem}

/* Galería */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
@media (min-width:900px){ .gallery{grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:.8rem} .g-big{grid-column:span 2; grid-row:span 2} .g-wide{grid-column:span 2} }
.tile{position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--bg-2); aspect-ratio:4/5; max-width:100%; margin:0; padding:0; border:0; cursor:zoom-in; display:block; width:100%}
@media (min-width:900px){ .tile{aspect-ratio:auto; height:100%} }
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.tile:hover img{transform:scale(1.03)}
.tile[data-src="latte-postre"] img{object-position:78% center}
.tile span{position:absolute; left:.6rem; bottom:.6rem; background:var(--surface); color:var(--ink); font-size:.8rem; font-weight:600; padding:.25rem .6rem; border-radius:999px}
.lightbox{border:0; padding:0; background:transparent; max-width:min(92vw,900px); max-height:92vh; width:auto}
.lightbox::backdrop{background:rgba(20,13,9,.88)}
.lightbox img{max-height:80vh; width:auto; margin:0 auto; border-radius:var(--r-md)}
.lightbox p{color:#F3E9E1; text-align:center; margin-top:.75rem; font-weight:600}
.lb-bar{display:flex; justify-content:center; gap:.75rem; margin-top:.75rem}
.lb-bar button{background:#F3E9E1; color:#2A1A12; border:0}

/* Contacto */
.contact-grid{display:grid; gap:2rem}
@media (min-width:900px){ .contact-grid{grid-template-columns:.9fr 1.1fr} }
.copyrow{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.copyrow code{font:700 1.4rem var(--f-body); letter-spacing:.02em; user-select:all}
.biz{margin-top:1.5rem; padding:1.25rem; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line)}
.biz h2{font-size:1.4rem; margin-bottom:.35rem}
.biz p{color:var(--ink-soft); margin-bottom:1rem}

/* Pie */
footer{background:var(--night); color:var(--night-soft); padding-block:2.5rem calc(6rem + env(safe-area-inset-bottom,0px)); font-size:.9rem}
footer .wrap{display:grid; gap:1.25rem}
footer .logo{color:var(--night-accent); align-items:flex-start}
footer a{color:var(--night-ink)}
.foot-links{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem}

/* Flotantes */
.fab{position:fixed; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; width:58px; height:58px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow); text-decoration:none}
.fab svg{width:30px; height:30px}
.cartbar{position:fixed; left:calc(16px + env(safe-area-inset-left,0px)); right:calc(88px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; max-width:420px; min-height:58px; border-radius:999px; border:0; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:0 1.25rem; font-weight:700; box-shadow:var(--shadow); cursor:pointer}

/* Hojas (pedido y personal) */
.sheet-bg{position:fixed; inset:0; z-index:70; background:rgba(20,13,9,.55)}
.sheet{position:fixed; z-index:71; left:0; right:0; bottom:0; max-height:92vh; overflow:auto; background:var(--bg); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.25rem max(16px,env(safe-area-inset-right,0px)) calc(1.5rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); animation:up .28s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.4}}
@media (min-width:700px){ .sheet{left:auto; top:0; width:440px; max-height:none; border-radius:0; padding-top:calc(1.25rem + env(safe-area-inset-top,0px))} }
.sheet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.sheet-head h2{font-size:1.8rem}
.lines{list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.25rem}
.line{display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; padding:.65rem 0; border-bottom:1px dashed var(--line); align-items:center}
.line .n{font-weight:600}
.qty{display:flex; align-items:center; gap:.25rem}
.qty button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.1rem}
.qty output{min-width:1.8rem; text-align:center; font-weight:700}
.total{display:flex; justify-content:space-between; font:400 1.5rem var(--f-display); margin:.5rem 0 1.25rem}
.toast{position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:80; background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:999px; font-weight:600; font-size:.9rem; max-width:calc(100% - 32px)}