/* GENERADO por scripts/build.mjs a partir de scenes/*.css. No se edita: cada escena edita su propia hoja. */

/* ---- scenes/color.css ---- */
/* Scene: color (scenes/color.js). Scoped to [data-scene="color"].
 * Always: the comparator (7/12) with its text (5/12), usable by range, drag
 * and keyboard. Live world: a sticky stage where the image panel floats in
 * the valley and its handle line continues through the mountains. */

/* ------------------------------------------------------------ document */
[data-scene="color"] .chroma__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--grid-gap);
  align-items: center;
  margin-block-start: clamp(4.5rem, 9vw, 8rem);
}
[data-scene="color"] .chroma__compare { grid-column: 1 / span 7; grid-row: auto; }
[data-scene="color"] .compare__stage { aspect-ratio: 16 / 10; }
[data-scene="color"] .compare__img { object-position: 50% 48%; }
[data-scene="color"] .compare__grip { width: 52px; height: 52px; border-radius: 50%; background: var(--proyector); }
[data-scene="color"] .compare__range { pointer-events: none; }
[data-scene="color"] .compare__stage { cursor: ew-resize; }
[data-scene="color"] .compare__hint { padding-top: 0; }
[data-scene="color"] .chroma__text { grid-column: 8 / -1; display: grid; gap: var(--space-5); }
[data-scene="color"] .chroma__title { font-size: var(--fs-h3-lg); font-weight: 300; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
[data-scene="color"] .chroma__lede { margin: 0; color: var(--niebla); max-width: 48ch; }
[data-scene="color"] .chroma__specs { margin: 0; }
/* Without JS the range cannot move the split: keep it for no one. */
html:not(.js) [data-scene="color"] .compare__stage { cursor: auto; }
@media (width < 900px) {
  [data-scene="color"] .chroma__compare,
  [data-scene="color"] .chroma__text { grid-column: 1 / -1; }
  [data-scene="color"] .compare__stage { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------- live world */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="color"] { --track: 330; }
  html[data-flight-state="ready"] [data-scene="color"] .chroma__inner {
    height: 100%; margin: 0;
    padding-block: calc(var(--header-h) + clamp(1rem, 5svh, 3.5rem)) clamp(1.5rem, 6svh, 4rem);
    align-content: center; align-items: center;
    grid-template-rows: auto;
    /* The whole desk resolves once the stage is pinned and dissolves before it
       leaves: it never slides in or out under the header like a page. */
    opacity: var(--scene-hold, 1);
  }
  html[data-flight-state="ready"] [data-scene="color"] .chroma__compare { grid-column: 1 / span 8; position: relative; z-index: 2; }
  html[data-flight-state="ready"] [data-scene="color"] .chroma__text { grid-column: 9 / -1; }
  html[data-flight-state="ready"] [data-scene="color"] .compare__stage {
    aspect-ratio: 16 / 10;
    max-height: calc(100svh - var(--header-h) - 9rem);
    margin-inline: auto;
    outline: 1px solid var(--proyector-40);
    box-shadow: 0 2.5rem 6rem rgb(10 10 11 / .7);
  }
  /* The handle line keeps going: out of the panel and through the terrain,
     where the WebGL split continues it. */
  html[data-flight-state="ready"] [data-scene="color"] .compare__stage { overflow: visible; }
  html[data-flight-state="ready"] [data-scene="color"] .compare__img { clip-path: inset(0); }
  html[data-flight-state="ready"] [data-scene="color"] .compare__img--graded { clip-path: inset(0 calc(100% - var(--compare)) 0 0); }
  html[data-flight-state="ready"] [data-scene="color"] .compare__handle { box-shadow: 0 0 12px rgb(244 242 237 / .55); }
  html[data-flight-state="ready"] [data-scene="color"] .compare__grip { box-shadow: 0 0 0 6px rgb(244 242 237 / .12), 0 10px 30px rgb(10 10 11 / .6); }
  html[data-flight-state="ready"] [data-scene="color"] [data-owned] .compare__grip { box-shadow: 0 0 0 6px var(--ambar-soft), 0 10px 30px rgb(10 10 11 / .6); }
  html[data-flight-state="ready"] [data-scene="color"] .compare__hint { color: var(--proyector); text-shadow: 0 0 .75rem rgb(10 10 11 / .9); }

  html[data-flight-state="ready"] [data-scene="color"] .chroma__text {
    position: relative; z-index: 2;
    padding: clamp(1.25rem, 2.2vw, 2rem);
    background: linear-gradient(180deg, rgb(10 10 11 / .82), rgb(10 10 11 / .66));
    border-top: 1px solid var(--ambar);
  }
  html[data-flight-state="ready"] [data-scene="color"] .chroma__title { font-size: clamp(1.9rem, 1rem + 2.2vw, 3.4rem); }
  html[data-flight-state="ready"] [data-scene="color"] .chroma__lede { color: var(--proyector); }

  @media (width < 900px) {
    html[data-flight-state="ready"] [data-scene="color"] .chroma__inner {
      align-content: start; gap: .9rem;
      padding-block: calc(var(--header-h) + clamp(3rem, 11svh, 6rem)) 1rem;
    }
    html[data-flight-state="ready"] [data-scene="color"] .chroma__compare,
    html[data-flight-state="ready"] [data-scene="color"] .chroma__text { grid-column: 1 / -1; }
    html[data-flight-state="ready"] [data-scene="color"] .chroma__compare { margin-inline: 0; }
    html[data-flight-state="ready"] [data-scene="color"] .compare__stage { aspect-ratio: 4 / 3; max-height: 44svh; }
    html[data-flight-state="ready"] [data-scene="color"] .compare__hint { margin-block-start: .5rem; padding-inline: .5rem; }
    html[data-flight-state="ready"] [data-scene="color"] .chroma__text { gap: .7rem; padding: 1rem 1.1rem 1.1rem; background: linear-gradient(180deg, rgb(10 10 11 / .74), rgb(10 10 11 / .5)); }
    html[data-flight-state="ready"] [data-scene="color"] .chroma__title { font-size: 1.55rem; }
    html[data-flight-state="ready"] [data-scene="color"] .chroma__lede { font-size: .9375rem; line-height: 1.5; }
  }
}

/* ---- scenes/contact.css ---- */
/* Contact · the landing (scenes/contact.js).
 * Static / no-JS / reduced motion: the closing frame in styles.css.
 * Live: one pinned stage. The camera lands (--L), the details resolve (--D)
 * into a complete final title card, then the footer rolls in as end credits
 * over the landed world (--F) while the card recedes into the night. */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .contact--live {
    --L: 0; --D: 0; --F: 0; --track: 330;
    /* End card, then credits: the card is gone before the footer resolves. */
    --fade: calc(1 - min(1, var(--F) / .28));
    overflow: visible; padding: 0;
    margin-bottom: calc(var(--footer-h, 0px) * -1);
  }
  html[data-flight-state="ready"] .contact--live .contact__card {
    position: absolute; inset: calc(var(--header-h) + clamp(1.25rem, 5svh, 3.5rem)) var(--gutter) auto; width: auto; max-width: none; padding: 0; margin: 0;
    display: grid; justify-items: center; z-index: 400;
  }
  html[data-flight-state="ready"] .contact--live .contact__frame {
    isolation: auto; min-height: 0; width: min(100%, 72rem); grid-template-columns: minmax(0, 1fr);
    padding: clamp(1.25rem, 3.5svh, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
    justify-items: center; text-align: center; gap: clamp(.6rem, 1.6svh, 1.1rem);
    opacity: var(--fade); filter: blur(calc(var(--F) * 8px));
  }
  html[data-flight-state="ready"] .contact--live .contact__frame::before {
    inset: -30% -25%; opacity: calc(.35 + var(--L) * .45);
    background: radial-gradient(closest-side, rgb(10 10 11 / .72), rgb(10 10 11 / 0));
  }
  html[data-flight-state="ready"] .contact--live .contact__title {
    --a: clamp(0, calc((var(--L) - .16) / .2), 1);
    font-size: clamp(1.6rem, min(3vw, 5.5svh), 3.25rem); max-width: 22ch; line-height: 1.08;
    opacity: var(--a); filter: blur(calc((1 - var(--a)) * 10px));
    transform: translate3d(0, calc((1 - var(--a)) * 1.2rem), 0);
  }
  html[data-flight-state="ready"] .contact--live .contact__lede {
    --a: clamp(0, calc((var(--L) - .28) / .18), 1);
    max-width: 46ch; margin: 0; color: var(--proyector); opacity: calc(var(--a) * .9);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  }
  /* The email is the protagonist: its tracking closes as the lens settles. */
  html[data-flight-state="ready"] .contact--live .contact__email {
    --a: clamp(0, calc((var(--L) - .48) / .3), 1);
    margin: clamp(.35rem, 1.6svh, 1.1rem) 0 clamp(.2rem, 1svh, .6rem);
    opacity: var(--a); filter: blur(calc((1 - var(--a)) * 14px));
  }
  html[data-flight-state="ready"] .contact--live .contact__email a {
    font-size: clamp(1.4rem, min(4.6vw, 9svh), 4.75rem); line-height: 1.1; white-space: nowrap;
    letter-spacing: calc(-.035em + (1 - var(--a, 1)) * .3em);
    text-decoration-color: rgb(200 133 47 / .7); text-underline-offset: .2em; text-decoration-thickness: 1px;
    text-shadow: 0 0 44px rgb(200 133 47 / .28), 0 2px 24px rgb(10 10 11 / .9);
  }
  html[data-flight-state="ready"] .contact--live .contact__actions {
    --a: clamp(0, calc((var(--L) - .7) / .15), 1);
    justify-content: center; opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 1rem), 0);
    pointer-events: none;
  }
  html[data-flight-state="ready"] .contact--live.is-landed .contact__actions { pointer-events: auto; }
  html[data-flight-state="ready"] .contact--live .contact__actions .btn { min-height: 48px; }
  html[data-flight-state="ready"] .contact--live .copy-status { text-align: center; min-height: 1.2em; margin: 0; }
  /* The viewfinder closes on the card at touchdown. */
  html[data-flight-state="ready"] .contact--live .vf--contact {
    --lock: clamp(0, calc((var(--L) - .8) / .2), 1);
    inset: 0; opacity: calc(.2 + var(--lock) * .8); --vf-color: var(--proyector-40);
  }
  html[data-flight-state="ready"] .contact--live .vf--contact .vf__c--tl { transform: translate(calc((1 - var(--lock)) * -8vw), calc((1 - var(--lock)) * -6svh)); }
  html[data-flight-state="ready"] .contact--live .vf--contact .vf__c--tr { transform: translate(calc((1 - var(--lock)) * 8vw), calc((1 - var(--lock)) * -6svh)); }
  html[data-flight-state="ready"] .contact--live .vf--contact .vf__c--bl { transform: translate(calc((1 - var(--lock)) * -8vw), calc((1 - var(--lock)) * 6svh)); }
  html[data-flight-state="ready"] .contact--live .vf--contact .vf__c--br { transform: translate(calc((1 - var(--lock)) * 8vw), calc((1 - var(--lock)) * 6svh)); }

  /* The emblem on the pad (anchored ground decal; filter set by JS). */
  html[data-flight-state="ready"] .contact--live .contact__emblem[data-world-anchor] {
    width: 320px; height: auto; right: auto; opacity: 0; transform: none;
  }

  /* Details: part of the final title card, flanking the pad. */
  html[data-flight-state="ready"] .contact--live .contact__details {
    position: absolute; z-index: 400; left: 0; right: 0; bottom: clamp(1.5rem, 5svh, 3rem); margin: 0; max-width: none;
    padding-inline: var(--gutter);
    display: grid; grid-template-columns: minmax(0, 23rem) 1fr minmax(0, 17rem); gap: 0 2rem; align-items: end;
    opacity: calc(var(--D) * var(--fade)); filter: blur(calc((1 - var(--D) + var(--F)) * 8px));
    transform: translate3d(0, calc((1 - var(--D)) * 1.25rem), 0);
    pointer-events: none;
  }
  html[data-flight-state="ready"] .contact--live.is-settled .contact__details { pointer-events: auto; }
  html[data-flight-state="ready"] .contact--live .contact__checklist { grid-column: 1; }
  html[data-flight-state="ready"] .contact--live .contact__social { grid-column: 3; }
  html[data-flight-state="ready"] .contact--live .contact__subtitle { font-size: .9375rem; margin-bottom: .5rem; }
  html[data-flight-state="ready"] .contact--live .checklist li { padding-block: .45rem; font-size: .875rem; border-top-color: rgb(244 242 237 / .14); text-shadow: 0 1px 12px rgb(10 10 11 / .9); }
  html[data-flight-state="ready"] .contact--live .social a { min-height: 44px; font-size: .9375rem; }
  html[data-flight-state="ready"] .contact--live .social li { border-top-color: rgb(244 242 237 / .14); }
  html[data-flight-state="ready"] .contact--live:focus-within .contact__frame,
  html[data-flight-state="ready"] .contact--live:focus-within .contact__details { opacity: 1 !important; filter: none !important; }
  html[data-flight-state="ready"] .contact--live .contact__card:focus-within * { opacity: 1 !important; filter: none !important; pointer-events: auto !important; }

  /* Footer: end credits rolling over the landed world. */
  html.contact-landing[data-flight-state="ready"] .site-footer {
    /* Credits roll on their own dark field, as the landed world fades down. */
    background: linear-gradient(180deg, rgb(10 10 11 / 0), rgb(10 10 11 / .9) 14%, rgb(10 10 11 / .94));
    border-top: 0;
    opacity: clamp(0, calc((var(--F, 1) - .32) / .3), 1);
  }
  html.contact-landing[data-flight-state="ready"] .site-footer:focus-within { opacity: 1; }
  html.contact-landing[data-flight-state="ready"] .site-footer__lead { justify-items: center; text-align: center; }
  html.contact-landing[data-flight-state="ready"] .site-footer__slogan { max-width: 22ch; text-shadow: 0 2px 30px rgb(10 10 11 / .9); }
  html.contact-landing[data-flight-state="ready"] .site-footer__cols { border-top-color: rgb(244 242 237 / .12); }
}

