/* ═══════════════════════════════════════════════════════════
   BREAKING FAST FOOD — Menú digital · estilos
   Identidad: negro base · hazmat amarillo · meth green · crema
   Tipos: Zilla Slab (display) · Inter (texto) · Space Mono (acentos)
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#080808; --surface:#121212; --surface-2:#191919;
  --line:#262626; --line-2:#3a3a3a;
  --hazmat:#e3b505; --hazmat-br:#ffd60a;
  --meth:#22c55e; --meth-dk:#0a7148; --meth-glow:rgba(34,197,94,.55);
  --blue:#06b6d4; --cream:#f5e9c6; --text:#f5f5f0; --dim:#9a9a93; --danger:#ff5a5a;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--hazmat-br);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* ─── contenedor ─── */
.phone{position:relative;width:100%;max-width:480px;margin:0 auto;min-height:100vh;overflow:hidden;
  padding-bottom:calc(120px + var(--sab));
  background:radial-gradient(1200px 500px at 50% -100px,rgba(227,181,5,.08),transparent 60%),
             radial-gradient(900px 500px at 110% 300px,rgba(34,197,94,.06),transparent 60%),var(--bg)}

/* ─── fichas periódicas de fondo ─── */
.molecules{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.molecules .tile{position:absolute;width:44px;height:52px;border:1px solid var(--cream);border-radius:3px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(245,233,198,.05),rgba(0,0,0,.15));box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);animation:tile-drift 32s linear infinite}
.molecules .tile .num{position:absolute;top:2px;left:4px;font:700 7px 'Space Mono',monospace;color:var(--cream)}
.molecules .tile .sym{font:900 22px 'Zilla Slab',serif;line-height:1;color:var(--cream);letter-spacing:-.02em}
.molecules .tile .wt{position:absolute;bottom:2px;font:700 5.5px 'Space Mono',monospace;color:var(--cream);opacity:.7}
.molecules .tile:nth-child(1){--rot:-6deg;left:6%;top:7%;animation-duration:32s;opacity:.12}
.molecules .tile:nth-child(2){--rot:7deg;left:84%;top:15%;animation-duration:36s;opacity:.1}
.molecules .tile:nth-child(3){--rot:-3deg;left:10%;top:34%;animation-duration:40s;opacity:.11}
.molecules .tile:nth-child(4){--rot:9deg;left:82%;top:44%;animation-duration:34s;opacity:.12}
.molecules .tile:nth-child(5){--rot:-5deg;left:5%;top:62%;animation-duration:38s;opacity:.1}
.molecules .tile:nth-child(6){--rot:6deg;left:83%;top:72%;animation-duration:32s;opacity:.11}
.molecules .tile:nth-child(7){--rot:-8deg;left:12%;top:88%;animation-duration:36s;opacity:.12}
.molecules .tile:nth-child(8){--rot:5deg;left:78%;top:96%;animation-duration:40s;opacity:.1}
@keyframes tile-drift{0%{transform:translateY(0) rotate(var(--rot,0deg))}100%{transform:translateY(-200px) rotate(var(--rot,0deg))}}

/* ─── ticker + hazmat ─── */
.marquee{position:relative;z-index:2;background:#000;border-bottom:1px solid var(--line);overflow:hidden;padding:8px 0}
.marquee-track{display:inline-flex;gap:32px;white-space:nowrap;animation:marquee 22s linear infinite;font:700 10px 'Space Mono',monospace;letter-spacing:.2em;color:var(--hazmat-br);text-transform:uppercase}
.marquee-track .sep{color:var(--meth)} .marquee-track .rec{color:#ff5a5a} .marquee-track .blu{color:#22d3ee;text-shadow:0 0 10px rgba(6,182,212,.5)}
@keyframes marquee{to{transform:translateX(-50%)}}
.hazmat-stripe{position:relative;z-index:2;height:10px;background:repeating-linear-gradient(135deg,var(--hazmat) 0 10px,#000 10px 20px);animation:hazmat-strobe 3s ease-in-out infinite}
@keyframes hazmat-strobe{0%,100%{opacity:1}50%{opacity:.65}}

/* ─── hero ─── */
.hero{position:relative;z-index:2;padding:22px 20px 18px;text-align:center}
.caution-tag{display:inline-flex;align-items:center;gap:6px;font:700 9.5px 'Space Mono',monospace;letter-spacing:.2em;color:var(--hazmat-br);background:rgba(227,181,5,.08);border:1px solid rgba(227,181,5,.35);padding:5px 10px;border-radius:999px;margin-bottom:16px;text-transform:uppercase}
.caution-tag::before{content:'';width:6px;height:6px;background:var(--hazmat-br);border-radius:50%;box-shadow:0 0 10px var(--hazmat-br);animation:meth-pulse 1.4s ease-in-out infinite}
@keyframes meth-pulse{0%,100%{opacity:.5;box-shadow:0 0 4px currentColor}50%{opacity:1;box-shadow:0 0 14px currentColor}}
.logo-wrap{display:flex;justify-content:center;margin:2px 0 8px;animation:logo-float 5s ease-in-out infinite}
.logo-wrap svg{width:280px;height:auto;display:block}
@keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.element-rect{transform-origin:center}
.element-rect.br{animation:box-glow 3.2s ease-in-out infinite}
.element-rect.fa{animation:box-glow 3.2s ease-in-out infinite 1.6s}
@keyframes box-glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 10px var(--meth-glow))}}

.formula-line{position:relative;margin:14px auto 12px;min-height:64px;max-width:320px}
.formula-line .phrase{position:absolute;inset:0;text-align:center;opacity:0;font:italic 500 13px/1.35 'Zilla Slab',serif;color:var(--cream);animation:rotate-phrase 16s ease-in-out infinite both;will-change:opacity,transform}
.formula-line .p2{animation-delay:4s}.formula-line .p3{animation-delay:8s}.formula-line .p4{animation-delay:12s}
.formula-line .quote{display:block;color:var(--meth);opacity:.9}
.formula-line .punchline{display:block;color:var(--hazmat-br);font-weight:700;font-size:18px;margin-top:3px;text-shadow:0 0 20px rgba(227,181,5,.25);animation:punchline-glow 3s ease-in-out infinite}
@keyframes punchline-glow{0%,100%{text-shadow:0 0 10px rgba(227,181,5,.2)}50%{text-shadow:0 0 34px rgba(227,181,5,.55)}}
@keyframes rotate-phrase{0%{opacity:0;transform:translateY(10px)}4%,22%{opacity:1;transform:translateY(0)}26%{opacity:0;transform:translateY(-10px)}27%,100%{opacity:0;transform:translateY(10px)}}

.status-row{display:inline-flex;align-items:center;gap:8px;font:400 10px 'Space Mono',monospace;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;background:var(--surface);border:1px solid var(--line);padding:7px 12px;border-radius:999px;min-height:34px}
.status-row .live{width:7px;height:7px;background:var(--meth);border-radius:50%;box-shadow:0 0 12px var(--meth);animation:meth-pulse 1.4s ease-in-out infinite}
.status-row.closed .live{background:var(--danger);box-shadow:0 0 12px var(--danger)}
.status-row strong{color:var(--cream);font-weight:700}

/* ─── buscador ─── */
.search-wrap{position:relative;z-index:3;padding:4px 20px 10px}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:0 10px 0 14px;min-height:48px;transition:border-color .25s,box-shadow .25s}
.search:focus-within{border-color:var(--hazmat);box-shadow:0 0 0 3px rgba(227,181,5,.15)}
.search svg{width:18px;height:18px;color:var(--dim);flex-shrink:0}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font-size:16px;padding:12px 0;outline:none}
.search input::placeholder{color:#6f6f68}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-clear{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim);background:var(--surface-2)}
.search-clear svg{width:14px;height:14px;color:var(--cream)}
.search-results{position:relative;z-index:2;padding:6px 20px 20px}
.search-results .cat-title{margin-top:6px}
.search-results .result-cat{font:700 9.5px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--meth);margin:18px 0 2px}
.no-results{text-align:center;padding:36px 16px;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface)}
.no-results .big{font:900 24px 'Zilla Slab',serif;color:var(--cream);margin:0 0 6px}
.no-results p{color:var(--dim);font-size:13px;margin:0 0 14px}

