/* =====================================================================
   SUNEV — hoja de estilos
   Negro, gris #b4b4b4 y bordó #500219 (Canva). Títulos en serif de alto
   contraste como el logotipo; interfaz en una sans sobria.

   >>> AJUSTES RÁPIDOS <<<
   --reel-scroll : distancia de scroll de la campaña (320vh ≈ 3 pantallas).
   ===================================================================== */
:root{
  --reel-scroll: 320vh;

  --void:#000;
  --surface:#0b0b0b;
  --surface-2:#141414;
  --silver:#b4b4b4;
  --silver-dim:#8c8c8c;
  --bone:#efede8;
  --bordo:#500219;
  --bordo-lift:#9a1c3b;
  --ink:#0e0d0c;
  --line:rgba(180,180,180,.16);
  --line-strong:rgba(180,180,180,.36);

  --f-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-tap:220ms;
  --t-panel:420ms;

  --bar:72px;
  --gut:clamp(18px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar)}
html.is-locked{overflow:hidden}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:-60px;left:12px;z-index:300;background:var(--bone);color:var(--ink);padding:10px 16px;font-size:.8rem;font-weight:700}
.skip-link:focus{top:12px}

/* ---------- marca real (Canva) ---------- */
.brand-word,.hero-word,.outro-word{
  display:block;aspect-ratio:1288/430;background-color:currentColor;
  -webkit-mask:url("assets/brand/sunev-wordmark.png") no-repeat center/contain;
  mask:url("assets/brand/sunev-wordmark.png") no-repeat center/contain;
}
.brand-word{width:120px;color:var(--bone)}
.cross-mark{
  display:inline-block;width:22px;aspect-ratio:472/799;background-color:var(--bordo-lift);
  -webkit-mask:url("assets/brand/sunev-cross.png") no-repeat center/contain;
  mask:url("assets/brand/sunev-cross.png") no-repeat center/contain;
}
.brand-mono{display:block;width:18px;aspect-ratio:374/585;background:url("assets/brand/sunev-monogram.png") no-repeat center/contain}

.sec-title{
  font-family:var(--f-display);font-weight:500;font-size:clamp(3rem,8vw,6.8rem);
  line-height:.9;letter-spacing:-.01em;text-transform:uppercase;color:var(--bone);
}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  min-height:50px;padding:0 34px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;isolation:isolate;
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bordo);
  transform:scaleY(0);transform-origin:bottom;transition:transform 420ms var(--ease);
}
.btn:hover::before{transform:scaleY(1)}
.btn--fill{background:var(--bone);color:var(--ink)}
.btn--fill:hover{color:var(--bone)}
.btn--line{border-color:var(--line-strong);color:var(--bone)}
.btn--line:hover{border-color:var(--bordo)}
.btn--wide{width:100%}
.btn.is-done{color:var(--bone)}
.btn.is-done::before{transform:scaleY(1)}

/* =====================================================================
   BARRA
   ===================================================================== */
.topbar{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);padding:0 var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:background 400ms var(--ease),transform 520ms var(--ease);
}
.topbar.is-stuck{background:rgba(0,0,0,.9);backdrop-filter:blur(10px)}
.topbar.is-away{transform:translateY(-100%)}
.brand{justify-self:start}
.nav-main{display:flex;gap:40px}
.nav-main a,.bag-btn{
  position:relative;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:10px 0;
}
.nav-main a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--bone);
  transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease);
}
.nav-main a:hover::after{transform:scaleX(1);transform-origin:left}
.topbar-actions{justify-self:end;display:flex;align-items:center;gap:18px}
.bag-btn{display:flex;align-items:center;gap:8px;min-height:44px}
.bag-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--bordo);
  font-size:.66rem;font-weight:700;letter-spacing:0;display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.bag-n.is-bump{animation:bump 460ms var(--ease)}
@keyframes bump{35%{transform:scale(1.45)}}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px}
.burger span{display:block;width:24px;height:1px;background:var(--bone)}
@media (max-width:860px){
  .topbar{grid-template-columns:1fr auto}
  .nav-main{display:none}
  .burger{display:flex}
  .bag-label{display:none}
  .brand-word{width:104px}
}