@media (width < 700px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .contact--live .contact__card { inset: calc(var(--header-h) + .75rem) var(--gutter) auto; }
  html[data-flight-state="ready"] .contact--live .contact__frame { padding: 1rem .25rem; gap: .55rem; }
  html[data-flight-state="ready"] .contact--live .contact__title { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  html[data-flight-state="ready"] .contact--live .contact__lede { font-size: .875rem; }
  html[data-flight-state="ready"] .contact--live .contact__email a { font-size: clamp(1rem, 5.35vw, 1.5rem); }
  html[data-flight-state="ready"] .contact--live .contact__actions { gap: .5rem; flex-wrap: nowrap; }
  html[data-flight-state="ready"] .contact--live .contact__actions .btn { font-size: .78rem; padding-inline: .8rem; }
  html[data-flight-state="ready"] .contact--live .contact__emblem[data-world-anchor] { width: 240px; }
  html[data-flight-state="ready"] .contact--live .contact__details { grid-template-columns: minmax(0, 1fr); gap: .75rem; bottom: 1rem; }
  html[data-flight-state="ready"] .contact--live .contact__checklist,
  html[data-flight-state="ready"] .contact--live .contact__social { grid-column: 1; }
  html[data-flight-state="ready"] .contact--live .checklist li { padding-block: .3rem; font-size: .8125rem; }
  html[data-flight-state="ready"] .contact--live .contact__social .contact__subtitle { display: none; }
  html[data-flight-state="ready"] .contact--live .social { display: flex; gap: 0; }
  html[data-flight-state="ready"] .contact--live .social li { flex: 1; border-top: 1px solid rgb(244 242 237 / .14); }
  html[data-flight-state="ready"] .contact--live .social li + li { border-left: 1px solid rgb(244 242 237 / .14); }
  html[data-flight-state="ready"] .contact--live .social a { justify-content: center; gap: .35rem; font-size: .8125rem; }
}

/* ---- scenes/faq.css ---- */
/* FAQ · a calm cruise above the mist (scenes/faq.js).
 * Static / no-JS / reduced motion: title left, questions and answers visible.
 * Live: pinned. The column rises out of the mist, reads at about 1:1 with the
 * scroll (JS sets the track length and the column offset), then sinks back. */
.faq__window { grid-column: 6 / -1; }
@media (width < 900px) { .faq__window { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .faq--live {
    --track: 320; --p: var(--scene-progress, 0);
    /* Resolves in place once the stage is pinned (see --scene-hold). */
    --in: clamp(0, calc(var(--p) / .1), 1);
    --out: clamp(0, calc((var(--p) - .88) / .1), 1);
    background: none;
  }
  html[data-flight-state="ready"] .faq--live .faq__grid {
    position: absolute; inset: calc(var(--header-h) + clamp(1.5rem, 6svh, 4rem)) 0 0; margin-inline: auto; align-items: start;
    opacity: var(--scene-hold, 1);
  }
  html[data-flight-state="ready"] .faq--live .faq__head .section-title {
    position: static; font-size: clamp(2.5rem, 4.3vw, 5rem); line-height: 1.02; max-width: 10ch;
    text-shadow: 0 2px 30px rgb(10 10 11 / .8);
    /* Resolves out of the mist; recedes into it at the end. */
    opacity: calc(var(--in) - var(--out));
    filter: blur(calc((1 - var(--in) + var(--out)) * 10px));
    transform: translate3d(0, calc((1 - var(--in)) * 3rem + var(--out) * 2.5rem), 0) scale(calc(1 - var(--out) * .08));
    transform-origin: 0 100%;
  }
  /* The reading window: its top and bottom dissolve into the mist. */
  html[data-flight-state="ready"] .faq--live .faq__window {
    position: relative; height: calc(100svh - var(--header-h) - clamp(1.5rem, 6svh, 4rem)); overflow: clip;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 72%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 72%, transparent);
    opacity: calc(var(--in) - var(--out));
    filter: blur(calc((1 - var(--in) + var(--out)) * 8px));
    transform: translate3d(0, calc((1 - var(--in)) * 18svh + var(--out) * 14svh), 0);
  }
  html[data-flight-state="ready"] .faq--live .faq__list {
    position: relative; padding: 14svh 2.5rem 30svh; will-change: transform;
  }
  html[data-flight-state="ready"] .faq--live .faq__list::before {
    content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(10 10 11 / 0), rgb(10 10 11 / .6) 12%, rgb(10 10 11 / .68) 70%, rgb(10 10 11 / .4));
  }
  html[data-flight-state="ready"] .faq--live .qa { transform-origin: 0 50%; will-change: transform, opacity; padding-block: clamp(1.75rem, 4svh, 2.6rem); }
  html[data-flight-state="ready"] .faq--live .qa__q { font-size: clamp(1.15rem, 1.55vw, 1.6rem); text-wrap: balance; }
  html[data-flight-state="ready"] .faq--live .qa__a { color: rgb(244 242 237 / .82); font-size: clamp(1rem, 1.05vw, 1.0625rem); }
  html[data-flight-state="ready"] .faq--live .qa:focus-within { opacity: 1 !important; }
  html[data-flight-state="ready"] .faq--live:focus-within .faq__window { opacity: 1; filter: none; transform: none; }
}
@media (width < 900px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .faq--live .faq__grid { inset: calc(var(--header-h) + 1.25rem) 0 0; row-gap: .5rem; }
  html[data-flight-state="ready"] .faq--live .faq__head .section-title { font-size: clamp(2.2rem, 10vw, 3.2rem); max-width: 12ch; }
  html[data-flight-state="ready"] .faq--live .faq__window { height: calc(100svh - var(--header-h) - 1.25rem - clamp(6rem, 17vw + 1.5rem, 8rem)); }
  html[data-flight-state="ready"] .faq--live .faq__list { padding: 10svh 0 28svh; }
  html[data-flight-state="ready"] .faq--live .faq__list::before { inset: 0 calc(var(--gutter) * -1); background: rgb(10 10 11 / .55); }
}

