/* ==========================================================================
   KORA — Vitrina nocturna.

   Fondo cacao, tinta pergamino, un único acento en oro. El oro es el único
   evento luminoso de la pantalla, así que no compite con nada.

   Los colores del kit de marca 2.1 están todos, invertidos de rol: el kit
   ponía pergamino de fondo y oro encima, lo que da 2,75:1 y se apaga. Sobre
   cacao el mismo oro tiene el triple de luminancia aparente.

   Sistema de tema: --theme-* se pinta sobre --base-*, y las secciones lo
   reescriben al entrar. Cambiar tres variables re-tematiza la página entera.
   ========================================================================== */

/* ---------------------------------------------------------------- fuentes */
@font-face{
  font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/bodoni-moda.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bodoni Moda';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/assets/fonts/bodoni-moda-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root{
  color-scheme:dark;

  --base-cacao:#1B120E;
  --base-night:#120B08;
  --base-emerald:#0C463D;
  --base-parchment:#F6F0E5;
  --base-gold:#C08F3E;
  --base-gold-lit:#E0B564;

  /* Capa de tema. Las secciones la reescriben; todo lo demás la consume. */
  --theme-bg:var(--base-cacao);
  --theme-ink:var(--base-parchment);
  --theme-dim:#A2907E;
  --theme-accent:var(--base-gold-lit);
  --theme-line:rgba(246,240,229,.14);
  --stone:var(--base-emerald);

  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala fluida */
  --s--1:clamp(.78rem,.75rem + .12vw,.85rem);
  --s-0: clamp(.95rem,.90rem + .22vw,1.06rem);
  --s-1: clamp(1.12rem,1.02rem + .45vw,1.38rem);
  --s-2: clamp(1.45rem,1.24rem + .95vw,2.15rem);
  --s-3: clamp(2.05rem,1.62rem + 1.95vw,3.5rem);
  --s-4: clamp(2.9rem,2.05rem + 3.9vw,6rem);
  /* La palabra más larga del titular es "colombianas." y no se puede partir.
     La curva está anclada a 280 px: a ese ancho el display mide 36,8 px y la
     palabra ocupa 208 de los 229 px disponibles. Desde 900 hay ancho de sobra
     y toma el relevo el override de abajo. */
  --s-5: clamp(2.2rem,-8px + 16vw,5rem);

  --sp-xs:clamp(.5rem,.46rem + .2vw,.62rem);
  --sp-s: clamp(1rem,.91rem + .43vw,1.25rem);
  --sp-m: clamp(1.6rem,1.4rem + .9vw,2.2rem);
  --sp-l: clamp(2.2rem,1.9rem + 1.4vw,3.2rem);
  /* Recalibrado. La curva anterior daba 187 px de respiro por lado a 1440, así
     que entre el final de una sección y el principio de la siguiente había 300
     y hasta 390 px: casi media pantalla en blanco. Aire de sobra no es aire
     premium, es una sección que no cabe en el monitor. */
  --sp-xl:clamp(3.2rem,2.7rem + 2.4vw,5.2rem);
  --sp-2xl:clamp(4.4rem,3.6rem + 3.6vw,7.6rem);

  --gut:clamp(18px,4.4vw,72px);
  --shell:min(1320px, 100% - 2 * var(--gut));

  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.25,1,.5,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* Los temas por acto. Un solo bloque cambia toda la página. */
[data-theme="cacao"]{
  --theme-bg:var(--base-cacao); --theme-ink:var(--base-parchment);
  --theme-dim:#A2907E; --theme-accent:var(--base-gold-lit);
  --theme-line:rgba(246,240,229,.14);
}
[data-theme="emerald"]{
  --theme-bg:var(--base-emerald); --theme-ink:#EDF3F0;
  --theme-dim:#8FB3AA; --theme-accent:var(--base-gold-lit);
  --theme-line:rgba(237,243,240,.18);
}
[data-theme="night"]{
  --theme-bg:var(--base-night); --theme-ink:var(--base-parchment);
  --theme-dim:#93816F; --theme-accent:var(--base-gold-lit);
  --theme-line:rgba(246,240,229,.12);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box;}
/* El atributo hidden solo vale display:none de hoja de usuario, así que
   cualquier regla propia con display lo gana. Pasó con el aviso de bolsa
   vacía, que seguía visible con tres piezas dentro porque era un grid.
   La excepción es el menú, que se anima con clip-path y necesita seguir
   ocupando su sitio mientras cierra: se apaga con visibility. */
[hidden]:not(.menu):not(.find):not(.bag){display:none !important;}
/* clip y no hidden: hidden convierte al elemento en contenedor de scroll y
   rompe position:sticky de los escenarios. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  margin:0;
  background:var(--theme-bg);
  color:var(--theme-ink);
  font-family:var(--text);font-size:var(--s-0);line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Nada de overflow aquí. Un overflow-x:hidden en body hace que overflow-y
     compute a auto, body se vuelve contenedor de scroll, y todos los
     position:sticky pasan a resolverse contra body en vez de contra el
     viewport: los escenarios dejan de anclarse. El recorte horizontal lo
     hace html con overflow-x:clip, que no crea contenedor de scroll. */
  transition:background-color .9s var(--ease-soft), color .9s var(--ease-soft);
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3{margin:0;font-weight:400;line-height:1;letter-spacing:-.02em;}
p{margin:0;text-wrap:pretty;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}
a,button,summary,label,input{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(224,181,100,.2);
}
::selection{background:var(--base-gold-lit);color:var(--base-night);}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--base-gold-lit);outline-offset:4px;
}

.u-hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.u-defs{position:absolute;width:0;height:0;overflow:hidden;}
main[id],section[id]{scroll-margin-top:5rem;}

.skip{
  position:fixed;left:14px;top:14px;z-index:120;
  background:var(--base-gold-lit);color:var(--base-night);
  padding:12px 18px;font-size:var(--s--1);font-weight:600;
  transform:translateY(-180%);transition:transform .25s var(--ease-soft);
}
.skip:focus{transform:none;}

