/* JD Bazar — estilos (mobile first). Tokens de color en :root. */
:root{--background:#F6F1EA;--surface:#FFFDFC;--foreground:#191715;--muted:#756D66;--border:#DED6CE;--accent:#C8663D;--accent-strong:#A84F2B;--laser:#FF6A32}
body{margin:0;background:#F6F1EA;color:#191715;font-family:"Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#191715}a:hover{color:#A84F2B}
:focus-visible{outline:2px solid #A84F2B;outline-offset:3px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px}
.h{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin:0}
.h-xl{font-size:clamp(2.75rem,1.7rem + 4.4vw,6.5rem)}
.h-l{font-size:clamp(2rem,1.3rem + 2.8vw,4.25rem)}
.h-m{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem)}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;color:#5E5751;margin:0;max-width:34ch}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#756D66;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:500;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn-primary{background:#A84F2B;color:#FFFDFC}.btn-primary:hover{background:#8F4223;color:#FFFDFC}
.btn-ghost{background:transparent;color:#191715;border-color:#CFC5BA}.btn-ghost:hover{border-color:#191715;color:#191715}
.btn-light{background:#FFFDFC;color:#191715}.btn-light:hover{background:#F1E7DC;color:#191715}
.btn-line-light{background:transparent;color:#FFFDFC;border-color:rgba(255,253,252,.35)}.btn-line-light:hover{border-color:#FFFDFC;color:#FFFDFC}
.section{padding:72px 0}
@media(min-width:1024px){.wrap{padding:0 48px}.section{padding:120px 0}}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(246,241,234,.9);backdrop-filter:blur(6px);border-bottom:1px solid #DED6CE}
.hdr-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{font-family:"Manrope",sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none;color:#191715}
.logo span{color:#A84F2B}
.nav{display:none;gap:28px}
.nav a{text-decoration:none;font-size:.95rem;color:#3A3530}
.hdr-cta{display:none;gap:10px;align-items:center}
.menu-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #DED6CE;border-radius:999px;cursor:pointer;color:#191715}
.mnav{border-top:1px solid #DED6CE;padding:12px 0 24px;display:flex;flex-direction:column}
.mnav a{display:flex;align-items:center;min-height:52px;font-size:1.25rem;font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid #E8E0D7}
.mnav .btn{margin-top:20px}
@media(min-width:1024px){.nav,.hdr-cta{display:flex}.menu-btn{display:none}}

/* hero */
.hero{padding:40px 0 56px}
.hero-grid{display:grid;gap:36px}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas .btn{flex:1 1 160px}
.hero-visual{position:relative;border-radius:6px;overflow:hidden;background:#E9DFD3;aspect-ratio:4/4.2}
.hero-tag{position:absolute;left:16px;bottom:16px;background:#FFFDFC;border-radius:999px;padding:8px 14px;font-size:.82rem;display:flex;gap:8px;align-items:center}
.hero-tag i{width:8px;height:8px;border-radius:50%;background:#C8663D;display:inline-block}
@media(min-width:1024px){.hero{padding:72px 0 96px}.hero-grid{grid-template-columns:45fr 55fr;align-items:center;gap:56px}.hero-ctas .btn{flex:0 0 auto}.hero-visual{aspect-ratio:5/5.4}}

/* laser */
.laser{position:relative;display:inline-block}
.laser .ghost{color:rgba(25,23,21,.13)}
.laser .ink{position:absolute;inset:0;clip-path:inset(0 100% 0 0);animation:ink var(--d,1.2s) cubic-bezier(.45,.05,.35,1) var(--delay,.35s) forwards}
.laser .beam{position:absolute;top:-6%;bottom:-6%;left:0;width:2px;background:#FF6A32;box-shadow:0 0 10px 2px rgba(255,106,50,.55),0 0 2px #FFD2BE;opacity:0;animation:beam var(--d,1.2s) cubic-bezier(.45,.05,.35,1) var(--delay,.35s) forwards}
.laser-dark .ghost{color:rgba(255,253,252,.14)}
.laser-dark .ink{color:#E58A63}
@keyframes ink{to{clip-path:inset(0 0 0 0)}}
@keyframes beam{0%{left:0;opacity:1}88%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.laser .ink{animation:none;clip-path:none}.laser .beam{display:none}}

/* product objects (placeholders until real photos) */
.shot{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.obj{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:10%}
.obj-body{position:relative;border-radius:18px 18px 16px 16px;box-shadow:inset -14px 0 22px rgba(0,0,0,.18),inset 10px 0 16px rgba(255,255,255,.12)}
.obj-cap{border-radius:10px 10px 4px 4px;background:#26221F;box-shadow:inset -6px 0 10px rgba(0,0,0,.3)}
.obj-handle{display:none}
.obj-straw{display:none}
.obj-mark{position:absolute;left:0;right:0;top:44%;text-align:center;font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:.08em;font-size:clamp(.6rem,.5rem + .4vw,.9rem);color:rgba(255,253,252,.78);text-shadow:0 -1px 0 rgba(0,0,0,.25)}
.obj-termo .obj-cap{width:72px;height:44px}
.obj-termo .obj-body{width:96px;height:300px}
.obj-vaso .obj-cap{width:112px;height:22px;border-radius:12px 12px 4px 4px}
.obj-vaso .obj-body{width:104px;height:200px;border-radius:6px 6px 26px 26px}
.obj-vaso .obj-straw{display:block;position:absolute;top:-70px;left:58%;width:7px;height:80px;background:#2C2724;border-radius:4px;transform:rotate(8deg)}
.obj-hoppie .obj-cap{width:124px;height:18px;border-radius:10px 10px 3px 3px}
.obj-hoppie .obj-body{width:118px;height:150px;border-radius:8px 8px 22px 22px}
.obj-hoppie .obj-handle{display:block;position:absolute;right:-34px;top:58px;width:44px;height:74px;border:10px solid;border-left:none;border-radius:0 26px 26px 0}
.sm .obj{transform:scale(.62);transform-origin:bottom center;margin-bottom:6%}
.md .obj{transform:scale(.82);transform-origin:bottom center}
.lg .obj{transform:scale(1.25);transform-origin:bottom center;margin-bottom:12%}
.shadow{position:absolute;bottom:8%;left:50%;width:140px;height:18px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(25,23,21,.22),transparent);border-radius:50%}
.sm .shadow{width:90px;bottom:5%}
/* móvil: los productos se ajustan al contenedor (no se cortan) */
@media(max-width:639px){
  .lg .obj{transform:scale(.8)}
  .md .obj{transform:scale(.6)}
  .sm .obj{transform:scale(.45)}
  .hero-stage{transform:scale(.72);transform-origin:50% 100%}
  .pers-stage .engrave{width:76px;font-size:.62rem;letter-spacing:.04em;transform:translate(-50%,0)}
  .pers-stage .engrave-frase{font-size:.56rem}
  .biz .biz-img{aspect-ratio:4/3}
  .btn{text-align:center}
}
@media(min-width:640px) and (max-width:1023px){.hero-visual{aspect-ratio:4/3}.hero-stage{transform:scale(.95);transform-origin:50% 100%}}

/* categories */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
@media(min-width:1024px){.sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:48px}}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cat{position:relative;display:block;border-radius:6px;overflow:hidden;text-decoration:none;color:#191715;min-height:220px}
.cat .shot{position:absolute;inset:0;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.cat-label{position:absolute;left:16px;top:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.cat-label strong{font-family:"Manrope",sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.cat-arrow{width:36px;height:36px;border-radius:50%;background:#FFFDFC;display:inline-flex;align-items:center;justify-content:center;transition:transform .35s}
.cat-wide{grid-column:span 2}
.cat-termos{min-height:340px}
@media(hover:hover){.cat:hover .shot{transform:scale(1.035)}.cat:hover .cat-arrow{transform:translateX(5px)}}
@media(min-width:1024px){.bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:280px 280px 300px;gap:16px}.cat{min-height:0}.cat-termos{grid-column:1 / span 2;grid-row:1 / span 2}.cat-vasos{grid-column:3;grid-row:1}.cat-hoppies{grid-column:3;grid-row:2}.cat-regalos{grid-column:1;grid-row:3}.cat-personalizados{grid-column:2 / span 2;grid-row:3}.cat-wide{grid-column:auto}.cat-label strong{font-size:1.5rem}}

/* products */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:thin}
.pcard{flex:0 0 76%;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#191715}
.pimg{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#EAE1D6}
.pimg .shot{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.pmeta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pname{font-weight:500;font-size:1.02rem;margin:0}
.pprice{color:#5E5751;margin:0;white-space:nowrap}
.pflag{font-size:.8rem;color:#A84F2B;display:inline-flex;gap:6px;align-items:center}
.pflag i{width:6px;height:6px;border-radius:50%;background:#C8663D;display:inline-block}
.more{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:28px;font-weight:500;text-decoration:none;border-bottom:1px solid #191715}
@media(hover:hover){.pcard:hover .pimg .shot{transform:scale(1.025)}}
@media(min-width:640px){.pcard{flex-basis:44%}}
@media(min-width:1024px){.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;overflow:visible;margin:0;padding:0}}

/* personalization */
.dark{background:#191715;color:#FFFDFC}
.dark .lead{color:#C9C0B7}
.dark .eyebrow{color:#B5ACA3}
.pers{display:grid;gap:40px}
.pers-copy{display:flex;flex-direction:column;gap:22px}
.tabs{display:inline-flex;padding:4px;border:1px solid rgba(255,253,252,.18);border-radius:999px;gap:4px;align-self:flex-start}
.tab{min-height:44px;padding:0 20px;border-radius:999px;border:none;background:transparent;color:#C9C0B7;font:inherit;cursor:pointer}
.tab-on{background:#FFFDFC;color:#191715}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.85rem;color:#C9C0B7}
.field input{min-height:56px;border-radius:6px;border:1px solid rgba(255,253,252,.22);background:rgba(255,253,252,.04);color:#FFFDFC;font:inherit;font-size:1.15rem;padding:0 16px;letter-spacing:.04em}
.field input:focus{outline:2px solid #E58A63;outline-offset:2px;border-color:transparent}
.note{font-size:.82rem;color:#A39A91;margin:0}
.pers-stage{position:relative;border-radius:6px;overflow:hidden;background:#2A2522;aspect-ratio:4/4.4}
.engrave{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:150px;text-align:center;font-family:"Manrope",sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.1em;line-height:1.25;word-break:break-word;color:rgba(255,253,252,.95);transition:color .3s,text-shadow .3s}
.engrave-frase{font-size:.82rem;letter-spacing:.04em;font-weight:500}
.engrave-done{color:rgba(214,205,196,.72);text-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 rgba(0,0,0,.55)}
.burn{position:absolute;top:-8px;bottom:-8px;left:0;width:2px;background:#FF6A32;box-shadow:0 0 8px 2px rgba(255,106,50,.5);animation:beam .8s cubic-bezier(.45,.05,.35,1) forwards}
.pers-stage .obj-body{background:#5B5F58}
@media(prefers-reduced-motion:reduce){.burn{display:none}}
@media(min-width:1024px){.pers{grid-template-columns:1fr 1fr;align-items:center;gap:80px}}

/* before / after */
.ba{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3.4;background:#E7DDD1;user-select:none}
.ba-layer{position:absolute;inset:0}
.ba-after{background:#E2D5C6}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:.72rem;font-weight:600;letter-spacing:.14em;background:#FFFDFC;padding:7px 11px;border-radius:999px}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:#FFFDFC;z-index:3;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#FFFDFC;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba-range:focus-visible + .ba-handle .ba-knob{outline:2px solid #A84F2B;outline-offset:3px}
.ba-grid{display:grid;gap:32px}
@media(min-width:1024px){.ba-grid{grid-template-columns:5fr 7fr;align-items:center;gap:72px}.ba{aspect-ratio:16/11}}

/* gifts */
.gifts{display:grid;gap:16px}
.gcard{display:flex;flex-direction:column;gap:12px}
.gimg{aspect-ratio:5/4;border-radius:6px;overflow:hidden}
.gcard h3{font-family:"Manrope",sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.02em;margin:4px 0 0}
.gcard p{margin:0;color:#5E5751}
@media(min-width:768px){.gifts{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* business */
.biz{display:grid;gap:28px;background:#FFFDFC;border:1px solid #DED6CE;border-radius:6px;padding:24px;align-items:center}
.biz-img{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#E5DBCF}
@media(min-width:1024px){.biz{grid-template-columns:1fr 1fr;padding:48px;gap:56px}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gitem{position:relative;display:block;aspect-ratio:1/1;border-radius:4px;overflow:hidden;text-decoration:none}
.gitem .shot{transition:transform .4s}
.gover{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;background:linear-gradient(to top,rgba(25,23,21,.55),transparent 55%);color:#FFFDFC;font-size:.85rem;opacity:0;transition:opacity .3s}
.gtall{aspect-ratio:1/1}
@media(hover:hover){.gitem:hover .shot{transform:scale(1.02)}.gitem:hover .gover,.gitem:focus-visible .gover{opacity:1}}
@media(min-width:1024px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gtall{grid-row:span 2;aspect-ratio:auto}}

/* final + footer */
.final{text-align:left}
.final-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.contacts{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,253,252,.16);color:#C9C0B7}
.contacts a{color:#FFFDFC;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.contacts a:hover{color:#E58A63}
.foot{padding:40px 0 96px;font-size:.92rem;color:#5E5751}
.foot-row{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.foot a{text-decoration:none;color:#3A3530;min-height:44px;display:inline-flex;align-items:center}
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:30;width:52px;height:52px;border-radius:50%;background:#191715;color:#FFFDFC;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(25,23,21,.25);text-decoration:none}
.wa-fab:hover{background:#A84F2B;color:#FFFDFC}