/* Aprumo — landing (aprumo.app), direção "Prumo Luminoso" (rodada 3).
   Tokens em /css/tokens.css. Aurora vibrante no quadro de abertura, miolo claro
   e calmo, produto flutuando em primeiro plano, fio de prumo de luz descendo a
   página. Gradiente só onde há decisão ou clímax: hero, CTA primário, fio,
   seção 8. Motion em /js/landing.js + view-timeline aqui, com fallback estático. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h3{font-weight:600;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
a{color:inherit}
button,input{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent-wash)}

.wrap{max-width:1180px;margin:0 auto;padding:0 36px}

/* Rótulo em sans — título de região dentro dos painéis e chamadas de ação. */
.tick{font-size:13px;font-weight:600;line-height:1.4;color:var(--muted)}
.tick.accent{color:var(--accent)}
.tick.strong{color:var(--ink)}
.num{font-variant-numeric:tabular-nums}

/* Dois registros do rótulo em Switzer 500 — o traço de instrumento da marca.
   1) Metadado quieto: frescor, origem, período, unidade. Sentence case.
   2) Eyebrow de seção: caixa-alta e tracking largo, o "label" do specimen.
   Mono nunca em texto corrido. A regra 2 vem depois da 1 de propósito: mesma
   especificidade, e o eyebrow precisa vencer em .sec-head .tick.num. */
.tick.num{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.04em}
.sec-head .tick,.belief .tick{
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
}

/* Badge/pílula com dot de gradiente */
.badge,.kick{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  font-size:13px;font-weight:600;color:var(--muted);
}
.badge .dot,.kick .dot{width:7px;height:7px;border-radius:999px;background:var(--grad-brand);flex:none}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:100;
  background:var(--surface-elev);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:10px 16px;font-weight:600;text-decoration:none;
}
.skip-link:focus-visible{left:12px}

/* ===== Botões ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 26px;border:1px solid transparent;
  border-radius:999px;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-position .45s ease,border-color .2s ease,transform .18s ease,box-shadow .25s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{
  background:var(--grad-cta);background-repeat:no-repeat;background-size:200% 100%;background-position:0% 0;background-color:#0D6E8C;
  color:#fff;
  box-shadow:0 12px 28px -14px rgba(79,70,229,.55),0 3px 10px -4px rgba(13,110,140,.45);
}
.btn.primary:hover{
  background-position:75% 0;transform:translateY(-1px);
  box-shadow:0 18px 36px -14px rgba(79,70,229,.6),0 4px 12px -4px rgba(13,110,140,.5);
}
.btn.secondary{
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  color:var(--ink);border-color:var(--line-strong);
}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
a.btn.primary:hover .arr{transform:translateY(2px)}

/* ===== Cabeçalho ===== */
/* O backdrop-filter fica: medido, custa ~20 ms de VizCompositorThread numa
   varredura de 2 s e ZERO main thread — e sem ele a headline da convicção
   atravessa a barra como texto nítido em qualquer opacidade até 96%.
   O que saiu foi o listener de scroll que alternava .scrolled (ver landing.js). */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease;
}
.js-nav .site-head:not(.scrolled){
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-head.scrolled{border-bottom-color:var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{background:var(--bg)}
  .js-nav .site-head:not(.scrolled){background:transparent}
  .site-head.scrolled{background:var(--bg)}
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:24px;
  letter-spacing:-.02em;line-height:1;text-decoration:none;color:var(--ink);
}
.site-nav{display:flex;align-items:center;gap:24px}
.site-nav > a{
  font-size:14.5px;font-weight:600;text-decoration:none;opacity:.82;
  transition:opacity .15s ease;
}
.site-nav > a:hover{opacity:1}
.site-nav .entrar{
  background:var(--grad-cta);background-repeat:no-repeat;background-size:180% 100%;background-position:0% 0;background-color:#0D6E8C;
  color:#fff;border-radius:999px;padding:9px 19px;font-weight:600;opacity:1;
  box-shadow:0 8px 18px -10px rgba(79,70,229,.5);
  transition:background-position .4s ease,box-shadow .25s ease,transform .15s ease;
}
.site-nav .entrar:hover{background-position:75% 0;transform:translateY(-1px)}
.theme-toggle{
  display:inline-flex;gap:2px;padding:2px;
  border:1px solid var(--line);border-radius:999px;
}
.theme-toggle button{
  width:34px;height:34px;padding:0;border:0;border-radius:999px;
  display:grid;place-items:center;background:transparent;color:var(--muted);
  cursor:pointer;transition:color .15s ease,background .15s ease;
}
.theme-toggle button:hover{color:var(--ink)}
.theme-toggle button[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== Hero — aurora + leitura flutuando ===== */
.hero{position:relative;overflow-x:clip}
.hero .wrap{position:relative;padding-top:72px;padding-bottom:72px}

.hero-aurora{position:absolute;inset:-80px 0 0;pointer-events:none;contain:layout paint style}
/* o drift pausa fora do hero e durante o scroll (JS) — parado é invisível a 6°/s */
.hero-aurora.drift-paused .drift{animation-play-state:paused}
.hero-aurora::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 46% at 12% 0%,rgba(0,180,216,.20),transparent 70%),
    radial-gradient(44% 42% at 86% 4%,rgba(139,92,246,.15),transparent 70%),
    radial-gradient(64% 52% at 50% -14%,rgba(13,110,140,.15),transparent 72%),
    radial-gradient(36% 32% at 66% 26%,rgba(79,109,245,.08),transparent 70%);
}
/* O blur(70px) saiu: medido, era o custo inteiro desta camada (~28 ms de main
   thread na varredura do hero) — encolher a camada não devolvia nada. Geometria
   e opacidade seguem as originais; quem suaviza agora são os stops largos do
   conic e a máscara radial, que também apaga os cantos do quadrado. */
.hero-aurora .drift{
  position:absolute;top:-46%;left:50%;width:120%;aspect-ratio:1;
  transform:translateX(-50%);
  background:conic-gradient(from 210deg at 50% 50%,
    transparent 0deg,rgba(0,180,216,.11) 78deg,rgba(79,109,245,.08) 150deg,
    rgba(139,92,246,.10) 222deg,transparent 330deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  opacity:.85;
}
[data-theme="dark"] .hero-aurora::before{
  background:
    radial-gradient(52% 46% at 12% 0%,rgba(56,214,245,.22),transparent 70%),
    radial-gradient(44% 42% at 86% 4%,rgba(167,139,250,.20),transparent 70%),
    radial-gradient(64% 52% at 50% -14%,rgba(24,151,188,.20),transparent 72%),
    radial-gradient(36% 32% at 66% 26%,rgba(109,134,255,.12),transparent 70%);
}
[data-theme="dark"] .hero-aurora .drift{
  background:conic-gradient(from 210deg at 50% 50%,
    transparent 0deg,rgba(56,214,245,.16) 55deg,rgba(109,134,255,.12) 130deg,
    rgba(167,139,250,.15) 205deg,transparent 300deg);
}

.hero-head{position:relative}
.hero-head h1{
  font-weight:700;font-size:clamp(40px,4.6vw,66px);
  letter-spacing:-.028em;line-height:1.06;margin:22px 0 0;max-width:1120px;
}
.h1-seg{display:inline-block}
.grad-text{
  background:var(--grad-cta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="dark"] .grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{background:none;color:var(--accent)}
}

.hero-body{
  position:relative;margin-top:44px;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:0 76px;align-items:start;
}
.hero-copy .sub{font-size:19px;line-height:1.65;color:var(--muted);max-width:44ch}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px}
.hero-status{margin-top:28px}

/* Painel de leitura — o produto em primeiro plano */
.leitura-col{align-self:start}
.leitura{
  background:var(--surface-elev);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
[data-theme="dark"] .leitura{border:1px solid var(--line);box-shadow:var(--shadow),var(--glow)}
.leitura-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--line);
}
.lrow{padding:16px 22px 18px;border-bottom:1px solid var(--line)}
.lrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lrow-top .nm{font-size:14.5px;font-weight:600}
/* inline-block para que a contagem possa congelar a largura em min-width —
   em elemento inline min-width não se aplica e cada dígito reflui a linha */
