/* =====================================================================
   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); }
/* Scroll-linked scenes change their own boxes while pinned: the browser must not move the page to
   «keep» an anchor in view (scroll anchoring), or the content jumps under the finger. */
html { overflow-anchor: none; }
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); }
}
/* Short phones (Safari with its toolbar, 560-819px tall): a smaller globe and
   a compact card, the complete portrait beside its own text. */
@media (max-width: 734px) and (max-height: 819px) {
  .s-05-enhanced .s-05-stop { grid-template-columns: minmax(0, 1fr) clamp(112px, 33vw, 132px); grid-template-rows: auto 1fr; column-gap: var(--space-12); row-gap: var(--space-4); }
  .s-05-enhanced .s-05-location { grid-column: 1; grid-row: 1; margin-top: 0; }
  .s-05-enhanced .s-05-city { font-size: 21px; line-height: 24px; }
  .s-05-enhanced .s-05-stop .s-05-photo { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
  .s-05-enhanced .s-05-caption { grid-column: 1; grid-row: 2; font-size: var(--type-caption-size); line-height: 16px; }
}
/* The same compact card whenever the large one would leave too small a globe. */
@media (max-width: 734px) {
  .s-05-enhanced.s-05-compact .s-05-stop { grid-template-columns: minmax(0, 1fr) clamp(112px, 33vw, 132px); grid-template-rows: auto 1fr; column-gap: var(--space-12); row-gap: var(--space-4); }
  .s-05-enhanced.s-05-compact .s-05-location { grid-column: 1; grid-row: 1; margin-top: 0; }
  .s-05-enhanced.s-05-compact .s-05-city { font-size: 21px; line-height: 24px; }
  .s-05-enhanced.s-05-compact .s-05-stop .s-05-photo { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
  .s-05-enhanced.s-05-compact .s-05-caption { grid-column: 1; grid-row: 2; font-size: var(--type-caption-size); line-height: 16px; }
}
@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);
}