/* =============================================================
   DUSS 18K — hoja de estilo única
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root{
  /* Negro más profundo que antes: el nuevo material fotográfico es oscuro y
     cálido, y necesita un fondo que lo deje brillar sin competir. Nunca #000. */
  --ink:      #08090A;
  --ink-2:    #101214;
  --ink-3:    #191C1F;

  --bone:     #EFEBE3;
  --bone-dim: #918D85;

  --paper:    #EDE9E1;
  --paper-2:  #E3DED3;
  --paper-tx: #141618;
  --paper-dim:#6B6862;

  /* Oro tomado del propio isotipo de la marca. */
  --oro:      #C9A24B;
  --oro-pale: #E9D9A9;
  --oro-deep: #8A6E24;

  --line:       rgba(239,235,227,.14);
  --line-soft:  rgba(239,235,227,.07);
  --line-oro:   rgba(201,162,75,.4);
  --line-paper: rgba(20,22,24,.13);

  /* Playfair Display es la tipografía que la marca ya usa en sus piezas:
     didona escocesa, alto contraste, remates de bola. Jost acompaña con la
     geometría de las mayúsculas espaciadas de sus campañas. */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  /* Márgenes laterales algo menores en móvil: el contenido estaba
     aprisionado en una columna estrecha con demasiado aire a los lados. */
  --gutter: clamp(1.15rem, 4vw, 4.5rem);
  /* El contenedor sube de 1320 a 1560: en un monitor de 1900 px el ancho
     anterior dejaba casi 300 px muertos a cada lado. */
  --maxw:   1560px;
  --sect:   clamp(4rem, 7vw, 7rem);
  --nav-h:  76px;

  /* Ritmo vertical único. Todas las secciones respiran con el mismo paso;
     antes cada una traía su propio clamp y por eso no se sentían hermanas. */
  --bloque-y: clamp(2.25rem, 3.2vw, 3.75rem);
  --col-gap:  clamp(2rem, 3.6vw, 4.5rem);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0 }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:18px;
  font-weight:350;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-y:none;
}
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none; padding:0 }
p{ text-wrap:pretty }
::selection{ background:var(--oro); color:var(--ink) }
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.6rem 1rem; background:var(--bone); color:var(--ink);
  font-size:.85rem; font-weight:600;
}
.skip-link:focus{ top:1rem }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1,h2,h3{ text-wrap:balance; line-height:1.05; letter-spacing:-.015em }

h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem, 4.4vw, 5.2rem);
  line-height:1.04;
  margin-bottom:1.4rem;
}
h3{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.18rem, 1.25vw, 1.45rem);
  letter-spacing:0;
  line-height:1.3;
  margin-bottom:.45rem;
}
h1 em,h2 em{ font-style:italic; font-weight:400 }

/* Mayúsculas espaciadas: el gesto tipográfico que la marca ya usa en sus
   campañas. Aquí en Jost, que las sostiene mejor que un didone a 11 px. */
.kicker,.eyebrow,.dato{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(.8rem, .88vw, .98rem);
  letter-spacing:.26em;
  text-transform:uppercase;
}
.eyebrow{
  color:var(--oro);
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:1.4rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line-oro); max-width:180px }
.kicker{ color:var(--bone-dim) }
.dato{ color:var(--oro); display:block; margin-bottom:1rem }

/* Medidas de lectura. Los topes van en ch para que la línea no se estire de
   más en pantalla ancha, pero son holgados: el problema anterior era el
   contrario, columnas tan estrechas que partían las frases sin motivo. */
.lede{
  font-size:clamp(1.22rem,1.6vw,1.75rem); max-width:44ch;
  color:var(--bone); line-height:1.48; text-wrap:balance;
}
p{ color:var(--bone-dim); max-width:46ch; font-size:clamp(1.08rem,1.2vw,1.38rem); line-height:1.6 }

