/* =========================================================
   BALANCE · aromas para el alma — v2 "Dulcería"
   Paleta: cherry #65232B · blossom #ECAAB2 · truffle #432720 · ivory #F8E5D7
   Tipos: Fraunces (display retro suave) + Jost (versalitas espaciadas)
   ========================================================= */
:root{
  --cherry:#65232B; --cherry-2:#7a2e37; --blossom:#ECAAB2; --blossom-2:#f4c9ce; --truffle:#432720; --truffle-2:#2b1914;
  --ivory:#F8E5D7; --cream:#FCF3EC; --paper:#FFFAF6;
  --ink:var(--truffle); --muted:#7b5a50;
  --r-lg:30px; --r-md:20px; --r-sm:12px;
  --arch:999px 999px 22px 22px;
  --shadow:0 30px 60px -34px rgba(67,39,32,.45);
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --stripe:clamp(54px,7vw,98px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blossom);color:var(--cherry)}
.container{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}

/* ---------- tipografía ---------- */
.serif,h1,h2,h3{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-optical-sizing:auto}
h1,h2{font-weight:800;letter-spacing:-.025em;line-height:.95;color:var(--cherry)}
h2{font-size:clamp(2.4rem,5.8vw,4.8rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.1}
em,.it{font-family:var(--serif);font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1}
h1 em,h2 em{font-weight:400}
.eyebrow,.tracked{font-family:var(--sans);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--cherry)}
.tracked.lg{font-size:clamp(.85rem,1.6vw,1.2rem);letter-spacing:.42em}
.flame-cursor{display:none}

/* ---------- rayas de dulcería ---------- */
.stripes{background:repeating-linear-gradient(90deg,var(--blossom-2) 0 var(--stripe),var(--ivory) var(--stripe) calc(var(--stripe) * 2))}
.stripes.thin{--stripe:22px}
.scallop{display:block;width:100%;height:28px;color:var(--cream)}
.scallop.top{transform:scaleY(-1)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.55rem .55rem .55rem 1.5rem;border-radius:999px;background:var(--cherry);color:var(--ivory);font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:transform .4s var(--ease),background .3s;white-space:nowrap;border:1.5px solid var(--cherry)}
.btn .arw{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--ivory);color:var(--cherry);transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--truffle);border-color:var(--truffle)}
.btn:hover .arw{transform:rotate(-45deg)}
.btn.light{background:var(--cream);color:var(--cherry)} .btn.light .arw{background:var(--cherry);color:var(--ivory)}
.btn.light:hover{background:var(--ivory);border-color:var(--cherry)}
.btn.hot{background:var(--cherry)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor;padding:.85rem 1.5rem}
.btn.ghost:hover{background:var(--cherry);color:var(--ivory);border-color:var(--cherry)}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 1rem;border-radius:999px;border:1.5px solid var(--cherry);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--cherry);background:var(--cream)}
.dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--cherry);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.45rem .5rem .45rem 1.3rem;border-radius:999px;background:rgba(252,243,236,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid rgba(101,35,43,.18);box-shadow:0 16px 40px -26px rgba(67,39,32,.5);transition:transform .5s var(--ease)}
.nav.hide{transform:translate(-50%,-140%)}
.nav .logo img{height:44px;width:auto}
.nav-links{display:flex;gap:.2rem;list-style:none}
.nav-links a{padding:.6rem 1rem;border-radius:999px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--cherry);transition:background .3s}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--blossom-2)}
.nav-actions{display:flex;gap:.4rem;align-items:center}
.icon-btn{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;background:var(--ivory);color:var(--cherry);position:relative;transition:transform .3s var(--ease)}
.icon-btn:hover{transform:scale(1.06)}
.icon-btn.dark{background:var(--cherry);color:var(--ivory)}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:1.3rem;height:1.3rem;border-radius:999px;background:var(--blossom);color:var(--cherry);font-size:.7rem;font-weight:600;display:grid;place-items:center;padding:0 .3rem;transform:scale(0);transition:transform .4s var(--ease);border:2px solid var(--cream)}
.cart-count.on{transform:scale(1)}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
.menu-btn{display:none}
@media (max-width:900px){
  .nav-links{position:fixed;inset:70px 0 auto 0;margin:0 12px;flex-direction:column;padding:1rem;border-radius:var(--r-md);background:var(--cream);border:1.5px solid rgba(101,35,43,.18);box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.35s var(--ease)}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{display:block;font-size:.9rem}
  .menu-btn{display:grid}
  .nav .logo img{height:38px}
}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-50px)} [data-reveal="right"]{transform:translateX(50px)} [data-reveal="zoom"]{transform:scale(.9)}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split-words .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.split-words.in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}.split-words .w>span{transform:none}}

/* ---------- marcos ---------- */
.arch{border-radius:var(--arch);overflow:hidden;position:relative;background:var(--blossom-2)}
.arch img{width:100%;height:100%;object-fit:cover}
.frame{padding:10px;background:var(--cream);border:1.5px solid var(--cherry);border-radius:var(--arch);box-shadow:var(--shadow)}