.lrow-top .v{display:inline-block;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow-top .d{font-size:13px;color:var(--muted);margin-left:10px}
.scale{position:relative;height:8px;border-radius:999px;margin-top:12px;background:var(--accent-wash)}
.scale .ref{
  position:absolute;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(13,110,140,.28),rgba(79,109,245,.26));
}
[data-theme="dark"] .scale .ref{background:linear-gradient(90deg,rgba(56,214,245,.30),rgba(109,134,255,.28))}
.scale .idx{
  position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 10px rgba(0,180,216,.55);
}
[data-theme="dark"] .scale .idx{box-shadow:0 0 12px rgba(56,214,245,.75)}
.leitura-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding:16px 22px;background:var(--surface);
}
.leitura-foot .np{font-size:13.5px}
.leitura-foot .np b{color:var(--accent);font-weight:600}
.leitura-foot a{text-decoration:none}
.leitura-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-strip{
  display:flex;gap:14px 36px;flex-wrap:wrap;list-style:none;
  margin:64px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
}
.hero-strip li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hero-strip li::before{content:"";width:7px;height:7px;background:var(--grad-brand);border-radius:999px;flex:none}

/* ===== Fio de prumo — nasce sob o hero, só com JS+motion ===== */
main{position:relative}
/* Fio no gutter esquerdo do container (nunca sobre texto): 17px antes da
   borda do .wrap (1180px centrado) em telas largas; some <1024px. */
.plumb-line{display:none;position:absolute;left:max(17px,calc(50% - 573px));top:0;width:2px;z-index:0;pointer-events:none}
/* Duas trancas, de propósito. `.anim-ready` só entra quando existe JS com
   IntersectionObserver e a redução de movimento está desligada (R7); o media
   query repete a condição porque ela é VIVA — se alguma regra que ESCONDE
   vivesse fora dele, desligar a redução com a página aberta a acenderia sem
   ninguém para desfazê-la. Nenhum estado inicial escondido fora daqui. */
@media (prefers-reduced-motion:no-preference){
  .anim-ready .plumb-line{display:block}
}
.plumb-line .cord{
  display:block;width:2px;height:100%;border-radius:2px;
  background:var(--grad-brand);opacity:.7;
  transform:scaleY(0);transform-origin:top;
  box-shadow:0 0 12px rgba(0,180,216,.35);
}
.plumb-line .bob{
  position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5px 0 0 -5.5px;
  border-radius:50%;background:var(--grad-dot);box-shadow:var(--glow);
  opacity:0;
}
@media (max-width:1023px){.plumb-line{display:none!important}}

/* ===== Seções 2–9 — miolo claro e calmo, faixas alternadas ===== */
.section{padding:104px 0}
.section .wrap{position:relative;z-index:1}
#demonstracao,#como-funciona,#conversoes{background:var(--surface)}
.sec-head{max-width:70ch;margin-bottom:56px}
.sec-head .tick{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px}
.sec-head .tick::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--grad-brand);flex:none}
.sec-head h2{font-size:clamp(32px,4.2vw,52px);max-width:24ch}
.sec-head .lead{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:62ch;margin-top:18px}