/* =============================================================
   5. COMPONENTES
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:clamp(1.15rem,1.3vw,1.5rem) clamp(2rem,2.6vw,3rem);
  font-weight:500; font-size:clamp(.8rem,.88vw,.95rem);
  letter-spacing:.2em; text-transform:uppercase;
  border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease), background-color .45s var(--ease),
             color .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.btn-oro{ background:var(--oro); color:var(--ink) }
.btn-oro:hover{ transform:translateY(-2px); box-shadow:0 14px 38px -14px rgba(201,162,75,.8) }
.btn-ghost{ border-color:var(--line); color:var(--bone) }
.btn-ghost:hover{ border-color:var(--oro); color:var(--oro); transform:translateY(-2px) }
.btn-sm{ padding:.9rem 1.6rem; font-size:clamp(.76rem,.82vw,.88rem); border-color:var(--line-oro); color:var(--oro) }
.btn-sm:hover{ background:var(--oro); color:var(--ink) }
.btn-lg{ padding:clamp(1.35rem,1.5vw,1.75rem) clamp(2.6rem,3.4vw,4rem); font-size:clamp(.86rem,.95vw,1.02rem) }

/* Barrido especular al pasar el cursor: el oro devolviendo la luz. */
.btn-oro::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
  pointer-events:none;
}
.btn-oro:hover::after{ transform:translateX(120%) }

.link-oro{
  display:inline-block;
  font-family:var(--sans);
  font-weight:500; font-size:clamp(.8rem,.9vw,1rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro);
  border-bottom:1px solid var(--line-oro);
  padding-bottom:.5rem;
  transition:border-color .4s var(--ease), letter-spacing .5s var(--ease);
}
.link-oro:hover{ border-color:var(--oro); letter-spacing:.24em }

.cta-inline{ margin-top:2.2rem; max-width:none }

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* --- Splash --- */
.splash{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .9s var(--ease), visibility .9s;
  animation:splashSafety .01s 3.4s forwards;
}
.splash-iso{ width:clamp(64px,11vw,104px); opacity:.9 }
.splash-rule{ width:min(200px,38vw); height:1px; background:var(--line); position:relative; overflow:hidden }
.splash-rule::after{
  content:""; position:absolute; inset:0; background:var(--oro);
  transform:scaleX(0); transform-origin:left;
  animation:splashRule 1.5s var(--ease) forwards;
}
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none } }
@keyframes splashRule{ to{ transform:scaleX(1) } }

/* --- Navegación --- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center; gap:1rem;
  padding-inline:var(--gutter);
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,9,10,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav-mark{
  display:flex; align-items:center; gap:.6rem;
  margin-right:auto;
  font-family:var(--sans);
  font-weight:400; font-size:.98rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone);
}
.nav-mark img{ width:46px; height:auto }
.nav-mark b{ font-weight:600; color:var(--oro) }
.nav-links{ display:none; gap:2.6rem }
.nav-links a{
  font-weight:400; font-size:.86rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim);
  position:relative; padding-block:.5rem;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--oro); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover{ color:var(--bone) }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left }

/* --- 01 Apertura ---
   Fotografía a sangre de lado a lado. La composición de la foto ya reserva
   la mitad izquierda —pared con el isotipo en relieve— para el titular, así
   que el texto va encima y no al lado. */
.hero{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:92svh;
  padding-top:var(--nav-h);
  background:var(--ink);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0 }
/* El <img> vive dentro de un <picture>, contenedor en línea sin altura
   propia: solo posicionándolo absoluto contra la placa resuelve object-fit. */
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:70% 50%;
}
/* En móvil el texto se apoya abajo, así que el velo sube desde el pie: deja
   ver la escena en el tercio superior y se cierra donde empieza el titular.
   La foto es cálida y clara; sin esta rampa el texto blanco se pierde. */
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,10,.5) 0%,rgba(8,9,10,.14) 18%,rgba(8,9,10,.62) 40%,rgba(8,9,10,.88) 62%,rgba(8,9,10,.97) 100%);
}

.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(2.5rem,7vw,4rem) clamp(3rem,8vw,4.5rem);
}
.hero-txt{ text-align:center }
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.7rem, 8.6vw, 6.6rem);
  line-height:1.03;
  letter-spacing:-.032em;
  margin:1.2rem auto 1.5rem;
  max-width:14ch;
}
.hero-txt p{ margin-inline:auto }
/* El eyebrow del hero pide más presencia que el resto: es la sola mención
   del quilataje en la primera pantalla. */
.hero .kicker{
  color:var(--oro-pale);
  font-size:clamp(.95rem,1.15vw,1.3rem);
  letter-spacing:.34em;
}
.hero-sub{ color:var(--bone); max-width:44ch; margin-inline:auto;
  font-size:clamp(1.1rem,1.4vw,1.5rem); line-height:1.5 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; justify-content:center }