/* =========================================================
   HERO · video de fondo + titular en overlay
   ========================================================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:130px 0 120px;isolation:isolate;color:var(--cherry);background:var(--truffle-2)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:heroZoom 18s ease-out both}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%,rgba(43,25,20,.55),rgba(43,25,20,0) 70%),
    linear-gradient(180deg,rgba(43,25,20,.55) 0%,rgba(43,25,20,.18) 32%,rgba(43,25,20,.25) 62%,rgba(43,25,20,.72) 100%)}
.hero-center{text-align:center;position:relative;z-index:2;padding:2rem clamp(1rem,4vw,3rem);color:var(--ivory);text-shadow:0 2px 30px rgba(43,25,20,.35)}
.hero-lotus{width:clamp(48px,5.4vw,72px);height:auto;margin:0 auto clamp(.6rem,1.6vw,1.2rem);opacity:.95;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 4px 18px rgba(43,25,20,.35))}
.hero-title{color:var(--ivory);display:flex;flex-direction:column;align-items:center;line-height:1}
.ht-big{font-size:clamp(4.6rem,15vw,12.5rem);font-weight:500;letter-spacing:-.035em;line-height:.82;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.ht-big .ch{display:inline-block;animation:drop 1.1s var(--ease) both}
.ht-big .ch:nth-child(3),.ht-big .ch:nth-child(5){font-style:italic;font-weight:400}
.ht-mid{margin-top:clamp(.5rem,1.4vw,1rem);font-family:var(--sans);font-size:clamp(.95rem,2vw,1.55rem);font-weight:600;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;animation:fadeUp 1s .7s var(--ease) both}
.ht-mid em{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:1.45em;font-weight:400;padding:0 .05em;color:var(--blossom-2)}
@keyframes drop{from{opacity:0;transform:translateY(-.4em) rotate(-8deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
.hero-sub{margin-top:clamp(1.1rem,2.4vw,1.8rem);font-size:clamp(.72rem,1.15vw,.9rem);letter-spacing:.3em;text-transform:uppercase;font-weight:500;padding-left:.3em;animation:fadeUp 1s .95s var(--ease) both}
.hero-sub em{font-family:var(--serif);text-transform:none;letter-spacing:.02em;font-size:1.35em;font-weight:400}
.hero-sub i,.hero-meta i{font-style:normal;opacity:.6;margin:0 .35em}
.hero-meta{margin-top:.5rem;font-family:var(--serif);font-size:clamp(.82rem,1.1vw,.95rem);letter-spacing:.06em;opacity:.85;animation:fadeUp 1s 1.1s var(--ease) both}
.hero-meta span{font-style:italic;opacity:.8}
.hero-links{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:2;display:flex;gap:clamp(1.4rem,4vw,3rem);animation:fadeUp 1s 1.3s var(--ease) both}
.hero-links a{position:relative;color:var(--ivory);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;padding:.4rem 0;white-space:nowrap}
.hero-links a::after{content:"";position:absolute;left:0;right:.34em;bottom:0;height:1px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--ease)}
.hero-links a:hover::after,.hero-links a:focus-visible::after{transform:scaleX(1)}
.hero-season{position:absolute;left:var(--gut);bottom:56px;z-index:2;display:flex;align-items:center;gap:.7rem;padding:.5rem .55rem .5rem 1rem;border-radius:999px;background:rgba(252,243,236,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid var(--cherry);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cherry);font-weight:500}
.mini-count{padding:.35rem .8rem;border-radius:999px;background:var(--cherry);color:var(--ivory);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.hero .scallop{position:absolute;left:0;right:0;bottom:-1px;height:30px;z-index:3}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:1100px){.hero-season{bottom:auto;top:88px;left:50%;transform:translateX(-50%);white-space:nowrap}}
@media (max-width:900px){.hero{padding:120px 0 140px}.hero-season{font-size:.6rem}}
@media (max-width:520px){.mini-count{display:none}.hero-center{padding-inline:.6rem}.hero-links{bottom:48px}.hero-links a{font-size:.64rem;letter-spacing:.26em}}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:var(--cherry);color:var(--ivory);padding:1rem 0;position:relative;z-index:2}
.ticker.blossom{background:var(--blossom);color:var(--cherry)}
.ticker-track{display:flex;width:max-content;animation:marq 42s linear infinite}
.ticker.blossom .ticker-track{animation-direction:reverse}
.ticker span{font-size:.85rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;padding:0 1.6rem;display:flex;align-items:center;gap:1.6rem;white-space:nowrap}
.ticker span::after{content:"✦";letter-spacing:0;font-size:.9rem;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
.section{padding:clamp(80px,11vw,150px) 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(36px,6vw,64px);flex-wrap:wrap}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head p{max-width:420px;color:var(--muted)}
.sec-head .eyebrow{display:block;margin-bottom:1rem}
.intro{text-align:center}
.intro h2{font-size:clamp(2rem,4.6vw,3.8rem);font-weight:600;max-width:1050px;margin:1.4rem auto 0;color:var(--truffle);line-height:1.08}
.intro h2 em{color:var(--cherry)}
.intro-photos{display:flex;justify-content:center;gap:clamp(12px,2vw,24px);margin-top:3rem}
.intro-photos .frame{width:clamp(110px,15vw,190px);aspect-ratio:3/4}
.intro-photos .frame:nth-child(odd){transform:translateY(24px) rotate(-3deg)}
.intro-photos .frame:nth-child(even){transform:rotate(3deg)}
.intro-photos .arch{height:100%}

/* =========================================================
   Nº 01 · Lovely Cherry — bloque cherry
   ========================================================= */
.feature{background:var(--cherry);color:var(--ivory);overflow:hidden}
.feature h2,.feature .eyebrow{color:var(--ivory)}
.feature-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}
.feature .frame{background:var(--cherry);border-color:var(--blossom);aspect-ratio:3/4;max-width:460px;margin-inline:auto;width:100%}
.feature .frame .arch{height:100%}
.feature-num{font-family:var(--serif);font-size:clamp(5rem,14vw,11rem);font-weight:300;line-height:.8;color:var(--blossom);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic}
.feature h2{font-size:clamp(3rem,7vw,6rem)}
.feature p.lead{color:#f3d8cf;max-width:460px;margin-top:1.2rem;font-size:1.05rem}
.notes{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.notes span{padding:.45rem 1rem;border-radius:999px;border:1.5px solid currentColor;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.price-tag{display:flex;align-items:baseline;gap:.6rem;margin:1rem 0 1.6rem}
.price-tag b{font-family:var(--serif);font-size:2.6rem;font-weight:700;letter-spacing:-.02em}
.feature .btn{background:var(--ivory);color:var(--cherry);border-color:var(--ivory)} .feature .btn .arw{background:var(--cherry);color:var(--ivory)}
.feature .btn:hover{background:var(--blossom);border-color:var(--blossom)}
.tag-label{position:absolute;right:-6px;top:28px;transform:rotate(8deg);background:var(--blossom);color:var(--cherry);padding:.7rem 1.1rem .7rem 1.6rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);z-index:2}
.tag-label::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--cherry)}
.feature-photo{position:relative}

/* =========================================================
   Cartas de amor — tarjetas con toldo
   ========================================================= */
