/* =====================================================================
   DVB web · design tokens (base layer, owned by the skeleton).
   Adapted from 01-research/refero-apple/tokens.css ([R] Refero, [A] apple.com
   measured 29-oct-2026, [P] proposal). Changes for DVB:
   - ONE accent: Apple blue. --color-link (#0066cc) for inline links and
     --color-action (#0071e3) for filled pills + focus ring are the same blue
     family, as on apple.com. No other hue anywhere (launch orange removed).
   - Fonts: self-hosted Inter / Inter Display 4.1 (SIL OFL), declared in base.css.
   - Added: --ease-house (motion catalogue §1) and --nav-h.
   Sections must use these variables; never hard-code a colour or size.
   ===================================================================== */


:root {
  /* ---------- Color: brand & accent ---------- */
  --color-link: #0066cc;            /* [R][A] Apple Blue — inline links, text CTAs (--sk-body-link-color) */
  --color-action: #0071e3;          /* [R][A] Pricing Blue — filled pill buttons, focus ring */
  --color-action-hover: #0076df;    /* [A] .button hover */
  --color-action-active: #006edb;   /* [A] .button active */
  --color-link-on-dark: #2997ff;    /* [A] rgb(41,151,255) — secondary button text on dark tiles */

  /* ---------- Color: neutrals ---------- */
  --color-ink: #1d1d1f;             /* [R][A] headlines + body */
  --color-black: #000000;           /* [A] --sk-glyph */
  --color-ink-alpha: rgba(0, 0, 0, 0.88);        /* [A] --sk-glyph-gray-alpha */
  --color-text-secondary: #6e6e73;  /* [A] rgb(110,110,115) — intro copy, subheads, footer headers */
  --color-text-secondary-alpha: rgba(0, 0, 0, 0.56); /* [A] footer text */
  --color-text-secondary-alt: #424245; /* [A] --sk-glyph-gray-secondary-alt */
  --color-slate: #707070;           /* [R] secondary/legal copy (Refero) */
  --color-steel: #86868b;           /* [R][A] tertiary glyph, outlines */
  --color-hairline: #d6d6d6;        /* [R] 1px dividers */
  --color-control-gray: #e6e6e8;    /* [R] disabled fills, nav edge */
  --color-button-neutral-active: #ededf2; /* [A] */
  --color-ink-hover: #272729;       /* [A] neutral button hover */
  --color-ink-active: #18181a;      /* [A] neutral button active */
  --color-on-dark: #f5f5f7;         /* [A] text on black tiles */

  /* ---------- Surfaces ---------- */
  --surface-0: #ffffff;             /* [R][A] canvas, hero, cards (--sk-fill) */
  --surface-1: #f5f5f7;             /* [R][A] alternate band, footer (--sk-fill-tertiary) */
  --surface-2: #fafafc;             /* [R][A] opened nav, index section (--sk-fill-secondary) */
  --surface-3: #e6e6e8;             /* [R] subdued control fill */
  --surface-dark: #000000;          /* [A] dark home tiles */
  --surface-dark-alt: #1d1d1f;      /* [A] --global-section-background-color-alt-dark */
  --surface-nav-translucent: rgba(255, 255, 255, 0.8);   /* [A] floating local nav */
  --surface-globalnav-light: rgba(250, 250, 252, 0.8);   /* [A] product page global nav */
  --surface-globalnav-dark: rgba(29, 29, 31, 0.8);       /* [A] home global nav over dark hero */
  --surface-control-translucent: rgba(210, 210, 215, 0.64); /* [R] carousel playback track */
  --backdrop-nav: saturate(1.8) blur(20px); /* [A] global nav; local nav uses blur(20px) */

  /* ---------- Typography: families ---------- */
  /* SF Pro is not licensed for general web use [P]: Inter is the proposed substitute
     (SIL OFL; Refero lists it as first fallback). Use Inter Display / opsz for ≥ 21px. */
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; /* [P] replaces SF Pro Display [R][A] */
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;                      /* [P] replaces SF Pro Text [R][A] */
  --font-weight-regular: 400;       /* [R][A] */
  --font-weight-medium: 500;        /* [R][A] */
  --font-weight-semibold: 600;      /* [R][A] — Apple never uses 700 on headlines [R] */

  /* ---------- Typography: scale (large ≥1069px) [A] class rules on /iphone-duo/ ---------- */
  --type-hero-size: 80px;   --type-hero-lh: 1.05;    --type-hero-ls: -0.015em;  /* ric-type-lockup-xxl-headline; = -1.2px [R] */
  --type-display-size: 64px; --type-display-lh: 1.0625; --type-display-ls: -0.009em; /* media-hero-headline-base */
  --type-headline-xl-size: 56px; --type-headline-xl-lh: 1.07143; --type-headline-xl-ls: -0.005em;
  --type-section-size: 48px; --type-section-lh: 1.08349; --type-section-ls: -0.003em; /* section-header-headline */
  --type-headline-size: 40px; --type-headline-lh: 1.1;  --type-headline-ls: 0em;
  --type-headline-sm-size: 32px; --type-headline-sm-lh: 1.125; --type-headline-sm-ls: 0.004em;
  --type-card-title-size: 28px; --type-card-title-lh: 1.14286; --type-card-title-ls: 0.007em; /* feature-card / tile headline */
  --type-title-size: 24px; --type-title-lh: 1.16667; --type-title-ls: 0.009em;
  --type-eyebrow-size: 21px; --type-eyebrow-lh: 1.19048; --type-eyebrow-ls: 0.011em; /* product kicker / section eyebrow (lh 1 in lockups) */
  --type-intro-size: 21px; --type-intro-lh: 1.381; --type-intro-ls: 0.011em;        /* lockup copy, regular 400 */
  --type-callout-size: 19px; --type-callout-lh: 1.21053; --type-callout-ls: 0.012em;
  --type-body-lg-size: 19px; --type-body-lg-lh: 1.4211; --type-body-lg-ls: 0.012em;
  --type-body-size: 17px;  --type-body-lh: 1.47059; --type-body-ls: -0.022em;       /* = 17/25, -0.374px */
  --type-body-tight-lh: 1.23536;                                                     /* = 17/21 */
  --type-small-size: 14px; --type-small-lh: 1.42859; --type-small-ls: -0.016em;     /* body-reduced */
  --type-small-tight-lh: 1.28577;
  --type-caption-size: 12px; --type-caption-lh: 1.33337; --type-caption-ls: -0.01em; /* captions, nav pills, footer */
  --type-micro-size: 10px; --type-micro-lh: 1.24; --type-micro-ls: -0.037em;         /* [R] */

  /* ---------- Spacing [R] base 4px ---------- */
  --space-unit: 4px;
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-52: 52px; --space-64: 64px;
  --space-76: 76px; --space-80: 80px; --space-96: 96px; /* 96 [A] */
  --space-128: 128px; --space-144: 144px; --space-224: 224px; /* 224 [A] */
  --element-gap: 20px;      /* [R] */
  --card-padding: 28px;     /* [R] */
  --section-gap-refero: 90px; /* [R] summary value; apple.com CSS uses the paddings below */

  /* ---------- Section rhythm [A] (large; see media queries below) ---------- */
  --section-padding: 144px;          /* --global-section-padding */
  --section-padding-story: 128px;    /* .section-product-stories */
  --section-padding-reduced: 120px;  /* --global-section-padding-top-reduced */
  --section-padding-end-long: 224px; /* --global-section-aap-padding */
  --section-header-gap: 48px;        /* .section-header margin-block-end */

  /* ---------- Layout / grid [A] ---------- */
  --content-max: 1260px;      /* --global-content-max-width */
  --content-max-hero: 1680px; /* --global-content-max-width-hero */
  --content-width: 87.5%;     /* .viewport-content width */
  --nav-content-max: 1024px;  /* globalnav-content (980px + 22px side padding) */
  --footer-content-max: 980px;
  --globalnav-height: 44px;   /* measured [A][R] (CSS var says 48px on small) */
  --nav-h: 44px;

  /* ---------- Radii ---------- */
  --radius-card: 28px;     /* [R][A] feature cards, media, immersive display */
  --radius-nav-float: 18px;/* [A] floating local nav wrap (Refero says 20px) */
  --radius-nav: 20px;      /* [R] */
  --radius-link: 10px;     /* [R] */
  --radius-pill-track: 36px; /* [R] playback control */
  --radius-button-block: 8px; /* [A] .button-block */
  --radius-button-block-lg: 12px; /* [A] .button-super.button-block */
  --radius-pill: 980px;    /* [A][R] every inline button & search input */
  --radius-round: 50%;     /* [A] 36px tile buttons */

  /* ---------- Elevation [R] (rings, not shadows) ---------- */
  --shadow-ring-subtle: 0 0 0 1px #e6e6e8;
  --shadow-ring-strong: 0 0 0 1px #86868b;
  --shadow-none: none;

  /* ---------- Focus [A] ---------- */
  --focus-ring: 2px solid #0071e3;
  --focus-offset: 3px;

  /* ---------- Buttons [A] (.button family, apple.com) ---------- */
  --btn-pad-y: 9px;  --btn-pad-x: 16px;  --btn-font: 14px;   /* .button default (cta in tiles ≤734 uses 8px 15px) */
  --btn-elevated-pad-y: 12px; --btn-elevated-pad-x: 22px; --btn-elevated-font: 17px; /* home hero "Learn more" 11/21 + 1px border */
  --btn-super-pad-y: 18px; --btn-super-pad-x: 31px; --btn-super-font: 17px;
  --btn-reduced-pad-y: 4px; --btn-reduced-pad-x: 11px; --btn-reduced-font: 12px; /* nav "Buy" pill */
  --btn-border: 1px;
  --btn-disabled-opacity: 0.42;

  /* ---------- Motion [A] + house curve (CATALOGO §1) ---------- */
  --ease-house: cubic-bezier(0.16, 1, 0.3, 1); /* default for anything not tied to scroll */
  --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);   /* most frequent on apple.com */
  --ease-out-soft: cubic-bezier(0.25, 0.1, 0.3, 1);/* transform 0.3s */
  --ease-decel: cubic-bezier(0, 0, 0.5, 1);         /* card hover scale, tile image */
  --ease-decel-material: cubic-bezier(0, 0, 0.2, 1);
  --ease-scrim: cubic-bezier(0.4, 0.1, 0.4, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-nav: cubic-bezier(0.28, 0.11, 0.32, 1);
  --dur-instant: 100ms;  /* button bg color */
  --dur-fast: 240ms;     /* nav (--r-globalnav-duration-medium) */
  --dur-base: 320ms;     /* link color */
  --dur-card-bg: 344ms;  /* card background */
  --dur-medium: 400ms;   /* opacity ease-in-out */
  --dur-slow: 500ms;     /* scrims, flyout link opacity */
  --dur-gallery: 1s;     /* media card gallery slide */
  /* StaggeredFadeIn reveal (scroll-in) */
  --reveal-translate-y: 30px;
  --reveal-opacity-dur: 0.9s;
  --reveal-translate-dur: 0.7s;
  --reveal-stagger: 0.15s;
}

/* ---------- Medium: 735–1068px [A] ---------- */
@media (max-width: 1068px) {
  :root {
    --type-hero-size: 64px; --type-hero-lh: 1.0625; --type-hero-ls: -0.009em;
    --type-display-size: 56px; --type-display-lh: 1.07143; --type-display-ls: -0.005em;
    --type-headline-xl-size: 48px; --type-headline-xl-lh: 1.08349; --type-headline-xl-ls: -0.003em;
    --type-section-size: 40px; --type-section-lh: 1.1; --type-section-ls: 0em;
    --type-card-title-size: 24px; --type-card-title-lh: 1.16667; --type-card-title-ls: 0.009em;
    --type-eyebrow-size: 19px; --type-eyebrow-lh: 1.21053; --type-eyebrow-ls: 0.012em;
    --section-padding: 120px;
    --section-padding-story: 96px;
    --section-padding-reduced: 80px;
    --section-padding-end-long: 176px;
    --section-header-gap: 40px;
  }
}

/* ---------- Small: ≤734px [A] ---------- */
@media (max-width: 734px) {
  :root {
    --type-hero-size: 48px; --type-hero-lh: 1.08349; --type-hero-ls: -0.003em; /* measured on hero; xxl lockup class says 40px */
    --type-display-size: 32px; --type-display-lh: 1.125; --type-display-ls: 0.004em;
    --type-headline-xl-size: 28px; --type-headline-xl-lh: 1.14286; --type-headline-xl-ls: 0.007em;
    --type-section-size: 32px; --type-section-lh: 1.125; --type-section-ls: 0.004em;
    --type-headline-size: 32px; --type-headline-lh: 1.125; --type-headline-ls: 0.004em;
    --type-card-title-size: 21px; --type-card-title-lh: 1.19048; --type-card-title-ls: 0.011em;
    --type-title-size: 21px; --type-title-lh: 1.19048; --type-title-ls: 0.011em;
    --type-eyebrow-size: 17px; --type-eyebrow-lh: 1.23536; --type-eyebrow-ls: -0.022em;
    --type-intro-size: 19px; --type-intro-lh: 1.4211; --type-intro-ls: 0.012em;
    --type-body-lg-size: 17px; --type-body-lg-lh: 1.47059; --type-body-lg-ls: -0.022em;
    --btn-font: 14px;
    --btn-elevated-font: 14px; --btn-elevated-pad-y: 8px; --btn-elevated-pad-x: 15px;
    --content-max: 420px;
    --section-padding: 112px;
    --section-padding-story: 80px;
    --section-padding-reduced: 56px;
    --section-padding-end-long: 144px;
    --section-header-gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-translate-y: 0px;
    --reveal-opacity-dur: 0s;
    --reveal-translate-dur: 0s;
    --reveal-stagger: 0s;
  }
}

/* =====================================================================
   DVB web · base layer (owned by the skeleton; sections never edit it).
   Reset, fonts, Apple .typography-* scale, layout container, section
   rhythm, buttons, links, nav, footer, media, cards, focus, print.
   Every value comes from tokens.css. Spec: 01-research/refero-apple/SISTEMA-VISUAL.md
   ===================================================================== */

/* ---------- Fonts: Inter 4.1 self-hosted (SIL OFL, see fonts/LICENSE-Inter-OFL.txt) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--surface-0); color: var(--color-ink); font-family: var(--font-text);
  font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls);
  font-weight: var(--font-weight-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video, svg, canvas { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--color-link); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
strong, b { font-weight: var(--font-weight-semibold); }
[hidden] { display: none !important; }

/* ---------- Focus [A] ---------- */
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-link); }

/* ---------- Utilities ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-ink); color: #fff; font-size: var(--type-small-size); transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }
.text-secondary { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap !important; text-wrap: nowrap !important; } /* utility beats .typography-* text-wrap */

/* =====================================================================
   Typography — mirrors apple.com .typography-* (sizes switch per breakpoint
   through tokens.css: large ≥1069 · medium 735–1068 · small ≤734).
   Display face from 19px up, Text face below. Never 700 on headlines.
   ===================================================================== */
.typography-hero, .typography-display, .typography-headline-xl, .typography-section,
.typography-headline, .typography-headline-sm, .typography-card-title, .typography-title,
.typography-eyebrow, .typography-callout { font-family: var(--font-display); font-weight: var(--font-weight-semibold); text-wrap: balance; }
.typography-hero        { font-size: var(--type-hero-size);        line-height: var(--type-hero-lh);        letter-spacing: var(--type-hero-ls); }
.typography-display     { font-size: var(--type-display-size);     line-height: var(--type-display-lh);     letter-spacing: var(--type-display-ls); }
.typography-headline-xl { font-size: var(--type-headline-xl-size); line-height: var(--type-headline-xl-lh); letter-spacing: var(--type-headline-xl-ls); }
.typography-section     { font-size: var(--type-section-size);     line-height: var(--type-section-lh);     letter-spacing: var(--type-section-ls); }
.typography-headline    { font-size: var(--type-headline-size);    line-height: var(--type-headline-lh);    letter-spacing: var(--type-headline-ls); }
.typography-headline-sm { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); letter-spacing: var(--type-headline-sm-ls); }
.typography-card-title  { font-size: var(--type-card-title-size);  line-height: var(--type-card-title-lh);  letter-spacing: var(--type-card-title-ls); }
.typography-title       { font-size: var(--type-title-size);       line-height: var(--type-title-lh);       letter-spacing: var(--type-title-ls); }
.typography-eyebrow     { font-size: var(--type-eyebrow-size);     line-height: var(--type-eyebrow-lh);     letter-spacing: var(--type-eyebrow-ls); }
.typography-callout     { font-size: var(--type-callout-size);     line-height: var(--type-callout-lh);     letter-spacing: var(--type-callout-ls); }
.typography-intro       { font-family: var(--font-display); font-size: var(--type-intro-size); line-height: var(--type-intro-lh); letter-spacing: var(--type-intro-ls); color: var(--color-text-secondary); text-wrap: pretty; }
.typography-intro strong, .typography-intro em { color: var(--color-ink); font-weight: inherit; font-style: normal; } /* Apple "bold by colour" */
.typography-body-lg     { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); text-wrap: pretty; }
.typography-body        { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); text-wrap: pretty; }
.typography-body-tight  { font-size: var(--type-body-size); line-height: var(--type-body-tight-lh); letter-spacing: var(--type-body-ls); }
.typography-small       { font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: var(--type-small-ls); }
.typography-caption     { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); }
.typography-label       { font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: var(--type-small-ls); font-weight: var(--font-weight-medium); }
.tabular                { font-variant-numeric: tabular-nums; }

/* Vertical text rhythm [A] (--sk-*-margin) */
.stack > * + * { margin-top: 0.8em; }
.stack-tight > * + * { margin-top: 0.4em; }

/* =====================================================================
   Layout
   ===================================================================== */
.container { width: var(--content-width); max-width: var(--content-max); margin-inline: auto; }
.container--hero { width: 100%; max-width: var(--content-max-hero); margin-inline: auto; }
.container--narrow { width: var(--content-width); max-width: 980px; margin-inline: auto; }
.container--text { width: var(--content-width); max-width: 692px; margin-inline: auto; }

/* Section rhythm [A]: white canvas by default, #f5f5f7 bands for contrast. */
.section { position: relative; padding-block: var(--section-padding); background: var(--surface-0); }
.section--story   { padding-block: var(--section-padding-story); }
.section--reduced { padding-block: var(--section-padding-reduced); }
.section--flush   { padding-block: 0; }
.section--band    { background: var(--surface-1); }
.section--band-end { padding-bottom: var(--section-padding-end-long); }
.section--index   { background: var(--surface-2); }
.section--dark    { background: var(--surface-dark); color: var(--color-on-dark); }
.section--dark .typography-intro { color: var(--color-steel); }
.section--dark .typography-intro strong { color: var(--color-on-dark); }
.section--dark a:not(.button) { color: var(--color-link-on-dark); }

.section-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: var(--section-header-gap); }
.section-header--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 120px; }
@media (max-width: 734px) { .section-header--row { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* Centered chapter lockup [A] §6.6: eyebrow → headline → grey intro. */
.lockup { text-align: center; max-width: 980px; margin-inline: auto; }
.lockup > .typography-eyebrow + * { margin-top: 0.4em; }
.lockup > * + .typography-intro, .lockup > * + .lockup-copy { margin-top: 0.8em; }
.lockup .typography-intro, .lockup .lockup-copy { max-width: 692px; margin-inline: auto; }
.lockup-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; margin-top: 32px; align-items: center; }

/* Simple grids (gap = Refero element gap). */
.grid { display: grid; gap: var(--element-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1068px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px)  { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Text + image pair: image enters from the opposite side [R]. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 734px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .split--reverse > :first-child { order: 0; } }

/* =====================================================================
   Surfaces: card + media (28px radius, never a shadow)
   ===================================================================== */
.card { background: var(--surface-0); border-radius: var(--radius-card); padding: var(--card-padding); overflow: hidden; }
.section--band .card { background: var(--surface-0); }
.section:not(.section--band) .card { background: var(--surface-1); }
.card > * + * { margin-top: 12px; }

.media { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-1); }
.media img, .media picture { width: 100%; height: 100%; object-fit: cover; }
.media--bleed { border-radius: 0; }
.ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-3x2 { aspect-ratio: 3 / 2; } .ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1 { aspect-ratio: 1 / 1; } .ratio-21x9 { aspect-ratio: 21 / 9; }
/* Photo slot until Harvey picks the photo: flat grey, centred caption. */
.media-ph { display: grid; place-items: center; background: var(--surface-1); color: var(--color-steel);
  font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); text-align: center; padding: 24px; }
.media > .media-ph { position: absolute; inset: 0; }
.section--band .media-ph { background: var(--surface-3); }
.section--dark .media-ph { background: var(--surface-dark-alt); color: var(--color-steel); }

.hairline { border: 0; border-top: 1px solid var(--color-hairline); margin: 0; }

/* =====================================================================
   Buttons [A] — pill 980px; hover changes colour only.
   ===================================================================== */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; border: var(--btn-border) solid transparent;
  border-radius: var(--radius-pill); padding: calc(var(--btn-pad-y) - 1px) calc(var(--btn-pad-x) - 1px);
  font-family: var(--font-text); font-size: var(--btn-font); line-height: var(--type-small-tight-lh); letter-spacing: var(--type-small-ls);
  font-weight: var(--font-weight-regular); white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--color-action); color: #fff;
  transition: background-color var(--dur-instant) linear, color var(--dur-instant) linear, border-color var(--dur-instant) linear; }