/* Los cuatro apoyos van como una línea de indicadores, no como otro
   párrafo: aportan confianza sin robarle aire al titular. */
.hero-apoyo{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 1.4rem;
  margin-top:2.2rem;
  font-weight:400; font-size:clamp(.72rem,.8vw,.88rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim);
}
.hero-apoyo{ color:var(--bone) }
.hero-apoyo li{ display:flex; align-items:center; gap:1.4rem }
.hero-apoyo li:not(:last-child)::after{
  content:""; width:4px; height:4px; background:var(--oro);
  transform:rotate(45deg); flex:none;
}

/* --- Franja de certezas --- */
.certezas{
  border-block:1px solid var(--line-soft);
  overflow:hidden; padding-block:1.15rem;
  background:var(--ink);
}
.certezas-track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:marquee 46s linear infinite;
  font-weight:400; font-size:clamp(.7rem,.78vw,.86rem); letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone-dim);
  padding-left:2.4rem;
}
.certezas-track i{ width:5px; height:5px; background:var(--oro); flex:none; transform:rotate(45deg) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* --- 02 + 03 Zona del isotipo ---
   El isotipo acompaña de fondo el lema y toda la sección de oro
   italiano y nacional, y desaparece al llegar al taller. Es un sticky que
   ocupa una pantalla y se recupera con un margen negativo, de modo que no
   añade altura: el contenido pasa por encima y el isotipo se queda quieto.

   El fondo negro vive en la zona, no en cada sección: si cada una traía el
   suyo, tapaban el isotipo. */
.zona-iso{ position:relative; background:var(--ink) }
.zona-iso-fondo{
  position:sticky; top:0; z-index:0;
  height:100vh; height:100svh;
  margin-bottom:-100vh; margin-bottom:-100svh;
  display:grid; place-items:center;
  overflow:hidden; pointer-events:none;
}
/* Se dimensiona por el alto y el ancho lo deduce la proporción. El isotipo
   es casi cuadrado (800x744): fijando el ancho y acotando el alto, el
   navegador lo aplastaba en vez de escalarlo, y sin acotar el alto la
   ventana le cortaba la punta y la base. Los tres topes son, por orden:
   la altura de la ventana, el ancho disponible y el tamaño máximo. */
.zona-iso-img{
  width:auto;
  height:min(86svh, calc(94vw / 1.075), 1097px);
  opacity:.085;
}
/* El :not() es imprescindible: sin el, esta regla pisa el position:sticky
   del fondo por venir despues con la misma especificidad. */
.zona-iso > *:not(.zona-iso-fondo){ position:relative; z-index:1 }
.zona-iso .lema,
.zona-iso .intro,
.zona-iso .bloque,
.zona-iso .nota-origen{ background:transparent }

/* --- 02 Lema ---
   La frase ya viene compuesta dentro de la imagen, así que la sección es la
   fotografía a sangre y nada más: sin padding propio ni caja de texto, para
   que empalme con la franja de certezas por arriba y con la introducción de
   origen por abajo sin dejar bandas muertas.

   width:100% con height:auto y sin object-fit: la altura la dicta la propia
   proporción del recorte, así que la imagen no puede deformarse ni recortarse
   por segunda vez. El <picture> sirve dos recortes distintos —panorámico en
   escritorio, casi cuadrado en móvil— y cada uno trae sus width y height, que
   es lo que evita el salto de maquetación mientras carga. */
.lema{
  position:relative;
  background:var(--ink);
  overflow:hidden;
  line-height:0;          /* mata el hueco que el inline-block del img deja debajo */
}
.lema img{ display:block; width:100%; height:auto }

/* Los bordes de la imagen quedan un punto por encima del fondo de la página
   (luminancia 16-22 contra 9 del --ink): sin este fundido se ve la costura
   arriba y abajo. El texto vive entre el 41 % y el 65 % de la altura, así que
   las dos rampas no llegan a tocarlo. */
.lema-fundido{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    var(--ink) 0%, rgba(8,9,10,0) 14%,
    rgba(8,9,10,0) 86%, var(--ink) 100%);
}

/* Entra con un fundido limpio. El desplazamiento vertical que traen el resto
   de reveals aquí destaparía el fondo por debajo, porque la imagen ocupa la
   sección entera. */
.lema .reveal{ transform:none }
.js .lema .reveal{ transform:none }

