/* Landing do Trado (Direção A, "Caderno de pregão", aprovada em 28/10/2026).
   Cores só por var(--...) de tokens.css; títulos em Zilla Slab, texto na fonte do sistema (como o app). */

/* ---------- Base ---------- */
:root{ --sobre-accent:#fff; --largura:1120px; --gutter:20px; }
:root[data-theme="dark"]{ --sobre-accent:#0E1A18; }
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance;}
p{margin:0 0 1em;}
a{color:var(--accent);}
img,video{max-width:100%;height:auto;display:block;}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:3px;}
.pular{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--text);padding:8px 12px;z-index:100;}
.pular:focus{left:12px;top:12px;}
.in{max-width:var(--largura);margin:0 auto;padding:0 var(--gutter);}
.in-estreito{max-width:760px;}

/* ---------- Botões ---------- */
.botao{display:inline-block;background:var(--accent);color:var(--sobre-accent);text-decoration:none;font-weight:600;padding:13px 22px;border-radius:8px;border:2px solid var(--accent);line-height:1.2;}
.botao:hover{filter:brightness(1.08);}
.botao-sec{background:transparent;color:var(--accent);}
.nota-cta{font-size:14px;color:var(--sub);margin-top:12px;}
.alterna{display:flex;gap:4px;justify-content:center;margin-bottom:12px;}
.alterna button{font:inherit;font-size:13px;padding:5px 10px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:6px;cursor:pointer;}
.alterna button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--sobre-accent);}

/* ---------- Cabeçalho ---------- */
.topo{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.topo-in{max-width:var(--largura);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:20px;position:relative;}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--accent);font:700 24px "Zilla Slab",Georgia,serif;}
.menu{display:flex;gap:22px;margin-left:auto;align-items:center;}
.menu a{color:var(--text);text-decoration:none;font-size:15px;}
.menu a:hover{color:var(--accent);}
.menu .entrar{color:var(--accent);font-weight:600;}
.botao-topo{padding:9px 16px;font-size:15px;}
.menu-botao{display:none;margin-left:auto;font:inherit;font-size:15px;background:none;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:7px 12px;}

/* ---------- Dobra e régua de R ---------- */
.dobra{position:relative;padding:72px 0 64px;overflow:hidden;}
/* as bolinhas ficam longe do texto (só a partir da metade direita) e suaves, nos dois temas, para não atrapalhar a leitura */
.fundo{position:absolute;inset:0;top:24px;height:440px;pointer-events:none;overflow:hidden;opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 68%);mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 68%);}
/* altura fixa e largura pela proporção do desenho (sem esticar); 3 cópias, a animação anda 1/3 */
.regua{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;aspect-ratio:9/1;animation:desliza 120s linear infinite;}
.regua .linhas line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;}
.regua .linhas .zero{stroke:var(--sub);stroke-dasharray:4 6;}
.regua .loss{fill:var(--neg);} .regua .be{fill:var(--sub);} .regua .saida{fill:var(--accent);opacity:.6;}
.regua .alvo{fill:var(--pos);} .regua .super{fill:var(--accent2);}
.regua .onda{fill:none;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:onda 6s ease-out infinite;}
.regua .onda.loss{stroke:var(--neg);} .regua .onda.be{stroke:var(--sub);} .regua .onda.saida{stroke:var(--accent);}
.regua .onda.alvo{stroke:var(--pos);} .regua .onda.super{stroke:var(--accent2);}
.regua-rotulos{position:absolute;right:var(--gutter);top:0;height:100%;margin:0;padding:0;list-style:none;font-size:12px;color:var(--sub);}
.regua-rotulos li{position:absolute;right:0;transform:translateY(-50%);}
.regua-rotulos li:nth-child(1){top:20%;} .regua-rotulos li:nth-child(2){top:40%;} .regua-rotulos li:nth-child(3){top:60%;} .regua-rotulos li:nth-child(4){top:80%;}
@keyframes desliza{to{transform:translateX(-33.3333%);}}
@keyframes onda{0%{transform:scale(1);opacity:.8;}100%{transform:scale(5);opacity:0;}}
.dobra-in{position:relative;max-width:var(--largura);margin:0 auto;padding:0 var(--gutter);}
.sobretitulo{font:600 18px "Zilla Slab",Georgia,serif;color:var(--accent2);margin-bottom:14px;}
.dobra h1{font-size:clamp(44px,8vw,92px);color:var(--accent);line-height:1.02;letter-spacing:-.01em;}
.subtitulo{font-size:clamp(18px,2vw,21px);max-width:52ch;margin:24px 0 28px;}
.acoes{display:flex;flex-wrap:wrap;gap:12px;}
.captura-dobra{position:relative;max-width:var(--largura);margin:56px auto 0;padding:0 var(--gutter);}
.captura-dobra img{box-shadow:0 1px 0 var(--line),0 24px 48px -28px color-mix(in srgb,var(--accent) 45%,transparent);}

