/* =============================================================================
   ANTONIA FAÚNDEZ · JOYERÍA
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía · 5. Marcadores
   6. Navegación · 7. Secciones · 8. Efectos · 9. Responsive · 10. Reduced motion
   ========================================================================== */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root{
  /* Paleta */
  --wine:#1E0B0D;
  --wine-deep:#140709;
  --wine-lift:#2A1114;
  --ivory:#EAE4DC;
  --ivory-warm:#F2EDE6;
  --ink:#171313;
  --gold:#A88962;

  /* Tipografías */
  --serif:"Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --script:"Cormorant Garamond", "Bodoni Moda", serif;

  /* Métrica */
  --gutter:clamp(22px, 5.2vw, 96px);
  --wrap:1560px;
  --nav-h:76px;
  --band:clamp(96px, 13vw, 220px);   /* aire vertical entre secciones */

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

  /* Grano — materialidad, no decoración */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* Temas de sección */
.theme-wine{
  --bg:var(--wine);
  --fg:var(--ivory);
  --fg-dim:rgba(234,228,220,.62);
  --fg-faint:rgba(234,228,220,.34);
  --hair:rgba(234,228,220,.16);
  --hair-strong:rgba(234,228,220,.30);
  --plate:rgba(255,255,255,.022);
  background:var(--bg); color:var(--fg);
}
.theme-ivory{
  --bg:var(--ivory);
  --fg:var(--ink);
  --fg-dim:rgba(23,19,19,.66);
  --fg-faint:rgba(23,19,19,.40);
  --hair:rgba(23,19,19,.15);
  --hair-strong:rgba(23,19,19,.28);
  --plate:rgba(23,19,19,.022);
  background:var(--bg); color:var(--fg);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h);}
body{
  font-family:var(--sans);
  font-size:16px; font-weight:300; line-height:1.65;
  background:var(--wine); color:var(--ivory);
  -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;}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
p{text-wrap:pretty;}
h1,h2,h3{font-weight:400;line-height:1.02;text-wrap:balance;}
dl,dd{margin:0;}
::selection{background:var(--gold);color:var(--wine-deep);}
:focus-visible{outline:1px solid var(--gold);outline-offset:6px;}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.skip-link{
  position:fixed; top:-120px; left:16px; z-index:9999;
  padding:.7rem 1.1rem; background:var(--ivory); color:var(--wine);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.skip-link:focus{top:16px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.9rem, 7.4vw, 7.4rem);
  line-height:.94; letter-spacing:-.018em;
}
.eyebrow{
  font-family:var(--sans); font-size:.66rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.34em; color:var(--fg-faint);
  display:flex; align-items:center; gap:.9em;
}
.eyebrow .dot{width:3px;height:3px;background:currentColor;opacity:.7;}
.tags{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;}
.tags li{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.28em;
  color:var(--fg-faint); position:relative;
}
.tags li+li::before{
  content:""; position:absolute; left:-.75rem; top:50%;
  width:3px; height:1px; background:currentColor; opacity:.6;
}

/* =============================================================
   5. MARCADORES DE IMAGEN  (.ph)
   ============================================================= */
.ph{margin:0;position:relative;width:100%;}
.ph__frame{
  position:relative; width:100%; aspect-ratio:var(--r, 4/5); overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, var(--plate), transparent 70%),
    linear-gradient(160deg, rgba(168,137,98,.09), rgba(168,137,98,.02) 55%, transparent);
  border:1px solid var(--hair);
  isolation:isolate;
}
.ph__frame::after{ /* grano */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:140px 140px;
  opacity:.055; mix-blend-mode:overlay;
}
/* Cruces de encuadre en las esquinas */
.ph__frame::before{
  content:""; position:absolute; inset:14px; pointer-events:none;
  background:
    linear-gradient(var(--hair-strong),var(--hair-strong)) left top/14px 1px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) left top/1px 14px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) right top/14px 1px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) right top/1px 14px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--hair-strong),var(--hair-strong)) right bottom/1px 14px no-repeat;
  opacity:.85; z-index:2;
}
.ph__inner{
  position:absolute; inset:0; padding:clamp(20px,2.6vw,40px);
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr;
  gap:.4rem; will-change:transform;
}
.ph__num,.ph__ratio{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--fg-faint);
}
.ph__ratio{justify-self:end;font-variant-numeric:tabular-nums;}
.ph__brief{
  grid-column:1/-1; align-self:end;
  max-width:44ch; font-size:.78rem; line-height:1.75;
  letter-spacing:.02em; color:var(--fg-dim);
  padding-top:1.1rem; border-top:1px solid var(--hair);
}
.ph__cap{
  margin-top:.9rem; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.26em; color:var(--fg-faint);
}
/* La fotografía real sustituye al marcador sin tocar el maquetado */
.ph.has-photo .ph__frame{border-color:transparent;}
.ph.has-photo .ph__frame::before{display:none;}
.ph.has-photo .ph__frame::after{opacity:.035;}
.ph.has-photo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.8s var(--ease-out);
}
.ph.has-photo.is-revealed img,
.is-revealed .ph.has-photo img{transform:none;}
/* Fotografías con paralaje: un poco más altas para tener recorrido */
.ph.has-photo.ph--moving img{
  position:absolute; top:-6%; left:0; height:112%; will-change:transform;
}
.ph.has-photo.ph--moving.is-revealed img,
.is-revealed .ph.has-photo.ph--moving img{transform:none;}

