/* Tecno MZ — estilos del catálogo (versión 2 · Vitrina). Colores y tipografías como variables en :root.
   Dirección visual: la del logo. Negro, hueso y un dorado de acento; serif editorial en títulos. */
:root{
  --night:#0E0E0F; --night-2:#17171A; --bone:#F4F2EE; --paper:#FFFFFF; --ink:#141414;
  --muted:#66635D; --muted-d:#A9A59C; --line:#E6E3DD; --line-2:#DCD8D0; --light:#F3F1EC;
  --gold:#C8A96A; --gold-ink:#9C7B3C; --may-bg:#F1E9D8; --may-ink:#5A4520;
  --sand:#E9DFCB; --sand-ink:#2E2412; --wa:#1E7A45; --wa-bright:#25D366; --out:#A33A2C;
  --display:"Instrument Serif",Georgia,serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h,80px) + 70px)}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:40px;padding-right:40px}}

/* Botones */
.btn{height:54px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid transparent;text-decoration:none;font:600 15px var(--body);cursor:pointer;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn.light{background:var(--light);color:var(--night)}
.btn.ghost-light{border-color:rgba(243,241,236,.3);color:var(--light)}
.btn.sand{background:var(--sand-ink);color:var(--bone)}
.btn.sand-ghost{border-color:var(--sand-ink);color:var(--sand-ink)}
.btn.wa-btn{background:var(--wa-bright);color:var(--night)}

/* Header */
.bar{position:sticky;top:0;z-index:30;background:rgba(14,14,15,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;margin-right:auto}
.brand img{height:36px;width:auto;display:block}
.nav{display:none;gap:2px}
.nav a{padding:12px;border-radius:999px;color:#D9D6CF;text-decoration:none;font-size:14px;transition:background .3s,color .3s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.search{order:10;flex:1 1 100%;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:border-color .3s}
.search:focus-within{border-color:var(--gold)}
.search svg{width:17px;height:17px;stroke:#BEBAB2;flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--light);font:16px var(--body)}
.search input::placeholder{color:#8F8B83}
.mode{display:flex;padding:2px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.mode button{height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:#BEBAB2;font:600 13px var(--body);cursor:pointer;transition:background .35s,color .35s}
#m-min[aria-pressed="true"]{background:var(--light);color:var(--night)}
#m-may[aria-pressed="true"]{background:var(--gold);color:var(--night)}
.cart-btn{display:none;height:44px;padding:0 18px;align-items:center;gap:10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--light);font:600 14px var(--body);cursor:pointer}
.cart-btn svg{width:18px;height:18px}
.badge{min-width:24px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--gold);color:var(--night);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:760px){
  .brand img{height:42px}
  .search{order:0;flex:0 1 260px}
  .cart-btn{display:flex}
}
@media (min-width:1120px){.nav{display:flex}}

/* Hero */
.hero{background:var(--night);color:var(--light);overflow:hidden}
.hero-in{display:flex;flex-wrap:wrap;align-items:center;gap:30px 40px;padding-top:36px;padding-bottom:44px}
@media (min-width:760px){.hero-in{padding-top:72px;padding-bottom:88px}}
.hero-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:22px}
.eyebrow{margin:0;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero .eyebrow,.dark .eyebrow{color:var(--muted-d)}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(52px,8vw,112px);line-height:.94;letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:italic;color:var(--gold)}
.lead{margin:0;max-width:44ch;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--muted-d)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.dolar{margin:4px 0 0;display:flex;align-items:center;gap:10px;font:12px/1.4 var(--mono);color:var(--muted-d)}
.pulse{flex:none;width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.18);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* Vitrina 3D */
.showcase{flex:1 1 520px;min-width:0}
.stage{position:relative;height:300px;perspective:1100px;perspective-origin:50% 35%;touch-action:pan-y;user-select:none}
@media (min-width:760px){.stage{height:460px}}
.floor{position:absolute;left:12%;right:12%;bottom:-10px;height:70px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(200,169,106,.24),rgba(200,169,106,0) 70%)}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
.ring-card{position:absolute;left:50%;top:50%;width:150px;height:200px;margin:-100px 0 0 -75px;border-radius:22px;overflow:hidden;background:#1D1D20;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px rgba(0,0,0,.5)}
@media (min-width:760px){.ring-card{width:230px;height:300px;margin:-150px 0 0 -115px}}
.ring-card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.5);transition:filter .9s ease}
.ring-card.front img{filter:none}
.show-ctrl{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:22px}
.show-meta{margin:0;font:12px var(--mono);letter-spacing:.12em;color:var(--muted-d)}
.show-name{margin:6px 0 0;font-family:var(--display);font-size:clamp(28px,3vw,40px);line-height:1.05}
.show-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--gold);text-decoration:none;font-size:14px;font-weight:600}
.show-go svg{width:15px;height:15px}
.arrows{display:flex;gap:8px;flex:none}
.arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(243,241,236,.25);background:transparent;color:var(--light);cursor:pointer;transition:transform .3s var(--ease)}
.arrow:hover{transform:scale(1.06)}
.arrow.solid{background:var(--light);border-color:var(--light);color:var(--night)}
.arrow svg{width:18px;height:18px}
.dots{display:flex;gap:6px;margin-top:14px}
.dots span{height:3px;width:8px;border-radius:3px;background:rgba(243,241,236,.25);transition:width .6s var(--ease),background .6s}
.dots span.on{width:26px;background:var(--gold)}

