/* ============================================================
   CASA LEGADO — Sitio
   Layered on top of casa-legado.css (tokens + primitives).
   Site chrome: nav · telón de entrada · hero · secciones · pie
   ============================================================ */

/* ---- Page entrance fade (cortes / fundidos entre páginas) -- */
.page-fade{
  position:fixed; inset:0; z-index:120;
  background:var(--umber);
  pointer-events:none;
  opacity:1;
  transition:opacity 1.1s var(--ease);
}
html.page-ready .page-fade{ opacity:0; }
html.page-leaving .page-fade{ opacity:1; pointer-events:auto; transition:opacity .7s var(--ease); }
/* Hard fallback: if CSS transitions are NOT advancing (capture engine /
   backgrounded tab / offscreen iframe) the probe adds `settled` — release the
   entrance overlay immediately so content is never trapped behind it. */
html.settled .page-fade{ opacity:0 !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .page-fade{ transition:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; z-index:80;
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:2em;
  padding:clamp(18px,2.4vh,30px) var(--gutter);
  transition:background .8s var(--ease), border-color .8s var(--ease), padding .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-condensed{
  background:rgba(20,16,13,.78);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--umber-line);
  padding-top:clamp(12px,1.8vh,20px);
  padding-bottom:clamp(12px,1.8vh,20px);
}
.nav__brand{
  display:flex; align-items:center; gap:.85em;
  text-decoration:none;
  color:var(--ink-on-dark);
}
/* isótipo: marco-retrato + CL plano (fiel al Brandbook), inyectado en cada .monogram */
.monogram{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.monogram .iso{ width:auto; height:1.32em; display:block; overflow:visible; }
.nav__seal{
  flex:none;
  display:flex; align-items:center; justify-content:center;
}
.nav__seal .monogram{ font-size:26px; color:var(--bone); transition:color .5s var(--ease); }
.nav__brand:hover .nav__seal .monogram{ color:var(--brass-soft); }
.nav__wordmark{
  font-family:var(--serif); font-weight:400;
  font-size:18px; letter-spacing:.26em; text-transform:uppercase;
  line-height:1; padding-top:2px;
}
.nav__links{
  display:flex; align-items:center; gap:clamp(18px,2vw,38px);
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-on-dark-2); text-decoration:none;
  position:relative; padding:4px 0; white-space:nowrap;
  transition:color .5s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--brass);
  transition:right .5s var(--ease);
}
.nav__links a:hover{ color:var(--ink-on-dark); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; }
.nav__links a[aria-current="page"]{ color:var(--brass-soft); }
.nav__cta{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  border:1px solid var(--brass);
  padding:.85em 1.4em;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.nav__cta:hover{ background:var(--brass); color:var(--umber); }

/* mobile menu toggle */
.nav__toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-on-dark);
  padding:6px 0;
}

@media (max-width:920px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .nav.is-open{ background:rgba(20,16,13,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .nav__panel{
    position:fixed; inset:0; z-index:79;
    background:var(--umber);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1.6em;
    opacity:0; pointer-events:none;
    visibility:hidden;
    transition:opacity .6s var(--ease), visibility 0s .6s;
  }
  .nav__panel.is-open{ opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
  .nav__panel a{
    font-family:var(--serif); font-size:clamp(28px,7vw,44px); letter-spacing:.04em;
    color:var(--ink-on-dark); text-decoration:none;
  }
  .nav__panel a.en{ display:none; }
  .nav__panel .nav__cta{ display:inline-block; margin-top:1em; font-family:var(--mono); font-size:13px; }
}
.nav__panel{ display:none; }
@media (max-width:920px){ .nav__panel{ display:flex; } }

/* Telón de entrada: ahora es el rollo de película (.reel-intro), autónomo en
   index.html (estilos + markup + script). El antiguo .curtain se retiró. */

/* ============================================================
   HERO  (key art — full bleed still + frase ancla)
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:clamp(110px,16vh,200px) var(--gutter) clamp(70px,11vh,120px);
  overflow:hidden;
}
.hero__still{
  position:absolute; inset:-8% 0 -8% 0;   /* overscan for parallax */
  z-index:0;
  background:
    repeating-linear-gradient(128deg, rgba(154,107,71,.10) 0 2px, transparent 2px 11px),
    radial-gradient(120% 90% at 64% 32%, #3a2c20 0%, #241b14 42%, #16110d 100%);
  will-change:transform;
}
.hero__still::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,13,.30) 0%, rgba(20,16,13,.05) 38%, rgba(20,16,13,.72) 100%),
    radial-gradient(120% 120% at 50% 40%, transparent 46%, rgba(0,0,0,.62) 100%);
}
.hero__stilltag{
  position:absolute; z-index:2; top:clamp(96px,13vh,150px); right:var(--gutter);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
  display:flex; align-items:center; gap:.7em;
}
.hero__stilltag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--oxblood); box-shadow:0 0 8px var(--oxblood); }
@media (max-width:560px){ .hero__stilltag{ display:none; } } /* en pantallas chicas se encima con el kicker */

