/* JoelySpark landing — page-level composition on top of the design system.
   Every value is a token or a scroll-derived ratio. No new colours. */
:root{--hdr-h:77px;--arc-h:8vh}
html{scroll-behavior:smooth;background:var(--js-color-black)}
body{background:var(--js-color-black)}
main{display:block}
#top{position:absolute;top:0;height:0}

/* Phone: the two closing light sections meet with one breath, not two.
   Overrides the inline sizes those sections carry from direct edits. */
@media (max-width:767px){#principios{padding-bottom:var(--js-space-6)!important}#contacto{padding-top:var(--js-space-6)!important}#contacto .js-logo{align-self:center!important;margin-inline:auto}}

/* ---------- skip link ---------- */.js-skip{position:fixed;top:-200px;left:16px;z-index:120;padding:14px 20px;background:var(--js-color-black);color:var(--js-color-white);border:var(--js-border-hairline) solid var(--js-color-gold);background-image:none;font-family:var(--js-font-body);font-size:var(--js-text-label);font-weight:var(--js-weight-label);letter-spacing:var(--js-tracking-label);text-transform:uppercase;transition:top var(--js-motion-fast) var(--js-ease-out)}
.js-skip:focus{top:16px;background-image:none}

/* ---------- header ---------- */
.js-header{position:fixed;top:0;left:0;right:0;padding-block:var(--js-space-4);min-height:76px;z-index:50;transition:transform var(--js-motion-base) var(--js-ease-standard),background-color var(--js-motion-base) var(--js-ease-standard),border-color var(--js-motion-base) var(--js-ease-standard)}
body[data-hdr="hidden"] .js-header{transform:translateY(-112%)}
.js-header--transparent{border-bottom-color:transparent}

/* ---------- gold guiding line ---------- */
#js-rail{position:fixed;left:0;top:26vh;height:46vh;z-index:35;pointer-events:none;transition:transform var(--js-motion-slow) var(--js-ease-standard),opacity var(--js-motion-base) var(--js-ease-standard)}
#js-rail .js-goldline{height:100%;background:var(--js-white-a14);transition:background var(--js-motion-base) var(--js-ease-standard)}
body[data-field="light"] #js-rail .js-goldline{background:var(--js-black-a14)}
#js-rail .js-goldline__fill{transition:none}
@media (max-width:767px){#js-rail{top:30vh;height:34vh}}

/* ---------- pinned tracks ---------- */
/* Only the pinned frame paints the dark field. The section behind it stays clear,
   so the arc corners reveal the scene underneath instead of a black rectangle. */
.track,#proximamente{background:transparent}
.track{position:relative;--e:1}
/* The arrival arc: derived from the monogram curve, open while the scene enters,
   flat the instant it locks in. Never covers a scene that is already on screen. */
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--js-color-black);--a:calc(1 - var(--e,1));border-radius:calc(var(--a) * 70vw) calc(var(--a) * 70vw) 0 0 / calc(var(--a) * 11vh) calc(var(--a) * 11vh) 0 0}
.pin::before{content:"";position:absolute;left:0;right:0;top:0;height:12vh;z-index:7;pointer-events:none;border-top:var(--js-gold-line-max) solid var(--js-color-gold);border-radius:inherit;opacity:calc(4 * var(--a) * (1 - var(--a)))}
.track-hero{height:210vh}
.track-calma{height:220vh}
.track-enfoque{height:290vh}
.track-movimiento{height:300vh}
.track-recuperacion{height:240vh}
.track-proximamente{height:220vh}
@media (max-width:1023px){.track-hero{height:195vh}.track-calma{height:200vh}.track-enfoque{height:260vh}.track-movimiento{height:270vh}.track-recuperacion{height:215vh}.track-proximamente{height:200vh}}
@media (max-width:767px){.track-hero{height:180vh}.track-calma{height:180vh}.track-enfoque{height:230vh}.track-movimiento{height:240vh}.track-recuperacion{height:195vh}.track-proximamente{height:180vh}}