.button:hover { background: var(--color-action-hover); text-decoration: none; }
.button:active { background: var(--color-action-active); }
.button--secondary { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.button--secondary:hover { background: var(--color-action-hover); color: #fff; border-color: var(--color-action-hover); }
.button--neutral { background: var(--color-ink); color: #fff; }
.button--neutral:hover { background: var(--color-ink-hover); } .button--neutral:active { background: var(--color-ink-active); }
.button--secondary-neutral { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.button--secondary-neutral:hover { background: var(--color-ink); color: #fff; }
.button--elevated { padding: calc(var(--btn-elevated-pad-y) - 1px) calc(var(--btn-elevated-pad-x) - 1px); font-size: var(--btn-elevated-font); line-height: 1.17648; letter-spacing: var(--type-body-ls); }
.button--reduced { padding: calc(var(--btn-reduced-pad-y) - 1px) calc(var(--btn-reduced-pad-x) - 1px); font-size: var(--btn-reduced-font); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); }
.button[disabled], .button[aria-disabled="true"] { opacity: var(--btn-disabled-opacity); pointer-events: none; }
.section--dark .button--secondary { color: var(--color-link-on-dark); border-color: var(--color-link-on-dark); }
.section--dark .button--secondary:hover { color: #fff; }

/* Text link with chevron [A] "Learn more ›" */
.link-more { display: inline-flex; align-items: baseline; gap: 0.2em; font-size: inherit; }
.link-more::after { content: "›"; font-family: var(--font-text); }

/* =====================================================================
   Global nav [A] §6.1 — fixed, 44px, translucent + blur.
   ===================================================================== */
.globalnav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  background: var(--surface-globalnav-light); -webkit-backdrop-filter: var(--backdrop-nav); backdrop-filter: var(--backdrop-nav); }
.globalnav::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--color-control-gray); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard); }
.globalnav.is-scrolled::after, .globalnav.is-open::after { opacity: 1; }
.globalnav-inner { max-width: var(--nav-content-max); height: 100%; margin-inline: auto; padding-inline: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.globalnav-brand { font-family: var(--font-display); font-size: 17px; line-height: 1; font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em; color: var(--color-ink); white-space: nowrap; }
.globalnav-brand:hover { text-decoration: none; }
.globalnav-links { display: flex; align-items: center; gap: 28px; }
.globalnav-links a:not(.button) { font-size: var(--type-caption-size); line-height: 1; letter-spacing: -0.01em; color: var(--color-ink-alpha); }
.globalnav-links a:not(.button):hover { color: var(--color-ink); text-decoration: none; }
.globalnav-toggle { display: none; width: 44px; height: 44px; margin-right: -12px; align-items: center; justify-content: center; color: var(--color-ink); }
.globalnav-toggle svg { width: 18px; height: 18px; }
@media (max-width: 734px) {
  .globalnav-inner { padding-inline: 16px; }
  .globalnav-toggle { display: inline-flex; }
  .globalnav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 32px 32px; background: var(--surface-2); border-bottom: 1px solid var(--color-control-gray); display: none; }
  .globalnav.is-open .globalnav-links { display: flex; }
  .globalnav-links a:not(.button) { font-family: var(--font-display); font-size: 28px; line-height: 1.14; font-weight: var(--font-weight-semibold);
    padding-block: 10px; color: var(--color-ink); }
  .globalnav-links .button { align-self: flex-start; margin-top: 16px; }
  html:not(.js) .globalnav-toggle { display: none; }
  html:not(.js) .globalnav-links { position: static; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; background: transparent; border: 0; padding: 0; gap: 16px; }
  html:not(.js) .globalnav-links a:not(.button) { font-family: var(--font-text); font-size: var(--type-caption-size); font-weight: 400; padding: 0; white-space: nowrap; }
}
main { display: block; }
.page-offset { padding-top: var(--nav-h); }

/* =====================================================================
   Footer [A] §6.12 — #f5f5f7, 12/16, rgba(0,0,0,.56)
   ===================================================================== */
.footer { background: var(--surface-1); color: var(--color-text-secondary-alpha); font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); padding-block: 40px 24px; }
.footer-inner { width: var(--content-width); max-width: var(--footer-content-max); margin-inline: auto; }
.footer a { color: var(--color-ink-alpha); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-hairline); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* =====================================================================
   Motion hooks (driven by motion.js). Nothing is hidden without JS; only
   elements below the fold at load get .is-pending (CATALOGO A5, R11).
   ===================================================================== */
.is-pending { opacity: 0; transform: translate3d(0, var(--reveal-translate-y), 0); }
.is-pending[data-reveal="photo"] { transform: translate3d(0, 28px, 0); clip-path: inset(12% 0 0 0 round var(--radius-card)); }
.is-pending[data-reveal="fade"] { transform: none; }
.reveal-line { display: block; }

/* Sticky scene scaffold: a tall track with a pinned stage (CATALOGO §1.3). */
.scene { position: relative; }
.scene-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .is-pending { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Print: everything visible, no chrome ---------- */
@media print {
  .globalnav, .skip-link, .no-print { display: none !important; }
  .page-offset { padding-top: 0; }
  .is-pending { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .section { padding-block: 24px; background: #fff !important; color: #000 !important; }
  .scene-stage { position: static; height: auto; }
  a { color: #000; }
}

/* Footer socials (markup from {{html.socials}}, config.json → socials) */
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }

/* Harvey 30-oct: «hay esquinas duras, no con el formato Apple» → todas las fotos con esquinas redondeadas (salvo los retratos de estudio fundidos con el blanco). */
main dvb-img:not(.s-00-photo), main dvb-img:not(.s-00-photo) img, main dvb-img:not(.s-00-photo) picture { border-radius: 22px; }
main dvb-img:not(.s-00-photo) { overflow: hidden; display: block; }
.s-01-opening-image, .s-01-opening-image img { border-radius: 22px; }
@media (max-width: 734px) { main dvb-img:not(.s-00-photo), main dvb-img:not(.s-00-photo) img { border-radius: 16px; } }

/* ==== Titulares con degradado negro → gris (estilo «Might takes flight» de Apple), 30-oct ==== */
:root { --grad-ink: linear-gradient(100deg, #1d1d1f 0%, #3a3a3e 45%, #7c7c82 100%);
        --grad-on-dark: linear-gradient(100deg, #f5f5f7 0%, #d2d2d7 50%, #8e8e93 100%); }
:is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title) { position: relative; }
:is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title) * { background-repeat: no-repeat; }
/* The gradient goes on the LEAF that holds the text: a parent with background-clip:text paints its
   children's glyphs even when an animation has them at opacity 0 (Chrome desktop, 30-oct bug). */
:is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title):not(:has(*)),
:is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title) :not(:has(*)) {
  background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title):has(*) { background-image: none; }
.s-08-title:not(:has(*)), .s-08-title :not(:has(*)) {
  background-image: var(--grad-on-dark); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (forced-colors: active) { :is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title, .s-00-title *, .s-08-title *) { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } }
@media print { :is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title) * , :is(.s-00-title, .s-01-title, .s-02-title, .s-03-title, .s-04-title, .s-05-title, .s-06-title, .s-07-title, .s-08-title) { -webkit-text-fill-color: #1d1d1f; } }

/* Public page shell: the base owns behaviour; this layer refines its surfaces. */
.globalnav {
  --nav-surface: var(--surface-2);
  --nav-panel: var(--surface-2);
  --nav-ink: var(--color-ink);
  --nav-secondary: var(--color-ink-alpha);
  --nav-hairline: var(--color-control-gray);
  --nav-scrim: rgba(255, 255, 255, .6);
  isolation: isolate;
  background: var(--nav-surface);
  color: var(--nav-ink);
  -webkit-backdrop-filter: var(--backdrop-nav);
  backdrop-filter: var(--backdrop-nav);
}

/* Keep the edge to one hairline, including the scrolled state. */
.globalnav, .globalnav.is-scrolled { box-shadow: none; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .globalnav { --nav-surface: var(--surface-globalnav-light); }
}

/* The closing/footer controller owns is-dark, including reverse scroll. */
.globalnav.is-dark {
  --nav-surface: var(--surface-dark);
  --nav-panel: var(--surface-dark);
  --nav-ink: var(--color-on-dark);
  --nav-secondary: var(--color-on-dark);
  --nav-hairline: var(--color-text-secondary-alt);
  --nav-scrim: rgba(0, 0, 0, .4);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .globalnav.is-dark { --nav-surface: var(--surface-globalnav-dark); }
}

.globalnav::after { z-index: 3; pointer-events: none; background: var(--nav-hairline); }
.globalnav.is-open { background: var(--nav-panel); }
.globalnav-brand, .globalnav-home, .globalnav-toggle { color: var(--nav-ink); }
.globalnav-links > a:not(.button) { color: var(--nav-secondary); }
.globalnav-links > a:not(.button):hover { color: var(--nav-ink); }
.globalnav-links > a:not(.button)[aria-current="true"] { color: var(--nav-ink); font-weight: var(--font-weight-semibold); }

.globalnav-inner {
  width: 100%;
  max-width: none;
  gap: var(--space-20);
  padding-inline: var(--space-24);
}

.globalnav-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-h);
  min-width: 0;
  flex: 0 1 auto;
  gap: 10px;
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  white-space: normal;
}
.globalnav-monogram { width: var(--space-32); height: var(--space-28); flex: none; }
.globalnav-name { min-width: 0; }
.globalnav.is-dark .globalnav-brand { color: var(--surface-0); }

.globalnav-links { flex-shrink: 0; gap: clamp(var(--space-8), 1.5vw, var(--space-28)); }
.globalnav-links > a:not(.button), .globalnav-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-h);
  white-space: nowrap;
}

.globalnav a:focus-visible, .globalnav-toggle:focus-visible {
  outline-offset: calc(-1 * var(--space-4));
}

.globalnav-toggle { flex-shrink: 0; }
.globalnav-toggle path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-nav);
}
.globalnav.is-open .globalnav-icon-top { transform: translateY(3px) rotate(45deg); }
.globalnav.is-open .globalnav-icon-bottom { transform: translateY(-3px) rotate(-45deg); }

.globalnav-home {
  flex-shrink: 0;
  gap: var(--space-4);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
}
.globalnav-home svg { width: var(--space-16); height: var(--space-16); }

@media (max-width: 1068px) and (min-width: 735px) {
  .globalnav-inner { gap: var(--space-16); }
  .globalnav-links { gap: var(--space-8); }
}

@media (max-width: 734px) {
  .globalnav-inner {
    gap: var(--space-12);
    padding-inline: var(--space-16);
  }
  .globalnav-toggle { margin-right: 0; }
  /* The scrim belongs to the existing toggle: tapping its generated box
     reaches the same click handler, without a second focusable control. */
  .js .globalnav-toggle::before {
    content: "";
    position: fixed;
    inset: var(--nav-h) 0 auto;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    z-index: 0;
    background: var(--nav-scrim);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-nav);
  }
  .js .globalnav.is-open .globalnav-toggle::before { opacity: 1; pointer-events: auto; }
  /* An open panel is opaque. Removing the ancestor backdrop also leaves
     the fixed scrim attached to the viewport, with its own page blur. */
  .js .globalnav.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .globalnav-brand, .globalnav-toggle svg { position: relative; z-index: 1; }
  .globalnav-links {
    z-index: 2;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--nav-panel);
    border-color: var(--nav-hairline);
    padding: var(--space-16) max(var(--space-16), env(safe-area-inset-right)) var(--space-32) max(var(--space-16), env(safe-area-inset-left));
  }
  .globalnav-links > a:not(.button) {
    min-height: var(--space-52);
    padding-block: var(--space-8);
    white-space: normal;
  }
  .globalnav-links .button { max-width: 100%; white-space: normal; }

  .js .globalnav.is-open .globalnav-links > a {
    animation: globalnav-link-in var(--dur-fast) var(--ease-nav) both;
  }

  /* Without JS, navigation is ordinary content: every destination stays visible. */
  html:not(.js) .globalnav { position: relative; height: auto; }
  html:not(.js) .globalnav-inner { flex-wrap: wrap; gap: 0; height: auto; }
  html:not(.js) .globalnav-brand { width: 100%; }
  html:not(.js) .globalnav-links {
    display: flex;
    position: static;
    width: 100%;
    max-height: none;
    flex-wrap: wrap;
    overflow: visible;
    gap: 0 var(--space-20);
    padding: 0 0 var(--space-12);
  }
  html:not(.js) .globalnav-links > a:not(.button) {
    display: inline-flex;
    min-height: var(--space-40);
    padding-block: var(--space-8);
    font-size: var(--type-small-size);
    line-height: var(--type-small-lh);
    white-space: normal;
  }
  html:not(.js) .globalnav-links .button { margin-block: var(--space-8); }
  html:not(.js) .globalnav-home { margin-top: calc(-1 * var(--nav-h)); margin-left: auto; }
  html:not(.js) .globalnav--minimal .globalnav-inner { flex-wrap: nowrap; gap: var(--space-12); }
  html:not(.js) .globalnav--minimal .globalnav-brand { width: auto; }
  html:not(.js) .globalnav--minimal .globalnav-home { margin-top: 0; }
  html:not(.js) .page-offset { padding-top: 0; }
}

@keyframes globalnav-link-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .globalnav.is-open .globalnav-links > a { animation: none; }
  .globalnav-toggle path { transition: none; }
  .js .globalnav-toggle::before { transition: none; }
}

/* Shell pages owned by the skeleton (404). */
.s-404 { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; }

/* Marca: sello DV (Harvey 30-oct: el cuadrado negro «cutre» → sello fino). */
.globalnav-badge { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.25px solid currentColor; color: #1d1d1f; background: transparent;
  font-family: "Inter Display", "Inter", -apple-system, sans-serif; font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .06em; padding-left: .06em; transition: color .3s var(--ease-house); }