/* ---- scenes/gear.css ---- */
/* Gear · DJI Air 3S reveal (scenes/gear.js).
 * Static / no-JS / reduced motion: the camera report sheet in styles.css.
 * Live: the aircraft is anchored in the valley; the spec sheet becomes a
 * telemetry HUD locked onto it. */
.gear__craft { display: contents; }

@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="gear"] { --track: 420; --p: var(--scene-progress, 0); --sheet: 0; overflow: visible; }
  html[data-flight-state="ready"] .gear--live .gear__inner { position: static; height: 100%; }
  html[data-flight-state="ready"] .gear--live .gear__sheet { display: block; position: static; }
  html[data-flight-state="ready"] .gear--live .gear__figure { position: static; display: block; width: auto; height: auto; min-height: 0; margin: 0; isolation: auto; }
  html[data-flight-state="ready"] .gear--live .gear__figure::before,
  html[data-flight-state="ready"] .gear--live .gear__orbit { display: none; }

  /* The aircraft (anchored): explicit size, the render cropped to its 3:2 frame. */
  html[data-flight-state="ready"] .gear--live .gear__craft {
    display: block; width: min(50vw, 88svh, 52rem); aspect-ratio: 3 / 2;
  }
  html[data-flight-state="ready"] .gear--live .gear__drone {
    display: block; width: 100%; max-width: none; height: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    transform: rotate(var(--bank, 0deg)); transform-origin: 50% 50%;
    filter: brightness(.84) contrast(1.08) saturate(.88) drop-shadow(0 22px 34px rgb(10 10 11 / .75)) drop-shadow(0 8px 14px rgb(200 133 47 / .16));
  }

  /* Title and pitch: the opening card, top left. */
  html[data-flight-state="ready"] .gear--live .section-head {
    position: absolute; z-index: 400; top: calc(var(--header-h) + clamp(1.25rem, 4svh, 2.5rem)); left: var(--gutter); margin: 0;
  }
  html[data-flight-state="ready"] .gear--live .section-title { font-size: clamp(1.75rem, 2.8vw, 3rem); max-width: none; }
  /* Entry resolves out of focus; exit recedes into the night with the aircraft. */
  html[data-flight-state="ready"] .gear--live .section-head {
    --in: clamp(0, calc((var(--p) - .005) / .06), 1); --out: clamp(0, calc((var(--p) - .88) / .07), 1);
    opacity: calc((var(--in) - var(--out)) * var(--scene-hold, 1)); filter: blur(calc((1 - var(--in) + var(--out)) * 8px));
    transform: scale(calc(1.04 - var(--in) * .04 - var(--out) * .06)); transform-origin: 0 50%;
  }
  html[data-flight-state="ready"] .gear--live .gear__pitch {
    --o: clamp(0, calc((var(--p) - .4) / .06), 1);
    position: absolute; z-index: 400; left: var(--gutter); top: calc(var(--header-h) + clamp(5rem, 13svh, 8rem));
    width: min(34ch, 30vw); padding: 0 0 0 1.25rem; border-left: 1px solid var(--ambar);
    color: var(--proyector); font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.6;
    opacity: calc((clamp(0, calc((var(--p) + .02) / .08), 1) - var(--o)) * var(--scene-hold, 1));
    transform: translate3d(0, calc(var(--o) * -1.5rem), 0);
    text-shadow: 0 1px 14px rgb(10 10 11 / .95);
  }

  /* DJI wordmark (untouched): a nameplate under the aircraft once locked. */
  html[data-flight-state="ready"] .gear--live .gear__wordmark {
    position: absolute; z-index: 400; left: 50%; bottom: clamp(4rem, 9svh, 6rem); width: clamp(8rem, 11vw, 11rem); margin: 0;
    opacity: calc((clamp(0, calc((var(--p) - .4) / .05), 1) - clamp(0, calc((var(--p) - .88) / .05), 1)) * var(--scene-hold, 1)); transform: translate3d(-50%, 0, 0);
  }

  /* Spec sheet: a fixed index of the four group titles; the active group's
     rows crossfade in one detail area below it. Layout never changes size:
     only opacity and transform animate (JS toggles .is-active, writes --sheet). */
  html[data-flight-state="ready"] .gear--live .specs {
    --row: 2.75rem;
    position: absolute; z-index: 400; right: var(--gutter); top: calc(var(--header-h) + clamp(3.5rem, 15svh, 8.5rem));
    width: min(30rem, 32vw); height: calc(var(--row) * 4 + 15rem); margin: 0; padding: 0; border: 0; display: block;
    opacity: calc(var(--sheet) * var(--scene-hold, 1)); filter: blur(calc((1 - var(--sheet)) * 6px));
    border-top: 1px solid rgb(244 242 237 / .14);
  }
  html[data-flight-state="ready"] .gear--live .specs__group {
    position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; pointer-events: none;
  }
  html[data-flight-state="ready"] .gear--live .specs__title {
    position: absolute; left: 0; right: 0; top: calc((var(--i) - 1) * var(--row)); height: var(--row);
    display: flex; align-items: center; gap: .7rem; padding: 0 1rem; margin: 0;
    font-size: 1rem; color: rgb(244 242 237 / .5); border-bottom: 1px solid rgb(244 242 237 / .14);
    transition: color .5s, background-color .5s;
  }
  html[data-flight-state="ready"] .gear--live .specs__group[data-group="1"] { --i: 1; }
  html[data-flight-state="ready"] .gear--live .specs__group[data-group="2"] { --i: 2; }
  html[data-flight-state="ready"] .gear--live .specs__group[data-group="3"] { --i: 3; }
  html[data-flight-state="ready"] .gear--live .specs__group[data-group="4"] { --i: 4; }
  html[data-flight-state="ready"] .gear--live .specs__title::before {
    content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: rgb(244 242 237 / .35); transition: background .5s, box-shadow .5s;
  }
  html[data-flight-state="ready"] .gear--live .is-active .specs__title { color: var(--proyector); background: rgb(10 10 11 / .55); }
  html[data-flight-state="ready"] .gear--live .is-active .specs__title::before { background: var(--ambar); box-shadow: 0 0 12px var(--ambar); }
  html[data-flight-state="ready"] .gear--live .specs__list {
    position: absolute; left: 0; right: 0; top: calc(var(--row) * 4); padding: 1.1rem 1rem 1.2rem; gap: .55rem;
    background: linear-gradient(180deg, rgb(10 10 11 / .7), rgb(10 10 11 / .45));
    border-top: 1px solid var(--ambar);
    opacity: 0; transform: translate3d(0, .75rem, 0); transition: opacity .45s, transform .6s cubic-bezier(.23, 1, .32, 1);
  }
  html[data-flight-state="ready"] .gear--live .is-active .specs__list { opacity: 1; transform: none; transition-delay: .12s; }
  html[data-flight-state="ready"] .gear--live .specs__row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: .9rem; align-items: baseline; }
  html[data-flight-state="ready"] .gear--live .specs__row dt { font-size: .8125rem; line-height: 1.4; }
  html[data-flight-state="ready"] .gear--live .specs__row dd { font-size: .8125rem; line-height: 1.45; }
  html[data-flight-state="ready"] .gear--live .gear__source {
    position: absolute; z-index: 400; left: 50%; bottom: clamp(1.5rem, 4svh, 2.25rem); margin: 0; padding: 0; border: 0;
    transform: translate3d(-50%, 0, 0); white-space: nowrap;
    opacity: calc((clamp(0, calc((var(--p) - .84) / .03), 1) - clamp(0, calc((var(--p) - .9) / .04), 1)) * var(--scene-hold, 1));
  }
  html[data-flight-state="ready"] .gear--live:focus-within .specs { --sheet: 1 !important; }
  html[data-flight-state="ready"] .gear--live .specs__group:focus-within .specs__list { opacity: 1; transform: none; }
  html[data-flight-state="ready"] .gear--live:focus-within .gear__source { opacity: 1; }

  /* HUD overlay */
  .gear__hud { position: absolute; inset: 0; z-index: 390; pointer-events: none; opacity: var(--scene-hold, 1); }
  .gear__corner, .gear__leader, .gear__mark { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
  .gear__corner { width: 22px; height: 22px; margin: -1px 0 0 -1px; border-top: 1px solid var(--proyector); border-left: 1px solid var(--proyector); transform-origin: 0 0; transition: border-color .25s; }
  .gear__hud.is-locked .gear__corner { border-color: var(--ambar); }
  .gear__leader { width: 1px; height: 1px; background: linear-gradient(90deg, var(--ambar), rgb(244 242 237 / .7)); transform-origin: 0 50%; }
  .gear__mark { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--ambar); border-radius: 50%; box-shadow: 0 0 12px rgb(200 133 47 / .6), inset 0 0 6px rgb(200 133 47 / .5); }
  .gear__mark::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ambar); }
}

@media (width < 1100px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .gear--live .specs { width: min(26rem, 40vw); }
  html[data-flight-state="ready"] .gear--live .specs__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (width < 700px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="gear"] { --track: 460; }
  html[data-flight-state="ready"] .gear--live .gear__craft { width: 88vw; }
  html[data-flight-state="ready"] .gear--live .section-title { font-size: 1.6rem; }
  html[data-flight-state="ready"] .gear--live .gear__pitch {
    top: auto; bottom: 1.5rem; right: var(--gutter); width: auto; font-size: .9375rem;
  }
  html[data-flight-state="ready"] .gear--live .gear__wordmark { left: var(--gutter); bottom: auto; top: calc(var(--header-h) + 4.9rem); width: 7rem; transform: none; }
  /* Phones: only the active group, one panel crossfading in place at the bottom. */
  html[data-flight-state="ready"] .gear--live .specs { left: var(--gutter); right: var(--gutter); top: auto; bottom: 1rem; width: auto; height: 21rem; border: 0; }
  html[data-flight-state="ready"] .gear--live .specs__title { top: auto; bottom: calc(100% - var(--row)); opacity: 0; transition: opacity .45s; border-bottom: 0; background: none; font-size: 1.0625rem; }
  html[data-flight-state="ready"] .gear--live .is-active .specs__title { opacity: 1; top: 0; bottom: auto; background: none; }
  html[data-flight-state="ready"] .gear--live .specs__title { top: 0; }
  html[data-flight-state="ready"] .gear--live .specs__list { top: var(--row); bottom: 0; padding: .9rem .95rem 1rem; }
  html[data-flight-state="ready"] .gear--live .specs__group::before { content: ''; position: absolute; inset: 0; background: rgb(10 10 11 / .68); border-top: 1px solid var(--ambar); opacity: 0; transition: opacity .45s; }
  html[data-flight-state="ready"] .gear--live .specs__group.is-active::before { opacity: 1; }
  html[data-flight-state="ready"] .gear--live .specs__row { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .6rem; }
  html[data-flight-state="ready"] .gear--live .gear__source {
    left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 5rem); transform: none; font-size: .6875rem; min-height: 44px; display: flex; align-items: center; margin-top: -.9rem;
  }
}