/* --- 03 Bloques de pieza ---
   Cuatro bloques alternados que son el mismo bloque cuatro veces: idéntico
   contenedor, idéntica proporción de imagen, idéntico gap y idéntico ritmo
   vertical. La versión anterior daba a la imagen .72fr y la sacaba fuera del
   contenedor con un margen negativo, y por eso el conjunto se veía empujado a
   la derecha con un hueco raro a la izquierda. */
.bloque{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:var(--bloque-y);
  display:grid;
  gap:var(--col-gap);
  background:var(--ink);
}
/* Proporción, no altura fija: la foto se escala entera en X e Y y nunca se
   recorta de más por caber en una caja de altura arbitraria. */
.bloque-img{
  position:relative; margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--ink-2);
}
.bloque-img img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, 50% 50%);
  transform:scale(1.03);
  transition:transform 1.4s var(--ease);
}
.bloque:hover .bloque-img img{ transform:scale(1) }

.bloque-txt{ align-self:center; text-align:center }
/* Los titulares de estos dos bloques ahora son frases completas, no lemas de
   tres palabras: con la escala anterior ocupaban cinco líneas. */
.bloque-txt h2{ font-size:clamp(1.9rem,2.9vw,3.3rem); line-height:1.08 }
.bloque-txt .dato{
  margin-bottom:1rem;
  font-size:clamp(.88rem,1vw,1.1rem);
}
.bloque-txt h2,
.bloque-txt p{ margin-inline:auto }
.bloque-txt p + p{ margin-top:1.6rem }

/* --- 04 Taller ---
   Vuelve a ocupar el ancho completo, de lado a lado. El problema anterior no
   era el tamaño de la imagen sino que el texto encima era diminuto; aquí la
   imagen recupera escala cinematográfica y el texto sube de cuerpo. */
.taller{
  position:relative; overflow:hidden;
  padding-block:clamp(5rem,13vw,10rem);
  background:var(--ink);
}
.taller-media{
  position:absolute; inset:0; z-index:0; margin:0;
}
.taller-media img,
.taller-media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:62% 50%;
}
.taller-media video{ opacity:0; z-index:1; transition:opacity 1.1s var(--ease) }
.taller-media.is-playing video{ opacity:1 }
/* Foto y video traen un panel negro pegado a la izquierda, cada uno a una
   altura distinta. Este degradado los iguala y funde la placa con el fondo. */
.taller-fade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(8,9,10,.35) 22%,rgba(8,9,10,.45) 74%,var(--ink) 100%),
    linear-gradient(90deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.78) 34%,rgba(8,9,10,.2) 68%);
}
.taller-inner{
  position:relative; z-index:3;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  text-align:center;
}
.taller-inner p,
.taller-inner h2{ margin-inline:auto }
.taller-list{
  display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem;
  justify-content:center;
}
.taller-list li{
  font-weight:400; font-size:clamp(.76rem,.85vw,.92rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim);
  border:1px solid var(--line);
  padding:.7rem 1.2rem;
}

/* --- 03 Intro de sección y nota de cierre de origen ---
   Una intro tipográfica antes de los dos bloques evita tener que explicar
   la diferencia por escrito dentro de cada uno. */
/* Encabezado centrado: no lo acompaña ninguna fotografía lateral, así que
   alinearlo a un extremo no tenía a qué responder. El aire hasta el primer
   bloque baja, que era lo que separaba de más el título de su contenido. */
.intro{
  padding-block:clamp(3rem,5.5vw,5rem) clamp(.5rem,1.2vw,1.25rem);
  text-align:center;
}
.intro .eyebrow{ justify-content:center; max-width:none }
.intro .eyebrow::after{ display:none }
.intro h2{ max-width:24ch; margin-inline:auto }

.nota-origen{
  padding-block:clamp(1rem,2vw,1.75rem) clamp(3.5rem,6.5vw,6rem);
}
.nota-origen p{
  max-width:52ch;
  padding-left:1.15rem;
  border-left:1px solid var(--line-oro);
  color:var(--bone);
  font-size:clamp(1.06rem,1.15vw,1.28rem);
}

/* --- 05 Categorías: carrusel ---
   Dos fichas por pantalla en escritorio, una en móvil. Sin estética de
   ecommerce: las flechas son discretas, los puntos son rayas finas y el
   desplazamiento es lento. */
.joyas{
  background:var(--ink);
  padding-block:clamp(3.5rem,7vw,6.5rem);
  overflow:hidden;
}
/* Encabezado centrado por el mismo motivo que el de origen: aquí tampoco
   hay fotografía lateral que justifique alinearlo a un extremo. */