.globalnav.is-dark .globalnav-badge { color: #f5f5f7; }

/* Logo B (Claude, recomendado a Harvey): solo el nombre; «Blanco» en gris. */
.globalnav-name { font-weight: 600; letter-spacing: -.02em; }
.globalnav-name-last { color: #86868b; font-weight: 500; }
.globalnav.is-dark .globalnav-name-last { color: #a1a1a6; }

/* ==== Cookie notice (bottom card, Apple style) ==== */
.consent { position: fixed; z-index: 60; left: 50%; bottom: max(var(--space-24), env(safe-area-inset-bottom)); width: min(560px, calc(100% - 32px));
  transform: translate(-50%, 24px); opacity: 0; transition: transform 420ms cubic-bezier(.16,1,.3,1), opacity 320ms ease; pointer-events: none; }
.consent.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.consent-card { background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--color-hairline); border-radius: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: 20px 22px; color: var(--color-ink); }
.consent-title { font-weight: 600; font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.consent-text { font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); margin: 0; }
.consent-text a { color: var(--color-link); white-space: nowrap; }
.consent-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.consent-button { min-height: 44px; min-width: 120px; padding: 0 20px; border-radius: 980px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.consent-button--primary { background: var(--color-action); color: #fff; }
.consent-button--primary:hover { background: var(--color-action-hover); }
.consent-button--secondary { background: var(--color-button-neutral-active); color: var(--color-ink); }
.consent-button--secondary:hover { background: var(--color-control-gray); }
.consent-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 734px) { .consent-actions { justify-content: stretch; } .consent-button { flex: 1 1 0; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
@media print { .consent { display: none !important; } }

/* ==== Legal pages ==== */
.legal { padding-block: calc(var(--globalnav-height) + 64px) 96px; }
.legal-inner { max-width: 760px; }
.legal-title { font-size: clamp(36px, 6vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 12px; }
.legal-updated { color: var(--color-text-secondary); font-size: 14px; margin: 0 0 40px; }
.legal h2 { font-size: 21px; line-height: 1.25; font-weight: 600; margin: 40px 0 10px; }
.legal p, .legal-list { font-size: 17px; line-height: 1.55; color: var(--color-text-secondary-alt); }
.legal p + p { margin-top: 12px; }
.legal-list { padding-left: 1.2em; margin: 10px 0 0; }
.legal-list li + li { margin-top: 6px; }
.legal a { color: var(--color-link); }
.legal strong { color: var(--color-ink); font-weight: 600; }
.legal-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--color-hairline); border-radius: 16px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--color-hairline); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font-weight: 600; background: #f5f5f7; }
.legal-table code { font-size: 14px; }
.legal-inline-button { font: inherit; color: var(--color-link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.legal-more { margin-top: 56px !important; padding-top: 20px; border-top: 1px solid var(--color-hairline); font-size: 15px !important; }
@media (max-width: 734px) { .legal { padding-block: calc(var(--globalnav-height) + 40px) 72px; } .legal p, .legal-list { font-size: 16px; } .legal-table { min-width: 560px; } }
@media (max-width: 734px) {
  .legal-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .legal-table { min-width: 0; }
  .legal-table thead { display: none; }
  .legal-table tr { display: block; border: 1px solid var(--color-hairline); border-radius: 16px; padding: 6px 0; }
  .legal-table tr + tr { margin-top: 12px; }
  .legal-table td { display: grid; grid-template-columns: 96px 1fr; gap: 12px; border: 0; padding: 8px 14px; }
  .legal-table td::before { content: attr(data-label); font-weight: 600; color: var(--color-ink); }
}

/* 9 links (con «Por los jóvenes»): en tabletas estrechas el menú se aprieta en vez de desbordar */
@media (max-width: 920px) and (min-width: 735px) {
  .globalnav-inner { gap: var(--space-12); }
  .globalnav-links { gap: 6px; }
  .globalnav-links > a:not(.button) { font-size: 11px; letter-spacing: 0; }
  .globalnav-name-last { display: none; }
}

/* Owner 30-oct: menu links glide instead of jumping; native scroll, so the pinned
   scenes keep tracking it. Reduced motion keeps the instant jump (base.css). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Logo: one ink → grey gradient across the whole name, «Blanco» at the grey end. */
.globalnav-name {
  background-image: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.globalnav-name-last { color: inherit; -webkit-text-fill-color: transparent; }
.globalnav.is-dark .globalnav-name { background-image: var(--grad-on-dark); }
.globalnav.is-dark .globalnav-name-last { color: inherit; }
@media (forced-colors: active) {
  .globalnav-name, .globalnav-name-last { -webkit-text-fill-color: currentColor; background: none; }
}

/* ==== sections/00-hero ==== */
/* Real photograph, with a complete reading order before the pinned handoff. */
.s-00-hero { position: relative; z-index: 2; padding: 0; overflow: clip; background: var(--surface-0); --s-00-name-size: clamp(32px, 8vw, 144px); }
.s-00-stage { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-64) calc(var(--space-48) + var(--space-8)); overflow: visible; background: var(--surface-0); }
.s-00-heading, .s-00-portrait-frame { width: 87.5%; max-width: 1260px; margin-inline: auto; }
.s-00-heading { position: relative; z-index: 3; text-align: center; }
.s-00-eyebrow { margin: 0; font-size: var(--type-small-size); line-height: var(--type-small-lh); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); text-wrap: balance; }
.s-00-title { margin: var(--space-20) 0 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: var(--s-00-name-size); line-height: 1.04; letter-spacing: -.035em; text-align: center; white-space: nowrap; }
.s-00-title-text, .s-00-word { display: inline-block; }
.s-00-title-line { display: inline; white-space: nowrap; }
.s-00-portrait-frame { position: relative; z-index: 2; margin-top: var(--space-32); height: 60vh; height: min(60svh, 175vw); min-height: min(40.25vw, 579.6px); overflow: hidden; border-radius: var(--radius-card); transform-origin: 0 0; background: var(--surface-1); }
.s-00-photo, .s-00-photo img { display: block; width: 100%; height: 100%; }
.s-00-photo { transform-origin: 50% 30%; }
.s-00-photo img { object-fit: cover; object-position: 50% 22%; transform-origin: 50% 35%; }
.s-00-lockup { position: relative; z-index: 4; margin-top: var(--space-32); text-align: center; }
.s-00-intro { max-width: 692px; margin: 0 auto; text-wrap: balance; }
.s-00-ctas { justify-content: center; margin-top: var(--space-24); gap: var(--space-16) var(--space-24); }
.s-00-primary { white-space: normal; text-align: center; }
.s-00-contact { display: inline-flex; gap: var(--space-4); align-items: center; min-height: var(--space-40); }
.s-00-arrow { flex: none; }
.s-00-skip { position: absolute; z-index: 6; top: var(--space-12); right: 6.25%; min-height: var(--space-40); padding-inline: var(--space-12); color: var(--color-text-secondary); background: var(--surface-0); border-radius: var(--radius-pill); }
.s-00-bridge, .s-00-landscape, .s-00-handoff-credit, .s-00-handoff-caption { display: none; pointer-events: none; }
.s-00-hero.s-00-enhanced { padding-bottom: 100svh; background: transparent; }
.s-00-enhanced .s-00-stage { position: sticky; top: var(--s-00-pin-top, var(--nav-h)); }
.s-00-enhanced .s-00-portrait-frame { border-radius: 0; clip-path: inset(0 round 28px); }
.s-00-enhanced .s-00-bridge { position: absolute; z-index: 4; display: flex; flex-direction: column; justify-content: center; text-align: center; opacity: 0; background: var(--surface-0); }
.s-00-bridge > p:first-child { font-size: var(--type-small-size); color: var(--color-text-secondary); }
.s-00-bridge-title { margin-top: var(--space-8); font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: clamp(48px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.s-00-bridge-title > span { display: block; }
.s-00-enhanced .s-00-landscape { display: flex; flex-direction: column; position: absolute; z-index: 3; overflow: visible; opacity: 0; }
.s-00-landscape-media { flex: none; width: 100%; height: var(--s-00-landscape-h); overflow: hidden; border-radius: var(--radius-card); }
.s-00-castle, .s-00-castle img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 53% 40%; }
.s-00-enhanced .s-00-handoff-credit { display: block; position: static; margin: 0; padding: 10px 0 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; letter-spacing: var(--type-caption-ls); text-align: right; }
.s-00-credit-link { text-decoration: underline; text-underline-offset: .15em; }
.s-00-enhanced .s-00-handoff-caption { position: absolute; z-index: 4; display: block; opacity: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: 40px; line-height: 1.1; letter-spacing: -.025em; text-wrap: pretty; }
.s-00-handoff-caption span { display: block; }
.s-00-hero.s-00-direct { padding-bottom: 0; }
.s-00-direct .s-00-stage { position: relative; top: 0; }
.s-00-direct .s-00-bridge, .s-00-direct .s-00-landscape, .s-00-direct .s-00-handoff-credit { display: none; }
@media (max-width: 734px) {
 .s-00-hero { --s-00-name-size: clamp(32px, 14vw, 64px); }
 .s-00-title { white-space: normal; text-wrap: balance; }
 .s-00-title-line { display: block; width: max-content; margin-inline: auto; }
 .s-00-eyebrow { font-size: var(--type-caption-size); }
 .s-00-portrait-frame { margin-top: var(--space-28); }
 .s-00-intro { max-width: 27em; font-size: var(--type-body-size); line-height: var(--type-body-lh); }
 .s-00-primary { font-size: var(--type-small-size); }
 .s-00-bridge-title { font-size: clamp(32px, 10.25vw, 56px); }
 .s-00-bridge-title > span:first-child { white-space: nowrap; }
 .s-00-handoff-credit { font-size: var(--type-micro-size); line-height: var(--type-micro-lh); }
 .s-00-enhanced .s-00-handoff-caption { font-size: 24px; }
}
@media (min-width: 735px) and (max-height: 700px) {
 .s-00-bridge-title { font-size: var(--space-48); }
}
@media (prefers-reduced-motion: reduce), print {
 .s-00-hero.s-00-enhanced { padding-bottom: 0; background: var(--surface-0); }
 .s-00-enhanced .s-00-stage { position: relative; top: 0; opacity: 1 !important; }
 .s-00-title, .s-00-eyebrow, .s-00-lockup, .s-00-photo, .s-00-photo img { opacity: 1 !important; transform: none !important; }
 .s-00-portrait-frame { transform: none !important; clip-path: none !important; border-radius: var(--radius-card) !important; }
 .s-00-bridge, .s-00-landscape, .s-00-handoff-credit, .s-00-handoff-caption, .s-00-skip { display: none !important; }
}

/* Movimiento reducido: el nombre siempre cabe en su caja (≈10,3 em de ancho → 8,3vw entra en el contenedor de 87,5 %). */
@media (prefers-reduced-motion: reduce) and (min-width: 735px) {
  .s-00-title { font-size: min(8.3vw, 150px) !important; }
}

/* ===== Hero de estudio (Claude, Harvey 11:5x: «sigue muy cutre») =====
   Retrato entero (cabeza y hombros) sobre el mismo blanco de la página: sin caja, sin zoom, nítido. */
.s-00-hero .s-00-portrait-frame { background: #fff; overflow: hidden; border-radius: 0 !important;
  width: min(62vw, 760px); max-width: 760px; height: auto !important; min-height: 0 !important; aspect-ratio: 1536 / 1104; margin-top: var(--space-24); }
.s-00-hero .s-00-photo img { object-fit: contain; object-position: 50% 100%; }

@media (max-width: 734px) { .s-00-hero .s-00-portrait-frame { width: 100%; } }

/* Global-3: a stable top anchor preserves the complete studio portrait. */
.s-00-enhanced .s-00-portrait-frame { transform-origin: 50% 0; }
.s-00-enhanced .s-00-bridge-title { font-size: clamp(32px, 4vw, 48px); }
.s-00-enhanced .s-00-bridge { justify-content: flex-start; }
.s-00-hero .s-00-portrait-frame { width: min(48vw, 640px); margin-top: var(--space-8);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); }
.s-00-hero .s-00-lockup { margin-top: var(--space-16); position: relative; z-index: 3; }
@media (max-width: 734px) { .s-00-hero .s-00-portrait-frame { width: 100%; } }

/* Harvey 13:5x: «se le ve muy pequeño» → retrato grande. */
.s-00-hero .s-00-portrait-frame { width: min(74vw, 1060px) !important; margin-top: calc(-1 * var(--space-8)) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%); mask-image: linear-gradient(to bottom, #000 66%, transparent 97%); }
.s-00-hero .s-00-lockup { margin-top: calc(-1 * clamp(80px, 9vw, 140px)) !important; }
@media (max-width: 734px) { .s-00-hero .s-00-portrait-frame { width: 118% !important; margin-left: -9% !important; } .s-00-hero .s-00-lockup { margin-top: -48px !important; } }

/* ===== Hero a dos columnas (Harvey 13:5x: «Daniel a la izquierda y a la derecha lo otro, quedaba más pro») ===== */
.s-00-hero .s-00-stage { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "foto titulo" "foto texto";
  align-items: end; column-gap: clamp(32px, 5vw, 88px); width: 87.5%; max-width: 1260px; margin-inline: auto;
  min-height: calc(100svh - var(--nav-h)); padding-block: clamp(40px, 6vh, 72px) 0 !important; }
.s-00-hero .s-00-heading { grid-area: titulo; width: auto !important; max-width: none !important; margin: 0 !important; text-align: left; align-self: end; }
.s-00-hero .s-00-title { white-space: normal !important; text-align: left; font-size: clamp(52px, 6vw, 100px) !important; line-height: 1.0; letter-spacing: -.04em; margin-top: 14px; }
.s-00-hero .s-00-title-line { display: inline !important; }
.s-00-hero .s-00-portrait-frame { grid-area: foto; width: 100% !important; max-width: none !important; margin: 0 !important; aspect-ratio: auto !important;
  height: calc(100svh - var(--nav-h) - clamp(40px, 6vh, 72px)) !important; min-height: 520px !important; align-self: end;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.s-00-hero .s-00-photo, .s-00-hero .s-00-photo img { height: 100% !important; }
.s-00-hero .s-00-photo img { object-fit: cover !important; object-position: 50% 10% !important; }
.s-00-hero .s-00-lockup { grid-area: texto; width: auto !important; margin: 24px 0 clamp(64px, 12vh, 140px) !important; text-align: left; }
.s-00-hero .s-00-lockup .lockup-ctas { justify-content: flex-start; }
.s-00-hero .s-00-intro { max-width: 22em; margin-inline: 0; font-size: clamp(19px, 1.5vw, 24px); }
.s-00-hero .s-00-bridge, .s-00-hero .s-00-landscape, .s-00-hero .s-00-handoff-credit, .s-00-hero .s-00-skip { display: none !important; }
@media (max-width: 734px) {
  .s-00-hero .s-00-stage { grid-template-columns: 1fr; grid-template-areas: "titulo" "foto" "texto"; padding-top: 32px !important; }
  .s-00-hero .s-00-heading, .s-00-hero .s-00-lockup { text-align: center; }
  .s-00-hero .s-00-lockup .lockup-ctas { justify-content: center; }
  .s-00-hero .s-00-intro { margin-inline: auto; }
  .s-00-hero .s-00-portrait-frame { height: 58svh !important; min-height: 0 !important; }
  .s-00-hero .s-00-lockup { margin: 8px 0 40px !important; }
}

/* ===== Entrada «wow» recuperada (Harvey 14:5x: «¿Me quitaste las animaciones wow del inicio?») ===== */
@keyframes s-00-sube { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes s-00-abre { from { clip-path: inset(14% 18% 0 18% round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes s-00-acerca { from { transform: scale(1.12); filter: grayscale(1); } 55% { filter: grayscale(0); } to { transform: scale(1); filter: grayscale(0); } }
@media (prefers-reduced-motion: no-preference) {
  .s-00-hero .s-00-eyebrow { animation: s-00-sube .9s var(--ease-house) .15s both; }
  .s-00-hero .s-00-title { animation: s-00-sube 1.1s var(--ease-house) .3s both; }
  .s-00-hero .s-00-portrait-frame { animation: s-00-abre 1.5s var(--ease-house) .1s both; }
  .s-00-hero .s-00-photo img { animation: s-00-acerca 2.2s var(--ease-house) .1s both; transform-origin: 50% 30%; }
  .s-00-hero .s-00-intro { animation: s-00-sube .9s var(--ease-house) .75s both; }
  .s-00-hero .s-00-ctas { animation: s-00-sube .9s var(--ease-house) .9s both; }
  /* Al bajar: el retrato se aleja en profundidad y el texto sube más deprisa (parallax), sin dejar huecos. */
  @supports (animation-timeline: view()) {
    @keyframes s-00-profundidad { to { transform: translate3d(0, 12%, 0) scale(.94); opacity: .55; } }
    @keyframes s-00-texto-sube { to { transform: translate3d(0, -18%, 0); opacity: 0; } }
    .s-00-hero .s-00-photo { animation: s-00-profundidad linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    .s-00-hero .s-00-heading { animation: s-00-texto-sube linear both; animation-timeline: view(); animation-range: exit 10% exit 80%; }
  }
}

/* ===== Enlace con la historia (01) en escena fija · Claude c1, 30-oct =====
   El inicio de arriba se queda TAL CUAL. Al bajar, el escenario se fija: nombre y botones
   suben y se van, el retrato se reduce a un marco redondeado a la IZQUIERDA y el castillo
   de Manzanares llega desde el fondo a un marco a la DERECHA. El final es idéntico a la
   primera escena de 01, que toma el relevo sin salto (DVB.originPlate). */
.s-00-card, .s-00-overlay { display: none; }
.s-00-hero.s-00-enhanced { padding-bottom: 0; height: calc(var(--s-00-stage-h) + var(--s-00-track, 120svh)); background: var(--surface-0); }
.s-00-hero.s-00-enhanced .s-00-stage { position: sticky; top: var(--s-00-pin-top, var(--nav-h)); height: var(--s-00-stage-h) !important; min-height: 0 !important; overflow: visible; }
.s-00-hero.s-00-enhanced .s-00-portrait-frame { clip-path: none; transform-origin: 0 0; mix-blend-mode: multiply; will-change: transform; }
.s-00-hero.s-00-opened .s-00-portrait-frame { animation: none !important; }
.s-00-hero.s-00-enhanced .s-00-heading, .s-00-hero.s-00-enhanced .s-00-lockup { will-change: transform, opacity; }
.s-00-hero.s-00-enhanced .s-00-card { display: block; position: absolute; z-index: 1; background: var(--surface-1); opacity: 0; transform-origin: 0 0; pointer-events: none; }
.s-00-hero.s-00-enhanced .s-00-overlay { display: block; position: absolute; z-index: 3; top: 0; pointer-events: none; overflow: clip; }
.s-00-overlay > .s-01-stage { position: absolute !important; inset: 0 !important; height: 100% !important; opacity: 1 !important; background: transparent !important; }
.s-00-overlay .s-01-portrait { display: none !important; }
.s-00-hero.s-00-faded .s-00-stage { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce), print {
  .s-00-hero.s-00-enhanced { padding-bottom: 0; height: auto; }
  .s-00-card, .s-00-overlay { display: none !important; }
}

/* ===== Correcciones de Harvey 30-oct (tarde): retrato más arriba y bloque de texto junto =====
   La foto de estudio trae mucho blanco sobre la cabeza: la imagen se alarga un 13 % y sube
   ese 13 % (la cabeza queda a ~70 px de la navegación y el retrato llena más la columna).
   01 aplica el mismo encuadre a su marco, así el relevo sigue sin salto. */
.s-00-hero .s-00-photo img { position: relative; top: -13%; height: 113% !important; }
@media (min-width: 735px) {
  .s-00-hero .s-00-stage { grid-template-areas: "foto ." "foto titulo" "foto texto" "foto ."; grid-template-rows: 1fr auto auto 1fr;
    padding-top: var(--space-16) !important; }
  .s-00-hero .s-00-portrait-frame { grid-row: 1 / -1; height: calc(100svh - var(--nav-h) - var(--space-16)) !important; }
  .s-00-hero .s-00-heading { align-self: end; }
  .s-00-hero .s-00-lockup { align-self: start; margin: var(--space-40) 0 var(--space-48) !important; }
  .s-00-hero .s-00-ctas { margin-top: var(--space-32); }
}
/* Hombros sin corte vertical duro: fundido lateral suave hacia el blanco, como el de abajo. */
.s-00-hero .s-00-portrait-frame {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Móvil: fundido lateral y de abajo más ancho y gradual (varias paradas), sin borde duro. */
@media (max-width: 734px) {
  .s-00-hero .s-00-portrait-frame { -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.1) 95%, transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 18%, #000 26%, #000 74%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.4) 89%, rgba(0,0,0,.12) 95%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.1) 95%, transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 18%, #000 26%, #000 74%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.4) 89%, rgba(0,0,0,.12) 95%, transparent 100%) !important; }
}
/* Móvil: un solo eje (antetítulo, nombre, retrato, frase y botón centrados) y,
   en pantallas bajas, el retrato cede alto para que frase y botón entren en la primera pantalla. */
@media (max-width: 734px) {
  .s-00-hero .s-00-title { text-align: center; }
  .s-00-hero .s-00-portrait-frame { height: clamp(220px, calc(100svh - var(--nav-h) - 330px), 58svh) !important; }
}
/* Móvil estrecho/bajo: el marco del retrato nunca se vuelve apaisado (≤ 0,8 de ancho/alto),
   así la escena de Manzanares reparte los dos marcos a partes iguales. */
@media (max-width: 734px) {
  .s-00-hero .s-00-portrait-frame { width: min(100%, calc(.8 * clamp(220px, calc(100svh - var(--nav-h) - 330px), 58svh))) !important; justify-self: center; margin-inline: auto !important; }
}
.s-00-overlay .s-01-stage::before { display: none !important; }

/* ==== sections/01-origen ==== */
/* 01 · De dónde viene · historia en escena fija (sticky) con profundidad.
   Sin JS / movimiento reducido / impresión: cabecera + dos bloques foto+texto apilados.
   Con JS (.s-01-on en el escenario): una sola escena fija; section.js coloca cada pieza
   en px y la mueve solo con transform/opacity. Créditos siempre DEBAJO de la foto. */
.s-01-origen { --s-01-r: 22px; --s-01-photo-h: clamp(420px, 66svh, 680px); --s-01-scene-gap: var(--space-128); }
.s-01-intro { padding-block: var(--space-96) var(--space-64); text-align: center; }
.s-01-eyebrow { margin: 0; color: var(--color-text-secondary); }
.s-01-title { margin: var(--space-12) 0 0; font-size: clamp(48px, 5.6vw, 80px); line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; }
.s-01-title > span { display: block; }

.s-01-portrait { display: none; }

.s-01-scenes { list-style: none; margin-block: 0; padding: 0 0 var(--space-128); display: grid; gap: var(--s-01-scene-gap); }
.s-01-scene { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--element-gap); }
.s-01-figure { grid-column: 1 / -1; margin: 0; }
.s-01-media { position: relative; height: var(--s-01-photo-h); border-radius: var(--s-01-r); overflow: hidden; background: var(--surface-1); isolation: isolate; }
.s-01-image, .s-01-image picture, .s-01-image img { display: block; width: 100%; height: 100%; }
.s-01-image { transform-origin: 50% 55%; }
.s-01-image img { object-fit: cover; }
.s-01-scene--manzanares .s-01-image img { object-position: 50% 42%; }
.s-01-scene--escorial { --s-01-photo-h: clamp(460px, 76svh, 780px); }
.s-01-scene--escorial .s-01-image img { object-position: 50% 55%; }

.s-01-credit { margin: 0; padding-top: var(--space-12); color: var(--color-text-secondary); font-size: 11px; line-height: 1.3; letter-spacing: 0; text-align: right; overflow-wrap: anywhere; }
.s-01-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-hairline); text-underline-offset: .18em; }
.s-01-credit a:hover { color: var(--color-ink); text-decoration-color: currentColor; }

.s-01-text { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; margin-top: var(--space-24); padding-top: var(--space-28); border-top: 1px solid var(--color-hairline); }
.s-01-meta { grid-column: 1 / span 4; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-16); row-gap: var(--space-4); margin: 0; padding-top: 6px; }
.s-01-index { grid-row: 1 / span 2; color: var(--color-steel); padding-top: 3px; white-space: nowrap; }
.s-01-place { font-family: var(--font-display); font-size: var(--type-callout-size); line-height: var(--type-callout-lh); font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.s-01-where { font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--color-text-secondary); }
.s-01-copy { grid-column: 5 / -1; margin: 0; font-family: var(--font-display); font-size: clamp(32px, 3.05vw, 44px); line-height: 1.1; font-weight: var(--font-weight-semibold); letter-spacing: -.026em; color: var(--color-ink); text-wrap: balance; max-width: 22ch; }
.s-01-copy span { display: block; }

@media (max-width: 1068px) {
  .s-01-origen { --s-01-photo-h: clamp(380px, 56svh, 560px); --s-01-scene-gap: var(--space-96); }
  .s-01-scene--escorial { --s-01-photo-h: clamp(420px, 64svh, 640px); }
}
@media (max-width: 734px) {
  .s-01-origen, .s-01-stage { --s-01-r: 16px; }
  .s-01-origen, .s-01-scene--escorial { --s-01-photo-h: min(118vw, 54svh, 480px); }
  .s-01-origen { --s-01-scene-gap: var(--space-80); }
  .s-01-intro { padding-block: var(--space-64) var(--space-40); }
  .s-01-title { font-size: clamp(36px, 10.4vw, 48px); line-height: 1.04; }
  .s-01-scenes { padding-bottom: var(--space-96); }
  .s-01-scene, .s-01-text { grid-template-columns: minmax(0, 1fr); }
  .s-01-text { margin-top: var(--space-16); padding-top: var(--space-20); row-gap: var(--space-12); }
  .s-01-meta, .s-01-copy { grid-column: 1; }
  .s-01-meta { padding-top: 0; }
  .s-01-copy { font-size: clamp(24px, 7.2vw, 28px); line-height: 1.12; max-width: none; }
  .s-01-credit { padding-top: var(--space-8); font-size: 10px; }
  .s-01-scene--manzanares .s-01-image img { object-position: 52% 45%; }
  .s-01-scene--escorial .s-01-image img { object-position: 42% 50%; }
}

/* ===== Escena fija (solo con JS y movimiento normal) ===== */
.s-01-origen.s-01-scened { height: calc(var(--s-01-stage-h, 100svh) + var(--s-01-track, 230svh)); }
.s-01-origen.s-01-joined { z-index: 3; background: transparent; margin-top: calc(-1 * var(--s-01-stage-h, 100svh)); }
.s-01-stage { --s-01-r: 22px; }
.s-01-stage.s-01-on { position: sticky; top: var(--nav-h); height: var(--s-01-stage-h, calc(100svh - var(--nav-h))); overflow: clip; background: var(--surface-0); }
.s-01-joined:not(.s-01-live) .s-01-stage.s-01-on { opacity: 0; pointer-events: none; }
.s-01-on .s-01-intro, .s-01-on .s-01-portrait, .s-01-on .s-01-figure, .s-01-on .s-01-text { position: absolute; margin: 0; }
.s-01-on .s-01-intro { padding: 0; text-align: left; }
.s-01-on .s-01-title { margin-top: var(--space-8); font-size: clamp(36px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
.s-01-on .s-01-title > span { display: inline; }
.s-01-on .s-01-scenes { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; padding: 0; display: block; }
.s-01-on .s-01-scene { position: absolute; inset: 0; display: block; pointer-events: none; }
.s-01-on .s-01-figure, .s-01-on .s-01-text { pointer-events: auto; will-change: transform, opacity; }
.s-01-on .s-01-media { height: var(--s-01-media-h, 400px); }
.s-01-on .s-01-image { will-change: transform; }
.s-01-on .s-01-credit { padding-top: 10px; }
.s-01-on .s-01-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--element-gap); padding-top: var(--space-20); }
.s-01-on .s-01-meta { grid-column: 1; }
.s-01-on .s-01-copy { grid-column: 2; font-size: clamp(26px, 2.5vw, 38px); max-width: 24ch; }
.s-01-on .s-01-scene--escorial .s-01-copy { max-width: 30ch; }
/* Retrato: misma foto y mismo encuadre que el inicio (multiplicada sobre una tarjeta gris). */
.s-01-on .s-01-portrait { display: block; border-radius: var(--s-01-r); overflow: hidden; background: var(--surface-1); isolation: isolate; will-change: transform, opacity; }
.s-01-portrait-img, .s-01-portrait-img img { display: block; width: 100%; height: 100%; }
.s-01-portrait-img { mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.s-01-portrait-img img { object-fit: cover; object-position: 50% 10%; }
.s-01-on.s-01-solo .s-01-portrait { display: none; }
@media (max-width: 734px) {
  .s-01-on .s-01-title { font-size: clamp(28px, 8.4vw, 36px); }
  .s-01-on .s-01-title > span { display: block; }
  .s-01-on .s-01-text { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); padding-top: var(--space-12); }
  .s-01-on .s-01-meta, .s-01-on .s-01-copy { grid-column: 1; }
  .s-01-on .s-01-copy { font-size: clamp(20px, 6.2vw, 26px); max-width: none; }
  .s-01-on .s-01-credit { padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce), print {
  .s-01-image { transform: none !important; }
}
@media print {
  .s-01-origen, .s-01-scene--escorial { --s-01-photo-h: 300px; }
  .s-01-origen { --s-01-scene-gap: var(--space-32); }
  .s-01-intro { padding-block: var(--space-32); }
  .s-01-scene { break-inside: avoid; }
  .s-01-copy { font-size: var(--type-title-size); }
}
/* Mismo encuadre que el retrato del inicio (imagen alargada un 13 % y subida). */
.s-01-portrait-img img { position: relative; top: -13%; height: 113%; }

/* Vuelta 3: titular por escena (Manzanares el Real → «Su voz empezó en El Escorial.»),
   cambiado en la misma transición; el nombre del lugar ya no se repite bajo la foto. */
.s-01-head1 { display: none; }
.s-01-on .s-01-heads { display: grid; }
.s-01-on .s-01-heads > .s-01-title { grid-area: 1 / 1; will-change: transform, opacity; }
.s-01-on .s-01-head1 { display: block; }
.s-01-on .s-01-place { display: none; }
.s-01-on .s-01-meta { grid-template-columns: auto; row-gap: var(--space-4); }
.s-01-on .s-01-index { grid-row: auto; padding-top: 0; }
.s-01-on .s-01-copy { font-size: clamp(24px, 2.1vw, 32px); max-width: 34ch; }
.s-01-on .s-01-scene--escorial .s-01-copy { max-width: 34ch; }
@media (max-width: 734px) {
  .s-01-on .s-01-meta { grid-template-columns: auto 1fr; column-gap: var(--space-12); }
  .s-01-on .s-01-copy { font-size: clamp(20px, 5.8vw, 24px); }
}
/* Mismo fundido lateral que el retrato del inicio. */
.s-01-portrait-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 734px) {
  .s-01-portrait-img { -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.1) 95%, transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 18%, #000 26%, #000 74%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.4) 89%, rgba(0,0,0,.12) 95%, transparent 100%); mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.1) 95%, transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 18%, #000 26%, #000 74%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.4) 89%, rgba(0,0,0,.12) 95%, transparent 100%); }
}

/* Salida 01→02 «de la foto a la línea»: el 01 se solapa con el arranque del 02 (margen
   negativo medido en JS) y su escenario se vuelve transparente (velo blanco con opacidad)
   para que el 02 suba por debajo mientras el marco queda en una barra de 2 px. */
.s-01-origen.s-01-scened { position: relative; z-index: 3; background: transparent; margin-bottom: calc(-1 * var(--s-01-overlap, 0px)); }
.s-01-stage.s-01-on { background: transparent; }
.s-01-stage.s-01-on::before { content: ""; position: absolute; inset: 0; background: var(--surface-0); opacity: var(--s-01-veil, 1); pointer-events: none; }

/* ==== sections/02-jovenes ==== */
/* 02 · a typographic pause: statement, evidence, then the words behind it. */
/* 01→02: no top cushion; the Escorial bar of 01 hands over to the title. */
.s-02-jovenes { padding-block: var(--space-32) calc(var(--section-padding-story) * 0.5); }
/* The quote closes the section: the next section's own top space is the pause. */
.s-02-timeline { position: absolute; top: -100vh; height: calc(100% + 100vh); width: 1px; pointer-events: none; }
.s-02-content { position: relative; }
/* Base reserves nav + 12px; local targets add 52px (64px clear below nav). */
.s-02-title, .s-02-source, .s-02-document, .s-02-skip { scroll-margin-top: var(--space-52); }
.s-02-heading { text-align: center; }
.s-02-eyebrow { color: var(--color-text-secondary); margin-bottom: var(--space-24); }
.s-02-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-16); margin-top: var(--space-28); }
.s-02-progress { width: var(--space-80); height: calc(var(--space-4) / 2); background: var(--color-hairline); overflow: hidden; }
.s-02-progress-fill { display: block; width: 100%; height: 100%; background: var(--color-text-secondary); transform-origin: left center; transform: scaleX(var(--s-02-progress, 1)); }
.s-02-skip { padding: var(--space-4) var(--space-8); color: var(--color-text-secondary); min-height: var(--space-32); }
.s-02-skip:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.s-02-skip:disabled { cursor: default; text-decoration: none; }
.s-02-title { font-size: calc(var(--type-hero-size) * 1.5); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); }
.s-02-line { display: block; }
.s-02-title-row { display: block; }
.s-02-title-row .s-02-line { display: inline-block; }
/* One line on desktop: the sentence measures ~40em. */
.s-02-lead { max-width: 42em; margin: 0 auto var(--space-20); opacity: 1; color: var(--color-text-secondary); color: color-mix(in srgb, var(--color-text-secondary), var(--color-steel) var(--s-02-muted, 0%)); }
.s-02-intro { max-width: calc(var(--content-max) * 0.52); margin: var(--space-40) auto 0; }
.s-02-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-96); padding-block: var(--space-52); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
.s-02-stat { min-width: 0; padding-inline: var(--space-64); }
.s-02-stat:first-child { padding-left: 0; }
.s-02-stat + .s-02-stat { border-left: 1px solid var(--color-hairline); padding-right: 0; }
.s-02-figure { display: flex; align-items: baseline; gap: var(--space-12); font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); }
/* 160px from 1440 up; below that it scales so «24,54 %» never leaves its column. */
.s-02-number { position: relative; display: inline-block; font-size: min(calc(var(--type-hero-size) * 2), 11.12vw); letter-spacing: -0.035em; white-space: nowrap; }
.s-02-number-final { display: inline-block; opacity: var(--s-02-final, 1); background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Each figure fills its own scale with the same scroll progress as its counter. */
.s-02-stat--edad { --s-02-pos: 71.7647%; } /* (30,2 - 18) / (35 - 18) */
.s-02-stat--paro { --s-02-pos: 24.54%; }
.s-02-scale { margin-top: var(--space-32); max-width: 28em; }
.s-02-scale-track { position: relative; display: block; height: var(--space-4); border-radius: var(--space-4); background: var(--color-control-gray); }
.s-02-scale-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--s-02-pos); border-radius: inherit; background-image: var(--grad-ink); transform-origin: left center; transform: scaleX(var(--s-02-count, 1)); }
/* A box as wide as the value, carrying the dot at its right edge, slides in from the left (no overflow to the right). */
/* A light runs along the filling bar (--s-02-shine peaks halfway through the fill). */
.s-02-scale-fill { clip-path: inset(0 round var(--space-4)); }
.s-02-scale-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); opacity: var(--s-02-shine, 0); transform: translate3d(calc((var(--s-02-count, 1) * 2 - 1) * 100%), 0, 0); }
.s-02-scale-move { position: absolute; top: 0; bottom: 0; left: 0; width: var(--s-02-pos); transform: translate3d(calc((var(--s-02-count, 1) - 1) * 100%), 0, 0); }
.s-02-scale-dot { position: absolute; top: 50%; right: 0; width: var(--space-16); height: var(--space-16); margin: calc(var(--space-16) / -2) calc(var(--space-16) / -2) 0 0; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 0 var(--space-4) var(--surface-0); }
.s-02-scale-ends { display: flex; justify-content: space-between; margin-top: var(--space-12); font-size: var(--type-small-size); line-height: 1.3; color: var(--color-steel); font-variant-numeric: tabular-nums; }
.s-02-number-roll { position: absolute; top: 0; left: 0; white-space: nowrap; opacity: var(--s-02-rolling, 0); }
.s-02-unit { font-size: var(--type-headline-size); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.s-02-stat-label { color: var(--color-text-secondary); max-width: 25em; margin-top: var(--space-24); min-height: calc(var(--type-body-lg-size) * var(--type-body-lg-lh) * 2); }
.s-02-source { display: block; margin-top: var(--space-20); min-height: var(--space-32); }
.s-02-source-end { display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.s-02-source svg, .s-02-document svg { flex: 0 0 auto; width: var(--space-16); height: var(--space-16); }
.s-02-digit { display: inline-block; vertical-align: -0.18em; height: 1.12em; width: 0.64em; overflow: hidden; }
.s-02-glyph { fill: currentColor; }
.s-02-fraction { line-height: 1.12; }
/* The quote is read, word by word: each word passes from light grey to ink as the scroll advances. */
.s-02-quote { position: relative; margin: var(--space-96) auto 0; max-width: calc(var(--content-max) * 0.8); text-align: center; }
/* Pins (JS only, when the stage fits the screen): the stage holds still while its scene plays. */
.s-02-pin.is-pinned > .s-02-stats, .s-02-pin.is-pinned > .s-02-quote { position: sticky; }
.s-02-mark { display: block; width: var(--space-64); height: var(--space-48); margin: 0 auto var(--space-32); color: var(--color-hairline); opacity: var(--s-02-mark, 1); transform: translate3d(0, calc((1 - var(--s-02-mark, 1)) * var(--space-24)), 0); }
.s-02-quote-text { font-family: var(--font-display); font-size: var(--type-section-size); font-weight: var(--font-weight-semibold); line-height: 1.16; letter-spacing: -0.012em; color: var(--color-ink); text-wrap: balance; }
.s-02-word { opacity: var(--s-02-word, 1); }
.s-02-attribution { display: grid; justify-items: center; gap: var(--space-8); margin-top: var(--space-40); color: var(--color-text-secondary); }
.s-02-document { display: inline-flex; align-items: center; gap: var(--space-4); justify-self: center; min-height: var(--space-32); flex-wrap: wrap; }
.s-02-document-reference { color: var(--color-text-secondary); }
@media (max-width: 1279px) {
  .s-02-lead { text-wrap: balance; }
}
@media (max-width: 1068px) {
  .s-02-stat { padding-inline: var(--space-40); }
  /* Tablet: two figures side by side must fit their half column («24,54 %» ≈ 3.6em). */
  .s-02-number { font-size: min(calc(var(--type-hero-size) * 2), 10.5vw); }
  .s-02-intro { max-width: 32em; }
  .s-02-quote { max-width: 92%; }
}
@media (max-width: 734px) {
  .s-02-title, .s-02-source, .s-02-document, .s-02-skip { scroll-margin-top: var(--space-28); }
  .s-02-eyebrow { margin-bottom: var(--space-20); }
  .s-02-controls { gap: var(--space-12); margin-top: var(--space-24); }
  /* Touch targets: every link and button in the section reaches 44px on phones. */
  .s-02-skip, .s-02-document { min-height: calc(var(--space-40) + var(--space-4)); }
  .s-02-skip { display: inline-flex; align-items: center; }
  /* Two lines on every phone: «son el presente.» measures 7.09em, so 12vw keeps it inside the 87.5vw content. */
  .s-02-title { font-size: min(calc(var(--type-hero-size) * 1.17), 12vw); line-height: var(--type-hero-lh); }
  .s-02-title-row { white-space: nowrap; }
  /* Two balanced lines at 390: the sentence measures 40em on one line. */
  .s-02-lead { max-width: none; margin-bottom: var(--space-20); font-size: clamp(15px, 4vw, var(--type-intro-size)); text-wrap: balance; }
  /* Lighter on phones: smaller, full width, balanced, so it does not read as a block. */
  .s-02-intro { margin-top: var(--space-28); max-width: none; font-size: var(--type-body-size); line-height: var(--type-body-lh); text-wrap: balance; }
  /* The figure grows up out of its own line while its counter runs: it rises by the hidden share
     of its height and a clip keeps it above the line (20% slack for the comma's descender). */
  .s-02-number, .s-02-unit { transform: translate3d(0, calc((1 - var(--s-02-count, 1)) * 100%), 0); clip-path: inset(-20% -10% calc((1 - var(--s-02-count, 1)) * 100% - 20%) -10%); }
  .s-02-stats { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-64); padding-block: 0; }
  .s-02-stat, .s-02-stat:first-child { padding: var(--space-32) 0; }
  .s-02-stat + .s-02-stat { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .s-02-number { font-size: calc(var(--type-hero-size) * 1.75); }
  .s-02-unit { font-size: var(--type-card-title-size); }
  .s-02-stat-label { margin-top: var(--space-20); min-height: 0; }
  .s-02-scale { margin-top: var(--space-24); }
  .s-02-source { margin-top: var(--space-4); padding-block: var(--space-12); min-height: calc(var(--space-40) + var(--space-4)); }
  .s-02-quote { max-width: 100%; margin-top: var(--space-64); }
  .s-02-mark { width: var(--space-48); height: calc(var(--space-48) * 0.75); margin-bottom: var(--space-24); }
  .s-02-quote-text { font-size: min(var(--space-28), 7.6vw); line-height: 1.2; letter-spacing: -0.006em; }
  .s-02-attribution { margin-top: var(--space-28); gap: var(--space-4); }
}
@media (max-width: 359px) {
  .s-02-number { font-size: calc(var(--type-hero-size) * 1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .s-02-line, .s-02-lead, .s-02-number-final, .s-02-word, .s-02-mark { transform: none !important; opacity: 1 !important; }
  .s-02-lead { color: var(--color-text-secondary) !important; }
  .s-02-scale-fill, .s-02-scale-move, .s-02-number, .s-02-unit { transform: none !important; }
  .s-02-number, .s-02-unit, .s-02-line { clip-path: none !important; }
  .s-02-scale-fill::after { display: none; }
  .s-02-controls, .s-02-number-roll { display: none; }
}
@media print {
  .s-02-line, .s-02-lead, .s-02-number-final, .s-02-word, .s-02-mark { transform: none !important; opacity: 1 !important; }
  .s-02-lead { color: var(--color-text-secondary) !important; }
  .s-02-scale-fill, .s-02-scale-move, .s-02-number, .s-02-unit { transform: none !important; }
  .s-02-number, .s-02-unit, .s-02-line { clip-path: none !important; }
  .s-02-scale-fill::after { display: none; }
  .s-02-controls, .s-02-number-roll { display: none; }
  .s-02-number { font-size: var(--type-section-size); }
  .s-02-jovenes { break-inside: avoid; }
}

/* ==== sections/02b-por-los-jovenes ==== */
/* 02b · Por los jóvenes. Four blocks, four effects that appear nowhere else on the page:
   01 particles that gather into «2.000» (canvas) + an iris that opens on a photo,
   02 a thread of light that draws a constellation, 03 a horizontal gallery on three planes,
   04 words that arrive from depth. Without JS or with reduced motion: one static, complete column.
   Everything under .s-02b-on is the animated layout (set by section.js). */
.s-02b-jovenes { padding-block: var(--space-80) var(--space-64); overflow-x: clip; overflow-y: visible; }
.s-02b-jovenes :is(.s-02b-src, .s-02b-title) { scroll-margin-top: var(--space-52); }

/* ---------- Opening ---------- */
.s-02b-lockup { text-align: center; }
.s-02b-eyebrow { color: var(--color-text-secondary); margin-bottom: var(--space-20); }
.s-02b-title { position: relative; font-size: calc(var(--type-hero-size) * 1.25); }
/* The gradient lives on each line, never on the h2: a text-clipped background on the parent would paint the
   glyphs of its children even while those children are at opacity 0 (seen in desktop Chrome). */
/* One Apple-style sheen for every title of the section (ink → graphite → steel), built from the tokens. */
.s-02b-jovenes { --s-02b-grad: linear-gradient(100deg, var(--color-ink) 0%, var(--color-ink) 22%, var(--color-text-secondary-alt) 62%, var(--color-steel) 100%); }
.s-02b-tline, .s-02b-impact, .s-02b-word, .s-02b-uline { background-image: var(--s-02b-grad); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Each line hugs its own words (so the sheen spans them) with room for the glyphs' side bearings. */
.s-02b-tline { display: table; margin-inline: auto; padding-inline: 0.06em; }
/* Lines/words that animate carry the sheen themselves (a text-clipped parent would paint hidden children). */
.s-02b-on .s-02b-udia .s-02b-impact { background-image: none; -webkit-text-fill-color: currentColor; }
.s-02b-jovenes:not(.s-02b-on) .s-02b-vline { background-image: var(--s-02b-grad); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.s-02b-lead { max-width: 30em; margin: var(--space-28) auto 0; }
.s-02b-giant, .s-02b-entry-line { display: none; }
.s-02b-coda-dim, .s-02b-bridge { transition: none; }

/* ---------- Shared pieces ---------- */
.s-02b-block { margin-top: var(--space-80); }
.s-02b-head { display: flex; align-items: center; gap: var(--space-12); color: var(--color-text-secondary); }
.s-02b-num { display: inline-grid; place-items: center; min-width: var(--space-32); height: var(--space-32); padding-inline: var(--space-8); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--color-ink); font-size: var(--type-caption-size); }
.s-02b-when { color: var(--color-action); }
.s-02b-text { color: var(--color-ink); margin-top: var(--space-8); }
/* Every fact reads the same way: (a) the impact, big; (b) his exact role, short, with the year; (c) the source. */
.s-02b-impact { font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh); letter-spacing: var(--type-card-title-ls); color: var(--color-ink); text-wrap: balance; }
.s-02b-role { margin-top: var(--space-8); color: var(--color-text-secondary); text-wrap: pretty; }
/* The arrow follows the last word, even when the label wraps. */
.s-02b-src { display: inline-block; padding-block: var(--space-4); margin-top: var(--space-8); color: var(--color-link); }
.s-02b-src svg { display: inline-block; width: var(--space-16); height: var(--space-16); margin-left: var(--space-4); vertical-align: -0.2em; }
.s-02b-src:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 01 · 2.000 ---------- */
.s-02b-canvas { display: none; }
.s-02b-dots-inner { text-align: center; }
.s-02b-dots-inner .s-02b-head { justify-content: center; }
.s-02b-big { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-24); font-family: var(--font-display); font-weight: var(--font-weight-semibold); }
.s-02b-big-num { display: block; font-size: clamp(80px, min(28vw, 31vh), 300px); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: var(--color-ink); }
.s-02b-big-unit { display: block; margin-top: var(--space-8); font-size: var(--type-headline-size); line-height: var(--type-headline-lh); color: var(--color-text-secondary); }
.s-02b-fact--center { max-width: 40em; margin: var(--space-28) auto 0; }

/* Block 01 rows: one grid, two columns shared by every row (media or figure | impact, role, source). */
.s-02b-feats { margin-top: var(--space-80); border-bottom: 1px solid var(--color-hairline); }
.s-02b-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-64); align-items: center; padding-block: var(--space-48); border-top: 1px solid var(--color-hairline); }
.s-02b-feat-copy .s-02b-impact { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); letter-spacing: var(--type-headline-sm-ls); }
.s-02b-stat { align-self: center; }
.s-02b-stat-num { font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: var(--type-hero-size); line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.s-02b-stat-label { margin-top: var(--space-12); color: var(--color-text-secondary); max-width: 22em; }
.s-02b-conf-media { margin: 0; }
.s-02b-iris { border-radius: 22px; overflow: hidden; }
.s-02b-conf-image { aspect-ratio: 1; }
.s-02b-conf-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-02b-credit { margin-top: var(--space-12); color: var(--color-text-secondary); }


/* ---------- 02 · Constellation ---------- */
.s-02b-sky { position: relative; margin-top: var(--space-40); }
.s-02b-thread { display: none; }
.s-02b-stars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); list-style: none; margin: 0; padding: 0; }
.s-02b-star { position: relative; padding-top: var(--space-40); align-self: start; }
.s-02b-node { position: absolute; top: 0; left: 0; width: var(--space-16); height: var(--space-16); border-radius: var(--radius-round); background: var(--color-action); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-action) 14%, transparent); }
.s-02b-star-card { background: var(--surface-1); border-radius: 22px; padding: var(--card-padding); }