.hero__content{ position:relative; z-index:3; width:100%; max-width:1380px; margin:0 auto; }
.hero__kicker{ margin-bottom:clamp(22px,3vh,34px); }
.hero__frase{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(52px,9vw,150px); line-height:.95; letter-spacing:-.012em;
  color:var(--bone); text-wrap:balance;
}
.hero__frase em{ font-style:normal; color:inherit; }
.hero__sub{
  margin-top:clamp(26px,4vh,44px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2em; flex-wrap:wrap;
}
.hero__sub .body{ max-width:46ch; margin:0; color:var(--ink-on-dark-2); font-size:clamp(16px,1.2vw,20px); }
.hero__sub .en{ display:block; margin-top:.6em; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }

/* play / trailer affordance */
.play{
  display:inline-flex; align-items:center; gap:1em;
  text-decoration:none; color:var(--ink-on-dark);
  background:none; border:0; cursor:pointer; padding:0;
  flex:none;
}
.play__ring{
  width:clamp(56px,5vw,76px); height:clamp(56px,5vw,76px);
  border:1px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:background .55s var(--ease), border-color .55s var(--ease);
}
.play__ring::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--brass); opacity:.0;
  animation:none;
}
.play__tri{
  width:0; height:0;
  border-left:13px solid var(--brass);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  margin-left:4px;
  transition:border-left-color .55s var(--ease);
}
.play:hover .play__ring{ background:var(--brass); }
.play:hover .play__tri{ border-left-color:var(--umber); }
.play__label{ text-align:left; }
.play__label b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.5vw,24px); letter-spacing:.02em; }
.play__label span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-3); }