.love-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,30px);perspective:1200px}
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.love-card{position:relative;border-radius:var(--r-lg);background:var(--paper);border:1.5px solid rgba(101,35,43,.2);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.love-card .awning{height:44px;background:repeating-linear-gradient(90deg,var(--blossom) 0 22px,var(--ivory) 22px 44px);position:relative}
.love-card .awning::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;background:radial-gradient(circle at 11px 0,var(--blossom) 10px,transparent 10.5px) 0 0/44px 12px,radial-gradient(circle at 33px 0,var(--ivory) 10px,transparent 10.5px) 0 0/44px 12px}
.love-card .arch{margin:26px 18px 0;aspect-ratio:4/4.6;border-radius:var(--arch)}
.love-card .arch img{transition:transform 1.2s var(--ease)}
.love-card:hover .arch img{transform:scale(1.06)}
.love-card .info{padding:1.1rem 1.3rem 1.3rem;display:flex;justify-content:space-between;align-items:end;gap:1rem;transform:translateZ(30px)}
.love-card .info small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.35rem;line-height:1.5}
.love-card:nth-child(2){transform:translateY(40px)}
.love-heart{position:absolute;pointer-events:none;color:var(--cherry);animation:rise 2.2s var(--ease) forwards;font-size:20px;z-index:5}
@keyframes rise{to{transform:translateY(-140px) scale(1.6) rotate(20deg);opacity:0}}
@media (max-width:860px){.love-grid{grid-template-columns:1fr 1fr}.love-card:nth-child(2){transform:none}}
@media (max-width:560px){.love-grid{grid-template-columns:1fr}}
.add{width:2.8rem;height:2.8rem;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--cherry);color:var(--ivory);transition:transform .35s var(--ease),background .3s}
.add:hover{transform:rotate(90deg) scale(1.08);background:var(--truffle)}

/* =========================================================
   SALEM'S WITCHES — caldero interactivo
   ========================================================= */
.salem{background:radial-gradient(ellipse at 50% 120%,#5a2a2e 0%,var(--truffle) 40%,var(--truffle-2) 80%);color:var(--ivory);overflow:hidden;position:relative}
.salem::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#f8e5d7,transparent),radial-gradient(1px 1px at 30% 70%,#f8e5d7,transparent),radial-gradient(1.5px 1.5px at 80% 30%,#f8e5d7,transparent),radial-gradient(1px 1px at 60% 15%,#f8e5d7,transparent),radial-gradient(1px 1px at 90% 80%,#f8e5d7,transparent),radial-gradient(1.5px 1.5px at 45% 45%,#f8e5d7,transparent);background-size:380px 380px;opacity:.5;animation:twinkle 5s infinite alternate}
@keyframes twinkle{to{opacity:.15}}
.moon{position:absolute;right:8%;top:70px;width:96px;height:96px;border-radius:50%;box-shadow:-20px 10px 0 0 var(--blossom);transform:rotate(-20deg);opacity:.9}
.salem .eyebrow{color:var(--blossom)}
.salem h2{color:var(--ivory)} .salem h2 em{color:var(--blossom)}
.salem .sec-head p{color:#e6cfc6}
.salem-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;position:relative;z-index:1}
.cauldron-stage{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin-inline:auto}
.cauldron-stage .cauldron-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;-webkit-mask:radial-gradient(closest-side,#000 58%,transparent 100%);mask:radial-gradient(closest-side,#000 58%,transparent 100%);animation:brew 4s ease-in-out infinite}
@keyframes brew{50%{transform:translateY(-6px) rotate(-1deg)}}
.cauldron-stage:has(.cauldron-img:not([hidden])) .smoke{display:none}
.cauldron-svg{position:absolute;left:10%;right:10%;bottom:0;z-index:2}
.cauldron-svg .liquid{transition:fill .8s}
.brew-glow{position:absolute;left:20%;right:20%;bottom:30%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(236,170,178,.85),rgba(101,35,43,.3),transparent);filter:blur(20px);z-index:1;animation:glow 2.5s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.15);opacity:.7}}
.bubbles{position:absolute;left:22%;right:22%;bottom:45%;height:70%;z-index:3;pointer-events:none}
.bubble{position:absolute;bottom:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(236,170,178,.8) 45%,rgba(248,229,215,.4));opacity:.9;animation:bubble linear forwards}
@keyframes bubble{0%{transform:translateY(0) scale(.4)}80%{opacity:.9}100%{transform:translateY(-340px) translateX(var(--dx)) scale(1.1);opacity:0}}
.smoke{position:absolute;left:30%;width:40%;bottom:55%;height:60%;z-index:1;pointer-events:none;filter:blur(18px)}
.smoke i{position:absolute;bottom:0;left:50%;width:120px;height:120px;border-radius:50%;background:rgba(236,170,178,.45);animation:smoke 6s infinite ease-out}
.smoke i:nth-child(2){animation-delay:2s;background:rgba(248,229,215,.35)}
.smoke i:nth-child(3){animation-delay:4s;background:rgba(236,170,178,.35)}
@keyframes smoke{0%{transform:translate(-50%,0) scale(.4);opacity:0}30%{opacity:1}100%{transform:translate(calc(-50% + 40px),-260px) scale(2.2);opacity:0}}
.ingredients{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.6rem 0}
.ingredient{border-radius:var(--arch);padding:1.4rem .8rem 1rem;text-align:center;background:rgba(248,229,215,.06);border:1.5px solid rgba(236,170,178,.45);transition:transform .4s var(--ease),background .3s,opacity .4s;cursor:grab;user-select:none;touch-action:none;color:var(--ivory)}
.ingredient:hover{transform:translateY(-4px) rotate(-2deg);background:rgba(236,170,178,.16)}
.ingredient svg{width:46px;height:46px;margin:0 auto .5rem}
.ingredient span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:block}
.ingredient.used{opacity:.25;pointer-events:none;transform:scale(.9)}
.ingredient.dragging{cursor:grabbing;position:fixed;z-index:200;width:110px;pointer-events:none;transform:rotate(-8deg) scale(1.05);background:rgba(236,170,178,.35)}
.potion-meter{height:8px;border-radius:999px;background:rgba(248,229,215,.12);overflow:hidden;margin:.6rem 0 1.2rem}
.potion-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ivory),var(--blossom));transition:width .8s var(--ease)}
.spell-text{min-height:1.6em;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:#f3d8cf}
.reveal-product{display:flex;gap:1.2rem;align-items:center;padding:1rem;border-radius:var(--r-lg);background:rgba(248,229,215,.08);border:1.5px solid rgba(236,170,178,.35);margin-top:1.2rem;opacity:0;transform:translateY(20px) scale(.96);transition:.8s var(--ease);pointer-events:none}
.reveal-product.on{opacity:1;transform:none;pointer-events:auto}
.reveal-product img{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:var(--arch)}
.reveal-product .btn{margin-top:.6rem}
.reveal-product .big{font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--blossom)}
.salem .btn.light{background:var(--ivory)}
.salem .btn.ghost{color:var(--ivory)}
.flying-ing{position:fixed;z-index:200;pointer-events:none;transition:all .7s cubic-bezier(.5,-0.4,.6,1)}
.poof{position:absolute;left:50%;top:38%;width:10px;height:10px;border-radius:50%;z-index:4;pointer-events:none;box-shadow:0 0 0 0 rgba(236,170,178,.8);animation:poof 1s ease-out forwards}
@keyframes poof{to{box-shadow:0 0 0 220px rgba(236,170,178,0)}}
@media (max-width:860px){.salem-grid{grid-template-columns:1fr}.moon{width:64px;height:64px;top:30px}}

