/* Fabricio Lujano v3 · "Punto de fuga" · site styles.
   Modes: html.film = pinned film (motion.js); without it = static, fully readable list (reduced motion, no JS, failure). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }       /* B4b: keeps sticky alive */
body {
  margin: 0; background: var(--paper); color: var(--ink); color-scheme: light;
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  --accent-c: var(--signal-ink); --focus: var(--ink);
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); font-weight: 500; line-height: 1.45; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.only-m { display: inline; } .only-d { display: none; }
@media (min-width: 820px) { .only-m { display: none; } .only-d { display: inline; } }

.night, .film__lift { --accent-c: var(--signal); --focus: var(--bone); color: var(--bone); color-scheme: dark; }
.grain, .film__night, html:not(.film) .hero { background-image: url("../img/grain.webp"); background-size: 180px 180px; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--r-1); text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; outline-color: var(--signal); }

/* ---------- type ---------- */
.accent { font-style: italic; color: var(--accent-c); padding-right: .04em; }
.leak-dot { color: var(--signal); }
.h-display, .h-mega, .stage-title, .hero__title, .numeral { font-weight: var(--fw-mega); font-family: var(--font-sans); }
.h-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.h-mega { font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--tr-mega); }
.stage-title { font-size: var(--fs-stage); line-height: .94; letter-spacing: var(--tr-display); }
.line { display: block; }
.line > span { display: inline-block; }
.reveal-lines .line, .stage-title .line, .cover__in .line, .numeral .line { overflow: hidden; padding: 0 .08em .12em 0; margin-bottom: -.12em; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 40ch; }
.numeral { font-size: var(--fs-numeral); line-height: var(--lh-numeral); letter-spacing: var(--tr-numeral); font-variant-numeric: tabular-nums; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); text-transform: uppercase; color: var(--ink-2); line-height: 1.2; }
.chip--night { border-color: var(--line-night); color: var(--bone-2); }
.chip__dot { width: var(--dot-small); height: var(--dot-small); border-radius: 50%; background: var(--signal); flex: none; }
/* section index (S3-S9): plain mono chapter marker on the grid. Pills live only inside the film. */
.sec-index { display: block; text-transform: uppercase; color: var(--ink-3); }
.night .sec-index { color: var(--bone-2); }
.sec-index + .h-display, .sec-index + .h-close { margin-top: var(--s-5); }
.k-gi { letter-spacing: -.1em; }                                        /* g→i gap in Chivo 900 at display sizes */
.proof--s { display: none; }
@media (max-width: 639px) { .hero .proof--l { display: none; } .hero .proof--s { display: inline; } }
.proof { margin-top: var(--s-3); color: var(--ink-3); }
.night .proof, .film__lift .proof { color: var(--bone-2); }
.bridge { margin-top: var(--s-8); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 36ch; font-style: italic; font-weight: 500; }
.bridge--night { color: var(--bone-2); }

/* ---------- button ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 20px; height: var(--control-h); padding: 0 0 0 22px;
  background: var(--signal); color: var(--on-signal); border: 0; border-radius: var(--r-1);
  /* warm white on signal: 19px/700 is WCAG "large text" (>= 18.66px bold), where 3.2:1 passes AA; APCA Lc 62 */
  font: 700 19px/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn__arrow { align-self: stretch; width: var(--control-h); display: grid; place-items: center; border-left: 1px solid var(--on-signal-line); }
.btn__arrow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: transform var(--dur-ui) var(--ease-out); }
.btn:active { transform: scale(.97); background: var(--signal-press); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--signal-press); }
  .btn:hover .btn__arrow svg { transform: translateX(4px); }
}
.btn--compact { height: var(--control-h-compact); gap: 14px; padding-left: 16px; }
.btn--compact .btn__arrow { width: var(--control-h-compact); }
.btn--block { width: 100%; justify-content: space-between; }
/* busy / disabled: darker orange (white text gains contrast: 3.9:1), no fade, so the label stays readable */
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; background: var(--signal-press); transform: none; }
.btn[aria-busy="true"] .btn__arrow svg { opacity: .5; }

/* WhatsApp: secondary, never competes with the orange button. Outline in the text colour of the surface
   (bone on night, ink on paper), the glyph in the same colour. */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-h); padding: 0 20px;
  color: inherit; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  border-color: color-mix(in oklab, currentColor 40%, transparent);
  font: 600 17px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-wa__icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn-wa:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-wa:hover { border-color: currentColor; background: color-mix(in oklab, currentColor 7%, transparent); }
}
.btn-wa--icon { width: var(--control-h); padding: 0; flex: none; }
.btn-wa--icon .btn-wa__icon { width: 22px; height: 22px; }
.btn-wa--block { width: 100%; }

.textlink { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .textlink:hover { color: var(--signal-ink); } .textlink--night:hover { color: var(--bone); } }

/* ---------- header ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-topbar); height: 56px; color: var(--bone);
  transition: transform 260ms var(--ease-out), background-color var(--dur-ui) linear, color var(--dur-ui) linear, box-shadow var(--dur-ui) linear;
}
.topbar__in { height: 100%; display: flex; align-items: center; gap: var(--s-5); }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: baseline; min-height: 44px; align-items: center; flex: none; white-space: nowrap; }
.topbar__desc { line-height: 1.3; }
.brand__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-left: 3px; align-self: flex-end; margin-bottom: 15px; }
.topbar__desc, .topbar__cta { display: none; }
.topbar { --focus: var(--bone); }
.topbar.is-solid { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); --focus: var(--ink); }
.topbar.is-hidden { transform: translateY(-100%); }
.topbar-sensor { position: absolute; top: 100px; left: 0; width: 1px; height: 1px; }
@media (min-width: 820px) {
  .topbar { height: 64px; }
  .topbar.is-hidden { transform: none; }
  .topbar__desc { display: block; font-size: var(--fs-small); color: currentColor; }
  .topbar__cta { display: inline-flex; margin-left: auto; }
}

/* ---------- S1 hero ---------- */
.hero { position: relative; }
.hero__in { position: relative; z-index: 1; padding-top: calc(56px + 24px); }
.hero__eyebrow { color: var(--bone-2); margin-bottom: var(--s-4); }
.hero__title { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-mega); color: var(--bone); max-width: 11.5em; }
.hero__sub { margin-top: var(--s-5); max-width: 36em; color: var(--bone); font-size: var(--fs-body); }
.hero__sub--d, .hero__sub--c { display: none; }
.hero__cta { margin-top: var(--s-5); }
.hero__cta .proof { max-width: none; }
/* phones: [Pedir mi diagnóstico →][WhatsApp icon] in one row, so the hero gains no height */
.hero__actions { display: flex; gap: var(--s-2); }
.hero__actions .btn { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.hero__actions .btn-wa { width: var(--control-h); padding: 0; flex: none; }
.hero__actions .btn-wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 359px) { .hero__actions .btn-wa { display: none; } }   /* 320: the bar below carries it */
@media (min-width: 820px) {
  .hero__actions { gap: var(--s-3); }
  .hero__actions .btn { flex: none; }
}
/* the label only where the row has room for button + WhatsApp + proof before the phone (1024 keeps the icon) */
@media (min-width: 1280px) {
  .hero__actions .btn-wa { width: auto; padding: 0 20px; }
  .hero__actions .btn-wa__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 640px) and (max-width: 819px) { .hero__actions { max-width: 460px; } }