/* 2 · Demonstração — o instrumento em tamanho real */
.demo-panel{
  position:relative;
  background:var(--surface-elev);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
[data-theme="dark"] .demo-panel{border:1px solid var(--line)}
.demo-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding:16px 28px;border-bottom:1px solid var(--line);
}
.demo-main{padding:32px 28px 28px}
.demo-main h3{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,2.9vw,34px);letter-spacing:-.02em;max-width:22ch}
.demo-priority{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-top:28px;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.demo-priority .tick{display:block;margin-bottom:8px}
.demo-priority strong{display:block;font-size:15.5px}
.demo-priority p{color:var(--muted);font-size:13.5px;margin-top:4px;max-width:52ch}
.demo-priority a{align-self:center;text-decoration:none;white-space:nowrap}
.demo-priority a:hover{text-decoration:underline;text-underline-offset:3px}
.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr)}
.demo-metrics > div{padding:24px 24px 24px 0}
.demo-metrics > div + div{border-left:1px solid var(--line);padding-left:24px}
.demo-metrics .lbl{
  display:block;color:var(--muted);
  font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.04em;
}
.demo-metrics .val{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin:6px 0 3px;
}
.demo-metrics .dlt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.demo-metrics .scale{max-width:240px}
.demo-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px 20px;
  flex-wrap:wrap;padding:15px 28px;border-top:1px solid var(--line);background:var(--surface);
}
/* 3 · Problema — versões divergentes da mesma operação */
.compare{
  display:grid;grid-template-columns:1fr auto 1fr auto 1.12fr;align-items:stretch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.compare article{padding:32px 24px 32px 0}
.compare article .src{
  color:var(--muted);
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;
}
.compare article .big{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(23px,2.8vw,34px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin:8px 0 4px;
}
.compare article .why{color:var(--muted);font-size:13.5px}
.compare .vs{align-self:center;padding:0 26px 0 2px;color:var(--muted);font-size:22px;font-weight:400}
.compare .answer{
  background:var(--accent-wash);padding:32px 26px;
  border-radius:var(--radius);
}
/* peso segue 500: é o corte do rótulo, e o registro vem da caixa alta com
   tracking, não do peso. A Switzer TEM 600 disponível, então subir aqui seria
   escolha de ênfase e não necessidade — a premissa antiga, de que 600 viraria
   sintético, valia para o Plex Mono e não vale mais. */
.compare .answer .src{color:var(--accent)}
.compare-foot{color:var(--muted);font-size:14px;max-width:66ch;margin-top:24px}

/* 4 · Método — quatro passos */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.method-grid article{padding-top:0;border-top:1px solid var(--line-strong)}
.method-grid .tick{display:block;margin:22px 0 10px}
.method-grid h3{font-size:17.5px;margin-bottom:8px}
.method-grid p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* 5 · Princípios — seção quieta */
.principles{border-top:1px solid var(--line)}
.principles article{
  display:grid;grid-template-columns:56px minmax(200px,.9fr) 1.6fr;gap:24px;
  align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);
}
.principles .idx{
  color:var(--muted);font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;
}
.principles h3{font-size:18px}
.principles p{color:var(--muted);font-size:15px;line-height:1.6}

/* 6 · Conversões offline — o ciclo fechado */
.loop{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:start}
.loop-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.loop-steps li{
  display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding:19px 0;border-top:1px solid var(--line);
}
.loop-steps .idx{
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:2px;
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;
}
.loop-steps strong{font-size:15.5px}
.loop-steps p{color:var(--muted);font-size:14px;margin-top:3px;line-height:1.6}
.route-card{
  background:var(--surface-elev);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:28px;
}
[data-theme="dark"] .route-card{border:1px solid var(--line)}
.route{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.route .node{
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:13px 18px;font-weight:600;font-size:13.5px;white-space:nowrap;
}
.route .node.hub{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}
.route .link{position:relative;flex:1;min-width:34px;height:1px;background:var(--line-strong)}
.route .link::after{
  content:"";position:absolute;right:0;top:-3px;
  border-left:5px solid var(--line-strong);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.route-legend{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.route-note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px;line-height:1.6;
}
.route-note b{color:var(--ink);font-weight:600}

/* 7 · Confiança */
.trust{display:grid;grid-template-columns:.94fr 1.06fr;gap:64px;align-items:start}
.trust .sec-head{margin-bottom:0}
.trust-copy > p{font-size:17px;line-height:1.65;color:var(--muted);max-width:56ch}
.trust-list{list-style:none;margin:28px 0 0;padding:0}
.trust-list li{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-top:1px solid var(--line);font-size:15px;
}
.trust-list li::before{content:"";width:7px;height:7px;background:var(--grad-brand);border-radius:999px;flex:none}
.trust-copy .more{display:inline-block;margin-top:28px;font-weight:600;text-underline-offset:4px}
.trust-copy .more:hover{color:var(--accent)}

/* 8 · Convicção — clímax full-bleed */
.belief{position:relative;overflow:hidden;padding:150px 0;text-align:center;background:var(--grad-deep);color:#fff}
.belief::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 22% 0%,rgba(0,180,216,.22),transparent 70%),
    radial-gradient(42% 44% at 82% 100%,rgba(139,92,246,.20),transparent 70%);
}
.belief .wrap{position:relative}
/* centrado: o padding-left compensa o tracking que sobra depois da última
   letra, senão o rótulo lê deslocado à esquerda do eixo do h2 */
.belief .tick{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;color:#A9C6E8;padding-left:.14em}
.belief .tick::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--grad-brand);flex:none}
/* Composição em DUAS linhas ("Toda empresa merece / entender o próprio
   negócio."). Cuidado ao mexer: `max-width` em `ch` escala junto com o
   `font-size`, então mexer só no tamanho não muda quebra nenhuma — medido.
   Quem decide é a medida: em 19ch a segunda linha pedia 746 px e tinha 730,
   caindo para três linhas; 21ch cabe com ~31 px de folga, e o teto do clamp
   desce a 61 px (−4,7 %) para a mancha não crescer junto. */
.belief h2{color:#fff;font-size:clamp(36px,5vw,61px);letter-spacing:-.025em;max-width:21ch;margin:0 auto}
.belief p{color:#C4D2E8;font-size:17.5px;line-height:1.65;max-width:52ch;margin:24px auto 0}
.belief .more{display:inline-block;margin-top:28px;font-weight:600;color:#fff;text-underline-offset:4px}
.belief .more:hover{color:#9BE8FF}

/* 9 · CTA final — waitlist + conversa */
.interest{display:grid;grid-template-columns:1.04fr .96fr;gap:72px;align-items:start}
.interest .sec-head{margin-bottom:0}
.interest form{border-top:1px solid var(--line);padding-top:28px;display:grid;gap:16px}
.interest label > span{display:block;font-size:13.5px;font-weight:400;margin-bottom:8px}
.interest input[type="email"]{
  width:100%;min-height:52px;padding:0 16px;
  background:var(--surface-elev);border:1px solid var(--line-strong);
  border-radius:var(--radius);transition:border-color .15s ease,box-shadow .15s ease;
}
[data-theme="dark"] .interest input[type="email"]{background:var(--surface)}
.interest input[type="email"]::placeholder{color:var(--muted)}
.interest input[type="email"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.interest .btn{justify-self:start}
.consent-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted)}
.consent-check input{margin-top:3px;accent-color:var(--accent);flex:none}
.consent-check a{color:var(--ink)}
.interest form small{color:var(--muted);font-size:12px}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-ok{display:none;color:var(--accent);font-weight:600;font-size:15px;margin-top:14px}
.form-ok.show{display:block}
.talk{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.talk a{color:var(--ink);font-weight:600;text-underline-offset:4px}

/* ===== Rodapé ===== */
.site-foot{border-top:1px solid var(--line)}
.site-foot .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-top:30px;padding-bottom:30px;
}
.site-foot .brand{font-size:18px}
.site-foot p{color:var(--muted);font-size:13px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 6px;color:var(--muted);font-size:12.5px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ===== Consentimento (LGPD) — mecânica preservada, pele nova ===== */
.consent{
  position:fixed;z-index:60;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  background:var(--surface-elev);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:16px 20px;display:flex;flex-direction:column;gap:12px;
}
.consent[hidden]{display:none}
.consent p{font-size:13px;line-height:1.55;color:var(--muted)}
.consent p a{color:var(--ink)}
.consent .actions{display:flex;gap:8px;justify-content:flex-end}
.consent .btn-sm{
  min-height:40px;padding:8px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  font-weight:600;font-size:13.5px;transition:border-color .15s ease,filter .15s ease;
}
.consent .btn-sm:hover{border-color:var(--ink)}
.consent .btn-sm.primary{background:var(--grad-cta);color:#fff;border-color:transparent}
.consent .btn-sm.primary:hover{filter:brightness(1.08)}

/* ===== Responsivo ===== */
@media (max-width:1023px){
  .section{padding:80px 0}
  .loop,.trust,.interest{grid-template-columns:1fr;gap:44px}
  .method-grid{grid-template-columns:1fr 1fr;gap:36px 32px}
  .compare{grid-template-columns:1fr;border-bottom:0}
  .compare article{padding:22px 0;border-bottom:1px solid var(--line)}
  .compare .vs{padding:14px 0;font-size:18px}
  .compare .answer{border-bottom:0;padding:22px 20px;margin-top:8px}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .hero-body{grid-template-columns:1fr;gap:52px;margin-top:36px}
  .leitura-col{max-width:560px}
  .hero-strip{margin-top:52px}
}
@media (max-width:767px){
  html{scroll-padding-top:76px}
  .wrap{padding-left:20px;padding-right:20px}
  .site-head .wrap{height:62px}
  .site-nav{gap:12px}
  .hero .wrap{padding-top:40px;padding-bottom:48px}
  /* piso 33px (não 34): o display atual é ~6% mais largo que o anterior e a
     320px o h1 ganhava uma linha. De 340px para cima o recorte é idêntico. */
  .hero-head h1{font-size:clamp(33px,9vw,42px);line-height:1.08}
  .hero-copy .sub{font-size:17px}
  .ctas .btn{flex:1;justify-content:center;min-width:max-content}
  .leitura-head{padding:14px 16px}
  .lrow{padding:14px 16px 16px}
  .leitura-foot{padding:14px 16px}
  .hero-strip{gap:12px 24px}
  .site-foot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .section{padding:64px 0}
  .sec-head{margin-bottom:38px}
  .demo-bar{padding:13px 18px}
  .demo-main{padding:24px 18px}
  .demo-metrics{grid-template-columns:1fr}
  .demo-metrics > div{padding:16px 0}
  .demo-metrics > div + div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .demo-foot{padding:12px 18px}
  .method-grid{grid-template-columns:1fr;gap:30px}
  .principles article{grid-template-columns:36px 1fr;gap:8px 16px}
  .principles p{grid-column:2}
  .route-card{padding:20px 18px}
  .route .node{padding:11px 14px;font-size:12.5px}
  .belief{padding:96px 0}
  .interest .btn{justify-self:stretch}
}

/* ===== Motion — só quando o usuário permite ===== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Deriva lentíssima da aurora (CSS puro; congela em reduced-motion) */
  @keyframes aurora-turn{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}
  .hero-aurora .drift{animation:aurora-turn 60s linear infinite}

  /* ===== Entrada do hero — keyframes puros, sem gate de JS =====
     O hero nasce PINTADO: título e sub (o elemento LCP) entram só por
     translateY, que não desloca layout nem adia o paint. Antes eles nasciam em
     opacity 0 sob .anim-ready e a biblioteca decidia quando apareciam — uma corrida
     que na prática pintava o hero, apagava e reanimava.
     Sem .anim-ready aqui de propósito: roda sem JS. Em troca, nenhuma regra
     base pode esconder nada — quem esconde é o `from`, e todo keyframe termina
     visível com `both`; se a animação não rodar, fica o estado natural.
     Tempos herdados da timeline antiga, com a cauda encurtada de 1,81 s para
     1,48 s para não estar correndo quando o dedo começa a rolar. */
  @keyframes hero-assenta{from{transform:translateY(14px)}to{transform:none}}
  @keyframes hero-assenta-curto{from{transform:translateY(11px)}to{transform:none}}
  @keyframes hero-sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes hero-sobe-longe{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
  @keyframes hero-sobe-perto{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes hero-traca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes hero-marca{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

  .hero .kick{animation:hero-sobe .52s var(--e-saida) .06s both}

  /* Título e sub: translateY sem opacity — o texto está lá desde o primeiro
     quadro. Distância menor porque não há fade para mascarar o percurso. */
  .h1-seg{animation:hero-assenta .7s var(--e-assenta) .12s both}
  .h1-seg:nth-of-type(2){animation-delay:.21s}
  .h1-seg:nth-of-type(3){animation-delay:.3s}
  .hero-copy .sub{animation:hero-assenta-curto .62s var(--e-assenta) .4s both}

  .leitura-col{animation:hero-sobe-longe .8s var(--e-saida) .48s both}
  .ctas{animation:hero-sobe .56s var(--e-saida) .53s both}
  .hero-status{animation:hero-sobe .52s var(--e-saida) .62s both}

  .hero .scale .ref{transform-origin:left;animation:hero-traca .52s var(--e-inout) .7s both}
  .hero .lrow:nth-child(3) .scale .ref{animation-delay:.8s}
  .hero .lrow:nth-child(4) .scale .ref{animation-delay:.9s}
  .hero .scale .idx{animation:hero-marca .42s var(--e-volta) .86s both}
  .hero .lrow:nth-child(3) .scale .idx{animation-delay:.96s}
  .hero .lrow:nth-child(4) .scale .idx{animation-delay:1.06s}

  .hero-strip li{animation:hero-sobe-perto .46s var(--e-saida) .8s both}
  .hero-strip li:nth-child(2){animation-delay:.87s}
  .hero-strip li:nth-child(3){animation-delay:.94s}

  /* Reveal-on-scroll (seções 2–9) — coreografia fina chega nas fases B */
  .anim-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.21,1)}
  .anim-ready .reveal.in{opacity:1;transform:none}
  .anim-ready .reveal-d1{transition-delay:.09s}
  .anim-ready .reveal-d2{transition-delay:.18s}
  .anim-ready .reveal-d3{transition-delay:.27s}
}

/* === B1: seções 2-5 === */

/* 2 · Demonstração — palco de três atos */
.demo-stage{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:36px 60px;align-items:center}
.demo-acts{display:grid;gap:20px;align-content:center}
.act-lines{display:grid;gap:14px}
.act-line{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,1.7vw,23px);line-height:1.42;letter-spacing:-.012em;
  color:var(--ink);text-wrap:balance;
}
.act-dots{display:none;gap:8px}
.act-dots span{
  width:26px;height:4px;border-radius:999px;flex:none;
  background:var(--grad-brand);opacity:.25;
  transform:scaleX(.45);transform-origin:left;
}

.src-chips{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Chip de origem — registro alto do mono. O padding direito desconta o
   tracking que sobra depois da última letra, senão a pílula lê torta. */
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:4px calc(13px - .14em) 4px 13px;
  border:1px solid var(--line-strong);border-radius:999px;
  background:var(--surface-elev);color:var(--ink);white-space:nowrap;
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.chip::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--grad-brand);flex:none}
[data-theme="dark"] .chip{background:var(--surface)}

.demo-bar{position:relative}
.demo-beam{
  display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:var(--grad-brand);opacity:.8;
  transform:scaleX(0);transform-origin:left;
}

/* Ato c: o painel inteiro recua atrás de um véu único e a prioridade fica na
   frente — um tween de opacity no lugar dos nove que existiam por elemento. */
.demo-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--surface-elev);opacity:0;
}
.demo-priority{position:relative;z-index:2}
.demo-priority > div,.demo-priority > a{position:relative;z-index:1}
.pri-glow{
  position:absolute;inset:-1px -18px;z-index:0;border-radius:12px;pointer-events:none;
  border:1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb,var(--accent) 7%,var(--surface-elev)),color-mix(in srgb,var(--accent) 7%,var(--surface-elev))) padding-box,
    var(--grad-brand) border-box;
  box-shadow:0 0 18px rgba(0,180,216,.16);
}