.joyas-head{ margin-bottom:clamp(2rem,4vw,3.5rem); text-align:center }
.joyas-head .eyebrow{ justify-content:center; max-width:none }
.joyas-head .eyebrow::after{ display:none }
.joyas-head h2{ max-width:18ch; margin-inline:auto }

/* La ventana mide exactamente el ancho útil del contenedor y recorta ahí:
   con el padding puesto en la pista, la ficha siguiente asomaba dentro del
   margen lateral en vez de quedar oculta. */
.carrusel{
  position:relative;
  overflow:hidden;
  width:min(100% - var(--gutter) * 2, var(--maxw) - var(--gutter) * 2);
  margin-inline:auto;
}
.carrusel-pista{
  display:flex;
  gap:var(--col-gap);
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
/* Sin JS el carrusel se convierte en una tira que se arrastra a mano:
   el contenido nunca queda inaccesible. */
html:not(.js) .carrusel-pista{ overflow-x:auto; scroll-snap-type:x mandatory }
html:not(.js) .cat{ scroll-snap-align:center }

.cat{
  position:relative;
  flex:0 0 100%;
  min-width:0;
}
.cat-img{
  margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--ink-2);
}
.cat-img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.4s var(--ease);
}
.cat:hover .cat-img img{ transform:scale(1) }
/* Sin microdescripción: solo el nombre, centrado bajo su fotografía y con
   bastante más cuerpo, que es lo que sostiene la ficha ahora que son tres. */
.cat-pie{ padding-top:1.25rem; text-align:center }
.cat-pie h3{
  margin:0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.55rem,2.1vw,2.3rem);
  letter-spacing:-.01em;
  color:var(--bone);
}
.cat-link{ position:absolute; inset:0; z-index:2 }
.cat-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--oro); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.cat:hover .cat-link::after{ transform:scaleX(1) }

/* Las flechas nunca se desactivan: el carrusel gira en bucle. */
.carrusel-mandos{
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  margin-top:clamp(1.75rem,3vw,2.75rem);
  /* Vive dentro de .carrusel, que ya tiene el ancho útil del contenedor. */
}
.carrusel-flecha{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--bone-dim);
  background:none; cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.carrusel-flecha svg{ width:20px; height:20px }
.carrusel-flecha:hover{ color:var(--oro); border-color:var(--line-oro) }
.carrusel-puntos{ display:flex; gap:.55rem }
.carrusel-puntos button{
  width:28px; height:2px; padding:0; border:0;
  background:var(--line); cursor:pointer;
  transition:background-color .5s var(--ease);
}
.carrusel-puntos button[aria-selected="true"]{ background:var(--oro) }

/* El parrafo hereda el max-width de lectura de p: sin anularlo, el
   text-align centraba el boton dentro de una caja estrecha pegada a la
   izquierda en vez de en la seccion. */
.joyas-cta{ margin-top:clamp(2.25rem,4vw,3.5rem); text-align:center }
.joyas-cta p{ max-width:none }

/* --- 06 Precio (fondo hueso) --- */
.section{ padding-block:var(--sect); position:relative }
.section--bone{ background:var(--paper); color:var(--paper-tx) }
.section--bone h2,.section--bone h3{ color:var(--paper-tx) }
.section--bone p{ color:var(--paper-dim) }
.section--bone .lede{ color:var(--paper-tx) }
.section--bone .eyebrow{ color:var(--oro-deep) }
.section--bone .eyebrow::after{ background:rgba(138,110,36,.4) }
.section--bone .link-oro{ color:var(--oro-deep); border-color:rgba(138,110,36,.4) }
.section--bone .link-oro:hover{ border-color:var(--oro-deep) }

.precio-grid{ display:grid; gap:2.5rem; margin-top:2.8rem }
.precio{ border-top:1px solid var(--line-paper) }
.precio li{
  display:grid; grid-template-columns:2.8rem 1fr; gap:0 1rem;
  padding-block:1.4rem;
  border-bottom:1px solid var(--line-paper);
}
.precio-n{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.05rem,1.15vw,1.3rem); color:var(--oro-deep);
  font-variant-numeric:tabular-nums; padding-top:.15rem;
}
.precio p{ font-size:clamp(1.04rem,1.1vw,1.24rem); margin:0; max-width:44ch }
.precio-img{ margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2) }
.precio-img img{ width:100%; height:100%; object-fit:cover }