.hero__next { color: var(--bone-2); }
@media (min-width: 820px) {
  .hero__in { padding-top: calc(64px + clamp(16px, 3.5svh, 64px)); }
  .hero__title { max-width: none; }                                    /* 820-1023 portrait: full width, phone peeks below */
  html:not(.film) .hero__title { width: calc((100% - 11 * var(--col-gap)) / 12 * 8 + 7 * var(--col-gap)); }
  .hero__sub { max-width: calc((100% - 11 * var(--col-gap)) / 12 * 7 + 6 * var(--col-gap)); font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .hero__sub--m { display: none; } .hero__sub--d { display: block; }
  .hero__cta { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
  /* three items in the row: the proof breaks in two short lines so it never runs under the phone */
  .hero__cta .proof { margin-top: 0; max-width: 17em; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) {
  .hero__title { width: calc((100% - 11 * var(--col-gap)) / 12 * 8 + 7 * var(--col-gap)); }
}
@media (max-height: 700px) and (max-width: 819px) {
  .hero__eyebrow, .hero__sub--m { display: none; }
  .hero__sub--c { display: block; }
  .hero__in { padding-top: calc(56px + 12px); }
}

/* Hero entrance (CSS only; lines, accent drop, then sub/CTA/proof). Off without JS and with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__title .line > span { animation: heroLine 700ms var(--ease-enter) both; }
  html.js .hero__title .line:nth-child(2) > span { animation-delay: 70ms; }
  html.js .hero__title .accent { display: inline-block; animation: accentDrop 560ms cubic-bezier(.34, 1.4, .64, 1) 260ms both; }
  html.js .hero__sub { animation: riseIn 500ms var(--ease-enter) 280ms both; }
  /* fill "backwards": after the entrance the buttons own their transform again (press scale) */
  html.js .hero__cta .btn { animation: riseIn 500ms var(--ease-enter) 330ms backwards; }
  html.js .hero__cta .btn-wa { animation: riseIn 500ms var(--ease-enter) 360ms backwards; }
  html.js .hero__cta .proof { animation: riseIn 500ms var(--ease-enter) 380ms both; }
}
@keyframes heroLine { from { transform: translateY(.38em); opacity: .01; } to { transform: none; opacity: 1; } }
@keyframes accentDrop { from { transform: translateY(-.32em); } to { transform: none; } }
@keyframes riseIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- STATIC MODE (no .film) ---------- */
html:not(.film) .film__night, html:not(.film) .film__hole, html:not(.film) .film__object,
html:not(.film) .film__callout, html:not(.film) .film__lines, html:not(.film) .film__progress,
html:not(.film) .film__count { display: none; }
html:not(.film) .hero {
  background-color: var(--night); color: var(--bone); overflow: hidden;
  padding-bottom: 0; min-height: auto;
}
html:not(.film) .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 30%, transparent 40%, var(--night-edge) 100%); pointer-events: none; }
html:not(.film) .hero__next { margin-top: var(--s-7); }
.hero__phone { display: none; }
html:not(.film) .hero__phone { display: block; position: relative; z-index: 1; width: min(62%, 300px); margin: var(--s-6) 0 0 30%; height: 220px; overflow: hidden; }
html:not(.film) .hero__phone img { width: 100%; height: auto; }
@media (min-width: 820px) {
  html:not(.film) .hero__in { padding-bottom: var(--s-9); }
  html:not(.film) .hero__phone { position: absolute; right: max(var(--gutter), (100% - var(--maxw)) / 2); bottom: 0; width: min(30%, 380px); height: 70%; margin: 0; }
  html:not(.film) .hero__title, html:not(.film) .hero__sub { position: relative; }
}
html:not(.film) .film__text { max-width: var(--wrap); margin-inline: auto; padding: var(--sec-loose) var(--gutter) var(--sec-tight); }
html:not(.film) .film__block + .film__block, html:not(.film) .film__note + .film__block { margin-top: var(--sec-tight); }
html:not(.film) .film__intro .stage-title { font-size: var(--fs-display); }
html:not(.film) .film__note { margin-top: var(--s-5); color: var(--ink-3); }
html:not(.film) .chapter { display: grid; gap: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-7); }
html:not(.film) .chapter .stage-body { max-width: var(--measure); }
@media (min-width: 820px) {
  html:not(.film) .chapter { grid-template-columns: 1fr minmax(260px, 360px); column-gap: var(--s-8); align-items: start; }
  html:not(.film) .chapter > :not(.leakfig) { grid-column: 1; }
  html:not(.film) .chapter .leakfig { grid-column: 2; grid-row: 1 / span 5; }   /* chip, count, title, body, "El arreglo" */
}
/* static leak figure: rest frame on the right, label on the left, a line from the label to the anchor */
.leakfig { position: relative; max-width: 520px; }
.leakfig img { width: 62%; margin-left: auto; }
.leakfig__mark { position: absolute; left: calc(38% + var(--ax) * 62%); top: calc(var(--ay) * 100%); width: var(--dot); height: var(--dot); margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--signal); z-index: 1; }
.leakfig::before { content: ""; position: absolute; left: 33%; top: calc(var(--ay) * 100%); height: 1px; width: calc(5% + var(--ax) * 62%); background: var(--ink); }
.leakfig__label { position: absolute; left: 0; width: 32%; top: calc(var(--ay) * 100%); transform: translateY(-50%); font-size: 15px; line-height: 1.35; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.leakfig__label .mono { text-transform: uppercase; color: var(--ink-3); }
html:not(.film) .film__outro { border-top: 1px solid var(--line); padding-top: var(--s-7); }
html:not(.film) .film__cover { background: var(--paper-2); padding: var(--sec-loose) 0 var(--s-8); }
.cover__in .lead { margin-top: var(--s-5); }
.chapter .stage-title, .film__block .stage-title { margin-top: var(--s-4); }
.stage-body { margin-top: var(--s-4); max-width: 46ch; }
/* "El arreglo" line per chapter and the outro's last line (label reuses .letter__k) */
.stage-fix { font-weight: var(--fw-ui); }
.stage-mobile-only { display: none; }

/* ---------- FILM MODE ---------- */
html.film .film { position: relative; height: calc(100svh + var(--film-d)); }
html.film .film__stage { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--paper); }
html.film .film__stage > * { position: absolute; }
html.film .film__night { inset: 0; background-color: var(--night); }
html.film .film__night::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 35%, transparent 38%, var(--night-edge) 100%); }
html.film .film__lift { inset: 0; z-index: 1; will-change: transform, opacity; }
html.film .hero { position: absolute; inset: 0; }
html.film .hero__in { position: static; }
html.film .hero__next { max-width: 34%; }
@media (max-width: 639px) { html.film .hero__next { position: static !important; max-width: none; margin-top: var(--s-4); } }
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) { html.film .hero__next { max-width: none; } }
/* short landscape screens (1024x768, 1440x900): pinned to the bottom it sat on the CTA row; it follows the row instead */
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) and (max-height: 920px) {
  html.film .hero__next.hero__next { position: static; margin-top: var(--s-3); }
}
html.film .hero__next { position: absolute; left: var(--gutter); bottom: 20px; }
@media (min-width: 820px) { html.film .hero__next { left: max(var(--gutter), (100% - var(--maxw)) / 2); } }
/* the opening: a paper disc grown with transform only (own layer, ~1000 px raster, never repainted) */
html.film .film__hole { left: 0; top: 0; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; z-index: 2; border-radius: 50%; background: var(--paper);
  transform: scale(0); will-change: transform; pointer-events: none; }