/* ---------- Capturas reais do app (dados simulados) ---------- */
.captura{margin:0 auto;}
.captura.captura-dobra{margin:56px auto 0;}
.captura img{display:block;width:100%;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
.tela-cel{max-width:300px;margin:0 auto;}
/* Computador | Celular: antes da escolha, vale o tamanho da tela; depois do clique, vale a escolha */
@media (max-width:700px){.captura-dobra:not([data-disp]) .tela-pc{display:none;}}
@media (min-width:701px){.captura-dobra:not([data-disp]) .tela-cel{display:none;}}
.captura-dobra[data-disp="celular"] .tela-pc,.captura-dobra[data-disp="computador"] .tela-cel{display:none;}

/* carrossel de telas do app (topo): uma por vez, sem troca automática; sem JavaScript aparece só a primeira */
.slide{display:none;}
.slide.ativo{display:block;}
@media (prefers-reduced-motion:no-preference){.slide.ativo{animation:aparece .25s ease-out;}}
@keyframes aparece{from{opacity:0;}to{opacity:1;}}
.carr-nav{display:flex;align-items:center;gap:12px;margin-top:14px;}
.carr-legenda{flex:1;margin:0;text-align:center;font-size:16px;color:var(--sub);}
.carr-legenda b{color:var(--text);font-family:"Zilla Slab",Georgia,serif;font-size:19px;margin-right:4px;}
.carr-nav button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:26px;line-height:1;cursor:pointer;}
.carr-nav button:hover{border-color:var(--accent);color:var(--accent);}
.carr-pontos{display:flex;justify-content:center;gap:2px;margin-top:6px;}
.carr-pontos button{position:relative;width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;}
.carr-pontos button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--line);}
.carr-pontos button[aria-current="true"]::before{background:var(--accent);}
html:not(.js) .carr-nav,html:not(.js) .carr-pontos{display:none;}
.tela-cel .carr-legenda{font-size:14px;}
.tela-cel .carr-legenda b{display:block;margin:0;font-size:17px;}
figcaption,.painel-nota{font-size:13px;color:var(--sub);margin-top:8px;text-align:center;}

/* textos corridos justificados (hifenização pelo idioma da página, pt-BR) */
.lead,.citacao,.frentes dd,.destaque-txt p,.mentoria p,.itens,.faq details p{text-align:justify;hyphens:auto;}

/* ---------- Faixa de fatos ---------- */
.fatos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.fatos ul{max-width:var(--largura);margin:0 auto;padding:18px var(--gutter);list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;font-size:15px;}
.fatos li{flex:1 1 220px;padding:0 18px;border-left:2px solid var(--accent2);}