/* La banda de respaldo es una pieza gráfica ya compuesta: los cuatro avales
   con sus iconos vienen dentro de la imagen. Va a ancho completo del
   contenedor y su alto lo dicta la proporción, así que no se deforma.
   El alt lleva los cuatro avales escritos, que es lo único que recibe un
   lector de pantalla. */
/* --- 06b Respaldo ---
   Mini sección propia entre la transparencia y la compra de oro, con la misma
   lógica que el lema tras la apertura: la banda sangra de lado a lado, sin
   contenedor. Con márgenes laterales seguía leyéndose como una figura dentro
   del bloque de transparencia en vez de como una sección aparte.

   El aire de arriba y abajo se queda en hueso, no en negro: así la banda es
   una isla oscura dentro de la zona clara y el corte a la sección de compra
   de oro sigue viéndose. A sangre sobre negro se fundiría con ella. */
.respaldo{
  background:var(--paper);
  /* Arriba, el aire de cierre de la transparencia: entre el padding de esa
     sección y este se entiende que la anterior ya terminó.
     Abajo, cero. La banda es oscura y la sección siguiente también, así que
     al pegarlas la propia banda hace de entrada a la zona negra. Con hueco
     blanco debajo quedaba flotando y volvía a parecer parte del bloque
     claro en vez de la transición hacia lo que viene. */
  padding-block:clamp(1.5rem, 3.5vw, 3.5rem) 0;
}
.respaldo-img{
  margin:0;
  line-height:0;              /* quita el hueco del inline-block del img */
}
/* Entra solo con fundido. El desplazamiento vertical del resto de reveals
   aquí destaparía una franja clara justo encima de la sección negra, que es
   contra lo que la banda va pegada. */
.respaldo .reveal,
.js .respaldo .reveal{ transform:none }
.respaldo-img img{ display:block; width:100%; height:auto }


/* --- 07 Compra de oro ---
   Se quedó como único contenido de la sección, así que deja de ser una
   columna a la izquierda con la mitad derecha vacía: pasa a ser un bloque
   centrado que usa el ancho entero y sube de escala. */
.caminos{
  background:var(--ink);
  padding-block:clamp(4.5rem,8vw,7.5rem);
}
.caminos-inner{ text-align:center }
.caminos .eyebrow{ justify-content:center; max-width:none }
.caminos .eyebrow::after{ display:none }
.caminos h2{
  max-width:20ch; margin-inline:auto;
  font-size:clamp(2.4rem,5vw,5.4rem);
}
.caminos .lede{
  margin-inline:auto; max-width:26ch;
  color:var(--oro-pale);
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.6rem); line-height:1.2;
  margin-top:.4rem;
}
.caminos-inner > p:not(.lede):not(.cta-inline){
  margin-inline:auto; max-width:46ch;
  margin-top:1.4rem;
  font-size:clamp(1.1rem,1.25vw,1.42rem);
}
.caminos .cta-inline{ margin-top:2.8rem }

/* --- 08 Cierre, con fotografía a sangre completa --- */
.cierre{
  position:relative; overflow:hidden;
  background:var(--ink);
  padding-block:clamp(5rem,11vw,9rem) clamp(3rem,6vw,5rem);
  text-align:center;
}
.cierre-media{ position:absolute; inset:0; z-index:0 }
.cierre-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.06); will-change:transform;
}
.cierre-veil{
  position:absolute; inset:0;
  /* Velo contenido. Con el anterior la fotografía desaparecía y el cierre
     volvía a ser un rectángulo negro, que es justo lo que había que evitar. */
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(8,9,10,.28) 20%,rgba(8,9,10,.38) 72%,var(--ink) 100%),
    radial-gradient(70% 55% at 50% 46%,rgba(8,9,10,.42) 0%,rgba(8,9,10,.1) 100%);
}
.cierre-inner{ position:relative; z-index:2 }
.cierre-inner p{ margin-inline:auto }
.cierre .eyebrow{ justify-content:center; max-width:none }
.cierre .eyebrow::after{ display:none }
.cierre-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,5vw,4.6rem);
  line-height:1.06; letter-spacing:-.025em;
  margin-bottom:1.4rem; max-width:20ch; margin-inline:auto;
}
.cierre-title em{ font-style:italic }
.cierre .lede{ margin-bottom:2.6rem }
.cierre-acciones{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  max-width:none;
}
.cierre-meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.7rem 2rem;
  margin-top:clamp(3rem,5vw,4.5rem); padding-top:2.2rem;
  border-top:1px solid var(--line-soft);
  font-weight:400; font-size:clamp(.72rem,.8vw,.88rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim);
}
.cierre-pie{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem 1.8rem;
  margin-top:1.4rem;
  font-weight:400; font-size:clamp(.7rem,.76vw,.82rem); letter-spacing:.16em; text-transform:uppercase;
  color:#5C5A56;
}
.cierre-pie a{ transition:color .4s var(--ease) }
.cierre-pie a:hover{ color:var(--oro) }