/* ---------- film: reversible frame playhead over the approved sheets ---------- */
.film{position:absolute;inset:0;overflow:hidden;background:var(--js-color-black)}
.film__scale{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.film__l{position:absolute;inset:0;background-repeat:no-repeat;background-color:var(--js-color-black);transform:translateZ(0);backface-visibility:hidden;will-change:opacity}
.film__l--b{opacity:0}
.film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.film[data-video="ready"] .film__v{opacity:1}
html[data-rm="1"] .film__v{display:none}
.film[data-state="failed"]{background:var(--js-color-charcoal)}
.film--wipe-y{clip-path:inset(0 0 calc((1 - var(--k)) * 100%) 0);--k:clamp(0,calc((var(--p,1) - var(--in,0)) / var(--sp,1)),1)}
.film--wipe-x{clip-path:inset(0 calc((1 - var(--k)) * 100%) 0 0);--k:clamp(0,calc((var(--p,1) - var(--in,0)) / var(--sp,1)),1)}

/* ---------- copy safe zones over media ---------- */
.safe{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--hdr-h) + var(--js-space-6)) var(--js-page-margin) calc(var(--arc-h) + var(--js-space-6))}
.safe__col{margin-top:auto}
.safe__col{display:flex;flex-direction:column;gap:var(--js-space-5);align-items:flex-start;max-width:min(52ch,46vw)}
.safe--right{align-items:flex-end}
/* Copy anchored to the top of the frame, for scenes whose subject sits low. */
.safe.safe--top{justify-content:flex-start}
.safe.safe--top .safe__col{margin-top:0;margin-bottom:auto}
.safe--right .safe__col{align-items:flex-start}
.safe__col .js-body{color:var(--js-white-a72)}
/* ---------- copy placement: the clear upper band, every format ---------- */
/* Hero and the first Movimiento phase ride the top of the frame, off the
   protagonists; extension copy keeps a short measure so no line reaches them. */
.track-hero .safe{justify-content:flex-start;padding-top:calc(var(--hdr-h) + var(--js-space-7))}
.track-hero .safe__col{margin-top:0;margin-bottom:auto;max-width:min(48ch,62%)}
.track-hero .safe__col .js-body{max-width:38ch}
.track-hero .hero-cue{position:absolute;left:0;right:0;bottom:calc(var(--arc-h) + var(--js-space-4));margin:0;text-align:center}
.track-hero .hero-cue .js-scrollindicator{align-items:center}
.track-movimiento .phase-out{justify-content:flex-start;padding-top:calc(var(--hdr-h) + var(--js-space-6) + 44px)}
.track-movimiento .phase-out .safe__col{margin-top:0;margin-bottom:auto;max-width:min(46ch,60%)}
.track-movimiento .phase-out .safe__col .js-body{max-width:40ch}
.safe.phase-in .safe__col{max-width:min(40ch,55%)}
.safe.phase-in .safe__col .js-body{max-width:34ch}