/* ---- scenes/hero.css ---- */
/* Hero · opening title card over the takeoff.
 * Static / no-JS / reduced motion: the rules in styles.css (readable flow).
 * Live world: a monumental title card that scenes/hero.js hands off to the
 * wordmark. The logo itself belongs to flight-logo.js. */
.hero__word { display: inline-block; white-space: nowrap; }
.hero__char { display: inline-block; will-change: auto; }

@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .hero--choreo .hero__content {
    /* scenes/hero.js choreographs every piece; the whole block no longer fades. */
    opacity: 1; transform: none;
    inset: auto var(--gutter) clamp(4.5rem, 9svh, 6.5rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 3.2svh, 2.4rem) clamp(2rem, 5vw, 6rem);
  }
  html[data-flight-state="ready"] .hero--choreo .hero__content::before {
    inset: -8rem calc(var(--gutter) * -1) -7rem;
    background: linear-gradient(180deg, var(--proyeccion-0), var(--proyeccion-55) 45%, var(--proyeccion-85));
    opacity: calc(1 - var(--hero-flight, 0) * 3.2);
  }
  html[data-flight-state="ready"] .hero--choreo .hero__title {
    grid-column: 1; align-self: end; max-width: 14ch;
    font-size: clamp(2.6rem, min(5.6vw, 9.4svh), 6.25rem);
    line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
  }
  html[data-flight-state="ready"] .hero--choreo .hero__char {
    --h: 0; will-change: transform, opacity;
    color: color-mix(in srgb, #ffe7c4 calc(var(--h) * 100%), var(--proyector));
    text-shadow: 0 0 calc(var(--h) * 22px) rgb(232 150 70 / calc(var(--h) * .9)), 0 0 calc(var(--h) * 4px) rgb(255 240 215 / var(--h));
  }
  html[data-flight-state="ready"] .hero--choreo .hero__word { will-change: filter; }
  html[data-flight-state="ready"] .hero--choreo .hero__sub {
    grid-column: 2; align-self: end; justify-self: end; max-width: 34ch;
    padding-left: 1.25rem; border-left: 1px solid var(--ambar);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.6;
  }
  html[data-flight-state="ready"] .hero--choreo .hero__ctas { grid-column: 1 / -1; }
  html[data-flight-state="ready"] .hero--choreo .hero__ctas .btn { min-height: 48px; padding-inline: 1.25rem; font-size: .875rem; }
  /* The title leaves by its own letters; the block-level focus rule restores all. */
  html[data-flight-state="ready"] .hero--choreo .hero__content:focus-within .hero__sub,
  html[data-flight-state="ready"] .hero--choreo .hero__content:focus-within .hero__ctas { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto !important; }
}

@media (width < 700px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .hero--choreo .hero__content {
    inset: auto var(--gutter) 5.25rem; grid-template-columns: minmax(0, 1fr); gap: 1.1rem;
  }
  html[data-flight-state="ready"] .hero--choreo .hero__title,
  html[data-flight-state="ready"] :lang(de) .hero--choreo .hero__title {
    font-size: clamp(2.05rem, 9.6vw, 2.75rem); max-width: 11ch; line-height: 1.04; letter-spacing: -.04em;
  }
  html[data-flight-state="ready"] .hero--choreo .hero__sub { grid-column: 1; justify-self: start; font-size: .9375rem; padding-left: 1rem; max-width: 36ch; }
  html[data-flight-state="ready"] .hero--choreo .hero__ctas { gap: .6rem; }
  html[data-flight-state="ready"] .hero--choreo .hero__ctas .btn { min-height: 48px; font-size: .8125rem; padding-inline: .95rem; }
}
@media (height < 600px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .hero--choreo .hero__title { font-size: clamp(1.6rem, 7svh, 2.4rem); }
  html[data-flight-state="ready"] .hero--choreo .hero__content { bottom: 2rem; }
}

/* ---- scenes/notfound.css ---- */
/* 404 · lost signal (scenes/notfound.js). Static: the empty viewfinder in styles.css. */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .nf--live { background: none; }
  html[data-flight-state="ready"] .nf--live .nf__code {
    opacity: .14; animation: nf-signal 5.5s ease-in-out infinite;
  }
  html[data-flight-state="ready"] .nf--live .nf__title { text-shadow: 0 2px 28px rgb(10 10 11 / .85); }
  html[data-flight-state="ready"] .nf--live .nf__content .lede { color: var(--proyector); }
  html[data-flight-state="ready"] .nf--live .vf--frame .vf__c { animation: nf-search 7s ease-in-out infinite; }
}
/* The frame searches for a signal: the code breathes, the corners hunt. */
@keyframes nf-signal { 0%, 100% { opacity: .1; } 50% { opacity: .2; } }
@keyframes nf-search { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -6px); } }

/* ---- scenes/portfolio.css ---- */
/* Scene "portfolio" (/portafolio). Two states:
 *   always   a numbered contact sheet: every video as a real YouTube link,
 *            in the channel's order, then the closing call to action.
 *   live     the expedition: one flight through the valley, one stop per
 *            video (scenes/portfolio.js), a compact route map, arrival at the CTA.
 * The page head and the CTA belong to this page only (html[data-page]). */

/* ------------------------------------------------------------ document */
html[data-page="portfolio"] .expedition-head { min-height: 0; padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) clamp(3rem, 6vw, 5rem); }
html[data-page="portfolio"] .expedition-head .page-title { max-width: 14ch; font-size: clamp(2.3rem, 1.2rem + 4.4vw, 5.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.036em; text-wrap: balance; }
html[data-page="portfolio"] .expedition-head .lede { max-width: 44ch; }
html[data-page="portfolio"] .expedition-head .page-updated { margin-top: var(--space-5); }

.expedition[data-scene="portfolio"] .expedition__stage {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.expedition[data-scene="portfolio"] .expedition__stops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2.75rem, 4.5vw, 4rem) var(--grid-gap);
  margin: 0; padding: 0;
}
.expedition[data-scene="portfolio"] .expedition__stop { position: relative; }
.expedition[data-scene="portfolio"] .stop-card { position: relative; display: grid; gap: var(--space-3); }
.expedition[data-scene="portfolio"] .stop-card__index {
  display: flex; align-items: center; gap: .75rem;
  color: var(--proyector);
  font-size: var(--fs-data-sm);
  letter-spacing: .06em;
}
.expedition[data-scene="portfolio"] .stop-card__index::after { content: ""; flex: 1; height: 1px; background: var(--niebla-dim); }
.expedition[data-scene="portfolio"] .stop-card__of { color: var(--niebla); }
.expedition[data-scene="portfolio"] .stop-card__af { display: none; }
.expedition[data-scene="portfolio"] .tile { display: grid; gap: .875rem; }
.expedition[data-scene="portfolio"] .tile__frame { aspect-ratio: 16 / 9; overflow: visible; }
.expedition[data-scene="portfolio"] .tile__img { transform: none; }
.expedition[data-scene="portfolio"] .tile__meta { display: grid; gap: .375rem; }
.expedition[data-scene="portfolio"] .tile__title { font-size: var(--fs-h4); }

html[data-page="portfolio"] .expedition-end .cta-block__frame { gap: var(--space-5); }
html[data-page="portfolio"] .expedition-end__count { color: var(--ambar); }