/* Grano. Capa fija y sin eventos: si viajara con el scroll obligaría a
   repintar en cada frame. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- tipos comunes */
.over{
  margin:0;
  font-size:var(--s--1);letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--theme-accent);
}
.h2{font-family:var(--display);font-size:var(--s-3);line-height:1.02;}
/* .over se usa también sobre un h2 real: hay que anular la herencia. */
/* El epígrafe también se usa sobre un h2 real: hay que anular la herencia de
   titular. Sin margin aquí: h2.over pesa más que .craft__over y le borraba el
   espacio inferior, encimando el epígrafe con el número del paso. */
h2.over,h3.over{font-family:var(--text);line-height:1.4;letter-spacing:.26em;}

/* Reveal por máscara: el bloque no aparece, se descubre. */
.js .ln{display:block;overflow:hidden;padding-bottom:.06em;}
.js .ln > *{display:block;}

/* ------------------------------------------------------------------ botón */
.cta{
  display:inline-flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:6px 0 0;min-height:44px;justify-content:center;
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.cta__l{display:block;width:100%;height:1px;background:var(--theme-line);position:relative;}
.cta__l::after{
  content:"";position:absolute;inset:0;background:var(--theme-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-expo);
}
.cta:hover .cta__l::after,.cta:focus-visible .cta__l::after{transform:scaleX(1);}
.cta__t{transition:color .4s;}
.cta:hover .cta__t{color:var(--theme-accent);}
.cta--line{color:var(--theme-dim);}

/* ------------------------------------------------------------- preloader */
.boot{
  position:fixed;inset:0;z-index:110;
  background:var(--base-night);color:var(--base-gold-lit);
  display:grid;place-content:center;justify-items:center;gap:22px;
}
.boot__mark{width:clamp(58px,11vw,96px);height:auto;}
.boot__word{
  width:auto;height:clamp(88px,20vw,132px);object-fit:contain;
  opacity:0;
}
.no-js .boot{display:none;}

/* ------------------------------------------------------------------ hilo */
.thread{
  position:fixed;left:0;top:0;bottom:0;width:clamp(34px,5vw,72px);
  z-index:5;pointer-events:none;color:var(--theme-accent);opacity:.5;
}
.thread svg{width:100%;height:100%;}
@media (max-width:900px){ .thread{display:none;} }

/* ------------------------------------------------------------------ barra
   Dos alturas, un solo componente. Arriba del todo la barra es alta y la
   marca se ve entera, con el descriptor legible. En cuanto se baja se
   compacta y el logo se reduce, pero no desaparece nunca.

   El logo va sobre su papel, como la tarjeta que viene dentro de la caja.
   Se probó a fundir el papel contra una franja de pergamino: aun con el
   color medio calibrado, la textura se lee más clara y el canto sigue
   apareciendo. Sobre cacao el contraste es máximo y el borde es deliberado.
   Ver el comentario largo en tools/build-catalog-images.py. */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:clamp(12px,1.6vw,18px) var(--gut);
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  transition:transform .55s var(--ease-expo),
             background-color .45s var(--ease-soft),
             padding .5s var(--ease-soft);
}
.bar[data-compact]{
  padding-block:clamp(8px,1vw,12px);
  background:color-mix(in srgb, var(--theme-bg) 84%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.bar[data-hidden]{transform:translateY(-110%);}
@media (prefers-reduced-transparency:reduce){
  .bar[data-compact]{background:var(--theme-bg);backdrop-filter:none;}
}

/* Móvil: menú, marca y bolsa. La marca manda en el centro. La navegación
   está en el DOM pero oculta hasta 1024, donde entra como segunda fila. */
.bar__in{
  display:grid;align-items:center;gap:var(--sp-xs);
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"menu mark acts";
}
.bar__btn--menu{grid-area:menu;}
/* Fuera del grid móvil no hay hueco para la utilidad ni para la navegación:
   sin esto caen a una fila implícita y se pintan encima del hero. */
.bar__util,.bar__nav{display:none;grid-area:util;}
.bar__nav{grid-area:nav;}
.bar__mark{grid-area:mark;}
.bar__acts{grid-area:acts;}
.bar__mark{
  justify-self:center;display:block;line-height:0;
  /* Sin esto, a 280 px las dos columnas laterales del grid se reparten el
     ancho y dejan la marca en 14 px: el logo es lo último que puede
     encogerse en esta barra. */
  min-width:max-content;
  transition:filter .4s var(--ease-soft);
}
/* contain y no cover: cover recortaría la rama de filigrana del pie.
   La variante -dark viene recortada de su papel, así que no lleva ni radio
   ni sombra: es el dibujo sobre el cacao, no una placa pegada encima. */
.bar__mark img{
  display:block;width:auto;object-fit:contain;
  height:clamp(62px,15vw,82px);
  transition:height .5s var(--ease-soft),filter .4s var(--ease-soft);
}
.bar[data-compact] .bar__mark img{height:clamp(42px,10vw,48px);}
@media (hover:hover){
  .bar__mark:hover img{filter:brightness(1.08);}
}

.bar__acts{
  justify-self:end;display:flex;align-items:center;gap:clamp(6px,1.4vw,20px);
  min-width:0;
}
.bar__btn--menu{min-width:0;}
/* En vertical el idioma vive dentro del menú: tres acciones a la derecha de
   una pantalla de 280 px aplastan la marca. Va con el padre en el selector
   porque .bar__btn declara su propio display más abajo y, a igual peso,
   ganaba por orden y el enlace se pintaba encima de la marca. */
.bar__acts .bar__lang{display:none;}
@media (min-width:1024px){ .bar__acts .bar__lang{display:inline-flex;} }
.bar__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;min-width:44px;cursor:pointer;
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--theme-ink);
  transition:color .35s var(--ease-soft);
}
@media (hover:hover){ .bar__btn:hover{color:var(--theme-accent);} }
.bar__btn--menu{justify-self:start;}
.bar__bars{display:grid;gap:5px;}
.bar__bars i{
  display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease-expo);
}
.bar__btn[aria-expanded="true"] .bar__bars i:first-child{transform:translateY(3.25px) rotate(45deg);}
.bar__btn[aria-expanded="true"] .bar__bars i:last-child{transform:translateY(-3.25px) rotate(-45deg);}
.bar__label{display:none;}
@media (min-width:600px){ .bar__label{display:block;} }
.bar__ico{display:block;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* El contador solo ocupa sitio cuando hay algo dentro. */
.bar__n{
  display:inline-block;min-width:1.5em;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.bar__n:not([data-on]){display:none;}
.bar__n[data-on]{color:var(--theme-accent);}

/* La navegación aparece a partir de 1024: por debajo vive en el menú. */
.bar__nav{display:none;}
@media (min-width:1024px){
  /* Dos filas: la marca reina arriba y la navegación va debajo, a lo ancho. */
  .bar__in{
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:
      "util mark acts"
      "nav  nav  nav";
  }
  .bar__btn--menu{display:none;}
  .bar__util,.bar__nav{display:flex;}
  /* A esta altura el descriptor "joyería colombiana" se lee, que es la razón
     de que el masthead exista. */
  .bar__mark img{height:132px;}
  .bar[data-compact] .bar__mark img{height:52px;}
  .bar__util{
    justify-self:start;font-size:var(--s--1);letter-spacing:.16em;
    text-transform:uppercase;color:var(--theme-dim);
  }
  .bar__nav{
    display:flex;justify-content:center;flex-wrap:nowrap;
    gap:clamp(18px,2.2vw,34px);
    margin-top:clamp(10px,1.4vw,18px);
    font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  }
  .bar__nav > a,.bar__has > a{
    display:inline-flex;align-items:center;min-height:34px;white-space:nowrap;
    color:var(--theme-dim);transition:color .35s var(--ease-soft);
  }
  .bar__nav > a:hover,.bar__has > a:hover,
  .bar__nav > a[aria-current],.bar__has > a[aria-current]{color:var(--theme-ink);}
  .bar__nav > a[aria-current],.bar__has > a[aria-current]{
    box-shadow:inset 0 -1px 0 var(--theme-accent);
  }

  /* Tienda y su desplegable. Las categorías viven aquí dentro, no sueltas en
     la fila: repetidas en la barra sumaban cinco enlaces al mismo sitio. */
  .bar__has{position:relative;display:flex;align-items:center;gap:6px;}
  .bar__caret{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:34px;cursor:pointer;color:var(--theme-dim);
    transition:color .3s var(--ease-soft),transform .4s var(--ease-expo);
  }
  .bar__caret svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;}
  .bar__has:hover .bar__caret,.bar__caret[aria-expanded="true"]{color:var(--theme-ink);}
  .bar__caret[aria-expanded="true"]{transform:rotate(180deg);}

  .drop{
    position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;z-index:2;
    min-width:30rem;padding:var(--sp-s) var(--sp-m) var(--sp-m);
    background:var(--base-night);
    border:1px solid rgba(246,240,229,.14);
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .32s var(--ease-soft),transform .38s var(--ease-expo);
  }
  .drop[data-open]{opacity:1;transform:none;pointer-events:auto;}
  .drop__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-m);}
  .drop__h{
    font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;
    color:var(--theme-accent);margin-bottom:8px;white-space:nowrap;
  }
  .drop ul{display:grid;gap:0;}
  .drop a{
    display:flex;align-items:center;min-height:38px;box-shadow:none;
    font-family:var(--display);font-size:var(--s-1);letter-spacing:0;
    text-transform:none;font-weight:400;
    color:var(--base-parchment);white-space:nowrap;
  }
  .drop a:hover{color:var(--base-gold-lit);}

  /* El cambio de idioma se separa de las acciones con un filete: es de otra
     naturaleza que buscar y bolsa. */
  .bar__lang{
    padding-right:clamp(8px,1vw,14px);
    box-shadow:inset -1px 0 0 var(--theme-line);
  }
}
/* Fuera de escritorio el idioma sigue visible, pero sin el filete. */
.bar__lang{
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--theme-dim);
}
.bar__lang:hover{color:var(--theme-accent);}

