/* MITÃIS — Estudio con riel, ficha de vidrio y bolsa.
   Tipografía: Archivo (títulos), JetBrains Mono (etiquetas), Playfair (marca y acentos). */
:root {
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --paper: #f3eee6;
  --ink: #161412;
  --muted: #6f675f;
  --red: #b32132;
  --red-deep: #951a29;
  --glass: rgba(255, 251, 246, 0.7);
  --glass-line: rgba(255, 255, 255, 0.78);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --header-h: 72px;
}

body { font-family: var(--body); background: var(--paper); }
.mono { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ui-arrow { display: inline-block; width: .9em; height: .9em; margin-left: .2em; vertical-align: -.06em; flex: none; }

/* ---------- Cabecera flotante ---------- */
.tricolor { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 3px; }
.site-header {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 60;
  height: var(--header-h); padding: 0 clamp(18px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: transparent; border: 0;
  transition: background .5s var(--spring), backdrop-filter .5s, box-shadow .5s;
}
.site-header.is-scrolled {
  background: rgba(243, 238, 230, .72);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(22, 20, 18, .06);
}
.site-header .logo {
  grid-column: 2; justify-self: center; position: relative; z-index: 2;
  font-family: var(--serif); font-size: 30px; transition: transform .8s var(--spring);
  transform-origin: 50% 40%;
}
body.is-exploring .site-header .logo { transform: scale(.82); }
.menu-toggle {
  justify-self: start; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 10px 0; color: var(--ink); font-size: 11px;
}
.menu-lines { display: grid; gap: 4px; width: 20px; }
.menu-lines i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .5s var(--spring), opacity .3s; }
.menu-lines i:nth-child(2) { width: 70%; }
.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-word { font-size: 0; }
.menu-toggle[aria-expanded="true"] .menu-word::after { content: 'Cerrar'; font-size: 11px; }
.site-header .header-actions { justify-self: end; position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.icon-action { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--ink); transition: background .3s; }
.icon-action:hover { background: rgba(22, 20, 18, .06); }
.icon-action svg { width: 20px; height: 20px; }
.site-header .bag-trigger { display: inline-flex; align-items: center; gap: 0; padding: 10px 0; background: none; border: 0; color: var(--ink); font-size: 11px; white-space: nowrap; }
.site-header .bag-trigger .bag-label { margin-right: .5em; }
.site-header .bag-count { display: inline-block; width: auto; height: auto; background: none; color: inherit; margin: 0; font-size: inherit; border-radius: 0; }

/* Menú a pantalla completa */
.site-header .mobile-nav {
  position: fixed; inset: 0; z-index: 1; height: 100dvh; padding: calc(var(--header-h) + 40px) clamp(22px, 6vw, 96px) 40px;
  background: #f3eee6; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.menu-open, body.menu-open { overflow: hidden; overscroll-behavior: none; }
body.menu-open { position: fixed; width: 100%; top: var(--menu-scroll-lock-top, 0px); }
.site-header:has(.mobile-nav:not([hidden])) { background: #f3eee6; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; }
.menu-inner { max-width: 1100px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.menu-kicker { font-size: 11px; color: var(--muted); margin: 0 0 28px; }
.menu-links { display: grid; gap: 2px; }
.menu-links a {
  display: flex; align-items: baseline; gap: 18px; padding: 6px 0;
  font: 700 clamp(40px, 7.5vw, 104px)/.98 var(--display); letter-spacing: -.05em;
}
.menu-links a span { font-size: 11px; letter-spacing: .14em; color: var(--muted); transform: translateY(-1.6em); }
.menu-links a:hover { color: var(--red); }
.menu-links a:nth-child(2) { animation-delay: .04s; } .menu-links a:nth-child(3) { animation-delay: .08s; }
.menu-links a:nth-child(4) { animation-delay: .12s; } .menu-links a:nth-child(5) { animation-delay: .16s; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.menu-actions button, .menu-actions a {
  display: inline-flex; align-items: center; padding: 12px 18px; border: 1px solid rgba(22, 20, 18, .18);
  border-radius: 999px; background: rgba(255, 255, 255, .4); color: var(--ink); font-size: 10.5px;
  transition: background .3s, color .3s;
}
.menu-actions button:hover, .menu-actions a:hover { background: var(--ink); color: var(--paper); }
.menu-tagline { margin-top: auto; padding-top: 48px; font: italic 500 clamp(22px, 2.4vw, 32px) var(--serif); color: var(--muted); }
@keyframes menuIn { from { opacity: 0; } }
@keyframes menuLink { from { opacity: 0; transform: translateY(40px); } }

/* ---------- Escenario ---------- */
.stage {
  --px: 0; --py: 0; --xp: 0;
  position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate;
  background: #efe7dc; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.stage.is-dragging { cursor: grabbing; }
.stage.is-exploring .rail-svg { z-index: 15; }
.stage-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage-photo {
  position: absolute; inset: -3%;
  background: url('mitais/fondos/ciclorama-arena-3840x2160.webp') 50% 72% / cover no-repeat;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -7px), 0) scale(calc(1.04 + var(--xp) * .02));
  filter: saturate(1.04) brightness(calc(1.02 - var(--xp) * .05));
}
/* Tres escenarios que se alternan en cada carga (rail.js elige uno). */
.stage-photo { background-image: var(--stage-bg, url('mitais/fondos/escenario-nanduti.webp')); background-position: var(--stage-pos, 50% 62%); }
.stage-photo-next { background-image: none; opacity: 0; transition: opacity .65s ease; }
.stage-photo-next.is-visible { opacity: 1; }
.stage-sun {
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 46% at calc(50% + var(--px) * 9%) 30%, rgba(255, 249, 238, .62), rgba(255, 249, 238, 0) 72%),
    radial-gradient(120% 90% at 50% 38%, rgba(0, 0, 0, 0) 52%, rgba(74, 52, 34, .2) 100%),
    linear-gradient(180deg, rgba(255, 252, 247, .25), rgba(0, 0, 0, 0) 30%);
  mix-blend-mode: soft-light;
}
.stage-sun::after {
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 246, 230, .32) 42%, transparent 52%, transparent 60%, rgba(255, 246, 230, .2) 68%, transparent 78%);
  animation: sunDrift 18s ease-in-out infinite alternate;
}
@keyframes sunDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.stage-grain {
  position: absolute; inset: 0; opacity: .1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Riel */
.rail-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; overflow: visible; opacity: calc(1 - var(--xp) * .86); }
.rail-shadow { fill: none; stroke: #3a2a1c; opacity: .16; }
.rail-tube { fill: none; stroke-linecap: round; }
.rail-tube-base { stroke: #4d535a; }
.rail-tube-mid { stroke: #aab1b8; }
.rail-tube-hi { stroke: #fbfcfd; }
.rail-tube-lo { stroke: #dde1e5; opacity: .7; }
.rail-rod { stroke: #8f969d; stroke-width: 1.6; }
.rail-collar { fill: #b4bac0; }
.rail-svg:not(.is-drawn) .rail-tube, .rail-svg:not(.is-drawn) .rail-shadow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: railDraw 1.5s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.rail-svg:not(.is-drawn) .rail-rods, .rail-svg:not(.is-drawn) .rail-cap { opacity: 0; animation: fadeIn .8s ease .9s forwards; }
@keyframes railDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* Prendas */
.stage-items { position: absolute; inset: 0; z-index: 20; }
.stage-shadows { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.g-shadow {
  position: absolute; left: 0; top: 0; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 38, 22, .55), rgba(58, 38, 22, .18) 55%, rgba(58, 38, 22, 0));
  filter: blur(5px); will-change: transform, opacity;
}
.g {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none;
  transform-origin: 50% 0; cursor: pointer; will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
}
.g.is-loading { opacity: 0 !important; }
.g:focus-visible { outline: none; }
.g:focus-visible .g-img { filter: drop-shadow(0 0 0 var(--red)) drop-shadow(0 0 3px var(--red)) drop-shadow(0 20px 26px rgba(48, 30, 16, .2)); }
.g-band { position: absolute; inset: 0; will-change: transform; }
.g-front, .g-sidewrap { position: absolute; inset: 0; }
.g-sidewrap { opacity: 0; }
.g-swing { position: absolute; inset: 0; transform-origin: 50% 0; perspective: 1150px; perspective-origin: 50% 20%; }
.g-turn { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; }
.g-hanger { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 2px 2px rgba(40, 24, 10, .25)); }
.g-img {
  position: absolute; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 22px 26px rgba(48, 30, 16, .16)) drop-shadow(0 5px 7px rgba(48, 30, 16, .12));
}
.g.is-card .g-hanger { z-index: 2; }
.g.is-card .g-img { object-fit: cover; object-position: 50% 18%; border-radius: 6px; box-shadow: 0 24px 40px -18px rgba(48, 30, 16, .45), 0 0 0 1px rgba(255, 255, 255, .6); filter: none; }
.g.is-card .g-shade, .g.is-card .g-sheen { border-radius: 6px; -webkit-mask-image: none !important; mask-image: none !important; }
.g-sidehanger { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(40, 24, 10, .25)); }
.g-side { position: absolute; max-width: none; pointer-events: none; filter: drop-shadow(0 22px 26px rgba(48, 30, 16, .16)); }
.g-shade, .g-sheen {
  position: absolute; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.g-shade { background: linear-gradient(90deg, rgba(28, 18, 10, .62), rgba(28, 18, 10, .12) 55%, rgba(255, 248, 238, .12)); opacity: 0; }
.g-shade[data-side="r"] { background: linear-gradient(270deg, rgba(28, 18, 10, .62), rgba(28, 18, 10, .12) 55%, rgba(255, 248, 238, .12)); }
.g-sheen {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light; opacity: 0;
  transition: background-position 0s, opacity .3s;
}
.g.is-hover .g-sheen { opacity: 1; background-position: -30% 0; transition: background-position 1.3s cubic-bezier(.3, .1, .2, 1), opacity .3s; }

/* Leyenda */
.stage-caption {
  position: absolute; left: 50%; bottom: clamp(78px, 10vh, 118px); z-index: 40; transform: translateX(-50%);
  width: min(92vw, 680px); text-align: center; color: var(--ink);
  opacity: calc(1 - var(--xp) * 1.8); transition: transform .8s var(--spring);
}
.stage.is-exploring .stage-caption { pointer-events: none; transform: translateX(-50%) translateY(18px); }
.cap-line { margin: 0; will-change: transform, opacity; }
.cap-kicker, .cap-meta { font-size: 10.5px; color: var(--muted); }
.cap-kicker i, .cap-meta i { font-style: normal; margin: 0 .7em; opacity: .6; }
.cap-meta #activePrice.is-coming { display: inline-block; padding: 5px 9px; border-radius: 5px; background: var(--red); color: #fff; font-weight: 800; letter-spacing: .12em; }
.cap-meta .price-original { color: #615b55; font-weight: 500; }
.cap-meta .price-sale { display: inline-block; padding: 4px 7px; border-radius: 5px; background: #fff3f2; color: #941b2c; font-size: 13px; font-weight: 800; }
.cap-name { font: 700 clamp(28px, 3.1vw, 46px)/1.04 var(--display); letter-spacing: -.035em; margin: .32em 0 .28em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-cta {
  margin-top: 18px; padding: 13px 24px; border-radius: 999px; font-size: 10.5px; color: var(--ink);
  border: 1px solid rgba(22, 20, 18, .5); background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--spring);
}
.cap-cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }

/* Pie del escenario */
.stage-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 clamp(18px, 3.4vw, 52px) clamp(18px, 3vh, 30px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px;
  opacity: calc(1 - var(--xp) * 1.8);
}
.stage.is-exploring .stage-foot { pointer-events: none; }
.foot-left { display: grid; gap: 8px; justify-items: start; }
.foot-tagline { margin: 0; font: italic 500 19px var(--serif); letter-spacing: -.01em; }
.foot-tagline span { color: var(--red); font-style: normal; }
.foot-select select {
  appearance: none; -webkit-appearance: none; max-width: 260px; padding: 6px 22px 6px 0; border: 0;
  border-bottom: 1px solid rgba(22, 20, 18, .3); border-radius: 0; color: var(--ink); cursor: pointer;
  font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23161412' stroke-width='1.2'/%3E%3C/svg%3E") right center / 9px no-repeat;
}
.stage-dots { display: flex; gap: 2px; justify-self: center; }
.stage-dots button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.stage-dots span { width: 5px; height: 5px; border-radius: 99px; background: rgba(22, 20, 18, .28); transition: width .5s var(--spring), background .3s; }
.stage-dots [aria-current="true"] span { width: 20px; background: var(--ink); }
.foot-right { justify-self: end; display: grid; gap: 6px; justify-items: end; font-size: 10px; color: var(--ink); }
.foot-hint { color: var(--muted); }

/* Flechas: recorren el riel o, en Explorar, la galería */
.stage-arrow {
  position: absolute; z-index: 45; top: 46%; width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--ink);
  border: 1px solid var(--glass-line); background: rgba(255, 252, 248, .5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px -12px rgba(60, 38, 20, .35);
  transition: left .9s var(--spring), top .9s var(--spring), background .3s, transform .35s var(--spring), opacity .4s;
}
.stage-arrow svg { width: 20px; height: 20px; }
.stage-arrow:hover { background: rgba(255, 255, 255, .9); transform: scale(1.06); }
.stage-arrow.is-prev { left: clamp(14px, 3vw, 48px); }
.stage-arrow.is-next { left: calc(100% - clamp(14px, 3vw, 48px) - 46px); }
.stage.is-exploring .stage-arrow { top: calc(var(--slot-y) + var(--slot-h) * .48); }
.stage.is-exploring:not(.has-views) .stage-arrow, .stage.is-exploring:not(.has-views) .xp-dots { opacity: 0; pointer-events: none; }
.stage.is-exploring .stage-arrow.is-prev { left: max(12px, calc(var(--slot-x) - var(--slot-w) / 2 - 70px)); }
.stage.is-exploring .stage-arrow.is-next { left: calc(var(--slot-x) + var(--slot-w) / 2 + 24px); }

.xp-dots {
  position: absolute; z-index: 45; left: var(--slot-x, 50%); top: calc(var(--slot-y, 0px) + var(--slot-h, 0px) + 22px);
  transform: translateX(-50%); display: flex; gap: 2px; opacity: var(--xp);
}
.xp-dots button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.xp-dots button::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: rgba(22, 20, 18, .3); transition: width .5s var(--spring), background .3s; }
.xp-dots button[aria-current="true"]::before { width: 18px; background: var(--ink); }

/* Fotografías dentro de Explorar */
.xp-photo {
  position: absolute; z-index: 25; left: var(--slot-x, 50%); top: calc(var(--slot-y, 0px) + var(--slot-h, 0px) * .05);
  width: calc(var(--slot-h, 400px) * .76); aspect-ratio: .92; transform: translateX(-50%) scale(.96);
  border-radius: 24px; overflow: hidden; background: #e7ded2; cursor: zoom-in; opacity: 0; pointer-events: none;
  box-shadow: 0 40px 70px -30px rgba(60, 36, 16, .45), 0 0 0 1px rgba(255, 255, 255, .5);
  transition: opacity .55s ease, transform .9s var(--spring);
}
.xp-photo.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.xp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity .7s ease, transform 1.4s var(--spring); }
.xp-photo img[data-crop="top"] { object-position: 50% 0; }
.xp-photo img.is-on { opacity: 1; transform: scale(1); }

/* Modelos «vivos» al lado de la ficha */
.xp-models {
  --ar: .667;
  position: absolute; z-index: 26; left: var(--slot-x, 30%); top: calc(var(--slot-y, 15%) - var(--header-h) * .25);
  height: min(calc(100% - var(--slot-y, 15%) - 30px), 82vh); aspect-ratio: var(--ar);
  transform: translateX(-50%); pointer-events: none; visibility: hidden;
}
.xp-models.is-visible { visibility: visible; filter: drop-shadow(0 28px 26px rgba(48, 30, 16, .2)); }
.stage.is-exploring.is-models .stage-arrow.is-prev { left: max(12px, calc(var(--slot-x) - var(--mw, 420px) / 2 - 40px)); }
.stage.is-exploring.is-models .stage-arrow.is-next { left: calc(var(--slot-x) + var(--mw, 420px) / 2 - 6px); }
.xm-person {
  --ox: 25%;
  position: absolute; inset: 0; clip-path: var(--clip); transform-origin: var(--ox) 97%;
  opacity: 0; transform: translateY(30px) scale(.97); filter: blur(8px);
}
.xp-models.is-visible .xm-person {
  opacity: 1; filter: none; transform: none;
  transition: opacity .7s ease, transform 1.2s var(--spring), filter .8s ease;
  animation: xmSway var(--sway, 6.4s) ease-in-out infinite, xmShift var(--shift, 9s) ease-in-out infinite;
}
.xp-models.is-visible .xm-person:nth-child(1) { transition-delay: .05s; --sway: 6.2s; --shift: 8.6s; animation-delay: .9s, 1.4s; }
.xp-models.is-visible .xm-person:nth-child(2) { transition-delay: .2s; --sway: 7.1s; --shift: 10.2s; animation-delay: 1.3s, .6s; }
.xm-person img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none;
  transform-origin: var(--ox) 97%;
  animation: xmBreathe 3.9s ease-in-out infinite;
}
.xm-person:nth-child(2) img { animation-duration: 4.4s; animation-delay: -1.7s; }
/* Respiración: el torso sube apenas y vuelve */
@keyframes xmBreathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.004, 1.011); } }
/* Balanceo sobre los pies */
@keyframes xmSway { 0%, 100% { rotate: -.5deg; } 50% { rotate: .55deg; } }
/* Cambio de peso de un pie al otro */
@keyframes xmShift { 0%, 100% { translate: 0 0; } 30% { translate: 3px 0; } 70% { translate: -3px 1px; } }
/* Miran apenas hacia el cursor */
.xp-models.is-visible { transform: translateX(-50%) perspective(1400px) rotateY(calc(var(--px, 0) * 4deg)) rotateX(calc(var(--py, 0) * -1.5deg)); transition: transform .8s var(--spring); }
.xp-models::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 1%; height: 5%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(58, 38, 22, .32), rgba(58, 38, 22, 0)); filter: blur(5px);
  opacity: 0; transition: opacity .8s ease;
}
.xp-models.is-visible::after { opacity: 1; }
@media (max-width: 760px) {
  .xp-models { top: calc(var(--slot-y, 12%) - 8px); height: calc(var(--slot-h, 30%) + 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-models.is-visible .xm-person, .xm-person img { animation: none; }
}

/* ---------- Ficha de vidrio ---------- */
.explore-panel {
  --xp-ink: #161412;
  --xp-soft: rgba(22, 20, 18, .55);
  --xp-line: rgba(22, 20, 18, .09);
  position: absolute; z-index: 50; top: 50%; right: clamp(18px, 6.5vw, 120px);
  width: clamp(360px, 30vw, 430px); max-height: calc(100% - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 28px 20px; border-radius: 30px; color: var(--xp-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 252, 248, .7));
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 50px 100px -40px rgba(70, 40, 18, .45), 0 12px 30px -18px rgba(70, 40, 18, .25);
  opacity: 0; filter: blur(10px); transform: translate(46px, calc(-50% + 14px)) scale(.98);
  transition: opacity .55s ease, transform .9s var(--spring), filter .6s ease;
  scrollbar-width: none; user-select: text; -webkit-user-select: text;
  font-family: var(--display);
}
.explore-panel::-webkit-scrollbar { display: none; }
.explore-panel.is-open { opacity: 1; filter: none; transform: translate(0, -50%); transition-delay: .18s; }
.explore-panel > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .8s var(--spring); }
.explore-panel.is-open > * { opacity: 1; transform: none; }
.explore-panel.is-open > :nth-child(2) { transition-delay: .26s; } .explore-panel.is-open > :nth-child(3) { transition-delay: .3s; }
.explore-panel.is-open > :nth-child(4) { transition-delay: .34s; } .explore-panel.is-open > :nth-child(5) { transition-delay: .38s; }
.explore-panel.is-open > :nth-child(6) { transition-delay: .42s; } .explore-panel.is-open > :nth-child(7) { transition-delay: .46s; }
.explore-panel.is-open > :nth-child(8) { transition-delay: .5s; } .explore-panel.is-open > :nth-child(9) { transition-delay: .54s; }

.xp-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.xp-kicker { margin: 0; font: 500 12.5px var(--display); color: var(--xp-soft); letter-spacing: .01em; }
.xp-count { margin-left: auto; font-size: 10px; letter-spacing: .12em; color: var(--xp-soft); }
.xp-close {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  border-radius: 50%; border: 0; background: rgba(22, 20, 18, .06); color: var(--xp-ink);
  transition: transform .45s var(--spring), background .3s;
}
.xp-close:hover { transform: rotate(90deg); background: rgba(22, 20, 18, .12); }
.xp-close svg { width: 17px; height: 17px; }
.xp-title { margin: 0; font: 700 clamp(28px, 2.3vw, 36px)/1.02 var(--display); letter-spacing: -.04em; }
.xp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 0; }
.xp-price strong { font: 600 19px var(--display); letter-spacing: -.02em; }
.xp-price strong.is-coming { padding: 5px 10px; border-radius: 6px; background: #fff0ef; color: #981d30; }
.xp-price .price-original { color: #7d7670; font: 500 14px var(--body); }
.xp-price .price-sale { color: #a01d30; font-weight: 800; }
.xp-price span { font-size: 12.5px; color: var(--xp-soft); }

.xp-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--xp-line); }
.xp-label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--xp-soft); }
.xp-label b { font-weight: 600; color: var(--xp-ink); }
.xp-label .xp-link { margin-left: auto; }
.xp-link {
  padding: 0; border: 0; background: none; color: var(--xp-ink); font: 500 12.5px var(--display);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(22, 20, 18, .3); transition: text-decoration-color .3s;
}
.xp-link:hover { text-decoration-color: var(--xp-ink); }