/* =============================================================
   6. VELO · NAVEGACIÓN · MENÚ
   ============================================================= */
.veil{
  position:fixed; inset:0; z-index:200; background:var(--wine-deep);
  display:grid; place-items:center;
  transition:opacity 1.1s var(--ease-out), visibility 1.1s;
  animation:veilSafety .01s 2.6s forwards; /* red de seguridad si el JS falla */
}
.veil.is-out{opacity:0;visibility:hidden;pointer-events:none;}
@keyframes veilSafety{to{opacity:0;visibility:hidden;pointer-events:none;}}
.veil__mark{text-align:center;animation:veilIn 1.6s var(--ease-out) both;}
.veil__name{
  display:block; font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,2.4rem);
  letter-spacing:.1em; color:var(--ivory);
}
.veil__sub{
  display:block; margin-top:.7rem; font-size:.6rem;
  letter-spacing:.5em; text-transform:uppercase; color:var(--gold);
}
@keyframes veilIn{from{opacity:0;letter-spacing:.3em;}to{opacity:1;}}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  color:var(--ivory); mix-blend-mode:normal;
  transition:background .6s var(--ease-out), color .6s var(--ease-out);
}
.nav.is-solid{background:rgba(20,7,9,.86);backdrop-filter:blur(14px);}
@supports not (backdrop-filter:blur(4px)){.nav.is-solid{background:rgba(20,7,9,.97);}}
.nav.is-light{color:var(--ink);}
.nav.is-light.is-solid{background:rgba(234,228,220,.9);color:var(--ink);}
.nav__progress{
  position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); opacity:.75;
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:var(--nav-h); padding:0 var(--gutter);
}
.nav__brand{display:flex;flex-direction:column;line-height:1;}
.nav__brand-name{font-family:var(--serif);font-size:1rem;letter-spacing:.16em;}
.nav__brand-sub{margin-top:.34rem;font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;opacity:.6;}
.nav__links{display:none;gap:2.6rem;}
.nav__links a{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.26em;
  position:relative; padding-block:.4rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .7s var(--ease-out);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__toggle{display:flex;align-items:center;gap:.8rem;}
.nav__toggle-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.28em;}
.nav__toggle-lines{display:grid;gap:5px;width:22px;}
.nav__toggle-lines i{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease-out);}
.nav__toggle:hover .nav__toggle-lines i:first-child{transform:translateX(4px);}

