/* =============================================================
   CLARISA MEDINA — Portafolio de Alta Costura
   Hoja de estilos única · HTML5 / CSS3 · sin dependencias
   -------------------------------------------------------------
   01. Tokens de diseño
   02. Reset y base
   03. Tipografía editorial
   04. Cursor personalizado
   05. Preloader (hilo púrpura C·M)
   06. Cortina de transición
   07. Navegación y menú
   08. Hero
   09. Manifiesto
   10. Galería editorial asimétrica
   11. Atelier
   12. Sobre mí
   13. Contacto y footer
   14. CTA sticky (WhatsApp)
   15. Vista de detalle (pantalla dividida)
   16. Animaciones de scroll
   17. Responsive
   18. Accesibilidad / reduced motion / print
   ============================================================= */

/* ───────────── 01. TOKENS ───────────── */
:root{
  /* Fondo — beige alabastro */
  --beige:        #F6F1E9;
  --beige-deep:   #EDE5D8;
  --paper:        #FCFAF6;

  /* Contraste — negro ónix */
  --onyx:         #0B0B0B;
  --onyx-70:      rgba(11,11,11,.70);
  --onyx-45:      rgba(11,11,11,.45);
  --onyx-20:      rgba(11,11,11,.20);
  --hairline:     rgba(11,11,11,.14);

  /* Acento — ciruela / amatista */
  --plum:         #5A2145;
  --plum-vivid:   #8A2F63;
  --plum-soft:    rgba(90,33,69,.12);
  --plum-glass:   rgba(138,47,99,.22);

  /* Tipografía */
  --serif:  "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-alt: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:   "Montserrat", "Neue Haas Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --bleed:  clamp(1.25rem, 6vw, 7.5rem);
  --air:    clamp(6rem, 16vh, 14rem);      /* espacio negativo entre bloques */

  /* Movimiento — lento y dramático, como una pasarela */
  --ease:       cubic-bezier(.19,1,.22,1);
  --ease-soft:  cubic-bezier(.33,.02,.16,1);
  --t-fast:     .45s;
  --t-med:      .9s;
  --t-slow:     1.5s;
  --t-curtain:  1.15s;
}

/* ───────────── 02. RESET Y BASE ───────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--beige);
  color:var(--onyx);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.55vw + .82rem,1.0625rem);
  line-height:1.75;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; }
body.no-scroll{ overflow:hidden; }

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
figure{ margin:0; }
dl,dd{ margin:0; }

::selection{ background:var(--plum); color:var(--beige); }

/* La barra de navegación es fija: al saltar a una sección, deja aire arriba
   para que el titular no quede debajo del menú. */
section[id]{ scroll-margin-top:clamp(4.5rem,9vw,7rem); }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--onyx); color:var(--beige);
  padding:.75rem 1.25rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:1px solid var(--plum-vivid); outline-offset:4px; }

/* ───────────── 03. TIPOGRAFÍA EDITORIAL ───────────── */
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.04; letter-spacing:-.015em; }

.section-head{
  padding:0 var(--bleed);
  max-width:1680px; margin:0 auto calc(var(--air) * .55);
}
.section-head--center{ text-align:center; }
.section-head__index{
  display:block;
  font-size:.6875rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--onyx-45); margin-bottom:1.75rem;
}
.section-head__title{
  font-size:clamp(2.75rem,8vw,7rem);
  margin-bottom:1.5rem;
}
.section-head__note{
  max-width:34ch; color:var(--onyx-70);
  font-size:.9375rem; line-height:1.9;
}
.section-head--center .section-head__note{ margin-inline:auto; }

/* ───────────── 04. CURSOR PERSONALIZADO ───────────── */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:10000;
  pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .4s ease;
  will-change:transform;
}
.cursor{
  width:7px; height:7px; background:var(--onyx);
  margin:-3.5px 0 0 -3.5px;
  transition:opacity .4s ease, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s ease;
}
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--onyx-20);
  display:grid; place-items:center;
  transition:opacity .4s ease, width .5s var(--ease), height .5s var(--ease),
             margin .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.cursor-ring__label{
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--beige); opacity:0; transform:scale(.8);
  transition:opacity .3s ease .1s, transform .4s var(--ease) .1s;
  white-space:nowrap;
}
body.cursor-ready .cursor,
body.cursor-ready .cursor-ring{ opacity:1; }