/* 2 · sparklines das métricas (ilustrativas, família da marca) */
.demo-metrics .spark{display:block;width:100%;max-width:240px;height:32px;margin:12px 0 4px}
.spark-line{stroke-dasharray:1;stroke-dashoffset:0}

/* 2 · acabamento de hover do painel — sombra/glow sempre; a layer 3D do tilt
   só existe enquanto o ponteiro está sobre o painel (classe .tilting). */
.demo-panel{transition:box-shadow .35s ease}
.demo-panel:hover,.demo-panel:focus-within{
  box-shadow:var(--shadow),
    0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),
    0 0 44px rgba(0,180,216,.16);
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .anim-ready .demo-panel{transition:box-shadow .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  .anim-ready .demo-panel.tilting{
    transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  }
}

/* 2 · sparklines — traço one-shot ao entrar no ato b (nunca por frame de scrub) */
@media (prefers-reduced-motion:no-preference){
  @keyframes spark-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes spark-fade{from{opacity:0}to{opacity:1}}
  .anim-ready .spark-line{stroke-dashoffset:1}
  .anim-ready .spark-area{opacity:0}
  .anim-ready .sparks-in .spark-line{animation:spark-draw .5s cubic-bezier(.45,0,.55,1) both}
  .anim-ready .sparks-in .spark-area{animation:spark-fade .35s ease .28s both}
  .anim-ready .sparks-in .demo-metrics > div:nth-child(2) .spark-line{animation-delay:.1s}
  .anim-ready .sparks-in .demo-metrics > div:nth-child(3) .spark-line{animation-delay:.2s}
  .anim-ready .sparks-in .demo-metrics > div:nth-child(2) .spark-area{animation-delay:.38s}
  .anim-ready .sparks-in .demo-metrics > div:nth-child(3) .spark-area{animation-delay:.48s}
}

/* 3 · Problema — card Aprumo com borda gradiente + varredura */
#problema{overflow-x:clip}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:30px;max-width:118px;margin:10px 0 8px}
.mini-bars i{
  flex:1;height:calc(var(--h)*100%);border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg,rgba(0,180,216,.5),rgba(13,110,140,.18));
  transform-origin:bottom;
}
[data-theme="dark"] .mini-bars i{background:linear-gradient(180deg,rgba(56,214,245,.5),rgba(24,151,188,.16))}
.compare .answer{
  position:relative;overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb,var(--accent) 8%,var(--bg)),color-mix(in srgb,var(--accent) 8%,var(--bg))) padding-box,
    var(--grad-brand) border-box;
}

/* 4 · Método — a linha que conecta os passos (o fio dobrando) */
.method-line{display:none;position:relative;height:2px;margin-bottom:-2px;z-index:1;pointer-events:none}
.method-line span{
  display:block;height:2px;border-radius:2px;background:var(--grad-brand);
  opacity:.8;transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(0,180,216,.3);
}

@media (max-width:1023px){
  .demo-stage{grid-template-columns:1fr;gap:26px}
  .act-lines{gap:10px}
  .act-line{font-size:17px}
  .pri-glow{inset:-1px -12px}
}