/* =========================================================
   Cafetería — repisa horizontal
   ========================================================= */
.shelf{position:relative;height:300vh;background:var(--ivory)}
.shelf-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.shelf-track{display:flex;gap:clamp(20px,3vw,40px);padding:0 var(--gut);will-change:transform;margin-top:2rem;align-items:end}
.shelf-intro{flex:none;width:min(420px,80vw);align-self:center}
.shelf-intro h2 em{color:var(--truffle)}
.shelf-item{flex:none;width:min(320px,72vw);text-align:center;position:relative}
.shelf-item .frame{aspect-ratio:3/4}
.shelf-item .arch{height:100%}
.shelf-item .num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--serif);font-style:italic;font-size:1rem;background:var(--cherry);color:var(--ivory);padding:.25rem .9rem;border-radius:999px}
.shelf-item .meta{padding:1.1rem .4rem 0;display:flex;justify-content:space-between;align-items:end;gap:1rem;text-align:left}
.shelf-item .meta small{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.shelf-line{height:16px;margin:24px var(--gut) 0;border-radius:4px;background:var(--truffle);box-shadow:0 18px 30px -10px rgba(67,39,32,.5)}
.steam{position:absolute;top:-56px;left:50%;width:60px;height:60px;pointer-events:none;transform:translateX(-50%)}
.steam i{position:absolute;left:50%;bottom:0;width:8px;height:40px;border-radius:8px;background:rgba(101,35,43,.25);filter:blur(5px);animation:steam 3s infinite}
.steam i:nth-child(2){left:30%;animation-delay:1s}.steam i:nth-child(3){left:70%;animation-delay:2s}
@keyframes steam{0%{transform:translateY(0) scaleY(.5);opacity:0}50%{opacity:.8}100%{transform:translateY(-40px) scaleY(1.2) skewX(15deg);opacity:0}}
@media (max-width:760px){.shelf{height:auto}.shelf-sticky{position:static;height:auto;padding:90px 0}.shelf-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-top:60px;padding-bottom:20px;transform:none!important}.shelf-item,.shelf-intro{scroll-snap-align:center}.shelf-line{display:none}}

/* =========================================================
   Verano — etiquetas de frasco
   ========================================================= */
.labels{display:grid;grid-template-columns:1fr 1fr .8fr;gap:clamp(18px,3vw,32px);align-items:stretch}
.label-card{position:relative;padding:14px;background:var(--paper);border:1.5px solid var(--cherry);border-radius:26px;transition:transform .6s var(--ease);box-shadow:var(--shadow)}
.label-card:nth-child(1){transform:rotate(-2deg)} .label-card:nth-child(2){transform:rotate(1.8deg)}
.label-card:hover{transform:rotate(0) translateY(-6px)}
.label-inner{border:1.5px dashed rgba(101,35,43,.45);border-radius:18px;padding:18px;text-align:center;height:100%;display:flex;flex-direction:column;gap:.8rem}
.label-inner .arch{aspect-ratio:1/1.05;width:82%;margin:0 auto}
.label-inner h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.label-inner .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:1rem}
.label-inner .row b{font-family:var(--serif);font-size:1.5rem}
.count-tile{border-radius:26px;background:var(--cherry);color:var(--ivory);padding:2rem 1.6rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;text-align:center;position:relative;overflow:hidden}
.count-tile::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(236,170,178,.12) 0 24px,transparent 24px 48px)}
.count-tile>*{position:relative}
.big-num{font-family:var(--serif);font-size:clamp(5rem,10vw,8rem);font-weight:800;line-height:.8;font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--blossom)}
.count-tile .btn{align-self:center;background:var(--ivory);color:var(--cherry);border-color:var(--ivory)}
@media (max-width:900px){.labels{grid-template-columns:1fr 1fr}.count-tile{grid-column:span 2}}
@media (max-width:560px){.labels{grid-template-columns:1fr}.count-tile{grid-column:auto}}

/* =========================================================
   La carta — pastelería de cera en formato menú
   ========================================================= */
