/* =====================================================================
   Mentarosa · Ficha de producto (PDP)
   Reutiliza tokens, header, botones, tarjetas (.p) y footer de site.css
   ===================================================================== */
.pdp{position:relative;background:var(--rosa-nube);overflow:clip;padding:128px 48px 160px}
.pdp::before{content:"";position:absolute;width:620px;height:620px;left:-260px;top:-180px;border-radius:50%;background:var(--rosa-pastel);opacity:.45}
.pdp::after{content:"";position:absolute;width:460px;height:460px;right:-180px;top:30%;border-radius:50%;background:var(--dorado-pastel);opacity:.6}
.pdp [hidden]{display:none!important}  /* que [hidden] gane a display:grid/flex */
.pdp-wrap,.nf{position:relative;z-index:1;max-width:1344px;margin:0 auto}
.pdp .eyebrow{justify-content:flex-start}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 13px/18px var(--font-body);color:var(--vino-600);margin-bottom:28px}
.crumbs a{color:var(--rosa-profundo);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:var(--vino-900);font-weight:600}

.pdp-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:start}

/* ---------- galería ---------- */
.gallery{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start}
.g-thumbs{display:flex;flex-direction:column;gap:12px}
.g-thumb{position:relative;width:88px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--g);padding:0;
  box-shadow:0 0 0 2px transparent,0 6px 14px rgba(184,42,88,.1);transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s}
.g-thumb:hover{transform:translateY(-2px)}
.g-thumb[aria-selected="true"]{box-shadow:0 0 0 2.5px var(--brand-rosa),0 10px 20px rgba(184,42,88,.2)}
.g-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-thumb img.cutout{object-fit:contain;padding:8px;transform:rotate(-6deg)}
.g-thumb .ph-i{position:absolute;inset:0;display:grid;place-items:center;color:var(--rosa-profundo)}
.g-thumb .ph-i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.g-thumb:focus-visible,.g-btn:focus-visible{outline:3px solid rgba(239,68,121,.45);outline-offset:3px}
.g-main{position:relative;aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;isolation:isolate;background:var(--g);cursor:zoom-in;
  box-shadow:0 30px 60px rgba(184,42,88,.18);touch-action:pan-y}
.g-stage{position:absolute;inset:0}
.g-slide{position:absolute;inset:0;animation:gIn .55s cubic-bezier(.22,.9,.3,1) both}
.g-slide.out{animation:gOut .4s ease both}
@keyframes gIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes gOut{to{opacity:0}}
.g-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.g-slide img.cutout{inset:6%;width:88%;height:88%;object-fit:contain;transform:rotate(-7deg);
  filter:drop-shadow(0 30px 24px rgba(184,42,88,.3)) drop-shadow(0 6px 8px rgba(61,19,37,.16));transition:transform .9s cubic-bezier(.22,.9,.3,1)}
