/* =========================================================================
   Fred · Treinador — folha de estilo
   Estrutura: 0) fontes  1) tokens  2) base/reset  3) utilitários
              4) keyframes  5) componentes (na ordem do DOM)  6) reduced-motion

   LINGUAGEM DE MOTION — cadência 180: toda duração da página é múltiplo do
   apoio de pé de um corredor a 180 passos/min (--step = 167ms). Micro = 1
   apoio; conteúdo = 4; display = 5; count-up = 8. O olho sente o ritmo de
   corrida sem saber nomeá-lo.

   O PERCURSO — a página é uma prova: a barra fixa do topo é o percurso
   (marcos de KM = seções, chegada dupla no fim, losango = o visitante),
   os eyebrows são "km 01…07", o CTA final é a "Chegada". A tese corre em
   negative split (segunda metade mais rápida) e o marquee do hero acelera
   com o gesto de quem rola. Nada disso é decorativo solto: é UM sistema.
   ========================================================================= */

/* 0) FONTES (self-host: zero viagem cross-origin no caminho crítico) ----- */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallback métrico: enquanto a Anton chega, Arial Narrow ocupa quase a mesma
   caixa — o swap não reflui o H1 gigante (CLS ~zero na headline). */
@font-face {
  font-family: 'Anton-fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 84%;
  ascent-override: 103%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* 1) DESIGN TOKENS ------------------------------------------------------- */
:root {
  /* Cores sólidas */
  --ink: #14100c;          /* fundo escuro base */
  --surface: #1b1510;      /* superfície elevada (cards, sobre) */
  --deep: #0d0a07;         /* rodapé */
  --paper: #f0e8dc;        /* seções claras */
  --paper-card: #f7f2e9;   /* card em fundo claro */
  --cream: #f5efe7;        /* texto/elemento claro */
  --accent: #e8562a;       /* laranja principal */
  --accent-deep: #b23a1f;  /* laranja sobre fundo claro */
  --accent-soft: #f0b49a;  /* eyebrow do hero */

  /* Texto sobre fundo claro */
  --text-paper: #453b2f;
  --muted-paper: #6e6252;
  --faint-paper: #8a7c68;

  /* Linhas sobre fundo claro */
  --paper-line: #cbc0ad;
  --paper-line-strong: #d8ccb6;
  --paper-chip: #bbae95;

  /* Canais RGB para alfas */
  --cream-rgb: 245, 239, 231;
  --ink-rgb: 20, 16, 12;
  --ember-rgb: 140, 43, 18;

  /* Tipografia */
  --font-display: 'Anton', 'Anton-fallback', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;

  /* Layout / ritmo */
  --pad-x: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 10vw, 130px);
  --pill: 999px;
  --sticky-top: 90px;

  /* Motion — cadência 180 (ver cabeçalho). */
  --step: 167ms;             /* 1 apoio de pé a 180ppm */
  --dur-micro: 167ms;        /* hover, press, seta (1 apoio) */
  --dur-reveal: 667ms;       /* conteúdo corrente (4 apoios) */
  --dur-display: 833ms;      /* headings display (5 apoios) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 2) BASE / RESET ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Âncoras param abaixo do header fixo, não atrás dele. */
  scroll-padding-top: 84px;
}
@media (max-width: 600px) {
  html { scroll-padding-top: 116px; } /* header de duas linhas no mobile */
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Matéria: um grão único sobre a página inteira — a última lâmina física,
   como num print. Sobre paper escurece a fibra; sobre ink acende a noite.
   Estático de propósito (grão animado = repaint + enjoo). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* height:auto é obrigatório: sem ele, os atributos width/height do HTML (que
   existem para reservar espaço e evitar layout shift) viram altura literal em
   px e deformam qualquer imagem cujo CSS defina só a largura. */
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--ink); }

