/* NOMMA · site styles
   Dark, typographic, cinematic. Tokens are SPEC.md section 1, verbatim.
   Breakpoints: 820px (tablet) and 1100px (desktop, 12-column rail grid). */

:root{
  --green:#1B2A24;
  --green-deep:#111A16;
  --ivory:#F0ECE7;
  --gold:#C5A87F;
  --gold-deep:#A8895F;
  --graphite:#8A9490;
  --line:rgba(240,236,231,.14);
  --font-display:'Jost',system-ui,sans-serif;
  --font-body:'Source Serif 4',Georgia,serif;

  /* Derived */
  --ivory-soft:rgba(240,236,231,.78);   /* long-form body on green: 7:1 */
  --field-line:rgba(240,236,231,.42);   /* input underline: 3:1 non-text contrast */
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:64px;
  --gutter:5vw;
  --max:1240px;
  --gap:clamp(16px,2.2vw,32px);
  --pad:clamp(64px,12vh,140px);        /* section rhythm: 12-16vh, never more */

  --fs-body:clamp(18px,1rem + .25vw,20px);
  --fs-lead:clamp(20px,1.05rem + .55vw,25px);
  --fs-h2:clamp(36px,1.1rem + 3.7vw,72px);
  --fs-statement:clamp(34px,.8rem + 4vw,76px);
  --fs-title:clamp(34px,.9rem + 2.9vw,64px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--green-deep);
  scrollbar-width:thin;
  scrollbar-color:rgba(240,236,231,.22) var(--green-deep);
}
body{
  margin:0;
  background:var(--green);
  color:var(--ivory);
  font:400 var(--fs-body)/1.55 var(--font-body);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--green-deep)}
::-webkit-scrollbar-thumb{background:rgba(240,236,231,.2);border:3px solid var(--green-deep);border-radius:10px}
::selection{background:var(--gold);color:var(--green)}

img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[tabindex="-1"]:focus-visible{outline:none}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}

.skip{position:fixed;top:12px;left:12px;z-index:100;padding:12px 18px;background:var(--gold);color:var(--green);font:500 14px/1 var(--font-display);text-decoration:none}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:min(var(--max),100% - 2 * var(--gutter));margin-inline:auto}

/* ---------- Type primitives ---------- */
.label{
  font:500 12px/1.4 var(--font-display);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.sec__title,.hero__title,.metodo__title,.ev__title,.form-intro__title,.statement__text,.step__title,.legal__title{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.sec__title{font-size:var(--fs-h2);max-width:19ch}
.lead{font-size:var(--fs-lead);line-height:1.5}
p{text-wrap:pretty}
.footnote{font-size:15px;line-height:1.55;color:var(--graphite);max-width:62ch}
.textlink{
  color:var(--ivory);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(240,236,231,.35);
  text-underline-offset:.28em;
  transition:color .4s var(--ease),text-decoration-color .4s var(--ease);
}
.textlink:hover{color:var(--gold);text-decoration-color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  font:500 15px/1 var(--font-display);
  letter-spacing:.03em;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;border-radius:2px;
  cursor:pointer;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--green)}
.btn--gold:hover{background:var(--gold-deep)}
.btn--ghost{background:transparent;color:var(--ivory);border-color:rgba(240,236,231,.5)}
.btn--ghost:hover{border-color:var(--ivory);background:rgba(240,236,231,.06)}
.btn--sm{min-height:40px;padding:0 18px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:519.98px){.actions .btn{flex:1 1 auto}}

/* ---------- Header / nav ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50}
.site-head::before{
  content:"";position:absolute;inset:0;
  background:rgba(27,42,36,.9);              /* --green at 90% */
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .5s var(--ease);
}
.site-head.is-scrolled::before,.menu-open .site-head::before{opacity:1}
.bar{
  position:relative;                         /* paints above the ::before veil */
  display:flex;align-items:center;gap:28px;
  height:var(--nav-h);
  width:min(var(--max),100% - 2 * var(--gutter));margin-inline:auto;
}
.brand{position:relative;z-index:2;margin-right:auto;display:block;padding:8px 0}
.brand img{width:120px;height:auto}   /* brand rule: never under 120px wide */
.nav__list a{text-decoration:none}
.nav__cta{position:relative;z-index:2}
.menu-toggle{
  position:relative;z-index:2;
  min-height:44px;margin-right:-8px;padding:0 8px 0 16px;
  background:none;border:0;cursor:pointer;
  font:500 12px/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);
}
.menu-toggle__close,.menu-toggle[aria-expanded="true"] .menu-toggle__open{display:none}
.menu-toggle[aria-expanded="true"] .menu-toggle__close{display:inline}