@media (min-width:1024px){
  /* Compacta: una sola fila, con la marca a la izquierda y la navegación en
     la columna del medio. Se probó con la navegación en absoluto centrada al
     viewport y a 1440 se metía por debajo de "Buscar": aquí el reparto lo
     hace el grid, así que las tres zonas no pueden pisarse. */
  .bar[data-compact] .bar__in{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"mark nav acts";
    gap:var(--sp-m);
  }
  .bar[data-compact] .bar__mark{justify-self:start;}
  .bar[data-compact] .bar__util{display:none;}
  .bar[data-compact] .bar__nav{margin-top:0;}
}
/* Entre 1024 y 1260 la fila compacta va justa: se acorta el interletrado
   antes que dejar que la navegación salte a dos líneas. */
@media (min-width:1024px) and (max-width:1260px){
  .bar__nav{gap:14px;letter-spacing:.1em;}
}

/* ------------------------------------------------------------------ menú
   Se abre como un círculo desde el propio botón, no como un panel. */
.menu{
  position:fixed;inset:0;z-index:70;
  background:var(--base-night);
  clip-path:circle(0% at 44px 44px);
  transition:clip-path .9s var(--ease-expo);
}
.menu[hidden]{display:block;pointer-events:none;visibility:hidden;}
.menu[data-open]{clip-path:circle(150% at 44px 44px);visibility:visible;pointer-events:auto;}
@media (min-width:1024px){
  .menu{clip-path:circle(0% at calc(100% - 44px) 44px);}
  .menu[data-open]{clip-path:circle(150% at calc(100% - 44px) 44px);}
}
.menu__in{
  height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:var(--sp-l);padding:clamp(80px,14vh,140px) var(--gut) var(--sp-l);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu__list li{border-top:1px solid rgba(246,240,229,.12);}
.menu__list li:last-child{border-bottom:1px solid rgba(246,240,229,.12);}
.menu__list a{
  display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);
  padding:clamp(10px,1.8vh,18px) 0;
}
.menu__list b{
  font-family:var(--text);font-size:var(--s--1);font-weight:600;
  letter-spacing:.2em;color:var(--base-gold-lit);
}
.menu__list span{
  font-family:var(--display);font-size:var(--s-2);line-height:1.1;
  color:var(--base-parchment);transition:transform .5s var(--ease-expo),font-style .2s;
}
@media (hover:hover){
  .menu__list a:hover span{font-style:italic;transform:translateX(clamp(8px,1.6vw,22px));}
}
.menu__lang{
  display:inline-flex;align-items:center;min-height:44px;
  align-self:start;
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--base-gold-lit);border-bottom:1px solid currentColor;
}
@media (min-width:1024px){ .menu__lang{display:none;} }
.menu__foot{
  display:flex;flex-wrap:wrap;gap:var(--sp-s) var(--sp-m);
  justify-content:space-between;align-items:end;
  font-size:var(--s--1);color:var(--menu-dim,#93816F);
}
/* Quedaba en 23 px de alto, por debajo del mínimo táctil. */
.menu__foot a{
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.menu__x{
  position:absolute;top:clamp(14px,2vw,24px);right:var(--gut);
  min-height:44px;min-width:44px;cursor:pointer;color:var(--base-parchment);
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}

/* =============================================================== 01 HERO
   Escenario fijo por CSS sticky. Cero pines de GSAP: ScrollTrigger solo lee
   el avance. Es lo que hacen los ganadores de 2026 y no rompe en móvil. */
.hero{position:relative;}
/* 230vh eran 1,3 pantallas de scroll sin contenido nuevo: la foto acababa de
   acercarse mucho antes de que el track terminara. */
.hero__track{height:170vh;}
.hero__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
  /* El hueco de arriba es la altura medida de la barra más un respiro. La
     estimación anterior con clamp se quedaba corta en portátiles bajos y la
     fila de navegación se pintaba encima del epígrafe. --bar-h la publica
     shell.js; el clamp queda como reserva si el módulo no carga. */
  padding:calc(var(--bar-h, clamp(88px,14vh,150px)) + clamp(14px,2vh,30px))
          var(--gut) clamp(26px,5vh,54px);
}
.hero__media{
  position:absolute;inset:0;margin:0;z-index:0;
  will-change:transform;
}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(18,11,8,.86) 0%, rgba(18,11,8,.42) 34%, rgba(18,11,8,.55) 62%, rgba(18,11,8,.94) 100%),
    radial-gradient(120% 80% at 70% 40%, rgba(18,11,8,0) 0%, rgba(18,11,8,.7) 100%);
}
/* Nada de max-width en ch aquí: ch se mide con la fuente de texto, no con la
   de display, y estrangulaba el titular a la mitad del ancho disponible. */
