/* =========================================================
   SELLO · joyería de hombre · home
   Layout: bandas a sangre que alternan grafito y hueso sobre
   una retícula de 12 columnas (máx. 1440). Mundo único oscuro
   con bandas claras: diseño de un solo tema a propósito.
   ========================================================= */
:root {
  /* Color */
  --ink: #0c0c0b;          /* fondo principal */
  --graphite: #161615;     /* bandas oscuras secundarias */
  --steel: #252522;        /* superficies sobre oscuro */
  --bone: #e9e5de;         /* bandas claras */
  --paper: #dcd7cf;        /* banda regalos / fondo de producto */
  --prod: #d1cdc7;         /* fondo de las fotos de producto */
  --fg: #ece9e3;           /* texto sobre oscuro */
  --fg-dim: #9e9a91;
  --ink-fg: #151513;       /* texto sobre claro */
  --ink-dim: #615d55;
  --line-d: rgba(236, 233, 227, .14);
  --line-l: rgba(21, 21, 19, .16);
  --silver: linear-gradient(100deg, #7c7b77 0%, #f3f2ee 17%, #a3a29d 33%, #ffffff 47%, #8a8984 63%, #dddcd7 81%, #8e8d88 100%);
  --steel-grad: linear-gradient(100deg, #2b2b29 0%, #8d8c87 22%, #3a3a37 40%, #b9b8b3 55%, #2f2f2c 72%, #7b7a75 100%);

  /* Tipografía: referencias de marcas reales
     display  → Antonio      (rol de Kapra Neue en Mejuri)
     texto    → Host Grotesk (rol de Suisse / Neue Haas en Miansai y Vitaly)
     datos    → Fragment Mono (rol de Gaisyr Semi-Mono en Tom Wood) */
  --f-display: "Antonio", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-text: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-hero: clamp(72px, 10.8vw, 176px);
  --t-hl: clamp(46px, 6.4vw, 104px);
  --t-h3: clamp(24px, 2.4vw, 34px);
  --t-lead: clamp(17px, 1.3vw, 19.5px);
  --t-body: 16px;
  --t-small: 13.5px;
  --t-mono: 11.5px;

  --gutter: clamp(16px, 4vw, 60px);
  --pad: clamp(80px, 10vw, 156px);
  --maxw: 1440px;
  --ease: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --head-h: 68px;
  --top-h: 34px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; overflow-anchor: none; }
html, body { overscroll-behavior-x: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.is-locked, html.is-locked body { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
select, textarea { font-family: inherit; } /* v13.1: la letra de la página también en las listas (el selector de talla salía en Arial) */
:root { --ring: var(--fg); }
.band-bone, .band-paper, .drawer, .sheet, .qv { --ring: var(--ink-fg); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.btn-solid:focus-visible, .opts input:focus-visible + span, .tabs button:focus-visible, .gchips button:focus-visible, .seg button:focus-visible, .chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; box-shadow: 0 0 0 2px var(--ring-gap, var(--ink)); }
.band-bone, .band-paper, .drawer, .sheet, .qv { --ring-gap: var(--bone); }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--fg); color: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--fg); color: var(--ink); padding: 10px 14px; font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--pad); position: relative; }
.band-ink { background: var(--ink); color: var(--fg); }
.band-graphite { background: var(--graphite); color: var(--fg); }
.band-bone { background: var(--bone); color: var(--ink-fg); }
.band-paper { background: var(--paper); color: var(--ink-fg); }

/* ---------- Tipografía ---------- */
.eyebrow, .mono-label {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}
.eyebrow { margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.band-bone .eyebrow, .band-paper .eyebrow { color: var(--ink-dim); }
.band-ink .eyebrow, .band-graphite .eyebrow { color: var(--fg-dim); }

.h-l {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hl);
  line-height: .88;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34ch; margin: 22px 0 0; color: inherit; opacity: .78; }
.silver-text {
  background: var(--silver);
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverShift 7s var(--ease-io) infinite alternate;
}
@keyframes silverShift { to { background-position: 100% 0; } }
.hero-title .silver-text { display: inline-block; padding-block: .1em .28em; margin-block: -.1em -.28em; }

/* split words (JS) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .2em .3em; margin-block: -.2em -.3em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px;
  font-family: var(--f-text); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
  white-space: nowrap;
}
.btn > span { position: relative; z-index: 1; }
.btn-solid { background: var(--fg); color: var(--ink); }
.band-bone .btn-solid, .band-paper .btn-solid { background: var(--ink-fg); color: var(--bone); }
.btn-solid::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--silver); background-size: 200% 100%;
  transform: translateX(-101%); transition: transform .7s var(--ease);
}
.btn-solid:hover::after { transform: translateX(0); animation: silverShift 2.4s linear infinite alternate; }
.band-bone .btn-solid:hover, .band-paper .btn-solid:hover { color: var(--ink-fg); }
.btn-line { border: 1px solid currentColor; color: var(--fg); }
.btn-line::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); z-index: 0; }
.btn-line:hover { color: var(--ink); }
.btn-line:hover::after { transform: scaleY(1); }
.btn-wide { width: 100%; }
.magnetic { will-change: transform; }

.link-arrow { display: inline-flex; gap: 10px; align-items: center; min-height: 40px; font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(6px); }

.chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid var(--line-d); border-radius: 999px;
  font-size: 13px; color: var(--fg); transition: background .3s, color .3s, border-color .3s;
}
.chip:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }

.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 4.5vw, 64px); }
.head-row > div:first-child { min-width: 0; }
.chips, .tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* =========================================================
   CABECERA
   ========================================================= */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: transform .6s var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-head.is-scrolled { transform: translateY(calc(-1 * var(--top-h))); }