/* Hovers ricos (B1) — sombra sempre; deslocamento só com motion permitido */
@media (hover:hover){
  .compare article{border-radius:var(--radius);transition:transform .3s ease,box-shadow .3s ease}
  .compare article:not(.answer):hover{box-shadow:0 18px 34px -22px rgba(11,21,38,.28)}
  .compare .answer{transition:transform .3s ease,box-shadow .3s ease}
  .compare .answer:hover{box-shadow:0 22px 44px -20px rgba(79,109,245,.35),0 0 34px rgba(0,180,216,.2)}
  .method-grid article{position:relative;transition:transform .3s ease}
  .method-grid article::after{
    content:"";position:absolute;top:-1px;left:0;right:0;height:2px;border-radius:2px;
    background:var(--grad-brand);opacity:0;transition:opacity .3s ease;pointer-events:none;
  }
  .method-grid article:hover::after{opacity:.9}
  .principles article{transition:background-color .3s ease}
  .principles article:hover{background:color-mix(in srgb,var(--surface) 65%,transparent)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .compare article:not(.answer):hover,.compare .answer:hover{transform:translateY(-3px)}
  .method-grid article:hover{transform:translateY(-4px)}
}

@media (prefers-reduced-motion:no-preference){
  .anim-ready .demo-beam{display:block}
}
@media (prefers-reduced-motion:no-preference) and (min-width:1024px){
  .anim-ready .method-line{display:block}
}

/* === B2: seções 6-9 === */

/* 6 · Rota ERP→Aprumo→Mídia — fio que se desenha + pulso de luz */
.route .link{height:2px;background:transparent;overflow:hidden;border-radius:2px}
.route .link::after{display:none}
.route .wire{
  position:absolute;inset:0;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  opacity:.8;transform-origin:left;
}
.route .tip{
  position:absolute;right:0;top:50%;margin-top:-3.5px;width:0;height:0;
  border-left:5px solid var(--accent-3);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.route .spark{
  position:absolute;top:-2px;bottom:-2px;left:0;width:46%;
  transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent);
}
[data-theme="dark"] .route .spark{background:linear-gradient(90deg,transparent,rgba(234,240,248,.9) 50%,transparent)}
.route .node.hub{box-shadow:0 0 20px -6px rgba(0,180,216,.4)}
[data-theme="dark"] .route .node.hub{box-shadow:0 0 22px -6px rgba(56,214,245,.45)}

/* 7 · Confiança — a honestidade em ênfase discreta */
.trust-copy .honest{color:var(--ink);font-weight:600}

/* 8 · Convicção — auroras que florescem na chegada (opacidade/transform via scrub) */
.belief-veil{position:absolute;inset:0;pointer-events:none;contain:layout paint style}
.belief-veil span{position:absolute;border-radius:50%}
.belief-veil .b1{width:46vw;height:46vw;min-width:420px;min-height:420px;left:-10vw;top:-18vw;background:radial-gradient(closest-side,rgba(0,180,216,.30),transparent 72%)}
.belief-veil .b2{width:52vw;height:52vw;min-width:460px;min-height:460px;right:-12vw;bottom:-20vw;background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent 72%)}
.belief-veil .b3{width:36vw;height:36vw;left:32%;top:24%;background:radial-gradient(closest-side,rgba(79,109,245,.20),transparent 72%)}
.belief-key{background:linear-gradient(100deg,#8AE7FF 0%,#A7BAFF 55%,#DCC9FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.belief-key{background:none;color:#9BE8FF}}
/* poço de luz onde o fio de prumo mergulha (só onde o fio existe) */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .anim-ready .belief-veil::before{
    content:"";position:absolute;top:-60px;left:max(17px,calc(50% - 573px));
    width:320px;height:58%;transform:translateX(-50%);
    background:radial-gradient(50% 50% at 50% 30%,rgba(0,180,216,.30),transparent 74%);
  }
}

/* 9 · Waitlist — card com borda gradiente 1px + glow no foco */
.interest form{
  border:1px solid transparent;border-radius:var(--radius-lg);
  padding:30px 28px;
  background:linear-gradient(var(--surface-elev),var(--surface-elev)) padding-box,var(--grad-brand) border-box;
  box-shadow:var(--shadow);
  transition:box-shadow .35s ease;
}
.interest form:focus-within{box-shadow:var(--shadow),0 0 36px -6px rgba(0,180,216,.35)}
[data-theme="dark"] .interest form:focus-within{box-shadow:var(--shadow),0 0 40px -6px rgba(56,214,245,.4)}

/* Rodapé — repintura coerente */
.site-foot{background:var(--surface)}
.site-foot .wrap{padding-top:40px;padding-bottom:40px}
.foot-links a:hover{color:var(--accent)}

@media (max-width:767px){
  .interest form{padding:22px 18px}
}
@media (max-width:480px){
  .route{gap:8px;flex-wrap:nowrap}
  .route .node{padding:9px 10px;font-size:12px}
  .route .link{min-width:16px}
}

/* 6 · Mini-gráfico da rota — conversões enviadas (ilustrativo) */
.route-chart{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.rc-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.rc-bar{display:flex;flex-direction:column;align-items:center;gap:7px}
.rc-val{font-size:13px;font-weight:600;color:var(--ink)}
.rc-track{display:block;width:100%;max-width:38px;height:118px;position:relative;border-radius:6px;background:color-mix(in srgb,var(--accent-wash) 55%,transparent);overflow:hidden}
.rc-fill{
  position:absolute;left:0;right:0;bottom:0;height:var(--h);
  border-radius:6px 6px 3px 3px;transform-origin:bottom;
  background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent-3) 100%);opacity:.92;
}
.rc-lbl{
  color:var(--muted);
  font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;
}

/* Hover rico — elevação/sombra/glow sempre; deslocamento só com motion */
.route-card{transition:box-shadow .3s ease,transform .3s ease}
.route-card:hover{box-shadow:var(--shadow),0 0 34px -10px rgba(0,180,216,.38)}
[data-theme="dark"] .route-card:hover{box-shadow:var(--shadow),0 0 38px -10px rgba(56,214,245,.42)}
.loop-steps li{margin:0 -14px;padding:19px 14px;border-radius:var(--radius);transition:background-color .25s ease,transform .25s ease}
.loop-steps li:hover{background:color-mix(in srgb,var(--surface-elev) 78%,transparent)}
.loop-steps li:hover .idx{color:var(--accent-3)}
.trust-list li::before{transition:transform .25s ease,box-shadow .25s ease}
.trust-list li:hover::before{transform:scale(1.45);box-shadow:0 0 10px rgba(0,180,216,.5)}
.interest form:hover{box-shadow:var(--shadow),0 0 28px -10px rgba(0,180,216,.24)}
[data-theme="dark"] .interest form:hover{box-shadow:var(--shadow),0 0 30px -10px rgba(56,214,245,.3)}

/* 8→9 · Amanhecer — a luz sobe na base da convicção antes da volta ao claro */
/* O `opacity:0` morava AQUI, na regra base: desde o rebrand a alvorada nunca
   apareceu sem JS nem em reduced-motion, porque só a biblioteca a reacendia. O estado
   oculto é do motion, então mudou para os guards junto com todo o resto. */
.belief-veil .dawn{
  left:0;right:0;bottom:-1px;height:280px;border-radius:0;
  background:linear-gradient(to top,rgba(240,247,255,.36),rgba(200,228,255,.12) 55%,rgba(240,247,255,0));
}
[data-theme="dark"] .belief-veil .dawn{background:linear-gradient(to top,rgba(76,195,232,.20),rgba(76,195,232,.07) 55%,rgba(76,195,232,0))}

/* Motion B2 — estados iniciais e pulso, só com JS e sem reduced-motion.
   A rota, o gráfico e a convicção eram `once` na biblioteca: viraram classe `.in`
   posta por IntersectionObserver + transition. Nada aqui roda por frame. */
@media (prefers-reduced-motion:no-preference){
  .anim-ready .route .node{opacity:0;transition:opacity .35s var(--e-saida),transform .35s var(--e-saida)}
  .anim-ready .route .node:not(.hub){transform:translateY(12px)}
  .anim-ready .route .node.hub{transform:scale(.92)}
  .anim-ready .route .wire{transform:scaleX(0);transition:transform .55s linear}
  .anim-ready .route .tip{opacity:0;transition:opacity .2s linear}
  /* a montagem segue a ordem do fio: nó, cabo, ponta, nó… */
  .anim-ready .route-card.in .node{opacity:1;transform:none}
  .anim-ready .route-card.in .wire{transform:scaleX(1)}
  .anim-ready .route-card.in .tip{opacity:1}
  /* nth-child, não nth-of-type: nó e elo são ambos <span> e o of-type não os
     distingue. Ordem no DOM: nó, elo, nó.hub, elo, nó. */
  .anim-ready .route-card.in .route > :nth-child(1){transition-delay:0s}
  .anim-ready .route-card.in .route > :nth-child(2) .wire{transition-delay:.3s}
  .anim-ready .route-card.in .route > :nth-child(2) .tip{transition-delay:.8s}
  .anim-ready .route-card.in .route > :nth-child(3){transition-delay:.85s}
  .anim-ready .route-card.in .route > :nth-child(4) .wire{transition-delay:1.15s}
  .anim-ready .route-card.in .route > :nth-child(4) .tip{transition-delay:1.65s}
  .anim-ready .route-card.in .route > :nth-child(5){transition-delay:1.7s}

  .anim-ready .rc-fill{transform:scaleY(0);transition:transform .7s var(--e-saida)}
  .anim-ready .rc-val{opacity:0;transform:translateY(8px);transition:opacity .4s ease .15s,transform .4s ease .15s}
  .anim-ready .route-chart.in .rc-fill{transform:scaleY(1)}
  .anim-ready .route-chart.in .rc-val{opacity:1;transform:none}
  .anim-ready .route-chart.in .rc-bar:nth-child(2) .rc-fill{transition-delay:.09s}
  .anim-ready .route-chart.in .rc-bar:nth-child(3) .rc-fill{transition-delay:.18s}
  .anim-ready .route-chart.in .rc-bar:nth-child(4) .rc-fill{transition-delay:.27s}
  .anim-ready .route-chart.in .rc-bar:nth-child(2) .rc-val{transition-delay:.24s}
  .anim-ready .route-chart.in .rc-bar:nth-child(3) .rc-val{transition-delay:.33s}
  .anim-ready .route-chart.in .rc-bar:nth-child(4) .rc-val{transition-delay:.42s}

  /* 8 · o título assenta UMA vez (era scale por frame de scrub). Propriedade
     `scale`, não `transform`: não disputa com hover nenhum. */
  @keyframes belief-assenta{from{scale:.96}to{scale:1}}
  .anim-ready .belief h2{scale:.96}
  .anim-ready .belief.in h2{animation:belief-assenta .7s var(--e-assenta) both}

  .route-card:hover{transform:translateY(-4px)}
  .loop-steps li:hover{transform:translateX(5px)}
  .interest form:hover{transform:translateY(-2px)}
  .interest form:focus-within{transform:translateY(-2px)}

  @keyframes spark-a{
    0%{transform:translateX(-120%)}
    30%{transform:translateX(340%)}
    100%{transform:translateX(340%)}
  }
  @keyframes spark-b{
    0%,32%{transform:translateX(-120%)}
    62%{transform:translateX(340%)}
    100%{transform:translateX(340%)}
  }
  .anim-ready .route .spark{animation:spark-a 5.6s ease-in-out infinite;animation-play-state:paused}
  .anim-ready .route .node.hub + .link .spark{animation-name:spark-b}
  .anim-ready .route-live .route .spark,
  .anim-ready .route-card.route-live .spark{animation-play-state:running}
}