.menu{
  position:fixed; inset:0; z-index:150; background:var(--wine-deep);
  color:var(--ivory); display:grid;
  clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease-out);
}
.menu[hidden]{display:none;}
.menu.is-open{clip-path:inset(0 0 0 0);}
.menu__inner{
  padding:var(--gutter); display:flex; flex-direction:column;
  justify-content:space-between; min-height:100%;
}
.menu__close{
  align-self:flex-end; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.3em; padding:.6rem 0;
}
.menu__close::after{content:"";display:block;height:1px;background:currentColor;margin-top:.4rem;}
.menu__nav{display:grid;gap:clamp(.6rem,1.6vw,1.1rem);padding-block:clamp(2rem,6vw,4rem);}
.menu__nav a{
  font-family:var(--serif); font-size:clamp(2rem,6vw,4.4rem); line-height:1.05;
  display:flex; align-items:baseline; gap:1.2rem; opacity:.82;
  transition:opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.menu__nav a:hover{opacity:1;transform:translateX(14px);}
.menu__num{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;color:var(--gold);}
.menu__foot{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(234,228,220,.4);}

/* =============================================================
   7. SECCIONES
   ============================================================= */

/* ---------- 01 · HERO ---------- */
.hero{
  min-height:100svh; padding:calc(var(--nav-h) + clamp(28px,7vh,80px)) var(--gutter) clamp(28px,5vh,56px);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.hero::after{ /* viñeta cálida, muy contenida */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 72% 30%, rgba(168,137,98,.10), transparent 62%);
}
.hero__grid{
  position:relative; z-index:1; flex:1;
  display:grid; gap:clamp(34px,5vw,72px); align-items:start;
  max-width:var(--wrap); width:100%; margin-inline:auto;
}
.hero__eyebrow{margin-bottom:clamp(20px,3.4vw,40px);animation:softIn 1.2s .5s var(--ease-out) both;}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem, 11.5vw, 8.6rem);
  line-height:.92; letter-spacing:-.022em;
}
.hero__title .line{display:block;overflow:hidden;}
.hero__title .word{display:block;animation:riseIn 1.5s var(--ease-out) both;}
.hero__title .line:nth-child(1) .word{animation-delay:.65s;}
.hero__title .line:nth-child(2) .word{animation-delay:.79s;}
.hero__title .line:nth-child(3) .word{animation-delay:.93s;}
.hero__support{
  margin-top:clamp(26px,3.6vw,44px); font-family:var(--script);
  font-style:italic; font-size:clamp(1.15rem,2.1vw,1.6rem);
  line-height:1.45; color:var(--fg-dim);
  animation:softIn 1.4s 1.15s var(--ease-out) both;
}
.hero__foot{
  position:relative; z-index:1; margin-top:clamp(24px,4vh,48px);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-faint); animation:softIn 1.4s 1.5s var(--ease-out) both;
}
.hero__figure{animation:softIn 1.8s .9s var(--ease-out) both;}
.cue{
  display:inline-flex; align-items:center; gap:1rem;
  margin-top:clamp(30px,4.4vw,54px); padding-bottom:.7rem;
  border-bottom:1px solid var(--hair-strong);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.3em;
  animation:softIn 1.4s 1.35s var(--ease-out) both;
  transition:border-color .6s var(--ease-out);
}
.cue:hover{border-color:var(--gold);}
.cue__arrow{animation:drift 3.6s var(--ease-soft) infinite;}
.cue:hover .cue__label{color:var(--gold);transition:color .5s var(--ease-out);}

/* ---------- 02 · MANIFIESTO ---------- */
.manifiesto{
  padding:var(--band) var(--gutter);
  display:grid; gap:clamp(48px,7vw,110px);
  max-width:var(--wrap); margin-inline:auto;
}
.statement{
  font-family:var(--serif); font-size:clamp(2rem,5.6vw,5.2rem);
  line-height:1.02; letter-spacing:-.018em;
}
.statement span{display:block;}
.statement--alt{
  margin-top:clamp(20px,3vw,40px); color:var(--fg-dim);
  font-size:clamp(1.5rem,3.6vw,3.2rem); line-height:1.18;
}
.statement--alt em{font-family:var(--script);font-style:italic;color:var(--fg);}
.manifiesto__body{display:grid;gap:1.6rem;max-width:52ch;justify-self:end;}
.manifiesto__body p{font-size:clamp(1rem,1.15vw,1.1rem);color:var(--fg-dim);}
.manifiesto__sign{
  margin-top:1.2rem; padding-top:1.4rem; border-top:1px solid var(--hair);
  font-size:.68rem !important; text-transform:uppercase; letter-spacing:.34em;
  color:var(--fg-faint) !important;
}