html.film .film__lines { inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
html.film .film__lines line { stroke: var(--perspective-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-enter); }
html.film .film__lines.is-drawn line { stroke-dashoffset: 0; }
html.film .film__object { z-index: 3; left: 0; top: 0; transform-origin: 0 0; will-change: transform; contain: layout style;
  /* hero position before motion.js measures (same formula as refresh) */
  --oh: 50svh; height: var(--oh); width: calc(var(--oh) * var(--crop-r)); top: 72svh; left: calc(62% - var(--oh) * var(--crop-r) / 2); }
@media (max-height: 719px) { html.film .film__object { --oh: 44svh; } }
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) {
  html.film .film__object { --oh: 84svh; top: 30svh;
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + .8 * (100% - 2 * max(var(--gutter), (100% - var(--maxw)) / 2)) - var(--oh) * var(--crop-r) / 2); }
}
html.film .film__object picture, html.film .film__poster, html.film .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html.film .film__poster { transition: opacity 200ms linear; }
html.film .film__object.has-canvas .film__poster { opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s linear 200ms; }

/* callout: positions are written per frame (transform only); entries are timed transitions */
html.film .film__callout { inset: 0; z-index: 4; pointer-events: none; }
.co__pt, .co__seg { position: absolute; left: 0; top: 0; display: block; }
.co__pt { width: 0; height: 0; }
.co__dot, .co__ring { position: absolute; left: -4.5px; top: -4.5px; width: var(--dot); height: var(--dot); border-radius: 50%; }
.co__dot { background: var(--signal); transform: scale(0); transition: transform 160ms var(--ease-out); }
.co__ring { border: 1px solid var(--signal); opacity: 0; }
.co__seg { width: 1px; height: 1px; transform-origin: 0 50%; }
.co__seg b { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease-out); }
.co__seg:last-of-type b { transform-origin: 100% 50%; }
.co__label { position: absolute; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity 140ms var(--ease-exit), transform 140ms var(--ease-exit), visibility 0s linear 140ms; }
.co__chip { text-transform: uppercase; color: var(--ink-3); }
.co__text { font-size: 17px; line-height: 1.3; color: var(--ink); }
.film__callout.is-on .co__dot { transform: scale(1); }
.film__callout.is-on .co__ring { animation: ringOnce 700ms var(--ease-out) both; }
.film__callout.is-on .co__seg b { transform: scaleX(1); }
.film__callout.is-on .co__label.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--ease-enter) 140ms, transform 240ms var(--ease-enter) 140ms, visibility 0s; }
@keyframes ringOnce { from { transform: scale(1); opacity: .5; } to { transform: scale(2.6); opacity: 0; } }

/* text blocks: one visible at a time, swapped by threshold with timed animations */
html.film .film__text { inset: 0; z-index: 5; pointer-events: none; }
html.film .film__block { position: absolute; pointer-events: auto; visibility: hidden; opacity: 0; transform: translateY(var(--exit-y, -12px));
  transition: opacity var(--dur-swap-out) var(--ease-exit), transform var(--dur-swap-out) var(--ease-exit), visibility 0s linear var(--dur-swap-out); }
html.film .film__block.is-active { visibility: visible; opacity: 1; transform: none; transition: none; }
html.film .film__block.is-active .stage-title .line > span { animation: lineIn var(--dur-swap-in) var(--ease-enter) both; }
html.film .film__block.is-active .stage-title .line:nth-child(2) > span { animation-delay: var(--stagger); }
html.film .film__block.is-active .stage-body { animation: bodyIn 360ms var(--ease-enter) 120ms both; }
html.film .film__stage.dir-up { --exit-y: 12px; --line-from: -105%; --body-from: -8px; }
@keyframes lineIn { from { transform: translateY(var(--line-from, 105%)); } to { transform: none; } }
@keyframes bodyIn { from { opacity: 0; transform: translateY(var(--body-from, 8px)); } to { opacity: 1; transform: none; } }
html.film .leakfig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.film .leakfig img { display: none; }
html.film .film__note { position: absolute; z-index: 5; color: var(--ink-3); opacity: 0; transition: opacity 300ms linear; }
html.film .film__note.is-on { opacity: 1; }
html.film .film__progress { z-index: 5; display: flex; gap: 6px; opacity: 0; transition: opacity 300ms linear; }
html.film .film__progress.is-on { opacity: 1; }
.film__progress i { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.film__progress b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }

/* cover: the phone screen that opens into S3 */
html.film .film__cover { inset: 0; z-index: 6; background: var(--paper-2); clip-path: inset(50%); visibility: hidden; }
html.film .film__cover.is-shown { visibility: visible; }
/* the page is laid out at viewport size from the start and mapped into the screen rect by motion.js (same
   transform as the zoom), so the screen IS the page: no blank paper, heading already in place. Only the lead waits. */
html.film .cover__page { position: absolute; inset: 0; transform-origin: 0 0; }
html.film .cover__in { height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 64px; }
html.film .cover__in .lead { opacity: 0; }
html.film .film__cover.is-open .cover__in .lead { opacity: 1; animation: bodyIn 500ms var(--ease-enter) both; --body-from: 8px; }

/* stage layout · vertical (default) */
/* portrait: the object is sized by height and the text block is placed right under it (motion.js writes --block-top) */
html.film .film__block { left: var(--gutter); right: var(--gutter); bottom: max(12%, calc(var(--bar-h) + 16px + env(safe-area-inset-bottom))); }
html.film .film__stage[data-portrait] .film__block { top: var(--block-top); bottom: auto; }
html.film .film__block .stage-title { margin-top: var(--s-3); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: .96; }
html.film .film__block .stage-body { margin-top: var(--s-3); font-size: 15px; line-height: 1.45; }
html.film .stage-title--long, html.film .film__block .stage-title--long { font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); line-height: 1; }
html.film .co__label { left: var(--gutter); top: 14%; max-width: var(--label-w, 140px); }
html.film .co__text { font-size: 15px; }
html.film .co__chip { display: none; }
html.film .film__progress { left: var(--gutter); right: var(--gutter); top: 64px; }
html.film .film__note { left: var(--gutter); top: 74px; }
html.film .stage-desktop-only { display: none; }
html.film .stage-mobile-only { display: inline; }
/* portrait pin: "El arreglo" does not fit in the text band without shrinking the phone; kept for screen readers,
   shown in static mode and in the landscape stage (07 · Para UI y motion, 1) */