/* ---------- 03 · Rail ---------- */
.s-02b-back, .s-02b-ticks, .s-02b-count { display: none; }
.s-02b-vline { display: block; text-wrap: balance; }
.s-02b-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); list-style: none; margin: var(--space-32) auto 0; padding: 0; width: var(--content-width); max-width: var(--content-max); }
.s-02b-slide-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; background: var(--surface-1); border-radius: 22px; padding: var(--space-40) var(--card-padding) var(--card-padding); }
.s-02b-place { color: var(--color-action); margin-bottom: var(--space-12); }
.s-02b-slide-card .s-02b-src { padding-top: var(--space-4); }

/* ---------- 04 · Voice ---------- */
.s-02b-voice-inner { text-align: center; }
.s-02b-voice-inner .s-02b-head { justify-content: center; }
.s-02b-voice-title { margin-top: var(--space-16); color: var(--color-ink); max-width: 15em; margin-inline: auto; }
.s-02b-word { display: inline-block; }
.s-02b-uline { display: table; padding-right: 0.06em; }
.s-02b-rows { list-style: none; margin: var(--space-48) auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40); text-align: left; }
.s-02b-row { border-top: 1px solid var(--color-hairline); padding-top: var(--space-20); }

.s-02b-coda { margin-top: var(--space-80); text-align: center; max-width: 22em; color: var(--color-ink); }

/* =====================================================================
   Animated layout (JS on, motion allowed)
   ===================================================================== */
.s-02b-on .s-02b-b1, .s-02b-on .s-02b-b3, .s-02b-on .s-02b-b4 { margin-top: 0; }
.s-02b-on .s-02b-b3 { margin-top: var(--space-40); }
/* Opening: the giant line lands on the eyebrow. */
/* Every scene is pinned with its content centred in the viewport (sticky top set by JS), so the scene
   arrives right after the block before it and leaves with the next one right behind: no blank bands. */
