/* John's Company · home em 8 partes (28/10). Construída dos quadros aprovados (_trabalho/objetivo-site/quadros) com a copy 05.
   Gramática: um tema (claro); o azul só em palco (DS v5 §2.1); sem rótulo acima do título; vidro = receita do portal v5 (l.87–105).
   Estado padrão = estado FINAL (04-movimento §5). O movimento (js do design-motion) só aplica estados iniciais, dentro de matchMedia.
   Ganchos de movimento: [data-mov], .lente/.luz/.j-acesa/.sublinha (parte 3), .cf-fio/.pm-cabeca/[data-passo]/[data-doc] (parte 5),
   .bal/.regua-t (parte 2), .lente4 (parte 6), .mao/.toque-luz/.j-acesa (parte 1). */

:root{
  --q-larg:1200px;--q-pad:clamp(16px,4vw,48px);--q-sec:128px;
  /* papéis e telas da cena (ilustração de UI real: planilha, WhatsApp) */
  --p-folha:#F6F3EE;--p-folha-clara:#FBFAF7;--p-chao:#EDE8DF;--p-dobra:#E2DCD0;
  --p-plan-barra:#E6E1D6;--p-plan-cab:#EFEAE1;--p-zap-chao:#E9E4DA;--p-zap-meu:#DDF0E4;--p-zap-tinta:#14232C;--p-zap-hora:#6A7C86;--p-zap-doc:#3F525C;
  --p-fone:#061016;--p-regua:#0A1C26;--p-apolo:#0B1F2B;
  --p-sobre-palco:#CFE3EA;--p-sobre-palco-2:rgb(207 227 234 / .78);
  --p-alerta:#B3261E;--p-ok:#157347;
  --p-fio:rgb(14 61 89 / .12);--p-fio-forte:rgb(14 61 89 / .3);
  --vidro-claro:radial-gradient(120% 70% at 18% 0%,rgb(255 255 255 / .55),transparent 60%),linear-gradient(rgb(246 243 238 / .46),rgb(246 243 238 / .46));
}
html{-webkit-text-size-adjust:100%}
body{background:var(--p-chao)}
::selection{background:var(--amarelo);color:var(--preto-marca)}
main img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--teal-vivo);outline-offset:3px}
.so-leitor{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grão: camada fixa, sem blend (04-movimento §6: blend em camada fixa recompõe a tela a cada quadro) */
.grao{position:fixed;inset:0;z-index:50;pointer-events:none;background:url('../assets/texturas/grao-220.webp');opacity:.035}

/* ── materiais ─────────────────────────────────────────────── */
.mesh-portal{background:var(--mesh-portal),var(--p-chao)}
.q-papel{background:var(--mat-papel)}
.q-claro{background:var(--mat-mesh-claro)}
/* vidro: portal v5 l.95–96, sem mudar valor */
.vidro{position:relative;isolation:isolate;background:var(--vidro-grao),var(--vidro-claro);
  box-shadow:var(--vidro-labios),var(--sombra-1);border-radius:var(--raio-painel-j)}
.vidro::before,.vidro-b::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--borda-ouro);
  -webkit-mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);-webkit-mask-composite:xor;mask:linear-gradient(white 0 0) content-box exclude,linear-gradient(white 0 0)}
.vidro>*,.vidro-b>*{position:relative;z-index:2}
/* vidro B do DS v5: só dentro do palco escuro */
.vidro-b{position:relative;isolation:isolate;background:var(--vidro-ambar),linear-gradient(160deg,rgb(14 61 89 / .42),rgb(14 61 89 / .60));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -1px 0 rgb(217 174 76 / .25),inset 0 18px 28px -22px rgb(255 255 255 / .18),0 2px 6px rgb(6 30 46 / .30),0 24px 60px -24px rgb(6 30 46 / .60)}
.vidro-b::before{padding:1px;background:linear-gradient(135deg,rgb(255 255 255 / .6),rgb(255 255 255 / .12) 28%,rgb(255 255 255 / 0) 45%,rgb(217 174 76 / 0) 58%,rgb(217 174 76 / .6) 88%,rgb(255 229 86 / .7))}
@media (prefers-reduced-transparency:reduce){
  .vidro{background:var(--off-white-placa)}
  .vidro-b{background:rgb(14 61 89 / .95)}
}
/* palco: janela escura dentro da página clara */
.q-palco{position:relative;overflow:hidden;margin:0;border-radius:var(--raio-palco-j);background:var(--mat-mesh-noite);color:#fff;
  box-shadow:0 2px 6px rgb(6 30 46 / .18),0 40px 80px -36px rgb(6 30 46 / .55),inset 0 0 0 1px rgb(217 174 76 / .22)}

/* ── tipo e grade ──────────────────────────────────────────── */
.q-sec{position:relative;padding:var(--q-sec) var(--q-pad);overflow-x:clip}
.q-larg{max-width:var(--q-larg);margin:0 auto}
.q-h2{margin:0;font:900 clamp(36px,4.4vw,60px)/1.02 var(--f-titulo);letter-spacing:-.03em;color:var(--titulo);text-wrap:balance;max-width:17ch}
.q-lead{margin:20px 0 0;font:400 clamp(18px,1.4vw,21px)/1.5 var(--f-texto);color:var(--titulo);max-width:44ch;text-wrap:pretty}
.q-corpo{margin:0;font:400 17px/1.55 var(--f-texto);color:var(--texto-secundario);max-width:60ch;text-wrap:pretty}
.q-nota{margin:0;font:600 14px/1.45 var(--f-texto);color:var(--texto-secundario)}
.q-nota b{color:var(--titulo)}
.q-sub{margin:0;font:800 15px/1.3 var(--f-texto);color:var(--titulo)}
.q-ilustr{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-secundario)}
.q-ilustr::before{content:"";width:18px;height:1.5px;background:var(--ouro)}
.q-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}
.q-cta .q-nota{max-width:42ch}
.q-palco .q-h2{color:#fff}
.q-palco .q-lead{color:var(--p-sobre-palco)}
.q-palco .q-nota,.q-palco .q-ilustr{color:var(--p-sobre-palco-2)}
.q-palco .q-corpo{color:var(--p-sobre-palco)}
.cab2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:40px}
.cab2 .q-lead{margin:0}

/* ════ PARTE 1 · TOPO ════ */
.topo{position:relative;overflow:hidden;padding:108px var(--q-pad) 40px}
.topo__titulo{max-width:1240px;margin:0 auto;text-align:center;font:900 clamp(44px,5.6vw,80px)/1.08 var(--f-titulo);letter-spacing:-.035em;color:var(--titulo);text-wrap:balance}
.topo__titulo em.jc-grifo{font-style:normal;color:var(--tinta-sobre-area);background:linear-gradient(transparent .16em,var(--amarelo) .16em)}
.topo__palco{position:relative;overflow:hidden;width:min(1360px,100%);height:292px;margin:36px auto 0;border-radius:var(--raio-palco-j);background:var(--mat-mesh-noite);
  box-shadow:var(--palco-sombra),inset 0 0 0 1px rgb(217 174 76 / .25)}