@media (max-width:1023px){.safe{padding-bottom:calc(var(--arc-h) + var(--js-space-5))}.safe__col{max-width:min(52ch,64vw)}}
@media (max-width:767px){.safe{padding-top:var(--hdr-h);padding-bottom:calc(var(--arc-h) + var(--js-space-5))}.safe__col{max-width:100%;gap:var(--js-space-4)}.safe--right{align-items:flex-start}.js-scrollindicator__rail{height:36px}}
@media (max-width:767px){
  /* TEST (Director 2026-08-10): the protection overlay is off on phones so the
     clips show their true colors. Restore the gradient below to bring it back.
     .pin .js-scene__overlay{background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.55) 24%,rgba(0,0,0,.18) 48%,rgba(0,0,0,0) 70%)} */
  .pin .js-scene__overlay{display:none}
  .safe__col .js-body{max-width:30ch}
  /* Scene copy keeps to a narrow measure at the foot of the frame, where the
     protection overlay is densest — it never runs across the protagonist. */
  .safe{justify-content:flex-end}
  .safe__col .js-heading--h2,.safe__col .js-heading--h3{max-width:15ch;text-wrap:balance}
  .safe__col .js-body{max-width:28ch}
  .cta-row{gap:var(--js-space-3)}
  .cta-row .js-button{min-height:44px;padding-block:0;padding-inline:var(--js-space-4);font-size:11px;gap:var(--js-space-3)}
  .safe .hero-cue{align-self:stretch;text-align:center}
  .safe .hero-cue .js-scrollindicator{align-items:center}
  /* Hero copy anchors under the header — a fixed bottom offset breaks on the
     varying viewport heights of phone browsers (dynamic URL bars): on tall
     screens it pushed the cue out of frame, on short ones the copy climbed
     over the wordmark. Top-anchored copy + a cue pinned to the frame's foot
     hold on every height. */
  .track-hero .safe{justify-content:flex-start;padding-top:calc(var(--hdr-h) + var(--js-space-5))}
  .track-hero .safe__col{max-width:70%;margin-top:0;margin-bottom:0}
  .track-hero .safe__col .js-body{max-width:21ch}
  .track-hero .hero-cue{position:absolute;left:0;right:0;bottom:calc(var(--arc-h) + var(--js-space-4));margin:0}
  /* Extension copy on phones: narrow measure so no line reaches the subject. */
  .track-enfoque .safe.phase-in .safe__col,.track-movimiento .safe.phase-in .safe__col{max-width:68%}
  .track-enfoque .safe.phase-in .safe__col .js-body,.track-movimiento .safe.phase-in .safe__col .js-body{max-width:22ch}
}
@media (max-height:820px){.safe{padding-top:calc(var(--hdr-h) + var(--js-space-4));padding-bottom:calc(var(--arc-h) + var(--js-space-5))}}
@media (max-height:700px){.js-hero{font-size:clamp(2.6rem,5.6vw,5rem)}}
/* Only desktop hides the cue on short windows: on phones it sits absolute at
   the frame's foot and costs no layout, so it stays. */
@media (max-height:700px) and (min-width:768px){.safe .hero-cue{display:none}}
/* Hero: a wider measure so each sentence holds one line instead of two — the
   block is shorter and the CTAs clear the scene that arrives underneath. */
.track-hero .js-hero{font-size:clamp(2.9rem,5.3vw,5.6rem)}
.track-hero .safe__col{max-width:min(58ch,55vw)}
.track-hero .safe{padding-bottom:calc(var(--arc-h) + var(--js-space-6))}
@media (max-width:1023px){.track-hero .safe__col{max-width:min(58ch,74vw)}}

/* ---------- layered copy, scroll driven ---------- */
.rev{--k:clamp(0,calc((var(--p,1) - var(--in,0)) / var(--sp,.14)),1);opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * var(--y,var(--js-space-5))),0)}
.phase-out{--k:clamp(0,calc((var(--p,0) - var(--in,0)) / var(--sp,.08)),1);opacity:calc(1 - var(--k))}
.phase-in{--k:clamp(0,calc((var(--p,1) - var(--in,0)) / var(--sp,.08)),1);opacity:var(--k)}

/* ---------- layered copy, load driven (hero only) ---------- */
.enter{opacity:0}
body[data-entered="1"] .enter{animation:js-enter var(--js-motion-base) var(--js-ease-out) both;animation-delay:var(--d,0ms)}
@keyframes js-enter{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}

/* ---------- field changes ---------- */
/* Flowing sections take the same arrival arc as a pinned scene, so every
   dark -> light seam is one grammar. */