.xp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.xp-swatch {
  position: relative; width: 52px; height: 64px; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #fbf7f1, #e8ded1);
  box-shadow: inset 0 0 0 1px rgba(22, 20, 18, .08);
  transition: transform .45s var(--spring), box-shadow .3s;
}
.xp-swatch img { position: absolute; left: 50%; top: 0; width: 175%; max-width: none; transform: translate(-50%, -31%); filter: drop-shadow(0 4px 4px rgba(40, 24, 10, .18)); }
.xp-swatch.is-plain img { width: 150%; transform: translate(-50%, -8%); }
.xp-swatch:hover { transform: translateY(-2px); }
.xp-swatches { position: relative; }
.xp-swatch-ring {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; border-radius: 14px; opacity: 0;
  box-shadow: 0 0 0 2px #fffdf9, 0 0 0 3.5px var(--xp-ink);
  transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), width .4s var(--spring), height .4s var(--spring), opacity .3s;
}
.xp-swatch[aria-pressed="true"] img { transform: translate(-50%, -31%) scale(1.06); }
.xp-swatch.is-plain[aria-pressed="true"] img { transform: translate(-50%, -8%) scale(1.06); }
.xp-swatch img { transition: transform .6s var(--spring); }
#exploreTitle, #explorePrice, #explorePriceNote, #exploreColor, #exploreKicker, #exploreAddLabel, #exploreAddPrice, #exploreSizeLabel { display: inline-block; will-change: transform, opacity; }
#exploreTitle { display: block; }