/* Sistema de foco — a marca responde ao teclado com a própria voz. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:is(.problem, .plan, .faq) :focus-visible { outline-color: var(--accent-deep); }
.btn--primary:focus-visible { outline-color: var(--cream); outline-offset: 4px; } /* laranja sobre laranja some */
.faq__question:focus-visible { outline-offset: -3px; } /* anel para dentro: itens colados na lista */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 90;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border: 2px solid var(--accent);
  border-radius: var(--pill);
  transition: transform var(--dur-micro) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* 3) UTILITÁRIOS -------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-accent { color: var(--accent); }
.u-accent-deep { color: var(--accent-deep); }

/* GRADE FOTOGRÁFICO — as fotos vêm de anos e luzes diferentes (noturna azulada,
   academia fluorescente, provas diurnas). Um grade único puxa todas para o
   mesmo mundo quente-noturno da paleta ink/ember: dessatura, aquece, assenta.
   Ajustes pontuais por foto entram como modificador, nunca fora do sistema. */
.hero__img,
.duel__img,
.about__img,
.format-card__img,
.audience__bg,
.final-cta__bg {
  filter: saturate(0.82) contrast(1.06) sepia(0.16) hue-rotate(-9deg) brightness(0.97);
}

/* Botão base + variantes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--pill);
  font-weight: 700;
  text-align: center;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease,
              border-color var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--cream); color: var(--ink); }
.btn--ghost {
  border: 1px solid rgba(var(--cream-rgb), 0.45);
  color: var(--cream);
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--lift:hover { transform: translateY(-2px); }
/* Press: o hover levanta, o clique assenta — o ciclo tátil completo. */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

.icon-arrow { font-size: 17px; transition: transform var(--dur-micro) var(--ease); }
.btn:hover .icon-arrow,
.faq__link:hover .icon-arrow { transform: translate(2px, -2px); } /* a seta aponta para onde vai */

/* 4) KEYFRAMES ---------------------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lineReveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(22px); }
  to   { clip-path: inset(-12% 0 -12% 0); transform: translateY(0); }
}
/* Drift do hero: zoom-in whisper 1→1.045 ancorado perto do Fred. A imagem
   cobre o hero inteiro (o respiro da cabeça está DENTRO do canvas — faixas
   superior/esquerda outpaintadas por clone espelhado no fred-hero-ext.png),
   então escalar para cima nunca revela borda. */
@keyframes heroDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
@keyframes pulseDown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.4; }
}
/* O corredor cruza a linha: um pulso, e só um. */
@keyframes finishPulse {
  50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.9); }
}

/* Reveals tipados (estado aplicado via JS) — a hierarquia entra de formas
   diferentes: display revela por máscara (o vocabulário do hero, costurado na
   página inteira); conteúdo corrente sobe; grupos entram em passadas.
     data-reveal          → rise (corpo)
     data-reveal="mask"   → clip-path (H2 display)
     [data-reveal-group]  → filhos em stagger de 1 apoio (--reveal-i) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-reveal="mask"] {
  opacity: 1; /* quem esconde é o clip, não a opacidade */
  /* 99.6%, não 100%: clip de área zero faz o IntersectionObserver reportar
     interseção vazia e o reveal nunca dispara. A fresta de ~0.5px é invisível. */
  clip-path: inset(0 0 99.6% 0);
  transform: translateY(22px);
  transition: clip-path var(--dur-display) var(--ease), transform var(--dur-display) var(--ease);
}
.reveal[data-reveal="mask"].is-visible {
  clip-path: inset(-12% 0 -12% 0); /* bleed: não decapitar text-shadow/acentos */
  transform: none;
}

/* Grupo: o container recebe .is-visible; cada filho entra 1 apoio depois do
   anterior (teto de 3 apoios — grids longos não viram fila de banco). */
[data-reveal-group] .reveal { transition-delay: min(calc(var(--reveal-i, 0) * var(--step)), 501ms); }
[data-reveal-group].is-visible .reveal { opacity: 1; transform: none; }

/* 5) COMPONENTES -------------------------------------------------------- */