@media (max-width:1099.98px){
  .nav{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;justify-content:space-between;gap:40px;
    padding:calc(var(--nav-h) + 5vh) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background:var(--green);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;
    transition:opacity .45s var(--ease),visibility 0s linear .45s;
  }
  .menu-open .nav{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
  .nav__list{border-top:1px solid var(--line)}
  .nav__list a{
    display:block;padding:18px 0;border-bottom:1px solid var(--line);
    font:500 clamp(28px,1rem + 4vw,44px)/1.1 var(--font-display);letter-spacing:-.01em;
    transition:color .3s var(--ease);
  }
  .nav__list a:hover{color:var(--gold)}
  .nav__cta-menu{align-self:flex-start}
  .menu-open{overflow:hidden}
}
@media (max-width:819.98px){
  .nav__cta{display:none}
}
@media (min-width:820px){
  .nav__cta-menu{display:none}
}
@media (min-width:1100px){
  .nav{display:flex;align-items:center}
  .nav__list{display:flex;gap:30px}
  .nav__list a{
    font:400 15px/1 var(--font-display);letter-spacing:.01em;
    padding:10px 0;transition:color .3s var(--ease);
  }
  .nav__list a:hover{color:var(--gold)}
  .menu-toggle,.nav__cta-menu{display:none}
}

/* ---------- Scroll-video chapters (engine: js/scrollvideo.js) ---------- */
.sv{position:relative;background:var(--green-deep)}
.sv__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.sv__canvas,.sv__poster,.sv__overlay{position:absolute;inset:0;width:100%;height:100%}
.sv__poster{object-fit:cover}
.sv__overlay{pointer-events:none}
.sv__content{
  position:absolute;inset:0;z-index:2;
  width:min(var(--max),100% - 2 * var(--gutter));margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* Overlays: layered green-deep veils, densest where the text sits, lighter
   where the film breathes; top and bottom edges resolve to --green so each
   chapter melts into the page. Combined alpha behind any text >= .66, so ivory
   keeps 4.5:1 even over a pure-white frame; small gold/graphite labels were
   measured at >= 5:1 over the brightest frame of every sequence. */
.sv--hero .sv__overlay{
  background:
    linear-gradient(180deg,rgba(27,42,36,.5) 0%,rgba(17,26,22,.08) 22%,rgba(17,26,22,.18) 58%,rgba(17,26,22,.55) 86%,rgb(27,42,36) 100%),
    linear-gradient(90deg,rgba(17,26,22,.6) 0%,rgba(17,26,22,.5) 52%,rgba(17,26,22,.18) 78%,rgba(17,26,22,0) 100%);
}
.sv--metodo .sv__overlay{
  background:
    linear-gradient(180deg,rgb(27,42,36) 0%,rgba(17,26,22,.3) 18%,rgba(17,26,22,.16) 50%,rgba(17,26,22,.4) 82%,rgb(27,42,36) 100%),
    linear-gradient(90deg,rgba(17,26,22,.62) 0%,rgba(17,26,22,.5) 50%,rgba(17,26,22,.08) 86%);
}
.sv--evidencia .sv__overlay{
  background:
    linear-gradient(180deg,rgb(27,42,36) 0%,rgba(17,26,22,.25) 20%,rgba(17,26,22,.25) 80%,rgb(27,42,36) 100%),
    radial-gradient(64% 58% at 50% 54%,rgba(17,26,22,.62) 0%,rgba(17,26,22,.5) 60%,rgba(17,26,22,0) 100%);
}
/* Narrow screens: text spans the full width, so the veil is even.
   Layer order everywhere: the vertical edge fade is painted on top, so every
   chapter starts and ends on exact --green and meets the panels without a step. */
@media (max-width:819.98px){
  .sv--hero .sv__overlay,.sv--metodo .sv__overlay,.sv--evidencia .sv__overlay{
    background:
      linear-gradient(180deg,rgb(27,42,36) 0%,rgba(17,26,22,.12) 22%,rgba(17,26,22,.18) 60%,rgba(17,26,22,.5) 84%,rgb(27,42,36) 100%),
      linear-gradient(rgba(17,26,22,.5),rgba(17,26,22,.5));
  }
}

/* Hero */
.sv--hero .sv__content{padding:calc(var(--nav-h) + 6vh) 0 max(14vh,124px)}
.hero{
  /* Title card dissolves in the second half of the chapter. */
  opacity:calc(1 - clamp(0,(var(--sv-progress,0) - .45) * 2.6,1));
  transform:translate3d(0,calc(var(--sv-progress,0) * -8vh),0);
}
/* Width- and height-aware: the title card always fits one viewport.
   Two sentences, two lines on wide screens. */
.hero__title{font-size:clamp(40px,min(1rem + 5vw,8.4vh + 4px),92px);max-width:15em;margin:18px 0 22px}
.hero__title span{display:block}
.hero__text{font-size:var(--fs-lead);line-height:1.5;max-width:54ch;margin-bottom:30px}
.hero__by{margin-top:22px;font:400 15px/1.5 var(--font-display);letter-spacing:.01em;color:rgba(240,236,231,.8)}
.cue{
  position:absolute;left:50%;bottom:max(3vh,18px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:translateX(-50%);
  opacity:calc(1 - var(--sv-progress,0) * 7);
}
.cue__word{font:500 11px/1 var(--font-display);letter-spacing:.32em;text-transform:uppercase;color:rgba(240,236,231,.78);margin-right:-.32em}
.cue__line{width:1px;height:48px;background:var(--gold);transform-origin:50% 0;animation:cue 2.8s var(--ease) infinite}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:50% 0;opacity:1}
  45%{transform:scaleY(1);transform-origin:50% 0}
  55%{transform:scaleY(1);transform-origin:50% 100%}
  100%{transform:scaleY(0);transform-origin:50% 100%;opacity:1}
}

/* Método: pinned, three steps swap on progress thirds (js/main.js) */
.metodo{justify-content:space-between;padding:calc(var(--nav-h) + 5vh) 0 max(6vh,32px)}
.metodo__title{font-size:clamp(26px,.9rem + 1.9vw,44px);max-width:22ch;margin-top:18px}
.metodo__head{margin-bottom:20px}
@media (max-height:560px){.metodo__head{margin-bottom:8px}.step__text{max-width:56ch}}
.steps{display:grid;margin-top:auto}
.step + .step{margin-top:48px}
.step__num{font:500 12px/1.4 var(--font-display);letter-spacing:.22em;color:var(--gold)}
.step__title{font-size:clamp(52px,1.5rem + 7.4vw,148px);line-height:.98;letter-spacing:-.02em;margin:.14em 0 .2em -.04em}
.step__text{font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.js .step{grid-area:1/1;margin:0;opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js .step.is-active{opacity:1;transform:none}
.rail{margin-top:max(5vh,28px)}
.rail__track{position:relative;height:1px;background:var(--line);overflow:hidden}
.rail__fill{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--sv-progress,0))}
.rail__marks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;font:500 12px/1.4 var(--font-display);letter-spacing:.18em;text-transform:uppercase}
.rail__mark{color:rgba(240,236,231,.55);transition:color .5s var(--ease)}
.rail__mark.is-current{color:var(--ivory)}
.rail__name{display:none}
@media (min-width:820px){.rail__name{display:inline}}