/* estado hover sobre enlaces / imágenes */
body.cursor-hover .cursor{ width:0; height:0; margin:0; }
body.cursor-hover .cursor-ring{
  width:92px; height:92px; margin:-46px 0 0 -46px;
  background:var(--plum-glass); border-color:transparent;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
body.cursor-hover .cursor-ring__label{ opacity:1; transform:scale(1); }
body.cursor-press .cursor-ring{ transform:scale(.86); }

@media (hover:none),(pointer:coarse){
  .cursor,.cursor-ring{ display:none !important; }
}

/* ───────────── 05. PRELOADER ───────────── */
.preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--beige);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.preloader__inner{ text-align:center; }
.monogram{ width:min(300px,58vw); height:auto; overflow:visible; }

.thread{
  fill:none; stroke:var(--plum); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400);
  animation:draw 1.5s var(--ease-soft) forwards;
}
.thread--c{ --len:340; animation-delay:.25s; }
.thread--m{ --len:420; animation-delay:.85s; }
.thread-knot{
  fill:var(--plum-vivid); opacity:0;
  animation:knot .7s var(--ease) 2.15s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes knot{ from{opacity:0;transform:scale(0);} to{opacity:1;transform:scale(1);} }

.preloader__tagline{
  margin:2.5rem 0 0;
  font-family:var(--serif-alt); font-style:italic;
  font-size:clamp(.95rem,2.2vw,1.25rem); letter-spacing:.04em;
  color:var(--onyx-70);
  opacity:0; transform:translateY(12px);
  animation:fadeUp 1.6s var(--ease) 2.25s forwards;
}
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ───────────── 06. CORTINA DE TRANSICIÓN ───────────── */
.curtain{
  position:fixed; inset:0; z-index:8000;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  pointer-events:none;
}
.curtain span{
  background:var(--plum);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-curtain) var(--ease);
}
.curtain span:nth-child(2){ transition-delay:.08s; background:#4C1B39; }
.curtain span:nth-child(3){ transition-delay:.16s; }

.curtain.is-in span{ transform:scaleY(1); }
.curtain.is-out span{ transform:scaleY(0); transform-origin:bottom; }

/* ───────────── 07. NAVEGACIÓN ───────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.25rem,2.5vw,2.25rem) var(--bleed);
  mix-blend-mode:difference; color:#fff;
  transition:transform .7s var(--ease), opacity .5s ease;
}
.nav.is-hidden{ transform:translateY(-110%); opacity:0; }
.nav.is-plain{ mix-blend-mode:normal; color:var(--onyx); }

.nav__brand{
  font-family:var(--serif); font-size:1.0625rem; letter-spacing:.06em;
}
.nav__brand span{ font-style:italic; margin-left:.4em; }

.nav__links{ display:flex; gap:clamp(1.5rem,3vw,3rem); }
.nav__links a{
  position:relative; font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:.35rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .7s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__toggle{ display:none; width:34px; height:18px; position:relative; }
.nav__toggle span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .6s var(--ease), opacity .3s ease;
}
.nav__toggle span:first-child{ top:2px; }
.nav__toggle span:last-child{ bottom:2px; width:60%; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ width:100%; transform:translateY(-7px) rotate(-45deg); }

/* menú fullscreen */
.menu{
  position:fixed; inset:0; z-index:590;
  background:var(--onyx); color:var(--beige);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);
  visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list{ display:flex; flex-direction:column; gap:clamp(.5rem,2vh,1.25rem); text-align:center; }
.menu__list a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,4rem);
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), color .4s ease;
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu__list a:nth-child(1){ transition-delay:.30s; }
.menu__list a:nth-child(2){ transition-delay:.38s; }
.menu__list a:nth-child(3){ transition-delay:.46s; }
.menu__list a:nth-child(4){ transition-delay:.54s; }
.menu__list a:nth-child(5){ transition-delay:.62s; }
.menu__list a:hover{ color:var(--plum-vivid); font-style:italic; }
.menu__list em{
  font-family:var(--sans); font-style:normal;
  font-size:.625rem; letter-spacing:.3em; vertical-align:super;
  color:var(--plum-vivid); margin-right:.75rem;
}
.menu__foot{
  font-size:.625rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(246,241,233,.4);
  opacity:0; transition:opacity .8s ease .8s;
}
.menu.is-open .menu__foot{ opacity:1; }