/* O PERCURSO — a página é uma prova. Trilho apagado, preenchimento laranja
   por scaleX (compositor, zero layout), marcos de KM injetados pelo JS (um
   por seção), chegada dupla à direita e o losango-corredor (o mesmo ◆ do
   favicon e do marquee) avançando com --race-p. Dirigido por POSIÇÃO de
   scroll — por isso continua fazendo sentido sob reduced-motion. */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(var(--cream-rgb), 0.14);
  z-index: 60;
}
.progress-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--race-p, 0));
  transform-origin: 0 50%;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--race-p, 0) * 100%);
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(232, 86, 42, 0.8);
}
.progress-bar__km {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 7px;
  background: rgba(var(--cream-rgb), 0.35);
}
.progress-bar__finish {
  position: absolute;
  right: 1px;
  top: -2px;
  width: 4px;
  height: 7px;
  border-inline: 1px solid rgba(var(--cream-rgb), 0.6);
}
body.is-finished .progress-bar::after { animation: finishPulse 0.333s var(--ease) 1; }

/* Header fixo — vivo: assenta (solidifica) quando a página começa a correr. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad-x);
  background: linear-gradient(rgba(var(--ink-rgb), 0.88),
                              rgba(var(--ink-rgb), 0.55) 70%, transparent);
  backdrop-filter: blur(6px);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--ink-rgb), 0.93);
  opacity: 0;
  transition: opacity 0.333s var(--ease);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header__brand {
  position: relative;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--cream);
}
.site-header__brand span { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Alvo de toque decente sem engordar o ritmo visual (margem negativa devolve o gap). */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  margin: 0 -6px;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity var(--dur-micro) ease, color var(--dur-micro) ease;
}
.site-nav__link:hover { opacity: 1; }
.site-nav__cta { padding: 10px 18px; white-space: nowrap; }

/* Mobile: a navegação NÃO some (esconder conteúdo essencial é conserto
   preguiçoso) — ela desce para uma segunda linha do header. */
@media (max-width: 600px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 0;
    padding-block: 10px 6px;
    background: linear-gradient(rgba(var(--ink-rgb), 0.94),
                                rgba(var(--ink-rgb), 0.72) 78%, transparent);
  }
  .site-header__brand { grid-row: 1; grid-column: 1; align-self: center; }
  .site-nav__cta { grid-row: 1; grid-column: 2; }
  .site-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 20px;
    font-size: 12px;
  }
  .site-nav__link { min-height: 38px; }
}

/* HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero__frames { position: absolute; inset: 0; background: var(--ink); overflow: hidden; }
/* Imagem única (editada + outpaint): Fred à direita, lateral esquerda escura
   para o texto. O respiro acima da cabeça e a margem esquerda foram BAKEADOS
   no canvas (faixas clonadas/borradas em fred-hero-ext.png → tiers em opt/),
   então a foto cobre o hero de borda a borda — sem vazio, sem emenda, sem
   máscara. Drift = zoom-in whisper ancorado no Fred; escalar para cima nunca
   descobre borda. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 0%;       /* topo do canvas (respiro) preservado; Fred a 72% */
  transform-origin: 72% 35%;     /* âncora do zoom perto do Fred: ele não deriva */
  will-change: transform;
  animation: heroDrift 26s ease-in-out infinite alternate;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* base para leitura no rodapé (headline + lead) */
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.35) 0%,
      rgba(var(--ink-rgb), 0) 32%, rgba(var(--ink-rgb), 0.9) 100%),
    /* coluna esquerda escurecida onde entra o texto, some sobre o Fred */
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.82) 0%,
      rgba(var(--ink-rgb), 0.32) 42%, transparent 66%),
    /* brasa quente vindo do canto inferior esquerdo */
    linear-gradient(24deg, rgba(var(--ember-rgb), 0.3) 0%, transparent 42%);
}