/* scroll cue */
.scrollcue{
  position:absolute; z-index:3; left:50%; bottom:clamp(20px,3vh,34px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.8em;
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
}
.scrollcue__line{ width:1px; height:42px; background:linear-gradient(var(--brass), transparent); animation:drop 2.6s var(--ease) infinite; }
@keyframes drop{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.5;} 50%{ transform:scaleY(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .scrollcue__line{ animation:none; } }

/* ============================================================
   SECTION SHELL  (reuses .chapter, plus site rhythm)
   ============================================================ */
.section{
  position:relative;
  padding:clamp(90px,15vh,190px) var(--gutter);
  overflow:hidden;
}
.section--light{ background:var(--bone); color:var(--ink-on-light); }
.section--paper{ background:var(--bone-deep); color:var(--ink-on-light); }
.section .slate{ position:static; margin-bottom:clamp(40px,7vh,90px); }

/* ============================================================
   MANIFESTO FRAGMENT
   ============================================================ */
.manifest{ max-width:1100px; margin:0 auto; text-align:center; }
.manifest .lede{ font-size:clamp(30px,4.6vw,72px); line-height:1.14; color:var(--bone); }
.manifest .lede em{ color:inherit; }
.manifest .body{ max-width:60ch; margin:clamp(30px,4vh,48px) auto 0; }
.manifest .en{ margin-top:1.8em; }
.morelink{
  display:inline-flex; align-items:center; gap:.7em;
  margin-top:clamp(34px,5vh,56px);
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-soft); text-decoration:none;
}
.morelink .arrow{ width:2.6em; height:1px; background:var(--brass); position:relative; transition:width .5s var(--ease); }
.morelink:hover .arrow{ width:3.6em; }

/* ============================================================
   ADELANTO DE MODELOS
   ============================================================ */
.models-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2em; flex-wrap:wrap; margin-bottom:clamp(30px,5vh,56px); }
.models-list{ border-top:1px solid var(--bone-line); }
.section:not(.section--light):not(.section--paper) .models-list{ border-top-color:var(--umber-line); }
.model-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:baseline; gap:clamp(16px,2.4vw,52px);
  padding:clamp(26px,3.4vh,40px) 0;
  border-bottom:1px solid var(--bone-line);
  text-decoration:none; color:inherit;
  position:relative;
  transition:padding-left .55s var(--ease);
}
.section:not(.section--light):not(.section--paper) .model-row{ border-bottom-color:var(--umber-line); }
.model-row:hover{ padding-left:clamp(8px,1.4vw,22px); }
.model-row__no{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--brass-deep); }
.model-row__name{ font-family:var(--serif); font-size:clamp(28px,3vw,50px); font-weight:400; line-height:1; }
.model-row__name .en{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-on-light-3); margin-top:.6em; }
.section:not(.section--light):not(.section--paper) .model-row__name .en{ color:var(--ink-on-dark-3); }
.model-row__dur{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-on-light-3); white-space:nowrap; }
.section:not(.section--light):not(.section--paper) .model-row__dur{ color:var(--ink-on-dark-3); }
.model-row__price{ font-family:var(--serif); font-size:clamp(20px,1.8vw,30px); white-space:nowrap; }
.model-row__price small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-on-light-3); display:block; text-align:right; margin-top:.2em; }
.section:not(.section--light):not(.section--paper) .model-row__price small{ color:var(--ink-on-dark-3); }
.models-note{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-on-light-3); margin-top:clamp(22px,3vh,34px); }
.section:not(.section--light):not(.section--paper) .models-note{ color:var(--ink-on-dark-3); }

@media (max-width:760px){
  .model-row{ grid-template-columns:auto 1fr; row-gap:.4em; }
  .model-row__dur{ grid-column:2; }
  .model-row__price{ grid-column:1 / -1; text-align:left; }
  .model-row__price small{ text-align:left; }
}

/* ============================================================
   PRUEBA EMOCIONAL
   ============================================================ */
.proof{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,100px); align-items:center; }
.proof__frame{ aspect-ratio:4/5; }
.proof__quote{ font-family:var(--sans); font-style:normal; font-weight:400; font-size:clamp(28px,3.4vw,56px); line-height:1.26; color:var(--bone); text-wrap:pretty; }
.proof__quote em{ color:inherit; font-style:normal; }
.proof__attr{ margin-top:clamp(26px,4vh,44px); display:flex; align-items:center; gap:1em; }
.proof__attr .line{ width:38px; height:1px; background:var(--brass); }
.proof__attr .who{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-3); }
@media (max-width:860px){
  .proof{ grid-template-columns:1fr; }
  .proof__frame{ aspect-ratio:16/10; order:2; }
}

/* ============================================================
   LLAMADO A CONVERSAR
   ============================================================ */
.converse{ text-align:center; max-width:1000px; margin:0 auto; }
.converse .monogram{ font-size:clamp(40px,5vw,68px); color:var(--bone); margin:0 auto clamp(28px,4vh,46px); }
.converse h2{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,7vw,120px); line-height:.96; letter-spacing:-.01em; color:var(--bone); }
.converse h2 em{ font-style:normal; color:inherit; }
.converse .lede{ margin:clamp(24px,4vh,40px) auto 0; max-width:36ch; }
.btn{
  display:inline-flex; align-items:center; gap:1em;
  margin-top:clamp(36px,5vh,60px);
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--umber); background:var(--brass);
  text-decoration:none; padding:1.15em 2.2em;
  border:1px solid var(--brass);
  transition:background .55s var(--ease), color .55s var(--ease);
}
.btn:hover{ background:transparent; color:var(--brass); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--umber-line); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass); background:transparent; }
.converse__contact{ margin-top:clamp(32px,5vh,50px); font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--ink-on-dark-3); display:flex; gap:2.2em; justify-content:center; flex-wrap:wrap; }
.converse__contact .ph{ color:var(--ink-on-dark-2); }

