/* =====================================================================
   COMPONENTES — inicio, pop-up de bienvenida y tienda (header, tarjetas,
   botones…). Cada componente lleva junto sus media queries.
   Los colores salen de las variables de global.css / tema-*.css.
   ===================================================================== */

@keyframes viewIn{from{opacity:0;}to{opacity:1;}}
.store-view{animation:viewIn .45s ease both;}
/* =====================================================================
   INICIO
   ===================================================================== */
.home-view{min-height:100dvh;display:flex;flex-direction:column;}
.home-view > main{flex:1;}
.top{background:var(--paper);border-bottom:1px solid var(--line);}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem;}
.top .brand-logo{--logo-h:52px;}
.top-nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);}
.top-nav a{
  position:relative;padding-block:.35rem;font-size:.76rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .2s;
}
.top-nav a::after,.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rose);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.top-nav a:hover{color:var(--ink);}
.top-nav a:hover::after{transform:scaleX(1);}
@media (max-width:640px){
  .top .brand-logo{--logo-h:36px;}
  .top-nav .hide-sm{display:none;}
}
@media (max-width:350px){.top-nav{display:none;}}

.intro{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.25rem,4vw,4rem);
  align-items:end;padding-block:clamp(2.75rem,7vw,5rem) clamp(2rem,4vw,3rem);
}
@media (max-width:820px){.intro{grid-template-columns:1fr;}}
.intro h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.98;letter-spacing:-.02em;}
.intro-sub{max-width:40ch;color:var(--muted);font-size:1.02rem;line-height:1.65;text-wrap:pretty;}

.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem);padding-bottom:clamp(3rem,7vw,5rem);}
@media (max-width:760px){.doors{grid-template-columns:1fr;}}
.door{
  position:relative;isolation:isolate;overflow:hidden;border-radius:22px;container-type:inline-size;
  min-height:clamp(360px,46vw,520px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:clamp(1.5rem,4vw,2.75rem);color:var(--cream);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.door-men{background:radial-gradient(120% 90% at 15% 0%,var(--ink-light) 0%,var(--ink) 62%);}
.door-women{background:radial-gradient(120% 90% at 85% 0%,var(--rose-light) 0%,var(--rose) 38%,var(--rose-deep) 100%);}
.door:hover{transform:translateY(-6px);}
.door-men:hover{box-shadow:0 34px 60px -30px rgba(var(--ink-rgb),.6);}
.door-women:hover{box-shadow:0 34px 60px -30px rgba(var(--rose-deep-rgb),.65);}
.door:active{transform:translateY(-2px) scale(.995);}
.door:focus-visible{outline:3px solid var(--ink);outline-offset:4px;}
.door-word{
  position:absolute;top:clamp(1rem,3vw,1.75rem);left:-.04em;z-index:-1;
  font-family:var(--font-display);font-size:4.6rem;font-size:19cqi;line-height:.8;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--cream-rgb),.14);transition:transform 1s var(--ease-out);
}
.door:hover .door-word{transform:translateX(-5%);}
.door-art{
  position:absolute;top:clamp(1.25rem,3.5vw,2.25rem);right:clamp(1.25rem,3.5vw,2.25rem);
  width:clamp(92px,13vw,148px);aspect-ratio:1;transition:transform .7s var(--ease-out);
}
.door-art svg{width:100%;height:100%;color:var(--blush);}
.door:hover .door-art{transform:rotate(-6deg) scale(1.06);}
.door-emblem{
  border-radius:50%;background:var(--emblem) center/cover no-repeat,#fff;
  box-shadow:0 0 0 5px rgba(var(--cream-rgb),.22),0 20px 40px -18px rgba(var(--ink-rgb),.5);
}
.door-label,.side-kicker{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.8rem;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.door-label::before,.side-kicker::before{content:"";width:26px;height:1.5px;background:currentColor;transition:width .5s var(--ease-out);}
.door-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5.4vw,4rem);line-height:.95;letter-spacing:-.015em;text-transform:uppercase;}
.door-text{margin-top:.9rem;max-width:34ch;font-size:1rem;line-height:1.6;color:rgba(var(--cream-rgb),.88);text-wrap:pretty;}
.door-cta,.side-cta{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;padding:.9rem 1.35rem;border-radius:999px;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s,color .3s,transform .35s var(--ease-out);
}
.door-men .door-cta{background:var(--cream);color:var(--ink);}
.door-men:hover .door-cta{background:var(--rose);color:var(--cream);}
.door-women .door-cta{background:var(--ink);color:var(--cream);}
.door-women:hover .door-cta{background:var(--cream);color:var(--rose-deep);}
.door-cta svg,.side-cta svg{width:16px;height:16px;transition:transform .35s var(--ease-out);}
.door:hover .door-cta svg{transform:translateX(4px);}

.steps{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,5vw,4rem);
  padding-block:clamp(3rem,7vw,5rem) clamp(3.5rem,8vw,6rem);border-top:1px solid var(--line);
}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.steps-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;letter-spacing:-.01em;}
.steps-intro{margin-top:.9rem;max-width:34ch;color:var(--muted);line-height:1.6;}
.steps-list{list-style:none;margin:0;padding:0;}
.steps-list li{display:grid;grid-template-columns:2rem 1fr;column-gap:1.25rem;padding-block:1.35rem;border-top:1px solid var(--line);}
.steps-list li:last-child{border-bottom:1px solid var(--line);}
.step-num{grid-row:span 2;font-family:var(--font-editorial);font-style:italic;font-weight:500;font-size:1.3rem;line-height:1.1;color:var(--rose-deep);}
.steps-list h3{font-size:1.06rem;font-weight:800;}
.steps-list p{margin-top:.35rem;max-width:52ch;color:var(--muted);line-height:1.6;}

.site-foot{background:var(--paper-2);border-top:1px solid var(--line);}
.site-foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1.4rem 1.6rem;font-size:.8rem;color:var(--muted);}
.home-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;}
.home-links a{font-weight:700;color:var(--ink-soft);transition:color .2s;}
.home-links a:hover{color:var(--rose-deep);}

/* =====================================================================
   POP-UP DE BIENVENIDA — pantalla dividida 50/50.
   Se monta en cada carga/recarga del inicio (sin localStorage ni cookies).
   ===================================================================== */