.s-02b-on .s-02b-open-stage { position: sticky; top: var(--s-02b-top, var(--nav-h)); padding-block: var(--space-40); }
.s-02b-on .s-02b-giant { display: block; position: absolute; left: 0; top: 0; margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: 200px; line-height: 1.1; letter-spacing: var(--type-eyebrow-ls); white-space: nowrap; transform-origin: 0 0; pointer-events: none;
  background-image: linear-gradient(100deg, var(--color-ink) 0%, var(--color-ink) 45%, var(--color-text-secondary-alt) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.s-02b-on .s-02b-eyebrow { opacity: 0; }
/* Entry from 02: a thread drops from the Security Council signature and opens the giant line. */
.s-02b-on .s-02b-entry-line { display: block; position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: 100px; border-radius: 1px; background: var(--color-action); transform-origin: 50% 0; transform: scaleY(0); pointer-events: none; }
.s-02b-on .s-02b-tline, .s-02b-on .s-02b-lead { opacity: 0; }

/* 01 · particles */
.s-02b-on .s-02b-dots-stage { position: sticky; top: var(--s-02b-top, var(--nav-h)); }
.s-02b-on .s-02b-canvas { display: block; position: absolute; left: 0; top: -45vh; width: 100%; height: calc(100% + 57vh); pointer-events: none; }
.s-02b-on .s-02b-canvas { z-index: 0; }
.s-02b-on .s-02b-dots-inner { position: relative; z-index: 1; }
.s-02b-on .s-02b-big-num, .s-02b-on .s-02b-big-unit, .s-02b-on .s-02b-dots-stage .s-02b-fact { opacity: 0; }
.s-02b-on .s-02b-feats { margin-top: var(--space-40); }
.s-02b-on .s-02b-iris { clip-path: circle(0% at 42% 32%); }

/* 02 · thread */
.s-02b-on .s-02b-thread { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s-02b-thread-base { fill: none; stroke: var(--color-hairline); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; }
.s-02b-thread-light { fill: none; stroke: var(--color-action); stroke-width: 2; stroke-linecap: round; }
.s-02b-spark { fill: var(--color-action); }
.s-02b-spark-halo { fill: var(--color-action); opacity: 0.16; }
.s-02b-dust circle { fill: var(--color-steel); opacity: 0.35; }
.s-02b-on .s-02b-sky { margin-top: var(--space-48); }
.s-02b-on .s-02b-stars { position: relative; }
/* A constellation, not a row: the stars sit at different heights and the thread joins them. */
.s-02b-on .s-02b-star:nth-child(2) { margin-top: var(--space-128); }
.s-02b-on .s-02b-star:nth-child(3) { margin-top: var(--space-48); }
.s-02b-on .s-02b-node { background: var(--surface-0); box-shadow: inset 0 0 0 2px var(--color-steel); transition: none; }
.s-02b-on .s-02b-node.is-lit { background: var(--color-action); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-action) 14%, transparent); }
.s-02b-on .s-02b-star-card { clip-path: inset(0 100% 100% 0 round 22px); }

/* 03 · rail on three planes */
.s-02b-on .s-02b-rail-stage { position: sticky; top: var(--s-02b-top, var(--nav-h)); padding-block: var(--space-24); }
.s-02b-on .s-02b-back { display: block; position: absolute; left: 0; top: 50%; height: 62vh; width: auto; margin-top: -31vh; pointer-events: none; }
.s-02b-back text { font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: 250px; letter-spacing: -0.03em; fill: var(--color-control-gray); opacity: 0.85; }
.s-02b-on .s-02b-rail-head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.s-02b-on .s-02b-count { display: block; color: var(--color-text-secondary); }
.s-02b-count-now { color: var(--color-ink); }
.s-02b-on .s-02b-rail { display: flex; gap: var(--s-02b-gap, 40px); width: auto; max-width: none; margin: var(--space-32) 0 0; position: relative; }
.s-02b-on .s-02b-slide { flex: 0 0 var(--s-02b-card, 560px); }
.s-02b-on .s-02b-slide-card { box-shadow: var(--shadow-ring-subtle); background: var(--surface-0); padding: var(--space-52) var(--space-52) var(--space-40); }
.s-02b-on .s-02b-slide-card .s-02b-impact { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); letter-spacing: var(--type-headline-sm-ls); }
.s-02b-on .s-02b-ticks { display: block; position: relative; margin-top: var(--space-40); height: var(--space-12); width: 400vw; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--color-hairline) 0 1px, transparent 1px 40px); border-top: 1px solid var(--color-hairline); }

/* 04 · words from depth */
.s-02b-on .s-02b-voice-stage { position: sticky; top: var(--s-02b-top, var(--nav-h)); padding-block: var(--space-24); }
.s-02b-on .s-02b-voice-inner { width: var(--content-width); }
.s-02b-on .s-02b-voice-title { perspective: 900px; font-size: var(--type-hero-size); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); max-width: 13em; }
.s-02b-on .s-02b-rows { margin-top: var(--space-64); }
.s-02b-on .s-02b-word { opacity: 0; }
.s-02b-on .s-02b-row { clip-path: inset(0 0 100% 0); }
.s-02b-on .s-02b-coda { margin-top: var(--space-40); position: relative; z-index: 1; }

@media (max-width: 1068px) {
  .s-02b-feat { gap: var(--space-40); }
  .s-02b-stat-num { font-size: var(--type-display-size); }
  .s-02b-stars { gap: var(--space-24); }
}

@media (max-width: 734px) {
  .s-02b-jovenes { padding-block: var(--space-64) var(--space-48); }
  .s-02b-jovenes :is(.s-02b-src, .s-02b-title) { scroll-margin-top: var(--space-28); }
  .s-02b-title { font-size: 40px; line-height: 1.1; }
  .s-02b-big-unit { font-size: var(--type-title-size); }
  .s-02b-src { padding-block: var(--space-12); }
  .s-02b-feat { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding-block: var(--space-32); }
  .s-02b-feat-copy .s-02b-impact, .s-02b-on .s-02b-slide-card .s-02b-impact { font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-ls); }
  .s-02b-stat-num { font-size: 48px; }
  .s-02b-impact { font-size: var(--type-title-size); line-height: var(--type-title-lh); }
  .s-02b-on .s-02b-slide-card { padding: var(--space-32) var(--space-24) var(--space-24); }
  .s-02b-on .s-02b-voice-title { font-size: 38px; line-height: 1.1; }
  .s-02b-on .s-02b-rows { margin-top: var(--space-32); }
  .s-02b-on .s-02b-giant { text-align: center; line-height: 0.98; }
  .s-02b-on .s-02b-open-stage { padding-block: var(--space-16); }
  .s-02b-iris { border-radius: 16px; }
  .s-02b-stars { grid-template-columns: minmax(0, 1fr); gap: var(--space-28); }
  .s-02b-star { padding-top: 0; padding-left: var(--space-40); }
  .s-02b-node { top: var(--space-28); left: 0; }
  .s-02b-star-card { border-radius: 16px; padding: var(--space-24); }
  .s-02b-rail { grid-template-columns: minmax(0, 1fr); }
  .s-02b-slide-card { border-radius: 16px; padding: var(--space-28) var(--space-24) var(--space-24); }
  .s-02b-rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); margin-top: var(--space-32); }
  .s-02b-on .s-02b-star:nth-child(2), .s-02b-on .s-02b-star:nth-child(3) { margin-top: 0; }
  .s-02b-on .s-02b-back { height: 26vh; margin-top: -12vh; }
  .s-02b-coda { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); }
}

@media (max-width: 380px), (max-height: 700px) and (max-width: 734px) {
  .s-02b-on .s-02b-voice-title { font-size: 30px; }
  .s-02b-on .s-02b-voice-inner .s-02b-head { display: none; }
  .s-02b-on .s-02b-rows { margin-top: var(--space-24); gap: var(--space-16); }
  .s-02b-on .s-02b-row .s-02b-impact { font-size: 19px; line-height: 1.25; }
  .s-02b-on .s-02b-row { padding-top: var(--space-12); }
}

@media (forced-colors: active) { .s-02b-tline, .s-02b-impact, .s-02b-word, .s-02b-uline, .s-02b-stat-num { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } }

@media print {
  .s-02b-giant, .s-02b-entry-line, .s-02b-canvas, .s-02b-thread, .s-02b-back, .s-02b-ticks { display: none !important; }
}

/* ==== sections/03-trayectoria ==== */
/* 03 · Straight logarithmic zoom into the Security Council (sticky, three reading plateaus) + self-advancing gallery. */
.s-03-trayectoria { --s-03-phrase-size: var(--space-40); --s-03-phrase-leading: 1.1; --s-03-phrase-tracking: -.02em; --s-03-scene-top: var(--space-64); --s-03-scene-bottom: calc(var(--space-28) * 2); padding-block: var(--section-padding-story) 0; }
.s-03-header { padding-bottom: var(--space-64); }
.s-03-eyebrow { color: var(--color-text-secondary); margin-bottom: var(--space-24); }
.s-03-title { max-width: 16em; }
.s-03-skip { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-28); min-height: var(--space-40); }
.s-03-skip svg { flex-shrink: 0; }
/* Zoom scene. Without .s-03-live (no JS, reduced motion, print, too short a
   viewport) it is the complete static state: the photo, then the three steps. */
.s-03-trayectoria { --s-03-photo-radius: 22px; --s-03-top: calc(var(--nav-h) + var(--space-64)); --s-03-bottom: calc(var(--space-28) * 2); --s-03-credit-h: var(--space-48); }
.s-03-scene { position: relative; }
.s-03-stage { position: relative; }
.s-03-layout { width: var(--content-width); max-width: var(--content-max); margin-inline: auto; padding-bottom: var(--section-padding-story); }
.s-03-zoom { margin: 0; min-width: 0; }
.s-03-zoom-frame { position: relative; aspect-ratio: 3 / 2; overflow: clip; border-radius: var(--s-03-photo-radius); background: var(--surface-1); }
.s-03-zoom-image, .s-03-zoom-image img { display: block; width: 100%; height: 100%; }
.s-03-zoom-image img { object-fit: cover; object-position: 50% 50%; }
.s-03-zoom-credit { max-width: 40em; }
.s-03-caption { min-width: 0; margin-top: var(--space-64); }
.s-03-counter { display: none; }
.s-03-phrases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-48); }
.s-03-phrase { min-width: 0; }
.s-03-step { color: var(--color-text-secondary); margin-bottom: var(--space-20); font-family: var(--font-text); font-weight: var(--font-weight-medium); }
.s-03-phrase-title { color: var(--color-ink); font-family: var(--font-display); font-size: var(--s-03-phrase-size); line-height: var(--s-03-phrase-leading); font-weight: var(--font-weight-semibold); letter-spacing: var(--s-03-phrase-tracking); text-wrap: pretty; }
.s-03-phrase-detail { margin-top: var(--space-20); color: var(--color-text-secondary); font-size: var(--type-intro-size); line-height: var(--type-intro-lh); font-weight: var(--font-weight-regular); letter-spacing: var(--type-intro-ls); text-wrap: pretty; }
.s-03-press { margin: var(--space-24) 0 0; padding-top: var(--space-20); border-top: 1px solid var(--color-hairline); }
.s-03-press-source { color: var(--color-text-secondary); }
.s-03-press-source a { display: inline-flex; align-items: center; min-height: var(--space-32); }
.s-03-press-quote { margin: var(--space-4) 0 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--space-24); line-height: 1.25; font-weight: var(--font-weight-medium); letter-spacing: -.01em; }
.s-03-proof { margin-top: var(--space-12); }
/* Apple ink→grey gradient, only on the elements that hold the text themselves (their parents animate). */
.s-03-phrase-title, .s-03-role { width: fit-content; max-width: 100%; background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (forced-colors: active) { .s-03-phrase-title, .s-03-role { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } }
/* Live: a pinned stage, copy beside the photo, never over it. */
.s-03-scene.s-03-live { height: 400vh; height: 400svh; }
.s-03-live .s-03-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.s-03-live .s-03-layout { box-sizing: border-box; height: 100%; max-width: var(--content-max); padding: var(--s-03-top) 0 var(--s-03-bottom); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-64); align-items: center; align-content: center; }
/* A big 4:3 frame (~74 % of the usable height); the zoom happens inside it. */
.s-03-live .s-03-zoom { grid-column: 2; grid-row: 1; width: 100%; max-width: calc((100vh - var(--s-03-top) - var(--s-03-bottom)) * .74 * 4 / 3); max-width: calc((100svh - var(--s-03-top) - var(--s-03-bottom)) * .74 * 4 / 3); justify-self: end; }
.s-03-live .s-03-zoom-frame { aspect-ratio: 4 / 3; transform-origin: 50% 50%; }
/* Origin above Daniel's face: at full zoom both faces stay whole (measured on the 1536 source). */
.s-03-live .s-03-zoom-image img { transform-origin: 36% 6%; }

.s-03-live .s-03-caption { grid-column: 1; grid-row: 1; margin: 0; }
.s-03-live .s-03-counter { display: flex; align-items: center; gap: var(--space-12); color: var(--color-text-secondary); margin-bottom: var(--space-28); font-weight: var(--font-weight-medium); }
.s-03-counter-rule { position: relative; width: var(--space-64); height: 1px; background: var(--color-hairline); overflow: hidden; }
.s-03-counter-rule > span { position: absolute; inset: 0; background: var(--color-ink); transform: scaleX(0); transform-origin: left; }
.s-03-current { color: var(--color-ink); }
.s-03-live .s-03-phrases { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-03-live .s-03-phrase { grid-area: 1 / 1; will-change: transform, opacity; }
.s-03-live .s-03-phrase:not(.s-03-on) { pointer-events: none; }
/* The pulled-up stage overlaps the header's air: only its photo and copy take pointer events. */
.s-03-live .s-03-stage { pointer-events: none; }
.s-03-live .s-03-zoom, .s-03-live .s-03-caption { pointer-events: auto; }
/* Wide cards keep the evidence and the photograph together; no date axis. */
.s-03-carousel { --s-03-gutter: max(6.25vw, calc((100vw - var(--content-max)) / 2)); --s-03-card-width: min(87.5vw, 1100px); --s-03-role-size: var(--space-28); --s-03-role-leading: var(--space-32); padding-block: var(--section-padding-story) var(--space-64); background: var(--surface-1); scroll-margin-top: calc(var(--nav-h) + var(--space-24)); }
.s-03-gallery-header { margin-bottom: var(--section-header-gap); }
.s-03-gallery-header h3 { max-width: 17em; }
.s-03-viewport { width: var(--content-width); max-width: var(--content-max); margin-inline: auto; }
.s-03-viewport:focus:not(:focus-visible) { outline: none; }
.s-03-viewport:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.s-03-track { display: grid; gap: var(--space-32); }
.s-03-slide { min-width: 0; }
.s-03-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: var(--space-224); background: var(--surface-0); border-radius: var(--radius-card); overflow: clip; }
.s-03-card--text { grid-template-columns: minmax(0, 1fr); }
.s-03-card-media { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-28); }
.s-03-card-image { display: block; width: 100%; overflow: hidden; border-radius: var(--radius-nav-float); }
.s-03-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-03-card-media--consejo .s-03-card-image { aspect-ratio: 1284 / 1011; border-radius: var(--s-03-photo-radius); }
.s-03-card-media--consejo img { object-fit: contain; object-position: 50% 50%; }
.s-03-card-media--oij .s-03-card-image { aspect-ratio: 1; border-radius: var(--s-03-photo-radius); }
.s-03-card-media--oij img { object-fit: cover; object-position: 50% 50%; }
.s-03-card-media--habitat .s-03-card-image { aspect-ratio: 4 / 5; max-width: 360px; margin-inline: auto; }
.s-03-card-media--habitat img { object-position: 50% 42%; }
.s-03-card-media--malta .s-03-card-image { aspect-ratio: 4 / 3; border-radius: var(--s-03-photo-radius); }
.s-03-card-media--malta img { object-fit: cover; object-position: 50% 24%; }
.s-03-card-media--eslovaquia .s-03-card-image { aspect-ratio: 4 / 3; }
.s-03-card-media--eslovaquia img { object-fit: contain; object-position: 50% 50%; }
.s-03-credit { color: var(--color-text-secondary); margin-top: var(--space-12); }
.s-03-card-copy { padding: var(--space-48); display: flex; flex-direction: column; align-items: flex-start; }
.s-03-number { color: var(--color-text-secondary); font-size: var(--type-small-size); line-height: var(--type-small-lh); margin-bottom: var(--space-28); }
.s-03-role { font-size: var(--s-03-role-size); line-height: var(--s-03-role-leading); font-weight: var(--font-weight-semibold); }
.s-03-description { color: var(--color-text-secondary); font-size: var(--type-body-size); line-height: var(--type-body-lh); margin-top: var(--space-20); }
.s-03-source-note { color: var(--color-text-secondary); margin-top: var(--space-8); }
.s-03-links { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-28); padding-top: var(--space-28); margin-top: auto; }
.s-03-link { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--space-40); }
.s-03-link svg { flex-shrink: 0; }
.s-03-links--inline { display: block; }
.s-03-link--wrapping { display: inline; }
.s-03-link-tail { white-space: nowrap; }
.s-03-link-tail svg { display: inline-block; vertical-align: middle; }
.s-03-carousel.s-03-enhanced .s-03-viewport { width: 100%; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-03-gutter); scrollbar-width: none; touch-action: pan-y pinch-zoom; }
.s-03-carousel.s-03-enhanced .s-03-viewport::-webkit-scrollbar { display: none; }
.s-03-carousel.s-03-enhanced .s-03-track { display: flex; gap: var(--space-24); width: max-content; padding: var(--space-4) var(--s-03-gutter); padding-inline-end: calc(100vw - var(--s-03-card-width) - var(--s-03-gutter)); }
.s-03-carousel.s-03-enhanced .s-03-slide { width: var(--s-03-card-width); flex: 0 0 auto; scroll-snap-align: start; }
.s-03-carousel.s-03-enhanced .s-03-card { min-height: 560px; }
.s-03-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-8); margin: var(--space-32) auto 0; width: fit-content; padding: var(--space-8); border-radius: var(--radius-pill-track); background: var(--color-control-gray); }
.s-03-dots { display: flex; align-items: center; padding-inline: var(--space-8); }
/* Each dot is a button: 44 px tall, 28 px apart, its tap area widened to 44 px with ::before (a neighbour never covers a dot's centre). */
.s-03-dot { position: relative; display: flex; align-items: center; justify-content: center; width: var(--space-28); height: calc(var(--space-40) + var(--space-4)); padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill); }
.s-03-dot::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--space-8)); }
.s-03-dot.s-03-active { width: calc(var(--space-48) + var(--space-20)); }
.s-03-dot:focus:not(:focus-visible) { outline: none; }
.s-03-dot:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--space-8)); }
.s-03-dot-bar { display: block; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background: var(--color-steel); overflow: hidden; }
.s-03-dot.s-03-active .s-03-dot-bar { width: var(--space-48); background: var(--surface-0); }
.s-03-dot:hover .s-03-dot-bar { background: var(--color-text-secondary); }
.s-03-dot.s-03-active:hover .s-03-dot-bar { background: var(--surface-0); }
.s-03-dot-bar > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-ink); border-radius: inherit; }
.s-03-pause { min-width: var(--space-96); min-height: var(--space-48); padding-inline: var(--space-16); border-radius: var(--radius-pill); display: flex; justify-content: center; align-items: center; gap: var(--space-8); background: var(--surface-0); }
.s-03-pause:hover { background: var(--surface-2); }
.s-03-pause svg { flex-shrink: 0; }
.s-03-play-icon { display: none; }
.s-03-pause[aria-pressed="true"] .s-03-play-icon { display: block; }
.s-03-pause[aria-pressed="true"] .s-03-pause-icon { display: none; }
.s-03-today { padding-block: var(--space-96) 0; display: grid; grid-template-columns: 1fr 3fr; column-gap: var(--space-64); }
/* 03→04 hinge: the fine line under «Hoy» is the section's last edge; the 04 grey curtain opens from it. */
.s-03-hinge { grid-column: 1 / -1; display: block; height: 1px; margin-top: var(--space-64); background: var(--color-hairline); transform-origin: 50% 50%; }
/* 02→03 bridge: the title's second line travels in from the 02 signature (FLIP, transform/opacity only). */
.s-03-bridge, .s-03-lead { display: inline-block; }
.s-03-lead-line { display: block; }
.s-03-today-label { color: var(--color-text-secondary); padding-top: var(--space-8); }
.s-03-today-copy { max-width: 26em; }
.s-03-today-content { min-width: 0; }
.s-03-today-link { margin-top: var(--space-24); }
@media (max-width: 1068px) {
  .s-03-trayectoria { --s-03-phrase-size: var(--space-32); }
  .s-03-phrases { grid-template-columns: minmax(0, 1fr); max-width: 40em; }
  .s-03-live .s-03-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-40); }
  .s-03-card-copy { padding: var(--space-32); }
  .s-03-carousel.s-03-enhanced .s-03-card { min-height: 520px; }
}
@media (max-width: 734px) {
  /* Mobile entry: compact, the photo arrives right after «Ver los cargos». */
  .s-03-trayectoria { padding-top: var(--space-64); }
  .s-03-header { padding-bottom: var(--space-24); }
  .s-03-carousel { padding-top: var(--space-40); }
  .s-03-title { font-size: var(--type-headline-size); line-height: var(--type-headline-lh); letter-spacing: var(--type-headline-ls); }
  .s-03-title br { display: none; }
  .s-03-trayectoria { --s-03-phrase-size: var(--space-28); --s-03-photo-radius: 16px; --s-03-credit-h: var(--space-32); }
  .s-03-caption { margin-top: var(--space-40); }
  /* Mobile scene: big photo at 20 px margins just under the nav; counter and phrase below it, never over it. */
  /* Centred in the useful height (between the nav and the bottom edge): equal air above and below. */
  .s-03-live .s-03-layout { height: 100%; width: 100%; max-width: none; padding: var(--nav-h) var(--space-20) 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
  .s-03-live .s-03-zoom { max-width: none; }
  .s-03-live .s-03-zoom-frame { aspect-ratio: 4 / 3; }
  .s-03-live .s-03-zoom-image img { transform-origin: 36% 6%; }
  .s-03-live .s-03-zoom-credit { margin-top: var(--space-8); }
  .s-03-live .s-03-caption { margin-top: var(--space-20); padding-inline: max(0px, calc(6.25vw - var(--space-20))); }
  .s-03-live .s-03-counter { margin-bottom: var(--space-12); }
  .s-03-live { --s-03-phrase-size: var(--space-24); --s-03-phrase-leading: 1.16; }
  .s-03-live .s-03-press { margin-top: var(--space-16); padding-top: var(--space-12); }
  .s-03-live .s-03-press-quote { font-size: var(--space-20); }
  .s-03-live .s-03-proof { margin-top: var(--space-4); }
  .s-03-live .s-03-phrase-detail { margin-top: var(--space-12); }
  .s-03-step { margin-bottom: var(--space-16); }
  .s-03-phrase-detail { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); margin-top: var(--space-16); }
  .s-03-press-quote { font-size: var(--type-title-size); }
  .s-03-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content 1fr; }
  .s-03-card-media { padding: var(--space-20) var(--space-20) 0; }
  .s-03-card-media--consejo { justify-content: flex-start; padding-top: var(--space-24); }
  .s-03-card-image { border-radius: var(--radius-nav-float); }
  .s-03-card-media--habitat .s-03-card-image { max-width: 220px; }
  .s-03-card-copy { padding: var(--space-24); }
  .s-03-number { margin-bottom: var(--space-20); }
  .s-03-description { margin-top: var(--space-16); }
  .s-03-carousel.s-03-enhanced .s-03-card { min-height: 680px; height: 100%; }
  .s-03-carousel.s-03-enhanced .s-03-track { align-items: stretch; gap: var(--space-16); }
  .s-03-carousel.s-03-enhanced .s-03-slide { width: 87.5vw; }
  /* Mobile cards: 20 px gutters with a deliberate 32 px peek of the next card; every photo fills the card at 4:3 with 16 px corners;
     the card is as tall as the tallest content (flex stretch), never a fixed height. */
  .s-03-carousel { --s-03-gutter: var(--space-20); --s-03-card-width: calc(100vw - var(--space-64)); }
  .s-03-carousel.s-03-enhanced .s-03-track { gap: var(--space-12); }
  .s-03-carousel.s-03-enhanced .s-03-slide { width: var(--s-03-card-width); display: flex; }
  .s-03-carousel.s-03-enhanced .s-03-card { min-height: 0; height: auto; flex: 1 1 auto; }
  .s-03-card { display: flex; flex-direction: column; }
  .s-03-card-media, .s-03-card-media--consejo { display: block; padding: var(--space-16) var(--space-16) 0; }
  .s-03-card-media .s-03-card-image, .s-03-card-media--habitat .s-03-card-image { width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--s-03-photo-radius); }
  .s-03-card-media .s-03-card-image img { object-fit: cover; }
  .s-03-card-media--consejo img { object-position: 50% 80%; }
  .s-03-card-media--oij img { object-position: 50% 20%; transform: scale(1.1); transform-origin: 40% 30%; }
  .s-03-card-media--habitat img { object-position: 50% 20%; }
  .s-03-card-media--malta img { object-position: 50% 24%; }
  .s-03-card-media--eslovaquia img { object-position: 50% 50%; }
  .s-03-card-media .s-03-credit { margin-top: var(--space-8); }
  .s-03-card-copy { padding: var(--space-20) var(--space-16) var(--space-24); }
  .s-03-number { margin-bottom: var(--space-12); }
  .s-03-description { margin-top: var(--space-12); }
  .s-03-links { margin-top: 0; padding-top: var(--space-16); }
  /* Mobile controls: icon-only Pause (its aria-label names it), so dots + Pause fit 320 with air. */
  .s-03-pause { min-width: var(--space-48); width: var(--space-48); padding: 0; }
  .s-03-pause-label { display: none; }
  .s-03-today { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); padding-top: var(--space-64); }
  .s-03-hinge { margin-top: var(--space-24); }
  .s-03-today-copy { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); }
}
@media (max-width: 734px) and (max-height: 720px) {
  /* Short phones: a 3:2 frame and a smaller phrase keep the scene pinned instead of static. */
  .s-03-live .s-03-zoom-frame { aspect-ratio: 3 / 2; }
  .s-03-live .s-03-zoom-image img { transform-origin: 40% 6%; }
  .s-03-live .s-03-caption { margin-top: var(--space-16); }
  .s-03-live .s-03-counter { margin-bottom: var(--space-8); }
  .s-03-live { --s-03-phrase-size: var(--space-20); --s-03-phrase-leading: 1.2; }
  .s-03-live .s-03-phrase-detail { font-size: 15px; line-height: 1.4; margin-top: var(--space-8); }
  .s-03-live .s-03-press { margin-top: var(--space-12); padding-top: var(--space-8); }
  .s-03-live .s-03-press-source a { min-height: var(--space-24); }
  .s-03-live .s-03-press-quote { font-size: 17px; }
  .s-03-live .s-03-proof { min-height: var(--space-32); }
}
@media (max-width: 360px) {
  .s-03-card-copy { padding: var(--space-24) var(--space-20); }
  .s-03-card-media { padding-inline: var(--space-16); }
  .s-03-dots { padding-inline: var(--space-4); }
  .s-03-dot { width: var(--space-24); }
  .s-03-carousel { --s-03-role-size: var(--space-24); --s-03-role-leading: var(--space-28); }
  .s-03-description { font-size: 15px; line-height: 1.47; }
  .s-03-links { font-size: 15px; }
  .s-03-dot::before { inset: 0 calc(-1 * var(--space-8) - 2px); }
  .s-03-dot.s-03-active { width: calc(var(--space-48) + var(--space-16)); }
}
@media (prefers-reduced-motion: reduce) {
  .s-03-scene.s-03-live { height: auto; }
  .s-03-live .s-03-stage { position: relative; height: auto; }
  .s-03-zoom-frame, .s-03-zoom-image img, .s-03-zoom-credit, .s-03-phrase { transform: none !important; opacity: 1 !important; }
  .s-03-controls { display: none; }
}
@media print {
  .s-03-phrase-title, .s-03-role { -webkit-text-fill-color: var(--color-ink); }
  .s-03-scene.s-03-live { height: auto; }
  .s-03-live .s-03-stage { position: relative; height: auto; }
  .s-03-zoom-frame, .s-03-zoom-image img, .s-03-zoom-credit, .s-03-phrase { transform: none !important; opacity: 1 !important; }
  .s-03-carousel.s-03-enhanced .s-03-viewport { width: 100%; overflow: visible; }
  .s-03-carousel.s-03-enhanced .s-03-track { display: grid; width: 100%; padding: 0; }
  .s-03-carousel.s-03-enhanced .s-03-slide { width: 100%; break-inside: avoid; }
  .s-03-carousel.s-03-enhanced .s-03-card { min-height: 0; }
  .s-03-controls, .s-03-skip { display: none; }
}
/* Peeking images remain visible; clipped copies are absent from focus and AT. */
@media screen {
  .s-03-carousel.s-03-enhanced .s-03-slide:not(.s-03-active) { visibility: hidden; }
  .s-03-carousel.s-03-enhanced .s-03-slide:not(.s-03-active) .s-03-card-media { visibility: visible; }
  .s-03-carousel.s-03-enhanced .s-03-slide:not(.s-03-active) .s-03-credit { visibility: hidden; }
}