.site-head.is-hidden { transform: translateY(calc(-100% - 2px)); }
.topbar { height: var(--top-h); background: var(--ink); border-bottom: 1px solid var(--line-d); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.topbar ul { list-style: none; margin: 0; padding: 0 16px; display: flex; gap: clamp(18px, 4vw, 56px); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
.topbar li { display: flex; align-items: center; gap: 10px; }
@media (max-width: 990px) { .topbar .tb-3 { display: none; } }
@media (max-width: 560px) { .topbar .tb-2 { display: none; } }
.topbar li + li::before { content: ""; width: 4px; height: 4px; transform: rotate(45deg); background: var(--fg-dim); opacity: .6; margin-right: clamp(8px, 2vw, 46px); }

.hdr {
  height: var(--head-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--gutter);
  color: var(--fg);
  position: relative;
  transition: background-color .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
html:not(.js) .hdr, .site-head.is-scrolled .hdr, .site-head.mega-open .hdr {
  background: rgba(12, 12, 11, .84);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line-d);
}
/* menú móvil abierto: cabecera opaca, así los enlaces del menú pasan por debajo al hacer scroll (MOV-02) */
.site-head:has(#burger[aria-expanded="true"]) .hdr { background: var(--ink); border-bottom-color: var(--line-d); }
.hdr-nav { display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; }
.hdr-link { font-size: 13.5px; font-weight: 500; letter-spacing: .02em; position: relative; padding: 8px 0; }
.hdr-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hdr-link:hover::after, .hdr-link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.has-mega { display: inline-flex; align-items: center; gap: 6px; }
.has-mega::before { content: ""; order: 2; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.has-mega[aria-expanded="true"]::before { transform: rotate(-135deg) translateY(-1px); }

.logo { display: inline-flex; align-items: center; gap: 10px; justify-self: center; min-height: 44px; }
.logo-word { font-family: var(--f-display); font-weight: 600; font-size: 27px; letter-spacing: .26em; margin-right: -.26em; line-height: 1; }
.logo-stamp {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 50%;
  width: 30px; height: 19px; display: inline-grid; place-items: center; opacity: .8;
}
.hdr-tools { justify-self: end; display: flex; align-items: center; gap: 6px; }
.icon-btn, .bag-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; transition: background .3s; position: relative; }
.icon-btn:hover, .bag-btn:hover { background: rgba(236, 233, 227, .08); }
.icon-btn svg, .bag-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bag-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--fg); color: var(--ink);
  font-family: var(--f-mono); font-size: 10px; display: grid; place-items: center;
}
.hdr-burger { display: none; width: 42px; height: 42px; position: relative; }
.hdr-burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.hdr-burger span:first-child { top: 16px; }
.hdr-burger span:last-child { top: 25px; }
.hdr-burger[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:last-child { top: 20.5px; transform: rotate(-45deg); }

/* mega */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  background: rgba(12, 12, 11, .96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-d);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
}
.mega.is-open { clip-path: inset(0 0 0 0); }
.mega-in { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter) 48px; display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr; gap: 40px; }
.mega-col { display: flex; flex-direction: column; gap: 4px; }
.mega-col .mono-label { color: var(--fg-dim); margin-bottom: 12px; }
.mega-col .mono-label.mt { margin-top: 22px; }
.mega-col a { font-size: 17px; padding: 3px 0; display: flex; justify-content: space-between; max-width: 220px; color: var(--fg); opacity: .86; transition: opacity .3s, transform .4s var(--ease); }
.mega-col a span { font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); }
.mega-col a:hover { opacity: 1; transform: translateX(4px); }
.mega-col a.mega-all { margin-top: 10px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.mega-feature { position: relative; overflow: hidden; min-height: 260px; display: block; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
.mega-feature-txt { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.mega-feature-txt strong { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 34px; line-height: .9; }
.mega-feature-txt span:last-child { font-size: 14px; opacity: .8; }

/* menú móvil */
.mnav { position: fixed; inset: 0; z-index: 55; background: var(--ink); padding: calc(var(--head-h) + var(--top-h) + 24px + env(safe-area-inset-top, 0px)) var(--gutter) 32px; overflow-y: auto; }
.mnav-in { display: flex; flex-direction: column; }
.mnav-big { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(48px, 14vw, 72px); line-height: 1.02; border-bottom: 1px solid var(--line-d); padding: 6px 0; }
.mnav-small { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 28px; font-size: 16px; }
.mnav-small a { padding-block: 9px; }
.mnav-note { color: var(--fg-dim); margin-top: 32px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: clamp(480px, 100svh, 1440px);
  overflow: hidden;
  background: #0b0d10;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 68% 40%; transform-origin: 70% 50%; will-change: transform; }
.hero-glint {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 74%) var(--gy, 60%), rgba(255, 255, 255, .24), rgba(255, 255, 255, .06) 12%, rgba(255, 255, 255, 0) 26%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .8s;
}
.hero.has-pointer .hero-glint { opacity: 1; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 11, .55) 0, rgba(8, 9, 11, 0) 190px), linear-gradient(90deg, rgba(8, 9, 11, .78) 0%, rgba(8, 9, 11, .42) 38%, rgba(8, 9, 11, 0) 62%), linear-gradient(0deg, rgba(8, 9, 11, .55) 0%, rgba(8, 9, 11, 0) 34%); }
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(88px, 11vh, 132px);
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.hero-title {
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: var(--t-hero); line-height: .92; letter-spacing: -.012em;
  margin: 0; display: flex; flex-direction: column;
}
.hero-title .ln { display: block; padding-block: .12em .3em; margin-block: -.12em -.3em; }
.anim .hero-title .ln { overflow: hidden; }
.hero-title.is-done .ln, .w.is-done { overflow: visible; }
.hero-title .ln > span { display: inline-block; will-change: transform; }
.hero-lead { font-size: var(--t-lead); max-width: 36ch; margin: 28px 0 0; color: rgba(236, 233, 227, .82); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 26px;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; justify-content: space-between; align-items: center; color: rgba(236, 233, 227, .62);
  padding-right: calc(var(--gutter) + 72px);
}
.scroll-cue { display: flex; align-items: center; gap: 12px; }
.scroll-cue i { width: 56px; height: 1px; background: rgba(236, 233, 227, .25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateX(-100%); animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* hotspots */
.spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.spot-dot { position: absolute; inset: 14px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 0 rgba(236, 233, 227, .5); animation: ping 2.6s var(--ease) infinite; }
.spot-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(236, 233, 227, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(236, 233, 227, 0); } }
.spot-card {
  position: absolute; right: calc(100% + 8px); top: 50%;
  display: flex; gap: 12px; align-items: center; width: max-content; max-width: 280px;
  background: rgba(12, 12, 11, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line-d); padding: 8px 16px 8px 8px; text-align: left;
  opacity: 0; transform: translate(8px, -50%); pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.spot-card img { width: 48px; height: 58px; object-fit: cover; background: var(--prod); }
.spot-card strong { display: block; font-size: 14px; font-weight: 600; }
.spot-card em { display: block; font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.spot:hover .spot-card, .spot:focus-visible .spot-card { opacity: 1; transform: translate(0, -50%); }
/* con el parallax, el punto se oculta solo mientras cruza el pie del hero («Desliza», pie de foto) (TAB-05) */
.spot-dot { transition: opacity .3s var(--ease); }
.spot.is-off { pointer-events: none; }
.spot.is-off .spot-dot { opacity: 0; }

/* =========================================================
   CATEGORÍAS
   ========================================================= */
.cats .head-row .chips { justify-content: flex-end; }
.cats-rail { display: flex; gap: 10px; height: clamp(460px, 44vw, 640px); }
.cat {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  transition: flex-grow .9s var(--ease);
  background: var(--steel);
}
.cat.is-open { flex-grow: 3.2; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: brightness(.5) saturate(.85); transition: transform 1.2s var(--ease), filter .9s var(--ease); }
.cat.is-open img { transform: scale(1); filter: brightness(.86) saturate(1); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 45%); pointer-events: none; }
.cat-v {
  position: absolute; left: 50%; bottom: 26px; z-index: 1;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: 26px; letter-spacing: .06em;
  transition: opacity .4s var(--ease);
}
.cat.is-open .cat-v { opacity: 0; }
.cat-h { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.cat.is-open .cat-h { opacity: 1; transform: none; transition-delay: .25s; }
.cat-name { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(44px, 4.6vw, 76px); line-height: .9; }
.cat-meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: rgba(236,233,227,.8); }

/* =========================================================
   ENCUENTRA TU CADENA
   ========================================================= */
.finder { overflow: clip; }
.finder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.finder-side { min-width: 0; }
.finder-form { margin-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; }
.step-n { width: 22px; height: 22px; border: 1px solid var(--line-d); border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; letter-spacing: 0; color: var(--fg); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opts span {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
  border: 1px solid var(--line-d); font-size: 14px; transition: background .35s, color .35s, border-color .35s;
}
.opts span i { display: inline-block; width: 22px; height: var(--w); background: currentColor; border-radius: 2px; opacity: .8; }
.opts input:hover + span { border-color: rgba(236,233,227,.5); }
.opts input:checked + span { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.opts input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.len-note { margin: 14px 0 0; font-size: 14px; color: var(--fg-dim); min-height: 1.5em; }

.finder-result {
  margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-d);
  display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: end;
}
.finder-result .mono-label { color: var(--fg-dim); margin-bottom: 6px; }
.fr-name { margin: 0; font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: clamp(26px, 2.2vw, 32px); line-height: 1; }
.fr-price { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; }
.finder-result .btn { grid-column: 1 / -1; }
.fr-small { grid-column: 1 / -1; margin: -6px 0 0; font-size: 13px; color: var(--fg-dim); }

.finder-stage {
  position: relative; min-width: 0;
  aspect-ratio: 5 / 5.4; max-width: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(236,233,227,.06), rgba(236,233,227,0) 60%),
    radial-gradient(circle, rgba(236,233,227,.075) 1px, transparent 1.2px) 0 0 / 22px 22px;
  border: 1px solid var(--line-d);
}
.finder-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loupe {
  position: absolute; right: 5%; bottom: 6%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: #0f0f0e;
  box-shadow: 0 0 0 1px rgba(236,233,227,.25), 0 0 0 7px rgba(22,22,21,.9), 0 0 0 8px rgba(236,233,227,.14), 0 24px 60px rgba(0,0,0,.5);
}
.loupe canvas { width: 100%; height: 100%; display: block; }
.loupe-tag { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
.stage-readout { position: absolute; left: 20px; top: 18px; color: var(--fg-dim); }

/* =========================================================
   MÁS VENDIDOS
   ========================================================= */
.tabs button {
  height: 38px; padding: 0 16px; border: 1px solid var(--line-l); border-radius: 999px; font-size: 13.5px;
  transition: background .3s, color .3s, border-color .3s;
}
.tabs button:hover { border-color: var(--ink-fg); }
.tabs button[aria-pressed="true"] { background: var(--ink-fg); color: var(--bone); border-color: var(--ink-fg); }
.grid-products { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card.is-hidden { display: none; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--prod); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.card-media .m2 { opacity: 0; transform: scale(1.06); }
.card:hover .m2, .card:focus-within .m2 { opacity: 1; transform: scale(1); }
.card:hover .m1 { transform: scale(1.04); }
.badge { position: absolute; left: 12px; top: 12px; z-index: 1; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--bone); color: var(--ink-fg); padding: 6px 9px; }
.card-top { position: relative; }
.card-add {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px;
  height: 46px; background: var(--ink-fg); color: var(--bone);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .55s var(--ease), background .3s;
}
.card:hover .card-add, .card:focus-within .card-add { opacity: 1; transform: none; }
.card-add.is-done { background: #2f4a37; }
.card-info { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-top: 14px; position: relative; }
.card-info h3 { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.card-info h3 a::after { content: ""; position: absolute; inset: 0; }
.swatches[data-qv] { cursor: pointer; }
.card-info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-meta { grid-column: 1; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-dim); }
.card-price { grid-column: 2; grid-row: 1; margin: 0; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.swatches { display: flex; gap: 6px; margin-top: 10px; }
.sw { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.sw-ag { background: linear-gradient(135deg, #f4f4f1, #a9a8a3); }
.sw-au { background: linear-gradient(135deg, #f1dca5, #b88f42); }
.sw-ox { background: linear-gradient(135deg, #9a9893, #3c3b38); }
.more-row { margin: 44px 0 0; display: flex; justify-content: center; }
.best-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: calc(-1 * clamp(14px, 2vw, 34px)) 0 clamp(18px, 2vw, 28px); font-size: 14px; color: var(--ink-dim); }
.best-status[hidden] { display: none; }
.best-status p { margin: 0; }
.best-status b { color: var(--ink-fg); font-weight: 600; }
.best-status button { min-height: 40px; font-size: 13.5px; color: var(--ink-fg); text-decoration: underline; text-underline-offset: 3px; }
/* v13: «ver las 8 de la tienda» (con la tienda conectada): el mismo aspecto que «Quitar filtro»; igual en la hoja de una colección */
.best-status p a, .sheet-sub a { color: var(--ink-fg); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   REGALOS
   ========================================================= */
.gifts-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.gifts-media { position: sticky; top: 100px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1612; }
.gifts-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-promise {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(236,233,227,.18);
}
.gift-promise span { background: rgba(12,12,11,.76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fg); padding: 14px 14px 16px; font-size: 12.5px; line-height: 1.35; }
.gift-promise b { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.gifts-side { min-width: 0; padding-top: clamp(0px, 3vw, 40px); }
.gq { margin-top: 28px; }
.gq-label { margin: 0 0 12px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchips button { height: 42px; padding: 0 17px; border: 1px solid var(--line-l); border-radius: 999px; font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.gchips button:hover { border-color: var(--ink-fg); }
.gchips button[aria-pressed="true"] { background: var(--ink-fg); color: var(--paper); border-color: var(--ink-fg); }
.gres-title { margin: 40px 0 14px; color: var(--ink-dim); }
.gres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gcard { display: flex; flex-direction: column; min-width: 0; background: var(--bone); }
.gcard-img { aspect-ratio: 1; overflow: hidden; background: var(--prod); position: relative; }
.gcard-tag { position: absolute; left: 8px; top: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--bone); color: var(--ink-dim); padding: 4px 6px; }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gcard:hover .gcard-img img { transform: scale(1.05); }
.gcard-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gcard-body strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.gcard-body span { font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; }
.gcard-body em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums; }
.gnote { margin: 22px 0 0; font-size: 14px; color: var(--ink-dim); }

/* =========================================================
   PERSONALIZA
   ========================================================= */
.perso-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.perso-stage { position: relative; aspect-ratio: 1; overflow: hidden; background: #111; }
.engrave-item { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.engrave-item.is-on { opacity: 1; }
.engrave-item img { width: 100%; height: 100%; object-fit: cover; }
.engrave {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: rgba(78, 78, 75, .82);
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px .5px rgba(0,0,0,.42), 0 0 1px rgba(0,0,0,.25); text-align: center; line-height: 1; pointer-events: none;
}
.engrave-ring { left: 32%; top: 26%; width: 35%; height: 36%; border-radius: 50%; transform: rotate(-7deg); }
.engrave-tag { left: 37.5%; top: 37%; width: 25%; height: 38%; gap: .3em; }
.engrave .ch { display: inline-block; }
.engrave .row { display: block; white-space: nowrap; }
.f-romana { font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; font-weight: 600; letter-spacing: .02em; }
.f-bloque { font-family: var(--f-display); font-weight: 600; letter-spacing: .06em; }
.f-maquina { font-family: var(--f-mono); letter-spacing: .04em; }
.engrave-ring, .engrave-tag { font-size: var(--fs, 40px); }
.perso-stage .stage-readout { top: auto; bottom: 18px; color: rgba(236,233,227,.6); }
.perso-side { min-width: 0; }
.seg { display: inline-flex; margin-top: 32px; border: 1px solid var(--line-d); padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { height: 40px; padding: 0 16px; font-size: 13.5px; transition: background .3s, color .3s; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--ink); }
.field { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.field[hidden] { display: none; }
.field label, .field-label { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin: 0; }
.field label + input + label { margin-top: 10px; }
.field input {
  height: 56px; background: transparent; border: 0; border-bottom: 1px solid rgba(236,233,227,.35);
  font-family: var(--f-display); font-size: 30px; letter-spacing: .12em; text-transform: uppercase; padding: 0 2px;
  border-radius: 0; transition: border-color .3s;
}
.field input:focus { outline: none; border-bottom-color: var(--fg); }
.font-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.font-pick button { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 10px; border: 1px solid var(--line-d); font-size: 14px; transition: border-color .3s, background .3s; }
.font-pick button span { width: 32px; height: 32px; display: grid; place-items: center; background: var(--steel); font-size: 16px; }
.font-pick button[aria-pressed="true"] { border-color: var(--fg); background: rgba(236,233,227,.06); }
.fp-romana { font-family: "Bodoni Moda", Georgia, serif; font-weight: 600; }
.fp-bloque { font-family: var(--f-display); font-weight: 600; }
.fp-maquina { font-family: var(--f-mono); }
.perso-buy { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-d); display: flex; flex-direction: column; gap: 16px; }
.perso-buy p { margin: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--fg-dim); font-size: 14px; }
.perso-buy .btn { align-self: flex-start; }

/* =========================================================
   COLECCIONES (pin horizontal)
   ========================================================= */
.cols { background: var(--ink); position: relative; }
.cols-pin { height: 100svh; min-height: 620px; overflow: clip; position: relative; display: flex; align-items: center; }
.cols-track { display: flex; gap: clamp(14px, 1.6vw, 24px); padding-inline: var(--gutter); height: min(78svh, 1040px); will-change: transform; }
.col-intro { flex: 0 0 clamp(300px, 30vw, 460px); display: flex; flex-direction: column; justify-content: center; padding-right: 3vw; }
.col-hint { margin-top: 40px; color: var(--fg-dim); display: flex; gap: 10px; }
.col-hint span { display: inline-block; animation: nudge 1.8s var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.col-panel { position: relative; flex: 0 0 clamp(300px, 40vw, max(620px, min(820px, 62svh))); height: 100%; overflow: hidden; display: block; background: var(--steel); }
.col-panel:focus-visible { outline: none; }
.col-panel:focus-visible::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--ring); z-index: 3; pointer-events: none; }
html:not(.js) .cols-track { overflow-x: auto; scroll-snap-type: x mandatory; }
.col-img { position: absolute; inset: 0; overflow: hidden; }
.col-img img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; max-width: none; object-fit: cover; will-change: transform; transition: filter .8s var(--ease); filter: brightness(.82); }
.col-panel:hover .col-img img { filter: brightness(.95); }
.col-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 46%); }
.col-txt { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 36px); right: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.col-txt .mono-label { color: rgba(236,233,227,.75); }
.col-txt h3 { margin: 0; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(56px, 6.6vw, 112px); line-height: .86; }
.col-txt p { margin: 0; max-width: 32ch; font-size: 15px; color: rgba(236,233,227,.84); }
.cols-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 1px; background: var(--line-d); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto; }
.cols-progress i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }

/* =========================================================
   MANIFIESTO
   ========================================================= */
.manifesto { position: relative; min-height: clamp(560px, 92svh, 940px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #0b0b0c; }
.manifesto-media { position: absolute; inset: -8% 0; z-index: -2; }
.manifesto-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.manifesto-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.55) 45%, rgba(8,8,9,.1) 75%); }
.manifesto-in { padding-block: var(--pad); }
.manifesto-text {
  margin: 0; max-width: 15ch;
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(44px, 6.2vw, 100px); line-height: .94; letter-spacing: -.005em; text-wrap: balance;
}
.manifesto-text .mw { color: rgba(236,233,227,.18); transition: color .2s linear; }
.manifesto-text .mw.on { color: var(--fg); }

/* =========================================================
   PLATA 925
   ========================================================= */
.metal-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.metal-num { min-width: 0; }
.odo {
  margin: 0; display: flex; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(170px, 27vw, 420px); line-height: 1; letter-spacing: 0;
  height: 1em; overflow: hidden; font-variant-numeric: tabular-nums; margin-top: -.1em;
}
.odo-d { display: block; position: relative; height: 1em; overflow: hidden; width: var(--dw, .44em); text-align: center; line-height: 1; background: var(--steel-grad); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.odo-d.has-reel { background: none; clip-path: inset(.07em 0 0 0); }
.odo-d .reel { display: flex; flex-direction: column; will-change: transform; }
.odo-d .reel span {
  display: block; height: 1em; line-height: 1; text-align: center;
  background: var(--steel-grad); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: silverShift 6s var(--ease-io) infinite alternate;
}
.metal-h { margin: 22px 0 0; font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: clamp(28px, 2.8vw, 44px); line-height: .95; max-width: 14ch; }
.metal-side { min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.metal-macro { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.metal-macro img { width: 100%; height: 100%; object-fit: cover; }
.metal-macro figcaption { position: absolute; left: 16px; bottom: 14px; color: rgba(236,233,227,.75); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.facts div { border-top: 1px solid var(--line-l); padding-top: 14px; }
.facts dt { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); }

/* =========================================================
   RESEÑAS
   ========================================================= */
.reviews { padding-top: 0; }
.rev-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); border-top: 1px solid var(--line-l); padding-top: clamp(56px, 7vw, 100px); }
.rev-score { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 600; }
.rev-num { font-size: clamp(96px, 10vw, 150px); line-height: .82; font-variant-numeric: tabular-nums; }
.rev-of { font-size: 34px; color: var(--ink-dim); }
.stars { display: flex; gap: 4px; margin: 18px 0 0; }
.stars i { width: 18px; height: 18px; background: var(--ink-fg); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.part { background: linear-gradient(90deg, var(--ink-fg) 80%, rgba(21,21,19,.2) 80%); }
.stars.sm i { width: 13px; height: 13px; }
.rev-count { margin: 10px 0 0; font-size: 14px; color: var(--ink-dim); }
.rev-bars { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.rev-bars li { display: grid; grid-template-columns: 14px 1fr 42px; gap: 12px; align-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }
.rev-bars b { height: 3px; background: var(--line-l); position: relative; overflow: hidden; }
.rev-bars b::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--ink-fg); transform-origin: left; transform: scaleX(var(--s, 1)); transition: transform 1.4s var(--ease); }
.rev-bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.rev-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); min-width: 0; }
.rev { background: var(--paper); padding: 24px 22px 20px; display: flex; flex-direction: column; min-width: 0; }
.rev .stars { margin: 0 0 18px; }
.rev h3 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: 24px; line-height: 1; }
.rev > p:not(.stars) { margin: 0; font-size: 15px; line-height: 1.55; flex: 1; }
.rev footer { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-l); }
.rev footer img { width: 40px; height: 48px; object-fit: cover; background: var(--prod); }
.rev footer span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-dim); }
.rev footer b { color: var(--ink-fg); font-weight: 600; font-size: 13.5px; }

/* =========================================================
   JOURNAL
   ========================================================= */
.jr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.post { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.post-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--steel); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .8s; filter: brightness(.9); }
.post:hover .post-img img { transform: scale(1.05); filter: brightness(1); }
.post .mono-label { color: var(--fg-dim); margin-top: 6px; }
.post h3 { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.25; max-width: 26ch; text-wrap: balance; }
.post h3 { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); display: inline; }
.post:hover h3 { background-size: 100% 1px; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.news { padding-block: clamp(72px, 8vw, 120px); }
.news-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.news-form p { margin: 0 0 20px; color: var(--fg-dim); font-size: 15px; max-width: 42ch; }
.news-label { display: block; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 8px; }
.news-row { display: flex; gap: 8px; flex-wrap: wrap; }
.news-row .news-label { flex: 0 0 100%; }
.news-row input::placeholder { color: var(--fg-dim); opacity: 1; }
.news-row input { flex: 1; min-width: 0; height: 54px; background: transparent; border: 1px solid var(--line-d); padding: 0 18px; font-size: 16px; border-radius: 0; }
.news-row input:focus { outline: none; border-color: var(--fg); }
.news-msg { margin: 12px 0 0 !important; min-height: 1.4em; color: var(--fg) !important; }

/* =========================================================
   PIE
   ========================================================= */
.foot { background: var(--ink); color: var(--fg); padding-top: clamp(64px, 7vw, 104px); overflow: hidden; border-top: 1px solid var(--line-d); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 32px; }
.foot-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.foot-col .mono-label { color: var(--fg-dim); margin-bottom: 4px; }
.foot-col a { font-size: 15px; opacity: .82; transition: opacity .3s; width: fit-content; padding-block: 10px; }
.foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-contact p:not(.mono-label) { margin: 0; font-size: 15px; color: rgba(236,233,227,.82); }
.foot-contact .sel { user-select: all; font-family: var(--f-mono); font-size: 13px; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
.pay span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; border: 1px solid var(--line-d); padding: 5px 8px; color: var(--fg-dim); }
.foot-mark { margin-top: clamp(48px, 6vw, 90px); text-align: center; line-height: 1; overflow: hidden; margin-bottom: -.1em; }
.fm {
  display: inline-block; font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(120px, 29vw, 470px); letter-spacing: .04em; margin-right: -.04em;
  background: var(--silver); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: silverShift 9s var(--ease-io) infinite alternate;
}
.fm.is-split { background: none; animation: none; color: var(--fg); }
.fm .fl {
  display: inline-block;
  background: var(--silver); background-size: 500% 100%; background-position: calc(var(--i) * 25%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.foot-legal { display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding-block: 22px 28px; padding-right: calc(var(--gutter) + 64px); border-top: 1px solid var(--line-d); font-size: 13px; color: var(--fg-dim); }
.foot-legal p { margin: 0; }
.foot-legal a { display: inline-block; padding-block: 11px; }
.foot-legal a:hover { color: var(--fg); }
.demo-note { font-family: var(--f-mono); font-size: 11px; }

/* =========================================================
   BOLSA, AVISOS
   ========================================================= */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .5s var(--ease); }
.scrim.is-on { opacity: 1; }
.drawer {
  color-scheme: light;
  position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  background: var(--bone); color: var(--ink-fg);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .75s var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer { visibility: hidden; transition: transform .75s var(--ease), visibility 0s linear .75s; }
.drawer.is-open { transform: none; visibility: visible; transition: transform .75s var(--ease), visibility 0s; }
.drawer .icon-btn:hover { background: rgba(21,21,19,.08); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--line-l); }
.drawer-title { margin: 0; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 28px; line-height: 1; }
.drawer-title span { color: var(--ink-dim); font-weight: 400; }
.ship { padding: 16px 24px; border-bottom: 1px solid var(--line-l); }
.ship p { margin: 0 0 10px; font-size: 13.5px; }
.ship-bar { height: 3px; background: var(--line-l); position: relative; overflow: hidden; }
.ship-bar i { position: absolute; inset: 0; background: var(--ink-fg); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); }
.drawer-list { list-style: none; margin: 0; padding: 8px 24px; overflow-y: auto; flex: 1; }
.drawer-list li { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-l); align-items: start; }
.drawer-list img { width: 72px; height: 88px; object-fit: cover; background: var(--prod); }
.drawer-list .di-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; margin: 0; }
.drawer-list .di-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin: 4px 0 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-l); height: 42px; }
.qty button { width: 40px; height: 40px; font-size: 18px; }
.qty span { min-width: 22px; text-align: center; font-family: var(--f-mono); font-size: 12px; }
.di-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.di-remove { font-size: 12.5px; font-weight: 400; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding: 0 2px; }
.drawer-empty { padding: 28px 24px; margin: 0; font-size: 15px; color: var(--ink-dim); flex: 1; }
.drawer-empty a { color: var(--ink-fg); text-decoration: underline; text-underline-offset: 3px; }
.drawer-foot { padding: 18px 24px 22px; border-top: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 12px; }
.drawer-sub { margin: 0; display: flex; justify-content: space-between; font-size: 15px; }
.drawer-sub b { font-size: 18px; font-variant-numeric: tabular-nums; }
.drawer-note { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }
.drawer .btn-solid { background: var(--ink-fg); color: var(--bone); }
.drawer .btn-solid:hover { color: var(--ink-fg); }