.hero__copy{position:relative;z-index:2;align-self:end;min-width:0;}
.hero__h{
  font-family:var(--display);font-size:var(--s-5);line-height:.86;
  margin-top:clamp(14px,2.4vh,26px);
}
.hero__h em{font-style:italic;color:var(--theme-accent);}
.hero__base{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:var(--sp-s) var(--sp-m);
  padding-top:var(--sp-s);border-top:1px solid var(--theme-line);
}
.hero__lede{max-width:44ch;color:var(--theme-dim);font-size:var(--s-0);}
@media (min-width:900px){
  .hero__stage{padding-inline:clamp(90px,8vw,140px) var(--gut);}
  .hero__copy{max-width:none;}
  .hero__h{font-size:var(--s-5);max-width:none;}
  /* Cada línea es un bloque enmascarado: si el texto salta dentro de una,
     la máscara la corta a la mitad. Por eso no se permite el salto. */
  .hero__h .ln > *{white-space:nowrap;}
}
@media (min-width:900px){
  :root{ --s-5:clamp(4rem,2rem + 7vw,9rem); }
}

/* ======================================================== 02 MANIFIESTO */
.mani{
  padding:var(--sp-2xl) var(--gut);
  max-width:min(58ch, 100% - 2 * var(--gut));
  margin-inline:auto;
  display:grid;gap:var(--sp-m);
}
.mani__p{font-family:var(--display);font-size:var(--s-2);line-height:1.28;}
.mani__p--2{color:var(--theme-dim);font-size:var(--s-1);max-width:36ch;}

/* ============================================================ 03 PIEZAS
   La tarjeta se disuelve: la lista es tipografía a escala grande y la
   imagen vive en un panel que hace cross-fade. */
.looks{padding:var(--sp-xl) 0 var(--sp-2xl);}
.looks__head{width:var(--shell);margin-inline:auto;margin-bottom:var(--sp-l);}
.looks__grid{width:var(--shell);margin-inline:auto;}
@media (min-width:900px){
  .looks__grid{display:grid;grid-template-columns:1fr clamp(280px,30vw,420px);gap:var(--sp-l);align-items:start;}
}

.looks__list li{border-top:1px solid var(--theme-line);}
.looks__list li:last-child{border-bottom:1px solid var(--theme-line);}
.looks__list a{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,3vw,32px);row-gap:6px;
  align-items:baseline;padding:clamp(18px,3vw,30px) 0;
}
.looks__n{
  font-size:var(--s--1);font-weight:600;letter-spacing:.2em;
  color:var(--theme-accent);opacity:.7;
}
.looks__t{
  margin:0;font-weight:400;
  font-family:var(--display);font-size:var(--s-4);line-height:.94;
  color:var(--theme-ink);opacity:.55;
  transition:opacity .45s var(--ease-soft),transform .55s var(--ease-expo);
}
.looks__d{
  grid-column:2;font-size:var(--s--1);color:var(--theme-dim);max-width:42ch;
  transition:color .45s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .looks__list a:hover .looks__t,
  .looks__list a:focus-visible .looks__t{
    opacity:1;font-style:italic;transform:translateX(clamp(6px,1.2vw,18px));
  }
  .looks__list a:hover .looks__d,
  .looks__list a:focus-visible .looks__d{color:var(--theme-ink);}
}
/* Sin hover el detalle va siempre visible: en táctil no hay estado previo. */
@media (hover:none),(pointer:coarse){
  .looks__t{opacity:1;}
}