.welcome{
  position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;
  padding:max(clamp(.75rem,3vw,2rem),env(safe-area-inset-top)) clamp(.75rem,3vw,2rem);
}
.welcome-backdrop{
  position:absolute;inset:0;background:rgba(var(--ink-rgb),.42);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  animation:wFadeIn .55s ease both;transition:background-color .45s ease;
}
.welcome-panel{
  position:relative;width:min(1080px,100%);height:min(640px,100%);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:26px;overflow:hidden;outline:none;
  box-shadow:0 50px 120px -30px rgba(var(--ink-rgb),.75),0 0 0 1px rgba(var(--cream-rgb),.1);
  animation:wPanelIn .8s var(--ease-out) .08s both;
}
.welcome-head{
  position:absolute;top:clamp(.9rem,2.5vw,1.4rem);left:50%;z-index:4;translate:-50% 0;
  display:flex;align-items:center;gap:.55rem;padding:.55rem 1.1rem;border-radius:999px;
  background:rgba(var(--cream-rgb),.95);color:var(--ink);white-space:nowrap;
  box-shadow:0 10px 30px -12px rgba(var(--ink-rgb),.45);animation:wDrop .7s var(--ease-out) .3s both;
}
.welcome-head h2{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.welcome-head .dot{width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;}
.welcome-head .sep{color:var(--rose);margin-inline:.35rem;}
.welcome-close{
  position:absolute;top:clamp(.9rem,2.5vw,1.4rem);right:clamp(.9rem,2.5vw,1.4rem);z-index:5;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--ink-rgb),.22);color:var(--cream);border:1px solid rgba(var(--cream-rgb),.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,transform .35s var(--ease-out);animation:wFadeIn .5s ease .5s both;
}
.welcome-close:hover{background:rgba(var(--ink-rgb),.5);transform:rotate(90deg);}
.welcome-close:focus-visible{outline:2.5px solid var(--cream);outline-offset:2px;}
.welcome-close svg{width:18px;height:18px;}
.welcome-badge{
  position:absolute;left:50%;top:40%;z-index:4;translate:-50% -50%;
  width:clamp(80px,10vw,112px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:var(--emblem) center/cover no-repeat,#fff;
  box-shadow:0 0 0 6px rgba(var(--cream-rgb),.92),0 22px 44px -16px rgba(var(--ink-rgb),.6);
  transition:rotate .6s var(--ease-out);animation:wBadgeIn .8s cubic-bezier(.34,1.56,.64,1) .45s both;
}
.welcome-panel:has(.side-men:hover) .welcome-badge{rotate:-10deg;}
.welcome-panel:has(.side-blush:hover) .welcome-badge{rotate:10deg;}

.welcome-side{
  position:relative;isolation:isolate;overflow:hidden;min-width:0;container-type:inline-size;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:clamp(1.4rem,4vw,3rem);padding-top:clamp(4.5rem,9vw,6rem);color:var(--cream);outline:none;
}
.side-men{background:radial-gradient(120% 90% at 18% 0%,var(--ink-light) 0%,var(--ink) 60%);}
.side-blush{background:radial-gradient(120% 90% at 82% 0%,var(--rose-light) 0%,var(--rose) 36%,var(--rose-deep) 100%);}
.welcome-side::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--cream-rgb),.14),transparent 62%);
}
.welcome-side::after{
  content:"";position:absolute;inset:0;z-index:3;background:var(--ink);opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
.welcome-side:hover::before,.welcome-side:focus-visible::before{opacity:1;}
.welcome-panel:has(.welcome-side:hover) .welcome-side:not(:hover)::after{opacity:.38;}
.welcome-side:focus-visible{box-shadow:inset 0 0 0 3px var(--cream);}
.side-word{
  position:absolute;top:clamp(3.8rem,10vw,5.5rem);left:-.04em;z-index:-1;
  font-family:var(--font-display);font-size:4.5rem;font-size:19cqi;line-height:.8;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--cream-rgb),.14);
  transition:transform 1.1s var(--ease-out),-webkit-text-stroke-color .5s;
}
.welcome-side:hover .side-word,.welcome-side:focus-visible .side-word{transform:translateX(-7%);-webkit-text-stroke-color:rgba(var(--cream-rgb),.28);}
.side-art{
  position:absolute;right:clamp(2rem,5.5vw,5rem);top:31%;z-index:-1;
  width:clamp(84px,12vw,150px);aspect-ratio:1;color:var(--blush);opacity:.9;transition:transform .8s var(--ease-out);
}
.side-blush .side-art{color:var(--cream);}
.side-art svg{width:100%;height:100%;}
.welcome-side:hover .side-art,.welcome-side:focus-visible .side-art{transform:translateY(-6px) rotate(-8deg) scale(1.08);}
.welcome-side:hover .side-kicker::before{width:44px;}
.side-kicker{margin-bottom:.9rem;}
.side-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:.94;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;}
.side-desc{margin-top:.9rem;max-width:30ch;font-size:clamp(.94rem,1.2vw,1.02rem);line-height:1.55;font-weight:500;color:rgba(var(--cream-rgb),.88);text-wrap:pretty;}
.side-men .side-cta{background:var(--cream);color:var(--ink);}
.side-men:hover .side-cta,.side-men:focus-visible .side-cta{background:var(--rose);color:var(--cream);}
.side-blush .side-cta{background:var(--ink);color:var(--cream);}
.side-blush:hover .side-cta,.side-blush:focus-visible .side-cta{background:var(--cream);color:var(--rose-deep);}
.welcome-side:hover .side-cta svg,.welcome-side:focus-visible .side-cta svg{transform:translateX(5px);}
.welcome-side:active .side-cta{transform:scale(.97);}

.side-kicker,.side-title,.side-desc,.side-cta{animation:wRise .75s var(--ease-out) both;}
.side-kicker{animation-delay:.28s;}
.side-title{animation-delay:.34s;}
.side-desc{animation-delay:.4s;}
.side-cta{animation-delay:.46s;}
.side-blush .side-kicker{animation-delay:.36s;}
.side-blush .side-title{animation-delay:.42s;}
.side-blush .side-desc{animation-delay:.48s;}
.side-blush .side-cta{animation-delay:.54s;}

@keyframes wFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes wPanelIn{from{opacity:0;transform:translateY(20px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes wRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes wDrop{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes wBadgeIn{from{opacity:0;scale:.4;}to{opacity:1;scale:1;}}
@keyframes wPanelOut{from{opacity:1;transform:none;}to{opacity:0;transform:scale(1.035);}}
@keyframes wPanelClose{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(12px) scale(.96);}}
@keyframes wFadeOut{from{opacity:1;}to{opacity:0;}}

/* Salida al elegir: el panel se desvanece y el fondo pasa al color papel de la tienda */
.welcome.is-leaving .welcome-panel{animation:wPanelOut .5s var(--ease-in) both;}
.welcome.is-leaving .welcome-backdrop{background-color:var(--paper);}
.welcome.is-leaving .welcome-side.is-chosen::after{opacity:0;}
.welcome.is-leaving .welcome-side:not(.is-chosen)::after{opacity:.5;}
/* Ya en la tienda: el velo papel se retira y deja ver la tienda */
.welcome.is-revealing .welcome-backdrop{animation:wFadeOut .45s ease both;}
/* Cierre sin elegir: todo se desvanece y deja ver el inicio */
.welcome.is-closing .welcome-panel{animation:wPanelClose .4s var(--ease-in) both;}
.welcome.is-closing .welcome-backdrop{animation:wFadeOut .42s ease both;}

@media (max-width:720px){
  .welcome{padding:.75rem;}
  .welcome-panel{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:100%;border-radius:22px;}
  .welcome-side{padding:1.4rem;padding-top:4rem;}
  .side-blush{padding-top:2.6rem;}
  .side-art{display:none;}
  .side-word{top:3.6rem;}
  .side-blush .side-word{top:1.6rem;}
  .welcome-badge{top:50%;left:auto;right:1.25rem;translate:0 -50%;width:68px;box-shadow:0 0 0 4px rgba(var(--cream-rgb),.92),0 16px 30px -12px rgba(var(--ink-rgb),.6);}
  .welcome-head .lead,.welcome-head .sep{display:none;}
  .welcome-close{width:38px;height:38px;}
  .side-cta{margin-top:1.1rem;padding:.8rem 1.2rem;}
}
@media (max-width:720px) and (max-height:700px){.side-desc{display:none;}}
@media (min-width:721px) and (max-height:560px){
  .side-desc,.side-art,.welcome-badge{display:none;}
  .welcome-side{padding-top:4rem;}
}

/* =====================================================================
   TIENDA (Hombre / Maquillaje)
   ===================================================================== */
.store-view section{padding-block:clamp(3.5rem,8vw,6rem) clamp(4rem,9vw,6.75rem);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;font-family:var(--font-body);font-weight:800;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1.5px solid transparent;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-solid{background:var(--ink);color:var(--cream);}
.btn-solid:hover{box-shadow:0 14px 28px -14px rgba(var(--ink-rgb),.55);}
.btn-rose{background:var(--rose);color:var(--cream);}
.btn-rose:hover{box-shadow:0 14px 30px -12px rgba(var(--rose-rgb),.7);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);}
.btn-outline.on-dark{border-color:rgba(var(--cream-rgb),.7);color:var(--cream);}
.btn-outline.on-dark:hover{background:var(--cream);color:var(--ink);}
.btn svg{width:16px;height:16px;flex:none;}

/* Text Rise Marquee (hover motion) */
.text-rise-marquee{display:inline-flex;overflow:hidden;height:1.1em;line-height:1.1em;vertical-align:middle;}
.text-rise-marquee .rise-track{display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.65,0,.35,1);}
.text-rise-marquee .rise-row{display:block;height:1.1em;line-height:1.1em;white-space:nowrap;}
.text-rise-marquee .rise-dup{color:var(--rose);}
.btn-rose .rise-dup{color:var(--ink);}
.btn-outline:hover .rise-dup{color:var(--blush);}
.btn-outline.on-dark:hover .rise-dup{color:var(--rose-deep);}
:where(.btn,.fav-btn,.buy-btn):hover .text-rise-marquee .rise-track{transform:translateY(-1.1em);}

/* Nav */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(var(--paper-rgb),.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.75rem,2vw,1.75rem);padding-block:.7rem;min-height:var(--nav-h);}
.nav-brand{display:inline-flex;align-items:center;flex:none;}
.nav .brand-logo{--logo-h:50px;}
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(1.1rem,2.4vw,2.1rem);list-style:none;margin:0;padding:0;}
.nav-links a{
  position:relative;display:inline-block;padding-block:.4rem;font-size:.76rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.is-current{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.is-current::after{transform:scaleX(1);}
.nav-links .nav-switch{color:var(--rose-deep);}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;transition:background .2s;}
.icon-btn:hover{background:var(--paper-2);}
.icon-btn svg{width:19px;height:19px;}
.hamburger{display:none;}
.fav-btn{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;margin-right:.35rem;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--cream);
  font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
}
.fav-btn:hover{border-color:var(--rose);}
.fav-btn svg{width:15px;height:15px;flex:none;}
.fav-btn[aria-pressed="true"]{background:var(--blush);border-color:var(--rose);color:var(--rose-deep);}
.fav-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--rose);color:var(--cream);
  font-size:.62rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}