.size-rail {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0;
  padding: 4px; border-radius: 16px; background: rgba(22, 20, 18, .06); box-shadow: inset 0 1px 2px rgba(22, 20, 18, .06);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.size-rail button {
  position: relative; z-index: 1; height: 46px; padding: 0; border: 0; border-radius: 12px; background: none;
  color: rgba(22, 20, 18, .62); font: 600 14px var(--display); letter-spacing: .01em; transition: color .3s;
}
.size-rail button:hover { color: var(--xp-ink); }
.size-rail button[aria-checked="true"] { color: var(--xp-ink); }
.size-rail button:focus-visible { outline: 2px solid var(--xp-ink); outline-offset: -4px; }
.size-rail button:disabled { color: rgba(22, 20, 18, .3); }
.size-knob {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 60px; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 16px -6px rgba(40, 24, 10, .35), 0 1px 2px rgba(40, 24, 10, .12);
  opacity: 0; transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), width .4s var(--spring), opacity .3s;
}
.xp-error { min-height: 16px; margin: 8px 0 0; color: var(--red); font: 500 12.5px var(--display); }

.xp-add {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; height: 58px; margin-top: 4px; padding: 0 22px 0 24px;
  border: 0; border-radius: 18px; color: #fff; background: var(--xp-ink); font: 600 15px var(--display); letter-spacing: -.005em;
  box-shadow: 0 18px 34px -18px rgba(22, 20, 18, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .4s var(--spring), background .3s, box-shadow .4s;
}
.xp-add-price { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .22); font-weight: 500; color: rgba(255, 255, 255, .82); }
.xp-add:hover:not(:disabled) { transform: translateY(-2px); background: #000; box-shadow: 0 24px 40px -18px rgba(22, 20, 18, .85), inset 0 1px 0 rgba(255, 255, 255, .14); }
.xp-add:active:not(:disabled) { transform: translateY(0) scale(.99); }
.xp-add.is-pending { background: rgba(22, 20, 18, .82); }
.xp-add.is-pending #exploreAddLabel { color: rgba(255, 255, 255, .72); }
.xp-add:disabled { background: rgba(22, 20, 18, .1); color: var(--xp-soft); box-shadow: none; opacity: 1; }

.xp-perks { list-style: none; margin: 16px 0 0; padding: 12px 14px; display: grid; gap: 9px; border-radius: 16px; background: rgba(22, 20, 18, .035); }
.xp-perks li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(22, 20, 18, .72); }
.xp-perks svg { width: 17px; height: 17px; flex: none; color: var(--xp-ink); }