/* ───────────── 08. HERO ───────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:-12% 0; z-index:-2; will-change:transform; }
/* El vídeo de origen es de baja resolución (496×368). En vez de estirarlo
   crudo a pantalla completa, se trata como un fondo atmosférico: un ligero
   desenfoque disimula el pixelado y lo vuelve textura en movimiento.
   Si algún día llega un vídeo en HD, basta con bajar el blur a 0. */
.hero__video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);            /* evita los bordes translúcidos del blur */
  filter:grayscale(.45) contrast(1.08) brightness(.78) blur(4px);
}
.hero.no-video .hero__video{ display:none; }

/* Tela animada — fallback vivo cuando no hay vídeo */
.hero__fabric{
  position:absolute; inset:0; opacity:0;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(138,47,99,.30), transparent 60%),
    radial-gradient(100% 80% at 80% 70%, rgba(90,33,69,.42), transparent 62%),
    linear-gradient(115deg,#171216 0%,#2B1D28 35%,#4A2038 65%,#1B1319 100%);
  background-size:180% 180%,180% 180%,240% 240%;
  animation:fabricDrift 26s ease-in-out infinite alternate;
}
.hero.no-video .hero__fabric{ opacity:1; }
@keyframes fabricDrift{
  0%  { background-position:0% 30%, 100% 60%, 0% 50%; }
  50% { background-position:40% 60%, 60% 20%, 60% 40%; }
  100%{ background-position:100% 40%, 0% 80%, 100% 60%; }
}

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,11,.42) 0%, rgba(11,11,11,.20) 40%, rgba(11,11,11,.58) 100%);
}

.hero__content{ position:relative; text-align:center; color:var(--beige); padding:0 var(--gutter); }
.hero__eyebrow{
  font-size:.625rem; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(246,241,233,.72); margin:0 0 clamp(1.25rem,3vh,2.5rem);
}
.hero__title{
  font-size:clamp(3.25rem,15vw,13rem);
  line-height:.92; letter-spacing:-.02em; margin:0;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .word--italic{ font-style:italic; font-weight:400; }
.hero__title .char{
  display:inline-block;
  transition:transform 1.35s var(--ease), opacity 1s ease;
}
.js .hero__title .char{ transform:translateY(115%) rotate(4deg); opacity:0; }
body.is-ready .hero__title .char{ transform:none; opacity:1; }

.hero__tagline{
  margin:clamp(1.5rem,4vh,2.75rem) 0 0;
  font-family:var(--serif-alt); font-style:italic;
  font-size:clamp(1rem,2.6vw,1.5rem); letter-spacing:.05em;
  color:rgba(246,241,233,.86);
}

.hero__scroll{
  position:absolute; bottom:clamp(1.5rem,4vh,3rem); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  color:rgba(246,241,233,.6);
}
.hero__scroll-line{ width:1px; height:clamp(38px,7vh,72px); background:currentColor; overflow:hidden; position:relative; }
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background:var(--plum-vivid);
  animation:scrollPulse 2.8s var(--ease-soft) infinite;
}
@keyframes scrollPulse{
  0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); }
}
.hero__scroll-text{ font-size:.5625rem; letter-spacing:.32em; text-transform:uppercase; }

/* ───────────── 09. MANIFIESTO ───────────── */
.manifesto{
  padding:var(--air) var(--bleed);
  max-width:1180px; margin:0 auto; text-align:center;
}
.manifesto__rule{
  width:1px; height:clamp(3rem,10vh,7rem); background:var(--hairline);
  margin:0 auto clamp(2rem,6vh,4rem);
}
.manifesto__text{
  font-family:var(--serif); font-size:clamp(1.5rem,4.4vw,3.25rem);
  line-height:1.28; letter-spacing:-.01em; margin:0;
}
.manifesto__text em{ display:block; font-style:italic; color:var(--plum); margin-top:.4em; }
.manifesto__sign{
  margin:clamp(2rem,5vh,3.5rem) 0 0;
  font-size:.6875rem; letter-spacing:.34em; text-transform:uppercase; color:var(--onyx-45);
}