[data-entry]{position:relative;overflow:hidden;--e:1;--a:calc(1 - var(--e,1));border-radius:calc(var(--a) * 70vw) calc(var(--a) * 70vw) 0 0 / calc(var(--a) * 11vh) calc(var(--a) * 11vh) 0 0}
[data-entry]::before{content:"";position:absolute;left:0;right:0;top:0;height:12vh;z-index:7;pointer-events:none;border-top:var(--js-gold-line-max) solid var(--js-color-gold);border-radius:inherit;opacity:calc(4 * var(--a) * (1 - var(--a)))}
.f-ivory{background:var(--js-color-ivory)}.f-black{background:var(--js-color-black)}
.wipe-edge{position:absolute;left:0;right:0;height:var(--js-gold-line-max);background:var(--js-color-gold);z-index:5;pointer-events:none;--k:clamp(0,calc((var(--p,0) - var(--in,0)) / var(--sp,.08)),1);top:calc(var(--k) * 100%);opacity:calc(4 * var(--k) * (1 - var(--k)))}
.wipe-edge--v{top:0;bottom:0;left:calc(var(--k) * 100%);right:auto;width:var(--js-gold-line-max);height:auto}

/* ---------- exit word ---------- */
.exit{position:absolute;left:0;right:0;bottom:calc(var(--arc-h) + 7vh);z-index:2;display:flex;justify-content:center;pointer-events:none;--k:clamp(0,calc((var(--p,0) - var(--in,.8)) / var(--sp,.18)),1);opacity:var(--k);transform:scale(calc(.86 + var(--k) * .18))}
.exit .js-exitword{opacity:.16;white-space:nowrap}
/* Cierre tipográfico: la copia se retira antes de que entre la palabra de salida,
   así nunca se solapan dos textos sobre la misma escena. */
.leave{--lk:clamp(0,calc((var(--p,0) - var(--lo,.78)) / var(--lsp,.06)),1);opacity:calc(1 - var(--lk));transform:translate3d(0,calc(var(--lk) * -1 * var(--js-space-4)),0)}

/* ---------- editorial sections ---------- */
.ed{padding-block:var(--js-section-padding-block);padding-inline:var(--js-page-margin);scroll-margin-top:var(--hdr-h)}
.ed--tight{padding-block:var(--js-section-padding-block-tight)}
.wrap{max-width:var(--js-content-max);margin:0 auto;width:100%}
[data-reveal] .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--js-motion-base) var(--js-ease-out) calc(var(--i,0) * 90ms),transform var(--js-motion-base) var(--js-ease-out) calc(var(--i,0) * 90ms)}
[data-reveal].is-in .rv{opacity:1;transform:none}

/* ---------- lens: a light band threaded between two films ----------
   No seam shape of its own. It takes the one arrival arc of the system — the same
   ellipse the pinned scenes use — and overlaps the neighbour it arrives on, so the
   corners outside the curve show that film instead of a black wedge. */
.lens{margin-top:calc(-1 * var(--arc-h))}
.lens.ed{padding-block:calc(var(--arc-h) + clamp(96px,12vh,180px))}
/* Every arriving field lands ON the one before it: each section overlaps its
   predecessor by the arc depth, so the corners outside the curve show that scene
   through, never the black page. The first screen has nothing to land on. */
.track,.lens,[data-entry]{margin-top:calc(-1 * var(--arc-h))}
main > *:first-child{margin-top:0}
@media (max-width:767px){.lens.ed{padding-block:calc(var(--arc-h) + clamp(72px,9vh,120px))}}

/* ---------- bridges ---------- */
.bridge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--js-space-7);min-height:56vh;padding-block:var(--js-space-9);padding-inline:var(--js-page-margin);overflow:hidden;scroll-margin-top:var(--hdr-h)}
.bridge__rule{flex:0 0 auto;width:min(280px,42vw);height:var(--js-gold-line-min);background:var(--js-color-gold);transform:scaleX(0);transform-origin:center;transition:transform var(--js-motion-slow) var(--js-ease-out) 120ms}
.bridge.is-in .bridge__rule{transform:scaleX(1)}
.bridge--quote{min-height:62vh}
/* The pause: same dark field as the films it sits between, so the seam is only a
   gold arc — no slab of colour. The word stays as the field it always was. */