@media (max-width:960px){
  .nav-links{display:none;}
  .hamburger{display:inline-flex;}
  .nav .brand-logo{--logo-h:42px;}
}
@media (max-width:560px){
  :root{--nav-h:64px;}
  .nav .brand-logo{--logo-h:34px;}
  .nav-actions{gap:.1rem;}
  .bag-btn{display:none;}
  .fav-btn{width:40px;height:40px;padding:0;margin:0;justify-content:center;border-color:transparent;background:transparent;}
  .fav-btn[aria-pressed="true"]{background:var(--blush);}
  .fav-btn .fav-text{display:none;}
  .fav-btn .fav-count{position:absolute;top:0;right:0;}
}

/* Drawer (menú móvil) */
.drawer{
  position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);width:min(340px,86vw);background:var(--cream);
  box-shadow:-24px 0 60px -24px rgba(var(--ink-rgb),.35);transform:translateX(100%);visibility:hidden;
  transition:transform .4s var(--ease-out),visibility 0s linear .4s;
  display:flex;flex-direction:column;padding:1.3rem 1.5rem max(1.5rem,env(safe-area-inset-bottom));overflow-y:auto;
}
.drawer.open{transform:none;visibility:visible;transition:transform .4s var(--ease-out),visibility 0s;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;}
.drawer-head .label{margin:0;}
.drawer-close{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);transition:background .2s;}
.drawer-close:hover{background:var(--paper-2);}
.drawer ul{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;}
.drawer li{border-bottom:1px solid var(--line);}
.drawer ul a{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 0;font-family:var(--font-display);font-size:1.2rem;transition:color .2s;}
.drawer ul a:hover{color:var(--rose-deep);}
.drawer ul a svg{width:16px;height:16px;opacity:.5;}
.drawer .btn{margin-top:auto;width:100%;}
.drawer-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(var(--ink-rgb),.4);opacity:0;pointer-events:none;transition:opacity .3s;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}

/* Hero */
.hero{padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3rem,8vw,6rem);}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:880px){.hero-inner{grid-template-columns:1fr;}}
.hero-title{font-size:clamp(2.6rem,7.2vw,4.8rem);}
.hero-title .accent{color:var(--rose);}
.hero-sub{margin-top:1.4rem;max-width:44ch;font-size:1.06rem;line-height:1.7;color:var(--muted);text-wrap:pretty;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem;}
.hero-facts{display:flex;flex-wrap:wrap;gap:.75rem 1.6rem;margin:2.4rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);max-width:34rem;list-style:none;}
.hero-fact{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;color:var(--ink-soft);}
.hero-fact svg{width:16px;height:16px;color:var(--rose-deep);flex:none;}
@media (max-width:480px){.hero-actions .btn{flex:1 1 100%;}}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
@keyframes softFloat{0%,100%{translate:0 0;}50%{translate:0 -8px;}}
.emblem-ring{
  width:min(380px,100%);aspect-ratio:1;border-radius:50%;
  background:var(--emblem) center/cover no-repeat,#fff;
  box-shadow:0 0 0 10px var(--cream),0 0 0 11px var(--line),0 36px 70px -26px rgba(var(--rose-rgb),.45);
  animation:softFloat 6s ease-in-out infinite;
}
.art-tile{
  position:relative;isolation:isolate;overflow:hidden;width:min(400px,100%);aspect-ratio:4/5;border-radius:26px;container-type:inline-size;
  background:radial-gradient(110% 80% at 20% 0%,var(--ink-light) 0%,var(--ink) 62%);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 40px 70px -30px rgba(var(--ink-rgb),.55);animation:softFloat 6s ease-in-out infinite;
}
.art-tile svg{width:58%;height:auto;color:var(--blush);}
.art-word{
  position:absolute;left:-.05em;bottom:.2em;z-index:-1;font-family:var(--font-display);font-size:4.5rem;font-size:21cqi;
  line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(var(--cream-rgb),.16);
}
.art-sticker{
  position:absolute;top:1.3rem;left:1.3rem;padding:.45rem .8rem;border-radius:6px;background:var(--rose);color:var(--cream);
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;rotate:-4deg;
}
@media (max-width:880px){
  .hero-visual{order:-1;}
  .emblem-ring{width:min(240px,62vw);box-shadow:0 0 0 7px var(--cream),0 0 0 8px var(--line),0 26px 50px -22px rgba(var(--rose-rgb),.45);}
  .art-tile{width:100%;aspect-ratio:16/10;max-height:300px;}
  .art-tile svg{width:auto;height:62%;}
}
@keyframes riseIn{from{opacity:0;translate:0 16px;}to{opacity:1;translate:0 0;}}
.hero-copy > *{animation:riseIn .7s var(--ease-out) both;}
.hero-copy > :nth-child(1){animation-delay:.02s;}
.hero-copy > :nth-child(2){animation-delay:.1s;}
.hero-copy > :nth-child(3){animation-delay:.18s;}
.hero-copy > :nth-child(4){animation-delay:.26s;}
.hero-copy > :nth-child(5){animation-delay:.34s;}

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.5rem);}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem .85rem;}}
.card{display:flex;flex-direction:column;min-width:0;}
.card.card-enter{animation:riseIn .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms);}
.card-art{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--tile);border:1px solid var(--tile-line);
  display:flex;align-items:center;justify-content:center;transition:background .3s;
}
.card:hover .card-art{background:var(--blush);}
.card-art > svg{width:46%;height:46%;color:var(--ink);transition:transform .6s var(--ease-out);}
.card:hover .card-art > svg{transform:scale(1.07) rotate(-3deg);}
.fav-toggle{
  position:absolute;top:.65rem;right:.65rem;width:36px;height:36px;border-radius:50%;
  background:rgba(var(--cream-rgb),.92);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--tile-line);transition:transform .2s var(--ease-out);
}
.fav-toggle:hover{transform:scale(1.1);}
.fav-toggle:active{transform:scale(.92);}
.fav-toggle svg{width:17px;height:17px;color:var(--ink);}
.fav-toggle[aria-pressed="true"] svg{color:var(--rose);}
.card-cat{position:absolute;top:.75rem;left:.75rem;background:var(--ink);color:var(--cream);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:5px;}
.card-cat.is-drop{background:var(--rose);}
.card-body{padding-top:1rem;display:flex;flex-direction:column;gap:.3rem;flex:1;}
.card-body h3{font-size:.98rem;font-weight:800;line-height:1.3;}
.card-body .desc{font-size:.84rem;color:var(--muted);line-height:1.5;}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.85rem;}
.price{font-weight:800;font-size:1rem;color:var(--rose-deep);font-variant-numeric:tabular-nums;white-space:nowrap;}
.buy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--ink);color:var(--cream);
  padding:.62rem 1rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  transition:transform .25s var(--ease-out);
}
.buy-btn:active{transform:scale(.96);}
.buy-btn svg{width:14px;height:14px;flex:none;}
@media (max-width:640px){
  .card-art{border-radius:12px;}
  .card-body h3{font-size:.9rem;}
  .card-body .desc{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .card-foot{flex-direction:column;align-items:stretch;}
  .price{font-size:.92rem;}
  .buy-btn{padding:.7rem .8rem;}
  .fav-toggle{width:32px;height:32px;top:.5rem;right:.5rem;}
  .card-cat{top:.55rem;left:.55rem;font-size:.58rem;}
}
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;padding:3.5rem 1rem;color:var(--muted);border:1.5px dashed var(--tile-line);border-radius:16px;}
.empty-state svg{width:36px;height:36px;color:var(--tile-line);}
.empty-state p{max-width:40ch;line-height:1.6;}
.empty-reset{font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--rose-deep);text-decoration:underline;text-underline-offset:4px;}

