/* Página pública do Aptum. Movimento guiado pela rolagem em CSS nativo (animation-timeline), sem biblioteca e sem prender
   a rolagem. Sem suporte ou com "reduzir movimento", a página fica inteira, parada e legível. Cores só dos tokens da marca. */
.inicio{background:var(--papel0);color:var(--tinta);font:400 17px/1.55 var(--fb);overflow-x:clip}
.inicio a{color:inherit}
.inicio :is(h2,h3,p){color:inherit}
.i-topo{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e3) clamp(16px,4vw,48px);border-bottom:1px solid transparent}
.i-logo svg{height:26px;width:auto;display:block}
.i-nav{display:flex;align-items:center;gap:var(--e4)}.i-nav>a:not(.i-botao){text-decoration:none;font-weight:600;font-size:15px}.i-nav>a:not(.i-botao):hover{text-decoration:underline}
.i-botao{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--tinta);color:var(--papel)!important;text-decoration:none;font:600 15px var(--fb);border:1px solid var(--tinta);cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.i-botao:hover{background:var(--acento-forte);border-color:var(--acento-forte)}.i-botao:active{transform:translateY(1px)}
.i-botao.grande{min-height:54px;padding:0 28px;font-size:16px}
.i-botao.sec{background:transparent;color:var(--tinta)!important}.i-botao.sec:hover{background:var(--tinta);color:var(--papel)!important}
.i-botao.claro{background:var(--papel);color:var(--tinta)!important;border-color:var(--papel)}.i-botao.claro:hover{background:var(--acento-luz);border-color:var(--acento-luz)}
.i-rotulo{font:500 12px var(--fm);text-transform:uppercase;letter-spacing:.12em;margin:0 0 var(--e3)}
.i-miuda{font-size:14px;color:var(--tinta2);margin:var(--e3) 0 0}
.i-acoes{display:flex;flex-wrap:wrap;gap:var(--e3)}.i-acoes.centro{justify-content:center}
.i-ponto{color:var(--sinal)}
.i-titulo{font:800 clamp(40px,7vw,104px)/.95 var(--fd);letter-spacing:-.035em;margin:0 0 var(--e6)}
.i-titulo-m{font:800 clamp(30px,4vw,56px)/1 var(--fd);letter-spacing:-.03em;margin:0 0 var(--e4)}
section{scroll-margin-top:72px}

/* 1. capa: promessa à esquerda, o produto em camadas à direita */
.i-capa{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:var(--e7);padding:120px clamp(16px,4vw,48px) var(--e7)}
.i-promessa{margin:0 0 var(--e5);font:800 clamp(44px,6.4vw,104px)/.95 var(--fd);letter-spacing:-.04em}
.i-marca-texto{color:var(--acento-forte)}
.i-lead{font-size:clamp(17px,1.2vw + 10px,21px);color:var(--tinta2);max-width:36rem;margin:0 0 var(--e5)}
.i-capa-produto{position:relative;min-height:440px}
.i-mock{background:var(--papel);border:1px solid var(--borda2);border-radius:20px;padding:var(--e5);position:relative}
.i-mock p{margin:0 0 var(--e2)}
.i-mock-principal{position:absolute;inset:40px 40px auto 0;z-index:2}
.i-mock-celular{position:absolute;right:0;bottom:-40px;width:min(78%,300px);z-index:3;background:var(--noite);color:var(--tinta-clara);border-color:var(--noite)}
.i-mock-celular .i-mock-sub{color:var(--acento-luz)}
.i-mock-pagina{position:absolute;right:8px;top:0;width:min(62%,250px);z-index:1;background:var(--sinal-fundo);border-color:var(--sinal);font:400 14px/1.4 var(--fb);font-style:italic}
.i-mock-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-bottom:var(--e3)}
.i-mock-titulo{font:800 22px/1.15 var(--fd);letter-spacing:-.02em}
.i-mock-sub{font:500 12px var(--fm);text-transform:uppercase;letter-spacing:.08em;color:var(--tinta3)}
.i-mock-lista{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;gap:var(--e2);font-size:15px}
.i-mock-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.i-chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font:600 12px var(--fm);background:var(--nevoa);color:var(--tinta)}
.i-chip.ok{background:var(--acento-nevoa);color:var(--acento-forte)}
.i-pag{display:inline-flex;border-radius:999px;padding:2px 9px;font:600 11.5px var(--fm);background:var(--acento-nevoa);color:var(--acento-forte);font-style:normal}
.i-ok{color:var(--acento);font-weight:800}.i-atencao{color:var(--sinal-tinta);font-weight:800;background:var(--sinal-fundo);border-radius:50%;width:18px;height:18px;display:inline-grid;place-items:center;font-size:12px}
.i-exemplo{position:absolute;top:-10px;left:16px;z-index:4;font:500 10.5px var(--fm);text-transform:uppercase;letter-spacing:.12em;background:var(--tinta);color:var(--papel);border-radius:999px;padding:2px 8px}
.i-mock-quadro{display:flex;gap:var(--e2);margin:var(--e3) 0}.i-mock-quadro span{flex:1;border:1px solid var(--borda2);border-radius:12px;padding:var(--e2);font-size:13px;display:grid}.i-mock-quadro b{font:800 26px/1 var(--fd)}