.toast {
  position: fixed; z-index: 96; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%); opacity: 0;
  background: var(--fg); color: var(--ink); padding: 14px 18px; display: flex; gap: 16px; align-items: center;
  font-size: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); transition: transform .6s var(--ease), opacity .4s;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast { visibility: hidden; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast button { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* paneles de información */
.sheet {
  color-scheme: light;
  position: fixed; z-index: 88; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  background: var(--bone); color: var(--ink-fg); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .7s var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet { visibility: hidden; transition: transform .7s var(--ease), visibility 0s linear .7s; }
.sheet.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.sheet .icon-btn:hover { background: rgba(21,21,19,.08); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--line-l); }
.sheet-title { margin: 0; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 28px; line-height: 1; }
.sheet-body { padding: 20px 24px 32px; overflow-y: auto; flex: 1; font-size: 15px; line-height: 1.55; }
.sheet-body > p { margin: 0 0 14px; }
.sheet-body h4 { margin: 26px 0 10px; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 22px; line-height: 1; }
.sheet-body h4:first-child { margin-top: 4px; }
.sheet-sub { color: var(--ink-dim); margin: 6px 0 12px !important; }
.sheet-note { color: var(--ink-dim); font-size: 14px; }
.sheet-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 16px; }
.sheet-cta { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sheet .t { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.sheet .t th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; padding: 6px 0; border-bottom: 1px solid var(--line-l); }
.sheet .t td { padding: 8px 0; border-bottom: 1px solid var(--line-l); }
.facts-list, .steps { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps { counter-reset: s; }
.facts-list li, .steps li { padding-top: 12px; border-top: 1px solid var(--line-l); color: var(--ink-dim); }
.steps li { counter-increment: s; }
.steps li b::before { content: counter(s) ". "; }
.facts-list b, .steps b { display: block; color: var(--ink-fg); font-weight: 600; margin-bottom: 2px; }
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-l); }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 4px 0 0; color: var(--ink-dim); }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini { width: 100%; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-l); text-align: left; }
.mini img { width: 56px; height: 68px; object-fit: cover; background: var(--prod); }
.mini span { display: flex; flex-direction: column; min-width: 0; }
.mini b { font-weight: 600; font-size: 14.5px; }
.mini em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.mini strong { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mini:hover b { text-decoration: underline; text-underline-offset: 3px; }
.search-in { width: 100%; height: 54px; border: 0; border-bottom: 1px solid var(--ink-fg); background: transparent; font-size: 22px; padding: 0 2px; margin-bottom: 18px; border-radius: 0; }
.search-in:focus { outline: none; border-bottom-width: 2px; }
.perso-error { margin: 0; min-height: 1.2em; font-size: 13.5px; color: #e9a796; }
.perso-error:empty { min-height: 0; }
.perso-note { margin: 0; font-size: 13px; color: var(--fg-dim); }
#fieldTag select { height: 50px; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid rgba(236,233,227,.35); font-size: 16px; border-radius: 0; }
#fieldTag select option { color: #111; }
#fieldRing select { height: 50px; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid rgba(236,233,227,.35); font-size: 16px; border-radius: 0; }
#fieldRing select option { color: #111; }
.news-legal { font-size: 13px !important; margin: 12px 0 0 !important; }
.news-legal a { text-decoration: underline; text-underline-offset: 3px; padding-block: 12px; } /* zona táctil de 40 px sin mover el texto (MOV-12) */

/* ficha rápida */
.qv { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 24px; }
.qv[hidden] { display: none; }
.qv-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s var(--ease); }
.qv-panel {
  position: relative; width: min(1040px, 100%); height: min(640px, calc(100svh - 48px)); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); color-scheme: light;
  background: var(--bone); color: var(--ink-fg);
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.qv.is-open .qv-scrim { opacity: 1; }
.qv.is-open .qv-panel { opacity: 1; transform: none; }
.qv-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(233,229,222,.85); color: var(--ink-fg); }
.qv-close:hover { background: var(--bone); }
.qv-media { background: var(--prod); position: relative; min-width: 0; min-height: 0; }
.qv-main { position: absolute; inset: 0; overflow: hidden; }
.qv-main img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumbs { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.qv-thumb { width: 64px; height: 78px; overflow: hidden; outline: 1px solid transparent; outline-offset: 2px; opacity: .7; transition: opacity .3s, outline-color .3s; }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumb.is-on, .qv-thumb:hover { opacity: 1; outline-color: var(--ink-fg); }
.qv-thumb:focus-visible { opacity: 1; outline: 2px solid var(--ink-fg); outline-offset: 3px; }
.qv-info { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
.qv-info > * { flex-shrink: 0; }
.qv:not(.is-open) { pointer-events: none; }
.qv-badge { color: var(--ink-dim); }
.qv-name { margin: 0; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(32px, 3.2vw, 46px); line-height: .92; padding-right: 36px; }
.qv-price { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qv-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); max-width: 44ch; }
.qv-opts { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.qv-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qv-group legend, .qv-legend { padding: 0; margin-bottom: 8px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.qv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-pills label { position: relative; cursor: pointer; }
.qv-pills input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qv-pills span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid var(--line-l); font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.qv-pills input:hover + span { border-color: var(--ink-fg); }
.qv-pills input:checked + span { background: var(--ink-fg); color: var(--bone); border-color: var(--ink-fg); }
.qv-pills input:focus-visible + span { outline: 2px solid var(--ink-fg); outline-offset: 3px; }
.qv select, .qv-input { height: 46px; border: 1px solid var(--line-l); background: var(--bone); color: var(--ink-fg); padding: 0 12px; font-size: 16px; border-radius: 0; max-width: 100%; }
.qv-input, #inRing, #inTag1, #inTag2 { text-transform: uppercase; letter-spacing: .08em; }
.qv-note { margin: -6px 0 0; font-size: 13px; color: var(--ink-dim); }
.qv-note[hidden] { display: none; }
.qv-error { margin: 0; min-height: 1.2em; font-size: 13.5px; color: #8a2f1f; }
.qv .btn-solid { background: var(--ink-fg); color: var(--bone); }
.qv .btn-solid:hover { color: var(--ink-fg); }
.qv-engrave { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.qv-engrave[hidden] { display: none; }
.qv-promise { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-l); display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); }
body.qv-open { overflow: hidden; }
.card-media { cursor: pointer; }
.gcard { cursor: pointer; }

/* fly-to-bag */
.fly { position: fixed; z-index: 99; pointer-events: none; object-fit: cover; background: var(--prod); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .hdr-nav { display: none; }
  .hdr-burger { display: block; }
  .logo { justify-self: start; margin-left: 4px; }
  .mega { display: none; }
  .rev-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .finder-grid, .gifts-grid, .perso-grid, .metal-grid, .news-grid { grid-template-columns: 1fr; }
  /* 2 columnas solo desde 900 (antes desde 1100): a 1024 en horizontal se ven 4 (TAB-04) */
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder-stage { order: -1; aspect-ratio: 1 / 1.02; width: min(100%, calc(46svh / 1.02)); margin-inline: auto; position: sticky; top: calc(var(--head-h) + 8px); z-index: 2; background-color: var(--graphite); }
  /* banda del color de la sección a los lados del lienzo fijo: el formulario no asoma por los lados (MOV-03) */
  .finder-stage::before { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; box-shadow: 0 0 0 100vw var(--graphite); clip-path: inset(-8px -100vw); }
  .gifts-media { position: relative; top: 0; }
  .rev-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --head-h: 60px; --top-h: 30px; }
  .hide-s { display: none !important; }
  .topbar ul { font-size: 9.5px; }
  .hero { height: max(640px, 100svh); }
  .hero-media img { object-position: 50% 100%; }
  .hero-shade { background: linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.1) 24%, rgba(8,9,11,.55) 42%, rgba(8,9,11,.35) 62%, rgba(8,9,11,0) 75%, rgba(8,9,11,.66) 100%); }
  .hero-ctas .btn-line { background: rgba(12,12,11,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hero-copy { top: calc(var(--top-h) + var(--head-h) + 28px); bottom: auto; }
  .hero-lead { max-width: 26ch; font-size: 16px; margin-top: 18px; }
  .hero-ctas { position: static; margin-top: 22px; }
  .hero-ctas .btn { height: 50px; padding: 0 20px; font-size: 11.5px; }
  .hero-foot .mono-label:first-child { display: none; }
  .hero-foot { justify-content: center; padding-right: var(--gutter); } /* «Desliza» centrado (MOV-10) */
  .spot { left: var(--mx); top: var(--my); }
  .spot-card { right: auto; left: calc(100% + 8px); transform: translate(-8px, -50%); }
  .spot:hover .spot-card, .spot:focus-visible .spot-card { transform: translate(0, -50%); }

  .cats .head-row .chips { justify-content: flex-start; }
  .cats-rail { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .cats-rail::-webkit-scrollbar { display: none; }
  .cat, .cat.is-open { flex: 0 0 74%; height: 440px; scroll-snap-align: start; }
  .cat img, .cat.is-open img { transform: none; filter: brightness(.8); }
  .cat-v { display: none; }
  .cat-h { opacity: 1; transform: none; left: 20px; right: 20px; bottom: 20px; }
  .cat-name { font-size: 46px; }

  .opts span { height: 42px; padding: 0 14px; font-size: 13.5px; }
  .loupe { width: 34%; right: 4%; bottom: 4%; }
  .stage-readout { left: 14px; top: 12px; }

  .grid-products { gap: 12px 10px; }
  .card-info { grid-template-columns: 1fr; }
  .card-price { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .card-info h3 { font-size: 14px; }
  .card-add { opacity: 1; left: auto; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; font-size: 0; transform: none; }
  .card-add::before { content: "+"; font-size: 22px; font-weight: 300; letter-spacing: 0; }
  .card-add.is-done::before { content: "✓"; font-size: 16px; }
  .badge { left: 8px; top: 8px; font-size: 9px; padding: 5px 7px; }

  .gres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gcard-body { padding: 8px 8px 10px; }
  .gcard-body span { display: none; }
  .gcard-body strong { font-size: 12.5px; }
  .gift-promise { grid-template-columns: 1fr; left: 10px; right: 10px; bottom: 10px; }
  .gift-promise span { padding: 9px 12px; font-size: 12px; }
  .gift-promise b { display: inline; font-size: 12.5px; }

  .cols-pin { height: auto; min-height: 0; display: block; padding-block: var(--pad); }
  .cols-track { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); flex-wrap: nowrap; scrollbar-width: none; }
  .cols-track::-webkit-scrollbar { display: none; }
  .col-intro { flex: 0 0 82%; padding-right: 0; scroll-snap-align: start; }
  .col-panel { flex: 0 0 82%; height: 500px; scroll-snap-align: start; }
  .cols-progress { display: none; }
  .col-txt h3 { font-size: 64px; }

  .facts { grid-template-columns: 1fr; gap: 18px; }
  .rev-bars { max-width: none; }
  .jr-grid { grid-template-columns: 1fr; gap: 36px; }
  .news-row { flex-direction: column; }
  .news-row input { flex: none; }
  .news-row .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-contact { grid-column: 1 / -1; }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } /* MOV-09 */
  .qv { padding: 0; place-items: end stretch; }
  .qv-panel { display: block; height: auto; max-height: 92svh; overflow-y: auto; transform: translateY(40px); }
  /* la X sigue a la vista al bajar por la hoja y la foto no pasa del 52 % del alto (MOV-06) */
  .qv-close { position: sticky; top: 10px; display: grid; margin: 10px 10px -52px auto; }
  .qv-media { height: min(100vw, 52svh); }
  .qv-info { overflow: visible; }
  .qv-thumbs { left: 10px; top: 10px; bottom: auto; }
  .qv-thumb { width: 44px; height: 54px; }
  .qv-info { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (hover: none) {
  .card-add { opacity: 1; left: auto; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; font-size: 0; transform: none; }
  .card-add::before { content: "+"; font-size: 22px; font-weight: 300; letter-spacing: 0; }
  .card-add.is-done::before { content: "✓"; font-size: 16px; }
  .card:hover .m2, .card:focus-within .m2 { opacity: 0; }
  .card:hover .m1 { transform: none; }
  .chip, .tabs button, .gchips button, .seg button { min-height: 44px; }
}

@media (max-height: 500px) {
  .cols-pin { min-height: 0; }
  .cols-track { height: calc(100svh - 32px); }
  .drawer { overflow-y: auto; }
  .drawer-list { flex: none; overflow: visible; }
  .drawer-note { display: none; }
  /* la cabecera de la bolsa (con la X) se queda arriba al bajar (POR-07) */
  .drawer-head { position: sticky; top: 0; z-index: 2; background: var(--bone); }
  /* menú móvil: enlaces grandes según el alto, para ver más de 2 sin scroll (MOV-11) */
  .mnav { padding-top: calc(var(--head-h) + var(--top-h) + 8px + env(safe-area-inset-top, 0px)); }
  .mnav-big { font-size: clamp(30px, 12svh, 72px); }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero-shade { background: linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.1) 22%, rgba(8,9,11,.7) 50%, rgba(8,9,11,.7) 70%, rgba(8,9,11,.2) 86%, rgba(8,9,11,.66) 100%); }
}

/* =========================================================
   RESPONSIVE · ALTO DE PANTALLA (v10)
   Solo tamaños, espacios y alturas: nada de color, tipografía
   ni composición. Cada bloque cita su hallazgo del diagnóstico
   (detalle en docs/CAMBIOS-RESPONSIVE.md).
   ========================================================= */

/* Hero: el bloque de texto cabe entre la cabecera y el pie de foto.
   El título también depende del alto visible (ESC-01, POR-01, TAB-01, MOV-04) */
@media (min-width: 761px) {
  .hero-title { font-size: clamp(56px, min(10.8vw, 36svh - 148px), 176px); }
}
@media (min-width: 761px) and (max-height: 600px) {
  .hero-copy { bottom: 60px; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-lead { margin-top: 16px; }
  .hero-ctas { margin-top: 20px; }
  .hero-title { font-size: clamp(52px, 36svh - 124px, 176px); }
}
/* Hero en móviles bajos: los dos botones dentro de la primera pantalla (MOV-07) */
@media (max-width: 760px) and (max-height: 600px) {
  .hero-title { font-size: 60px; }
  .hero-copy { top: calc(var(--top-h) + var(--head-h) + 20px); }
  .hero-lead { margin-top: 14px; }
}

/* Categorías: el carril no pasa del alto visible (POR-05) */
@media (min-width: 761px) {
  .cats-rail { max-height: calc(100svh - 40px); }
}

/* Colecciones fijada en pantallas bajas: la intro cabe en la pista
   y la línea de progreso va por debajo de los paneles (POR-04, MOV-05) */
@media (min-width: 761px) and (max-height: 500px) {
  .cols-track { height: calc(100svh - 56px); }
  .cols-progress { bottom: 12px; }
  .col-intro .eyebrow { margin-bottom: 12px; }
  .col-intro .h-l { font-size: min(var(--t-hl), 11svh); }
  .col-intro .lead { margin-top: 12px; }
  .col-hint { margin-top: 16px; }
}

/* Móvil en horizontal: dos columnas y medios que caben en el alto (MOV-01, MOV-08) */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root { --pad: clamp(48px, 16svh, 80px); }
  .cat { max-height: calc(100svh - 40px); } /* ≤760 en horizontal: la tarjeta de 440 px no cabe */
  .finder-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finder-stage { order: 0; width: min(100%, calc((100svh - var(--head-h) - 16px) / 1.02)); }
  .finder-stage::before { content: none; } /* en dos columnas la banda de MOV-03 taparía el formulario */
  .finder-stage .stage-readout { font-size: 10px; }
  .loupe-tag { font-size: 8px; letter-spacing: .06em; bottom: 20%; } /* «Detalle ×4» entero dentro de la lupa pequeña */
  .gifts-grid, .perso-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gifts-media { width: min(100%, calc((100svh - 32px) * .8)); margin-inline: auto; }
  .gift-promise { grid-template-columns: 1fr; }
  .perso-stage { width: min(100%, calc(100svh - 32px)); margin-inline: auto; }
  .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ficha rápida en portátiles bajos: el botón de añadir cabe en el panel (POR-06) */
@media (min-width: 761px) and (max-height: 700px) {
  .qv-info { gap: 10px; padding-block: 22px; }
  .qv-opts { gap: 12px; margin-top: 0; }
  .qv-name { font-size: clamp(30px, 2.8vw, 40px); }
}

/* Tablets táctiles con la cabecera de escritorio: zonas táctiles de 40 px o más (TAB-06) */
@media (hover: none) and (min-width: 1101px) {
  .hdr-link { padding-block: 10px; }
  .mega-col a { padding-block: 7px; }
  .mega-col a.mega-all { padding-block: 10px; }
}

/* =========================================================
   RESPONSIVE · ALTO DE PANTALLA (v10b · segunda ronda, ronda 1)
   Ajustes tras la reverificación de v10. Mismas reglas que el
   bloque anterior: solo tamaños, espacios, alturas y capas.
   Cada regla cita su hallazgo (docs/CAMBIOS-RESPONSIVE.md).
   ========================================================= */

/* Hero en portátiles bajos (601–660 px visibles: 1280x720, 1366x768): espacios
   compactos como a ≤600 px (el texto, a 22 px para que la cola de la Q no lo roce)
   y el título recupera ese alto para no quedar más pequeño que los títulos de
   sección (POR-R1) */
@media (min-width: 761px) and (min-height: 601px) and (max-height: 660px) {
  .hero-copy { bottom: 60px; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-lead { margin-top: 22px; }
  .hero-ctas { margin-top: 20px; }
  .hero-title { font-size: clamp(56px, min(10.8vw, 36svh - 128px), 176px); }
}

/* Boletín: la zona táctil de 41 px de «política de privacidad» sale de un
   pseudoelemento invisible y no del relleno, así el anillo de foco vuelve a
   ajustarse al texto y no pisa el campo del correo (ESC-R1; sustituye al relleno de MOV-12) */
.news-legal a { padding-block: 0; position: relative; }
.news-legal a::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }

/* Lupa pequeña en móviles bajos en vertical: «Detalle ×4» entero dentro del
   círculo, con los mismos valores que ya se usan en horizontal (MOV-R3) */
@media (max-width: 760px) and (max-height: 600px) {
  .loupe-tag { font-size: 8px; letter-spacing: .06em; bottom: 20%; }
}

/* Regalos en móvil en horizontal: la foto se queda fija junto a las preguntas,
   como en escritorio (MOV-R1), y las tres ventajas usan la versión compacta
   de ≤760 para no tapar la foto (MOV-R2) */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .gifts-media { position: sticky; top: 16px; }
  .gift-promise { left: 10px; right: 10px; bottom: 10px; }
  .gift-promise span { padding: 9px 12px; font-size: 12px; }
  .gift-promise b { display: inline; font-size: 12.5px; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cols-pin { height: auto; min-height: 0; display: block; padding-block: var(--pad); }
  .cols-track { height: min(70svh, 640px); overflow-x: auto; }
  .manifesto-text .mw { color: var(--fg); }
}

/* ===== AJUSTES APROBADOS POR EL USUARIO (v11) ===== */
/* Ajustes pequeños sobre el diseño aprobado, aprobados uno a uno por el usuario.
   Todo va en este bloque: las reglas de arriba no se tocan y estas ganan por cascada.
   Detalle, tamaños y pruebas en docs/CAMBIOS-V11.md. */

/* 1 · Encuentra tu cadena en pantallas anchas y bajas (ESC-04 + POR-02).
   Más de 900 px de ancho y hasta 820 px de alto visible (1440x900, 1536x864, 1366x768,
   1280x800, 1280x720, 1280x600, y en horizontal 1024x768 y 1180x820): el lienzo cabe en el
   alto visible y se queda fijo (sticky) mientras se eligen los pasos, así el cuello y la
   cadena siguen a la vista en «Largo» y en «Añadir a la bolsa». Es el mismo patrón que ya
   está aprobado en ≤900. Al llegar, el lienzo sigue arriba, alineado con la columna.
   Tramo fijo más largo: el margin-bottom negativo deja que el lienzo siga fijo después de que
   acabe la columna de los pasos (relleno de abajo de la sección + 30 % del alto del lienzo), así
   que sigue fijo mientras «Largo» y «Añadir» están a la vista. Hacia el final, el borde de
   «Los más vendidos» sube y tapa la parte de abajo del lienzo (la lupa; .finder ya tiene
   overflow: clip, que también corta los clics), y se suelta justo antes de llegar a la cadena.
   No ocupa sitio: la maquetación y la llegada no cambian.
   El tope es 820 y no 860 para dejar fuera 1470x956 (841 px visibles), que no cambia.
   min-height: 401px deja fuera los móviles grandes en horizontal (932x430), como en v10. */
@media (min-width: 901px) and (max-height: 820px) and (min-height: 401px) {
  .finder-stage { position: sticky; top: calc(var(--head-h) + 12px); justify-self: end; width: min(100%, calc((100svh - var(--head-h) - 28px) / 1.08)); margin-bottom: calc(-1 * (var(--pad) + 0.3 * min(108%, 100svh - var(--head-h) - 28px))); }
  /* La etiqueta («Barbada — 5 mm — 50 cm») a 10 px, como ya va en el móvil en horizontal, y sin pasar del 37 % del
     lienzo: el cuello se dibuja desde el 39,5 % del ancho (chain.js), así que nunca la cruza. En los lienzos más
     estrechos (1280x600) pasa a dos líneas equilibradas en vez de montarse sobre el cuello. Aprobado el 06/10. */
  .finder-stage .stage-readout { font-size: 10px; max-width: calc(37% - 20px); text-wrap: balance; }
}

/* 2 · Personaliza: la vista previa del grabado sigue a la vista mientras se edita (POR-03 + TAB-03).
   (a) Escritorio bajo: más de 900 px de ancho y de 401 a 600 px de alto visible (1280x600).
   min-height: 401px deja fuera los móviles grandes en horizontal (932x430), que siguen como en v10. */
@media (min-width: 901px) and (max-height: 600px) and (min-height: 401px) {
  .perso-grid { align-items: start; }
  .perso-stage { position: sticky; top: calc(var(--head-h) + 12px); width: min(100%, calc(100svh - var(--head-h) - 28px)); justify-self: center; }
}
/* (b) Tablets en vertical de 761 a 900 px (768x1024, 820x1180), en una columna.
   min-height: 501px deja fuera los móviles en horizontal, que van en dos columnas (MOV-08).
   Detrás de la vista previa fija va una banda del color de la sección, de lado a lado y desde
   arriba de la pantalla hasta 8 px por debajo de la vista previa, para que el texto no asome a
   los lados ni por encima. Es una caja de verdad (::before de .perso-grid, en la misma celda que
   la vista previa y fija con ella), así que también recibe los toques: no se puede pulsar sin
   querer un control que está debajo y no se ve. Y no depende del recorte de la animación de
   entrada de la vista previa: con un scroll rápido, la parte aún sin revelar enseña la banda.
   Con el teclado, el control enfocado se coloca por debajo de la vista previa (scroll-margin-top:
   cabecera + 8 + vista previa + 24, menos los 90 px del scroll-padding-top de html). */
@media (min-width: 761px) and (max-width: 900px) and (min-height: 501px) {
  .perso-grid { align-items: start; }
  .perso-stage { grid-area: 1 / 1; position: sticky; top: calc(var(--head-h) + 8px); z-index: 2; width: min(100%, 44svh); margin-inline: auto; }
  .perso-grid::before { content: ""; grid-area: 1 / 1; align-self: stretch; position: sticky; top: 0; z-index: 1; margin: calc(-1 * (var(--head-h) + 8px)) calc(-1 * var(--gutter)) -8px; background: var(--ink); }
  .perso-side :focus-visible { scroll-margin-top: calc(var(--head-h) + min(100vw - 2 * var(--gutter), 44svh) - 58px); }
}

/* 3 · Colecciones en pantallas anchas (ESC-05): la intro y la pista empiezan en la misma
   columna centrada que el resto de secciones (x=300 a 1920), y la línea de progreso va de
   ese borde al margen derecho, igual que la pista. El margen derecho sigue siendo el gutter,
   así que el recorrido fijado llega hasta el último panel. A 1440 o menos no cambia nada. */
@media (min-width: 1441px) {
  .cols-track { padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
  .cols-progress { left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); right: var(--gutter); max-width: none; margin: 0; }
}

/* 5 · Letra elegida en Personaliza (ESC-07 + POR-09 + TAB-10 + MOV-14): colores invertidos,
   igual que el elemento elegido de .seg (fondo --fg, texto --ink). La muestra «Aa» conserva su
   aspecto (fondo acero, letra clara) y el color cambia con la misma transición que el fondo. */
.font-pick button { transition: border-color .3s, background .3s, color .3s; }
.font-pick button[aria-pressed="true"] { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.font-pick button[aria-pressed="true"] span { color: var(--fg); }

/* 9 · Sin parpadeo al cargar la portada (07/10). El <head> pone «hero-pre» en <html> antes de pintar nada
   (salvo con movimiento reducido), así que la portada empieza ya en el primer fotograma de su animación:
   foto recortada, líneas del título bajadas y el resto transparente, igual que los fromTo de heroIntro().
   sello.js quita la clase justo antes de crear la animación (en el mismo instante, sin pintar nada entre medias);
   si sello.js no llegara a ejecutarse, el propio <head> la quita al terminar de cargar la página (evento load)
   y, como último seguro, a los 20 s. */
.hero-pre #heroMedia { clip-path: inset(0% 0% 100% 0%); }
.hero-pre .hero-title .ln { overflow: hidden; }
.hero-pre .hero-title .ln > span { transform: translateY(125%); }
.hero-pre [data-hero="eyebrow"], .hero-pre [data-hero="lead"], .hero-pre [data-hero="ctas"], .hero-pre [data-hero="foot"], .hero-pre .spot { opacity: 0; }

/* 7 · «Desliza» eliminado del hero. El pie del hero reparte con space-between, así que el pie de
   foto «En la foto: …» se queda donde estaba. El «Desliza →» de Colecciones (.col-hint) sigue. */
.scroll-cue { display: none !important; }

/* 10 · v12c: sin salto lateral al abrir o cerrar una capa (CAB-03, HER-04, VEN-06a, COL-07; 13/10).
   En Windows la barra de scroll de la página ocupa sitio (15 px). Al abrir la bolsa, el buscador, Mi cuenta, un
   panel, la ficha rápida o el menú del móvil, el scroll se bloquea, la barra desaparece y la ventana útil se
   ensancha: todo saltaba de lado (el contenido 7 px y la bolsa de la cabecera 15 px) y volvía de golpe al cerrar.
   sello.js (syncLayers) mide cuánto se ensancha la ventana al bloquear y lo guarda en --sbw. Mientras hay una capa
   abierta, ese hueco se le devuelve a la página y a las piezas fijas que no deben moverse (cabecera y aviso),
   así que nada cambia de sitio.
   Las capas (bolsa, paneles, ficha rápida y menú del móvil) ocupan la ventana entera mientras están abiertas, igual
   que antes; al cerrarse no saltan esos 15 px a la izquierda: se quedan donde estaban, por debajo de la barra, que
   reaparece encima.
   Sin nada abierto no se aplica ninguna regla visible, y con barras flotantes (móvil, Mac) --sbw vale 0.
   v12c (2.ª pasada): la ficha y el menú del móvil ya no se estrechan esos 15 px mientras están abiertos (la ficha
   quedaba 7,5 px descentrada y, en ventanas estrechas, ficha y menú dejaban una franja a la derecha); ahora se
   tratan como la bolsa y los paneles. */
html.is-locked { padding-right: var(--sbw, 0px); }
html.is-locked .site-head { right: var(--sbw, 0px); }
html.is-locked .toast { left: calc(50% - var(--sbw, 0px) / 2); }
html:not(.is-locked) .drawer:not(.is-open), html:not(.is-locked) .sheet:not(.is-open),
html:not(.is-locked) .qv, html:not(.is-locked) .mnav { right: calc(-1 * var(--sbw, 0px)); }
/* v12c: en WordPress, con la sesión iniciada, la barra de administración (fija, de lado a lado) también se ensanchaba al
   abrir una capa y su parte derecha («Hola, …») saltaba esos 15 px. Se le devuelve el mismo hueco. En la home estática
   esa barra no existe y la regla no hace nada. */
html.is-locked #wpadminbar { box-sizing: border-box; padding-right: var(--sbw, 0px); }
/* v12c: con «reducir movimiento» la regla general pone una transición de 0,01 ms a todo. html, la ficha, el menú del
   móvil y la barra de WordPress no tienen ninguna transición propia, y esa les retrasaba un fotograma el padding-right
   y el right de arriba: la página daba un tirón de 7,5 px durante un fotograma al abrir o cerrar una capa. Sin
   transición, cambian a la vez. */
html, .qv, .mnav, #wpadminbar { transition-property: none; }

/* 11 · v12c: sin el recuadro azul (Android) o gris (iPhone) que el navegador pinta al tocar un control
   (CAB-10, VEN-10; 13/10). No afecta al anillo de foco del teclado (:focus-visible), que sigue igual. */
html { -webkit-tap-highlight-color: transparent; }

/* 12 · v12c: aviso de Personaliza («Escribe al menos una inicial.», «Elige una talla para continuar.»; REG-05 y REG-16; 13/10).
   (a) Sitio reservado: el aviso salía empujando 22 px el botón que se acababa de pulsar, la nota, la vista previa (11 px) y
   Colecciones. Ahora se escribe en el hueco de 32 px que ya hay entre «Grabado incluido…» y el botón (centrado en él), sin ocupar
   alto: nada se mueve al aparecer ni al borrarse, y sin aviso la sección queda exactamente igual que antes.
   (b) Color de error: .perso-buy p (gris apagado) le ganaba por especificidad a .perso-error; ahora sale en su color, #e9a796. */
.perso-buy .perso-error { height: 0; min-height: 0; align-content: center; color: #e9a796; }