.menu{position:fixed;inset:0;z-index:120;background:var(--void);display:flex;flex-direction:column;padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path 560ms var(--ease-io)}
.menu.is-open{clip-path:inset(0)}
.menu-top{height:var(--bar);display:flex;align-items:center;justify-content:space-between}
.menu-nav{display:flex;flex-direction:column;justify-content:center;flex:1;gap:6px;padding-bottom:12vh}
.menu-nav a{font-family:var(--f-display);font-size:clamp(3rem,15vw,4.6rem);line-height:1;text-transform:uppercase;
  opacity:0;transform:translateY(30px);transition:opacity 500ms var(--ease),transform 700ms var(--ease)}
.menu.is-open .menu-nav a{opacity:1;transform:none}
.menu.is-open .menu-nav a:nth-child(2){transition-delay:70ms}
.menu.is-open .menu-nav a:nth-child(3){transition-delay:140ms}
.x-btn{min-height:44px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.x-btn:hover{color:var(--bone)}

/* =====================================================================
   PORTADA
   ===================================================================== */
.hero{height:100svh;min-height:560px;display:grid;grid-template-rows:1fr auto;padding-top:var(--bar)}
.hero-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 var(--gut);min-height:0}
.hp{position:relative;overflow:hidden;background:var(--surface-2)}
.hp img{width:100%;height:100%;object-fit:cover}
.hp--1 img{object-position:50% 30%}
.hp--2 img{object-position:50% 40%}
.hp--3 img{object-position:50% 40%}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:clamp(18px,3vw,36px) var(--gut) clamp(20px,3vw,40px)}
.hero-word{width:min(52vw,640px);color:var(--bone)}
@media (max-width:760px){
  .hero-panels{grid-template-columns:1fr 1fr;gap:4px}
  .hp--3{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-word{width:min(84vw,420px)}
  .hero-cta{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .hp{animation:curtain 1300ms var(--ease-io) both}
  .hp--2{animation-delay:140ms}
  .hp--3{animation-delay:280ms}
  .hp img{animation:settle 1800ms var(--ease) both}
  .hp--2 img{animation-delay:140ms}
  .hp--3 img{animation-delay:280ms}
  .hero-word{animation:wipe 1100ms var(--ease) 520ms both}
  .hero-cta{animation:rise 800ms var(--ease) 820ms both}
}
@keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.28)}to{transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-2%)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- aparición al scrollear (solo lo que arranca fuera de pantalla) ---------- */
.reveal.is-pre{opacity:0;transform:translateY(40px)}
.reveal.is-in{transition:opacity 900ms var(--ease),transform 1100ms var(--ease)}
.reveal.is-pre .sec-title{clip-path:inset(0 0 100% 0)}
.reveal.is-in .sec-title{transition:clip-path 1100ms var(--ease) 80ms}

/* =====================================================================
   TIENDA
   ===================================================================== */
.shop{padding:clamp(90px,12vw,170px) 0 clamp(80px,10vw,140px)}
.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;
  padding:0 var(--gut);margin-bottom:clamp(36px,5vw,64px)}
.shop-tools{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap}
.tabs{display:flex;flex-wrap:wrap;gap:4px 22px}
.tab{position:relative;min-height:40px;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver-dim);transition:color var(--t-tap) var(--ease)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--bordo-lift);
  transform:scaleX(0);transition:transform 520ms var(--ease)}
.tab:hover{color:var(--bone)}
.tab.is-on{color:var(--bone)}
.tab.is-on::after{transform:scaleX(1)}
.sort select{
  min-height:40px;padding:0 26px 0 0;border:0;border-bottom:1px solid var(--line-strong);background:transparent;
  appearance:none;-webkit-appearance:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b4b4b4' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.sort option{background:#111;color:var(--bone);text-transform:none}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(12px,1.6vw,24px);
  padding:0 var(--gut);transition:opacity 220ms ease}
