/* =====================================================================
   DOS TIENDAS, DOS ESTILOS
   Licor Market  → grafito verde: grises cálidos, verde lima de acento, animaciones rápidas con rebote
   Drinks House  → carbón y plata: grises fríos, el verde como luz de neón, animaciones lentas y elegantes
   Sin blancos fuertes: lo que antes era blanco ahora es gris claro (--soft).
   La tienda activa se marca en <body data-store="lm|dh"> (lo pone app.js según la página).
   ===================================================================== */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/outfit.woff2) format('woff2')}

:root,body[data-store="lm"]{
  --bg:#151815; --card:#1d211c; --surface:#262b25; --ink:#121512; --ink-2:#191d18; --ink-3:#232822;
  --text:#dde2d8; --muted:#9aa394; --dim:#737c6e; --line:#2b3129; --line-2:#3a4237;
  --soft:#c4c9bf; --soft-ink:#171b16; --field:#252a24; --tile:#c9cdc4;
  --top:#1c2417; --top-ink:#c9dcae; --glow:rgba(143,209,47,.28);
  --tabbar:#1d211c; --ind:#8fd12f; --ind-ink:#0c1a02;
}
body[data-store="dh"]{
  --bg:#101012; --card:#18181b; --surface:#212125; --ink:#0b0b0d; --ink-2:#141417; --ink-3:#1c1c20;
  --text:#d8d9dc; --muted:#9a9ca2; --dim:#6d6f75; --line:#28282d; --line-2:#37373d;
  --soft:#b5b8be; --soft-ink:#0e0e10; --field:#1d1d21; --tile:#b9bcc1;
  --top:#0b0b0d; --top-ink:#b5b8be; --glow:rgba(143,209,47,.4);
  --tabbar:#17171a; --ind:#b5b8be; --ind-ink:#0b0b0d;
  --green:#9bd84a;
}
body{background:var(--bg);color:var(--text);transition:background-color .5s var(--ease),color .5s var(--ease)}