.menu-board{background:var(--paper);border:1.5px solid var(--cherry);border-radius:var(--r-lg);padding:clamp(24px,5vw,64px);position:relative;box-shadow:var(--shadow)}
.menu-board::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(101,35,43,.35);border-radius:calc(var(--r-lg) - 8px);pointer-events:none}
.menu-title{text-align:center;margin-bottom:clamp(24px,4vw,44px)}
.menu-title h2{font-size:clamp(2.6rem,6vw,5rem)}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,6vw,80px)}
.menu-item{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.8rem;padding:1rem .2rem;border-bottom:1px solid rgba(101,35,43,.12);width:100%;text-align:left;transition:background .3s,padding .3s}
.menu-item:hover{background:var(--ivory);padding-inline:.8rem;border-radius:12px}
.menu-item .nm{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--cherry);font-variation-settings:"SOFT" 100,"WONK" 1}
.menu-item .dots{border-bottom:2px dotted rgba(101,35,43,.35);transform:translateY(-.3em)}
.menu-item .pr{font-family:var(--serif);font-size:1.25rem;font-weight:600}
.menu-item .ds{grid-column:1/-1;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:-.2rem}
.menu-item .th{display:none}
.menu-peek{position:fixed;left:0;top:0;width:200px;z-index:60;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease)}
.menu-peek.on{opacity:1;transform:scale(1)}
.menu-peek .frame{aspect-ratio:3/4;transform:rotate(-4deg)}
.menu-peek .arch{height:100%}
.menu-foot{text-align:center;margin-top:2rem;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
@media (hover:none),(max-width:760px){.menu-item{grid-template-columns:56px auto 1fr auto}.menu-item .th{display:block;grid-row:span 2;width:56px;height:70px;border-radius:999px 999px 10px 10px;object-fit:cover;align-self:center}.menu-item .ds{grid-column:2/-1}.menu-peek{display:none}}
@media (max-width:760px){.menu-cols{grid-template-columns:1fr}}
#sprinkles{position:fixed;inset:0;pointer-events:none;z-index:300}

/* =========================================================
   Navidad
   ========================================================= */
.xmas{background:var(--cherry);color:var(--ivory);overflow:hidden}
.xmas canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.xmas h2{color:var(--ivory)} .xmas h2 em{color:var(--blossom)}
.xmas .eyebrow{color:var(--blossom)} .xmas .sec-head p{color:#f3d8cf}
.xmas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.ornament-wrap{text-align:center;transform-origin:50% -60px;animation:swing 4s ease-in-out infinite}
.ornament-wrap:nth-child(2n){animation-delay:-1.5s}.ornament-wrap:nth-child(3n){animation-delay:-3s}
.ornament-wrap::before{content:"";display:block;width:1.5px;height:60px;margin:0 auto;background:var(--blossom)}
.ornament{display:block;width:100%;padding:8px;border-radius:var(--arch);background:var(--ivory);border:1.5px solid var(--blossom);aspect-ratio:3/4;transition:transform .5s var(--ease)}
.ornament:hover{transform:scale(1.04)}
.ornament img{width:100%;height:100%;object-fit:cover;border-radius:var(--arch)}
.ornament-wrap h3{font-size:1.2rem;margin-top:.9rem;color:var(--ivory)}
.ornament-wrap small{color:var(--blossom);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
@keyframes swing{50%{transform:rotate(2.5deg)}}
.xmas-banner{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:60px;padding:1.4rem 1.6rem;border-radius:var(--r-lg);border:1.5px solid rgba(236,170,178,.5);position:relative;z-index:1}
.xmas-banner .serif{font-size:1.8rem;font-weight:700}
.countdown{display:flex;gap:.9rem}
.countdown div{text-align:center}
.countdown b{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:700;line-height:1}
.countdown small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.xmas .btn.light{background:var(--ivory)}
@media (max-width:860px){.xmas-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   Muertos — pétalos
   ========================================================= */
.marigold{background:var(--ivory);overflow:hidden}
.marigold canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mari-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;position:relative;z-index:1}
.duo-arch{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.duo-arch .frame{aspect-ratio:3/4}
.duo-arch .arch{height:100%}
.duo-arch .frame:nth-child(2){transform:translateY(-50px)}
.marigold h2 em{color:#b4531a}
@media (max-width:760px){.mari-grid{grid-template-columns:1fr}}

/* ---------- aromas (mood) · tarjetas con ícono 3D ---------- */
.aromas-mood{padding-top:clamp(40px,6vw,80px)}
.mood-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.2vw,28px);margin-top:clamp(28px,4vw,48px)}
.mood-card{--tint:#FBE3E6;--ring:var(--blossom);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(14px,2vw,22px) clamp(12px,2vw,24px) clamp(20px,2.6vw,30px);border-radius:var(--r-lg);background:var(--paper);
  border:1.5px solid rgba(101,35,43,.14);transition:transform .6s var(--ease),background .5s,border-color .4s,box-shadow .6s var(--ease)}
.mood-card[data-mood="frescos"]{--tint:#EAF2E4;--ring:#BFDCC4}
.mood-card[data-mood="florales"]{--tint:#F8E6EE;--ring:#E7C3D6}
.mood-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.mood-card[aria-selected="true"]{background:var(--tint);border-color:var(--cherry);box-shadow:var(--shadow)}
.mood-card:focus-visible{outline:2px solid var(--cherry);outline-offset:4px}
.mood-icon{position:relative;display:block;width:min(100%,210px);aspect-ratio:1;margin-bottom:.4rem}
.mood-icon::before{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(67,39,32,.22),rgba(67,39,32,0));transition:transform .8s var(--ease)}
.mood-card:hover .mood-icon::before{transform:scaleX(.82)}
.mood-icon canvas{position:relative;display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity .8s}
.mood-icon.ready canvas{opacity:1}
.mood-icon.fallback::after{content:"";position:absolute;inset:26%;background:url(/assets/img/lotus-blossom.svg) center/contain no-repeat}
.mood-num{font-size:.66rem;letter-spacing:.32em;color:var(--blossom);font-weight:600;padding-left:.32em}
.mood-card[aria-selected="true"] .mood-num{color:var(--cherry)}
.mood-name{margin-top:.2rem;font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--cherry)}
.mood-desc{margin-top:.45rem;font-family:var(--serif);font-style:italic;font-size:clamp(.88rem,1.2vw,1rem);color:var(--muted)}
.mood-count{margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .9rem;border-radius:999px;border:1px solid rgba(101,35,43,.22);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cherry);transition:.4s}
.mood-count b{font-weight:600;letter-spacing:.05em}
.mood-card[aria-selected="true"] .mood-count{background:var(--cherry);border-color:var(--cherry);color:var(--ivory)}
.mood-panel{margin-top:clamp(18px,2.6vw,30px);padding:clamp(22px,3.4vw,44px);border-radius:var(--r-lg);background:var(--paper);border:1.5px solid rgba(101,35,43,.14)}
.mood-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:clamp(16px,2vw,24px);margin-bottom:clamp(16px,2vw,24px);border-bottom:1px dashed rgba(101,35,43,.25)}
.mood-panel-title{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.mood-panel-title em{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--cherry);line-height:1}
.mood-panel-title span{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.aroma-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.2rem clamp(14px,2vw,28px);min-height:140px}
.aroma-item{--dot:var(--blossom);position:relative;display:flex;align-items:center;gap:.7rem;padding:.6rem .4rem;border-bottom:1px solid rgba(101,35,43,.08);
  font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--truffle);animation:pop .5s var(--ease) both;transition:color .3s,transform .4s var(--ease)}
.aroma-item::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot);transition:transform .4s var(--ease)}
.aroma-list[data-mood="frescos"] .aroma-item{--dot:#A9CFB2}
.aroma-list[data-mood="florales"] .aroma-item{--dot:#D9A9C4}
.aroma-item:hover{color:var(--cherry);transform:translateX(4px)}
.aroma-item:hover::before{transform:scale(1.6)}
@media (max-width:700px){
  .mood-cards{gap:8px}
  .mood-card{padding:10px 6px 16px;border-radius:var(--r-md)}
  .mood-desc{display:none}
  .mood-num{font-size:.56rem}
  .mood-count{margin-top:.6rem;padding:.3rem .6rem;font-size:.54rem;letter-spacing:.14em}
  .aroma-list{grid-template-columns:repeat(2,1fr)}
  .aroma-item{font-size:.95rem}
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.85)}}