.bridge--pause{min-height:46vh;padding-block:calc(var(--arc-h) + clamp(64px,8vh,104px))}
.bridge__word{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);display:flex;justify-content:center;pointer-events:none;z-index:1}
.bridge__word .js-exitword{opacity:.11;white-space:nowrap;font-size:clamp(4rem,17vw,15rem);line-height:.9}
.bridge__copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:var(--js-space-6);text-align:center;max-width:min(1120px,100%)}
/* Same display register as the quote pause: both breaths fill the frame alike. */
.bridge__copy .js-heading{font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:1.02;max-width:22ch;text-wrap:balance}
.bridge__copy .js-body{max-width:58ch;color:var(--js-white-a72);font-size:clamp(1.125rem,1.5vw,1.375rem)}
.bridge__copy .bridge__rule{margin-top:var(--js-space-3)}
/* The two seams already carry the gold; the pause keeps only a whisper of rule. */
.bridge__rule--soft{width:min(420px,32vw);background:var(--js-gold-a56)}
@media (max-width:767px){.bridge,.bridge--quote{min-height:52vh;padding-block:var(--js-space-8)}.bridge--pause{min-height:40vh;padding-block:calc(var(--arc-h) + clamp(40px,5vh,64px))}}

/* ---------- manifesto ---------- */
.manifesto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--js-space-9);align-items:start}
.sequence{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sequence li{padding-block:var(--js-space-5);border-top:var(--js-border-hairline) solid var(--js-line-hairline);font-family:var(--js-font-display);font-size:var(--js-text-h3);line-height:var(--js-leading-heading)}
.sequence li:last-child{border-bottom:var(--js-border-hairline) solid var(--js-line-hairline)}
@media (max-width:1023px){.manifesto{grid-template-columns:1fr;gap:var(--js-space-7)}}

/* ---------- próximamente ---------- */
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--js-grid-gutter);align-items:stretch}
.offer > .rv{display:flex}
.offer > .rv > *{flex:1}
/* Concept reel: A/B dissolve inside the card's own media box — the outgoing frame
   stays fully opaque underneath, so nothing double-exposes. Square box so each
   sheet shows whole, at its own scale. Hover (fine pointer) or tap opens it full
   screen; Esc, the close button, or leaving the overlay returns. */
.card-host{display:contents}
.js-conceptcard__media{position:relative;background:var(--js-color-black)}
.card-hogar .js-conceptcard__media{aspect-ratio:1}
.card-movimiento .js-conceptcard__media{aspect-ratio:1568/1003}
.js-conceptcard__media > img{width:100%;height:100%;object-fit:cover;display:block}
.js-conceptcard{height:100%;display:flex;flex-direction:column}
.js-conceptcard > :last-child{margin-top:auto}
.js-conceptcard__media.has-reel{cursor:zoom-in}
.js-conceptcard__media.has-reel > img{opacity:0}
.reel{position:absolute;inset:0;overflow:hidden;background:var(--js-color-black)}
.reel__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__f--in{animation:reelIn var(--js-motion-slow) var(--js-ease-standard) both}
@keyframes reelIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.reel__f--in{animation:none}}
.lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--js-space-6);background:var(--js-color-black);opacity:0;pointer-events:none;transition:opacity var(--js-motion-slow) var(--js-ease-standard);cursor:zoom-out}
.lb.is-open{opacity:1;pointer-events:auto}
html.lb-open{overflow:hidden}
.lb__img{max-inline-size:calc(100vw - 2*var(--js-space-6));max-block-size:calc(100svh - 2*var(--js-space-6));width:auto;height:auto;min-width:0;min-height:0;object-fit:contain;transform:scale(.97);transition:transform var(--js-motion-slow) var(--js-ease-standard)}
.lb.is-open .lb__img{transform:none}
.lb__close{position:absolute;top:var(--js-space-6);right:var(--js-space-6);min-height:44px;padding:0 var(--js-space-5);background:none;color:var(--js-color-ivory);border:var(--js-border-hairline) solid var(--js-white-a40);font-family:var(--js-font-body);font-size:var(--js-text-caption);letter-spacing:var(--js-tracking-label);cursor:pointer;transition:border-color var(--js-motion-base) var(--js-ease-standard)}
.lb__close:hover{border-color:var(--js-color-gold)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;display:grid;place-items:center;background:rgba(0,0,0,.55);color:var(--js-color-ivory);border:var(--js-border-hairline) solid var(--js-white-a40);font-family:var(--js-font-body);font-size:18px;line-height:1;cursor:pointer;transition:border-color var(--js-motion-base) var(--js-ease-standard),color var(--js-motion-base) var(--js-ease-standard)}
.lb__nav:hover{border-color:var(--js-color-gold);color:var(--js-color-gold)}
.lb__nav--prev{left:var(--js-space-6)}
.lb__nav--next{right:var(--js-space-6)}
.lb__count{position:absolute;bottom:var(--js-space-6);left:50%;transform:translateX(-50%);color:var(--js-white-a72);font-family:var(--js-font-body);font-size:var(--js-text-caption);letter-spacing:var(--js-tracking-label)}
@media (max-width:767px){.lb__nav--prev{left:var(--js-space-3)}.lb__nav--next{right:var(--js-space-3)}}
@media (max-width:767px){.offer{grid-template-columns:1fr;gap:var(--js-space-6)}}
.close-mark{display:flex;flex-direction:column;align-items:center;gap:var(--js-space-5)}
.close-mark__line{width:var(--js-gold-line-max);height:96px;background:var(--js-color-gold);transform:scaleY(0);transform-origin:top;transition:transform var(--js-motion-slow) var(--js-ease-out)}
.is-in .close-mark__line{transform:scaleY(1)}
.close-mark img{transform:rotate(0deg);transition:transform var(--js-motion-slow) var(--js-ease-out) 300ms}
.is-in .close-mark img{transform:rotate(4deg)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--js-space-9);align-items:end}
@media (max-width:767px){.contact{grid-template-columns:1fr;gap:var(--js-space-7);align-items:start}}
.js-contact .js-link--email{font-size:var(--js-text-display)}