.topo__arte{position:absolute;inset:0;background:url('../assets/topo/escola-1672.webp') 50% 38%/cover no-repeat;opacity:.12;filter:grayscale(1);
  -webkit-mask:radial-gradient(70% 90% at 50% 50%,transparent 20%,#000 75%);mask:radial-gradient(70% 90% at 50% 50%,transparent 20%,#000 75%)}
.toque-luz{position:absolute;left:50%;top:50%;width:620px;height:420px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(240 208 122 / .42),rgb(62 155 211 / .22) 45%,rgb(28 103 148 / .10) 70%,transparent)}
.mao{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 16px 24px rgb(6 30 46 / .55))}
.mao--funcionario-ia{width:600px;left:calc(50% - 728px);top:96px}
.mao--humana{width:600px;left:calc(50% + 128px);top:44px}
.topo .j{position:absolute;left:50%;top:50%;width:140px;max-width:none;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 22px rgb(255 214 80 / .45)) drop-shadow(0 0 1px rgb(255 229 86 / .9))}
/* J aceso: estado final do movimento (04 §2). Fica por cima do J de vidro em opacidade baixa; o motion o leva de 0 a este valor */
.topo .j-acesa{position:absolute;left:50%;top:50%;width:132px;max-width:none;transform:translate(-50%,-50%);opacity:.35;pointer-events:none}
.topo__acao{position:relative;z-index:3;width:min(880px,100%);margin:-54px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 36px;align-items:end;padding:62px 28px 22px 32px}
.topo__acao .jc-lead{margin:0;font-size:18px;line-height:1.5;color:var(--titulo);max-width:46ch}
.topo__apoio{grid-column:1/-1;display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--p-fio)}
.topo__apoio p{margin:0;font:600 14px/1.45 var(--f-texto);color:var(--texto-secundario)}
@media (max-width:1100px){
  .mao--funcionario-ia{width:520px;left:calc(50% - 628px);top:104px}
  .mao--humana{width:520px;left:calc(50% + 108px);top:60px}
}
@media (max-width:760px){
  .topo{padding:92px 16px 32px}
  .topo__titulo{text-align:left;font-size:40px;line-height:1.06;letter-spacing:-.03em}
  .topo__palco{height:190px;margin-top:24px;margin-inline:-8px;width:calc(100% + 16px)}
  .toque-luz{width:360px;height:240px}
  .mao--funcionario-ia{width:290px;left:calc(50% - 340px);top:72px}
  .mao--humana{width:290px;left:calc(50% + 52px);top:46px}
  .topo .j{width:70px}.topo .j-acesa{width:66px}
  .topo__acao{margin-top:-40px;grid-template-columns:1fr;gap:18px;padding:56px 20px 20px}
  .topo__acao .jc-lead{font-size:17px}
  .topo__acao .jc-botao{width:100%}
}

/* ════ A TELA (partes 2 e 4: o mesmo componente) ════ */
.cenas{display:grid}
.cenas>.cena-t{grid-area:1/1;transition:opacity var(--m-curto) var(--m-entra),visibility 0s linear 0s}
.cenas>.cena-t:not([data-on]){opacity:0;visibility:hidden;transition:opacity var(--m-curto) var(--m-entra),visibility 0s linear var(--m-curto)}
.estado{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:20px 56px 0;font:600 14px/1.4 var(--f-texto);color:var(--p-sobre-palco)}
.estado b{font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--amarelo)}
.tela-mesa{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:end;padding:24px 56px 0}
.plan{position:relative;z-index:1;align-self:center;margin-right:-24px;border-radius:12px 12px 12px 3px;background:var(--p-folha);color:var(--teal-profundo);
  box-shadow:0 2px 4px rgb(6 30 46 / .25),0 30px 60px -20px rgb(6 30 46 / .6);overflow:hidden;font:600 13px/1 var(--f-texto)}
.plan__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--p-plan-barra);border-bottom:1px solid var(--p-fio)}
.plan__bar i{width:10px;height:10px;border-radius:50%;background:rgb(14 61 89 / .2)}
.plan__bar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:6px;font:700 13px/1 var(--f-texto)}
.plan table{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
.plan th{text-align:left;font:800 11px/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-secundario);padding:12px 14px;background:var(--p-plan-cab);border-bottom:1px solid var(--p-fio)}
.plan td{overflow:hidden;text-overflow:clip;padding:13px 14px;border-bottom:1px solid rgb(14 61 89 / .08);white-space:nowrap}
.plan th:last-child,.plan td:last-child{padding-right:40px}
.plan td.vazio::before,.plan td.cheio::before{content:"";display:inline-block;width:46px;height:10px;border-radius:2px;vertical-align:middle;background:repeating-linear-gradient(90deg,rgb(14 61 89 / .14) 0 6px,transparent 6px 9px)}
.plan td.cheio::before{width:62px;background:var(--teal-profundo);opacity:.55}
.plan tr.atual td{background:rgb(255 229 86 / .28)}
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font:800 11px/1 var(--f-texto)}
.st--espera{background:rgb(179 38 30 / .1);color:var(--p-alerta)}
.st--pronto{background:rgb(21 115 71 / .12);color:var(--p-ok)}
.fone{position:relative;z-index:2;justify-self:end;width:340px;border-radius:36px 36px 0 0;padding:10px 10px 0;background:var(--p-fone);
  box-shadow:0 0 0 1.5px rgb(217 174 76 / .35),0 40px 60px -20px rgb(0 0 0 / .6)}