/* ───────────── 10. GALERÍA EDITORIAL ASIMÉTRICA ───────────── */
.collections{ padding:calc(var(--air) * .6) 0 var(--air); }

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(3rem,9vh,9rem) var(--gutter);
  padding:0 var(--bleed);
  max-width:1680px; margin:0 auto;
}

.card{
  grid-column:var(--col-start,1) / span var(--col-span,6);
  margin-top:var(--shift,0rem);
  cursor:pointer;
  position:relative;
}
.card__frame{
  position:relative; overflow:hidden;
  aspect-ratio:var(--ratio,3/4);
  background:var(--beige-deep);
}
.card__img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.001);
  filter:brightness(1) saturate(.96);
  transition:transform 1.6s var(--ease), filter 1.2s var(--ease);
  will-change:transform;
}
.card:hover .card__img{ transform:scale(1.05); filter:brightness(.72) saturate(1.02); }

.card__reveal{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:2rem; pointer-events:none;
}
.card__reveal-name{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.75rem); color:var(--plum-vivid);
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.card__reveal-cta{
  display:block; margin-top:1rem;
  font-family:var(--sans); font-size:.5625rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(246,241,233,.85);
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .1s, transform 1.1s var(--ease) .1s;
}
.card:hover .card__reveal-name,
.card:hover .card__reveal-cta{ opacity:1; transform:none; }

/* Etiqueta de borrador — desaparece al poner borrador:false en data.js */
.card__draft{
  position:absolute; top:1rem; left:1rem; z-index:3;
  padding:.45rem .9rem;
  background:var(--plum); color:var(--beige);
  font-size:.5rem; letter-spacing:.28em; text-transform:uppercase;
  pointer-events:none;
}
.detail__index.is-draft{ color:var(--plum-vivid); }

.card__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-top:1.25rem; margin-top:1.25rem;
  border-top:1px solid var(--hairline);
}
.card__title{ font-family:var(--serif); font-size:clamp(1.125rem,2vw,1.5rem); }
.card__year{ font-size:.625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--onyx-45); }
.card__tag{
  display:block; margin-top:.35rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--onyx-45);
  transition:color .5s ease;
}
.card:hover .card__tag{ color:var(--plum); }

/* ───────────── 11. ATELIER ───────────── */
.atelier{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem); align-items:center;
  padding:var(--air) var(--bleed);
  max-width:1680px; margin:0 auto;
}
/* Sin esto, la imagen impone su ancho intrínseco y aplasta la columna de texto */
.atelier > *{ min-width:0; }
.atelier__media{ overflow:hidden; aspect-ratio:4/3; background:var(--beige-deep); }
.atelier__media img{ width:100%; height:100%; object-fit:cover; }

.steps{ margin-top:clamp(2rem,5vh,3.5rem); display:grid; gap:clamp(1.75rem,4vh,3rem); }
.steps li{ display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:1rem; align-items:start; }
.steps__n{
  font-family:var(--serif); font-style:italic; font-size:1.125rem; color:var(--plum);
  padding-top:.2rem;
}
/* El <li> tiene 3 hijos (numeral, h3, p). Sin esto, la colocación automática
   manda el párrafo a la columna estrecha del numeral y rompe palabra a palabra. */
.steps h3,
.steps p{ grid-column:2; }
.steps h3{ font-size:1.1875rem; margin-bottom:.5rem; }
.steps p{ margin:0; color:var(--onyx-70); font-size:.9375rem; line-height:1.85; max-width:46ch; }