/* ---------- los blancos fijos pasan a gris ---------- */
.topbar{background:var(--top);color:var(--top-ink);border-bottom:1px solid var(--line);transition:background-color .5s}
.topbar .status{border-color:rgba(255,255,255,.08)}
.status i{background:#8fd12f;box-shadow:0 0 0 3px rgba(143,209,47,.18),0 0 10px rgba(143,209,47,.6)}
.hdr{background:var(--ink);color:var(--text);transition:background-color .5s}
.search-box{background:var(--field);border:1px solid var(--line-2);color:var(--text)}
.search-box:focus-within{border-color:var(--lime)}
.search-box input{color:var(--text)}
.search-box input::placeholder{color:var(--dim)}
.all-cats{background:var(--surface);color:var(--text);border:1px solid var(--line-2)}
.mode button.on{background:var(--soft);color:var(--soft-ink)}
.quick a:hover,.quick a.on{background:rgba(255,255,255,.06);color:var(--text)}
.btn-dark,.btn-line{background:var(--soft);color:var(--soft-ink)}
.btn-line{background:transparent;color:var(--text)}
.btn-dark:hover{background:var(--muted)}
.points .h2 em{background:var(--soft);color:var(--soft-ink)}
/* bloques que eran verde lima entero: ahora grafito con el verde de acento (menos chillón) */
.points,.ban.lime{background:radial-gradient(120% 120% at 100% 0%,rgba(143,209,47,.2),transparent 55%),linear-gradient(160deg,#242b1f,#171b15);color:var(--text);border:1px solid rgba(143,209,47,.3)}
.points p,.ban.lime p,.pts-steps small{color:var(--muted)}
.points .h2,.ban.lime h3{color:var(--text)}
:root:not([data-theme="light"]) .ban.lime h3 em,.ban.lime h3 em{color:#8fd12f}
.pts-steps div{background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.pts-steps .ph,.ban.lime .big-ic{color:#8fd12f}
.ban-cta{background:var(--soft);color:var(--soft-ink)}
.chip.on{background:var(--soft);color:var(--soft-ink);border-color:var(--soft)}
.card{background:var(--card);border-color:var(--line)}
.c-img.pack,.m-img.pack{background:var(--tile)}
.c-img.pack img,.m-img.pack img,.c-img.ext img{mix-blend-mode:multiply}
.c-img.ext img,.s-item img.pack,.d-item img.pack,.ql-item img.pack,.toast img.pack{background:var(--tile)}
.h-btn .lbl b,footer h6,footer .f-h{color:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tabbar a,.tabbar button,.tb-lbl{color:var(--text)}
@media(max-width:899px){
  .tabbar{background:var(--tabbar);border:1px solid var(--line);transition:background-color .5s}
  .tb-ind{background:var(--ind);box-shadow:0 8px 18px -6px rgba(0,0,0,.6),0 0 16px var(--glow)}
  .tabbar .on .tb-ic{color:var(--ind-ink)}
}

/* ---------- encabezado: los dos logos; el de la tienda activa resalta ---------- */
.logos .logo-img,.logos .logo-dh{transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s}
body[data-store="dh"] .logos .logo-img{opacity:.55;transform:scale(.9);filter:saturate(.4)}
body[data-store="lm"] .logos .logo-dh{opacity:.6;transform:scale(.9);filter:saturate(.5)}
body[data-store="dh"] .logo-dh img{box-shadow:0 0 0 2px #8fd12f,0 0 18px rgba(143,209,47,.55)}
.lx{display:inline-block;transition:color .4s}
.lx.spin{animation:lxSpin .9s var(--ease)}
@keyframes lxSpin{0%{transform:rotate(0) scale(1)}45%{transform:rotate(200deg) scale(1.7);color:#8fd12f;text-shadow:0 0 12px #8fd12f}100%{transform:rotate(360deg) scale(1)}}

/* ---------- «Elige tu espacio»: las dos tiendas, lado a lado ---------- */
.store-switch{grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 16px;position:relative}
.ss-x{position:absolute;left:50%;top:calc(50% - 12px);transform:translate(-50%,-50%);z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);border:1px solid var(--line-2);color:var(--muted);font-size:16px;line-height:1}
.ss-t{position:relative;overflow:hidden;isolation:isolate;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:18px;min-height:112px;
  border:1px solid var(--line-2);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.ss-t::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s}
.ss-t[href="#/"]::before{background:radial-gradient(120% 90% at 0% 0%,rgba(143,209,47,.22),transparent 60%),linear-gradient(160deg,#232a1e,#171b15)}
.ss-t[href="#/dh"]::before{background:radial-gradient(110% 90% at 100% 0%,rgba(143,209,47,.16),transparent 55%),linear-gradient(200deg,#1f1f23,#0d0d0f)}
.ss-t[href="#/dh"]{font-family:var(--body)}
.ss-t[href="#/dh"] b{font-weight:300;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.ss-t img{width:46px;height:46px}
.ss-t b{font-size:16px}
.ss-t small{white-space:normal}
.ss-t .ss-go{position:absolute;right:12px;top:12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.ss-t.on{background:none;box-shadow:inset 0 0 0 1px #8fd12f,0 0 22px -6px var(--glow);border-color:#8fd12f}
.ss-t[href="#/dh"].on{background:none}
.ss-t.on .ss-go{color:#8fd12f}
.ss-t:active{transform:scale(.97)}
.ss-note{margin-top:2px}
@media(min-width:600px){.ss-t .ss-go{top:auto;bottom:12px}.ss-t{flex-direction:row;align-items:center;min-height:96px;padding:16px 18px}.ss-t img{width:60px;height:60px}.ss-t b{font-size:19px}.ss-t[href="#/dh"] b{font-size:16px}}
@media(min-width:900px){.ss-t{min-height:110px}}

/* ---------- aparece: «Estás en …» al cambiar de tienda ---------- */
.store-chip{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:90;transform:translate(-50%,-140%);display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;border-radius:999px;background:var(--ink);color:var(--text);border:1px solid var(--line-2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8),0 0 24px -8px var(--glow);
  font-size:14px;white-space:nowrap;pointer-events:none;transition:transform .55s var(--spring-pop,var(--ease))}
.store-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.store-chip small{display:block;font-size:11.5px;color:var(--muted)}
.store-chip.on{transform:translate(-50%,0)}
body[data-store="dh"] .store-chip b{font-weight:300;letter-spacing:.14em;text-transform:uppercase}
/* iPhone en Safari (iOS 26): la página pasa por debajo de la hora y la isla dinámica, pero env(safe-area-inset-top) vale 0.
   - franja fija y sólida arriba: Safari la usa para teñir la zona de la hora en vez de desenfocar lo que pasa por debajo
   - el aviso «Estás en …» baja lo suficiente para que los logos no queden tapados por la isla */
@media (hover:none) and (pointer:coarse){
  body::before{height:max(env(safe-area-inset-top),6px);background:var(--top);transition:background-color .5s}
  .store-chip{top:max(calc(14px + env(safe-area-inset-top)),68px)}
}

/* ---------- portal (navegadores sin View Transitions): círculo que crece desde el toque ---------- */
.portal{position:fixed;inset:0;z-index:250;pointer-events:none;clip-path:circle(0 at var(--px) var(--py));transition:clip-path .45s cubic-bezier(.65,0,.35,1),opacity .35s}
.portal.grow{clip-path:circle(var(--pr) at var(--px) var(--py))}
.portal.fade{opacity:0}
.portal.to-dh{background:radial-gradient(circle at var(--px) var(--py),#1d1d21,#0b0b0d 70%)}
.portal.to-lm{background:radial-gradient(circle at var(--px) var(--py),#26301f,#121512 70%)}
.portal::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--px) var(--py),transparent calc(var(--pr) - 6px),rgba(143,209,47,.55) calc(var(--pr) - 2px),transparent var(--pr))}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- intro de la colaboración (una vez por visita) ---------- */
.intro{position:fixed;inset:0;z-index:400;display:none;place-items:center;pointer-events:none;overflow:hidden}
/* ya viene en index.html: tapa la página desde el primer dibujo (el script del <head> pone intro-on si toca verla) */
.intro-on .intro{display:grid}
/* respaldo: si app.js no llega a animarla, se quita sola y no deja la página tapada */
.intro-on .intro:not(.play){animation:introGone .4s 6s forwards}
@keyframes introGone{to{opacity:0;visibility:hidden}}
.intro i{position:absolute;left:0;right:0;height:50.5%;background:#121413}
.intro i:first-child{top:0;background:linear-gradient(180deg,#1b2216,#141813)}
.intro i:nth-child(2){bottom:0;background:linear-gradient(0deg,#0b0b0d,#141416)}
.intro .in-row{position:relative;display:flex;align-items:center;gap:clamp(14px,4vw,28px)}
.intro img{height:clamp(70px,18vw,120px);width:auto;opacity:0}
.intro .in-dh{border-radius:50%;width:clamp(70px,18vw,120px);box-shadow:0 0 0 2px #8fd12f,0 0 30px rgba(143,209,47,.5)}
.intro .in-x{font-size:clamp(26px,6vw,40px);color:#8fd12f;opacity:0;text-shadow:0 0 14px rgba(143,209,47,.8);font-weight:300}
.intro p{position:absolute;left:0;right:0;top:calc(50% + clamp(60px,14vw,92px));text-align:center;color:#c4c9bf;font-size:13px;letter-spacing:.32em;text-transform:uppercase;opacity:0}
.intro-on .intro .in-lm{animation:inL .7s .05s var(--ease) forwards}
.intro-on .intro .in-dh{animation:inR .7s .05s var(--ease) forwards}
.intro-on .intro .in-x{animation:inX .5s .5s var(--ease) forwards}
.intro-on .intro p{animation:inP .5s .7s var(--ease) forwards}
.intro.out .in-row,.intro.out p{animation:inOut .35s var(--ease) forwards}
.intro.out i:first-child{animation:splitU .6s .15s cubic-bezier(.65,0,.35,1) forwards}
.intro.out i:nth-child(2){animation:splitD .6s .15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes inL{from{opacity:0;transform:translateX(-60vw) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(60vw) rotate(18deg)}to{opacity:1;transform:none}}
@keyframes inX{0%{opacity:0;transform:scale(0) rotate(-180deg)}70%{opacity:1;transform:scale(1.5) rotate(20deg)}100%{opacity:1;transform:none}}
@keyframes inP{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.32em}}
@keyframes inOut{to{opacity:0;transform:scale(1.15)}}
@keyframes splitU{to{transform:translateY(-101%)}}
@keyframes splitD{to{transform:translateY(101%)}}

/* =====================================================================
   DRINKS HOUSE: carbón, plata y neón
   ===================================================================== */
body[data-store="dh"] .h2{font-family:var(--body);font-weight:300;letter-spacing:.16em;font-size:clamp(21px,2.6vw,30px);line-height:1.15}
body[data-store="dh"] .h2 em{color:#8fd12f;text-shadow:0 0 14px rgba(143,209,47,.45)}
body[data-store="dh"] .hdr{border-bottom:1px solid rgba(143,209,47,.25);box-shadow:0 1px 18px -6px rgba(143,209,47,.35)}
body[data-store="dh"] .card{background:linear-gradient(165deg,#1d1d21,#141417);border-color:#2a2a2f}
body[data-store="dh"] .card .c-name{font-weight:400;letter-spacing:.01em}
body[data-store="dh"] .card .c-price b{color:var(--text)}
.card.dh .c-img::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 50% at 50% 70%,rgba(143,209,47,.14),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);
  background-size:100% 100%,250% 100%;background-position:0 0,130% 0;transition:background-position 1.1s var(--ease)}
.card.dh:hover .c-img::after,.card.dh.shine .c-img::after{background-position:0 0,-30% 0}
.card.dh .add,.dh-btn{background:var(--soft);color:var(--soft-ink)}
.card.dh .add:hover,.dh-ban:hover .dh-btn{background:#8fd12f;color:#0c1a02}
.card.dh{box-shadow:none;border-color:#2a2a2f}
.card.dh .ph-tile{filter:saturate(.3) brightness(.9)}
.c-store{background:#0b0b0d;color:var(--soft);border-color:#33333a}
body[data-store="dh"] .c-store{display:none}
.dh-ban,.dh-hero{color:var(--text)}
.dh-ban p,.dh-hero p{color:var(--muted)}
.dh-hero{position:relative;overflow:hidden;isolation:isolate;border-color:#2a2a2f;background:#0d0d0f}
.dh-hero::before{content:"";position:absolute;inset:-40%;z-index:-1;
  background:radial-gradient(30% 30% at 20% 30%,rgba(143,209,47,.2),transparent 70%),radial-gradient(25% 25% at 80% 70%,rgba(181,184,190,.12),transparent 70%),radial-gradient(20% 20% at 60% 20%,rgba(143,209,47,.1),transparent 70%);
  animation:barLights 14s ease-in-out infinite alternate}
@keyframes barLights{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6%,-4%) rotate(8deg)}100%{transform:translate(-5%,5%) rotate(-6deg)}}
.dh-hero img{animation:neon 4s ease-in-out 3}   /* 3 veces y queda fijo: animar box-shadow repinta cada cuadro */
@keyframes neon{0%,100%{box-shadow:0 0 0 3px #111,0 0 0 4px rgba(143,209,47,.6),0 0 34px rgba(143,209,47,.35)}50%{box-shadow:0 0 0 3px #111,0 0 0 4px rgba(143,209,47,.9),0 0 54px rgba(143,209,47,.55)}}
.dh-hero .h2{font-size:clamp(28px,5vw,44px);letter-spacing:.22em}
.dh-cat{background:linear-gradient(160deg,#1b1b1f,#111113);border-color:#2a2a2f;color:var(--text);position:relative;overflow:hidden}
.dh-cat::after{content:"";position:absolute;left:-60%;top:0;bottom:0;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.dh-cat:hover::after,.dh-cat:active::after{left:120%}
.dh-cat .ph{filter:drop-shadow(0 0 6px rgba(143,209,47,.5))}
.dh-cat b{font-weight:400;letter-spacing:.06em}
.dh-cat small{color:var(--muted)}
.dh-ban{background:radial-gradient(120% 140% at 0% 50%,#1e1e22 0%,#0b0b0d 60%);border-color:#2a2a2f}
.d-store{background:var(--ink-3);border:1px solid var(--line-2)}
.d-store:not(.dh){background:linear-gradient(90deg,rgba(143,209,47,.14),rgba(143,209,47,.03));border-color:rgba(143,209,47,.35)}
.d-store.dh,.po-store.dh{background:linear-gradient(90deg,#1d1d21,#0d0d0f);color:var(--text);border:1px solid #3a3a40;box-shadow:inset 3px 0 0 #b5b8be}
.d-store.dh span,.po-store.dh{letter-spacing:.08em}
.po-store:not(.dh){background:linear-gradient(90deg,rgba(143,209,47,.14),rgba(143,209,47,.03));border:1px solid rgba(143,209,47,.35)}
#megaGrid .mega-dh,#quick .q-dh{background:#0d0d0f;color:var(--soft);border-color:#3a3a40}

body[data-store="dh"] .cart-h,body[data-store="dh"] .search-go{background:var(--soft);color:var(--soft-ink);box-shadow:0 0 0 1px rgba(143,209,47,.5),0 0 14px -2px rgba(143,209,47,.45)}
body[data-store="dh"] .cart-h .badge{border-color:var(--ink)}
@media(max-width:599px){
  .dh-cats{grid-template-columns:repeat(3,1fr);gap:8px}
  .dh-cat{padding:12px 10px;gap:2px;border-radius:14px}
  .dh-cat .ph{width:24px;height:24px}
  .dh-cat b{font-size:12.5px;line-height:1.2;letter-spacing:.02em}
  .dh-cat small{font-size:11px}
}

/* Licor Market: un toque fresco, sin cambiar lo que ya funciona */
body[data-store="lm"] .card:hover{border-color:rgba(143,209,47,.45)}

/* tablet: más espacio para las dos tiendas */
@media(min-width:700px) and (max-width:1023px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:minmax(190px,1fr)}
  .dh-cats{grid-template-columns:repeat(4,1fr)}
}

/* =====================================================================
   DRINKS HOUSE COMO EL LOCAL: estantes negros con marco naranja, techo claro, piso gris oscuro.
   El verde queda solo para el logo; el naranja es el de los estantes.
   ===================================================================== */
body[data-store="dh"]{--dor:#ee7d22;--dor-a:rgba(238,125,34,.5);--glow:rgba(238,125,34,.4);--ind:#ee7d22;--ind-ink:#1a0d02;
  --bg:#141416;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:120px 60px}
body[data-store="dh"] .h2 em{color:var(--dor);text-shadow:0 0 14px rgba(238,125,34,.4)}
body[data-store="dh"] .hdr{border-bottom:2px solid var(--dor);box-shadow:0 1px 18px -6px var(--glow)}
body[data-store="dh"] .cart-h,body[data-store="dh"] .search-go{box-shadow:0 0 0 1px var(--dor-a),0 0 14px -2px var(--glow)}
body[data-store="dh"] .search-box:focus-within{border-color:var(--dor)}
/* tarjetas = un hueco del estante: fondo negro, marco naranja */
body[data-store="dh"] .card{background:#0e0e10;border:1px solid #2a2a2f;box-shadow:inset 0 3px 0 var(--dor)}
body[data-store="dh"] .card:hover{border-color:var(--dor-a)}
.card.dh .c-img::after{background:radial-gradient(60% 50% at 50% 70%,rgba(238,125,34,.12),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);background-size:100% 100%,250% 100%;background-position:0 0,130% 0}
.card.dh:hover .c-img::after,.card.dh.shine .c-img::after{background-position:0 0,-30% 0}
.card.dh .add:hover,.dh-ban:hover .dh-btn{background:var(--dor,#ee7d22);color:#1a0d02}
/* portada: la foto del local de fondo */
.dh-hero{background:linear-gradient(90deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,.78) 45%,rgba(10,10,12,.45) 100%),url(../img/marca/dh-tienda-640.webp) center 40%/cover #0d0d0f;
  border:1px solid #2a2a2f;border-top:3px solid #ee7d22;min-height:220px}
@media(min-width:700px){.dh-hero{background-image:linear-gradient(90deg,rgba(10,10,12,.93) 0%,rgba(10,10,12,.75) 50%,rgba(10,10,12,.35) 100%),url(../img/marca/dh-tienda-1080.webp)}}
@media(max-width:699px){.dh-hero{background-image:linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.88) 55%,rgba(10,10,12,.95) 100%),url(../img/marca/dh-tienda-640.webp)}}
.dh-hero::before{background:radial-gradient(30% 30% at 20% 30%,rgba(238,125,34,.16),transparent 70%),radial-gradient(20% 20% at 60% 20%,rgba(143,209,47,.08),transparent 70%)}
.dh-kick{color:#f3a25e}
/* categorías = cajones del estante */
.dh-cat{background:linear-gradient(160deg,#141416,#0b0b0d);border:1px solid #2a2a2f;border-left:3px solid #ee7d22}
.dh-cat .ph{color:#ee7d22;filter:drop-shadow(0 0 6px rgba(238,125,34,.45))}
.dh-cat:hover{border-color:#ee7d22}
.ss-t[href="#/dh"]::before{background:linear-gradient(200deg,rgba(13,13,15,.6),rgba(13,13,15,.92)),url(../img/marca/dh-tienda-360.webp) center 40%/cover}
.ss-t[href="#/dh"]{border-top:3px solid #ee7d22}
/* Licor Market igual que Drinks House: foto de la tienda de fondo (pasillo de limpieza) con su color, verde */
.ss-t[href="#/"]::before{background:linear-gradient(160deg,rgba(23,27,21,.62),rgba(23,27,21,.93)),url(../img/marca/lm-tienda-640.webp) center 45%/cover}
.ss-t[href="#/"]{border-top:3px solid #8fd12f}
body[data-store="dh"] .ss-t.on{box-shadow:inset 0 0 0 1px #ee7d22,0 0 22px -6px var(--glow);border-color:#ee7d22}
body[data-store="dh"] .ss-t.on .ss-go{color:#ee7d22}
.d-store.dh,.po-store.dh{box-shadow:inset 3px 0 0 #ee7d22}
/* Licor Market también con el reflejo de luz de Drinks House (verde): al aparecer, al pasar el mouse, al tocar el producto y al abrir la ficha */
.card:not(.dh) .c-img::after,.m-img::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 50% at 50% 70%,rgba(143,209,47,.12),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%);
  background-size:100% 100%,250% 100%;background-position:0 0,130% 0;transition:background-position 1.1s var(--ease)}
.card:not(.dh):hover .c-img::after,.card.shine .c-img::after,.m-img.shine::after{background-position:0 0,-30% 0}
body[data-store="dh"] .m-img::after{background-image:radial-gradient(60% 50% at 50% 70%,rgba(238,125,34,.12),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%)}
.card.shine-reset .c-img::after,.m-img.shine-reset::after{transition:none}   /* vuelve al inicio sin barrer al revés */
@media (prefers-reduced-motion:reduce){.c-img::after,.m-img::after{transition:none}}
/* modo liviano (html.lite, lo pone app.js en celulares sencillos o si al bajar va lento): fuera lo que más cuesta dibujar al bajar */
html.lite .c-img::after,html.lite .m-img::after{display:none}
html.lite .dh-hero::before,html.lite .dh-hero img{animation:none}
html.lite .m3d-glow{filter:none;opacity:.7}
html.lite .m3d-shine,html.lite .m3d-hint{display:none}
html.lite .m3d-in{will-change:auto}
html.lite .m3d-in img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
html.lite .dh-cat .ph,html.lite .logo-img img{filter:none}
.portal.to-dh{background:radial-gradient(circle at var(--px) var(--py),#2a1a0e,#0b0b0d 70%)}

@media (prefers-reduced-motion:reduce){.intro{display:none}.portal{display:none}.dh-hero::before,.dh-hero img{animation:none}}

/* carrusel pausado (fuera de pantalla, tocado o con el botón): todas sus animaciones se detienen */
.slides.paused *,.slides.paused *::before,.slides.paused *::after{animation-play-state:paused!important}

/* =====================================================================
   PASO 6 · precio más grande en el celular y «Agregar» del color de cada tienda (verde Licor Market, naranja Drinks House)
   ===================================================================== */
@media(max-width:699px){.c-price b{font-size:20px;letter-spacing:-.02em}.c-price s{font-size:12px}}
.card.dh .add{background:#ee7d22;color:#1a0d02}
.card.dh .add:hover{background:#f59a4c;color:#1a0d02}
/* tarjeta «Ver todo» al final de cada fila de las portadas */
.r-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100%;padding:16px;border:1.5px dashed var(--line-2);border-radius:var(--r);color:var(--text);font-weight:600;font-size:14px;text-align:center;transition:border-color .2s,background .2s}
.r-more span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--lime-ink)}
.r-more:hover{border-color:var(--lime);background:rgba(143,209,47,.06)}
body[data-store="dh"] .r-more span,.dh-zone .r-more span{background:#ee7d22;color:#1a0d02}
body[data-store="dh"] .r-more:hover{border-color:#ee7d22;background:rgba(238,125,34,.06)}

/* =====================================================================
   PASO 7 · pie de página: en el celular «Categorías» y «Ayuda» se pliegan (en PC se abren solas)
   ===================================================================== */
.f-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.f-acc summary::-webkit-details-marker{display:none}
.f-acc summary .f-h{margin-bottom:12px}
@media(max-width:699px){
  .f-acc{border-bottom:1px solid var(--line)}
  .f-acc summary{padding:14px 0}
  .f-acc summary .f-h{margin:0}
  .f-acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;translate:0 -3px;transition:rotate .25s var(--ease)}
  .f-acc[open] summary::after{rotate:225deg;translate:0 2px}
  .f-acc ul{padding-bottom:14px}
  footer .f-grid{gap:0}
  footer .f-about{padding-bottom:18px}
  footer .f-grid > div:last-child{padding-top:18px}
}

/* =====================================================================
   PASO 4 · Drinks House con su local: foto del local de fondo en las categorías y en el aviso «Estás en…»,
   y los listones de las mesas (gris con ranuras oscuras) como textura de los cajones de categoría y del banner.
   La madera es CSS (0 KB): no agrega peso.
   ===================================================================== */
:root{--dh-slats:repeating-linear-gradient(90deg,rgba(150,140,130,.07) 0 22px,rgba(0,0,0,.28) 22px 24px)}
.dh-page .dh-cats{position:relative;isolation:isolate;padding:12px;border-radius:var(--r);border:1px solid #2a2a2f;
  background:linear-gradient(180deg,rgba(12,12,14,.86),rgba(12,12,14,.94)),url(../img/marca/dh-tienda-360.webp) center 35%/cover #0d0d0f}
.dh-cat{background-image:var(--dh-slats),linear-gradient(160deg,#17171a,#0c0c0e)}
.dh-cat:hover{background-image:var(--dh-slats),linear-gradient(160deg,#1d1d21,#111114)}
.dh-ban{background-image:var(--dh-slats),radial-gradient(120% 140% at 0% 50%,#1e1e22 0%,#0b0b0d 60%)}
body[data-store="dh"] .store-chip{background:linear-gradient(90deg,rgba(11,11,13,.88),rgba(11,11,13,.72)),url(../img/marca/dh-tienda-360.webp) center 40%/cover #0b0b0d;border-color:#ee7d22}
@media(max-width:599px){.dh-page .dh-cats{padding:8px}}
.dh-btn{background:#ee7d22;color:#1a0d02}
.dh-ban:hover .dh-btn{background:#f59a4c;color:#1a0d02}

/* carrito · «Te puede faltar»: lo que suele ir con lo que llevas (fila que se desliza) */
.sug{margin:6px 20px 14px;padding:12px 0 2px;border-top:1px dashed var(--line-2)}
.sug-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--lime,#8fd12f);margin-bottom:10px}
.sug-h .ph{width:16px;height:16px}
.sug-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.sug-i{scroll-snap-align:start;display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--ink-3,#151912)}
.sug-i img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#0b0d0a}
.sug-i small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.25;color:var(--text)}
.sug-i b{font-size:13.5px}
.sug-i .add{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;min-height:0}
.sug-i .add .ph{margin:0}
body[data-store="dh"] .sug-h{color:#ee7d22}

/* saludo con el nombre del cliente arriba de las portadas */
.hello{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;margin:14px 0 6px;flex-wrap:wrap}
.hello-l{display:flex;align-items:center;gap:12px;min-width:0}
.hello p{display:grid;font-size:clamp(20px,2.4vw,26px);line-height:1.15;color:var(--text);font-weight:300}
.hello p b{font-weight:700;color:#8fd12f}
.hello p small{font-size:13.5px;color:var(--muted);font-weight:400;margin-top:2px}
/* derecha: repetir el último pedido y favoritos */
.hello-side{display:flex;gap:10px;flex-wrap:wrap}
.hello-rep,.hello-fav{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 10px;border-radius:16px;border:1px solid var(--line-2,#3a4235);
  background:linear-gradient(120deg,rgba(143,209,47,.10),rgba(143,209,47,.02));color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .2s,transform .2s}
.hello-rep:hover,.hello-fav:hover{border-color:#8fd12f;transform:translateY(-1px)}
.hello-rep b,.hello-fav b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.hello-rep b .ph{width:15px;height:15px;color:#8fd12f}
.hello-rep small,.hello-fav small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hello-th{display:flex}
.hello-th img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#0b0d0a;border:2px solid var(--bg,#141812);margin-left:-12px}
.hello-th img:first-child{margin-left:0}
.hello-fav{padding-left:14px}
.hello-fav > .ph{width:22px;height:22px;color:#e5484d}
body[data-store="dh"] .hello-rep,body[data-store="dh"] .hello-fav{background:linear-gradient(120deg,rgba(238,125,34,.10),rgba(238,125,34,.02))}
body[data-store="dh"] .hello-rep:hover,body[data-store="dh"] .hello-fav:hover{border-color:#ee7d22}
body[data-store="dh"] .hello-rep b .ph{color:#ee7d22}
@media(max-width:699px){.hello-side{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hello-rep,.hello-fav{flex:none}.hello-side::-webkit-scrollbar{display:none}}
.hello-w{font-size:30px;display:inline-block;transform-origin:70% 80%;animation:wave 1.6s ease-in-out .4s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
body[data-store="dh"] .hello p b{color:#ee7d22}

/* pedido enviado: la moto sale de la tienda hacia la casa del cliente */
.ms{position:relative;width:min(340px,100%);height:130px;margin:0 auto 4px;overflow:hidden;color:#8fd12f}
body[data-store="dh"] .ms{color:#ee7d22}
.ms-road{position:absolute;left:0;right:0;bottom:14px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line-2,#3a4235) 0 18px,transparent 18px 30px);animation:msRoad .35s linear 8}
@keyframes msRoad{to{background-position:-30px 0}}
.ms-go{position:absolute;bottom:12px;left:0;width:118px;animation:msRide 2.6s cubic-bezier(.45,0,.2,1) forwards}
.ms-moto{display:block;width:118px;height:auto;animation:msBob .28s ease-in-out 9 alternate}
@keyframes msBob{to{transform:translateY(-2px) rotate(-1deg)}}
@keyframes msRide{0%{transform:translateX(-110px)}28%{transform:translateX(60px)}52%{transform:translateX(70px)}86%{transform:translateX(206px);opacity:1}100%{transform:translateX(214px) scale(.5);opacity:0}}
.ms-wheel{transform-box:fill-box;transform-origin:center;animation:msSpin .3s linear 9}
@keyframes msSpin{to{transform:rotate(360deg)}}
.ms-lines{opacity:0;animation:msLines 2.6s linear forwards}
@keyframes msLines{0%,50%{opacity:0}58%,84%{opacity:.7}100%{opacity:0}}
.ms-home{position:absolute;right:10px;bottom:16px;width:56px;opacity:0;transform:translateY(10px) scale(.7);animation:msHome .6s cubic-bezier(.3,1.5,.5,1) 1.9s forwards}
.ms-home svg{display:block;width:56px;height:56px}
.ms-home i{position:absolute;left:50%;top:-14px;width:14px;height:14px;margin-left:-7px;border-radius:50% 50% 50% 0;background:currentColor;transform:rotate(-45deg);box-shadow:0 0 12px currentColor}
@keyframes msHome{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ms-go,.ms-moto,.ms-wheel,.ms-road,.ms-lines,.hello-w{animation:none}.ms-go{transform:translateX(90px)}.ms-home{animation:none;opacity:1;transform:none}}

/* PASO 1 · portada ya dibujada en index.html: si se entra directo a otra página, se esconde hasta que el código dibuje la correcta */
html.no-pre #view[data-pre]{visibility:hidden}