/* Evidencia */
.sv--evidencia .sv__content{justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-h) + 4vh) 0 6vh}
.ev{max-width:58rem}
.ev__title{font-size:clamp(38px,1rem + 5vw,88px);max-width:16ch;margin:22px auto 30px}
.ev__text{font-size:var(--fs-lead);line-height:1.5;max-width:50ch;margin:0 auto}
.ev__marks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0;margin-top:44px;font:500 12px/1.4 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ev__marks li{padding:0 22px}
.ev__marks li + li{border-left:1px solid rgba(197,168,127,.4)}
@media (max-width:599.98px){
  .ev__marks{flex-direction:column;align-items:center;gap:12px;margin-top:36px}
  .ev__marks li + li{border-left:0}
}

/* Phones and short viewports: the pinned stages must fit one screen. */
@media (max-width:819.98px){
  .hero__text{font-size:18px}
  .hero__title{margin:14px 0 18px}
}
@media (max-height:720px){
  .sv--hero .sv__content{padding-top:calc(var(--nav-h) + 16px);padding-bottom:40px}
  .cue{display:none}
  .hero__text{margin-bottom:22px}
  .hero__by{margin-top:16px}
  .metodo{padding-top:calc(var(--nav-h) + 20px)}
}
@media (max-width:519.98px) and (max-height:720px){
  .hero__title{font-size:35px}
  .hero__text{font-size:17px}
  .actions .btn{min-height:46px}
}
@media (max-height:560px){
  .hero__title{font-size:32px;margin:10px 0 12px}
  .hero__text,.step__text,.ev__text{font-size:16px}
  .hero__text{margin-bottom:14px}
  .btn{min-height:44px}
  .hero__by{margin-top:10px;font-size:14px}
  .sv--hero .sv__content{padding-top:calc(var(--nav-h) + 12px);padding-bottom:20px}
  .metodo{padding-top:calc(var(--nav-h) + 12px);padding-bottom:16px}
  .metodo__title{font-size:24px;margin-top:10px}
  .step__title{font-size:44px}
  .rail{margin-top:20px}
  .sv--evidencia .sv__content{padding:calc(var(--nav-h) + 12px) 0 16px}
  .ev__title{font-size:32px;margin:12px auto 16px}
  .ev__marks{margin-top:20px}
}