/* ───────────── 12. SOBRE MÍ ───────────── */
.about{ padding:var(--air) 0; background:var(--paper); }
.about__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,7rem); align-items:start;
  padding:0 var(--bleed); max-width:1680px; margin:0 auto;
}
.about__portrait{ overflow:hidden; }
.about__portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--beige-deep); }
.about__portrait figcaption{
  margin-top:1rem; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--onyx-45);
}
.about__text p{ color:var(--onyx-70); margin:0 0 1.5rem; max-width:60ch; }
.about__lead{
  font-family:var(--serif); font-size:clamp(1.375rem,3vw,2.125rem);
  line-height:1.35; color:var(--onyx) !important; margin-bottom:2rem !important;
}
.about__quote{
  margin:2.5rem 0; padding-left:clamp(1.25rem,3vw,2.5rem);
  border-left:1px solid var(--plum);
  font-family:var(--serif-alt); font-style:italic;
  font-size:clamp(1.125rem,2.4vw,1.625rem); line-height:1.5; color:var(--plum);
  max-width:44ch;
}

/* Trayectoria */
.milestones{
  padding:clamp(3.5rem,10vh,7rem) var(--bleed) 0;
  max-width:1680px; margin:0 auto;
}
.milestones .section-head__index{ text-align:center; margin-bottom:clamp(2rem,5vh,3.5rem); }
.milestones__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,4rem);
}
.milestone img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  background:var(--beige-deep);
}
.milestone figcaption{
  display:flex; flex-direction:column; gap:.4rem;
  padding-top:1.1rem; margin-top:1.1rem;
  border-top:1px solid var(--hairline);
}
.milestone figcaption strong{
  font-family:var(--serif); font-weight:400; font-size:1.0625rem;
}
.milestone figcaption span{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--onyx-45);
  line-height:1.9;
}

.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gutter); text-align:center;
  padding:clamp(3rem,9vh,6rem) var(--bleed) 0;
  max-width:1180px; margin:0 auto;
}
.stats strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.25rem,6vw,4.25rem); line-height:1; color:var(--plum);
}
.stats span{
  display:block; margin-top:.85rem;
  font-size:.625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--onyx-45);
}

/* ───────────── 13. CONTACTO Y FOOTER ───────────── */
.contact{
  background:var(--onyx); color:var(--beige);
  padding:var(--air) var(--bleed);
}
.contact__inner{ max-width:1080px; margin:0 auto; text-align:center; }
.contact .section-head__index{ color:rgba(246,241,233,.45); }
.contact__title{
  font-family:var(--serif); font-size:clamp(2.5rem,8vw,6.5rem); line-height:1.02; margin:0 0 1.75rem;
}
.contact__title em{ font-style:italic; color:var(--plum-vivid); }
.contact__note{
  max-width:46ch; margin:0 auto; color:rgba(246,241,233,.66); font-size:.9375rem; line-height:1.9;
}
.contact__actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.contact__social{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); justify-content:center;
  margin-top:clamp(3rem,8vh,5rem);
}
.contact__social a{
  font-size:.625rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(246,241,233,.6); padding-bottom:.3rem; border-bottom:1px solid transparent;
  transition:color .5s ease, border-color .5s ease;
}
.contact__social a:hover{ color:var(--plum-vivid); border-color:var(--plum-vivid); }