/* Cinta */
.ticker{background:var(--gold);color:var(--night);overflow:hidden}
.ticker-track{display:flex;width:max-content;padding:15px 0;animation:ticker 40s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticker svg{width:9px;height:9px;fill:var(--night)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Secciones */
.sec{padding-top:76px}
@media (min-width:760px){.sec{padding-top:128px}}
.sec.dark{background:var(--night);color:var(--light);margin-top:76px;padding-bottom:76px}
@media (min-width:760px){.sec.dark{margin-top:128px;padding-bottom:128px}}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.h2{margin:10px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(42px,5.5vw,72px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.h2 em{font-style:italic}
.dark .h2 em{color:var(--gold)}
.sub{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.dark .sub{color:var(--muted-d)}
.count{margin:0;font:13px var(--mono);color:var(--muted)}

/* Pasos */
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:10px}
.steps .n{font-family:var(--display);font-style:italic;font-size:60px;line-height:1;color:var(--gold-ink)}
.steps h3{margin:12px 0 0;font-size:19px;font-weight:600}
.steps p{margin:0;font-size:15px;color:var(--muted)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.steps li{min-height:250px}.steps h3{margin-top:auto}}

/* Tarjetas de producto */
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(20,20,20,.04);transition:transform .6s var(--ease),box-shadow .4s ease;will-change:transform}
.card.tilting{transition:transform .12s ease-out,box-shadow .3s ease;box-shadow:0 30px 60px rgba(20,20,20,.16)}
.ph{position:relative;aspect-ratio:1/1;background:#ECEAE5;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .7s ease}
.ph .ilus-img{filter:grayscale(1)}
.card.tilting .ph img{transform:scale(1.06);filter:none}
.card.is-out .ph img{filter:grayscale(1) opacity(.45)}
.ph .icon{position:absolute;inset:0;margin:auto;width:34%;height:34%;stroke:var(--muted);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tag{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--ink);color:#fff}
.tag.out{background:var(--out)}
.ilus{position:absolute;right:10px;bottom:10px;font-size:10px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff}
.body{padding:12px;display:flex;flex-direction:column;gap:5px;flex:1}
.cat{margin:0;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h3{margin:0;font-size:14px;font-weight:600;line-height:1.3}
.desc{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.var{margin:0;font-size:13px;font-weight:600}
.price{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.price .l{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price .v{font-size:18px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.may{margin-top:auto;padding:9px 11px;border-radius:12px;background:var(--may-bg);color:var(--may-ink)}
.may .l{display:block;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.may .v{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.may .m{display:block;font-size:11px}
.actions{display:flex;gap:6px;margin-top:10px}
.add{flex:1;height:44px;padding:0 8px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:600 14px var(--body);line-height:1.2;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.add.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);font-size:13px}
.qty{flex:1;min-width:0;height:44px;display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--ink);border-radius:12px;font-weight:700;font-variant-numeric:tabular-nums}
.qty button{width:40px;height:40px;flex:none;border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}
.wa{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--wa);border-radius:12px;color:var(--wa)}
.wa svg{width:20px;height:20px}
@media (min-width:760px){.body{padding:18px}.card h3{font-size:16px}.price .v{font-size:20px}}

/* Combos: tarjetas sobre fondo negro */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:28px;padding-bottom:6px;scrollbar-width:thin}
.strip .card{flex:0 0 276px;scroll-snap-align:start}
@media (min-width:760px){.strip .card{flex-basis:340px}}
.dark .card{background:var(--night-2);border-color:rgba(255,255,255,.08);color:var(--light);box-shadow:none}
.dark .ph{aspect-ratio:16/10;background:#222225}
.dark .tag{background:var(--gold);color:var(--night);font-weight:700}
.dark .cat,.dark .desc,.dark .price .l{color:var(--muted-d)}
.dark .add{background:var(--light);color:var(--night);border-radius:999px}
.dark .add.ghost{background:transparent;color:var(--light);border-color:rgba(255,255,255,.2)}
.dark .qty{border-color:var(--light);border-radius:999px}
.dark .wa{border-color:#3DDC84;color:#3DDC84;border-radius:999px}

/* Categorías y grilla */
.chips{position:sticky;top:var(--header-h,75px);z-index:20;margin-top:16px;background:rgba(244,242,238,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chips .row{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.chips .row::-webkit-scrollbar{display:none}
.chip{flex:none;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink);font:500 14px var(--body);white-space:nowrap;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.chip small{margin-left:4px;font-size:inherit;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chip[aria-pressed="true"] small{color:inherit;opacity:.65}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:14px}
@media (min-width:760px){.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}}
.empty{grid-column:1/-1;padding:56px 16px;text-align:center;color:var(--muted)}
.empty a{color:var(--ink);font-weight:600}
.note{margin-top:18px;padding:16px 18px;border-radius:18px;background:var(--sand);color:var(--sand-ink);display:flex;gap:12px;align-items:flex-start}
.note svg{width:22px;height:22px;flex:none}
.note p{margin:0;font-size:14px;line-height:1.5}

/* Mayorista */
.may-box{background:var(--sand);color:var(--sand-ink);border-radius:30px;padding:26px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 56px}
@media (min-width:760px){.may-box{padding:56px}}
.may-box .eyebrow{color:var(--sand-ink)}
.may-copy{flex:1 1 440px;min-width:0}
.checks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.checks svg{width:20px;height:20px;flex:none;margin-top:2px}
.may-cta{flex:0 1 320px;display:flex;flex-direction:column;gap:10px}

/* Envíos, local y pagos */
.info{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.local{flex:2 1 480px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.map{position:relative;height:170px;background:#ECEAE5;overflow:hidden}
@media (min-width:760px){.map{height:240px}}
.map svg{width:100%;height:100%;display:block}
.pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.pin span{background:var(--ink);color:var(--bone);font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;white-space:nowrap}
.pin i{width:2px;height:16px;background:var(--ink)}
.pin b{width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.local-body{padding:22px 24px 18px}
.local-body h3,.info-card h3{margin:0;font-size:19px;font-weight:600}
.local-body p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:15px;font-weight:600}
.more svg{width:16px;height:16px}
.info-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.info-card{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:22px 24px}
.info-card .k{margin:0 0 8px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.info-card p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.info-card .k + h3{margin-top:0}

/* Opiniones */
.quotes{display:grid;gap:14px;margin-top:30px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.quote{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:14px}
.stars{display:flex;gap:3px}
.stars svg{width:15px;height:15px;fill:var(--gold-ink)}
.quote blockquote{margin:0;font-family:var(--display);font-size:24px;line-height:1.25}
.quote figcaption{margin-top:auto;font-size:14px;color:var(--muted)}

/* Preguntas frecuentes */
.faq-sec{padding-bottom:76px}
@media (min-width:760px){.faq-sec{padding-bottom:128px}}
.faq-in{display:flex;flex-wrap:wrap;gap:24px 64px}
.faq-head{flex:1 1 320px;min-width:0}
.faq-head .sub{margin-top:16px;max-width:36ch}
.faq{flex:2 1 520px;min-width:0;border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item h3{margin:0}
.faq-item button{width:100%;min-height:64px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:transparent;color:var(--ink);text-align:left;font:600 16px/1.35 var(--body);cursor:pointer}
@media (min-width:760px){.faq-item button{font-size:19px}}
.faq-item button svg{width:20px;height:20px;flex:none;transition:transform .45s var(--ease)}
.faq-item.open button svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a > div{visibility:visible;transition:visibility 0s}
.faq-a p{margin:0 0 20px;max-width:60ch;font-size:15px;line-height:1.6;color:var(--muted)}

/* Contacto y pie */
.contact{background:var(--night);color:var(--light)}
.contact-in{padding-top:76px;padding-bottom:76px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
@media (min-width:760px){.contact-in{padding-top:128px;padding-bottom:128px}}
.contact-in > div:first-child{flex:1 1 520px;min-width:0}
.contact h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(50px,7vw,96px);line-height:.95;letter-spacing:-.02em}
.contact h2 em{font-style:italic;color:var(--gold)}
.contact p{margin:18px 0 0;font-size:17px;line-height:1.55;color:var(--muted-d);max-width:42ch}
.contact-cta{flex:0 1 340px;display:flex;flex-direction:column;gap:10px}
.contact-cta .btn{height:58px;font-size:16px}
.foot{background:#0A0A0B;color:var(--muted-d);border-top:1px solid rgba(255,255,255,.06)}
.foot-in{padding-top:48px;padding-bottom:120px;display:grid;gap:32px}
@media (min-width:760px){.foot-in{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.foot img{height:64px;width:auto}
.foot h3{margin:0 0 6px;color:var(--light);font-size:14px;font-weight:600}
.foot p{margin:0;font-size:14px;line-height:1.55}

/* Barra del pedido */
.cartbar{position:fixed;z-index:40;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .55s var(--ease),opacity .4s ease}
.cartbar.show{transform:none;opacity:1;pointer-events:auto}
@media (min-width:760px){.cartbar{left:50%;right:auto;width:520px;transform:translate(-50%,160%)}.cartbar.show{transform:translate(-50%,0)}}
.cartbar button{width:100%;height:60px;padding:0 22px;display:flex;align-items:center;gap:12px;border:0;border-radius:999px;background:var(--ink);color:var(--light);box-shadow:0 18px 40px rgba(0,0,0,.28);font:14px var(--body);cursor:pointer}
.cartbar b{font-variant-numeric:tabular-nums}
.cartbar .go{margin-left:auto;font-weight:600}

/* Panel del pedido */
.sheet{position:fixed;inset:0;z-index:50;pointer-events:none}
.sheet.open{pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(10,10,11,.55);opacity:0;transition:opacity .45s ease}
.sheet.open .scrim{opacity:1}
.panel{position:absolute;left:0;right:0;bottom:0;max-height:88%;border-radius:26px 26px 0 0;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;box-shadow:0 -10px 50px rgba(0,0,0,.25);transform:translateY(105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.sheet.open .panel{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
@media (min-width:760px){.panel{left:auto;top:0;width:460px;max-width:100%;max-height:none;border-radius:0;transform:translateX(105%)}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 14px 6px 22px}
.panel-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1}
.x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--bone);color:var(--ink);cursor:pointer}
.x svg{width:18px;height:18px}
.lines{list-style:none;margin:0;padding:0 22px;overflow-y:auto;flex:1}
.lines li{padding:14px 0;border-bottom:1px solid #ECEAE5;display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.lines .name{font-size:15px;font-weight:600;line-height:1.3}
.lines .unit{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.lines .qty{flex:none;width:132px}
.lines .sub{text-align:right;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.lines .empty-cart{display:block;padding:40px 0;text-align:center;color:var(--muted);border:0}
.panel-foot{padding:16px 22px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid #ECEAE5;display:flex;flex-direction:column;gap:12px}
.progress{padding:14px 16px;border-radius:14px;background:var(--bone);display:flex;flex-direction:column;gap:10px}
.progress p{margin:0;font-size:13px;line-height:1.4}
.track{height:6px;border-radius:6px;background:#E0DCD4;overflow:hidden}
.fill{height:100%;width:0;border-radius:6px;background:var(--ink);transition:width .7s var(--ease),background .4s}
.fill.done{background:var(--wa)}
.sum{display:flex;align-items:baseline;justify-content:space-between}
.sum b{font-size:28px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fine{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.btn.wa-send{height:56px;background:var(--wa);color:#fff;font-size:16px}
.link{height:44px;border:0;background:transparent;color:var(--muted);font:13px var(--body);text-decoration:underline;cursor:pointer}

/* Aparición al hacer scroll */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ===== Movimiento por sección ===== */

/* Barra de progreso del scroll y header al bajar */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:60;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.bar{transition:background .4s ease,box-shadow .4s ease}
.bar.scrolled{background:rgba(14,14,15,.96);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Títulos que suben palabra por palabra */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em 0;margin:0 -.08em -.16em 0}
.js .split.reveal{opacity:1;transform:none}
.js .split .w>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1.1s var(--ease) calc(var(--d,0s) + var(--i,0) * 55ms)}
.js .split.in .w>span{transform:none}

/* Línea dorada que se dibuja antes de cada etiqueta */
.eyebrow::before{content:"";display:inline-block;width:0;height:1px;margin-right:0;vertical-align:middle;background:currentColor;transition:width .9s var(--ease) .35s,margin .9s var(--ease) .35s}
.in .eyebrow::before,.eyebrow.in::before,html:not(.js) .eyebrow::before{width:28px;margin-right:12px}

/* Inicio: brillo que sigue al mouse, vitrina flotando */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at var(--mx,72%) var(--my,42%),rgba(200,169,106,.14),rgba(200,169,106,0) 62%)}
.hero-copy{will-change:transform,opacity}
.stage{animation:float 8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.ring-card{transition:box-shadow .9s ease,border-color .9s ease}
.ring-card.front{border-color:rgba(200,169,106,.55);box-shadow:0 30px 80px rgba(200,169,106,.22),0 30px 60px rgba(0,0,0,.5)}
.ticker:hover .ticker-track{animation-play-state:paused}

/* Tarjetas que entran en cascada */
.anim .card{animation:cardIn .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms)}
.wait .card{animation-play-state:paused}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.97)}}
.dark .card .ph img{transition:transform .8s var(--ease),filter .8s ease}
.dark .card:hover .ph img{transform:scale(1.06);filter:none}
.chip{transition:background .3s,color .3s,border-color .3s,translate .3s var(--ease)}
.chip:hover{translate:0 -2px}

/* Punto dorado que vuela al pedido */
.fly{position:fixed;z-index:70;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(200,169,106,.25);pointer-events:none}
.badge.bump{animation:bump .55s var(--ease)}
@keyframes bump{40%{transform:scale(1.4)}}

/* Pasos, envíos y opiniones: se levantan al pasar el mouse */
.js .steps li.reveal,.js .info-card.reveal,.js .quote.reveal{transition:opacity 1s ease var(--d,0s),transform 1.1s var(--ease) var(--d,0s),translate .45s var(--ease),border-color .4s ease,box-shadow .5s ease}
.steps li:hover,.info-card:hover,.quote:hover{translate:0 -6px;border-color:var(--gold);box-shadow:0 24px 50px rgba(20,20,20,.08)}
.steps .n{display:inline-block;transition:transform .6s var(--ease)}
.steps li:hover .n{transform:translateX(8px)}

/* Mayorista: destello que cruza y tildes que se dibujan */
.may-box{position:relative;overflow:hidden}
.may-box::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg);animation:sheen 7s ease-in-out 1.5s infinite}
@keyframes sheen{0%{left:-40%}28%,100%{left:130%}}
.js .checks li{opacity:0;transform:translateX(-14px);transition:opacity .7s ease,transform .8s var(--ease)}
.js .checks path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease)}
.js .may-box.in .checks li{opacity:1;transform:none}
.js .may-box.in .checks path{stroke-dashoffset:0}
.checks li:nth-child(1),.checks li:nth-child(1) path{transition-delay:.35s}
.checks li:nth-child(2),.checks li:nth-child(2) path{transition-delay:.5s}
.checks li:nth-child(3),.checks li:nth-child(3) path{transition-delay:.65s}

/* Mapa: las calles se dibujan y cae el pin */
.js .local .street{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.js .local.in .street{stroke-dashoffset:0}
.local .street:nth-child(2){transition-delay:.1s}.local .street:nth-child(3){transition-delay:.2s}.local .street:nth-child(4){transition-delay:.3s}
.local .street:nth-child(5){transition-delay:.4s}.local .street:nth-child(6){transition-delay:.5s}.local .street:nth-child(7){transition-delay:.6s}.local .street:nth-child(8){transition-delay:.2s}
.js .local .pin{opacity:0;transform:translate(-50%,-160%);transition:opacity .6s ease .9s,transform .9s var(--ease) .9s}
.js .local.in .pin{opacity:1;transform:translate(-50%,-100%)}
.pin b{position:relative}
.pin b::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold);animation:ping 2.2s ease-out infinite}
@keyframes ping{to{transform:scale(2.8);opacity:0}}

/* Contacto: luz dorada que se mueve y botón de WhatsApp con destello */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;z-index:-1;width:720px;height:720px;right:-220px;top:-320px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(200,169,106,.18),rgba(200,169,106,0) 65%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-180px,140px)}}
.btn.wa-btn{position:relative;overflow:hidden}
.btn.wa-btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);animation:sheen 4.5s ease-in-out 2s infinite}

/* Botones que siguen un poco al mouse (solo compu) */
.magnet{transition:transform .35s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}