.xp-acc { margin-top: 14px; }
.xp-acc details { border-bottom: 1px solid var(--xp-line); }
.xp-acc summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; font: 500 14.5px var(--display); cursor: pointer; list-style: none; }
.xp-acc summary::-webkit-details-marker { display: none; }
.xp-acc summary i { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .45s var(--spring); opacity: .7; }
.xp-acc details[open] summary i { transform: translateY(2px) rotate(-135deg); }
.xp-acc-body { overflow: hidden; padding: 0 2px 16px; font-size: 13.5px; line-height: 1.6; color: rgba(22, 20, 18, .72); }
.xp-acc-body p { margin: 0 0 8px; }
.xp-acc-body ul { margin: 0; padding-left: 18px; }
.xp-full {
  display: flex; align-items: center; gap: 6px; margin: 16px auto 4px; padding: 6px 4px; border: 0; background: none;
  color: var(--xp-ink); font: 500 13px var(--display);
}
.xp-full span { transition: transform .4s var(--spring); }
.xp-full:hover span { transform: translateX(4px); }

/* Vuelo a la bolsa */
.fly-outer { position: fixed; z-index: 90; pointer-events: none; will-change: transform; }
.fly-inner { display: block; max-width: none; will-change: transform; filter: drop-shadow(0 18px 20px rgba(40, 20, 10, .3)); }