/* faixa com as fontes, que corre de lado */
.i-faixa{overflow:clip;padding:var(--e4) 0;background:var(--tinta);color:var(--papel)}
.i-faixa-trilho{display:flex;gap:var(--e6);white-space:nowrap;font:700 clamp(20px,2.6vw,36px)/1 var(--fd);width:max-content}
.i-faixa-trilho span:nth-child(4n+3){color:var(--acento-luz)}

/* 2. teste na hora */
.i-teste{padding:var(--e8) clamp(16px,4vw,48px)}
.i-teste-caixa{max-width:1080px;margin:0 auto;background:var(--acento-nevoa);border-radius:28px;padding:clamp(24px,4vw,56px)}
.i-teste-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,1.5fr) auto;gap:var(--e3);align-items:end;margin-top:var(--e5)}
.i-teste-form label{display:grid;gap:6px;font:600 14px var(--fb)}
.i-teste-form :is(input,select){min-height:54px;border-radius:14px;border:1px solid var(--borda2);background:var(--papel);font-size:16px;padding:0 14px}
.i-resultado{margin-top:var(--e5);background:var(--papel);border-radius:20px;padding:var(--e5);display:grid;gap:var(--e3);justify-items:start}
.i-resultado-n{font:800 clamp(22px,2.4vw,32px)/1.15 var(--fd);letter-spacing:-.02em;margin:0}.i-resultado-n b{color:var(--acento-forte);font-size:1.5em}
.i-resultado-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2);width:100%}
.i-resultado-lista li{display:grid;gap:2px;padding:var(--e3);border:1px solid var(--borda);border-radius:14px}.i-resultado-lista span{font-size:14px;color:var(--tinta2)}
.i-resultado p{margin:0}

/* 3. painéis que se empilham: cada um fica preso no topo e o anterior continua aparecendo à esquerda */
.i-porque{padding:var(--e7) 0 0}.i-porque>.i-titulo{margin-inline:clamp(16px,4vw,48px)}
.i-painel{position:sticky;top:0;min-height:100svh;margin-left:calc(var(--i) * clamp(14px,3vw,44px));background:var(--cor);color:var(--tinta-p);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:var(--e5);padding:var(--e7) clamp(16px,4vw,56px);overflow:clip;border-top-left-radius:var(--raio2)}
.i-numero{font:800 clamp(200px,44vw,680px)/.8 var(--fd);letter-spacing:-.06em;will-change:transform}
.i-painel-texto{max-width:32rem;border-top:1px solid currentColor;padding-top:var(--e4)}
.i-painel-texto h3{font:800 clamp(28px,3.2vw,44px)/1.05 var(--fd);margin:0 0 var(--e3);letter-spacing:-.02em}.i-painel-texto p{margin:0 0 var(--e3)}
.i-solucao{border-radius:14px;padding:var(--e3) var(--e4);background:color-mix(in srgb,var(--papel) 18%,transparent)}