/* --- Barra fija de WhatsApp (solo móvil) --- */
.wa-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:700;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  background:var(--oro); color:var(--ink);
  font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transform:translateY(110%);
  transition:transform .6s var(--ease);
}
.wa-bar.is-in{ transform:translateY(0) }

/* =============================================================
   7. EFECTOS
   ============================================================= */
/* Las apariciones solo existen si hay JavaScript. La clase .js la pone un
   script en línea antes del primer pintado, así que sin JS —o si algo falla
   al cargarlo— el contenido se ve entero desde el principio en vez de
   quedarse en opacidad 0 o recortado al 100 %. Es lo que hacía que las
   imágenes parecieran no cargar. */
.reveal{ transition:opacity .95s var(--ease), transform .95s var(--ease) }
.js .reveal{ opacity:0; transform:translateY(22px) }
.js .reveal.is-visible{ opacity:1; transform:none }
.reveal[data-split]{ opacity:1; transform:none }

/* Revelado por máscara de las placas de pieza */
.bloque-img.reveal,
.precio-img.reveal{ will-change:clip-path }
/* La placa entra solo por máscara: sin desplazamiento ni fundido, que
   sumados a la máscara se leen como tres efectos a la vez. */
.bloque-img.reveal{ transition:clip-path 1.3s var(--ease) }
.js .bloque-img.reveal{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
}
.js .bloque-img.reveal.is-visible{ clip-path:inset(0 0 0 0) }