html.film .chapter .stage-fix { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 820px) { html.film .co__text { font-size: 17px; } html.film .co__chip { display: block; } html.film .film__progress { top: 76px; } html.film .film__note { top: 88px; } }

/* stage layout · landscape */
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) {
  html.film .film__stage { --wl: max(var(--gutter), (100% - var(--maxw)) / 2); --ww: calc(100% - 2 * var(--wl)); }
  html.film .film__block { left: var(--wl); right: auto; width: calc(var(--ww) * .40); bottom: 8%; }
  html.film .film__block .stage-title { font-size: var(--fs-stage); line-height: .94; }
  html.film .film__block .stage-body { font-size: var(--fs-body); line-height: var(--lh-body); }
  html.film .stage-title--long, html.film .film__block .stage-title--long { font-size: calc(var(--fs-stage) * .72); line-height: .96; }
  html.film .stage-desktop-only { display: inline; }
  html.film .stage-mobile-only { display: none; }
  html.film .co__label { left: var(--wl); top: 16%; max-width: calc(var(--ww) * .30); }
  html.film .film__progress { left: var(--wl); right: auto; width: min(240px, calc(var(--ww) * .2)); top: calc(16% - 40px); }
  html.film .film__note { left: var(--wl); top: auto; bottom: 3%; }
}

/* film counter: the people left after each leak, under the progress bar (landscape) or above the chapter text, left
   of the phone (portrait). motion.js shows it from chapter 1 and swaps the figure when the chapter text swaps; the
   same figure is plain text in each chapter (.chapter__count), visible in static mode and kept for screen readers. */