/* New Drop (inverted colors) */
.new-drop{background:var(--ink);color:var(--cream);}
.new-drop-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (max-width:880px){.new-drop-inner{grid-template-columns:1fr;}}
.new-drop-head{position:sticky;top:calc(var(--nav-h) + 2rem);}
@media (max-width:880px){.new-drop-head{position:static;}}
.new-drop-head h2{font-size:clamp(2.6rem,6vw,4.4rem);}
.new-drop-head p{margin-top:1rem;max-width:36ch;color:rgba(var(--cream-rgb),.78);line-height:1.65;}
.new-drop .label{color:var(--rose);}
.new-drop-more{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rose);transition:color .2s;}
.new-drop-more:hover{color:var(--blush);}
.new-drop-more svg{width:15px;height:15px;transition:transform .3s var(--ease-out);}
.new-drop-more:hover svg{transform:translateX(4px);}
.drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.85rem,2vw,1.5rem);}
.new-drop .card-art{background:var(--ink-soft);border-color:var(--ink-line);}
.new-drop .card:hover .card-art{background:var(--ink-hover);}
.new-drop .card-art > svg{color:var(--cream);}
.new-drop .card-cat{background:var(--rose);color:var(--cream);}
.new-drop .fav-toggle{background:rgba(var(--ink-rgb),.75);border-color:var(--ink-line);}
.new-drop .fav-toggle svg{color:var(--cream);}
.new-drop .fav-toggle[aria-pressed="true"] svg{color:var(--rose);}
.new-drop .card-body h3{color:var(--cream);}
.new-drop .card-body .desc{color:rgba(var(--cream-rgb),.72);}
.new-drop .price{color:var(--rose);}
.new-drop .buy-btn{background:var(--cream);color:var(--ink);}

/* Shop */
.store-view .shop{padding-bottom:clamp(2.5rem,5vw,3.5rem);}
.shop-head{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(1.75rem,3vw,2.5rem);}
.shop-head h2{font-size:clamp(2rem,4.2vw,2.9rem);}
.shop-head p{margin-top:.75rem;max-width:46ch;color:var(--muted);line-height:1.6;}
.shop-tools{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex:0 1 320px;min-width:min(100%,260px);}
@media (max-width:640px){.shop-tools{flex-basis:100%;align-items:stretch;}}
.search-field{
  display:flex;align-items:center;gap:.6rem;width:100%;background:var(--cream);border:1.5px solid var(--line);
  border-radius:999px;padding:.75rem 1.1rem;transition:border-color .2s,box-shadow .2s;
}
.search-field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px rgba(var(--rose-rgb),.12);}
.search-field svg{width:17px;height:17px;color:var(--ink-soft);flex:none;}
.search-field input{border:none;background:none;outline:none;font:inherit;font-size:.92rem;width:100%;min-width:0;color:var(--ink);}
.search-field input::placeholder{color:var(--placeholder);}
.result-count{font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}

/* Cambiar de tienda */
.store-view .switch-band{padding-block:0 clamp(3.5rem,8vw,6rem);}
.switch-card{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.25rem 2rem;padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem);border-radius:24px;color:var(--cream);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.switch-card.to-blush{background:radial-gradient(120% 120% at 90% 0%,var(--rose-light) 0%,var(--rose) 40%,var(--rose-deep) 100%);}
.switch-card.to-men{background:radial-gradient(120% 120% at 10% 0%,var(--ink-light) 0%,var(--ink) 65%);}
.switch-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(var(--ink-rgb),.55);}
.switch-card .label{color:var(--cream);opacity:.85;}
.switch-card h2{font-size:clamp(1.6rem,3.6vw,2.4rem);}
.switch-word{
  position:absolute;right:-.05em;bottom:-.18em;z-index:-1;font-family:var(--font-display);font-size:clamp(5rem,14vw,10rem);
  line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(var(--cream-rgb),.16);white-space:nowrap;transition:transform 1s var(--ease-out);
}
.switch-card:hover .switch-word{transform:translateX(-4%);}
.switch-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.35rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--cream);color:var(--ink);transition:background .3s,color .3s;}
.switch-card.to-blush .switch-cta{background:var(--ink);color:var(--cream);}
.switch-card:hover .switch-cta{background:var(--cream);color:var(--rose-deep);}
.switch-card.to-men:hover .switch-cta{background:var(--rose);color:var(--cream);}
.switch-cta svg{width:16px;height:16px;transition:transform .35s var(--ease-out);}
.switch-card:hover .switch-cta svg{transform:translateX(4px);}

/* Editorial / features */
.editorial{background:var(--paper-2);}
.editorial blockquote{
  font-family:var(--font-editorial);font-style:italic;font-weight:500;text-align:center;
  font-size:clamp(1.5rem,3.6vw,2.3rem);max-width:24ch;margin:0 auto;line-height:1.3;color:var(--ink);text-wrap:balance;
}
.editorial cite{display:block;margin-top:1.1rem;font-style:normal;font-family:var(--font-body);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);}
.feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;list-style:none;}
@media (max-width:760px){.feature-row{grid-template-columns:1fr;gap:0;}}
.feature{padding-top:1.4rem;border-top:1.5px solid var(--ink);}
@media (max-width:760px){.feature{padding-block:1.3rem;border-top-width:1px;border-top-color:var(--tile-line);}.feature:first-child{border-top:1.5px solid var(--ink);}}
.feature-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem;}
.feature svg{width:22px;height:22px;color:var(--rose-deep);flex:none;}
.feature h3{font-size:1.02rem;font-weight:800;}
.feature p{font-size:.92rem;color:var(--muted);line-height:1.6;max-width:36ch;}

/* CTA banner */
.cta-banner{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center;}
.cta-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 50% 120%,rgba(var(--rose-rgb),.35),transparent 70%);}
.cta-banner h2{font-size:clamp(2rem,5vw,3.2rem);max-width:18ch;margin:0 auto;}
.cta-banner p{margin-top:1rem;color:rgba(var(--cream-rgb),.78);font-size:1.02rem;}
.cta-banner .hero-actions{justify-content:center;}