/* ==== sections/04-aporta ==== */
/* Static reading remains complete without JavaScript and with reduced motion. */
.s-04-aporta { --s-04-safe-top: var(--space-64); --s-04-safe-bottom: calc(var(--space-48) + var(--space-8)); padding-top: var(--section-padding-story); }
.s-04-heading { max-width: 1100px; }
.s-04-header { max-width: 980px; margin: 0 auto var(--space-48); text-align: center; }
.s-04-eyebrow { color: var(--color-text-secondary); margin-bottom: var(--space-16); }
.s-04-title { font-size: var(--type-display-size); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); }
.s-04-stage { position: static; height: auto; overflow: visible; padding-bottom: var(--space-64); }
.s-04-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40); }
.s-04-card { min-width: 0; }
.s-04-photo { position: relative; border-radius: var(--radius-card); isolation: isolate; }
.s-04-photo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--color-action) 35%, var(--surface-0)); opacity: 0; filter: blur(var(--space-24)); pointer-events: none; z-index: -1; }
.s-04-image { aspect-ratio: 4 / 5; border-radius: inherit; }
.s-04-image picture, .s-04-image img { display: block; width: 100%; height: 100%; }
.s-04-image img { object-fit: cover; border-radius: inherit; }
.s-04-aporta.s-04-animated .s-04-image::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-1); opacity: var(--s-04-dim, 0); pointer-events: none; }
.s-04-photo--vivienda img { object-position: 50% 45%; }
/* Preserve both complete heads; a vertical crop cannot contain this source. */
.s-04-photo--europa .s-04-image { aspect-ratio: 1; }
.s-04-photo--europa img { object-position: 100% 35%; }
.s-04-photo--jovenes .s-04-image { aspect-ratio: 123 / 100; }
.s-04-photo--jovenes img { object-position: 0% 62%; }
.s-04-image--espana { aspect-ratio: 4 / 3; }
.s-04-photo--espana img { object-position: 50% 78%; }
.s-04-photo-label { display: flex; flex-wrap: wrap; align-content: start; justify-content: space-between; gap: var(--space-4) var(--space-8); padding: var(--space-12) var(--space-4) 0; color: var(--color-text-secondary); }
.s-04-photo-label span { white-space: nowrap; }
.s-04-credit { flex: 1 0 100%; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }
.s-04-overview { display: none; }
.s-04-copy { padding-top: var(--space-24); }
.s-04-index { color: var(--color-link); margin-bottom: var(--space-12); }
.s-04-card-title { margin-bottom: var(--space-16); }
.s-04-body { color: var(--color-text-secondary-alt); }
.s-04-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: var(--space-48); }
.s-04-steps { display: flex; flex-shrink: 0; gap: var(--space-8); }
.s-04-step { width: var(--globalnav-height); min-height: var(--space-48); display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); align-items: flex-start; font-size: var(--type-caption-size); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.s-04-step-track { width: 100%; height: 2px; background: var(--color-control-gray); position: relative; }
.s-04-step-track::after { content: ""; position: absolute; inset: 0; background: var(--color-action); transform: scaleX(0); transform-origin: left; }
.s-04-step[aria-current] { color: var(--color-link); }
.s-04-step[aria-current] .s-04-step-track::after { transform: scaleX(1); }
.s-04-skip { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-8); color: var(--color-link); min-height: var(--space-48); font-size: var(--type-caption-size); }
.s-04-skip svg { flex: 0 0 auto; }
/* Plateau titles carry the house ink→grey gradient, on the leaf h3 itself. */
.s-04-card-title { background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (forced-colors: active) { .s-04-card-title { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } }
/* Borders with the neighbours (scroll-tied, reversible; final state without JS).
   03→04: the grey band opens downward from the 03 «Hoy» line; the heading rises
   inside the opening. 04→05: the band's lower edge becomes a horizon curve
   that lifts as 05 arrives. */
.s-04-aporta { isolation: isolate; overflow-x: clip; }
.s-04-edge { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; }
.s-04-edge--in { top: -100vh; height: 200vh; }
.s-04-edge--out { bottom: -100vh; height: 200vh; }
.s-04-aporta.s-04-curtain { background: transparent; }
.s-04-aporta.s-04-curtain::before { content: ""; position: absolute; left: 0; right: 0; top: var(--s-04-band-top, 0px); bottom: 0; z-index: -1; background: var(--surface-1); clip-path: inset(0 0 var(--s-04-band-cut, 0px) 0); pointer-events: none; }
.s-04-horizon { position: absolute; left: -30%; right: -30%; bottom: -1px; height: 120px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--surface-0); transform: translateY(calc((1 - var(--s-04-rise, 0)) * 101%)); pointer-events: none; z-index: 0; }
/* Quotes: one lead quote in large type, then two in a tidy grid of cards.
   Separated from the scene by air; the words rise in a scroll-tied cascade. */
.s-04-quotes { position: relative; padding-top: calc(2 * var(--space-80)); padding-bottom: var(--space-32); }
.s-04-quotes-track { position: absolute; top: -100vh; bottom: 0; left: 0; width: 1px; pointer-events: none; }
.s-04-quote { margin: 0; position: relative; }
.s-04-quote-text { color: var(--color-ink); text-wrap: pretty; }
.s-04-quote--lead { max-width: 980px; padding-top: var(--space-64); }
.s-04-quote--lead::before, .s-04-quote--card::before { content: "\201C"; position: absolute; left: -0.04em; top: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-hairline); pointer-events: none; }
.s-04-quote--lead::before { font-size: 120px; top: -12px; }
.s-04-quote--lead .s-04-quote-text { font-family: var(--font-display); font-size: var(--type-headline-size); line-height: var(--type-headline-lh); letter-spacing: var(--type-headline-ls); font-weight: var(--font-weight-semibold); }
.s-04-quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-80); }
.s-04-quote--card { background: var(--surface-0); border-radius: var(--radius-card); padding: var(--space-80) var(--space-40) var(--space-40); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32); }
.s-04-quote--card::before { font-size: 72px; left: var(--space-40); top: var(--space-24); }
.s-04-quote--card .s-04-quote-text { font-family: var(--font-display); font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh); letter-spacing: var(--type-card-title-ls); font-weight: var(--font-weight-semibold); }
.s-04-source { color: var(--color-text-secondary); margin-top: var(--space-24); display: flex; align-items: center; gap: var(--space-12); }
.s-04-source::before { content: ""; width: var(--space-24); height: 1px; background: var(--color-steel); flex: 0 0 auto; }
.s-04-quote--card .s-04-source { margin-top: 0; }
.s-04-word { display: inline-block; }
/* A fixed camera with two independent reading zones; no grid while enhanced. */
.s-04-aporta.s-04-animated .s-04-track { height: 500svh; }
.s-04-aporta.s-04-animated .s-04-stage { position: sticky; top: calc(var(--nav-h) + var(--s-04-safe-top)); height: calc(100svh - var(--nav-h) - var(--s-04-safe-top) - var(--s-04-safe-bottom)); padding: 0; }
.s-04-aporta.s-04-animated .s-04-inner { position: relative; height: 100%; }
.s-04-aporta.s-04-animated .s-04-board { position: relative; display: block; height: 100%; perspective: 1600px; perspective-origin: 50% 50%; }
.s-04-aporta.s-04-animated .s-04-card { display: contents; }
.s-04-aporta.s-04-animated .s-04-photo { position: absolute; left: 50%; top: 50%; width: var(--s-04-fit-w); transform-origin: center; backface-visibility: hidden; pointer-events: none; }
.s-04-aporta.s-04-animated .s-04-photo-label { position: absolute; top: 100%; width: 100%; visibility: hidden; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }
.s-04-aporta.s-04-animated .s-04-copy { position: absolute; left: 64%; top: 0; width: 36%; padding: 0; }
.s-04-aporta.s-04-animated .s-04-card-title { font-size: var(--type-headline-sm-size); }
.s-04-aporta.s-04-animated .s-04-body { font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.s-04-aporta.s-04-animated .s-04-overview { position: absolute; left: 0; top: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); font-size: var(--type-body-size); line-height: var(--type-body-lh); text-align: center; }
.s-04-aporta.s-04-animated .s-04-controls { position: absolute; left: 64%; top: 0; width: 36%; }
.s-04-aporta.s-04-animated.s-04-fanning .s-04-controls { left: 50%; width: min(100%, 480px); margin-left: max(-240px, -50%); }
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="0"] .s-04-card:nth-child(1) .s-04-photo-label,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="1"] .s-04-card:nth-child(2) .s-04-photo-label,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="2"] .s-04-card:nth-child(3) .s-04-photo-label,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="3"] .s-04-card:nth-child(4) .s-04-photo-label { visibility: visible; }
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="0"] .s-04-card:nth-child(1) .s-04-photo::before,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="1"] .s-04-card:nth-child(2) .s-04-photo::before,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="2"] .s-04-card:nth-child(3) .s-04-photo::before,
.s-04-aporta.s-04-animated.s-04-reading[data-s-04-active="3"] .s-04-card:nth-child(4) .s-04-photo::before { opacity: .05; }
/* Desktop (≥1024): on the page grid, like 03 and 05. The heading stays above
   the scene, left-aligned; the scene puts the topic text in the left five
   columns, the deck in the right six and the control bar across the bottom. */