.chapter__count { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-mono); letter-spacing: .02em; }
.chapter__count b { font: var(--fw-mega) 1.5em/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: .3em; }
html:not(.film) .chapter > .chip { justify-self: start; }      /* static list: the chip hugs its text above the count */
html.film .chapter__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
html.film .film__count { z-index: 5; left: var(--gutter); top: 0; max-width: var(--label-w, 140px); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 240ms linear, visibility 0s linear 240ms; }
html.film .film__count.is-on { opacity: 1; visibility: visible; transition: opacity 300ms linear, visibility 0s; }
.count__of { color: var(--ink-3); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; line-height: 1.3; }
.count__list { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.count__list li { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(var(--count-out, -.35em));
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), visibility 0s linear 160ms; }
.count__list li.is-on { opacity: 1; visibility: visible; transform: none; transition: none; animation: countIn 280ms var(--ease-enter) 80ms both; }
.count__n { font: var(--fw-mega) 30px/1 var(--font-sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.count__v { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
html.film .film__stage.dir-up { --count-out: .35em; --count-from: -.35em; }
@keyframes countIn { from { opacity: 0; transform: translateY(var(--count-from, .35em)); } to { opacity: 1; transform: none; } }
@media (min-width: 820px) { .count__of { font-size: var(--fs-mono); } .count__n { font-size: 40px; } .count__v { font-size: var(--fs-mono); } }
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) {
  html.film .film__count { left: var(--wl); top: calc(16% - 40px + 16px); max-width: calc(var(--ww) * .30); }
  .count__list li { flex-direction: row; align-items: baseline; gap: 12px; }
  .count__n { font-size: clamp(40px, 4.4svh, 52px); }
}
@media (prefers-reduced-motion: reduce) { .count__list li, .count__list li.is-on { transition: none; animation: none; } }

/* landscape stage tall enough for the extra line (below 760 px the label would run into the progress bar) */
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) and (min-height: 760px) {
  html.film .chapter .stage-fix { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}

/* ---------- reveals (IO adds .is-in once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not(.reveal-lines) { transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); }
  html.js [data-reveal]:not(.reveal-lines):not(.is-in) { opacity: 0; transform: translateY(var(--reveal-y)); }
  html.js .reveal-lines .line > span { transition: transform 900ms var(--ease-enter); }
  html.js .reveal-lines:not(.is-in) .line > span { transform: translateY(105%); }
  html.js .reveal-lines .line:nth-child(2) > span { transition-delay: var(--stagger); }
}

/* ---------- section rhythm ---------- */
.diag, .fit, .paths, .faq { padding-block: var(--sec-tight); }
.results, .founder, .close { padding-block: var(--sec-loose); }
/* Full-bleed section backgrounds (Fabricio, 2026-11-11): content stays inside .wrap. */
.results, .close, .foot { background-color: var(--night); }
.night .h-display, .night .h-mega { color: var(--bone); }
.chip + .h-display, .chip + .h-mega { margin-top: var(--s-5); }
@media (min-width: 1024px) { .h-display--offset { margin-left: calc((100% - 11 * var(--col-gap)) / 12 * 3 + 3 * var(--col-gap)); } }

/* ---------- S3 diagnosis ---------- */
.diag { background: var(--paper-2); padding-top: var(--s-7); }  /* full-bleed: continues the stage cover */
.diag__grid { display: grid; gap: var(--s-8); }
.steps { display: grid; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line-strong); }
.steps li:last-child { border-bottom: 1px solid var(--line-strong); }
.steps__n { color: var(--ink-3); padding-top: 4px; }
.steps strong { display: block; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 700; margin-bottom: 6px; }
.steps p { color: var(--ink-2); }
/* the three promises read as a signed checklist, not as three buttons that do nothing (they were bordered boxes) */
.guarantees { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.guarantees li { position: relative; padding-left: 30px; font-weight: 600; font-size: var(--fs-body); line-height: 1.35; }
.guarantees li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.guarantees li::after { content: ""; position: absolute; left: 6px; top: calc(.1em + 6px); width: 8px; height: 4px; border-left: 2px solid var(--paper-2); border-bottom: 2px solid var(--paper-2); transform: rotate(-45deg); }
.why { margin-bottom: var(--s-6); max-width: 46ch; }
.why__label { text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.why p:not(.why__label) { color: var(--ink-2); }
.why p.why__risk { margin-top: var(--s-3); color: var(--ink); font-weight: var(--fw-ui); }

.letter { background: var(--paper); box-shadow: var(--shadow-lift); padding: clamp(20px, 3vw, 44px); }
.letter__head { border-bottom: 1px solid var(--line-strong); padding-bottom: var(--s-4); }
.letter__head .mono { text-transform: uppercase; color: var(--ink-3); }
.letter__sub { margin-top: 6px; font-weight: 700; font-size: var(--fs-lead); letter-spacing: -.01em; }
.letter__row { position: relative; display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: var(--s-5); padding-block: var(--s-5); }
.letter__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.letter__shot { position: relative; align-self: start; border: 1px solid var(--line); }
.letter__shot img { width: 100%; }
.mark { position: absolute; left: var(--mx); top: var(--my); width: var(--dot); height: var(--dot); margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--signal); }
.mark__ring { display: none; position: absolute; inset: -1px; border: 1px solid var(--signal); border-radius: 50%; opacity: 0; }
.mark__line { position: absolute; left: 9px; top: 4px; height: 1px; width: 600%; background: var(--ink); transform-origin: 0 50%; }
.letter__n { color: var(--signal-ink); text-transform: uppercase; margin-bottom: var(--s-2); }
.letter__body p + p { margin-top: var(--s-3); }
.letter__body p:not(.letter__n) { font-size: var(--fs-small); line-height: 1.5; }
.letter__k { display: block; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.letter__note { margin-top: var(--s-5); font-weight: 500; font-style: italic; color: var(--signal-ink); font-size: var(--fs-lead); transform: rotate(-1.5deg); transform-origin: 0 50%; }
.letter__foot { margin-top: var(--s-4); color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  html.js .letter:not(.is-in) .letter__row::after { transform: scaleX(0); }
  html.js .letter .letter__row::after { transition: transform 500ms var(--ease-enter); }
  html.js .letter .letter__row:nth-child(2)::after { transition-delay: 160ms; }
  html.js .letter .letter__row:nth-child(3)::after { transition-delay: 320ms; }
  html.js .letter:not(.is-in) .mark__line { transform: scaleX(0); }
  html.js .letter .mark__line { transition: transform var(--dur-draw) var(--ease-out) 200ms; }
  html.js .letter .mark__ring { display: block; }
  html.js .letter.is-in .mark__ring { animation: ringOnce var(--dur-pulse) var(--ease-out) 200ms both; }
}
@media (max-width: 639px) {
  .letter__row { grid-template-columns: 1fr; gap: var(--s-4); }
  .letter__shot { width: 100%; max-width: 280px; }
}
@media (min-width: 1024px) {
  /* the 1fr row absorbs the extra height of the letter, so steps and CTA stay together; the CTA then rides along */
  .diag__grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--col-gap); row-gap: var(--s-7); }
  .diag__main { grid-column: 1 / 6; grid-row: 1; }
  .letter { grid-column: 7 / 13; grid-row: 1 / span 3; align-self: start; }
  .diag__cta { grid-column: 1 / 6; grid-row: 2; align-self: start; position: sticky; top: 96px; }
  .letter__row { grid-template-columns: 180px 1fr; }
}
.bridge { margin-top: var(--s-8); }

/* ---------- S4 results ---------- */
/* Rhythm: x8 (huge, counts 1 -> 8) beside the claim, the "one euro in, eight out" strip under it; then the case as one
   lighter sheet (story | evidence) whose orange bar shrinks from the sector's length to a quarter; then the honest
   reading at large size with the side notes and the CTA. */
.results { background-color: var(--night); --bone-1: #D2CABD; }      /* bone-1: 11:1 on night-2, for long text */
.avg { margin-top: var(--s-6); display: grid; gap: var(--s-6); align-items: end; }
.numeral--x8 { color: var(--bone-2); font-size: clamp(8.5rem, 2rem + 30vw, 30rem); }
.numeral--x8 [data-count] { color: var(--bone); display: inline-block; min-width: .62em; }
.h-results { font-weight: var(--fw-mega); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -.035em; color: var(--bone); max-width: 15ch; margin-bottom: var(--s-6); }
.avg__label { text-transform: uppercase; color: var(--bone-2); margin-bottom: var(--s-3); }
.avg__text p:not(.avg__label) { max-width: 44ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--bone-1); }
/* one euro in, eight out */
.ratio { --u: clamp(20px, 2.6vw, 40px); display: flex; align-items: flex-start; gap: clamp(10px, 1.6vw, 20px); }
.ratio__in, .ratio__out { display: grid; gap: 10px; }
.ratio .mono { color: var(--bone-2); text-transform: uppercase; font-size: 11px; white-space: nowrap; }
.ratio__units { display: flex; gap: clamp(4px, .5vw, 8px); }
.ratio__u { display: block; width: var(--u); height: var(--u); border-radius: var(--r-1); background: var(--bone); transform-origin: 50% 100%; }
.ratio__u--in { background: transparent; border: 1.5px solid var(--bone-2); }
.ratio__arrow { flex: none; margin-top: calc(var(--u) / 2 - 10px); fill: none; stroke: var(--bone-2); stroke-width: 1.5; }
@media (min-width: 820px) { .ratio .mono { font-size: var(--fs-mono); } }
@media (min-width: 1024px) {
  .avg { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: var(--s-7); }
  .numeral--x8 { grid-column: 1 / 7; grid-row: 1 / span 2; align-self: end; margin-bottom: -.06em; }
  .avg__text { grid-column: 7 / 13; grid-row: 1; }
  .ratio { grid-column: 7 / 13; grid-row: 2; }
  .h-results { margin-bottom: var(--s-5); }
}

/* the case: one lighter sheet */
.exception { margin-top: var(--s-9); background: var(--night-2); border: 1px solid var(--line-night); padding: clamp(24px, 4vw, 64px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); display: grid; gap: var(--s-7); }
.exception__label { text-transform: uppercase; color: var(--bone-2); }
.exception__title { margin-top: var(--s-5); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 18ch; }
.exception__text { margin-top: var(--s-5); color: var(--bone-1); max-width: 58ch; }
.facts { display: grid; }
.facts__row { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line-night); }
.facts__row:first-child { border-top: 0; padding-top: 0; }
.facts__row dt { text-transform: uppercase; color: var(--bone-2); }
.facts__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.facts__lead { color: var(--bone-1); font-size: var(--fs-lead); font-weight: 500; }
.facts__hero { font: var(--fw-mega) clamp(2.75rem, 1.6rem + 3.6vw, 5.25rem)/.9 var(--font-sans); letter-spacing: -.045em; color: var(--bone); font-variant-numeric: tabular-nums; display: inline-block; }
.bars { display: grid; gap: var(--s-5); }
.bars__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px 16px; font-size: var(--fs-small); color: var(--bone-1); }
.bars__v { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--bone); white-space: nowrap; }
.bars__row--ours .bars__v { color: var(--signal); }
.bar { grid-column: 1 / -1; display: block; height: 20px; width: 100%; transform-origin: 0 50%; }
.bar--full { background: var(--bone-2); }
.bar--ours { background: var(--signal); transform: scaleX(.25); }
.bars__note { color: var(--bone-2); }
@media (min-width: 1024px) {
  .exception { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
  .exception__story { grid-column: 1 / 6; }
  .facts { grid-column: 7 / 13; }
}

/* the reading after the case */
.results__end { margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.results__why { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 700; color: var(--bone); max-width: 30ch; }
.results__x18 { color: var(--bone-1); max-width: 40ch; }
.results__anon { margin-top: var(--s-3); color: var(--bone-2); font-size: var(--fs-small); max-width: 40ch; }
.results__cta { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .results__end { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  .results__why { grid-column: 1 / 8; }
  .results__side { grid-column: 8 / 13; padding-top: .4em; padding-left: var(--s-6); }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .avg .numeral .line > span { transition: transform 700ms var(--ease-enter); }
  html.js .avg:not(.is-in) .numeral .line > span { transform: translateY(105%); }
  html.js .avg__text { transition: opacity 700ms var(--ease-enter) 150ms; }
  html.js .avg:not(.is-in) .avg__text { opacity: 0; }
  /* the eight units rise one after another once the count has started */
  html.js .ratio__u { transition: transform 420ms var(--ease-out), opacity 300ms linear; transition-delay: calc(500ms + var(--i, 0) * 55ms); }
  html.js .avg:not(.is-in) .ratio__u { transform: scale(.4); opacity: 0; }
  html.js .ratio__units .ratio__u:nth-child(1) { --i: 1; } html.js .ratio__units .ratio__u:nth-child(2) { --i: 2; }
  html.js .ratio__units .ratio__u:nth-child(3) { --i: 3; } html.js .ratio__units .ratio__u:nth-child(4) { --i: 4; }
  html.js .ratio__units .ratio__u:nth-child(5) { --i: 5; } html.js .ratio__units .ratio__u:nth-child(6) { --i: 6; }
  html.js .ratio__units .ratio__u:nth-child(7) { --i: 7; } html.js .ratio__units .ratio__u:nth-child(8) { --i: 8; }
  html.js .exception { transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); }
  html.js .exception:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-y)); }
  /* the moment: our bar starts as long as the sector's and shrinks to a quarter; its figure lands after it */
  html.js .exception .bar--ours { transition: transform 1300ms var(--ease-in-out) 750ms; }
  html.js .bars:not(.is-in) .bar--ours { transform: scaleX(1); }
  html.js .exception .bar--full { transition: transform 700ms var(--ease-out) 100ms; }
  html.js .bars:not(.is-in) .bar--full { transform: scaleX(0); }
  html.js .exception .bars__row--ours .bars__v { transition: opacity 400ms linear 1800ms; }
  html.js .bars:not(.is-in) .bars__row--ours .bars__v { opacity: 0; }
}