/* ============================================================
   PIE / FOOTER
   ============================================================ */
.site-footer{
  position:relative;
  background:var(--umber);
  border-top:1px solid var(--umber-line);
  padding:clamp(60px,10vh,110px) var(--gutter) clamp(34px,5vh,54px);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(34px,5vw,80px);
  max-width:1380px; margin:0 auto;
  padding-bottom:clamp(44px,7vh,80px);
  border-bottom:1px solid var(--umber-line);
}
.footer-brand .monogram{ font-size:40px; color:var(--bone); }
.footer-brand .wordmark{ font-size:24px; letter-spacing:.22em; margin-top:.6em; }
.footer-brand .tag{ font-family:var(--sans); font-style:normal; font-size:18px; color:var(--ink-on-dark-2); margin-top:.8em; }
.footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:1.4em; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85em; }
.footer-col a, .footer-col .ph{ font-family:var(--sans); font-weight:300; font-size:15px; color:var(--ink-on-dark-2); text-decoration:none; transition:color .4s var(--ease); }
.footer-col a:hover{ color:var(--bone); }
.footer-col .ph b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-3); font-weight:400; margin-bottom:.3em; }
.colophon-row{
  display:flex; align-items:center; justify-content:space-between; gap:1.5em; flex-wrap:wrap;
  max-width:1380px; margin:clamp(28px,4vh,40px) auto 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
}

@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .hero__sub{ flex-direction:column; align-items:flex-start; }
}

/* the persistent filmstrip rail needs a small timecode tag near it */
.tc-rail{
  position:fixed; z-index:66; left:14px; bottom:18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-on-dark-3);
  writing-mode:vertical-rl; transform:rotate(180deg);
  pointer-events:none;
  transition:color .8s var(--ease);
}

/* ============================================================
   PAGE HERO  (cabecera de páginas interiores)
   ============================================================ */
.page-hero{
  position:relative;
  padding:clamp(150px,24vh,260px) var(--gutter) clamp(60px,9vh,110px);
  overflow:hidden;
}
.page-hero__inner{ max-width:1380px; margin:0 auto; }
.page-hero .display{ color:var(--bone); }
.page-hero .display em{ font-style:normal; color:inherit; }
.page-hero .lede{ max-width:30ch; margin-top:clamp(24px,3.6vh,40px); }
.page-hero__meta{
  display:flex; align-items:baseline; gap:1em;
  margin-top:clamp(30px,4vh,52px); padding-top:clamp(20px,2.6vh,30px);
  border-top:1px solid var(--umber-line);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-on-dark-3);
}
.page-hero__meta .seq{ color:var(--brass); }

/* ============================================================
   PROSA CINEMATOGRÁFICA  (La Casa)
   ============================================================ */
.prose{ max-width:1180px; margin:0 auto; }
.prose__lead{
  font-family:var(--sans); font-style:normal; font-weight:400;
  font-size:clamp(28px,3.6vw,56px); line-height:1.2;
  text-wrap:pretty; margin-bottom:clamp(36px,5vh,60px);
}
.prose__cols{ columns:2; column-gap:clamp(40px,5vw,90px); }
.prose__cols p{ margin:0 0 1.3em; break-inside:avoid; }
.prose__cols p:first-child::first-letter{
  font-family:var(--serif); font-size:3.4em; line-height:.8; float:left;
  padding:.06em .12em 0 0; color:var(--brass);
}
@media (max-width:760px){ .prose__cols{ columns:1; } }