@media (min-width: 1024px) {
  .s-04-header { text-align: left; margin-left: 0; max-width: none; margin-bottom: var(--space-16); }
  .s-04-heading { max-width: var(--content-max); }
}
/* The heading lives in the scene's left column, pinned above the index/text. */
.s-04-aporta.s-04-wide .s-04-header { position: absolute; left: 0; top: 0; width: var(--s-04-left-w); margin: 0; z-index: 2; }
.s-04-aporta.s-04-wide .s-04-title { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 1279px), (max-height: 820px) {
  .s-04-aporta.s-04-wide .s-04-title { font-size: var(--type-section-size); line-height: var(--type-section-lh); letter-spacing: var(--type-section-ls); }
}
.s-04-aporta.s-04-wide .s-04-overview { width: var(--s-04-left-w); grid-template-columns: minmax(0, 1fr); gap: 0; text-align: left; font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-ls); font-weight: var(--font-weight-semibold); }
.s-04-aporta.s-04-wide .s-04-overview li { padding: var(--space-12) 0; border-top: 1px solid var(--color-hairline); color: var(--color-ink); }
.s-04-aporta.s-04-wide .s-04-overview li:last-child { border-bottom: 1px solid var(--color-hairline); }
.s-04-aporta.s-04-wide .s-04-copy { left: 0; width: var(--s-04-left-w); }
.s-04-aporta.s-04-wide .s-04-index { color: var(--color-text-secondary); margin-bottom: var(--space-16); font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.s-04-aporta.s-04-wide .s-04-card-title { font-size: var(--type-headline-size); line-height: var(--type-headline-lh); letter-spacing: var(--type-headline-ls); margin-bottom: var(--space-20); text-wrap: balance; }
.s-04-aporta.s-04-wide .s-04-body { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); color: var(--color-text-secondary); max-width: 30em; }
.s-04-aporta.s-04-animated.s-04-wide .s-04-controls,
.s-04-aporta.s-04-animated.s-04-fanning.s-04-wide .s-04-controls { left: 0; width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: nowrap; padding: 0 var(--space-8) 0 var(--space-20); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); background: var(--surface-0); }
.s-04-aporta.s-04-wide .s-04-steps { gap: var(--space-16); }
.s-04-aporta.s-04-wide .s-04-photo--vivienda .s-04-image { aspect-ratio: 1; }
.s-04-aporta.s-04-wide .s-04-photo--vivienda img { object-position: 50% 40%; }
.s-04-aporta.s-04-wide .s-04-photo-label { font-size: var(--type-small-size); line-height: var(--type-small-lh); padding-top: var(--space-12); }
@media (max-width: 1023px) {
    .s-04-aporta.s-04-animated .s-04-inner { width: calc(100% - var(--space-32)); max-width: 640px; }
  .s-04-aporta.s-04-animated .s-04-copy { left: 0; width: 100%; }
  .s-04-aporta.s-04-animated .s-04-card-title { font-size: var(--type-title-size); margin-bottom: var(--space-12); }
  .s-04-aporta.s-04-animated .s-04-body { font-size: var(--type-small-size); line-height: var(--type-small-lh); }
  .s-04-aporta.s-04-animated .s-04-overview { grid-template-columns: minmax(0, 1fr); text-align: left; gap: var(--space-8); }
  .s-04-aporta.s-04-animated .s-04-controls,
  .s-04-aporta.s-04-animated.s-04-fanning .s-04-controls { left: 0; width: 100%; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-16); }
}
@media (max-width: 734px) {
  .s-04-horizon { height: 88px; left: -60%; right: -60%; }
  .s-04-quotes { width: calc(100% - 2 * var(--space-20)); padding-top: var(--space-96); }
  .s-04-quote--lead { padding-top: var(--space-48); }
  .s-04-quote--lead::before { font-size: 88px; top: -10px; }
  .s-04-quote--lead .s-04-quote-text { font-size: var(--type-headline-xl-size); line-height: var(--type-headline-xl-lh); letter-spacing: var(--type-headline-xl-ls); }
  .s-04-quote-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-48); }
  .s-04-quote--card { padding: var(--space-64) var(--space-24) var(--space-24); gap: var(--space-24); border-radius: var(--space-16); }
  .s-04-quote--card::before { font-size: 60px; left: var(--space-24); top: var(--space-16); }
  .s-04-quote--card .s-04-quote-text { font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh); }
  .s-04-header { margin-bottom: var(--space-32); text-align: left; }
  .s-04-title { max-width: 11em; }
  .s-04-board { grid-template-columns: minmax(0, 1fr); }
      /* Mobile polish: one 20px gutter, 16px photo corners, 15px reading copy. */
  .s-04-aporta { --s-04-gutter: var(--space-20); }
  .s-04-aporta .container, .s-04-aporta.s-04-animated .s-04-inner { width: calc(100% - 2 * var(--s-04-gutter)); }
  .s-04-photo { border-radius: var(--space-16); }
  .s-04-card-title { text-wrap: balance; }
  .s-04-aporta.s-04-animated .s-04-card-title { font-size: var(--type-title-size); line-height: var(--type-title-lh); }
  .s-04-aporta.s-04-animated .s-04-body { font-size: 15px; line-height: 1.4; }
  .s-04-aporta.s-04-animated .s-04-overview { font-size: 15px; gap: var(--space-4); }
  .s-04-aporta.s-04-animated .s-04-overview li { min-height: 24px; }
  .s-04-step, .s-04-skip { min-height: var(--globalnav-height); }
  /* Phone scene: the stage runs to 16px above the screen edge (photos keep far
     more than 56px); the list is the title, active in ink and the rest in grey. */
  .s-04-aporta { --s-04-safe-bottom: var(--space-16); }
  /* The heading is pinned inside the scene, so the stage starts under the nav. */
  .s-04-aporta.s-04-phone { --s-04-safe-top: var(--space-12); }
  .s-04-aporta.s-04-phone .s-04-header { position: absolute; left: 0; top: 0; width: 100%; margin: 0; z-index: 2; }
  .s-04-aporta.s-04-phone .s-04-photo::before { display: none; }
  .s-04-aporta.s-04-phone .s-04-eyebrow { margin-bottom: var(--space-4); }
  .s-04-aporta.s-04-phone .s-04-title { font-size: var(--type-headline-xl-size); line-height: var(--type-headline-xl-lh); letter-spacing: var(--type-headline-xl-ls); }
  .s-04-aporta.s-04-phone .s-04-photo--vivienda .s-04-image { aspect-ratio: 1; }
  .s-04-aporta.s-04-phone .s-04-photo--vivienda img { object-position: 50% 40%; }
  .s-04-aporta.s-04-phone .s-04-index,
  .s-04-aporta.s-04-phone .s-04-card-title { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; }
  .s-04-aporta.s-04-phone .s-04-overview { gap: 0; font-size: 17px; line-height: 24px; letter-spacing: var(--type-body-ls); }
  .s-04-aporta.s-04-phone .s-04-overview li { min-height: 0; color: var(--color-text-secondary); }
  .s-04-header { margin-bottom: var(--space-24); }
  .s-04-aporta.s-04-animated.s-04-phone .s-04-controls,
  .s-04-aporta.s-04-animated.s-04-fanning.s-04-phone .s-04-controls { gap: var(--space-4); justify-content: space-between; flex-wrap: nowrap; }
  /* Captions keep the text column's width even when a short screen shrinks the photo. */
  .s-04-aporta.s-04-phone .s-04-photo-label { left: 50%; width: var(--s-04-cap-w); margin-left: calc(var(--s-04-cap-w) / -2); text-align: center; justify-content: center; }
  .s-04-aporta.s-04-phone .s-04-steps { gap: 0; }
  .s-04-aporta.s-04-phone[data-s-04-active="0"] .s-04-overview li:nth-child(1),
  .s-04-aporta.s-04-phone[data-s-04-active="1"] .s-04-overview li:nth-child(2),
  .s-04-aporta.s-04-phone[data-s-04-active="2"] .s-04-overview li:nth-child(3),
  .s-04-aporta.s-04-phone[data-s-04-active="3"] .s-04-overview li:nth-child(4) { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
}
/* Short phones (320×640): a tighter list and controls on one line. */
@media (max-width: 734px) and (max-height: 700px) {
  .s-04-aporta.s-04-phone .s-04-overview { font-size: 15px; line-height: 20px; }
}
@media (max-width: 734px) and (max-height: 700px) {
  .s-04-aporta.s-04-short .s-04-photo .s-04-image { aspect-ratio: 4 / 3; }
  .s-04-aporta.s-04-short .s-04-photo--vivienda img { object-position: 50% 22%; }
  .s-04-aporta.s-04-short .s-04-photo--europa img { object-position: 100% 25%; }
}
@media (max-width: 359px) {
  .s-04-aporta.s-04-phone .s-04-skip svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-04-horizon { display: none; }
  .s-04-photo, .s-04-copy { transform: none !important; opacity: 1 !important; }
}
@media print {
  .s-04-card-title { -webkit-text-fill-color: #1d1d1f; }
  .s-04-horizon { display: none; }
  .s-04-aporta .s-04-controls { display: none !important; }
  .s-04-card { break-inside: avoid; }
}

/* ==== sections/05-conexiones ==== */
/* 05 · Eight verified encounters. The complete editorial list is the default. */
.s-05-conexiones { --s-05-photo-width: clamp(420px, 36vw, 560px); --s-05-globe-diameter: min(72svh, 46vw); --s-05-nav-clearance: 64px; --s-05-bottom-clearance: 56px; isolation: isolate; }
.s-05-stage { position: relative; height: auto; overflow: visible; }
.s-05-inner { position: relative; padding-block: var(--section-padding-story); }
.s-05-header { max-width: 1060px; }
.s-05-eyebrow { margin-bottom: var(--space-16); }
.s-05-title { max-width: 1060px; }
.s-05-intro { max-width: 692px; margin-top: var(--space-20); }
.s-05-world, .s-05-origin, .s-05-controls, .s-05-tunnel, .s-05-tunnel-backdrop, .s-05-finale { display: none; }
.s-05-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-64) var(--space-32); margin-top: var(--space-64); }
.s-05-stop { min-width: 0; padding: 2px; }
.s-05-sede { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.s-05-city { letter-spacing: var(--type-headline-ls); }
.s-05-institution { color: var(--color-text-secondary); margin-top: var(--space-4); min-height: 40px; }
.s-05-figure { margin-top: var(--space-16); }
.s-05-photo { width: 100%; aspect-ratio: var(--s-05-photo-ratio, 4 / 5); background: var(--surface-1); }
.s-05-photo picture, .s-05-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-05-photo--1 img { object-position: 46% 0%; transform: scale(1.1); transform-origin: 0 0; }
.s-05-photo--2 img { object-position: 51.5% 30%; }
.s-05-photo--4 { --s-05-photo-ratio: 4 / 3; }
.s-05-photo--4 img { object-position: 50% 0%; transform: none; }
.s-05-photo--6 img { object-position: 56.7% 35%; }
.s-05-photo--7 img { object-position: 59.5% 30%; }
.s-05-photo--8 { --s-05-photo-ratio: 4 / 3; }
.s-05-photo--8 img { object-position: 50% 0%; transform: none; }
.s-05-photo--9 img { object-position: 54.5% 40%; }
.s-05-photo--10 img { object-position: 46.6% 40%; filter: contrast(1.08) saturate(1.05); }
.s-05-caption { margin-top: var(--space-16); color: var(--color-text-secondary); text-wrap: pretty; }
.s-05-end { padding-bottom: var(--section-padding-story); }
.s-05-static-promise { max-width: 800px; margin-bottom: var(--space-48); }
.s-05-credit { color: var(--color-text-secondary); }

/* Shared scroll engine opts into the stage after checking available height. */
.s-05-enhanced { --s-05-photo-width: min(clamp(420px, 36vw, 560px), calc((100svh - 380px) * .8)); }
.s-05-enhanced .s-05-track { --s-05-timeline: 950svh; height: calc(var(--s-05-timeline) + var(--s-05-tail, 0px)); pointer-events: none; }
/* The scene's timeline keeps its original length; the tail after it holds the
   closing phrase while the next section rises beneath, then lets it go. */
.s-05-timeline, .s-05-probe { display: none; }
.s-05-enhanced .s-05-timeline { display: block; position: absolute; inset: 0 0 auto; height: var(--s-05-timeline); visibility: hidden; pointer-events: none; }
.s-05-enhanced .s-05-probe { display: block; position: absolute; top: -100svh; bottom: 0; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
.s-05-enhanced.s-05-conexiones { z-index: 1; margin-bottom: calc(-1 * var(--s-05-tail, 0px)); background: transparent; pointer-events: none; }
.s-05-enhanced .s-05-stage { pointer-events: auto; }
.s-05-enhanced .s-05-stage { position: sticky; top: 0; height: 100svh; overflow: clip; clip-path: inset(0); isolation: isolate; background: var(--surface-0); }
/* Keep the standard translucent navigation over its original white backing. */
.s-05-enhanced .s-05-stage::after { content: ''; position: absolute; inset: 0 0 auto; height: var(--nav-h); background: var(--surface-0); z-index: 9; pointer-events: none; }
.s-05-enhanced .s-05-inner { height: 100%; padding-block: 0; }
.s-05-enhanced .s-05-header { position: absolute; top: calc(var(--nav-h) + var(--s-05-nav-clearance)); left: 0; width: 100%; z-index: 3; pointer-events: none; transform-origin: left top; }
.s-05-enhanced .s-05-intro { max-width: 650px; }
/* The canvas spans the whole stage; JS anchors the globe to the container's left edge. */
.s-05-enhanced .s-05-world { display: block; position: absolute; width: 100vw; height: 100%; left: calc((100% - 100vw) / 2); top: 0; }
.s-05-canvas { width: 100%; height: 100%; max-width: none; }
.s-05-enhanced .s-05-origin { display: grid; gap: var(--space-8); position: absolute; top: 53%; left: var(--s-05-panel-x, auto); right: auto; width: 200px; }
.s-05-origin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-action); margin-bottom: var(--space-12); }
.s-05-origin > :first-of-type, .s-05-origin > :last-child { color: var(--color-text-secondary); }
.s-05-enhanced .s-05-stops { display: block; margin: 0; }
.s-05-enhanced .s-05-stop { position: absolute; left: var(--s-05-panel-x, auto); right: auto; top: 50%; width: var(--s-05-panel-w, var(--s-05-photo-width)); transform-origin: center; }
.s-05-enhanced .s-05-institution { display: none; }
/* Adapt width to the available height while retaining a true 4:5 photograph. */
.s-05-enhanced .s-05-stop .s-05-photo { height: auto; aspect-ratio: var(--s-05-photo-ratio, 4 / 5); }
.s-05-enhanced .s-05-figure { margin-top: var(--space-12); }
.s-05-enhanced .s-05-caption { margin-top: var(--space-12); }
.s-05-enhanced .s-05-controls { position: absolute; inset: auto 0 var(--s-05-bottom-clearance); display: flex; gap: var(--space-24); align-items: center; z-index: 8; background: var(--surface-0); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); padding-inline: var(--space-12); }
.s-05-controls[inert] { pointer-events: none; }
.s-05-position { min-width: 65px; }
.s-05-count { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.s-05-count-total { color: var(--color-text-secondary); }
.s-05-route { display: flex; gap: var(--space-4); align-items: center; }
.s-05-step { display: grid; place-items: center; width: 32px; height: 44px; }
.s-05-step::after { content: ''; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-hairline); }
.s-05-step[aria-current="step"]::after { width: 24px; background: var(--color-action); }
.s-05-static { display: inline-flex; gap: var(--space-8); align-items: center; color: var(--color-link); margin-left: auto; min-height: 44px; }
.s-05-control-short { display: none; }
.s-05-static:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.s-05-enhanced .s-05-static-promise { display: none; }
.s-05-enhanced .s-05-end { display: none; }

/* The outer sticky stage clips the scene. Keeping this inner volume unflattened
   lets each complete photograph occupy its own tilted plane in perspective. */
.s-05-enhanced .s-05-tunnel, .s-05-enhanced .s-05-tunnel-backdrop { display: block; position: absolute; inset: var(--nav-h) calc((100% - 100vw) / 2) 0; pointer-events: none; opacity: 0; }
.s-05-enhanced .s-05-tunnel-backdrop { background: #fff; z-index: 4; }
.s-05-enhanced .s-05-tunnel { perspective: 1200px; perspective-origin: 50% 50%; transform-style: preserve-3d; overflow: visible; z-index: 5; }
.s-05-flight { position: absolute; left: 50%; top: 50%; min-width: 0; min-height: 0; opacity: 0; backface-visibility: hidden; }
.s-05-flight[hidden] { display: none; }
.s-05-flight picture, .s-05-flight img { display: block; width: 100%; height: 100%; }
/* Corners come from the clip-path set per frame, so they stay true at every scale. */
.s-05-flight img { object-fit: cover; object-position: 50% 50%; transform: none; }
.s-05-enhanced .s-05-finale { display: grid; place-items: center; position: absolute; inset: 0; padding-block: calc(var(--nav-h) + var(--s-05-nav-clearance)) var(--s-05-bottom-clearance); overflow: clip; background: var(--surface-0); color: var(--color-ink); z-index: 7; clip-path: circle(0px at 50% 50%); }
.s-05-finale-photo { position: absolute; inset: calc(var(--nav-h) + var(--s-05-nav-clearance)) 90px 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); margin: 0; pointer-events: none; }
.s-05-finale-media { width: min(100%, calc((100svh - var(--nav-h) - var(--s-05-nav-clearance) - 56px - 64px) * 1536 / 1264)); aspect-ratio: 1536 / 1264; flex: 0 0 auto; overflow: hidden; border-radius: var(--radius-card); }
.s-05-finale-media picture, .s-05-finale-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.s-05-finale-credit { display: block; margin-top: var(--space-4); }
.s-05-finale-caption { max-width: 100%; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-secondary); text-align: center; text-wrap: pretty; }
.s-05-finale-inner { position: relative; width: var(--content-width); max-width: var(--content-max); text-align: center; }
.s-05-home { color: var(--color-text-secondary); margin-bottom: var(--space-32); }
.s-05-promise { font-size: clamp(56px, 8vw, 120px); line-height: 1.05; letter-spacing: -.03em; }
.s-05-promise-line { display: block; width: fit-content; position: relative; margin-inline: auto; }
.s-05-promise-last { color: var(--color-link); }
.s-05-beam { display: block; position: absolute; width: 2px; top: 9%; bottom: 0; left: 0; background: var(--color-link); }
.s-05-again { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-link); margin-top: var(--space-48); min-height: 44px; }

@media (min-width: 735px) and (max-width: 1068px) {
  .s-05-conexiones { --s-05-photo-width: clamp(300px, 40vw, 420px); }
  .s-05-enhanced { --s-05-photo-width: min(clamp(300px, 36vw, 420px), calc((100svh - 400px) * .8)); }
  .s-05-enhanced .s-05-city { font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh); }
}
@media (max-width: 1068px) {
  .s-05-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-05-step { width: 28px; }
}
@media (max-width: 734px) {
  .s-05-conexiones, .s-05-enhanced { --s-05-photo-width: 100%; --s-05-globe-diameter: min(44svh, 86vw); --s-05-nav-clearance: 64px; }
  .s-05-stops { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .s-05-stop { max-width: 360px; margin-inline: auto; }
  .s-05-title { font-size: var(--type-section-size); line-height: var(--type-section-lh); }
  .s-05-intro { font-size: var(--type-body-size); line-height: var(--type-body-lh); }
  .s-05-enhanced .s-05-track { --s-05-timeline: 1000svh; }
  .s-05-enhanced .s-05-eyebrow { font-size: var(--type-small-size); margin-bottom: var(--space-12); }
  .s-05-enhanced .s-05-intro { margin-top: var(--space-12); }
  .s-05-enhanced .s-05-origin { top: 70%; left: 0; right: auto; width: 100%; justify-items: center; text-align: center; }
  .s-05-origin-dot { margin-bottom: var(--space-4); }
  /* Portrait encounter card: the photograph spans the column, then the place,
     the name and the caption beneath it. Text never sits on the photograph. */
  .s-05-enhanced .s-05-stop { top: 46svh; left: 0; right: 0; width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: var(--space-8); align-items: start; }
  .s-05-enhanced .s-05-stop[hidden] { display: none; }
  .s-05-enhanced .s-05-location { grid-row: 2; text-align: left; margin-top: var(--space-4); }
  .s-05-enhanced .s-05-city { font-size: 28px; line-height: 32px; }
  .s-05-enhanced .s-05-institution { display: none; }
  .s-05-enhanced .s-05-sede { font-size: var(--type-caption-size); line-height: 16px; margin-bottom: 2px; }
  .s-05-enhanced .s-05-figure { display: contents; }
  .s-05-enhanced .s-05-stop .s-05-photo { grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: var(--space-16); }
  .s-05-enhanced .s-05-stop .s-05-photo img { object-position: 50% var(--s-05-face-y, 24%); transform: none; }
  .s-05-enhanced .s-05-caption { grid-row: 3; max-width: none; margin: 0; font-size: var(--type-small-size); line-height: 20px; text-align: left; align-self: start; }
  .s-05-enhanced .s-05-controls { gap: var(--space-12); flex-wrap: nowrap; justify-content: space-between; }
  .s-05-position { min-width: 42px; font-size: var(--type-caption-size); }
  .s-05-route { gap: 0; flex: 1; min-width: 0; }
  .s-05-step { width: auto; flex: 1; min-width: 0; }
  .s-05-step[aria-current="step"]::after { width: 16px; }
  .s-05-static { font-size: var(--type-caption-size); min-height: 44px; flex: 0 0 auto; margin: 0; }
  .s-05-static svg, .s-05-control-full { display: none; }
  .s-05-control-short { display: inline; }
  .s-05-finale-photo { inset-inline: var(--space-24); }
  .s-05-finale-media { width: min(100%, calc((100svh - var(--nav-h) - var(--s-05-nav-clearance) - 56px - 96px) * .8)); aspect-ratio: 4 / 5; }
  .s-05-finale-media img { object-position: 45% 40%; }
  .s-05-home { margin-bottom: var(--space-24); }
}
@media (min-width: 735px) and (max-height: 800px) {
  .s-05-enhanced { --s-05-photo-width: min(clamp(300px, 36vw, 420px), calc((100svh - 400px) * .8)); }
  .s-05-enhanced .s-05-city { font-size: var(--type-title-size); line-height: var(--type-title-lh); }
  .s-05-enhanced .s-05-institution { display: none; }
  .s-05-enhanced .s-05-figure { margin-top: var(--space-12); }
}
@media print {
  .s-05-eyebrow, .s-05-intro { opacity: 1 !important; }
  .s-05-enhanced .s-05-track { height: auto; }
  .s-05-enhanced .s-05-stage { position: static; height: auto; overflow: visible; clip-path: none; isolation: auto; }
  .s-05-enhanced .s-05-stage::after { display: none; }
  .s-05-enhanced .s-05-header, .s-05-enhanced .s-05-stop { position: static; width: auto; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .s-05-enhanced .s-05-stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); margin-top: var(--space-32); }
  .s-05-enhanced .s-05-stop[hidden] { display: block !important; }
  .s-05-enhanced .s-05-inner { padding-block: var(--space-32); }
  .s-05-enhanced .s-05-stop .s-05-photo { width: 100%; height: auto; aspect-ratio: var(--s-05-photo-ratio, 4 / 5); clip-path: none !important; }
  .s-05-enhanced .s-05-stop { display: block; }
  .s-05-enhanced .s-05-figure { display: block; }
  .s-05-world, .s-05-origin, .s-05-controls, .s-05-tunnel, .s-05-tunnel-backdrop, .s-05-finale { display: none !important; }
}

/* ==== sections/06-cercania ==== */
/* 06 · Editorial bento: two rows of four photographs, alternating wide and narrow.
   In each row one photo sets the height by its ratio; the other fills it, so both
   frames and both captions line up (subgrid). */
.s-06-cercania { --s-06-photo-radius: var(--radius-card); --s-06-gutter: var(--space-24); isolation: isolate; }
.s-06-track { position: absolute; top: -100vh; right: 0; bottom: 0; left: 0; pointer-events: none; }
.s-06-header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-06-gutter); align-items: end; margin-bottom: var(--space-80); }
.s-06-heading { grid-column: 1 / 7; min-width: 0; }
.s-06-eyebrow { margin-bottom: var(--space-20); }
.s-06-title { max-width: 8em; text-wrap: balance; }
.s-06-intro { grid-column: 8 / 13; color: var(--color-text-secondary); text-wrap: pretty; }
.s-06-grid { display: grid; gap: var(--space-64); }
.s-06-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s-06-gutter); }
.s-06-card { min-width: 0; position: relative; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: var(--space-16); margin: 0; }
.s-06-card--b { grid-column: 1 / 8; }
.s-06-card--e { grid-column: 8 / 13; }
.s-06-card--c { grid-column: 1 / 5; }
.s-06-card--g { grid-column: 5 / 13; }
.s-06-visual { position: relative; min-width: 0; min-height: 0; border-radius: var(--s-06-photo-radius); isolation: isolate; }
.s-06-visual::before { content: ""; position: absolute; inset: 0; border: var(--space-8) solid var(--color-link); border-radius: inherit; filter: blur(var(--space-8)); opacity: 0.05; pointer-events: none; }
.s-06-crop { position: relative; z-index: 1; border-radius: inherit; }
.s-06-photo { display: block; width: 100%; height: 100%; }
.s-06-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The leading photo of each row sets its height... */
.s-06-card--e .s-06-crop { aspect-ratio: 8 / 7; }
.s-06-card--g .s-06-crop { aspect-ratio: 4 / 3; }
/* ...and its partner fills it without adding height of its own. */
.s-06-card--fill .s-06-visual, .s-06-card--fill .s-06-crop { height: 100%; }
.s-06-card--fill .s-06-photo { position: absolute; inset: 0; }
/* Crops: every face whole. ECOSOC keeps the officer's face inside the frame. */
.s-06-card--b .s-06-photo img { object-position: 60% 78%; }
.s-06-card--e .s-06-photo img { object-position: 30% 50%; }
.s-06-card--c .s-06-photo img { object-position: 45% 0%; }
.s-06-card--g .s-06-photo img { object-position: 50% 60%; }
.s-06-caption { color: var(--color-text-secondary); padding-inline: var(--space-4); max-width: 46em; text-wrap: pretty; }
/* The credit sits right under the last photo; no empty cushion closes the section. */
.s-06-cercania { padding-bottom: var(--space-64); }
.s-06-credit { color: var(--color-text-secondary); margin-top: var(--space-16); }