/* ---------- aromatizante ---------- */
.car{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);align-items:center;border-radius:var(--r-lg);padding:clamp(24px,4vw,50px);overflow:hidden;position:relative;border:1.5px solid var(--cherry);background:var(--paper)}
.pendulum{width:min(220px,40vw);transform-origin:50% 0;animation:pend 3.2s ease-in-out infinite;position:relative;padding-top:40px}
.pendulum::before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:44px;background:var(--cherry)}
.pendulum .frame{aspect-ratio:3/4}
.pendulum .arch{height:100%}
@keyframes pend{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}}
@media (max-width:620px){.car{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{border-radius:var(--r-lg);padding:1.6rem;background:var(--paper);border:1.5px solid rgba(101,35,43,.18);counter-increment:s;position:relative;overflow:hidden}
.step::before{content:counter(s);font-family:var(--serif);font-style:italic;font-size:4.2rem;font-weight:300;line-height:1;color:var(--blossom);display:block;margin-bottom:.6rem;font-variation-settings:"SOFT" 100,"WONK" 1}
.step h3{font-size:1.35rem;margin-bottom:.4rem;color:var(--cherry)}
.step p{font-size:.95rem;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta-big{border-radius:var(--r-lg);overflow:hidden;position:relative;padding:clamp(60px,9vw,120px) clamp(24px,6vw,80px);text-align:center;border:1.5px solid var(--cherry)}
.cta-big .inner{background:var(--cream);border-radius:var(--r-lg);padding:clamp(30px,5vw,60px) clamp(20px,4vw,50px);max-width:760px;margin:0 auto;border:1.5px solid var(--cherry)}
.cta-big h2{font-size:clamp(2.6rem,7vw,5.6rem)}
.cta-big .row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* ---------- footer ---------- */
.footer{padding:80px 0 40px;background:var(--cherry);color:var(--ivory);margin-top:100px;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:radial-gradient(circle at 18px 24px,var(--cherry) 17px,transparent 17.5px) 0 0/36px 24px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer h4{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--blossom);margin-bottom:1rem}
.footer ul{list-style:none;display:grid;gap:.5rem;font-size:.95rem}
.footer a:hover{color:var(--blossom)}
.footer .logo img{height:96px;width:auto}
.footer p{color:#f0d3c9}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:60px;padding-top:24px;border-top:1px solid rgba(248,229,215,.2);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#e7c3bb}
.socials{display:flex;gap:.5rem;margin-top:1rem}
.footer .icon-btn{background:rgba(248,229,215,.12);color:var(--ivory)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   Encabezado de páginas internas
   ========================================================= */
.page-hero{position:relative;padding:150px 0 70px;text-align:center;overflow:hidden}
.page-hero.stripes{background-size:calc(var(--stripe) * 2) 100%}
.page-hero .plate{display:inline-block;background:var(--cream);border:1.5px solid var(--cherry);border-radius:var(--r-lg);padding:clamp(22px,4vw,40px) clamp(24px,6vw,70px);max-width:min(760px,100%)}
.page-hero h1{font-size:clamp(3.2rem,9vw,7rem);font-weight:900}
.page-hero h1 em{font-weight:400}
.page-hero p{margin-top:1rem;color:var(--muted)}
.page-hero .eyebrow{display:block;margin-bottom:.8rem}
.page-hero .scallop{position:absolute;left:0;right:0;bottom:-1px;height:28px}

/* =========================================================
   TIENDA
   ========================================================= */
.filters{position:sticky;top:76px;z-index:20;display:flex;gap:.5rem;overflow-x:auto;padding:.7rem var(--gut);background:rgba(252,243,236,.94);backdrop-filter:blur(10px);margin:0 calc(var(--gut) * -1) 30px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none;padding:.6rem 1.2rem;border-radius:999px;background:var(--cream);border:1.5px solid rgba(101,35,43,.3);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--cherry);transition:.3s}
.filter[aria-pressed="true"]{background:var(--cherry);color:var(--ivory);border-color:var(--cherry)}
.toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.search{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.1rem;border-radius:999px;background:var(--paper);border:1.5px solid rgba(101,35,43,.25);min-width:min(320px,100%);color:var(--cherry)}
.search input{border:0;outline:0;font:inherit;background:transparent;width:100%;color:var(--truffle)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 22px}
.card{display:flex;flex-direction:column;animation:pop .6s var(--ease) both;text-align:center}
.card .ph{border-radius:var(--arch);overflow:hidden;aspect-ratio:3/4;position:relative;background:var(--blossom-2);cursor:pointer;border:1.5px solid var(--cherry);padding:7px;background-clip:padding-box;transition:transform .5s var(--ease)}
.card:hover .ph{transform:translateY(-6px)}
.card .ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--arch);transition:transform 1s var(--ease),opacity .5s}
.card .ph img.alt{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);opacity:0}
.card:hover .ph img.alt{opacity:1}
.badge{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:2;padding:.28rem .75rem;border-radius:999px;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;background:var(--cherry);color:var(--ivory);display:flex;gap:.3rem;align-items:center;white-space:nowrap}
.badge.season{top:auto;bottom:16px;background:var(--ivory);color:var(--cherry)}
.card .body{padding:1rem .2rem .2rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}
.card h3{font-size:1.35rem;color:var(--cherry)}
.card .sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.card .row{display:flex;align-items:center;gap:.8rem;margin-top:.5rem}
.card .price{font-family:var(--serif);font-weight:600;font-size:1.2rem}
.card .add{width:2.4rem;height:2.4rem}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}

.spec{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.92rem}
.spec dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cherry);padding-top:.2rem}
.field{display:grid;gap:.35rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cherry);font-weight:500}
.field select,.field input,.field textarea{font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--truffle);padding:.75rem 1rem;border-radius:var(--r-sm);border:1.5px solid rgba(101,35,43,.3);background:var(--paper);width:100%}
.qty{display:inline-flex;align-items:center;border-radius:999px;background:var(--paper);border:1.5px solid rgba(101,35,43,.3);color:var(--cherry)}
.qty button{width:2.4rem;height:2.4rem;font-size:1.2rem}
.qty span{min-width:2rem;text-align:center;font-weight:600}