/* Footer de la tienda */
.store-foot{background:var(--paper);border-top:1px solid var(--line);}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem clamp(2rem,6vw,5rem);padding-block:3rem 2.5rem;}
@media (max-width:640px){.foot-top{grid-template-columns:1fr;}}
.foot-brand{display:flex;flex-direction:column;gap:1rem;max-width:34ch;}
.foot-mark{display:block;width:54px;height:54px;border-radius:50%;background:var(--emblem) center/cover no-repeat,#fff;box-shadow:0 0 0 1px var(--line);}
.foot-brand p{font-size:.88rem;color:var(--muted);line-height:1.65;}
.foot-social{display:flex;gap:.6rem;}
.foot-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,background .2s;}
.foot-social a:hover{border-color:var(--rose);color:var(--rose-deep);background:var(--cream);}
.foot-social svg{width:17px;height:17px;}
.foot-cols{display:flex;flex-wrap:wrap;gap:2rem clamp(2.5rem,6vw,4.5rem);}
.foot-col h2{font-family:var(--font-body);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.foot-col a{font-size:.9rem;color:var(--ink-soft);transition:color .2s;}
.foot-col a:hover{color:var(--rose-deep);}
.foot-bottom{border-top:1px solid var(--line);padding-block:1.25rem 1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.78rem;color:var(--muted);}

/* Floating WhatsApp */
.float-wa{
  position:fixed;right:max(1.1rem,env(safe-area-inset-right));bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:var(--z-float);
  width:54px;height:54px;border-radius:50%;background:var(--rose);color:var(--cream);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 28px -10px rgba(var(--rose-rgb),.65);transition:transform .3s var(--ease-out),background .2s;
}
.float-wa:hover{background:var(--rose-deep);transform:scale(1.07);}
.float-wa:active{transform:scale(.95);}
.float-wa svg{width:26px;height:26px;}
@media (max-width:640px){.float-wa{width:50px;height:50px;}}

/* =====================================================================
   TIENDA CON CABECERA DE NAVEGACIÓN (usada en mujer/)
   Cabecera fija (logo · menú · acciones) con buscador desplegable ·
   carrusel a lo ancho · círculos de categorías. Tamaños compactos.
   ===================================================================== */

/* Altura de la cabecera fija: la usan las anclas (#catalogo…) para no quedar tapadas */
html:has(.masthead){--nav-h:58px;}
@media (max-width:760px){html:has(.masthead){--nav-h:54px;}}

/* Cabecera: logo · menú · acciones */
.masthead{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(var(--cream-rgb),.94);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.masthead-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.75rem,2.5vw,2rem);padding-block:.5rem;}
.masthead-inner > nav{justify-self:center;min-width:0;}
.masthead .brand-logo{--logo-h:36px;}
.masthead-actions{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;}
.masthead .icon-btn{width:38px;height:38px;}
.masthead .icon-btn svg{width:19px;height:19px;}
/* Favoritos como icono con contador, como en la referencia */
.masthead .fav-btn{width:38px;height:38px;padding:0;margin:0;justify-content:center;border-color:transparent;background:transparent;}
.masthead .fav-btn svg{width:19px;height:19px;}
.masthead .fav-btn:hover{background:var(--paper-2);}
.masthead .fav-btn[aria-pressed="true"]{background:var(--blush);}
.masthead .fav-count{position:absolute;top:0;right:-2px;}
@media (max-width:760px){.masthead .brand-logo{--logo-h:30px;}}

/* Menú dentro de la cabecera (en móvil se usa el menú lateral) */
.menu-links{display:flex;align-items:center;gap:clamp(.15rem,1vw,.75rem);list-style:none;margin:0;padding:0;}
.menu-links a{
  position:relative;display:flex;align-items:center;padding:.45rem .6rem;border-radius:999px;white-space:nowrap;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  transition:color .2s,background .2s;
}
.menu-links a::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.1rem;height:2px;background:var(--rose);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.menu-links a:hover,.menu-links a.is-current{color:var(--ink);}
.menu-links a:hover::after,.menu-links a.is-current::after{transform:scaleX(1);}
.menu-links a.is-hot{background:var(--rose-deep);color:var(--cream);padding-inline:.95rem;}
.menu-links a.is-hot::after{display:none;}
.menu-links a.is-hot:hover{background:var(--rose);color:var(--cream);}
.menu-links .nav-switch{color:var(--rose-deep);}
.menu-cta{padding:.5rem 1rem;font-size:.68rem;margin-right:.4rem;}
@media (max-width:1200px){.menu-cta{display:none;}}
@media (max-width:1100px){
  .menu-links a{padding-inline:.45rem;}
  .menu-links a::after{left:.45rem;right:.45rem;}
  .menu-links a.is-hot{padding-inline:.8rem;}
}
@media (max-width:960px){.masthead-inner > nav{display:none;}}

/* Buscador desplegable (se abre con la lupa) */
.searchbar{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out);}
.searchbar.open{grid-template-rows:1fr;}
.searchbar-inner{overflow:hidden;}
.searchbar form{padding-block:.1rem .7rem;}
.masthead-search{max-width:100%;padding:.55rem 1.05rem;border-color:var(--ink);background:var(--cream);}
.masthead-search svg{width:15px;height:15px;}
.masthead-search input{font-size:.86rem;}
.masthead-search input::-webkit-search-cancel-button{cursor:pointer;}

/* Carrusel del banner principal: todas las imágenes son de 1908x400 */
.store-view .hero-banner{padding-block:0;background:var(--blush);}
.carousel{position:relative;overflow:hidden;}
.carousel-track{
  display:flex;list-style:none;margin:0;padding:0;
  transition:transform .6s var(--ease-out);
}
.carousel-slide{flex:0 0 100%;min-width:0;}
.carousel-slide a{display:block;}
.carousel-slide img{width:100%;height:auto;aspect-ratio:1908/400;object-fit:cover;}
.carousel-btn{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--ink-rgb),.4);color:var(--cream);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .25s,transform .25s var(--ease-out);
}
.carousel-btn:hover{background:rgba(var(--ink-rgb),.72);}
.carousel-btn:active{transform:translate(0,-50%) scale(.94);}
.carousel-btn svg{width:20px;height:20px;}
.carousel-prev{left:clamp(.5rem,1.5vw,1.25rem);}
.carousel-next{right:clamp(.5rem,1.5vw,1.25rem);}
.carousel-dots{
  position:absolute;left:50%;bottom:clamp(.5rem,1.4vw,1rem);translate:-50% 0;z-index:2;
  display:flex;align-items:center;gap:.45rem;
}
.carousel-dot{
  width:9px;height:9px;border-radius:999px;background:rgba(var(--cream-rgb),.65);
  box-shadow:0 1px 4px rgba(var(--ink-rgb),.35);transition:width .3s var(--ease-out),background .25s;
}
.carousel-dot:hover{background:var(--cream);}
.carousel-dot[aria-current="true"]{width:24px;background:var(--rose);}
@media (max-width:640px){
  .carousel-btn{width:32px;height:32px;}
  .carousel-btn svg{width:16px;height:16px;}
  .carousel-dot{width:7px;height:7px;}
  .carousel-dot[aria-current="true"]{width:18px;}
}

/* Títulos de sección en la cursiva editorial, el mismo estilo de los
   antetítulos pero un poco más grandes. */
.section-head{text-align:center;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);}
.section-head::after{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--rose);margin:.8rem auto 0;}
.section-eyebrow{
  font-family:var(--font-editorial);font-style:italic;font-weight:500;
  font-size:.98rem;color:var(--rose-deep);margin:0 0 .3rem;
}
.section-title{
  font-family:var(--font-editorial);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.2;color:var(--rose-deep);
}