/* archetype block */
.archetype{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center; }
.archetype__frame{ aspect-ratio:4/5; }
.archetype h3{ margin-top:.4em; }
@media (max-width:860px){ .archetype{ grid-template-columns:1fr; } .archetype__frame{ aspect-ratio:16/10; } }

/* ============================================================
   MODELOS — detalle
   ============================================================ */
.model{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,90px);
  padding:clamp(48px,8vh,104px) 0;
  border-bottom:1px solid var(--umber-line);
  align-items:start;
}
.model:first-of-type{ border-top:1px solid var(--umber-line); }
.model__index{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--brass); padding-top:.6em; }
.model__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2em; flex-wrap:wrap; margin-bottom:clamp(28px,4vh,44px); }
.model__title{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,5vw,82px); line-height:.96; }
.model__title .en{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-3); margin-top:.7em; }
.model__price{ text-align:right; }
.model__price b{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3vw,52px); color:var(--brass); display:block; line-height:1; }
.model__price span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-on-dark-3); }
.model__body{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,4vw,64px); }
.model__lede{ font-family:var(--sans); font-style:normal; font-weight:400; font-size:clamp(20px,2vw,30px); line-height:1.38; color:var(--ink-on-dark); text-wrap:pretty; }
.model__meta{ margin-top:clamp(22px,3vh,34px); display:flex; gap:2.4em; flex-wrap:wrap; }
.model__meta .item b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:.5em; }
.model__meta .item span{ font-family:var(--sans); font-weight:300; font-size:15px; color:var(--ink-on-dark-2); }
.model__includes h3, .model__includes h4{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:1.2em; }
.model__includes ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9em; }
.model__includes li{ display:grid; grid-template-columns:auto 1fr; gap:.8em; font-size:15px; line-height:1.5; color:var(--ink-on-dark-2); border-bottom:1px solid var(--umber-line); padding-bottom:.9em; }
.model__includes li::before{ content:"·"; color:var(--brass); }
@media (max-width:860px){ .model{ grid-template-columns:1fr; } .model__index{ padding-top:0; } .model__body{ grid-template-columns:1fr; } }

.addons{
  margin-top:clamp(48px,7vh,90px);
  border:1px solid var(--umber-line); background:var(--umber-card);
  padding:clamp(32px,5vw,60px);
}
.addons h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,40px); margin-bottom:.6em; }
.addons__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px); margin-top:clamp(24px,3vh,38px); }
.addons__grid .a b{ display:block; font-family:var(--serif); font-size:20px; margin-bottom:.4em; }
.addons__grid .a span{ font-size:14px; line-height:1.6; color:var(--ink-on-dark-2); }
@media (max-width:760px){ .addons__grid{ grid-template-columns:1fr; } }

/* ============================================================
   PROCESO — línea de tiempo cinematográfica
   ============================================================ */
.timeline{ max-width:1180px; margin:0 auto; position:relative; }
.timeline::before{
  content:""; position:absolute; top:0; bottom:0; left:clamp(56px,7vw,120px);
  width:1px; background:var(--umber-line);
}
.stage{
  position:relative;
  display:grid; grid-template-columns:clamp(56px,7vw,120px) 1fr;
  gap:clamp(28px,4vw,72px);
  padding:clamp(40px,7vh,90px) 0;
}
.stage__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--brass-soft);
  position:relative;
}
.stage__no::after{
  content:""; position:absolute; top:.2em; left:calc(clamp(56px,7vw,120px) - .5em - 5px);
  width:9px; height:9px; border-radius:50%; background:var(--brass);
  box-shadow:0 0 0 4px var(--umber), 0 0 14px rgba(180,106,90,.7);
  transform:translateX(0);
}
.stage__body{ max-width:62ch; }
.stage__title{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,56px); line-height:1; }
.stage__title .en{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-on-dark-3); margin-top:.7em; }
.stage__txt{ font-size:clamp(15px,1.1vw,18px); line-height:1.74; color:var(--ink-on-dark-2); margin-top:clamp(16px,2vh,24px); }
.stage__dur{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-on-dark-2); margin-top:1.4em; display:inline-block; }
@media (max-width:620px){
  .timeline::before{ left:8px; }
  .stage{ grid-template-columns:1fr; gap:.6em; }
  .stage__no{ padding-left:28px; }
  .stage__no::after{ left:4px; }
}

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,22px); max-width:1500px; margin:0 auto; }
.gframe{ position:relative; overflow:hidden; }
.gframe .frame{ width:100%; height:100%; }
.gframe--wide{ grid-column:span 4; aspect-ratio:16/9; }
.gframe--tall{ grid-column:span 2; aspect-ratio:3/4; }
.gframe--sq{ grid-column:span 2; aspect-ratio:1/1; }
.gframe--half{ grid-column:span 3; aspect-ratio:3/2; }
.gframe__play{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.gframe__play span{
  width:60px; height:60px; border:1px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,13,.4); transition:background .5s var(--ease);
}
.gframe__play span::before{ content:""; width:0; height:0; border-left:13px solid var(--brass); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }
.gframe:hover .gframe__play span{ background:var(--brass); }
.gframe:hover .gframe__play span::before{ border-left-color:var(--umber); }
@media (max-width:860px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gframe--wide,.gframe--half{ grid-column:span 2; aspect-ratio:16/10; }
  .gframe--tall,.gframe--sq{ grid-column:span 1; }
}