.fone__tela{border-radius:28px 28px 0 0;overflow:hidden;background:var(--p-zap-chao)}
.fone__topo{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;background:var(--teal-profundo);color:#fff}
.fone__av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--p-sobre-palco);color:var(--teal-profundo);display:grid;place-items:center;font:800 13px/1 var(--f-texto)}
.fone__quem b{display:block;font:800 15px/1.2 var(--f-texto)}
.fone__quem small{font:600 12px/1.2 var(--f-texto);color:var(--p-sobre-palco)}
.fone__fio{display:grid;gap:8px;padding:14px 12px 22px;height:330px;align-content:start}
.fone__dia{justify-self:center;padding:4px 10px;border-radius:8px;background:rgb(255 255 255 / .7);font:800 11px/1 var(--f-texto);color:var(--texto-secundario);letter-spacing:.04em}
.bal{max-width:82%;margin:0;padding:9px 12px 7px;border-radius:12px 12px 12px 3px;background:#fff;color:var(--p-zap-tinta);font:400 14.5px/1.38 var(--f-texto);box-shadow:0 1px 1px rgb(6 30 46 / .12)}
.bal small{display:block;margin-top:3px;text-align:right;font:600 11px/1 var(--f-texto);color:var(--p-zap-hora)}
.bal--cobra{font-weight:800}
.bal--meu{justify-self:end;border-radius:12px 12px 3px 12px;background:var(--p-zap-meu)}
.bal--doc{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.doc-ic{grid-row:span 2;width:34px;height:42px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px rgb(14 61 89 / .25);position:relative}
.doc-ic::after{content:"PDF";position:absolute;left:4px;bottom:5px;font:800 9px/1 var(--f-texto);color:var(--p-alerta)}
.doc-ic--foto::after{content:"";inset:6px;left:6px;bottom:6px;border-radius:2px;background:linear-gradient(160deg,rgb(14 61 89 / .25),rgb(14 61 89 / .08))}
.bal--doc b{font:800 14px/1.2 var(--f-texto)}
.bal--doc span{font:600 12px/1.2 var(--f-texto);color:var(--p-zap-doc)}
.bal--linhas{display:grid;gap:6px;min-width:150px;padding:11px 12px}
.bal--linhas i{display:block;height:8px;border-radius:4px;background:rgb(20 35 44 / .16)}
.bal--linhas i:last-child{width:62%}
.olhado{justify-self:end;display:inline-flex;align-items:center;gap:6px;max-width:92%;text-align:right;font:800 11.5px/1.3 var(--f-texto);color:var(--teal-profundo)}
.olhado .jc-icone{flex:none;width:14px;height:14px;background:var(--p-ok)}
/* régua: a dor medida no tempo. ::before = trilho; ::after = trecho de ouro (o motion o recolhe com .arma). Padrão = inteira */
.regua-t{position:relative;z-index:3;grid-column:1/-1;margin:0 -56px;padding:24px 56px 28px;background:var(--p-regua);border-top:1px solid rgb(217 174 76 / .3);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.regua-t--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.regua-t::before,.regua-t::after{content:"";position:absolute;left:56px;right:56px;top:36px;height:2px;background:rgb(207 227 234 / .2)}
.regua-t::after{background:var(--ouro-claro);transform-origin:0 50%}
.marco{position:relative;margin:0;padding-top:26px;font:600 14px/1.45 var(--f-texto);color:var(--p-sobre-palco)}
.marco::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--teal-noite);box-shadow:0 0 0 2px var(--ouro-claro)}
.marco b{display:block;margin-bottom:4px;font:800 14px/1.2 var(--f-texto);color:#fff;font-variant-numeric:tabular-nums}
.marco--dor{color:#fff;font-weight:800}
.marco--dor b{color:var(--amarelo)}
.marco--dor::before{background:var(--amarelo);box-shadow:0 0 0 2px var(--amarelo),0 0 0 8px rgb(255 229 86 / .14)}

/* chips de tarefa */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;font:800 14.5px/1 var(--f-texto);color:var(--teal-profundo);
  background:rgb(246 243 238 / .7);box-shadow:inset 0 0 0 1.5px rgb(14 61 89 / .16);cursor:pointer;transition:transform var(--m-toque) var(--m-entra),background-color var(--m-curto) var(--m-entra),color var(--m-curto) var(--m-entra)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--teal-profundo);color:#fff;box-shadow:inset 0 0 0 1.5px var(--teal-profundo),0 10px 20px -10px rgb(14 61 89 / .6)}
.chip[aria-pressed="true"]::after{content:"";width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--amarelo)}
@media (hover:hover) and (pointer:fine){.chip:hover:not([aria-pressed="true"]){background:rgb(246 243 238 / .95)}}
.tarefa .q-h2{max-width:15ch}
.tarefa__pe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;margin-top:28px}
.tarefa__pe .q-cta{margin-top:0}
.tarefa__pe .q-corpo{color:var(--titulo);font-weight:600}

/* ════ PARTE 3 · QUEM ENTRA ════ */
.qe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.arte{margin:0}
.arte__img{position:relative;border-radius:var(--raio-palco-j);overflow:hidden;box-shadow:0 2px 6px rgb(6 30 46 / .18),0 40px 80px -36px rgb(6 30 46 / .55)}
.arte__img img{width:100%}
.arte__img svg{position:absolute;inset:0;width:100%;height:100%}
.peca .po-1{stop-color:var(--branco)}.peca .po-2{stop-color:var(--amarelo)}.peca .po-3{stop-color:var(--ouro)}.peca .po-4{stop-color:var(--ouro-degrade)}
.peca .pl-1{stop-color:var(--amarelo);stop-opacity:.55}.peca .pl-2{stop-color:var(--amarelo);stop-opacity:0}
.peca__luz{fill:url(#peca-luz)}
.peca__fio{fill:none;stroke:var(--teal-profundo);stroke-width:3;stroke-linecap:round}
.peca__corpo{fill:url(#peca-ouro);stroke:var(--branco);stroke-opacity:.75;stroke-width:1.5;filter:drop-shadow(0 0 6px rgb(255 214 80 / .55))}
.peca__brilho{fill:var(--branco);opacity:.7}
.arte__img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(217 174 76 / .3);pointer-events:none}
.arte figcaption{margin-top:12px}
.qe .q-h2{font-size:clamp(34px,3.4vw,46px);max-width:20ch}
.faz{margin:32px 0 0;padding:0;list-style:none}
.faz li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--p-fio);font:400 16px/1.5 var(--f-texto);color:var(--texto-secundario)}
.faz li:last-child{border-bottom:1px solid var(--p-fio)}
.faz b{font:800 16px/1.5 var(--f-texto);color:var(--titulo)}
/* Venn: 3 lentes de vidro falso (gradiente + borda, sem backdrop e sem blend) convergem no J. Padrão = estado final (sobrepostas) */
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:112px;padding:64px 72px}
.prof__arte{position:absolute;inset:0;background:url('../assets/topo/escola-1672.webp') 50% 40%/cover;opacity:.1;filter:grayscale(1)}
.venn{position:relative;width:min(100%,440px);aspect-ratio:1;justify-self:center}
.lente{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,rgb(255 255 255 / .2),rgb(28 103 148 / .24) 55%,rgb(13 37 51 / .08) 100%);
  box-shadow:inset 0 0 0 1.5px rgb(217 174 76 / .6),inset 0 0 42px rgb(240 208 122 / .08)}