@media (max-width: 1068px) {
  .s-06-heading { grid-column: 1 / -1; }
  .s-06-intro { grid-column: 1 / 10; margin-top: var(--space-24); }
}
@media (max-width: 734px) {
  .s-06-header { display: block; margin-bottom: var(--space-48); }
  .s-06-title { font-size: var(--type-hero-size); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); }
  .s-06-eyebrow { margin-bottom: var(--space-16); }
  .s-06-grid { gap: var(--space-40); }
  .s-06-row { display: contents; }
  .s-06-card { grid-column: auto; grid-row: auto; grid-template-rows: auto auto; row-gap: var(--space-12); }
  .s-06-card--fill .s-06-visual, .s-06-card--fill .s-06-crop { height: auto; }
  .s-06-card--fill .s-06-photo { position: static; }
  .s-06-card--b .s-06-crop { aspect-ratio: 3 / 2; }
  .s-06-card--c .s-06-crop { aspect-ratio: 2 / 3; }
  .s-06-card--e .s-06-crop { aspect-ratio: 1; }
  .s-06-card--g .s-06-crop { aspect-ratio: 4 / 3; }
  .s-06-caption { padding-inline: 0; }
  /* Mobile polish: 20px gutter, 16px corners, no portrait taller than 4:5. */
  .s-06-cercania { --s-06-photo-radius: var(--space-16); }
  .s-06-container { width: calc(100% - var(--space-40)); }
  .s-06-title { text-wrap: balance; }
  .s-06-card--c .s-06-crop { aspect-ratio: 4 / 5; }
  .s-06-card--c .s-06-photo img { object-position: 45% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .s-06-card { opacity: 1 !important; transform: none !important; }
  .s-06-visual { clip-path: none !important; }
}
@media print {
  .s-06-track { display: none; }
  .s-06-row { display: contents; }
  .s-06-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .s-06-card { grid-column: auto; grid-row: auto; grid-template-rows: auto auto; opacity: 1 !important; transform: none !important; break-inside: avoid; }
  .s-06-card--fill .s-06-photo { position: static; }
  .s-06-card--fill .s-06-crop { aspect-ratio: 4 / 3; height: auto; }
  .s-06-visual { clip-path: none !important; }
  .s-06-visual::before { display: none; }
}

/* ==== sections/07-medios ==== */
/* 07 · press. An open editorial list; each halo inherits its row contour. */
/* integrar.sh renames the root class to .s-07-medios in the fragment only, so the root selector names both. */
:is(.s-07-propuestas, .s-07-medios) { isolation: isolate; padding-top: var(--space-48); }
/* 07→08: no own background; the page white and the 08's fixed black layer show through, with no seam. */
:is(.s-07-propuestas, .s-07-medios) { background: transparent; }
/* 07→08: the 08 publishes --cl on :root (0 white, 1 black); the list's ink lightens with the blackout.
   The swap is compressed into --cl 0.3-0.7 so text spends little time grey on grey. */
:is(.s-07-propuestas, .s-07-medios) { --s-07-k: clamp(0%, calc((0.7 - var(--cl, 0)) * 250%), 100%); --s-07-ink: color-mix(in srgb, var(--color-ink) var(--s-07-k), var(--color-on-dark)); --s-07-black: color-mix(in srgb, var(--color-black) var(--s-07-k), var(--color-on-dark)); --s-07-muted: color-mix(in srgb, var(--color-text-secondary) var(--s-07-k), var(--color-steel)); --s-07-link: color-mix(in srgb, var(--color-link) var(--s-07-k), var(--color-link-on-dark)); --s-07-line: color-mix(in srgb, var(--color-hairline) var(--s-07-k), var(--color-text-secondary-alt)); color: var(--s-07-ink); }
.s-07-title { color: var(--s-07-ink); }
.s-07-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* Base contributes nav + 12px; internal hashes/focus keep another 52px. */
:is(.s-07-propuestas, .s-07-medios) [id]:not(.s-07-anchor), .s-07-row { scroll-margin-top: var(--space-52); }
.s-07-header { gap: var(--space-20); margin-bottom: var(--space-76); }
.s-07-eyebrow { color: var(--s-07-muted); }
.s-07-title { max-width: 18ch; text-wrap: balance; }
.s-07-item { position: relative; }
.s-07-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--s-07-line); transform-origin: left center; transform: scaleX(var(--s-07-rule, 1)); }
.s-07-item:last-child::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--s-07-line); transform-origin: left center; transform: scaleX(var(--s-07-rule-end, 1)); transition: opacity var(--dur-base) var(--ease-house); }
/* The halo replaces the rules it touches, so the row reads as one lifted surface. */
.s-07-item::before { transition: opacity var(--dur-base) var(--ease-house); }
.s-07-item:hover::before, .s-07-item:hover + .s-07-item::before, .s-07-item:focus-within::before, .s-07-item:focus-within + .s-07-item::before { opacity: 0; }
.s-07-item:last-child:hover::after, .s-07-item:last-child:focus-within::after { opacity: 0; }
/* DVB.progress(track) runs from 0 to 1 as this row moves from 90vh to 65vh. */
.s-07-track { position: absolute; top: -90vh; left: 0; width: 1px; height: 125vh; pointer-events: none; visibility: hidden; }
.s-07-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr) auto; align-items: start; gap: var(--space-48); padding-block: var(--space-48); min-width: 0; border-radius: var(--radius-nav-float); color: var(--s-07-ink); text-decoration: none; }
.s-07-row::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--space-28)); transition: opacity var(--dur-base) var(--ease-house); border-radius: inherit; background: var(--color-black); opacity: 0; pointer-events: none; }
.s-07-row:hover { text-decoration: none; }
.s-07-row:hover::before, .s-07-row:focus-visible::before { opacity: 0.04; }
.s-07-row:focus-visible { outline-offset: var(--space-4); }
.s-07-source { min-width: 0; transform: translate3d(0, var(--s-07-rise, 0px), 0); opacity: var(--s-07-opacity, 1); }
.s-07-medium { max-width: 13ch; font-family: var(--font-display); font-size: clamp(var(--space-40), 4.4vw, var(--space-64)); font-weight: var(--font-weight-medium); line-height: var(--type-hero-lh); letter-spacing: -0.025em; color: var(--s-07-black); text-wrap: balance; }
.s-07-date { margin-top: var(--space-16); color: var(--s-07-muted); }
.s-07-headline { max-width: 34ch; padding-top: var(--space-8); font-size: var(--space-28); font-weight: var(--font-weight-medium); line-height: var(--type-title-lh); color: var(--s-07-ink); text-wrap: pretty; }
.s-07-read { display: inline-flex; align-items: center; padding-top: var(--space-4); font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: var(--font-weight-medium); color: var(--s-07-link); white-space: nowrap; }
.s-07-read-content { display: inline-flex; align-items: center; gap: var(--space-8); transition: transform var(--dur-base) var(--ease-house); }
.s-07-arrow { width: var(--space-24); height: var(--space-24); flex: none; }
.s-07-row:hover .s-07-read-content, .s-07-row:focus-visible .s-07-read-content { transform: translate3d(var(--space-4), 0, 0); }
@media (max-width: 1068px) {
  .s-07-row { column-gap: var(--space-32); }
}
@media (max-width: 734px) {
  :is(.s-07-propuestas, .s-07-medios) [id]:not(.s-07-anchor), .s-07-row { scroll-margin-top: var(--space-28); }
  :is(.s-07-propuestas, .s-07-medios) { padding-top: var(--space-32); }
  .s-07-header { margin-bottom: var(--space-48); }
  .s-07-title { font-size: var(--type-hero-size); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); max-width: 12ch; }
  .s-07-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding-block: var(--space-32); }
  .s-07-medium { max-width: none; text-wrap: pretty; }
  .s-07-date { margin-top: var(--space-8); }
  .s-07-headline { max-width: none; padding-top: 0; font-size: var(--type-title-size); }
  .s-07-row::before { inset: 0 calc(-1 * var(--space-12)); }
  .s-07-read { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s-07-item::before, .s-07-item:last-child::after { transform: scaleX(1) !important; }
  .s-07-source, .s-07-headline, .s-07-read { transform: none !important; opacity: 1 !important; }
  .s-07-row::before { opacity: 0; transition: none; }
  .s-07-read-content { transition: none; transform: none !important; }
}
@media print {
  .s-07-item::before, .s-07-item:last-child::after { transform: scaleX(1) !important; }
  .s-07-source, .s-07-headline, .s-07-read { transform: none !important; opacity: 1 !important; }
  .s-07-read-content { transform: none !important; }
  .s-07-row::before, .s-07-track { display: none; }
  .s-07-item { break-inside: avoid; }
}

/* ==== sections/08-cierre ==== */
/* 08 · The whole surface darkens before the closing composition enters. */
.s-08-cierre {
  padding: 0;
  background: var(--surface-dark);
  color: var(--color-on-dark);
}
.s-08-anchor { position: absolute; inset: 0 auto auto 0; }
.s-08-stage { position: relative; min-height: 100svh; isolation: isolate; }
.s-08-layout {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-64);
  padding-block: calc(var(--nav-h) + var(--space-64)) calc(var(--space-28) * 2);
}
.s-08-copy { position: relative; grid-column: 1; min-width: 0; }
.s-08-eyebrow { margin-bottom: var(--space-24); }
.s-08-title { margin: 0; font-size: clamp(44px, 4.8vw, 72px); line-height: 1.05; }
.s-08-line { display: block; }
.s-08-message {
  max-width: 19em;
  margin-top: var(--space-32);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-intro-lh);
  text-wrap: pretty;
  opacity: .86;
}
.s-08-purpose {
  margin-top: var(--space-24);
  color: inherit;
  opacity: .86;
}
.s-08-quote {
  font-family: var(--font-display);
  font-size: var(--space-28);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-title-lh);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.s-08-author { margin-top: var(--space-12); }
.s-08-portrait {
  position: relative;
  width: min(100%, calc((100svh - var(--nav-h) - var(--space-64) - var(--space-28) * 2 - var(--space-64)) * .8));
  max-width: calc(var(--space-224) * 2.5);
  min-width: 0;
  justify-self: end;
}
.s-08-photo-frame {
  position: relative;
  z-index: 3;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.s-08-image { display: block; width: 100%; height: 100%; }
.s-08-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* The left-biased origin keeps all eight faces inside this tighter crop. */
  transform: scale(1.17);
  transform-origin: 40% 0;
}
.s-08-caption {
  margin-top: var(--space-12);
  color: inherit;
  text-wrap: pretty;
}
.s-08-actions { display: flex; margin-top: var(--space-32); }
.s-08-contact { position: relative; z-index: 4; min-height: var(--globalnav-height); gap: var(--space-12); }
.s-08-contact svg { width: var(--space-20); height: var(--space-20); }
.s-08-press { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--globalnav-height); margin-top: var(--space-8); padding-inline: var(--space-16); border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); color: var(--color-ink); background: var(--surface-0); }
.s-08-press svg { width: var(--space-16); height: var(--space-16); }
.s-08-skip { position: absolute; left: calc((100% - min(var(--content-width), var(--content-max))) / 2); bottom: var(--space-8); z-index: 4; display: inline-flex; gap: var(--space-8); align-items: center; min-height: var(--globalnav-height); color: inherit; opacity: 0; pointer-events: none; }
.s-08-skip:focus-visible { opacity: 1; pointer-events: auto; background: var(--surface-dark); color: var(--color-on-dark); padding-inline: var(--space-12); }
.s-08-skip svg { width: var(--space-16); height: var(--space-16); }
/* Live scene: the whole screen goes dark at once. A fixed layer under every
   section (z-index -1) takes opacity = --s-08-night; this section turns
   transparent so the layer shows through it, and the same value is published
   as --cl on :root for the section above. The copy only enters on full contrast. */
.s-08-live {
  --s-08-night: 0;
  --s-08-photo: 0;
  --s-08-cap: 0;
  height: 240svh;
  background: transparent;
}
.s-08-live .s-08-stage { position: sticky; top: 0; height: 100svh; }
.s-08-live .s-08-layout { position: relative; z-index: 2; height: 100%; min-height: 0; }
.s-08-night { display: none; }
.s-08-live .s-08-night {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--surface-dark);
  opacity: var(--s-08-night);
  pointer-events: none;
}
.s-08-live .s-08-rise {
  --r: 0;
  opacity: var(--r);
  transform: translate3d(0, calc((1 - var(--r)) * var(--space-32)), 0);
}
.s-08-live .s-08-message { opacity: calc(var(--r) * .86); }
.s-08-live .s-08-purpose { opacity: calc(var(--r) * .86); }
/* Portrait on its own plane: it fades and scales in whole, only once the
   screen is past half dark, so it never floats as a ghost on the white. */
.s-08-live .s-08-portrait { z-index: 3; }
.s-08-live .s-08-photo-frame { opacity: var(--s-08-photo); transform: scale(calc(.92 + var(--s-08-photo) * .08)); transform-origin: 50% 60%; }
.s-08-live .s-08-caption { opacity: var(--s-08-cap); }
/* Tall content (phones): no pinned stage; the screen darkens while the
   section scrolls in and is fully dark before its top reaches the navigation. */
.s-08-flow { height: auto; }
.s-08-flow .s-08-stage { position: relative; height: auto; }
.s-08-flow .s-08-layout { height: auto; min-height: 100svh; }
.s-08-static { height: auto; background: var(--surface-dark); color: var(--color-on-dark); }
.s-08-static .s-08-stage { position: relative; height: auto; }
.s-08-static .s-08-layout { height: auto; min-height: 100svh; }
.s-08-static .s-08-night { display: none; }
@media (max-width: 1068px) {
  .s-08-layout { column-gap: var(--space-48); }
}
@media (max-width: 734px) {
  .s-08-layout { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; row-gap: var(--space-24); padding-block: calc(var(--nav-h) + var(--space-64)) calc(var(--space-28) * 2); }
  .s-08-eyebrow { margin-bottom: var(--space-16); }
  .s-08-title { font-size: clamp(var(--type-headline-size), 12vw, var(--type-hero-size)); }
  .s-08-message { max-width: 17em; margin-top: var(--space-20); }
  .s-08-portrait { width: 100%; max-width: none; justify-self: center; }
  .s-08-cierre:has(.s-08-actions, .s-08-press) .s-08-layout { row-gap: var(--space-20); }
}
@media (prefers-reduced-motion: reduce) {
  .s-08-cierre { height: auto; background: var(--surface-dark); color: var(--color-on-dark); }
  .s-08-cierre .s-08-stage { position: relative; height: auto; }
  .s-08-cierre .s-08-layout { min-height: 100svh; }
  .s-08-cierre .s-08-night { display: none; }
}
@media print {
  .s-08-cierre { height: auto; background: var(--surface-dark); }
  .s-08-cierre .s-08-night { display: none; }
  .s-08-cierre .s-08-stage { position: static; height: auto; min-height: 0; }
  .s-08-cierre .s-08-layout { min-height: 0; height: auto; padding-block: var(--space-32); }
  .s-08-cierre .s-08-skip { display: none; }
}

/* Harvey 30-oct («Esto muy grande»): cierre más contenido. */
.s-08-quote { font-size: clamp(18px, 1.6vw, 24px) !important; line-height: 1.4 !important; }

/* Owner 30-oct: «Es el momento…» on one line on desktop, two balanced lines on phones;
   the phrase and the quote carry a soft on-dark gradient (white → a faint steel blue),
   like Apple's Pro headlines. */
.s-08-cierre {
  --s-08-steel: color-mix(in srgb, var(--color-on-dark) 40%, color-mix(in srgb, var(--color-steel) 80%, var(--color-link-on-dark)));
  --s-08-grad: linear-gradient(100deg, var(--color-on-dark) 0%, var(--color-on-dark) 18%, var(--s-08-steel) 100%);
}
.s-08-message { max-width: none; white-space: nowrap; }
.s-08-message, .s-08-quote p {
  background-image: var(--s-08-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.s-08-quote { width: fit-content; max-width: 32em; }
@media (max-width: 1068px) {
  .s-08-message { white-space: normal; max-width: 19em; text-wrap: balance; }
}
@media (max-width: 734px) {
  .s-08-message { max-width: 17em; }
}
@media (forced-colors: active) {
  .s-08-message, .s-08-quote p { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}
/* A menu link to #contacto lands where the closing copy is complete (pinned track). */
.s-08-live:not(.s-08-flow) .s-08-anchor { top: calc(80svh + var(--nav-h) + 12px); }

/* ==== sections/99-pie ==== */
.s-99-pie {
  background: var(--surface-dark);
  color: var(--color-steel);
  border: 0;
  padding-block: var(--space-64) var(--space-32);
}

/* Dividers belong to the content width, never to the viewport edge. */
.s-99-pie::before, .s-99-pie::after { content: none; }

.s-99-inner {
  position: relative;
  width: var(--content-width);
  max-width: var(--content-max);
  padding-top: var(--space-32);
}

/* The signature line: drawn left to right as the footer arrives (--s-99-line). */
.s-99-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--btn-border);
  background: var(--color-text-secondary-alt);
  transform-origin: left center;
  transform: scaleX(var(--s-99-line, 1));
}

/* Columns rise in cascade after the line (--s-99-step per item, set by JS). */
.s-99-step {
  opacity: var(--s-99-step, 1);
  transform: translate3d(0, calc((1 - var(--s-99-step, 1)) * var(--space-16)), 0);
}

.s-99-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-20) var(--space-48);
  padding-bottom: var(--space-32);
}

.s-99-brand {
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  font-weight: var(--font-weight-semibold);
}

.s-99-brand-note {
  color: var(--color-steel);
  font-family: var(--font-text);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  letter-spacing: var(--type-small-ls);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.s-99-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-32);
}

.s-99-pie .s-99-social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--globalnav-height);
  color: var(--color-on-dark);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  letter-spacing: var(--type-small-ls);
}

.s-99-social:hover {
  color: var(--color-link-on-dark);
  text-decoration: none;
}

.s-99-social:hover span {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.s-99-network-icon {
  flex: 0 0 var(--space-20);
  width: var(--space-20);
  height: var(--space-20);
}

.s-99-arrow {
  flex: 0 0 var(--space-12);
  width: var(--space-12);
  height: var(--space-12);
  color: var(--color-steel);
}

.s-99-contact {
  margin-bottom: var(--space-16);
  overflow-wrap: anywhere;
}

.s-99-pie .s-99-contact-link {
  color: var(--color-on-dark);
}

.s-99-legal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-32);
  border-top: var(--btn-border) solid var(--color-ink);
  padding-block: var(--space-12) var(--space-24);
}

.s-99-disclosure {
  min-width: 0;
}

.s-99-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--globalnav-height);
  color: var(--color-on-dark);
  cursor: pointer;
  list-style: none;
}

.s-99-summary::-webkit-details-marker {
  display: none;
}

.s-99-summary::marker {
  content: "";
}

.s-99-summary:hover {
  color: var(--color-link-on-dark);
}

.s-99-toggle {
  flex: 0 0 var(--space-12);
  width: var(--space-12);
  height: var(--space-12);
  color: var(--color-steel);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.s-99-disclosure[open] .s-99-toggle {
  transform: rotate(45deg);
}

.s-99-detail {
  color: var(--color-steel);
  padding-block: var(--space-8) var(--space-20);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  letter-spacing: var(--type-small-ls);
  overflow-wrap: anywhere;
}

.s-99-detail p + p {
  margin-top: var(--space-12);
}

.s-99-version {
  max-width: 100%;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
  text-wrap: pretty;
}

.s-99-pie :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-button-block);
}

@media (max-width: 734px) {
  .s-99-pie {
    padding-block: var(--space-40) var(--space-28);
  }

  .s-99-top {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-12);
    padding-bottom: var(--space-20);
  }

  .s-99-socials {
    column-gap: var(--space-24);
  }

  .s-99-legal {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-8) var(--space-20);
  }

  .s-99-disclosure + .s-99-disclosure {
    border-top: var(--btn-border) solid var(--color-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-99-toggle {
    transition: none;
  }
}

.s-99-consent {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
}

@media (min-width: 735px) and (max-width: 1068px) {
  .s-99-legal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 734px) {
  .s-99-legal > * + * {
    border-top: var(--btn-border) solid var(--color-ink);
  }
}

.s-99-legal a.s-99-summary,
.s-99-legal button.s-99-summary {
  color: var(--color-on-dark);
  text-decoration: none;
}

.s-99-legal a.s-99-summary:hover,
.s-99-legal button.s-99-summary:hover {
  color: var(--color-link-on-dark);
}