/* ---------- Bolsa: cajón de vidrio oscuro ---------- */
.overlay { z-index: 70; }
.toast { z-index: 95; }
.overlay:not([hidden]) > .shade { animation: shadeIn .5s ease both; }
@keyframes shadeIn { from { opacity: 0; } }
.overlay .shade { background: rgba(26, 18, 12, .32); backdrop-filter: blur(10px) saturate(.9); -webkit-backdrop-filter: blur(10px) saturate(.9); }
#bagOverlay .bag-panel {
  width: min(460px, 100vw); color: #f4efe8; background: rgba(28, 25, 23, .84);
  backdrop-filter: blur(34px) saturate(1.3); -webkit-backdrop-filter: blur(34px) saturate(1.3);
  border-left: 1px solid rgba(255, 255, 255, .08); box-shadow: -30px 0 80px rgba(0, 0, 0, .3);
  animation: drawerIn .75s var(--spring) both;
}
@keyframes drawerIn { from { transform: translateX(104%); } }
#bagOverlay .drawer-header { border-color: rgba(255, 255, 255, .08); align-items: center; }
#bagOverlay .drawer-header .eyebrow { font: 500 10px var(--mono); letter-spacing: .16em; color: rgba(244, 239, 232, .55); margin: 0 0 6px; }
#bagOverlay .drawer-header h2 { font: 700 30px var(--display); letter-spacing: -.035em; color: #fff; }
#bagOverlay .close-button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
#bagOverlay .bag-list { padding: 8px 28px; }
#bagOverlay .bag-item { border-color: rgba(255, 255, 255, .08); grid-template-columns: 84px 1fr; animation: rowIn .6s var(--spring) both; }
#bagOverlay .bag-item img { width: 84px; height: 104px; border-radius: 12px; background: #efe7dc; object-fit: cover; }
#bagOverlay .bag-item h3 { font: 600 16px var(--display); letter-spacing: -.01em; color: #fff; }
#bagOverlay .bag-item p { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 239, 232, .6); }
#bagOverlay .bag-item strong { font: 600 14px var(--display); color: #fff; }
#bagOverlay .bag-item-controls button { border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: #fff; min-width: 28px; height: 28px; background: rgba(255, 255, 255, .04); }
#bagOverlay .bag-item-controls .remove { border: 0; background: none; color: rgba(244, 239, 232, .6); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
#bagOverlay .bag-empty { color: rgba(244, 239, 232, .6); }
@keyframes rowIn { from { opacity: 0; transform: translateX(24px); } }
.bag-recs { padding: 6px 28px 18px; }
.bag-recs h3 { margin: 6px 0 12px; font: 600 15px var(--display); color: #fff; }
.bag-recs-list { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.bag-rec { display: grid; gap: 4px; padding: 0; border: 0; background: none; color: #fff; text-align: left; }
.bag-rec-media { display: grid; place-items: center; height: 150px; border-radius: 14px; background: linear-gradient(180deg, #f3ece2, #e2d6c7); overflow: hidden; }
.bag-rec-media img { width: 82%; height: 88%; object-fit: contain; transition: transform .6s var(--spring); filter: drop-shadow(0 10px 10px rgba(40, 20, 10, .2)); }
.bag-rec:hover .bag-rec-media img { transform: translateY(-4px) scale(1.04); }
.bag-rec strong { font: 600 12.5px var(--display); margin-top: 4px; }
.bag-rec small { font: 500 9.5px var(--mono); letter-spacing: .1em; color: rgba(244, 239, 232, .6); }
#bagOverlay .drawer-footer { border-color: rgba(255, 255, 255, .08); }
#bagOverlay .total { font: 700 15px var(--mono); letter-spacing: .04em; color: #fff; margin-bottom: 4px; }
#bagOverlay .total span { font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
#bagOverlay .drawer-footer p { color: rgba(244, 239, 232, .55); }
#bagOverlay .checkout-field span { color: rgba(244, 239, 232, .65); }
#bagOverlay .checkout-field select, #bagOverlay .checkout-field input { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: 10px; }
#bagOverlay .checkout-field select option { color: #161412; }
#bagOverlay .button { border-radius: 999px; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; min-height: 48px; }
#bagOverlay .button-red { background: #f4efe8; color: #161412; }
#bagOverlay .button-red:hover { background: #fff; }
#bagOverlay .button-outline { border-color: rgba(255, 255, 255, .22); color: #f4efe8; }
#bagOverlay .button-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Ficha completa (catálogo) con el mismo lenguaje */
#productOverlay .product-panel {
  --pp-ink: #161412; --pp-soft: rgba(22, 20, 18, .56); --pp-line: rgba(22, 20, 18, .09);
  width: min(1120px, 94vw); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  border-radius: 30px 0 0 30px; color: var(--pp-ink); font-family: var(--display);
  background: rgba(251, 248, 243, .96); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: -40px 0 90px -30px rgba(40, 24, 10, .35); animation: drawerIn .8s var(--spring) both; scrollbar-width: none;
}
#productOverlay .product-panel::-webkit-scrollbar { display: none; }
#productOverlay .product-panel > .close-button {
  position: absolute; top: 22px; right: 22px; z-index: 5; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(22, 20, 18, .06); color: var(--pp-ink); transition: transform .45s var(--spring), background .3s;
}
#productOverlay .close-button svg { width: 18px; height: 18px; }
#productOverlay .close-button:hover { transform: rotate(90deg); background: rgba(22, 20, 18, .12); }
#productOverlay .close-button:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 3px; }

/* Galería */
#productOverlay .panel-gallery {
  position: sticky; top: 0; align-self: start; height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px;
  padding: 22px 0 22px 22px; background: none;
}
#productOverlay .main-image-button {
  position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: zoom-in;
  background: radial-gradient(120% 90% at 50% 25%, #f6f0e7, #e4d9ca);
}
#productOverlay .main-image-button img { position: absolute; inset: 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 0; transition: transform 1.2s var(--spring); }
#productOverlay .main-image-button:hover img { transform: scale(1.03); }
#productOverlay .thumbnails { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
#productOverlay .thumbnails button {
  flex: none; width: 62px; height: 76px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #e8ded1;
  opacity: .62; transition: opacity .3s, box-shadow .3s, transform .4s var(--spring);
}
#productOverlay .thumbnails button:hover { opacity: 1; transform: translateY(-2px); }
#productOverlay .thumbnails button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #fbf8f3, 0 0 0 3.5px var(--pp-ink); }
#productOverlay .thumbnails img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 0; }
#productOverlay .gallery-caption { font-size: 12px; color: var(--pp-soft); }

/* Información */
#productOverlay .panel-info { padding: 76px clamp(28px, 3.6vw, 52px) 44px; min-width: 0; }
#productOverlay .panel-info > .eyebrow { margin: 0 0 12px; font: 500 12.5px var(--display); letter-spacing: .01em; text-transform: none; color: var(--pp-soft); }
#productOverlay .panel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#productOverlay .panel-badges:empty { display: none; }
#productOverlay .panel-badges .catalog-badge {
  padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(22, 20, 18, .07); color: var(--pp-ink);
  font: 600 11px var(--display); letter-spacing: .02em; text-transform: none;
}
#productOverlay .panel-badges .catalog-badge { color: var(--pp-ink) !important; font: 600 11px/1.2 var(--display) !important; }
#productOverlay .panel-badges .catalog-badge.is-coming { background: var(--pp-ink); color: #fff !important; }
#productOverlay .panel-info h2 {
  margin: 0; font: 700 clamp(32px, 3.3vw, 50px)/1 var(--display); letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance;
}
#productOverlay .panel-price { display: block; margin-top: 14px; font: 600 22px var(--display); letter-spacing: -.02em; }
#productOverlay .panel-price .price-original { color: #847c74; font: 500 15px var(--body); }
#productOverlay .panel-price .price-sale { color: #a01d30; font-weight: 800; }
#productOverlay .panel-info > p:not(.eyebrow):not(.production-note):not(.size-note):not(.launch-note) { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: rgba(22, 20, 18, .72); }
#productOverlay .panel-details { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: rgba(22, 20, 18, .72); }
#productOverlay .production-note {
  position: relative; margin: 20px 0 0; padding: 14px 16px 14px 44px; border: 0; border-radius: 16px; background: rgba(22, 20, 18, .045);
  font-size: 13.5px; line-height: 1.55; color: rgba(22, 20, 18, .72);
}
#productOverlay .production-note::before {
  content: ''; position: absolute; left: 15px; top: 14px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' fill='none' stroke='%23161412' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#productOverlay .thumbnails:has(> :only-child) { display: none; }