/* 4. como funciona: texto e tela alternados, a tela desliza mais devagar que o texto */
.i-acao{padding:var(--e8) clamp(16px,4vw,48px);display:grid;gap:clamp(48px,8vw,120px)}
.i-bloco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.i-bloco.invertido .i-bloco-texto{order:2}
.i-bloco-texto h3{font:800 clamp(30px,3.6vw,52px)/1 var(--fd);letter-spacing:-.03em;margin:var(--e2) 0 var(--e3)}.i-bloco-texto p{font-size:18px;color:var(--tinta2);max-width:32rem;margin:0}
.i-passo-n{font:800 20px var(--fm);color:var(--acento)}
.i-bloco-tela{background:var(--nevoa);border-radius:28px;padding:clamp(24px,4vw,56px);min-height:320px;display:grid;align-items:center}
.i-bloco-tela .i-mock{max-width:420px;justify-self:center;width:100%}

/* 5. dois caminhos */
.i-caminhos{padding:var(--e8) clamp(16px,4vw,48px)}
.i-duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4)}
.i-caminho{border-radius:28px;padding:clamp(24px,4vw,48px);background:var(--papel);border:1px solid var(--borda2);display:flex;flex-direction:column;gap:var(--e3)}
.i-caminho h3{font:800 clamp(26px,2.6vw,38px)/1.05 var(--fd);letter-spacing:-.025em;margin:0}
.i-caminho ul{margin:0 0 var(--e3);padding-left:1.2em;display:grid;gap:var(--e2)}
.i-caminho .i-botao{margin-top:auto;align-self:flex-start}
.i-caminho.escuro{background:var(--noite);color:var(--tinta-clara);border-color:var(--noite)}.i-caminho.escuro .i-rotulo{color:var(--acento-luz)}

/* 6. confiança */
.i-confianca{padding:var(--e7) clamp(16px,4vw,48px);border-block:1px solid var(--borda2)}
.i-quatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.i-selo{border-top:3px solid var(--acento);padding-top:var(--e3)}.i-selo b{font:800 20px/1.15 var(--fd);display:block;margin-bottom:var(--e2)}.i-selo p{margin:0;color:var(--tinta2);font-size:15px}

/* 7. preço */
.i-precos{padding:var(--e8) clamp(16px,4vw,48px)}
.i-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4);align-items:stretch}
.i-plano{border-radius:28px;padding:clamp(24px,3vw,40px);background:var(--papel);border:1px solid var(--borda2);display:flex;flex-direction:column;gap:var(--e3)}
.i-plano h3{font:800 26px/1.1 var(--fd);letter-spacing:-.02em;margin:0}
.i-valor{margin:0;font-size:16px;color:var(--tinta2)}.i-valor b{font:800 clamp(36px,3.6vw,52px)/1 var(--fd);letter-spacing:-.04em;color:var(--tinta)}
.i-plano ul{margin:0;padding-left:1.2em;display:grid;gap:var(--e2)}.i-plano .i-botao{margin-top:auto}
.i-plano.destaque{background:var(--acento-nevoa);border-color:var(--acento)}

/* 8. perguntas */
.i-perguntas{padding:var(--e7) clamp(16px,4vw,48px);max-width:960px;margin:0 auto}
.i-pergunta{border-top:1px solid var(--borda2);padding:var(--e4) 0}.i-pergunta:last-child{border-bottom:1px solid var(--borda2)}
.i-pergunta summary{font:800 clamp(19px,1.6vw,24px)/1.2 var(--fd);letter-spacing:-.015em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--e3)}
.i-pergunta summary::-webkit-details-marker{display:none}.i-pergunta summary::after{content:"+";font:400 28px/1 var(--fb);transition:transform .2s ease}.i-pergunta[open] summary::after{transform:rotate(45deg)}
.i-pergunta p{margin:var(--e3) 0 0;color:var(--tinta2);max-width:48rem}