/* ---------- 03 · ÍNDICE DE LA COLECCIÓN ---------- */
.coleccion{padding:var(--band) var(--gutter);}
.coleccion__head{max-width:var(--wrap);margin-inline:auto;display:grid;gap:clamp(20px,2.6vw,34px);}
.coleccion__title{max-width:16ch;}
.coleccion__sub{max-width:46ch;color:var(--fg-dim);font-size:clamp(1rem,1.15vw,1.1rem);justify-self:end;}
.indice{
  max-width:var(--wrap); margin:clamp(48px,7vw,96px) auto 0;
  border-top:1px solid var(--hair);
}
.indice__row{border-bottom:1px solid var(--hair);}
.indice__row a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,2.4vw,40px); padding:clamp(20px,3vw,38px) 0;
  transition:padding-left .8s var(--ease-out), color .6s var(--ease-out);
}
.indice__row a:hover{padding-left:clamp(10px,1.6vw,26px);}
.indice__num{font-size:.62rem;letter-spacing:.24em;color:var(--gold);}
.indice__name{
  font-family:var(--serif); font-size:clamp(1.7rem,4.4vw,3.6rem);
  line-height:1; letter-spacing:-.01em;
}
.indice__desc{
  display:none; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--fg-faint);
}
.indice__svg{
  width:clamp(76px,10vw,150px); height:auto; color:var(--fg);
  opacity:.4; transition:opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.indice__row a:hover .indice__svg{opacity:1;transform:translateX(-8px);}

/* ---------- Perfiles: piezas comunes ---------- */
.perfil{padding:var(--band) var(--gutter);}
.perfil__index{font-size:.62rem;letter-spacing:.3em;color:var(--gold);margin-bottom:1.6rem;}
.perfil__name{margin-bottom:clamp(20px,2.6vw,34px);}
.perfil__line{
  font-family:var(--script); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.85rem); line-height:1.42;
  max-width:24ch; margin-block:clamp(20px,2.6vw,34px);
}
.perfil__body{max-width:46ch;color:var(--fg-dim);font-size:clamp(.98rem,1.1vw,1.08rem);}
.perfil__tech{margin-top:clamp(34px,4.4vw,60px);}
.perfil__svg{width:min(320px,80%);height:auto;color:var(--fg);}
.perfil__tech figcaption{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--hair);
  max-width:320px; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--fg-faint);
}
/* Dibujo técnico: arquitectura de joyería, no plano de ingeniería */
.pf-shape{fill:rgba(168,137,98,.12);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;}
.pf-light{fill:none;stroke:var(--gold);stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke;}
.pf-tick{fill:none;stroke:currentColor;stroke-width:1;opacity:.32;vector-effect:non-scaling-stroke;}
.pf-arc{fill:none;stroke:currentColor;stroke-width:1;opacity:.18;stroke-dasharray:2 5;vector-effect:non-scaling-stroke;}

/* 04 · Corte inglés — retícula clásica desplazada */
.perfil--ingles .perfil__grid{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(34px,4.6vw,72px);
}
.perfil--ingles .perfil__aside{display:block;}

/* 05 · Media caña — banda ancha y columnas */
.perfil--cana{padding-inline:0;}
.perfil__banner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  margin-bottom:clamp(30px,4vw,56px);
}
.perfil__wide{padding-inline:var(--gutter);max-width:var(--wrap);margin-inline:auto;}
.perfil__split{
  max-width:var(--wrap); margin:clamp(40px,5.4vw,84px) auto 0;
  padding-inline:var(--gutter);
  display:grid; gap:clamp(30px,4vw,64px);
}

/* 06 · Redonda — composición orgánica */
.perfil--redonda{position:relative;overflow:hidden;}
.perfil__organic{
  position:relative; max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(30px,4vw,64px);
}
.curva{
  position:absolute; left:-6%; bottom:6%; width:112%; height:auto;
  color:var(--fg); opacity:.16; pointer-events:none;
}
.curva path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;}

/* 07 · Flat — retícula estricta */
.perfil--flat .perfil__geo{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(26px,3vw,44px);
  border-top:1px solid var(--hair); padding-top:clamp(26px,3vw,44px);
}
.perfil--flat .perfil__geo-text{display:grid;gap:1.4rem;}
.perfil--flat .perfil__line{margin-block:0;}

/* ---------- 08 · COMPARADOR ---------- */
.encuentra{padding:var(--band) var(--gutter);}
.encuentra__head{max-width:var(--wrap);margin-inline:auto;display:grid;gap:1.4rem;}
.encuentra__body{
  max-width:var(--wrap); margin:clamp(40px,5.4vw,84px) auto 0;
  display:grid; gap:clamp(26px,3.4vw,56px);
}
.selector{display:grid;border-top:1px solid var(--hair);}
.selector button{
  display:flex; align-items:baseline; gap:1.2rem; width:100%;
  padding:clamp(14px,1.8vw,22px) 0; border-bottom:1px solid var(--hair);
  text-align:left; color:var(--fg-faint);
  transition:color .6s var(--ease-out), padding-left .8s var(--ease-out);
}
.selector button:hover{color:var(--fg-dim);padding-left:10px;}
.selector button[aria-selected="true"]{color:var(--fg);}
.selector__num{font-size:.6rem;letter-spacing:.24em;color:var(--gold);}
.selector__name{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1;}
.selector button[aria-selected="true"] .selector__name{font-style:italic;}

