vizinhos, e as regras abaixo repetem exatamente a aparência deles. */
.nav__sair-form{display:contents;}
.nav__sair{
font-family:inherit; background:none; border:none; cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
color:var(--gray-300); font-size:13.5px; font-weight:500;
padding:9px 12px; border-radius:7px; transition:all .15s ease; white-space:nowrap;
}
.nav__sair:hover{color:#fff; background:rgba(255,255,255,0.08);}
/* ---------- Mapa mental interativo dos módulos de curso ----------
Ver app/static/js/mapa-mental.js. As caixas são posicionadas por
`transform`, e é nele que a transição acontece — mexer em `top`/`left`
dispararia relayout a cada quadro, e a animação engasgaria num mapa
grande. As linhas ficam num SVG atrás, redesenhadas pelo JS. */
/* O mapa cresce para a direita conforme os ramos abrem, e um mapa fundo
passa de qualquer largura de tela. Ele rola dentro da própria caixa: sem
isto, empurra o corpo da página e o site inteiro ganha barra horizontal. */
.mm{position:relative; padding-bottom:6px;}
.mm__viewport{
overflow:auto; cursor:grab;
/* A janela acompanha a altura do conteúdo ao afastar, mas não cresce ao
aproximar — ver dimensionar() no JS. */
transition:height .56s cubic-bezier(.22,1,.36,1);
}
.mm--arrastando .mm__viewport{cursor:grabbing;}
/* Enquanto se arrasta, o texto não pode entrar em seleção: o cursor viraria
barra e o gesto pareceria quebrado no meio. */
.mm--arrastando, .mm--arrastando *{user-select:none;}
.mm__viewport::-webkit-scrollbar{height:8px; width:8px;}
.mm__viewport::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16); border-radius:99px;}
.mm__viewport::-webkit-scrollbar-track{background:transparent;}
/* Existe só para dar ao scroll a extensão do mapa já ampliado: um elemento
com `scale` continua ocupando o tamanho original no fluxo. */
.mm__sizer{
position:relative; margin:0 auto;
transition:width .56s cubic-bezier(.22,1,.36,1),
height .56s cubic-bezier(.22,1,.36,1);
}
/* Barra de ferramentas: aproximar, afastar e abrir/recolher tudo. Fica à
direita porque a raiz do mapa nasce à esquerda. */
.mm__ferramentas{
position:absolute; top:10px; right:10px; z-index:2;
display:flex; flex-direction:column; gap:6px;
}
.mm__ferramenta{
width:30px; height:30px; padding:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background:var(--navy-800); color:var(--gray-200);
border:1px solid rgba(255,255,255,0.12); border-radius:8px;
box-shadow:0 2px 8px rgba(2,6,16,0.3);
transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.mm__ferramenta:hover:not(:disabled){
background:var(--navy-700); border-color:rgba(110,231,183,0.45); color:#6EE7B7;
}
.mm__ferramenta:focus-visible{outline:2px solid #6EE7B7; outline-offset:2px;}
.mm__ferramenta:disabled{opacity:.4; cursor:default;}
.mm__ferramenta svg{width:16px; height:16px; display:block;}
.mm__ferramenta path{
fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round;
}
/* O palco tem largura e altura trocadas pelo JS a cada abertura. Sem
transição aqui, a moldura do mapa saltava para o tamanho novo num quadro
só enquanto as caixas ainda deslizavam — o corte seco que fazia a
animação inteira parecer bruta, por mais suave que fosse a das caixas. */
.mm__palco{
position:relative;
/* Canto superior esquerdo: é a origem que o cálculo de zoom no JS assume
ao recentralizar a janela. Com o padrão (centro), aproximar deslocaria
o mapa além do que a conta prevê. */
transform-origin:0 0;
transition:width .56s cubic-bezier(.22,1,.36,1),
height .56s cubic-bezier(.22,1,.36,1),
transform .28s cubic-bezier(.22,1,.36,1);
}
.mm__linhas{position:absolute; top:0; left:0; overflow:visible; pointer-events:none;}
.mm__linhas path{
fill:none; stroke:rgba(110,231,183,0.45); stroke-width:1.6;
stroke-linecap:round;
}
.mm__nos{position:absolute; top:0; left:0;}
.mm__no{
position:absolute; top:0; left:0;
/* `width:max-content` é obrigatório aqui. Um elemento absoluto dentro de
um contêiner sem largura (.mm__nos) encolhe até a maior PALAVRA, e o
max-width não segura isso — as caixas saíam quebradas em quatro linhas
quando o texto cabia em uma. Com max-content, a caixa pede o tamanho do
texto e só então o max-width impõe a quebra. */
width:max-content; max-width:260px;
display:inline-flex; align-items:center;
padding:11px 15px; border-radius:11px;
font-family:var(--sans); font-size:13.5px; line-height:1.4; text-align:left;
background:var(--navy-800); color:var(--gray-100);
border:1px solid rgba(255,255,255,0.09);
box-shadow:0 4px 14px rgba(2,6,16,0.28);
/* easeOutQuint (.22,1,.36,1): sai rápido e passa a maior parte do tempo
desacelerando, então o nó "assenta" no lugar em vez de parar seco. Meio
segundo é bastante para uma caixa que anda ~250px, e é o que separa o
movimento elegante do apressado. A opacidade fecha antes do percurso
(.34s de .56s): a caixa já está legível enquanto ainda desliza. */
transition:transform .56s cubic-bezier(.22,1,.36,1),
opacity .34s cubic-bezier(.33,1,.68,1),
background .2s ease, border-color .2s ease;
will-change:transform, opacity;
}
button.mm__no{cursor:pointer;}
button.mm__no:hover{background:var(--navy-700); border-color:rgba(110,231,183,0.4);}
button.mm__no:focus-visible{outline:2px solid #6EE7B7; outline-offset:2px;}
.mm__no--raiz{background:#312e4d; border-color:rgba(167,139,250,0.3); font-weight:600; font-size:14px;}
.mm__no[data-nivel="2"]{background:#1f3a2e; border-color:rgba(16,185,129,0.22);}
.mm__no[data-nivel="3"]{background:#1b3328; border-color:rgba(16,185,129,0.18);}
.mm__no--folha{box-shadow:0 3px 10px rgba(2,6,16,0.22);}
/* A seta fica FORA da caixa, encostada no início da linha que sai dela —
é onde o olho procura o controle de abrir/fechar, e é assim no material
de referência. Posicionada por `margin-top` e não por `translateY`,
porque o `transform` precisa ficar livre para a rotação do estado. */
.mm__seta{
position:absolute; right:-21px; top:50%; margin-top:-9px;
width:18px; height:18px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#1b2534; border:1px solid rgba(255,255,255,0.14);
transition:transform .46s cubic-bezier(.22,1,.36,1), background .25s ease,
border-color .25s ease;
}
.mm__seta svg{width:12px; height:12px; display:block;}
.mm__seta path{
fill:none; stroke:var(--gray-200); stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
/* Fechada aponta para o conteúdo escondido; aberta aponta de volta ao pai. */
.mm__no--aberto .mm__seta{
transform:rotate(180deg);
background:#16352a; border-color:rgba(110,231,183,0.45);
}
.mm__no--aberto .mm__seta path{stroke:#6EE7B7;}
button.mm__no:hover .mm__seta{border-color:rgba(110,231,183,0.55);}
.mm__ajuda{margin-top:14px; font-size:12.5px; color:var(--gray-500);}
@media (prefers-reduced-motion:reduce){
.mm__no, .mm__seta, .mm__palco, .mm__sizer, .mm__viewport{transition:none;}
}
/* O JS também respeita esta preferência: sem ela, a cascata entre irmãos é
desligada e todos assumem a posição final de uma vez. */
/* ==========================================================================
HOME — reorganização visual
==========================================================================
Só a Home usa este bloco: tudo aqui está preso a `.home-v2`, que é a classe
do dessa página. Nenhuma regra escapa para o resto do site, e é por
isso que dá para mexer no ritmo e na tipografia sem conferir cinco telas a
cada linha.
O que este arquivo resolve, em ordem de importância:
1. RITMO. As seções tinham 64px de respiro fixo; a página inteira lia
como uma lista. Agora o espaço entre seções cresce com a tela
(60px no celular, até 130px no monitor grande), que é o que separa
"muito conteúdo" de "conteúdo amontoado".
2. UMA ESCALA TIPOGRÁFICA SÓ. Antes cada seção tinha o seu tamanho de
título. Aqui existem três tamanhos — eyebrow, título de seção,
descrição — e toda seção usa os mesmos.
3. A ILUSTRAÇÃO DO HERO NO CELULAR. Ela era `position:absolute` e sumia
abaixo de 980px: a imagem principal da Home não existia no telefone.
========================================================================== */
/* ---------------------------------------------------------------- ritmo */
.home-v2 .home-secao{
padding-block: clamp(60px, 9vw, 130px);
}
/* Duas caixas iguais coladas (debates + panorama) nao precisam do respiro
inteiro entre elas: o assunto e o mesmo, e o vao dobrado parecia falha.
A regra antiga era `.home-secao + .home-secao:not([id])`, usando "nao tem
id" como atalho para "e a segunda de duas caixas iguais". Nao e a mesma
coisa: pegava tambem os Numeros, as Atualizacoes e a PRIMEIRA das duas
caixas, e as tres ficavam sem respiro nenhum em cima, coladas na secao
anterior. Agora diz exatamente o que quer dizer. */
.home-v2 .home-secao--escura + .home-secao--escura{padding-top:0;}
/* Os artigos SAO a continuacao de "Reforma Tributaria em movimento" — por
isso nao tem cabecalho proprio. Entao encostam nela de proposito, em vez
de abrir um respiro de secao que sugeriria um assunto novo. */
.home-v2 .featured-section{padding-top:0; padding-bottom:clamp(60px, 9vw, 130px);}
/* O fechamento tambem entra no ritmo; estava com os 56px originais. */
.home-v2 .closing-cta{padding-block:clamp(60px, 9vw, 130px);}
/* ------------------------------------------------------ superfície */
/* O body da Home é CLARO de propósito (--gray-50 com a textura suave); quem
é escuro são as seções, cada uma pintando o próprio navy-950. As três
seções novas — mapa, consultas e atualizações — precisam fazer o mesmo:
sem isto, o título branco delas cai direto no fundo claro do body e vira
texto branco sobre branco. Foi o que aconteceu, e só o print mostrou:
toda medição de layout dava certo, porque o problema não era de layout. */
.home-v2 .mapa-secao,
.home-v2 .consultas-secao,
.home-v2 .atualizacoes-secao{background:var(--navy-950);}
/* ------------------------------------------------ cabeçalho de seção */
/* Um só, usado por todas as seções — antes cada uma tinha o próprio. */
.home-v2 .secao__head{
max-width:62ch; margin:0 auto clamp(32px, 4vw, 56px); text-align:center;
}
.home-v2 .secao__eyebrow{
display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--blue-300);
}
.home-v2 .secao__eyebrow .dot{
width:6px; height:6px; border-radius:50%; background:var(--blue-500);
}
.home-v2 .secao__title{
font-size:clamp(30px, 4vw, 48px); line-height:1.12; letter-spacing:-0.02em;
margin:0 0 16px; color:#fff;
}
.home-v2 .secao__title em{color:var(--blue-300); font-style:normal;}
.home-v2 .secao__desc{
font-size:clamp(16px, 1.3vw, 19px); line-height:1.65;
color:var(--gray-300); margin:0;
}
/* ------------------------------------------------------------------ hero */
/* 45% texto / 55% imagem, como pedido. A ilustração entra no grid em vez de
flutuar por cima — era assim que ela desaparecia no celular. */
.home-v2 .hero-v2{
/* O nav virou 2 linhas (~116px no desktop, era 64px no .hero base) --
sem reduzir aqui, a mesma ilustração/texto de sempre passa a sobrar
menos espaço acima da dobra, lendo como "fora de enquadramento"
mesmo sem nada ter mudado no hero em si. Recupera parte do espaço
vertical que o nav mais alto tomou. */
padding-top:36px;
padding-bottom:0;
/* A ilustracao passa da base do hero de proposito (margem negativa la
embaixo). O .hero tem overflow:hidden por causa da arte que ANTES era
absoluta; aqui ela esta no fluxo, entao o corte so servia para cortar a
imagem rente, justo onde a mascara ainda estava dissolvendo. */
overflow:visible;
/* MESMA cor do resto do site, chapada.
O .hero base tem um degrade que termina em navy-700 e, por cima, dois
halos brancos no ::after. Enquanto o hero ocupava a tela inteira isso
era profundidade; com ele terminando logo abaixo da ilustracao, a faixa
clara e o halo de baixo eram cortados rente na borda e viravam uma
emenda horizontal dura contra o navy-950 da secao seguinte.
Fundo igual dos dois lados da borda = nao existe borda. */
background:var(--navy-950);
}
.home-v2 .hero-v2::after{display:none;}
.home-v2 .hero-v2__inner{
grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);
gap:clamp(24px, 4vw, 64px); align-items:center;
}
.home-v2 .hero-v2 h1{
font-size:clamp(42px, 5vw, 68px); line-height:1.05; letter-spacing:-0.03em;
margin:0 0 20px;
}
.home-v2 .hero-v2 .hero__lede{
font-size:clamp(16px, 1.4vw, 19px); line-height:1.65; max-width:52ch;
}
.home-v2 .hero-v2__ctas{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap;}
.home-v2 .hero-intro__cta-note{margin-top:16px;}
.home-v2 .hero-v2__art{
position:static; display:flex; justify-content:center; align-items:center;
pointer-events:none;
/* A sombra fica no PAI, nunca no ![]()
: um `filter` no próprio elemento
seria aplicado ANTES de qualquer recorte de caixa, e o brilho apareceria
cortado reto na lateral. */
filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 27px rgba(16,185,129,0.19));
}
.home-v2 .hero-v2__art img{
display:block; width:100%; max-width:560px; height:auto;
/* SEM máscara, de propósito.
A arte anterior (902×1650) terminava num fio de circuito solitário: da
metade para baixo só 7% dos pixels estavam acesos, e esse fio descia
sozinho para dentro da seção seguinte — daí a máscara que o dissolvia
entre 62% e 88% da altura.
A arte nova (1040×1300) termina em base, anéis e reflexo: nessa mesma
faixa 35% a 44% dos pixels estão acesos, e o pico de brilho está em 90%
da altura. A máscara antiga cortaria bem no meio da base — era esse o
corte brusco. Ela já se apaga sozinha: o alfa médio cai de 154 em 90%
para 2 nos últimos 2%, e as bordas laterais ficam em alfa 1. Não há o
que dissolver.
A margem negativa fica, bem menor: só o bastante para o reflexo do chão
encostar na seção de baixo em vez de deixar um vazio entre as duas. */
margin-bottom:clamp(-70px, -5vw, -24px);
}
/* --------------------------------------------------------- perfis (wce) */
/* Os três cards passam a ser a mesma caixa. O do meio mantém o selo, mas
perde o tamanho maior: três alturas diferentes diziam que um perfil vale
mais que os outros. */
.home-v2 .wce-grid{gap:clamp(18px, 2vw, 28px); align-items:stretch;}
.home-v2 .wce-card{
display:flex; flex-direction:column; height:100%;
border-radius:18px; transform:none;
transition:transform .2s ease, border-color .2s ease;
}
.home-v2 .wce-card--highlight{transform:none; box-shadow:none;}
.home-v2 .wce-card:hover{transform:translateY(-4px);}
.home-v2 .wce-card__body{display:flex; flex-direction:column; flex:1; padding:clamp(24px, 2vw, 32px);}
/* O CTA encosta na base de todos, então as três linhas terminam juntas
mesmo com descrições de tamanhos diferentes. */
.home-v2 .wce-card__cta{margin-top:auto; padding-top:18px;}
.home-v2 .wce-card__media img{width:100%; height:auto; display:block;}
/* ---------------------------------------------------------- ferramentas */
.home-v2 .hub-grid{gap:clamp(16px, 1.6vw, 22px);}
/* ---------------------------------------------------------------- mapa */
/* Empilhado, não lado a lado: o widget (mapa + painel) já tem seu próprio
layout interno responsivo (ver mapa-showcase.css) e precisa da largura
cheia da seção pra render bem — o texto fica inteiro em cima, full width. */
.home-v2 .mapa-secao__inner{
display:grid; grid-template-columns:1fr;
gap:clamp(24px, 4vw, 40px);
}
.home-v2 .mapa-secao__copy{max-width:68ch;}
.home-v2 .mapa-secao__copy .secao__title{text-align:left;}
.home-v2 .mapa-secao__copy .hero__ctas{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}
.home-v2 .mapa-secao__mapa{position:relative; z-index:2; width:100%;}
/* -------------------------------------------------------------- números */
.home-v2 .stats-section__title{
font-size:clamp(30px, 4vw, 48px); line-height:1.12; letter-spacing:-0.02em;
}
.home-v2 .stats-section__desc{max-width:48ch;}
.home-v2 .stats-grid{margin-top:clamp(24px, 3vw, 40px);}
/* O número é o que fica; o rótulo explica. A distância entre os dois tamanhos
é o que faz a diferença ser lida como hierarquia e não como desalinho. */
.home-v2 .stat-item__num{font-size:clamp(30px, 3.4vw, 44px); letter-spacing:-0.02em;}
.home-v2 .stat-item__label{font-size:13.5px; line-height:1.5;}
.home-v2 .stats-section__source{margin-top:clamp(20px, 2vw, 28px); font-size:12.5px;}
/* ------------------------------------------------------------ consultas */
/* Só a agenda de obrigações mora aqui agora — a consulta por NCM/NBS
ganhou página própria em /consulta-fiscal (ver app/templates/
consulta_fiscal/consulta.html). Grid de 1 coluna só, mantida (em vez de
virar um solto) pra herdar o mesmo espaçamento/alinhamento das
outras seções da home sem duplicar regra. */
.home-v2 .consultas-grid{display:grid; grid-template-columns:1fr;}
.home-v2 .consultas-grid .tool-panel{border-radius:18px; padding:clamp(22px, 2.2vw, 30px);}
/* ---------------------------------------------------------- atualizações */
/* Data, fonte e categoria viram uma linha só, abaixo do título. Antes a
etiqueta vinha ANTES do título e era a primeira coisa lida de cada item —
o que importa é a manchete. */
.home-v2 .tool-panel--news{
background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
border-radius:18px; padding:clamp(20px, 2vw, 30px);
}
/* As abas foram escritas para o painel BRANCO original: "ativa" era
navy-900. Com o painel escuro, a aba selecionada ficava navy sobre navy --
some justamente a que indica onde voce esta. Aqui elas se invertem. */
.home-v2 .news-tabs{border-bottom-color:rgba(255,255,255,0.12);}
.home-v2 .news-tab{color:var(--gray-400);}
.home-v2 .news-tab:hover{color:var(--gray-200);}
.home-v2 .news-tab.active{color:#fff;}
.home-v2 .news-item{
display:flex; flex-direction:column; gap:6px;
padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.07);
}
.home-v2 .news-item:last-child{border-bottom:none;}
.home-v2 .news-item__title{
font-size:clamp(15px, 1.2vw, 17px); line-height:1.45; color:#fff; font-weight:600;
}
/* Era a unica interacao instantanea da pagina: todas as outras levam entre
150 e 200ms, e esta trocava de cor num piscar. */
.home-v2 .news-item__title{transition:color .18s ease;}
.home-v2 .news-item:hover .news-item__title{color:var(--blue-300);}
.home-v2 .news-item__meta{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
font-size:12px; color:var(--gray-400);
}
.home-v2 .news-item__tag{
font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
padding:2px 8px; border-radius:999px;
background:rgba(16,185,129,0.14); color:var(--blue-300);
}
.home-v2 .news-more-link{
border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.03); color:var(--blue-300);
}
.home-v2 .news-more-link:hover{border-color:var(--blue-400); background:rgba(255,255,255,0.06);}
/* O card da newsletter e' BRANCO. O subtitulo entrou depois do titulo, entao
o respiro sai do h3 e passa para ca -- e a cor tem de ser a de texto
secundario sobre claro, nao a da secao escura em volta. */
.home-v2 .newsletter-card h3{margin-bottom:8px;}
.home-v2 .newsletter-card__sub{
font-size:14px; line-height:1.6; color:var(--gray-600); margin:0 0 18px;
}
/* As duas caixas de oferta (debates e Panorama) sao lidas de ponta a ponta:
numa largura de 1200px a linha passa de 130 caracteres. */
.home-v2 .wrap--estreito{max-width:900px;}
/* ============================================ o fio claro entre as secoes */
/* O `body` do site e claro (--gray-50). Na Home, onde TODAS as secoes sao
navy-950, esse claro nunca deveria aparecer — e aparecia, como um fio
branco atravessando a pagina inteira na base do hero.
O motivo e sub-pixel: a base do hero cai em 653,0125px, nao em 653. O
navegador antialiasa essa linha, e ao misturar os dois blocos navy ele
mistura tambem o que esta ATRAS deles, que era o body quase branco. Dava
um fio de um pixel exatamente na emenda — e so ali, porque e a unica
fronteira que calha de cair numa fracao.
Foi por isso que trocar a cor dos dois lados nao resolveu (testei com os
dois em #123456 e o fio continuou): a cor que vazava nao era de nenhum
dos dois. Com o body escuro, a emenda mistura navy com navy e some — nesta
e em qualquer outra fronteira que caia numa fracao depois. */
body.home-v2{background:var(--navy-950);}
/* =========================================================== fundo unico */
/* Tres secoes nao tinham fundo proprio e deixavam passar o `body`, que e
claro (#F8FAFC): os artigos, as rodas de debate e o Panorama. No meio de
uma pagina escura isso lia como buraco, e as caixas escuras de debate e
Panorama viravam ilhas dentro de uma faixa branca.
Vale so na Home (.home-v2). O /guia reaproveita o mesmo partial de artigos
e continua claro, como sempre foi. */
/* `background-color`, nunca o atalho `background`: as secoes vizinhas tem
imagem de fundo, e o atalho apagaria essa imagem junto. */
.home-v2 .featured-section,
.home-v2 .home-secao--escura{background-color:var(--navy-950);}
/* O que estava DENTRO dessas secoes foi desenhado para fundo claro. Trocar a
cor do bloco sem trocar a do conteudo so mudaria o lugar do problema. */
.home-v2 .featured-catalog-link{color:#fff; border-bottom-color:rgba(255,255,255,0.25);}
.home-v2 .featured-catalog-link:hover{color:var(--blue-300); border-bottom-color:var(--blue-300);}
.home-v2 .featured-catalog-link .icon{color:var(--blue-300);}
/* O cartao da newsletter passa a ser a mesma superficie translucida dos
paineis de consulta, em vez do cartao branco. */
.home-v2 .newsletter-card{
background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1);
box-shadow:none;
}
.home-v2 .newsletter-card h3{color:#fff;}
.home-v2 .newsletter-card h3 em{color:var(--blue-300);}
.home-v2 .newsletter-card__sub{color:var(--gray-300);}
.home-v2 .newsletter-form__field{color:var(--gray-300);}
.home-v2 .newsletter-form__field input{
background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:#fff;
}
.home-v2 .newsletter-form__field input::placeholder{color:var(--gray-400);}
.home-v2 .newsletter-form__field input:focus{
border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(16,185,129,0.18);
}
.home-v2 .newsletter-form__note{color:var(--gray-400);}
.home-v2 .newsletter-form__note a{color:var(--gray-200);}
/* Os Numeros sao a unica secao que nao usa .secao__head: o cabecalho dela
mora dentro do .stats-section__inner, que vira `text-align:center` abaixo
de 860px. Resultado: no celular todas as secoes alinhavam a esquerda e
esta ficava centralizada, sozinha. */
@media(max-width:768px){
.home-v2 .stats-section__inner{text-align:left;}
.home-v2 .stats-section__desc{margin-left:0; margin-right:0;}
}
/* Debates e Panorama sao blocos de OFERTA, nao capitulos — o titulo deles
fica menor que os 48px das secoes de proposito. Mas 22px era tamanho de
titulo de card, perdido numa faixa de pagina inteira: existiam tres
escalas de titulo na Home em vez de duas. */
.home-v2 .up-upsell__title{font-size:clamp(22px, 2.6vw, 30px); line-height:1.2;}
/* O texto desses dois blocos estava em 14px enquanto TODA descricao da pagina
esta em ~19px. Dentro de um card de /planos 14px faz sentido; numa faixa de
900px de largura era a mesma frase pedindo para ser lida com mais esforco
que as outras. */
.home-v2 .up-upsell__desc{font-size:clamp(15px, 1.2vw, 17px); line-height:1.65;}
/* ------------------------------------------------------------ fechamento */
.home-v2 .closing-cta__inner{align-items:center; gap:clamp(24px, 3vw, 48px);}
.home-v2 .closing-cta h2{
font-size:clamp(26px, 3vw, 38px); line-height:1.18; letter-spacing:-0.02em;
max-width:22ch;
}
.home-v2 .closing-cta__acoes{display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0;}
/* --------------------------------------------------------------- hovers */
/* Curtos e pequenos: 180ms e alguns pixels. Nada saltando. */
.home-v2 .hub-card{transition:transform .18s ease, border-color .18s ease, background .18s ease;}
.home-v2 .hub-card:hover{transform:translateY(-3px);}
@media (prefers-reduced-motion:reduce){
.home-v2 .hub-card:hover,
.home-v2 .wce-card:hover{transform:none;}
}
/* ================================================================ tablet */
@media(max-width:1024px){
.home-v2 .hero-v2__inner{grid-template-columns:1fr; gap:8px;}
/* Coluna única: a ilustração vem DEPOIS da mensagem. Acima dela, um PNG
alto de 360px de largura passa de 650px de altura e o título começaria
fora da primeira tela. */
.home-v2 .hero-v2__art{order:0; justify-content:center; margin-top:24px;}
.home-v2 .hero-v2__art img{max-width:380px; margin-bottom:clamp(-60px,-6vw,-20px);}
.home-v2 .consultas-grid{grid-template-columns:1fr;}
}
/* ================================================================ celular */
@media(max-width:768px){
/* A ilustração CONTINUA aparecendo — só menor, e DEPOIS do texto.
Escondê-la era jogar fora a imagem que dá identidade à página justo em
quem mais acessa por ela; deixá-la em cima era pior ainda: o PNG é alto
(902×1650), então a 78vw de largura ele ficava com 535px de altura e
empurrava o título e os botões para fora da primeira tela. Aqui ela vem
abaixo da mensagem e se dissolve na seção seguinte. */
.home-v2 .hero-v2__art{
display:flex; justify-content:center; order:0; margin-top:20px;
/* Mesmo brilho do desktop, só mais fraco: num desenho pequeno o halo de
40px/27px de blur do desktop lê como neon, não como luz. */
filter:drop-shadow(0 10px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(16,185,129,0.14));
}
.home-v2 .hero-v2__art img{max-width:min(54vw, 210px); margin-bottom:clamp(-24px,-4vw,-8px);}
.home-v2 .hero-v2 h1{font-size:clamp(26px, 7.2vw, 34px);}
.home-v2 .hero-v2 .hero__lede{font-size:15px; margin-bottom:20px;}
.home-v2 .hero__eyebrow{margin-bottom:16px;}
.home-v2 .hero-v2__ctas .btn{flex:1 1 100%; justify-content:center; padding:12px 18px; font-size:12px;}
.home-v2 .secao__head{text-align:left;}
.home-v2 .closing-cta__inner{flex-direction:column; align-items:flex-start;}
.home-v2 .closing-cta__acoes .btn{flex:1 1 100%; justify-content:center;}
.home-v2 .closing-cta h2{max-width:none;}
}
@media(max-width:430px){
/* Nada pode encostar na borda. */
.home-v2 .consulta-painel{padding:20px 18px;}
.home-v2 .wce-card__body{padding:22px 20px;}
}
/* ---------- Aviso de cookies (partials/consentimento.html) ----------
Faixa fixa no rodapé da janela. "Recusar" e "Aceitar" com o mesmo peso
visual: o aviso não empurra a resposta. */
.consentimento{
position:fixed; left:16px; right:16px; bottom:16px; z-index:1200;
display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;
max-width:880px; margin:0 auto; padding:14px 18px; border-radius:14px;
background:#0b1324; color:rgba(255,255,255,0.86); border:1px solid rgba(16,200,144,0.4);
box-shadow:0 18px 40px rgba(0,0,0,0.45); font-size:13.5px; line-height:1.5;
}
.consentimento[hidden]{display:none;}
.consentimento__texto{margin:0; flex:1 1 360px;}
.consentimento__texto strong{color:#fff;}
.consentimento__texto a{color:#10C890; text-decoration:underline;}
.consentimento__acoes{display:flex; gap:10px; flex:0 0 auto;}
.consentimento__botao{
min-width:112px; padding:9px 16px; border-radius:9px; cursor:pointer;
font-family:inherit; font-size:13.5px; font-weight:600; color:#fff;
background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35);
}
.consentimento__botao:hover{background:rgba(255,255,255,0.16);}
.consentimento__botao:focus-visible{outline:2px solid #10C890; outline-offset:2px;}
@media (max-width: 560px){
.consentimento{left:10px; right:10px; bottom:10px; padding:12px 14px;}
.consentimento__acoes{width:100%;}
.consentimento__botao{flex:1;}
}
/* ---------- Documentos legais (Termos / Política, versionados) ----------
O texto tem tabelas de até 6 colunas: a coluna fica mais larga que a de
um artigo e cada tabela rola de lado dentro da própria caixa. */
.doc-legal{max-width:880px;}
.doc-legal__texto h3{font-size:18px; font-weight:600; margin:26px 0 10px; color:var(--navy-900);}
.doc-legal__texto ol{margin:0 0 20px 22px; padding:0;}
.doc-legal__texto ol li{font-size:16px; line-height:1.65; color:var(--gray-800); margin-bottom:8px; list-style:decimal;}
.doc-legal__texto .mt-tabela{overflow-x:auto; margin:0 0 22px; border:1px solid var(--gray-200, #e2e8f0); border-radius:10px;}
.doc-legal__texto table{width:100%; border-collapse:collapse; font-size:14px; line-height:1.5; min-width:560px;}
.doc-legal__texto th{background:#0F172A; color:#fff; text-align:left; font-weight:600; padding:9px 12px;}
.doc-legal__texto td{padding:9px 12px; border-top:1px solid var(--gray-200, #e2e8f0); vertical-align:top; color:var(--gray-800);}
.doc-legal__texto tr:nth-child(even) td{background:rgba(15,23,42,0.03);}
.doc-legal__aviso{margin:0 0 22px; padding:12px 16px; border-radius:10px; background:#fff7e6; border:1px solid #f5d38a; color:#5c3d00; font-size:14.5px;}
.doc-legal__aviso a{color:#0b6b51; font-weight:600;}
.doc-legal__sumario{margin:0 0 28px; padding:14px 18px; border-radius:12px; background:rgba(15,23,42,0.04); border:1px solid var(--gray-200, #e2e8f0); font-size:14.5px;}
.doc-legal__sumario ol{margin:8px 0 0 20px; padding:0; columns:2; column-gap:28px;}
.doc-legal__sumario li{list-style:none; margin-bottom:4px; break-inside:avoid;}
.doc-legal__sumario a{color:var(--navy-900);}
.doc-legal__cookies{margin:0 0 18px; font-size:14.5px;}
.doc-legal__historico{margin-bottom:28px;}
.doc-legal__historico h2{font-size:20px; margin:0 0 10px;}
.doc-legal__historico ul{list-style:none; margin:0; padding:0;}
.doc-legal__historico li{padding:10px 0; border-bottom:1px solid var(--gray-200, #e2e8f0); font-size:15px;}
.doc-legal__historico small{color:var(--gray-500, #64748b);}
.doc-legal__vigente{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; font-size:11.5px; font-weight:700; color:#03110c; background:#10C890;}
@media (max-width: 640px){ .doc-legal__sumario ol{columns:1;} }