/* ─── section header / destacadas ─── */
.section-header{position:relative;z-index:2;padding:14px 20px 6px;display:flex;align-items:center;gap:10px}
.section-header .pill{font:700 9.5px 'Space Mono',monospace;letter-spacing:.18em;color:#0a0a0a;background:var(--hazmat);padding:4px 8px;border-radius:3px;text-transform:uppercase;animation:hazmat-strobe 2.2s ease-in-out infinite}
.section-header h2{margin:0;font:900 20px 'Zilla Slab',serif;color:var(--cream);letter-spacing:-.01em}
.section-header h2 .elem{display:inline-block;font:700 11px 'Space Mono',monospace;background:var(--meth-dk);color:var(--cream);padding:3px 7px 3px 6px;border-radius:3px;vertical-align:middle;margin-right:4px;position:relative;animation:box-glow 3s ease-in-out infinite}
.section-header h2 .elem::after{content:'35';position:absolute;top:1px;right:2px;font-size:7px;opacity:.75}

.carousel{position:relative;z-index:2;padding:6px 0 10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel-inner{display:flex;gap:14px;padding:8px 20px 20px;width:max-content}
.sample{width:272px;position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:18px;overflow:hidden;scroll-snap-align:start;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03);animation:breathing 6s ease-in-out infinite}
.sample:nth-child(2){animation-delay:.8s}.sample:nth-child(3){animation-delay:1.6s}.sample:nth-child(4){animation-delay:2.4s}.sample:nth-child(5){animation-delay:3.2s}.sample:nth-child(6){animation-delay:4s}.sample:nth-child(7){animation-delay:4.8s}
@keyframes breathing{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.sample::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--meth),transparent);animation:scan 4s linear infinite;z-index:3;opacity:.7}
@keyframes scan{0%{transform:translateY(0);opacity:0}5%{opacity:.8}95%{opacity:.8}100%{transform:translateY(290px);opacity:0}}
.sample-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px dashed var(--line);font:700 9px 'Space Mono',monospace;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.sample-head .code{color:var(--hazmat-br)} .sample-head .class{color:var(--meth)}
.sample-visual{position:relative;height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 60%,rgba(34,197,94,.14),transparent 60%),linear-gradient(180deg,#0e0e0e,#050505)}
.smoke{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.smoke .puff{position:absolute;bottom:-20px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(245,233,198,.3),rgba(245,233,198,0) 70%);filter:blur(10px);animation:smoke-rise 5s ease-in-out infinite}
.smoke .puff.a{left:20%}.smoke .puff.b{left:50%;animation-delay:1.6s;width:90px;height:90px}.smoke .puff.c{left:72%;animation-delay:3.2s;width:54px;height:54px}
@keyframes smoke-rise{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:.5}100%{opacity:0;transform:translateY(-180px) scale(1.9)}}
.periodic-tile{position:relative;width:110px;height:110px;border-radius:10px;background:linear-gradient(145deg,var(--meth-dk),#063e26);border:1.5px solid var(--cream);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center;align-items:center;animation:tile-float 4s ease-in-out infinite;overflow:hidden}
.periodic-tile .atomic{position:absolute;top:6px;left:8px;font:700 9px 'Space Mono',monospace;color:var(--cream);opacity:.8}
.periodic-tile .symbol{font:900 48px 'Zilla Slab',serif;line-height:1;color:var(--cream);letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.periodic-tile .weight{position:absolute;bottom:8px;font:400 8px 'Space Mono',monospace;color:var(--cream);opacity:.65;letter-spacing:.08em}
@keyframes tile-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1deg)}}
.sample.v-pm .periodic-tile{background:linear-gradient(145deg,#0e5d6e,#063742);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(6,182,212,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.sample.v-sa .periodic-tile{background:linear-gradient(145deg,#6e2a0e,#3a1407);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(227,105,5,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.sample.v-pl .periodic-tile{background:linear-gradient(145deg,#806008,#3d2c04);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(227,181,5,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.sample.v-he .periodic-tile{background:linear-gradient(145deg,#2a2a2a,#0a0a0a);border-color:var(--hazmat-br);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(227,181,5,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.code-tag{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;font:700 9px 'Space Mono',monospace;letter-spacing:.14em;color:#0a0a0a;background:var(--hazmat-br);padding:4px 7px 4px 5px;border-radius:3px;text-transform:uppercase;z-index:3;animation:tag-pulse 1.8s ease-out infinite}
.code-tag::before{content:'';width:7px;height:7px;background:#0a0a0a;clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes tag-pulse{0%{box-shadow:0 0 0 0 rgba(255,214,10,.6)}70%{box-shadow:0 0 0 12px rgba(255,214,10,0)}100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}}
.code-tag.blue{background:linear-gradient(180deg,#67e8f9,#06b6d4);color:#042f3a;animation:tag-pulse-blue 1.8s ease-out infinite}
.code-tag.blue::before{background:#042f3a}
/* Tuco Smash: rojo cartel, la misma animación de las demás muestras */
.sample.v-tu .periodic-tile{background:linear-gradient(145deg,#7a1020,#2c0509);border-color:#ff6b6b;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 30px rgba(239,68,68,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.sample.v-tu .sample-visual{background:radial-gradient(circle at 50% 60%,rgba(239,68,68,.16),transparent 60%),linear-gradient(180deg,#0e0e0e,#050505)}
.sample.v-tu::before{background:linear-gradient(90deg,transparent,#ef4444,transparent)}
.code-tag.red{background:linear-gradient(180deg,#ff8a8a,#ef4444);color:#2c0509;animation:tag-pulse-red 1.8s ease-out infinite}
.code-tag.red::before{background:#2c0509}
@keyframes tag-pulse-red{0%{box-shadow:0 0 0 0 rgba(239,68,68,.75)}70%{box-shadow:0 0 0 14px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes tag-pulse-blue{0%{box-shadow:0 0 0 0 rgba(6,182,212,.75)}70%{box-shadow:0 0 0 14px rgba(6,182,212,0)}100%{box-shadow:0 0 0 0 rgba(6,182,212,0)}}
.sample-body{padding:14px 16px 16px}
.sample-body h3{margin:0 0 6px;font:900 21px/1.1 'Zilla Slab',serif;color:var(--cream);letter-spacing:-.01em}
.sample-formula{margin:0 0 10px;font:400 10.5px/1.9 'Space Mono',monospace;letter-spacing:.06em;color:var(--dim)}
.sample-formula .el{display:inline-block;color:var(--meth);background:rgba(34,197,94,.08);padding:2px 6px;border-radius:3px;margin:0 3px 3px 0;animation:el-flash 4s ease-in-out infinite}
.sample-formula .el:nth-child(2n){animation-delay:.8s}.sample-formula .el:nth-child(3n){animation-delay:1.6s}
.sample-formula .el:nth-child(5n){animation-delay:2.4s;color:var(--hazmat-br);background:rgba(227,181,5,.08)}
@keyframes el-flash{0%,85%,100%{background:rgba(34,197,94,.08)}90%{background:rgba(34,197,94,.3)}}
.sample-ingredients{margin:0 0 14px;font:600 12.5px/1.45 'Inter',sans-serif;color:var(--cream);opacity:.95}
.purity{margin:10px 0 14px;font:400 9px 'Space Mono',monospace;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.purity-label{display:flex;justify-content:space-between;margin-bottom:4px}.purity-label .pct{color:var(--hazmat-br);font-weight:700}
.purity-bar{height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden;position:relative}
.purity-fill{height:100%;background:linear-gradient(90deg,var(--meth-dk),var(--meth),var(--hazmat-br));border-radius:3px;animation:purity-grow 2.4s cubic-bezier(.2,.8,.2,1) both;position:relative}
@keyframes purity-grow{0%{width:0}}
.purity-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:purity-shine 3s ease-in-out infinite}
@keyframes purity-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sample-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font:900 24px 'Zilla Slab',serif;letter-spacing:-.01em;background:linear-gradient(90deg,var(--hazmat),var(--hazmat-br) 50%,var(--hazmat));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite}
.price::before{content:'RD$';opacity:.7;margin-right:4px;font-size:.5em;vertical-align:middle}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.btn-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,var(--meth),var(--meth-dk));color:#0a0a0a;font:700 11px 'Space Mono',monospace;letter-spacing:.12em;padding:10px 16px;border-radius:999px;text-transform:uppercase;min-height:44px;box-shadow:0 4px 14px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s var(--ease),background .2s;border:1px solid rgba(255,255,255,.1)}
.btn-add:active{transform:scale(.95)}
.btn-add.in{background:linear-gradient(180deg,var(--hazmat-br),var(--hazmat));box-shadow:0 4px 14px rgba(227,181,5,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.dots{position:relative;z-index:2;display:flex;justify-content:center;gap:6px;padding:2px 0 6px}
.dots span{width:6px;height:6px;background:var(--line-2);border-radius:50%;animation:dot-pulse 2.5s ease-in-out infinite}
.dots span:nth-child(1){background:var(--hazmat-br)}.dots span:nth-child(2){animation-delay:.4s}.dots span:nth-child(3){animation-delay:.8s}.dots span:nth-child(4){animation-delay:1.2s}.dots span:nth-child(5){animation-delay:1.6s}
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.3);opacity:1}}

/* ─── categorías 3x3 ─── */
.menu-section{position:relative;z-index:2;margin-top:12px}
.tab-bar{position:sticky;top:0;z-index:20;background:rgba(8,8,8,.96);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 16px 12px}
.tab-bar-section-label{font:400 9px 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:center;margin:0 0 10px;display:flex;align-items:center;justify-content:center;gap:8px}
.tab-bar-section-label::before,.tab-bar-section-label::after{content:'';width:24px;height:1px;background:linear-gradient(to right,transparent,var(--line-2))}
.tab-bar-section-label::after{background:linear-gradient(to left,transparent,var(--line-2))}
.tab-bar-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 6px 9px;border-radius:11px;background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);min-height:64px;overflow:visible;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .25s,background .25s,box-shadow .25s,transform .15s}
.tab .t-icon{font-size:20px;line-height:1;filter:grayscale(.3);transition:filter .2s,transform .2s}
.tab .t-name{font:700 8.5px 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.1}
.tab .t-num{position:absolute;top:4px;left:6px;font:700 7px 'Space Mono',monospace;color:var(--dim);opacity:.55}
.tab:active{transform:scale(.95)}
.tab.active{background:linear-gradient(145deg,var(--hazmat-br),var(--hazmat));border-color:var(--hazmat-br);box-shadow:0 0 26px rgba(227,181,5,.45),inset 0 1px 0 rgba(255,255,255,.22);animation:tab-activate .55s cubic-bezier(.2,1.4,.4,1),tab-active-pulse 2.4s ease-in-out .55s infinite}
.tab.active .t-name,.tab.active .t-num{color:#0a0a0a} .tab.active .t-num{opacity:.8} .tab.active .t-icon{filter:none;transform:scale(1.1)}
.tab.active::before,.tab.active::after{content:'';position:absolute;bottom:100%;width:30px;height:30px;background:radial-gradient(circle,rgba(245,233,198,.75),rgba(227,181,5,.3) 40%,transparent 72%);border-radius:50%;filter:blur(7px);pointer-events:none;opacity:0;animation:tab-smoke 1.1s ease-out}
.tab.active::before{left:22%}.tab.active::after{right:22%;width:22px;height:22px;animation-delay:.14s}
@keyframes tab-smoke{0%{opacity:0;transform:translateY(6px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-34px) scale(2.5)}}
@keyframes tab-activate{0%{transform:scale(.9)}55%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes tab-active-pulse{0%,100%{box-shadow:0 0 22px rgba(227,181,5,.35),inset 0 1px 0 rgba(255,255,255,.22)}50%{box-shadow:0 0 34px rgba(227,181,5,.6),inset 0 1px 0 rgba(255,255,255,.22)}}

.tab-panels{padding:16px 20px 20px;animation:slide-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slide-in{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
.cat-title{margin:0 0 10px;font:900 24px 'Zilla Slab',serif;color:var(--cream);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.cat-title .cat-code{font:700 9px 'Space Mono',monospace;color:var(--meth);letter-spacing:.2em;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);padding:3px 7px;border-radius:3px;text-transform:uppercase}
.note-pill{display:inline-flex;align-items:center;gap:6px;font:700 9px 'Space Mono',monospace;letter-spacing:.14em;color:var(--meth);background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);padding:5px 9px;border-radius:999px;text-transform:uppercase;margin-bottom:10px}
.note-pill::before{content:'';width:6px;height:6px;background:var(--meth);border-radius:50%;box-shadow:0 0 6px var(--meth);animation:meth-pulse 1.4s ease-in-out infinite}
.sub-group{display:flex;align-items:center;gap:10px;margin:22px 0 2px;font:700 9.5px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase}
.sub-group:first-of-type{margin-top:10px}
.sub-group .sg-icon{font-size:12px;color:var(--meth);display:inline-block;animation:flask-wiggle 2.4s ease-in-out infinite}
.sub-group .sg-name{color:var(--meth)} .sub-group .sg-line{flex:1;height:1px;background:linear-gradient(to right,rgba(34,197,94,.4),transparent)}
.sub-group.hazmat .sg-icon,.sub-group.hazmat .sg-name{color:var(--hazmat-br)} .sub-group.hazmat .sg-line{background:linear-gradient(to right,rgba(227,181,5,.5),transparent)}
@keyframes flask-wiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}

/* ─── item (fila de producto) ─── */
.item{position:relative;border-bottom:1px dashed var(--line);transition:background .25s,padding .25s,margin .25s}
.item:last-child{border-bottom:0}
.item-row{display:flex;align-items:center;gap:10px;padding:12px 0}
.thumb-wrap{position:relative;flex-shrink:0;width:64px;height:64px;margin-right:14px}
.thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;display:block;background:var(--surface-2);border:1px solid var(--line)}
.thumb.ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 55%,rgba(227,181,5,.1),transparent 70%),linear-gradient(145deg,var(--surface),var(--surface-2));border:1px dashed var(--line-2);color:var(--dim)}
.thumb.ph svg{width:22px;height:22px;opacity:.5}
.expand-btn{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--cream);box-shadow:0 2px 8px rgba(0,0,0,.5);transition:background .2s,border-color .2s,transform .15s}
.expand-btn svg{width:13px;height:13px}
.expand-btn:hover{background:rgba(227,181,5,.18);border-color:var(--hazmat)}
.expand-btn:active{transform:translateY(-50%) scale(.9)}
.expand-btn::before{content:'';position:absolute;inset:-8px} /* área táctil ≥44px */
.item .tap{flex:1;display:flex;align-items:center;gap:8px;min-width:0;text-align:left}
.item .info{flex:1;min-width:0}
.item .name{font:700 15.5px 'Zilla Slab',serif;color:var(--text);margin:0 0 2px;letter-spacing:-.005em;transition:color .2s}
.item .desc{font-size:11.5px;line-height:1.4;color:var(--dim);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .chevron{font-size:11px;color:var(--dim);flex-shrink:0;transition:transform .35s var(--ease),color .25s}
.item .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.item .p-amount{font:900 16px 'Zilla Slab',serif;color:var(--hazmat-br);white-space:nowrap}
.item .p-amount small{font:400 9px 'Space Mono',monospace;opacity:.7;margin-right:2px}
.mini-add{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--surface-2);color:var(--meth);width:44px;height:36px;border-radius:999px;font-size:20px;font-weight:300;line-height:1;transition:all .2s;flex-shrink:0}
.mini-add:active{transform:scale(.9)}
.mini-add .q{display:none;font:700 12px 'Space Mono',monospace}
.mini-add.in{background:var(--meth);border-color:var(--meth);color:#0a0a0a;box-shadow:0 0 16px rgba(34,197,94,.5);animation:add-smoke .9s ease-out}
.mini-add.in .plus{display:none}.mini-add.in .q{display:inline}
@keyframes add-smoke{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6),0 0 16px rgba(34,197,94,.5)}70%{box-shadow:0 0 0 14px rgba(34,197,94,0),0 0 16px rgba(34,197,94,.5)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0),0 0 16px rgba(34,197,94,.5)}}
.item.in{background:linear-gradient(90deg,rgba(34,197,94,.08),transparent 70%);padding-left:12px;margin-left:-12px;border-radius:10px;border-left:2px solid var(--meth)}
.item.in .name{color:var(--meth)}
.item.featured .name::after{content:'⚗';color:var(--hazmat-br);margin-left:6px;font-size:14px;animation:flask-wiggle 2s ease-in-out infinite;display:inline-block}
.item.open .chevron{transform:rotate(180deg);color:var(--hazmat-br)}
.item.open .name{color:var(--hazmat-br)}
.item-expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.item-expand>div{overflow:hidden;min-height:0}
.item.open .item-expand{grid-template-rows:1fr}
.product-photo{position:relative;width:100%;height:190px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 55%,rgba(227,181,5,.08),transparent 70%),linear-gradient(145deg,var(--surface),var(--surface-2));border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;margin:2px 0 12px}
.product-photo img{width:100%;height:100%;object-fit:cover;display:block}
.product-photo.has{border-style:solid;border-color:var(--line)}
.product-photo .scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--meth),transparent);opacity:.5;animation:ph-scan 3.2s linear infinite}
@keyframes ph-scan{0%{transform:translateY(0);opacity:0}8%{opacity:.6}92%{opacity:.6}100%{transform:translateY(188px);opacity:0}}
.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim)}
.photo-placeholder svg{width:42px;height:42px;opacity:.45;color:var(--cream);animation:ph-pulse 2.6s ease-in-out infinite}
@keyframes ph-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.65;transform:scale(1.06)}}
.photo-placeholder .ph-text{font:400 9.5px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.72}
.full-desc{font-size:12.5px;line-height:1.55;color:var(--cream);opacity:.9;margin:0 0 16px;padding:0 2px}

