/*
╔══════════════════════════════════════════════════════════════════════════════╗
║ estilo.css — APARÊNCIA da landing page da Reforma Tributária (/rt) ║
║ ║
║ O que já vem do site (não está aqui): fonte Poppins, menu, rodapé, botão ║
║ branco (.btnW), topo azul (.innerBanner). Isso vem dos 2 CSS do site que ║
║ o index.html carrega ANTES deste arquivo. ║
║ ║
║ Aqui fica só o que é NOVO desta página. Todas as classes novas começam ║
║ com "rt-" para nunca brigar com as classes do site. ║
║ ║
║ COMO LER UMA REGRA DE CSS: ║
║ .rt-card { ← "para todo elemento com class="rt-card"..." ║
║ padding: 40px; ← propriedade: valor; (sempre termina com ;) ║
║ } ║
║ ║
║ ORGANIZAÇÃO (na mesma ordem dos blocos do index.html): ║
║ 0. CORES E MEDIDAS → mude uma cor aqui e ela muda na página toda ║
║ 1. GERAL → foco do teclado, botão bege ║
║ 1B. FUNDOS → as imagens de fundo do PPT (claro, azul, pílulas) ║
║ 2. BLOCO 1 TOPO ║
║ 3. BLOCO 2 O QUE MUDA (cards, também usados no BLOCO 1B) ║
║ 4. BLOCO 3 LINHA DO TEMPO (também usada no BLOCO 4C "Como começar") ║
║ 5. BLOCO 4 COMO A VERDUS AJUDA ║
║ 6. BLOCO 5 CHAMADA FINAL ║
║ 6C. BLOCO 4B PERGUNTAS FREQUENTES + FONTES ║
║ 6E. BLOCO 4D LIDERANÇA ║
║ 6F. BOTÃO VOLTAR PARA O TOPO ║
║ 7. TELAS MÉDIAS (771px a 1336px) ║
║ 8. CELULAR (até 770px) ← o que muda quando a tela é pequena ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/
/* ═════════════════════════════════════════════════════════════════════════════
0. CORES E MEDIDAS
São "variáveis": um nome para cada valor. No resto do arquivo usamos o nome,
por exemplo var(--azul-verdus). Trocando o valor aqui, troca em todo lugar.
As cores são as do SITE ATUAL (não do manual da marca). Não troque o verde
#C4D82F pelo do manual (#C4D600): o site usa o primeiro.
═════════════════════════════════════════════════════════════════════════ */
:root {
--azul-verdus: #004976; /* azul principal (fundos e textos) */
--azul-escuro: #00385B; /* fundo do topo */
--azul-medio: #28556F; /* fundo do menu */
--azul-claro: #1A5C84; /* passar o mouse no botão copiar */
--bege: #BFBB98; /* textos de destaque e o botão (desde 29/09/2026 NÃO é mais fundo de bloco) */
--verde-limao: #C4D82F; /* o "verde" do site: textos verdes SOBRE FUNDO AZUL. NUNCA texto branco em cima dele */
--verde-escuro: #58B947; /* o verde "mais escuro" do PPT: cards verdes da linha do tempo e os marcadores ✓ */
--verde-escuro-texto:#33862C; /* o mesmo verde, um tom abaixo, para TEXTO sobre fundo branco ou claro.
Motivo: o #58B947 sobre branco tem contraste 2,5:1 e fica difícil de ler;
este tem 4,6:1 (mínimo recomendado: 4,5:1). */
--branco: #FFFFFF;
--espaco-secao: 80px; /* espaço em cima e embaixo de cada bloco (computador) */
--espaco-secao-cel: 40px; /* o mesmo, no celular */
--canto: 3px; /* arredondamento dos cantos (o site usa cantos quase retos) */
}
/* ═════════════════════════════════════════════════════════════════════════════
1. GERAL
═════════════════════════════════════════════════════════════════════════ */
/* Garante que o que tem o atributo "hidden" (ex.: menu do celular fechado) fique
escondido mesmo que o CSS do site tente mostrar. */
.rt-pagina [hidden] {
display: none !important;
}
/* CONTORNO DE FOCO: quando a pessoa navega com a tecla Tab, o link ou botão
selecionado ganha um contorno branco + azul (aparece em fundo claro e escuro).
Não remova: é acessibilidade (pessoas que não usam mouse). */
.rt-pagina a:focus-visible,
.rt-pagina button:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--azul-verdus);
}
/* O botão branco do site (.btnW) tem 350px fixos e estourava a tela de celulares
pequenos. Aqui ele pode encolher até caber. */
.rt-pagina .btnW {
max-width: 100%;
border-radius: var(--canto);
}
/* BOTÃO BEGE (29/09/2026): nesta página o botão do site fica ao contrário.
Parado: fundo BEGE com letra azul. Mouse em cima: fundo BRANCO.
(No resto do site é branco parado e bege com o mouse.)
Vale para os dois botões de e-mail: o do topo e o da chamada final. */
.rt-pagina .btnW {
background-color: var(--bege);
color: var(--azul-verdus);
}
.rt-pagina .btnW:hover {
background-color: var(--branco);
}
/* CORES DE TEXTO AVULSAS — para pintar só um pedaço de um título.
Uso no index.html: ... */
.rt-texto-bege { color: var(--bege); }
.rt-texto-branco { color: var(--branco); }
/* Uma "linha" de título: cada começa numa
linha nova (usado no título do topo e no da chamada final). */
.rt-titulo-linha {
display: block;
}
/* ═════════════════════════════════════════════════════════════════════════════
1B. FUNDOS (29/09/2026)
As 3 imagens vêm dos slides 18 a 21 do PPT comercial final, exportadas SEM
a logo, em versão leve (1920 px):
assets/img/fundo-claro.jpg (65 KB) → slide 21
assets/img/fundo-azul.jpg (52 KB) → slides 19 e 20 (são iguais)
assets/img/fundo-azul-pilulas.jpg (130 KB) → slide 18
- background-size: cover → a imagem cobre o bloco inteiro (corta as sobras)
- a COR antes do url(...) → aparece enquanto a imagem carrega ou se ela
faltar; é a cor média da própria imagem.
PARA TROCAR O FUNDO DE UM BLOCO: no index.html, troque a classe da
(rt-fundo-claro, rt-fundo-azul ou rt-fundo-branco).
═════════════════════════════════════════════════════════════════════════ */
.rt-fundo-branco {
background-color: var(--branco);
color: var(--azul-verdus);
}
.rt-fundo-claro {
background: #E2E6EB url("assets/img/fundo-claro.jpg") center / cover no-repeat;
color: var(--azul-verdus);
}
/* ".rt-pagina" na frente: ganha do fundo azul chapado do site (.bgBlue). */
.rt-pagina .rt-fundo-azul {
background: #0B3D70 url("assets/img/fundo-azul.jpg") center / cover no-repeat;
color: var(--branco);
}
/* ═════════════════════════════════════════════════════════════════════════════
2. BLOCO 1 — TOPO
A altura (930px no computador) e o fundo azul-escuro vêm do site (.innerBanner).
═════════════════════════════════════════════════════════════════════════ */
/* FOTO DO TOPO.
Arquivo usado: assets/img/hero-rt-azul.jpg (versão leve, 97 KB).
O original em alta (hero-rt-azul.png, 6,6 MB) fica na mesma pasta só como
fonte: NÃO use o .png aqui, ele deixa a página lenta no celular.
Para trocar a foto: salve a nova em assets/img/ e troque o nome abaixo.
- background-size: cover → a foto cobre o topo inteiro, sem sobrar faixa
- background-position: 70% → mantém a pessoa (lado direito da foto) à vista
quando a tela é mais estreita que a foto. */
.rt-topo {
background-image: url("assets/img/hero-rt-azul.jpg");
background-size: cover;
background-position: 70% center;
background-repeat: no-repeat;
}
/* Caixa dos textos do topo: ALINHADA À ESQUERDA, sobre a parte lisa da foto.
(Nas outras páginas do site o texto fica à direita, mas aqui a pessoa da
foto está à direita e o texto ficaria em cima do rosto dela.)
max-width: 55% impede que o texto avance sobre a pessoa. */
.rt-topo .innerBannerBox {
gap: 24px; /* espaço entre rótulo, título, subtítulo e botão */
align-items: flex-start; /* o site usa flex-end (direita); aqui é esquerda */
text-align: left;
max-width: 55%;
}
/* Rótulo "REFORMA TRIBUTÁRIA" (pequeno, verde-limão, letras espaçadas) */
.rt-rotulo {
color: var(--verde-limao);
font-size: 14px;
font-weight: 500;
letter-spacing: 4.57px;
text-transform: uppercase; /* deixa em MAIÚSCULAS sem precisar digitar assim */
}
/* Título principal (h1). Duas linhas: a 1ª branca (cor daqui) e a 2ª bege
(classe rt-texto-bege no index.html). */
.rt-titulo-principal {
color: var(--branco);
font-size: 50px;
line-height: 60px; /* altura de cada linha do texto */
font-weight: 700; /* 700 = negrito */
max-width: 820px; /* impede linhas longas demais */
}
/* Subtítulo (branco desde 29/09/2026; antes era bege) */
.rt-subtitulo {
color: var(--branco);
font-size: 18px;
line-height: 28px;
max-width: 820px;
}
/* Botão do topo: o texto é mais longo que o botão padrão do site,
então ele deixa de ter tamanho fixo e cresce conforme o texto. */
.rt-pagina .rt-botao-topo {
display: inline-block;
width: auto;
height: auto;
margin-top: 16px;
padding: 18px 32px;
letter-spacing: 4px;
}
/* ═════════════════════════════════════════════════════════════════════════════
PEÇAS REPETIDAS NOS BLOCOS 2, 3 e 4
═════════════════════════════════════════════════════════════════════════ */
/* Espaço em cima e embaixo de cada bloco */
.rt-secao {
padding-top: var(--espaco-secao);
padding-bottom: var(--espaco-secao);
}
/* Título de cada bloco (h2) */
.rt-titulo-secao {
font-size: 40px;
line-height: 52px;
font-weight: 600;
margin-bottom: 48px;
}
/* (Os fundos dos blocos estão na parte 1B, "FUNDOS".) */
/* ═════════════════════════════════════════════════════════════════════════════
3. BLOCO 2 — O QUE MUDA
Cards azuis. Motivo: os ícones do site são desenhados em bege e sumiriam num
card branco.
═════════════════════════════════════════════════════════════════════════ */
/* Texto logo abaixo do título. Ocupa a LARGURA TODA dos cards (29/09/2026,
igual ao PPT): antes parava em 760px e o bloco ficava "torto". */
.rt-texto-abertura {
font-size: 18px;
line-height: 28px;
max-width: none;
margin-top: -24px; /* aproxima do título (que tem 48px embaixo) */
margin-bottom: 48px;
}
/* A grade dos cards: 3 colunas do mesmo tamanho, 24px entre elas (usada pelos
BLOCOS 1B e 2, que hoje têm 3 cards cada). Menos de 3 telas médias vira 2
colunas (ver parte 7), e no celular vira 1 (parte 8). */
.rt-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
list-style: none; /* tira as bolinhas da lista */
}
/* Um card */
.rt-card {
background-color: var(--azul-verdus);
color: var(--branco);
padding: 40px;
border-radius: var(--canto);
}
/* Ícone do card */
.rt-card img {
display: block;
height: 56px;
width: auto;
margin-bottom: 24px;
}
/* Título do card (Margem, Contratos, Operação / CBS, IBS, IS).
Maior e em negrito desde 29/09/2026, para dar ênfase. */
.rt-card-titulo {
font-size: 36px;
line-height: 44px;
font-weight: 700;
}
/* Pergunta (BLOCO 1B) ou nome por extenso (BLOCO 2), em bege.
Em letras normais, SEM caixa alta (29/09/2026). */
.rt-card-nome {
color: var(--bege);
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-top: 8px;
}
/* Texto do card */
.rt-card-texto {
font-size: 18px;
line-height: 28px;
margin-top: 16px;
}
/* MESMA ALTURA NOS CARDS (29/09/2026).
Problema: quando a pergunta de um card tem 2 linhas e a do vizinho tem 3,
o texto de baixo começa em alturas diferentes (foi o caso do "Alíquotas...").
Solução: "subgrid". Cada card ocupa 4 linhas da grade de fora (ícone, título,
nome, texto) e usa as MESMAS linhas dos vizinhos. A linha mais alta manda,
e todos os textos começam juntos. Card sem ícone (BLOCO 1B) só deixa a
última linha vazia.
"@supports" = só aplica em navegador que entende subgrid (quase todos hoje);
nos outros a página fica como antes, sem quebrar nada. */
@supports (grid-template-rows: subgrid) {
.rt-card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
align-content: start;
}
}
/* Parágrafo de fechamento que aparece depois dos cards ou da linha do tempo
(o "Como respondemos:", o "Ponto de atenção:" e o "Quanto antes...").
Usado nos BLOCOS 1B, 2 e 4C. Mesmo tamanho e mesma largura do texto de
abertura (29/09/2026). */
.rt-texto-fechamento {
margin-top: 40px;
max-width: none;
font-size: 18px;
line-height: 28px;
}
/* ═════════════════════════════════════════════════════════════════════════════
4. BLOCO 3 — LINHA DO TEMPO
No computador: 5 colunas lado a lado, com uma linha azul passando por cima
e um marcador ✓ em cada marco (era um quadradinho até 29/09/2026).
(No tablet e no celular fica em pé; ver partes 7 e 8.)
Duas versões:
- SIMPLES (BLOCO 4C "Como começar", classe extra "rt-passos"):
marcador, número e texto.
- DESTAQUE (BLOCO 3, classe extra "rt-linha-destaque"): ano, marcador e
o texto dentro de um card; cards de 2026 e 2027 em verde.
═════════════════════════════════════════════════════════════════════════ */
/* A lista inteira. É a mesma grade usada no BLOCO 4C ("Como começar"), que
também tem 5 passos. Se um dos dois blocos ganhar mais itens, troque
"repeat(5, 1fr)" pelo número certo — os dois blocos usam esta regra. */
.rt-linha-do-tempo {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
list-style: none;
position: relative; /* necessário para posicionar a linha abaixo */
}
/* A LINHA azul horizontal. "::before" cria um desenho sem precisar de HTML. */
.rt-linha-do-tempo::before {
content: "";
position: absolute;
top: 12px; /* altura do meio do marcador (26px / 2 - 1) */
left: 0;
right: 0;
height: 2px;
background-color: var(--azul-verdus);
}
/* Cada marco. O espaço em cima é o lugar do marcador. */
.rt-marco {
position: relative;
padding-top: 46px;
}
/* O MARCADOR ✓ de cada marco: uma bolinha colorida com o desenho do ✓
(arquivo assets/img/check.svg, traço branco) no meio.
A sombra da cor do fundo faz a linha "parar" antes de encostar na bolinha. */
.rt-marco::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%; /* 50% = círculo */
background: var(--azul-verdus) url("assets/img/check.svg") center / 16px no-repeat;
box-shadow: 0 0 0 4px var(--branco);
}
/* Ano (2026, 2027...) ou número do passo (01, 02...) */
.rt-marco-ano {
font-size: 28px;
line-height: 38px;
font-weight: 700;
}
/* Texto do marco */
.rt-marco-texto {
font-size: 16px;
line-height: 26px;
margin-top: 8px;
}
/* ─── VERSÃO SIMPLES: "Como começar" (BLOCO 4C) ─────────────────────────────
Marcador ✓ em verde e números 01 a 05 em VERDE ESCURO (29/09/2026).
O número usa o tom de texto (--verde-escuro-texto) porque fica sobre branco. */
.rt-passos .rt-marco::before {
background-color: var(--verde-escuro);
}
.rt-passos .rt-marco-ano {
color: var(--verde-escuro-texto);
}
/* ─── VERSÃO DESTAQUE: linha do tempo (BLOCO 3), igual ao slide 4 do PPT ───
Ordem em cada coluna: ANO em cima → marcador ✓ na linha → CARD com o texto.
A linha e o marcador descem 50px para caber o ano em cima deles. */
.rt-linha-destaque::before {
top: 62px; /* 50px (lugar do ano) + 12px (meio do marcador) */
}
.rt-linha-destaque .rt-marco {
padding-top: 0;
display: flex; /* ano e card um embaixo do outro... */
flex-direction: column; /* ...e o card estica até o fim (cards da mesma altura) */
}
.rt-linha-destaque .rt-marco::before {
top: 50px;
box-shadow: 0 0 0 4px #E2E6EB; /* cor do fundo claro atrás da linha */
}
.rt-linha-destaque .rt-marco-ano {
margin-bottom: 52px; /* espaço para o marcador passar entre o ano e o card */
}
/* O CARD de cada marco: azul, letra branca */
.rt-linha-destaque .rt-marco-texto {
flex-grow: 1; /* todos os cards da linha com a mesma altura */
margin-top: 0;
padding: 20px;
background-color: var(--azul-verdus);
color: var(--branco);
border-radius: var(--canto);
font-size: 15px;
line-height: 24px;
}
/* 2026 e 2027 = JANELA CRÍTICA: card verde com letra BRANCA, sem negrito
(pedidos do Rafael em 29/09/2026), marcador verde e o ANO em verde claro
(o mesmo verde dos cards, #58B947). */
.rt-marco-janela .rt-marco-ano {
color: var(--verde-escuro);
}
.rt-linha-destaque .rt-marco-janela::before {
background-color: var(--verde-escuro);
}
.rt-linha-destaque .rt-marco-janela .rt-marco-texto {
background-color: var(--verde-escuro);
color: var(--branco);
}
/* FRASE "2026–2027 é a janela crítica", embaixo da linha do tempo.
3ª rodada de 29/09/2026: sem caixa e sem borda; a frase em BEGE e do
MESMO tamanho dos anos da linha do tempo (28px, negrito). A explicação
embaixo continua em azul, 18px. */
.rt-faixa-janela {
margin-top: 48px;
color: var(--azul-verdus);
}
.rt-faixa-janela-titulo {
font-size: 28px; /* = .rt-marco-ano (os anos 2026, 2027...) */
line-height: 38px;
font-weight: 700;
color: var(--bege);
}
.rt-faixa-janela-texto {
margin-top: 4px;
font-size: 18px;
line-height: 28px;
}
/* ═════════════════════════════════════════════════════════════════════════════
5. BLOCO 4 — COMO A VERDUS AJUDA
Fundo azul do PPT (classe rt-fundo-azul, parte 1B).
Em BEGE (2ª rodada de 29/09/2026; antes eram verdes): "Avance no seu
ritmo." (span rt-texto-bege no título), os títulos das 4 camadas e
"+ Serviços consultivos complementares".
Cada coluna abre com "CAMADA" pequeno em bege e o número grande em branco
embaixo, como no PPT. Sem ícone.
═════════════════════════════════════════════════════════════════════════ */
.rt-secao-ajuda .rt-titulo-secao {
color: var(--branco);
}
/* Grade das colunas: 4 colunas (as 4 camadas). No tablet vira 2x2 e no
celular 1 por linha (partes 7 e 8). Sempre número PAR de itens: com 5 ou 3,
sobra um card sozinho na linha de baixo. */
.rt-colunas {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none;
}
/* Uma coluna: caixa com borda branca fininha */
.rt-coluna {
display: flex;
flex-direction: column; /* itens um embaixo do outro */
gap: 12px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.32); /* branco com 32% de opacidade */
color: var(--branco);
}
/* CABEÇA DA COLUNA: "CAMADA" em cima e "01" embaixo, alinhados à esquerda
(2ª rodada de 29/09/2026, pelo modelo que o Rafael mandou). */
.rt-coluna-area {
margin-bottom: 4px;
}
/* "CAMADA": pequeno, bege, letras espaçadas e maiúsculas (como no modelo) */
.rt-coluna-rotulo {
display: block;
color: var(--bege);
font-size: 14px;
line-height: 20px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
}
/* "01": grande, negrito, branco */
.rt-coluna-numero {
display: block;
color: var(--branco);
font-size: 64px;
line-height: 68px;
font-weight: 700;
}
/* Título da coluna, em BEGE (2ª rodada de 29/09/2026) */
.rt-coluna-titulo {
color: var(--bege);
font-size: 26px;
line-height: 34px;
font-weight: 600;
}
/* Texto da coluna */
.rt-coluna-texto {
font-size: 18px;
line-height: 28px;
}
/* MESMA ALTURA NAS COLUNAS (29/09/2026): o mesmo truque dos cards (ver
"MESMA ALTURA NOS CARDS", parte 3). Cada coluna ocupa 3 linhas da grade
("Camada 01", título, texto): quando um título tem 3 linhas e o
vizinho 2, os textos continuam começando na mesma altura. */
@supports (grid-template-rows: subgrid) {
.rt-coluna {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 12px;
align-content: start;
}
}
/* LINHA "+ SERVIÇOS CONSULTIVOS COMPLEMENTARES", embaixo das 4 camadas.
Só texto, sem caixa (28/09/2026). O nome, em negrito, fica BEGE e um
pouco maior (29/09/2026). */
.rt-avulsa {
margin-top: 32px;
color: var(--branco);
font-size: 18px;
line-height: 28px;
}
.rt-avulsa strong {
color: var(--bege);
font-size: 20px;
}
/* BOTÃO QUE CRESCE COM O TEXTO.
O botão branco do site (.btnW) tem tamanho FIXO: 350px x 57px. Texto maior
que "Entrar em contato" quebra em 2 linhas e fica cortado pela metade.
Qualquer botão com texto longo deve levar também a classe "rt-botao-largo". */
.rt-pagina .rt-botao-largo {
display: inline-block;
width: auto;
height: auto;
padding: 18px 32px;
letter-spacing: 4px;
}
/* ═════════════════════════════════════════════════════════════════════════════
6. BLOCO 5 — CHAMADA FINAL
O layout (título à esquerda, botão à direita) vem do site.
═════════════════════════════════════════════════════════════════════════ */
/* FUNDO ÚNICO DO FECHAMENTO (2ª rodada de 29/09/2026).
Uma imagem só (pílulas do PPT, slide 18) de "A Reforma não espera!" até o
fim do rodapé. A caixa "rt-fundo-final" (index.html) envolve a chamada
final e o rodapé; os dois ficam SEM fundo próprio (transparent) para a
imagem aparecer por trás. ".rt-pagina" na frente: ganha do .bgBlue do site. */
.rt-pagina .rt-fundo-final {
background: #0A2F66 url("assets/img/fundo-azul-pilulas.jpg") center / cover no-repeat;
}
.rt-pagina .rt-fundo-final .rt-chamada-final,
.rt-pagina .rt-fundo-final footer {
background: transparent;
}
/* Título em duas linhas: "A Reforma não espera!" em BEGE e "Sua estratégia
também não deveria." em BRANCO (as cores vêm das classes rt-texto-bege e
rt-texto-branco no index.html). Maior e em negrito, como no slide 17. */
.rt-pagina .rt-titulo-final {
font-size: 34px;
line-height: 44px;
font-weight: 700;
width: auto; /* o site limita a 55% e cada frase quebrava em 3 linhas */
}
/* A caixa do título ocupa todo o espaço à esquerda do botão */
.rt-chamada-final .bgLightBlue > div:first-child {
flex: 1;
padding-right: 32px;
}
/* BOTÃO DA CHAMADA FINAL. A coluna do botão tem 350px fixos no site; aqui
ela pode encolher no celular. Desde 29/09/2026 só sobrou o "Entrar em
contato" (o "Copiar e-mail" saiu): ele fica no meio da altura do título. */
.rt-pagina .row-contact-file {
max-width: 100%;
display: flex;
align-items: center;
align-self: center;
}
/* Botão "COPIAR E-MAIL" — SEM USO desde 29/09/2026 (saiu da página).
As regras ficam aqui só para o caso de o botão voltar. */
.rt-botao-copiar {
margin-top: 16px;
padding: 8px 16px;
background-color: transparent;
color: var(--branco);
border: 1px solid var(--branco);
border-radius: var(--canto);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer; /* mãozinha ao passar o mouse */
}
.rt-botao-copiar:hover {
background-color: var(--azul-claro);
}
/* Aviso "E-mail copiado" ao lado do botão */
.rt-aviso-copiado {
margin-left: 12px;
color: var(--verde-limao);
font-size: 14px;
text-transform: none;
}
/* ═════════════════════════════════════════════════════════════════════════════
6C. BLOCO 4B — PERGUNTAS FREQUENTES + FONTES
═════════════════════════════════════════════════════════════════════════ */
/* "Atualizado em..." logo abaixo do título */
.rt-atualizado {
margin-top: -32px; /* aproxima do título */
margin-bottom: 32px;
font-size: 14px;
line-height: 22px;
color: #3E5E75; /* azul acinzentado (contraste AA também sobre o fundo claro) */
}
/* Lista de perguntas: largura limitada para a leitura ficar confortável */
.rt-perguntas {
max-width: 900px;
border-top: 1px solid #C5D0DA;
}
/* Uma pergunta (a caixa inteira) */
.rt-pergunta {
border-bottom: 1px solid #C5D0DA;
}
/* A linha clicável da pergunta */
.rt-pergunta summary {
position: relative;
padding: 20px 48px 20px 0; /* espaço à direita para o sinal + */
font-size: 18px;
line-height: 28px;
font-weight: 600;
color: var(--azul-verdus);
cursor: pointer;
list-style: none; /* tira o triângulo padrão do navegador */
}
/* Tira o triângulo padrão também no Safari */
.rt-pergunta summary::-webkit-details-marker {
display: none;
}
/* Sinal "+" à direita da pergunta fechada */
.rt-pergunta summary::after {
content: "+";
position: absolute;
right: 8px;
top: 16px;
font-size: 28px;
font-weight: 400;
color: var(--azul-verdus);
}
/* Quando a pergunta está aberta ([open]), o sinal vira "–" */
.rt-pergunta[open] summary::after {
content: "–";
}
/* O texto da resposta */
.rt-pergunta p {
padding: 0 48px 24px 0;
font-size: 16px;
line-height: 26px;
color: #22384A; /* quase preto azulado: leitura confortável */
}
/* Contorno de foco na pergunta (teclado) */
.rt-pergunta summary:focus-visible {
outline: 2px solid var(--azul-verdus);
outline-offset: 4px;
}
/* Caixa de fontes */
.rt-fontes {
max-width: 900px;
margin-top: 40px;
}
.rt-fontes-titulo {
font-size: 14px;
line-height: 22px;
letter-spacing: 3px;
text-transform: uppercase;
color: #3E5E75;
margin-bottom: 12px;
}
.rt-fontes ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.rt-fontes a {
font-size: 15px;
line-height: 24px;
color: var(--azul-verdus);
}
/* ═════════════════════════════════════════════════════════════════════════════
6D. AVISO DE COOKIES (barra fixa no rodapé da tela) + link no rodapé
Fundo branco com texto azul; botão "Aceitar" verde-limão com texto azul
(contraste 6:1). Só aparece quando a medição do Google está ligada.
═════════════════════════════════════════════════════════════════════════ */
.rt-cookies {
position: fixed; /* fica presa no rodapé da tela */
left: 0;
right: 0;
bottom: 0;
z-index: 10; /* por cima do resto da página */
background-color: var(--branco);
color: var(--azul-verdus);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
.rt-cookies-conteudo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-top: 24px;
padding-bottom: 24px;
}
.rt-cookies-texto {
font-size: 15px;
line-height: 24px;
max-width: 760px;
}
.rt-cookies-botoes {
display: flex;
gap: 12px;
flex-shrink: 0; /* os botões não espremem */
}
.rt-cookies-aceitar,
.rt-cookies-recusar {
padding: 12px 28px;
border-radius: var(--canto);
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.rt-cookies-aceitar {
background-color: var(--verde-limao);
color: var(--azul-verdus);
border: 1px solid var(--verde-limao);
}
.rt-cookies-recusar {
background-color: transparent;
color: var(--azul-verdus);
border: 1px solid var(--azul-verdus);
}
/* Foco do teclado nos botões da barra (fundo branco: contorno azul) */
.rt-cookies button:focus-visible {
outline: 2px solid var(--azul-verdus);
outline-offset: 2px;
box-shadow: none;
}
/* Link "Preferências de cookies" no rodapé da página: parece texto, é botão */
.rt-link-cookies {
background: none;
border: none;
padding: 0;
color: var(--branco);
font-family: inherit;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
}
/* ═════════════════════════════════════════════════════════════════════════════
6E. BLOCO 4D — LIDERANÇA (criado em 29/09/2026, igual ao slide 16 do PPT)
Fundo azul do PPT (classe rt-fundo-azul, parte 1B).
Computador: foto à esquerda (até 360px) e textos à direita.
Celular: foto em cima, textos embaixo (parte 8).
═════════════════════════════════════════════════════════════════════════ */
/* As duas colunas: foto | textos */
.rt-lideranca {
display: grid;
grid-template-columns: minmax(240px, 360px) 1fr; /* foto entre 240 e 360px; texto fica com o resto */
gap: 56px;
align-items: start;
}
/* Moldura da foto: caixa azul-clara translúcida em volta, como no PPT */
.rt-lideranca-foto {
margin: 0;
padding: 12px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
}
.rt-lideranca-foto img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
/* Nome */
.rt-lideranca-nome {
font-size: 34px;
line-height: 42px;
font-weight: 700;
color: var(--branco);
}
/* Formação, logo abaixo do nome, em bege */
.rt-lideranca-formacao {
margin-top: 4px;
font-size: 16px;
line-height: 24px;
color: var(--bege);
}
/* Texto de apresentação */
.rt-lideranca-bio {
margin-top: 24px;
font-size: 18px;
line-height: 30px;
color: var(--branco);
}
/* As duas caixas (Especialidade / Responde por), lado a lado */
.rt-lideranca-caixas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
.rt-lideranca-caixa {
padding: 24px 28px;
background-color: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
color: var(--branco);
}
/* Título da caixa, em bege (sem caixa alta, mesma regra dos outros textos bege) */
.rt-lideranca-caixa-titulo {
margin-bottom: 12px;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: var(--bege);
}
.rt-lideranca-caixa ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Cada item com uma bolinha verde-limão na frente */
.rt-lideranca-caixa li {
position: relative;
padding-left: 20px;
font-size: 16px;
line-height: 24px;
}
.rt-lideranca-caixa li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--verde-limao);
}
/* ═════════════════════════════════════════════════════════════════════════════
6F. BOTÃO "VOLTAR PARA O TOPO" (29/09/2026)
Bolinha bege com seta azul, presa no canto de baixo à direita da tela.
Começa INVISÍVEL; o script.js (PARTE 8) põe a classe "rt-visivel" quando a
pessoa desce a página, e aí ele aparece.
z-index 9: fica abaixo da barra de cookies (10), que não pode ser tampada.
═════════════════════════════════════════════════════════════════════════ */
.rt-voltar-topo {
position: fixed; /* preso na tela, não na página */
right: 24px;
bottom: 24px;
z-index: 9;
display: flex;
align-items: center;
justify-content: center; /* seta no meio da bolinha */
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--bege);
color: var(--azul-verdus);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
opacity: 0; /* invisível... */
visibility: hidden; /* ...e fora do alcance do mouse e do Tab */
transition: opacity 0.2s linear, visibility 0.2s linear, background-color 0.2s linear;
}
.rt-voltar-topo.rt-visivel {
opacity: 1;
visibility: visible;
}
/* Mouse em cima: branco (mesma regra dos botões bege da página) */
.rt-voltar-topo:hover {
background-color: var(--branco);
}
/* Quem pediu ao computador "menos animação" não vê o botão aparecer devagar */
@media (prefers-reduced-motion: reduce) {
.rt-voltar-topo {
transition: none;
}
}
/* ═════════════════════════════════════════════════════════════════════════════
7. TELAS MÉDIAS (de 771px até 1336px de largura)
Nessa faixa o site não tem margem nas laterais e o texto encosta na borda.
Damos 20px de respiro SÓ nos blocos novos; menu e rodapé ficam iguais ao site.
═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 771px) and (max-width: 1336px) {
.rt-secao > .container,
.rt-chamada-final > .container,
.rt-cookies-conteudo,
.rt-topo .innerBannerBox {
padding-left: 20px;
padding-right: 20px;
}
/* Os blocos 1B e 2 têm 3 cards. Em 2 colunas sobraria 1 sozinho embaixo,
então eles continuam 3 numa linha, com menos espaço interno e letra menor. */
.rt-card {
padding: 24px;
}
.rt-card-titulo {
font-size: 28px;
line-height: 36px;
}
.rt-card-texto {
font-size: 16px;
line-height: 24px;
}
/* As 4 camadas: 2x2 */
.rt-colunas {
grid-template-columns: repeat(2, 1fr);
}
/* A linha do tempo (BLOCO 3) e o "Como começar" (BLOCO 4C) têm 5 itens.
Em 5 colunas nessa faixa, cada item fica com menos de 130px — a linha
e o marcador (pensados para 1 fileira só) iam desalinhar se os itens
quebrassem para a 2ª linha. Por isso, da mesma largura da tela do
celular até aqui, ela fica EM PÉ (mesma regra da parte 8, copiada). */
.rt-linha-do-tempo {
grid-template-columns: 1fr;
gap: 28px;
padding-left: 44px; /* espaço para a linha e os marcadores */
}
.rt-linha-do-tempo::before,
.rt-linha-destaque::before {
top: 0;
bottom: 0;
left: 12px;
right: auto;
width: 2px;
height: auto;
}
.rt-marco,
.rt-linha-destaque .rt-marco {
padding-top: 0;
}
.rt-marco::before,
.rt-linha-destaque .rt-marco::before {
top: 6px; /* alinhado com o ano/número (38px de altura) */
left: -44px;
}
.rt-linha-destaque .rt-marco-ano {
margin-bottom: 12px; /* em pé, o marcador fica ao lado do ano */
}
/* Liderança: foto mais estreita */
.rt-lideranca {
grid-template-columns: 260px 1fr;
gap: 32px;
}
}
/* Liderança em tela média-estreita (771px a 1100px): as duas caixas ficam
uma embaixo da outra, senão cada uma fica estreita demais. */
@media (min-width: 771px) and (max-width: 1100px) {
.rt-lideranca-caixas {
grid-template-columns: 1fr;
}
}
/* ═════════════════════════════════════════════════════════════════════════════
8. CELULAR (telas de até 770px — o mesmo limite do site)
Tudo aqui dentro SUBSTITUI o que foi dito acima quando a tela é pequena.
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 770px) {
/* Topo: o site deixa o topo com 300px de altura no celular, e nossos textos não
cabem. Aqui a altura passa a acompanhar o conteúdo, alinhado à esquerda. */
.rt-topo.innerBanner {
height: auto;
padding-bottom: 40px;
}
.rt-topo .innerBannerBox {
height: auto;
padding-top: 40px;
align-items: flex-start;
text-align: left;
max-width: 100%; /* no celular o texto usa a largura toda */
}
/* No celular o texto fica POR CIMA da foto. Uma camada azul por cima da
imagem (mais forte no alto, onde está o texto) mantém o texto legível.
A primeira linha do background é a camada; a segunda é a foto. */
.rt-topo {
background-image:
linear-gradient(180deg, rgba(0, 56, 91, 0.92) 0%, rgba(0, 56, 91, 0.80) 60%, rgba(0, 56, 91, 0.45) 100%),
url("assets/img/hero-rt-azul.jpg");
background-position: center, 72% center;
}
.rt-titulo-principal {
font-size: 32px;
line-height: 42px;
}
/* Aviso de cookies: texto em cima, botões embaixo, lado a lado */
.rt-cookies-conteudo {
flex-direction: column;
align-items: stretch;
gap: 16px;
padding-top: 20px;
padding-bottom: 20px;
}
.rt-cookies-botoes button {
flex: 1; /* os dois botões dividem a largura */
}
/* Botões de texto longo ocupam a largura toda */
.rt-pagina .rt-botao-largo {
width: 100%;
padding: 16px 20px;
letter-spacing: 3px;
}
/* Botão do topo ocupa a largura toda */
.rt-pagina .rt-botao-topo {
width: 100%;
padding: 16px 20px;
letter-spacing: 3px;
}
/* Blocos com menos espaço e títulos menores */
.rt-secao {
padding-top: var(--espaco-secao-cel);
padding-bottom: var(--espaco-secao-cel);
}
.rt-titulo-secao {
font-size: 28px;
line-height: 38px;
margin-bottom: 32px;
}
.rt-texto-abertura {
margin-top: -16px;
margin-bottom: 32px;
}
.rt-card-titulo {
font-size: 28px;
line-height: 36px;
}
.rt-coluna-titulo {
font-size: 22px;
line-height: 30px;
}
/* Cards e colunas: 1 por linha */
.rt-cards,
.rt-colunas {
grid-template-columns: 1fr;
}
.rt-card,
.rt-coluna {
padding: 28px;
}
/* Com 1 card por linha não há vizinho para alinhar: desliga a "MESMA
ALTURA" (subgrid) e volta ao empilhamento normal. */
.rt-card {
display: block;
grid-row: auto;
}
.rt-coluna {
display: flex;
flex-direction: column;
gap: 12px;
grid-row: auto;
}
/* Linha do tempo EM PÉ: 1 coluna, linha vertical à esquerda
(mesmas regras da parte 7) */
.rt-linha-do-tempo {
grid-template-columns: 1fr;
gap: 28px;
padding-left: 44px; /* espaço para a linha e os marcadores */
}
.rt-linha-do-tempo::before,
.rt-linha-destaque::before {
top: 0;
bottom: 0;
left: 12px;
right: auto;
width: 2px;
height: auto;
}
.rt-marco,
.rt-linha-destaque .rt-marco {
padding-top: 0;
}
.rt-marco::before,
.rt-linha-destaque .rt-marco::before {
top: 6px;
left: -44px;
}
.rt-linha-destaque .rt-marco-ano {
margin-bottom: 12px;
}
/* Caixa da janela crítica: menos espaço interno */
.rt-faixa-janela {
margin-top: 32px;
}
/* Número da camada ("01") um pouco menor */
.rt-coluna-numero {
font-size: 48px;
line-height: 52px;
}
/* Liderança: foto em cima (até 280px), textos e caixas embaixo */
.rt-lideranca {
grid-template-columns: 1fr;
gap: 28px;
}
.rt-lideranca-foto {
max-width: 280px;
}
.rt-lideranca-nome {
font-size: 28px;
line-height: 36px;
}
.rt-lideranca-caixas {
grid-template-columns: 1fr;
gap: 16px;
}
/* Chamada final: título menor */
.rt-pagina .rt-titulo-final {
font-size: 26px;
line-height: 34px;
}
/* Perguntas frequentes: menos espaço à direita no celular */
.rt-atualizado {
margin-top: -20px;
}
.rt-pergunta summary {
font-size: 16px;
line-height: 24px;
padding-right: 36px;
}
.rt-pergunta p {
padding-right: 0;
}
}