/* ============================================================
   CONTACTO — formulario
   ============================================================ */
.contact{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(48px,7vw,120px); max-width:1300px; margin:0 auto; align-items:start; }
.cform{ display:grid; gap:clamp(22px,3vh,32px); }
.cfield{ display:grid; gap:.7em; }
.cfield label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); }
.cfield input, .cfield textarea, .cfield select{
  background:transparent; border:0; border-bottom:1px solid var(--umber-line);
  color:var(--ink-on-dark); font-family:var(--sans); font-weight:300; font-size:clamp(16px,1.4vw,20px);
  padding:.6em 0; width:100%;
  transition:border-color .5s var(--ease);
}
.cfield input::placeholder, .cfield textarea::placeholder{ color:var(--ink-on-dark-3); }
.cfield input:focus, .cfield textarea:focus, .cfield select:focus{ outline:none; border-bottom-color:var(--brass); }
.cfield select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.cfield select option{ background:var(--umber); color:var(--ink-on-dark); }
.cfield textarea{ resize:vertical; min-height:90px; }
.cform .btn{ justify-self:start; margin-top:clamp(8px,1vh,16px); border:0; cursor:pointer; }
.contact__aside .h3{ color:var(--bone); }
.contact__detail{ margin-top:clamp(28px,4vh,44px); display:grid; gap:1.6em; }
.contact__detail .d b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:.5em; }
.contact__detail .d span{ font-family:var(--sans); font-weight:300; font-size:16px; color:var(--ink-on-dark-2); }
.contact__close{ font-family:var(--sans); font-style:normal; font-weight:400; font-size:clamp(20px,1.9vw,28px); line-height:1.44; color:var(--ink-on-dark); margin-top:clamp(34px,5vh,52px); padding-top:clamp(26px,3.6vh,40px); border-top:1px solid var(--umber-line); }
.contact__close em{ color:inherit; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }

/* form sent note */
.cform__sent{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--brass-soft); margin-top:1em; display:none; }
.cform__sent.show{ display:block; }
.cform__error{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--brass-soft); margin-top:1em; display:none; }
.cform__fine{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-on-dark-3); margin-top:1.4em; }
.cform__fine a{ color:var(--ink-on-dark-2); border-bottom:1px solid var(--umber-line); text-decoration:none; transition:color .4s var(--ease), border-color .4s var(--ease); }
.cform__fine a:hover{ color:var(--brass); border-color:var(--brass); }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* enlaces dentro de los datos de contacto (aside) */
.contact__detail .d a{
  font-family:var(--sans); font-weight:300; font-size:16px;
  color:var(--ink-on-dark-2); text-decoration:none;
  border-bottom:1px solid var(--umber-line);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.contact__detail .d a:hover{ color:var(--bone); border-color:var(--brass); }

/* enlaces de contacto en la sección "Conversemos" (home) */
.converse__contact a{
  color:var(--ink-on-dark-2); text-decoration:none;
  border-bottom:1px solid var(--umber-line);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.converse__contact a:hover{ color:var(--brass); border-color:var(--brass); }

/* ============================================================
   ACCESIBILIDAD — foco de teclado + salto a contenido
   El sitio usa hover en muchas afordancias pero no tenía foco
   visible; sin él, quien navega con teclado queda perdido.
   El anillo usa el acento de marca (tierra roja) y respeta el
   ritmo cinematográfico — nada de outline azul de sistema.
   ============================================================ */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:1px;
}
/* sobre papel el acento se oscurece un punto para contraste */
.section--light :focus-visible,
.section--paper :focus-visible{ outline-color:var(--oxblood); }

/* los campos del formulario ya marcan el foco con el filete inferior;
   le sumamos el anillo para igualar al resto y subir el contraste */
.cfield input:focus-visible,
.cfield textarea:focus-visible,
.cfield select:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:4px;
}

/* enlace de salto al contenido — oculto hasta recibir foco */
.skip-link{
  position:fixed; z-index:130; top:12px; left:12px;
  transform:translateY(-180%);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--umber); background:var(--brass);
  padding:.85em 1.3em; text-decoration:none;
  transition:transform .35s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

/* ============================================================
   ANIMACIONES VIVAS (Tier 1) — lenguaje de cine
   Todas se apagan con prefers-reduced-motion.
   ============================================================ */

/* 1 · HERO COMO FOTOGRAMA VIVO ------------------------------ */
/* Ken Burns + focus-pull inicial (en la misma animación, para que el
   desenfoque se resuelva justo cuando se abre el telón) — usa las
   propiedades individuales scale/translate para componerse con el
   transform del parallax que fija scripts/site.js. */
@keyframes kenburns{
  0%   { scale:1;     translate:0 0; }
  100% { scale:1.08;  translate:-1.6% -1.2%; }
}
@keyframes focuspull{
  0%   { filter:blur(9px); }
  100% { filter:blur(0); }
}
/* fuga de luz cálida que respira (proyector) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(58% 48% at 70% 26%, rgba(201,138,124,.20), transparent 62%);
  mix-blend-mode:screen; opacity:0;
}
@keyframes leakBreath{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: no-preference){
  .hero__still{ animation:focuspull 2.8s ease-out 1 both, kenburns 34s ease-in-out infinite alternate; }
  .hero::before{ animation:leakBreath 11s ease-in-out 2s infinite; }
}

/* 2 · BARRIDO DE PROYECTOR (sheen) en wordmark + kickers ---- */
/* Banda de luz hueso que cruza una vez (mix-blend screen, nunca cambia
   el color del texto — cumple "énfasis solo por escala/peso/espacio"). */
.nav__wordmark, .kicker{ position:relative; }
.nav__wordmark::after, .kicker::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:screen; opacity:0;
  background:linear-gradient(100deg, transparent 36%, rgba(246,243,238,.55) 50%, transparent 64%);
  background-size:240% 100%; background-position:140% 0;
}
@keyframes sheen{ 0%{ opacity:1; background-position:140% 0; } 100%{ opacity:1; background-position:-40% 0; } }
@media (prefers-reduced-motion: no-preference){
  .nav__wordmark.is-sheening::after,
  .kicker.is-sheening::after{ animation:sheen 1.15s var(--ease) forwards; }
}

/* 3 · MANIFIESTO PALABRA POR PALABRA ----------------------- */
/* El bloque NO usa .reveal; el escalonado vive en cada palabra .rw.
   Base visible (si no hay anim / reduced-motion el texto se ve completo). */