/* ---------- S5 founder ---------- */
.founder { background: var(--paper-2); }
.founder__grid { display: grid; gap: var(--s-7); }
.fifteen { margin-top: var(--s-6); display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.numeral--photo { color: var(--ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* The «15» is cut from the ad-account screen of the film (00a: 312 registros, US$4.80, 3,100 clics), toned to
     ink + warm tan by numeral_fill.py: his daily material, the same screen the page opens with. The ground of the
     capture is ink, so the glyph keeps its silhouette on --paper-2 and the figures show inside the strokes.
     The padding (cancelled by the margin) keeps the whole glyph inside the background painting area. */
  .numeral--photo { padding-inline: .06em; margin-inline: -.06em;
    background: url("../img/numeral-cuenta-480.webp") 30% 30% / cover no-repeat, var(--ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  @media (min-width: 820px) { .numeral--photo { background-image: url("../img/numeral-cuenta-760.webp"); } }
}
.fifteen figcaption { display: grid; gap: 4px; padding-bottom: .4em; }
.fifteen__label { font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); max-width: 9ch; }
.fifteen__credit { color: var(--ink-3); }
.founder__body p { max-width: var(--measure); }
.founder__body p + p { margin-top: var(--s-4); }
.signature { font-weight: 800; font-size: var(--fs-lead); letter-spacing: -.02em; margin-top: var(--s-5) !important; }
.founder__body .bridge { margin-top: var(--s-7) !important; }
.portrait { position: relative; }
.portrait__frame { overflow: hidden; aspect-ratio: 4 / 5; }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.facts-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.fcard { background: var(--paper); border: 1px solid var(--line); padding: 14px 18px; box-shadow: var(--shadow-lift); display: grid; gap: 2px; }
.fcard b { font-weight: 800; font-size: clamp(22px, 1.4vw, 26px); line-height: 1.1; letter-spacing: -.02em; }
.fcard span { font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
/* mobile + tablet: the portrait stays clean; the cards sit below it, loose (rotated), never on the face or chest */
@media (max-width: 1023px) {
  .portrait { max-width: 520px; }
  .facts-cards { margin-top: var(--s-5); }
  .fcard--1 { rotate: -.6deg; } .fcard--2 { rotate: .5deg; translate: 0 10px; }
  .fcard--3 { rotate: .4deg; } .fcard--4 { rotate: -.5deg; translate: 0 10px; }
}
@media (min-width: 1024px) {
  .founder__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: var(--s-7); }
  .founder__head { grid-column: 1 / 7; grid-row: 1; }
  .founder__body { grid-column: 1 / 7; grid-row: 2; }
  .founder__media { grid-column: 7 / 13; grid-row: 1 / span 2; }
  .portrait { width: min(100%, calc(76svh * .8)); margin-inline: auto; }
}
/* small desktop: the column is too narrow to hang cards off the photo, so they stay below it (as on mobile) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .facts-cards { margin-top: var(--s-5); }
  .fcard--1 { rotate: -.6deg; } .fcard--2 { rotate: .5deg; } .fcard--3 { rotate: .4deg; } .fcard--4 { rotate: -.5deg; }
}
/* desktop: the cards straddle the portrait's side edges. Only their inner 16% of the portrait width overlaps the
   photo, and only where the photo is backdrop (left strip above ~62%, right strip above ~50%): the head occupies
   22-78% of the width and the shoulders start lower down. The portrait is sized from the column so the cards fit. */
@media (min-width: 1280px) {
  .portrait { --cw: clamp(150px, 9vw, 176px); position: sticky; top: 12svh; aspect-ratio: 4 / 5;
    width: min(calc((100% + 40px - 2 * var(--cw)) / .68), calc(76svh * .8)); }
  .facts-cards { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .fcard { position: absolute; width: calc(var(--cw) * var(--k, 1)); pointer-events: auto; }
  .fcard--1 { right: 84%; top: -4%; rotate: -.6deg; --k: .94; }
  .fcard--3 { right: 84%; top: 22%; rotate: .4deg; }
  .fcard--2 { left: 84%; top: -6%; rotate: .5deg; --k: .9; }
  .fcard--4 { left: 84%; top: 20%; rotate: -.5deg; --k: .84; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .portrait__frame { transition: clip-path 900ms var(--ease-enter); }
  html.js .portrait:not(.is-in) .portrait__frame { clip-path: inset(100% 0 0 0); }
  @supports (animation-timeline: view()) {
    .portrait__frame img { animation: photoDrift linear both; animation-timeline: view(); scale: 1.1; }
    @media (min-width: 1024px) {
      .founder__media { view-timeline-name: --founder; }
      .fcard { animation: cardDrift linear both; animation-timeline: --founder; }
      /* yPercent of each card's own height (03-ui §4): different speeds = depth, bounded so no card reaches the face */
      .fcard--1 { --d: 14%; } .fcard--2 { --d: 22%; } .fcard--3 { --d: 10%; } .fcard--4 { --d: 18%; }
    }
  }
}
@keyframes photoDrift { from { transform: translateY(-4%); scale: 1.1; } to { transform: translateY(4%); scale: 1; } }
@keyframes cardDrift { from { transform: translateY(var(--d)); } to { transform: translateY(calc(var(--d) * -1)); } }

/* ---------- S6 fit ---------- */
/* Two surfaces that answer each other: «sí» on paper-2, «no» on a night sheet laid over its corner (one column of
   overlap, lower), so the section reads as a yes/no pair with depth. Same heading size and the same mark family on
   both sides: a 26 px disc, filled with a tick on «sí», outlined with a dash on «no». */
.fit__grid { margin-top: var(--s-6); display: grid; gap: var(--s-3); --pad: clamp(24px, 3.6vw, 56px); }
.fit__panel { position: relative; padding: var(--pad); }
.fit__yes { background: var(--paper-2); }
.fit__no { background-color: var(--night); box-shadow: 0 2px 0 rgba(12, 11, 10, .08), 0 40px 80px -36px rgba(74, 42, 18, .55); }
.fit__h { font-weight: var(--fw-mega); font-size: clamp(2rem, 1.25rem + 2.6vw, 3.75rem); line-height: .95; letter-spacing: var(--tr-display); margin-bottom: var(--s-6); }
.fit__no .fit__h { color: var(--bone); }
.fit__list li { position: relative; padding: var(--s-4) 0 var(--s-4) 46px; border-top: 1px solid var(--line-strong); max-width: 52ch; }
.fit__list li::before, .fit__list li::after { content: ""; position: absolute; }
.fit__list li::before { left: 0; top: calc(var(--s-4) + .78em - 13px); width: 26px; height: 26px; border-radius: 50%; }
.fit__list--yes li::before { background: var(--ink); }
.fit__list--yes li::after { left: 8px; top: calc(var(--s-4) + .78em - 4px); width: 10px; height: 5px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); }
.fit__list--no li { border-top-color: var(--line-night); color: var(--bone); }
.fit__list--no li::before { border: 1.5px solid var(--bone-2); }
.fit__list--no li::after { left: 8px; top: calc(var(--s-4) + .78em - 1px); width: 10px; height: 2px; background: var(--bone-2); }
.fit__end { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-night); font-weight: 700; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--bone); text-wrap: balance; }
@media (min-width: 1024px) {
  .fit__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  /* «sí» keeps its text clear of the shared column */
  .fit__yes { grid-column: 1 / 8; grid-row: 1; padding-right: calc(100% / 7 + var(--pad)); padding-bottom: calc(var(--pad) + var(--s-8)); }
  .fit__no { grid-column: 7 / 13; grid-row: 1; margin-top: var(--s-9); z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) { html.js .fit__no[data-reveal] { transition-delay: 140ms; } }

/* ---------- S7 paths ---------- */
/* A ladder, not a list: the section sits on paper-2 (S6 and S8 stay on paper, so the three no longer run together),
   each rung carries its number at display weight, and the last rung (the full implementation) is the one raised
   sheet, on paper with the warm lift. */
.paths { background: var(--paper-2); }
.paths__list { margin-top: var(--s-8); border-bottom: 1px solid var(--line-strong); }
.path { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-2) var(--s-4); padding: var(--s-6) var(--s-4); border-top: 1px solid var(--line-strong); }
.path__n { font: var(--fw-mega) clamp(2.25rem, 1.6rem + 2.4vw, 4.25rem)/.8 var(--font-sans); letter-spacing: -.05em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.path--top { background: var(--paper); box-shadow: var(--shadow-lift); border-top-color: transparent; position: relative; }
.path--top + .path, .paths__list:has(.path--top:last-child) { border-color: transparent; }
.path--top .path__n { color: var(--ink); }
.path__name { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.path__what { grid-column: 2; color: var(--ink-2); max-width: 56ch; }
.path__cap { grid-column: 2; text-transform: uppercase; color: var(--signal-ink); }
.path__dot { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--signal); display: inline-block; margin-left: -8px; align-self: flex-end; margin-bottom: .3em; }
.chip--inline { font-size: 12px; font-weight: 500; letter-spacing: var(--tr-mono); }
@media (min-width: 1024px) {
  .path { grid-template-columns: 120px 5fr 6fr; grid-template-rows: auto auto 1fr; align-items: baseline; padding: var(--s-7) var(--s-6); }
  .path__n { grid-row: 1 / span 3; }
  .path__what { grid-column: 3; grid-row: 1 / span 3; }
  .path__cap { grid-column: 2; grid-row: 2; }
}
/* the rows are not links: no hover movement (it promised a click that does nothing) */
.paths__intro { margin-top: var(--s-6); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 44ch; }
.paths__price { margin-top: var(--s-6); font-weight: 500; max-width: 52ch; }

/* ---------- S8 faq ---------- */
/* Two columns from 1024: the heading and the way out stay pinned on the left, the questions run on the right at
   reading size (they were 12 headings at h3 display size: a wall). */
.faq__list { margin-top: var(--s-7); border-bottom: 1px solid var(--line-strong); }
.faq details { border-top: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-block: var(--s-4); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em; font-weight: 700; max-width: 40ch; }
@media (hover: hover) and (pointer: fine) {
  .faq summary h3 { transition: color var(--dur-ui) linear; }
  .faq summary:hover h3 { color: var(--ink-2); }
  .faq summary:hover .plus { transform: rotate(90deg); }
  .faq details[open] summary:hover .plus { transform: rotate(45deg); }
}
@media (min-width: 1024px) {
  .faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  .faq__head { grid-column: 1 / 6; grid-row: 1 / span 2; position: sticky; top: 112px; }
  .faq__head .h-display { font-size: clamp(2.5rem, 1.2rem + 3.2vw, 4.75rem); }
  .faq__list { grid-column: 7 / 13; margin-top: 0; }
}
.plus { position: relative; flex: none; width: 18px; height: 18px; transition: transform var(--dur-icon) var(--ease-out); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 8.25px; width: 18px; height: 1.5px; background: var(--ink); }
.plus::after { transform: rotate(90deg); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--s-5); }
.faq__a p { max-width: 60ch; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .faq__a { animation: faqIn 200ms var(--ease-out); } }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq__end { margin-top: var(--s-6); font-size: var(--fs-lead); }
@media (min-width: 1024px) { .faq__end { grid-column: 7 / 13; } }

/* ---------- S9 close + form ---------- */
.close { padding-top: var(--sec-tight); }
.close__grid { display: grid; }
.h-close { font-weight: var(--fw-mega); font-size: clamp(2.375rem, 1.2rem + 3.2vw, 4.5rem); line-height: .92; letter-spacing: var(--tr-display); color: var(--bone); outline: none; }
.h-close:focus-visible { outline: 2px solid var(--bone); outline-offset: 6px; }
.close__sub { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 36ch; }
.close__form { margin-top: var(--s-6); }
.next { margin-top: var(--s-7); counter-reset: n; display: grid; gap: var(--s-3); max-width: 46ch; }
.next li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; color: var(--bone-2); }
.next li::before { content: "0" counter(n); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--bone-2); padding-top: 4px; }
.signed { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-3); font-weight: 500; }
.signed img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--night-2); }
@media (min-width: 1024px) {
  /* the form sits beside the heading: after any CTA the first field is on screen */
  .close__grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: var(--col-gap); }
  .close__index { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .h-close { grid-column: 1 / 7; grid-row: 2; }
  .close__sub { grid-column: 1 / 6; grid-row: 3; }
  .next { grid-column: 1 / 6; grid-row: 4; }
  .signed { grid-column: 1 / 6; grid-row: 5; align-self: start; }
  .close__form { grid-column: 8 / 13; grid-row: 2 / span 4; align-self: start; margin-top: var(--s-5); }
}
.field { display: grid; gap: 8px; margin-bottom: var(--s-5); }
.field label, .field legend { font-weight: 500; font-size: var(--fs-small); color: var(--bone); }
.field legend { margin-bottom: 8px; }
.field input[type="text"], .field input[type="email"] {
  height: var(--control-h); width: 100%; padding: 0 16px; background: var(--night-2); color: var(--bone);
  border: 1px solid var(--field-border-night); border-radius: var(--r-1); font: 400 17px/1 var(--font-sans);
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
.field input:focus { outline: none; border-color: var(--bone); box-shadow: 0 0 0 2px var(--signal); }
.field__help { font-size: var(--fs-small); color: var(--bone-2); }
.field__err { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-small); color: var(--bone); }
.field__err::before { content: ""; flex: none; width: var(--dot-small); height: var(--dot-small); border-radius: 50%; background: var(--signal); transform: translateY(-1px); }
.field__err[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .field__err:not([hidden]) { animation: faqIn 180ms var(--ease-out); } }
.field.is-error input[type="text"], .field.is-error input[type="email"] { border-color: var(--signal); }
.seg__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) { .seg__opts { grid-template-columns: repeat(4, 1fr); } }
.seg__opt { position: relative; display: block; cursor: pointer; }
.seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; border: 0; border-radius: var(--r-1); }
.seg__opt span { display: flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 8px 12px; border: 1px solid var(--field-border-night); border-radius: var(--r-1); background: var(--night-2); font-size: 15px; line-height: 1.2; color: var(--bone);
  transition: background-color var(--dur-ui) linear, color var(--dur-ui) linear, transform var(--dur-press) var(--ease-out); }