.visor{display:grid;gap:clamp(28px,3.6vw,56px);}
.visor__stage{
  position:relative; aspect-ratio:16/11; border:1px solid var(--hair);
  display:grid; place-items:center; padding:clamp(18px,2.4vw,34px);
  background:radial-gradient(90% 70% at 50% 42%, rgba(168,137,98,.10), transparent 70%);
}
.visor__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:140px 140px; opacity:.05;
}
.visor__svg{
  grid-area:1/1; width:min(680px,100%); height:auto; color:var(--fg);
  opacity:0; transform:translateY(10px) scale(.99);
  transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.visor__svg.is-active{opacity:1;transform:none;}
.visor__data{display:grid;gap:1.2rem;align-content:start;}
.visor__name{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;}
.visor__line{font-family:var(--script);font-style:italic;font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--fg-dim);max-width:30ch;}
.visor__desc{max-width:44ch;color:var(--fg-dim);}
.visor__data.is-swapping .visor__name,
.visor__data.is-swapping .visor__line,
.visor__data.is-swapping .visor__desc,
.visor__data.is-swapping .ficha,
.visor__data.is-swapping .visor__note{opacity:0;}
.visor__name,.visor__line,.visor__desc,.ficha,.visor__note{transition:opacity .45s var(--ease-out);}
.ficha{
  display:grid; gap:0; margin-top:.6rem;
  border-top:1px solid var(--hair);
}
.ficha>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:.95rem 0; border-bottom:1px solid var(--hair);
}
.ficha dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.28em;color:var(--fg-faint);}
.ficha dd{font-family:var(--serif);font-size:1.15rem;font-style:italic;}
.visor__note{font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--fg-faint);}