/* Círculos de categorías */
.store-view .categories{padding-block:clamp(1.75rem,3.5vw,2.5rem) clamp(1.5rem,3vw,2.25rem);}
.cat-list{
  list-style:none;margin:clamp(1.1rem,2vw,1.5rem) 0 0;padding:.4rem 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem clamp(2.5rem,6.5vw,5.25rem);
}
.cat-list li{flex:0 0 104px;}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:.65rem;width:100%;text-align:center;}
.cat-circle{
  width:96px;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--blush);color:var(--rose-deep);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--line);
  transition:transform .45s var(--ease-out),box-shadow .3s;
}
.cat-circle svg{width:42%;height:42%;}
.cat-circle img{width:100%;height:100%;object-fit:cover;background:#fff;}
.cat-list li:nth-child(5n+2) .cat-circle{background:var(--rose-deep);color:var(--cream);}
.cat-list li:nth-child(5n+3) .cat-circle{background:var(--blush);color:var(--rose-deep);}
.cat-list li:nth-child(5n+4) .cat-circle{background:var(--rose);color:var(--cream);}
.cat-list li:nth-child(5n+5) .cat-circle{background:var(--ink);color:var(--blush);}
.cat-item:hover .cat-circle{transform:translateY(-4px);}
.cat-item:active .cat-circle{transform:translateY(-1px) scale(.97);}
.cat-item[aria-pressed="true"] .cat-circle{box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--rose);}
/* Mismo estilo de letra que los enlaces de la barra de navegación (.menu-links a) */
.cat-name{font-family:var(--font-body);font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.cat-item[aria-pressed="true"] .cat-name{color:var(--rose-deep);}
@media (max-width:640px){
  /* En celular, fila deslizable */
  .cat-list{flex-wrap:nowrap;justify-content:flex-start;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .6rem .75rem;scroll-padding-inline:.6rem;scrollbar-width:none;}
  .cat-list::-webkit-scrollbar{display:none;}
  .cat-list li{flex:0 0 72px;scroll-snap-align:start;}
  .cat-circle{width:72px;}
  .cat-item{gap:.5rem;}
  .cat-name{font-size:.66rem;}
}

/* ---------- Densidad compacta de la tienda de mujer ----------
   Reduce secciones, títulos y tarjetas compartidas solo en esta tienda. */
.tienda-mujer .store-view :is(.new-drop,.shop,.editorial,.cta-banner){padding-block:clamp(2.5rem,5.5vw,4rem);}
.tienda-mujer .store-view .shop{padding-bottom:clamp(2rem,4vw,2.75rem);}
.tienda-mujer .store-view .switch-band{padding-bottom:clamp(2.5rem,5.5vw,4rem);}
.tienda-mujer .new-drop-head h2{font-size:clamp(2rem,4.4vw,3.2rem);}
.tienda-mujer .new-drop-head p{font-size:.94rem;}
.tienda-mujer .shop-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);}
.tienda-mujer .shop-head p{font-size:.94rem;}
.tienda-mujer .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:clamp(1.25rem,2.5vw,1.75rem) clamp(.85rem,1.6vw,1.2rem);}
@media (min-width:881px){.tienda-mujer .drop-grid{max-width:520px;justify-self:end;width:100%;}}
.tienda-mujer .card-body{padding-top:.8rem;}
.tienda-mujer .card-body h3{font-size:.9rem;}
.tienda-mujer .card-body .desc{font-size:.8rem;}
.tienda-mujer .price{font-size:.92rem;}
.tienda-mujer .buy-btn{padding:.52rem .85rem;font-size:.68rem;}
@media (max-width:640px){.tienda-mujer .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .75rem;}}

/* ---------- Aparición al hacer scroll ----------
   Solo se esconde si hay JavaScript (clase js-anim), para que sin él
   la página siga viéndose completa. */
html.js-anim .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:calc(var(--d,0) * 80ms);
}
html.js-anim .reveal.is-in{opacity:1;transform:none;}

/* ---------- Cabecera al bajar ---------- */
.masthead{transition:box-shadow .35s var(--ease-out),background-color .35s;}
.masthead .brand-logo{transition:height .35s var(--ease-out),width .35s var(--ease-out);}
.masthead.is-stuck{background:rgba(var(--cream-rgb),.98);box-shadow:0 12px 30px -24px rgba(var(--ink-rgb),.85);}
.masthead.is-stuck .brand-logo{--logo-h:31px;}
@media (max-width:760px){.masthead.is-stuck .brand-logo{--logo-h:27px;}}

/* ---------- Detalles del carrusel ---------- */
@keyframes kenBurns{from{transform:scale(1.035);}to{transform:scale(1);}}
.carousel-slide[aria-hidden="false"] img{animation:kenBurns 7s var(--ease-out) both;}
.carousel-btn{opacity:.8;transition:opacity .3s,background .25s,transform .25s var(--ease-out);}
.carousel:hover .carousel-btn,.carousel:focus-within .carousel-btn{opacity:1;}

/* ---------- Pulido de la tienda de mujer ---------- */
.tienda-mujer .cat-circle svg{transition:transform .45s var(--ease-out);}
.tienda-mujer .cat-item:hover .cat-circle svg{transform:scale(1.1);}
.tienda-mujer .cat-name{transition:color .2s;}
.tienda-mujer .cat-item:hover .cat-name{color:var(--rose-deep);}

.tienda-mujer .card-art{transition:background .3s,transform .45s var(--ease-out),box-shadow .45s var(--ease-out);}
.tienda-mujer .card:hover .card-art{transform:translateY(-4px);box-shadow:0 20px 32px -24px rgba(var(--ink-rgb),.55);}
/* El botón "Comprar" NO cambia de fondo al pasar el mouse: su animación es
   el texto que sube y muestra el duplicado en rosa. Si el fondo también se
   pusiera rosa, ese texto quedaría invisible. */
.tienda-mujer .card-body h3{transition:color .2s;}
.tienda-mujer .card:hover .card-body h3{color:var(--rose-deep);}
.tienda-mujer .new-drop .card:hover .card-body h3{color:var(--rose);}

/* El botón flotante de WhatsApp entra con un pequeño rebote */
@keyframes floatIn{from{opacity:0;transform:scale(.6) translateY(12px);}to{opacity:1;transform:none;}}
.tienda-mujer .float-wa{animation:floatIn .6s cubic-bezier(.34,1.56,.64,1) .5s both;}

/* =====================================================================
   PULIDO PROFESIONAL — compartido por hombre/ y mujer/.
   Tarjetas más finas, secciones sin zonas muertas y controles discretos.
   ===================================================================== */