/* Miniatura inline: es el fallback táctil del panel de escritorio. */
/* A ancho completo estas cuatro fotos sumaban 1.650 px y la sección medía casi
   tres pantallas. Se acortan estrechándolas, no recortándolas: forzar 3:2 sobre
   un original 4:5 se comía la joya y dejaba el fondo. */
.looks__inline{
  grid-column:2;width:min(100%,62%);margin-top:14px;
  aspect-ratio:4/5;object-fit:cover;
}
@media (min-width:900px){ .looks__inline{display:none;} }

.looks__panel{position:relative;aspect-ratio:4/5;display:none;}
@media (min-width:900px){
  .looks__panel{display:block;position:sticky;top:calc(50vh - 30vh);}
}
.looks__panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease-soft),transform 1.4s var(--ease-expo);
  transform:scale(1.06);
}
.looks__panel img[data-on]{opacity:1;transform:scale(1);}

/* ============================================================ 04 OFICIO */
.craft{position:relative;}
/* 420vh repartidos entre cuatro pasos daban 105vh por paso: más de una
   pantalla completa de scroll con el mismo texto delante, que es exactamente
   la sensación de estar atascado. A 288 cada paso dura 72vh. */
.craft__track{height:288vh;}
.craft__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;
  padding:calc(var(--bar-h, clamp(88px,13vh,140px)) + clamp(10px,1.6vh,24px))
          var(--gut) clamp(40px,8vh,80px);
  padding-left:max(var(--gut), clamp(18px,7vw,120px));
}
/* La roseta: el mismo hilo de la marca, de frente y a escala. Se dibuja con
   el avance del scroll. Es el gesto que la página repite en todas partes. */
/* La roseta es el fondo del acto, no su protagonista. A 128vmin con el trazo
   original salía un garabato de 12 px de grosor que competía con el titular;
   ahora es un dibujo fino que se lee como filigrana, que es lo que es. El
   grosor real se fija en el SVG con vector-effect, así no engorda al escalar. */
.craft__ros{
  position:absolute;top:50%;left:52%;translate:-50% -50%;
  width:min(96vmin,860px);aspect-ratio:1;
  color:var(--theme-accent);opacity:.26;pointer-events:none;
}
.craft__ros path{stroke-width:1.1px;vector-effect:non-scaling-stroke;}
.craft__ros svg{width:100%;height:100%;}
.craft__over{position:relative;z-index:2;margin-bottom:var(--sp-m);}

.craft__steps{position:relative;z-index:2;display:grid;}
/* Los cuatro pasos están apilados en la misma celda y se relevan por opacidad.
   El cruce es asimétrico a propósito: el que sale se va en 0,18 s y el que
   entra tarda 0,5 s con un pequeño retardo, así que nunca hay dos textos
   legibles a la vez. Con un cruce simétrico de 0,6 s y scroll rápido en móvil
   se leían "Soldar" y "Engastar" encima uno del otro.
   visibility remata: el paso que sale deja de existir para el lector de
   pantalla y para el cursor, no solo para el ojo. */
.craft__steps li{
  grid-area:1/1;max-width:34ch;min-width:0;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .18s linear, visibility 0s linear .18s,
             transform .18s var(--ease-soft);
  pointer-events:none;
}
.craft__steps li[data-on]{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  /* El retardo de entrada (0,18 s) es exactamente lo que tarda el saliente en
     irse. Con 0,1 s quedaba una ventana de unos 50 ms en la que los dos textos
     se solapaban: invisible casi siempre, pero salía en 1 de cada 90 fotogramas
     medidos. Así el relevo es limpio siempre, no casi siempre. */
  transition:opacity .5s var(--ease-soft) .18s, visibility 0s linear,
             transform .6s var(--ease-expo) .18s;
}
.craft__steps b{
  display:block;font-size:var(--s--1);font-weight:600;letter-spacing:.24em;
  color:var(--theme-accent);margin-bottom:14px;
}
.craft__steps h3{font-family:var(--display);font-size:var(--s-4);line-height:.94;}
.craft__steps p{margin-top:var(--sp-s);color:var(--theme-dim);font-size:var(--s-0);}

.craft__shots{position:absolute;inset:0;z-index:1;pointer-events:none;}
/* Antes salía por el borde derecho con un right negativo y se leía como un
   recorte a medias. Ahora queda dentro del escenario, con su margen. */
.craft__shots img{
  position:absolute;right:var(--gut);bottom:clamp(6vh,10vh,14vh);
  width:clamp(190px,26vw,380px);aspect-ratio:1;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .2s linear, transform .2s var(--ease-soft);
}
.craft__shots img[data-on]{opacity:.9;transform:none;
  transition:opacity .55s var(--ease-soft) .1s, transform 1.1s var(--ease-expo) .1s;}
@media (max-width:760px){
  .craft__shots img{
    right:auto;left:0;bottom:auto;top:var(--shot-top);
    width:var(--shot-w);
  }
  /* La foto es absoluta, así que no empuja nada: hay que reservarle el hueco
     a mano o el epígrafe se le monta encima. En pantallas de 280 px llegaban
     a tocarse. */
  .craft__stage{
    --shot-top:clamp(72px,11vh,120px);
    --shot-w:min(54vw,250px);
    padding-top:calc(var(--shot-top) + var(--shot-w) + var(--sp-m));
  }
  .craft__steps{align-self:end;}
}

/* Portátiles de 700 px de alto o menos: el escenario deja de repartir tanto
   aire y el titular baja un escalón, para que el paso entero quepa sin que el
   párrafo se meta debajo de la barra de avance. */
@media (min-width:761px) and (max-height:760px){
  .craft__steps h3{font-size:var(--s-3);}
  .craft__steps p{margin-top:12px;}
  .craft__ros{width:min(74vmin,620px);}
  .craft__shots img{width:clamp(170px,20vw,280px);bottom:clamp(4vh,7vh,10vh);}
}

