/* =========================================================================
Habitat — camada de marca
Aplicada sobre o template Histudy. Herdou a estrutura da camada montada
para o Colégio Ranieri; as cores foram remapeadas para a marca Habitat.
Cores da marca: #013161 (azul) e #9BC131 (verde).
Tipografia: Roboto + Montserrat (herdada; NÃO confirmada para o Habitat —
se a marca tiver fontes próprias, trocar em ranieri-fonts.css).
Carregado DEPOIS de styles.css. Não editar styles.css (arquivo do template).
========================================================================= */
:root {
/* ---- Cores da marca ------------------------------------------------- */
--habitat-azul: #013161; /* institucional */
--habitat-verde: #9BC131; /* institucional — acento */
/* Tons de apoio, derivados do azul. Não são cores de marca: existem porque
uma paleta de duas cores não cobre hover, gradiente e dark mode. */
--habitat-azul-claro: #2F8FEE; /* gradientes + texto azul no modo escuro */
--habitat-azul-escuro: #011E3D; /* hover / estado pressionado */
--habitat-azul-medio: #1E5389; /* terceira cor de gráfico e ícone; ocupa o
lugar do vermelho da paleta anterior */
--habitat-cinza-80: #333333; /* 80% black */
--habitat-cinza-60: #666666; /* 60% black */
--habitat-cinza-40: #999999; /* 40% black */
/* Vermelho de ERRO — deliberadamente fora da paleta da marca. Enquanto ele
e a cor institucional foram o mesmo hex, vermelho neste site significava
"campo inválido", e qualquer uso de marca herdava essa leitura. Não usar
fora de validação de formulário. */
--habitat-erro: #8C1D18;
/* ---- Mapeamento sobre os tokens do template ------------------------- */
--color-primary: var(--habitat-azul);
--color-secondary: var(--habitat-azul-medio);
--color-primary-100: var(--habitat-azul-escuro);
--color-coral: var(--habitat-verde);
--color-violet: var(--habitat-azul-escuro);
--color-pink: var(--habitat-azul-medio);
--color-heading: var(--habitat-cinza-80);
--color-body: var(--habitat-cinza-60);
--color-gray: var(--habitat-cinza-40);
--primary-opacity: #01316121;
--secondary-opacity: #1E538921;
--coral-opacity: #9BC13129;
--violet-opacity: #011E3D21;
--pink-opacity: #1E538921;
--heading-opacity: #33333350;
--color-primary-light: #F2F7FB;
--color-primary-lighter: #E6F0F7;
--color-primary-alt: #D6E4F3;
--color-secondary-alt: #EEF3F9;
/* cards da grade curricular — pastéis derivados das 3 cores institucionais */
--color-card-1: #F0F7DE; /* amarelo */
--color-card-2: #E7F1F8; /* azul */
--color-card-3: #EBF2F9; /* vermelho */
--color-card-4: #EEF3F6; /* cinza-azulado */
--color-card-5: var(--habitat-azul-escuro);
--color-badge-1: var(--habitat-azul-escuro);
--color-badge-2: var(--habitat-verde);
--color-border: #DCE6ED;
--color-border-2: #DCE6ED4f;
--color-extra: #F7FAFC;
--color-extra2: #F7FAFC;
/* ---- Gradientes: monocromáticos em azul (o roxo do template sai) ----- */
--gradient-dark: linear-gradient(90deg, #013161BF 0%, #2F8FEEAB 100%);
--gradient-dark-2: linear-gradient(90deg, #0131617D 0%, #2F8FEE52 100%);
--gradient-1: linear-gradient(#ffffff 0%, #EEF4F9 100%);
--gradient-2: linear-gradient(0deg, #ffffff 0%, #EDF3F8 100%);
--gradient-3: linear-gradient(90deg, #2F8FEE 0%, #013161 100%);
--gradient-4: linear-gradient(180deg, #EEF4F9 0%, #FFFFFF 100%);
--gradient-5: linear-gradient(#EEF4F9 0%, #EEF4F9 100%);
--gradient-6: linear-gradient(to right, rgba(255,255,255,.15), rgba(155,193,49,.15), rgba(1,49,97,.15));
--gradient-7: linear-gradient(218.15deg, #2F8FEE 0%, #013161 100%);
--gradient-8: linear-gradient(270deg, #2F8FEE 0%, #013161 100%);
--gradient-9: linear-gradient(180deg, #013161 0%, #E3F0FF 100%);
--dark-shadow-5: 0px 4px 27.9px rgba(1, 49, 97, 0.15);
/* ---- Alfabeto Padrão (item 4) --------------------------------------- */
--font-primary: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-secondary: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-alt: "Montserrat", system-ui, sans-serif;
}
/* Títulos e elementos de destaque em Montserrat; corpo em Roboto. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .rbt-title-style-2, .section-title .title,
.rbt-btn, .btn, button, input[type="submit"],
.mainmenu li a, .rbt-badge, .rbt-badge-2, .rbt-badge-5,
.subtitle, .rbt-section-title {
font-family: var(--font-secondary);
}
body, p, li, td, th, input, textarea, select, label, .description {
font-family: var(--font-primary);
}
/* Roboto é mais estreita que Euclid: compensa o peso ótico dos títulos. */
h1, .h1, h2, .h2, h3, .h3 { letter-spacing: -0.015em; }
/* =========================================================================
Marca (itens 1, 2, 3 e 6)
========================================================================= */
/* O lockup oficial é vertical (símbolo sobre o logotipo): precisa de altura
suficiente para a palavra "Colégio" permanecer legível. */
.rbt-header .logo img,
.header-left .logo img,
.popup-mobile-menu .logo img {
height: 74px;
width: auto;
max-width: none;
}
.rbt-footer .logo img,
.footer-widget .logo img {
height: 96px;
width: auto;
max-width: none;
}
/* Espaço de respiro em volta da marca (item 3). */
.rbt-header .logo,
.footer-widget .logo { display: inline-block; padding: 4px 0; }
@media (max-width: 767px) {
.rbt-header .logo img,
.header-left .logo img,
.popup-mobile-menu .logo img { height: 58px; }
.rbt-footer .logo img,
.footer-widget .logo img { height: 78px; }
}
/* Fundos escuros / dark mode usam a versão negativa da marca (item 6). */
.active-dark-mode .logo-dark { display: none !important; }
/* =========================================================================
Fotografia institucional (banco de imagens -> fotos reais dos ambientes)
========================================================================= */
/* Banner: sala de leitura da Educação Infantil — ambiente claro, organizado e
acolhedor. Foco à direita para o texto cair sobre a parede clara. */
.bg_image--13 {
/* --hero-img é definida no pelo sorteio em PHP; o url() abaixo é o
fallback caso a variável não exista (o navegador só baixa a vencedora). */
background-image: var(--hero-img, url(../images/ranieri/hero/leitura.webp));
background-position: center 45%;
}
@media (max-width: 767px) {
.bg_image--13 {
background-image: var(--hero-img-sm, url(../images/ranieri/hero/leitura-sm.webp));
}
}
/* Véu claro à esquerda: garante contraste do texto do banner sobre a foto. */
body:not(.active-dark-mode) .rbt-banner-4.bg_image--13 { position: relative; }
body:not(.active-dark-mode) .rbt-banner-4.bg_image--13::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, .97) 0%,
rgba(255, 255, 255, .94) 36%,
rgba(255, 255, 255, .58) 62%,
rgba(255, 255, 255, .06) 88%);
pointer-events: none;
}
.rbt-banner-4.bg_image--13 .wrapper { position: relative; z-index: 1; }
@media (max-width: 767px) {
/* No celular o texto ocupa a largura toda, então o véu é vertical: forte em
cima (onde está o título) e mais leve embaixo, para a foto aparecer. */
body:not(.active-dark-mode) .rbt-banner-4.bg_image--13::before {
background: linear-gradient(180deg,
rgba(255, 255, 255, .96) 0%,
rgba(255, 255, 255, .94) 52%,
rgba(255, 255, 255, .70) 78%,
rgba(255, 255, 255, .38) 100%);
}
}
/* =========================================================================
Componentes com cor cravada no template
========================================================================= */
.rbt-sec-cir-shadow-1 .gradient-shape-top,
.rbt-sec-cir-shadow-1 .gradient-shape-bottom,
.category-section-02 .gradient-shape {
background: linear-gradient(180deg, rgba(155, 193, 49, .45) 0%, rgba(1, 49, 97, .28) 100%) !important;
}
.active-dark-mode .rbt-counterup .top-circle-shape {
background: linear-gradient(90deg, var(--habitat-azul) 0%, var(--habitat-azul-claro) 100%) !important;
}
/* Gradientes de texto/botão do template: azul monocromático no lugar do
azul→roxo original (azul→vermelho institucional não passa em contraste). */
.theme-gradient {
background: linear-gradient(90deg, var(--habitat-azul), var(--habitat-azul-claro));
-webkit-background-clip: text;
background-clip: text;
}
.rbt-btn.btn-gradient {
background-image: linear-gradient(to right,
var(--habitat-azul), var(--habitat-azul-claro),
var(--habitat-azul-claro), var(--habitat-azul));
}
/* Borda em degradê: azul → amarelo, as duas cores dominantes do símbolo. */
.rbt-btn.btn-border-gradient {
background: linear-gradient(90deg, var(--habitat-azul), var(--habitat-verde));
}
/* Os contadores agora exibem anos e quantidades exatas — sem o "+" do template. */
.rbt-counterup .inner .content .counter::after { content: none; }
/* Títulos de card não devem capitalizar cada palavra ("Ballet E Jazz"). */
.rbt-card-title, .rbt-card .rbt-card-title,
.rbt-card-title a, .pricing-header .title { text-transform: none; }
/* Amarelo institucional como acento de destaque (números, marcadores). */
.rbt-counterup .odometer,
.counter-style-1 .count-number { color: var(--habitat-azul); }
.rbt-badge-2 { background: var(--color-primary-lighter); color: var(--habitat-azul); }
.rbt-badge-5 { background: var(--habitat-verde); color: var(--habitat-cinza-80); }
/* =========================================================================
Acessibilidade (contraste ≥ 4.5:1, foco visível, movimento reduzido)
========================================================================= */
a:focus-visible,
button:focus-visible,
.rbt-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--habitat-verde);
outline-offset: 2px;
border-radius: 4px;
}
/* Texto em cinza 40% só é legível em corpo maior — não usar em texto pequeno. */
small, .small-text, .rbt-meta li { color: var(--habitat-cinza-60); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Ícones ilustrados do template (roxos, de plataforma EAD) não integram a
identidade — os contadores ficam apenas com número e legenda. */
.rbt-counterup .inner .icon { display: none; }
.rbt-counterup .inner .content { padding-top: 10px; }
/* Botão "Eu sou Ranieri" à direita da barra superior (mesma chamada do site
oficial), em amarelo institucional. Dimensionado para caber na altura
original da barra (60px) e alinhado à direita com o "Agendar Visita" do
menu — a barra branca do menu recua 18px em relação ao container. */
.rbt-header-top .rbt-header-right .rbt-information-list {
margin: 0;
padding-right: 18px;
}
/* Classe autônoma: o mesmo botão é usado na barra superior (desktop) e dentro
do cabeçalho (celular), então o estilo não pode depender da lista. */
a.rbt-topbar-btn,
.rbt-information-list li a.rbt-topbar-btn {
background: var(--habitat-verde);
color: var(--habitat-cinza-80);
padding: 0 18px;
height: 34px;
line-height: 34px;
border-radius: 500px;
font-weight: 600;
font-size: 14px;
transition: background .25s ease, color .25s ease;
}
a.rbt-topbar-btn:hover,
.rbt-information-list li a.rbt-topbar-btn:hover {
background: #90B32D; /* amarelo institucional escurecido */
color: var(--habitat-cinza-80);
}
a.rbt-topbar-btn i,
.rbt-information-list li a.rbt-topbar-btn i { color: var(--habitat-cinza-80); }
@media (max-width: 1199px) {
.rbt-header-top .rbt-header-right .rbt-information-list { padding-right: 0; }
}
/* Em telas pequenas a barra some (d-none d-lg-block), então o botão fica no
menu mobile — nada a compensar aqui. */
/* Ícones dos Serviços Adicionais (mesma linguagem circular do site oficial). */
.rbt-servico-icon {
width: 92px; height: 92px; margin: 10px auto 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--color-primary-lighter);
}
.rbt-servico-icon i { font-size: 34px; color: var(--habitat-azul); }
/* Parceiros educacionais: logos em escala de cinza que ganham cor no hover. */
.rbt-parceiro-logo {
display: flex; align-items: center; justify-content: center;
min-height: 120px; padding: 10px;
}
.rbt-parceiro-logo img {
max-height: 92px; width: auto; max-width: 100%;
filter: grayscale(1); opacity: .65; transition: filter .3s ease, opacity .3s ease;
}
.rbt-parceiro-logo img:hover { filter: none; opacity: 1; }
/* Endereços das unidades no rodapé: linhas mais compactas. */
.rbt-unidades li { line-height: 1.5; margin-bottom: 10px; }
.rbt-unidades li span { display: block; font-weight: 600; color: var(--color-heading); }
/* Cards de curso, espaço e serviço: mesma altura dentro da linha. */
.rbt-card.height-auto { height: 100%; display: flex; flex-direction: column; }
.rbt-card.height-auto .rbt-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.rbt-card.height-auto .rbt-card-bottom { margin-top: auto; }
/* Botões "marquee" (ex.: Fale com Especialista, no banner): o template roda a
rolagem do texto em loop infinito enquanto o mouse está sobre o botão, o que
fica poluído. Aqui a rolagem acontece UMA vez e para — a cópia do texto
(span::after) fecha exatamente na posição original. */
.rbt-btn:hover.rbt-marquee-btn span,
.rbt-btn:hover.rbt-marquee-btn.marquee-text-y span,
.rbt-btn.rbt-marquee-btn.marquee-auto span {
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* =========================================================================
Ajustes de telas pequenas
========================================================================= */
/* A barra superior só existe no desktop (a coluna da esquerda já é d-none
d-lg-block). O botão "Eu sou Ranieri" acompanha — no celular ele está no
menu, e aqui só vazava para fora da tela. */
@media (max-width: 1199px) {
/* A barra superior inteira sai: seu conteúdo (e-mail, telefone, CTA) já é
d-none d-lg-block, e o que sobrava era o botão "+" do template, que ficava
solto no canto sem nada para expandir. */
/* o template usa .rbt-header-top.rbt-header-top-1{display:flex} — é preciso
a mesma especificidade (duas classes) para sobrescrever */
.rbt-header-top,
.rbt-header-top.rbt-header-top-1 { display: none; }
}
/* O CTA reaparece dentro do cabeçalho, ao lado do menu sanduíche. */
.rbt-topbar-btn--mobile {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 10px;
}
.rbt-topbar-btn--mobile i { font-size: 15px; }
@media (max-width: 575px) {
.rbt-topbar-btn--mobile { height: 32px; line-height: 32px; padding: 0 13px; font-size: 13px; }
}
@media (max-width: 420px) {
.rbt-topbar-btn--mobile { padding: 0 10px; font-size: 12px; margin-right: 6px; }
.rbt-topbar-btn--mobile i { display: none; }
}
/* Roboto/Montserrat são mais largas que a fonte original do template: no
celular o título do banner estourava a lateral. As quebras fixas (
) do
HTML também atrapalham quando a linha já é estreita. */
@media (max-width: 767px) {
.rbt-banner-4 .content .title { font-size: 32px; line-height: 1.18; }
.rbt-banner-4 .content .title br,
.rbt-banner-4 .content .description br { display: none; }
/* Sobre foto, o cinza 60% não alcança 4.5:1 em todas as imagens do rodízio;
no celular a linha de apoio usa o cinza 80% (a hierarquia continua vindo
do tamanho e do peso). */
.rbt-banner-4 .content .description { font-size: 16px; color: var(--habitat-cinza-80); }
}
@media (max-width: 479px) {
.rbt-banner-4 .content .title { font-size: 27px; }
}
/* =========================================================================
Barra superior: cada informação em uma pílula
A barra fica sobre a foto do banner, então o fundo claro também resolve a
legibilidade — o texto deixa de disputar com a imagem.
========================================================================= */
.rbt-header-top .header-info .rbt-information-list { gap: 8px; margin: 0; }
.rbt-header-top .header-info .rbt-information-list li { margin: 0; }
.rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn) {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 14px;
border-radius: 500px;
background: rgba(255, 255, 255, .82);
border: 1px solid var(--color-border);
color: var(--habitat-cinza-80);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
backdrop-filter: blur(3px);
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn) i {
margin: 0;
font-size: 14px;
color: var(--habitat-azul);
transition: color .25s ease;
}
.rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn):hover {
background: #fff;
border-color: var(--habitat-azul);
color: var(--habitat-azul);
}
.rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn):hover i { color: var(--habitat-azul); }
.active-dark-mode .rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn) {
background: rgba(24, 33, 42, .78);
border-color: var(--dark-color-border-2);
color: var(--color-white-dark);
}
/* =========================================================================
Seções "Nossos Cursos" e "Conheça nossos espaços": card com borda
contínua, alturas iguais e rodapé alinhado
O texto de cada curso tem um comprimento diferente; sem isto, o "Saiba Mais"
flutua na altura em que o parágrafo termina e a linha de cards fica torta.
========================================================================= */
/* As colunas viram flex para o card poder ocupar a altura toda da linha. */
/* Só as colunas de card viram flex. Aplicar em todas as colunas da seção
quebrava o alinhamento central do título, do selo e do botão. */
.service-wrapper .rbt-card-col,
.rbt-espacos-area .rbt-card-col { display: flex; }
.service-wrapper .rbt-card ,
.rbt-espacos-area .rbt-card {
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16, 38, 56, .04), 0 10px 24px rgba(16, 38, 56, .05);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-wrapper .rbt-card:hover ,
.rbt-espacos-area .rbt-card:hover {
transform: translateY(-4px);
border-color: rgba(1, 49, 97, .35);
box-shadow: 0 6px 14px rgba(16, 38, 56, .07), 0 18px 40px rgba(16, 38, 56, .10);
}
/* A imagem vai de borda a borda: quem arredonda os cantos é o próprio card
(com overflow: hidden), para não haver dois raios concorrentes. */
.service-wrapper .rbt-card ,
.rbt-espacos-area .rbt-card { overflow: hidden; }
.service-wrapper .rbt-card .rbt-card-img img ,
.rbt-espacos-area .rbt-card .rbt-card-img img {
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0;
display: block;
/* Com `srcset`+`sizes`, a largura intrínseca da imagem passa a ser a do
`sizes` — sem isto o card ficaria com uma faixa vazia à direita. */
width: 100%;
}
.service-wrapper .rbt-card .rbt-card-body ,
.rbt-espacos-area .rbt-card .rbt-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Reserva a altura de dois títulos, que é o maior caso ("Ensino Fundamental –
Anos Iniciais"), para o parágrafo não começar em alturas diferentes. */
.service-wrapper .rbt-card .rbt-card-title { min-height: 2.7em; margin-bottom: 10px; }
/* Os títulos dos espaços quase sempre cabem em uma linha; reservar duas
deixaria um vão grande. */
.rbt-espacos-area .rbt-card .rbt-card-title { min-height: 1.5em; margin-bottom: 10px; }
/* O parágrafo cresce e empurra o rodapé para baixo: o "Saiba Mais" de todos
os cards fica na mesma linha, encostado na base. */
.service-wrapper .rbt-card .rbt-card-text ,
.rbt-espacos-area .rbt-card .rbt-card-text { flex: 1 1 auto; margin-bottom: 0; }
.service-wrapper .rbt-card .rbt-card-bottom ,
.rbt-espacos-area .rbt-card .rbt-card-bottom { margin-top: auto; padding-top: 18px; }
.active-dark-mode .service-wrapper .rbt-card,
.active-dark-mode .rbt-espacos-area .rbt-card { border-color: var(--dark-color-border-2); }
@media (max-width: 767px) {
.service-wrapper .rbt-card .rbt-card-title ,
.rbt-espacos-area .rbt-card .rbt-card-title { min-height: 0; }
}
/* =========================================================================
Proposta Pedagógica
Único bloco escuro da página: interrompe a sequência de seções claras e dá
peso ao argumento pedagógico. Azul institucional de fundo, cartões brancos
à frente e os marcos em amarelo.
========================================================================= */
.rbt-proposta-area {
position: relative;
overflow: hidden;
padding: 110px 0 100px;
background: linear-gradient(160deg, #2F8FEE 0%, var(--habitat-azul) 42%, #011E3D 100%);
isolation: isolate;
}
/* Arcos concêntricos: o gesto do símbolo da marca, em escala grande. Em branco
translúcido — amarelo e vermelho sobre o azul viravam manchas esverdeadas. */
.rbt-proposta-fundo {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .10) 0 17%, transparent 17.3%),
radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .06) 0 26%, transparent 26.3%),
radial-gradient(circle at 4% 96%, rgba(255, 255, 255, .07) 0 16%, transparent 16.3%),
radial-gradient(circle at 4% 96%, rgba(255, 255, 255, .04) 0 24%, transparent 24.3%);
}
/* Fio amarelo cruzando o topo: o único traço de cor de apoio. */
.rbt-proposta-area::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
/* faixas sólidas: o degradê entre amarelo e vermelho virava laranja */
background: linear-gradient(90deg,
var(--habitat-verde) 0 62%,
var(--habitat-azul-medio) 62% 100%);
z-index: 2;
}
.rbt-proposta-conteudo { position: relative; z-index: 1; }
.rbt-proposta-selo {
display: inline-block;
background: var(--habitat-verde);
color: var(--habitat-cinza-80);
font-family: var(--font-secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 500px;
margin-bottom: 22px;
}
.rbt-proposta-titulo {
color: #fff;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.18;
letter-spacing: -.015em;
margin-bottom: 20px;
text-wrap: balance;
}
.rbt-proposta-texto {
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.7;
margin-bottom: 0;
}
/* ---- Pilares: cartões brancos sobre o azul --------------------------- */
.rbt-pilares { margin-top: 54px; }
.rbt-pilar {
height: 100%;
background: #fff;
border-radius: 16px;
padding: 34px 30px 30px;
box-shadow: 0 18px 40px rgba(2, 30, 54, .18);
transition: transform .35s ease, box-shadow .35s ease;
}
.rbt-pilar:hover {
transform: translateY(-6px);
box-shadow: 0 26px 56px rgba(2, 30, 54, .26);
}
.rbt-pilar__icone {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--habitat-verde);
margin-bottom: 20px;
}
.rbt-pilar__icone i { font-size: 26px; color: var(--habitat-cinza-80); }
/* Uma cor institucional por pilar — o único trio da home, e onde a paleta
completa se explica sozinha. Medido: branco sobre azul 6,17:1, cinza-80
sobre amarelo 8,13:1, branco sobre vermelho 7,40:1 (os três passam em AA).
O bloco atrás é azul, mas o círculo vermelho nunca o toca: quem separa é o
cartão branco do pilar — é ele que contorna o 1,20:1 de vermelho x azul. */
.rbt-pilar__icone--azul { background: var(--habitat-azul); }
.rbt-pilar__icone--azul i { color: #fff; }
.rbt-pilar__icone--amarelo { background: var(--habitat-verde); }
.rbt-pilar__icone--vermelho { background: var(--habitat-azul-medio); }
.rbt-pilar__icone--vermelho i { color: #fff; }
/* Achado ao conferir o modo escuro: `styles.css` pinta TODO h3 de branco no
escuro (0-1-1) e o cartão do pilar é branco nos dois modos — os três
títulos ficavam invisíveis. Duas classes (0-2-0) resolvem sem !important. */
.active-dark-mode .rbt-pilar__titulo { color: var(--habitat-cinza-80); }
.rbt-pilar__titulo {
font-size: 19px;
line-height: 1.35;
color: var(--habitat-cinza-80);
margin-bottom: 12px;
min-height: 2.7em;
}
.rbt-pilar__texto {
font-size: 15px;
line-height: 1.72;
color: var(--habitat-cinza-60);
margin-bottom: 0;
}
/* ---- Marcos numéricos ------------------------------------------------ */
.rbt-marcos {
margin-top: 62px;
padding-top: 46px;
border-top: 1px solid rgba(255, 255, 255, .22);
}
.rbt-marco { text-align: center; }
.rbt-marco__numero {
display: block;
font-family: var(--font-secondary);
font-size: clamp(40px, 4.4vw, 58px);
font-weight: 700;
line-height: 1;
color: var(--habitat-verde);
font-variant-numeric: tabular-nums;
}
.rbt-marco__rotulo {
display: block;
margin-top: 10px;
color: #fff;
font-family: var(--font-secondary);
font-size: 15px;
font-weight: 600;
}
.rbt-marco__sub {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, .72);
font-size: 13px;
}
/* ---- CTA ------------------------------------------------------------- */
.rbt-btn.rbt-proposta-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--habitat-verde);
color: var(--habitat-cinza-80);
height: 58px;
line-height: 58px;
padding: 0 34px;
border-radius: 500px;
font-weight: 600;
box-shadow: 0 12px 30px rgba(2, 30, 54, .22);
transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbt-btn.rbt-proposta-cta:hover {
background: #B6D65C;
color: var(--habitat-cinza-80);
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(2, 30, 54, .3);
}
.rbt-btn.rbt-proposta-cta i { font-size: 17px; transition: transform .3s ease; }
.rbt-btn.rbt-proposta-cta:hover i { transform: translateX(4px); }
@media (max-width: 991px) {
.rbt-proposta-area { padding: 78px 0 70px; }
.rbt-pilar__titulo { min-height: 0; }
}
@media (max-width: 575px) {
.rbt-proposta-area { padding: 62px 0 58px; }
.rbt-marcos { margin-top: 44px; padding-top: 34px; }
.rbt-pilar { padding: 28px 24px 26px; }
}
/* Entrada dos cartões e dos marcos conforme entram na tela.
Feita com scroll-driven animation nativa e protegida por @supports: onde o
recurso não existe, o conteúdo simplesmente aparece — nunca fica invisível
esperando JavaScript, como aconteceria com uma biblioteca de scroll. */
@keyframes rbtEntra {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.rbt-pilar,
.rbt-marco {
animation: rbtEntra linear both;
animation-timeline: view();
animation-range: entry 4% cover 26%;
}
}
}
/* =========================================================================
Convites: canal (à distância) e visita (presencial)
Um díptico deliberadamente desigual — a foto ocupa o lado maior e convida a
olhar; o amarelo sólido ocupa o menor e convida a agir. Os dois flutuam
sobre a seção seguinte, como no template.
========================================================================= */
.rbt-convites-area { position: relative; z-index: 2; }
.rbt-convite {
position: relative;
display: block;
height: 100%;
min-height: 340px;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(16, 38, 56, .07), 0 24px 56px rgba(16, 38, 56, .12);
}
/* ---- Canal: foto + camada escura ------------------------------------- */
.rbt-convite--canal { display: flex; align-items: flex-end; text-decoration: none; }
.rbt-convite__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.rbt-convite--canal:hover .rbt-convite__foto { transform: scale(1.06); }
.rbt-convite--canal::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(2, 28, 55, .93) 0%, rgba(2, 28, 55, .72) 38%, rgba(2, 28, 55, .28) 72%, rgba(2, 28, 55, .18) 100%);
}
.rbt-convite--canal .rbt-convite__conteudo {
position: relative;
z-index: 2;
padding: 38px 40px 36px;
max-width: 560px;
}
.rbt-convite__play {
position: absolute;
z-index: 2;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--habitat-verde);
box-shadow: 0 0 0 0 rgba(155, 193, 49, .55);
transition: transform .3s ease, box-shadow .3s ease;
}
.rbt-convite__play i { font-size: 30px; color: var(--habitat-cinza-80); margin-left: 4px; }
.rbt-convite--canal:hover .rbt-convite__play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 0 0 16px rgba(155, 193, 49, .18);
}
@media (prefers-reduced-motion: no-preference) {
.rbt-convite__play { animation: rbtPulsa 2.6s ease-out infinite; }
@keyframes rbtPulsa {
0% { box-shadow: 0 0 0 0 rgba(155, 193, 49, .45); }
70% { box-shadow: 0 0 0 20px rgba(155, 193, 49, 0); }
100% { box-shadow: 0 0 0 0 rgba(155, 193, 49, 0); }
}
}
/* ---- Visita: amarelo institucional ----------------------------------- */
.rbt-convite--visita {
background: var(--habitat-verde);
padding: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rbt-convite--visita::before {
content: "";
position: absolute;
right: -70px;
bottom: -90px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, .28);
}
/* ---- Tipografia compartilhada ---------------------------------------- */
.rbt-convite__selo {
display: inline-block;
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 500px;
margin-bottom: 16px;
background: rgba(2, 28, 55, .58);
color: #fff;
backdrop-filter: blur(4px);
}
.rbt-convite__selo--escuro { background: var(--habitat-cinza-80); color: var(--habitat-verde); }
.rbt-convite__titulo {
font-size: clamp(22px, 2.1vw, 28px);
line-height: 1.25;
margin-bottom: 12px;
color: #fff;
text-wrap: balance;
}
.rbt-convite--visita .rbt-convite__titulo { color: var(--habitat-cinza-80); }
.rbt-convite__texto {
font-size: 15.5px;
line-height: 1.65;
margin-bottom: 18px;
color: rgba(255, 255, 255, .88);
}
.rbt-convite--visita .rbt-convite__texto { color: #2F3B0F; }
.rbt-convite__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 15px;
color: var(--habitat-verde);
}
.rbt-convite__link i { transition: transform .3s ease; }
.rbt-convite--canal:hover .rbt-convite__link i { transform: translate(3px, -3px); }
.rbt-convite__dados {
list-style: none;
padding: 0;
margin: 0 0 26px;
position: relative;
z-index: 1;
}
.rbt-convite__dados li {
display: flex;
align-items: center;
gap: 9px;
font-size: 14.5px;
color: #2F3B0F;
margin-bottom: 7px;
}
.rbt-convite__dados i { font-size: 15px; color: var(--habitat-cinza-80); }
.rbt-convite__dados a { color: #2F3B0F; text-decoration: underline; text-underline-offset: 3px; }
.rbt-convite__dados a:hover { color: var(--habitat-azul); }
.rbt-convite__cta {
position: relative;
z-index: 1;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
height: 54px;
padding: 0 30px;
border-radius: 500px;
background: var(--habitat-azul);
color: #fff;
font-family: var(--font-secondary);
font-weight: 600;
transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbt-convite__cta:hover {
background: var(--habitat-azul-escuro);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(1, 30, 61, .35);
}
.rbt-convite__cta i { transition: transform .3s ease; }
.rbt-convite__cta:hover i { transform: translateX(4px); }
/* Frase de abertura da Proposta Pedagógica (texto oficial da home). */
.rbt-proposta-destaque {
color: #fff;
font-family: var(--font-secondary);
font-size: clamp(17px, 1.5vw, 20px);
font-weight: 500;
line-height: 1.6;
max-width: 60ch;
margin: 0 auto 18px;
}
@media (max-width: 991px) {
.rbt-convite { min-height: 300px; }
.rbt-convite--canal .rbt-convite__conteudo { padding: 30px 28px 28px; }
.rbt-convite--visita { padding: 32px 28px; }
.rbt-convite__play { width: 68px; height: 68px; top: 30%; }
.rbt-convite__play i { font-size: 24px; }
}
/* No celular os dois convites ficam empilhados e a altura dobra: mantido o
recuo negativo do desktop, o cartão amarelo cobria o título da seção
seguinte. Abaixo de 992px eles entram no fluxo normal. */
@media (max-width: 991px) {
.rbt-convites-area.mt_dec--half { margin-bottom: 0; padding-bottom: 0; }
.rbt-course-area.default-callto-action-overlap { padding-top: 64px; }
}
/* =========================================================================
Serviços Adicionais
A seção é sobre o tempo que a criança passa na escola — por isso a peça
central é a grade de horários, com os três turnos reais desenhados em
escala. Layout assimétrico (argumento à esquerda, opções à direita) para
não repetir o grid centralizado das outras seções.
========================================================================= */
.rbt-servicos-area {
/* espaço extra no topo: os cartões de convite avançam 156px sobre esta seção */
padding: 266px 0 100px;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FB 100%);
}
.rbt-servicos-intro { position: sticky; top: 110px; }
.rbt-servicos-selo {
display: inline-block;
background: var(--color-primary-lighter);
color: var(--habitat-azul);
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 500px;
margin-bottom: 20px;
}
.rbt-servicos-titulo {
font-size: clamp(28px, 2.9vw, 40px);
line-height: 1.18;
letter-spacing: -.015em;
color: var(--habitat-cinza-80);
margin-bottom: 18px;
text-wrap: balance;
}
.rbt-servicos-texto {
font-size: 16px;
line-height: 1.75;
color: var(--habitat-cinza-60);
margin-bottom: 26px;
}
.rbt-servicos-cta {
display: inline-flex;
align-items: center;
gap: 10px;
height: 54px;
padding: 0 30px;
border-radius: 500px;
background: var(--habitat-azul);
color: #fff;
font-family: var(--font-secondary);
font-weight: 600;
transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbt-servicos-cta:hover {
background: var(--habitat-azul-escuro);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(1, 30, 61, .28);
}
.rbt-servicos-cta i { transition: transform .3s ease; }
.rbt-servicos-cta:hover i { transform: translateX(4px); }
/* ---- Cada serviço ---------------------------------------------------- */
.rbt-servicos-lista { display: flex; flex-direction: column; gap: 18px; }
.rbt-servico {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 28px 30px;
box-shadow: 0 1px 2px rgba(16, 38, 56, .03), 0 10px 26px rgba(16, 38, 56, .05);
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rbt-servico:hover {
border-color: rgba(1, 49, 97, .35);
box-shadow: 0 8px 18px rgba(16, 38, 56, .07), 0 20px 44px rgba(16, 38, 56, .10);
transform: translateY(-3px);
}
.rbt-servico__cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rbt-servico__icone {
flex: 0 0 auto;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--habitat-verde);
}
.rbt-servico__icone i { font-size: 22px; color: var(--habitat-cinza-80); }
.rbt-servico__titulo { font-size: 20px; line-height: 1.3; margin: 0; color: var(--habitat-cinza-80); }
.rbt-servico__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.rbt-servico__chips li {
font-family: var(--font-secondary);
font-size: 12.5px;
font-weight: 600;
color: var(--habitat-azul);
background: var(--color-primary-light);
border: 1px solid var(--color-primary-alt);
border-radius: 500px;
padding: 4px 12px;
}
.rbt-servico__texto { font-size: 15px; line-height: 1.7; color: var(--habitat-cinza-60); margin-bottom: 16px; }
.rbt-servico__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 14.5px;
color: var(--habitat-azul);
}
.rbt-servico__link i { transition: transform .3s ease; }
.rbt-servico__link:hover i { transform: translateX(4px); }
/* ---- Grade de horários ----------------------------------------------
Três turnos reais em escala 7h–19h. A identidade de cada faixa vem do
rótulo à esquerda, nunca da cor: a rampa azul só indica duração.
-------------------------------------------------------------------- */
.rbt-horarios {
margin: 4px 0 0;
padding: 20px 20px 16px;
background: var(--color-primary-light);
border-radius: 12px;
--barra-1: #2D639A;
--barra-2: #073A6D;
--barra-3: #011E3D;
}
.rbt-horarios__titulo {
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--habitat-cinza-60);
margin-bottom: 14px;
}
.rbt-horarios__grade {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px 14px;
}
.rbt-horarios__rotulo {
font-family: var(--font-secondary);
font-size: 13px;
font-weight: 600;
color: var(--habitat-cinza-80);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rbt-horarios__trilho {
position: relative;
display: block;
height: 12px;
border-radius: 500px;
background: rgba(1, 49, 97, .10);
}
.rbt-horarios__barra {
position: absolute;
top: 0;
bottom: 0;
left: var(--ini);
width: var(--dur);
border-radius: 500px;
background: var(--barra-1);
}
.rbt-horarios__barra--2 { background: var(--barra-2); }
.rbt-horarios__barra--3 { background: var(--barra-3); }
/* O eixo ocupa a mesma coluna das barras, então as marcas de hora caem
exatamente sobre a escala — não em um padding estimado. */
.rbt-horarios__eixo {
display: flex;
justify-content: space-between;
margin-top: 2px;
font-size: 11.5px;
color: var(--habitat-cinza-60);
font-variant-numeric: tabular-nums;
}
.active-dark-mode .rbt-servicos-area { background: linear-gradient(180deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-servico { background: var(--color-bodyest); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-servicos-titulo,
.active-dark-mode .rbt-servico__titulo,
.active-dark-mode .rbt-horarios__rotulo { color: var(--color-white-dark); }
/* na superfície escura os passos claros da rampa é que mantêm contraste */
.active-dark-mode .rbt-horarios { background: rgba(255, 255, 255, .05); --barra-1: #4C8ECF; --barra-2: #2D639A; --barra-3: #073A6D; }
@media (max-width: 991px) {
.rbt-servicos-area { padding: 76px 0 70px; } /* no celular os convites não avançam */
.rbt-servicos-intro { position: static; }
}
@media (max-width: 575px) {
.rbt-servico { padding: 24px 22px; }
.rbt-horarios__grade { grid-template-columns: 1fr; gap: 4px; }
.rbt-horarios__rotulo { margin-top: 8px; }
.rbt-horarios__eixo { padding-left: 0; }
}
/* =========================================================================
Rani Compartilha
Tratamento editorial: uma leitura em destaque com foto grande e, ao lado,
a pilha de leituras recentes — hierarquia de revista, não grade de cards.
========================================================================= */
.rbt-rani-area { padding: 100px 0 96px; background: #fff; }
.rbt-rani-selo {
display: inline-block;
background: var(--color-secondary-alt);
color: var(--habitat-azul-medio);
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 500px;
margin-bottom: 18px;
}
.rbt-rani-titulo {
font-size: clamp(28px, 2.9vw, 40px);
line-height: 1.18;
letter-spacing: -.015em;
color: var(--habitat-cinza-80);
margin-bottom: 14px;
text-wrap: balance;
}
.rbt-rani-texto { font-size: 16px; line-height: 1.72; color: var(--habitat-cinza-60); max-width: 62ch; margin: 0; }
.rbt-rani-todos {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-secondary);
font-weight: 600;
color: var(--habitat-azul);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.rbt-rani-todos:hover { color: var(--habitat-azul-escuro); border-bottom-color: var(--habitat-verde); }
.rbt-rani-todos i { transition: transform .3s ease; }
.rbt-rani-todos:hover i { transform: translateX(4px); }
/* ---- Leitura em destaque --------------------------------------------- */
.rbt-destaque {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--color-border);
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 38, 56, .03), 0 12px 30px rgba(16, 38, 56, .06);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rbt-destaque:hover {
transform: translateY(-4px);
border-color: rgba(1, 49, 97, .35);
box-shadow: 0 10px 22px rgba(16, 38, 56, .09), 0 26px 54px rgba(16, 38, 56, .12);
}
.rbt-destaque__foto { position: relative; display: block; overflow: hidden; }
.rbt-destaque__foto img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.rbt-destaque:hover .rbt-destaque__foto img { transform: scale(1.05); }
.rbt-destaque__tag {
position: absolute;
left: 18px;
top: 18px;
background: var(--habitat-verde);
color: var(--habitat-cinza-80);
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 500px;
}
.rbt-destaque__corpo { display: flex; flex-direction: column; padding: 28px 30px 30px; flex: 1 1 auto; }
.rbt-destaque__titulo {
font-family: var(--font-secondary);
font-size: clamp(20px, 1.9vw, 25px);
font-weight: 600;
line-height: 1.3;
color: var(--habitat-cinza-80);
margin-bottom: 12px;
text-wrap: balance;
}
.rbt-destaque__lide { font-size: 15.5px; line-height: 1.7; color: var(--habitat-cinza-60); margin-bottom: 20px; }
.rbt-destaque__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-secondary);
font-weight: 600;
color: var(--habitat-azul);
}
.rbt-destaque__link i { transition: transform .3s ease; }
.rbt-destaque:hover .rbt-destaque__link i { transform: translateX(4px); }
/* ---- Pilha de leituras ----------------------------------------------- */
.rbt-leituras { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.rbt-leitura {
display: grid;
grid-template-columns: 84px 1fr auto;
align-items: center;
gap: 16px;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: #fff;
transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.rbt-leitura:hover { border-color: rgba(1, 49, 97, .35); background: var(--color-primary-light); transform: translateX(3px); }
.rbt-leitura__thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.rbt-leitura__texto { display: block; min-width: 0; }
.rbt-leitura__titulo {
display: block;
font-family: var(--font-secondary);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--habitat-cinza-80);
margin-bottom: 4px;
}
.rbt-leitura__lide { display: block; font-size: 13.5px; line-height: 1.55; color: var(--habitat-cinza-60); }
.rbt-leitura__seta { color: var(--habitat-azul); font-size: 17px; transition: transform .3s ease; }
.rbt-leitura:hover .rbt-leitura__seta { transform: translateX(3px); }
/* ---- Colunistas + Ranicast ------------------------------------------- */
.rbt-rani-colunistas {
margin-top: auto;
padding: 20px 20px 18px;
border-radius: 14px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary-alt);
}
.rbt-rani-colunistas__titulo {
display: block;
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--habitat-cinza-60);
margin-bottom: 12px;
}
.rbt-rani-colunistas__lista { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 0 16px; }
.rbt-rani-colunistas__lista li {
font-size: 12.5px;
font-weight: 500;
color: var(--habitat-azul);
background: #fff;
border: 1px solid var(--color-primary-alt);
border-radius: 500px;
padding: 4px 11px;
}
.rbt-rani-podcast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
background: var(--habitat-cinza-80);
color: #fff;
font-size: 14px;
transition: background .3s ease;
}
.rbt-rani-podcast span { flex: 1 1 auto; }
.rbt-rani-podcast strong { color: var(--habitat-verde); }
.rbt-rani-podcast:hover { background: #1F1F1F; color: #fff; }
.rbt-rani-podcast i:last-child { transition: transform .3s ease; }
.rbt-rani-podcast:hover i:last-child { transform: translateX(4px); }
.active-dark-mode .rbt-rani-area { background: var(--color-darkest); }
.active-dark-mode .rbt-destaque,
.active-dark-mode .rbt-leitura { background: var(--color-bodyest); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-rani-titulo,
.active-dark-mode .rbt-destaque__titulo,
.active-dark-mode .rbt-leitura__titulo { color: var(--color-white-dark); }
@media (max-width: 991px) {
.rbt-rani-area { padding: 74px 0 70px; }
.rbt-rani-todos { margin-top: 18px; }
.rbt-rani-colunistas { margin-top: 4px; }
}
@media (max-width: 575px) {
.rbt-leitura { grid-template-columns: 64px 1fr; }
.rbt-leitura__thumb { width: 64px; height: 64px; }
.rbt-leitura__seta { display: none; }
.rbt-destaque__corpo { padding: 22px 20px 24px; }
}
/* =========================================================================
Parceiros Educacionais
Seção de apoio: sóbria de propósito, para não competir com as anteriores.
Só recebe legenda o parceiro cujo papel o site oficial descreve.
========================================================================= */
.rbt-parceiros-area { padding: 84px 0 80px; background: var(--color-primary-light); }
.rbt-parceiros-selo {
display: inline-block;
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--habitat-azul);
margin-bottom: 12px;
}
.rbt-parceiros-titulo {
font-size: clamp(22px, 2.1vw, 28px);
line-height: 1.28;
color: var(--habitat-cinza-80);
margin: 0;
text-wrap: balance;
}
.rbt-parceiro {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 26px 18px 22px;
text-align: center;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rbt-parceiro:hover {
border-color: rgba(1, 49, 97, .3);
box-shadow: 0 10px 26px rgba(16, 38, 56, .08);
transform: translateY(-3px);
}
.rbt-parceiro__marca { display: flex; align-items: center; justify-content: center; height: 74px; margin-bottom: 10px; }
.rbt-parceiro__marca img { max-height: 58px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
/* o selo do JEPP é quadrado: com a mesma altura dos logos horizontais ele
pareceria menor do que é */
.rbt-parceiro__marca img[src*="jepp"] { max-height: 76px; }
.rbt-parceiro:hover .rbt-parceiro__marca img { filter: none; opacity: 1; }
.rbt-parceiro__nome { font-family: var(--font-secondary); font-weight: 600; font-size: 15px; color: var(--habitat-cinza-80); }
.rbt-parceiro__legenda { font-size: 12.5px; color: var(--habitat-cinza-60); line-height: 1.45; }
/* =========================================================================
Nossa Rotina
A rotina é feita de muitos momentos de tamanhos diferentes — daí o mosaico
irregular, em vez da faixa de miniaturas iguais que havia aqui.
========================================================================= */
.rbt-rotina-area { padding: 96px 0 100px; background: #fff; }
.rbt-rotina-selo {
display: inline-block;
background: var(--color-primary-lighter);
color: var(--habitat-azul);
font-family: var(--font-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 500px;
margin-bottom: 18px;
}
.rbt-rotina-titulo {
font-size: clamp(28px, 2.9vw, 40px);
line-height: 1.18;
letter-spacing: -.015em;
color: var(--habitat-cinza-80);
margin-bottom: 12px;
}
.rbt-rotina-texto { font-size: 16px; line-height: 1.72; color: var(--habitat-cinza-60); max-width: 60ch; margin: 0; }
.rbt-rotina-insta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 20px 12px 16px;
border-radius: 500px;
background: var(--habitat-cinza-80);
color: #fff;
transition: background .3s ease, transform .3s ease;
}
.rbt-rotina-insta:hover { background: var(--habitat-azul); color: #fff; transform: translateY(-2px); }
.rbt-rotina-insta > i:first-child { font-size: 20px; color: var(--habitat-verde); }
.rbt-rotina-insta__txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.rbt-rotina-insta__txt strong { font-family: var(--font-secondary); font-size: 15px; }
.rbt-rotina-insta__txt small { font-size: 12px; color: rgba(255, 255, 255, .75); }
.rbt-rotina-insta > i:last-child { font-size: 15px; transition: transform .3s ease; }
.rbt-rotina-insta:hover > i:last-child { transform: translate(3px, -3px); }
/* ---- Mosaico --------------------------------------------------------- */
.rbt-mosaico {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 168px;
gap: 14px;
}
.rbt-mosaico__item {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
background: var(--color-primary-light);
}
.rbt-mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
.rbt-mosaico__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.rbt-mosaico__item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(2, 28, 55, .35) 0%, rgba(2, 28, 55, 0) 55%);
opacity: 0;
transition: opacity .3s ease;
}
.rbt-mosaico__item:hover img { transform: scale(1.07); }
.rbt-mosaico__item:hover::after { opacity: 1; }
.active-dark-mode .rbt-rotina-area { background: var(--color-darkest); }
.active-dark-mode .rbt-parceiros-area { background: var(--color-darker); }
.active-dark-mode .rbt-parceiro { background: var(--color-bodyest); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-parceiro__marca img { filter: grayscale(1) brightness(1.9); }
.active-dark-mode .rbt-rotina-titulo,
.active-dark-mode .rbt-parceiros-titulo,
.active-dark-mode .rbt-parceiro__nome { color: var(--color-white-dark); }
@media (max-width: 991px) {
.rbt-rotina-area { padding: 72px 0 76px; }
.rbt-rotina-insta { margin-top: 20px; }
.rbt-mosaico { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
}
@media (max-width: 575px) {
.rbt-parceiros-area { padding: 62px 0 58px; }
.rbt-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 10px; }
}
/* =========================================================================
Rodapé
O ativo mais concreto da escola são os quatro endereços no mesmo bairro —
por isso eles abrem o rodapé como cartões clicáveis para o mapa, e não
espremidos numa lista de contato.
========================================================================= */
/* Rodapé claro (pedido do colégio, 28/07) — inclui a faixa dos quatro
endereços. Duas consequências que orientam todo o bloco abaixo:
1. O amarelo institucional dá ~1,7:1 sobre branco, então ele deixa de ser
cor de TEXTO aqui (títulos de coluna, link do mapa) e sobrevive só onde
é PREENCHIMENTO — o botão do WhatsApp e os hovers.
2. A borda superior substitui o contraste que o fundo escuro dava: sem ela
o rodapé encosta sem costura em qualquer seção clara acima.
No modo escuro ele volta a ser escuro, no fim do arquivo. */
.rbt-rodape { background: #fff; color: var(--habitat-cinza-80); border-top: 1px solid var(--color-primary-alt); }
/* ---- Faixa de unidades ----------------------------------------------- */
.rbt-rodape__unidades { background: var(--color-primary-light); padding: 54px 0 46px; }
.rbt-rodape__titulo-unidades {
font-size: clamp(20px, 2vw, 26px);
color: var(--habitat-azul-escuro);
margin-bottom: 22px;
}
.rbt-unidade {
display: flex;
flex-direction: column;
height: 100%;
gap: 4px;
padding: 20px 20px 18px;
border: 1px solid var(--color-primary-alt);
border-radius: 14px;
background: #fff;
transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.rbt-unidade:hover {
border-color: var(--habitat-azul);
box-shadow: 0 12px 26px rgba(1, 23, 46, .12);
transform: translateY(-3px);
}
.rbt-unidade__nome {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 15px;
color: var(--habitat-azul-escuro);
margin-bottom: 6px;
}
/* Pin vermelho: ver a nota "Vermelho institucional" no fim deste arquivo. */
.rbt-unidade__nome i { color: var(--habitat-azul-medio); font-size: 16px; }
.rbt-unidade__rua { font-size: 14px; color: var(--habitat-cinza-80); line-height: 1.5; }
.rbt-unidade__cep { font-size: 13px; color: var(--habitat-cinza-60); line-height: 1.5; }
.rbt-unidade__mapa {
margin-top: auto;
padding-top: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-secondary);
font-size: 13px;
font-weight: 600;
color: var(--habitat-azul);
}
.rbt-unidade__mapa i { transition: transform .3s ease; }
.rbt-unidade:hover .rbt-unidade__mapa i { transform: translate(3px, -3px); }
/* ---- Corpo ------------------------------------------------------------ */
.rbt-rodape__corpo { padding: 66px 0 58px; }
.rbt-rodape__marca img { height: 104px; width: auto; margin-bottom: 20px; }
.rbt-rodape__marca p { font-size: 15px; line-height: 1.7; max-width: 42ch; margin-bottom: 20px; }
.rbt-rodape__redes { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.rbt-rodape__redes a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--color-primary-alt);
color: var(--habitat-azul);
transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.rbt-rodape__redes a:hover { background: var(--habitat-verde); border-color: var(--habitat-verde); color: var(--habitat-cinza-80); }
.rbt-rodape__coluna h3 {
font-family: var(--font-secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--habitat-azul);
margin-bottom: 16px;
}
.rbt-rodape__coluna ul { list-style: none; padding: 0; margin: 0; }
.rbt-rodape__coluna li { margin-bottom: 9px; }
.rbt-rodape__coluna a {
font-size: 14.5px;
line-height: 1.5;
color: var(--habitat-cinza-80);
transition: color .25s ease, padding-left .25s ease;
}
.rbt-rodape__coluna a:hover { color: var(--habitat-azul); padding-left: 4px; }
.rbt-rodape__contato { display: flex; flex-direction: column; align-items: flex-start; }
.rbt-rodape__tel {
font-family: var(--font-secondary);
font-size: 19px;
font-weight: 600;
color: var(--habitat-azul-escuro);
margin-bottom: 8px;
}
.rbt-rodape__tel:hover { color: var(--habitat-azul); }
.rbt-rodape__mail { font-size: 14.5px; color: var(--habitat-cinza-80); word-break: break-word; margin-bottom: 18px; }
.rbt-rodape__mail:hover { color: var(--habitat-azul); }
/* `.rbt-rodape__coluna a` (0-1-1) vencia `.rbt-rodape__wpp` (0-1-0) e pintava o
texto de branco; só o ícone, com regra própria, ficava azul. */
.rbt-rodape__contato a.rbt-rodape__wpp,
.rbt-rodape__wpp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
padding: 0 22px;
white-space: nowrap;
border-radius: 500px;
background: var(--habitat-verde);
/* Azul escuro em vez do azul institucional: o rótulo tem 14,5px, não conta
como texto grande, e sobre o amarelo o azul dava 3,97:1 (abaixo de 4,5).
Com o escuro sobe para 7,28:1. Já era assim antes do rodapé claro — o
fundo mudou, o problema de contraste não vinha dele. */
color: var(--habitat-azul-escuro);
font-family: var(--font-secondary);
font-weight: 700;
font-size: 14.5px;
transition: background .3s ease, transform .3s ease;
}
.rbt-rodape__contato a.rbt-rodape__wpp:hover,
.rbt-rodape__wpp:hover { background: #B6D65C; color: var(--habitat-azul-escuro); transform: translateY(-2px); }
.rbt-rodape__wpp i { color: var(--habitat-azul-escuro); }
/* ---- Base ------------------------------------------------------------- */
.rbt-rodape__base { border-top: 1px solid var(--color-primary-alt); padding: 22px 0; }
.rbt-rodape__base-linha {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rbt-rodape__base p { margin: 0; font-size: 13.5px; color: var(--habitat-cinza-60); }
.rbt-rodape__base ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; }
.rbt-rodape__base a { font-size: 13.5px; color: var(--habitat-cinza-60); }
.rbt-rodape__base a:hover { color: var(--habitat-azul); }
@media (max-width: 991px) {
.rbt-rodape__unidades { padding: 44px 0 38px; }
.rbt-rodape__corpo { padding: 48px 0 42px; }
.rbt-rodape__marca img { height: 86px; }
}
@media (max-width: 575px) {
.rbt-rodape__base-linha { flex-direction: column; align-items: flex-start; }
.rbt-rodape__base ul { gap: 16px; }
}
/* ---- Rodapé no modo escuro -------------------------------------------
O rodapé claro é a versão de dia. No escuro ele volta ao azul de antes:
uma faixa branca fechando uma página escura queima a vista e inverte a
hierarquia da leitura. Cores explícitas (e não tokens) porque
--habitat-cinza-80/60 são remapeados por container, não globalmente. */
.active-dark-mode .rbt-rodape { background: #01172E; color: rgba(255, 255, 255, .82); border-top-color: transparent; }
.active-dark-mode .rbt-rodape__unidades { background: #001020; }
.active-dark-mode .rbt-rodape__titulo-unidades { color: #fff; }
.active-dark-mode .rbt-unidade { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
.active-dark-mode .rbt-unidade:hover { background: rgba(255, 255, 255, .09); border-color: var(--habitat-verde); box-shadow: none; }
.active-dark-mode .rbt-unidade__nome { color: #fff; }
.active-dark-mode .rbt-unidade__nome i { color: var(--habitat-verde); }
.active-dark-mode .rbt-unidade__rua { color: rgba(255, 255, 255, .88); }
.active-dark-mode .rbt-unidade__cep { color: rgba(255, 255, 255, .62); }
.active-dark-mode .rbt-unidade__mapa { color: var(--habitat-verde); }
.active-dark-mode .rbt-rodape__redes a { border-color: rgba(255, 255, 255, .22); color: #fff; }
.active-dark-mode .rbt-rodape__coluna h3 { color: var(--habitat-verde); }
.active-dark-mode .rbt-rodape__coluna a { color: rgba(255, 255, 255, .82); }
.active-dark-mode .rbt-rodape__coluna a:hover { color: #fff; }
.active-dark-mode .rbt-rodape__tel { color: #fff; }
.active-dark-mode .rbt-rodape__tel:hover { color: var(--habitat-verde); }
.active-dark-mode .rbt-rodape__mail { color: rgba(255, 255, 255, .82); }
.active-dark-mode .rbt-rodape__mail:hover { color: #fff; }
.active-dark-mode .rbt-rodape__base { border-top-color: rgba(255, 255, 255, .14); }
.active-dark-mode .rbt-rodape__base p,
.active-dark-mode .rbt-rodape__base a { color: rgba(255, 255, 255, .7); }
.active-dark-mode .rbt-rodape__base a:hover { color: var(--habitat-verde); }
/* =========================================================================
Hero
Duas colunas: o argumento à esquerda, a escola à direita. A foto sorteada
deixa de ser papel de parede atrás do texto e passa a ser a imagem que se
olha — sem véu por cima, portanto sem perder contraste nem detalhe.
========================================================================= */
.rbt-hero {
position: relative;
padding: 148px 0 0;
overflow: hidden;
background: linear-gradient(168deg, #F4F9FC 0%, #EAF3F9 46%, #FFFFFF 100%);
}
.rbt-hero__fundo {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 88% 6%, rgba(155, 193, 49, .16) 0 26%, transparent 26.4%),
radial-gradient(circle at 2% 74%, rgba(1, 49, 97, .07) 0 30%, transparent 30.4%);
}
.rbt-hero .container { position: relative; z-index: 1; }
/* ---- Coluna do texto -------------------------------------------------- */
.rbt-hero__selo {
display: inline-flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 500px;
padding: 8px 20px 8px 10px;
margin-bottom: 26px;
box-shadow: 0 6px 18px rgba(16, 38, 56, .06);
transition: border-color .3s ease, transform .3s ease;
}
.rbt-hero__selo:hover { border-color: var(--habitat-verde); transform: translateY(-2px); }
.rbt-hero__selo-num {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--habitat-verde);
color: var(--habitat-cinza-80);
font-family: var(--font-secondary);
font-weight: 700;
font-size: 19px;
}
.rbt-hero__selo > span:last-child {
display: flex;
flex-direction: column;
line-height: 1.25;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 15px;
color: var(--habitat-cinza-80);
}
.rbt-hero__selo small { font-family: var(--font-primary); font-weight: 400; font-size: 12.5px; color: var(--habitat-cinza-60); }
.rbt-hero__titulo {
font-size: clamp(32px, 4vw, 56px);
line-height: 1.1;
letter-spacing: -.022em;
color: var(--habitat-cinza-80);
margin-bottom: 20px;
text-wrap: balance;
}
.rbt-hero__titulo em {
font-style: normal;
color: var(--habitat-azul);
/* grifo amarelo sob a palavra-chave; clone faz cada linha receber o traço */
background: linear-gradient(180deg, transparent 64%, rgba(155, 193, 49, .5) 64%, rgba(155, 193, 49, .5) 94%, transparent 94%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.rbt-hero__lide {
font-size: 17px;
line-height: 1.7;
color: var(--habitat-cinza-60);
max-width: 52ch;
margin-bottom: 30px;
}
.rbt-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.rbt-hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
height: 58px;
padding: 0 32px;
border-radius: 500px;
background: var(--habitat-azul);
color: #fff;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 15.5px;
transition: background .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rbt-hero__cta:hover {
background: var(--habitat-azul-escuro);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(1, 30, 61, .28);
}
.rbt-hero__cta i { transition: transform .3s ease; }
.rbt-hero__cta:hover i { transform: translateX(4px); }
.rbt-hero__cta--vazado {
background: transparent;
color: var(--habitat-azul);
border: 2px solid var(--color-primary-alt);
}
.rbt-hero__cta--vazado:hover { background: #fff; color: var(--habitat-azul); border-color: var(--habitat-azul); box-shadow: 0 12px 26px rgba(16, 38, 56, .08); }
.rbt-hero__etapas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.rbt-hero__etapas a {
display: inline-block;
font-family: var(--font-secondary);
font-size: 13px;
font-weight: 600;
color: var(--habitat-azul);
background: rgba(255, 255, 255, .8);
border: 1px solid var(--color-primary-alt);
border-radius: 500px;
padding: 6px 14px;
transition: background .25s ease, border-color .25s ease;
}
.rbt-hero__etapas a:hover { background: #fff; border-color: var(--habitat-azul); }
/* ---- Coluna da imagem ------------------------------------------------- */
.rbt-hero__figura {
position: relative;
margin: 0;
border-radius: 26px 26px 26px 90px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(16, 38, 56, .12), 0 40px 80px rgba(16, 38, 56, .10);
}
.rbt-hero__figura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.rbt-hero__legenda {
position: absolute;
right: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(2, 28, 55, .72);
color: #fff;
font-size: 12.5px;
padding: 7px 14px;
border-radius: 500px;
backdrop-filter: blur(4px);
}
.rbt-hero__legenda i { color: var(--habitat-verde); font-size: 14px; }
/* ---- Faixa de credenciais -------------------------------------------- */
.rbt-hero__faixa { margin-top: 64px; border-top: 1px solid var(--color-border); background: rgba(255, 255, 255, .7); }
.rbt-hero__faixa ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px 26px;
list-style: none;
padding: 22px 0;
margin: 0;
}
.rbt-hero__faixa li { display: flex; align-items: center; gap: 12px; }
.rbt-hero__faixa i { font-size: 20px; color: var(--habitat-azul); flex: 0 0 auto; }
.rbt-hero__faixa span { display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; color: var(--habitat-cinza-60); }
.rbt-hero__faixa strong { font-family: var(--font-secondary); font-size: 14.5px; color: var(--habitat-cinza-80); }
.active-dark-mode .rbt-hero { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-hero__titulo,
.active-dark-mode .rbt-hero__faixa strong { color: var(--color-white-dark); }
/* O grifo translúcido só funciona sobre fundo claro: no escuro a faixa vira
um bloco esverdeado e a palavra, escrita no azul da marca (escuro por
natureza), some dentro dele — media 1,12:1. No escuro o destaque é a
palavra em verde sólido, sem faixa (7,4:1). Mesma solução já adotada nas
aberturas das páginas internas. */
.active-dark-mode .rbt-hero__titulo em { color: var(--habitat-verde); background: none; }
.active-dark-mode .rbt-hero__selo,
.active-dark-mode .rbt-hero__faixa { background: rgba(255, 255, 255, .05); border-color: var(--dark-color-border-2); }
@media (max-width: 991px) {
.rbt-hero { padding-top: 118px; }
.rbt-hero__figura { border-radius: 20px 20px 20px 64px; }
.rbt-hero__faixa ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.rbt-hero { padding-top: 104px; }
.rbt-hero__acoes { gap: 10px; }
.rbt-hero__cta { height: 52px; padding: 0 24px; font-size: 14.5px; }
.rbt-hero__faixa ul { grid-template-columns: 1fr; padding: 18px 0; }
}
/* =========================================================================
Divisor de seção
Quando duas seções vizinhas têm o MESMO fundo (branco sobre branco), a
mudança de assunto passa batida: o olho não tem onde apoiar. O divisor é
um fio de 1px na largura do conteúdo que nasce e morre em transparência —
demarca a emenda sem virar mais um elemento na página.
Regra de uso: só entre seções de fundo idêntico. Onde o fundo já muda
(branco -> #F5F7FA, branco -> azul escuro), a própria troca é o divisor.
========================================================================= */
.rbt-divisor { margin-top: 64px; }
.rbt-divisor > .container { display: flex; }
.rbt-divisor span {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg,
rgba(1, 49, 97, 0) 0%,
rgba(1, 49, 97, .16) 18%,
rgba(1, 49, 97, .16) 82%,
rgba(1, 49, 97, 0) 100%);
}
/* No escuro o azul desaparece: o fio passa a ser luz, não tinta. */
.active-dark-mode .rbt-divisor span {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .13) 18%,
rgba(255, 255, 255, .13) 82%,
rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 767px) {
/* Tela estreita: menos ar acima e o fio começa a aparecer mais cedo,
senão em ~360px de largura só sobra o miolo visível. */
.rbt-divisor { margin-top: 44px; }
.rbt-divisor span {
background: linear-gradient(90deg,
rgba(1, 49, 97, 0) 0%,
rgba(1, 49, 97, .16) 10%,
rgba(1, 49, 97, .16) 90%,
rgba(1, 49, 97, 0) 100%);
}
.active-dark-mode .rbt-divisor span {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .13) 10%,
rgba(255, 255, 255, .13) 90%,
rgba(255, 255, 255, 0) 100%);
}
}
/* =========================================================================
Ícone do WhatsApp (SVG embutido — ver comentário no topo do index.php)
O tamanho é em `em` para acompanhar o texto de cada contexto: pílula da
barra superior (13.5px), número do rodapé (19px), botão amarelo (14.5px).
========================================================================= */
.rbt-icone-wpp {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
fill: currentColor;
vertical-align: -.15em; /* o do menu mobile não é flex */
}
/* Nas listas de informação o ícone de fonte tem margem própria (10px). */
.rbt-information-list li a .rbt-icone-wpp { margin-right: 10px; }
/* Menos nas pílulas da barra superior, que já separam por gap — e onde o
ícone é azul, como os demais. */
.rbt-header-top .header-info .rbt-information-list li > a .rbt-icone-wpp {
margin-right: 0;
color: var(--habitat-azul);
}
/* O número do rodapé passa a ser um contato de WhatsApp: ícone + número na
mesma linha, e o fio do hover (amarelo) leva o ícone junto. */
.rbt-rodape__tel { display: inline-flex; align-items: center; gap: 9px; }
/* =========================================================================
Páginas internas — faixa de título (breadcrumb)
A home tem hero próprio; as demais páginas abrem com esta faixa. O template
usava `bg-gradient-1`, um lilás claro (#EFF1FF) que não é da marca.
========================================================================= */
.rbt-breadcrumb-default.bg-gradient-1 {
background: linear-gradient(180deg, #FFFFFF 0%, var(--color-primary-lighter) 100%);
border-bottom: 1px solid var(--color-primary-alt);
}
.rbt-breadcrumb-default .breadcrumb-inner .title { color: var(--habitat-azul-escuro); }
.rbt-breadcrumb-linha {
max-width: 620px;
margin: 14px auto 0;
color: var(--habitat-cinza-80);
font-size: 16px;
}
.rbt-breadcrumb-default .page-list { margin-top: 18px; }
.rbt-breadcrumb-default .page-list li a { color: var(--habitat-azul); }
.rbt-breadcrumb-default .page-list li.active { color: var(--habitat-cinza-60); }
/* A linha de apoio da faixa de título usa o cinza 80% do manual, que sobre o
fundo escuro do tema fica ilegível — vale para todas as páginas internas. */
.active-dark-mode .rbt-breadcrumb-linha { color: rgba(255, 255, 255, .75); }
/* Mesmo problema no próprio título: o azul-escuro da marca sobre o fundo
escuro fica em ~2,4:1, abaixo do mínimo até para texto grande. Vale para
todas as páginas internas, que compartilham esta faixa. */
.active-dark-mode .rbt-breadcrumb-default .breadcrumb-inner .title { color: var(--color-white-dark); }
.active-dark-mode .rbt-breadcrumb-default .page-list li a { color: var(--habitat-azul-claro); }
.active-dark-mode .rbt-breadcrumb-default.bg-gradient-1 {
background: linear-gradient(180deg, var(--color-darkest) 0%, var(--color-darker) 100%);
border-bottom-color: var(--dark-color-border-2);
}
/* =========================================================================
Chamada final em cartão amarelo
Fecha as cinco páginas de etapa, cursos, proposta, história e serviços
adicionais — o único bloco ainda compartilhado entre páginas internas.
========================================================================= */
/* ---- Chamada final ----------------------------------------------------- */
.rbt-curso__cta { padding: 0 0 100px; background: #fff; }
.rbt-curso__cta-caixa {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 28px;
padding: 44px 48px;
border-radius: 26px;
background: var(--habitat-verde);
}
.rbt-curso__cta-caixa h2 { margin: 0; color: var(--habitat-azul-escuro); font-size: clamp(22px, 2.6vw, 30px); }
.rbt-curso__cta-caixa p { margin: 12px 0 0; max-width: 560px; color: #3A4812; }
.rbt-curso__cta-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.rbt-curso__cta-wpp {
display: inline-flex; align-items: center; gap: 9px;
height: 58px; padding: 0 26px;
border-radius: 500px;
border: 2px solid var(--habitat-azul-escuro);
color: var(--habitat-azul-escuro);
font-family: var(--font-secondary); font-weight: 700;
transition: background .3s ease, color .3s ease;
}
.rbt-curso__cta-wpp:hover { background: var(--habitat-azul-escuro); color: var(--habitat-verde); }
.active-dark-mode .rbt-curso__cta { background: var(--color-darkest); }
@media (max-width: 991px) {
.rbt-curso__cta-caixa { padding: 34px 28px; }
}
@media (max-width: 575px) {
.rbt-curso__cta-acoes > a { width: 100%; justify-content: center; }
}
/* =========================================================================
Link "seta à direita" das listagens
Nasceu no índice das etapas (cursos.php, hoje redesenhado como
`rbt-trilha-*`), mas quatro outras páginas o usam — por isso ele fica, e
sozinho, fora do desenho de qualquer página.
========================================================================= */
.rbt-etapa__link {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 24px;
font-family: var(--font-secondary); font-weight: 700; font-size: 15px;
color: var(--habitat-azul);
}
.rbt-etapa__link i { transition: transform .3s ease; }
.rbt-etapa__link:hover i { transform: translateX(5px); }
/* O cabeçalho é transparente e fica POR CIMA do conteúdo (é o que faz a home
começar na foto). Nas páginas internas a faixa de título é o primeiro bloco,
então ela precisa reservar a altura do cabeçalho — senão o