/* Seções abaixo da jornada. Papel claro, tinta quase preta, azul do produto em dose rara. */
:root{
  --papel-fundo:#ECE9E3;
  --papel-alto:#F4F2EE;
  --linha:#D6D1C8;
  --linha-forte:#A9A398;
  --borda-campo:#8A8478;
  --tinta:#1B1E23;
  --tinta-2:#555B64;
  --azul:#2B4A7D;
  --azul-escuro:#1C3459;
  --azul-claro:#DCE4F1;
  --gutter:clamp(20px,6.5vw,104px);
  --grade:minmax(0,5fr) minmax(0,7fr);
  --vao:clamp(40px,7vw,120px);
  --vao-titulo:40px;
}
html{scroll-padding-top:96px}
main:focus{outline:0}

.secao{position:relative;background:var(--papel-fundo);color:var(--tinta);padding:clamp(80px,10vw,136px) var(--gutter)}
.rotulo{margin:0 0 20px;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
.h2{margin:0;font:600 clamp(2rem,3.4vw,3.15rem)/1.07 var(--serif);letter-spacing:-.014em;color:var(--tinta);max-width:18ch;text-wrap:balance}
.lede{margin:22px 0 0;font:400 clamp(1.06rem,1.3vw,1.24rem)/1.6 var(--sans);color:var(--tinta-2);max-width:48ch}
.mono{font-family:var(--mono)}
.secao :focus-visible,.rodape :focus-visible,html.na-pagina .nav :focus-visible{outline-color:var(--azul)}

/* A cortina: o último quadro da jornada fica preso e o papel sobe por cima, com sombra. */
/* a sombra só existe em cima: o recorte tira o que vazaria sobre a seção seguinte */
html.js:not(.estatico) #por-que{margin-top:-100vh;z-index:2;box-shadow:0 -24px 80px rgba(4,6,10,.5);clip-path:inset(-160px 0 0 0)}

/* títulos que sobem linha a linha: secoes.js separa as linhas depois que as fontes chegam */
.h2.linhas{opacity:1;transform:none}
.h2 .lt{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.h2 .li{display:block;transform:translateY(112%);transition:transform 1s var(--e-out);transition-delay:calc(var(--i,0)*.1s + .05s)}
.in .h2 .li{transform:none}

/* entradas: o grupo ganha .in e os filhos chegam em sequência */
.entra{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.in .entra,.entra.in{opacity:1;transform:none}
.in .entra:nth-child(2){transition-delay:.08s}
.in .entra:nth-child(3){transition-delay:.16s}
.in .entra:nth-child(4){transition-delay:.24s}
.in .entra:nth-child(5){transition-delay:.32s}
.in .entra:nth-child(6){transition-delay:.4s}
.in.assentou .entra{transition-delay:0s}

/* ---------- 0. por que o Acervo ---------- */
.porque{padding-top:0}
/* faixa de tipos de peça: corre devagar no alto da seção, parada quando sai da tela */
.faixa-pecas{margin:0 calc(-1*var(--gutter)) clamp(64px,8vw,104px);padding:22px 0;border-bottom:1px solid var(--linha);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.faixa-trilho{display:flex;width:max-content;animation:faixa-pecas 70s linear infinite}
.faixa-trilho span{position:relative;padding:0 26px;font:500 clamp(1.1rem,1.5vw,1.35rem)/1 var(--serif);color:var(--tinta-2);white-space:nowrap}
.faixa-trilho span::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--linha-forte)}
.faixa-pecas.parada .faixa-trilho{animation-play-state:paused}
@keyframes faixa-pecas{to{transform:translateX(-50%)}}
.porque-cabeca{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:end}
.porque-cabeca .rotulo,.porque-cabeca .h2{grid-column:1}
.porque-cabeca .lede{grid-column:2;grid-row:1 / 3;align-self:end;margin:0}
/* a grade dos seis motivos: tabela de fio fino, sem cartão */
.motivos-grade{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linha-forte)}
.motivo-cel{padding:30px 28px 34px 0;border-bottom:1px solid var(--linha);display:grid;gap:10px;align-content:start;min-width:0}
.motivo-cel:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--linha)}
.motivo-cel svg{width:26px;height:26px;color:var(--azul);margin-bottom:6px}
.motivo-cel h3{margin:0;font:600 clamp(1.2rem,1.6vw,1.38rem)/1.2 var(--serif);letter-spacing:-.008em;text-wrap:balance}
.motivo-cel p{margin:0;font:400 1.02rem/1.6 var(--sans);color:var(--tinta-2);max-width:36ch}
/* na prática: a página escaneada sendo lida e os arquivos de nome qualquer virando lista */
.na-pratica{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.pratica{margin:0;display:grid;gap:14px;align-content:start}
.pratica figcaption{font:400 1rem/1.6 var(--sans);color:var(--tinta-2);max-width:48ch}
.pratica figcaption b{font-weight:600;color:var(--tinta)}
.cena-pratica{position:relative;height:clamp(250px,24vw,300px);border:1px solid var(--linha);border-radius:12px;background:var(--papel-alto);overflow:hidden}
.pag-esc{position:absolute;left:50%;top:26px;width:176px;height:228px;margin-left:-88px;padding:22px 18px;transform:rotate(-3deg);background:#FFFEFB;border:1px solid var(--linha);box-shadow:0 1px 2px rgba(27,30,35,.06),0 20px 40px -24px rgba(27,30,35,.4)}
.pl{display:block;height:4px;width:var(--w,90%);margin:10px 0;border-radius:2px;background:#8E949C;transition:background-color .35s}
.pl-cab{height:6px;width:56%;margin:0 0 18px;background:var(--tinta)}
.pl.m{background:var(--azul)}
.cena-papel.esperando .pl:not(.lida){background:var(--linha)}
.luz-esc{position:absolute;left:-16px;right:-16px;top:0;height:2px;background:#9DB4DC;box-shadow:0 0 16px 3px rgba(120,150,210,.4);opacity:0;pointer-events:none}
.selo-lida{position:absolute;right:16px;bottom:16px;font:500 .74rem/1 var(--mono);padding:6px 9px;border-radius:5px;background:var(--azul-claro);color:var(--azul);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.cena-papel.esperando .selo-lida{opacity:0;transform:translateY(6px)}
.cena-bagunca{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px;height:auto;min-height:clamp(250px,24vw,300px)}
.arquivo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 12px;background:#FFFEFB;border:1px solid var(--linha);border-radius:8px;box-shadow:0 1px 2px rgba(27,30,35,.05);transition:transform .9s var(--e-out)}
.arquivo:nth-child(2){transition-delay:.07s}
.arquivo:nth-child(3){transition-delay:.14s}
.arquivo:nth-child(4){transition-delay:.21s}
/* sem espaço para os dois, o tipo desce para a linha de baixo em vez de cortar o nome */
.arquivo .nome{flex:1 1 auto;min-width:0;font:400 .82rem/1.2 var(--mono);color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arquivo .tipo{flex:none;margin-left:auto;font:500 .74rem/1 var(--mono);padding:5px 8px;border-radius:5px;background:var(--azul-claro);color:var(--azul);transition:opacity .5s var(--e-out) .7s}
.arquivo:nth-child(2) .tipo{transition-delay:.8s}
.arquivo:nth-child(3) .tipo{transition-delay:.9s}
.arquivo:nth-child(4) .tipo{transition-delay:1s}
.cena-bagunca.baguncado .arquivo{transform:var(--de)}
.cena-bagunca.baguncado .tipo{opacity:0}
.cena-pratica.sem *,.registro.sem *{transition:none!important}

/* ---------- 1. como funciona ---------- */
.caminhos{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:start}
.caminhos-cabeca{position:sticky;top:120px}
.passos-caixa{position:relative;padding-left:64px}
.passos{list-style:none;margin:0;padding:0}
.passos-caixa .fio{position:absolute;left:15px;top:18px;bottom:18px;width:2px;height:calc(100% - 36px);overflow:visible}
.passos-caixa .fio line{stroke:var(--linha);stroke-width:2}
.passos-caixa .fio .tinta-fio{stroke:var(--azul);stroke-dasharray:var(--comp) var(--comp);stroke-dashoffset:calc(var(--comp)*(1 - var(--fio,0)))}
.passo{position:relative;padding:0 0 clamp(56px,7vw,88px)}
.passo:last-child{padding-bottom:0}
.passo-num{position:absolute;left:-64px;top:2px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--papel-fundo);border:2px solid var(--linha);font:500 .74rem/1 var(--mono);color:var(--tinta-2);transition:border-color .5s var(--e-out),color .5s var(--e-out),background-color .5s var(--e-out)}
.passo.aceso .passo-num{border-color:var(--azul);color:#fff;background:var(--azul)}
.passo h3{margin:0;font:600 clamp(1.45rem,2vw,1.8rem)/1.15 var(--serif);letter-spacing:-.01em}
.passo p{margin:12px 0 0;font:400 1.06rem/1.62 var(--sans);color:var(--tinta-2);max-width:46ch}
/* vinhetas: tabela de fio fino, não cartão */
.vinheta{margin-top:22px;max-width:540px;border-top:1px solid var(--linha-forte);font-size:.88rem}
.vinheta-linha{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha)}
.vinheta-linha svg{width:16px;height:16px;color:var(--tinta-2);align-self:center}
.vinheta-linha .estado{font:400 .74rem/1 var(--mono);color:var(--tinta-2)}
.vinheta-linha .estado.ok{color:#2F6B45}
.barra{grid-column:2 / 4;height:3px;border-radius:2px;background:var(--linha);overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;width:42%;background:var(--azul);transform-origin:left;animation:lendo 4.8s var(--e-io) infinite;animation-delay:-1.6s}
@keyframes lendo{0%{transform:scaleX(.15)}70%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.35}}
.sobrescrito{font:600 .72rem/1 var(--sans);color:var(--azul);align-self:baseline;text-align:center}
.vinheta-acao{border-bottom:0}
.vinheta-acao a{position:relative;font:500 .84rem/1 var(--sans);color:var(--azul);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.vinheta-acao a::after{content:"";position:absolute;inset:-14px -8px}

/* ---------- 2. demonstração: largura total, como janela do produto ---------- */
.demo-cabeca{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:end;margin-bottom:clamp(var(--vao-titulo),4vw,56px)}
.demo-cabeca .lede{margin:0}
.janela{background:#FAFAF8;border:1px solid var(--linha);border-radius:12px;box-shadow:0 1px 0 #fff inset,0 24px 60px -24px rgba(27,30,35,.22);overflow:hidden}
.janela-topo{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--linha);font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.janela-corpo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.chips{margin:0;padding:12px;list-style:none;display:flex;flex-direction:column;gap:2px;background:var(--papel-alto);border-right:1px solid var(--linha)}
.chip-busca{width:100%;text-align:left;display:flex;gap:12px;align-items:baseline;padding:11px 12px;border:0;border-radius:6px;background:transparent;color:var(--tinta);font:400 .92rem/1.4 var(--sans);cursor:pointer;transition:background-color .25s var(--e-out)}
.chip-busca .mono{font-size:.7rem;color:var(--tinta-2);letter-spacing:.06em}
.chip-busca:hover{background:#fff}
.chip-busca[aria-pressed="true"]{background:#fff;box-shadow:inset 2px 0 0 var(--azul)}
.janela-principal{min-width:0}
.janela form{padding:16px 18px 6px}
.campo-demo{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 12px;border:1px solid var(--borda-campo);border-radius:8px;background:#fff}
.campo-demo:focus-within{border-color:var(--azul);outline:2px solid var(--azul);outline-offset:2px;box-shadow:none}
.campo-demo svg{flex:none;width:18px;height:18px;color:var(--tinta-2)}
.campo-demo input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 1rem/1.4 var(--sans);color:var(--tinta);-webkit-appearance:none;appearance:none}
.campo-demo input::-webkit-search-decoration,.campo-demo input::-webkit-search-cancel-button{-webkit-appearance:none}
.campo-demo button{flex:none;height:36px;padding:0 14px;border:0;border-radius:6px;background:var(--tinta);color:#fff;font:500 .86rem/1 var(--sans);cursor:pointer}
.campo-demo button:hover{background:#000}
.resultados-demo{list-style:none;margin:0;padding:4px 18px 10px;min-height:320px}
.resultados-demo li{padding:16px 0;border-top:1px solid #E6E6E8;opacity:0;transform:translateY(8px);animation:chega .6s var(--e-out) forwards}
.resultados-demo li:first-child{border-top:0}
.resultados-demo li:nth-child(2){animation-delay:.12s}
.resultados-demo li:nth-child(3){animation-delay:.24s}
@keyframes chega{to{opacity:1;transform:none}}
.r-titulo{margin:0;font:600 .98rem/1.35 var(--sans)}
.r-meta{margin:4px 0 0;font:400 .74rem/1.4 var(--mono);color:var(--tinta-2)}
.r-trecho{margin:8px 0 0;font:400 .96rem/1.55 var(--serif);color:#30353D;max-width:72ch}
.r-trecho mark{background:rgba(43,74,125,.13);color:var(--azul-escuro);padding:0 2px;border-radius:2px}
.r-porque{margin:10px 0 0;padding:0 0 0 12px;border-left:2px solid var(--azul-claro);font:400 .78rem/1.5 var(--mono);color:var(--tinta-2)}
.r-porque b{font-weight:500;color:var(--tinta)}
.demo-vazio{padding:28px 0;color:var(--tinta-2);font-size:.95rem;max-width:52ch}
.demo-vazio p{margin:0}
.demo-assuntos{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}
.demo-assuntos button{padding:6px 0;border:0;background:none;font:500 .92rem/1.3 var(--sans);color:var(--azul);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.demo-assuntos button:hover{color:var(--azul-escuro)}
.aviso-demo{margin:14px 0 0;font:400 .76rem/1.5 var(--mono);color:var(--tinta-2)}

/* ---------- 3. rascunho: eixo central ---------- */
.rascunho-grade{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(var(--vao-titulo),5vw,64px)}
.rascunho-grade .h2,.rascunho-grade .lede{margin-inline:auto}
.rascunho-palco{position:relative;width:100%}
.folha{position:relative;margin:0 auto;max-width:560px;text-align:left;background:#FFFEFB;border-radius:3px;box-shadow:0 1px 2px rgba(27,30,35,.08),0 30px 70px -30px rgba(27,30,35,.35);padding:clamp(28px,4.5vw,52px) clamp(26px,5vw,56px) clamp(24px,3.5vw,40px);font-family:var(--serif);color:#22262C;display:flex;flex-direction:column}
.folha-cabeca{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(22px,3vw,30px);padding-bottom:clamp(14px,2vw,18px);border-bottom:1px solid #ECE8E1}
.folha-arquivo{font:500 .66rem/1.2 var(--mono);color:var(--tinta-2);letter-spacing:.02em}
.folha-sub{font:400 .74rem/1.3 var(--sans);color:#6A6F77}
.bloco{position:relative;margin:0 0 18px;font-size:clamp(.8rem,1.05vw,.9rem);line-height:1.62;text-align:justify;-webkit-hyphens:auto;hyphens:auto;opacity:var(--b,0);transform:translateX(calc((1 - var(--b,0))*36px))}
.bloco sup{font:600 .7em/0 var(--sans);color:var(--azul);opacity:var(--n,0)}
/* o rótulo de origem entra à esquerda do parágrafo e viaja até virar a nota de rodapé */
.bloco .origem{position:absolute;right:calc(100% + 14px);top:2px;white-space:nowrap;font:400 .64rem/1 var(--mono);color:var(--azul);transform:translate(calc(var(--n,0)*var(--dx,0px)),calc(var(--n,0)*var(--dy,0px)));opacity:calc(var(--b,0)*(1 - clamp(0,(var(--n,0) - .75)*4,1)))}
.notas{margin-top:clamp(18px,3vw,30px);font:400 clamp(.64rem,.82vw,.72rem)/1.5 var(--sans);color:#4A4F57}
.notas::before{content:"";display:block;width:34%;border-top:1px solid #D9D6D0;margin-bottom:10px}
.notas p{margin:0 0 4px;opacity:clamp(0,(var(--n,0) - .7)*3.4,1)}
.notas sup{color:var(--azul);font-weight:600}

/* ---------- 4. segurança ---------- */
.seguranca{background:var(--noite);color:#E9ECF1;overflow:hidden;padding-block:clamp(104px,13vw,184px)}
.seguranca>.entra-grupo:first-child{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:end}
.seguranca .h2{color:#F3F1EC}
.seguranca .lede{margin:0;color:#AEB6C2}
.seguranca :focus-visible{outline-color:#A9BCDB}
/* a luz passa uma vez quando a tabela chega, como o scanner da jornada */
.seguranca::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(169,188,219,.08),transparent)}
.seguranca:has(.garantias.in)::before{animation:varre-faixa 2.4s var(--e-io) .3s 1 both}
@keyframes varre-faixa{0%{transform:translateX(0)}100%{transform:translateX(450%)}}
.garantias{margin:clamp(var(--vao-titulo),6vw,72px) 0 0;padding:0;border-top:1px solid rgba(233,236,241,.16)}
.garantia{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);padding:28px 0;border-bottom:1px solid rgba(233,236,241,.16);align-items:baseline}
.garantia dt{font:600 clamp(1.2rem,1.6vw,1.45rem)/1.25 var(--serif);color:#F3F1EC}
.garantia dd{margin:0;font:400 1.05rem/1.62 var(--sans);color:#B9C1CC;max-width:52ch}
/* o registro de auditoria que se escreve sozinho quando aparece */
.registro{margin-top:18px;border:1px solid rgba(233,236,241,.16);border-radius:10px;padding:12px 14px 6px;background:rgba(255,255,255,.025)}
.registro-topo{margin:0 0 8px;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8D96A3}
.registro ol{list-style:none;margin:0;padding:0}
.registro li{display:flex;gap:12px;padding:8px 0;border-top:1px solid rgba(233,236,241,.1);font:400 .92rem/1.45 var(--sans);color:#D3D9E1;min-height:2.4em;transition:opacity .3s}
.registro time{flex:none;font:400 .8rem/1.75 var(--mono);color:#8D96A3}
.registro.esperando li,.registro li.vazia{opacity:0}

/* ---------- planos: tabela de fio fino; as linhas dos três planos se alinham por subgrid ---------- */
.planos-cabeca{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:end}
.planos-cabeca .lede{margin:0}
.planos-grade{margin-top:clamp(var(--vao-titulo),5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(6,auto);border-top:1px solid var(--linha-forte)}
.planos-rotulos{grid-column:1;grid-row:1 / -1;display:grid;grid-template-rows:subgrid}
.planos-rotulos span{display:flex;align-items:center;padding:15px 16px 15px 0;border-bottom:1px solid var(--linha);font:400 .92rem/1.4 var(--sans);color:var(--tinta-2)}
.planos-rotulos .planos-fundador{align-items:flex-end;padding-bottom:26px;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.plano{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-width:0}
.plano-meio{background:var(--papel-alto);box-shadow:inset 0 2px 0 var(--azul)}
.plano-topo{padding:26px clamp(14px,2vw,28px) 22px;border-bottom:1px solid var(--linha)}
.plano-nome{margin:0;font:600 1.3rem/1.2 var(--serif);letter-spacing:-.008em}
.plano-perfil{margin:4px 0 0;font:400 .9rem/1.4 var(--sans);color:var(--tinta-2)}
.plano-preco{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.plano-preco .valor{font:600 clamp(1.9rem,2.7vw,2.45rem)/1 var(--serif);letter-spacing:-.015em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.plano-preco .unid{font:400 .86rem/1 var(--sans);color:var(--tinta-2)}
.plano-implantacao{margin:10px 0 0;font:400 .86rem/1.4 var(--sans);color:var(--tinta-2)}
.plano-itens{grid-row:2 / -1;display:grid;grid-template-rows:subgrid;margin:0}
.plano-itens>div{display:flex;align-items:center;padding:15px clamp(14px,2vw,28px);border-bottom:1px solid var(--linha)}
.plano-itens dd{margin:0;font:500 .98rem/1.4 var(--sans);color:var(--tinta);font-variant-numeric:lining-nums tabular-nums}
.planos-notas{margin-top:24px;display:grid;gap:8px}
.planos-notas p{margin:0;font:400 .9rem/1.6 var(--sans);color:var(--tinta-2);max-width:78ch}
.planos-notas b{font-weight:600;color:var(--tinta)}
.teste-grade{margin-top:clamp(64px,8vw,104px);display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:start}
.teste{padding-top:26px;border-top:1px solid var(--linha-forte)}
.teste-tit{margin:0;font:600 clamp(1.35rem,1.9vw,1.7rem)/1.2 var(--serif);letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.teste-sub{margin:12px 0 0;font:400 1.04rem/1.6 var(--sans);color:var(--tinta-2);max-width:44ch}
.teste-lista{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--linha)}
.teste-lista li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--linha);font:400 .98rem/1.55 var(--sans)}
.teste-lista li::before{content:"";position:absolute;left:2px;top:1.32em;width:10px;height:1px;background:var(--azul)}
.teste-acao{position:relative;display:inline-block;margin-top:22px;font:500 .95rem/1 var(--sans);color:var(--azul);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.teste-acao::after{content:"";position:absolute;inset:-14px -8px}
.teste-acao:hover{color:var(--azul-escuro)}
.encerramento{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--linha)}
.encerramento li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--linha);font:400 .98rem/1.55 var(--sans)}
.encerramento .quando{font:500 .72rem/2.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
/* no desktop o rótulo de cada linha vem da coluna da esquerda; o <dt> fica para leitor de tela */
@media (min-width:901px){
  .plano-itens dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- 5. perguntas ---------- */
.perguntas-grade{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao)}
.perguntas-grade>.entra-grupo:first-child{position:sticky;top:120px;align-self:start}
.perguntas{margin:0;padding:0}
.pergunta{padding:26px 0;border-top:1px solid var(--linha)}
.pergunta:last-child{border-bottom:1px solid var(--linha)}
.pergunta dt{font:600 1.22rem/1.35 var(--serif);color:var(--tinta)}
.pergunta dd{margin:10px 0 0;font:400 1.05rem/1.65 var(--sans);color:var(--tinta-2);max-width:60ch}
/* sanfona: secoes.js põe um botão na pergunta; sem JavaScript, as respostas ficam abertas */
.pergunta-botao{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.pergunta-botao:focus-visible{outline:2px solid var(--azul);outline-offset:4px;border-radius:4px}
.pergunta-botao svg{flex:none;width:18px;height:18px;color:var(--tinta-2);transition:transform .4s var(--e-out)}
.pergunta.aberta .pergunta-botao svg{transform:rotate(180deg)}
.pergunta.sanfona dd{display:grid;grid-template-rows:0fr;margin-top:0;transition:grid-template-rows .45s var(--e-out),margin-top .45s var(--e-out)}
.pergunta.sanfona.aberta dd{grid-template-rows:1fr;margin-top:10px}
.pergunta.sanfona .pergunta-corpo{overflow:hidden;min-height:0}
.pergunta.sanfona{padding:22px 0}

/* ---------- 6. contato ---------- */
.contato{border-top:1px solid var(--linha)}
.contato-grade{display:grid;grid-template-columns:var(--grade);column-gap:var(--vao);align-items:start}
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:end}
.formulario .largo{grid-column:1 / -1}
.formulario label{display:block;margin-bottom:8px;font:500 .86rem/1.2 var(--sans);color:var(--tinta)}
.opcional{font-weight:400;color:var(--tinta-2)}
.formulario input,.formulario select{width:100%;height:48px;padding:0 14px;border:1px solid var(--borda-campo);border-radius:8px;background:#fff;font:400 1rem/1 var(--sans);color:var(--tinta);transition:border-color .2s var(--e-out),box-shadow .2s var(--e-out)}
/* seta desenhada no lugar da nativa */
.formulario select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555B64' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.formulario input:focus,.formulario select:focus{border-color:var(--azul)}
.formulario input:focus-visible,.formulario select:focus-visible{outline:2px solid var(--azul);outline-offset:2px;box-shadow:none}
.formulario input[aria-invalid="true"]{border-color:#A3402F}
.erro-campo{margin:6px 0 0;font-size:.82rem;color:#A3402F;min-height:1em}
.btn-escuro{height:50px;padding:0 22px;border:0;border-radius:8px;background:var(--tinta);color:#fff;font:500 1rem/1 var(--sans);cursor:pointer;transition:background-color .25s var(--e-out)}
.btn-escuro:hover{background:#000}
.btn-escuro:disabled{opacity:.6;cursor:default}
.nota-form{margin:12px 0 0;font-size:.86rem;color:var(--tinta-2)}
.sucesso{display:none;padding:26px 0;border-top:2px solid var(--azul)}
.sucesso h3{margin:0;font:600 1.5rem/1.2 var(--serif)}
.sucesso p{margin:10px 0 0;color:var(--tinta-2)}
.contato.enviado .formulario{display:none}
.contato.enviado .sucesso{display:block}

/* rodapé */
.rodape{border-top:1px solid var(--linha)}

/* ---------- navegação: sombreado no alto da jornada, papel depois dela ---------- */
.nav{transition:background-color .4s var(--e-out),color .4s var(--e-out),box-shadow .4s var(--e-out)}
.nav::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,11,15,.6) 0%,rgba(9,11,15,.45) 55%,rgba(9,11,15,0) 100%);transition:opacity .4s var(--e-out)}
html.na-pagina .nav::before{opacity:0}
html.na-pagina .nav{background:var(--papel-fundo);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--linha)}
html.na-pagina .nav .marca{color:#14171C}
html.na-pagina .nav .marca svg{filter:none}
html.na-pagina .nav .btn-linha{background:var(--tinta);border-color:var(--tinta);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
html.na-pagina .nav .btn-linha:hover{background:#000;border-color:#000}

@media (max-width:900px){
  .porque-cabeca{grid-template-columns:minmax(0,1fr)}
  .porque-cabeca .lede{grid-column:1;grid-row:auto;margin-top:16px}
  .motivos-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motivo-cel:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .motivo-cel:nth-child(2n){padding-left:24px;border-left:1px solid var(--linha)}
  .caminhos,.demo-cabeca,.perguntas-grade,.contato-grade,.seguranca>.entra-grupo:first-child,.garantia{grid-template-columns:minmax(0,1fr)}
  .demo-cabeca .lede,.seguranca .lede{margin-top:16px}
  .garantia{gap:8px}
  .perguntas-grade,.contato-grade{row-gap:var(--vao-titulo)}
  .caminhos-cabeca{position:static;margin-bottom:var(--vao-titulo)}
  .perguntas-grade>.entra-grupo:first-child{position:static}
  .janela-corpo{grid-template-columns:minmax(0,1fr)}
  /* buscas prontas em faixa rolável, para os resultados subirem na tela */
  .chips{border-right:0;border-bottom:1px solid var(--linha);flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;gap:8px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips li{flex:0 0 72%;scroll-snap-align:start}
  .chip-busca{height:100%;border:1px solid var(--linha)}
  .bloco .origem{display:none}
  /* planos: um bloco por plano, cada linha com o seu rótulo */
  .planos-cabeca,.teste-grade{grid-template-columns:minmax(0,1fr)}
  .planos-cabeca .lede{margin-top:16px}
  .teste-grade{row-gap:56px}
  .planos-grade{display:block;border-top:0}
  .planos-rotulos{display:none}
  .plano{display:block;border-top:1px solid var(--linha-forte)}
  .plano+.plano{margin-top:28px}
  .plano-topo{padding:22px 16px 18px}
  .plano-itens{display:block}
  .plano-itens>div{justify-content:space-between;gap:16px;padding:12px 16px}
  .plano-itens dt{font:400 .9rem/1.4 var(--sans);color:var(--tinta-2)}
  .plano-itens dd{text-align:right}
}
@media (max-width:760px){
  .na-pratica{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .encerramento li{grid-template-columns:minmax(0,1fr);gap:2px}
  .motivos-grade{grid-template-columns:minmax(0,1fr)}
  .motivo-cel:nth-child(2n){padding-left:0;border-left:0}
  .motivo-cel{padding:24px 0 26px}
}
@media (max-width:760px){
  html.na-pagina .nav .btn{display:inline-flex;font-size:.82rem;padding:0 12px;height:38px}
  /* no celular a abertura é uma coluna que rola por baixo do menu: menu escuro e sólido,
     para o nome não ficar branco sobre o painel branco */
  html.estatico:not(.na-pagina) .nav{background:rgba(20,25,32,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html.estatico:not(.na-pagina) .nav::before{opacity:0}
}
/* 360px: a marca e o botão não se encostam */
@media (max-width:380px){
  html.na-pagina .nav .btn{padding:0 10px;font-size:.78rem}
}
@media (max-width:560px){
  .formulario{grid-template-columns:1fr}
  .passos-caixa{padding-left:52px}
  .passo-num{left:-52px}
}
@media (pointer:coarse){.chip-busca,.campo-demo button,.btn-escuro,.demo-assuntos button{min-height:44px}}

/* sem JavaScript ou com movimento reduzido: tudo no estado final */
html:not(.js) .entra{opacity:1;transform:none}
html:not(.js) .bloco,html:not(.js) .notas p{--b:1;--n:1}
@media (prefers-reduced-motion:reduce){
  .faixa-trilho{animation:none}
  .entra{opacity:1;transform:none}
  .bloco,.notas p{--b:1;--n:1}
  .resultados-demo li{opacity:1;transform:none;animation:none}
  .passos-caixa .fio .tinta-fio{stroke-dashoffset:0}
}
/* impressão: o advogado imprime para mostrar ao sócio */
@media print{
  .jornada,.nav,.dica,.pular,.faixa-pecas{display:none}
  .pergunta.sanfona dd{grid-template-rows:1fr!important;margin-top:10px}
  .pergunta-botao svg{display:none}
  .entra{opacity:1!important;transform:none!important}
  .bloco,.notas p{--b:1!important;--n:1!important}
  .secao{padding:32px 0;box-shadow:none!important;margin-top:0!important}
  .seguranca{background:#fff;color:#000}
}