/* =====================================================================
   EXPEDIENTE: every text section is a plate from a dossier.
   Surfaces: (a) a still under a dark veil with parallax, (b) a grained
   panel, optionally with blueprint hairlines, (c) a framed still (plate).
   Every surface resolves to --green at its edges, so the scroll-video
   chapters keep melting into the page.
   ===================================================================== */

/* ---------- Surfaces ---------- */
.surface{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background-color:var(--green)}
.surface > .wrap{position:relative;z-index:3}

/* Film grain: inline SVG feTurbulence as a data: image (CSP img-src allows data:). */
.surface--grain::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  opacity:.06;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 96px,#000 calc(100% - 96px),transparent 100%);
}
/* Deep panel: a dark veil that is clear at the edges and densest mid-section. */
.surface--deep{
  background-image:linear-gradient(180deg,rgba(17,26,22,0) 0%,rgba(17,26,22,.62) 22%,rgba(17,26,22,.62) 78%,rgba(17,26,22,0) 100%);
}
/* Blueprint: fine 32px hairline grid with a 160px major grid, both <= 6%. */
.surface--blueprint::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(240,236,231,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,236,231,.055) 1px,transparent 1px),
    linear-gradient(rgba(240,236,231,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,236,231,.022) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
}
/* Background still: oversized by 8% top and bottom so the +-6% drift never shows an edge. */
.surface__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.surface__bg img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover}
.surface__bg::after{content:"";position:absolute;inset:0}

/* ---------- Section rhythm and headings ---------- */
.sec{padding:var(--pad) 0}
.kicker{
  display:flex;align-items:center;gap:16px;
  font:500 12px/1.4 var(--font-display);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
}
.kicker::before{content:"";flex:none;width:40px;height:1px;background:var(--gold)}
.sec__title{font-size:var(--fs-title);max-width:17ch;margin-bottom:clamp(28px,5vh,52px)}
.sec__head{margin-bottom:clamp(36px,6vh,64px)}
.sec__head .sec__title{margin-bottom:0}

/* ---------- Plates: framed stills ---------- */
.plate{position:relative;margin:0}
.plate__frame{position:relative;padding:10px;border:1px solid rgba(197,168,127,.5)}
.plate__img{position:relative;overflow:hidden;aspect-ratio:4 / 3;background:var(--green-deep)}
.plate--tall .plate__img{aspect-ratio:4 / 3}
.plate__img img{position:absolute;left:0;top:-7%;width:100%;height:114%;max-width:none;object-fit:cover}
.plate__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(17,26,22,.6);pointer-events:none}
.plate__cap{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:14px;
  font:500 11px/1.4 var(--font-display);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,236,231,.62);         /* >= 5:1 over grain and blueprint lines; graphite measured 4.4 there */
}
.plate__no{color:var(--gold)}
/* Blueprint registration ticks on the frame corners. */
.plate--ticks .plate__frame::before,.plate--ticks .plate__frame::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;border-color:var(--gold);border-style:solid;
}
.plate--ticks .plate__frame::before{top:-7px;left:-7px;border-width:1px 0 0 1px}
.plate--ticks .plate__frame::after{bottom:-7px;right:-7px;border-width:0 1px 1px 0}
@media (min-width:820px){
  .plate--tall .plate__img{aspect-ratio:4 / 5}
}

