/* ==========================================================================
Fundambras — Readequação v3.0
Camada de identidade visual: paleta institucional e componentes novos.
Carregada DEPOIS de base.css, de propósito. Nada aqui reescreve base.css:
as regras abaixo só redefinem as cores que carregam a marca e acrescentam
os componentes pedidos no documento de readequação. Isso mantém a mudança
reversível — basta remover o do head.html para voltar ao anterior.
Paleta oficial (documento de readequação, item 2):
Azul institucional #0025ad Pantone Dark Blue C
Ciano #15c2ff Pantone 311 C
Verde-lima #a7ff73 Pantone 2283 C
Cinza moderno #9aa9b7 Pantone 2162 C
========================================================================== */
:root {
/* Cores institucionais, exatamente como especificadas */
--fb-azul: #0025ad;
--fb-ciano: #15c2ff;
--fb-lima: #a7ff73;
--fb-cinza: #9aa9b7;
/* Derivadas, para estados e superfícies. Mantêm o matiz das oficiais. */
--fb-azul-escuro: #001a7d; /* hover de superfícies azuis */
--fb-azul-claro: #1f45d6; /* realce sobre fundo azul */
--fb-azul-veu: #e8ecfb; /* fundo de destaque muito claro */
--fb-ciano-escuro:#0079a3; /* mesmo matiz do ciano, legível com texto branco */
--fb-ciano-veu: #e4f7ff;
--fb-lima-escuro: #7fe23f;
--fb-cinza-claro: #e7ebef;
--fb-cinza-rodape:#5f7386; /* o cinza #9aa9b7 escurecido (mesmo matiz e saturação) até 4,9:1 com branco — AA para texto normal */
--fb-cinza-veu: #f4f7f9;
/* Textos legíveis sobre cada fundo (todos acima de 4,5:1) */
--fb-sobre-azul: #ffffff;
--fb-sobre-ciano: #00263f;
--fb-sobre-lima: #10300a;
--fb-tinta: #1d2b3a;
}
/* --------------------------------------------------------------------------
0. Estrutura — largura do container e densidade do menu
O menu principal ganhou itens na readequação (Investimentos e Simulador) e
passou a quebrar em duas linhas. Duas mudanças resolvem: mais 57px de
container e um ponto a menos na fonte do menu.
-------------------------------------------------------------------------- */
/* Largura do container: 1060px -> 1117px */
.container {
max-width: 1117px;
}
/* O base.css afasta o conteúdo das bordas abaixo de 1100px, quando o container
ainda media 1060 + 2×15 de respiro. Com 1117px esse ponto sobe para 1147px,
senão entre 1101px e 1147px o conteúdo encosta na borda da janela. */
@media screen and (max-width: 1147px) {
#header .container,
#content .container,
#footer .container {
padding-left: 15px;
padding-right: 15px;
}
}
/* Fonte do menu: 16px -> 15px. Vale para os itens do topo e para os submenus,
para o dropdown não ficar maior que o item que o abriu. */
#main-menu a {
font-size: 15px;
}
/* --------------------------------------------------------------------------
1. Navegação e cabeçalho
-------------------------------------------------------------------------- */
#main-menu {
background: var(--fb-azul);
}
#main-menu .link-menu:hover,
#main-menu .link-menu.current,
nav a.current {
color: var(--fb-lima);
}
/* Submenu com o azul institucional no fundo */
#main-menu .sub {
background: var(--fb-azul);
}
#main-menu .link-menu-sub:hover {
background: transparent;
color: var(--fb-lima);
}
/* Ícones de home, menu e busca: fundo mais fechado que a barra, hover verde */
/* O base.css pinta de dourado o item de menu que abre submenu, dentro de um
media query e com !important — daí a especificidade e o !important aqui. */
#main-menu .header-sub:hover .link-menu,
#main-menu .header-sub:hover > a {
color: var(--fb-lima) !important;
}
#home,
#open-menu,
#search {
background: var(--fb-azul-escuro);
}
/* X que fecha o popup de busca (também dourado no base.css) */
#search .fa-times {
color: var(--fb-lima);
}
#home a:hover,
#home a:focus-visible,
#open-menu a:hover,
#open-menu a:focus-visible,
#search > a:hover,
#search > a:focus-visible {
color: var(--fb-lima);
}
#search .sub {
background: var(--fb-azul-escuro);
}
/* --------------------------------------------------------------------------
2. Botões
Sem sombra em botão nenhum: o base.css aplica uma sombra fixa em .btn e
outra no hover (dentro do media query de 1025px), então as duas precisam
ser zeradas.
-------------------------------------------------------------------------- */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
#search .btn,
#search .btn:hover {
box-shadow: none;
}
.btn-blue { background: var(--fb-azul); color: var(--fb-sobre-azul) !important; }
.btn-blue:hover { background: var(--fb-azul-escuro); }
.btn-blue i { color: #b9c4f2; }
.btn-cyan { background: var(--fb-ciano); color: var(--fb-sobre-ciano) !important; }
.btn-cyan:hover { background: var(--fb-ciano-escuro); color: var(--fb-sobre-azul) !important; }
.btn-cyan i { color: currentColor; }
/* O btn-purple é usado só nos botões "Passo a Passo" — vai para o azul. */
.btn-purple { background: var(--fb-azul); color: var(--fb-sobre-azul) !important; }
.btn-purple:hover { background: var(--fb-azul-escuro); }
.btn-purple i { color: currentColor; }
/* Verde-lima é claro demais para texto branco: sempre com tinta escura. */
.btn-lima { background: var(--fb-lima); color: var(--fb-azul) !important; }
.btn-lima:hover { background: var(--fb-lima-escuro); color: var(--fb-azul) !important; }
.btn-lima i { color: currentColor; }
/* Cores herdadas do site antigo (vermelho, verde, laranja) vão todas para o azul.
Ficam de fora só o verde-lima e o ciano, que são a paleta nova. */
.btn-red, .btn-green, .btn-orange { background: var(--fb-azul); color: var(--fb-sobre-azul) !important; }
.btn-red:hover, .btn-green:hover, .btn-orange:hover { background: var(--fb-azul-escuro); }
.btn-red i, .btn-green i, .btn-orange i { color: #b9c4f2; }
/* Barra de cookies: o cookie.css pinta o botão de cinza-escuro por id. */
#cookieAlertDiv #cookieAlertBtn { background-color: var(--fb-azul); }
#cookieAlertDiv #cookieAlertBtn:hover { background-color: var(--fb-azul-escuro); }
.btn:focus-visible {
outline: 3px solid var(--fb-ciano);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
3. Área do Participante
O rótulo do botão vem do ::after do base.css — não repetir no template,
senão o texto aparece duas vezes.
-------------------------------------------------------------------------- */
#login-participante .btn {
background: var(--fb-lima);
color: var(--fb-azul) !important;
font-weight: normal;
white-space: nowrap;
}
#login-participante .btn:hover {
background: var(--fb-lima-escuro);
color: var(--fb-azul) !important;
}
#login-participante .btn i {
color: currentColor;
}
/* --------------------------------------------------------------------------
3b. Rodapé
Cinza da identidade no fundo. O #9aa9b7 puro dá só 2,4:1 com branco, então
entra a versão escurecida (--fb-cinza-rodape). Textos, títulos e links em
branco; o e-mail com a linha pontilhada que os links do conteúdo usam.
-------------------------------------------------------------------------- */
#footer {
background: var(--fb-cinza-rodape);
}
#footer h2,
#footer p,
#footer span,
#footer address,
#footer-menu a {
color: #fff;
}
#footer-menu {
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
#footer-menu a:hover,
#footer-menu a:focus-visible,
#footer-menu a.current {
color: var(--fb-lima);
}
.email-rodape a,
.email-rodape a:hover {
color: #fff;
border-bottom: dotted 1px;
}
.email-rodape a:hover,
.email-rodape a:focus-visible {
border-bottom-style: solid;
}
/* --------------------------------------------------------------------------
3c. Vídeos da página (coluna lateral)
-------------------------------------------------------------------------- */
.menu-videos .sub-lateral li { padding: 8px 0 4px; }
.video-pagina,
.video-youtube {
display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
background: #000; border-radius: 7px; overflow: hidden;
}
.video-youtube { position: relative; border: 0; padding: 0; cursor: pointer; }
.video-youtube img, .video-youtube .video-sem-capa { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-youtube .video-sem-capa { background: var(--fb-azul); }
.video-youtube .fa-play-circle {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-size: 48px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); transition: color .15s;
}
.video-youtube:hover .fa-play-circle, .video-youtube:focus-visible .fa-play-circle { color: var(--fb-lima); }
.menu-videos iframe { display: block; width: 100%; max-width: 245px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 7px; }
/* --------------------------------------------------------------------------
3d. Paginação e Passo a Passo
-------------------------------------------------------------------------- */
/* Paginação das listagens (notícias, comunicados, matérias): inativo num azul
mais claro, ativo e hover no azul institucional. */
.pagination li a { background: var(--fb-azul-claro); }
.pagination li a:hover,
.pagination .current { background: var(--fb-azul); }
/* Passo a Passo — trilha do topo (desktop). Passos em verde-lima com o número
escuro; o passo ativo (e o hover) em azul institucional com número branco e
dois halos translúcidos do mesmo azul. As linhas entre os passos ficam no
azul, tanto o trilho quanto o progresso. */ /* passos-v2.2 */
.step-list li .number {
background: var(--fb-lima);
color: var(--fb-sobre-ciano);
box-shadow: 0 0 0 3px rgba(167, 255, 115, .35);
}
.step-list li:hover .number,
.step-list li .number.current, /* especificidade acima de ".step-list li .number", senão o número fica escuro */
.step-list .current {
background: var(--fb-azul) !important;
color: #fff !important;
box-shadow: 0 0 0 5px rgba(0, 37, 173, .35), 0 0 0 10px rgba(0, 37, 173, .18) !important;
}
.red-bar,
.green-bar { background: var(--fb-azul); }
/* Balão de legenda de cada passo: azul institucional com texto branco. */
.step-list .toolTip-step {
background: var(--fb-azul);
border-color: var(--fb-azul);
}
.step-list .toolTip-step,
.step-list .toolTip-step * { color: #fff; }
.step-list .toolTip-step:after,
.step-list .toolTip-step:before { border-bottom-color: var(--fb-azul); }
/* Títulos do texto (desktop): número e título no mesmo azul, sem fundo. */
.steps-content h1 { color: var(--fb-azul); }
.steps-content h1 .number {
background: none;
box-shadow: none;
color: inherit;
}
/* Mobile (mesmo corte do base.css, 759px): cada passo vira uma linha com o
círculo à esquerda — lima quando fechado, azul com halo quando aberto — e o
título em cinza com uma linha azul por baixo; sem a pilula colorida antiga. */
@media screen and (max-width: 759px) {
.steps-content h1,
.steps-content h1.current {
display: flex;
align-items: center;
gap: 16px;
height: auto;
min-height: 50px;
padding: 0;
border-radius: 0;
background: none !important;
color: #3e5b6e;
font-size: 17px;
margin-bottom: 16px;
}
.steps-content h1 .number,
.steps-content h1.current .number {
position: static;
flex: 0 0 50px;
width: 50px;
height: 50px;
margin: 0;
line-height: 50px;
background: var(--fb-lima) !important;
color: var(--fb-sobre-ciano);
box-shadow: 0 0 0 3px rgba(167, 255, 115, .35);
border-radius: 100%;
}
.steps-content h1.current .number {
background: var(--fb-azul) !important;
color: #fff;
box-shadow: 0 0 0 5px rgba(0, 37, 173, .35);
}
#content .steps-content h1 .txt-passo {
display: block;
flex: 1 1 auto;
padding-bottom: 8px;
border-bottom: 1px solid var(--fb-azul);
color: #3e5b6e; /* o título fica em cinza; só a linha e o passo aberto ficam em azul */
}
.steps-content .box {
background: #fff;
border-radius: 7px;
}
}
/* Faça sua Adesão (planos/como-aderir-ao-plano-suplementar): os passos do passo
a passo sem a trilha do caminhão — a introdução não precisa do espaço que o
base.css reserva para a trilha, e o título dos passos e o bloco de fechamento
seguem o azul institucional. */
.steps-intro-car.sem-caminhao {
padding-top: 0;
margin-top: 20px;
}
.steps-content .titulo-passos {
color: var(--fb-azul);
font-size: 26px;
line-height: 1.3;
margin: 0 0 20px;
}
.steps-content h1 .txt-passo { color: inherit; }
/* sem a trilha, não precisa do respiro que o base.css deixa no fim dos passos */
.steps-content.steps-adesao { padding-bottom: 0; }
.steps-encerramento { margin: 10px 0 30px; }
.steps-encerramento h2 { margin-top: 0; }
.steps-encerramento form { display: block; }
.steps-content .box-content h3 { margin-top: 20px; }
@media screen and (max-width: 759px) {
.steps-content .titulo-passos { font-size: 22px; }
}
/* --------------------------------------------------------------------------
3e. Header da home
Logo e "Área do Participante" na mesma grade dos banners (col2-4 + col4),
para o botão ficar centrado na coluna do card do Plano Básico. A linha é
flex: os floats dos .col são ignorados, as duas colunas têm a mesma altura
e o botão centra nos dois eixos sem o position:absolute de antes. O
espaçamento vertical continua vindo do padding do #fundambras.
-------------------------------------------------------------------------- */
/* Logo em 205px no site todo (o base.css usava 265px, do logo com o selo dos 45 anos).
Abaixo de 640px o base.css já reduz para 215/170/145px — fica 205px como teto. */
#fundambras { width: 205px; }
@media screen and (min-width: 481px) and (max-width: 640px) { #fundambras { width: 205px; } }
/* a regra geral acima vence as reduções do base.css (carregado antes); repete-as */
@media screen and (max-width: 480px) { #fundambras { width: 170px; } }
@media screen and (max-width: 479px) { #fundambras { width: 145px; } }
#header-logo .header-home {
display: flex;
align-items: center;
}
#header-logo .header-home .col {
float: none;
}
#header-logo .header-home .col4 {
display: flex;
justify-content: center;
}
#header-logo .header-home #login-participante {
position: static;
margin: 0;
}
/* Entre 641 e 1024px a coluna de 33% fica justa para "Área do Participante";
o texto curto que o base.css já usa abaixo de 640px passa a valer aqui. */
@media screen and (max-width: 1024px) {
#header-logo .header-home #login-participante .btn:after { content: ' Área Restrita'; }
}
/* Banners empilhados: não há card ao lado para alinhar. Logo à esquerda com o
espaço que sobrar e botão encostado à direita, como era. */
@media screen and (max-width: 640px) {
/* base 0 nas duas: o max-content das colunas engana (o logo tem width:100%
e o .btn é inline-table). A do logo fica com o que sobrar; a do botão
fica no min-content, que é exatamente o botão. */
#header-logo .header-home .col2-4 { width: auto; flex: 1 1 0px; min-width: 0; }
#header-logo .header-home .col4 { width: auto; flex: 0 0 0px; justify-content: flex-end; }
}
/* --------------------------------------------------------------------------
4. Títulos
Azul institucional apenas dentro do conteúdo. Os títulos sobre as imagens
de topo ficam de fora de propósito — lá o branco do base.css continua
valendo, porque o texto assenta sobre foto.
-------------------------------------------------------------------------- */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: var(--fb-azul);
}
/* Caixas e menus com fundo próprio ditam a cor do próprio conteúdo */
#content .box-color h1, #content .box-color h2, #content .box-color h3,
#content .box-color h4, #content .box-color h5,
#content .box-blue h1, #content .box-blue h2, #content .box-blue h3,
#content .box-ciano h1, #content .box-ciano h2, #content .box-ciano h3,
#content .menu-lateral h1, #content .menu-lateral h2,
#content .caption h1, #content .caption h2 {
color: inherit;
}
/* --------------------------------------------------------------------------
4b. Links do corpo de texto
Eram vermelhos (#da1a35). O estado normal usa o ciano rebaixado (#0079a3,
mesmo matiz do #15c2ff), que dá 4,9:1 sobre o branco; o hover acende no
ciano puro. Assim o link é legível parado e responde ao ponteiro.
Mantido o sublinhado pontilhado do base.css, que distingue link de texto
para quem não percebe a diferença de cor.
-------------------------------------------------------------------------- */
#content .box-content a,
.box-content a {
color: var(--fb-ciano-escuro);
}
#content .box-content a:hover,
.box-content a:hover {
color: var(--fb-ciano);
}
/* O base.css tem um `a:hover { color: #da1a35 }` global dentro do media query
de 1025px. Ele precisa ser vencido, mas SÓ no corpo do texto: escopar em
#content sozinho dava especificidade de ID e passava por cima do menu
lateral e do breadcrumb, que têm cor própria no hover. Daí o recorte em
.box-content e .box-link. */
@media screen and (min-width: 1025px) {
#content .box-content a:hover,
#content .box-link:hover * {
color: var(--fb-ciano);
}
/* As caixas coloridas seguem ditando a própria cor no hover */
#content .box-color a:hover,
#content .box-color:hover .box-link * {
color: inherit;
}
}
/* --------------------------------------------------------------------------
5. Breadcrumb — links no azul da identidade, setas no cinza
-------------------------------------------------------------------------- */
.breadcrumb li a {
color: var(--fb-azul);
}
.breadcrumb li a:hover {
color: var(--fb-ciano-escuro);
text-decoration: underline;
}
.breadcrumb li + li:before {
color: var(--fb-cinza);
}
/* --------------------------------------------------------------------------
6. Menu lateral de navegação (aside)
Todos os itens no azul institucional. O item ativo não muda de fundo:
marca-se pelo texto e pelo ícone em verde-lima, que sobre o azul dá
9,3:1 de contraste — bem acima do mínimo, e sem competir com o conteúdo.
-------------------------------------------------------------------------- */
.aside-menu .aside-link,
.menu-forms .aside-link {
background: var(--fb-azul);
}
.aside-menu a,
.menu-forms a {
border-bottom-color: var(--fb-azul-escuro);
}
.aside-menu i,
.menu-forms i {
color: #ffffff;
}
/* Hover não muda o fundo: só o texto e o ícone acendem em verde, igual ao
item ativo. Mantém a coluna estável enquanto o ponteiro passa. */
.aside-menu li a:hover,
.menu-forms li a:hover {
background: var(--fb-azul);
color: var(--fb-lima);
}
.aside-menu li a:hover i,
.menu-forms li a:hover i {
color: var(--fb-lima);
}
.aside-menu li a.current,
.menu-forms li a.current,
.aside-menu .aside-link.active,
.menu-forms .aside-link.active {
background: var(--fb-azul);
color: var(--fb-lima);
}
.aside-menu li a.current i,
.menu-forms li a.current i,
.aside-menu .aside-link.active i,
.menu-forms .aside-link.active i {
color: var(--fb-lima);
}
.aside-menu li ul li a,
.menu-forms li ul li a {
background: var(--fb-azul-claro);
}
/* --------------------------------------------------------------------------
6b. Menu lateral de documentos (downloads)
Era vermelho; passa ao verde-lima da marca, com tinta azul — o verde é
claro demais para texto branco.
-------------------------------------------------------------------------- */
.menu-files .aside-link,
.menu-files .aside-link2 {
background: var(--fb-lima);
color: var(--fb-azul);
}
.menu-files a {
border-bottom-color: #7fe23f;
color: var(--fb-azul);
}
.menu-files i {
color: var(--fb-azul);
}
.menu-files li ul li a {
background: #c4ff9c;
color: var(--fb-azul);
}
.menu-files li a:hover,
.menu-files .aside-link.active,
.menu-files .aside-link2.active {
background: var(--fb-lima-escuro);
color: var(--fb-azul);
}
/* Divisões do box Documentos (nível acima dos submenus): mesmo verde-lima dos
submenus, sem marca visual própria — a hierarquia vem do recuo do acordeão. */
.menu-files .aside-divisao > .aside-link,
.menu-files li ul li.aside-divisao > a {
background: var(--fb-lima);
color: var(--fb-azul);
}
.menu-files .aside-divisao > .aside-link:hover,
.menu-files .aside-divisao > .aside-link.active {
background: var(--fb-lima-escuro);
color: var(--fb-azul);
}
/* --------------------------------------------------------------------------
6c. Accordion (Perguntas Frequentes e Glossário)
Item fechado: cartão branco com a pergunta em azul. Aberto ou sob o
ponteiro: verde-lima, com o mesmo azul no texto e no ícone.
-------------------------------------------------------------------------- */
.accordion h2 {
background: #ffffff;
color: var(--fb-azul);
box-shadow: 0 1px 3px rgba(13, 21, 38, 0.08);
}
.accordion h2 i {
color: var(--fb-azul);
}
.accordion:hover h2,
.accordion h2:hover,
.accordion h2.active {
background: var(--fb-lima);
color: var(--fb-azul);
}
.accordion:hover h2 i,
.accordion h2:hover i,
.accordion h2.active i {
color: var(--fb-azul);
}
/* --------------------------------------------------------------------------
7. Home — blocos dos planos
O documento pede blocos menores e o botão de adesão no Plano Suplementar.
-------------------------------------------------------------------------- */
/* A imagem fica no tamanho original — sem recorte de altura. O que a classe
.banner-compacto ainda faz é reduzir o título e apertar as margens. */
.banner-compacto .banner-titulo-plano {
font-size: 26px;
padding-bottom: 10px;
}
.banner-plano-basico.banner-compacto {
margin-bottom: 20px;
}
.banner-plano-suplementar.banner-compacto {
margin-bottom: 0;
}
/* --- Faixa de baixo do banner: título à esquerda, adesão à direita --------
O título do Plano Básico continua sozinho, ancorado embaixo. O Suplementar
ganha um wrapper (.boxTextoPlano) que divide a faixa entre título e botão. */
.banner-titulo-plano {
text-align: left;
padding-left: 15px;
}
.boxTextoPlano {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-right: 15px;
}
.boxTextoPlano .banner-titulo-plano {
position: relative;
width: auto;
margin-bottom: 0;
}
/* Só no Suplementar o nome do plano cai para a linha de baixo: é o card que
divide a faixa com o botão e precisa do texto mais estreito. O Básico fica
em uma linha só, como no layout aprovado. */
.banner-plano-suplementar .boxTextoPlano .banner-titulo-plano b {
display: block;
}
/* O base.css zera a fonte de qualquer dentro do card
(`.banner-home a { font-size: 0 }`) para esconder o texto do link da imagem.
O botão de adesão também é um ali dentro, então precisa de um seletor
de peso igual para recuperar o tamanho — senão o texto mede zero e o botão
encolhe até sobrar só o padding. */
.banner-home .btn-adesao,
.boxTextoPlano .btn-adesao {
flex: none;
margin-top: 0;
font-size: 16px;
line-height: 40px;
white-space: nowrap;
}
/* Centraliza a coluna dos planos com o box de Área do Participante */
.col-planos {
display: flex;
flex-direction: column;
justify-content: center;
}
/* --- Desktop (a partir de 1025px): grade 75/25 ----------------------------
O template usa col2-4 + col4 (carrossel / planos) e o header da home a mesma
grade. Os títulos dos dois cards ficam centrados em 24px; no Suplementar o
botão de adesão sai metade para fora do rodapé do card, centrado — por isso
o título sobe (20px do botão + 10px de respiro) e o card ganha margem embaixo. */
@media screen and (min-width: 1025px) {
.banner-compacto .banner-titulo-plano {
font-size: 23px;
text-align: center;
padding-left: 0;
}
.boxTextoPlano {
left: 0;
right: 0;
bottom: 0;
width: auto;
display: block;
padding: 0;
}
.boxTextoPlano .banner-titulo-plano {
position: static;
width: 100%;
padding-bottom: 30px;
margin: 0;
}
.banner-plano-suplementar .boxTextoPlano .banner-titulo-plano b {
display: inline;
}
.banner-home .btn-adesao,
.boxTextoPlano .btn-adesao {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
.banner-plano-suplementar.banner-compacto {
margin-bottom: 20px;
}
}
/* --- Fundo dos banners (bkg-banner.png: branco em cima, azul-claro embaixo) --
O base.css centra o bitmap, o que deixava o branco terminando na metade da
seção. Com a grade 75/25 a divisa precisa subir: valores medidos por faixa. */
@media screen and (min-width: 1025px) {
/* -367px vale com o container cheio (≥1150px); entre 1025 e 1150 os cards
encolhem com a tela e a divisa acompanha (medido: meio do card = 20vw + 4px) */
.banner-half {
background: url(../imagens/bkg-banner.png) repeat-x center min(-367px, calc(20vw - 596px)) !important;
}
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
/* os cards escalam com a largura: meio do Suplementar = 27,68vw − 4,4px
(medido de 641 a 1024px), menos os 600px de branco do bitmap */
.banner-half {
background: url(../imagens/bkg-banner.png) repeat-x center calc(27.68vw - 604.4px) !important;
}
}
@media screen and (max-width: 640px) {
.banner-half {
background: #eff4f7 !important;
}
}
/* --- Até 1024px: a grade volta a 2/3 + 1/3, como era -------------------- */
@media screen and (max-width: 1024px) {
#banner .col2-4,
#header-logo .header-home .col2-4 { width: 66.66666666%; }
#banner .col4,
#header-logo .header-home .col4 { width: 33.33333333%; }
}
/* --- Telas estreitas: título e botão empilhados, centrados -----------------
Abaixo de 1025px a coluna dos planos encolhe e a faixa de baixo deixa de
comportar título e botão lado a lado — medido: em 1024px o botão já passa
da borda direita do card, e em 641px sobra menos de metade da largura
necessária. A partir daí o par vira uma pilha centrada nos dois eixos. */
@media screen and (max-width: 1024px) {
/* O wrapper ocupa o card inteiro para centrar nos dois eixos. Quem vira
flex container é o wrapper, nunca o título: dentro de um flex o texto
solto e o viram itens separados e o nome do plano quebra de linha. */
.boxTextoPlano {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 0 15px;
margin: 0;
text-align: center;
}
.boxTextoPlano .banner-titulo-plano {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
text-align: center;
}
/* Nome do plano na mesma linha da palavra "Plano", para o bloco de texto
ficar compacto acima do botão. Seletor longo de propósito: precisa
vencer a regra de 479px do base.css e a do Suplementar no desktop. */
.banner-home .boxTextoPlano .banner-titulo-plano b {
display: inline;
}
}
/* --- Mobile: cada banner ocupa a largura da tela --------------------------
O base.css deixa os dois cards lado a lado em 50%. Em tela estreita isso
espreme o título a ponto de quebrar em três linhas. */
@media screen and (max-width: 640px) {
/* colunas empilhadas: o base.css só conhece .col3 aqui */
#banner .col2-4,
#banner .col4 { width: 100%; }
#banner .col4 { padding: 15px 10px 0 10px; }
.banner-home {
width: 100%;
float: none;
padding: 0;
margin-bottom: 15px;
}
.banner-plano-basico.banner-compacto,
.banner-plano-suplementar.banner-compacto {
margin-bottom: 15px;
}
}
/* --------------------------------------------------------------------------
8. Home — bloco "Resultados dos Planos" (antigo "Rentabilidade")
Cores dos planos na nova identidade (06/10/2026): Básico em #74b350 (o
mesmo verde da faixa do header do plano) e Suplementar em azul-piscina.
-------------------------------------------------------------------------- */
#rentabilidade .cor-basico,
.rendimento-basico .porcentagem { color: #74b350; }
#rentabilidade .cor-suplementar,
.rendimento-suplementar .porcentagem { color: var(--fb-ciano); }
.acoes-resultados {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* --------------------------------------------------------------------------
9. Caixas de destaque
-------------------------------------------------------------------------- */
/* Paleta nova nas caixas coloridas (05/10/2026). O painel continua chamando de
azul / vermelho / dourado / roxo; o que muda é a cor que cada uma recebe:
fundo = cor da paleta a 25% sobre branco, borda a 60%, texto/ícones/linha em
tom escuro do mesmo matiz (contraste de 6,2 a 7,6:1 sobre o fundo). */
/* azul → verde-lima */
.box-blue { border-color: #7fe23f; background: #e8ffdc; }
.box-blue, .box-blue * { color: #28600f; }
.box-blue .box-highlight { border-color: #28600f; }
/* vermelho → azul-claro (ciano) */
.box-red { border-color: #73daff; background: #c4f0ff; }
.box-red, .box-red * { color: #00546f; }
.box-red .box-highlight { border-color: #00546f; }
/* dourado → cinza */
.box-mostarda { border-color: #c2cbd4; background: #e6eaee; }
.box-mostarda, .box-mostarda * { color: #3e5b6e; }
.box-mostarda .box-highlight { border-color: #3e5b6e; }
/* roxo → azul-escuro */
.box-purple { border-color: #a6b3e2; background: #d8def2; }
.box-purple, .box-purple * { color: #0025ad; }
.box-purple .box-highlight { border-color: #0025ad; }
/* Comunicados: conteúdo centrado na vertical e alinhado à esquerda, qualquer
que seja a altura do card (os cards da linha têm a mesma altura). */
#comunicados .box,
#comunicados .box-content { flex-direction: row; }
#comunicados .box-content { align-items: center; justify-content: flex-start; text-align: left; }
#comunicados .box-highlight { flex: 1 1 auto; min-width: 0; }
.box-ciano {
border-color: #b6e7fb;
background: var(--fb-ciano-veu);
}
.box-ciano,
.box-ciano * {
color: var(--fb-sobre-ciano);
}
/* --------------------------------------------------------------------------
10. Acessibilidade
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--fb-ciano);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* --------------------------------------------------------------------------
10. Fale Conosco
O conteúdo é editado no painel; estas classes vêm no HTML da página.
-------------------------------------------------------------------------- */
.fale-conosco h2 {
color: var(--fb-azul);
font-size: 22px;
margin: 0 0 12px;
}
.fale-conosco h3 {
color: var(--fb-azul);
font-size: 18px;
margin: 24px 0 8px;
}
.fale-conosco .contato-reguladores,
.fale-conosco .contato-lgpd {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid #dfe6ec;
}
/* Canais: ícone à esquerda, rótulo e valor à direita; os dois lado a lado. */
#content .fale-conosco .contato-canais {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
margin: 20px 0 6px;
padding: 0;
list-style: none;
}
#content .fale-conosco .contato-canais li {
display: flex;
align-items: center;
gap: 14px;
padding: 0;
flex: 1 1 260px;
}
#content .fale-conosco .contato-canais li:before { content: none; }
.fale-conosco .contato-canais img {
width: 64px;
height: 64px;
flex: none;
}
.fale-conosco .contato-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.fale-conosco .contato-rotulo {
display: block;
font-size: 14px;
color: #6b7a88;
}
.fale-conosco .contato-canais a {
font-size: 20px;
font-weight: 600;
color: var(--fb-azul);
text-decoration: none;
word-break: break-all;
}
.fale-conosco .contato-canais a:hover { text-decoration: underline; }
@media screen and (max-width: 480px) {
/* o e-mail inteiro numa linha só na tela estreita */
.fale-conosco .contato-canais a { font-size: 16px; }
.fale-conosco .contato-canais img { width: 52px; height: 52px; }
}
/* Botão da Previc: mesmo azul institucional dos demais botões. */
.fale-conosco .btn-blue {
display: inline-block;
margin: 6px 0 10px;
padding: 0 28px;
}
/* Negativa de Informação: box destacado dentro do conteúdo. */
.fale-conosco .contato-negativa {
margin: 20px 0 10px;
}
.fale-conosco .contato-negativa h3 {
margin-top: 0;
}
/* LGPD: ícone do DPO centrado, com identificação e canal de contato abaixo. */
.fale-conosco .contato-dpo {
margin-top: 24px;
text-align: left;
}
.fale-conosco .contato-dpo img {
display: block;
width: 96px;
height: 96px;
margin-bottom: 10px;
}
.fale-conosco .contato-dpo p {
margin: 4px 0;
}
/* --------------------------------------------------------------------------
11. Home — boxes com imagem e boxes coloridos na mesma altura
-------------------------------------------------------------------------- */
.boxes-home {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.boxes-home .col {
float: none;
display: flex;
}
.boxes-home .box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.boxes-home .box-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.boxes-home .box-texto > :first-child { margin-top: 0; }
.boxes-home .box-texto > :last-child { margin-bottom: 0; }
.boxes-home .box-texto p:empty { display: none; }
.boxes-home .box-acao {
margin-top: auto;
padding-top: 20px;
margin-bottom: 0;
}
/* Resultados dos Planos + Notícias (e os cards de Comunicados, por linha):
colunas flex, box ocupando a coluna inteira e botões alinhados na base. */
.linha-igual {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.linha-igual .col {
float: none;
display: flex;
flex-direction: column;
}
.linha-igual #rentabilidade {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.linha-igual .box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.linha-igual .box-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.linha-igual .acoes-resultados,
.linha-igual #noticias-home .box-content > p:last-child {
margin-top: auto;
margin-bottom: 0;
}
.linha-igual #noticias-home .box-content > p:last-child { padding-top: 15px; }
/* --------------------------------------------------------------------------
12. Tipografia da nova identidade (05/10/2026)
Montserrat no site todo (substituta da ANIMO, que é paga), sem caixa alta e
com títulos em peso 400. A Montserrat é mais larga que a Figtree: menu e
botões recebem um ajuste fino de tamanho.
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.banner-full h1, #banner h1, #page-title h1, .banner-titulo-plano,
.sim-titulo-passo, .sim-cartao-titulo, .sim-plano-nome, .sim-abertura h2 {
font-weight: 400;
text-transform: none;
}
/* Menu principal: a Montserrat é ~8% mais larga que a Figtree e os itens
(justificados) encostavam uns nos outros a 1280px e quebravam linha a 1100px. */
/* padding 0 70px = o do base.css: os ícones de home e busca têm 50px, sobram 20px */
@media screen and (min-width: 1025px) {
#main-menu a { font-size: 14px; }
#top-menu .menu { padding: 0 70px; }
}
/* Rodapé em 14px, como o menu principal; submenu do topo destaca a página atual. */
#footer-menu a { font-size: 14px; }
.menu-lateral li a span { font-size: 15px; }
#main-menu .link-menu-sub.current { color: var(--fb-lima); }
/* Carrossel da home: faixa do título no azul da identidade. */
.caption { background: rgba(0, 37, 173, .85); }
.showCaption .caption:hover { background: rgba(0, 37, 173, .95); }
/* --------------------------------------------------------------------------
13. Páginas dos planos — faixa do header (05/10/2026)
A faixa de fundo atrás do banner de destaque passa a ser a cor do plano na
nova paleta: Básico verde-lima, Suplementar azul-piscina. Substitui os
bkg-basico.png / bkg-suplementar.png (dourado e laranja) do base.css.
-------------------------------------------------------------------------- */
#plano-basico #banner { background: #74b350 !important; }
#plano-suplementar #banner { background: var(--fb-ciano) !important; }