/* fecho */
.i-frase{min-height:90svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:var(--e5);padding:var(--e8) clamp(16px,4vw,48px)}
.i-zoom{margin:0;font:800 clamp(64px,16vw,260px)/.86 var(--fd);letter-spacing:-.05em}
.i-frase p{max-width:34rem;margin:0}
.i-rodape{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e3);padding:var(--e5) clamp(16px,4vw,48px);border-top:1px solid var(--borda2);font-size:14px;color:var(--tinta2)}
.i-rodape nav{display:flex;gap:var(--e4)}

@media screen and (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  .i-capa-texto{animation:i-some linear both;animation-timeline:scroll(root);animation-range:0 80svh}@keyframes i-some{to{opacity:.15;transform:translateY(-60px)}}
  .i-mock-principal{animation:i-p1 linear both;animation-timeline:scroll(root);animation-range:0 100svh}@keyframes i-p1{to{transform:translateY(-120px)}}
  .i-mock-pagina{animation:i-p2 linear both;animation-timeline:scroll(root);animation-range:0 100svh}@keyframes i-p2{to{transform:translateY(-170px) rotate(3deg)}}
  .i-mock-celular{animation:i-p3 linear both;animation-timeline:scroll(root);animation-range:0 100svh}@keyframes i-p3{to{transform:translateY(-20px)}}
  .i-faixa-trilho{animation:i-corre linear both;animation-timeline:view();animation-range:cover}@keyframes i-corre{to{transform:translateX(-50%)}}
  .i-titulo,.i-titulo-m{animation:i-titulo linear both;animation-timeline:view();animation-range:entry 0% cover 35%}@keyframes i-titulo{from{opacity:.001;transform:translateY(60px)}to{opacity:1;transform:none}}
  .i-numero{animation:i-numero linear both;animation-timeline:view();animation-range:cover}@keyframes i-numero{from{transform:translateY(30%)}to{transform:translateY(-30%)}}
  .i-painel-texto{animation:i-texto linear both;animation-timeline:view();animation-range:entry 10% entry 70%}@keyframes i-texto{from{transform:translateY(64px)}to{transform:none}}
  .i-bloco-tela .i-mock{animation:i-flutua linear both;animation-timeline:view();animation-range:cover}@keyframes i-flutua{from{transform:translateY(70px) rotate(-1.5deg)}to{transform:translateY(-70px) rotate(1.5deg)}}
  .i-bloco-texto,.i-caminho,.i-plano,.i-selo{animation:i-sobe linear both;animation-timeline:view();animation-range:entry 0% entry 60%}@keyframes i-sobe{from{opacity:.001;transform:translateY(48px)}to{opacity:1;transform:none}}
  .i-zoom{animation:i-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 50%}@keyframes i-zoom{from{transform:scale(.55);opacity:.2}to{transform:none;opacity:1}}
  .i-topo{animation:i-topo linear both;animation-timeline:scroll(root);animation-range:0 120px}@keyframes i-topo{to{background:var(--papel0);border-bottom-color:var(--borda2)}}
}}
@media (max-width:1000px){
  .i-capa{grid-template-columns:minmax(0,1fr);padding-top:100px}.i-capa-produto{min-height:420px;max-width:520px}
  .i-teste-form{grid-template-columns:minmax(0,1fr) minmax(0,8rem)}.i-teste-form label:nth-of-type(3),.i-teste-form .i-botao{grid-column:1/-1}
  .i-quatro{grid-template-columns:repeat(2,minmax(0,1fr))}.i-tres{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .i-nav>a:not(.i-botao){display:none}.i-nav .i-botao.sec{display:none}.i-botao{min-height:42px;padding:0 16px}.i-botao.grande{min-height:50px;padding:0 22px}
  .i-painel{grid-template-columns:minmax(0,1fr);align-content:center;margin-left:calc(var(--i) * 10px)}.i-numero{font-size:42vw}
  .i-bloco,.i-duas{grid-template-columns:minmax(0,1fr)}.i-bloco.invertido .i-bloco-texto{order:0}
  .i-quatro{grid-template-columns:minmax(0,1fr)}
  .i-mock-principal{inset:30px 16px auto 0}.i-mock-pagina{width:70%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.i-pergunta summary::after,.i-botao{transition:none}}