/* ---------- 09 · PERSONALIZACIÓN ---------- */
.personal{padding:var(--band) var(--gutter);}
.personal__head{max-width:var(--wrap);margin-inline:auto;display:grid;gap:1.6rem;}
.personal__sub{max-width:48ch;color:var(--fg-dim);justify-self:end;}
.opciones{
  max-width:var(--wrap); margin:clamp(40px,5.4vw,84px) auto 0;
  display:grid; gap:0; border-top:1px solid var(--hair);
}
.opciones__grupo{
  display:grid; gap:1rem; padding:clamp(22px,2.8vw,38px) 0;
  border-bottom:1px solid var(--hair);
}
.opciones__label{
  font-size:.62rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.32em; color:var(--fg-faint);
}
.opciones__lista{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;}
.opciones__lista button{
  font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.55rem);
  color:var(--fg-faint); padding-bottom:.35rem; position:relative;
  transition:color .55s var(--ease-out);
}
.opciones__lista button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.opciones__lista button:hover{color:var(--fg-dim);}
.opciones__lista button.is-on{color:var(--fg);font-style:italic;}
.opciones__lista button.is-on::after{transform:scaleX(1);background:var(--gold);}
/* Muestra del metal — disco pulido bajo las opciones */
.opciones{--m-hi:#F0D79B;--m-base:#CFA452;--m-lo:#93702F;}
.opciones[data-metal="amarillo"]{--m-hi:#F0D79B;--m-base:#CFA452;--m-lo:#93702F;}
.opciones[data-metal="blanco"]  {--m-hi:#FAFBFC;--m-base:#DBDEE0;--m-lo:#A2A8AD;}
.opciones[data-metal="rosado"]  {--m-hi:#F8DAC6;--m-base:#E0A183;--m-lo:#AE6D54;}
.opciones[data-metal="platino"] {--m-hi:#F0F2F4;--m-base:#C5CAD0;--m-lo:#858D95;}

.muestra{margin:.4rem 0 0;display:flex;align-items:center;gap:1.3rem;}
.muestra__disco{
  width:clamp(58px,6vw,84px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(58% 52% at 32% 26%, var(--m-hi), transparent 62%),
    linear-gradient(148deg, var(--m-hi), var(--m-base) 44%, var(--m-lo));
  box-shadow:inset 0 0 0 1px rgba(23,19,19,.16);
  transition:background 1s var(--ease-out);
}
.muestra__nota{font-size:.6rem;text-transform:uppercase;letter-spacing:.26em;color:var(--fg-faint);}

/* Tipografías del grabado — las tres opciones del taller */
.opciones{--g-font:"Pinyon Script", "Cormorant Garamond", cursive; --g-italic:normal; --g-peso:400;}
.opciones[data-grabado="paradise"]  {--g-font:"Pinyon Script","Cormorant Garamond",cursive;--g-italic:normal;}
.opciones[data-grabado="monotype"]  {--g-font:"Cormorant Garamond",Georgia,serif;--g-italic:italic;}
.opciones[data-grabado="montserrat"]{--g-font:"Montserrat",var(--sans);--g-italic:normal;--g-peso:500;}

.opciones__lista--tipos button[data-valor="paradise"]{
  font-family:"Pinyon Script","Cormorant Garamond",cursive;
  font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.1;
}
.opciones__lista--tipos button[data-valor="monotype"]{
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(1.2rem,2.1vw,1.7rem);
}
.opciones__lista--tipos button[data-valor="montserrat"]{
  font-family:"Montserrat",var(--sans); font-weight:500;
  font-size:clamp(.85rem,1.3vw,1.05rem); letter-spacing:.01em;
}
.opciones__lista--tipos button.is-on{font-style:normal;}
.opciones__lista--tipos button[data-valor="monotype"].is-on{font-style:italic;}

/* Los cinco anchos, en proporción real */
.anchos{--esc:clamp(9px,1.5vw,14px);margin:.4rem 0 0;display:grid;gap:.75rem;max-width:440px;}
.anchos__fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.4rem;}
.anchos__barra{
  display:grid; place-items:center; overflow:hidden;
  width:100%; height:calc(var(--mm) * var(--esc));
  border:1px solid var(--hair-strong); background:transparent;
  transition:background 1s var(--ease-out), border-color 1s var(--ease-out);
}
/* El grabado, marcado sobre el metal */
.anchos__grabado{
  font-family:var(--g-font); font-style:var(--g-italic); font-weight:var(--g-peso);
  font-size:calc(var(--mm) * var(--esc) * .56); line-height:1;
  white-space:nowrap; color:rgba(23,19,19,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  opacity:0; transition:opacity .9s var(--ease-out);
}
.anchos__fila.is-on .anchos__grabado{opacity:1;}
.anchos__label{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint); font-variant-numeric:tabular-nums;
  transition:color .8s var(--ease-out);
}
.anchos__fila.is-on .anchos__barra{
  border-color:transparent;
  background:linear-gradient(160deg, var(--m-hi), var(--m-base) 46%, var(--m-lo));
}
.anchos__fila.is-on .anchos__label{color:var(--fg);}
.anchos__nota{
  margin-top:.5rem; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--fg-faint);
}

.opciones__pie{
  max-width:var(--wrap); margin:clamp(30px,4vw,56px) auto 0;
  display:grid; gap:1.2rem;
}
.opciones__resumen{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.6vw,2.1rem); line-height:1.3;
}
.opciones__nota{
  max-width:44ch; font-size:.72rem; letter-spacing:.05em; color:var(--fg-faint);
}

/* ---------- 10 · EL OFICIO ---------- */
.oficio{padding:var(--band) var(--gutter);}
.oficio__head{max-width:var(--wrap);margin-inline:auto;display:grid;gap:1.6rem;}
.oficio__lead{
  font-family:var(--script); font-style:italic;
  font-size:clamp(1.25rem,2.6vw,2.2rem); line-height:1.42;
  color:var(--fg-dim); justify-self:end; max-width:26ch;
}
.proceso{
  max-width:var(--wrap); margin:clamp(46px,6vw,92px) auto 0;
  display:grid; gap:clamp(46px,6vw,88px);
}
.proceso__paso{display:grid;gap:1rem;align-content:start;}
.proceso__num{font-size:.62rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;}
.proceso__word{
  font-family:var(--serif); font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1; letter-spacing:-.01em;
}
.proceso__text{color:var(--fg-dim);max-width:34ch;font-size:.98rem;}
.proceso__ph{margin-top:1rem;}

/* ---------- 11 · ANTONIA ---------- */
.antonia{padding:var(--band) var(--gutter);}
.antonia__grid{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(34px,4.6vw,80px);
}
.antonia__title{font-size:clamp(2.2rem,5.2vw,4.6rem);}
.antonia__quote{
  margin-top:clamp(26px,3.4vw,44px);
  font-family:var(--script); font-style:italic;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.4;
}
.antonia__firma{
  margin-top:clamp(26px,3.4vw,44px); padding-top:1.2rem;
  border-top:1px solid var(--hair); display:grid; gap:.5rem;
}
.antonia__nombre{font-family:var(--serif);font-size:1.1rem;letter-spacing:.14em;}
.antonia__rol{font-size:.6rem;text-transform:uppercase;letter-spacing:.36em;color:var(--gold);}
.editable{
  margin-top:clamp(28px,3.4vw,44px); padding-left:clamp(16px,2vw,26px);
  border-left:1px solid var(--hair-strong); display:grid; gap:1rem;
  max-width:46ch;
}
.editable__tag{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.26em;
  color:var(--fg-faint);
}
.editable p:not(.editable__tag){color:var(--fg-dim);font-size:.98rem;}

/* ---------- 12 · GALERÍA ---------- */
.galeria{
  padding:var(--band) var(--gutter);
  display:grid; gap:clamp(40px,6vw,80px);
  max-width:var(--wrap); margin-inline:auto;
}
.galeria__label{margin-bottom:-1rem;}

/* ---------- 13 · CIERRE ---------- */
.cierre{
  min-height:88svh; padding:var(--band) var(--gutter);
  display:grid; place-items:center; position:relative; overflow:hidden;
  background:var(--wine-deep);
}
.cierre::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 50% 100%, rgba(168,137,98,.12), transparent 62%);
}
.cierre__inner{position:relative;z-index:1;width:min(100%,880px);text-align:center;display:grid;justify-items:center;}
.cierre__title{font-size:clamp(2.4rem,6.6vw,6rem);}
.cierre__sub{
  margin-top:clamp(22px,2.8vw,36px); font-family:var(--script);
  font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--fg-dim); max-width:30ch;
}
.cta{
  display:inline-flex; align-items:center; gap:1.4rem;
  margin-top:clamp(34px,4.4vw,60px); padding:1.1rem 0 .9rem;
  border-top:1px solid var(--hair-strong); border-bottom:1px solid var(--hair-strong);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.3em;
  transition:letter-spacing .8s var(--ease-out), color .6s var(--ease-out);
}
.cta:hover{letter-spacing:.38em;color:var(--gold);}
.cta__arrow{transition:transform .7s var(--ease-out);}
.cta:hover .cta__arrow{transform:translateX(8px);}
.cierre__nota{
  margin-top:clamp(28px,3.4vw,46px); font-size:.6rem;
  text-transform:uppercase; letter-spacing:.26em; color:var(--fg-faint);
}