/* Botones */
.btn{
  position:relative; overflow:hidden; display:inline-block;
  padding:1.15rem 2.5rem;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  border:1px solid transparent; transition:color .6s var(--ease), border-color .6s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn--solid{ background:var(--plum); color:var(--beige); }
.btn--solid::before{
  content:""; position:absolute; inset:0; background:var(--plum-vivid);
  transform:scaleX(0); transform-origin:right; transition:transform .8s var(--ease);
}
.btn--solid:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn--ghost{ border-color:rgba(246,241,233,.32); color:rgba(246,241,233,.86); }
.btn--ghost:hover{ border-color:var(--plum-vivid); color:var(--plum-vivid); }

.footer{
  background:var(--onyx); color:rgba(246,241,233,.42);
  padding:0 var(--bleed) clamp(2.5rem,6vh,4rem);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:baseline; justify-content:space-between;
  border-top:1px solid rgba(246,241,233,.10); margin-top:0;
}
.footer__brand{
  font-family:var(--serif); font-size:1rem; letter-spacing:.06em; color:var(--beige);
  padding-top:clamp(2rem,5vh,3rem); margin:0;
}
.footer__legal{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; margin:0; padding-top:clamp(2rem,5vh,3rem); }

/* ───────────── 14. CTA STICKY ───────────── */
.cta-sticky{
  position:fixed; right:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2.5rem);
  z-index:700;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 1.6rem;
  background:var(--plum); color:var(--beige);
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  box-shadow:0 18px 48px rgba(90,33,69,.32);
  transition:transform 1s var(--ease), opacity .7s ease, background .6s var(--ease);
}
.js .cta-sticky{ transform:translateY(140%); opacity:0; }
.cta-sticky.is-visible{ transform:none; opacity:1; }
.cta-sticky:hover{ background:var(--plum-vivid); }
.cta-sticky__dot{
  width:6px; height:6px; border-radius:50%; background:var(--beige);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

/* ───────────── 15. VISTA DE DETALLE ───────────── */
.detail{
  position:fixed; inset:0; z-index:750;
  display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  background:var(--beige);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-med) var(--ease), visibility var(--t-med);
}
.detail.is-open{ opacity:1; visibility:visible; }

.detail__close{
  position:absolute; top:clamp(1.25rem,2.5vw,2.25rem); right:clamp(1.25rem,3vw,2.5rem);
  z-index:20; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--beige);
  transition:background .5s ease, transform .5s var(--ease);
}
.detail__close span{
  position:absolute; width:17px; height:1px; background:var(--onyx); transition:background .4s ease;
}
.detail__close span:first-child{ transform:rotate(45deg); }
.detail__close span:last-child{ transform:rotate(-45deg); }
.detail__close:hover{ background:var(--plum); transform:rotate(90deg); }
.detail__close:hover span{ background:var(--beige); }

.detail__pane{ overflow-y:auto; overscroll-behavior:contain; }
.detail__pane--info{ padding:clamp(3.5rem,9vh,7rem) clamp(1.75rem,4vw,4.5rem); }
.detail__info-inner{
  max-width:44ch;
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease) .35s, transform 1.2s var(--ease) .35s;
}
.detail.is-open .detail__info-inner{ opacity:1; transform:none; }

.detail__index{ font-size:.625rem; letter-spacing:.34em; text-transform:uppercase; color:var(--plum); }
.detail__title{ font-size:clamp(2.25rem,5vw,3.75rem); margin:1.25rem 0 .5rem; }
.detail__year{
  margin:0 0 2.5rem; font-size:.625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--onyx-45);
}
.detail__story{ color:var(--onyx-70); margin:0 0 3rem; }

.detail__block{ padding-top:2.25rem; margin-top:2.25rem; border-top:1px solid var(--hairline); }
.detail__block h3{
  font-family:var(--sans); font-weight:400;
  font-size:.625rem; letter-spacing:.32em; text-transform:uppercase; color:var(--onyx-45);
  margin-bottom:1.25rem;
}
.detail__mood{ margin:0 0 1.5rem; color:var(--onyx-70); font-size:.9375rem; }

.swatches{ display:flex; gap:.6rem; }
.swatches li{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hairline);
  transition:transform .6s var(--ease);
}
.swatches li:hover{ transform:scale(1.18); }

.specs{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem 1.5rem; font-size:.875rem; }
.specs dt{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--onyx-45); padding-top:.2rem; }
.specs dd{ color:var(--onyx); }

.detail__cta{ margin-top:3rem; }