/* Tarjetas: fondo con luz suave, icono más pequeño y sin borde */
.card-art{
  isolation:isolate;border:none;border-radius:18px;
  background:radial-gradient(90% 70% at 50% 20%,var(--cream) 0%,var(--tile) 75%);
}
.card-art::before{
  content:"";position:absolute;z-index:-1;width:48%;aspect-ratio:1;border-radius:50%;
  background:rgba(var(--rose-rgb),.09);transition:transform .6s var(--ease-out),background .3s;
}
.card:hover .card-art{background:radial-gradient(90% 70% at 50% 20%,var(--cream) 0%,var(--blush) 80%);}
.card:hover .card-art::before{transform:scale(1.12);background:rgba(var(--rose-rgb),.14);}
.card-art > svg{width:30%;height:30%;color:var(--rose-deep);}
.card-cat{border-radius:999px;padding:.34rem .7rem;letter-spacing:.1em;}
.fav-toggle{border-color:transparent;box-shadow:0 6px 16px -8px rgba(var(--ink-rgb),.3);}
.card-body{gap:.25rem;}
.card-kicker{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.card-body h3{letter-spacing:-.005em;}
.card-body .desc{text-wrap:pretty;}
.card-foot{padding-top:1rem;border-top:1px solid var(--line);margin-top:auto;}
.card-body .desc{margin-bottom:.35rem;}

/* New drop en negro: la misma luz, en tonos oscuros */
.new-drop .card-art{background:radial-gradient(90% 70% at 50% 20%,#2e2729 0%,#1d1a1b 80%);}
.new-drop .card:hover .card-art{background:radial-gradient(90% 70% at 50% 20%,#3a2a31 0%,#221d1f 80%);}
.new-drop .card-art::before{background:rgba(var(--rose-rgb),.16);}
.new-drop .card-art > svg{color:var(--blush);}
.new-drop .card-kicker{color:rgba(var(--cream-rgb),.55);}
.new-drop .card-foot{border-top-color:var(--ink-line);}
.new-drop .fav-toggle{box-shadow:none;}
/* Solo hay pocos productos en el drop: texto y tarjetas centrados entre sí, sin hueco debajo */
@media (min-width:881px){
  .new-drop-inner{align-items:center;}
  .new-drop-head{position:static;}
}
.new-drop .label{letter-spacing:.2em;}

/* Catálogo en 3 columnas: 6 productos quedan en 2 filas completas */
@media (min-width:900px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tienda-mujer .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem);}
  .shop .card-art{aspect-ratio:5/4;}
  .drop-grid .card-art{aspect-ratio:1;}
}
.shop-head{padding-bottom:clamp(1.25rem,2.5vw,1.75rem);border-bottom:1px solid var(--line);}
.result-count{align-self:flex-end;padding:.4rem .85rem;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);}
@media (max-width:640px){.result-count{align-self:flex-start;}}

/* Carrusel: las flechas solo aparecen al pasar el mouse, para no tapar la tipografía del banner */
@media (hover:hover) and (pointer:fine){
  .carousel .carousel-btn{opacity:0;scale:.9;transition:opacity .3s,scale .3s var(--ease-out),background .25s;}
  .carousel:hover .carousel-btn,.carousel:focus-within .carousel-btn{opacity:1;scale:1;}
}
.carousel-btn{width:40px;height:40px;background:rgba(var(--cream-rgb),.82);color:var(--ink);box-shadow:0 8px 20px -10px rgba(var(--ink-rgb),.45);}
.carousel-btn:hover{background:var(--cream);}

/* Cambiar de tienda y editorial: más aire y jerarquía */
.switch-card{box-shadow:0 24px 50px -36px rgba(var(--ink-rgb),.6);}
.feature{border-top-width:1px;border-top-color:var(--tile-line);}
.feature-head svg{padding:.45rem;width:36px;height:36px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 1px var(--line);}

/* CTA final: el brillo rosa un poco más presente */
.cta-banner::before{background:radial-gradient(55% 90% at 50% 125%,rgba(var(--rose-rgb),.45),transparent 70%);}
.cta-banner h2{letter-spacing:-.02em;}

/* Pie: espacio para que el botón flotante de WhatsApp no tape el texto */
.foot-bottom{padding-bottom:calc(1.5rem + 64px);}
@media (min-width:641px){.foot-bottom{padding-bottom:1.5rem;padding-right:calc(clamp(1rem,4vw,2.5rem) + 72px);}}
.foot-col h2{color:var(--muted);}

/* =====================================================================
   CARRITO — panel lateral, contador en la bolsa y aviso al agregar.
   Lo crea js/carrito.js; usa los mismos tokens y formas del menú lateral.
   ===================================================================== */
/* La bolsa del header ahora abre el carrito: visible también en celular */
@media (max-width:560px){.bag-btn{display:inline-flex;}}
.bag-btn .cart-count{position:absolute;top:0;right:-2px;}

.cart-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(var(--ink-rgb),.4);opacity:0;pointer-events:none;transition:opacity .3s;}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-panel{
  position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);width:min(420px,100vw);
  display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font-family:var(--font-body);
  box-shadow:-24px 0 60px -24px rgba(var(--ink-rgb),.35);transform:translateX(100%);visibility:hidden;
  transition:transform .4s var(--ease-out),visibility 0s linear .4s;
}
.cart-panel.open{transform:none;visibility:visible;transition:transform .4s var(--ease-out),visibility 0s;}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);}
.cart-head .label{margin:0 0 .35rem;color:var(--rose-deep);}
.cart-title{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1;}
.cart-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.5rem 1.5rem 1.25rem;}
.cart-foot{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.5rem max(1.25rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.cart-foot .btn{width:100%;}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.35rem;}
.cart-total span{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cart-total strong{font-size:1.25rem;font-weight:800;color:var(--rose-deep);font-variant-numeric:tabular-nums;}
.cart-link{align-self:center;padding:.45rem .6rem;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;transition:color .2s;}
.cart-link:hover{color:var(--rose-deep);}

.cart-list{list-style:none;margin:0;padding:0;}
.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);}
.cart-item-name{font-weight:800;font-size:.94rem;line-height:1.3;}
.cart-item-meta{margin-top:.25rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.cart-item-price{font-weight:800;font-size:.94rem;color:var(--rose-deep);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
.cart-item-controls{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.7rem;}
.cart-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;}
.cart-qty button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:background .2s;}
.cart-qty button:hover{background:var(--paper-2);}
.cart-qty button:active{transform:scale(.92);}
.cart-qty output{min-width:1.7rem;text-align:center;font-weight:800;font-size:.88rem;font-variant-numeric:tabular-nums;}
.cart-size select{
  appearance:none;-webkit-appearance:none;height:36px;padding:0 2rem 0 .9rem;border-radius:999px;
  border:1px solid var(--line);font:inherit;font-size:.82rem;font-weight:700;color:var(--ink);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141212' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .7rem center/12px no-repeat;
}
.cart-size-fixed{font-size:.78rem;font-weight:700;color:var(--muted);}
.cart-remove{margin-left:auto;padding:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.cart-remove:hover{color:var(--rose-deep);}

.cart-empty{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:3.5rem .5rem;text-align:center;color:var(--muted);line-height:1.6;}
.cart-empty svg{width:40px;height:40px;color:var(--tile-line);}
.cart-sent svg{width:48px;height:48px;padding:.7rem;border-radius:50%;background:var(--blush);color:var(--rose-deep);box-sizing:content-box;}
.cart-sent strong{color:var(--ink);}

.cart-summary{display:flex;justify-content:space-between;align-items:baseline;margin:1rem 0 1.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--paper-2);font-size:.86rem;font-weight:700;color:var(--ink-soft);}
.cart-summary strong{color:var(--rose-deep);font-variant-numeric:tabular-nums;}
.cart-form{display:flex;flex-direction:column;gap:.95rem;}
.cart-field label{display:block;margin-bottom:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.cart-field input,.cart-field textarea{
  width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.cart-field textarea{resize:vertical;min-height:84px;}
.cart-field input::placeholder,.cart-field textarea::placeholder{color:var(--placeholder);}
.cart-field input:focus,.cart-field textarea:focus,.cart-size select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(var(--rose-rgb),.14);}
.cart-panel [aria-invalid="true"]{border-color:#b42318;}
.cart-error{grid-column:1/-1;margin-top:.35rem;font-size:.78rem;font-weight:600;color:#b42318;}
.cart-note{font-size:.8rem;line-height:1.5;color:var(--muted);}

/* Aviso al agregar un producto */
.cart-toast{
  position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:var(--z-overlay);
  display:flex;align-items:center;gap:1rem;width:max-content;max-width:calc(100vw - 2rem);
  padding:.7rem .7rem .7rem 1.1rem;border-radius:999px;background:var(--ink);color:var(--cream);
  font-size:.86rem;font-weight:600;box-shadow:0 18px 40px -18px rgba(var(--ink-rgb),.7);
  opacity:0;translate:-50% 20px;pointer-events:none;transition:opacity .3s,translate .4s var(--ease-out);
}
.cart-toast.show{opacity:1;translate:-50% 0;pointer-events:auto;}
.cart-toast-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cart-toast-btn{flex:none;padding:.5rem .9rem;border-radius:999px;background:var(--rose);color:var(--cream);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:background .2s;}
.cart-toast-btn:hover{background:var(--rose-deep);}
/* En celular sube un poco para no chocar con el botón flotante de WhatsApp */
@media (max-width:640px){.cart-toast{bottom:calc(max(1.1rem,env(safe-area-inset-bottom)) + 62px);}}
/* El aviso también debe verse encima de la vista de producto */
.cart-toast{z-index:calc(var(--z-modal) + 10);}
@media (min-width:761px){
  body:has(.pv.open) .cart-toast{top:1.1rem;bottom:auto;translate:-50% -20px;}
  body:has(.pv.open) .cart-toast.show{translate:-50% 0;}
}
@keyframes countBump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
.cart-count.bump{animation:countBump .45s var(--ease-out);}

/* =====================================================================
   TARJETA CLICABLE — el nombre es un enlace que cubre toda la tarjeta y
   abre la vista del producto. Favoritos y "Agregar" quedan por encima.
   ===================================================================== */
.card{position:relative;}
.card-open{color:inherit;}
.card-open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px;}
.card-open:focus-visible{outline:none;}
.card:has(.card-open:focus-visible) .card-art{outline:2.5px solid var(--rose);outline-offset:3px;}
.card-art{z-index:2;pointer-events:none;}
.card-art .fav-toggle{pointer-events:auto;}
.card-foot .buy-btn,.card-buy{position:relative;z-index:2;}
.card-art.has-img::before{display:none;}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.card:hover .card-img{transform:scale(1.04);}
.card-art > .card-cat,.card-art > .fav-toggle{z-index:1;}
/* "Agregar al carrito" se acorta a "Agregar" cuando la tarjeta es angosta */
.card-foot{container-type:inline-size;}
@container (max-width:300px){.buy-extra{display:none;}}

/* Selector − cantidad + que reemplaza a "Agregar" cuando el producto ya está en la bolsa */
.card-buy{display:flex;}
.card-qty{
  display:inline-flex;align-items:center;justify-content:space-between;gap:.15rem;padding:.2rem;
  border-radius:999px;background:var(--ink);color:var(--cream);animation:cardQtyIn .35s var(--ease-out);
}
.card-qty-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:background .2s,transform .2s;}
.card-qty-btn:hover{background:rgba(var(--cream-rgb),.16);}
.card-qty-btn:active{transform:scale(.9);}
.card-qty-btn svg{width:14px;height:14px;}
.card-qty output{min-width:1.6rem;text-align:center;font-weight:800;font-size:.82rem;font-variant-numeric:tabular-nums;}
.new-drop .card-qty{background:var(--cream);color:var(--ink);}
.new-drop .card-qty-btn:hover{background:rgba(var(--ink-rgb),.1);}
@keyframes cardQtyIn{from{transform:scale(.9);opacity:.4;}to{transform:none;opacity:1;}}
@media (max-width:640px){
  .card-buy > *{width:100%;}
  .card-qty-btn{width:34px;height:34px;}
}

/* Bolsa: miniatura con la foto o el icono de cada producto */
.cart-item{grid-template-columns:64px minmax(0,1fr) auto;column-gap:.9rem;}
.cart-item-media{
  grid-row:1 / span 2;align-self:start;width:64px;aspect-ratio:1;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;background:var(--tile);color:var(--rose-deep);
}
.cart-item-media img{width:100%;height:100%;object-fit:cover;}
.cart-item-media svg{width:56%;height:56%;}
.cart-item .cart-item-controls,.cart-item .cart-error{grid-column:2 / -1;}
@media (max-width:400px){
  .cart-item{grid-template-columns:52px minmax(0,1fr) auto;}
  .cart-item-media{width:52px;}
}

/* =====================================================================
   VISTA DE PRODUCTO — la crea js/producto.js.
   Computador: ventana de dos columnas. Celular: pantalla completa con la
   barra de compra fija abajo.
   ===================================================================== */
.pv-overlay{
  position:fixed;inset:0;z-index:calc(var(--z-modal) - 1);background:rgba(var(--ink-rgb),.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s;
}
.pv-overlay.open{opacity:1;pointer-events:auto;}
.pv{
  position:fixed;inset:0;margin:auto;z-index:var(--z-modal);
  width:min(1040px,calc(100vw - 3rem));height:min(680px,calc(100dvh - 3rem));
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-radius:26px;overflow:hidden;background:var(--cream);color:var(--ink);font-family:var(--font-body);
  box-shadow:0 50px 120px -30px rgba(var(--ink-rgb),.6);
  opacity:0;scale:.97;visibility:hidden;
  transition:opacity .3s,scale .4s var(--ease-out),visibility 0s linear .4s;
}
.pv.open{opacity:1;scale:1;visibility:visible;transition:opacity .3s,scale .4s var(--ease-out),visibility 0s;}
.pv-close{
  position:absolute;top:1rem;right:1rem;z-index:3;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(var(--cream-rgb),.92);color:var(--ink);
  box-shadow:0 6px 18px -8px rgba(var(--ink-rgb),.4);transition:background .2s,transform .2s var(--ease-out);
}
.pv-close:hover{background:var(--blush);}
.pv-close:active{transform:scale(.92);}
.pv-close svg{width:18px;height:18px;}

.pv-media{display:flex;flex-direction:column;gap:.75rem;min-height:0;padding:1.25rem;background:var(--paper-2);}
.pv-main{
  position:relative;isolation:isolate;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:18px;
  background:radial-gradient(90% 70% at 50% 25%,var(--cream) 0%,var(--tile) 78%);
}
.pv-main::before{content:"";position:absolute;z-index:-1;width:min(60%,340px);aspect-ratio:1;border-radius:50%;background:rgba(var(--rose-rgb),.1);}
.pv-main.has-img::before{display:none;}
.pv-main > svg{width:min(34%,190px);height:auto;color:var(--rose-deep);}
.pv-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pv-main .card-cat{position:absolute;top:1rem;left:1rem;z-index:1;}
.pv-thumbs{display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:none;flex:none;}
.pv-thumbs::-webkit-scrollbar{display:none;}
.pv-thumb{flex:none;width:64px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--tile);box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s;}
.pv-thumb img{width:100%;height:100%;object-fit:cover;}
.pv-thumb[aria-pressed="true"]{box-shadow:0 0 0 2px var(--rose);}

.pv-info{display:flex;flex-direction:column;min-height:0;}
.pv-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2.5rem 2.25rem 1.5rem;}
.pv-title{margin-top:.45rem;padding-right:2.5rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.02;letter-spacing:-.01em;}
.pv-price{margin-top:.75rem;font-weight:800;font-size:1.3rem;color:var(--rose-deep);font-variant-numeric:tabular-nums;}
.pv-desc{margin-top:1rem;max-width:46ch;font-size:1rem;line-height:1.65;color:var(--ink-soft);text-wrap:pretty;}
.pv-block{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);}
.pv-block p{max-width:52ch;font-size:.94rem;line-height:1.7;color:var(--muted);text-wrap:pretty;}
.pv-label{margin:0 0 .65rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.pv-features{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;}
.pv-features li{position:relative;padding-left:1.15rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft);}
.pv-features li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--rose);}