.seg__opt span::before { content: ""; flex: none; width: var(--dot-small); height: var(--dot-small); border-radius: 50%; border: 1px solid var(--bone-2); }
.seg__opt input:checked + span { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.seg__opt input:checked + span::before { background: var(--signal); border-color: var(--signal); }
.seg__opt input:focus-visible + span { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--bone); }
.seg__opt input:active + span { transform: scale(.98); }
.seg.is-error .seg__opt span { border-color: var(--signal); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.privacy { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--bone-2); }
/* the alternative to the form: below it, after a rule, outline only */
.close__alt { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-night); }
.close__alt-note { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.45; color: var(--bone-2, rgba(240, 233, 222, .72)); max-width: 46ch; }
.form-status:empty { display: none; }
.form-status { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-night); color: var(--bone); }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .form-status:not(:empty) { animation: bodyIn 280ms var(--ease-enter); } }

/* ---------- S10 footer ---------- */
.foot { border-top: 1px solid var(--line-night); padding-block: var(--s-8) calc(var(--s-8) + var(--bar-h)); }
@media (min-width: 820px) { .foot { padding-bottom: var(--s-8); } }
.foot__in { display: grid; gap: var(--s-4); color: var(--bone-2); font-size: var(--fs-small); }
.foot__brand { color: var(--bone); font-weight: 500; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- mobile sticky bar ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--bar-h); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--night-2); color: var(--bone); --focus: var(--bone);
  transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--ease-exit), visibility 0s linear 200ms; }