.grid.is-out{opacity:0}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px}}
.grid.is-pre .card{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .grid.is-in .card{animation:card-in 900ms var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
}
@keyframes card-in{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}

.card{position:relative}
.card-media{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--silver)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-a{transition:transform 1200ms var(--ease)}
.shot-b{clip-path:inset(100% 0 0 0);transition:clip-path 800ms var(--ease-io)}
@media (hover:hover){
  .card:hover .shot-a{transform:scale(1.06)}
  .card:hover .shot-b{clip-path:inset(0)}
}
.card.is-flip .shot-b{clip-path:inset(0)}

.quick,.swap{
  position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--bone);color:var(--ink);transition:transform 420ms var(--ease),opacity 300ms ease,background 220ms ease;
}
.card-frame{position:relative}
.quick{right:12px;bottom:12px}
.quick svg,.swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.quick .q-ok{display:none}
.quick.is-done{background:var(--bordo);color:var(--bone)}
.quick.is-done .q-plus{display:none}
.quick.is-done .q-ok{display:inline}
.quick:hover{background:var(--bordo);color:var(--bone)}
.swap{left:12px;top:12px;display:none;background:rgba(0,0,0,.55);color:var(--bone)}
.swap[aria-pressed="true"]{background:var(--bordo)}
@media (hover:hover){
  .quick{opacity:0;transform:scale(.6)}
  .card:hover .quick,.quick:focus-visible,.quick.is-done{opacity:1;transform:none}
}
@media (hover:none){ .quick{width:38px;height:38px;right:8px;bottom:8px} }
.card-info{padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-name{font-family:var(--f-body);font-size:.86rem;font-weight:500;line-height:1.35}
.card-price{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:720px){
  .card-info{flex-direction:column;gap:4px;padding-top:10px}
  .card-name{font-size:.8rem}
}

/* =====================================================================
   CAMPAÑA
   ===================================================================== */
.reel{position:relative;background:var(--void)}
.reel-track{height:var(--reel-scroll);position:relative}
.reel-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
#reel-canvas,.reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-poster{transition:opacity 420ms var(--ease)}
.reel-poster.is-hidden{opacity:0}
.reel-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0) 45%)}
.reel-ui{position:relative;z-index:2;justify-self:start;align-self:end;padding:0 var(--gut) clamp(34px,6vh,72px)}
.reel-title{font-family:var(--f-display);font-weight:500;font-size:clamp(3rem,8vw,6.4rem);line-height:.9;text-transform:uppercase}
.reel-hint{margin:14px 0 16px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.reel-bar{height:1px;background:rgba(239,237,232,.25);width:min(260px,60vw)}
.reel-bar span{display:block;height:100%;background:var(--bone);transform:scaleX(0);transform-origin:left}
.reel-load{position:absolute;z-index:3;right:var(--gut);bottom:var(--gut);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.reel-fallback{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.reel-fallback img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* =====================================================================
   LOOKS
   ===================================================================== */
.looks{padding:clamp(90px,12vw,170px) 0 clamp(70px,9vw,130px)}
.looks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gut);margin-bottom:clamp(30px,4vw,56px)}
.looks-nav{display:flex;gap:8px}
.rnd{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease)}
.rnd:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.look-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 10px;
  scroll-padding-inline:var(--gut);cursor:grab;scrollbar-width:none}
.look-strip::-webkit-scrollbar{display:none}
.look-strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.look-card{position:relative;flex:0 0 auto;width:min(72vw,360px);aspect-ratio:9/16;overflow:hidden;scroll-snap-align:start;background:var(--surface-2)}
.look-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;transition:transform 1400ms var(--ease)}
.look-card:hover img{transform:scale(1.05)}
.look-tag{position:absolute;inset:auto 0 0;padding:70px 16px 16px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0))}
.look-n{display:block;font-family:var(--f-display);font-size:2.4rem;line-height:1;margin-bottom:10px}
.look-tag ul{display:flex;flex-direction:column;gap:2px}
.look-open{display:flex;justify-content:space-between;gap:14px;width:100%;min-height:36px;align-items:center;text-align:left;
  font-size:.76rem;border-top:1px solid rgba(239,237,232,.22);padding-top:6px}
.look-open em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--silver)}
.look-open span{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size 500ms var(--ease)}
.look-open:hover span{background-size:100% 1px}

/* =====================================================================
   CIERRE
   ===================================================================== */
.outro{padding:clamp(100px,14vw,200px) var(--gut);display:flex;flex-direction:column;align-items:center;gap:34px;text-align:center}
.outro-word{width:min(78vw,860px);color:var(--bone)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut);border-top:1px solid var(--line);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver-dim)}

/* =====================================================================
   BOLSA
   ===================================================================== */