/* ---------- carrito ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:130;background:var(--cream);box-shadow:-30px 0 60px -20px rgba(67,39,32,.35);transform:translateX(105%);transition:transform .55s var(--ease);display:flex;flex-direction:column;border-left:1.5px solid var(--cherry)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1.5px solid rgba(101,35,43,.18)}
.drawer-head h3{color:var(--cherry);font-size:1.6rem}
.drawer-body{flex:1;overflow:auto;padding:1rem 1.4rem;display:grid;gap:12px;align-content:start}
.line{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:var(--r-md);background:var(--paper);border:1px solid rgba(101,35,43,.12)}
.line img{width:62px;height:78px;object-fit:cover;border-radius:999px 999px 10px 10px}
.line h4{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--cherry)}
.line small{display:block;color:var(--muted);font-size:.76rem;line-height:1.35}
.line .rm{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);margin-top:.25rem;text-decoration:underline}
.drawer-foot{padding:1.2rem 1.4rem 1.6rem;border-top:1.5px solid rgba(101,35,43,.18);display:grid;gap:.8rem}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.total b{font-family:var(--serif);font-size:1.7rem;letter-spacing:0;text-transform:none;color:var(--cherry)}
.drawer-note{font-size:.8rem;color:var(--muted)}
.scrim{position:fixed;inset:0;z-index:125;background:rgba(67,39,32,.4);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 60px));z-index:400;background:var(--cherry);color:var(--ivory);padding:.8rem 1.4rem;border-radius:999px;font-size:.92rem;transition:transform .5s var(--ease);display:flex;gap:.6rem;align-items:center;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0)}
.fly{position:fixed;z-index:300;width:60px;height:72px;border-radius:999px 999px 12px 12px;object-fit:cover;pointer-events:none;transition:all .8s cubic-bezier(.6,-0.3,.7,1);box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* =========================================================
   AROMAS / PERSONALIZA
   ========================================================= */
.aroma-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.aroma-col{border-radius:var(--r-lg);padding:1.4rem 1.8rem 1.8rem;position:relative;overflow:hidden;border:1.5px solid rgba(101,35,43,.35);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.aroma-col:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--cherry)}
.aroma-col.is-active{border-color:var(--cherry)}
.aroma-col.dulces{background:var(--blossom-2)}
.aroma-col.frescos{background:#EAF2E4}
.aroma-col.florales{background:#F8E6EE}
.aroma-col-head{display:flex;align-items:center;gap:.6rem;margin:0 -.6rem 1.1rem;padding-bottom:1rem;border-bottom:1px dashed rgba(101,35,43,.25)}
.aroma-col-head .mood-icon{flex:none;width:clamp(110px,10vw,140px);margin:0}
.aroma-col h3{font-size:clamp(2rem,3vw,2.6rem);font-weight:800;color:var(--cherry);margin:.15rem 0 .2rem;line-height:1}
.aroma-col h3 em{font-weight:400}
.aroma-col-desc{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);line-height:1.3}
.aroma-col .mood-count{margin-top:.7rem;background:rgba(255,250,246,.7)}
.aroma-col ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.aroma-col li button{padding:.45rem .95rem;border-radius:999px;background:var(--cream);border:1px solid rgba(101,35,43,.2);font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--truffle);transition:.25s}
.aroma-col li button:hover{transform:translateY(-2px);border-color:var(--cherry)}
.aroma-col li button[aria-pressed="true"]{background:var(--cherry);color:var(--ivory);border-color:var(--cherry)}
@media (max-width:1100px) and (min-width:861px){.aroma-col-head{flex-direction:column;text-align:center}.aroma-col{padding-inline:1.3rem}}
@media (max-width:860px){.aroma-cols{grid-template-columns:1fr}}
.builder{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:start}
.jar-preview{position:sticky;top:110px;aspect-ratio:1;border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden;border:1.5px solid var(--cherry);background-size:44px 100%}
.jar-preview svg{width:62%;height:auto;filter:drop-shadow(0 30px 40px rgba(67,39,32,.25))}
.jar-preview .wax{transition:fill .6s}
.jar-preview .flame{transform-origin:50% 100%;animation:flicker .18s infinite alternate}
@keyframes flicker{to{transform:scale(.94,1.06) rotate(1.5deg)}}
.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.swatch{width:2.6rem;height:2.6rem;border-radius:999px 999px 8px 8px;border:3px solid var(--paper);box-shadow:0 0 0 1.5px rgba(101,35,43,.35);transition:transform .25s}
.swatch[aria-pressed="true"]{transform:scale(1.15);box-shadow:0 0 0 2.5px var(--cherry)}
.opt-group{display:grid;gap:.7rem;margin-bottom:1.6rem}
.opt-group > label,.opt-group > .lab{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--cherry)}
.opt-group select,.opt-group input{font:inherit;padding:.8rem 1rem;border-radius:var(--r-sm);border:1.5px solid rgba(101,35,43,.3);background:var(--paper);color:var(--truffle)}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid rgba(101,35,43,.3);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);transition:.25s}
.seg button[aria-pressed="true"]{background:var(--cherry);color:var(--ivory);border-color:var(--cherry)}
.sum{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;border-radius:var(--r-md);background:var(--paper);border:1.5px solid var(--cherry)}
.sum .p{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--cherry);line-height:1}
@media (max-width:860px){.builder{grid-template-columns:1fr}.jar-preview{position:relative;top:0;max-width:420px;margin-inline:auto;width:100%}}

/* =========================================================
   CÓMO COMPRAR
   ========================================================= */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.info-card{border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);background:var(--paper);border:1.5px solid rgba(101,35,43,.2)}
.info-card.dark{background:var(--cherry);color:var(--ivory);border-color:var(--cherry)}
.info-card h3{font-size:2rem;margin-bottom:1rem;color:var(--cherry)}
.info-card.dark h3{color:var(--blossom)}
.info-card ul{list-style:none;display:grid;gap:.6rem}
.info-card li{display:flex;gap:.7rem;align-items:start}
.info-card li::before{content:"✦";flex:none;color:var(--blossom);font-size:.8rem;margin-top:.25rem}
.info-card:not(.dark) li::before{color:var(--cherry)}
.map-pins{display:flex;flex-wrap:wrap;gap:.5rem}
.map-pins span{padding:.5rem 1rem;border-radius:999px;border:1.5px solid rgba(101,35,43,.3);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cherry)}
.faq details{border-bottom:1.5px solid rgba(101,35,43,.18);padding:1.2rem 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--cherry);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";font-size:1.6rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.6rem;color:var(--muted)}
@media (max-width:760px){.info-grid{grid-template-columns:1fr}}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gut) 60px}
.nf .plate{background:var(--cream);border:1.5px solid var(--cherry);border-radius:var(--r-lg);padding:clamp(30px,5vw,60px)}
.nf h1{font-size:clamp(6rem,22vw,14rem);font-weight:900;line-height:.85}
.nf .melt{display:inline-block;animation:melt 3s ease-in-out infinite alternate;transform-origin:bottom}
@keyframes melt{to{transform:scaleY(.86) skewX(-4deg)}}

/* =========================================================
   DETALLE DE PRODUCTO  (/producto?p=<id>)
   ========================================================= */