.l1{left:22%;top:12.5%}.l2{left:13.6%;top:27%}.l3{left:30.4%;top:27%}
.papel{position:absolute;white-space:nowrap;font:800 15px/1.2 var(--f-texto);color:#fff}
.l1 .papel{left:50%;top:-1.7em;transform:translateX(-50%)}
.l2 .papel{left:-2%;bottom:-1.7em;transform:translateX(-30%)}
.l3 .papel{right:-2%;bottom:-1.7em;transform:translateX(30%)}
.luz{position:absolute;left:33%;top:33%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(255 229 86 / .55),rgb(217 174 76 / .18) 60%,transparent)}
.venn .j{position:absolute;left:41%;top:40%;width:18%;filter:drop-shadow(0 8px 18px rgb(255 214 80 / .45))}
.prof__txt{position:relative}
.prof__nome{margin:0;font:900 clamp(30px,3vw,44px)/1.05 var(--f-titulo);letter-spacing:-.025em;color:#fff}
.prof__nome span{position:relative;display:inline-block}
.sublinha{position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--ouro-claro);transform-origin:0 50%}
.prof__txt .q-corpo{margin-top:20px;max-width:44ch}
.prof__txt .q-nota{margin-top:24px}
/* a John's e o rosto: bloco próprio, depois da arte (05: a foto fica longe do "ele") */
.fundador{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;margin-top:72px;padding-top:48px;border-top:1px solid var(--p-fio)}
.retrato{position:relative;isolation:isolate;width:220px;margin:0;padding:10px 10px 14px;border-radius:var(--raio-painel-j);background:var(--mat-mesh-noite);
  box-shadow:0 2px 4px rgb(6 30 46 / .2),0 30px 50px -18px rgb(6 30 46 / .55)}
.retrato::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--borda-ouro);
  -webkit-mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);-webkit-mask-composite:xor;mask:linear-gradient(white 0 0) content-box exclude,linear-gradient(white 0 0)}
.retrato__foto{aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--raio-painel-j) - 6px);background:var(--p-apolo)}
.retrato__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.retrato figcaption{margin-top:12px;padding:0 4px;font:600 13px/1.35 var(--f-texto);color:var(--p-sobre-palco)}
.retrato figcaption b{display:block;font:800 16px/1.3 var(--f-texto);color:#fff}
.fundador__frase{margin:0;font:900 clamp(24px,2.4vw,34px)/1.12 var(--f-titulo);letter-spacing:-.02em;color:var(--titulo);max-width:22ch;text-wrap:balance}
.fundador .q-cta{margin-top:28px}

/* ════ PARTE 4 · DEPOIS ════ */
.comparar{--corte:52%;display:grid}
.comparar>.cmp{grid-area:1/1;display:grid}
.cmp__lado{grid-area:1/1;isolation:isolate}
.cmp__lado--antes{clip-path:inset(0 calc(100% - var(--corte)) 0 0);background:var(--mat-mesh-noite)}
.cmp__lado--depois{background:radial-gradient(60% 70% at 80% 30%,rgb(62 155 211 / .14),transparent)}
.cmp__lado .estado{max-width:48%;min-height:104px;padding-top:50px}
.comparar .regua-t{display:none}
.comparar .tela-mesa{padding-bottom:0}
/* a régua da P4: um texto por lado, fora da comparação, no papel */
.cmp-regua{margin-top:20px}
.cmp-regua>div{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px}
.cmp-regua>div[hidden]{display:none}
.cmp-regua>div::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:linear-gradient(90deg,var(--p-fio-forte) 50%,var(--ouro-claro) 50%)}
.cmp-regua .marco{color:var(--texto-secundario);max-width:52ch}
.cmp-regua .marco b{color:var(--titulo)}
.cmp-regua .marco--dor{color:var(--titulo)}
.cmp-regua .marco--dor b{color:var(--teal-profundo)}
.cmp__lado--depois .estado{justify-content:flex-end;text-align:right;margin-left:auto}
.alca{position:absolute;z-index:6;top:0;bottom:0;left:0;width:100%;pointer-events:none;transform:translateX(var(--corte))}
.alca::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgb(240 208 122 / 0),var(--ouro-claro) 12%,var(--ouro-claro) 88%,rgb(240 208 122 / 0))}
.alca__botao{pointer-events:auto;touch-action:none;position:absolute;left:-28px;top:calc(50% - 28px);width:56px;height:56px;padding:0;border-radius:50%;border:0;cursor:ew-resize;display:grid;place-items:center;
  background:radial-gradient(120% 70% at 30% 0%,rgb(255 255 255 / .55),transparent 60%),rgb(246 243 238 / .9);
  box-shadow:inset 0 0 0 1.5px var(--ouro),0 10px 24px -8px rgb(6 30 46 / .6)}
.alca__botao:focus-visible{outline:3px solid #fff;outline-offset:3px}
.alca__botao span{display:flex;gap:2px}
.alca__botao .jc-icone{width:16px;height:16px;background:var(--teal-profundo)}
.alca__botao .esq{transform:scaleX(-1)}
.rot-cmp{position:absolute;z-index:5;top:22px;font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--p-sobre-palco);pointer-events:none}
.rot-cmp--a{left:28px}.rot-cmp--d{right:28px;color:var(--amarelo)}
.arraste{margin:14px 0 0;font:600 14px/1.4 var(--f-texto);color:var(--texto-secundario)}
.dep__chips{margin-top:20px}
.cmp-texto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dep__baixo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center;margin-top:56px}
.controle{margin:0;padding:12px 28px}
.controle div{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--p-fio)}
.controle div:first-child{border-top:0}
.controle dt{font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--texto-secundario)}
.controle dd{margin:0;font:800 19px/1.35 var(--f-texto);color:var(--titulo)}
.frases{display:grid;gap:18px;align-content:start}
.frase{margin:0;font:900 clamp(24px,2.1vw,30px)/1.12 var(--f-titulo);letter-spacing:-.02em;color:var(--titulo);text-wrap:balance}
.frases .q-cta{margin-top:12px}