/* ============================================================================
   2 · Demonstração — os TRÊS ATOS com pin em CSS nativo (R5, biblioteca removida)
   ============================================================================
   Estrutura: .demo-scene é alta e é o SUJEITO da view-timeline; .demo-stage
   gruda no topo e ocupa a tela. Rolar a cena inteira é o "pin".

     H = 260svh (altura da cena)      V = 100svh (altura do palco/tela)
     duração do pin = H − V = 160svh  ← idêntica ao `end:"+=160%"` da timeline antiga

   POR QUE FATIAR `cover` E NÃO `contain`: medido nos dois — `cover` é a única
   faixa cujos extremos são estáveis e cujo comprimento (H+V) não depende do
   engine. As fatias saem de:
     --pin0 = V/(H+V)     = 100/360 = 27,778 %   ← onde o sticky ENGATA
     --pinW = (H−V)/(H+V) = 160/360 = 44,444 %   ← quanto dura o pin
   e cada ato ocupa [a,b] dentro dessa janela.

   AS FRAÇÕES SÃO A TIMELINE ANTIGA DIVIDIDA POR 3,5. A timeline antiga tinha
   `duration = 3.5` e labels a=0 / b=1,1 / c=2,5. Cada tween virou uma fatia
   própria — f = t/3,5 — em vez de três fatias grossas: assim o stagger, a
   sobreposição entre atos e a troca de legendas ficam onde sempre estiveram.

   DUAS ARMADILHAS, as duas com marca de medição:
   1. `animation-duration` fica em `auto`. Duração explícita é ignorada por
      timeline de scroll em alguns engines e satura o progresso em 1.
   2. Os defaults de --a/--b moram em .demo-scene e chegam por HERANÇA. Se
      fossem declarados no mesmo bloco `:is()` que escreve o animation-range,
      venceriam as regras por elemento na cascata e TODO ato herdaria o pin
      inteiro. Valor herdado perde para qualquer valor declarado — de propósito.

   Só transform/opacity nas fatias de scrub: nada aqui provoca layout.
   Fora do gate (mobile, tela baixa, reduced-motion, sem JS) não existe pin
   nenhum — a seção é estática e completa.
   3. `view-timeline-inset:0` NÃO É ENFEITE. Por padrão o scrollport da
      timeline é o da rolagem COM scroll-padding — e html{scroll-padding-top:
      88px} encurta a faixa `cover` em 88px (medido: 3152 no lugar de 3240).
      Com o padding dentro da conta, pin0/pinW deixariam de ser constantes
      (viram função de V) e TODO ato dispararia adiantado — foi exatamente o
      que a primeira medição pegou. Zerar o inset devolve
      cover = [topo − tela, base + altura], que é o que a conta acima e o
      faixas() do JS assumem.
   ========================================================================== */

@media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  .anim-ready .demo-scene{position:relative;height:260svh}
  .anim-ready .demo-stage{position:sticky;top:0;min-height:100svh;align-content:center}
  /* as três legendas se revezam no mesmo lugar */
  .anim-ready .act-lines .act-line{grid-area:1/1}
  .anim-ready .act-dots{display:flex}
  /* sentinelas do ato: caixas que vão do ponto de disparo até o fim da cena.
     Marcador de 1px é PULADO entre quadros num fling — medido; a caixa alta,
     lida contra a metade de cima da tela, não tem como ser pulada. */
  .anim-ready .pin-cue{position:absolute;left:0;width:1px;bottom:-100svh;pointer-events:none}
}

/* `:not(.no-sdt)` em TODO seletor do branch nativo. Sem ele os dois branches
   coexistem num navegador que suporta view() e a animação vence a transition
   na cascata — o que torna impossível exercitar o fallback pondo a classe na
   mão. Com ele, `html.no-sdt` troca de branch de verdade, em qualquer
   navegador: é o que o dono usa para conferir o degrau discreto. */