.hero__scroll-hint {
  position: absolute;
  right: var(--pad-x);
  bottom: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.7);
  writing-mode: vertical-rl;
  animation: riseIn 0.667s 1s both;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--accent), transparent);
  animation: pulseDown 1s ease-in-out infinite;
}

.hero__content {
  position: relative;
  padding: 88px var(--pad-x) clamp(20px, 4vh, 44px);
}
.hero__eyebrow {
  margin: 0 0 clamp(14px, 2vh, 22px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-shadow: 0 1px 12px rgba(var(--ink-rgb), 0.6);
  animation: riseIn 0.667s 0.167s var(--ease) both;
}
.hero__eyebrow-dash {
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--accent);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 30px rgba(var(--ink-rgb), 0.45);
}
.hero__title-line { display: block; }
/* O benefício abre e carrega o peso; o método fecha, pequeno e assinado. */
.hero__title-line--1 {
  font-size: clamp(52px, 11.5vw, 176px);
  color: var(--accent);
  animation: lineReveal 0.833s 0.167s var(--ease) both;
}
.hero__title-line--2 {
  font-size: clamp(46px, 10vw, 154px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
  animation: lineReveal 0.833s 0.333s var(--ease) both;
}
.hero__title-line--3 {
  margin-top: clamp(6px, 1vh, 14px);
  font-size: clamp(30px, 5.6vw, 84px);
  color: rgba(var(--cream-rgb), 0.92);
  letter-spacing: 0.01em;
  animation: lineReveal 0.833s 0.5s var(--ease) both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(18px, 3vh, 32px);
  animation: riseIn 0.667s 0.667s var(--ease) both;
}
.hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: rgba(var(--cream-rgb), 0.92);
}
.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(100%, 300px);
}
.hero__cta { font-size: 16px; padding: 16px 28px; }
.hero__cta--secondary { gap: 8px; padding: 13px 28px; font-size: 15px; }
.hero__microcopy {
  margin: 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(var(--cream-rgb), 0.65);
}

.hero__marquee {
  position: relative;
  margin-top: clamp(16px, 3vh, 28px);
  border-top: 1px solid rgba(var(--cream-rgb), 0.22);
  background: rgba(var(--ink-rgb), 0.6);
  overflow: hidden;
  padding: 13px 0;
  /* Itens nascem e morrem em fade — o loop não mostra a costura. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* A animação CSS é o fallback sem-JS; com JS o rAF assume e acopla a
   velocidade ao scroll do visitante (o chão corre com quem corre). */
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.hero__marquee:hover .marquee__track { animation-play-state: paused; }

/* Fora de vista, o hero não gasta compositor (drift + pulso pausam). */
.hero.is-offscreen .hero__img,
.hero.is-offscreen .hero__scroll-line { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.85);
  white-space: nowrap;
}
/* O diferencial não pode depender de posição: em loop infinito não há "primeiro". */
.marquee__item--key { color: var(--cream); font-weight: 700; }
.marquee__diamond { color: var(--accent); }

/* MOMENTO — TESE (headline que atravessa a tela) ------------------------ */
.thesis {
  position: relative;
  height: 240vh;
  background: var(--ink);
}
.thesis__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.thesis__text {
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(90px, 22vh, 260px);
  line-height: 1;
  transform: translateX(5vw);
  will-change: transform;
}
.thesis__stroke {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}
.thesis__lead {
  margin: 28px var(--pad-x) 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  color: rgba(var(--cream-rgb), 0.75);
}
/* Beat: a explicação chega DEPOIS da afirmação (p>0.5), na ordem retórica
   certa. Escondida só sob .js — sem script, sempre visível. */
.js .thesis__lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .thesis__lead.is-in { opacity: 1; transform: none; }

/* A legenda que nomeia o negative split enquanto ele acontece — em sussurro. */
.thesis__pace {
  position: absolute;
  right: var(--pad-x);
  bottom: 28px;
  margin: 0;
  height: 14px;
  min-width: 220px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.55);
  display: none; /* só existe na experiência com JS */
}
.js .thesis__pace { display: block; }
.thesis__pace-half {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.333s var(--ease);
}
.thesis__pace-half.is-on { opacity: 1; }