/* ------------------------------------------------------------ the world */
@media (prefers-reduced-motion: no-preference) {
  html[data-page="portfolio"][data-flight-state="ready"] .flight-backdrop { opacity: .96; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] { --track: calc((var(--stops, 19) + 2.5) * 80 + 100); --f: 1; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .expedition__stage { max-width: none; padding: 0; }

  /* Page head over the establishing shot. */
  html[data-page="portfolio"][data-flight-state="ready"] .expedition-head { position: relative; min-height: 100svh; display: grid; align-content: end; padding-bottom: clamp(3rem, 12svh, 8rem); }
  html[data-page="portfolio"][data-flight-state="ready"] .expedition-head::before {
    content: ""; position: absolute; inset: 30% 0 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, var(--proyeccion-0), var(--proyeccion-74) 60%, var(--proyeccion-85));
  }

  /* Cards: virtualized. Mounted ones are world anchors; the others stay in
     the document (readable, focusable) but out of sight. */
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .expedition__stops { display: block; height: 0; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .expedition__stop { height: 0; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card {
    width: min(560px, 38vw);
    gap: .7rem;
    padding: .95rem .95rem 1.05rem;
    background: rgb(10 10 11 / .88);
    border: 1px solid rgb(244 242 237 / .12);
  }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card:not([data-world-anchor]) { position: fixed; top: 0; left: -100000px; opacity: 0; pointer-events: none; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card > *:not(.stop-card__af) { filter: blur(calc((1 - var(--f)) * 9px)); }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card[data-sharp] > * { filter: none; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card__index { font-size: .6875rem; clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card__index::after { background: linear-gradient(90deg, var(--ambar), var(--niebla-dim) 40%); }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card__af {
    display: block;
    --vf-len: 22px; --vf-color: var(--proyector-85);
    inset: calc(-9px - (1 - var(--f)) * 34px);
    opacity: calc(var(--f) * 1.4 - .2);
  }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card[data-locked] .stop-card__af .vf__c { animation: expedition-lock 900ms var(--ease-out) both; }
  @keyframes expedition-lock {
    0%, 35% { border-color: var(--ambar); }
    100% { border-color: var(--proyector-85); }
  }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .tile__meta { gap: .3rem; transform: translate3d(0, calc((1 - var(--f)) * 8px), 0); }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .tile__title { font-family: var(--display); font-weight: 300; font-size: clamp(1.1rem, .75rem + .85vw, 1.55rem); line-height: 1.2; letter-spacing: -0.018em; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .tile__place { font-size: .75rem; }
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] [data-world-anchor] a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

  /* Route map: which stop you are at, the route drawn so far, jump to any stop. */
  html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .route-map {
    position: absolute; z-index: 900;
    left: 50%; bottom: clamp(1rem, 3svh, 1.75rem);
    width: min(820px, calc(100vw - 2 * var(--gutter) - 2.5rem));
    translate: -50% 0;
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
    padding: .7rem .8rem .7rem 1rem;
    background: rgb(10 10 11 / .82);
    border: 1px solid rgb(244 242 237 / .1);
    backdrop-filter: blur(10px);
    opacity: var(--map, 0);
    transform: translate3d(0, calc((1 - var(--map, 0)) * 14px), 0);
  }
  .expedition[data-scene="portfolio"] .route-map__now { display: flex; align-items: baseline; gap: .45rem; min-width: 0; margin: 0; font-family: var(--mono); font-size: .75rem; font-variant-numeric: tabular-nums; }
  .expedition[data-scene="portfolio"] .route-map__n { color: var(--ambar); }
  .expedition[data-scene="portfolio"] .route-map__of { color: var(--niebla); flex: none; }
  .expedition[data-scene="portfolio"] .route-map__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: .35rem; font-family: var(--body); font-size: .8125rem; color: var(--proyector); }
  .expedition[data-scene="portfolio"] .route-map__track { position: relative; height: 34px; container-type: size; }
  .expedition[data-scene="portfolio"] .route-map__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .expedition[data-scene="portfolio"] .route-map__line path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px; }
  .expedition[data-scene="portfolio"] .route-map__path { stroke: var(--niebla-hair); stroke-dasharray: 2 4; }
  .expedition[data-scene="portfolio"] .route-map__lit { stroke: var(--ambar); stroke-width: 1.5px; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
  .expedition[data-scene="portfolio"] .route-map__stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .expedition[data-scene="portfolio"] .route-map__dot {
    position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0;
    border: 0; background: none; cursor: pointer; border-radius: 50%;
  }
  .expedition[data-scene="portfolio"] .route-map__dot::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: var(--niebla-hair);
    transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
  }
  .expedition[data-scene="portfolio"] .route-map__dot[data-visited]::before { background: var(--ambar); opacity: .7; }
  .expedition[data-scene="portfolio"] .route-map__dot[aria-current]::before { background: var(--proyector); transform: scale(1.7); box-shadow: 0 0 0 3px rgb(200 133 47 / .45); }
  .expedition[data-scene="portfolio"] .route-map__dot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
  @media (hover: hover) and (pointer: fine) {
    .expedition[data-scene="portfolio"] .route-map__dot:hover::before { background: var(--proyector); transform: scale(1.6); }
  }
  .expedition[data-scene="portfolio"] .route-map__plane {
    position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border: 1px solid var(--ambar); rotate: 45deg; pointer-events: none;
  }
  .expedition[data-scene="portfolio"] .route-map__step { display: flex; gap: .35rem; }
  .expedition[data-scene="portfolio"] .route-map__step button {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgb(244 242 237 / .18); border-radius: var(--radius); background: none; color: var(--proyector); cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
  }
  .expedition[data-scene="portfolio"] .route-map__step button:disabled { opacity: .3; cursor: default; }
  .expedition[data-scene="portfolio"] .route-map__step button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) {
    .expedition[data-scene="portfolio"] .route-map__step button:not(:disabled):hover { border-color: var(--ambar); color: var(--ambar); }
  }

  /* The CTA arrives over the lit route. */
  html[data-page="portfolio"][data-flight-state="ready"] .expedition-end { position: relative; padding-block: 20svh 16svh; }
  html[data-page="portfolio"][data-flight-state="ready"] .expedition-end .cta-block__frame { background: linear-gradient(90deg, rgb(10 10 11 / .86), rgb(10 10 11 / .55) 70%, rgb(10 10 11 / 0)); }

  @media (max-aspect-ratio: 9/10) {
    html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .stop-card { width: min(calc(100vw - 44px), 360px); padding: .8rem .8rem .9rem; }
    html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .tile__title { font-size: 1.15rem; }
    html[data-flight-state="ready"] .expedition[data-scene="portfolio"] .route-map {
      left: calc(var(--gutter) + 6px); right: 10px; width: auto; translate: none; bottom: .75rem;
      grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .45rem .75rem;
      padding: .6rem .6rem .55rem .85rem;
    }
    .expedition[data-scene="portfolio"] .route-map__now { grid-column: 1; grid-row: 1; }
    .expedition[data-scene="portfolio"] .route-map__step { grid-column: 2; grid-row: 1 / span 2; }
    .expedition[data-scene="portfolio"] .route-map__step button { width: 44px; height: 44px; }
    .expedition[data-scene="portfolio"] .route-map__track { grid-column: 1; grid-row: 2; height: 18px; }
    .expedition[data-scene="portfolio"] .route-map__dot { pointer-events: none; }
  }
}

/* ---- scenes/process.css ---- */
/* Scene: route (scenes/process.js), the process flight plan. Scoped to
 * [data-scene="route"]. The wrapper section (.proc) holds this track and the
 * colour track. Always: a readable four-step rail. Live world: cards dock to
 * waypoint markers on the terrain. */

/* ------------------------------------------------------------ document */
.proc .proc__head { display: grid; gap: var(--space-5); margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.proc .proc__heading { max-width: 16ch; }
.proc .proc__lede { max-width: 46ch; }
[data-scene="route"] .proc__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin: 0; padding: var(--space-6) 0 0; list-style: none;
}
[data-scene="route"] .proc__steps::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--niebla-hair); }
[data-scene="route"] .proc__step { position: relative; display: grid; align-content: start; gap: var(--space-3); }
[data-scene="route"] .proc__step::before {
  content: ""; position: absolute; top: calc(var(--space-6) * -1 - 5px); left: 0;
  width: 9px; height: 9px; translate: -4px 0; rotate: 45deg;
  border: 1px solid var(--ambar); background: var(--proyeccion);
}
[data-scene="route"] .proc__name { font-size: var(--fs-h3); font-weight: 300; letter-spacing: -.02em; }
[data-scene="route"] .proc__text { max-width: 30ch; margin: 0; color: var(--niebla); }
@media (width < 800px) {
  [data-scene="route"] .proc__steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); padding: 0 0 0 var(--space-6); }
  [data-scene="route"] .proc__steps::before { inset: .4em auto 0 0; width: 1px; height: auto; }
  [data-scene="route"] .proc__step::before { top: .45em; left: calc(var(--space-6) * -1); }
  [data-scene="route"] .proc__text { max-width: 44ch; }
}