/* ---------- footer ---------- */
.legal{display:flex;flex-direction:column;gap:var(--js-space-2);font-size:var(--js-text-legal);color:var(--js-text-secondary);max-width:62ch}
.legal strong{font-weight:var(--js-weight-label);color:var(--js-color-white);letter-spacing:.02em}

/* ---------- extension scenes: copy rides the top of the frame ---------- */
/* In every format the phase-B copy (Trabajo y orden / Control deportivo) sits
   under the chapter tag, on the clear upper band, off the product and the
   protagonist. */
.track-enfoque .safe.phase-in,.track-movimiento .safe.phase-in{justify-content:flex-start;padding-top:calc(var(--hdr-h) + var(--js-space-6) + 44px)}
.track-enfoque .safe.phase-in .safe__col,.track-movimiento .safe.phase-in .safe__col{margin-top:0;margin-bottom:0}
/* TEST (Director 2026-08-10): every darkening layer is OFF in every format to
   judge, scene by scene, where protection is truly needed. Uncomment to
   restore the top veil of Enfoque/Movimiento:
.track-enfoque .pin::after,.track-movimiento .pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.58) 0%,rgba(0,0,0,.28) 36%,rgba(0,0,0,0) 60%);opacity:clamp(0,calc((var(--p,0) - .5) / .08),1)}
.track-movimiento .pin::after{opacity:1}
*/
.js-scene__overlay{display:none}
/* Enfoque earns its contrast from a text shadow instead of a scene veil
   (Director 2026-08-10): the office stays bright, the copy stays crisp. */
.track-enfoque .safe__col,.track-enfoque .chapter-tag{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 20px rgba(0,0,0,.45)}
/* Calma uses the clear upper wall as its editorial field. The shadow protects
   the type while preserving the room's natural light and material texture. */
.track-calma .safe{justify-content:flex-start;padding-top:calc(var(--hdr-h) + var(--js-space-7))}
.track-calma .safe__col{margin-top:0;margin-bottom:auto;max-width:min(46ch,48vw);text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 20px rgba(0,0,0,.45)}
@media (max-width:767px){
  .track-calma .safe{padding-top:calc(var(--hdr-h) + var(--js-space-6))}
  .track-calma .safe__col{max-width:68%}
}
/* The gold status badge carries its own translucent dark fill inside its
   frame, so it reads perfectly over any scene (Enfoque and Movimiento). */