/* PILARES --------------------------------------------------------------- */
.pillars {
  background: var(--ink);
  padding: 0 var(--pad-x) clamp(64px, 9vw, 110px);
  border-bottom: 1px solid rgba(var(--cream-rgb), 0.12);
}
.pillars__list { border-top: 1px solid rgba(var(--cream-rgb), 0.16); }
.pillar {
  display: grid;
  grid-template-columns: minmax(56px, 120px) 1fr;
  align-items: baseline;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(18px, 2.5vw, 30px) 0;
  border-bottom: 1px solid rgba(var(--cream-rgb), 0.16);
}
/* REGRA NUMÉRICA da página: índice de SEÇÃO = pequeno, sólido, no eyebrow
   ("km 01 /"); enumeração INTERNA grande = sempre Anton stroke accent (aqui e
   nos steps do método). O "/1" do problema é marcador de lista — formato
   distinto de propósito. Tese, pilares e duelo não numeram: são momentos. */
.pillar__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.pillar__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 3.2vw, 42px);
  line-height: 1.1;
  color: var(--cream);
}
.pillar__phrase {
  font-family: var(--font-body);
  text-transform: none;
  font-style: italic; /* terceira voz: o sussurro depois do grito Anton */
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 400;
  color: rgba(var(--cream-rgb), 0.6);
}

/* MOMENTO — DUELO (corrida → força) ------------------------------------- */
.duel {
  position: relative;
  height: 280vh;
  background: var(--ink);
}
.duel__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.duel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.duel__img--forca { object-position: 66% 32%; }
/* Cortina composited: o wrapper desliza para fora e a imagem compensa na
   direção oposta — a foto parece parada enquanto a janela encolhe. Isso
   composita em todos os engines; clip-path animado não. */
.duel__reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}
.duel__img--run {
  object-position: 50% 44%;
  will-change: transform;
}
/* A lâmina: a aresta do corte é um gesto, não um artefato de render. */
.duel__blade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 24px rgba(232, 86, 42, 0.75);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.duel__blade.is-on { opacity: 1; }
.duel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.3),
                              rgba(var(--ink-rgb), 0.55));
}
.duel__label {
  position: absolute;
  bottom: clamp(24px, 5vh, 56px);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 1;
}
.duel__label--a { left: var(--pad-x); color: var(--cream); }
.duel__label--b {
  right: var(--pad-x);
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  opacity: 0;
}
.duel__note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.9);
  background: rgba(var(--ink-rgb), 0.55);
  padding: 12px 22px;
  border-radius: var(--pill);
  backdrop-filter: blur(4px);
}
/* Beat: a frase CHEGA no meio do duelo (0.15<q<0.85), onde faz sentido —
   não mora 280vh parada na tela. Só sob .js. */
.js .duel__note {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .duel__note.is-in { opacity: 1; transform: translate(-50%, -50%); }

/* SOBRE ----------------------------------------------------------------- */
.about {
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch;
  border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}
.about__figure {
  margin: 0;
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.about__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.about__body {
  padding: clamp(48px, 7vw, 100px) clamp(20px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
}
.about__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  color: var(--cream);
}
.about__text {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.82);
  max-width: 52ch;
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(var(--cream-rgb), 0.16);
  border: 1px solid rgba(var(--cream-rgb), 0.16);
  margin: 8px 0 0;
}
.stat { background: var(--surface); padding: 18px 16px; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  color: var(--accent);
}
.stat__label {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(var(--cream-rgb), 0.7);
}

/* ESPECIALIDADES -------------------------------------------------------- */
.services {
  background: var(--ink);
  padding: var(--section-y) var(--pad-x);
  border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}
.services__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.services__head {
  display: grid;
  gap: clamp(18px, 3vw, 36px);
  align-items: end;
}
.services__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.95;
  color: var(--cream);
}
.services__intro {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: rgba(var(--cream-rgb), 0.72);
}
.services__grid {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: rgba(var(--cream-rgb), 0.14);
  border: 1px solid rgba(var(--cream-rgb), 0.14);
}
.service-card {
  position: relative;
  min-height: 320px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-card__num {
  display: block;
  margin-bottom: clamp(44px, 6vw, 82px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.service-card__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--cream);
}
.service-card__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.7);
}
.service-card__meta {
  margin: auto 0 0;
  padding-top: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 880px) {
  .services__head { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); }
}