/* ---------------------------------------------------------- live world */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .proc { padding-block: 0; }
  html[data-flight-state="ready"] [data-scene="route"] { --track: 800; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__inner { position: relative; height: 100%; }

  html[data-flight-state="ready"] [data-scene="route"] .proc__head {
    position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(3rem, 12svh, 8rem);
    margin: 0; gap: var(--space-4);
    opacity: calc(var(--proc-head, 0) * var(--scene-hold, 1));
    transform: translate3d(0, calc((1 - var(--proc-head, 0)) * -1.25rem), 0);
    pointer-events: none;
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__heading {
    font-size: clamp(2.4rem, 1rem + 4.6vw, 6rem); max-width: 12ch;
    text-shadow: 0 0 2.5rem rgb(10 10 11 / .8);
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__lede {
    color: var(--proyector); max-width: 38ch;
    text-shadow: 0 0 1.25rem rgb(10 10 11 / .9), 0 0 .25rem rgb(10 10 11 / .9);
  }

  html[data-flight-state="ready"] [data-scene="route"] .proc__steps { display: block; padding: 0; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__steps::before { display: none; }

  /* A card docked to its waypoint; the leader line ends on the marker. */
  html[data-flight-state="ready"] [data-scene="route"] .proc__step {
    --lead: 3.25rem;
    display: block; width: 20rem; margin: 0;
    pointer-events: none;
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step::before {
    top: auto; left: auto; width: auto; height: auto; translate: none; rotate: none; border: 0;
    background: linear-gradient(var(--lead-dir, 180deg), var(--ambar), rgb(200 133 47 / 0));
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="up"] { padding-bottom: var(--lead); }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="up"]::before { left: 50%; bottom: .7rem; width: 1px; height: calc(var(--lead) - .9rem); --lead-dir: 180deg; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="down"] { padding-top: var(--lead); }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="down"]::before { left: 50%; top: .7rem; width: 1px; height: calc(var(--lead) - .9rem); --lead-dir: 0deg; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="left"] { padding-right: var(--lead); }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="left"]::before { top: 50%; right: .8rem; height: 1px; width: calc(var(--lead) - 1rem); --lead-dir: 90deg; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="right"] { padding-left: var(--lead); }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="right"]::before { top: 50%; left: .8rem; height: 1px; width: calc(var(--lead) - 1rem); --lead-dir: 270deg; }

  html[data-flight-state="ready"] [data-scene="route"] .proc__name,
  html[data-flight-state="ready"] [data-scene="route"] .proc__text {
    display: block; margin: 0;
    background: rgb(10 10 11 / .8);
    transition: opacity .45s var(--ease-out, ease), color .45s var(--ease-out, ease);
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__name {
    padding: .9rem 1.2rem .35rem;
    border-left: 2px solid var(--ambar);
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 300; line-height: 1.1;
    color: var(--proyector);
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__text {
    max-width: none; padding: .35rem 1.2rem 1rem;
    border-left: 2px solid var(--ambar);
    font-size: 1rem; line-height: 1.55; color: var(--proyector);
  }
  /* Visited and upcoming waypoints keep only their name (a map label). */
  html[data-flight-state="ready"] [data-scene="route"] .proc__text {
    max-height: 9rem; overflow: hidden;
    transition: opacity .4s var(--ease-out, ease), max-height .5s var(--ease-out, ease), padding .5s var(--ease-out, ease);
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step:not([data-state="active"]) .proc__text { opacity: 0; max-height: 0; padding-block: 0; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step:not([data-state="active"]) .proc__name {
    padding-bottom: .8rem; font-size: clamp(1.15rem, .95rem + .5vw, 1.45rem);
    color: var(--proyector); border-left-color: var(--proyector-40); background: rgb(10 10 11 / .62);
  }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-state="done"] .proc__name { color: var(--niebla); border-left-color: var(--niebla-hair); }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step:not([data-state="active"])::before { opacity: .4; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__name { transition: font-size .5s var(--ease-out, ease), padding .5s var(--ease-out, ease), color .4s, border-color .4s; }

  @media (width < 700px) {
    html[data-flight-state="ready"] [data-scene="route"] .proc__step { --lead: 1.6rem; width: min(15.5rem, calc(100vw - 9rem)); }
    html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="down"] { width: calc(100vw - 2.5rem); --lead: 2.6rem; }
    html[data-flight-state="ready"] [data-scene="route"] .proc__name { font-size: 1.45rem; padding: .75rem 1rem .25rem; }
    html[data-flight-state="ready"] [data-scene="route"] .proc__text { font-size: .9375rem; padding: .3rem 1rem .85rem; }
    html[data-flight-state="ready"] [data-scene="route"] .proc__head { bottom: clamp(2rem, 9svh, 5rem); }
  }
}

/* Map labels hug their name and sit centred on the leader line. */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="route"] .proc__step:not([data-state="active"]) .proc__name { width: fit-content; padding-right: 1.4rem; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step:is([data-dock="up"], [data-dock="down"]):not([data-state="active"]) .proc__name { margin-inline: auto; }
  html[data-flight-state="ready"] [data-scene="route"] .proc__step[data-dock="left"]:not([data-state="active"]) .proc__name { margin-left: auto; }
}

/* ---- scenes/services.css ---- */
/* Scene: services (scenes/services.js). Scoped to [data-scene="services"].
 * Always: a typographic list that reads as a normal document (no JS, reduced
 * motion, no WebGL). Live world: a sticky stage whose titles and cards are
 * anchored into the landscape. */

/* ------------------------------------------------------------ document */
[data-scene="services"] .svc__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
[data-scene="services"] .svc__heading { max-width: 16ch; }
[data-scene="services"] .svc__lede { max-width: 46ch; }
[data-scene="services"] .svc__list { margin: 0; padding: 0; list-style: none; }
[data-scene="services"] .svc__site {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-3);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
}
[data-scene="services"] .svc__site + .svc__site { border-top: 1px solid var(--niebla-dim); }
[data-scene="services"] .svc__name {
  grid-column: 1 / span 6;
  font-size: var(--fs-h3-lg);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
}
[data-scene="services"] .svc__card { grid-column: 8 / -1; max-width: 44ch; margin: 0; color: var(--niebla); }
[data-scene="services"] .svc__survey { display: none; }
[data-scene="services"] .svc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  margin-block-start: clamp(1.75rem, 3.4vw, 2.75rem);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--niebla-dim);
}
[data-scene="services"] .svc__deliverables { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; }
[data-scene="services"] .svc__deliverables-label { font-weight: 500; font-size: var(--fs-small); }
[data-scene="services"] .svc__note { margin: 0; }
@media (width < 800px) {
  [data-scene="services"] .svc__name,
  [data-scene="services"] .svc__card { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- live world */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="services"] { --track: 780; }
  html[data-flight-state="ready"] [data-scene="services"] .svc__inner { position: relative; height: 100%; }

  /* Opening card: the section title while the camera climbs to the ridge. */
  html[data-flight-state="ready"] [data-scene="services"] .svc__head {
    position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(3rem, 11svh, 8rem);
    margin: 0; gap: var(--space-4);
    opacity: calc(var(--svc-head, 0) * var(--scene-hold, 1));
    transform: translate3d(0, calc((1 - var(--svc-head, 0)) * 1.5rem), 0);
    pointer-events: none;
  }
  html[data-flight-state="ready"] [data-scene="services"] .svc__heading {
    font-size: clamp(2.4rem, 1rem + 4.6vw, 6rem); max-width: 14ch;
    text-shadow: 0 0 2.5rem rgb(10 10 11 / .75);
  }
  html[data-flight-state="ready"] [data-scene="services"] .svc__lede {
    color: var(--proyector); max-width: 40ch;
    text-shadow: 0 0 1.25rem rgb(10 10 11 / .9), 0 0 .25rem rgb(10 10 11 / .9);
  }

  html[data-flight-state="ready"] [data-scene="services"] .svc__site { display: contents; }

  /* Titles laid into the world: authored at their on-screen size at the hold. */
  html[data-flight-state="ready"] [data-scene="services"] .svc__name {
    width: min(58rem, 62vw);
    margin: 0;
    font-size: clamp(2.2rem, .8rem + 5.2vw, 6.4rem);
    line-height: .98;
    letter-spacing: -.035em;
    color: var(--proyector);
    text-wrap: balance;
    text-shadow: 0 0 1.8rem rgb(10 10 11 / .55);
    pointer-events: none;
  }
  html[data-flight-state="ready"] [data-scene="services"] .svc__site .svc__name { text-align: center; }
  html[data-flight-state="ready"] [data-scene="services"] .svc__survey {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin-top: .9rem; text-shadow: none;
  }
  html[data-flight-state="ready"] [data-scene="services"] .svc__survey i { display: block; width: 3.5rem; height: 1px; background: var(--ambar); }
  html[data-flight-state="ready"] [data-scene="services"] .svc__survey i:first-child { background: linear-gradient(90deg, rgb(200 133 47 / 0), var(--ambar)); }
  html[data-flight-state="ready"] [data-scene="services"] .svc__survey i:last-child { background: linear-gradient(270deg, rgb(200 133 47 / 0), var(--ambar)); }
  html[data-flight-state="ready"] [data-scene="services"] .svc__survey b {
    display: block; width: .55rem; height: .55rem; rotate: 45deg;
    border: 1px solid var(--ambar); box-shadow: 0 0 .6rem var(--ambar-soft);
  }

  /* Cards: crisp, camera-facing, fixed size. */
  html[data-flight-state="ready"] [data-scene="services"] .svc__card {
    width: 23rem; max-width: none; margin: 0;
    padding: 1.1rem 1.35rem 1.2rem;
    background: linear-gradient(90deg, rgb(10 10 11 / .86), rgb(10 10 11 / .72));
    border-left: 2px solid var(--ambar);
    box-shadow: 0 1.5rem 3rem rgb(10 10 11 / .45);
    color: var(--proyector);
    font-size: 1.0625rem; line-height: 1.55;
  }

  /* Closing line: deliverables and the note, as the camera rises out. */
  html[data-flight-state="ready"] [data-scene="services"] .svc__foot {
    position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 8svh, 5rem);
    margin: 0; padding: 1.25rem 0 0;
    border-top-color: var(--proyector-40);
    opacity: calc(var(--svc-foot, 0) * var(--scene-hold, 1));
    transform: translate3d(0, calc((1 - var(--svc-foot, 0)) * 1.25rem), 0);
  }
  html[data-flight-state="ready"] [data-scene="services"][data-foot="off"] .svc__foot { pointer-events: none; }
  html[data-flight-state="ready"] [data-scene="services"] .svc__foot:focus-within { opacity: 1; transform: none; pointer-events: auto; }
  html[data-flight-state="ready"] [data-scene="services"] .svc__foot .data { color: var(--proyector); }
  html[data-flight-state="ready"] [data-scene="services"] .svc__foot::before {
    content: ""; position: absolute; inset: -3rem calc(var(--gutter) * -1) -3rem; z-index: -1;
    background: linear-gradient(0deg, rgb(10 10 11 / .82), rgb(10 10 11 / .5) 60%, rgb(10 10 11 / 0));
  }

  @media (width < 700px) {
    html[data-flight-state="ready"] [data-scene="services"] .svc__name {
      width: calc(100vw - 2.5rem);
      font-size: clamp(1.9rem, 8.6vw, 2.6rem);
    }
    html[data-flight-state="ready"] [data-scene="services"] .svc__site .svc__name { text-align: center; }
    html[data-flight-state="ready"] [data-scene="services"] .svc__card {
      width: calc(100vw - 2.5rem); font-size: 1rem; padding: 1rem 1.15rem 1.05rem;
    }
    html[data-flight-state="ready"] [data-scene="services"] .svc__head { bottom: clamp(2rem, 9svh, 5rem); }
    /* The longest words (Luftaufnahmen, aérienne) fit whole on a 360px phone. */
    html[data-flight-state="ready"] [data-scene="services"] .svc__heading { font-size: clamp(1.85rem, 8.9vw, 2.4rem); }
    html[data-flight-state="ready"] [data-scene="services"] .svc__foot { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  }
}
@media (prefers-reduced-motion: no-preference) and (width < 700px) {
  /* The slope label leans back toward the lens: keep its near edge inside the frame. */
  html[data-flight-state="ready"] [data-scene="services"] .svc__site:nth-child(3) .svc__name { width: calc(100vw - 4.5rem); font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
}

/* ---- scenes/studio.css ---- */
/* Studio · golden hour on the ridge (scenes/studio.js).
 * Static / no-JS / reduced motion: the title card in styles.css.
 * Live: the name stands in the valley as a world-anchored card; the quote is
 * a subtitle revealed word by word; prose and principles close the scene. */

/* The world backdrop is dimmed between scenes for reading. Scenes that are
   themselves the image lift it (0 by default: identical to styles.css). */
html[data-flight-state="ready"] .flight-backdrop {
  opacity: min(1, calc(var(--flight-intensity, .42) + var(--lift-studio, 0) + var(--lift-gear, 0) + var(--lift-faq, 0) + var(--lift-contact, 0)));
}

.studio__w { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="studio"] {
    --track: 360;
    --p: var(--scene-progress, 0);
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__card { position: static; height: 100%; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__text::before { display: none; }

  /* The name card (anchored; explicit width, text centred on its world point). */
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] {
    width: min(92vw, 84rem); padding: 0; display: grid; justify-items: center; gap: 1.1rem; text-align: center;
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] .studio__name {
    font-size: clamp(3rem, min(8.4vw, 15svh), 9.5rem); line-height: .98; letter-spacing: -.05em; max-width: none;
    color: var(--proyector);
    /* Luminous card: a warm rim on the sun side (above), light wrap, dark lift below. */
    text-shadow: 0 -1px 0 rgb(255 220 170 / .55), 0 -.08em .35em rgb(236 160 80 / .35), 0 0 1.2em rgb(244 242 237 / .12), 0 .12em .6em rgb(10 10 11 / .75);
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] .studio__role {
    margin: 0; display: inline-flex; align-items: center; gap: .9rem;
    font-size: clamp(.9375rem, 1.15vw, 1.125rem); color: var(--proyector); letter-spacing: .01em;
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] .studio__role::before,
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] .studio__role::after {
    content: ''; width: clamp(1.5rem, 4vw, 3.5rem); height: 1px; background: var(--ambar);
  }

  /* Screen-space layer above the anchors. */
  html[data-flight-state="ready"] [data-scene="studio"] .studio__text {
    position: absolute; inset: 0; z-index: 400; display: block; margin: 0; pointer-events: none;
    opacity: var(--scene-hold, 1);
  }

  /* The quote: a subtitle in the lower third, word by word. */
  html[data-flight-state="ready"] [data-scene="studio"] .studio__body { display: contents; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__quote {
    --q: clamp(0, calc((var(--p) - .45) / .15), 1);
    --out: clamp(0, calc((var(--p) - .63) / .07), 1);
    position: absolute; left: 50%; bottom: clamp(4.5rem, 14svh, 9rem); width: min(88vw, 60rem); margin: 0;
    /* It leaves by passing the lens: it grows, softens and is gone. */
    transform: translate3d(-50%, calc(var(--out) * 3rem), 0) scale(calc(1 + var(--out) * .35));
    opacity: calc(1 - var(--out)); filter: blur(calc(var(--out) * 10px));
    font-size: clamp(1.5rem, min(2.65vw, 5svh), 2.9rem); line-height: 1.22; text-align: center;
    text-shadow: 0 2px 22px rgb(10 10 11 / .9), 0 0 2px rgb(10 10 11 / .6);
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__quote p::before,
  html[data-flight-state="ready"] [data-scene="studio"] .studio__quote p::after { color: var(--ambar); opacity: clamp(0, calc(var(--q) * 3), 1); }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__quote p::after { opacity: clamp(0, calc((var(--q) - .9) * 10), 1); }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__w {
    --a: clamp(0, calc((var(--q) * (var(--n) + 4) - var(--i)) / 4), 1);
    display: inline-block; opacity: var(--a);
    filter: blur(calc((1 - var(--a)) * 7px));
    transform: translate3d(0, calc((1 - var(--a)) * .35em), 0);
  }

  /* Prose and principles: the closing card, as the light turns to dusk. */
  html[data-flight-state="ready"] [data-scene="studio"] .studio__prose,
  html[data-flight-state="ready"] [data-scene="studio"] .studio__principles {
    --c: clamp(0, calc((var(--p) - .68) / .1), 1);
    --x: clamp(0, calc((var(--p) - .95) / .05), 1);
    position: absolute; bottom: clamp(3rem, 9svh, 6rem); margin: 0; pointer-events: auto;
    /* Enter out of the haze; leave receding into it as the camera drops off the ridge. */
    opacity: calc(var(--c) - var(--x)); filter: blur(calc((1 - var(--c) + var(--x)) * 7px));
    transform: scale(calc(1.05 - var(--c) * .05 - var(--x) * .1)); transform-origin: 50% 100%;
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__prose {
    left: var(--gutter); width: min(40%, 46ch); color: var(--proyector);
    font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.65;
    padding-left: 1.4rem; border-left: 1px solid var(--ambar);
    text-shadow: 0 1px 16px rgb(10 10 11 / .95);
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__principles {
    --c: clamp(0, calc((var(--p) - .72) / .1), 1);
    right: var(--gutter); width: min(48%, 44rem); padding: 1.5rem 1.75rem 1rem;
    background: linear-gradient(180deg, rgb(10 10 11 / .62), rgb(10 10 11 / .82));
    border-top: 1px solid rgb(244 242 237 / .18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  html[data-flight-state="ready"] [data-scene="studio"] .principles li { padding-block: 1rem; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__prose { --veil: 1; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__stage::after {
    content: ''; position: absolute; inset: auto 0 0; height: 55%; z-index: 350; pointer-events: none;
    background: linear-gradient(180deg, rgb(10 10 11 / 0), rgb(10 10 11 / .72));
    opacity: calc(clamp(0, calc((var(--p) - .3) * 3), 1) - clamp(0, calc((var(--p) - .95) / .05), 1));
  }
  /* Keyboard: anything focused in the card is shown in full. */
  html[data-flight-state="ready"] [data-scene="studio"] .studio__text:focus-within * { opacity: 1 !important; }
}

@media (width < 700px) and (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] [data-scene="studio"] { --track: 500; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] { width: 90vw; gap: .8rem; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__head[data-world-anchor] .studio__name { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__quote { width: calc(100vw - 2 * var(--gutter)); bottom: 12svh; font-size: clamp(1.35rem, 6.2vw, 1.75rem); }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__prose,
  html[data-flight-state="ready"] [data-scene="studio"] .studio__principles { left: var(--gutter); right: var(--gutter); width: auto; bottom: 2.5rem; }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__prose {
    /* Phone: one block at a time, no gap and no overlap: quote (→ .68),
       prose (.69 → .835), principles (.825 → .95). */
    --c: clamp(0, calc((var(--p) - .69) / .04), 1);
    --x: clamp(0, calc((var(--p) - .81) / .025), 1);
    font-size: 1rem; width: auto;
  }
  html[data-flight-state="ready"] [data-scene="studio"] .studio__principles { --c: clamp(0, calc((var(--p) - .825) / .03), 1); padding: 1.1rem 1.1rem .5rem; }
  html[data-flight-state="ready"] [data-scene="studio"] .principles li { padding-block: .75rem; font-size: .9375rem; }
}

/* ---- scenes/work.css ---- */
/* Scene "work" (home: Trabajo). Two states:
 *   always   a readable editorial section: title, full 16:9 showreel, the
 *            three most recent projects as numbered stops, the portfolio link.
 *   live     the showreel becomes a monumental screen standing in the valley
 *            and each project a stop on the route (scenes/work.js anchors them).
 * The whole section is styled here (styles.css keeps only .vf--reel and the
 * shared .tile component). */

/* ------------------------------------------------------------ document */
.work[data-scene="work"] { padding-top: 3rem; }
.work[data-scene="work"] .work__stage {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.work[data-scene="work"] .work__head { display: grid; gap: var(--space-5); margin-block-end: var(--head-gap); }
.work[data-scene="work"] .work__title {
  max-width: 16ch;
  font-size: var(--fs-h2-lg);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.work[data-scene="work"] .work__lede { max-width: 44ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--niebla); }

.work[data-scene="work"] .reel { position: relative; height: auto; margin: 0 0 clamp(4.5rem, 9vw, 8rem); }
.work[data-scene="work"] .reel__screen {
  position: relative;
  display: block;
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--proyector);
  clip-path: none;
  --reel-pad: clamp(10px, 1.6vw, 20px);
}
.work[data-scene="work"] .reel__img { width: 100%; height: 100%; object-fit: cover; transform: none; filter: none; }
.work[data-scene="work"] .reel__cue {
  position: absolute;
  left: calc(var(--reel-pad) * 2); bottom: calc(var(--reel-pad) * 2);
  display: flex; align-items: center; gap: .9rem;
  padding: 0 1.1rem 0 0;
  color: var(--proyector);
}
.work[data-scene="work"] .reel__play {
  position: relative; inset: auto; translate: none;
  display: grid; place-items: center;
  flex: none;
  width: clamp(52px, 4.6vw, 68px);
  aspect-ratio: 1;
  border: 1px solid var(--proyector-85);
  border-radius: 50%;
  background: rgb(10 10 11 / .55);
  color: var(--proyector);
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.work[data-scene="work"] .reel__play .icon { width: 34%; height: 34%; translate: 7% 0; }
.work[data-scene="work"] .reel__play-ring {
  position: absolute; inset: -7px;
  border: 1px solid var(--proyector-40);
  border-radius: 50%;
  pointer-events: none;
}
.work[data-scene="work"] .reel__cue-text {
  display: grid; gap: .15rem;
  font-weight: 500; font-size: var(--fs-ui); line-height: 1.3;
  text-shadow: 0 1px 12px rgb(10 10 11 / .9), 0 0 2px rgb(10 10 11 / .8);
}
.work[data-scene="work"] .reel__cue-time { color: var(--proyector); font-size: var(--fs-data-sm); }
.work[data-scene="work"] .reel__screen::before {
  content: ""; position: absolute; inset: 55% 0 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 10 11 / 0), rgb(10 10 11 / .6));
}
.work[data-scene="work"] .reel__screen > * { z-index: 1; }
.work[data-scene="work"] .reel__screen > .reel__img { position: relative; z-index: 0; }
.work[data-scene="work"] .reel__screen:active .reel__play { transform: scale(.97); }
.work[data-scene="work"] .reel__screen:focus-visible .reel__play,
.work[data-scene="work"] .reel__screen:focus-visible .reel__play-ring { border-color: var(--ambar); }
@media (hover: hover) and (pointer: fine) {
  .work[data-scene="work"] .reel__screen:hover .reel__play { background: var(--ambar); border-color: var(--ambar); color: var(--proyeccion); }
}
.work[data-scene="work"] .reel__caption {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--grid-gap);
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
  padding: 0;
  background: none;
}
.work[data-scene="work"] .reel__heading { grid-column: 1 / span 6; display: grid; align-content: start; gap: var(--space-3); }
.work[data-scene="work"] .reel__title { font-size: var(--fs-h3-lg); font-weight: 300; line-height: 1.12; letter-spacing: -0.022em; }
.work[data-scene="work"] .reel__data { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--fs-data); }
.work[data-scene="work"] .reel__data span:first-child { color: var(--proyector); }
.work[data-scene="work"] .reel__lede { grid-column: 8 / -1; max-width: 50ch; font-size: var(--fs-body); line-height: 1.6; color: var(--niebla); }
.work[data-scene="work"] .reel__lede em { font-style: normal; font-weight: 500; color: var(--proyector); }
@media (width < 800px) {
  .work[data-scene="work"] .reel__heading, .work[data-scene="work"] .reel__lede { grid-column: 1 / -1; }
}

/* The three stops as a numbered row (a route read left to right). */
.work[data-scene="work"] .work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) var(--grid-gap);
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.work[data-scene="work"] .work-stop { position: relative; display: block; width: auto; height: auto; margin: 0; }
.work[data-scene="work"] .stop-card { position: relative; display: grid; gap: var(--space-3); }
.work[data-scene="work"] .stop-card__index {
  display: flex; align-items: center; gap: .75rem;
  color: var(--proyector);
  font-size: var(--fs-data-sm);
  letter-spacing: .06em;
}
.work[data-scene="work"] .stop-card__index::after { content: ""; flex: 1; height: 1px; background: var(--niebla-dim); }
.work[data-scene="work"] .stop-card__of { color: var(--niebla); }
.work[data-scene="work"] .stop-card__af { display: none; }
.work[data-scene="work"] .work-grid .tile { display: grid; gap: .875rem; }
.work[data-scene="work"] .work-grid .tile__frame { aspect-ratio: 16 / 9; max-height: none; overflow: visible; clip-path: none; }
.work[data-scene="work"] .work-grid .tile__img { transform: none; filter: none; }
.work[data-scene="work"] .work-grid .tile__meta { display: grid; gap: .375rem; padding: 0; background: none; }
.work[data-scene="work"] .work-grid .tile__title { max-width: none; font-size: var(--fs-h4); font-weight: 400; line-height: 1.3; }

.work[data-scene="work"] .work__more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin: clamp(3.5rem, 6vw, 5.5rem) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--niebla-dim);
}
.work[data-scene="work"] .work__more .link-arrow { font-size: clamp(1.05rem, 1.6vw, 1.4rem); }

/* ------------------------------------------------------------ the world */
@media (prefers-reduced-motion: no-preference) {
  html[data-flight-state="ready"] .work[data-scene="work"] { --track: 840; --f: 1; }
  html[data-flight-state="ready"] .work[data-scene="work"] .work__stage { max-width: none; padding: 0; }

  /* Title card: lower third over the opening shot, a scrim for contrast. */
  html[data-flight-state="ready"] .work[data-scene="work"] .work__head {
    position: absolute; z-index: 3;
    left: var(--gutter); right: var(--gutter); bottom: clamp(2.5rem, 9svh, 6rem);
    margin: 0; gap: var(--space-4);
    opacity: calc(var(--head, 1) * var(--scene-hold, 1));
    transform: translate3d(0, calc((1 - var(--head, 1)) * -3svh), 0);
    pointer-events: none;
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .work__head::before {
    content: ""; position: absolute; z-index: -1; inset: -40svh calc(var(--gutter) * -1) calc(clamp(2.5rem, 9svh, 6rem) * -1);
    background: linear-gradient(180deg, var(--proyeccion-0), var(--proyeccion-74) 62%, var(--proyeccion-85));
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .work__title { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5.6rem); max-width: 14ch; }

  /* The screen: sized to its on-screen width at the hold (crisp at scale 1). */
  html[data-flight-state="ready"] .work[data-scene="work"] .reel { height: 0; margin: 0; }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__screen,
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__caption {
    width: min(60vw, 131svh, 1180px);
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__screen {
    box-shadow: 0 0 0 1px rgb(244 242 237 / .16), 0 0 0 7px rgb(10 10 11 / .55);
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__screen::after { display: none; }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__img { filter: brightness(calc(.72 + var(--hold, 0) * .28)); transition: none; }
  html[data-flight-state="ready"] .work[data-scene="work"] .vf--reel { --vf-len: clamp(18px, 2vw, 30px); inset: var(--reel-pad); opacity: calc(.35 + var(--hold, 0) * .65); }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__cue { opacity: calc(.35 + var(--hold, 0) * .65); }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__play-ring { animation: work-ring 2.6s var(--ease-out) infinite; }
  @keyframes work-ring {
    0% { transform: scale(1); opacity: .9; }
    70%, 100% { transform: scale(1.45); opacity: 0; }
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__caption {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: .6rem 2rem;
    margin: 0;
    padding: 1.1rem 1.35rem 1.2rem;
    background: rgb(10 10 11 / .9);
    border-top: 1px solid var(--ambar);
    opacity: 1;
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__heading { grid-column: 1; gap: .5rem; }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__lede { grid-column: 2; font-size: .9375rem; line-height: 1.55; }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__title { font-size: clamp(1.15rem, .8rem + .9vw, 1.7rem); }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__data { font-size: .75rem; }

  /* Lens focus reveal (--f 0 → 1): the frame racks from soft to sharp and
     the AF brackets close in; [data-sharp] drops the filter for crisp text. */
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__caption > *,
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card > *:not(.stop-card__af),
  html[data-flight-state="ready"] .work[data-scene="work"] .work__more > * {
    filter: blur(calc((1 - var(--f)) * 9px));
  }
  html[data-flight-state="ready"] .work[data-scene="work"] [data-sharp] > * { filter: none; }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__heading { transform: translate3d(calc((1 - var(--f)) * -14px), 0, 0); }
  html[data-flight-state="ready"] .work[data-scene="work"] .reel__lede { transform: translate3d(calc((1 - var(--f)) * 14px), 0, 0); }

  /* Stop cards: a framed plate beside the light pillar. */
  html[data-flight-state="ready"] .work[data-scene="work"] .work-grid { display: block; height: 0; }
  html[data-flight-state="ready"] .work[data-scene="work"] .work-stop { height: 0; }
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card {
    width: min(560px, 38vw);
    gap: .7rem;
    padding: .95rem .95rem 1.05rem;
    background: rgb(10 10 11 / .88);
    border: 1px solid rgb(244 242 237 / .12);
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card__index { font-size: .6875rem; clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card__index::after { background: linear-gradient(90deg, var(--ambar), var(--niebla-dim) 40%); }
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card__af {
    display: block;
    --vf-len: 22px; --vf-color: var(--proyector-85);
    inset: calc(-9px - (1 - var(--f)) * 34px);
    opacity: calc(var(--f) * 1.4 - .2);
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .stop-card[data-locked] .stop-card__af .vf__c { animation: work-lock 900ms var(--ease-out) both; }
  @keyframes work-lock {
    0% { border-color: var(--ambar); }
    35% { border-color: var(--ambar); }
    100% { border-color: var(--proyector-85); }
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .work-grid .tile__meta { gap: .3rem; transform: translate3d(0, calc((1 - var(--f)) * 8px), 0); }
  html[data-flight-state="ready"] .work[data-scene="work"] .work-grid .tile__title { font-family: var(--display); font-weight: 300; font-size: clamp(1.1rem, .75rem + .85vw, 1.55rem); line-height: 1.2; letter-spacing: -0.018em; }

  /* The signpost at the end of the leg. */
  html[data-flight-state="ready"] .work[data-scene="work"] .work__more {
    /* A real moment, not a label: authored at its on-screen size at the hold. */
    width: min(760px, 58vw);
    display: grid; justify-items: start; gap: .6rem;
    margin: 0; padding: 1.5rem 1.8rem 1.6rem;
    background: rgb(10 10 11 / .88);
    border: 1px solid rgb(244 242 237 / .12);
    border-left: 2px solid var(--ambar);
  }
  html[data-flight-state="ready"] .work[data-scene="work"] .work__more .link-arrow { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, .9rem + 2.2vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.12; }
  html[data-flight-state="ready"] .work[data-scene="work"] .work__more .data { order: -1; color: var(--ambar); font-size: .875rem; letter-spacing: .04em; }
  html[data-flight-state="ready"] .work[data-scene="work"] [data-world-anchor] a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

  /* Portrait phones: re-composed, not shrunk. */
  @media (max-aspect-ratio: 9/10) {
    html[data-flight-state="ready"] .work[data-scene="work"] { --track: 860; }
    html[data-flight-state="ready"] .work[data-scene="work"] .work__head { bottom: clamp(2rem, 7svh, 4rem); }
    html[data-flight-state="ready"] .work[data-scene="work"] .work__title { font-size: clamp(2.1rem, 10vw, 3rem); }
    html[data-flight-state="ready"] .work[data-scene="work"] .work__lede { font-size: 1rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__screen,
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__caption { width: min(calc(100vw - 28px), 520px); }
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__caption { grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: .95rem 1rem 1.05rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__lede { grid-column: 1; font-size: .8125rem; line-height: 1.5; }
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__title { font-size: 1.1rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .reel__data { font-size: .6875rem; gap: .15rem 1rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .stop-card { width: min(calc(100vw - 44px), 360px); padding: .8rem .8rem .9rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .work-grid .tile__title { font-size: 1.15rem; }
    html[data-flight-state="ready"] .work[data-scene="work"] .work__more { width: calc(100vw - 2 * var(--gutter)); padding: 1.2rem 1.3rem 1.3rem; }
  }
}