.pv-sizes{min-width:0;margin-inline:0;margin-bottom:0;padding-inline:0;padding-bottom:0;border-inline:none;border-bottom:none;}
.pv-sizes legend{float:left;width:100%;padding:0;}
.pv-size-list{clear:both;display:flex;flex-wrap:wrap;gap:.5rem;}
.pv-size{position:relative;}
.pv-size input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.pv-size span{
  display:grid;place-items:center;min-width:50px;height:42px;padding:0 .95rem;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:.84rem;
  transition:background .2s,border-color .2s,color .2s;
}
.pv-size:hover span{border-color:var(--ink);}
.pv-size input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.pv-size input:focus-visible + span{outline:2.5px solid var(--rose);outline-offset:2px;}
.pv-sizes.is-invalid .pv-size span{border-color:#b42318;}
.pv-block .cart-error{margin-top:.6rem;font-size:.8rem;color:#b42318;}

.pv-buy{display:flex;flex-direction:column;gap:.8rem;padding:1.1rem 2.25rem 1.4rem;border-top:1px solid var(--line);background:var(--cream);}
.pv-qty-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.pv-qty-row .pv-label{margin:0;}
.cart-qty button:disabled{opacity:.35;cursor:not-allowed;}
.cart-qty button:disabled:hover{background:none;}
.pv-add{width:100%;padding-block:1.05rem;}
.pv-add svg{width:18px;height:18px;}
.pv-add.is-added{background:var(--ink);}
.pv-extra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;}
.pv-fav{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem 0;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s;}
.pv-fav svg{width:16px;height:16px;}
.pv-fav:hover,.pv-fav[aria-pressed="true"]{color:var(--rose-deep);}
.pv-ship{font-size:.78rem;color:var(--muted);}

@media (max-width:760px){
  .pv{
    width:100%;height:100%;border-radius:0;display:block;overflow-y:auto;overscroll-behavior:contain;
    scale:none;translate:0 16px;transition:opacity .3s,translate .4s var(--ease-out),visibility 0s linear .4s;
  }
  .pv.open{translate:none;transition:opacity .3s,translate .4s var(--ease-out),visibility 0s;}
  .pv-close{position:sticky;top:.75rem;margin:.75rem .75rem -3.4rem auto;display:grid;}
  .pv-media{padding:.75rem .75rem 0;background:var(--cream);}
  .pv-main{flex:none;aspect-ratio:1;max-height:48dvh;}
  .pv-info{display:block;}
  .pv-content{overflow:visible;padding:1.35rem 1.25rem 1.5rem;}
  .pv-title{padding-right:0;}
  .pv-buy{
    position:sticky;bottom:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.65rem;
    padding:.8rem 1.25rem max(.9rem,env(safe-area-inset-bottom));
    box-shadow:0 -14px 30px -24px rgba(var(--ink-rgb),.5);
  }
  .pv-qty-row .pv-label{display:none;}
  .pv-add{flex:1;min-width:0;padding-inline:1rem;}
  .pv-add-text{overflow:hidden;text-overflow:ellipsis;}
  .pv-extra{flex-basis:100%;}
  body:has(.pv.open) .cart-toast{bottom:calc(max(.9rem,env(safe-area-inset-bottom)) + 120px);}
}