/* PROBLEMA -------------------------------------------------------------- */
.problem {
  background: var(--paper);
  color: var(--ink);
  padding: var(--section-y) var(--pad-x);
}
.problem__grid {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
/* As duas colunas e o aside pinado nascem juntos, de propósito: em coluna única
   o sticky pararia o título justamente sobre o caminho da lista, e os textos se
   sobrepõem. Um não pode existir sem o outro. */
@media (min-width: 880px) {
  .problem__grid { grid-template-columns: 1fr 1fr; }
  .problem__aside { position: sticky; top: var(--sticky-top); }
}
.problem__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.problem__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.98;
}
.problem__text {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text-paper);
}
.problem__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.problem__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}
.problem__num {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent-deep);
}
/* Último item: deixa de ser queixa e vira necessidade — ponte para a tese. */
.problem__item--pivot {
  color: var(--accent-deep);
  font-weight: 600;
  border-bottom-color: rgba(var(--ember-rgb), 0.4);
}

/* MÉTODO ---------------------------------------------------------------- */
.method {
  background: var(--ink);
  padding: var(--section-y) var(--pad-x);
}
.method__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.method__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1;
  color: var(--cream);
}
.method__text {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.8);
}
.method__steps {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.step {
  position: relative;
  border-top: 2px solid var(--accent);
  padding-top: 22px;
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.step__title {
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--cream);
}
.step__text {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.75);
}

/* PLANO É REAL ---------------------------------------------------------- */
.plan {
  background: var(--paper);
  color: var(--ink);
  padding: var(--section-y) var(--pad-x);
  overflow: hidden;
}
.plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.plan__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.plan__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.98;
}
.plan__text {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--text-paper);
}
.plan__tags {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag {
  border: 1px solid var(--paper-chip);
  border-radius: var(--pill);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-paper);
}
/* As duas folhas se sobrepõem de propósito (mesa de trabalho), mas a altura da
   galeria precisa acompanhar o tamanho real delas: são absolutas e não empurram
   o container. Valores derivados da proporção 4:3 das fotos. */
.plan__gallery {
  position: relative;
  min-height: clamp(340px, 42vw, 560px);
}
.plan__sheet {
  position: absolute;
  border-radius: 6px;
  transition: transform 0.334s var(--ease);
}
/* Mobile: uma coluna só — as folhas crescem e a caixa encolhe para o que elas
   de fato ocupam, sem vazar sobre o texto. */
@media (max-width: 700px) {
  .plan__gallery { min-height: 0; aspect-ratio: 4 / 3; }
  .plan__sheet--corrida { width: 78%; top: 0; }
  .plan__sheet--musculacao { width: 70%; bottom: 0; }
}
.plan__sheet--corrida {
  left: 0;
  top: 4%;
  width: 68%;
  box-shadow: 0 24px 48px rgba(var(--ink-rgb), 0.3);
  transform: rotate(-4deg);
}
.plan__sheet--corrida:hover { transform: rotate(-1deg) scale(1.02); }
.plan__sheet--musculacao {
  right: 0;
  bottom: 0;
  width: 62%;
  box-shadow: 0 24px 48px rgba(var(--ink-rgb), 0.35);
  transform: rotate(3deg);
}
.plan__sheet--musculacao:hover { transform: rotate(1deg) scale(1.02); }