.veil{position:absolute;inset:0;background:rgba(0,0,0,.72);opacity:0;transition:opacity var(--t-panel) var(--ease)}
.is-open > .veil{opacity:1}
.drawer{position:fixed;inset:0;z-index:130;display:flex;justify-content:flex-end}
.drawer-panel{position:relative;width:min(440px,100%);height:100%;background:var(--surface-2);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 560ms var(--ease)}
.drawer.is-open .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line)}
.drawer-top h2{font-family:var(--f-display);font-weight:500;font-size:2rem;text-transform:uppercase;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:0 24px;overscroll-behavior:contain}
.drawer-empty{padding:80px 0;display:flex;flex-direction:column;align-items:center;gap:24px;color:var(--silver)}
.line-item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.line-item img{width:72px;height:72px;object-fit:cover;background:var(--silver)}
.li-name{font-size:.86rem;font-weight:500;line-height:1.3}
.li-meta{font-size:.74rem;color:var(--silver-dim);margin-top:2px;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--line-strong)}
.qty button{width:34px;height:34px;display:grid;place-items:center;transition:background var(--t-tap) var(--ease)}
.qty button:hover{background:rgba(239,237,232,.08)}
.qty span{min-width:26px;text-align:center;font-size:.84rem;font-variant-numeric:tabular-nums}
.li-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.li-price{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
.li-remove{min-height:32px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-dim)}
.li-remove:hover{color:var(--bone)}
.drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--line)}
.subtotal{display:flex;justify-content:space-between;font-size:1rem;font-weight:600;margin-bottom:16px;font-variant-numeric:tabular-nums}
.drawer-note{margin-top:12px;font-size:.74rem;line-height:1.5;color:var(--silver-dim)}

/* =====================================================================
   FICHA
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(0px,3vw,40px)}
.modal-panel{position:relative;width:min(1060px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--surface-2);
  clip-path:inset(8% 0 8% 0);opacity:0;transform:translateY(24px);
  transition:clip-path 620ms var(--ease-io),opacity 380ms var(--ease),transform 620ms var(--ease)}
.modal.is-open .modal-panel{clip-path:inset(0);opacity:1;transform:none}
.pd-close{position:absolute;top:10px;right:20px;z-index:4}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.pd-gallery{background:var(--silver);min-width:0}
.pd-main{position:relative;aspect-ratio:1/1;overflow:hidden}
.pd-zoom{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
.pd-zoom img{width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:no-preference){ .pd-zoom img{animation:img-in 600ms var(--ease)} }
@keyframes img-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.pd-tag{position:absolute;left:14px;top:14px;padding:5px 10px;background:rgba(0,0,0,.72);pointer-events:none;
  font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pd-arrow{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:var(--bone);transition:background var(--t-tap) var(--ease)}
.pd-arrow:hover{background:var(--bordo)}
.pd-arrow--l{left:14px}.pd-arrow--r{right:14px}
.pd-thumbs{display:flex;gap:6px;padding:10px;overflow-x:auto;background:var(--surface)}
.pd-thumbs button{flex:0 0 58px;aspect-ratio:1/1;overflow:hidden;opacity:.45;outline-offset:-2px;transition:opacity var(--t-tap) var(--ease)}
.pd-thumbs button:hover{opacity:.85}
.pd-thumbs button.is-on{opacity:1;box-shadow:inset 0 0 0 1px var(--bone)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-body{padding:clamp(34px,4vw,56px) clamp(24px,3.4vw,48px);display:flex;flex-direction:column}
#pd-name{font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:.95;text-transform:uppercase;
  padding-right:60px;text-wrap:balance}
.pd-price{margin-top:16px;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.pd-desc{color:var(--silver);margin:20px 0 30px;max-width:42ch;font-size:.94rem}
.pd-rel{margin-top:36px}
.pd-label{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim);margin-bottom:10px}
.rel{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;width:100%;padding:10px 0;text-align:left;border-top:1px solid var(--line)}
.rel img{width:56px;height:56px;object-fit:cover;background:var(--silver)}
.rel b{display:block;font-size:.84rem;font-weight:500}
.rel em{font-style:normal;font-size:.8rem;color:var(--silver);font-variant-numeric:tabular-nums}
.rel:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bordo-lift)}
@media (max-width:820px){
  .modal{padding:0;place-items:end stretch}
  .modal-panel{height:100%;clip-path:inset(100% 0 0 0);transform:none}
  .pd-grid{grid-template-columns:1fr}
  .pd-add{position:sticky;bottom:14px;z-index:3;box-shadow:0 0 0 14px var(--surface-2)}
}

/* =====================================================================
   VISOR
   ===================================================================== */