.safe__col .js-status{background:rgba(0,0,0,.5);text-shadow:none}

/* ---------- small composition helpers ---------- */
.ln{display:block}
.enter{display:block}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--js-space-4);margin-top:var(--js-space-2)}
.hero-cue{align-self:center;margin-top:var(--js-space-7)}
@media (max-width:767px){.hero-cue{align-self:flex-start;margin-top:var(--js-space-6)}}
.chapter-tag{position:absolute;top:calc(var(--hdr-h) + var(--js-space-5));left:var(--js-page-margin);z-index:4}
.chapter-tag .js-kicker{font-size:22px}
.offer-close{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--js-space-7);margin-top:var(--js-space-9)}
.principios{display:flex;flex-direction:column;gap:var(--js-space-6)}
/* A pause fills the frame: the quote is set at display scale across the content
   width, not as a narrow column marooned in black. */
.bridge--quote .js-quote{max-width:100%;margin:0 auto;text-align:center}
.bridge--quote .js-quote__text{margin:0 auto;max-width:22ch;font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:1.02;text-wrap:balance}
.bridge--quote .bridge__rule{width:min(420px,32vw)}
.bridge--quote .rv{display:flex;justify-content:center;width:100%}

/* ---------- splash handover (tempo: slower, more legible) ---------- */
.js-splash{animation:none;opacity:1}
body:not([data-entered="1"]) #page{opacity:0}
#page{transition:opacity 200ms linear}
.js-splash__symbol{position:relative;width:120px;height:120px;padding:12px;-webkit-mask-image:none;mask-image:none;animation:none}
.jsym{display:block;width:100%;height:100%}
.jsym__scaler{transform-box:view-box;transform-origin:50% 50%;animation:jsym-settle 2.9s var(--js-ease-out) both,jsym-breathe 5.4s ease-in-out 2.9s infinite}
.jsym__t{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.jsym__f{animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.jsym__t--j{animation-name:jsym-draw;animation-duration:1.9s;animation-delay:.1s}
.jsym__t--s1{animation-name:jsym-draw;animation-duration:1.75s;animation-delay:.7s}
.jsym__t--s2{animation-name:jsym-draw;animation-duration:1.8s;animation-delay:.8s}
.jsym__t--s3{animation-name:jsym-draw;animation-duration:.9s;animation-delay:1.5s}
.jsym__t--bowl{animation-name:jsym-draw;animation-duration:1.6s;animation-delay:1.1s}
.jsym__t--tick{animation-name:jsym-draw;animation-duration:1.2s;animation-delay:1.5s}
.jsym__f--j{animation-name:jsym-ink-down;animation-duration:1.25s;animation-delay:.55s}
.jsym__f--s{animation-name:jsym-ink-right;animation-duration:1.15s;animation-delay:1.3s}
.jsym__f--bowl{animation-name:jsym-ink-up,jsym-glow;animation-duration:.95s,5.4s;animation-delay:1.75s,3.1s;animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:both,none}
.jsym__f--tick{animation-name:jsym-ink-right,jsym-glow;animation-duration:.7s,5.4s;animation-delay:2.1s,3.3s;animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:both,none}
@keyframes jsym-draw{0%{opacity:1;stroke-dashoffset:1}70%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes jsym-ink-down{0%{opacity:0;clip-path:inset(0 0 100% 0)}40%{opacity:.6}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes jsym-ink-right{0%{opacity:0;clip-path:inset(0 100% 0 0)}40%{opacity:.6}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes jsym-ink-up{0%{opacity:0;clip-path:inset(100% 0 0 0)}40%{opacity:.6}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes jsym-glow{0%,100%{opacity:1}50%{opacity:.82}}
@keyframes jsym-settle{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes jsym-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.016)}}
@media (prefers-reduced-motion:reduce){.jsym__t{display:none}.jsym__f,.jsym__scaler{animation:none}}
.js-splash__symbol::after{content:"";position:absolute;inset:0;border:var(--js-gold-line-min) solid var(--js-gold-a28);border-radius:var(--js-radius-circle);opacity:0;transform:scale(.88);animation:js-splash-ring 1100ms var(--js-ease-out) 2500ms forwards}
@keyframes js-splash-ring{to{opacity:1;transform:scale(1)}}
.js-splash__wordmark{animation-duration:760ms;animation-delay:1900ms}
.js-splash__hairline{animation-duration:1700ms;animation-delay:1400ms}
.opening{position:fixed;inset:0;z-index:80;background:var(--js-color-black);pointer-events:none;clip-path:ellipse(140% 130% at 50% 128%);animation:js-open 1500ms var(--js-ease-out) forwards}
@keyframes js-open{to{clip-path:ellipse(140% 0% at 50% 128%)}}
.opening__line{position:fixed;left:0;right:0;top:0;height:var(--js-gold-line-max);background:var(--js-color-gold);z-index:81;pointer-events:none;animation:js-open-line 1500ms var(--js-ease-out) forwards}
@keyframes js-open-line{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(100vh);opacity:0}}

/* ---------- reduced motion: no scrub, no pin, everything present ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track-hero,.track-calma,.track-enfoque,.track-movimiento,.track-recuperacion,.track-proximamente{height:auto}
  .pin{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;border-radius:0}
  .pin::before{display:none}
  [data-entry]{border-radius:0;overflow:visible}
  [data-entry]::before{display:none}
  .pin>.film{position:relative;inset:auto;width:100%;height:52svh;flex:none;order:1;clip-path:none}
  .pin>.film+.film{order:3}
  .js-scene__overlay{display:none}
  .pin>.safe{position:relative;inset:auto;min-height:0;padding:var(--js-space-8) var(--js-page-margin);order:2;justify-content:flex-start}
  .pin>.safe.phase-in{order:4}
  .safe__col{max-width:min(52ch,100%)}
  .chapter-tag{position:relative;top:auto;left:auto;order:0;padding:calc(var(--hdr-h) + var(--js-space-5)) var(--js-page-margin) 0}
  .rev,.phase-out,.phase-in,.enter,[data-reveal] .rv{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .wipe-edge,.opening,.opening__line{display:none}
  .exit{order:5;position:relative;bottom:auto;opacity:1;transform:none;padding-bottom:var(--js-space-8)}
  .bridge__rule{transform:scaleX(1);transition:none}
  .close-mark__line{height:96px;transform:scaleY(1);transition:none}
  .close-mark img{transform:none;transition:none}
  #js-rail{transition:none}
  .js-header{transition:none}
  body[data-hdr="hidden"] .js-header{transform:none}
}

/* ---------- scroll cue: more presence, swipe-up motion on phones ---------- */
.js-scrollindicator{opacity:.95}
.js-scrollindicator__rail{width:3px;height:64px}
@media (max-width:767px){
  .js-scrollindicator__rail{width:3px;height:44px}
  /* On a phone the gesture is a swipe up, so the gold streak travels bottom-to-top. */
  .js-scrollindicator__rail::after{animation:js-scroll-travel-up 2.2s var(--js-ease-standard) infinite}
  /* Periodic few-pixel nudge inviting the scroll. */
  /* Keeps the entry fade, then nudges a few pixels on repeat (beats the
     body[data-entered] .enter rule on specificity). */
  body[data-entered="1"] .hero-cue.js-mobile-continuation-pulse{animation:js-enter var(--js-motion-base) var(--js-ease-out) var(--d,0ms) both,js-cue-nudge 2.6s var(--js-ease-out) 2.6s infinite}
}
@keyframes js-scroll-travel-up{0%{transform:translateY(250%)}60%,100%{transform:translateY(-100%)}}
@keyframes js-cue-nudge{0%,58%,100%{transform:translateY(0)}72%{transform:translateY(-7px)}86%{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){.hero-cue.js-mobile-continuation-pulse{animation:none}.js-scrollindicator__rail::after{animation:none}}