/* FORMATOS -------------------------------------------------------------- */
.formats {
  background: var(--ink);
  padding: var(--section-y) var(--pad-x);
}
.formats__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.formats__title {
  margin: 0 0 clamp(32px, 5vw, 56px);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.98;
  color: var(--cream);
}
.formats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.format-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--cream-rgb), 0.12);
  overflow: hidden;
  border-radius: 4px;
}
.format-card__figure {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.format-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.5s var(--ease);
}
.format-card__figure:hover .format-card__img { transform: scale(1.04); }
.format-card__img--gym { object-position: 76% 34%; }
.format-card__img--mvd { object-position: 52% 38%; }
.format-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--pill);
}
.format-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  flex: 1;
}
.format-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.05;
  color: var(--cream);
}
.format-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(var(--cream-rgb), 0.8);
}
.format-card__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.format-card__subtitle {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.format-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.format-card__item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(var(--cream-rgb), 0.85);
}
.format-card__marker { color: var(--accent); }
.format-card__cta {
  margin-top: auto;
  gap: 8px;
  font-size: 15.5px;
  padding: 15px 24px;
}

/* PARA QUEM É ----------------------------------------------------------- */
.audience {
  position: relative;
  overflow: hidden;
  color: var(--cream);
}
.audience__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.audience__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.88) 0%,
                              rgba(var(--ink-rgb), 0.7) 100%);
}
.audience__inner {
  position: relative;
  padding: var(--section-y) var(--pad-x);
}
.audience__title {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 4.5vw, 64px);
  line-height: 1;
}
.audience__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.audience__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  background: rgba(var(--ink-rgb), 0.6);
  border: 1px solid rgba(var(--cream-rgb), 0.2);
  border-radius: 4px;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  backdrop-filter: blur(3px);
}
.audience__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}
.audience__closing {
  margin: clamp(32px, 5vw, 56px) 0 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.05;
  max-width: 24ch;
}

/* FAQ ------------------------------------------------------------------- */
.faq {
  background: var(--paper);
  color: var(--ink);
  padding: var(--section-y) var(--pad-x);
  border-top: 1px solid var(--paper-line-strong);
}
.faq__grid {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
/* Mesmo par indissociável do .problem__grid — ver comentário lá. */
@media (min-width: 760px) {
  .faq__grid { grid-template-columns: 1fr 1fr; }
  .faq__title { position: sticky; top: var(--sticky-top); }
}
.faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.98;
}
.faq__list { display: flex; flex-direction: column; }
.faq__item {
  border-bottom: 1px solid var(--paper-line);
  padding: 4px 0;
}
.faq__question {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question { transition: color var(--dur-micro) var(--ease); }
.faq__question:hover { color: var(--accent-deep); }
.faq__icon {
  font-family: var(--font-display);
  color: var(--accent-deep);
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
/* O + vira x — mesma família glífica do "corrida + força". */
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item[open] .faq__question { color: var(--accent-deep); }
/* Abertura suave onde o engine suporta (Chromium); nos demais, idêntico ao
   comportamento nativo atual — progressive enhancement puro. */
.faq__item { interpolate-size: allow-keywords; }
.faq__item::details-content {
  transition: height 0.333s var(--ease-inout), content-visibility 0.333s allow-discrete;
  height: 0;
  overflow: clip;
}
.faq__item[open]::details-content { height: auto; }
.faq__answer {
  margin: 0;
  padding: 0 0 20px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-paper);
}
.faq__link {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ember-rgb), 0.35);
  transition: border-color 0.25s var(--ease);
}
.faq__link:hover,
.faq__link:focus-visible { border-bottom-color: var(--accent-deep); }