.craft__prog{
  position:absolute;left:max(var(--gut), clamp(18px,7vw,120px));
  bottom:clamp(26px,5vh,54px);z-index:2;
  display:flex;align-items:center;gap:14px;
  font-size:var(--s--1);letter-spacing:.2em;color:var(--theme-dim);
}
.craft__prog i{display:block;width:clamp(60px,10vw,140px);height:1px;background:var(--theme-line);position:relative;}
.craft__prog i::after{
  content:"";position:absolute;inset:0;background:var(--theme-accent);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s var(--ease-soft);
}

/* ============================================================ 05 ESCALA
   Cortina por margen negativo: esta sección se monta sobre el acto anterior
   en vez de venir después. Sin JS. */
.scale{
  position:relative;z-index:3;
  margin-top:-14vh;
  background:var(--base-cacao);
  padding:var(--sp-xl) 0 var(--sp-2xl);
  border-radius:clamp(28px,6vw,90px) clamp(28px,6vw,90px) 0 0;
}
.scale__head{width:var(--shell);margin-inline:auto;display:grid;gap:var(--sp-s);}
.scale__head .h2{max-width:20ch;}
.scale__note{color:var(--theme-dim);max-width:46ch;font-size:var(--s--1);}
.scale__strip{
  display:flex;gap:clamp(10px,1.6vw,22px);
  margin-top:var(--sp-l);padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* Sin esto el snap se come el padding inicial y la primera ficha arranca
     pegada al borde, con el pie de foto cortado. */
  scroll-padding-inline:var(--gut);
  scrollbar-width:none;
}
.scale__strip::-webkit-scrollbar{display:none;}
.scale__strip figure{margin:0;flex:0 0 clamp(200px,44vw,330px);scroll-snap-align:start;}
.scale__strip img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.scale__strip figcaption{
  margin-top:12px;font-size:var(--s--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--theme-dim);
}
@media (min-width:1000px){
  .scale__strip{
    display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;
    width:var(--shell);margin-inline:auto;padding-inline:0;
  }
  /* Escalonado vertical: la fila deja de leerse como una retícula. */
  .scale__strip figure:nth-child(2){margin-top:clamp(20px,4vw,56px);}
  .scale__strip figure:nth-child(3){margin-top:clamp(-16px,-2vw,0px);}
  .scale__strip figure:nth-child(4){margin-top:clamp(34px,6vw,84px);}
}

/* ========================================================== 06 CATÁLOGO */
.rail{padding:var(--sp-xl) 0 var(--sp-2xl);overflow:hidden;}
.rail__head{
  width:var(--shell);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:end;gap:var(--sp-s) var(--sp-m);
}
.rail__head .h2{flex:1 1 16ch;max-width:20ch;}
.rail__head p{flex:0 1 30ch;color:var(--theme-dim);font-size:var(--s--1);}
.rail__hint{
  flex:0 0 auto;margin-left:auto;
  font-size:var(--s--1);letter-spacing:.24em;text-transform:uppercase;
  color:var(--theme-accent);
}
/* Se oculta por ancho y no solo por (hover:none): varios navegadores móviles
   reportan hover:hover y el aviso de arrastre se colaba en el teléfono. */
.rail__hint{display:none;}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .rail__hint{display:block;}
}

.rail__track{
  display:flex;gap:clamp(12px,1.6vw,26px);
  margin-top:var(--sp-l);
  padding-left:max(var(--gut), calc((100% - min(1320px, 100% - 2 * var(--gut))) / 2));
  scroll-padding-left:max(var(--gut), calc((100% - min(1320px, 100% - 2 * var(--gut))) / 2));
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  cursor:grab;
}
.rail__track::-webkit-scrollbar{display:none;}
.rail__track::after{content:"";flex:0 0 var(--gut);}
.rail__track[data-drag]{cursor:grabbing;}
.rail__track li{flex:0 0 clamp(180px,42vw,290px);scroll-snap-align:start;}
.rail__track img{
  width:100%;aspect-ratio:1;object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  transition:filter .7s var(--ease-soft),transform 1s var(--ease-expo);
}
@media (hover:hover){
  .rail__track a:hover img{filter:saturate(1.05) contrast(1.1);transform:scale(1.03);}
}
.rail__track h3{
  margin-top:16px;font-family:var(--display);font-size:var(--s-1);
}
.rail__track p{margin-top:5px;font-size:var(--s--1);color:var(--theme-dim);}
.rail__foot{width:var(--shell);margin:var(--sp-l) auto 0;}

/* =========================================================== 07 MERCADO */
.mkt{position:relative;isolation:isolate;}
.mkt__media{position:absolute;inset:0;margin:0;z-index:-1;}
.mkt__media img{width:100%;height:100%;object-fit:cover;}
.mkt__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(18,11,8,.97) 0%, rgba(18,11,8,.9) 38%, rgba(18,11,8,.44) 100%),
    linear-gradient(0deg, rgba(18,11,8,.85) 0%, rgba(18,11,8,0) 30%, rgba(18,11,8,0) 72%, rgba(18,11,8,.8) 100%);
}
/* En vertical el velo lateral no sirve: el texto ocupa todo el ancho y la
   foto se le mete por debajo. En móvil el velo se vuelve vertical. */