.card a.ph{display:block}
.card h3 a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.pdp{position:relative;padding:118px 0 70px;overflow:hidden;isolation:isolate}
.pdp.stripes.thin{background-size:44px 100%}
.pdp.has-scent{background:radial-gradient(120% 90% at 30% 20%,var(--scent-a),var(--scent-b))}
.scent-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.pdp>.container{position:relative}
.pdp .scallop{position:absolute;left:0;right:0;bottom:-1px}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cherry);margin-bottom:22px}
.crumbs a{opacity:.75}.crumbs a:hover{opacity:1;text-decoration:underline}
.crumbs b{font-weight:600}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,64px);align-items:start}
.pdp-gallery{position:sticky;top:96px;display:grid;gap:14px}
.pdp-main{aspect-ratio:4/5}
.pdp-main img{transition:opacity .18s,transform 1.2s var(--ease)}
.pdp-main img.swap{opacity:0}
.pdp-main:hover img{transform:scale(1.04)}
.pdp-main .badge{top:26px}
.pdp-thumbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pdp-thumbs button{width:64px;height:80px;border-radius:999px 999px 12px 12px;overflow:hidden;border:2px solid transparent;background:var(--cream);opacity:.75;transition:opacity .25s,transform .25s}
.pdp-thumbs button:hover{opacity:1;transform:translateY(-3px)}
.pdp-thumbs button[aria-pressed="true"]{border-color:var(--cherry);opacity:1}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info{background:var(--cream);border:1.5px solid var(--cherry);border-radius:var(--r-lg);padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow)}
.pdp-info h1{font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:900}
.pdp-desc{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.45;color:var(--muted)}
.pdp-notes{display:grid;gap:.5rem}
.pdp-notes>span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cherry)}
.pdp-notes ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.pdp-notes li{padding:.4rem .95rem;border-radius:999px;background:var(--blossom-2);color:var(--cherry);font-family:var(--serif);font-style:italic;font-size:1rem}
.pdp-buy{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.3rem}
.pdp-buy .price-tag{margin:0}
.pdp-info .btn{justify-content:space-between}
.pdp-info .btn.ghost{justify-content:center;color:var(--cherry)}
.pdp-note{font-size:.8rem;color:var(--muted);text-align:center}
.scent-hint{margin-top:26px;text-align:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cherry);pointer-events:none}
.scent-hint em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:1rem}
.scent-dark .crumbs,.scent-dark .scent-hint{color:var(--ivory)}
.scent-dark .pdp-info,.scent-dark .frame{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.pdp-extra{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:56px}
.pdp-extra details{border:1.5px solid rgba(101,35,43,.25);border-radius:var(--r-md);padding:1.1rem 1.4rem;background:var(--paper)}
.pdp-extra summary{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--cherry);list-style:none;display:flex;justify-content:space-between;align-items:center}
.pdp-extra summary::-webkit-details-marker{display:none}
.pdp-extra summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:1.4rem;transition:transform .3s}
.pdp-extra details[open] summary::after{transform:rotate(45deg)}
.pdp-extra ul{margin:.8rem 0 0 1.1rem;display:grid;gap:.4rem;color:var(--muted);font-size:.95rem}
.pdp-extra a{color:var(--cherry);text-decoration:underline}
.pdp-related{padding:80px var(--gut) 40px}
.pdp-related h2{text-align:center;margin-bottom:36px;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.pdp-related h2 em{font-weight:400}
@media (max-width:860px){
  .pdp{padding-top:100px}
  .pdp-grid{grid-template-columns:1fr}
  .pdp-gallery{position:static;max-width:460px;margin-inline:auto;width:100%}
  .pdp-extra{grid-template-columns:1fr}
}

/* =========================================================
   RESPONSIVE · pase general (tablet y celular)
   ========================================================= */
/* el canvas del confeti medía 2× el ancho de la pantalla en celular */
#sprinkles{width:100%;height:100%}

@media (max-width:860px){
  /* Nº01 Lovely Cherry: una sola columna */
  .feature-grid{grid-template-columns:1fr;gap:40px}
  .feature-photo{max-width:380px;width:100%;margin-inline:auto}
  .feature .tag-label{right:4px}
  .feature p.lead{max-width:none}
}

@media (max-width:560px){
  .footer-grid{gap:2rem 1.2rem}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:.5rem;letter-spacing:.14em}
}

@media (max-width:520px){
  /* hero: las ligas inferiores ya no se salen */
  .hero-links{left:16px;right:16px;transform:none;justify-content:center;flex-wrap:wrap;gap:.2rem 1.2rem}
  /* Nº01 */
  .feature-num{font-size:4.4rem}
  .feature .notes span{padding:.4rem .8rem;font-size:.64rem;letter-spacing:.14em}
  .price-tag b{font-size:2.2rem}
  /* Salem's: ingredientes más compactos */
  .ingredients{gap:8px}
  .ingredient{padding:1rem .25rem .8rem}
  .ingredient svg{width:38px;height:38px}
  .ingredient span{font-size:.58rem;letter-spacing:.1em}
  .reveal-product{flex-direction:column;text-align:center}
  /* Navidad */
  .xmas-grid{gap:14px}
  .ornament-wrap::before{height:36px}
  .ornament-wrap h3{font-size:1rem}
  .xmas-banner{padding:1.2rem;justify-content:center;text-align:center}
  .xmas-banner .serif{font-size:1.4rem}
  .countdown{gap:.6rem}
  .countdown b{font-size:1.5rem}
  /* Muertos */
  .duo-arch{gap:12px}
  .duo-arch .frame:nth-child(2){transform:translateY(-24px)}
  /* La carta */
  .menu-board{padding:22px 14px}
  .menu-board::before{inset:6px}
  .menu-item{gap:.6rem;padding:.8rem .1rem}
  .menu-item .nm{font-size:1.08rem}
  .menu-item .pr{font-size:1.05rem}
  .menu-item .ds{font-size:.62rem;letter-spacing:.1em}
  /* encabezados de páginas internas y CTA */
  .page-hero{padding:118px 0 56px}
  .page-hero h1{font-size:clamp(2.6rem,13vw,3.4rem)}
  .cta-big{padding:48px 16px}
  .cta-big .inner{padding:28px 18px}
  /* detalle de producto */
  .pdp-info{padding:20px 18px}
  .pdp-buy .price-tag b{font-size:2rem}
  .pdp-info .btn{font-size:.72rem;letter-spacing:.14em}
  .crumbs{letter-spacing:.14em}
  .spec{grid-template-columns:1fr;gap:.1rem}
  .spec dd{margin-bottom:.5rem}
}

/* familias de aromas: las 3 tarjetas caben aun en pantallas de 320 px */
.mood-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:400px){
  .mood-name{font-size:1.15rem}
  .mood-count{padding:.25rem .45rem;letter-spacing:.06em}
}