#productOverlay .option-block {
  display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--pp-line);
}
#productOverlay .option-block span { font: 400 13.5px var(--display); color: var(--pp-soft); }
#productOverlay .option-block strong { font: 600 14px var(--display); }
#productOverlay .size-field { margin-top: 20px; }
#productOverlay .size-legend-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#productOverlay .size-field legend { padding: 0; font: 400 13.5px var(--display); color: var(--pp-soft); }
#productOverlay .size-field legend span { color: var(--pp-soft); }
#productOverlay .inline-text-btn {
  padding: 0; border: 0; background: none; color: var(--pp-ink); font: 500 13px var(--display);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(22, 20, 18, .3);
}
#productOverlay .size-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 4px; margin: 0;
  padding: 4px; border-radius: 16px; background: rgba(22, 20, 18, .06); box-shadow: inset 0 1px 2px rgba(22, 20, 18, .06);
}
#productOverlay .size-options button {
  height: 46px; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: rgba(22, 20, 18, .62);
  font: 600 14px var(--display); transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--spring);
}
#productOverlay .size-options button:hover:not(:disabled) { color: var(--pp-ink); background: rgba(255, 255, 255, .5); }
#productOverlay .size-options button[aria-pressed="true"] {
  background: #fff; color: var(--pp-ink); box-shadow: 0 6px 16px -6px rgba(40, 24, 10, .35), 0 1px 2px rgba(40, 24, 10, .12);
}
#productOverlay .size-options button:disabled { background: none; color: rgba(22, 20, 18, .3); }
#productOverlay .validation { min-height: 16px; margin: 8px 0 0; color: var(--red); font: 500 12.5px var(--display); }
#productOverlay .size-note { margin: 4px 0 0; font-size: 12.5px; color: var(--pp-soft); }
#productOverlay .purchase-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 18px; }
#productOverlay .quantity {
  display: flex; align-items: center; height: 58px; padding: 0 6px; border: 0; border-radius: 18px; background: rgba(22, 20, 18, .06);
}
#productOverlay .quantity button { width: 38px; height: 46px; border: 0; border-radius: 12px; background: none; font-size: 18px; color: var(--pp-ink); transition: background .3s; }
#productOverlay .quantity button:hover { background: rgba(255, 255, 255, .7); }
#productOverlay .quantity output { min-width: 26px; text-align: center; font: 600 15px var(--display); }
#productOverlay #addBag {
  height: 58px; min-height: 0; padding: 0 24px; border: 0; border-radius: 18px; background: var(--pp-ink); color: #fff;
  font: 600 15px var(--display); letter-spacing: -.005em;
  box-shadow: 0 18px 34px -18px rgba(22, 20, 18, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .4s var(--spring), background .3s;
}
#productOverlay #addBag:hover { transform: translateY(-2px); background: #000; }
#productOverlay .pp-perks { margin-top: 16px; }
#productOverlay .panel-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pp-line); }
#productOverlay .pp-hang {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: rgba(22, 20, 18, .06); color: var(--pp-ink); font: 500 13px var(--display); transition: background .3s, color .3s;
}
#productOverlay .pp-hang svg { width: 17px; height: 17px; }
#productOverlay .pp-hang:hover { background: var(--pp-ink); color: #fff; }
#productOverlay .official-link {
  margin: 0; padding: 0; border: 0; font: 500 13px var(--display); color: var(--pp-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(22, 20, 18, .3);
}
/* Próximamente: ocupa el lugar del botón de compra */
#productOverlay .launch-note {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; margin: 18px 0 0; padding: 0;
  border: 0; border-radius: 18px; overflow: hidden; color: var(--pp-ink) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
  box-shadow: inset 0 0 0 1px rgba(22, 20, 18, .1), 0 14px 30px -20px rgba(40, 24, 10, .4);
}
#productOverlay .launch-note[hidden] { display: none; }
#productOverlay .launch-note::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 66%) no-repeat;
  background-size: 250% 100%; animation: soonSheen 3.2s ease-in-out infinite;
}
#productOverlay .soon-text { font: 600 15px var(--display); letter-spacing: .01em; }
#productOverlay .soon-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
#productOverlay .soon-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--red); animation: soonPulse 1.8s ease-out infinite; }
@keyframes soonSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes soonPulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
#productOverlay .panel-info:has(#launchNote:not([hidden])) .production-note { display: none; }