.viewer{position:fixed;inset:0;z-index:160;background:var(--silver);display:flex;flex-direction:column;opacity:0;transition:opacity var(--t-panel) var(--ease)}
.viewer.is-open{opacity:1}
.viewer-stage{flex:1;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:zoom-in}
.viewer.is-zoomed .viewer-stage{cursor:grab}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 320ms var(--ease);user-select:none}
.viewer.is-zoomed .viewer-stage img{transition:none}
.viewer-bar{display:flex;align-items:center;gap:12px;padding:10px var(--gut);background:var(--void)}
.viewer-n{font-size:.74rem;color:var(--silver);font-variant-numeric:tabular-nums;margin-right:auto}
.vbtn{min-height:44px;padding:0 16px;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line-strong)}
.vbtn:hover{border-color:var(--bone)}
.viewer-arrow{position:absolute;top:calc(50% - 30px);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.6);color:var(--bone);z-index:2}
.viewer-arrow:hover{background:var(--bordo)}
.viewer-arrow--l{left:14px}.viewer-arrow--r{right:14px}

/* =====================================================================
   AVISO
   ===================================================================== */
.toast{position:fixed;left:50%;bottom:26px;z-index:300;transform:translate(-50%,24px);opacity:0;pointer-events:none;
  background:var(--bone);color:var(--ink);padding:14px 24px;font-size:.82rem;font-weight:500;max-width:90vw;text-align:center;
  transition:opacity 360ms var(--ease),transform 560ms var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
}

/* =====================================================================
   TIENDA: agotados, checkout y confirmación
   ===================================================================== */
.agotado-tag{position:absolute;right:12px;bottom:12px;padding:7px 12px;background:rgba(0,0,0,.78);
  color:var(--bone);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.card.is-agotado .card-media img{filter:grayscale(1);opacity:.5}
.card.is-agotado .card-name{color:var(--silver-dim)}
.pd-agotado{padding:16px 0;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--silver-dim)}

.co{display:flex;flex-direction:column;gap:14px;padding:18px 0 28px}
.co-volver{align-self:flex-start;min-height:40px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.co-volver:hover{color:var(--bone)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;
  border-bottom:1px solid var(--line);font-size:.8rem;color:var(--silver-dim)}
.co-total b{font-size:1.1rem;color:var(--bone);font-variant-numeric:tabular-nums}
.co-campo{display:flex;flex-direction:column;gap:6px}
.co-campo span{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-dim)}
.co-campo i{font-style:normal;text-transform:none;letter-spacing:0}
.co-campo input{min-height:48px;padding:0 14px;background:var(--void);border:1px solid var(--line-strong);
  color:var(--bone);font-size:16px;transition:border-color var(--t-tap) var(--ease)}
.co-campo input:focus{outline:none;border-color:var(--bone)}
.co-campo input::placeholder{color:var(--silver-dim);font-size:.85rem}
.co-aviso{font-size:.78rem;color:var(--silver);line-height:1.5}
.co-error{padding:12px 14px;background:rgba(154,28,59,.18);border-left:3px solid var(--bordo-lift);
  font-size:.82rem;color:var(--bone)}
.co-legal{font-size:.72rem;color:var(--silver-dim);line-height:1.5;text-align:center}

.ok{display:flex;flex-direction:column;gap:14px;padding:20px 0 28px;text-align:center}
.ok-titulo{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.ok-numero{font-family:var(--f-display);font-size:2.6rem;line-height:1;letter-spacing:.02em}
.ok-estado{display:inline-block;align-self:center;padding:5px 12px;background:var(--bordo);
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ok-datos{display:flex;flex-direction:column;gap:1px;background:var(--line);margin-top:6px;text-align:left}
.ok-fila{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:12px 14px;background:var(--surface);font-size:.8rem}
.ok-fila span{color:var(--silver-dim);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.ok-fila b{font-variant-numeric:tabular-nums;word-break:break-all;text-align:right}
.ok-copiar{min-height:40px;padding:0 12px;border:1px solid var(--line-strong);font-size:.62rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ok-copiar:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.ok-copiar--link{width:100%}
.ok-aviso{font-size:.82rem;color:var(--silver);line-height:1.6;text-align:left}
.ok-aviso b{color:var(--bone);font-variant-numeric:tabular-nums}