.g-main:hover .g-slide img.cutout{transform:rotate(-4deg) scale(1.03)}
.g-slide .ph{position:absolute;inset:16px;border-radius:calc(var(--radius-xl) - 16px);border:2px dashed rgba(184,42,88,.28);display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;color:var(--rosa-profundo);font:600 13px/18px var(--font-body)}
.g-slide .ph svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.g-slide .ph b{font:600 22px/1.1 var(--font-display)}
.g-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--vino-900);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(184,42,88,.16),inset 0 1px 0 #fff;transition:transform .25s,background .25s,color .25s}
.g-btn:hover{background:var(--brand-rosa);color:#fff;transform:scale(1.06)}
.g-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-zoom{position:absolute;z-index:3;right:18px;top:18px}
.g-tag{position:absolute;z-index:3;left:18px;top:18px;padding:7px 14px;border-radius:var(--radius-pill);font:700 11px/14px var(--font-body);letter-spacing:.12em;text-transform:uppercase;background:var(--brand-dorado);color:var(--vino-900);box-shadow:0 4px 10px rgba(138,95,18,.2)}
.g-tag.best{background:var(--rosa-profundo);color:#fff}
.g-tag.soldout{background:var(--vino-900);color:#fff}
.g-nav{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:5px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9)}
.g-nav .g-btn{width:38px;height:38px;box-shadow:none}
.g-count{min-width:44px;text-align:center;font:600 14px/18px var(--font-display);color:var(--vino-900)}
.g-spark{position:absolute;z-index:2;left:22px;bottom:22px;width:44px;height:52px;pointer-events:none}
.gallery.single{grid-template-columns:minmax(0,1fr)}
.gallery.single .g-thumbs,.gallery.single .g-nav{display:none}

/* ---------- información ---------- */
.info{position:sticky;top:112px}
.i-top{display:flex;align-items:center;gap:10px}
.i-cat{font:700 12px/16px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-profundo);text-decoration:none}
.i-cat:hover{text-decoration:underline;text-underline-offset:3px}
.i-tag{padding:5px 11px;border-radius:var(--radius-pill);font:700 10.5px/14px var(--font-body);letter-spacing:.12em;background:var(--brand-dorado);color:var(--vino-900)}
.i-tag.best{background:var(--rosa-profundo);color:#fff}
.i-tag.soldout{background:var(--vino-900);color:#fff}
.i-name{margin-top:12px;font:600 clamp(36px,3.9vw,56px)/1.02 var(--font-display);letter-spacing:-.025em;color:var(--vino-900)}
.i-price{display:flex;align-items:baseline;gap:12px;margin-top:16px;font:600 30px/1 var(--font-display);color:var(--rosa-profundo)}
.i-price s{font:400 17px/1 var(--font-body);color:var(--vino-600)}
.i-avail{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 14px 7px 10px;border-radius:var(--radius-pill);background:#fff;font:600 13.5px/18px var(--font-body);color:var(--vino-900);box-shadow:0 2px 10px rgba(184,42,88,.08)}
.i-avail i{width:9px;height:9px;border-radius:50%;background:var(--brand-rosa);box-shadow:0 0 0 4px rgba(239,68,121,.15)}
.i-avail.low i{background:var(--brand-dorado);box-shadow:0 0 0 4px rgba(247,208,138,.35)}
.i-avail.low{color:var(--dorado-profundo)}
.i-avail.out i{background:var(--vino-600);box-shadow:none}
.i-avail.out{color:var(--vino-600)}
.i-lead{margin-top:20px;max-width:520px;font:italic 400 21px/1.4 var(--font-accent);color:var(--rosa-profundo)}

.opt{margin-top:26px}
.opt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.opt-label{font:500 15px/20px var(--font-body);color:var(--vino-600)}
.opt-label b{font-weight:700;color:var(--vino-900)}
.opt-help{font:600 13px/18px var(--font-body);color:var(--rosa-profundo);text-decoration:underline;text-underline-offset:3px;position:relative}
.opt-list{display:flex;flex-wrap:wrap;gap:10px}
.opt.shake .opt-list{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,80%{transform:translateX(-3px)}40%,60%{transform:translateX(5px)}}
.o-size{position:relative;min-width:56px;height:50px;padding:0 16px;border-radius:var(--radius-pill);font:600 15px/1 var(--font-display);color:var(--vino-900);
  background:#fff;border:1.5px solid var(--rosa-pastel);transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.22,.9,.3,1)}
.o-size:hover{border-color:var(--brand-rosa);transform:translateY(-2px)}
.o-size[aria-checked="true"]{background:var(--brand-rosa);border-color:var(--brand-rosa);color:#fff;animation:pick .35s cubic-bezier(.22,.9,.3,1)}
.o-size.na{color:var(--vino-600);background:transparent;border-style:dashed;opacity:.7}
.o-size.na::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:currentColor;transform:rotate(-14deg)}
.o-size.na[aria-checked="true"]{background:var(--vino-600);border-color:var(--vino-600);color:#fff;opacity:1}
.o-size.low::before{content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--brand-dorado);box-shadow:0 0 0 2px var(--rosa-nube)}
@keyframes pick{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.o-color{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 18px 0 8px;border-radius:var(--radius-pill);background:#fff;border:1.5px solid var(--rosa-pastel);
  font:600 15px/1 var(--font-body);color:var(--vino-900);transition:border-color .25s,transform .25s cubic-bezier(.22,.9,.3,1),box-shadow .25s}
.o-color i{width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(61,19,37,.15);transition:transform .3s cubic-bezier(.22,.9,.3,1)}
.o-color:hover{border-color:var(--brand-rosa);transform:translateY(-2px)}
.o-color[aria-checked="true"]{border-color:var(--brand-rosa);box-shadow:0 0 0 3px rgba(239,68,121,.18)}
.o-color[aria-checked="true"] i{transform:scale(1.08)}
.o-color.na{opacity:.6;text-decoration:line-through}
.o-size:focus-visible,.o-color:focus-visible,.qty button:focus-visible,.buy-fav:focus-visible{outline:3px solid rgba(239,68,121,.45);outline-offset:3px}

.buy{display:flex;align-items:center;gap:10px;margin-top:30px}
.qty{display:flex;align-items:center;height:58px;padding:4px;border-radius:var(--radius-pill);background:#fff;border:1.5px solid var(--rosa-pastel);flex:none}
.qty button{width:44px;height:48px;border-radius:var(--radius-pill);font:500 22px/1 var(--font-display);color:var(--vino-900);transition:background .2s}
.qty button:hover:not(:disabled){background:var(--rosa-rubor)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty input{width:36px;border:0;background:none;text-align:center;font:600 18px/1 var(--font-display);color:var(--vino-900);-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:0}
.buy-add{flex:1;height:58px;justify-content:center;font-size:18px}
.buy-add svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.buy-add.done{background:var(--vino-900)}
.buy-add[disabled]{background:var(--vino-600);box-shadow:none;cursor:not-allowed;transform:none}
.buy-fav{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--rosa-pastel);color:var(--brand-rosa);transition:transform .25s,background .25s,color .25s,border-color .25s}
.buy-fav:hover{transform:scale(1.06);border-color:var(--brand-rosa)}
.buy-fav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.buy-fav[aria-pressed="true"]{background:var(--brand-rosa);border-color:var(--brand-rosa);color:#fff}
.buy-fav[aria-pressed="true"] svg{fill:currentColor;animation:pick .35s cubic-bezier(.22,.9,.3,1)}
.buy-msg{min-height:22px;margin-top:12px;font:500 14px/20px var(--font-body);color:var(--rosa-profundo)}
.buy-msg:empty{min-height:0;margin:0}
.i-help{margin-top:16px;font-size:14px;color:var(--vino-600)}
.i-help a{color:var(--rosa-profundo);font-weight:600}

/* acordeón */
.acc{margin-top:32px;display:grid;gap:10px}
.acc details{border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(184,42,88,.06);overflow:hidden}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font:500 18px/22px var(--font-display);color:var(--vino-900)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:3px solid rgba(239,68,121,.45);outline-offset:-3px;border-radius:var(--radius-md)}
.acc summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--rosa-rubor);transition:background .3s,transform .4s cubic-bezier(.22,.9,.3,1)}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--rosa-profundo)}
.acc summary i::after{transform:rotate(90deg);transition:transform .4s cubic-bezier(.22,.9,.3,1)}
.acc details[open] summary i{background:var(--brand-rosa);transform:rotate(180deg)}
.acc details[open] summary i::before,.acc details[open] summary i::after{background:#fff}
.acc details[open] summary i::after{transform:rotate(0)}
.acc-body{padding:0 22px 20px;font-size:15px;line-height:24px;color:var(--vino-600)}
.acc-body ul{margin:0;padding-left:20px;display:grid;gap:6px}
.acc-body li::marker{color:var(--brand-rosa)}
.acc-body .todo{font-style:italic}

/* ---------- relacionados ---------- */
.related{margin-top:120px}
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.rel-title{margin-top:12px;font:600 clamp(36px,4.4vw,60px)/1.02 var(--font-display);letter-spacing:-.025em;color:var(--vino-900)}
.rel-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;color:var(--brand-rosa);font-size:1.06em}
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.rel-grid .p{animation:cardIn .6s cubic-bezier(.22,.9,.3,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- producto inexistente ---------- */
.nf{display:grid;justify-items:center;text-align:center;gap:16px;max-width:640px;padding:48px 0 40px}
.nf .eyebrow{justify-content:center}
.nf svg{width:150px;height:130px}
.nf h1{font:600 clamp(40px,5vw,64px)/1.02 var(--font-display);letter-spacing:-.025em;color:var(--vino-900)}
.nf h1 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--brand-rosa)}
.nf p{font-size:17px;line-height:26px;color:var(--vino-600);max-width:480px}
.nf-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ---------- visor ampliado ---------- */
.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(61,19,37,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb[open]{display:grid;place-items:center;animation:lbIn .3s ease both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{position:relative;width:min(88vw,calc(86dvh * .8));aspect-ratio:4/5;margin:0;border-radius:var(--radius-xl);overflow:hidden;background:var(--g)}
.lb-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:gIn .45s cubic-bezier(.22,.9,.3,1) both}
.lb-fig img.cutout{inset:5%;width:90%;height:90%;object-fit:contain;transform:rotate(-6deg);filter:drop-shadow(0 30px 24px rgba(61,19,37,.3))}
.lb-fig .ph{position:absolute;inset:18px;border-radius:calc(var(--radius-xl) - 18px);border:2px dashed rgba(184,42,88,.3);display:grid;place-content:center;justify-items:center;gap:8px;color:var(--rosa-profundo);font:600 14px/20px var(--font-body);text-align:center;padding:20px}
.lb-close{position:fixed;right:24px;top:24px}
.lb-prev,.lb-next{position:fixed;top:50%;margin-top:-23px}
.lb-prev{left:24px}.lb-next{right:24px}
.lb-count{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:6px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);color:#fff;font:600 14px/18px var(--font-display)}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-count{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pdp{padding:120px 32px 140px}
  .pdp-grid{gap:36px}
  .gallery{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .g-thumb{width:72px}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px}
}
@media (max-width:900px){
  .pdp-grid{grid-template-columns:1fr;gap:32px}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .g-thumbs{order:2;flex-direction:row;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
  .g-thumbs::-webkit-scrollbar{display:none}
  .g-thumb{flex:none;width:76px}
  .info{position:static}
  .rel-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:640px){
  .pdp{padding:104px 16px 120px}
  .crumbs{margin-bottom:20px}
  .g-main{border-radius:var(--radius-lg)}
  .g-zoom{right:12px;top:12px}.g-tag{left:12px;top:12px}
  .g-spark{display:none}
  .i-price{font-size:26px}
  .i-lead{font-size:19px}
  .o-size{min-width:52px;height:46px}
  .o-color{height:46px}.o-color i{width:28px;height:28px}
  .buy{flex-wrap:wrap}
  .buy-add{order:3;flex-basis:100%}
  .qty{flex:1;justify-content:space-between}
  .related{margin-top:88px}
  .rel-grid{gap:30px 12px}
  .lb-prev,.lb-next{top:auto;bottom:16px;margin:0}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-close{right:14px;top:14px}
  .lb-count{bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .g-slide,.g-slide.out,.lb[open],.lb-fig img,.rel-grid .p,.o-size[aria-checked="true"],.buy-fav[aria-pressed="true"] svg,.opt.shake .opt-list{animation:none}
  .g-thumb,.o-size,.o-color,.g-btn,.acc summary i,.acc summary i::after,.g-slide img.cutout{transition:none!important}
}