/* ════ PARTE 5 · COMO FUNCIONA ════ */
.cf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 72px;align-items:start;margin-top:64px}
.cf-mesa{position:sticky;top:112px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.doc{position:relative;min-height:236px;padding:18px 16px 54px;border-radius:8px 8px 8px 2px;background:var(--p-folha-clara);color:var(--teal-profundo);
  box-shadow:0 1px 2px rgb(14 61 89 / .12),0 18px 36px -18px rgb(14 61 89 / .4)}
.doc::after{content:"";position:absolute;right:0;top:0;width:24px;height:24px;background:linear-gradient(225deg,var(--p-chao) 50%,var(--p-dobra) 50%);border-radius:0 8px 0 0}
.doc.aceso{box-shadow:0 0 0 1.5px var(--ouro),0 2px 4px rgb(14 61 89 / .14),0 30px 50px -22px rgb(14 61 89 / .55)}
.doc__t{margin:0 0 12px;padding-bottom:10px;border-bottom:1.5px solid var(--p-fio);font:800 15px/1.25 var(--f-texto)}
.doc__t small{display:block;margin-top:3px;font:600 11.5px/1.2 var(--f-texto);color:var(--texto-secundario)}
.doc ol,.doc ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font:600 12.5px/1.35 var(--f-texto)}
.doc ol{counter-reset:n}
.doc ol li{display:grid;grid-template-columns:18px 1fr;counter-increment:n}
.doc ol li::before{content:counter(n);font-weight:800;color:var(--ouro)}
.doc ul li{display:grid;grid-template-columns:18px 1fr;align-items:start}
.doc .jc-icone{width:13px;height:13px;margin-top:2px;background:var(--p-ok)}
.doc .tit{width:12px;height:12px;margin-top:3px;border-radius:2px;background:var(--ouro)}
.doc__pe{position:absolute;left:16px;right:16px;bottom:14px;margin:0;padding-top:9px;border-top:1px dashed rgb(14 61 89 / .2);font:800 11.5px/1.3 var(--f-texto)}
.doc__pe span{color:var(--texto-secundario);font-weight:600}
.assina{position:absolute;left:16px;bottom:14px;display:flex;gap:16px}
.assina i{width:64px;border-top:1px solid rgb(14 61 89 / .35);padding-top:5px;font:600 10.5px/1 var(--f-texto);font-style:normal;color:var(--texto-secundario)}
.cf-mesa__nota{grid-column:1/-1;margin-top:4px}
/* a linha do tempo: 7 passos, fio de ouro inteiro por padrão */
.cf-passos{position:relative;margin:0;padding:0 0 0 44px;list-style:none}
.cf-fio{position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--p-fio-forte);pointer-events:none}
.cf-fio i{position:absolute;inset:0;background:var(--ouro);box-shadow:0 0 12px rgb(217 174 76 / .6);transform-origin:50% 0}
.pm-cabeca{position:absolute;left:-4px;bottom:-5px;width:10px;height:10px;border-radius:50%;background:var(--amarelo);opacity:0}
.etapa{position:relative;margin:0 0 20px;padding:0;font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--texto-secundario)}
.etapa:not(:first-child){margin-top:40px}
.cf-passo{position:relative;padding:0 0 36px}
.cf-passo::before{content:"";position:absolute;left:-41px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 4px var(--p-chao)}
.cf-passo h3{display:flex;align-items:baseline;gap:12px;margin:0;font:800 20px/1.3 var(--f-texto);color:var(--titulo)}
.cf-passo h3 span{font:900 15px/1 var(--f-titulo);color:var(--teal-profundo);letter-spacing:0;font-variant-numeric:tabular-nums}
.cf-passo>p{margin:8px 0 0;font:400 16px/1.55 var(--f-texto);color:var(--texto-secundario);max-width:56ch}
.pronto{margin:12px 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--ouro);max-width:56ch;font:700 16px/1.45 var(--f-texto);color:var(--titulo)}
.selos{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.selos li{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px;font:800 13px/1.25 var(--f-texto);color:var(--teal-profundo);background:rgb(255 229 86 / .45);box-shadow:inset 0 0 0 1px rgb(217 174 76 / .7)}
.cf__intro{max-width:none}
.cf__pe{display:grid;gap:24px 48px;margin-top:48px;padding-top:32px;border-top:1px solid var(--p-fio)}
.cf__pe .q-corpo{max-width:none}
.cf__pe .q-cta{grid-column:1/-1;margin-top:8px}

/* ════ PARTE 6 · ANTES DA CONVERSA ════ */
.dg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.dg__apolo{position:relative;min-height:640px;margin:0;background:var(--p-apolo)}
.dg__apolo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.dg__apolo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgb(13 37 51 / .9)),linear-gradient(0deg,rgb(13 37 51 / .92),transparent 45%)}
.dg__quem{position:absolute;z-index:2;left:32px;bottom:28px;right:32px;margin:0;font:600 15px/1.45 var(--f-texto);color:var(--p-sobre-palco);max-width:34ch}
.dg__quem b{display:block;font:900 26px/1 var(--f-titulo);letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.dg__lado{padding:56px 56px 48px 32px;display:grid;align-content:center;gap:28px}
.dg__lado .q-h2{max-width:16ch;font-size:clamp(32px,3.4vw,48px)}
.dg__lado .q-lead{margin-top:-12px;max-width:52ch}
.cartao{display:grid;gap:16px;justify-items:start;padding:24px 24px 22px;border-radius:var(--raio-painel-j)}
.cartao>*{justify-self:stretch}.cartao>.q-ilustr{justify-self:start}
.cartao p{margin:0}
.primeiro{padding:16px 18px;border-radius:12px 12px 12px 3px;background:var(--amarelo);color:var(--teal-noite)}
.primeiro small{display:block;font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;margin-bottom:6px}
.primeiro p{font:700 16.5px/1.45 var(--f-texto)}
.lentes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.lente4{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgb(207 227 234 / .14);font:400 14.5px/1.45 var(--f-texto);color:var(--p-sobre-palco)}
.lente4 b{display:block;margin-bottom:2px;font:800 15px/1.3 var(--f-texto);color:#fff}
.q4{flex:none;width:24px;height:24px;margin-top:1px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.q4 i{border-radius:2px;background:rgb(207 227 234 / .16)}
.q4 i.on{background:var(--ouro-claro)}
.cartao__limite{font:800 14.5px/1.45 var(--f-texto);color:#fff}
.dg__passo{display:grid;gap:4px;padding:16px 0 0;border-top:1px solid rgb(207 227 234 / .14)}
.dg__passo b{font:800 16px/1.3 var(--f-texto);color:#fff}
.dg__passo span{font:400 15px/1.5 var(--f-texto);color:var(--p-sobre-palco)}
.dg__lado .q-cta{margin-top:0}

/* ════ PARTE 7 · PREÇO ════ */
.pr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.pr .q-h2{max-width:14ch}
.pr__def{margin-top:12px}
.escala{position:sticky;top:112px;margin:0;height:600px}
.escala__fig{position:absolute;inset:0}
.folha{position:absolute;border-radius:10px 10px 10px 2px;color:var(--teal-profundo)}
.folha__t{margin:0;padding-bottom:12px;border-bottom:1.5px solid var(--p-fio);font:800 15px/1.3 var(--f-texto)}
.folha__t small{display:block;margin-top:4px;font:600 12.5px/1.3 var(--f-texto);color:var(--texto-secundario)}
.holerite{left:0;right:134px;top:0;height:540px;padding:24px;background:var(--p-folha);box-shadow:0 1px 2px rgb(14 61 89 / .12),0 24px 48px -24px rgb(14 61 89 / .4)}
.holerite ul{margin:14px 0 0;padding:0;list-style:none}
/* v6.2: um fio na altura do recibo (0,55 do mês: 19.900 ÷ 30.000–37.700 = 53–66%): a figura diz "cerca de metade" sem número */
.holerite::before,.holerite::after{content:"";position:absolute;left:0;right:0;border-top:1.5px dashed rgb(217 174 76 / .7);pointer-events:none}
.holerite::before{top:45%}.holerite::after{display:none}
.holerite li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed rgb(14 61 89 / .16);font:800 15px/1.3 var(--f-texto);color:var(--titulo)}
.holerite li span{flex:none;width:11.5em}
/* traço proporcional ao salário, pela regra da CLT: férias + 1/3 e 13º somam 1/12 + 1/9 do salário (≈ 19 %); FGTS, 8 %. Sem valor em R$ */
.holerite li i{height:10px;border-radius:2px;background:var(--teal-profundo)}
.holerite .b-sal{flex:1}.holerite .b-fer{width:calc((100% - 11.5em - 14px) * .194)}.holerite .b-fgts{width:calc((100% - 11.5em - 14px) * .08);min-width:6px}
.recibo{left:28px;right:180px;bottom:60px;height:calc(540px * .55);padding:20px 22px;background:var(--p-folha-clara);box-shadow:inset 0 0 0 1.5px var(--ouro),0 2px 4px rgb(14 61 89 / .14),0 30px 50px -20px rgb(14 61 89 / .55)}
.recibo .folha__t{border-bottom:0;font-size:17px}
.recibo__v{position:absolute;left:22px;bottom:16px;margin:0;font:900 clamp(40px,3.6vw,52px)/1 var(--f-titulo);letter-spacing:-.03em;color:var(--titulo);font-variant-numeric:tabular-nums}
.recibo__v small{font-size:.45em;margin-right:.12em;vertical-align:.7em;letter-spacing:0}
.recibo__marca{position:absolute;right:20px;top:20px;width:28px;height:28px;background:url('../assets/logo/simbolo-noite.svg') center/contain no-repeat;opacity:.85}
.chave-esc{position:absolute;right:0;width:112px;padding-left:18px;font:600 12.5px/1.35 var(--f-texto);color:var(--texto-secundario)}
.chave-esc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;border:1.5px solid currentColor;border-left:0;border-radius:0 3px 3px 0}
.chave-esc b{display:block;font:800 13.5px/1.3 var(--f-texto);color:var(--titulo)}
.chave-esc--mes{top:0;height:540px;display:flex;flex-direction:column;justify-content:center;color:rgb(14 61 89 / .45)}
.chave-esc--area{right:auto;left:calc(100% - 126px);width:126px;padding-left:32px;bottom:60px;height:calc(540px * .55);display:flex;flex-direction:column;justify-content:center;color:var(--ouro)}
.chave-esc--area span{color:var(--texto-secundario)}
.escala figcaption{position:absolute;left:0;right:0;bottom:0;font:600 13px/1.45 var(--f-texto);color:var(--texto-secundario)}
.ancora{display:grid;gap:10px;margin-top:36px;padding:24px 0;border-top:1px solid var(--p-fio)}
.ancora__frase{margin:0;font:800 19px/1.45 var(--f-texto);color:var(--titulo);max-width:52ch}
.valores{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;margin:8px 0 0;padding:0;list-style:none}
.valor{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:8px;align-items:baseline;padding:24px 0;border-top:1px solid rgb(14 61 89 / .14)}
.valor:last-child{border-bottom:1px solid rgb(14 61 89 / .14)}
.valor__n{margin:0;font:900 clamp(48px,5.4vw,76px)/.9 var(--f-titulo);letter-spacing:-.04em;color:var(--titulo);font-variant-numeric:tabular-nums;white-space:nowrap}
.valor__n small{font-size:.42em;letter-spacing:-.02em;margin-right:.12em;vertical-align:.55em}
.valor__o{margin:0;font:400 17px/1.45 var(--f-texto);color:var(--texto-secundario)}
.valor__o b{display:block;font:800 18px/1.35 var(--f-texto);color:var(--titulo)}
.inclui{margin:40px 0 0}
.inclui ul{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.inclui li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid rgb(14 61 89 / .08);font:600 15px/1.45 var(--f-texto);color:var(--titulo)}
.inclui .jc-icone{width:16px;height:16px;margin-top:3px;background:var(--ouro)}
.aparte{display:grid;gap:6px;margin-top:28px}
.paga{margin-top:36px;display:grid;gap:14px}
.metades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;font:800 15px/1.3 var(--f-texto);color:var(--titulo)}
.metades span{padding-top:10px;border-top:2px solid var(--p-fio-forte)}
.metades span+span{border-top-color:var(--ouro)}
.paga__texto{margin:0;font:600 17px/1.55 var(--f-texto);color:var(--titulo);max-width:60ch}
.programa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 72px;margin-top:96px;padding-top:56px;border-top:1px solid rgb(14 61 89 / .2)}
.programa__t{margin:0;font:900 clamp(28px,2.8vw,40px)/1.05 var(--f-titulo);letter-spacing:-.025em;color:var(--titulo)}
.programa .q-corpo{margin-top:14px}
.valores--programa{margin:0}
.valores--programa .valor{padding:18px 0;align-items:center}
.valores--programa .valor__n{font-size:clamp(34px,3.2vw,46px)}
.programa__linhas{display:grid;gap:6px;margin-top:20px}
.pr__cta{grid-column:1/-1}

/* ════ PARTE 8 · PERGUNTAS E CONVERSA ════ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.faq__cab{position:sticky;top:112px;align-self:start}
.faq__cab .q-h2{max-width:12ch;font-size:clamp(32px,3.4vw,48px)}
.faq__cab .q-corpo{margin-top:16px}
.faq__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;margin:0}
.faq__lista div{padding-top:20px;border-top:1px solid rgb(14 61 89 / .14)}
.faq__lista dt{margin:0;font:800 19px/1.3 var(--f-texto);color:var(--titulo)}
.faq__lista dd{margin:10px 0 0;font:400 16px/1.55 var(--f-texto);color:var(--texto-secundario)}
.fecho{margin-top:128px;padding:72px 72px 64px}
.fecho .q-h2{max-width:none;font-size:clamp(36px,4.6vw,64px)}
.fecho .q-lead{max-width:56ch}
.passos{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:56px 0 0;padding:0;list-style:none}
.passos::before{content:"";position:absolute;left:36px;right:calc((100% - 56px) / 3 - 36px);top:36px;height:2px;background:linear-gradient(90deg,var(--ouro-claro),var(--amarelo))}
.rosto{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--teal-noite);box-shadow:0 0 0 2px var(--ouro-claro),0 0 0 8px rgb(13 37 51 / .9)}
.rosto img{width:100%;height:100%;object-fit:cover}
.rosto--chat{display:grid;align-content:center;justify-items:start;gap:4px;padding:0 14px;background:var(--p-folha)}
.mini-bal{display:block;width:30px;height:8px;border-radius:5px 5px 5px 2px;background:var(--teal-profundo)}
.mini-bal--eu{justify-self:end;width:22px;background:var(--ouro);border-radius:5px 5px 2px 5px}
.rosto--j{background:var(--mat-mesh-noite)}
.rosto--j::before{content:"";width:40%;height:40%;background:url('../assets/logo/simbolo-amarelo.svg') center/contain no-repeat}
.passos p{margin:22px 0 0;font:600 15.5px/1.5 var(--f-texto);color:var(--p-sobre-palco);max-width:30ch}
.passos__fim{margin:36px 0 0;padding-top:24px;border-top:1px solid rgb(207 227 234 / .14);font:600 16px/1.5 var(--f-texto);color:var(--p-sobre-palco);max-width:72ch}
.fecho .jc-link{color:var(--amarelo)}
.fecho .q-cta{margin-top:56px;padding-top:32px;border-top:1px solid rgb(207 227 234 / .14)}

/* ── botão fixo do celular: reserva altura no fim de cada parte ── */
@media (max-width:960px){.corpo-fixo .q-sec{padding-bottom:calc(var(--q-sec) + 68px)}}
.botao-fixo{transition:opacity 200ms var(--m-entra),transform 200ms var(--m-entra),visibility 0s linear 0s}
.fixo--oculto .botao-fixo{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 150ms ease-out,transform 150ms ease-out,visibility 0s linear 150ms}
@media (prefers-reduced-motion:reduce){.botao-fixo,.fixo--oculto .botao-fixo{transform:none;transition:none}}

/* ════ larguras intermediárias ════ */
@media (max-width:1100px){
  .cf{grid-template-columns:minmax(0,1fr)}
  .cf-mesa{position:static;grid-template-columns:repeat(4,minmax(0,1fr))}
  .passos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .fecho{padding:56px 48px}
  .prof{padding:56px 48px}
  .dg__lado{padding:48px 40px 40px 28px}
}
@media (max-width:960px){
  .pr{grid-template-columns:minmax(0,1fr);gap:48px}
  .escala{position:relative;top:auto;max-width:560px}
  .faq{grid-template-columns:minmax(0,1fr);gap:32px}
  .faq__cab{position:static}
  .dg{grid-template-columns:minmax(0,1fr)}
  .dg__apolo{min-height:460px}
  .dg__apolo::after{background:linear-gradient(0deg,rgb(13 37 51 / 1),transparent 55%)}
  .tela-mesa{grid-template-columns:minmax(0,1fr) 300px;padding:32px 32px 0}
  .fone{width:300px}
  .regua-t{margin:0 -32px;padding-inline:32px}
  .regua-t::before,.regua-t::after{left:32px;right:32px}
  .estado{padding-inline:32px}
  .qe{grid-template-columns:minmax(0,1fr);gap:48px}
  .arte__img{max-width:720px}
}

/* ════ celular ════ */
@media (max-width:760px){
  :root{--q-sec:72px}
  .q-h2{font-size:34px;line-height:1.04}
  .cab2{grid-template-columns:minmax(0,1fr);margin-bottom:28px}
  .q-cta .jc-botao{width:100%}
  /* tela */
  .estado{padding:16px 16px 0}
  .tela-mesa{grid-template-columns:minmax(0,1fr);padding:16px 16px 0}
  .plan{grid-row:1;align-self:auto;margin:0 0 12px 0;font-size:12px}
  .plan th:last-child,.plan td:last-child{padding-right:10px}
  .plan th,.plan td{padding:11px 10px}
  .plan .fora{display:none}
  .fone{grid-row:2;justify-self:center;width:min(272px,100%)}
  .fone__fio{height:300px}
  .regua-t,.regua-t--2{margin:0 -16px;padding:18px 16px 22px;grid-template-columns:minmax(0,1fr);gap:12px}
  .regua-t::before,.regua-t::after{left:21px;right:auto;top:30px;bottom:30px;width:2px;height:auto}
  .regua-t::after{transform-origin:50% 0}
  .marco{padding:0 0 0 28px}
  .marco::before{top:4px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  /* parte 3 */
  .faz li{grid-template-columns:minmax(0,1fr);gap:2px}
  .prof{grid-template-columns:minmax(0,1fr);margin-top:72px;padding:56px 20px 40px;gap:40px}
  .papel{font-size:12.5px;white-space:normal;width:9em;line-height:1.25}
  .l1 .papel{width:auto;white-space:nowrap}
  .l2 .papel{left:-14%;bottom:-2.9em;transform:none;text-align:left}
  .l3 .papel{right:-14%;bottom:-2.9em;transform:none;text-align:right}
  .venn{width:min(100%,300px);margin:28px 0 36px}
  .fundador{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:56px;padding-top:40px}
  .retrato{width:180px}
  /* parte 4: a régua sai da comparação; o texto da cena vem abaixo */
  .comparar{--corte:50%}
  .cmp-regua{display:none}
  .comparar .plan td{height:40px}
  .cmp__lado--depois .estado,.cmp__lado--antes .estado{display:none}
  .cmp-texto{position:static;width:auto;height:auto;margin:20px 0 0;overflow:visible;clip:auto;white-space:normal;display:grid;gap:16px}
  .cmp-texto>div[hidden]{display:none}
  .cmp-texto h3:not(:first-child){margin-top:16px}
  .cmp-texto h3{margin:0 0 6px;font:800 14px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--texto-secundario)}
  .cmp-texto ul{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font:400 16px/1.5 var(--f-texto);color:var(--titulo)}
  .rot-cmp{top:12px}.rot-cmp--a{left:16px}.rot-cmp--d{right:16px}
  .dep__baixo{grid-template-columns:minmax(0,1fr);gap:32px}
  .controle{padding:8px 18px}
  .controle dd{font-size:17px}
  /* parte 5 */
  .cf{margin-top:40px;gap:40px}
  .cf-mesa{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:4px 16px 12px;scrollbar-width:none}
  .cf-mesa::-webkit-scrollbar{display:none}
  .doc{flex:none;width:240px;scroll-snap-align:start}
  .cf-mesa__nota{flex:none;align-self:center;width:180px}
  .cf-passos{padding-left:36px}
  .cf-passo::before{left:-33px}
  .cf-passo h3{font-size:18px}
  .cf__pe{grid-template-columns:minmax(0,1fr)}
  /* parte 6 */
  .dg__apolo{min-height:380px}
  .dg__lado{padding:8px 16px 32px}
  .lentes{grid-template-columns:minmax(0,1fr)}
  .cartao{padding:20px 16px 16px}
  /* parte 7 */
  .escala{height:500px}
  .holerite{right:108px;height:440px;padding:18px 16px}
  .holerite li{padding:9px 0;font-size:13px}
  .recibo{left:12px;right:140px;bottom:60px;height:calc(440px * .55);padding:16px}
  .recibo .folha__t{font-size:15px}
  .chave-esc{width:88px;padding-left:14px;font-size:11.5px}
  .chave-esc--mes{height:440px}.chave-esc--area{height:calc(440px * .55);left:calc(100% - 102px);width:102px;padding-left:26px}
  .valor{grid-template-columns:minmax(0,1fr);padding:20px 0}
  .valor__n{font-size:52px}
  .inclui ul,.programa,.valores{grid-template-columns:minmax(0,1fr)}
  .programa{margin-top:64px;padding-top:40px}
  /* parte 8 */
  .faq__lista{grid-template-columns:minmax(0,1fr);gap:28px}
  .fecho{margin-top:72px;padding:48px 20px 36px}
  .passos{grid-template-columns:minmax(0,1fr);gap:24px}
  .passos::before{display:block;left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto;background:linear-gradient(180deg,var(--ouro-claro),var(--amarelo))}
  .passos li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center}
  .passos p{margin:0}
}