/* ---------- 14 · PIE ---------- */
.pie{padding:clamp(46px,6vw,80px) var(--gutter) clamp(30px,4vw,48px);border-top:1px solid var(--hair);}
.pie__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:clamp(26px,3vw,40px);
}
.pie__brand{display:grid;gap:.5rem;}
.pie__brand span:first-child{font-family:var(--serif);font-size:1.05rem;letter-spacing:.16em;}
.pie__sub{font-size:.56rem;letter-spacing:.44em;text-transform:uppercase;color:var(--fg-faint);}
.pie__links{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;}
.pie__links a{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.26em;
  color:var(--fg-dim); padding-bottom:.3rem; border-bottom:1px solid transparent;
  transition:color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.pie__links a:hover{color:var(--fg);border-color:var(--hair-strong);}
.pie__cierre{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-faint);}

/* =============================================================
   8. EFECTOS
   ============================================================= */
@keyframes riseIn{from{transform:translateY(105%);}to{transform:translateY(0);}}
@keyframes softIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity 1.2s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 130ms);
}
[data-reveal].is-revealed{opacity:1;transform:none;}

/* =============================================================
   9. RESPONSIVE
   ============================================================= */
@media (min-width:540px){
  .indice__desc{display:block;justify-self:end;}
  .indice__row a{grid-template-columns:auto 1fr auto auto;}
  .pie__inner{grid-template-columns:1fr auto;align-items:end;}
  .pie__cierre{grid-column:1/-1;padding-top:1.6rem;border-top:1px solid var(--hair);}
}