@media (max-width:820px){
  .mkt__media::after{
    background:linear-gradient(180deg,
      rgba(18,11,8,.96) 0%, rgba(18,11,8,.9) 58%, rgba(18,11,8,.66) 100%);
  }
}
.mkt__copy{
  width:var(--shell);margin-inline:auto;
  padding:var(--sp-2xl) 0;
}
.mkt__copy > *{max-width:min(50ch, 100%);}
.mkt__lede{margin-top:var(--sp-s);color:var(--theme-dim);max-width:44ch;}
.mkt__data{margin-top:var(--sp-l);display:grid;gap:var(--sp-s);}
.mkt__data > div{display:grid;gap:5px;padding-left:var(--sp-s);border-left:2px solid var(--theme-accent);}
.mkt__data dt{font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.mkt__data dd{font-size:var(--s--1);color:var(--theme-dim);}
.mkt__copy .cta{margin-top:var(--sp-l);}

/* ========================================================= 08 CONFIANZA */
.trust{width:var(--shell);margin-inline:auto;padding:var(--sp-xl) 0;}
/* La tarjeta de la pieza, hecha página: filete fino, sello en la esquina. */
.trust__card{
  position:relative;
  border:1px solid var(--theme-line);
  background:color-mix(in srgb, var(--base-parchment) 4%, transparent);
  padding:clamp(24px,4vw,52px);
}
.trust__stamp{
  position:absolute;top:clamp(20px,3.6vw,44px);right:clamp(20px,3.6vw,44px);
  color:var(--theme-accent);opacity:.55;
}
.trust .h2{max-width:16ch;padding-right:64px;}
/* En pantallas chicas ese hueco de 64 px para el sello dejaba el titular en
   una columna de 113 px: cinco líneas de dos palabras. El sello se pasa al
   flujo y el titular recupera el ancho completo de la tarjeta. */
@media (max-width:560px){
  .trust__stamp{position:static;display:block;margin-bottom:var(--sp-s);}
  .trust__stamp svg{width:36px;height:36px;}
  .trust .h2{padding-right:0;}
}
.trust__lede{margin-top:var(--sp-s);color:var(--theme-dim);max-width:46ch;}
.trust__list{margin-top:var(--sp-m);display:grid;gap:0;}
@media (min-width:760px){ .trust__list{grid-template-columns:1fr 1fr;column-gap:var(--sp-l);} }
.trust__list > div{padding:var(--sp-s) 0;border-top:1px solid var(--theme-line);display:grid;gap:6px;}
.trust__list dt{font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.trust__list dd{font-size:var(--s--1);color:var(--theme-dim);}

/* =============================================================== PIE
   De cierre a centro de operaciones. La marca vuelve a aparecer entera,
   porque el pie es el segundo sitio donde más se mira un logo. */
.foot{
  padding:var(--sp-xl) var(--gut) calc(var(--sp-l) + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:var(--sp-m);
}
.foot__grid{
  width:var(--shell);display:grid;gap:var(--sp-l);
  padding-bottom:var(--sp-m);border-bottom:1px solid var(--theme-line);
}
/* En móvil las tres columnas de enlaces se apilaban una tras otra y el pie
   medía casi dos pantallas. En dos columnas cabe lo mismo en la mitad de alto
   y ningún enlace baja del objetivo táctil. */
@media (max-width:759px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--sp-m) var(--sp-s);}
  .foot__brand{grid-column:1 / -1;}
}
@media (min-width:760px){
  .foot__grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--sp-m);}
}
.foot__brand{display:grid;gap:var(--sp-s);justify-items:start;}
.foot__logo{width:auto;height:clamp(104px,22vw,168px);object-fit:contain;}
.foot__desc{
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--theme-dim);line-height:1.8;
}
.foot__tel{display:grid;gap:2px;justify-items:start;}
.foot__tel a{
  display:inline-flex;align-items:center;min-height:38px;
  font-size:var(--s--1);color:var(--theme-dim);
  transition:color .35s var(--ease-soft);
}
.foot__tel a:hover{color:var(--theme-accent);}

.foot__col{display:grid;gap:2px;align-content:start;justify-items:start;}
.foot__col h2{
  font-size:var(--s--1);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--theme-accent);margin-bottom:8px;
}
.foot__col a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--s--1);color:var(--theme-dim);
  transition:color .35s var(--ease-soft);
}
.foot__col a:hover{color:var(--theme-ink);}
.foot__sub{width:min(30rem,100%);text-align:center;}
.foot__sub label{display:block;font-family:var(--display);font-size:var(--s-1);margin-bottom:14px;}
.foot__row{display:flex;gap:10px;flex-wrap:wrap;}
.foot__row input{
  flex:1 1 13rem;min-width:0;height:50px;padding:0 16px;
  background:transparent;border:1px solid var(--theme-line);
  color:var(--theme-ink);font-size:1rem;font-family:var(--text);
}
.foot__row input::placeholder{color:var(--theme-dim);}
.foot__row input:focus{border-color:var(--theme-accent);outline:none;}
.foot__row button{
  height:50px;padding:0 22px;cursor:pointer;
  background:var(--base-gold-lit);color:var(--base-night);
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .4s var(--ease-soft);
}
.foot__row button:hover{background:var(--base-parchment);}
.foot__note{
  margin-top:14px;font-size:var(--s--1);color:var(--theme-dim);text-align:left;
  transition:color .3s var(--ease-soft);
}
.foot__note[data-error]{color:var(--base-gold-lit);font-weight:600;}
.foot__row input[aria-invalid="true"]{border-color:var(--base-gold-lit);}
.foot__row button[disabled]{opacity:.6;cursor:default;}

.foot__legal{font-size:var(--s--1);color:var(--theme-dim);text-align:center;}

/* Créditos: mismo subrayado que se dibuja de los CTA, en versión mínima. */
.foot__credit{
  margin-top:var(--sp-s);
  font-size:var(--s--1);color:var(--theme-dim);
}
.foot__credit a{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  min-height:44px;justify-content:center;
  color:var(--theme-ink);font-weight:600;letter-spacing:.04em;
  transition:color .4s var(--ease-soft);
}
.foot__credit-l{
  display:block;width:100%;height:1px;background:var(--theme-line);
  position:relative;
}
.foot__credit-l::after{
  content:"";position:absolute;inset:0;background:var(--theme-accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-expo);
}
@media (hover:hover){
  .foot__credit a:hover{color:var(--theme-accent);}
}
.foot__credit a:hover .foot__credit-l::after,
.foot__credit a:focus-visible .foot__credit-l::after{transform:scaleX(1);}

/* ================================================== BUSCADOR Y BOLSA
   Dos paneles con el mismo comportamiento: abren, atrapan el foco, cierran
   con Escape. La lógica está una sola vez en shell.js. */
html[data-locked],html[data-locked] body{overflow:hidden;}