/* CTA FINAL ------------------------------------------------------------- */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.final-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0.4;
}
.final-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.94) 0%,
                              rgba(var(--ember-rgb), 0.45) 130%);
}
.final-cta__inner {
  position: relative;
  padding: clamp(80px, 14vw, 180px) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
/* O último marco do percurso: km 01…07 → Chegada. */
.final-cta__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.final-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 8vw, 120px);
  line-height: 0.94;
  color: var(--cream);
}
.final-cta__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  color: rgba(var(--cream-rgb), 0.88);
}
.final-cta__cta { font-size: clamp(16px, 1.6vw, 19px); padding: 18px 36px; }
.final-cta__microcopy {
  margin: 0;
  font-size: 13.5px;
  color: rgba(var(--cream-rgb), 0.65);
}

/* RODAPÉ ---------------------------------------------------------------- */
.site-footer {
  background: var(--deep);
  color: rgba(var(--cream-rgb), 0.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px var(--pad-x);
  font-size: 13px;
}
/* Assinatura do autor: presente, mas subordinada à marca do cliente. */
.site-footer__credit {
  flex: 1 0 100%;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--cream-rgb), 0.1);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.6); /* piso AA sobre --deep */
}
.site-footer__link {
  display: inline-block;
  padding: 6px 2px;   /* alvo de toque; margem negativa preserva o ritmo */
  margin: -6px -2px;
  color: rgba(var(--cream-rgb), 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--cream-rgb), 0.25);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.site-footer p { margin: 0; }
.site-footer__brand {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--cream);
}
.site-footer__brand span { color: var(--accent); }

/* O PACE DO LEITOR — HUD que converte a velocidade do SEU scroll em min/km.
   Um sussurro que o visitante descobre, não um widget. Some no mobile (rodapé
   de tela denso) e sob reduced-motion. */
.pace-hud {
  position: fixed;
  left: var(--pad-x);
  bottom: 16px;
  z-index: 40;
  pointer-events: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(var(--ink-rgb), 0.55);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: var(--pill);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.pace-hud.is-live { opacity: 0.85; }
.pace-hud span {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
@media (max-width: 700px) { .pace-hud { display: none; } }

/* Momentos no mobile: mesmo arco, metade do túnel — 240/280vh de pin em
   tela portrait é corredor demais para recompensa de menos. */
@media (max-width: 700px) {
  .thesis { height: 180vh; }
  .duel { height: 200vh; }
}

/* Viewport baixo (laptop 13"): o marquee já sinaliza continuação; o hint
   colidiria com a zona mais densa do hero. */
@media (max-height: 760px) {
  .hero__scroll-hint { display: none; }
}

/* Touch: blur contínuo sobre 100vw custa caro em Android mid-range e o efeito
   é imperceptível — compensa-se com opacidade. */
@media (pointer: coarse) {
  .site-header { backdrop-filter: none; }
  .audience__item { backdrop-filter: none; background: rgba(var(--ink-rgb), 0.72); }
  .duel__note { backdrop-filter: none; background: rgba(var(--ink-rgb), 0.68); }
}

/* 6) REDUCED MOTION ------------------------------------------------------
   Regra do projeto: reduzir MOVIMENTO preservando SIGNIFICADO. Os momentos
   sticky viram composições estáticas legíveis — nunca conteúdo perdido. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0s !important;   /* sem isso, os delays do hero deixam a página vazia por 1s */
    transition-delay: 0s !important;
  }
  /* Tese: bloco estático (o JS também normaliza o texto inline). */
  .thesis { height: auto; }
  .thesis__sticky { position: static; height: auto; padding: var(--section-y) 0; }
  /* Duelo: split-screen 50/50 — as DUAS metades do conceito visíveis,
     lâmina parada no meio. Sem isso, a foto de corrida cobre a de força
     para sempre e metade da tese da página não existe para quem pede
     menos movimento. */
  .duel { height: auto; }
  .duel__sticky { position: static; height: 100svh; }
  .duel__reveal { transform: translate3d(-50%, 0, 0); }
  .duel__img--run { transform: translate3d(50%, 0, 0); }
  .duel__label--b { opacity: 1; }
  .duel__blade { left: 50%; opacity: 1; }
  .pace-hud, .thesis__pace { display: none; }
}