/* ---------- 2 · Problema: one compact manifesto ---------- */
.problema{padding:clamp(72px,12vh,130px) 0 clamp(64px,12vh,120px)}
.problema .surface__bg img{object-position:50% 78%;filter:saturate(.85)}
.problema .surface__bg::after{
  background:
    linear-gradient(180deg,var(--green) 0%,rgba(27,42,36,0) 13%,rgba(27,42,36,0) 90%,var(--green) 100%),
    linear-gradient(rgba(17,26,22,.78),rgba(17,26,22,.78));
}
.manifesto{display:grid;gap:clamp(26px,4.4vh,44px)}
.manifesto__item{display:grid;gap:14px}
.manifesto__num{
  display:flex;align-items:center;gap:16px;
  font:400 18px/1 var(--font-body);letter-spacing:.08em;color:var(--gold);
}
.manifesto__num::after{content:"";width:56px;height:1px;background:var(--gold);opacity:.8}
.manifesto__text{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-statement);
  line-height:1.02;letter-spacing:-.015em;max-width:14ch;text-wrap:balance;
}
.manifesto__item:nth-child(2){padding-left:10%}
.manifesto__item:nth-child(3){padding-left:20%}
.problema__close{
  position:relative;margin:clamp(40px,7vh,64px) 0 0 20%;padding-top:28px;max-width:34ch;
  font-size:clamp(20px,1rem + .65vw,26px);line-height:1.5;font-style:italic;color:var(--ivory-soft);
}
.problema__close::before{content:"";position:absolute;top:0;left:0;width:64px;height:1px;background:var(--gold)}
@media (min-width:820px){
  .manifesto__item:nth-child(2){padding-left:26%}
  .manifesto__item:nth-child(3){padding-left:52%}
  .problema__close{margin-left:52%}
  .manifesto__text{max-width:17ch}
}
@media (min-width:1100px){
  .manifesto__item:nth-child(2){padding-left:24%}
  .manifesto__item:nth-child(3){padding-left:48%}
  .problema__close{margin-left:48%}
}

/* ---------- 3 · Qué es: split with a framed still ---------- */
.split{display:grid;gap:clamp(44px,7vh,72px)}
.que-es__a{max-width:40ch;color:var(--ivory)}
.que-es__b{max-width:42ch;margin-top:26px;padding-left:22px;border-left:1px solid rgba(197,168,127,.5);font-style:italic;color:var(--ivory-soft)}
@media (min-width:820px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
  .split__text{grid-column:1 / span 7}
  .split__media{grid-column:8 / -1}
}
@media (min-width:1100px){
  .split__text{grid-column:1 / span 6}
  .split__media{grid-column:8 / -1}
}

/* ---------- 5 · Qué detecta: ledger, archive still on the left third ---------- */
.detecta-sec{
  background-image:linear-gradient(180deg,rgba(17,26,22,0) 0%,rgba(17,26,22,.5) 30%,rgba(17,26,22,.5) 75%,rgba(17,26,22,0) 100%);
}
.detecta__bg{
  position:absolute;z-index:0;left:0;right:0;top:0;height:min(58vh,460px);overflow:hidden;overflow:clip;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%);
}
.detecta__stick{position:absolute;inset:0;overflow:hidden}
.detecta__stick img{
  position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:62% 50%;
  opacity:.34;filter:saturate(.7) brightness(.62);
}
.detecta-sec{padding-top:calc(var(--pad) + 14vh)}
.ledger{border-top:1px solid var(--line)}
.ledger__row{
  position:relative;z-index:0;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:8px 18px;
  padding:24px 0 26px;border-bottom:1px solid var(--line);
}
.ledger__row::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease);
}
.ledger__row::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-18px;right:-18px;
  background:rgba(240,236,231,.035);opacity:0;transition:opacity .5s var(--ease);
}
.ledger__num{
  font:500 13px/1 var(--font-display);letter-spacing:.16em;color:var(--gold);
  font-variant-numeric:tabular-nums;padding-top:.55em;
}
.ledger__title{font:500 clamp(20px,.95rem + .55vw,25px)/1.22 var(--font-display);letter-spacing:-.005em;transition:transform .6s var(--ease),color .5s var(--ease)}
.ledger__text{grid-column:2;color:var(--ivory-soft);max-width:46ch}
@media (hover:hover){
  .ledger__row:hover::before{transform:scaleX(1)}
  .ledger__row:hover::after{opacity:1}
  .ledger__row:hover .ledger__title{transform:translateX(6px);color:#fff}
}
.detecta__note{margin-top:30px;color:var(--ivory-soft)}
@media (min-width:820px){
  .ledger__row{grid-template-columns:3.4rem minmax(0,11fr) minmax(0,9fr);gap:8px 32px;align-items:baseline}
  .ledger__num{padding-top:0}
  .ledger__text{grid-column:3}
}
/* Desktop: the head stays pinned over the archive still (left third) while
   the ledger scrolls past on the right. */
@media (min-width:1100px){
  .detecta-sec{padding-top:var(--pad)}
  .detecta__bg{
    top:0;bottom:0;right:auto;width:40%;height:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  }
  .detecta__stick{
    position:sticky;inset:auto;top:0;height:100vh;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
  }
  .detecta__stick::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,26,22,.5) 0%,rgba(17,26,22,.2) 55%,rgba(17,26,22,0) 100%)}
  .detecta__stick img{opacity:.46;filter:saturate(.7) brightness(.66);object-position:58% 50%}
  .detecta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .detecta .sec__head{grid-column:1 / span 4;grid-row:1 / span 2;margin:0;position:sticky;top:calc(var(--nav-h) + 48px)}
  .detecta .sec__title{font-size:clamp(34px,1rem + 2.4vw,58px)}
  .detecta .ledger{grid-column:5 / -1;grid-row:1}
  .detecta__note{grid-column:5 / -1;grid-row:2}
  .detecta .ledger__row{grid-template-columns:3rem minmax(0,10fr) minmax(0,9fr)}
}