@media (min-width:720px){
  .hero__grid{grid-template-columns:1.15fr .85fr;align-items:center;}
  .hero__figure{max-width:460px;justify-self:end;}
  .manifiesto{grid-template-columns:1.2fr .8fr;align-items:end;}
  .coleccion__head{grid-template-columns:1fr;}
  .perfil--ingles .perfil__grid{grid-template-columns:1fr 1fr;align-items:center;}
  .perfil__split{grid-template-columns:repeat(2,1fr);}
  .proceso{grid-template-columns:repeat(2,1fr);}
  .antonia__grid{grid-template-columns:.9fr 1.1fr;align-items:start;}
  .visor{grid-template-columns:1.05fr .95fr;align-items:center;}
  .galeria{grid-template-columns:repeat(12,1fr);align-items:start;}
  .galeria__label{grid-column:1/-1;}
  .g--01{grid-column:1/6;}
  .g--02{grid-column:8/12;margin-top:clamp(40px,9vw,140px);}
  .g--03{grid-column:2/7;margin-top:clamp(20px,5vw,70px);}
  .g--04{grid-column:7/13;margin-top:clamp(60px,12vw,190px);}
  .g--05{grid-column:1/4;margin-top:clamp(10px,3vw,40px);}
  .g--06{grid-column:6/11;margin-top:clamp(30px,6vw,90px);}
}

@media (min-width:960px){
  :root{--nav-h:88px;}
  .nav__links{display:flex;}
  .nav__toggle{display:none;}
  .coleccion__head{grid-template-columns:1.3fr .7fr;align-items:end;}
  .coleccion__head .eyebrow{grid-column:1/-1;}
  .personal__head{grid-template-columns:1.3fr .7fr;align-items:end;}
  .personal__head .eyebrow{grid-column:1/-1;}
  .oficio__head{grid-template-columns:1.3fr .7fr;align-items:end;}
  .oficio__head .eyebrow{grid-column:1/-1;}
  .encuentra__body{grid-template-columns:.32fr .68fr;align-items:start;}
  .selector{position:sticky;top:calc(var(--nav-h) + 30px);}

  /* Corte inglés: columna alta a la izquierda, texto y mano escalonados a la derecha */
  .perfil--ingles .perfil__grid{
    grid-template-columns:repeat(12,1fr); align-items:start;
    row-gap:clamp(28px,4vw,56px);
  }
  .perfil--ingles .perfil__hero{grid-column:1/7;grid-row:1/3;align-self:stretch;max-width:none;}
  .perfil--ingles .perfil__hero .ph__frame{height:100%;}   /* la imagen recorre toda la sección */
  .perfil--ingles .perfil__text{grid-column:8/13;grid-row:1;}
  .perfil--ingles .perfil__aside{display:block;grid-column:9/13;grid-row:2;max-width:none;}

  /* Media caña */
  .perfil__banner{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:2.4rem;}
  .perfil__split{grid-template-columns:repeat(12,1fr);}
  .perfil--cana .perfil__col:first-child{grid-column:1/5;}
  .perfil--cana .perfil__col:nth-child(2){grid-column:5/9;}
  .perfil--cana .perfil__tall{grid-column:10/13;margin-top:clamp(-120px,-6vw,0px);}

  /* Redonda: composición orgánica desalineada */
  .perfil__organic{grid-template-columns:repeat(12,1fr);}
  .perfil--redonda .perfil__text--organic{grid-column:1/5;align-self:center;}
  .perfil--redonda .perfil__organic-a{grid-column:6/11;}
  .perfil--redonda .perfil__organic-b{grid-column:10/13;align-self:end;margin-bottom:clamp(20px,4vw,70px);}

  /* Flat: retícula estricta */
  .perfil--flat .perfil__geo{grid-template-columns:repeat(12,1fr);}
  .perfil--flat .perfil__geo-head{grid-column:1/5;}
  .perfil--flat .perfil__geo-a{grid-column:5/13;}
  .perfil--flat .perfil__geo-text{grid-column:5/10;}
  .perfil--flat .perfil__geo-b{grid-column:10/13;}
  .perfil--flat .perfil__tech--geo{grid-column:1/5;grid-row:2;margin-top:0;align-self:start;}

  .proceso{grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);}
  .proceso__paso:nth-child(even){margin-top:clamp(60px,9vw,140px);}
  .antonia__grid{grid-template-columns:.8fr 1.2fr;gap:clamp(50px,7vw,120px);}
  .antonia__retrato{position:sticky;top:calc(var(--nav-h) + 40px);}
}

@media (min-width:1280px){
  .hero__grid{grid-template-columns:1.2fr .8fr;}
  .hero__figure{max-width:520px;}
  .manifiesto{gap:clamp(70px,9vw,160px);}
}

/* =============================================================
   10. REDUCED MOTION — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cue__arrow{animation:none;}
  .hero__title .word{animation:none;}
  .veil__mark{animation:none;}
  [data-parallax]{transform:none !important;}
}