.find{
  position:fixed;inset:0;z-index:70;
  background:color-mix(in srgb, var(--base-night) 94%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .45s var(--ease-soft);
}
.find[hidden]{display:block;pointer-events:none;visibility:hidden;}
.find[data-open]{opacity:1;visibility:visible;pointer-events:auto;}
.find__in{
  width:var(--shell);margin-inline:auto;
  padding:clamp(90px,16vh,150px) 0 var(--sp-l);
  height:100%;display:flex;flex-direction:column;gap:var(--sp-m);
  overflow-y:auto;overscroll-behavior:contain;
}
.find__row{display:flex;align-items:center;gap:var(--sp-s);border-bottom:1px solid var(--theme-line);}
.find__row input{
  flex:1 1 auto;min-width:0;height:64px;padding:0;
  background:none;border:0;color:var(--base-parchment);
  font-family:var(--display);font-size:var(--s-2);
}
.find__row input::placeholder{color:#7C6B5B;}
.find__row input:focus{outline:none;}
.find__row:focus-within{border-bottom-color:var(--base-gold-lit);}
.find__out{display:grid;gap:2px;}
.find__out li a{
  display:flex;align-items:center;gap:var(--sp-s);
  padding:10px 0;border-bottom:1px solid rgba(246,240,229,.08);
}
.find__out img{width:64px;height:64px;object-fit:cover;flex:0 0 auto;}
.find__out b{
  display:block;font-family:var(--display);font-size:var(--s-1);font-weight:400;
  color:var(--base-parchment);
}
.find__out i{
  display:block;font-style:normal;font-size:var(--s--1);color:#93816F;
  margin-top:3px;
}
@media (hover:hover){ .find__out li a:hover b{color:var(--base-gold-lit);} }
.find__none{padding:var(--sp-s) 0;color:#93816F;font-size:var(--s-0);}
.find__hint{color:#93816F;font-size:var(--s--1);}

/* La bolsa entra por el lado. En vertical ocupa el ancho completo. */
.bag{
  position:fixed;inset:0;z-index:70;overflow:hidden;
  background:rgba(11,7,5,.62);
  opacity:0;transition:opacity .5s var(--ease-soft);
}
.bag[hidden]{display:block;pointer-events:none;visibility:hidden;}
.bag[data-open]{opacity:1;visibility:visible;pointer-events:auto;}
.bag__in{
  position:absolute;top:0;right:0;bottom:0;
  width:min(30rem,100%);
  background:var(--base-night);
  border-left:1px solid rgba(246,240,229,.12);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .6s var(--ease-expo);
}
.bag[data-open] .bag__in{transform:none;}
.bag[hidden] .bag__in{display:none;}
.bag__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s);
  padding:var(--sp-m) var(--sp-m) var(--sp-s);
  border-bottom:1px solid rgba(246,240,229,.12);
}
.bag__head h2{font-family:var(--display);font-size:var(--s-2);color:var(--base-parchment);}
.bag__x{
  min-height:44px;min-width:44px;cursor:pointer;color:#93816F;
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.bag__x:hover{color:var(--base-parchment);}
.bag__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--sp-m);}
.bag__empty{padding:var(--sp-l) 0;display:grid;gap:var(--sp-s);justify-items:start;}
.bag__empty p{color:#93816F;}
.bag__foot{
  padding:var(--sp-s) var(--sp-m) calc(var(--sp-m) + env(safe-area-inset-bottom));
  border-top:1px solid rgba(246,240,229,.12);display:grid;gap:var(--sp-s);
}
.bag__sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-s);
  font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--base-parchment);
}
.bag__sum b{font-family:var(--display);font-size:var(--s-1);letter-spacing:0;text-transform:none;font-weight:400;}
.bag__note{font-size:var(--s--1);color:#93816F;line-height:1.5;}

.bagl{
  display:grid;grid-template-columns:76px minmax(0,1fr) auto;
  gap:var(--sp-s);align-items:start;
  padding:var(--sp-s) 0;border-bottom:1px solid rgba(246,240,229,.08);
}
.bagl__im img{width:76px;height:76px;object-fit:cover;}
.bagl__b{min-width:0;}
.bagl__t{
  font-family:var(--display);font-size:var(--s-1);color:var(--base-parchment);
  display:block;
}
.bagl__m{font-size:var(--s--1);color:#93816F;margin-top:3px;}
.bagl__p{font-size:var(--s--1);color:var(--base-gold-lit);margin-top:5px;}
.bagl__q{
  grid-column:3;display:flex;align-items:center;gap:2px;
  border:1px solid rgba(246,240,229,.16);
}
.bagl__q button{
  width:34px;height:38px;cursor:pointer;color:var(--base-parchment);
  font-size:1rem;line-height:1;
}
.bagl__q button:hover{color:var(--base-gold-lit);}
.bagl__q span{
  min-width:1.6em;text-align:center;font-size:var(--s--1);
  font-variant-numeric:tabular-nums;color:var(--base-parchment);
}
.bagl__x{
  grid-column:2;justify-self:start;cursor:pointer;
  min-height:32px;font-size:var(--s--1);color:#7C6B5B;
  border-bottom:1px solid currentColor;
}
.bagl__x:hover{color:var(--base-parchment);}

/* Aviso de pieza añadida. No interrumpe: aparece y se va. */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:100;
  translate:-50% 0;
  max-width:calc(100% - 2 * var(--gut));
  padding:14px 22px;
  background:var(--base-parchment);color:var(--base-night);
  font-size:var(--s--1);letter-spacing:.02em;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s var(--ease-soft),transform .5s var(--ease-expo);
}
.toast[data-on]{opacity:1;transform:none;}

/* ------------------------------------------------------------ movimiento */
.js [data-reveal]{opacity:0;transform:translateY(22px);}
.js [data-reveal][data-on]{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft),transform 1s var(--ease-expo);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none;}
  .boot{display:none;}
  .thread{display:none;}
  .hero__track,.craft__track{height:auto;}
  .hero__stage,.craft__stage{position:static;height:auto;min-height:100svh;}
  .craft__steps li{position:static;opacity:1;transform:none;}
  .craft__steps{gap:var(--sp-l);}
  .craft__steps li{grid-area:auto;}
  .craft__ros{display:none;}
  .looks__panel{display:none;}
}