/* Recortes sin percha en la galería */
#productOverlay .main-image-button.is-cutout img { object-fit: contain; height: 100%; padding: 7% 9%; filter: drop-shadow(0 26px 30px rgba(48, 30, 16, .22)); }
#productOverlay .thumbnails img[src*="perchero-webp/"] { object-fit: contain; height: 100%; padding: 8%; background: radial-gradient(120% 90% at 50% 30%, #fbf7f1, #e8ded1); }

@media (max-width: 760px) {
  #productOverlay .product-panel { width: 100vw; display: block; border-radius: 0; }
  #productOverlay .panel-gallery { position: relative; height: auto; padding: 14px 14px 0; grid-template-rows: auto auto auto; }
  #productOverlay .main-image-button { height: auto; aspect-ratio: .86; border-radius: 20px; }
  #productOverlay .panel-info { padding: 26px 20px 40px; }
  #productOverlay .product-panel > .close-button { top: 24px; right: 24px; background: rgba(255, 255, 255, .85); }
}

/* Tipografía general: grotesca con acentos en itálica de marca */
.section-heading h2, .brand h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.05em; }
.section-heading h2 em, .brand h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.03em; }
.eyebrow { font-family: var(--mono); font-weight: 500; }
.logo { font-family: var(--serif); }

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 16px; }
  .site-header .menu-toggle { grid-column: 1; }
  .site-header .logo { grid-column: 2; font-size: 24px; }
  .site-header .header-actions { grid-column: 3; }
  .menu-word { display: none; }
  #searchButton, #accountButton { display: none; }
  .stage { min-height: 560px; }
  .stage-caption { bottom: 96px; }
  .cap-name { font-size: clamp(26px, 8vw, 34px); }
  .cap-cta { margin-top: 14px; padding: 12px 20px; }
  .stage-foot { grid-template-columns: 1fr auto; padding-bottom: 18px; }
  .foot-tagline { display: none; }
  .stage-dots { display: none; }
  .foot-hint { display: none; }
  .foot-select select { max-width: 52vw; }
  .stage-arrow { display: none; }
  .g-sheen { display: none; }
  .stage.is-exploring .stage-arrow { display: grid; width: 38px; height: 38px; margin-top: -19px; }
  .stage.is-exploring .stage-arrow.is-prev { left: max(8px, calc(var(--slot-x) - var(--slot-w) / 2 - 50px)); }
  .stage.is-exploring .stage-arrow.is-next { left: calc(var(--slot-x) + var(--slot-w) / 2 + 12px); }
  .xp-dots { top: calc(var(--slot-y) + var(--slot-h) + 4px); }
  .xp-photo { width: min(54vw, calc(var(--slot-h) * .8)); border-radius: 18px; }
  .explore-panel {
    top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 58%;
    padding: 22px 20px 14px; border-radius: 24px; transform: translateY(40px);
  }
  .explore-panel.is-open { transform: none; }
  .xp-title { font-size: 26px; }
  .xp-section { margin-top: 18px; padding-top: 16px; }
  .menu-links a { font-size: clamp(38px, 12vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-sun::after, .menu-links a, .site-header .mobile-nav { animation: none; }
  .stage-photo-next { transition: none; }
  .rail-svg:not(.is-drawn) .rail-tube, .rail-svg:not(.is-drawn) .rail-shadow, .rail-svg:not(.is-drawn) .rail-rods, .rail-svg:not(.is-drawn) .rail-cap { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .stage-photo { transform: none; }
}