/* ---------- 6 · Beneficios: 2x2 over a darkened still ---------- */
.beneficios-sec .surface__bg img{object-position:50% 38%;filter:saturate(.8)}
.beneficios-sec .surface__bg::after{
  background:
    linear-gradient(180deg,var(--green) 0%,rgba(27,42,36,0) 10%,rgba(27,42,36,0) 90%,var(--green) 100%),
    linear-gradient(rgba(17,26,22,.8),rgba(17,26,22,.8));
}
.benefits{display:grid;border-top:1px solid var(--line)}
.benefit{
  --ghost:clamp(92px,3rem + 8vw,190px);
  position:relative;overflow:hidden;
  padding:clamp(26px,4vh,44px) 0 clamp(30px,4.6vh,52px);border-bottom:1px solid var(--line);
}
.benefit__ghost{
  position:absolute;right:-.02em;top:-.14em;pointer-events:none;user-select:none;
  font:500 var(--ghost)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1px rgba(197,168,127,.42);
}
.benefit__title{
  position:relative;margin:calc(var(--ghost) * .5) 0 14px;
  font:500 clamp(26px,1rem + 1.3vw,38px)/1.08 var(--font-display);letter-spacing:-.01em;
}
.benefit p{position:relative;color:var(--ivory-soft);max-width:36ch}
@media (min-width:820px){
  .benefits{grid-template-columns:1fr 1fr}
  .benefit:nth-child(odd){padding-right:clamp(28px,4vw,64px);border-right:1px solid var(--line)}
  .benefit:nth-child(even){padding-left:clamp(28px,4vw,64px)}
  .benefit:nth-child(even) .benefit__ghost{right:-.02em}
}
.buyers{
  display:grid;margin-top:clamp(36px,6vh,64px);
  border-top:1px solid rgba(197,168,127,.55);background:rgba(17,26,22,.6);
}
.buyers li{padding:20px 22px 24px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.buyers li:last-child{border-bottom:0}
.buyers__role{display:block;margin-bottom:6px;font:500 15px/1.3 var(--font-display);letter-spacing:.02em;color:var(--ivory)}
.buyers__text{color:var(--ivory-soft)}
@media (min-width:820px){
  .buyers{grid-template-columns:1fr 1fr}
  .buyers li:nth-child(even){border-left:1px solid var(--line)}
  .buyers li:nth-child(n+3){border-bottom:0}
}
@media (min-width:1100px){
  .buyers{grid-template-columns:repeat(4,1fr)}
  .buyers li{border-bottom:0}
  .buyers li + li{border-left:1px solid var(--line)}
}

/* ---------- 7 · Tecnología: blueprint panel ---------- */
.tecno{display:grid;gap:clamp(36px,6vh,56px)}
.tecno__head{margin-bottom:0}
.tech{border-top:1px solid var(--line)}
.tech__item{display:grid;gap:6px;padding:20px 0 22px;border-bottom:1px solid var(--line)}
.tech dt{font:500 20px/1.25 var(--font-display);letter-spacing:.005em}
.tech dd{color:var(--ivory-soft);max-width:44ch}
@media (min-width:820px){
  .tecno{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .tecno__head{grid-column:1 / span 5;grid-row:1}
  .tecno__plate{grid-column:1 / span 5;grid-row:2}
  .tech{grid-column:7 / -1;grid-row:1 / span 2}
}
@media (min-width:1100px){
  .tecno__head .sec__title{max-width:14ch}
  .tech__item{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:baseline;padding:22px 0 24px}
}

/* ---------- 8 · Normas: the index ---------- */
.normas-layout{display:grid;gap:clamp(36px,6vh,56px)}
.normas__head{margin-bottom:0}
.normas__intro{max-width:40ch;margin-top:clamp(22px,3.4vh,32px);color:var(--ivory-soft)}
.index{
  --cell:150px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.index__cell{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:104px;
  padding:15px 16px 17px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.index__code{font:500 16px/1 var(--font-display);letter-spacing:.06em;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.index__name{font:400 16px/1.35 var(--font-body);color:var(--ivory-soft)}
.index__cell--key{background:rgba(197,168,127,.09);box-shadow:inset 0 2px 0 var(--gold)}
.index__cell--key .index__code{color:var(--gold)}
.normas__toggle{margin-top:28px}
.normas__more{margin-top:28px}
.codes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.codes li{
  padding:13px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:500 14px/1.2 var(--font-display);letter-spacing:.04em;color:var(--ivory-soft);font-variant-numeric:tabular-nums;
}
.normas__note{margin-top:22px}
@media (min-width:820px){
  .index{--cell:190px}
  .index__cell{min-height:118px;padding:18px 20px 20px}
}
@media (min-width:1100px){
  .normas-layout{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .normas__head{grid-column:1 / span 4;margin:0;position:sticky;top:calc(var(--nav-h) + 32px)}
  .normas{grid-column:6 / -1}
  .normas__head .sec__title{max-width:12ch}
}

/* ---------- 10 · OPCE: full-bleed band ---------- */
.opce-band{padding:clamp(88px,16vh,160px) 0}
.opce-band .surface__bg img{object-position:72% 32%}
.opce-band .surface__bg::after{
  background:
    linear-gradient(180deg,var(--green) 0%,rgba(27,42,36,0) 14%,rgba(27,42,36,0) 86%,var(--green) 100%),
    linear-gradient(rgba(17,26,22,.74),rgba(17,26,22,.74));
}
.opce .sec__title{max-width:15ch}
.opce__quote{
  max-width:36ch;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--gold);
  font:400 clamp(21px,1rem + .9vw,31px)/1.45 var(--font-body);color:var(--ivory);
}
.signature{margin-top:36px;padding-left:clamp(20px,2.4vw,32px);font:400 16px/1.5 var(--font-display);color:var(--ivory-soft)}
.signature__name{color:var(--ivory);font-weight:500}
.opce__link{margin-top:10px;padding-left:clamp(20px,2.4vw,32px);font:400 16px/1.5 var(--font-display)}
@media (min-width:820px){
  .opce-band .surface__bg::after{
    background:
      linear-gradient(180deg,var(--green) 0%,rgba(27,42,36,0) 14%,rgba(27,42,36,0) 86%,var(--green) 100%),
      linear-gradient(90deg,rgba(17,26,22,.9) 0%,rgba(17,26,22,.84) 44%,rgba(17,26,22,.42) 74%,rgba(17,26,22,.24) 100%);
  }
  .opce{max-width:min(46rem,64%)}
}

/* ---------- 11 · Diagnóstico ---------- */
.diag{display:grid;gap:clamp(40px,6vh,56px)}
.diag .sec__title{max-width:15ch}
.form-intro__text{font-size:var(--fs-lead);line-height:1.5;color:var(--ivory-soft);max-width:36ch}
.diag__plate{margin-top:clamp(32px,5vh,48px)}
.plate--wide .plate__img{aspect-ratio:16 / 9}
.diag__plate{max-width:560px}
.diag__plate .plate__img img{object-position:22% 50%;filter:brightness(.84) saturate(.92)}
.diag__form{
  position:relative;padding:clamp(24px,3.4vw,48px);
  border:1px solid var(--line);background:rgba(17,26,22,.55);
}
.diag__form::before{content:"";position:absolute;top:-1px;left:-1px;width:64px;height:1px;background:var(--gold)}
@media (min-width:1100px){
  .diag{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .diag__intro{grid-column:1 / span 5}
  .diag__plate{max-width:none}
  .diag__form{grid-column:7 / -1}
  .diag .sec__title{font-size:clamp(34px,1rem + 2.4vw,56px)}
}
.form{display:grid;gap:28px var(--gap)}
.hp{display:none}
.field label{display:block;margin-bottom:4px;font:500 13px/1.4 var(--font-display);letter-spacing:.06em;color:var(--graphite)}
.field__opt{font-weight:400;letter-spacing:.02em;opacity:.85}
.field input,.field select,.field textarea{
  display:block;width:100%;
  padding:10px 0 12px;
  font:400 18px/1.4 var(--font-body);color:var(--ivory);
  background:transparent;border:0;border-bottom:1px solid var(--field-line);border-radius:0;
  transition:border-color .35s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgba(240,236,231,.7)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.field select{
  padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A9490' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.field select:invalid{color:var(--graphite)}
.field option{background:var(--green);color:var(--ivory)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ivory);-webkit-box-shadow:0 0 0 100px var(--green-deep) inset;caret-color:var(--ivory)}
.form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:8px}
.form__legal{font:400 14px/1.5 var(--font-display);color:var(--graphite)}
.form__legal a{color:var(--ivory);text-decoration:underline;text-decoration-color:rgba(240,236,231,.35);text-underline-offset:.25em}
.form__legal a:hover{color:var(--gold)}
@media (min-width:820px){
  .form{grid-template-columns:1fr 1fr}
  .field--wide,.form__submit{grid-column:1/-1}
}

/* ---------- Legal pages: dossier rail (terminos, aviso) ---------- */
.grid{position:relative;border-top:1px solid var(--line);padding-top:clamp(28px,4.5vh,48px)}
.grid::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--gold)}
.sec__label{color:var(--graphite);margin-bottom:22px}
@media (min-width:1100px){
  .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .grid > *{grid-column:4 / -1}
  .grid > .sec__label{grid-column:1 / span 3;grid-row:1;margin:0;padding-top:calc(var(--fs-h2) * .16 - 4px)}
  .grid > .legal__title{grid-row:1}
}

/* ---------- Footer: gold top rule ---------- */
.site-foot{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-deep);border-top:1px solid rgba(197,168,127,.55);
  padding:clamp(64px,10vh,112px) 0 40px;font-family:var(--font-display);
}
.site-foot > .wrap{position:relative;z-index:3}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot__brand img{width:150px;height:auto}
.foot__brand p{margin-top:16px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 32px;font-size:15px}
.foot__links a{text-decoration:none;padding:6px 0;display:inline-block;transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--gold)}
.foot__partners{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px;padding:36px 0;border-bottom:1px solid var(--line)}
.partner{display:inline-flex;align-items:center;gap:18px;text-decoration:none;color:var(--ivory);opacity:.78;transition:opacity .3s var(--ease)}
.partner:hover{opacity:1}
.partner__label{font-family:var(--font-display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.partner img{height:44px;width:auto;display:block}
.partner img[alt="Swiss Tech"]{height:40px}
.partner__word{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:.06em;white-space:nowrap}
.partner__word small{font-size:11px;letter-spacing:.22em;margin-left:8px;vertical-align:middle;color:var(--graphite)}
.partner__rule{width:1px;height:36px;background:var(--line)}
@media (max-width:819.98px){.partner__rule{display:none}.foot__partners{gap:22px}}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-top:24px;font-size:13px;line-height:1.5;color:var(--graphite)}

/* ---------- Legal pages ---------- */
.legal{padding:calc(var(--nav-h) + 12vh) 0 var(--pad)}
.legal__title{font-size:var(--fs-h2);max-width:16ch;margin-bottom:28px}
.legal__intro{font-size:var(--fs-lead);line-height:1.5;color:var(--ivory-soft);max-width:44ch;margin-bottom:clamp(40px,7vh,72px)}
.legal__block{border-top:1px solid var(--line);padding:28px 0 36px}
.legal__block h2{font:500 clamp(22px,1rem + .8vw,28px)/1.2 var(--font-display);letter-spacing:-.005em;margin-bottom:14px}
.legal__block p,.legal__block li{color:var(--ivory-soft);max-width:62ch}
.legal__block p + p,.legal__block p + ul,.legal__block ul + p{margin-top:12px}
.legal__block ul{padding-left:1.1em;list-style:disc}
.pending{font:500 12px/1.6 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.thanks{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 6vh) 0 10vh}
.thanks__title{font:500 clamp(40px,1rem + 5vw,88px)/1.02 var(--font-display);letter-spacing:-.01em;max-width:14ch;margin:22px 0 28px;text-wrap:balance}
.thanks__text{font-size:var(--fs-lead);line-height:1.5;color:var(--ivory-soft);max-width:40ch;margin-bottom:44px}

/* ---------- Reveal on scroll (js/main.js adds .js, .is-visible and --i for lists) ---------- */
.js [data-reveal]{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- Reduced motion: no transforms, no transitions, no drift ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal],.js .step,.hero{transform:none}
  .js [data-reveal]{opacity:1}
  [data-parallax]{transform:none!important}
  .hero,.cue{opacity:1}
  .cue{transform:translateX(-50%)}
  /* Poster only (engine loads no frames): no long pinned scrolls. Chapters
     become one still viewport; the three steps read top to bottom. */
  .sv{height:auto!important}
  .sv__sticky{position:relative;height:auto;min-height:100vh}
  .sv__content{position:relative;min-height:100vh}
  .js .step{opacity:1;grid-area:auto}
  .js .step + .step{margin-top:48px}
  .step__title{font-size:clamp(44px,1.2rem + 4.5vw,96px)}
  .metodo .steps{margin-top:8vh}
  .rail{display:none}
}