/* bebidas (trio) · cervezas (grid) */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.drink{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 8px 12px;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px}
.drink .d-icon{font-size:20px;display:block;animation:float-icon 3s ease-in-out infinite}
.drink:nth-child(2) .d-icon{animation-delay:1s}.drink:nth-child(3) .d-icon{animation-delay:2s}
@keyframes float-icon{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.drink .d-name{font:700 9.5px 'Space Mono',monospace;letter-spacing:.08em;color:var(--cream);text-transform:uppercase}
.drink .d-price{font:900 17px 'Zilla Slab',serif;color:var(--hazmat-br)}
.drink.in{background:rgba(34,197,94,.1);border-color:var(--meth);box-shadow:0 0 20px rgba(34,197,94,.25)}
.drink .qty{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--meth);color:#0a0a0a;font:700 11px 'Space Mono',monospace;display:none;align-items:center;justify-content:center}
.drink.in .qty{display:flex}
.beer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.beer{position:relative;display:flex;justify-content:space-between;align-items:center;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;gap:8px;transition:all .2s;min-height:44px;text-align:left}
.beer .b-name{font:700 10px 'Space Mono',monospace;letter-spacing:.08em;color:var(--cream);text-transform:uppercase;line-height:1.2}
.beer .b-price{font:700 14px 'Zilla Slab',serif;color:var(--hazmat-br);white-space:nowrap}
.beer.in{background:rgba(227,181,5,.08);border-color:var(--hazmat-br);box-shadow:0 0 16px rgba(227,181,5,.25)}
.beer.in .b-name{color:var(--hazmat-br)}
.beer .qty{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--hazmat-br);color:#0a0a0a;font:700 11px 'Space Mono',monospace;display:none;align-items:center;justify-content:center}
.beer.in .qty{display:flex}
.beer-quote{font:italic 500 13px/1.4 'Zilla Slab',serif;color:var(--cream);opacity:.75;margin:-4px 0 14px}

.footer-mini{position:relative;z-index:2;padding:24px 20px 12px;text-align:center;font:400 9.5px 'Space Mono',monospace;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;border-top:1px dashed var(--line);margin-top:12px}
.footer-mini strong{color:var(--cream);display:block;margin-bottom:6px;font:900 11px 'Zilla Slab',serif;letter-spacing:.08em}
.footer-mini .signature{display:block;margin-top:10px;color:var(--meth);font-size:8.5px;opacity:.7}

/* ─── botones fijos (back / info) ─── */
.back-home,.info-btn{position:fixed;top:calc(56px + var(--sat));z-index:260;width:36px;height:36px;border-radius:50%;background:rgba(10,10,10,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(245,233,198,.18);display:flex;align-items:center;justify-content:center;color:rgba(245,233,198,.88);box-shadow:0 2px 10px rgba(0,0,0,.45);transition:background .2s,border-color .2s,color .2s,transform .15s,opacity .4s}
.back-home{left:8px;opacity:0;pointer-events:none}
.info-btn{right:8px}
.back-home.show{opacity:1;pointer-events:auto}
.back-home:hover,.info-btn:hover{background:rgba(227,181,5,.16);border-color:rgba(227,181,5,.6);color:var(--hazmat-br)}
.back-home:active,.info-btn:active{transform:scale(.9)}
.back-home svg,.info-btn svg{width:15px;height:15px}
.back-home::before,.info-btn::before{content:'';position:absolute;inset:-6px} /* 48px táctil */

/* ─── welcome ─── */
.welcome{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(48px + var(--sat)) 26px calc(40px + var(--sab));overflow:hidden;visibility:visible;
  background:radial-gradient(ellipse 85% 42% at 50% 34%,rgba(24,96,60,.6),transparent 72%),linear-gradient(180deg,#071c12,#050b08 55%,#040705);
  transition:opacity .85s var(--ease),transform .95s var(--ease),visibility 0s 0s}
.welcome::before{content:'';position:absolute;inset:14px;border:1px solid rgba(212,169,42,.5);border-radius:22px;pointer-events:none}
.welcome>*{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.welcome.gone{opacity:0;transform:translateY(-26px) scale(.985);pointer-events:none;visibility:hidden;transition:opacity .85s var(--ease),transform .95s var(--ease),visibility 0s .95s}
.welcome.gone>*{opacity:0;transform:translateY(-10px)}
.welcome.gone>:nth-child(2){transition-delay:.03s}.welcome.gone>:nth-child(3){transition-delay:.06s}.welcome.gone>:nth-child(4){transition-delay:.09s}
.welcome.gone>:nth-child(5){transition-delay:.12s}.welcome.gone>:nth-child(6){transition-delay:.15s}.welcome.gone>:nth-child(7){transition-delay:.18s}.welcome.gone>:nth-child(8){transition-delay:.21s}
.w-kicker{font:700 11px 'Space Mono',monospace;letter-spacing:.36em;text-transform:uppercase;color:#d6ab2c;margin:0 0 30px;padding-left:.36em}
.w-tiles{display:flex;gap:16px;margin:0 0 36px}
.w-tile{position:relative;width:146px;height:172px;border-radius:8px;border:2px solid #2fd87c;background:linear-gradient(160deg,#0f4b31,#072b1c);display:flex;align-items:center;justify-content:center;animation:w-tile-glow 3.2s ease-in-out infinite}
.w-tile:nth-child(2){animation-delay:1.6s}
@keyframes w-tile-glow{0%,100%{box-shadow:0 0 18px rgba(47,216,124,.42),0 0 44px rgba(47,216,124,.16),inset 0 0 18px rgba(47,216,124,.1)}50%{box-shadow:0 0 30px rgba(47,216,124,.7),0 0 64px rgba(47,216,124,.3),inset 0 0 24px rgba(47,216,124,.18)}}
.w-tile .n{position:absolute;top:12px;left:14px;font:700 15px 'Space Mono',monospace;color:var(--cream)}
.w-tile .s{font:900 78px 'Zilla Slab',serif;line-height:1;color:var(--cream);letter-spacing:-.02em;margin-top:6px}
.w-tile .w{position:absolute;bottom:14px;left:0;right:0;font:400 12px 'Space Mono',monospace;color:var(--cream);opacity:.8}
.w-bienvenido{font:700 12px 'Space Mono',monospace;letter-spacing:.36em;text-transform:uppercase;color:var(--cream);margin:0 0 12px;padding-left:.36em}
.w-title{font:900 54px/.98 'Zilla Slab',serif;letter-spacing:-.005em;text-transform:uppercase;margin:0}
.w-title .l1{display:block;color:#fbf7ec}.w-title .l2{display:block;color:#f5c518;text-shadow:0 0 28px rgba(245,197,24,.35)}
.w-rule{width:230px;height:2px;margin:26px 0 24px;background:linear-gradient(to right,transparent,#f5c518 50%,transparent);opacity:.9}
.w-desc{font:400 15.5px/1.5 'Inter',sans-serif;color:#a9a99f;max-width:320px;margin:0 0 30px}
.enter-btn{width:100%;max-width:330px;padding:18px 20px;border-radius:14px;background:linear-gradient(180deg,#ffd21f,#f0b90b);color:#0a0a0a;font:700 13px 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(0,0,0,.12);box-shadow:0 12px 34px rgba(245,197,24,.38),inset 0 1px 0 rgba(255,255,255,.35);animation:enter-pulse 2.4s ease-in-out infinite;position:relative;z-index:2;transition:transform .15s,opacity .45s}
.enter-btn:active{transform:scale(.97)}
@keyframes enter-pulse{0%,100%{box-shadow:0 12px 34px rgba(245,197,24,.36),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 16px 46px rgba(245,197,24,.62),inset 0 1px 0 rgba(255,255,255,.35)}}
.w-foot{margin:28px 0 0;font:400 9.5px 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:#8a8a82}

/* el menú se revela suave al salir del welcome */
.phone>.marquee,.phone>.hero,.phone>.search-wrap,.phone>section,.phone>.footer-mini{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
body.in-menu .phone>.marquee,body.in-menu .phone>.hero,body.in-menu .phone>.search-wrap,body.in-menu .phone>section,body.in-menu .phone>.footer-mini{opacity:1;transform:none}
body.in-menu .phone>.hero{transition-delay:.1s}body.in-menu .phone>.search-wrap{transition-delay:.16s}body.in-menu .phone>section{transition-delay:.22s}body.in-menu .phone>.footer-mini{transition-delay:.3s}

/* ─── carrito flotante (camioneta) ─── */
.cart-fab{position:fixed;right:16px;bottom:calc(18px + var(--sab));z-index:160;width:84px;height:62px;border-radius:22px;background:linear-gradient(180deg,#1b1b1b,#0d0d0d);border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03),0 0 24px rgba(227,181,5,.0);display:flex;align-items:center;justify-content:center;transition:box-shadow .3s,transform .2s var(--ease),opacity .4s}
.cart-fab:active{transform:scale(.94)}
.cart-fab .van{width:62px;height:34px;display:block}
.cart-fab.has{border-color:rgba(227,181,5,.55);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px rgba(227,181,5,.35)}
.cart-fab.has .van{animation:van-idle 2.2s ease-in-out infinite}
@keyframes van-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.cart-fab.bump .van{animation:van-bump .6s cubic-bezier(.3,1.6,.5,1)}
.cart-fab.bump .van-body{animation:van-susp .6s cubic-bezier(.3,1.6,.5,1)}
.cart-fab.bump .van-wheels{animation:wheel-bounce .6s cubic-bezier(.3,1.6,.5,1)}
.cart-fab.bump .van-smoke{animation:van-puff .6s ease-out}
@keyframes van-bump{0%{transform:translateY(0)}30%{transform:translateY(-9px) rotate(-3deg)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes van-susp{0%,100%{transform:translateY(0)}35%{transform:translateY(-2px)}65%{transform:translateY(1.5px)}}
@keyframes wheel-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(1.5px)}}
@keyframes van-puff{0%{opacity:0;transform:translateX(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateX(-8px) scale(1.6)}}
.cart-badge{position:absolute;top:-8px;right:-6px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--hazmat-br);color:#0a0a0a;font:900 13px 'Zilla Slab',serif;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #080808,0 2px 8px rgba(0,0,0,.5)}
.cart-badge.pop{animation:badge-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes badge-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
body.in-menu .cart-fab{opacity:1} .cart-fab{opacity:0;pointer-events:none} body.in-menu .cart-fab{pointer-events:auto}

/* ─── bottom sheets ─── */
.sheet-backdrop{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.sheet-backdrop.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;max-width:480px;margin:0 auto;max-height:86vh;display:flex;flex-direction:column;background:#101010;border:1px solid var(--line-2);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.7);transform:translateY(100%);transition:transform .5s var(--ease);padding-bottom:var(--sab)}
.sheet.on{transform:translateY(0)}
.sheet-grip{width:44px;height:4px;border-radius:2px;background:var(--line-2);margin:10px auto 2px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 12px;border-bottom:1px dashed var(--line)}
.sheet-head h2{margin:0;font:900 22px 'Zilla Slab',serif;color:var(--cream)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cream);background:var(--surface-2);border:1px solid var(--line-2);transition:background .2s,transform .15s}
.icon-btn:hover{background:rgba(227,181,5,.14)} .icon-btn:active{transform:scale(.9)} .icon-btn svg{width:18px;height:18px}
.sheet-body{overflow-y:auto;padding:8px 18px 14px;flex:1;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px 18px 14px;border-top:1px dashed var(--line);background:#101010}
.total-row{display:flex;justify-content:space-between;align-items:baseline;font:400 11px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.total-row strong{font:900 26px 'Zilla Slab',serif;color:var(--hazmat-br);letter-spacing:-.01em}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:14px 18px;border-radius:14px;background:linear-gradient(180deg,#ffd21f,#f0b90b);color:#0a0a0a;font:700 12.5px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(0,0,0,.12);box-shadow:0 10px 30px rgba(245,197,24,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,opacity .2s;text-decoration:none}
.btn-primary:active{transform:scale(.98)}
.btn-primary[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-wa{background:linear-gradient(90deg,#25d366,#128c7e);color:#06261a;box-shadow:0 10px 30px rgba(37,211,102,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-wa svg{width:20px;height:20px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;margin-top:8px;border-radius:12px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:var(--meth);font:700 11px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.btn-ghost svg{width:16px;height:16px} .btn-ghost[disabled]{opacity:.5}

/* líneas del carrito */
.cart-line{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-line .cl-info{flex:1;min-width:0}
.cart-line .cl-name{font:700 15px 'Zilla Slab',serif;color:var(--cream);margin:0 0 2px}
.cart-line .cl-sub{font:400 10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.06em}
.cart-line .cl-sub b{color:var(--hazmat-br);font-weight:700}
.qty-ctl{display:flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:2px}
.qty-ctl button{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--cream);transition:background .2s}
.qty-ctl button:hover{background:rgba(227,181,5,.14)} .qty-ctl button:active{background:rgba(227,181,5,.3)}
.qty-ctl .n{min-width:22px;text-align:center;font:700 13px 'Space Mono',monospace;color:var(--hazmat-br)}
.cl-del{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:color .2s,background .2s}
.cl-del:hover{color:var(--danger);background:rgba(255,90,90,.1)} .cl-del svg{width:16px;height:16px}
.cart-empty{text-align:center;padding:32px 14px 28px}
.cart-empty .van-big{width:170px;height:94px;opacity:.6;margin-bottom:8px}
.cart-empty h3{margin:0 0 6px;font:900 22px 'Zilla Slab',serif;color:var(--cream)}
.cart-empty p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}

/* ─── humo de transición (capas irregulares que suben y se disipan) ─── */
.smoke-screen{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden;visibility:hidden}
.smoke-screen.on{visibility:visible}
.smoke-screen .veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 75%,rgba(30,30,28,.8),rgba(0,0,0,.5));opacity:0}
.smoke-screen.on .veil{animation:veil 1.3s ease-in-out both}
@keyframes veil{0%{opacity:0}28%{opacity:1}66%{opacity:1}100%{opacity:0}}
.smoke-screen .sm{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * .82);
  border-radius:52% 48% 55% 45% / 58% 50% 50% 42%;
  background:radial-gradient(ellipse at 45% 42%,rgba(248,244,234,.95) 0%,rgba(226,220,204,.8) 24%,rgba(172,168,158,.48) 50%,rgba(120,118,112,.18) 64%,rgba(120,118,112,0) 72%);
  filter:blur(var(--b,22px));opacity:0;transform:translate(-50%,-50%) scale(.3);will-change:transform,opacity}
.smoke-screen.on .sm{animation:puff 1.25s cubic-bezier(.25,.62,.3,1) var(--dl,0s) both}
@keyframes puff{
  0%  {opacity:0;  transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  24% {opacity:.97}
  46% {opacity:.96;transform:translate(calc(-50% + var(--dx)),calc(-50% - 8vh)) scale(1.75) rotate(var(--r))}
  64% {opacity:.9; transform:translate(calc(-50% + var(--dx) * 1.3),calc(-50% - 16vh)) scale(2) rotate(calc(var(--r) * 1.3))}
  100%{opacity:0;  transform:translate(calc(-50% + var(--dx) * 1.9),calc(-50% - 38vh)) scale(2.45) rotate(calc(var(--r) * 1.9))}
}

/* ─── checkout ─── */
.checkout{position:fixed;inset:0;z-index:320;max-width:480px;margin:0 auto;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .5s var(--ease);padding-bottom:calc(32px + var(--sab))}
.checkout.on{opacity:1;transform:none}
.checkout-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(14px + var(--sat)) 16px 12px;background:rgba(8,8,8,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.checkout-kicker{margin:0 0 2px;font:700 9px 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--meth)}
.checkout-head h2{margin:0;font:900 20px/1.1 'Zilla Slab',serif;color:var(--cream)}
.checkout-body{padding:18px 18px 10px}
.opt-grid{display:grid;gap:10px;margin-bottom:18px}
.opt{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px 14px;border-radius:16px;background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);min-height:72px;transition:border-color .25s,box-shadow .25s,background .25s,transform .15s}
.opt:active{transform:scale(.985)}
.opt .opt-ico{grid-row:1/3;font-size:26px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(245,233,198,.06)}
.opt .opt-t{font:900 17px 'Zilla Slab',serif;color:var(--cream)}
.opt .opt-s{font-size:12px;color:var(--dim)}
.opt[aria-checked="true"]{border-color:var(--hazmat-br);background:linear-gradient(145deg,rgba(227,181,5,.14),rgba(227,181,5,.05));box-shadow:0 0 24px rgba(227,181,5,.25),inset 0 0 0 1px rgba(227,181,5,.35)}
.opt[aria-checked="true"] .opt-t{color:var(--hazmat-br)}
.fields{animation:fields-in .45s var(--ease)}
@keyframes fields-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.field{margin-bottom:16px}
.field[data-only]{display:none}
.field.show{display:block;animation:fields-in .4s var(--ease)}
.field label,.field .label{display:block;font:700 10px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.field em{color:var(--hazmat-br);font-style:normal}
.field .opt-tag{font-size:8px;color:var(--meth);border:1px solid rgba(34,197,94,.3);padding:1px 5px;border-radius:999px;margin-left:6px;letter-spacing:.1em}
.field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;color:var(--text);padding:12px 14px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical;min-height:48px}
.field input:focus,.field textarea:focus{border-color:var(--hazmat);box-shadow:0 0 0 3px rgba(227,181,5,.15)}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.err{margin:6px 0 0;font-size:12px;color:var(--danger);min-height:0}
.err:empty{display:none}
.hint{margin:8px 0 0;font-size:12px;color:var(--dim);line-height:1.45}
.hint.ok{color:var(--meth)} .hint:empty{display:none}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay{min-height:48px;padding:10px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);color:var(--cream);font:700 10.5px 'Space Mono',monospace;letter-spacing:.04em;transition:all .2s;text-align:center}
.pay[aria-checked="true"]{background:rgba(34,197,94,.12);border-color:var(--meth);color:var(--meth);box-shadow:0 0 16px rgba(34,197,94,.2)}
.summary{margin:6px 0 18px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface)}
.summary-title{margin:0 0 8px;font:700 9.5px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--meth)}
.summary .s-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--cream);padding:4px 0}
.summary .s-line span:last-child{color:var(--hazmat-br);font-weight:700;white-space:nowrap}
.summary .total-row{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line)}
.summary .total-row strong{font-size:22px}
.form-err{text-align:center;margin-top:10px}

/* ─── visor de foto ─── */
.viewer{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.viewer.on{opacity:1}
.viewer-fig{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(70px + var(--sat)) 16px calc(30px + var(--sab));transform:scale(.94);transition:transform .35s var(--ease)}
.viewer.on .viewer-fig{transform:scale(1)}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.viewer figcaption{font:900 18px 'Zilla Slab',serif;color:var(--cream)}
.viewer-fig{padding-bottom:calc(110px + var(--sab))}
.viewer-close{position:absolute;top:calc(14px + var(--sat));right:14px;z-index:2;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:background .2s,transform .15s}
.viewer-close:hover{background:rgba(227,181,5,.3)} .viewer-close:active{transform:scale(.9)} .viewer-close svg{width:22px;height:22px}
.viewer-back{position:absolute;left:50%;bottom:calc(44px + var(--sab));transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:14px 22px;border-radius:999px;background:linear-gradient(180deg,#ffd21f,#f0b90b);color:#0a0a0a;font:700 12px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 10px 30px rgba(245,197,24,.4);transition:transform .15s}
.viewer-back:active{transform:translateX(-50%) scale(.96)} .viewer-back svg{width:16px;height:16px}
.viewer-hint{position:absolute;left:0;right:0;bottom:calc(14px + var(--sab));margin:0;text-align:center;font:400 9.5px 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,233,198,.55)}

/* ─── info ─── */
.info-body{padding-bottom:22px}
.open-chip{display:inline-flex;align-items:center;gap:8px;margin:10px 0 14px;padding:8px 12px;border-radius:999px;font:700 10.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:var(--meth)}
.open-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:meth-pulse 1.4s ease-in-out infinite}
.open-chip.closed{background:rgba(255,90,90,.1);border-color:rgba(255,90,90,.4);color:var(--danger)}
.info-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:start}
.info-list dt{font:700 9.5px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.info-list dd{margin:0;font-size:14px;line-height:1.5;color:var(--cream)}
.info-list dd a{color:var(--hazmat-br);text-decoration:none;border-bottom:1px dashed rgba(227,181,5,.5)}
.pend{color:var(--dim);font-style:italic}

/* ─── responsive ─── */
@media (max-width:360px){
  .hero{padding:18px 14px 14px} .logo-wrap svg{width:240px} .formula-line .punchline{font-size:16px}
  .carousel-inner{padding:8px 14px 20px;gap:10px} .sample{width:calc(100vw - 44px);max-width:268px}
  .tab-bar{padding:12px 10px 10px} .tab-bar-inner{gap:6px} .tab{padding:9px 4px 8px;min-height:60px} .tab .t-icon{font-size:18px} .tab .t-name{font-size:7.5px;letter-spacing:.06em}
  .tab-panels,.search-results,.search-wrap{padding-left:14px;padding-right:14px} .cat-title{font-size:21px}
  .thumb-wrap,.thumb{width:56px;height:56px}
  .welcome{padding:40px 20px 32px} .w-tiles{gap:12px;margin-bottom:28px} .w-tile{width:128px;height:150px} .w-tile .s{font-size:66px} .w-title{font-size:46px} .w-desc{font-size:14.5px} .w-rule{width:190px;margin:20px 0 18px}
  .pay{font-size:9.5px}
}
@media (min-width:430px){ .hero{padding:26px 24px 22px} .tab-panels,.search-results,.search-wrap{padding-left:24px;padding-right:24px} }
@media (min-width:600px){ body{background:#040404} .phone{box-shadow:0 0 0 1px var(--line),0 40px 120px rgba(0,0,0,.8)} .cart-fab{right:calc(50% - 240px + 16px)} }

/* ─── reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;scroll-behavior:auto!important}
  .formula-line .phrase{opacity:0} .formula-line .p1{opacity:1}
  .smoke-screen{display:none}
}

/* ─── Oferta del panel (destacada y animada) ─── */
.offer-wrap{position:relative;z-index:2;padding:6px 16px 14px}
.offer-card{position:relative;border-radius:22px;padding:2.5px;isolation:isolate;
  background:repeating-linear-gradient(-45deg,var(--hazmat-br) 0 12px,#0b0b0b 12px 24px);background-size:34px 34px;
  animation:oc-in .7s var(--ease) both, oc-stripes 1.6s linear infinite}
.offer-card::before{content:"";position:absolute;inset:-14px;border-radius:32px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,214,10,.45),transparent 70%);filter:blur(10px);animation:oc-glow 2.6s ease-in-out infinite}
.oc-inner{position:relative;overflow:hidden;border-radius:20px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(34,197,94,.18),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(255,214,10,.14),transparent 60%),#0d0d0b}
.oc-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);animation:oc-shine 3.8s var(--ease) 1s infinite}
.oc-smoke{position:absolute;right:-30px;bottom:-40px;width:180px;height:160px;pointer-events:none;opacity:.55}
.oc-smoke i{position:absolute;bottom:0;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(220,255,230,.22),transparent 65%);filter:blur(6px);animation:oc-puff 5s ease-in-out infinite}
.oc-smoke i:nth-child(1){left:10px}.oc-smoke i:nth-child(2){left:60px;animation-delay:1.6s}.oc-smoke i:nth-child(3){left:30px;animation-delay:3.2s}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}
.oc-live{display:inline-flex;align-items:center;gap:7px;font:700 10.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0b;background:var(--hazmat-br);padding:5px 10px 5px 8px;border-radius:999px}
.oc-live i{width:7px;height:7px;border-radius:50%;background:#d61f1f;box-shadow:0 0 0 0 rgba(214,31,31,.7);animation:oc-ping 1.4s ease-out infinite}
.oc-count{font:700 11px 'Space Mono',monospace;color:var(--meth);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-align:right}
.oc-main{display:flex;gap:14px;align-items:center;position:relative}
.oc-tile{flex:0 0 auto;width:76px;height:88px;border-radius:6px;border:2px solid var(--meth);position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(34,197,94,.35),rgba(10,113,72,.25) 60%,rgba(0,0,0,.4));box-shadow:0 0 22px -4px var(--meth-glow),inset 0 0 18px rgba(34,197,94,.2);
  animation:oc-tile-in .8s var(--ease) .15s both, oc-float 4s ease-in-out 1s infinite}
.oc-tile .n{position:absolute;top:4px;left:6px;font:700 11px 'Space Mono',monospace;color:var(--cream)}
.oc-tile .s{font:900 31px/1 'Zilla Slab',serif;color:#fff;letter-spacing:-.03em;text-shadow:0 0 14px rgba(34,197,94,.8)}
.oc-tile .wt{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:700 6.5px 'Space Mono',monospace;color:var(--cream);letter-spacing:.08em}
.oc-copy{min-width:0}
.oc-title{margin:0;font:900 26px/1.02 'Zilla Slab',serif;color:var(--hazmat-br);letter-spacing:-.01em}
.oc-title .w{display:inline-block;animation:oc-word .55s var(--ease) both;animation-delay:calc(.25s + var(--i) * 90ms)}
.oc-text{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--text);opacity:.88;animation:oc-fade .6s var(--ease) .5s both}
.oc-price{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,214,10,.35);animation:oc-fade .6s var(--ease) .6s both}
.oc-item{font:700 10.5px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.oc-nums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oc-nums s{font:700 14px 'Space Mono',monospace;color:var(--dim);text-decoration-color:var(--danger);text-decoration-thickness:2px}
.oc-nums b{font:900 30px/1 'Zilla Slab',serif;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,214,10,.45)}
.oc-save{font:700 11px 'Space Mono',monospace;color:#0b0b0b;background:var(--meth);padding:3px 8px;border-radius:999px;animation:oc-pop .5s var(--ease) 1.1s both}
.oc-actions{display:flex;gap:8px;position:relative;animation:oc-fade .6s var(--ease) .7s both}
.oc-add{flex:1;min-height:46px;border-radius:14px;background:var(--hazmat-br);color:#0b0b0b;font-weight:800;font-size:15px;box-shadow:0 8px 22px -10px rgba(255,214,10,.9);transition:transform .2s var(--ease),background-color .2s}
.oc-add:active{transform:scale(.97)}
.oc-add.in{background:var(--meth);box-shadow:0 8px 22px -10px var(--meth-glow)}
.oc-see{min-height:46px;padding:0 16px;border-radius:14px;color:var(--text);font-weight:600;font-size:14px;box-shadow:inset 0 0 0 1px var(--line-2)}
@keyframes oc-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes oc-stripes{to{background-position:34px 0}}
@keyframes oc-glow{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes oc-shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes oc-puff{0%{transform:translateY(20px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-70px) scale(1.4);opacity:0}}
@keyframes oc-ping{0%{box-shadow:0 0 0 0 rgba(214,31,31,.7)}80%,100%{box-shadow:0 0 0 8px rgba(214,31,31,0)}}
@keyframes oc-tile-in{from{opacity:0;transform:rotate(-12deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes oc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes oc-word{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes oc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes oc-pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}

/* Chip de oferta en la pantalla de bienvenida */
.w-offer{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 16px;border-radius:999px;max-width:100%;
  background:rgba(255,214,10,.1);border:1px solid rgba(255,214,10,.55);color:var(--hazmat-br);font-size:13px;animation:oc-fade .6s var(--ease) .9s both, wo-pulse 2.4s ease-in-out 1.6s infinite}
.w-offer .wo-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.w-offer b{color:var(--hazmat-br)} .w-offer em{font-style:normal;font-weight:800;color:var(--meth)}
.wo-dot{width:8px;height:8px;border-radius:50%;background:#d61f1f;flex:0 0 auto;animation:oc-ping 1.4s ease-out infinite}
@keyframes wo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}50%{box-shadow:0 0 22px 0 rgba(255,214,10,.35)}}

/* Plato en oferta dentro de la lista */
.item.on-offer{box-shadow:0 0 0 1.5px var(--hazmat-br),0 0 24px -8px rgba(255,214,10,.6)}
.off-tag{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--hazmat-br);color:#0b0b0b;font:800 10px 'Space Mono',monospace;animation:oc-pop .5s var(--ease) both}
.p-old{display:block;font:700 11px 'Space Mono',monospace;color:var(--dim);text-decoration-color:var(--danger)}
.d-price s,.b-price s{opacity:.55;text-decoration-color:var(--danger)}
.off-mini{color:var(--hazmat-br);font-weight:700}
.badge{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 7px;border-radius:999px;font:700 9.5px 'Space Mono',monospace;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(34,197,94,.16);color:var(--meth)}
.badge.hot{background:rgba(255,214,10,.16);color:var(--hazmat-br)}
@media (prefers-reduced-motion:reduce){
  .offer-card,.offer-card::before,.oc-shine,.oc-smoke i,.oc-live i,.oc-tile,.oc-title .w,.oc-text,.oc-price,.oc-save,.oc-actions,.w-offer,.wo-dot,.off-tag{animation:none!important}
  .oc-shine,.oc-smoke{display:none}
}

/* Ubicación en la bienvenida → Google Maps */
.w-loc{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 18px 10px 10px;border-radius:999px;max-width:100%;
  background:rgba(34,197,94,.08);border:1px solid rgba(47,216,124,.45);color:var(--text);text-decoration:none;text-align:left;
  transition:transform .2s var(--ease),background-color .2s,border-color .2s;animation:oc-fade .6s var(--ease) .7s both}
.w-loc[hidden]{display:none}
.w-loc:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.w-loc:hover{background:rgba(34,197,94,.16);border-color:#2fd87c}}
.wl-pin{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2fd87c;color:#04140b;box-shadow:0 0 18px rgba(47,216,124,.45)}
.wl-pin svg{width:20px;height:20px;animation:wl-bob 2.6s ease-in-out infinite}
.wl-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2fd87c;animation:wl-ring 2.6s ease-out infinite}
.wl-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.wl-addr{font:700 14px/1.2 'Inter',sans-serif;color:#fbf7ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-go{font:700 9.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#2fd87c}
@keyframes wl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes wl-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
#infoAddress a,#infoPhone a{color:inherit;text-decoration:underline;text-decoration-color:rgba(47,216,124,.6);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.w-loc,.wl-pin svg,.wl-pin::after{animation:none!important}}
/* Teléfonos bajitos (iPhone SE y similares): bienvenida más compacta para que quepa todo */
@media (max-height:720px){
  .w-kicker{margin-bottom:18px}
  .w-tiles{margin-bottom:22px}
  .w-tile{width:118px;height:138px}.w-tile .s{font-size:62px}
  .w-title{font-size:46px}
  .w-rule{margin:18px 0 16px}
  .w-desc{margin-bottom:22px}
  .w-loc{margin-top:14px}
  .w-foot{margin-top:18px}
}

/* Muestras estelares con foto: la foto llena la zona visual y la ficha queda como sello en la esquina */
.sample-visual.has-photo{height:200px;cursor:zoom-in}
.sv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:sv-kenburns 14s ease-in-out infinite alternate}
.sv-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 55%,rgba(5,5,5,.85) 100%)}
.sample-visual.has-photo .smoke{z-index:2;opacity:.55}
.sample-visual.has-photo .periodic-tile{position:absolute;left:12px;bottom:12px;width:62px;height:62px;border-radius:8px;z-index:3;animation:tile-float 5s ease-in-out infinite}
.sample-visual.has-photo .periodic-tile .symbol{font-size:28px}
.sample-visual.has-photo .periodic-tile .atomic{top:3px;left:5px;font-size:7px}
.sample-visual.has-photo .periodic-tile .weight{bottom:3px;font-size:6px}
.sv-zoom{position:absolute;right:12px;bottom:12px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  color:var(--cream);background:rgba(0,0,0,.55);border:1px solid rgba(245,233,198,.35);pointer-events:none}
@keyframes sv-kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-2%,-1%)}}
@media (prefers-reduced-motion:reduce){.sv-photo{animation:none}}