@supports (animation-timeline: view()){
  @media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
    .anim-ready:not(.no-sdt) .demo-scene{
      view-timeline:--demo block;view-timeline-inset:0;
      --pin0:27.778%;--pinW:44.444%;
      --a:0;--b:1;
      /* equivalentes CSS das eases da biblioteca: power2.out (default da timeline)
         e power3.out/power2.inOut/back.out — as três últimas já em tokens.css */
      --e-p2:cubic-bezier(.215,.61,.355,1);
    }

    /* Bloco compartilhado: NÃO declara --a/--b (ver armadilha 2 acima). */
    .anim-ready:not(.no-sdt) .demo-stage :is(.chip,.demo-beam,.act-line,.act-dots span,
      .demo-main > h3,.demo-metrics > div,.scale .ref,.scale .idx,
      .demo-foot,.demo-priority,.pri-glow,.demo-veil){
      animation-timeline:--demo;
      animation-duration:auto;
      animation-fill-mode:both;
      animation-timing-function:var(--e-ato,var(--e-p2));
      animation-range:
        cover calc(var(--pin0) + var(--pinW)*var(--a))
        cover calc(var(--pin0) + var(--pinW)*var(--b));
    }

    @keyframes ato-chip{
      from{opacity:0;transform:translate3d(var(--cx),-96px,0) rotate(var(--cr)) scale(.8)}
      to{opacity:1;transform:none}
    }
    @keyframes ato-traca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes ato-sobe{from{opacity:var(--o0,0);transform:translateY(var(--y0))}to{opacity:1;transform:none}}
    @keyframes ato-clareia{from{opacity:var(--o0,0)}to{opacity:1}}
    @keyframes ato-marca{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
    @keyframes ato-veu{from{opacity:0}to{opacity:.4}}
    /* Legenda que ENTRA, espera e SAI numa fatia só. Seletor de keyframe não
       aceita var(), então cada revezamento tem o seu — as porcentagens são os
       instantes da timeline antiga (entrada, início da saída) medidos dentro da fatia. */
    @keyframes ato-legenda-1{
      0%{opacity:0;transform:translateY(18px)}
      26.32%{opacity:1;transform:none}
      80.7%{opacity:1;transform:none}
      100%{opacity:0;transform:translateY(-14px)}
    }
    @keyframes ato-legenda-2{
      0%{opacity:0;transform:translateY(18px)}
      20.83%{opacity:1;transform:none}
      84.72%{opacity:1;transform:none}
      100%{opacity:0;transform:translateY(-14px)}
    }
    @keyframes ato-legenda-fim{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    @keyframes ato-ponto-1{
      0%{opacity:.25;transform:scaleX(.45)}
      19.23%{opacity:1;transform:scaleX(1)}
      84.62%{opacity:1;transform:scaleX(1)}
      100%{opacity:.25;transform:scaleX(.45)}
    }
    @keyframes ato-ponto-2{
      0%{opacity:.25;transform:scaleX(.45)}
      15.63%{opacity:1;transform:scaleX(1)}
      87.5%{opacity:1;transform:scaleX(1)}
      100%{opacity:.25;transform:scaleX(.45)}
    }
    @keyframes ato-ponto-fim{from{opacity:.25;transform:scaleX(.45)}to{opacity:1;transform:scaleX(1)}}

    /* ---- ato a — os sinais chegam e conectam na barra ---- */
    .anim-ready:not(.no-sdt) .demo-bar .chip{animation-name:ato-chip;--e-ato:var(--e-saida)}
    .anim-ready:not(.no-sdt) .demo-bar .chip:nth-child(1){--a:0;--b:.1714;--cx:-150px;--cr:-7deg}
    .anim-ready:not(.no-sdt) .demo-bar .chip:nth-child(2){--a:.0343;--b:.2057;--cx:0px;--cr:0deg}
    .anim-ready:not(.no-sdt) .demo-bar .chip:nth-child(3){--a:.0686;--b:.24;--cx:150px;--cr:7deg}
    .anim-ready:not(.no-sdt) .demo-beam{--a:.1429;--b:.2857;animation-name:ato-traca;--e-ato:var(--e-inout)}

    /* ---- legendas: a sai quando b entra, b sai quando c entra ---- */
    .anim-ready:not(.no-sdt) .act-line:nth-child(1){--a:.0229;--b:.3486;animation-name:ato-legenda-1}
    .anim-ready:not(.no-sdt) .act-line:nth-child(2){--a:.3371;--b:.7486;animation-name:ato-legenda-2}
    .anim-ready:not(.no-sdt) .act-line:nth-child(3){--a:.7371;--b:.8229;animation-name:ato-legenda-fim}
    .anim-ready:not(.no-sdt) .act-dots span:nth-child(1){--a:0;--b:.3714;animation-name:ato-ponto-1}
    .anim-ready:not(.no-sdt) .act-dots span:nth-child(2){--a:.3143;--b:.7714;animation-name:ato-ponto-2}
    .anim-ready:not(.no-sdt) .act-dots span:nth-child(3){--a:.7143;--b:.7857;animation-name:ato-ponto-fim}

    /* ---- ato b — a leitura fica pronta ---- */
    .anim-ready:not(.no-sdt) .demo-main > h3{--a:.3143;--b:.4429;--o0:.12;--y0:18px;animation-name:ato-sobe}
    .anim-ready:not(.no-sdt) .demo-metrics > div{--o0:.1;--y0:16px;animation-name:ato-sobe}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(1){--a:.3486;--b:.4771}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(2){--a:.3771;--b:.5057}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(3){--a:.4057;--b:.5343}
    .anim-ready:not(.no-sdt) .demo-stage .scale .ref{transform-origin:left center;animation-name:ato-traca;--e-ato:var(--e-inout)}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(1) .scale .ref{--a:.4;--b:.5143}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(2) .scale .ref{--a:.4286;--b:.5429}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(3) .scale .ref{--a:.4571;--b:.5714}
    .anim-ready:not(.no-sdt) .demo-stage .scale .idx{animation-name:ato-marca;--e-ato:var(--e-volta)}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(1) .scale .idx{--a:.4429;--b:.5429}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(2) .scale .idx{--a:.4714;--b:.5714}
    .anim-ready:not(.no-sdt) .demo-metrics > div:nth-child(3) .scale .idx{--a:.5;--b:.6}
    .anim-ready:not(.no-sdt) .demo-foot{--a:.4571;--b:.5429;--o0:.45;animation-name:ato-clareia}

    /* ---- ato c — a prioridade se destaca, o painel recua atrás do véu ---- */
    .anim-ready:not(.no-sdt) .demo-priority{--a:.7143;--b:.8429;--o0:.08;--y0:14px;animation-name:ato-sobe}
    /* --o0:0 explícito: o glow mora DENTRO de .demo-priority, que declara
       --o0:.08, e custom property herda. Sem este reset a borda nasceria a 8%
       de opacidade em vez de apagada. */
    .anim-ready:not(.no-sdt) .pri-glow{--a:.7571;--b:.9;--o0:0;animation-name:ato-clareia}
    .anim-ready:not(.no-sdt) .demo-veil{--a:.7571;--b:.9;animation-name:ato-veu}
  }
}

/* ---------------------------------------------------------------------------
   Fallback html.no-sdt — MESMO sticky, atos discretos.
   O JS põe a classe quando !CSS.supports('animation-timeline','view()').
   As regras do branch nativo vivem sob @supports e as deste sob .no-sdt: os
   dois conjuntos não se sobrepõem, então não há disputa de cascata (e, se
   houvesse, animation vence transition de qualquer jeito).
   O estado é cumulativo via data-ato no palco, escrito pelas MESMAS sentinelas.
   ------------------------------------------------------------------------- */
@media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  .no-sdt.anim-ready .demo-stage :is(.chip,.demo-beam,.act-line,.act-dots span,
    .demo-main > h3,.demo-metrics > div,.scale .ref,.scale .idx,
    .demo-foot,.demo-priority,.pri-glow,.demo-veil){
    transition:opacity .4s var(--e-saida),transform .4s var(--e-saida);
  }
  .no-sdt.anim-ready .demo-bar .chip{opacity:0;transform:translateY(-96px) scale(.8)}
  .no-sdt.anim-ready .demo-beam{transform:scaleX(0)}
  .no-sdt.anim-ready .act-line{opacity:0;transform:translateY(18px)}
  .no-sdt.anim-ready .act-dots span{opacity:.25;transform:scaleX(.45)}
  .no-sdt.anim-ready .demo-main > h3{opacity:.12;transform:translateY(18px)}
  .no-sdt.anim-ready .demo-metrics > div{opacity:.1;transform:translateY(16px)}
  .no-sdt.anim-ready .demo-stage .scale .ref{transform:scaleX(0);transform-origin:left center}
  .no-sdt.anim-ready .demo-stage .scale .idx{opacity:0;transform:translateX(-26px)}
  .no-sdt.anim-ready .demo-foot{opacity:.45}
  .no-sdt.anim-ready .demo-priority{opacity:.08;transform:translateY(14px)}
  .no-sdt.anim-ready .pri-glow{opacity:0}
  .no-sdt.anim-ready .demo-veil{opacity:0}

  /* ato a */
  .no-sdt.anim-ready .demo-stage[data-ato="1"] .chip,
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .chip,
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .chip{opacity:1;transform:none}
  .no-sdt.anim-ready .demo-stage[data-ato="1"] .demo-beam,
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .demo-beam,
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .demo-beam{transform:scaleX(1)}
  .no-sdt.anim-ready .demo-stage[data-ato="1"] .act-line:nth-child(1),
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .act-line:nth-child(2),
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .act-line:nth-child(3){opacity:1;transform:none}
  .no-sdt.anim-ready .demo-stage[data-ato="1"] .act-dots span:nth-child(1),
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .act-dots span:nth-child(2),
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .act-dots span:nth-child(3){opacity:1;transform:scaleX(1)}
  /* ato b (cumulativo) */
  .no-sdt.anim-ready .demo-stage[data-ato="2"] :is(.demo-main > h3,.demo-metrics > div),
  .no-sdt.anim-ready .demo-stage[data-ato="3"] :is(.demo-main > h3,.demo-metrics > div){opacity:1;transform:none}
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .scale .ref,
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .scale .ref{transform:scaleX(1)}
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .scale .idx,
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .scale .idx{opacity:1;transform:none}
  .no-sdt.anim-ready .demo-stage[data-ato="2"] .demo-foot,
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .demo-foot{opacity:1}
  /* ato c (cumulativo) */
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .demo-priority{opacity:1;transform:none}
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .pri-glow{opacity:1}
  .no-sdt.anim-ready .demo-stage[data-ato="3"] .demo-veil{opacity:.4}
}

