*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:#43534b;background:#fff;font-family:"Hanken Grotesque",sans-serif;font-size:16px;line-height:1.65}h1,h2,h3,p{margin:0}h1,h2,h3,.brand,.price{font-family:"Bricolage Grotesque",sans-serif;color:#173e2c}h1,h2,h3{line-height:1.12;letter-spacing:-.035em}a{color:inherit}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a,button,input,summary{touch-action:manipulation}:focus-visible{outline:3px solid #b5791f;outline-offset:5px}[hidden]{display:none!important}.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}.header{position:sticky;top:0;z-index:10;background:#fffffff2;backdrop-filter:blur(12px);border-bottom:1px solid #e4eae5}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:800;line-height:1.1;flex-shrink:0}.brand-mark{background:#173e2c;color:#e5f4b5;width:42px;height:44px;display:grid;place-items:center;border-radius:12px;font-size:29px}.brand-sub{display:block;font:600 9px "Hanken Grotesque",sans-serif;letter-spacing:.2em;margin-top:6px}.nav nav{display:flex;gap:28px;font-size:14px;font-weight:600}.nav nav a,.login,.text-link{text-decoration:none}.nav nav a:hover,.text-link:hover{color:#1c7a4b;text-decoration:underline;text-underline-offset:5px}.login{border:1px solid #dce4de;border-radius:9px;padding:10px 15px;font-size:14px;font-weight:700;white-space:nowrap}.hero{padding:88px 0 74px;background:linear-gradient(120deg,#fafaf5,#f0f6ef)}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:62px;align-items:center}.hero-grid>*{min-width:0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:#387257;line-height:1.6;margin-bottom:20px}.status-dot{display:inline-block;width:7px;height:7px;background:#1c7a4b;border-radius:50%;margin-right:8px}h1{font-size:clamp(38px,4.5vw,60px);font-weight:700;letter-spacing:-.045em}h1 em{font-style:normal;color:#278050}.lead{font-size:18px;line-height:1.65;margin-top:25px;max-width:510px}.hero-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:30px}.button{display:inline-flex;gap:8px;justify-content:center;align-items:center;min-height:50px;padding:14px 22px;border-radius:9px;text-decoration:none;font-size:14px;font-weight:700;border:0;transition:transform .18s,background .18s}.button:hover{transform:translateY(-2px)}.primary{background:#173e2c;color:#fff;box-shadow:0 4px 10px #173e2c12}.primary:hover{background:#245b40}.light{background:#e5f4b5;color:#173e2c}.text-link{font-size:14px;font-weight:700;color:#173e2c}.reassurance{font-size:12px;color:#58685f;margin-top:15px}.hero-points{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:32px;font-size:12px}.hero-points span:before{content:"✓";margin-right:6px;color:#1c7a4b}.product-demo{background:#fff;border:1px solid #cbded0;border-radius:18px;box-shadow:0 25px 60px #173e2c14;overflow:hidden;scroll-margin-top:110px;animation:enter .6s ease-out}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;background:#173e2c;color:#fff}.demo-brand{font-weight:800;font-size:16px}.demo-brand span{display:block;font-size:8px;font-weight:500;letter-spacing:.13em;color:#d2e4d8;margin-top:4px}.demo-status{font-size:9px;letter-spacing:.08em;padding:5px 7px;border:1px solid #678674;border-radius:5px;color:#e5f4b5}.demo-tabs{display:flex;border-bottom:1px solid #e1e8e2;padding:0 16px;gap:8px}.demo-tabs button{flex:1;min-height:51px;border:0;border-bottom:3px solid transparent;background:transparent;color:#647268;font-size:12px;font-weight:700}.demo-tabs button[aria-pressed=true]{border-color:#1c7a4b;color:#173e2c}.demo-body{padding:25px;min-height:345px}.demo-body h2{font-size:24px}.demo-body .eyebrow{font-size:9px;margin-bottom:9px}.demo-body p{font-size:13px;margin-top:10px}.demo-foot{padding:12px 20px;background:#f5f8f4;color:#5b695f;font-size:10px;border-top:1px solid #e1e8e2}.demo-topic{border:1px solid #e0e9e2;border-radius:10px;padding:12px 14px;margin-top:14px}.demo-topic small{display:block;font-size:10px;color:#597063}.demo-topic strong{font-size:13px;display:block;color:#173e2c;margin:4px 0}.demo-topic button{font-size:12px;border:0;background:#e9f4e7;color:#1c623e;border-radius:5px;padding:6px 10px}.demo-action{margin-top:16px;min-height:40px;padding:9px 14px;font-size:12px}.demo-answers{display:grid;gap:8px;margin-top:16px}.demo-answers button{background:white;border:1px solid #cdded1;border-radius:7px;text-align:left;padding:10px 12px;color:#173e2c;font-size:12px}.demo-answers button:hover{background:#eff7ee}.demo-answers button.selected{border:2px solid #1c7a4b;background:#e9f4e7}.demo-score{font:700 60px "Bricolage Grotesque",sans-serif;color:#173e2c;margin-top:16px}.program-strip{border-bottom:1px solid #e4eae5;padding:28px 0}.program-strip .eyebrow{font-size:9px;margin-bottom:15px}.program-links{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.program-links a{text-decoration:none;font:700 22px "Bricolage Grotesque",sans-serif;color:#2b4d39}.program-links small{font:500 10px "Hanken Grotesque",sans-serif;display:block;color:#627164;letter-spacing:.08em;margin-top:4px}.section{padding:86px 0}.section-heading{display:flex;align-items:flex-end;gap:50px;justify-content:space-between;margin-bottom:40px}h2{font-size:clamp(30px,3.2vw,43px);font-weight:600}.section-heading>p{max-width:330px;font-size:15px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.steps article{border-top:1px solid #cad9ce;padding:25px 4px}.step-num{font:500 40px "Bricolage Grotesque",sans-serif;color:#9cb89c}.step-label{font-size:10px;letter-spacing:.1em;font-weight:800;margin:20px 0 12px;color:#397052}.steps h3{font-size:23px;line-height:1.2;margin-bottom:15px}.steps article>p:last-child{font-size:14px;line-height:1.8}.replan{margin-top:22px;background:#f2f6ef;border-left:3px solid #6e956b;padding:20px 24px;border-radius:0 10px 10px 0}.replan strong{color:#173e2c}.replan p{font-size:14px;margin-top:4px}.value-section{background:#f8f6f0}.value-grid,.offer-grid,.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.small{font-size:17px;margin-bottom:23px}.value-list article{display:flex;gap:22px;padding:25px 0;border-bottom:1px solid #dedfd3}.value-list article:first-child{padding-top:0}.value-list article>span{font-size:12px;color:#6a8065}.value-list h3{font-size:21px;margin-bottom:10px}.value-list p{font-size:14px}.cert-grid{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid #dce5dc;border-radius:14px;overflow:hidden}.cert-options{padding:15px;background:#f5f7f2;display:flex;flex-direction:column;gap:8px}.cert-options button{border:1px solid transparent;background:transparent;text-align:left;padding:15px;border-radius:8px;color:#173e2c;min-height:58px}.cert-options button[aria-pressed=true]{background:#173e2c;color:white}.cert-options strong,.cert-options small{display:block}.cert-options small{font-size:10px;letter-spacing:.08em}.cert-detail{padding:30px;min-width:0}.cert-detail h3{font-size:27px;margin-bottom:15px}.cert-detail>p{font-size:14px}.cert-detail details{margin-top:20px;border-top:1px solid #e0e8e0;padding:15px 0}.cert-detail summary{font-size:13px;font-weight:700;cursor:pointer}.cert-detail li{font-size:13px;margin-bottom:8px}.availability{font-size:12px;max-width:860px;line-height:1.7;margin-top:18px;color:#607063}.offer-section{background:#eff5ed}.offer-grid{align-items:center}.offer-list{padding-left:20px;font-size:14px;line-height:2.2}.price-card{background:white;border:1px solid #d5e2d1;padding:35px;border-radius:16px}.price-card h3{font-size:26px}.price{font-size:58px;letter-spacing:-.05em;margin:20px 0 0;line-height:1.3}.price-card>p{font-size:13px}.price-card .checkout{display:flex;margin-top:25px;flex-wrap:wrap}.payment{text-align:center;margin-top:13px;color:#566a59}.guarantee{border-top:1px solid #dfe8dc;margin-top:24px;padding-top:20px;font-size:13px}.guarantee p{font-size:12px;margin-top:5px}.faq-grid{grid-template-columns:.8fr 1.2fr}.faq details{border-bottom:1px solid #dae4da;padding:19px 0}.faq summary{font-size:16px;font-weight:600;cursor:pointer;color:#173e2c;padding-right:12px}.faq p{font-size:14px;margin-top:14px}.closing{background:#173e2c;padding:65px 0;text-align:center}.closing h2{color:white;max-width:720px;margin:auto}.closing .eyebrow{color:#c3d7ac}.closing .button{margin-top:28px}.footer{display:flex;gap:25px;align-items:center;justify-content:space-between;padding:30px 0}.footer .brand{font-size:17px}.footer p,.footer a{font-size:11px}.footer>div{display:flex;gap:20px}.skip{position:fixed;top:-100px;left:12px;background:white;color:#173e2c;z-index:20;padding:12px}.skip:focus{top:12px}.enter{animation:enter .5s ease-out both}@keyframes enter{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.hero-grid{gap:30px}.nav nav{gap:16px}.hero{padding:55px 0}.value-grid,.offer-grid,.faq-grid{gap:40px}.hero-actions{gap:16px}.section{padding:65px 0}.demo-body{padding:20px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav{min-height:70px;gap:14px}.nav nav{display:none}.brand{font-size:20px}.login{font-size:12px}.hero-grid,.value-grid,.offer-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}.hero{padding:42px 0}.hero-copy{max-width:560px}.product-demo{width:100%;max-width:520px;margin:10px auto 0}.hero-grid{gap:35px}.hero h1{font-size:clamp(36px,8vw,54px)}.lead{font-size:16px}.hero-points{margin-top:22px}.section-heading{display:block}.section-heading>p{margin-top:20px}.steps{grid-template-columns:1fr}.steps article{padding:20px 0}.step-num{float:right}.step-label{margin-top:7px}.steps h3{max-width:85%}.cert-grid{grid-template-columns:1fr}.cert-options{display:grid;grid-template-columns:1fr 1fr;padding:10px}.cert-detail{padding:22px}.section{padding:52px 0}.value-grid,.offer-grid,.faq-grid{gap:30px}.price-card{padding:25px}.footer{flex-wrap:wrap;gap:15px}.footer>div{flex-wrap:wrap}.program-links{justify-content:flex-start;gap:22px 30px}.program-links a{font-size:19px}.demo-body{min-height:335px}.closing h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* ══════════════════════════════════════════════════════════════════
HERO COM A AQUARELA DA TRILHA (12/09/2026)
O dono enviou uma aquarela propria: bussola no canto esquerdo, vale ao
centro e a trilha pontilhada subindo ate a bandeira no alto da montanha.
Ela nao entra como "background" do hero por um motivo pratico: os quatro
marcos da jornada precisam pousar EM CIMA de pontos concretos do desenho.
Por isso a imagem vive numa camada com a proporcao original travada
(1600x900), ancorada embaixo e com 100% de largura. Assim cada marco pode
ser posicionado em porcentagem e cai sempre no mesmo lugar do desenho, em
qualquer tela. Se a janela for mais baixa que a camada, o corte acontece
em cima, onde so ha ceu.
══════════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;background:#F9F9F2;padding:74px 0 78px;min-height:min(50vw,700px);display:flex;align-items:center}
.hero-art{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1600/900;
background:url("../img/hero-trilha.webp") center bottom/100% 100% no-repeat}
/* Rede de seguranca para navegador sem aspect-ratio (Safari anterior ao 15,
WebView antigo de Android): sem ela a camada fica com altura zero e a
aquarela simplesmente nao aparece. Porcentagem de padding e calculada
sobre a LARGURA, entao 56,25% reproduz a mesma proporcao 1600x900. */
@supports not (aspect-ratio:16/9){ .hero-art{height:0;padding-bottom:56.25%} }
/* Sem z-index proprio, a camada nao vira contexto de empilhamento e os
marcos conseguem subir acima do veu, que tambem e z-index 0. */
.trilha-marco,.hero-frase{z-index:2}
.hero-grid{position:relative;z-index:1}
/* Veu so atras do texto. Lavar a imagem inteira apagaria a bussola, que e a
marca; aqui a tinta clareia onde ha leitura e continua viva no resto. */
.hero-copy{position:relative;z-index:1}
/* O veu atravessa o hero inteiro na horizontal, sem caixa: caixa deixa
canto visivel por cima da aquarela. Ele nasce fraco na borda esquerda,
para a bussola continuar viva, firma onde o texto passa e se dissolve
antes do cartao de demonstracao. */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(90deg,rgba(250,251,246,.3) 0%,rgba(250,251,246,.62) 7%,rgba(250,251,246,.82) 15%,rgba(250,251,246,.8) 34%,rgba(250,251,246,.5) 46%,rgba(250,251,246,.12) 56%,rgba(250,251,246,0) 64%)}
/* Marcos da trilha. As coordenadas seguem pontos do desenho: o inicio do
caminho, a curva no meio do vale, a subida e a bandeira. */
.trilha-marco{position:absolute;transform:translate(-50%,-50%);
font:800 10px "Hanken Grotesque",sans-serif;letter-spacing:.16em;text-transform:uppercase;
color:#2C6047;background:rgba(255,255,255,.72);border:1px solid rgba(44,96,71,.16);
padding:7px 13px;border-radius:99px;white-space:nowrap;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(23,62,44,.07)}
/* O cartao de demonstracao ocupa toda a metade direita, entao os tres
primeiros marcos seguem a trilha na faixa livre, a esquerda e embaixo. */
.marco-1{left:19%;top:94%}
.marco-2{left:37%;top:89%}
.marco-3{left:45%;top:87%}
.marco-4{left:auto;right:18px;top:25%;transform:translateY(-50%);color:#17462F;background:rgba(255,255,255,.86);border-color:rgba(44,96,71,.3);font-weight:800}
.marco-4::before{content:"✓";margin-right:7px;color:#1C7A4B}
/* A frase mora na margem, fora da coluna de 1160px. Abaixo de 1440px nao ha
margem para ela, entao ela some em vez de brigar com o cartao. */
.hero-frase{position:absolute;right:1.5%;top:60%;width:190px;margin:0;
font:italic 500 13px/1.6 "Hanken Grotesque",sans-serif;color:#4B5D51;border-top:1px solid rgba(44,96,71,.25);padding-top:14px}
/* A bandeira e a frase vivem na margem que sobra ao lado do cartao. A
coluna de conteudo tem 1160px no maximo; abaixo de 1520px de janela a
margem nao comporta o selo sem encostar no cartao, que foi exatamente o
que aconteceu em 1400px. Por isso ele e ancorado a direita, e nao numa
porcentagem da largura.
O limite de cima existe por outro motivo: a camada do desenho cresce com
a largura da janela e e ancorada embaixo, entao acima de ~1720px o alto
da montanha, com a bandeira, sai do enquadramento. Um selo de APROVACAO
pendurado sem bandeira nenhuma nao quer dizer nada. */
@media(max-width:1599px){.hero-frase{display:none}}
@media(max-width:1519px),(min-width:1721px){.marco-4{display:none}}
/* A frase mora sobre a folhagem, que e a parte mais escura do desenho. Sem
um apoio de vidro ela simplesmente nao se le. */
.hero-frase{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
padding:13px 15px 14px;border-radius:13px;border-top:0;box-shadow:0 3px 12px rgba(23,62,44,.08);color:#3F5247}
@media(max-width:1099px){.trilha-marco{display:none}}
/* ── Cabecalho: certificacoes viram menu, e o Comece agora sai do meio da
pagina para o alto, onde a decisao acontece. ── */
.nav-acoes{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-burger,.menu-mobile,.rot-curto{display:none}
/* A linha do preco virou duas partes para poder empilhar no celular. Na tela
grande ela continua sendo uma frase so, com o ponto de separacao posto
pelo CSS. */
.reassurance strong{font-weight:600;color:inherit}
.reassurance-sub::before{content:" · "}
.nav-cta{min-height:44px;padding:11px 18px}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
font:600 14px "Hanken Grotesque",sans-serif;color:inherit}
.nav-drop-btn:hover{color:#1c7a4b}
.nav-chevron{width:15px;height:15px;transition:transform .18s}
.nav-drop-btn[aria-expanded=true] .nav-chevron{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 14px);left:-14px;z-index:20;min-width:268px;
background:#fff;border:1px solid #dce5dc;border-radius:14px;padding:8px;
box-shadow:0 18px 40px rgba(23,62,44,.14);display:grid;gap:2px}
.nav-drop-menu a{display:block;text-decoration:none;padding:10px 12px;border-radius:9px}
.nav-drop-menu a:hover{background:#F1F6F0}
.nav-drop-menu strong{display:block;font:700 14px "Bricolage Grotesque",sans-serif;color:#173e2c}
.nav-drop-menu small{display:block;font-size:10px;letter-spacing:.1em;color:#627164;margin-top:2px}
@media(max-width:1000px){
.hero{padding:60px 0 64px;min-height:0}
}
/* Entre 760 e 900px o menu de secoes e os dois botoes nao cabem na mesma
linha: o menu sai primeiro, porque as secoes continuam alcancaveis pela
rolagem, e os botoes sao o que leva a compra e ao login. */
@media(max-width:900px){ .nav nav{display:none} }
@media(max-width:760px){
/* No celular o veu e vertical: firme em cima, onde fica todo o texto, e
aberto embaixo, para a aquarela aparecer como rodape do hero. */
.hero::after{background:linear-gradient(180deg,rgba(250,251,246,.96) 0%,rgba(250,251,246,.92) 55%,rgba(250,251,246,.5) 74%,rgba(250,251,246,0) 84%)}
/* No celular a camada com a proporcao do desenho viraria uma faixa baixa
demais. Ela cresce e sai para a esquerda, de modo que a bussola e a
montanha continuem reconheciveis atras do texto. */
/* A PAISAGEM NO ALTO, ONDE ELA PRECISA SER VISTA (13/09/2026)
Tentamos a faixa no pe do hero e depois a camada presa na base da
janela. Nas duas o cartao de demonstracao e os blocos brancos, que sao
opacos, cobriam o desenho: no celular a aquarela virava um detalhe no
fim da pagina. Agora ela ocupa o topo do hero, atras do texto de
abertura, que e onde o dono sempre disse que ela tinha de estar.
O recorte (cover, ancorado em 74% da altura) pega a metade de baixo do
desenho, que e onde estao a bussola, as folhas e a trilha; a metade de
cima e so ceu. A mascara dissolve o pe da faixa, entao ela termina sem
linha de corte. */
.hero-art{top:0;bottom:auto;left:0;right:0;width:auto;height:390px;aspect-ratio:auto;
background-size:cover;background-position:20% 76%;
-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
/* O veu protege a leitura do titulo sem apagar o desenho: fraco no alto,
onde ha ceu, e firme onde o texto passa por cima da folhagem. */
.hero::after{background:linear-gradient(180deg,rgba(250,251,246,.12) 0%,rgba(250,251,246,.3) 11%,rgba(250,251,246,.55) 21%,rgba(250,251,246,.78) 31%,rgba(250,251,246,.94) 41%,rgba(250,251,246,1) 52%)}
}
/* Telas estreitas de verdade: a marca encolhe para os dois botoes caberem. */
@media(max-width:430px){
.brand{font-size:18px}
.brand-mark{width:36px;height:38px;font-size:24px}
.nav-cta,.login{font-size:11px;padding:9px 10px}
.login span[aria-hidden]{display:none}
}
/* ══════════════════════════════════════════════════════════════════
CELULAR: UMA PAGINA PENSADA PARA A MAO, NAO A DE COMPUTADOR EMPILHADA
(13/09/2026)
O dono foi preciso no diagnostico: a identidade esta boa, o problema e que
o desktop so foi empilhado. A pagina ficava longa e alguns elementos
ganhavam peso demais. O que muda aqui e ritmo e tamanho, nunca conteudo:
nenhuma informacao foi removida, so reorganizada.
══════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
/* ── Cabecalho: marca menor, um botao em destaque e o resto no tres-tracos.
Ele flutua como cartao para nao virar uma faixa cheia atravessada na
tela. ── */
.header{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:9px}
.nav{min-height:62px;flex-wrap:wrap;gap:10px;padding:0 10px 0 13px;background:#fff;
border:1px solid #E2EAE3;border-radius:18px;box-shadow:0 8px 22px rgba(23,62,44,.09)}
.brand{font-size:19px;gap:9px}
.brand-mark{width:36px;height:38px;font-size:25px;border-radius:11px}
.brand-sub{font-size:8px;letter-spacing:.18em;margin-top:4px}
/* Os dois caminhos ficam visiveis na barra: comprar e entrar. O menu
guarda so as secoes da pagina. */
.login{display:inline-flex;align-items:center;font-size:11px;padding:8px 9px;border-radius:10px;white-space:nowrap}
.login span[aria-hidden]{display:none}
.nav-cta{display:inline-flex;min-height:38px;padding:9px 10px;font-size:11px;border-radius:10px}
.nav-cta span[aria-hidden]{display:none}
/* Na barra estreita o botao usa o rotulo curto; o longo volta na tela
grande. Assim os dois caminhos, comprar e entrar, cabem lado a lado. */
.rot-longo{display:none}
.rot-curto{display:inline}
.nav-acoes{gap:5px}
/* A marca pode encolher; os botoes, nao. Sem isto a barra quebra em duas
linhas quando falta um punhado de pixels. */
.brand{min-width:0;overflow:hidden;white-space:nowrap}
.nav-acoes{flex-shrink:0}
.brand{font-size:16.5px;gap:7px}
.brand-mark{width:33px;height:35px;font-size:23px;border-radius:10px}
.nav{padding:0 8px 0 11px;gap:6px}
.nav-burger{width:36px;height:36px}
.nav-burger svg{width:21px;height:21px}
.nav-burger{display:inline-grid;place-items:center;width:42px;height:42px;flex-shrink:0;
background:none;border:0;color:#173e2c;border-radius:11px}
.nav-burger svg{width:23px;height:23px}
.nav-burger[aria-expanded=true]{background:#F1F6F0}
.menu-mobile{width:100%;order:9;display:grid;gap:2px;padding:6px 0 12px;border-top:1px solid #EAF0EA}
.menu-mobile a{text-decoration:none;font-size:15px;font-weight:600;color:#173e2c;padding:12px 4px;border-radius:9px}
.menu-mobile a:active{background:#F1F6F0}
.menu-mobile-aluno{font-weight:700;color:#1c7a4b}
/* ── Hero: titulo em tres linhas, texto mais curto de largura e o cartao de
demonstracao comecando ainda na primeira rolagem. ── */
.hero{padding:26px 0 150px}
.hero-grid{gap:24px}
.eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:13px}
.hero h1{font-size:clamp(34px,8.8vw,45px);letter-spacing:-.04em}
.hero .lead{font-size:15.5px;line-height:1.62;margin-top:16px;max-width:33ch}
/* display:contents solta os dois botoes do bloco e deixa a ordem ser
decidida aqui: acao principal, preco, e so entao o link secundario. */
.hero-copy{display:flex;flex-direction:column}
.hero-copy .eyebrow{order:1}
.hero-copy h1{order:2}
.hero-copy .lead{order:3}
.hero-actions{display:contents}
.hero-actions .button{order:4;width:100%;max-width:340px;margin-top:24px;min-height:54px;font-size:15px}
.reassurance{order:5;margin-top:13px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.reassurance strong{color:#173e2c;font-weight:700}
.reassurance-sub{font-size:11.5px;color:#6B7A70}
.reassurance-sub::before{content:none}
.hero-actions .text-link{order:6;margin-top:16px;font-size:14px;text-decoration:underline;text-underline-offset:5px}
/* Os tres beneficios deixam de ser texto solto e viram prova rapida, logo
antes da demonstracao. */
.hero-points{order:7;gap:8px;margin-top:24px}
.hero-points span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#2C5745;
background:rgba(255,255,255,.8);border:1px solid rgba(44,96,71,.16);border-radius:99px;padding:8px 14px 8px 9px;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-points span:before{content:"✓";display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
background:#1C7A4B;color:#fff;font-size:11px;font-weight:800;margin:0;flex-shrink:0}
/* ── Demonstracao: mesmo conteudo, menos moldura. Ela ja mostra uma etapa
de cada vez; o que pesava era o tamanho de cada parte. ── */
.product-demo{margin:4px auto 0;border-radius:16px}
.demo-top{padding:13px 15px}
.demo-brand{font-size:14px}
.demo-brand span{font-size:7.5px;margin-top:3px}
.demo-status{font-size:8.5px;padding:4px 6px}
.demo-tabs{padding:0 8px;gap:4px}
.demo-tabs button{min-height:44px;font-size:11.5px}
.demo-body{padding:15px 14px;min-height:240px}
.demo-body .eyebrow{margin-bottom:6px}
.demo-body h2{font-size:19px}
.demo-body p{font-size:12.5px;margin-top:7px}
.demo-topic{padding:9px 11px;margin-top:8px;border-radius:9px}
.demo-topic small{font-size:9px;color:#4C6154}
.demo-topic strong{font-size:12.5px;margin:3px 0 0;line-height:1.35}
.demo-topic button{font-size:11px;padding:5px 9px;margin-top:7px}
.demo-answers{gap:7px;margin-top:12px}
.demo-answers button{padding:9px 11px;font-size:11.5px}
.demo-score{font-size:46px;margin-top:12px}
.demo-action{margin-top:12px;min-height:44px}
.demo-foot{padding:10px 14px;font-size:9.5px}
/* A paisagem volta uma vez no meio do caminho, como respiro entre os
blocos brancos e antes da oferta. E a mesma imagem ja carregada, entao
nao custa nada, e aqui ela pode ser recortada: o que importa e a
textura, nao a cena inteira. */
.offer-section::before{content:"";display:block;height:148px;margin:-38px 0 28px;
background:url("../img/hero-trilha.webp") center 64%/cover no-repeat;
-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
/* ── Ritmo geral. A pagina do celular estava longa porque cada bloco herdou
medidas de tela grande: titulo de 30px, entrelinha de 1,8 e respiro de
52px entre secoes. Aqui tudo encolhe junto, proporcionalmente. Nenhuma
informacao sai; o que muda e a densidade. ── */
.section{padding:38px 0}
.program-strip{padding:20px 0}
.program-links{gap:16px 26px}
.program-links a{font-size:17px}
h2{font-size:26px}
.section-heading{margin-bottom:26px}
.section-heading>p{margin-top:14px;font-size:14px}
.steps article{padding:17px 0}
.steps h3{font-size:20px;margin-bottom:10px}
.steps article>p:last-child{font-size:13.5px;line-height:1.65}
.step-num{font-size:34px}
.replan{padding:16px 18px;margin-top:16px}
.replan p{font-size:13.5px}
.small{font-size:15.5px;margin-bottom:16px}
.value-list article{padding:17px 0;gap:16px}
.value-list h3{font-size:18px;margin-bottom:7px}
.value-list p{font-size:13.5px}
.cert-options button{min-height:52px;padding:11px 12px}
.cert-detail{padding:20px 18px}
.cert-detail h3{font-size:22px}
.offer-list{font-size:13.5px;line-height:1.95}
.price-card{padding:22px 20px}
.price{font-size:46px;margin-top:14px}
.faq details{padding:15px 0}
.faq summary{font-size:15px}
.faq p{font-size:13.5px;margin-top:11px}
.closing{padding:46px 0}
.closing h2{font-size:26px}
}
/* ══════════════════════════════════════════════════════════════════
TELA GRANDE: O CARTAO DE DEMONSTRACAO ENCOLHE E DEIXA A PAISAGEM PASSAR
(13/09/2026)
Pedido do dono: reduzir o cartao em 25% e dar alguma transparencia. Ele
ocupava metade do hero e, sendo opaco, tapava justamente o trecho da
aquarela onde estao a trilha e a bandeira. Nada foi tirado de dentro dele:
as tres abas, os dois topicos e os botoes continuam iguais, apenas em
escala menor. A transparencia e de vidro, com desfoque, entao a leitura
nao depende do que estiver atras.
══════════════════════════════════════════════════════════════════ */
@media(min-width:761px){
/* A coluna do cartao estreita e a do texto respira. */
.hero-grid{grid-template-columns:1.35fr .72fr;gap:56px}
/* A coluna do texto ficou mais larga; sem um limite o titulo passaria a
quebrar em "passo rumo", o que estraga o ritmo das tres linhas. */
.hero h1{max-width:580px}
.hero .lead{max-width:490px}
.product-demo{
background:rgba(255,255,255,.5);
border-color:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(9px) saturate(1.1);
backdrop-filter:blur(9px) saturate(1.1);
box-shadow:0 16px 40px rgba(23,62,44,.11)}
/* O verde do cabecalho tambem abre um pouco, para o cartao inteiro parecer
uma so peca de vidro. */
.demo-top{background:rgba(20,56,40,.72);padding:10px 14px}
.demo-brand{font-size:13px}
.demo-brand span{font-size:7.5px;margin-top:3px}
.demo-status{font-size:8px;padding:4px 6px}
.demo-tabs{padding:0 12px;border-bottom-color:rgba(23,62,44,.1)}
.demo-tabs button{min-height:34px;font-size:10px;color:#55635A}
.demo-body{padding:13px 14px;min-height:206px}
.demo-body h2{font-size:17.5px}
.demo-body .eyebrow{font-size:8px;margin-bottom:7px}
.demo-body p{font-size:11px;margin-top:7px}
.demo-topic{padding:7px 9px;margin-top:7px;border-color:rgba(23,62,44,.1);background:rgba(255,255,255,.3)}
.demo-topic small{font-size:9px;color:#4C6154}
.demo-topic strong{font-size:11.5px;margin:2px 0 0;line-height:1.35}
.demo-topic button{font-size:10px;padding:4px 8px;margin-top:6px;background:rgba(233,244,231,.8)}
.demo-answers{gap:7px;margin-top:12px}
.demo-answers button{font-size:10.5px;padding:8px 10px;background:rgba(255,255,255,.45)}
.demo-score{font-size:46px;margin-top:12px}
.demo-action{margin-top:10px;min-height:32px;padding:6px 11px;font-size:11px}
/* Com o cartao mais aberto, os textos de apoio ficam sobre o desenho.
Escurecer um degrau devolve o contraste sem mudar o visual. */
.demo-foot{color:#4A574E;padding:7px 14px;font-size:8.5px;background:rgba(245,248,244,.3);border-top-color:rgba(23,62,44,.07)}
}
/* ══════════════════════════════════════════════════════════════════
O PRECO SAI DO RODAPE DA PAGINA E VAI PARA ONDE A DECISAO ACONTECE
(15/09/2026)
O dono viu que o valor estava escondido: aparecia em cinza de 12px embaixo
do botao do hero e so voltava la embaixo, no cartao da oferta. Agora ele
esta em tres alturas: no botao do cabecalho, que segue o aluno a pagina
inteira porque a barra e fixa, na linha do hero e no cartao. O valor cheio
fica riscado ao lado do valor de hoje, sempre menor e em cinza, para o olho
pousar no numero que importa.
══════════════════════════════════════════════════════════════════ */
.rot-preco,.rot-acao{display:block}
.nav-cta .rot-longo [data-price]{font-weight:800}
.reassurance{font-size:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.reassurance strong{display:inline-flex;align-items:baseline;gap:6px;font-weight:600;color:#173e2c}
.reassurance s{color:#8C9A92;font-weight:600;text-decoration-thickness:1.5px}
.reassurance b{font:800 22px "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;color:#173e2c}
.reassurance-uni{font-weight:600;color:#55665C}
.price-de{font-size:14px;color:#66776C;margin-top:20px}
.price-de s{font-weight:700;color:#8C9A92;text-decoration-thickness:1.5px}
.price{margin-top:2px}
@media(max-width:760px){
/* No celular o botao da barra vira duas linhas curtas, acao em cima e preco
embaixo. Escrito lado a lado ele empurraria o "Ja sou aluno" para fora e a
barra quebraria em duas linhas. */
.rot-curto{display:flex;flex-direction:column;align-items:center;line-height:1.1;gap:1px}
.rot-acao{font-size:9.5px;font-weight:700;opacity:.85;letter-spacing:.02em}
.rot-preco{font-size:12px;font-weight:800;letter-spacing:-.01em}
.nav-cta{padding:7px 11px;min-height:40px}
.reassurance{order:5;font-size:13px;flex-direction:row;align-items:baseline;gap:4px 7px}
.reassurance strong{gap:5px}
.reassurance b{font-size:20px}
.reassurance-sub{width:100%}
.price-de{margin-top:14px;font-size:13px}
}
@media(max-width:430px){
.rot-acao{font-size:9px}
.rot-preco{font-size:11.5px}
.nav-cta{padding:7px 9px}
}
/* Telas de 375px e menos: a barra quebrava em duas linhas desde antes desta
mudanca, por falta de uns 14 pixels. O rotulo do aluno encurta para
"Entrar" e os dois caminhos voltam a caber na mesma linha do cabecalho. */
.login-curto{display:none}
@media(max-width:385px){
.login-longo{display:none}
.login-curto{display:inline}
.login{padding:8px 10px}
}
/* ══════════════════════════════════════════════════════════════════
A PRIMEIRA TELA PASSA A DIZER O QUE A BUSSOLA E (15/09/2026)
O dono foi preciso: o visual estava bom, a mensagem e que nao dizia nos
primeiros segundos que isto e uma plataforma de preparacao para
certificacoes do mercado financeiro, com plano, conteudo e questoes. Nada
de estrutura mudou aqui. O que entrou de novo foi a fila de chips com as
certificacoes, que tira do menu uma informacao que decide a visita, e o
acabamento do painel de exemplo.
══════════════════════════════════════════════════════════════════ */
.hero-certs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.cert-chip{display:inline-flex;align-items:center;min-height:36px;padding:7px 15px;border:1px solid #CBDCCF;
background:rgba(255,255,255,.72);border-radius:99px;text-decoration:none;
font:700 13px "Hanken Grotesque",sans-serif;color:#1F4A35;white-space:nowrap;
transition:background .18s,border-color .18s,transform .18s}
.cert-chip:hover{background:#fff;border-color:#8FB79C;transform:translateY(-1px)}
.cert-chip-todas{background:transparent;border-color:transparent;color:#1c7a4b;padding-inline:6px}
.cert-chip-todas:hover{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:4px;transform:none}
/* Selo do painel: convite, com o triangulo de play que sugere "veja". */
.demo-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.demo-status svg{width:13px;height:13px;flex-shrink:0}
/* Linhas do plano: a marca de concluido fica a esquerda, como no aplicativo. */
.demo-topic{display:flex;align-items:flex-start;gap:11px}
.demo-topic>span:last-child{min-width:0}
.demo-marca{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;flex-shrink:0;margin-top:2px;
border:1.5px solid #CFDDD3;color:transparent;font-size:11px;font-weight:800;line-height:1}
.demo-topic.feito{border-color:#BEDCC4;background:#F6FBF5}
.demo-topic.feito .demo-marca{background:#1C7A4B;border-color:#1C7A4B;color:#fff}
.demo-acoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
/* Os dois botoes cabem lado a lado no painel de 354 pixels por 11 pixels de
folga, entao o acabamento e apertado de proposito. Quando o painel
encolhe, cada um ocupa a linha inteira em vez de ficar torto. */
.demo-acoes .demo-action{margin-top:0}
.demo-btn-sec{display:inline-flex;align-items:center;min-height:40px;padding:9px 14px;border:1px solid #D5E2D7;
background:#fff;color:#1F4A35;border-radius:7px;font-size:12px;font-weight:700}
.demo-btn-sec:hover{background:#F2F8F1}
.demo-acoes .demo-btn-sec,.demo-acoes .demo-action{flex:1 1 auto;justify-content:center;padding:9px 11px;font-size:11.5px;white-space:nowrap}
@media(max-width:760px){
/* A ordem da coluna do hero foi renumerada para os chips entrarem entre o
texto de apoio e o botao. Sem isto eles cairiam no fim da pilha. */
.hero-certs{order:4;margin-top:18px;gap:7px}
.hero-actions .button{order:5;margin-top:20px}
.reassurance{order:6}
.hero-actions .text-link{order:7}
.hero-points{order:8}
.cert-chip{min-height:34px;padding:6px 13px;font-size:12.5px}
/* Com o quarto beneficio a fila passou a cair uma por linha e empurrava a
demonstracao para fora da primeira rolagem, que foi o pedido do dono em
13/09. Faltavam tres pixels: o corpo e os respiros encolheram um pouco e
elas voltaram a andar de duas em duas. */
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px}
.hero-points span{font-size:11px;gap:6px;padding:7px 10px 7px 7px;min-width:0;white-space:nowrap}
.hero-points span:before{width:16px;height:16px;font-size:9.5px}
.hero-certs{margin-top:16px}
.hero-copy .eyebrow{font-size:9.5px;letter-spacing:.1em;margin-bottom:11px}
.demo-status{font-size:8px;letter-spacing:.06em}
.demo-acoes{gap:8px}
.demo-acoes .button,.demo-btn-sec{flex:1 1 auto;justify-content:center}
}
/* Os selos PLANEJAMENTO, DISCIPLINA e EVOLUCAO saem de cena. Eles ficam em
z-index acima do conteudo e pousam exatamente na faixa dos beneficios do
hero: medido de 1100 a 1920 pixels, sempre havia sobreposicao, e com o
quarto beneficio ficou impossivel de ignorar. O rascunho do dono tambem
mostra so o selo de APROVACAO, que fica no alto e nao esbarra em nada. O
HTML continua no lugar, entao devolver os tres e apagar estas tres linhas
e escolher outra posicao na trilha. */
.marco-1,.marco-2,.marco-3{display:none}