@media (prefers-reduced-motion:reduce){
  .cenas>.cena-t,.chip{transition:none}
}

/* ════ MOVIMENTO (02-movimento.md). Estado padrão = final; só anima com prefers-reduced-motion: no-preference ════ */
@media (prefers-reduced-motion:no-preference){
  /* Parte 1: uma vez, na carga, em CSS (fora da thread principal). h1, lead e botão não animam */
  .mao{--mao-d:24px}
  .mao--funcionario-ia{animation:mao-funcionario-ia var(--m-narra) var(--m-anda) 150ms backwards}
  .mao--humana{animation:mao-humana var(--m-narra) var(--m-anda) 150ms backwards}
  .toque-luz{animation:acende var(--m-medio) var(--m-entra) 1050ms backwards}
  .topo .j-acesa{animation:j-acende var(--m-medio) var(--m-entra) 1100ms backwards}
  /* Parte 4: toque fora da alça salta com 200 ms; o arrasto segue o dedo sem transição */
  .comparar.salta .alca,.comparar.salta .cmp__lado--antes{transition:transform var(--m-curto) var(--m-entra),clip-path var(--m-curto) var(--m-entra)}
  /* Parte 5: a mesa acende o documento do passo. Transição retoma do valor atual se a rolagem voltar */
  .doc{transition:opacity 300ms var(--m-entra),transform 300ms var(--m-entra)}
  .doc.doc--espera{opacity:.5;transform:translateY(6px)}
  /* Parte 2: a linha do atraso avança. Transição (não variável no pai): .arma recolhe sem transição; ao tirar a classe, ela anda */
  .regua-t::after{transition:transform 1100ms var(--m-anda)}
  .regua-t.rapida::after{transition-duration:500ms}
  .regua-t.arma::after{transform:scaleX(0);transition:none}
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px){.mao{--mao-d:12px}.regua-t.arma::after{transform:scaleY(0)}}
/* impressão: o que o JS armou abaixo da dobra sai no estado final */
@media print{
  .fone__fio>*,.marco,.lente4,.folha,.chave-esc,.faq__lista>div,.passos li,.doc,.lente,.luz,.venn .j,.sublinha,.cf-fio>i{opacity:1!important;transform:none!important}
  .regua-t::after{transform:none!important}
}
@keyframes mao-funcionario-ia{from{translate:calc(var(--mao-d) * -1) 0}}
@keyframes mao-humana{from{translate:var(--mao-d) 0}}
@keyframes acende{from{opacity:0}}
@keyframes j-acende{from{opacity:0;scale:.94}}