/* ---------------------------------------------------------------------------
   Fio de prumo — cord e peso em view-timeline (era um scrub da biblioteca).
   O sizeLine continua em JS (mede hero/convicção e escreve top, height,
   --plumb-h e as duas pontas da faixa), mas roda só em RESIZE: durante o
   scroll não há JS nenhum. As pontas vêm medidas porque as âncoras do motion
   ficavam em elementos DIFERENTES do fio (o fim do hero e o topo da
   convicção), e nenhuma faixa nomeada expressa isso sozinha.
   Receita idêntica em proposito.css — manter as duas em sincronia.
   Sem suporte: o fio fica desenhado — é decoração aria-hidden.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    .anim-ready:not(.no-sdt) .plumb-line{view-timeline:--plumb block;view-timeline-inset:0}
    .anim-ready:not(.no-sdt) .plumb-line :is(.cord,.bob){
      animation-timeline:--plumb;animation-duration:auto;animation-fill-mode:both;
      animation-timing-function:linear;
      animation-range:cover var(--plumb-r0,3%) cover var(--plumb-r1,60%);
    }
    @keyframes plumb-cord{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes plumb-bob{
      from{opacity:0;transform:translateY(0)}
      to{opacity:1;transform:translateY(calc(var(--plumb-h,0)*1px))}
    }
    .anim-ready:not(.no-sdt) .plumb-line .cord{animation-name:plumb-cord}
    .anim-ready:not(.no-sdt) .plumb-line .bob{animation-name:plumb-bob}
  }
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .no-sdt.anim-ready .plumb-line .cord{transform:scaleY(1)}
  .no-sdt.anim-ready .plumb-line .bob{display:none}
}

/* ---------------------------------------------------------------------------
   8 · Convicção — véu e alvorada em view-timeline (eram dois scrubs).
   A seção é mais BAIXA que a tela (613 px contra 900 no viewport de
   referência): as faixas nomeadas `entry`/`exit` só medem uma tela quando o
   sujeito é mais alto que ela, então aqui não servem. As quatro pontas vêm em
   porcentagem de `cover`, MEDIDAS pelo JS em resize — mesma receita do fio.
   Sem suporte a view(): estado final visível — que é também o que passou a
   valer sem JS, depois do conserto do .dawn.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .anim-ready .belief-veil{opacity:.2;transform:translateY(60px)}
  .anim-ready .belief-veil .dawn{opacity:0;transform:translateY(50px)}
  .no-sdt.anim-ready .belief-veil{opacity:1;transform:none}
  .no-sdt.anim-ready .belief-veil .dawn{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .anim-ready:not(.no-sdt) .belief{view-timeline:--belief block;view-timeline-inset:0}
    .anim-ready:not(.no-sdt) .belief :is(.belief-veil,.belief-veil .dawn){
      animation-timeline:--belief;animation-duration:auto;animation-fill-mode:both;
      animation-timing-function:linear;
    }
    @keyframes belief-floresce{from{opacity:.2;transform:translateY(60px)}to{opacity:1;transform:none}}
    @keyframes belief-alvorada{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
    .anim-ready:not(.no-sdt) .belief .belief-veil{animation-name:belief-floresce;animation-range:cover var(--veu0,3%) cover var(--veu1,45%)}
    .anim-ready:not(.no-sdt) .belief .belief-veil .dawn{animation-name:belief-alvorada;animation-range:cover var(--alva0,52%) cover var(--alva1,75%)}
  }
}

/* ---------------------------------------------------------------------------
   Hero — parallax de saída. `exit-crossing` é, medido, exatamente
   [topo do hero, base do hero]: o mesmo par `start:"top top"`/`end:"bottom top"`
   da timeline antiga, sem uma linha de JS. Usa a propriedade `translate` e não
   `transform` porque a entrada em keyframe do .leitura-col já ocupa o
   `transform` — as duas animações rodam sobre o mesmo elemento e precisam de
   propriedades distintas para não se sobrescreverem.

   ARMADILHA, medida em review: `animation-name` é lista e SUBSTITUI, não soma.
   Um bloco único declarando `animation-name:hero-desliza` para os dois
   elementos apagava a `hero-sobe-longe` do .leitura-col no desktop, junto com
   duration, delay e timing dela — o painel de leitura nascia imóvel enquanto o
   resto do hero subia em cascata, exatamente o que o comentário acima diz que
   NÃO acontece. Por isso os dois elementos foram separados: o .hero-aurora
   leva uma animação só, e o .leitura-col leva as duas, com todo longhand
   pareado na mesma ordem.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    .anim-ready:not(.no-sdt) .hero{view-timeline:--hero block;view-timeline-inset:0}
    @keyframes hero-desliza{from{translate:none}to{translate:0 var(--par,20px)}}
    .anim-ready:not(.no-sdt) .leitura-col{--par:48px}
    .anim-ready:not(.no-sdt) .hero-aurora{--par:20px}

    /* A .hero-aurora não tem entrada própria neste elemento: a dela mora no
       filho .hero-aurora .drift. Uma animação basta. */
    .anim-ready:not(.no-sdt) .hero-aurora{
      animation-name:hero-desliza;animation-timeline:--hero;animation-duration:auto;
      animation-fill-mode:both;animation-timing-function:linear;
      animation-range:exit-crossing;
    }
    /* O .leitura-col SOMA o parallax à entrada: entrada no tempo do documento,
       parallax na view-timeline. Um valor por animação, na ordem da lista. */
    .anim-ready:not(.no-sdt) .leitura-col{
      animation-name:hero-sobe-longe,hero-desliza;
      animation-timeline:auto,--hero;
      animation-duration:.8s,auto;
      animation-delay:.48s,0s;
      animation-timing-function:var(--e-saida),linear;
      animation-fill-mode:both,both;
      animation-range:normal,exit-crossing;
    }
  }
}

/* ---------------------------------------------------------------------------
   4 · Método — passos e linha conectora, one-shot por IO (`.in` na grade).
   `translate` em vez de `transform` para o hover translateY(-4px) continuar
   livre: as duas propriedades compõem em vez de disputar a cascata.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .anim-ready .method-grid article{
    opacity:0;translate:0 26px;
    transition:opacity .55s var(--e-saida),translate .55s var(--e-saida);
  }
  .anim-ready .method-grid.in article{opacity:1;translate:none}
  .anim-ready .method-grid.in article:nth-child(2){transition-delay:.08s}
  .anim-ready .method-grid.in article:nth-child(3){transition-delay:.16s}
  .anim-ready .method-grid.in article:nth-child(4){transition-delay:.24s}
  .anim-ready .method-line span{transition:transform .8s var(--e-inout)}
  .anim-ready .method-line.in span{transform:scaleX(1)}
}

/* ---------------------------------------------------------------------------
   2 · Demonstração no MOBILE — sem pin, reveals one-shot por IO.
   Espelha os tempos das timelines `once` que a biblioteca rodava abaixo de 1024px.
   ------------------------------------------------------------------------- */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  .anim-ready .act-line{opacity:0;translate:0 16px;transition:opacity .5s var(--e-saida),translate .5s var(--e-saida)}
  .anim-ready .demo-acts.in .act-line{opacity:1;translate:none}
  .anim-ready .demo-acts.in .act-line:nth-child(2){transition-delay:.12s}
  .anim-ready .demo-acts.in .act-line:nth-child(3){transition-delay:.24s}

  .anim-ready .demo-bar .chip{opacity:0;transform:translateY(-20px) scale(.9);transition:opacity .4s var(--e-saida),transform .4s var(--e-saida)}
  .anim-ready .demo-beam{transform:scaleX(0);transition:transform .45s var(--e-inout) .3s}
  .anim-ready .demo-main > h3{opacity:0;transform:translateY(18px);transition:opacity .45s var(--e-saida) .35s,transform .45s var(--e-saida) .35s}
  .anim-ready .demo-panel.in .chip{opacity:1;transform:none}
  .anim-ready .demo-panel.in .chip:nth-child(2){transition-delay:.1s}
  .anim-ready .demo-panel.in .chip:nth-child(3){transition-delay:.2s}
  .anim-ready .demo-panel.in .demo-beam{transform:scaleX(1)}
  .anim-ready .demo-panel.in > .demo-main > h3{opacity:1;transform:none}

  .anim-ready .demo-priority{opacity:0;transform:translateY(16px);transition:opacity .5s var(--e-saida),transform .5s var(--e-saida)}
  .anim-ready .pri-glow{opacity:0;transition:opacity .55s var(--e-saida) .2s}
  .anim-ready .demo-priority.in{opacity:1;transform:none}
  .anim-ready .demo-priority.in .pri-glow{opacity:1}

  .anim-ready .demo-metrics > div{opacity:0;transform:translateY(18px);transition:opacity .45s var(--e-saida),transform .45s var(--e-saida)}
  .anim-ready .demo-stage .scale .ref{transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--e-inout) .15s}
  .anim-ready .demo-stage .scale .idx{opacity:0;transform:translateX(-22px);transition:opacity .35s var(--e-volta) .3s,transform .35s var(--e-volta) .3s}
  .anim-ready .demo-metrics.in > div{opacity:1;transform:none}
  .anim-ready .demo-metrics.in > div:nth-child(2){transition-delay:.12s}
  .anim-ready .demo-metrics.in > div:nth-child(3){transition-delay:.24s}
  .anim-ready .demo-metrics.in .scale .ref{transform:scaleX(1)}
  .anim-ready .demo-metrics.in .scale .idx{opacity:1;transform:none}
}

/* Nota de demonstracao no rodape: linha propria, sem disputar o flex. */