.detail__pane--gallery{
  position:relative; background:var(--onyx);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.detail__slides{
  flex:1; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.detail__slides::-webkit-scrollbar{ display:none; }
.detail__slide{
  flex:0 0 100%; scroll-snap-align:center;
  display:grid; place-items:center; padding:clamp(2rem,5vh,4.5rem);
}
.detail__slide img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(1.04); filter:blur(12px);
  transition:opacity 1.4s var(--ease), transform 1.8s var(--ease), filter 1.4s var(--ease);
}
.detail__slide.is-shown img{ opacity:1; transform:none; filter:none; }

/* Barra de progreso — orienta cuando la colección tiene muchas fotos */
.detail__progress{
  height:1px; background:rgba(246,241,233,.14); flex:0 0 auto;
}
.detail__progress span{
  display:block; height:100%; width:0;
  background:var(--plum-vivid);
  transition:width .6s var(--ease);
}

.detail__nav{
  display:flex; align-items:center; justify-content:center; gap:1.75rem;
  padding:1.25rem; border-top:1px solid rgba(246,241,233,.10);
  color:rgba(246,241,233,.7);
}
.detail__nav button{
  width:40px; height:40px; border:1px solid rgba(246,241,233,.2); border-radius:50%;
  transition:background .5s var(--ease), border-color .5s ease, color .4s ease;
}
.detail__nav button:hover{ background:var(--plum); border-color:var(--plum); color:var(--beige); }
.detail__counter{ font-size:.625rem; letter-spacing:.26em; }

/* ───────────── 16. ANIMACIONES DE SCROLL ───────────── */
.js .reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity 1.2s var(--ease), transform 1.4s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.js .reveal-blur img,
.js .reveal-blur.is-media{
  filter:blur(16px); transform:scale(1.06); opacity:.4;
  transition:filter 1.8s var(--ease), transform 2.2s var(--ease), opacity 1.4s var(--ease);
}
.reveal-blur.is-in img,
.reveal-blur.is-in.is-media{ filter:blur(0); transform:none; opacity:1; }

.js .card{
  opacity:0; transform:translateY(56px);
  transition:opacity 1.4s var(--ease), transform 1.6s var(--ease);
  transition-delay:var(--d,0ms);
}
.card.is-in{ opacity:1; transform:none; }

[data-parallax]{ will-change:transform; }

/* ───────────── 17. RESPONSIVE ───────────── */
@media (max-width:1100px){
  .detail{ grid-template-columns:1fr; grid-template-rows:minmax(0,45vh) minmax(0,1fr); }
  .detail__pane--gallery{ order:-1; }
  .detail__pane--info{ padding-top:3rem; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .atelier{ grid-template-columns:1fr; }
  .atelier__media{ aspect-ratio:3/2; }
  .about__grid{ grid-template-columns:1fr; }
  .about__portrait{ max-width:420px; }
  .grid{ gap:clamp(2.5rem,7vh,5rem) var(--gutter); }
  .card{
    grid-column:var(--col-start-m,1) / span var(--col-span-m,12);
    margin-top:var(--shift-m,0);
  }
}

@media (max-width:640px){
  :root{ --air:clamp(4rem,12vh,7rem); }
  .card{ grid-column:1 / span 12 !important; margin-top:0 !important; }
  .stats{ grid-template-columns:1fr; gap:2.5rem; }
  .milestones__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .cta-sticky{ left:1rem; right:1rem; justify-content:center; }
  .footer{ flex-direction:column; }
  .footer__legal{ padding-top:0; }
  .contact__actions .btn{ width:100%; text-align:center; }
}

/* ── Respaldo sin JavaScript ──
   Si el JS falla o está desactivado, el sitio se ve completo:
   sin preloader que tape, sin elementos en opacidad 0. */
.no-js .preloader,
.no-js .curtain,
.no-js .cursor,
.no-js .cursor-ring,
.no-js .nav__toggle{ display:none !important; }
.no-js body.is-loading{ overflow:auto; }
.no-js .collections{ display:none; }   /* la galería la inyecta el JS */

/* ───────────── 18. ACCESIBILIDAD ───────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal,.card{ opacity:1 !important; transform:none !important; }
  .reveal-blur img{ filter:none !important; transform:none !important; opacity:1 !important; }
  .hero__title .char{ opacity:1 !important; transform:none !important; }
  .detail__slide img{ opacity:1 !important; filter:none !important; transform:none !important; }
  [data-parallax]{ transform:none !important; }
}

@media print{
  .preloader,.curtain,.cursor,.cursor-ring,.cta-sticky,.nav,.menu,.detail{ display:none !important; }
  body{ background:#fff; }
  .reveal,.card{ opacity:1 !important; transform:none !important; }
}