/* critério: assinatura acima do rodapé "Rodada de ajuste" */
.doc[data-doc="criterio"]{padding-bottom:92px}
.doc[data-doc="criterio"] .assina{bottom:54px}

/* item 14: sobre palco escuro a pílula usa o véu escuro do DS (tokens de [data-modo="escuro"]: link claro, letreiro branco) */
.jc-nav[data-modo="escuro"] .jc-nav__pilula{background:var(--nav-veu-compacta)}

/* item 16: as partes abaixo da dobra só entram no estilo/layout perto da rolagem. Alturas medidas por faixa (o "auto" guarda a real depois da 1ª pintura) */
.corpo-fixo>.q-sec{content-visibility:auto;contain-intrinsic-size:auto 1400px}
#quem-sao{contain-intrinsic-size:auto 1120px}#profissao{contain-intrinsic-size:auto 1925px}#como-trabalham{contain-intrinsic-size:auto 1478px}#mapa{contain-intrinsic-size:auto 1319px}#preco{contain-intrinsic-size:auto 2692px}#perguntas{contain-intrinsic-size:auto 3223px}
@media (max-width:1100px){#quem-sao{contain-intrinsic-size:auto 1196px}#profissao{contain-intrinsic-size:auto 1926px}#como-trabalham{contain-intrinsic-size:auto 1550px}#mapa{contain-intrinsic-size:auto 1281px}#preco{contain-intrinsic-size:auto 2705px}#perguntas{contain-intrinsic-size:auto 3547px}}
@media (max-width:960px){#quem-sao{contain-intrinsic-size:auto 1316px}#profissao{contain-intrinsic-size:auto 2324px}#como-trabalham{contain-intrinsic-size:auto 1728px}#mapa{contain-intrinsic-size:auto 1772px}#preco{contain-intrinsic-size:auto 3216px}#perguntas{contain-intrinsic-size:auto 3572px}}
@media (max-width:760px){#quem-sao{contain-intrinsic-size:auto 1535px}#profissao{contain-intrinsic-size:auto 2594px}#como-trabalham{contain-intrinsic-size:auto 2297px}#mapa{contain-intrinsic-size:auto 1823px}#preco{contain-intrinsic-size:auto 3807px}#perguntas{contain-intrinsic-size:auto 5116px}}
/* item 16: no celular a arte do topo (12 % de opacidade, cinza) vira o LCP; a versão de 800 px em cinza tem 37 KB contra 301 KB */
@media (max-width:760px){.topo__arte,.prof__arte{background-image:url('../assets/topo/escola-800-cinza.webp')}}