.rw{ display:inline-block; }
html.anim .reveal-words .rw{
  opacity:0; transform:translateY(.28em); filter:blur(4px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
  will-change:opacity, transform;
}
html.anim .reveal-words.is-visible .rw{ opacity:1; transform:none; filter:blur(0); }
html.settled .reveal-words .rw{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }

/* 4 · LÍNEA DE TIEMPO — haz de luz + dots que encienden ----- */
/* relleno tierra-roja que desciende por la regla según el scroll */
.timeline::after{
  content:""; position:absolute; top:0; left:clamp(56px,7vw,120px); width:1px; z-index:0;
  height:var(--beam, 0%);
  background:linear-gradient(var(--brass), rgba(180,106,90,0));
  box-shadow:0 0 12px rgba(180,106,90,.55);
  transition:height .15s linear; pointer-events:none;
}
@media (max-width:620px){ .timeline::after{ left:8px; } }
/* cada etapa enciende su punto al revelarse */
@keyframes dotLight{
  0%   { box-shadow:0 0 0 4px var(--umber), 0 0 0 0 rgba(180,106,90,.0); }
  45%  { box-shadow:0 0 0 4px var(--umber), 0 0 24px 5px rgba(180,106,90,.95); }
  100% { box-shadow:0 0 0 4px var(--umber), 0 0 14px rgba(180,106,90,.7); }
}
@media (prefers-reduced-motion: no-preference){
  .stage.is-visible .stage__no::after{ animation:dotLight 1.25s var(--ease); }
}

/* 5 · LUZ DE PROYECTOR QUE SIGUE EL CURSOR ------------------ */
/* Capa única fija; el haz cálido se posiciona con --mx/--my (px) que
   actualiza scripts/site.js en mousemove (throttle rAF). Solo puntero
   fino; se atenúa sobre secciones claras (--cl-op desde grade()). */
.cursor-light{
  position:fixed; inset:0; z-index:62; pointer-events:none;
  background:radial-gradient(circle 240px at var(--mx,50%) var(--my,-260px),
    rgba(201,138,124,.13), rgba(180,106,90,.05) 45%, transparent 72%);
  mix-blend-mode:screen;
  opacity:var(--cl-op, 1);
  transition:opacity .6s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .cursor-light{ display:none !important; } }
@media (hover: none), (pointer: coarse){ .cursor-light{ display:none !important; } }

/* ============================================================
   CONTRASTE EN FONDOS CLAROS (fix texto claro sobre bone)
   Las primitivas .body/.lede/.en/.caption traen color claro
   (pensado para tinta). En .section--light/.section--paper hay
   que oscurecerlas para que se lean.
   ============================================================ */
.section--light .body, .section--paper .body{ color:var(--ink-on-light-2); }
.section--light .lede, .section--paper .lede{ color:var(--ink-on-light); }
.section--light .en, .section--paper .en{ color:var(--ink-on-light-3); }
.section--light .caption, .section--paper .caption{ color:var(--ink-on-light-3); }
.section--light .kicker, .section--paper .kicker{ color:var(--brass-deep); }
.section--light .morelink, .section--paper .morelink{ color:var(--brass-deep); }
.section--light .hairline, .section--paper .hairline{ background:var(--bone-line); }

/* ============================================================
   FAQ (acordeón nativo <details>, accesible, sin JS)
   ============================================================ */
.faq{ border-top:1px solid var(--umber-line); margin-top:clamp(24px,4vh,40px); }
.faq__item{ border-bottom:1px solid var(--umber-line); }
.faq__item summary{
  list-style:none; cursor:pointer;
  padding:clamp(18px,2.6vh,26px) 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2em;
  font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.8vw,24px);
  color:var(--bone);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--mono); color:var(--brass); font-size:1.05em; flex:none; }
.faq__item[open] summary::after{ content:"–"; }
.faq__item summary:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.faq__a{ padding:0 0 clamp(18px,2.6vh,26px); max-width:66ch; }
.faq__a p{ font-family:var(--sans); font-weight:300; font-size:clamp(15px,1.05vw,17px); line-height:1.7; color:var(--ink-on-dark-2); margin:0; }

/* grupo de CTAs en el nav (Dossier + Conversemos juntos) */
.nav__ctas{ display:flex; align-items:center; gap:.6em; }
@media (max-width:920px){ .nav__ctas{ display:none; } }