/* ---------- Seções ---------- */
.secao{padding:88px 0;}
.titulo-secao{font-size:clamp(28px,4vw,40px);margin-bottom:28px;}
.lead{font-size:19px;max-width:80ch;}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;}
.tres article{border-top:2px solid var(--accent2);padding-top:18px;}
.tres h3{font-size:22px;margin-bottom:10px;}
.tres p{color:var(--sub);}
.citacao{font:500 clamp(21px,2.6vw,27px)/1.45 "Zilla Slab",Georgia,serif;max-width:62ch;margin-bottom:44px;}
.frentes{margin:0;}
.frentes div{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);}
.frentes div:last-child{border-bottom:1px solid var(--line);}
.frentes dt{font:700 24px "Zilla Slab",Georgia,serif;color:var(--accent);}
.frentes dd{margin:0;max-width:80ch;}
/* as capturas dos destaques são faixas largas (cartões do app): texto em cima, imagem na largura toda, para ficar legível */
/* abas do app (Gestão de Risco, Comportamento, Insights, Dashboard, Evolução Patrimonial); sem JavaScript, todos os painéis ficam visíveis */
.abas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 48px;}
.abas button{font:inherit;font-size:16px;font-weight:600;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;}
.abas button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--sobre-accent);}
.painel-cab{margin:0 0 48px;}
.painel-resumo{margin:0 0 14px;font-size:19px;max-width:80ch;}
.painel-veja{margin:0;font-weight:600;color:var(--accent);}
.painel-nome{font:700 24px "Zilla Slab",Georgia,serif;color:var(--accent2);margin:0 0 28px;}
html.js .painel:not(.ativo){display:none;}
html.js .painel-nome{display:none;}
html:not(.js) .abas{display:none;}
html:not(.js) .painel{margin-bottom:24px;}
.destaque{margin:0 0 72px;}
.painel .destaque:last-child{margin-bottom:0;}
.painel{margin-bottom:64px;}
.destaque-txt{display:grid;grid-template-columns:4fr 8fr;gap:8px 48px;align-items:baseline;margin-bottom:18px;}
.destaque-txt p{margin:0;max-width:80ch;}
.destaque h3{font-size:28px;color:var(--accent);}
.outros-titulo{font-size:28px;color:var(--accent);border-top:1px solid var(--line);padding-top:40px;margin-bottom:28px;}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grade h4{font:700 20px/1.15 "Zilla Slab",Georgia,serif;margin:0 0 14px;}
.grade dl{margin:0;}
.grade dt{font-weight:600;font-size:15px;}
.grade dd{margin:0 0 14px;font-size:15px;color:var(--sub);line-height:1.5;}
.mentoria{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* texto em cima, captura grande e centralizada embaixo */
.mentoria-in{display:grid;grid-template-columns:1fr;gap:40px;justify-items:center;}
.mentoria-in>div{max-width:80ch;}
.mentoria .captura{width:100%;max-width:1040px;}
.itens{padding-left:20px;margin:0 0 20px;}
.itens li{margin-bottom:6px;}
.miudo{font-size:14px;color:var(--sub);}
.video-quadro{margin:0;}
.video-quadro video{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel2);}
.passos ol{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:passo;}
.passos li{counter-increment:passo;position:relative;padding-top:56px;}
.passos li::before{content:counter(passo);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 20px "Zilla Slab",Georgia,serif;color:var(--accent);border:2px solid var(--accent);background:var(--bg);}
.passos li::after{content:"";position:absolute;top:20px;left:48px;right:-20px;height:2px;background:var(--line);}
.passos li:last-child::after{display:none;}
.passos h3{font-size:21px;margin-bottom:6px;}
.passos p{color:var(--sub);font-size:16px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:18px 0;font:600 19px "Zilla Slab",Georgia,serif;list-style:none;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent2);font-size:24px;line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq details p{color:var(--sub);max-width:80ch;}
.final{text-align:center;}
.final h2{font-size:clamp(30px,4.4vw,46px);color:var(--accent);margin-bottom:14px;}
.aviso-risco{font-weight:600;font-size:15px;margin-top:28px;}

/* ---------- Rodapé ---------- */
.rodape{border-top:1px solid var(--line);padding:48px 0 64px;font-size:14px;color:var(--sub);text-align:center;}
.rodape-marca{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;color:var(--text);}
.rodape nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:20px;}
.rodape .aviso-risco{margin-top:0;font-size:14px;color:var(--text);}

/* ---------- Tablet e celular ---------- */
@media (max-width:900px){
  .tres,.mentoria-in{grid-template-columns:1fr;}
  .destaque-txt{grid-template-columns:1fr;}
  .grade{grid-template-columns:1fr 1fr;}
  .passos ol{grid-template-columns:1fr 1fr;}
  .passos li::after{display:none;}
  .frentes div{grid-template-columns:1fr;gap:8px;}
}
@media (max-width:760px){
  :root{--gutter:16px;}
  body{font-size:16px;}
  .secao{padding:64px 0;}
  .menu-botao{display:block;}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;}
  .menu.aberto{display:flex;}
  .menu a{padding:12px 0;width:100%;font-size:17px;}
  .topo-in{gap:10px;}
  .botao-topo{padding:8px 12px;font-size:14px;}
  .grade,.passos ol{grid-template-columns:1fr;}
  .acoes .botao{flex:1 1 100%;text-align:center;}
  .regua-rotulos{display:none;}
  .fundo{opacity:.25;}
}

/* Sem JavaScript: esconde os botões que dependem dele ("Solicitar acesso" e o rodapé continuam funcionando) */
html:not(.js) .menu-botao, html:not(.js) .alterna{display:none;}

/* Movimento reduzido: régua parada */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .regua{animation:none;}
  .regua .onda{animation:none;display:none;}
}