/* Barrido especular en titulares.
   Dos cosas que aquí se hacen mal con facilidad y dejan el texto invisible:
   usar currentColor dentro del degradado mientras el elemento lleva
   color:transparent, y sacar background-position fuera del rango 0–100%,
   que con background-size:300% y no-repeat deja parte del texto sin imagen
   detrás. Por eso hay un token de color explícito y el recorrido va de
   100% a 0%, donde la imagen cubre el elemento entero en todo momento. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  [data-rake].is-raked{
    --rake-base:var(--bone);
    background-image:linear-gradient(100deg,
      var(--rake-base) 0%, var(--rake-base) 42%,
      var(--oro-pale) 47%, #FFF7E4 50%, var(--oro-pale) 53%,
      var(--rake-base) 58%, var(--rake-base) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
  }
  .section--bone [data-rake].is-raked{ --rake-base:var(--paper-tx) }
  [data-rake].is-raked,
  [data-rake].is-raked em{ color:transparent }
  [data-rake].is-raked.is-visible{ animation:rake 2.2s var(--ease) .3s both }
}
@keyframes rake{
  from{ background-position:100% 0 }
  to  { background-position:0% 0 }
}

/* Entrada por palabras del titular de apertura */
.word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.word > span{
  display:inline-block; transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.is-lifted .word > span{ transform:none }

/* =============================================================
   8. RESPONSIVE (mobile-first)
   ============================================================= */
@media (min-width:720px){
  .wa-bar{ display:none }

  /* A partir de aquí el texto vuelve a alinearse a la izquierda: el centrado
     es una decisión de móvil, no una que deba arrastrarse a pantalla ancha. */
  .bloque-txt{ text-align:left }
  .bloque-txt h2,
  .bloque-txt p,
  .taller-inner p,
  .taller-inner h2{ margin-inline:0 }

  /* Dos fichas en tableta; en escritorio pasan a tres. El ancho descuenta
     los gaps para que la última termine justo en el margen del contenedor. */
  .cat{ flex:0 0 calc((100% - var(--col-gap)) / 2) }

  /* Columnas iguales. Es la decisión que hace que los cuatro bloques se lean
     como un sistema y no como cuatro maquetaciones distintas. */
  .bloque{ grid-template-columns:1fr 1fr; align-items:center }
  .bloque--inv .bloque-img{ order:2 }
  .bloque--inv .bloque-txt{ order:1 }

  /* Tope de ancho igual para las cuatro placas: la altura sale sola de la
     proporción, así que ninguna acaba comiéndose la pantalla. El sobrante
     de la columna cae hacia dentro, contra el texto, nunca contra el
     margen exterior: por eso las cuatro siguen alineadas con el borde. */
  .bloque-img{ width:min(100%, 700px) }
  .bloque:not(.bloque--inv) .bloque-img{ justify-self:start }
  .bloque--inv .bloque-img{ justify-self:end }

  /* El taller ya es a sangre completa: aquí el texto solo se va a la
     izquierda, sobre la zona oscura del video. */
  .taller-inner{ text-align:left }
  .taller-inner h2,
  .taller-inner .lede{ margin-inline:0; max-width:16ch }
  .taller-inner .lede{ max-width:32ch }
  /* La fila de categorías se corta antes de llegar a la zona iluminada del
     video, donde perdía contraste. */
  .taller-list{ justify-content:flex-start; max-width:38rem }
}

@media (min-width:960px){
  :root{ --nav-h:104px }
  .nav-links{ display:flex }

  /* Apertura: la fotografía sigue a sangre y el texto se va a la mitad
     izquierda, sobre la pared con el isotipo en relieve. El velo pasa a ser
     horizontal para oscurecer solo esa mitad y dejar limpia la modelo. */
  .hero{
    min-height:100vh; min-height:100svh;
    align-items:center;
  }
  /* Oscurece solo la mitad del titular. Calibrado sobre la luminancia real
     de la pared (97): con el velo anterior al 90 % la fotografia desaparecia
     y el hero volvia a ser un rectangulo negro con texto. */
  .hero-veil{
    background:
      linear-gradient(90deg,rgba(8,9,10,.76) 0%,rgba(8,9,10,.7) 28%,rgba(8,9,10,.5) 50%,rgba(8,9,10,.14) 68%,rgba(8,9,10,0) 82%),
      linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,0) 24%,rgba(8,9,10,0) 76%,rgba(8,9,10,.5) 100%);
  }
  .hero-inner{ padding-block:0 }
  .hero-txt{
    text-align:left;
    max-width:min(52%, 46rem);
  }
  .hero-txt p{ margin-inline:0 }
  .hero-title{ margin-inline:0; max-width:16ch; font-size:clamp(3rem, 5.4vw, 5.4rem) }
  .hero-sub{ margin-inline:0; max-width:36ch }
  .hero-actions,
  .hero-apoyo{ justify-content:flex-start }

  .precio-grid{ grid-template-columns:1.25fr .75fr; align-items:start; gap:3.5rem }
  .precio li{ grid-template-columns:3rem 1fr; gap:0 1.25rem }

  /* Un respiro interior igual en los dos sentidos de la alternancia, para
     que la columna de texto no quede pegada a la imagen. */
  .bloque:not(.bloque--inv) .bloque-txt{ padding-left:clamp(0rem,2vw,2rem) }
  .bloque--inv .bloque-txt{ padding-right:clamp(0rem,2vw,2rem) }

  .taller-inner h2{ max-width:13ch }
  .taller-inner .lede{ max-width:34ch }
}

/* Tres categorías por pantalla, que es donde la ficha deja de ser un
   rectángulo estrecho y la fila respira. */
@media (min-width:1080px){
  .cat{ flex:0 0 calc((100% - var(--col-gap) * 2) / 3) }
}

/* En monitores anchos el reparto se abre un punto hacia el texto, que es
   donde antes sobraba negro, y las placas ya no llevan tope: la columna
   manda y las cuatro siguen midiendo exactamente lo mismo. */
@media (min-width:1600px){
  .bloque-img{ width:min(100%, 620px) }
}

/* =============================================================
   9. REDUCED MOTION — solo lo intrusivo.
   Windows lo trae activado de fábrica en muchos equipos: si se apaga todo
   aquí, el cliente abre la web en su PC y la ve muerta.
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .certezas-track{ animation-duration:120s }
  [data-rake].is-raked.is-visible{ animation-duration:.01s; animation-delay:0s }
  .cierre-media img{ transform:scale(1) }
  .js .bloque-img.reveal{ clip-path:none }
}