.mbar.is-on { transform: none; visibility: visible; transition: transform 280ms var(--ease-out), visibility 0s; }
.mbar__note { color: var(--bone-2); flex: none; width: 12.5ch; line-height: 1.3; }
.btn--bar { flex: 1; justify-content: space-between; min-width: 0; gap: 12px; padding-left: 16px; }
.btn--bar .btn__arrow { width: var(--control-h-compact); }
.mbar .btn-wa { width: var(--control-h); }
@media (max-width: 499px) { .mbar__note { display: none; } }          /* the WhatsApp square takes its place */
@media (max-width: 359px) { .btn--bar .btn__arrow { display: none; } .btn--bar { justify-content: center; padding-inline: 12px; } }
@media (min-width: 820px) { .mbar { display: none; } }
@media (scripting: none) { .mbar { display: none; } }

/* very short phones (iPhone SE 1st gen): tighter stage copy so it stays below the object */
@media (max-height: 620px) and (max-width: 819px) {
  html.film .film__block .stage-title { font-size: 1.5rem; }
  html.film .film__block .stage-body { font-size: 15px; line-height: 1.4; }
  html.film .stage-title--long { font-size: 1.375rem; }
}
.faq__end .textlink { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- micro-interaction layer (2026-11-11, round 2) ----------
   transform / opacity only, IO-driven, all off with reduced motion. Nothing here moves on scroll except the reading
   line, which is a scroll-driven CSS animation (compositor, no JS). */
@media (prefers-reduced-motion: no-preference) {
  /* staggered lists: rows arrive one after another (60 ms apart) instead of the whole block at once */
  html.js [data-stagger] > * { transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter); transition-delay: calc(80ms + var(--i, 0) * 60ms); }
  html.js [data-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(12px); }

  /* reading line under the header: how far down the page you are */
  @supports (animation-timeline: scroll()) {
    .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35;
      transform-origin: 0 50%; transform: scaleX(0); animation: readLine linear both; animation-timeline: scroll(root); pointer-events: none; }
  }

  /* FAQ: the answer opens with its height (one element, short) and fades in; the cross turns */
  @supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
  .faq summary:active h3 { opacity: .7; }

  /* form: the chosen range answers (dot pops, chip presses); fields lift their border on hover */
  .seg__opt input:checked + span::before { animation: dotPop 280ms var(--ease-out); }
  .field input[type="text"], .field input[type="email"] { transition: border-color 140ms linear, box-shadow 140ms linear, background-color 140ms linear; }
}
@keyframes readLine { to { transform: scaleX(1); } }
@keyframes dotPop { 0% { transform: scale(.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) {
  .seg__opt:hover span { border-color: var(--bone-2); }
  .field input[type="text"]:hover:not(:focus), .field input[type="email"]:hover:not(:focus) { border-color: rgba(238, 232, 222, .4); }
  /* founder cards: picked up on hover (straighten, lift). scale/rotate are separate properties, so they compose with
     the scroll drift animation on transform */
  .fcard { transition: scale 220ms var(--ease-out), rotate 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
  .fcard:hover { scale: 1.04; rotate: 0deg; z-index: 2; box-shadow: 0 2px 0 rgba(22, 18, 14, .06), 0 32px 56px -22px rgba(74, 42, 18, .45); }
  .textlink { transition: color var(--dur-ui) linear; }
  .btn-wa:hover .btn-wa__icon { transform: rotate(-8deg); }
  .btn-wa__icon { transition: transform 220ms var(--ease-out); }
}
/* valid fields after the first try get a quiet bone border (the error state already uses the dot + signal) */
.field input:user-valid:not(:focus) { border-color: rgba(238, 232, 222, .34); }