/* =========================================================================
   Colégio Ranieri — camada de marca
   Aplica o Manual de Identidade Visual (Abr/2025) sobre o template Histudy.

   Referências do manual:
     item 4 — Alfabeto Padrão: Roboto + Montserrat (uso obrigatório)
     item 5 — Cores Institucionais: #0565A4 / #FACA00 / #A91918 + cinzas 80/60/40% black
     item 6 — Fundos: branco recomendado; versão negativa da marca em fundos escuros
     item 3 — Relação símbolo/logotipo: proporções fixas, redução mínima

   Carregado DEPOIS de styles.css. Não editar styles.css (arquivo do template).
   ========================================================================= */

:root {
  /* ---- Cores institucionais (item 5) ---------------------------------- */
  --ranieri-azul: #0565A4;        /* Pantone 641 C */
  --ranieri-amarelo: #FACA00;     /* Pantone 116 C */
  --ranieri-vermelho: #A91918;    /* Pantone 7621 C */
  /* Regra (cliente, 14/10/2026): tudo que é azul e se vê de primeira usa SÓ
     --ranieri-azul (#0565A4, o único azul do manual). Os dois tons abaixo são
     de APOIO e só entram em :hover/:focus/:active ou efeito — nunca no estado
     padrão. Exceção: modo escuro, onde o #0565A4 some (~2,4:1) e o azul-claro
     segue como cor de leitura. Escalas (régua das etapas, barras de horário)
     usam o próprio #0565A4 em opacidades. */
  --ranieri-azul-claro: #0A85C9;  /* apoio: só hover/efeito */
  --ranieri-azul-escuro: #044E7F; /* apoio: só hover/pressionado */
  --ranieri-cinza-80: #333333;    /* 80% black */
  --ranieri-cinza-60: #666666;    /* 60% black */
  --ranieri-cinza-40: #999999;    /* 40% black */
  /* Vermelho de ERRO — deliberadamente diferente do institucional. Enquanto os
     dois foram o mesmo hex, vermelho neste site significava "campo inválido", e
     qualquer uso de marca herdava essa leitura. Não é cor institucional: não
     usar fora de validação de formulário. */
  --ranieri-erro: #8C1D18;

  /* ---- Mapeamento sobre os tokens do template ------------------------- */
  --color-primary: var(--ranieri-azul);
  --color-secondary: var(--ranieri-vermelho);
  --color-primary-100: var(--ranieri-azul);
  --color-coral: var(--ranieri-amarelo);
  --color-violet: var(--ranieri-azul);
  --color-pink: var(--ranieri-vermelho);

  --color-heading: var(--ranieri-cinza-80);
  --color-body: var(--ranieri-cinza-60);
  --color-gray: var(--ranieri-cinza-40);

  --primary-opacity: #0565A421;
  --secondary-opacity: #A9191821;
  --coral-opacity: #FACA0029;
  --violet-opacity: #0565A421;
  --pink-opacity: #A9191821;
  --heading-opacity: #33333350;

  --color-primary-light: #F2F7FB;
  --color-primary-lighter: #E6F0F7;
  --color-primary-alt: #D7E7F2;
  --color-secondary-alt: #FAEDED;

  /* cards da grade curricular — pastéis derivados das 3 cores institucionais */
  --color-card-1: #FFF6D6;  /* amarelo */
  --color-card-2: #E7F1F8;  /* azul */
  --color-card-3: #FAEAEA;  /* vermelho */
  --color-card-4: #EEF3F6;  /* cinza-azulado */
  --color-card-5: var(--ranieri-azul);

  --color-badge-1: var(--ranieri-azul);
  --color-badge-2: var(--ranieri-amarelo);

  --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, #0565A4bf 0%, #0565A4ab 100%);
  --gradient-dark-2: linear-gradient(90deg, #0565A47d 0%, #0565A452 100%);
  --gradient-1: linear-gradient(#ffffff 0%, #EEF4F9 100%);
  --gradient-2: linear-gradient(0deg, #ffffff 0%, #EDF3F8 100%);
  --gradient-3: linear-gradient(90deg, #0565A4 0%, #0565A4 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(250,202,0,.15), rgba(5,101,164,.15));
  --gradient-7: linear-gradient(218.15deg, #0565A4 0%, #0565A4 100%);
  --gradient-8: linear-gradient(270deg, #0565A4 0%, #0565A4 100%);
  --gradient-9: linear-gradient(180deg, #0565A4 0%, #E3F0FF 100%);
  --dark-shadow-5: 0px 4px 27.9px rgba(5, 101, 164, 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 <head> 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(250, 202, 0, .45) 0%, rgba(5, 101, 164, .28) 100%) !important;
}

.active-dark-mode .rbt-counterup .top-circle-shape {
  background: linear-gradient(90deg, var(--ranieri-azul) 0%, var(--ranieri-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(--ranieri-azul), var(--ranieri-azul));
  -webkit-background-clip: text;
  background-clip: text;
}

.rbt-btn.btn-gradient {
  background-image: linear-gradient(to right,
      var(--ranieri-azul), var(--ranieri-azul),
      var(--ranieri-azul), var(--ranieri-azul));
}

/* Borda em degradê: azul → amarelo, as duas cores dominantes do símbolo. */
.rbt-btn.btn-border-gradient {
  background: linear-gradient(90deg, var(--ranieri-azul), var(--ranieri-amarelo));
}

/* 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(--ranieri-azul); }

.rbt-badge-2 { background: var(--color-primary-lighter); color: var(--ranieri-azul); }
.rbt-badge-5 { background: var(--ranieri-amarelo); color: var(--ranieri-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(--ranieri-amarelo);
  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(--ranieri-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(--ranieri-amarelo);
  color: var(--ranieri-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: #E0B400;               /* amarelo institucional escurecido */
  color: var(--ranieri-cinza-80);
}
a.rbt-topbar-btn i,
.rbt-information-list li a.rbt-topbar-btn i { color: var(--ranieri-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(--ranieri-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 (<br>) 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(--ranieri-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(--ranieri-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(--ranieri-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(--ranieri-azul);
  color: var(--ranieri-azul);
}
.rbt-header-top .header-info .rbt-information-list li > a:not(.rbt-topbar-btn):hover i { color: var(--ranieri-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(5, 101, 164, .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, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 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(--ranieri-amarelo) 0 62%,
      var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}

.rbt-proposta-conteudo { position: relative; z-index: 1; }

.rbt-proposta-selo {
  display: inline-block;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-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);
}

/* Hover invertido, a pedido do cliente: o cartão veste a cor do pilar e o
   círculo do ícone fica branco — exatamente a troca do estado de repouso.
   A classe de cor está no <article> (e não só no ícone) para não depender de
   :has(). Contrastes medidos no estado invertido: branco sobre azul 6,17:1,
   branco sobre vermelho 7,40:1, cinza-80 sobre amarelo 8,13:1.
   O cartão amarelo é a exceção que obriga a regra: texto BRANCO sobre amarelo
   dá 1,4:1 e seria ilegível — ali o texto escurece em vez de clarear. Mesmo o
   cinza-60 do parágrafo não serve (3,69:1); sobe para cinza-80.
   O título ganha 0-3-0, então vence a regra de modo escuro (0-2-0) sem
   !important, e o cartão é branco nos dois temas — a inversão vale nos dois. */
.rbt-pilar { transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease; }
.rbt-pilar__icone { transition: background-color .35s ease; }
.rbt-pilar__icone i,
.rbt-pilar__titulo,
.rbt-pilar__texto { transition: color .35s ease; }

.rbt-pilar--azul:hover { background: var(--ranieri-azul); }
.rbt-pilar--azul:hover .rbt-pilar__titulo { color: #fff; }
.rbt-pilar--azul:hover .rbt-pilar__texto { color: rgba(255, 255, 255, .90); }
.rbt-pilar--azul:hover .rbt-pilar__icone { background: #fff; }
.rbt-pilar--azul:hover .rbt-pilar__icone i { color: var(--ranieri-azul); }

.rbt-pilar--amarelo:hover { background: var(--ranieri-amarelo); }
.rbt-pilar--amarelo:hover .rbt-pilar__titulo,
.rbt-pilar--amarelo:hover .rbt-pilar__texto { color: var(--ranieri-cinza-80); }
.rbt-pilar--amarelo:hover .rbt-pilar__icone { background: #fff; }
.rbt-pilar--amarelo:hover .rbt-pilar__icone i { color: var(--ranieri-cinza-80); }

.rbt-pilar--vermelho:hover { background: var(--ranieri-vermelho); }
.rbt-pilar--vermelho:hover .rbt-pilar__titulo { color: #fff; }
.rbt-pilar--vermelho:hover .rbt-pilar__texto { color: rgba(255, 255, 255, .90); }
.rbt-pilar--vermelho:hover .rbt-pilar__icone { background: #fff; }
.rbt-pilar--vermelho:hover .rbt-pilar__icone i { color: var(--ranieri-vermelho); }

.rbt-pilar__icone {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  margin-bottom: 20px;
}
.rbt-pilar__icone i { font-size: 26px; color: var(--ranieri-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(--ranieri-azul); }
.rbt-pilar__icone--azul i { color: #fff; }
.rbt-pilar__icone--amarelo { background: var(--ranieri-amarelo); }
.rbt-pilar__icone--vermelho { background: var(--ranieri-vermelho); }
.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(--ranieri-cinza-80); }

.rbt-pilar__titulo {
  font-size: 19px;
  line-height: 1.35;
  color: var(--ranieri-cinza-80);
  margin-bottom: 12px;
  min-height: 2.7em;
}
.rbt-pilar__texto {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ranieri-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(--ranieri-amarelo);
  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(--ranieri-amarelo);
  color: var(--ranieri-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: #FFD833;
  color: var(--ranieri-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(3, 32, 54, .93) 0%, rgba(3, 32, 54, .72) 38%, rgba(3, 32, 54, .28) 72%, rgba(3, 32, 54, .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(--ranieri-amarelo);
  box-shadow: 0 0 0 0 rgba(250, 202, 0, .55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rbt-convite__play i { font-size: 30px; color: var(--ranieri-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(250, 202, 0, .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(250, 202, 0, .45); }
    70%  { box-shadow: 0 0 0 20px rgba(250, 202, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 202, 0, 0); }
  }
}

/* ---- Visita: amarelo institucional ----------------------------------- */

.rbt-convite--visita {
  background: var(--ranieri-amarelo);
  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(3, 32, 54, .58);
  color: #fff;
  backdrop-filter: blur(4px);
}
.rbt-convite__selo--escuro { background: var(--ranieri-cinza-80); color: var(--ranieri-amarelo); }

.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(--ranieri-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: #4A3F00; }

.rbt-convite__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 15px;
  color: var(--ranieri-amarelo);
}
.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: #4A3F00;
  margin-bottom: 7px;
}
.rbt-convite__dados i { font-size: 15px; color: var(--ranieri-cinza-80); }
.rbt-convite__dados a { color: #4A3F00; text-decoration: underline; text-underline-offset: 3px; }
.rbt-convite__dados a:hover { color: var(--ranieri-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(--ranieri-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(--ranieri-azul-escuro);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(4, 78, 127, .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(--ranieri-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(--ranieri-cinza-80);
  margin-bottom: 18px;
  text-wrap: balance;
}

.rbt-servicos-texto {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ranieri-cinza-60);
  margin-bottom: 26px;
}

/* Vermelho institucional a pedido do cliente (mesma exceção do CTA da hero).
   Aqui a cor entra na própria classe, e não num modificador, porque
   `.rbt-servicos-cta` é exclusiva desta seção — não há o que vazar.
   A borda já existe no estado normal, na cor do fundo, para que a inversão do
   hover não altere nenhuma métrica da caixa. Branco sobre #A91918 = 7,40:1;
   invertido, os mesmos 7,40:1 sobre o branco. */
.rbt-servicos-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: 500px;
  border: 2px solid var(--ranieri-vermelho);
  background: var(--ranieri-vermelho);
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 600;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rbt-servicos-cta:hover {
  background: #fff;
  color: var(--ranieri-vermelho);
  border-color: var(--ranieri-vermelho);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(169, 25, 24, .26);
}
.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(5, 101, 164, .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(--ranieri-amarelo);
}
.rbt-servico__icone i { font-size: 22px; color: var(--ranieri-cinza-80); }

.rbt-servico__titulo { font-size: 20px; line-height: 1.3; margin: 0; color: var(--ranieri-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(--ranieri-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(--ranieri-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(--ranieri-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: rgba(5, 101, 164, .45);
  --barra-2: rgba(5, 101, 164, .72);
  --barra-3: #0565A4;
}

.rbt-horarios__titulo {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-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(--ranieri-cinza-80);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rbt-horarios__trilho {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 500px;
  background: rgba(5, 101, 164, .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(--ranieri-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%); }
/* Mesma correção do CTA da hero: no escuro o vermelho fica a 2,66:1 contra o
   fundo, abaixo dos 3:1 que a forma do botão precisa. Delimita com o
   vermelho-claro do projeto e inverte para ele, com texto vinho a 6,31:1. */
.active-dark-mode .rbt-servicos-cta { border-color: #F09A98; }
.active-dark-mode .rbt-servicos-cta:hover {
  background: #F09A98;
  color: #5E0F0E;
  border-color: #F09A98;
  box-shadow: 0 12px 28px rgba(240, 154, 152, .22);
}
.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: #7FB8DA; --barra-2: #4A97C6; --barra-3: #0F6FAF; }

@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(--ranieri-vermelho);
  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(--ranieri-cinza-80);
  margin-bottom: 14px;
  text-wrap: balance;
}

.rbt-rani-texto { font-size: 16px; line-height: 1.72; color: var(--ranieri-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(--ranieri-azul);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.rbt-rani-todos:hover { color: var(--ranieri-azul-escuro); border-bottom-color: var(--ranieri-amarelo); }
.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(5, 101, 164, .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(--ranieri-amarelo);
  color: var(--ranieri-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(--ranieri-cinza-80);
  margin-bottom: 12px;
  text-wrap: balance;
}
.rbt-destaque__lide { font-size: 15.5px; line-height: 1.7; color: var(--ranieri-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(--ranieri-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(5, 101, 164, .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(--ranieri-cinza-80);
  margin-bottom: 4px;
}
.rbt-leitura__lide { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ranieri-cinza-60); }
.rbt-leitura__seta { color: var(--ranieri-azul); font-size: 17px; transition: transform .3s ease; }
.rbt-leitura:hover .rbt-leitura__seta { transform: translateX(3px); }

/* ---- Ranicast ---------------------------------------------------------- */

.rbt-rani-destaque {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--ranieri-cinza-80);
  color: #fff;
  transition: background .3s ease, transform .3s ease;
}
.rbt-rani-destaque:hover { background: #1F1F1F; color: #fff; transform: translateY(-2px); }
.rbt-rani-destaque__icone {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.rbt-rani-destaque__corpo { flex: 1 1 auto; min-width: 0; }
.rbt-rani-destaque__titulo {
  display: block;
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 700;
  color: var(--ranieri-amarelo);
  margin-bottom: 3px;
}
.rbt-rani-destaque__texto { display: block; font-size: 14.5px; color: rgba(255, 255, 255, .82); }
.rbt-rani-destaque__seta { font-size: 19px; transition: transform .3s ease; }
.rbt-rani-destaque:hover .rbt-rani-destaque__seta { 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; }
}

@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(--ranieri-azul);
  margin-bottom: 12px;
}

.rbt-parceiros-titulo {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.28;
  color: var(--ranieri-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(5, 101, 164, .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(--ranieri-cinza-80); }
.rbt-parceiro__legenda { font-size: 12.5px; color: var(--ranieri-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(--ranieri-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(--ranieri-cinza-80);
  margin-bottom: 12px;
}

.rbt-rotina-texto { font-size: 16px; line-height: 1.72; color: var(--ranieri-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(--ranieri-cinza-80);
  color: #fff;
  transition: background .3s ease, transform .3s ease;
}
.rbt-rotina-insta:hover { background: var(--ranieri-azul); color: #fff; transform: translateY(-2px); }
.rbt-rotina-insta > i:first-child { font-size: 20px; color: var(--ranieri-amarelo); }
.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(3, 32, 54, .35) 0%, rgba(3, 32, 54, 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(--ranieri-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(--ranieri-azul);
  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(--ranieri-azul);
  box-shadow: 0 12px 26px rgba(4, 61, 100, .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(--ranieri-azul);
  margin-bottom: 6px;
}
/* Pin vermelho: ver a nota "Vermelho institucional" no fim deste arquivo. */
.rbt-unidade__nome i { color: var(--ranieri-vermelho); font-size: 16px; }
.rbt-unidade__rua { font-size: 14px; color: var(--ranieri-cinza-80); line-height: 1.5; }
.rbt-unidade__cep { font-size: 13px; color: var(--ranieri-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(--ranieri-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(--ranieri-azul);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.rbt-rodape__redes a:hover { background: var(--ranieri-amarelo); border-color: var(--ranieri-amarelo); color: var(--ranieri-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(--ranieri-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(--ranieri-cinza-80);
  transition: color .25s ease, padding-left .25s ease;
}
.rbt-rodape__coluna a:hover { color: var(--ranieri-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(--ranieri-azul);
  margin-bottom: 8px;
}
.rbt-rodape__tel:hover { color: var(--ranieri-azul-escuro); }
.rbt-rodape__mail { font-size: 14.5px; color: var(--ranieri-cinza-80); word-break: break-word; margin-bottom: 18px; }
.rbt-rodape__mail:hover { color: var(--ranieri-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(--ranieri-amarelo);
  /* 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(--ranieri-azul);
  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: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-2px); }
.rbt-rodape__wpp i { color: var(--ranieri-azul); }

/* ---- 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(--ranieri-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(--ranieri-cinza-60); }
.rbt-rodape__base a:hover { color: var(--ranieri-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
   --ranieri-cinza-80/60 são remapeados por container, não globalmente. */
.active-dark-mode .rbt-rodape { background: #043D64; color: rgba(255, 255, 255, .82); border-top-color: transparent; }
.active-dark-mode .rbt-rodape__unidades { background: #03334F; }
.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(--ranieri-amarelo); box-shadow: none; }
.active-dark-mode .rbt-unidade__nome { color: #fff; }
.active-dark-mode .rbt-unidade__nome i { color: var(--ranieri-amarelo); }
.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(--ranieri-amarelo); }
.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(--ranieri-amarelo); }
.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(--ranieri-amarelo); }
.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(--ranieri-amarelo); }

/* =========================================================================
   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%);
}

/* As três cores da marca no fundo da hero, em triângulo: vermelho no alto à
   direita, azul descendo pela esquerda e amarelo fechando embaixo, entre a
   foto e a faixa (posições de amarelo e vermelho trocadas a pedido do cliente,
   01/10/2026). O vermelho institucional (#A91918) é bem mais escuro que as
   outras duas — na mesma opacidade do amarelo (.38) ele viraria uma mancha
   suja sobre o fundo claro, então entra com o peso do azul (.24–.25):
   presença igual aos olhos, não no valor numérico.
   14/10/2026: círculos REMOVIDOS da hero da home a pedido do cliente — fica só
   o degradê azul-claro da .rbt-hero. Para voltar, restaurar o background
   abaixo (backup ranieri-brand.css.bak-sem-circulos-hero-20261014). */
.rbt-hero__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.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(--ranieri-amarelo); transform: translateY(-2px); }
.rbt-hero__selo-num {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-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(--ranieri-cinza-80);
}
.rbt-hero__selo small { font-family: var(--font-primary); font-weight: 400; font-size: 12.5px; color: var(--ranieri-cinza-60); }

/* Selo oficial "+30 anos" (01/10/2026) no lugar do círculo amarelo com "30".
   Só a marca, sem "Colégio Ranieri" (ilegível nesse tamanho e já está no
   cabeçalho). Mesma altura do antigo círculo (46px) e o card mantém padding e
   forma de pílula originais — o card não cresce, só troca o conteúdo. */
.rbt-hero__selo-marca {
  display: block;
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.rbt-hero__titulo {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--ranieri-cinza-80);
  margin-bottom: 20px;
  text-wrap: balance;
}
.rbt-hero__titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  /* grifo amarelo sob a palavra-chave; clone faz cada linha receber o traço */
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .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(--ranieri-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(--ranieri-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(--ranieri-azul-escuro);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(4, 78, 127, .28);
}
.rbt-hero__cta i { transition: transform .3s ease; }
.rbt-hero__cta:hover i { transform: translateX(4px); }

/* Modificador de marca: CTA em vermelho institucional, a pedido do cliente.
   Contraria a regra "vermelho não vive em botão" da seção 3.1 — é uso decidido
   pelo cliente, nunca posto na classe base (que serve 10 páginas). Em 21/08 foi
   só na hero da home; em 21/09 os donos pediram mais vermelho e ele passou a
   valer também no "Agendar visita" de cursos, serviços adicionais, nossa
   história e proposta pedagógica. A borda existe já no estado normal, na cor
   do fundo, para que a inversão do hover não mexa em uma única métrica da
   caixa. Contraste: branco sobre #A91918 = 7,40:1; invertido, 7,40:1 sobre o
   branco. */
.rbt-hero__cta--vermelho {
  background: var(--ranieri-vermelho);
  border: 2px solid var(--ranieri-vermelho);
}
.rbt-hero__cta--vermelho:hover {
  background: #fff;
  color: var(--ranieri-vermelho);
  border-color: var(--ranieri-vermelho);
  box-shadow: 0 14px 30px rgba(169, 25, 24, .26);
}

.rbt-hero__cta--vazado {
  background: transparent;
  color: var(--ranieri-azul);
  border: 2px solid var(--color-primary-alt);
}
.rbt-hero__cta--vazado:hover { background: #fff; color: var(--ranieri-azul); border-color: var(--ranieri-azul); box-shadow: 0 12px 26px rgba(16, 38, 56, .08); }

/* Hero da HOME (01/10/2026, pedido dos donos): com os círculos de fundo mais
   fortes, o vazado transparente sumia. Aqui ele nasce branco com texto azul e
   inverte no hover (fundo azul, texto branco). Só na hero da home por enquanto
   — as outras páginas que usam o vazado seguem como estavam até aprovarem. */
.rbt-hero .rbt-hero__cta--vazado {
  background: #fff;
  color: var(--ranieri-azul);
  border-color: var(--ranieri-azul);
  box-shadow: 0 8px 20px rgba(16, 38, 56, .08);
}
.rbt-hero .rbt-hero__cta--vazado:hover {
  background: var(--ranieri-azul);
  color: #fff;
  border-color: var(--ranieri-azul);
  box-shadow: 0 14px 30px rgba(4, 78, 127, .28);
}

.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(--ranieri-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(--ranieri-azul); }

/* ---- Coluna da imagem ------------------------------------------------- */

/* Moldura de marca: as três cores dando a volta na foto.
   Feita com as duas camadas de background (padding-box por baixo do conteúdo,
   border-box na faixa da borda) porque é o único jeito de um degradê acompanhar
   o border-radius assimétrico — `border-image` ignora o raio e quadraria o
   canto de 90px.
   A ordem das paradas é deliberada: o azul sempre separa o amarelo do vermelho.
   Encostados, os dois passariam por laranja no meio do degradê — o que a seção
   3.1 proíbe, e é por isso que o fio do bloco escuro usa faixas sólidas. As
   proporções seguem o símbolo: azul domina, amarelo e vermelho são acentos. */
.rbt-hero__figura {
  position: relative;
  margin: 0;
  border-radius: 26px 26px 26px 90px;
  overflow: hidden;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul)  348deg,
      var(--ranieri-azul)        360deg) border-box;
  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(3, 32, 54, .72);
  color: #fff;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 500px;
  backdrop-filter: blur(4px);
}
.rbt-hero__legenda i { color: var(--ranieri-amarelo); 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; }
/* Os quatro ícones eram todos azuis. Agora rodam pelas três cores da marca,
   cada um num disco da própria cor — o disco existe para o amarelo poder
   participar: #FACA00 como traço sobre branco dá ~1.7:1 de contraste, ilegível.
   Dentro do disco, o glifo amarelo vira cinza-80 e a cor fica no fundo, que é
   decoração e não precisa passar em contraste de texto. A cor NÃO carrega
   informação aqui: o significado está no ícone e no rótulo ao lado. */
.rbt-hero__faixa i {
  font-size: 18px;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ranieri-azul);
  background: rgba(5, 101, 164, .10);
}
.rbt-hero__faixa li:nth-child(2) i { color: var(--ranieri-vermelho); background: rgba(169, 25, 24, .10); }
.rbt-hero__faixa li:nth-child(3) i { color: var(--ranieri-cinza-80); background: rgba(250, 202, 0, .22); }
.active-dark-mode .rbt-hero__faixa li:nth-child(3) i { color: var(--ranieri-amarelo); background: rgba(250, 202, 0, .16); }
.rbt-hero__faixa span { display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; color: var(--ranieri-cinza-60); }
.rbt-hero__faixa strong { font-family: var(--font-secondary); font-size: 14.5px; color: var(--ranieri-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); }
.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); }

/* No escuro o vermelho da marca fica a 2,66:1 contra o fundo — abaixo dos 3:1
   que a forma de um botão precisa. Mantém o fundo institucional e delimita com
   o vermelho-claro que o projeto já usa no escuro (#F09A98, ver .rbt-hero__faixa);
   a inversão do hover troca para ele, com texto vinho a 6,31:1. */
/* No escuro só a camada de baixo muda: ela aparece enquanto a foto carrega,
   e um retângulo branco piscando na hero escura é o que se quer evitar. */
.active-dark-mode .rbt-hero__figura {
  background:
    linear-gradient(var(--color-darker), var(--color-darker)) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul-claro)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul-escuro) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul-claro)  348deg,
      var(--ranieri-azul)        360deg) border-box;
}

.active-dark-mode .rbt-hero__cta--vermelho { border-color: #F09A98; }
.active-dark-mode .rbt-hero__cta--vermelho:hover {
  background: #F09A98;
  color: #5E0F0E;
  border-color: #F09A98;
  box-shadow: 0 14px 30px rgba(240, 154, 152, .22);
}

@media (max-width: 991px) {
  .rbt-hero { padding-top: 118px; }
  .rbt-hero__figura { border-radius: 20px 20px 20px 64px; border-width: 2px; }
  .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(5, 101, 164, 0) 0%,
      rgba(5, 101, 164, .16) 18%,
      rgba(5, 101, 164, .16) 82%,
      rgba(5, 101, 164, 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(5, 101, 164, 0) 0%,
        rgba(5, 101, 164, .16) 10%,
        rgba(5, 101, 164, .16) 90%,
        rgba(5, 101, 164, 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 <a> 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(--ranieri-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(--ranieri-azul); }
.rbt-breadcrumb-linha {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--ranieri-cinza-80);
  font-size: 16px;
}
.rbt-breadcrumb-default .page-list { margin-top: 18px; }
.rbt-breadcrumb-default .page-list li a { color: var(--ranieri-azul); }
.rbt-breadcrumb-default .page-list li.active { color: var(--ranieri-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(--ranieri-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(--ranieri-amarelo);
}
.rbt-curso__cta-caixa h2 { margin: 0; color: var(--ranieri-azul); font-size: clamp(22px, 2.6vw, 30px); }
.rbt-curso__cta-caixa p { margin: 12px 0 0; max-width: 560px; color: #5A4700; }
.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(--ranieri-azul);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary); font-weight: 700;
  transition: background .3s ease, color .3s ease;
}
.rbt-curso__cta-wpp:hover { background: var(--ranieri-azul-escuro); color: var(--ranieri-amarelo); }

.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(--ranieri-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 <h1> nasce
   embaixo do menu. A home resolve isso com o padding-top do próprio hero. */
.rbt-breadcrumb-default.ptb--100 { padding: 176px 0 78px !important; }

@media (max-width: 991px) {
  .rbt-breadcrumb-default.ptb--100 { padding: 142px 0 56px !important; }
}
@media (max-width: 575px) {
  .rbt-breadcrumb-default.ptb--100 { padding: 126px 0 46px !important; }
}




/* =========================================================================
   Nossa História
   O assunto da página é tempo, então o tempo é o eixo visual: a régua mostra
   os 31 anos em escala e o trilho central desce ano a ano. Missão e visão
   ficam no único bloco escuro da página — o mesmo gesto da Proposta
   Pedagógica na home, para quem navega reconhecer a mudança de assunto.

   Todas as classes daqui usam o prefixo `rbt-hist-`: `.rbt-marco`,
   `.rbt-pilar` e `.rbt-servico` já pertencem a componentes da home e do
   rodapé, e como este arquivo é anexado no fim, repetir um nome quebraria o
   componente antigo no site inteiro.
   ========================================================================= */

/* ---- Peças comuns: selo e cabeçalho de seção -------------------------- */

.rbt-hist-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-hist-selo i { font-size: 14px; }
.rbt-hist-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-hist-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-hist-cab { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.rbt-hist-cab h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
/* Grifo amarelo sob a palavra-chave — o mesmo recurso do título do hero. */
.rbt-hist-cab h2 em,
.rbt-hist-abertura__titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-hist-cab > p { margin: 16px auto 0; max-width: 620px; color: var(--ranieri-cinza-60); font-size: 16.5px; }

/* =========================================================================
   Abertura
   ========================================================================= */

.rbt-hist-abertura {
  position: relative;
  overflow: hidden;
  padding: 84px 0 88px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 55%, #FFFFFF 100%);
}
/* Mesmo triângulo de cores da hero da home: amarelo no alto à direita, azul
   descendo pela esquerda, vermelho fechando embaixo. O vermelho entra com o
   peso do AZUL (.07) e não com o do amarelo (.14) — sendo bem mais escuro, na
   opacidade do amarelo ele viraria mancha em vez de véu. Raio menor porque
   esta abertura é mais baixa que a hero da home: proporcionalmente, o mesmo
   tamanho na tela. */
/* 01/10/2026: TODAS as aberturas internas usam agora o mesmo triângulo da hero
   da home (pedido dos donos): vermelho no alto à direita, azul à esquerda,
   amarelo embaixo; círculos de borda nítida (antes algumas eram manchas
   esfumadas) e opacidades .24/.25/.38. Raios menores que os da home porque
   as aberturas são mais baixas. O modo escuro ficou como estava. */
.rbt-hist-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-hist-abertura .container { position: relative; z-index: 1; }

.rbt-hist-abertura__grade {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.rbt-hist-abertura__titulo {
  margin: 0 0 20px;
  font-size: clamp(29px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-hist-abertura__lide {
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ranieri-cinza-80);
  max-width: 54ch;
}
.rbt-hist-abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* A moldura repete o recorte do hero (canto inferior esquerdo arredondado):
   é o que faz a página parecer do mesmo site sem copiar a seção. */
.rbt-hist-abertura__foto {
  position: relative;
  margin: 0;
  border-radius: 26px 26px 26px 90px;
  overflow: hidden;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul)  348deg,
      var(--ranieri-azul)        360deg) border-box;
  box-shadow: 0 20px 40px rgba(16, 38, 56, .12), 0 40px 80px rgba(16, 38, 56, .10);
}
.active-dark-mode .rbt-hist-abertura__foto {
  background:
    linear-gradient(var(--color-darker), var(--color-darker)) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul-claro)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul-escuro) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul-claro)  348deg,
      var(--ranieri-azul)        360deg) border-box;
}
.rbt-hist-abertura__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.rbt-hist-abertura__legenda {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(3, 32, 54, .72);
  color: #fff;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 500px;
  backdrop-filter: blur(4px);
}
.rbt-hist-abertura__legenda i { color: var(--ranieri-amarelo); font-size: 14px; }

/* Medalha dos 30 anos: fica dentro da foto porque a moldura tem overflow
   escondido — sair da caixa cortaria o círculo. Vai no canto direito: à
   esquerda ela cobriria a marca pintada na fachada. */
.rbt-hist-abertura__medalha {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 104px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  line-height: 1;
  box-shadow: 0 12px 26px rgba(2, 30, 54, .28);
}
.rbt-hist-abertura__medalha strong { font-size: 40px; font-weight: 800; }
.rbt-hist-abertura__medalha small { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Números da abertura ---------------------------------------------- */

.rbt-hist-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  list-style: none;
  padding: 38px 0 0;
  margin: 58px 0 0;
  border-top: 1px solid var(--color-border);
}
.rbt-hist-numeros li {
  display: grid;
  grid-template-columns: 46px auto 1fr;
  align-items: center;
  gap: 16px;
  padding-left: 30px;
  border-left: 1px solid var(--color-border);
}
.rbt-hist-numeros li:first-child { padding-left: 0; border-left: 0; }
.rbt-hist-numeros i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 20px;
}
.rbt-hist-numeros strong {
  font-family: var(--font-secondary);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: var(--ranieri-azul);
  font-variant-numeric: tabular-nums;
}
.rbt-hist-numeros span {
  display: flex;
  flex-direction: column;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
  line-height: 1.3;
}
.rbt-hist-numeros small { font-family: var(--font-primary); font-weight: 400; font-size: 12.5px; color: var(--ranieri-cinza-60); margin-top: 3px; }

/* =========================================================================
   Trajetória: régua + trilho
   ========================================================================= */

.rbt-hist-tempo { padding: 90px 0 100px; background: #fff; }

/* ---- Régua ------------------------------------------------------------ */

.rbt-hist-regua { margin: 0 0 84px; padding: 0 72px; }

.rbt-hist-regua__trilho {
  position: relative;
  height: 6px;
  border-radius: 500px;
  background: var(--color-primary-lighter);
  margin: 56px 0 0;
}
.rbt-hist-regua__preenchimento {
  position: absolute;
  inset: 0;
  border-radius: 500px;
  background: linear-gradient(90deg, var(--ranieri-azul) 0%, var(--ranieri-azul) 58%, var(--ranieri-amarelo) 100%);
  transform-origin: left center;
}

.rbt-hist-regua__ponto {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--ranieri-azul);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.rbt-hist-regua__ponto:hover { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 6px rgba(5, 101, 164, .14); }
.rbt-hist-regua__ponto--hoje { border-color: var(--ranieri-amarelo); background: var(--ranieri-amarelo); }

.rbt-hist-regua__ano,
.rbt-hist-regua__rotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rbt-hist-regua__ano {
  bottom: 26px;
  font-family: var(--font-secondary);
  font-size: 17px;
  font-weight: 800;
  color: var(--ranieri-azul);
}
.rbt-hist-regua__rotulo {
  top: 26px;
  font-size: 13px;
  color: var(--ranieri-cinza-60);
}
/* 1998 fica a três anos de 1995: em escala real os dois rótulos se tocam, por
   isso o segundo desce um degrau. */
.rbt-hist-regua__ponto:nth-of-type(2) .rbt-hist-regua__rotulo { top: 48px; }
.rbt-hist-regua__ponto:nth-of-type(2)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 1px;
  height: 22px;
  background: var(--color-primary-alt);
}
/* Nas pontas o rótulo centralizado sairia da régua: ele encosta na borda. */
.rbt-hist-regua__ponto:first-of-type .rbt-hist-regua__ano,
.rbt-hist-regua__ponto:first-of-type .rbt-hist-regua__rotulo { left: -2px; transform: none; }
.rbt-hist-regua__ponto--hoje .rbt-hist-regua__ano,
.rbt-hist-regua__ponto--hoje .rbt-hist-regua__rotulo { left: auto; right: -2px; transform: none; }
.rbt-hist-regua__ponto--hoje .rbt-hist-regua__ano { color: var(--ranieri-azul); }

/* O eixo das décadas fica ABAIXO dos rótulos dos marcos (que descem até 48px,
   por causa do degrau do 1998): sem essa folga os dois textos se encavalam. */
.rbt-hist-regua__eixo { position: relative; height: 30px; margin-top: 76px; border-top: 1px dashed var(--color-border); }
.rbt-hist-regua__eixo span {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--ranieri-cinza-40);
  font-variant-numeric: tabular-nums;
}
.rbt-hist-regua__eixo span:first-child { transform: none; }
.rbt-hist-regua__eixo span:last-child { transform: translateX(-100%); }

/* ---- Trilho ----------------------------------------------------------- */

/* O padding de baixo é o pedaço de trilho que sobra depois do último cartão e
   encontra o nó do "hoje", que vem logo abaixo da lista. Ele também impede que
   a margem do último item colapse para fora do <ol> e encurte o fio. */
.rbt-hist-trilho { position: relative; list-style: none; padding: 0 0 44px; margin: 0; }
.rbt-hist-trilho::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--color-primary-alt) 0%, var(--ranieri-azul) 55%, var(--ranieri-amarelo) 100%);
}
.rbt-hist-trilho > li:last-child { margin-bottom: 0; }

.rbt-hist-marco {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  margin-bottom: 54px;
}
/* `grid-row: 1` nos dois: sem isso o cartão da esquerda, declarado DEPOIS do nó
   (que ocupa a coluna do meio), não caberia mais na primeira linha e o
   posicionamento automático o jogaria para uma segunda linha. */
.rbt-hist-marco__cartao { grid-row: 1; }
.rbt-hist-marco--esq .rbt-hist-marco__cartao { grid-column: 1; }
.rbt-hist-marco--dir .rbt-hist-marco__cartao { grid-column: 3; }

.rbt-hist-marco__no {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary-alt);
  color: var(--ranieri-azul);
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(16, 38, 56, .10);
}
/* Fio curto ligando o nó ao cartão: sem ele o cartão parece solto ao lado do
   trilho, e não pendurado nele. */
.rbt-hist-marco__no::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 2px;
  /* cor sólida: o fio troca de lado conforme o marco (e no celular vai sempre
     para a direita), então um degradê direcional ficaria invertido metade das
     vezes */
  background: rgba(5, 101, 164, .32);
}
.rbt-hist-marco--esq .rbt-hist-marco__no::before { right: 100%; }
.rbt-hist-marco--dir .rbt-hist-marco__no::before { left: 100%; }

.rbt-hist-marco__cartao {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(16, 38, 56, .08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rbt-hist-marco__cartao:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary-alt);
  box-shadow: 0 26px 56px rgba(16, 38, 56, .14);
}

.rbt-hist-marco__foto { position: relative; margin: 0; }
.rbt-hist-marco__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.rbt-hist-marco__ano {
  position: absolute;
  left: 22px;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px rgba(2, 30, 54, .18);
}

.rbt-hist-marco__corpo { padding: 34px 32px 32px; }
.rbt-hist-marco__corpo h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.3vw, 25px);
  color: var(--ranieri-azul);
}
.rbt-hist-marco__corpo p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ranieri-cinza-80); }

/* ---- Aparte (o contexto pedagógico, que não é uma data) ---------------- */

.rbt-hist-aparte { position: relative; margin-bottom: 54px; }
.rbt-hist-aparte__caixa {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 38px 40px 36px;
  border-radius: 22px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
}
.rbt-hist-aparte__caixa::before {
  content: "\201C";
  position: absolute;
  left: 26px;
  top: 4px;
  font-family: var(--font-secondary);
  font-size: 86px;
  line-height: 1;
  color: rgba(250, 202, 0, .55);
}
.rbt-hist-aparte__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  margin-bottom: 14px;
}
.rbt-hist-aparte__caixa p { margin: 0; font-size: 16px; line-height: 1.78; color: var(--ranieri-cinza-80); }

/* ---- Fim do trilho ----------------------------------------------------- */

.rbt-hist-hoje { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rbt-hist-marco__no--hoje { background: var(--ranieri-amarelo); border-color: var(--ranieri-amarelo); color: var(--ranieri-azul); }
.rbt-hist-marco__no--hoje::before { display: none; }
.rbt-hist-hoje__caixa { max-width: 560px; margin-top: 22px; }
.rbt-hist-hoje__caixa strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 24px;
  color: var(--ranieri-azul);
}
.rbt-hist-hoje__caixa p { margin: 10px 0 0; color: var(--ranieri-cinza-80); font-size: 16px; }
.rbt-hist-hoje__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 15px;
  color: var(--ranieri-azul);
}
.rbt-hist-hoje__link i { transition: transform .3s ease; }
.rbt-hist-hoje__link:hover i { transform: translateX(5px); }

/* =========================================================================
   Missão e visão — o bloco escuro da página
   ========================================================================= */

.rbt-hist-mv {
  position: relative;
  overflow: hidden;
  padding: 104px 0 108px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-hist-mv::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-hist-mv__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%);
}
.rbt-hist-mv__conteudo { position: relative; z-index: 1; }

.rbt-hist-mv__grade { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }

.rbt-hist-mv__intro { padding-top: 6px; }
.rbt-hist-mv__intro h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
/* Sobre o azul o grifo translúcido esverdeia: o destaque é o amarelo sólido. */
.rbt-hist-mv__intro h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-hist-mv__intro p { margin: 20px 0 0; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .8); }

.rbt-hist-mv__cartoes { display: grid; gap: 20px; }
.rbt-hist-mv__cartao {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  padding: 34px 34px 36px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.rbt-hist-mv__cartao:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.rbt-hist-mv__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 26px;
}
.rbt-hist-mv__cartao h3 { margin: 4px 0 12px; font-size: clamp(21px, 2.4vw, 26px); color: #fff; }
.rbt-hist-mv__cartao p { margin: 0; font-size: 16.5px; line-height: 1.75; color: rgba(255, 255, 255, .88); }

/* =========================================================================
   Valores
   Cinco cartões em bento: três em cima, dois mais largos embaixo — cinco
   colunas iguais deixariam o texto espremido, e um grid de 3+2 iguais
   deixaria um buraco na segunda linha.
   ========================================================================= */

.rbt-hist-valores-area { padding: 90px 0 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--color-primary-light) 100%); }

.rbt-hist-valores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.rbt-hist-valor {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  padding: 34px 30px 32px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Os dois últimos mantêm a largura dos de cima e ficam centralizados: em
   `span 3` eles ficavam largos demais para um texto de duas linhas. */
.rbt-hist-valor:nth-child(4) { grid-column: 2 / span 2; }
.rbt-hist-valor:nth-child(5) { grid-column: 4 / span 2; }
.rbt-hist-valor::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--ranieri-amarelo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.rbt-hist-valor:hover { transform: translateY(-4px); border-color: var(--color-primary-alt); box-shadow: 0 18px 36px rgba(16, 38, 56, .10); }
.rbt-hist-valor:hover::before { transform: scaleX(1); }

.rbt-hist-valor__num {
  position: absolute;
  right: 22px;
  top: 16px;
  font-family: var(--font-secondary);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
}
.rbt-hist-valor__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 22px;
}
.rbt-hist-valor h3 { margin: 20px 0 10px; font-size: 20px; color: var(--ranieri-azul); }
.rbt-hist-valor p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-hist-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-hist-tempo { background: var(--color-darkest); }
.active-dark-mode .rbt-hist-valores-area { background: linear-gradient(180deg, var(--color-darkest) 0%, var(--color-darker) 100%); }

.active-dark-mode .rbt-hist-abertura__titulo,
.active-dark-mode .rbt-hist-cab h2,
.active-dark-mode .rbt-hist-marco__corpo h3,
.active-dark-mode .rbt-hist-hoje__caixa strong,
.active-dark-mode .rbt-hist-valor h3,
.active-dark-mode .rbt-hist-regua__ano { color: var(--color-white-dark); }

.active-dark-mode .rbt-hist-selo--claro,
.active-dark-mode .rbt-hist-numeros i,
.active-dark-mode .rbt-hist-valor__icone { background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-hist-selo { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-hist-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-hist-marco__cartao,
.active-dark-mode .rbt-hist-valor,
.active-dark-mode .rbt-hist-aparte__caixa,
.active-dark-mode .rbt-hist-marco__no { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-hist-numeros,
.active-dark-mode .rbt-hist-numeros li { border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-hist-marco__no { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-hist-marco__no--hoje { background: var(--ranieri-amarelo); color: var(--ranieri-azul-escuro); border-color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-hist-valor__num { color: rgba(255, 255, 255, .10); }
.active-dark-mode .rbt-hist-regua__trilho { background: rgba(255, 255, 255, .1); }
.active-dark-mode .rbt-hist-regua__ponto { background: var(--color-darkest); }

/* O grifo translúcido só funciona sobre fundo claro: no escuro ele vira uma
   faixa oliva e ainda joga texto azul sobre amarelo. Aqui o destaque é a
   própria palavra em amarelo. */
.active-dark-mode .rbt-hist-cab h2 em,
.active-dark-mode .rbt-hist-abertura__titulo em { color: var(--ranieri-amarelo); background: none; }

/* O halo amarelo do fundo da abertura suja o cinza-azulado do tema escuro. */
.active-dark-mode .rbt-hist-abertura__fundo {
  background:
    radial-gradient(circle at 94% 4%, rgba(250, 202, 0, .06) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(10, 133, 201, .12) 0 26%, transparent 26.4%);
}

/* O corpo de texto usa os cinzas do manual, que somem sobre fundo escuro:
   como são custom properties, remapear no container basta (mesma solução das
   demais páginas internas). */
.active-dark-mode .rbt-hist-abertura,
.active-dark-mode .rbt-hist-tempo,
.active-dark-mode .rbt-hist-valores-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Movimento
   Entrada por scroll nativo, protegida por @supports: onde o recurso não
   existe o conteúdo simplesmente aparece — nunca fica invisível esperando
   JavaScript. `rbtEntra` está definido na seção da Proposta Pedagógica.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* A régua se preenche conforme entra na tela — com duração fixa no load
       ela terminaria antes de o leitor chegar até aqui. */
    .rbt-hist-regua__preenchimento {
      animation: rbtHistRegua linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }

    .rbt-hist-marco__cartao,
    .rbt-hist-aparte__caixa,
    .rbt-hist-valor,
    .rbt-hist-mv__cartao,
    .rbt-hist-numeros li {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

@keyframes rbtHistRegua {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* =========================================================================
   Telas menores
   ========================================================================= */

@media (max-width: 1199px) {
  .rbt-hist-regua { padding: 0 40px; }
  .rbt-hist-marco { grid-template-columns: 1fr 90px 1fr; }
}

@media (max-width: 991px) {
  .rbt-hist-abertura { padding: 60px 0 68px; }
  .rbt-hist-abertura__grade { grid-template-columns: 1fr; gap: 34px; }
  .rbt-hist-abertura__foto { border-radius: 20px 20px 20px 64px; border-width: 2px; }
  .rbt-hist-abertura__medalha { width: 84px; height: 84px; left: 16px; top: 16px; }
  .rbt-hist-abertura__medalha strong { font-size: 32px; }
  .rbt-hist-numeros { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; padding-top: 30px; }
  .rbt-hist-numeros li { padding-left: 0; border-left: 0; }

  .rbt-hist-tempo { padding: 62px 0 72px; }
  .rbt-hist-cab { margin-bottom: 40px; }
  /* Entre 768 e 991px a régua ainda aparece, mas os três primeiros anos se
     aproximam: o texto encolhe para os rótulos não se tocarem. */
  .rbt-hist-regua { margin-bottom: 60px; }
  .rbt-hist-regua__ano { font-size: 15px; }
  .rbt-hist-regua__rotulo { font-size: 12px; }

  /* O trilho sai do centro e vai para a margem: em tela estreita o
     zigue-zague deixaria os cartões com metade da largura útil. */
  .rbt-hist-trilho::before { left: 29px; }
  .rbt-hist-marco,
  .rbt-hist-marco--esq,
  .rbt-hist-marco--dir { grid-template-columns: 58px 1fr; gap: 20px; align-items: start; margin-bottom: 34px; }
  .rbt-hist-marco__no { grid-column: 1; }
  .rbt-hist-marco--esq .rbt-hist-marco__cartao,
  .rbt-hist-marco--dir .rbt-hist-marco__cartao { grid-column: 2; }
  .rbt-hist-marco__no::before,
  .rbt-hist-marco--esq .rbt-hist-marco__no::before,
  .rbt-hist-marco--dir .rbt-hist-marco__no::before { left: 100%; right: auto; width: 20px; }
  .rbt-hist-aparte { padding-left: 78px; }
  .rbt-hist-aparte__caixa { max-width: none; }
  .rbt-hist-hoje { align-items: flex-start; text-align: left; }
  .rbt-hist-hoje .rbt-hist-marco__no--hoje { margin-left: 0; }

  .rbt-hist-mv { padding: 66px 0 72px; }
  .rbt-hist-mv__grade { grid-template-columns: 1fr; gap: 34px; }
  .rbt-hist-mv__intro { position: static; }
  .rbt-hist-valores-area { padding: 62px 0 72px; }
  .rbt-hist-valores { grid-template-columns: repeat(2, 1fr); }
  .rbt-hist-valor,
  .rbt-hist-valor:nth-child(4),
  .rbt-hist-valor:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 767px) {
  /* A régua depende de largura para ser lida em escala; no celular a própria
     lista de marcos já é a linha do tempo. */
  .rbt-hist-regua { display: none; }
}

@media (max-width: 575px) {
  .rbt-hist-abertura__acoes .rbt-hero__cta { width: 100%; justify-content: center; }
  .rbt-hist-marco__corpo { padding: 30px 22px 26px; }
  /* O recuo do aparte acompanha o dos cartões (nó + gap): sem ele a caixa
     passaria por cima do trilho e a linha do tempo ficaria interrompida. */
  .rbt-hist-aparte__caixa { padding: 30px 20px 26px; }
  .rbt-hist-aparte__caixa::before { font-size: 64px; left: 18px; }
  .rbt-hist-mv__cartao { padding: 32px 26px 34px; }
  .rbt-hist-valores { grid-template-columns: 1fr; }
  .rbt-hist-valor { padding: 30px 24px 28px; }
}

/* =========================================================================
   Proposta Pedagógica (página)
   O assunto é método — como se aprende aqui —, então a página é montada como
   um método: o princípio, as quatro bases, o que elas produzem no estudante e
   onde isso acontece. A bússola dos pilares cumpre o mesmo papel da régua do
   tempo na Nossa História: um resumo navegável antes do detalhe.

   Todas as classes usam o prefixo `rbt-prop-`. `.rbt-pilar`, `.rbt-pilares`,
   `.rbt-marco` e `.rbt-proposta-*` já pertencem à seção Proposta Pedagógica da
   HOME; como este arquivo é anexado no fim, repetir um nome quebraria aquele
   componente no site inteiro.
   ========================================================================= */

/* ---- Peças comuns: selo e cabeçalho de seção -------------------------- */

.rbt-prop-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-prop-selo i { font-size: 14px; }
.rbt-prop-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-prop-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-prop-cab { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.rbt-prop-cab h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
/* Grifo amarelo sob a palavra-chave — o mesmo recurso do hero e da história. */
.rbt-prop-cab h2 em,
.rbt-prop-abertura__titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-prop-cab > p { margin: 16px auto 0; max-width: 620px; color: var(--ranieri-cinza-60); font-size: 16.5px; }

/* =========================================================================
   Abertura
   ========================================================================= */

.rbt-prop-abertura {
  position: relative;
  overflow: hidden;
  padding: 84px 0 88px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 55%, #FFFFFF 100%);
}
/* Terceira bolha, fechando o triângulo. Nesta página as duas existentes estão
   ESPELHADAS em relação às outras aberturas (amarelo no alto à esquerda, azul
   embaixo à direita), então o vermelho entra embaixo à esquerda — e não à
   direita como em /nossa-historia. Mesmo peso das demais: alpha .07, o do azul,
   porque o vermelho institucional é escuro e na opacidade do amarelo mancha. */
.rbt-prop-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-prop-abertura .container { position: relative; z-index: 1; }

.rbt-prop-abertura__grade {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.rbt-prop-abertura__titulo {
  margin: 0 0 20px;
  font-size: clamp(29px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-prop-abertura__lide {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ranieri-cinza-80);
  max-width: 56ch;
}
.rbt-prop-abertura__texto {
  margin: 0 0 30px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ranieri-cinza-60);
  max-width: 56ch;
}
.rbt-prop-abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* A moldura repete o recorte do hero, espelhado: mesma família, outra página. */
.rbt-prop-abertura__foto {
  position: relative;
  margin: 0;
  border-radius: 26px 26px 90px 26px;
  overflow: hidden;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul)  348deg,
      var(--ranieri-azul)        360deg) border-box;
  box-shadow: 0 20px 40px rgba(16, 38, 56, .12), 0 40px 80px rgba(16, 38, 56, .10);
}
.active-dark-mode .rbt-prop-abertura__foto {
  background:
    linear-gradient(var(--color-darker), var(--color-darker)) padding-box,
    conic-gradient(from 0deg at 50% 50%,
      var(--ranieri-azul)        0deg,
      var(--ranieri-azul-claro)  60deg,
      var(--ranieri-azul)        130deg,
      var(--ranieri-azul-escuro) 176deg,
      var(--ranieri-vermelho)    225deg,
      var(--ranieri-azul)        268deg,
      var(--ranieri-amarelo)     315deg,
      var(--ranieri-azul-claro)  348deg,
      var(--ranieri-azul)        360deg) border-box;
}
.rbt-prop-abertura__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.rbt-prop-abertura__legenda {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(3, 32, 54, .72);
  color: #fff;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 500px;
  backdrop-filter: blur(4px);
}
.rbt-prop-abertura__legenda i { color: var(--ranieri-amarelo); font-size: 14px; }

/* ---- Contagem do que vem a seguir ------------------------------------- */

.rbt-prop-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  list-style: none;
  padding: 38px 0 0;
  margin: 58px 0 0;
  border-top: 1px solid var(--color-border);
}
.rbt-prop-numeros li {
  display: grid;
  grid-template-columns: 46px auto 1fr;
  align-items: center;
  gap: 16px;
  padding-left: 30px;
  border-left: 1px solid var(--color-border);
}
.rbt-prop-numeros li:first-child { padding-left: 0; border-left: 0; }
.rbt-prop-numeros i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 20px;
}
.rbt-prop-numeros strong {
  font-family: var(--font-secondary);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: var(--ranieri-azul);
  font-variant-numeric: tabular-nums;
}
.rbt-prop-numeros span {
  display: flex;
  flex-direction: column;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
  line-height: 1.3;
}
.rbt-prop-numeros small { font-family: var(--font-primary); font-weight: 400; font-size: 12.5px; color: var(--ranieri-cinza-60); margin-top: 3px; }

/* =========================================================================
   Pilares: bússola + zigue-zague
   ========================================================================= */

/* `scroll-margin` porque o cabeçalho é fixo e transparente: sem isso a âncora
   joga o título do pilar para trás do menu. */
.rbt-prop-pilares-area { padding: 90px 0 100px; background: #fff; scroll-margin-top: 100px; }

/* ---- Bússola ---------------------------------------------------------- */

.rbt-prop-bussola {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 86px;
}
.rbt-prop-bussola__item {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 26px 24px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-prop-bussola__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--ranieri-amarelo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.rbt-prop-bussola__item:hover,
.rbt-prop-bussola__item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-primary-alt);
  box-shadow: 0 18px 36px rgba(16, 38, 56, .10);
}
.rbt-prop-bussola__item:hover::before,
.rbt-prop-bussola__item:focus-visible::before { transform: scaleX(1); }

.rbt-prop-bussola__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 22px;
  transition: background .3s ease, color .3s ease;
}
.rbt-prop-bussola__item:hover .rbt-prop-bussola__icone { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }
.rbt-prop-bussola__num {
  position: absolute;
  right: 20px;
  top: 14px;
  font-family: var(--font-secondary);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
}
.rbt-prop-bussola__item strong {
  display: block;
  margin-top: 18px;
  font-family: var(--font-secondary);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ranieri-azul);
}
.rbt-prop-bussola__item small {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ranieri-cinza-60);
}

/* ---- Cada pilar ------------------------------------------------------- */

.rbt-prop-pilares { display: grid; gap: 90px; }

.rbt-prop-pilar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  scroll-margin-top: 120px;
}
.rbt-prop-pilar--inv .rbt-prop-pilar__foto { order: 2; }

/* A figura NÃO esconde o transbordo: a marca circular do pilar sai da foto e
   cobre a quina, que é o que costura a imagem ao texto. Quem arredonda é a
   própria imagem. */
.rbt-prop-pilar__foto { position: relative; margin: 0; }
.rbt-prop-pilar__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 26px 26px 90px 26px;
  box-shadow: 0 18px 38px rgba(16, 38, 56, .12);
}
.rbt-prop-pilar--inv .rbt-prop-pilar__foto img { border-radius: 26px 26px 26px 90px; }
.rbt-prop-pilar__marca {
  position: absolute;
  right: -22px;
  top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 30px;
  box-shadow: 0 12px 26px rgba(2, 30, 54, .22);
}
.rbt-prop-pilar--inv .rbt-prop-pilar__marca { right: auto; left: -22px; }

.rbt-prop-pilar__corpo { position: relative; }
/* Tudo que é texto sobe uma camada: o número é marca d'água, não conteúdo. */
.rbt-prop-pilar__corpo > *:not(.rbt-prop-pilar__num) { position: relative; z-index: 1; }
.rbt-prop-pilar__num {
  position: absolute;
  right: 0;
  top: -34px;
  z-index: 0;
  font-family: var(--font-secondary);
  font-size: clamp(76px, 8vw, 118px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.rbt-prop-pilar__rotulo {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
}
.rbt-prop-pilar__corpo h3 {
  margin: 12px 0 18px;
  font-size: clamp(24px, 2.8vw, 33px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ranieri-azul);
}
/* A frase-chave é editorial: resume o pilar antes do texto oficial, e o fio
   amarelo marca que ela não é parte do parágrafo. */
.rbt-prop-pilar__chave {
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 3px solid var(--ranieri-amarelo);
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ranieri-azul);
}
.rbt-prop-pilar__corpo p { font-size: 16px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-prop-pilar__corpo p:last-child { margin-bottom: 0; }

/* =========================================================================
   Competências
   ========================================================================= */

.rbt-prop-comp-area { padding: 90px 0 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--color-primary-light) 100%); }

.rbt-prop-comps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.rbt-prop-comp {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-prop-comp:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .12); }

.rbt-prop-comp__foto {
  position: relative;
  margin: 0;
  border-radius: 21px 21px 0 0;
  overflow: hidden;
}
/* `width: 100%` é obrigatório: com srcset + sizes a largura intrínseca da
   imagem passa a ser a do `sizes` e o card ficaria com faixa vazia. */
.rbt-prop-comp__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.rbt-prop-comp:hover .rbt-prop-comp__foto img { transform: scale(1.04); }

/* O ícone é ancorado no CORPO e sobe metade da altura: dentro da figura, que
   precisa de `overflow: hidden` por causa do zoom, ele saía cortado ao meio.
   O anel branco separa o amarelo da foto — a primeira delas tem parede
   amarela e o ícone sumia nela. */
.rbt-prop-comp__icone {
  position: absolute;
  left: 22px;
  top: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 22px;
  border: 4px solid #fff;
  box-shadow: 0 10px 22px rgba(2, 30, 54, .18);
}

.rbt-prop-comp__corpo { position: relative; padding: 44px 26px 28px; }
.rbt-prop-comp__num {
  position: absolute;
  right: 22px;
  top: 18px;
  font-family: var(--font-secondary);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
}
.rbt-prop-comp__corpo h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; color: var(--ranieri-azul); }
.rbt-prop-comp__corpo p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--ranieri-cinza-80); }

/* =========================================================================
   Etapas — o bloco escuro da página
   Mesmo gesto da Proposta Pedagógica na home (azul + arcos concêntricos + fio
   amarelo/vermelho): quem navega reconhece a mudança de assunto.
   ========================================================================= */

.rbt-prop-etapas-area {
  position: relative;
  overflow: hidden;
  padding: 100px 0 104px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-prop-etapas-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-prop-etapas__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%);
}
.rbt-prop-etapas__conteudo { position: relative; z-index: 1; }

.rbt-prop-etapas__intro { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.rbt-prop-etapas__intro h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
/* Sobre o azul o grifo translúcido esverdeia: o destaque é o amarelo sólido. */
.rbt-prop-etapas__intro h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-prop-etapas__intro p { margin: 16px auto 0; max-width: 600px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .8); }

.rbt-prop-etapas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.rbt-prop-etapa {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.rbt-prop-etapa:hover,
.rbt-prop-etapa:focus-visible { transform: translateY(-6px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }

.rbt-prop-etapa__foto { position: relative; display: block; }
.rbt-prop-etapa__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rbt-prop-etapa__ordem {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 800;
}

.rbt-prop-etapa__corpo { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.rbt-prop-etapa__corpo strong { font-family: var(--font-secondary); font-size: 17px; line-height: 1.25; color: #fff; }
/* .92 e não .72 (o valor de apoio usado no resto do site): medido sobre o
   cartão translúcido, .72 dá 3,7:1 e este texto tem 13px — abaixo do mínimo. */
.rbt-prop-etapa__corpo small { font-size: 13px; color: rgba(255, 255, 255, .92); }
/* O texto do link é branco, não amarelo: amarelo institucional sobre o azul
   fica em ~3:1, abaixo do mínimo para texto pequeno. O acento amarelo fica na
   seta, que é decorativa. */
.rbt-prop-etapa__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--font-secondary);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.rbt-prop-etapa__link i { color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-prop-etapa:hover .rbt-prop-etapa__link i { transform: translateX(4px); }

/* O CTA final não tem padding no topo (nas páginas de curso quem dá o respiro
   é a seção anterior). Depois do bloco azul, o cartão amarelo encostava no
   azul sem folga nenhuma. */
.rbt-prop-etapas-area + .rbt-curso__cta { padding-top: 76px; }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-prop-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-prop-pilares-area { background: var(--color-darkest); }
.active-dark-mode .rbt-prop-comp-area { background: linear-gradient(180deg, var(--color-darkest) 0%, var(--color-darker) 100%); }

.active-dark-mode .rbt-prop-abertura__titulo,
.active-dark-mode .rbt-prop-cab h2,
.active-dark-mode .rbt-prop-bussola__item strong,
.active-dark-mode .rbt-prop-pilar__corpo h3,
.active-dark-mode .rbt-prop-comp__corpo h3 { color: var(--color-white-dark); }

.active-dark-mode .rbt-prop-selo { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-prop-selo--claro,
.active-dark-mode .rbt-prop-numeros i,
.active-dark-mode .rbt-prop-bussola__icone { background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-prop-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-prop-bussola__item,
.active-dark-mode .rbt-prop-comp { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }

/* Números grandes: o azul institucional fica em 2,5:1 sobre o fundo escuro —
   abaixo do mínimo até para texto grande. O azul-claro de apoio passa (3,7:1)
   e mantém a cor da marca. Vale para a Nossa História pelo mesmo motivo. */
.active-dark-mode .rbt-prop-numeros strong,
.active-dark-mode .rbt-hist-numeros strong { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-prop-numeros,
.active-dark-mode .rbt-prop-numeros li { border-color: var(--dark-color-border-2); }

/* Os números-marca-d'água usam o azul mais claro do tema, que no escuro vira
   um bloco sólido por cima do fundo: aqui eles voltam a ser marca d'água. */
.active-dark-mode .rbt-prop-bussola__num,
.active-dark-mode .rbt-prop-pilar__num,
.active-dark-mode .rbt-prop-comp__num { color: rgba(255, 255, 255, .10); }

/* O azul institucional sobre o fundo escuro fica em ~2,4:1. O kicker vai para
   o amarelo e a frase-chave para o branco do tema — o fio amarelo à esquerda
   continua marcando que ela não é o parágrafo. */
.active-dark-mode .rbt-prop-pilar__rotulo { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-prop-pilar__chave { color: var(--color-white-dark); }
/* O anel do ícone imita o fundo do card: branco, no escuro, viraria um aro. */
.active-dark-mode .rbt-prop-comp__icone { border-color: var(--color-darker); }

/* O grifo translúcido só funciona sobre fundo claro: no escuro ele vira uma
   faixa oliva e ainda joga texto azul sobre amarelo. */
.active-dark-mode .rbt-prop-cab h2 em,
.active-dark-mode .rbt-prop-abertura__titulo em { color: var(--ranieri-amarelo); background: none; }

/* O halo amarelo do fundo da abertura suja o cinza-azulado do tema escuro. */
.active-dark-mode .rbt-prop-abertura__fundo {
  background:
    radial-gradient(circle at 6% 6%, rgba(250, 202, 0, .06) 0 20%, transparent 20.4%),
    radial-gradient(circle at 96% 84%, rgba(10, 133, 201, .12) 0 26%, transparent 26.4%);
}

/* Os cinzas do manual somem sobre fundo escuro; como são custom properties,
   remapear no container de cada bloco basta (mesma solução das demais páginas
   internas). O bloco azul das etapas não entra: lá a cor já é branca. */
.active-dark-mode .rbt-prop-abertura,
.active-dark-mode .rbt-prop-pilares-area,
.active-dark-mode .rbt-prop-comp-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Movimento
   Entrada por scroll nativo, protegida por @supports: onde o recurso não
   existe o conteúdo simplesmente aparece — nunca fica invisível esperando
   JavaScript. `rbtEntra` está definido na seção da Proposta Pedagógica (home).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-prop-numeros li,
    .rbt-prop-bussola__item,
    .rbt-prop-pilar__foto,
    .rbt-prop-pilar__corpo,
    .rbt-prop-comp,
    .rbt-prop-etapa {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

/* =========================================================================
   Telas menores
   ========================================================================= */

@media (max-width: 1199px) {
  .rbt-prop-bussola { grid-template-columns: repeat(2, 1fr); }
  .rbt-prop-pilar { gap: 40px; }
  .rbt-prop-etapas { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .rbt-prop-abertura { padding: 60px 0 68px; }
  .rbt-prop-abertura__grade { grid-template-columns: 1fr; gap: 34px; }
  .rbt-prop-abertura__foto { border-radius: 20px 20px 64px 20px; border-width: 2px; }
  .rbt-prop-numeros { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; padding-top: 30px; }
  .rbt-prop-numeros li { padding-left: 0; border-left: 0; }

  .rbt-prop-pilares-area { padding: 62px 0 72px; }
  .rbt-prop-cab { margin-bottom: 40px; }
  .rbt-prop-bussola { margin-bottom: 56px; }
  .rbt-prop-pilares { gap: 62px; }

  /* Em coluna única a foto vem sempre primeiro: o zigue-zague só existe
     enquanto há duas colunas para alternar. */
  .rbt-prop-pilar,
  .rbt-prop-pilar--inv { grid-template-columns: 1fr; gap: 26px; }
  .rbt-prop-pilar--inv .rbt-prop-pilar__foto { order: 0; }
  .rbt-prop-pilar__foto img,
  .rbt-prop-pilar--inv .rbt-prop-pilar__foto img { border-radius: 20px 20px 64px 20px; }
  .rbt-prop-pilar__marca,
  .rbt-prop-pilar--inv .rbt-prop-pilar__marca { right: 16px; left: auto; top: auto; bottom: -26px; width: 62px; height: 62px; font-size: 25px; }
  .rbt-prop-pilar__num { top: -26px; }

  .rbt-prop-comp-area { padding: 62px 0 72px; }
  .rbt-prop-comps { grid-template-columns: repeat(2, 1fr); }

  .rbt-prop-etapas-area { padding: 66px 0 72px; }
}

@media (max-width: 767px) {
  .rbt-prop-etapas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .rbt-prop-abertura__acoes .rbt-hero__cta { width: 100%; justify-content: center; }
  .rbt-prop-bussola { grid-template-columns: 1fr; }
  .rbt-prop-comps { grid-template-columns: 1fr; }
  .rbt-prop-etapas { grid-template-columns: 1fr; }
  /* Em uma coluna o cartão da etapa vira linha: foto pequena à esquerda, texto
     à direita — cinco fotos 4/3 empilhadas viravam uma rolagem só de imagem. */
  .rbt-prop-etapa { flex-direction: row; align-items: stretch; }
  .rbt-prop-etapa__foto { flex: 0 0 118px; }
  .rbt-prop-etapa__foto img { height: 100%; aspect-ratio: auto; }
  .rbt-prop-etapa__corpo { justify-content: center; padding: 16px 18px; }
  /* O número da marca d'água encosta no título quando a coluna estreita. */
  .rbt-prop-pilar__num { font-size: 64px; top: -20px; opacity: .8; }
}

/* =========================================================================
   Cursos — a trajetória das cinco etapas
   O assunto é uma sequência de 18 anos na mesma escola, então a página abre
   pela régua: as cinco etapas desenhadas na escala real de idade, cada faixa
   com a largura dos anos que dura. Depois as etapas na ordem em que são
   percorridas, ligadas por um conector — aqui não há zigue-zague, porque a
   leitura é uma linha só. O bloco escuro guarda o que NÃO muda entre elas.

   Prefixo `rbt-trilha-`: `.rbt-etapa*` era o desenho antigo desta página e
   `.rbt-curso__*` pertence às cinco páginas de etapa.
   ========================================================================= */

/* ---- Peças comuns ----------------------------------------------------- */

.rbt-trilha-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-trilha-selo i { font-size: 14px; }
.rbt-trilha-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-trilha-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* =========================================================================
   Abertura + régua das etapas
   ========================================================================= */

.rbt-trilha-abertura {
  position: relative;
  overflow: hidden;
  padding: 80px 0 92px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-trilha-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-trilha-abertura .container { position: relative; z-index: 1; }

/* Centralizada de propósito: as outras páginas internas abrem em díptico, e
   aqui o elemento gráfico é a régua, que ocupa a largura inteira. */
.rbt-trilha-abertura__texto { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.rbt-trilha-abertura__titulo {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.7vw, 46px);
  line-height: 1.13;
  letter-spacing: -.022em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-trilha-abertura__titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-trilha-abertura__lide { margin: 0; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

/* ---- Régua ------------------------------------------------------------ */

/* A régua respira um pouco menos que o container: encostada nas bordas ela
   parecia uma barra de progresso da página, não das etapas. */
.rbt-trilha-regua { padding: 0 8px; }

/* As colunas vêm do PHP (`3fr 3fr 5fr 4fr 3fr`): a largura de cada faixa é o
   número de anos que a etapa dura. Se fossem iguais, a régua mentiria. */
.rbt-trilha-regua__barra { display: grid; gap: 10px; }

.rbt-trilha-regua__faixa {
  position: relative;
  display: block;
  padding: 16px 14px 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.rbt-trilha-regua__faixa:hover,
.rbt-trilha-regua__faixa:focus-visible {
  background: #fff;
  border-color: var(--color-primary-alt);
  transform: translateY(-4px);
}

/* O traço é a etapa desenhada na escala: escurece do berçário ao ensino médio,
   o que dá a leitura de progressão sem precisar de legenda. */
.rbt-trilha-regua__traco {
  display: block;
  height: 12px;
  border-radius: 500px;
  margin-bottom: 16px;
  transition: height .3s ease;
}
.rbt-trilha-regua__faixa:hover .rbt-trilha-regua__traco { height: 18px; }
.rbt-trilha-regua__faixa--1 .rbt-trilha-regua__traco { background: rgba(5, 101, 164, .30); }
.rbt-trilha-regua__faixa--2 .rbt-trilha-regua__traco { background: rgba(5, 101, 164, .50); }
.rbt-trilha-regua__faixa--3 .rbt-trilha-regua__traco { background: rgba(5, 101, 164, .70); }
.rbt-trilha-regua__faixa--4 .rbt-trilha-regua__traco { background: rgba(5, 101, 164, .85); }
.rbt-trilha-regua__faixa--5 .rbt-trilha-regua__traco { background: var(--ranieri-azul); }

.rbt-trilha-regua__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
}
.rbt-trilha-regua__faixa strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.25;
  color: var(--ranieri-azul);
}
.rbt-trilha-regua__faixa small { display: block; margin-top: 5px; font-size: 13px; color: var(--ranieri-cinza-60); }

.rbt-trilha-regua__eixo {
  position: relative;
  height: 30px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.rbt-trilha-regua__eixo span {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ranieri-cinza-60);
  font-variant-numeric: tabular-nums;
}
/* A primeira e a última marca encostariam na borda do container. */
.rbt-trilha-regua__eixo span:first-of-type { transform: none; }
.rbt-trilha-regua__eixo span:nth-last-of-type(1) { transform: translateX(-100%); }
.rbt-trilha-regua__eixo em {
  position: absolute;
  right: 0;
  top: -22px;
  font-style: normal;
  font-size: 12px;
  color: var(--ranieri-cinza-40);
}

/* =========================================================================
   As cinco etapas
   ========================================================================= */

.rbt-trilha-etapas { padding: 86px 0 96px; background: #fff; }

.rbt-trilha-etapa {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 78px;
  scroll-margin-top: 120px;
}
.rbt-trilha-etapa:last-child { margin-bottom: 0; }

/* Conector: a linha que sai da foto e desce até a etapa seguinte — é o que
   diz que as cinco são uma trajetória, e não cinco produtos de catálogo. */
.rbt-trilha-etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 210px;
  top: 100%;
  width: 2px;
  height: 78px;
  background: linear-gradient(180deg, var(--color-primary-alt) 0 60%, transparent 60%);
  background-size: 2px 12px;
  background-repeat: repeat-y;
}

.rbt-trilha-etapa__foto {
  position: relative;
  display: block;
  border-radius: 24px 24px 24px 70px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(16, 38, 56, .12);
}
.rbt-trilha-etapa__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.rbt-trilha-etapa__foto:hover img { transform: scale(1.04); }
.rbt-trilha-etapa__ordem {
  position: absolute;
  left: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(2, 30, 54, .22);
}

.rbt-trilha-etapa__faixa {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 6px 14px;
}
.rbt-trilha-etapa__corpo h2 { margin: 16px 0 0; font-size: clamp(24px, 3vw, 33px); line-height: 1.18; letter-spacing: -.015em; }
.rbt-trilha-etapa__corpo h2 a { color: var(--ranieri-azul); transition: color .25s ease; }
.rbt-trilha-etapa__corpo h2 a:hover { color: var(--ranieri-azul-escuro); }
.rbt-trilha-etapa__corpo > p { margin-top: 12px; margin-bottom: 0; max-width: 620px; font-size: 16.5px; line-height: 1.72; color: var(--ranieri-cinza-80); }

.rbt-trilha-etapa__temas { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rbt-trilha-etapa__temas li {
  font-size: 13px;
  color: var(--ranieri-cinza-60);
  border: 1px solid var(--color-border);
  border-radius: 500px;
  padding: 6px 13px;
}

/* =========================================================================
   Serviços adicionais
   ========================================================================= */

.rbt-trilha-servicos-area { padding: 0 0 96px; background: #fff; }

.rbt-trilha-servicos {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: center;
  padding: 44px 48px;
  border-radius: 26px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
}
.rbt-trilha-servicos__texto h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; color: var(--ranieri-azul); }
.rbt-trilha-servicos__texto p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ranieri-cinza-80); }

.rbt-trilha-servicos__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
/* O <a> tem TRÊS filhos (ícone, nome, legenda) numa grade de duas colunas: sem
   posicionar, a legenda caía na coluna do ícone e quebrava palavra por palavra. */
.rbt-trilha-servicos__lista a {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid transparent;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.rbt-trilha-servicos__lista a:hover { border-color: var(--ranieri-azul); transform: translateX(4px); box-shadow: 0 12px 26px rgba(16, 38, 56, .08); }
.rbt-trilha-servicos__lista i {
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 20px;
}
.rbt-trilha-servicos__lista strong { grid-column: 2; align-self: end; font-family: var(--font-secondary); font-size: 16px; color: var(--ranieri-azul); }
.rbt-trilha-servicos__lista small { grid-column: 2; align-self: start; display: block; margin-top: 3px; font-size: 13px; color: var(--ranieri-cinza-60); }

/* =========================================================================
   O que não muda — o bloco escuro da página
   ========================================================================= */

.rbt-trilha-comum-area {
  position: relative;
  overflow: hidden;
  padding: 96px 0 100px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-trilha-comum-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-trilha-comum__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%);
}
.rbt-trilha-comum__conteudo { position: relative; z-index: 1; }

.rbt-trilha-comum__intro { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.rbt-trilha-comum__intro h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
/* Sobre o azul o grifo translúcido esverdeia: o destaque é o amarelo sólido. */
.rbt-trilha-comum__intro h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-trilha-comum__intro p { margin: 16px auto 0; max-width: 580px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .84); }

.rbt-trilha-comum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.rbt-trilha-const {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.rbt-trilha-const:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); }
.rbt-trilha-const__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 23px;
  margin-bottom: 20px;
}
.rbt-trilha-const h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; color: #fff; }
/* Branco a 92%: medido sobre o cartão translúcido, os 72% de apoio usados no
   resto do site ficam em 3,7:1 — abaixo do mínimo para texto de 15px. */
.rbt-trilha-const p { margin: 0; font-size: 15px; line-height: 1.72; color: rgba(255, 255, 255, .92); }
.rbt-trilha-const__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
/* O amarelo institucional sobre o azul fica em ~3:1: ele é o acento da seta,
   não a cor do texto. */
.rbt-trilha-const__link i { color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-trilha-const__link:hover { color: #fff; }
.rbt-trilha-const__link:hover i { transform: translateX(4px); }

/* O CTA final não tem padding no topo (nas páginas de curso quem dá o respiro
   é a seção anterior); depois do bloco azul ele encostaria. */
.rbt-trilha-comum-area + .rbt-curso__cta { padding-top: 76px; }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-trilha-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-trilha-etapas,
.active-dark-mode .rbt-trilha-servicos-area { background: var(--color-darkest); }

.active-dark-mode .rbt-trilha-abertura__titulo,
.active-dark-mode .rbt-trilha-regua__faixa strong,
.active-dark-mode .rbt-trilha-etapa__corpo h2 a,
.active-dark-mode .rbt-trilha-servicos__texto h2,
.active-dark-mode .rbt-trilha-servicos__lista strong { color: var(--color-white-dark); }

.active-dark-mode .rbt-trilha-selo { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-trilha-selo--claro,
.active-dark-mode .rbt-trilha-servicos__lista i { background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-trilha-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* No tema escuro a escala se inverte: começar claro e terminar em #044E7F
   faria a última etapa sumir no fundo. A progressão passa a ser de brilho. */
.active-dark-mode .rbt-trilha-regua__faixa--1 .rbt-trilha-regua__traco { background: rgba(255, 255, 255, .16); }
.active-dark-mode .rbt-trilha-regua__faixa--2 .rbt-trilha-regua__traco { background: #17638F; }
.active-dark-mode .rbt-trilha-regua__faixa--3 .rbt-trilha-regua__traco { background: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-trilha-regua__faixa--4 .rbt-trilha-regua__traco { background: #46AEE2; }
.active-dark-mode .rbt-trilha-regua__faixa--5 .rbt-trilha-regua__traco { background: #86CDF1; }

.active-dark-mode .rbt-trilha-regua__faixa:hover,
.active-dark-mode .rbt-trilha-servicos__lista a { background: rgba(255, 255, 255, .05); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-trilha-regua__eixo,
.active-dark-mode .rbt-trilha-etapa__temas li { border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-trilha-etapa:not(:last-child)::after { background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0 60%, transparent 60%); background-size: 2px 12px; background-repeat: repeat-y; }

/* A faixa etária é azul sobre azul-claríssimo; no escuro os dois somem. */
.active-dark-mode .rbt-trilha-etapa__faixa { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }

.active-dark-mode .rbt-trilha-servicos {
  background: linear-gradient(150deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: var(--dark-color-border-2);
}

.active-dark-mode .rbt-trilha-abertura__titulo em { color: var(--ranieri-amarelo); background: none; }

.active-dark-mode .rbt-trilha-abertura__fundo {
  background:
    radial-gradient(circle at 82% 0%, rgba(10, 133, 201, .16), transparent 46%),
    radial-gradient(circle at 10% 96%, rgba(250, 202, 0, .07), transparent 42%);
}

/* Os cinzas do manual somem sobre fundo escuro; como são custom properties,
   remapear no container de cada bloco basta. O bloco azul não entra: lá o
   texto já é branco. */
.active-dark-mode .rbt-trilha-abertura,
.active-dark-mode .rbt-trilha-etapas,
.active-dark-mode .rbt-trilha-servicos-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Movimento
   `rbtEntra` está definido na seção da Proposta Pedagógica (home).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-trilha-regua__faixa,
    .rbt-trilha-etapa__foto,
    .rbt-trilha-etapa__corpo,
    .rbt-trilha-servicos,
    .rbt-trilha-const {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

/* =========================================================================
   Telas menores
   ========================================================================= */

@media (max-width: 1199px) {
  .rbt-trilha-etapa { grid-template-columns: 340px 1fr; gap: 32px; }
  .rbt-trilha-etapa:not(:last-child)::after { left: 170px; }
  .rbt-trilha-comum { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .rbt-trilha-abertura { padding: 58px 0 66px; }
  .rbt-trilha-abertura__texto { margin-bottom: 40px; }

  /* Em tela estreita a escala deixaria o berçário com 150px e o texto ilegível:
     a régua vira lista, e o traço passa a ser a marca de cor de cada etapa. */
  .rbt-trilha-regua__barra { grid-template-columns: 1fr !important; gap: 12px; }
  .rbt-trilha-regua__faixa {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-color: var(--color-border);
  }
  .rbt-trilha-regua__traco { grid-column: 1 / -1; height: 8px; margin-bottom: 4px; }
  .rbt-trilha-regua__ordem { margin-bottom: 0; }
  .rbt-trilha-regua__faixa small { margin-top: 0; text-align: right; }
  .rbt-trilha-regua__eixo { display: none; }

  .rbt-trilha-etapas { padding: 58px 0 68px; }
  .rbt-trilha-etapa,
  .rbt-trilha-etapa:not(:last-child) { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .rbt-trilha-etapa:not(:last-child)::after { left: 50%; height: 56px; }
  .rbt-trilha-etapa__foto { border-radius: 20px 20px 20px 56px; }

  .rbt-trilha-servicos-area { padding-bottom: 68px; }
  .rbt-trilha-servicos { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }

  .rbt-trilha-comum-area { padding: 66px 0 72px; }
}

@media (max-width: 575px) {
  .rbt-trilha-comum { grid-template-columns: 1fr; }
  .rbt-trilha-const { padding: 26px 22px 24px; }
  /* Nome e faixa etária empilham: lado a lado, "Maternal ao Jardim II" quebrava
     em três linhas ao lado do nome da etapa. */
  .rbt-trilha-regua__faixa { grid-template-columns: 26px 1fr; }
  .rbt-trilha-regua__faixa small { grid-column: 2; text-align: left; margin-top: 3px; }
}

/* =========================================================================
   Páginas de etapa (as cinco: berçário → ensino médio)
   Uma etapa é uma decisão de família e a página é longa — até nove seções.
   Por isso ela abre situando (a trajetória inteira, com a atual acesa),
   depois entrega o objetivo (faixa, unidade, horário, as duas ações), depois
   diz o que tem na página (índice por âncora) e só então desenrola o texto,
   numerado. Fecha no azul, mostrando a etapa vizinha.

   Prefixo `rbt-etp-`. O que sobrou em `rbt-curso__*` é compartilhado com
   contato, serviços, política, raniconexão e ranicast.
   ========================================================================= */

/* ---- Peças comuns ----------------------------------------------------- */

.rbt-etp-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
}
.rbt-etp-selo i { font-size: 14px; }
.rbt-etp-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); margin-bottom: 20px; }

/* =========================================================================
   Abertura
   ========================================================================= */

.rbt-etp-abertura {
  position: relative;
  overflow: hidden;
  padding: 46px 0 80px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-etp-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-etp-abertura .container { position: relative; z-index: 1; }

/* ---- Trajetória: as cinco etapas, com a atual acesa -------------------- */

.rbt-etp-trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
}
.rbt-etp-trilha__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  border-radius: 500px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
  transition: border-color .25s ease, transform .25s ease, color .25s ease;
}
.rbt-etp-trilha__item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 12.5px;
  font-weight: 800;
}
a.rbt-etp-trilha__item:hover { border-color: var(--ranieri-azul); color: var(--ranieri-azul); transform: translateY(-2px); }
/* A etapa atual não é link: é o "você está aqui". */
.rbt-etp-trilha__item--atual {
  background: var(--ranieri-azul);
  border-color: var(--ranieri-azul);
  color: #fff;
}
.rbt-etp-trilha__item--atual b { background: var(--ranieri-amarelo); color: var(--ranieri-azul); }

/* ---- Ficha da etapa ---------------------------------------------------- */

.rbt-etp-abertura__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.rbt-etp-capa {
  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, .08);
}
.rbt-etp-capa img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* A posição na trajetória, repetida sobre a foto: quem chega por busca cai
   direto aqui, sem passar pela página de Cursos. */
.rbt-etp-capa__ordem {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(2, 30, 54, .26);
}
.rbt-etp-capa__ordem small { margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Em grid, uma coluna com texto longo não encolhe abaixo do conteúdo sem isto
   — a foto ao lado é que acabava espremida. */
.rbt-etp-resumo { min-width: 0; }

.rbt-etp-lide {
  margin: 20px 0 0;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 500;
}

.rbt-etp-ficha { list-style: none; padding: 26px 0 0; margin: 26px 0 0; display: grid; gap: 16px; border-top: 1px solid var(--color-border); }
.rbt-etp-ficha li { display: flex; align-items: center; gap: 14px; }
.rbt-etp-ficha i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 19px;
}
/* Só o pin fica vermelho; relógio e camadas seguem azuis. A regra é o que o
   ícone APONTA (um endereço), não onde ele está. */
.rbt-etp-ficha .feather-map-pin { color: var(--ranieri-vermelho); }
.rbt-etp-ficha span { display: flex; flex-direction: column; line-height: 1.35; font-size: 14px; color: var(--ranieri-cinza-60); }
.rbt-etp-ficha strong { font-family: var(--font-secondary); font-size: 14.5px; color: var(--ranieri-cinza-80); }

.rbt-etp-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* =========================================================================
   Conteúdo
   ========================================================================= */

.rbt-etp-conteudo { padding: 84px 0 96px; background: #fff; }

/* ---- Índice das seções ------------------------------------------------- */

.rbt-etp-indice {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: start;
  margin-bottom: 76px;
  padding: 26px 30px;
  border-radius: 22px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
}
.rbt-etp-indice__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
}
.rbt-etp-indice ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rbt-etp-indice a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid var(--color-primary-alt);
  font-size: 14px;
  color: var(--ranieri-cinza-80);
  transition: border-color .25s ease, transform .25s ease, color .25s ease;
}
.rbt-etp-indice a:hover { border-color: var(--ranieri-azul); color: var(--ranieri-azul); transform: translateY(-2px); }
.rbt-etp-indice a b {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 800;
  color: var(--ranieri-azul);
  font-variant-numeric: tabular-nums;
}

/* ---- Cada seção -------------------------------------------------------- */

/* `scroll-margin` porque o cabeçalho é fixo e transparente: sem isso a âncora
   do índice joga o título para trás do menu. */
.rbt-etp-secao { margin-bottom: 84px; scroll-margin-top: 110px; }
.rbt-etp-secao:last-child { margin-bottom: 0; }

.rbt-etp-secao__cab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-bottom: 26px; }
.rbt-etp-secao__num {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 800;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 7px 14px;
  font-variant-numeric: tabular-nums;
}
.rbt-etp-secao__cab h2 {
  position: relative;
  margin: 0;
  padding-bottom: 16px;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ranieri-azul);
}
/* O fio amarelo acompanha o título, não a coluna: em títulos de duas linhas
   ele precisa nascer embaixo do texto. */
.rbt-etp-secao__cab h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--ranieri-amarelo);
}

/* Coluna de leitura: texto corrido não passa de ~75 caracteres por linha. */
.rbt-etp-texto { max-width: 820px; }
.rbt-etp-texto p { font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-etp-texto p:last-child { margin-bottom: 0; }

.rbt-etp-textofoto { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.rbt-etp-textofoto__texto p { font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-etp-textofoto__texto p:last-child { margin-bottom: 0; }
.rbt-etp-textofoto__foto { margin: 0; }
.rbt-etp-textofoto__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px 22px 70px 22px;
  box-shadow: 0 16px 34px rgba(16, 38, 56, .12);
}

/* ---- Tour virtual ------------------------------------------------------ */

.rbt-etp-tour {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 84px;
  padding: 44px 48px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--ranieri-azul) 0%, var(--ranieri-azul) 100%);
  color: #fff;
  isolation: isolate;
}
/* Os arcos do símbolo, em pequena escala: o mesmo gesto dos blocos azuis. */
.rbt-etp-tour__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 96% 12%, rgba(255, 255, 255, .10) 0 22%, transparent 22.3%),
    radial-gradient(circle at 96% 12%, rgba(255, 255, 255, .06) 0 33%, transparent 33.3%);
}
.rbt-etp-tour__texto { max-width: 620px; }
.rbt-etp-tour h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: #fff; }
.rbt-etp-tour p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .9); }
.rbt-etp-tour p:last-child { margin-bottom: 0; }

.rbt-etp-tour__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  height: 62px;
  padding: 0 30px 0 12px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(2, 30, 54, .26);
  transition: background .3s ease, transform .3s ease;
}
.rbt-etp-tour__btn:hover { background: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-3px); }
.rbt-etp-tour__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ranieri-azul);
  color: var(--ranieri-amarelo);
}

/* Tour com vídeo próprio (hoje só o Berçário). A fachada ocupa a largura
   inteira do bloco azul — `flex: 0 0 100%` em vez de :has(), para o layout
   não depender de suporte a seletor. O iframe só nasce no clique. */
.rbt-etp-tour__player {
  position: relative;
  flex: 0 0 100%;
  margin-top: 4px;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ranieri-azul);
  cursor: pointer;
}
.rbt-etp-tour__player img,
.rbt-etp-tour__player iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* Véu: o botão precisa de contraste sobre qualquer frame do vídeo. */
.rbt-etp-tour__player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 30, 54, .12) 0%, rgba(2, 30, 54, .46) 100%);
}
.rbt-etp-tour__player .rbt-etp-tour__btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  font-size: 16px;
  cursor: pointer;
}
.rbt-etp-tour__player .rbt-etp-tour__btn:hover { transform: translate(-50%, -50%) scale(1.04); }
.rbt-etp-tour__player--ativo { cursor: default; }
.rbt-etp-tour__player--ativo::after { content: none; }
/* `p.` para vencer o `.rbt-etp-tour p` acima sem recorrer a !important. */
.rbt-etp-tour p.rbt-etp-tour__aviso {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .74);
}

/* ---- Componentes curriculares ------------------------------------------ */

.rbt-etp-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 28px; }
.rbt-etp-grupo {
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
}
.rbt-etp-grupo h3 { margin: 0 0 16px; font-size: 16px; color: var(--ranieri-azul); }
.rbt-etp-grupo ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rbt-etp-grupo li {
  font-family: var(--font-secondary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
  background: #fff;
  border: 1px solid var(--color-primary-alt);
  border-radius: 500px;
  padding: 7px 14px;
}

/* ---- Cards (ambientes, projetos, frentes do Educação 5.0) -------------- */

.rbt-etp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 24px; margin-top: 30px; }
.rbt-etp-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbt-etp-card:hover { border-color: var(--color-primary-alt); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(16, 38, 56, .11); }
.rbt-etp-card__foto { margin: 0; border-radius: 21px 21px 0 0; overflow: hidden; }
/* `width: 100%` é obrigatório: com srcset + sizes a largura intrínseca passa a
   ser a do `sizes` e o card ficaria com faixa vazia ao lado da foto. */
.rbt-etp-card__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.rbt-etp-card:hover .rbt-etp-card__foto img { transform: scale(1.04); }
.rbt-etp-card__corpo { position: relative; padding: 26px 26px 28px; }
.rbt-etp-card__num {
  position: absolute;
  right: 22px;
  top: 20px;
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
}
.rbt-etp-card h3 { margin: 0 0 10px; padding-right: 46px; font-size: 19px; line-height: 1.3; color: var(--ranieri-azul); }
.rbt-etp-card p { font-size: 15px; line-height: 1.72; color: var(--ranieri-cinza-80); }
.rbt-etp-card p:last-child { margin-bottom: 0; }
/* Sem foto o card fica leve demais ao lado dos outros: ganha fundo próprio. */
.rbt-etp-card--sem-foto { background: var(--color-primary-light); border-color: var(--color-primary-alt); }

/* Link para o vídeo do projeto no Instagram. Fica no fim do card, depois do
   último parágrafo — por isso a margem própria. */
.rbt-etp-card__insta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--ranieri-azul);
  transition: color .25s ease, gap .25s ease;
}
.rbt-etp-card__insta i { font-size: 17px; }
.rbt-etp-card__insta:hover { color: var(--ranieri-azul-escuro); gap: 13px; }

/* ---- Grade de fotos ---------------------------------------------------- */

.rbt-etp-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 30px; }
.rbt-etp-galeria figure { margin: 0; border-radius: 16px; overflow: hidden; }
.rbt-etp-galeria img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.rbt-etp-galeria figure:hover img { transform: scale(1.04); }

/* =========================================================================
   A trajetória continua — o bloco escuro da página
   ========================================================================= */

.rbt-etp-proxima-area {
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-etp-proxima-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-etp-proxima__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%);
}
.rbt-etp-proxima__conteudo { position: relative; z-index: 1; text-align: center; }

.rbt-etp-proxima__intro { max-width: 680px; margin: 0 auto 46px; }
.rbt-etp-proxima__intro h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.16;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
/* Sobre o azul o grifo translúcido esverdeia: o destaque é o amarelo sólido. */
.rbt-etp-proxima__intro h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-etp-proxima__intro p { margin: 16px auto 0; max-width: 560px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }

.rbt-etp-vizinhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); gap: 20px; justify-content: center; }
.rbt-etp-vizinha {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  text-align: left;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.rbt-etp-vizinha:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); }
.rbt-etp-vizinha__foto { display: block; border-radius: 16px; overflow: hidden; }
.rbt-etp-vizinha__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rbt-etp-vizinha__corpo { display: flex; flex-direction: column; gap: 3px; }
.rbt-etp-vizinha__corpo small { font-family: var(--font-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ranieri-amarelo); }
.rbt-etp-vizinha__corpo strong { font-family: var(--font-secondary); font-size: 17px; line-height: 1.25; color: #fff; }
/* Branco a 92%: medido sobre o cartão translúcido, os 72% de apoio usados no
   resto do site ficam em 3,7:1 — abaixo do mínimo para texto pequeno. */
.rbt-etp-vizinha__faixa { font-size: 13px; color: rgba(255, 255, 255, .92); }
.rbt-etp-vizinha > i { color: var(--ranieri-amarelo); font-size: 18px; transition: transform .3s ease; }
.rbt-etp-vizinha--proxima:hover > i { transform: translateX(4px); }
.rbt-etp-vizinha--anterior:hover > i { transform: translateX(-4px); }

.rbt-etp-proxima__todas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(255, 255, 255, .4);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transition: border-color .25s ease;
}
.rbt-etp-proxima__todas:hover { color: #fff; border-color: var(--ranieri-amarelo); }
.rbt-etp-proxima__todas i { color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-etp-proxima__todas:hover i { transform: translateX(4px); }

/* O CTA final não tem padding no topo (quem dá o respiro é a seção anterior);
   depois do bloco azul, o cartão amarelo encostaria. */
.rbt-etp-proxima-area + .rbt-curso__cta { padding-top: 76px; }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-etp-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-etp-conteudo { background: var(--color-darkest); }

.active-dark-mode .rbt-etp-lide,
.active-dark-mode .rbt-etp-secao__cab h2,
.active-dark-mode .rbt-etp-card h3 { color: var(--color-white-dark); }

.active-dark-mode .rbt-etp-selo { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); }
.active-dark-mode .rbt-etp-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-etp-trilha,
.active-dark-mode .rbt-etp-ficha { border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-etp-trilha__item,
.active-dark-mode .rbt-etp-indice,
.active-dark-mode .rbt-etp-indice a,
.active-dark-mode .rbt-etp-grupo,
.active-dark-mode .rbt-etp-grupo li,
.active-dark-mode .rbt-etp-card { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-etp-card--sem-foto { background: rgba(255, 255, 255, .07); }
.active-dark-mode .rbt-etp-trilha__item--atual { background: var(--ranieri-azul); border-color: var(--ranieri-azul-claro); color: #fff; }

.active-dark-mode .rbt-etp-ficha i,
.active-dark-mode .rbt-etp-trilha__item b,
.active-dark-mode .rbt-etp-secao__num { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-etp-trilha__item--atual b { background: var(--ranieri-amarelo); color: var(--ranieri-azul-escuro); }
.active-dark-mode .rbt-etp-indice__rotulo,
.active-dark-mode .rbt-etp-indice a b,
.active-dark-mode .rbt-etp-grupo h3 { color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-etp-card__num { color: rgba(255, 255, 255, .10); }
/* No escuro o azul institucional em texto fica ~2,4:1 — vai para o azul claro. */
.active-dark-mode .rbt-etp-card__insta { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-etp-card__insta:hover { color: #fff; }

.active-dark-mode .rbt-etp-abertura__fundo {
  background:
    radial-gradient(circle at 92% 6%, rgba(250, 202, 0, .07), transparent 42%),
    radial-gradient(circle at 4% 92%, rgba(10, 133, 201, .16), transparent 46%);
}

/* Os cinzas do manual somem sobre fundo escuro; como são custom properties,
   remapear no container de cada bloco basta. */
.active-dark-mode .rbt-etp-abertura,
.active-dark-mode .rbt-etp-conteudo {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Movimento
   `rbtEntra` está definido na seção da Proposta Pedagógica (home).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-etp-secao__cab,
    .rbt-etp-texto,
    .rbt-etp-textofoto,
    .rbt-etp-grupo,
    .rbt-etp-card,
    .rbt-etp-galeria figure,
    .rbt-etp-tour,
    .rbt-etp-vizinha {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

/* =========================================================================
   Telas menores
   ========================================================================= */

@media (max-width: 1199px) {
  .rbt-etp-abertura__grade { gap: 36px; }
  .rbt-etp-indice { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 991px) {
  .rbt-etp-abertura { padding: 34px 0 58px; }
  .rbt-etp-trilha { margin-bottom: 32px; padding-bottom: 20px; }
  /* Cinco pílulas em duas linhas empurram a foto para baixo da dobra: no
     celular a trajetória rola na horizontal, como uma fita. */
  .rbt-etp-trilha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rbt-etp-trilha::-webkit-scrollbar { display: none; }
  .rbt-etp-trilha__item { flex: 0 0 auto; }

  .rbt-etp-abertura__grade { grid-template-columns: 1fr; gap: 30px; }
  .rbt-etp-capa { border-radius: 20px 20px 20px 64px; }
  .rbt-etp-capa__ordem { width: 64px; height: 64px; font-size: 25px; }

  .rbt-etp-conteudo { padding: 58px 0 70px; }
  .rbt-etp-indice { margin-bottom: 52px; padding: 22px 22px; }
  .rbt-etp-secao { margin-bottom: 58px; }
  .rbt-etp-textofoto { grid-template-columns: 1fr; gap: 26px; }
  .rbt-etp-textofoto__foto img { border-radius: 20px 20px 56px 20px; }
  .rbt-etp-tour { margin-bottom: 58px; padding: 32px 28px; }

  .rbt-etp-proxima-area { padding: 62px 0 68px; }
  .rbt-etp-vizinhas { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .rbt-etp-secao__cab { grid-template-columns: 1fr; gap: 12px; }
  .rbt-etp-secao__num { justify-self: start; }
  .rbt-etp-acoes .rbt-hero__cta { width: 100%; justify-content: center; }
  .rbt-etp-galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rbt-etp-tour__btn { width: 100%; justify-content: center; }
  .rbt-etp-vizinha { grid-template-columns: 84px 1fr auto; padding: 12px 16px 12px 12px; }
}

/* =========================================================================
   Serviços Adicionais
   Os três serviços respondem à mesma pergunta prática — quanto tempo a
   criança fica na escola e o que acontece nesse tempo. A página abre com os
   três lado a lado, detalha um a um e fecha no azul dizendo quem pode
   contratar cada um. Prefixo `rbt-svc-`.
   ========================================================================= */

.rbt-svc-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-svc-selo i { font-size: 14px; }
.rbt-svc-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* ---- Abertura ---------------------------------------------------------- */

.rbt-svc-abertura {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-svc-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-svc-abertura .container { position: relative; z-index: 1; }

/* A caixa é mais larga que os 720px de leitura porque o título desta abertura
   é longo (uma frase inteira) e a 44px/720px ele quebrava em quatro linhas. O
   lide volta para 720px logo abaixo — linha longa demais atrapalha a leitura
   corrida, que não é problema do título. */
.rbt-svc-abertura__texto { max-width: 1120px; margin: 0 auto 48px; text-align: center; }
.rbt-svc-abertura__titulo {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-svc-abertura__titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-svc-abertura__lide { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

/* ---- Índice: os três serviços ------------------------------------------ */

.rbt-svc-indice { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rbt-svc-indice a {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  padding: 28px 28px 30px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-svc-indice a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--ranieri-amarelo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.rbt-svc-indice a:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .1); }
.rbt-svc-indice a:hover::before { transform: scaleX(1); }

.rbt-svc-indice__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 22px;
  transition: background .3s ease, color .3s ease;
}
.rbt-svc-indice a:hover .rbt-svc-indice__icone { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }
.rbt-svc-indice__num {
  position: absolute;
  right: 22px;
  top: 16px;
  font-family: var(--font-secondary);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  font-variant-numeric: tabular-nums;
}
.rbt-svc-indice strong { display: block; margin-top: 18px; font-family: var(--font-secondary); font-size: 19px; color: var(--ranieri-azul); }
.rbt-svc-indice__quem {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 5px 12px;
}
.rbt-svc-indice small { display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ranieri-cinza-60); }

/* =========================================================================
   Os três blocos
   ========================================================================= */

.rbt-svc-conteudo { padding: 88px 0 96px; background: #fff; }

.rbt-svc-bloco { margin-bottom: 96px; scroll-margin-top: 110px; }
.rbt-svc-bloco--ultimo,
.rbt-svc-bloco:last-child { margin-bottom: 0; }

.rbt-svc-cab { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 20px; margin-bottom: 30px; }
.rbt-svc-cab__num {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 800;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 15px;
  font-variant-numeric: tabular-nums;
}
.rbt-svc-cab h2 {
  position: relative;
  margin: 0;
  padding-bottom: 16px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ranieri-azul);
}
.rbt-svc-cab h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--ranieri-amarelo);
}
.rbt-svc-cab__quem { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-family: var(--font-secondary); font-size: 14.5px; font-weight: 600; color: var(--ranieri-cinza-60); }
.rbt-svc-cab__quem i { color: var(--ranieri-azul); font-size: 17px; }

.rbt-svc-texto { max-width: 820px; font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-svc-sub { margin: 48px 0 14px; font-size: 21px; color: var(--ranieri-azul); }

.rbt-svc-textofoto { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.rbt-svc-textofoto__texto p { font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-svc-textofoto__texto p:last-child { margin-bottom: 0; }
.rbt-svc-textofoto__foto { margin: 0; }
.rbt-svc-textofoto__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px 22px 70px 22px;
  box-shadow: 0 16px 34px rgba(16, 38, 56, .12);
}

/* ---- Cartão do sistema AMCO -------------------------------------------- */

.rbt-svc-amco {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 44px;
  padding: 32px 36px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
}
.rbt-svc-amco__marca { background: #fff; border-radius: 18px; padding: 20px; text-align: center; }
.rbt-svc-amco__marca img { max-width: 100%; height: auto; }
.rbt-svc-amco__corpo h3 { margin: 0 0 12px; font-size: 21px; color: var(--ranieri-azul); }
.rbt-svc-amco__corpo p { font-size: 15.5px; line-height: 1.72; color: var(--ranieri-cinza-80); }
.rbt-svc-amco__corpo p:last-child { margin-bottom: 0; }

/* ---- Escada de Cambridge ----------------------------------------------- */

/* As quatro provas na ordem em que o estudante as encontra: a barra cresce a
   cada degrau, então a progressão se lê antes do texto. */
.rbt-svc-provas {
  list-style: none;
  padding: 0;
  margin: 28px 0 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}
.rbt-svc-prova {
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: border-color .3s ease, transform .3s ease;
}
.rbt-svc-prova:hover { border-color: var(--color-primary-alt); transform: translateY(-4px); }
.rbt-svc-prova__barra {
  display: block;
  height: calc(6px + var(--degrau) * 7px);
  border-radius: 500px;
  margin-bottom: 16px;
  background: var(--ranieri-azul);
  opacity: calc(.4 + var(--degrau) * .15);
}
.rbt-svc-prova__sigla { display: block; font-family: var(--font-secondary); font-size: 24px; font-weight: 800; color: var(--ranieri-azul); }
.rbt-svc-prova strong { display: block; margin-top: 4px; font-family: var(--font-secondary); font-size: 15.5px; color: var(--ranieri-azul); }
.rbt-svc-prova small { display: block; margin-top: 4px; font-size: 13px; color: var(--ranieri-cinza-60); }
.rbt-svc-prova__nivel {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: var(--ranieri-cinza-80);
  background: var(--ranieri-amarelo);
  border-radius: 500px;
  padding: 4px 11px;
}

/* ---- Atividades do contraturno ----------------------------------------- */

.rbt-svc-atividades {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.rbt-svc-atividades li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
  font-family: var(--font-secondary);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
}
.rbt-svc-atividades i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-size: 13px;
}

/* ---- Mais Tempo: o dia inteiro ----------------------------------------- */

.rbt-svc-maistempo {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
  padding: 36px 40px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
}
.rbt-svc-maistempo p { margin: 0; font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-svc-maistempo__relogio { display: flex; align-items: center; gap: 10px; }
.rbt-svc-maistempo__relogio > span:not(.rbt-svc-maistempo__fio) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-primary-alt);
}
.rbt-svc-maistempo__relogio b { font-family: var(--font-secondary); font-size: 19px; color: var(--ranieri-azul); font-variant-numeric: tabular-nums; }
.rbt-svc-maistempo__relogio small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ranieri-cinza-60); }
.rbt-svc-maistempo__fio { flex: 1 1 auto; height: 2px; background: var(--color-primary-alt); }

/* =========================================================================
   Quem pode contratar — o bloco escuro da página
   ========================================================================= */

.rbt-svc-quem-area {
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-svc-quem-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-svc-quem__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%);
}
.rbt-svc-quem__conteudo { position: relative; z-index: 1; text-align: center; }

.rbt-svc-quem__intro { max-width: 660px; margin: 0 auto 46px; }
.rbt-svc-quem__intro h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.16;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
.rbt-svc-quem__intro h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-svc-quem__intro p { margin: 16px auto 0; max-width: 540px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }

.rbt-svc-quem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.rbt-svc-quem__cartao {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.rbt-svc-quem__cartao:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); }
.rbt-svc-quem__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 22px;
  margin-bottom: 18px;
}
.rbt-svc-quem__cartao strong { font-family: var(--font-secondary); font-size: 19px; color: #fff; }
.rbt-svc-quem__faixa {
  display: inline-block;
  align-self: flex-start;
  margin-top: 10px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ranieri-azul);
  background: var(--ranieri-amarelo);
  border-radius: 500px;
  padding: 5px 12px;
}
/* Branco a 92%: sobre o cartão translúcido, os 72% de apoio do resto do site
   ficam em 3,7:1 — abaixo do mínimo para texto pequeno. */
.rbt-svc-quem__cartao small { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.rbt-svc-quem__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
/* O amarelo institucional sobre o azul fica em ~3:1: fica só na seta. */
.rbt-svc-quem__link i { color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-svc-quem__cartao:hover .rbt-svc-quem__link i { transform: translateY(3px); }

.rbt-svc-quem__todas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(255, 255, 255, .4);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transition: border-color .25s ease;
}
.rbt-svc-quem__todas:hover { color: #fff; border-color: var(--ranieri-amarelo); }
.rbt-svc-quem__todas i { color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-svc-quem__todas:hover i { transform: translateX(4px); }

.rbt-svc-quem-area + .rbt-curso__cta { padding-top: 76px; }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-svc-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-svc-conteudo { background: var(--color-darkest); }

.active-dark-mode .rbt-svc-abertura__titulo,
.active-dark-mode .rbt-svc-indice strong,
.active-dark-mode .rbt-svc-cab h2,
.active-dark-mode .rbt-svc-sub,
.active-dark-mode .rbt-svc-amco__corpo h3,
.active-dark-mode .rbt-svc-prova strong { color: var(--color-white-dark); }
.active-dark-mode .rbt-svc-abertura__titulo em { color: var(--ranieri-amarelo); background: none; }

.active-dark-mode .rbt-svc-selo { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); }
.active-dark-mode .rbt-svc-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-svc-indice a,
.active-dark-mode .rbt-svc-prova,
.active-dark-mode .rbt-svc-atividades li,
.active-dark-mode .rbt-svc-amco,
.active-dark-mode .rbt-svc-maistempo { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-svc-maistempo__relogio > span:not(.rbt-svc-maistempo__fio) { background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-svc-maistempo__fio { background: var(--dark-color-border-2); }
.active-dark-mode .rbt-svc-amco__marca { background: #fff; }

.active-dark-mode .rbt-svc-indice__icone,
.active-dark-mode .rbt-svc-cab__num,
.active-dark-mode .rbt-svc-indice__quem { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-svc-indice__num { color: rgba(255, 255, 255, .10); }
.active-dark-mode .rbt-svc-cab__quem i,
.active-dark-mode .rbt-svc-prova__sigla,
.active-dark-mode .rbt-svc-maistempo__relogio b { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-svc-prova__barra { background: var(--ranieri-azul-claro); }

.active-dark-mode .rbt-svc-abertura__fundo {
  background:
    radial-gradient(circle at 88% 4%, rgba(250, 202, 0, .07), transparent 42%),
    radial-gradient(circle at 6% 94%, rgba(10, 133, 201, .16), transparent 46%);
}

.active-dark-mode .rbt-svc-abertura,
.active-dark-mode .rbt-svc-conteudo {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Movimento e telas menores
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-svc-indice li,
    .rbt-svc-cab,
    .rbt-svc-textofoto,
    .rbt-svc-amco,
    .rbt-svc-prova,
    .rbt-svc-maistempo,
    .rbt-svc-quem__cartao {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 1199px) {
  .rbt-svc-provas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .rbt-svc-abertura { padding: 56px 0 62px; }
  .rbt-svc-indice { grid-template-columns: 1fr; }
  .rbt-svc-indice__num { font-size: 38px; }

  .rbt-svc-conteudo { padding: 60px 0 70px; }
  .rbt-svc-bloco { margin-bottom: 68px; }
  .rbt-svc-textofoto { grid-template-columns: 1fr; gap: 26px; }
  .rbt-svc-textofoto__foto img { border-radius: 20px 20px 56px 20px; }
  .rbt-svc-amco { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .rbt-svc-amco__marca { max-width: 220px; }
  .rbt-svc-maistempo { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }

  .rbt-svc-quem-area { padding: 62px 0 68px; }
  .rbt-svc-quem { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .rbt-svc-cab { grid-template-columns: 1fr; gap: 12px; }
  .rbt-svc-cab__num { justify-self: start; }
  .rbt-svc-provas { grid-template-columns: 1fr; }
  /* Em uma coluna a escada não se lê como escada: a barra vira uma marca de
     nível à esquerda do cartão. */
  .rbt-svc-prova__barra { height: 6px; width: calc(30% + var(--degrau) * 14%); }
  .rbt-svc-maistempo__relogio { flex-wrap: wrap; justify-content: center; }
  .rbt-svc-maistempo__fio { display: none; }
}

/* =========================================================================
   Eu sou Ranieri — a área das famílias
   É a única página que não vende nada: quem chega já é da casa e quer
   resolver algo em um clique. Os quatro sistemas vêm primeiro, grandes; o
   resto é apoio. Prefixo `rbt-sou-`.
   ========================================================================= */

.rbt-sou-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-sou-selo i { font-size: 14px; }
.rbt-sou-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-sou-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* ---- Abertura ---------------------------------------------------------- */

.rbt-sou-abertura {
  position: relative;
  overflow: hidden;
  padding: 76px 0 88px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-sou-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-sou-abertura .container { position: relative; z-index: 1; }

.rbt-sou-abertura__texto { max-width: 700px; margin: 0 auto 46px; text-align: center; }
.rbt-sou-abertura__titulo,
.rbt-sou-cab h2,
.rbt-sou-fala__texto h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-sou-abertura__titulo em,
.rbt-sou-cab h2 em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-sou-abertura__lide { margin: 18px 0 0; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

/* ---- Os quatro sistemas ------------------------------------------------ */

.rbt-sou-atalhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rbt-sou-atalho {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 28px 28px 26px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-sou-atalho::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ranieri-amarelo);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s ease;
}
.rbt-sou-atalho:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .1); }
.rbt-sou-atalho:hover::before { transform: scaleY(1); }

.rbt-sou-atalho__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 25px;
  transition: background .3s ease, color .3s ease;
}
.rbt-sou-atalho:hover .rbt-sou-atalho__icone { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-sou-atalho__corpo { display: flex; flex-direction: column; }
.rbt-sou-atalho__marca {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-cinza-60);
}
.rbt-sou-atalho__corpo strong { margin-top: 4px; font-family: var(--font-secondary); font-size: 20px; color: var(--ranieri-azul); }
.rbt-sou-atalho__texto { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ranieri-cinza-80); }
.rbt-sou-atalho__abrir {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--ranieri-azul);
}
.rbt-sou-atalho__abrir i { transition: transform .3s ease; }
.rbt-sou-atalho:hover .rbt-sou-atalho__abrir i { transform: translate(3px, -3px); }

/* ---- Apoio ------------------------------------------------------------- */

.rbt-sou-extras-area { padding: 86px 0 96px; background: #fff; }
.rbt-sou-cab { max-width: 640px; margin: 0 auto 44px; text-align: center; }

.rbt-sou-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rbt-sou-extra {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rbt-sou-extra:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16, 38, 56, .09); }
.rbt-sou-extra__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #fff;
  color: var(--ranieri-azul);
  font-size: 22px;
  margin-bottom: 18px;
}
.rbt-sou-extra h3 { margin: 0 0 10px; font-size: 19px; color: var(--ranieri-azul); }
.rbt-sou-extra p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }
.rbt-sou-extra .rbt-etapa__link { margin-top: auto; padding-top: 18px; }

/* =========================================================================
   Falar com a escola — o bloco escuro da página
   ========================================================================= */

.rbt-sou-fala-area {
  position: relative;
  overflow: hidden;
  padding: 88px 0 92px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-sou-fala-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-sou-fala__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%);
}
.rbt-sou-fala__conteudo { position: relative; z-index: 1; }

.rbt-sou-fala { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.rbt-sou-fala__texto h2 { color: #fff; }
.rbt-sou-fala__texto h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-sou-fala__texto p { margin: 18px 0 0; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }

.rbt-sou-fala__acoes { display: grid; gap: 12px; }
.rbt-sou-fala__wpp,
.rbt-sou-fala__email,
.rbt-sou-fala__mapa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 24px;
  border-radius: 500px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.rbt-sou-fala__wpp { background: var(--ranieri-amarelo); color: var(--ranieri-azul); }
.rbt-sou-fala__wpp:hover { background: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-3px); }
.rbt-sou-fala__email,
.rbt-sou-fala__mapa {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 15px;
}
.rbt-sou-fala__email:hover,
.rbt-sou-fala__mapa:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: #fff; transform: translateY(-3px); }
.rbt-sou-fala__email i { color: var(--ranieri-amarelo); font-size: 18px; }
.rbt-sou-fala__mapa i { margin-left: auto; color: var(--ranieri-amarelo); transition: transform .3s ease; }
.rbt-sou-fala__mapa:hover i { transform: translateX(4px); }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-sou-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-sou-extras-area { background: var(--color-darkest); }

.active-dark-mode .rbt-sou-abertura__titulo,
.active-dark-mode .rbt-sou-cab h2,
.active-dark-mode .rbt-sou-atalho__corpo strong,
.active-dark-mode .rbt-sou-extra h3 { color: var(--color-white-dark); }
.active-dark-mode .rbt-sou-abertura__titulo em,
.active-dark-mode .rbt-sou-cab h2 em { color: var(--ranieri-amarelo); background: none; }

.active-dark-mode .rbt-sou-selo,
.active-dark-mode .rbt-sou-selo--claro { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-sou-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-sou-atalho,
.active-dark-mode .rbt-sou-extra { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-sou-atalho__icone,
.active-dark-mode .rbt-sou-extra__icone { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-sou-atalho__abrir { color: var(--ranieri-azul-claro); }

.active-dark-mode .rbt-sou-abertura__fundo {
  background:
    radial-gradient(circle at 10% 4%, rgba(10, 133, 201, .16), transparent 44%),
    radial-gradient(circle at 92% 92%, rgba(250, 202, 0, .07), transparent 42%);
}

.active-dark-mode .rbt-sou-abertura,
.active-dark-mode .rbt-sou-extras-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
}

/* =========================================================================
   Movimento e telas menores
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-sou-atalho,
    .rbt-sou-extra,
    .rbt-sou-fala__texto,
    .rbt-sou-fala__acoes {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 991px) {
  .rbt-sou-abertura { padding: 56px 0 66px; }
  .rbt-sou-atalhos { grid-template-columns: 1fr; }
  .rbt-sou-extras-area { padding: 60px 0 70px; }
  .rbt-sou-extras { grid-template-columns: 1fr; }
  .rbt-sou-fala-area { padding: 62px 0 68px; }
  .rbt-sou-fala { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 575px) {
  .rbt-sou-atalho { grid-template-columns: 52px 1fr; gap: 16px; padding: 24px 22px; }
  .rbt-sou-atalho__icone { width: 52px; height: 52px; font-size: 22px; }
  /* Em coluna estreita o e-mail estoura a pílula. */
  .rbt-sou-fala__email { font-size: 13.5px; word-break: break-all; }
}

/* =========================================================================
   Contato
   Quem abre "Contato" quer falar agora ou quer chegar. Os três canais vêm
   primeiro, com o WhatsApp em destaque; depois os quatro endereços,
   agrupados pela rua em que ficam — é assim que se anda de um para o outro.
   Prefixo `rbt-cont-`.
   ========================================================================= */

.rbt-cont-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-cont-selo i { font-size: 14px; }
.rbt-cont-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-cont-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* ---- Abertura + canais ------------------------------------------------- */

.rbt-cont-abertura {
  position: relative;
  overflow: hidden;
  padding: 76px 0 88px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-cont-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-cont-abertura .container { position: relative; z-index: 1; }

.rbt-cont-abertura__texto { max-width: 700px; margin: 0 auto 46px; text-align: center; }
.rbt-cont-abertura__titulo,
.rbt-cont-cab h2,
.rbt-cont-casa__texto h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-cont-abertura__titulo em,
.rbt-cont-cab h2 em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-cont-abertura__lide { margin: 18px 0 0; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

.rbt-cont-canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.rbt-cont-canal {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-cont-canal:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .1); }
/* O WhatsApp é o canal que a escola de fato usa: ganha o fundo amarelo. */
.rbt-cont-canal--destaque { background: var(--ranieri-amarelo); border-color: var(--ranieri-amarelo); }

.rbt-cont-canal__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 23px;
}
.rbt-cont-canal--destaque .rbt-cont-canal__icone { background: var(--ranieri-azul); color: var(--ranieri-amarelo); }
.rbt-cont-canal--destaque .rbt-icone-wpp { width: 1.15em; height: 1.15em; }

.rbt-cont-canal__rotulo {
  margin-top: 18px;
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-cinza-60);
}
.rbt-cont-canal strong { margin-top: 4px; font-family: var(--font-secondary); font-size: 21px; color: var(--ranieri-azul); }
.rbt-cont-canal__dado { margin-top: 6px; font-family: var(--font-secondary); font-size: 16px; color: var(--ranieri-azul); }
.rbt-cont-canal small { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ranieri-cinza-60); }
.rbt-cont-canal__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--ranieri-azul);
}
.rbt-cont-canal__acao i { transition: transform .3s ease; }
.rbt-cont-canal:hover .rbt-cont-canal__acao i { transform: translateX(4px); }
/* No cartão amarelo o azul institucional é o que tem contraste. */
.rbt-cont-canal--destaque .rbt-cont-canal__rotulo,
.rbt-cont-canal--destaque small { color: #5A4700; }
.rbt-cont-canal--destaque .rbt-cont-canal__dado,
.rbt-cont-canal--destaque .rbt-cont-canal__acao { color: var(--ranieri-azul); }

/* ---- Endereços por rua -------------------------------------------------- */

.rbt-cont-mapa-area { padding: 86px 0 96px; background: #fff; }
.rbt-cont-cab { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.rbt-cont-cab > p { margin: 16px auto 0; max-width: 620px; font-size: 16.5px; color: var(--ranieri-cinza-60); }

.rbt-cont-ruas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.rbt-cont-rua {
  padding: 30px 30px 32px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
}
.rbt-cont-rua__nome {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-primary-alt);
  font-size: 17px;
  color: var(--ranieri-azul);
}
.rbt-cont-rua__nome i { color: var(--ranieri-vermelho); font-size: 19px; }

.rbt-cont-rua__unidades { display: grid; gap: 16px; }
.rbt-cont-unidade {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid transparent;
  transition: border-color .25s ease, transform .25s ease;
}
.rbt-cont-unidade:hover { border-color: var(--ranieri-azul); transform: translateX(4px); }
.rbt-cont-unidade__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 20px;
}
.rbt-cont-unidade h4 { margin: 0 0 6px; font-family: var(--font-secondary); font-size: 18px; color: var(--ranieri-azul); }
.rbt-cont-unidade p { margin: 0 0 12px; font-size: 14px; color: var(--ranieri-cinza-60); }
.rbt-cont-unidade address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ranieri-cinza-80); }
.rbt-cont-unidade .rbt-etapa__link { margin-top: 14px; font-size: 14px; }

/* =========================================================================
   Quem já é da casa — o bloco escuro da página
   ========================================================================= */

.rbt-cont-casa-area {
  position: relative;
  overflow: hidden;
  padding: 88px 0 92px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-cont-casa-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-cont-casa__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%);
}
.rbt-cont-casa__conteudo { position: relative; z-index: 1; }

.rbt-cont-casa { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.rbt-cont-casa__texto h2 { color: #fff; }
.rbt-cont-casa__texto h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-cont-casa__texto p { margin: 18px 0 26px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.rbt-cont-casa__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 700;
  transition: background .3s ease, transform .3s ease;
}
.rbt-cont-casa__cta:hover { background: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-3px); }
.rbt-cont-casa__cta i { transition: transform .3s ease; }
.rbt-cont-casa__cta:hover i { transform: translateX(4px); }

.rbt-cont-casa__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rbt-cont-casa__lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.rbt-cont-casa__lista i { color: var(--ranieri-amarelo); font-size: 19px; }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-cont-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-cont-mapa-area { background: var(--color-darkest); }

.active-dark-mode .rbt-cont-abertura__titulo,
.active-dark-mode .rbt-cont-cab h2,
.active-dark-mode .rbt-cont-canal strong,
.active-dark-mode .rbt-cont-rua__nome,
.active-dark-mode .rbt-cont-unidade h4 { color: var(--color-white-dark); }
.active-dark-mode .rbt-cont-abertura__titulo em,
.active-dark-mode .rbt-cont-cab h2 em { color: var(--ranieri-amarelo); background: none; }
/* O cartão amarelo do WhatsApp sobrevive ao tema escuro: cor própria. */
.active-dark-mode .rbt-cont-canal--destaque strong { color: var(--ranieri-azul-escuro); }

.active-dark-mode .rbt-cont-selo,
.active-dark-mode .rbt-cont-selo--claro { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-cont-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-cont-canal,
.active-dark-mode .rbt-cont-rua,
.active-dark-mode .rbt-cont-unidade { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-cont-canal--destaque { background: var(--ranieri-amarelo); border-color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-cont-canal__icone,
.active-dark-mode .rbt-cont-unidade__icone { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-cont-canal--destaque .rbt-cont-canal__icone { background: var(--ranieri-azul-escuro); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-cont-canal__dado,
.active-dark-mode .rbt-cont-canal__acao,
.active-dark-mode .rbt-cont-rua__nome i { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-cont-canal--destaque .rbt-cont-canal__dado,
.active-dark-mode .rbt-cont-canal--destaque .rbt-cont-canal__acao { color: var(--ranieri-azul-escuro); }
.active-dark-mode .rbt-cont-rua__nome { border-color: var(--dark-color-border-2); }

.active-dark-mode .rbt-cont-abertura__fundo {
  background:
    radial-gradient(circle at 88% 6%, rgba(10, 133, 201, .16), transparent 44%),
    radial-gradient(circle at 6% 96%, rgba(250, 202, 0, .07), transparent 42%);
}

.active-dark-mode .rbt-cont-abertura,
.active-dark-mode .rbt-cont-mapa-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
}
/* …menos dentro do cartão amarelo, que continua claro no tema escuro. */
.active-dark-mode .rbt-cont-canal--destaque {
  --ranieri-cinza-80: #5A4700;
  --ranieri-cinza-60: #5A4700;
}

/* =========================================================================
   Movimento e telas menores
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-cont-canal,
    .rbt-cont-rua,
    .rbt-cont-casa__texto,
    .rbt-cont-casa__lista li {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 991px) {
  .rbt-cont-abertura { padding: 56px 0 66px; }
  .rbt-cont-canais { grid-template-columns: 1fr; }
  .rbt-cont-mapa-area { padding: 60px 0 70px; }
  .rbt-cont-ruas { grid-template-columns: 1fr; }
  .rbt-cont-casa-area { padding: 62px 0 68px; }
  .rbt-cont-casa { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 575px) {
  .rbt-cont-rua { padding: 24px 20px 26px; }
  .rbt-cont-unidade { grid-template-columns: 42px 1fr; gap: 14px; padding: 20px 18px; }
  .rbt-cont-unidade__icone { width: 42px; height: 42px; font-size: 18px; }
  /* O e-mail estoura a caixa em telas estreitas. */
  .rbt-cont-canal__dado { word-break: break-word; }
}

/* =========================================================================
   Ranicast — listagem e episódio
   Na listagem, o episódio mais recente é o que a pessoa veio ver: capa grande
   e resumo. No episódio, a fachada do vídeo domina a tela e o texto vem numa
   coluna de leitura. Prefixo `rbt-pod-`.
   ========================================================================= */

.rbt-pod-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 20px;
}
.rbt-pod-selo i { font-size: 14px; }
.rbt-pod-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-pod-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

/* ---- Abertura da listagem ---------------------------------------------- */

.rbt-pod-abertura,
.rbt-pod-ep {
  position: relative;
  overflow: hidden;
  padding: 72px 0 84px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-pod-abertura__fundo,
.rbt-pod-ep__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-pod-abertura .container,
.rbt-pod-ep .container { position: relative; z-index: 1; }

.rbt-pod-abertura__texto { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.rbt-pod-abertura__titulo,
.rbt-pod-cab h2,
.rbt-pod-conexao__texto h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-pod-abertura__titulo em,
.rbt-pod-cab h2 em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rbt-pod-abertura__lide { margin: 18px 0 26px; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }
.rbt-pod-abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- Episódio em destaque ---------------------------------------------- */

.rbt-pod-destaque {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 40px;
  align-items: center;
  padding: 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 40px rgba(16, 38, 56, .08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rbt-pod-destaque:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 28px 56px rgba(16, 38, 56, .13); }

.rbt-pod-destaque__capa { position: relative; display: block; border-radius: 20px; overflow: hidden; }
.rbt-pod-destaque__capa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.rbt-pod-destaque:hover .rbt-pod-destaque__capa img { transform: scale(1.03); }
.rbt-pod-destaque__play,
.rbt-pod-card__play,
.rbt-pod-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  box-shadow: 0 12px 28px rgba(2, 30, 54, .3);
}
.rbt-pod-destaque__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  font-size: 26px;
  transition: transform .35s ease;
}
.rbt-pod-destaque:hover .rbt-pod-destaque__play { transform: translate(-50%, -50%) scale(1.08); }

.rbt-pod-destaque__corpo { display: flex; flex-direction: column; padding-right: 16px; }
.rbt-pod-destaque__rotulo {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
}
.rbt-pod-destaque__corpo strong {
  margin-top: 12px;
  font-family: var(--font-secondary);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--ranieri-azul);
}
.rbt-pod-destaque__resumo { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--ranieri-cinza-80); }
.rbt-pod-destaque__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  color: var(--ranieri-azul);
}
.rbt-pod-destaque__link i { transition: transform .3s ease; }
.rbt-pod-destaque:hover .rbt-pod-destaque__link i { transform: translateX(4px); }

/* ---- Grade de episódios ------------------------------------------------- */

.rbt-pod-outros-area { padding: 86px 0 96px; background: #fff; }
.rbt-pod-cab { max-width: 640px; margin: 0 auto 44px; text-align: center; }

.rbt-pod-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.rbt-pod-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-pod-card:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .11); }
.rbt-pod-card__capa { position: relative; display: block; }
/* `width: 100%` é obrigatório: com srcset + sizes a largura intrínseca vira a
   do `sizes` e o card fica com faixa vazia. */
.rbt-pod-card__capa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.rbt-pod-card:hover .rbt-pod-card__capa img { transform: scale(1.04); }
.rbt-pod-card__play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  font-size: 17px;
  transition: transform .3s ease;
}
.rbt-pod-card:hover .rbt-pod-card__play { transform: scale(1.1); }

.rbt-pod-card__corpo { padding: 22px 24px 26px; }
.rbt-pod-card__num {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 5px 12px;
}
.rbt-pod-card h3 { margin: 12px 0 0; font-size: 18px; line-height: 1.35; }
.rbt-pod-card h3 a { color: var(--ranieri-azul); transition: color .25s ease; }
.rbt-pod-card h3 a:hover { color: var(--ranieri-azul-escuro); }
.rbt-pod-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ranieri-cinza-60); }

.rbt-pod-nota { margin: 40px 0 0; text-align: center; font-size: 15px; color: var(--ranieri-cinza-60); }
.rbt-pod-nota a { color: var(--ranieri-azul); border-bottom: 1px solid var(--color-primary-alt); }

/* =========================================================================
   A página de um episódio
   ========================================================================= */

.rbt-pod-ep__corpo { max-width: 900px; margin: 0 auto; }
.rbt-pod-ep__cab { text-align: center; margin-bottom: 34px; }
.rbt-pod-ep__cab h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}

.rbt-pod-player {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ranieri-azul);
  box-shadow: 0 24px 50px rgba(16, 38, 56, .18);
  /* A capa é 4:3; quando o player entra, a caixa vira 16:9. */
  aspect-ratio: 4 / 3;
}
.rbt-pod-player--ativo { aspect-ratio: 16 / 9; }
.rbt-pod-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbt-pod-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.rbt-pod-player__botao {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  border: 0;
  background: rgba(3, 32, 54, .32);
  cursor: pointer;
  transition: background .3s ease;
}
.rbt-pod-player__botao:hover { background: rgba(3, 32, 54, .46); }
.rbt-pod-player__play { width: 86px; height: 86px; font-size: 30px; transition: transform .3s ease; }
.rbt-pod-player__botao:hover .rbt-pod-player__play { transform: scale(1.08); }
.rbt-pod-player__texto {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(2, 30, 54, .5);
}

.rbt-pod-ep__aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ranieri-cinza-60);
}
.rbt-pod-ep__aviso i { color: var(--ranieri-azul); font-size: 15px; }

.rbt-pod-ep__texto { max-width: 760px; margin: 40px auto 0; }
.rbt-pod-ep__texto p { font-size: 17px; line-height: 1.8; color: var(--ranieri-cinza-80); }
.rbt-pod-ep__texto p:last-child { margin-bottom: 0; }
.rbt-pod-ep__ouvir { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }

/* =========================================================================
   Rani Conexão — o bloco escuro das duas telas
   ========================================================================= */

.rbt-pod-conexao-area {
  position: relative;
  overflow: hidden;
  padding: 84px 0 88px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-pod-conexao-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-pod-conexao__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%);
}
.rbt-pod-conexao__conteudo { position: relative; z-index: 1; }

.rbt-pod-conexao { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.rbt-pod-conexao__texto h2 { color: #fff; }
.rbt-pod-conexao__texto h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-pod-conexao__texto p { margin: 18px 0 0; max-width: 620px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.rbt-pod-conexao__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: 58px;
  padding: 0 30px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 700;
  transition: background .3s ease, transform .3s ease;
}
.rbt-pod-conexao__cta:hover { background: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-3px); }
.rbt-pod-conexao__cta i { transition: transform .3s ease; }
.rbt-pod-conexao__cta:hover i { transform: translateX(4px); }

/* =========================================================================
   Modo escuro
   ========================================================================= */

.active-dark-mode .rbt-pod-abertura,
.active-dark-mode .rbt-pod-ep { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-pod-outros-area { background: var(--color-darkest); }

.active-dark-mode .rbt-pod-abertura__titulo,
.active-dark-mode .rbt-pod-cab h2,
.active-dark-mode .rbt-pod-ep__cab h1,
.active-dark-mode .rbt-pod-destaque__corpo strong,
.active-dark-mode .rbt-pod-card h3 a { color: var(--color-white-dark); }
.active-dark-mode .rbt-pod-abertura__titulo em,
.active-dark-mode .rbt-pod-cab h2 em { color: var(--ranieri-amarelo); background: none; }

.active-dark-mode .rbt-pod-selo,
.active-dark-mode .rbt-pod-selo--claro,
.active-dark-mode .rbt-pod-card__num { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-pod-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-pod-destaque,
.active-dark-mode .rbt-pod-card { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-pod-destaque__rotulo,
.active-dark-mode .rbt-pod-destaque__link,
.active-dark-mode .rbt-pod-ep__aviso i,
.active-dark-mode .rbt-pod-nota a { color: var(--ranieri-azul-claro); }

.active-dark-mode .rbt-pod-abertura__fundo,
.active-dark-mode .rbt-pod-ep__fundo {
  background:
    radial-gradient(circle at 90% 4%, rgba(250, 202, 0, .07), transparent 42%),
    radial-gradient(circle at 4% 94%, rgba(10, 133, 201, .16), transparent 46%);
}

.active-dark-mode .rbt-pod-abertura,
.active-dark-mode .rbt-pod-ep,
.active-dark-mode .rbt-pod-outros-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
}

/* =========================================================================
   Movimento e telas menores
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-pod-destaque,
    .rbt-pod-card,
    .rbt-pod-ep__texto,
    .rbt-pod-conexao__texto {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 1199px) {
  .rbt-pod-destaque { grid-template-columns: 420px 1fr; gap: 30px; }
}

@media (max-width: 991px) {
  .rbt-pod-abertura, .rbt-pod-ep { padding: 54px 0 64px; }
  .rbt-pod-destaque { grid-template-columns: 1fr; padding: 18px; }
  .rbt-pod-destaque__corpo { padding: 0 8px 10px; }
  .rbt-pod-destaque__play { width: 62px; height: 62px; font-size: 22px; }
  .rbt-pod-outros-area { padding: 58px 0 70px; }
  .rbt-pod-conexao-area { padding: 60px 0 66px; }
  .rbt-pod-conexao { grid-template-columns: 1fr; gap: 26px; }
  .rbt-pod-player__play { width: 68px; height: 68px; font-size: 24px; }
}

@media (max-width: 575px) {
  .rbt-pod-abertura__acoes .rbt-hero__cta,
  .rbt-pod-ep__ouvir .rbt-hero__cta { width: 100%; justify-content: center; }
  .rbt-pod-conexao__cta { width: 100%; justify-content: center; }
}

/* =========================================================================
   Peças comuns das quatro últimas páginas
   Rani Conexão, materiais, política e 404 compartilham selo e cabeçalho —
   o desenho de cada uma vem depois, com o prefixo próprio.
   ========================================================================= */

.rbt-conex-selo, .rbt-mat-selo, .rbt-priv-selo, .rbt-e404-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 22px;
}
.rbt-conex-selo i, .rbt-mat-selo i, .rbt-priv-selo i, .rbt-e404-selo i { font-size: 14px; }
.rbt-conex-selo--claro, .rbt-mat-selo--claro, .rbt-priv-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-conex-selo--amarelo, .rbt-mat-selo--amarelo, .rbt-priv-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-conex-abertura__titulo, .rbt-mat-abertura__titulo, .rbt-priv-abertura__titulo,
.rbt-conex-cab h2, .rbt-priv-cab h2, .rbt-e404-titulo,
.rbt-conex-agenda__texto h2, .rbt-mat-visita__texto h2, .rbt-priv-dados__texto h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
.rbt-conex-abertura__titulo em, .rbt-mat-abertura__titulo em, .rbt-priv-abertura__titulo em,
.rbt-priv-cab h2 em, .rbt-e404-titulo em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Fundo claro com halos — o mesmo gesto de abertura das outras internas. */
.rbt-conex-abertura, .rbt-mat-abertura, .rbt-priv-abertura, .rbt-e404-area {
  position: relative;
  overflow: hidden;
  padding: 76px 0 88px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 58%, #FFFFFF 100%);
}
.rbt-conex-abertura__fundo, .rbt-mat-abertura__fundo, .rbt-priv-abertura__fundo, .rbt-e404-fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-conex-abertura .container, .rbt-mat-abertura .container,
.rbt-priv-abertura .container, .rbt-e404-area .container { position: relative; z-index: 1; }

/* Bloco escuro — mesma assinatura azul das demais páginas. */
.rbt-conex-agenda-area, .rbt-mat-visita-area, .rbt-priv-dados-area {
  position: relative;
  overflow: hidden;
  padding: 86px 0 90px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
}
.rbt-conex-agenda-area::before, .rbt-mat-visita-area::before, .rbt-priv-dados-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-conex-agenda__fundo, .rbt-mat-visita__fundo, .rbt-priv-dados__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%);
}
.rbt-conex-agenda__conteudo, .rbt-mat-visita__conteudo, .rbt-priv-dados__conteudo { position: relative; z-index: 1; }
.rbt-conex-agenda, .rbt-mat-visita, .rbt-priv-dados { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.rbt-conex-agenda__texto h2, .rbt-mat-visita__texto h2, .rbt-priv-dados__texto h2 { color: #fff; }
.rbt-conex-agenda__texto h2 em, .rbt-mat-visita__texto h2 em, .rbt-priv-dados__texto h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-conex-agenda__texto p, .rbt-mat-visita__texto p, .rbt-priv-dados__texto p { margin: 18px 0 0; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); }

/* Botão amarelo dos blocos escuros. */
.rbt-conex-agenda__wpp, .rbt-mat-visita__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 58px;
  padding: 0 28px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-family: var(--font-secondary);
  font-weight: 700;
  transition: background .3s ease, transform .3s ease;
}
.rbt-conex-agenda__wpp:hover, .rbt-mat-visita__cta:hover { background: #FFD833; color: var(--ranieri-azul-escuro); transform: translateY(-3px); }
/* Botão vazado dos blocos escuros. */
.rbt-conex-agenda__pod, .rbt-mat-visita__wpp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 58px;
  padding: 0 26px;
  border-radius: 500px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 700;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.rbt-conex-agenda__pod:hover, .rbt-mat-visita__wpp:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: #fff; transform: translateY(-3px); }
.rbt-conex-agenda__acoes, .rbt-mat-visita__acoes { display: grid; gap: 12px; }

/* =========================================================================
   Rani Conexão
   ========================================================================= */

.rbt-conex-abertura__texto { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.rbt-conex-abertura__lide { margin: 18px 0 14px; font-size: 17.5px; line-height: 1.7; color: var(--ranieri-azul); font-family: var(--font-secondary); font-weight: 500; }
.rbt-conex-abertura__texto p:last-child { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ranieri-cinza-80); }

/* O formato em números: quatro dados, o último sem número (é um extra). */
.rbt-conex-formato { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rbt-conex-formato li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-conex-formato li:hover { transform: translateY(-4px); border-color: var(--color-primary-alt); box-shadow: 0 18px 36px rgba(16, 38, 56, .09); }
.rbt-conex-formato__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 20px;
  margin-bottom: 16px;
}
.rbt-conex-formato strong {
  font-family: var(--font-secondary);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--ranieri-azul);
  font-variant-numeric: tabular-nums;
}
.rbt-conex-formato li > span:last-child { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ranieri-cinza-80); }
/* O extra não tem número: ganha o amarelo para não parecer um dado faltando. */
.rbt-conex-formato__extra { background: var(--color-primary-light); border-color: var(--color-primary-alt); }
.rbt-conex-formato__extra .rbt-conex-formato__icone { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-conex-conteudo { padding: 88px 0 96px; background: #fff; }
.rbt-conex-bloco { margin-bottom: 84px; }
.rbt-conex-bloco--ultimo { margin-bottom: 0; }
.rbt-conex-cab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-bottom: 28px; }
.rbt-conex-cab__num {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 800;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 15px;
  font-variant-numeric: tabular-nums;
}
.rbt-conex-cab h2 { position: relative; padding-bottom: 16px; font-size: clamp(24px, 2.9vw, 32px); }
.rbt-conex-cab h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  border-radius: 3px;
  background: var(--ranieri-amarelo);
}
.rbt-conex-texto { max-width: 820px; }
.rbt-conex-texto p { font-size: 16.5px; line-height: 1.78; color: var(--ranieri-cinza-80); }
.rbt-conex-texto p:last-child { margin-bottom: 0; }

.rbt-conex-publico { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rbt-conex-publico li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-alt);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ranieri-cinza-80);
}
.rbt-conex-publico i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-size: 15px;
}

.rbt-conex-mudancas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rbt-conex-mudanca {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-conex-mudanca:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .1); }
.rbt-conex-mudanca__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 22px;
}
.rbt-conex-mudanca__num {
  position: absolute;
  right: 22px;
  top: 18px;
  font-family: var(--font-secondary);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
}
.rbt-conex-mudanca h3 { margin: 18px 0 10px; font-size: 19px; color: var(--ranieri-azul); }
.rbt-conex-mudanca p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }

.rbt-conex-quem__cartao {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  padding: 34px 36px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
}
/* Não há foto publicada da diretora: as iniciais fazem as vezes do retrato. */
.rbt-conex-quem__inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ranieri-azul);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .02em;
}
.rbt-conex-quem__cartao h3 { margin: 0; font-size: 22px; color: var(--ranieri-azul); }
.rbt-conex-quem__papel {
  display: inline-block;
  margin: 8px 0 16px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
}
.rbt-conex-quem__cartao p { font-size: 15.5px; line-height: 1.75; color: var(--ranieri-cinza-80); }
.rbt-conex-quem__cartao p:last-child { margin-bottom: 0; }
.rbt-conex-quem__nota {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px dashed var(--color-primary-alt);
  font-size: 15px;
  color: var(--ranieri-cinza-80);
}
.rbt-conex-quem__nota i { color: var(--ranieri-azul); font-size: 19px; }

/* =========================================================================
   Materiais gratuitos
   ========================================================================= */

.rbt-mat-abertura__texto { max-width: 700px; margin: 0 auto 46px; text-align: center; }
.rbt-mat-abertura__lide { margin: 18px 0 0; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

.rbt-mat-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.rbt-mat-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 30px 30px 32px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-mat-item:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 22px 44px rgba(16, 38, 56, .11); }

/* A "capa" é desenhada: um retângulo com lombada, o ícone do assunto e o
   número do material. Não existe arte de capa publicada pela escola. */
.rbt-mat-item__capa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 3 / 4;
  border-radius: 6px 16px 16px 6px;
  background: linear-gradient(150deg, var(--ranieri-azul) 0%, var(--ranieri-azul) 55%, var(--ranieri-azul) 100%);
  color: #fff;
  box-shadow: 0 16px 32px rgba(2, 30, 54, .22);
}
.rbt-mat-item__capa::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 12px;
  border-radius: 6px 0 0 6px;
  background: rgba(0, 0, 0, .18);
}
.rbt-mat-item__capa i { font-size: 34px; color: var(--ranieri-amarelo); }
.rbt-mat-item__capa b { font-family: var(--font-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.rbt-mat-item__capa em {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-style: normal;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, .5);
}

.rbt-mat-item__corpo { display: flex; flex-direction: column; }
.rbt-mat-item__etiqueta {
  align-self: flex-start;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 6px 13px;
}
.rbt-mat-item h3 { margin: 14px 0 10px; font-size: 21px; line-height: 1.3; color: var(--ranieri-azul); }
.rbt-mat-item__chamada { margin: 0 0 10px; font-family: var(--font-secondary); font-size: 16px; line-height: 1.55; color: var(--ranieri-azul); }
.rbt-mat-item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }
.rbt-mat-item__para { display: flex; align-items: center; gap: 9px; margin: 16px 0 20px; font-size: 13.5px; color: var(--ranieri-cinza-60); }
.rbt-mat-item__para i { color: var(--ranieri-azul); font-size: 16px; }
.rbt-mat-item .rbt-hero__cta { align-self: flex-start; margin-top: auto; }

.rbt-mat-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 34px 0 0;
  font-size: 14.5px;
  color: var(--ranieri-cinza-60);
}
.rbt-mat-nota i { color: var(--ranieri-azul); font-size: 17px; }

/* =========================================================================
   Política de privacidade
   ========================================================================= */

.rbt-priv-abertura__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.rbt-priv-abertura__lide { margin: 18px 0 0; font-size: 17px; line-height: 1.72; color: var(--ranieri-cinza-80); }

.rbt-priv-doc {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: center;
  padding: 30px 32px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--color-primary-light) 0%, #EAF4FB 100%);
  border: 1px solid var(--color-primary-alt);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rbt-priv-doc:hover { transform: translateY(-4px); border-color: var(--ranieri-azul); box-shadow: 0 20px 40px rgba(16, 38, 56, .1); }
.rbt-priv-doc__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #fff;
  color: var(--ranieri-azul);
  font-size: 30px;
}
.rbt-priv-doc__corpo { display: flex; flex-direction: column; gap: 6px; }
.rbt-priv-doc__corpo small { font-family: var(--font-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ranieri-cinza-60); }
.rbt-priv-doc__corpo strong { font-family: var(--font-secondary); font-size: 19px; line-height: 1.3; color: var(--ranieri-azul); }
.rbt-priv-doc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-secondary); font-size: 14px; font-weight: 700; color: var(--ranieri-azul); }

.rbt-priv-coleta-area { padding: 86px 0 96px; background: #fff; }
.rbt-priv-cab { max-width: 640px; margin: 0 auto 44px; text-align: center; }

.rbt-priv-coleta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rbt-priv-item {
  position: relative;
  padding: 30px 30px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-priv-item:hover { transform: translateY(-4px); border-color: var(--color-primary-alt); box-shadow: 0 18px 36px rgba(16, 38, 56, .09); }
.rbt-priv-item__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 21px;
}
/* A resposta vem antes da leitura: é o que a pessoa procura na página. */
.rbt-priv-item__resposta {
  position: absolute;
  right: 24px;
  top: 26px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 500px;
  padding: 6px 14px;
}
.rbt-priv-item__resposta--nao { background: #E6F4EA; color: #1E6B3A; }
.rbt-priv-item__resposta--sim { background: var(--color-primary-lighter); color: var(--ranieri-azul); }
.rbt-priv-item__resposta--talvez { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }
.rbt-priv-item h3 { margin: 18px 0 10px; font-size: 19px; color: var(--ranieri-azul); }
.rbt-priv-item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }

.rbt-priv-relatorio {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: 20px;
  border: 1px dashed var(--color-primary-alt);
  transition: border-color .25s ease, transform .25s ease;
}
.rbt-priv-relatorio:hover { border-color: var(--ranieri-azul); transform: translateX(4px); }
.rbt-priv-relatorio__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 22px;
}
.rbt-priv-relatorio strong { display: block; font-family: var(--font-secondary); font-size: 17px; color: var(--ranieri-azul); }
.rbt-priv-relatorio small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ranieri-cinza-60); }
.rbt-priv-relatorio > i { color: var(--ranieri-azul); font-size: 18px; }

.rbt-priv-dados__canais { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rbt-priv-dados__canais li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
}
.rbt-priv-dados__canais i,
.rbt-priv-dados__canais .rbt-icone-wpp { color: var(--ranieri-amarelo); fill: var(--ranieri-amarelo); font-size: 20px; }
.rbt-priv-dados__canais span { display: flex; flex-direction: column; gap: 2px; }
/* Branco a 92% sobre o cartão translúcido: os 72% do resto do site ficam em
   3,7:1, abaixo do mínimo para texto pequeno. */
.rbt-priv-dados__canais small { font-family: var(--font-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.rbt-priv-dados__canais a { font-family: var(--font-secondary); font-size: 15.5px; color: #fff; word-break: break-word; }
.rbt-priv-dados__canais a:hover { color: var(--ranieri-amarelo); }

/* =========================================================================
   Página 404
   ========================================================================= */

/* Esta página não tem faixa de breadcrumb, e o cabeçalho é transparente e
   fica POR CIMA do conteúdo: o padding do topo é que reserva a altura dele. */
.rbt-e404-area { padding: 200px 0 100px; text-align: center; }
.rbt-e404-caixa { position: relative; max-width: 660px; margin: 0 auto; }
/* O 404 é marca d'água atrás do texto: quem cai aqui errou o caminho e não
   precisa de um número gigante gritando isso. */
.rbt-e404-numero {
  position: absolute;
  left: 50%;
  top: -56px;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-secondary);
  font-size: clamp(150px, 22vw, 260px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-lighter);
  pointer-events: none;
  user-select: none;
}
.rbt-e404-titulo { margin: 0; }
.rbt-e404-texto { margin: 18px auto 30px; max-width: 520px; font-size: 16.5px; line-height: 1.72; color: var(--ranieri-cinza-80); }
.rbt-e404-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.rbt-e404-atalhos { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--color-border); }
.rbt-e404-atalhos__rotulo {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-cinza-60);
}
.rbt-e404-atalhos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rbt-e404-atalhos a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 500px;
  background: #fff;
  border: 1px solid var(--color-border);
  font-family: var(--font-secondary);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.rbt-e404-atalhos a:hover { border-color: var(--ranieri-azul); color: var(--ranieri-azul); transform: translateY(-3px); }
.rbt-e404-atalhos i { color: var(--ranieri-azul); font-size: 16px; }

/* =========================================================================
   Modo escuro das quatro
   ========================================================================= */

.active-dark-mode .rbt-conex-abertura,
.active-dark-mode .rbt-mat-abertura,
.active-dark-mode .rbt-priv-abertura,
.active-dark-mode .rbt-e404-area { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-conex-conteudo,
.active-dark-mode .rbt-priv-coleta-area { background: var(--color-darkest); }

.active-dark-mode .rbt-conex-abertura__titulo,
.active-dark-mode .rbt-mat-abertura__titulo,
.active-dark-mode .rbt-priv-abertura__titulo,
.active-dark-mode .rbt-conex-cab h2,
.active-dark-mode .rbt-priv-cab h2,
.active-dark-mode .rbt-e404-titulo,
.active-dark-mode .rbt-conex-abertura__lide,
.active-dark-mode .rbt-conex-mudanca h3,
.active-dark-mode .rbt-conex-quem__cartao h3,
.active-dark-mode .rbt-mat-item h3,
.active-dark-mode .rbt-priv-item h3,
.active-dark-mode .rbt-priv-doc__corpo strong,
.active-dark-mode .rbt-priv-relatorio strong { color: var(--color-white-dark); }
.active-dark-mode .rbt-conex-abertura__titulo em,
.active-dark-mode .rbt-mat-abertura__titulo em,
.active-dark-mode .rbt-priv-abertura__titulo em,
.active-dark-mode .rbt-priv-cab h2 em,
.active-dark-mode .rbt-e404-titulo em { color: var(--ranieri-amarelo); background: none; }

.active-dark-mode .rbt-conex-selo,
.active-dark-mode .rbt-mat-selo,
.active-dark-mode .rbt-priv-selo,
.active-dark-mode .rbt-e404-selo,
.active-dark-mode .rbt-conex-selo--claro,
.active-dark-mode .rbt-priv-selo--claro { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-conex-selo--amarelo,
.active-dark-mode .rbt-mat-selo--amarelo,
.active-dark-mode .rbt-priv-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-conex-formato li,
.active-dark-mode .rbt-conex-publico li,
.active-dark-mode .rbt-conex-mudanca,
.active-dark-mode .rbt-conex-quem__cartao,
.active-dark-mode .rbt-mat-item,
.active-dark-mode .rbt-priv-doc,
.active-dark-mode .rbt-priv-item,
.active-dark-mode .rbt-e404-atalhos a { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-conex-formato__icone,
.active-dark-mode .rbt-conex-cab__num,
.active-dark-mode .rbt-conex-mudanca__icone,
.active-dark-mode .rbt-mat-item__etiqueta,
.active-dark-mode .rbt-priv-doc__icone,
.active-dark-mode .rbt-priv-item__icone,
.active-dark-mode .rbt-priv-relatorio__icone { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-conex-formato strong,
.active-dark-mode .rbt-mat-item__chamada,
.active-dark-mode .rbt-conex-quem__papel,
.active-dark-mode .rbt-priv-doc__link { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-conex-mudanca__num,
.active-dark-mode .rbt-e404-numero { color: rgba(255, 255, 255, .07); }
.active-dark-mode .rbt-priv-item__resposta--sim { background: rgba(255, 255, 255, .1); color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-priv-item__resposta--nao { background: rgba(60, 160, 100, .22); color: #8FE0AE; }
.active-dark-mode .rbt-e404-atalhos,
.active-dark-mode .rbt-priv-relatorio,
.active-dark-mode .rbt-conex-quem__nota { border-color: var(--dark-color-border-2); }

.active-dark-mode .rbt-conex-abertura__fundo,
.active-dark-mode .rbt-mat-abertura__fundo,
.active-dark-mode .rbt-priv-abertura__fundo,
.active-dark-mode .rbt-e404-fundo {
  background:
    radial-gradient(circle at 88% 6%, rgba(250, 202, 0, .07), transparent 42%),
    radial-gradient(circle at 6% 94%, rgba(10, 133, 201, .16), transparent 46%);
}

.active-dark-mode .rbt-conex-abertura,
.active-dark-mode .rbt-conex-conteudo,
.active-dark-mode .rbt-mat-abertura,
.active-dark-mode .rbt-priv-abertura,
.active-dark-mode .rbt-priv-coleta-area,
.active-dark-mode .rbt-e404-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
}

/* =========================================================================
   Movimento e telas menores
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-conex-formato li,
    .rbt-conex-publico li,
    .rbt-conex-mudanca,
    .rbt-conex-quem__cartao,
    .rbt-mat-item,
    .rbt-priv-doc,
    .rbt-priv-item,
    .rbt-priv-relatorio {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 1199px) {
  .rbt-conex-formato { grid-template-columns: repeat(2, 1fr); }
  .rbt-mat-lista { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .rbt-conex-abertura, .rbt-mat-abertura, .rbt-priv-abertura { padding: 56px 0 66px; }
  .rbt-conex-conteudo, .rbt-priv-coleta-area { padding: 60px 0 70px; }
  .rbt-conex-bloco { margin-bottom: 62px; }
  .rbt-conex-publico { grid-template-columns: 1fr; }
  .rbt-conex-mudancas { grid-template-columns: 1fr; }
  .rbt-conex-quem__cartao { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .rbt-priv-abertura__grade { grid-template-columns: 1fr; gap: 30px; }
  .rbt-priv-coleta { grid-template-columns: 1fr; }
  .rbt-conex-agenda-area, .rbt-mat-visita-area, .rbt-priv-dados-area { padding: 62px 0 68px; }
  .rbt-conex-agenda, .rbt-mat-visita, .rbt-priv-dados { grid-template-columns: 1fr; gap: 30px; }
  .rbt-e404-area { padding: 160px 0 76px; }
}

@media (max-width: 575px) {
  .rbt-conex-formato { grid-template-columns: 1fr; }
  .rbt-conex-cab { grid-template-columns: 1fr; gap: 12px; }
  .rbt-conex-cab__num { justify-self: start; }
  .rbt-mat-item { grid-template-columns: 1fr; gap: 22px; }
  .rbt-mat-item__capa { max-width: 130px; }
  .rbt-priv-item__resposta { position: static; display: inline-block; margin-top: 14px; }
  .rbt-priv-relatorio { grid-template-columns: 46px 1fr; }
  .rbt-priv-relatorio > i { display: none; }
  .rbt-e404-acoes .rbt-hero__cta { width: 100%; justify-content: center; }
}

/* Wrappers de coluna: sem `min-width: 0` uma coluna de grid não encolhe
   abaixo do conteúdo e a vizinha (foto, cartão) fica espremida. */
.rbt-hist-abertura__texto,
.rbt-priv-abertura__texto,
.rbt-conex-quem { min-width: 0; }

/* =========================================================================
   Páginas de e-book (as duas iscas: escola ideal e marcos do bebê)
   Um só desenho para as duas — o template é partials/pagina-ebook.php.
   Prefixo `rbt-ebk-`. Reaproveitam de propósito: .rbt-hero__cta,
   .rbt-etapa__link e o cartão amarelo .rbt-curso__cta*.
   ========================================================================= */

/* ---- Abertura: capa + promessa ----------------------------------------- */

.rbt-ebk-abertura {
  position: relative;
  overflow: hidden;
  padding: 78px 0 84px;
  background: linear-gradient(168deg, #FFFFFF 0%, #F4F9FC 56%, #FFFFFF 100%);
}
.rbt-ebk-abertura__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 4%, rgba(169, 25, 24, .24) 0 22%, transparent 22.4%),
    radial-gradient(circle at 0% 88%, rgba(5, 101, 164, .25) 0 26%, transparent 26.4%),
    radial-gradient(circle at 64% 94%, rgba(250, 202, 0, .38) 0 18%, transparent 18.4%);
}
.rbt-ebk-abertura .container { position: relative; z-index: 1; }

.rbt-ebk-abertura__grade { display: grid; gap: 54px; align-items: center; }
/* A capa em pé é estreita; a deitada (16:9) precisa de mais largura. */
.rbt-ebk-abertura__grade--vertical   { grid-template-columns: 400px 1fr; }
.rbt-ebk-abertura__grade--horizontal { grid-template-columns: 1fr 1.05fr; }

/* A moldura repete o recorte do hero — mesma família das outras internas. */
.rbt-ebk-capa {
  position: relative;
  margin: 0;
  border-radius: 22px 22px 76px 22px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(16, 38, 56, .16), 0 44px 84px rgba(16, 38, 56, .10);
}
.rbt-ebk-capa img { display: block; width: 100%; height: auto; }
.rbt-ebk-capa__selo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 500px;
  background: rgba(3, 32, 54, .74);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.rbt-ebk-capa__selo i { color: var(--ranieri-amarelo); font-size: 14px; }

.rbt-ebk-promessa { min-width: 0; }

.rbt-ebk-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 8px 18px;
  margin-bottom: 20px;
}
.rbt-ebk-selo i { font-size: 14px; }
.rbt-ebk-selo--claro { background: #fff; border: 1px solid var(--color-primary-alt); }
.rbt-ebk-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.rbt-ebk-titulo,
.rbt-ebk-cab h2,
.rbt-ebk-amostra__texto h2,
.rbt-ebk-outro__corpo h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.13;
  letter-spacing: -.022em;
  color: var(--ranieri-azul);
  text-wrap: balance;
}
/* O grifo amarelo só funciona em fundo claro — ver o modo escuro no fim. */
.rbt-ebk-titulo em,
.rbt-ebk-cab h2 em {
  font-style: normal;
  color: var(--ranieri-azul);
  background: linear-gradient(180deg, transparent 64%, rgba(250, 202, 0, .5) 64%, rgba(250, 202, 0, .5) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rbt-ebk-lide {
  margin: 20px 0 14px;
  font-family: var(--font-secondary);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ranieri-azul);
  max-width: 54ch;
}
.rbt-ebk-texto { margin: 0 0 26px; font-size: 15.5px; line-height: 1.75; color: var(--ranieri-cinza-80); max-width: 58ch; }

/* Ficha: os três números que dizem o tamanho do material. */
.rbt-ebk-ficha {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rbt-ebk-ficha li {
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
}
.rbt-ebk-ficha strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 26px;
  line-height: 1;
  color: var(--ranieri-azul);
}
.rbt-ebk-ficha span { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--ranieri-cinza-60); }

.rbt-ebk-abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rbt-ebk-para { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ranieri-cinza-60); }
.rbt-ebk-para i { color: var(--ranieri-azul); font-size: 16px; }

/* ---- O que tem dentro --------------------------------------------------- */

.rbt-ebk-partes-area { padding: 76px 0 10px; background: #fff; }
.rbt-ebk-cab { max-width: 640px; margin: 0 0 40px; }

.rbt-ebk-partes { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.rbt-ebk-parte {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 24px;
  align-items: start;
  padding: 26px 28px;
  border-radius: 20px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-ebk-parte:hover { transform: translateY(-4px); border-color: var(--color-primary-alt); box-shadow: 0 20px 40px rgba(16, 38, 56, .10); }
.rbt-ebk-parte__num {
  font-family: var(--font-secondary);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--ranieri-azul);
  opacity: .32;
}
.rbt-ebk-parte__corpo { min-width: 0; }
.rbt-ebk-parte h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; color: var(--ranieri-azul); }
.rbt-ebk-parte__linha { margin: 0 0 10px; font-family: var(--font-secondary); font-size: 15px; color: var(--ranieri-azul); }
.rbt-ebk-parte p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--ranieri-cinza-80); }

/* ---- Amostra: uma página do próprio arquivo ----------------------------- */

.rbt-ebk-amostra-area { padding: 66px 0 78px; background: #fff; }
.rbt-ebk-amostra { display: grid; gap: 48px; align-items: center; }
.rbt-ebk-amostra--vertical   { grid-template-columns: 440px 1fr; }
.rbt-ebk-amostra--horizontal { grid-template-columns: 1.1fr 1fr; }

.rbt-ebk-amostra__figura {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 44px rgba(16, 38, 56, .13);
}
.rbt-ebk-amostra__figura img { display: block; width: 100%; height: auto; }
.rbt-ebk-amostra__texto { min-width: 0; }
.rbt-ebk-amostra__texto p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--ranieri-cinza-80); }
.rbt-ebk-amostra__itens { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 13px; }
.rbt-ebk-amostra__itens li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.65; color: var(--ranieri-cinza-80); }
.rbt-ebk-amostra__itens i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-lighter);
  color: var(--ranieri-azul);
  font-size: 13px;
}

/* ---- Formulário: o bloco escuro da página ------------------------------- */

.rbt-ebk-form-area {
  position: relative;
  overflow: hidden;
  padding: 86px 0 92px;
  background: linear-gradient(160deg, #0565A4 0%, var(--ranieri-azul) 42%, #0565A4 100%);
  isolation: isolate;
  scroll-margin-top: 100px;
}
.rbt-ebk-form-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ranieri-amarelo) 0 62%, var(--ranieri-vermelho) 62% 100%);
  z-index: 2;
}
.rbt-ebk-form__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .10) 0 17%, transparent 17.3%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .06) 0 26%, transparent 26.3%),
    radial-gradient(circle at 5% 94%, rgba(255, 255, 255, .07) 0 16%, transparent 16.3%);
}
.rbt-ebk-form__conteudo { position: relative; z-index: 1; }
.rbt-ebk-form__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }

.rbt-ebk-form__texto { min-width: 0; }
.rbt-ebk-form__texto h2 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.rbt-ebk-form__texto h2 em { font-style: normal; color: var(--ranieri-amarelo); }
.rbt-ebk-form__texto > p { margin: 16px 0 0; font-size: 16px; line-height: 1.72; color: rgba(255, 255, 255, .86); }
.rbt-ebk-form__promessas { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.rbt-ebk-form__promessas li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.rbt-ebk-form__promessas i { color: var(--ranieri-amarelo); font-size: 17px; }

/* O cartão branco tem dois estados: formulário e entrega. */
.rbt-ebk-cartao {
  background: #fff;
  border-radius: 24px;
  padding: 32px 32px 28px;
  box-shadow: 0 26px 54px rgba(2, 30, 54, .26);
}

.rbt-ebk-campo { margin-bottom: 16px; }
.rbt-ebk-campo label,
.rbt-ebk-escolha legend {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-secondary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ranieri-cinza-80);
}
/* Asterisco de campo obrigatório e erros usam `--ranieri-erro`, NÃO o vermelho
   institucional — ver a nota "Vermelho institucional" no fim do arquivo. */
.rbt-ebk-campo label span,
.rbt-ebk-escolha legend span { color: var(--ranieri-erro); }
.rbt-ebk-campo input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-primary-light);
  font-size: 15px;
  color: var(--ranieri-cinza-80);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.rbt-ebk-campo input::placeholder { color: var(--ranieri-cinza-60); opacity: 1; }
.rbt-ebk-campo input:focus {
  outline: none;
  background: #fff;
  border-color: var(--ranieri-azul);
  box-shadow: 0 0 0 3px rgba(5, 101, 164, .16);
}
.rbt-ebk-campo input[aria-invalid="true"] { border-color: var(--ranieri-erro); background: #FBF1F0; }
.rbt-ebk-erro { display: block; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--ranieri-erro); }

.rbt-ebk-escolha { border: 0; padding: 0; margin: 4px 0 20px; min-width: 0; }
.rbt-ebk-opcoes { display: flex; flex-wrap: wrap; gap: 9px; }
/* A opção inteira é clicável: o quadrado sozinho é alvo pequeno demais. */
.rbt-ebk-opcao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 500px;
  border: 1px solid var(--color-border);
  background: var(--color-primary-light);
  font-size: 14px;
  color: var(--ranieri-cinza-80);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
/* O template esconde a caixa nativa (`input[type=checkbox] {opacity:0;
   position:absolute}`) e desenha o quadrado num `~ label` irmão. Aqui o input
   está DENTRO do label, então aquele desenho nunca apareceria: a caixa é
   redesenhada, e o `position/opacity` precisa ser desfeito na mão. */
.rbt-ebk-opcao input {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  opacity: 1;
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--ranieri-cinza-40);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.rbt-ebk-opcao input[type="radio"] { border-radius: 50%; }
.rbt-ebk-opcao input::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  transform: scale(0);
  transition: transform .15s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.rbt-ebk-opcao input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; clip-path: none; }
.rbt-ebk-opcao input:checked { background: var(--ranieri-azul); border-color: var(--ranieri-azul); }
.rbt-ebk-opcao input:checked::before { transform: scale(1); }
.rbt-ebk-opcao:hover { border-color: var(--color-primary-alt); background: var(--color-primary-lighter); }
.rbt-ebk-opcao:has(input:checked) { border-color: var(--ranieri-azul); background: var(--color-primary-lighter); color: var(--ranieri-azul); }
.rbt-ebk-opcao:has(input:focus-visible) { outline: 2px solid var(--ranieri-azul); outline-offset: 2px; }

.rbt-ebk-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 500px;
  background: var(--ranieri-azul);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbt-ebk-enviar:hover { background: var(--ranieri-azul-escuro); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(4, 78, 127, .3); }
.rbt-ebk-enviar i { transition: transform .3s ease; }
.rbt-ebk-enviar:hover i { transform: translateX(4px); }

.rbt-ebk-form__nota { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ranieri-cinza-60); text-align: center; }
.rbt-ebk-form__nota a { color: var(--ranieri-azul); text-decoration: underline; }

/* Estado 2: a entrega (o que no site oficial é a página de "obrigado"). */
.rbt-ebk-entrega { text-align: center; padding: 8px 0 6px; }
.rbt-ebk-entrega:focus { outline: none; }
.rbt-ebk-entrega__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-size: 28px;
}
.rbt-ebk-entrega h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.25; color: var(--ranieri-azul); }
.rbt-ebk-entrega p { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }
.rbt-ebk-baixar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 58px;
  border-radius: 500px;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-cinza-80);
  font-family: var(--font-secondary);
  font-size: 15.5px;
  font-weight: 700;
  transition: background .3s ease, transform .3s ease;
}
.rbt-ebk-baixar:hover { background: #FFD833; color: var(--ranieri-cinza-80); transform: translateY(-3px); }
.rbt-ebk-entrega__wpp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ranieri-azul);
}
.rbt-ebk-entrega__wpp:hover { color: var(--ranieri-azul-escuro); }

/* ---- O outro material --------------------------------------------------- */

.rbt-ebk-outro-area { padding: 74px 0 78px; background: var(--color-primary-light); }
.rbt-ebk-outro {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rbt-ebk-outro:hover { transform: translateY(-5px); border-color: var(--color-primary-alt); box-shadow: 0 22px 44px rgba(16, 38, 56, .12); }
.rbt-ebk-outro__capa { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px rgba(16, 38, 56, .18); }
.rbt-ebk-outro__capa img { display: block; width: 100%; height: auto; }
.rbt-ebk-outro__corpo { min-width: 0; }
.rbt-ebk-outro__corpo h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 12px 0 10px; }
.rbt-ebk-outro__corpo p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--ranieri-cinza-80); }
.rbt-ebk-outro__etiqueta {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ranieri-azul);
  background: var(--color-primary-lighter);
  border-radius: 500px;
  padding: 6px 13px;
}

/* O cartão amarelo não tem padding-top próprio — quem dá o respiro é a seção
   anterior. Depois de um bloco de fundo colorido ele encostaria no texto. */
.rbt-ebk-outro-area + .rbt-curso__cta { padding-top: 78px; }

/* ---- Modo escuro -------------------------------------------------------- */

.active-dark-mode .rbt-ebk-abertura { background: linear-gradient(168deg, var(--color-darkest) 0%, var(--color-darker) 100%); }
.active-dark-mode .rbt-ebk-partes-area,
.active-dark-mode .rbt-ebk-amostra-area { background: var(--color-darkest); }
.active-dark-mode .rbt-ebk-outro-area { background: var(--color-darker); }
.active-dark-mode .rbt-ebk-abertura__fundo {
  background:
    radial-gradient(circle at 8% 8%, rgba(250, 202, 0, .07), transparent 42%),
    radial-gradient(circle at 94% 88%, rgba(10, 133, 201, .16), transparent 46%);
}

.active-dark-mode .rbt-ebk-titulo,
.active-dark-mode .rbt-ebk-cab h2,
.active-dark-mode .rbt-ebk-amostra__texto h2,
.active-dark-mode .rbt-ebk-outro__corpo h2,
.active-dark-mode .rbt-ebk-parte h3 { color: var(--color-white-dark); }
/* Sobre fundo escuro o grifo vira faixa oliva: o destaque passa a ser a cor. */
.active-dark-mode .rbt-ebk-titulo em,
.active-dark-mode .rbt-ebk-cab h2 em { color: var(--ranieri-amarelo); background: none; }
.active-dark-mode .rbt-ebk-lide,
.active-dark-mode .rbt-ebk-parte__linha { color: var(--ranieri-azul-claro); }

.active-dark-mode .rbt-ebk-selo,
.active-dark-mode .rbt-ebk-selo--claro { color: var(--ranieri-amarelo); background: rgba(255, 255, 255, .06); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-ebk-selo--amarelo { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }

.active-dark-mode .rbt-ebk-ficha li,
.active-dark-mode .rbt-ebk-parte,
.active-dark-mode .rbt-ebk-outro { background: rgba(255, 255, 255, .04); border-color: var(--dark-color-border-2); }
.active-dark-mode .rbt-ebk-ficha strong,
.active-dark-mode .rbt-ebk-parte__num { color: var(--ranieri-azul-claro); }
.active-dark-mode .rbt-ebk-outro__etiqueta,
.active-dark-mode .rbt-ebk-amostra__itens i { background: rgba(255, 255, 255, .07); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-ebk-amostra__figura { border-color: var(--dark-color-border-2); }

/* O cartão do formulário continua branco no modo escuro — é o ponto de luz do
   bloco azul. Só que o template pinta de claro o texto e o placeholder de todo
   input quando `.active-dark-mode` está ligado, e sobre branco isso some. */
.active-dark-mode .rbt-ebk-cartao input:not([type="checkbox"]):not([type="radio"]) {
  color: var(--ranieri-cinza-80);
  background: var(--color-primary-light);
  border-color: var(--color-border);
}
.active-dark-mode .rbt-ebk-cartao input::placeholder { color: var(--ranieri-cinza-60); opacity: 1; }
.active-dark-mode .rbt-ebk-cartao input:not([type="checkbox"]):not([type="radio"]):focus { background: #fff; border-color: var(--ranieri-azul); }
.active-dark-mode .rbt-ebk-opcao { color: var(--ranieri-cinza-80); background: var(--color-primary-light); border-color: var(--color-border); }
.active-dark-mode .rbt-ebk-opcao input { background: #fff; border-color: var(--ranieri-cinza-40); }
.active-dark-mode .rbt-ebk-opcao input:checked { background: var(--ranieri-azul); border-color: var(--ranieri-azul); }
.active-dark-mode .rbt-ebk-opcao:has(input:checked) { color: var(--ranieri-azul); background: var(--color-primary-lighter); border-color: var(--ranieri-azul); }

/* Os cinzas do MIV somem sobre fundo escuro: o token é remapeado por seção
   (custom property herda), em vez de uma regra de cor por bloco. O cartão do
   formulário continua branco de propósito e tem cor própria. */
.active-dark-mode .rbt-ebk-abertura,
.active-dark-mode .rbt-ebk-partes-area,
.active-dark-mode .rbt-ebk-amostra-area,
.active-dark-mode .rbt-ebk-outro-area {
  --ranieri-cinza-80: rgba(255, 255, 255, .82);
  --ranieri-cinza-60: rgba(255, 255, 255, .60);
  --ranieri-cinza-40: rgba(255, 255, 255, .42);
}

/* ---- Movimento e telas menores ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rbt-ebk-parte,
    .rbt-ebk-ficha li,
    .rbt-ebk-amostra__itens li,
    .rbt-ebk-outro {
      animation: rbtEntra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
  }
}

@media (max-width: 1199px) {
  .rbt-ebk-abertura__grade--vertical { grid-template-columns: 330px 1fr; gap: 40px; }
  .rbt-ebk-amostra--vertical { grid-template-columns: 360px 1fr; gap: 36px; }
  .rbt-ebk-form__grade { gap: 38px; }
}

@media (max-width: 991px) {
  .rbt-ebk-abertura { padding: 56px 0 64px; }
  .rbt-ebk-abertura__grade,
  .rbt-ebk-abertura__grade--vertical,
  .rbt-ebk-abertura__grade--horizontal { grid-template-columns: 1fr; gap: 32px; }
  /* Em pé, a capa ocuparia a tela inteira antes do texto começar. */
  .rbt-ebk-capa--vertical { max-width: 300px; }
  .rbt-ebk-partes-area { padding: 58px 0 6px; }
  .rbt-ebk-amostra-area { padding: 52px 0 62px; }
  .rbt-ebk-amostra,
  .rbt-ebk-amostra--vertical,
  .rbt-ebk-amostra--horizontal { grid-template-columns: 1fr; gap: 30px; }
  .rbt-ebk-amostra--vertical .rbt-ebk-amostra__figura { max-width: 420px; }
  .rbt-ebk-form-area { padding: 62px 0 70px; }
  .rbt-ebk-form__grade { grid-template-columns: 1fr; gap: 32px; }
  .rbt-ebk-outro-area { padding: 56px 0 60px; }
  .rbt-ebk-outro-area + .rbt-curso__cta { padding-top: 58px; }
}

@media (max-width: 575px) {
  /* Empilhados, os três cartões da ficha comiam meia tela antes do botão:
     no celular cada um vira uma linha (número + rótulo lado a lado). */
  .rbt-ebk-ficha { grid-template-columns: 1fr; gap: 10px; }
  .rbt-ebk-ficha li { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .rbt-ebk-ficha strong { font-size: 22px; }
  .rbt-ebk-ficha span { margin-top: 0; }
  .rbt-ebk-parte { grid-template-columns: 1fr; gap: 10px; padding: 24px 22px; }
  .rbt-ebk-cartao { padding: 26px 22px 24px; }
  .rbt-ebk-abertura__acoes .rbt-hero__cta { width: 100%; justify-content: center; }
  .rbt-ebk-outro { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .rbt-ebk-outro__capa { max-width: 170px; }
}

/* Aviso do <noscript> no cartão do formulário: precisa saltar mais que a nota
   normal, porque é a única saída de quem está sem JavaScript. */
.rbt-ebk-form__nota--noscript {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-secondary-alt);
  color: var(--ranieri-cinza-80);
  font-size: 13.5px;
  text-align: left;
}

/* =========================================================================
   Vermelho institucional — onde pode e onde não pode
   =========================================================================
   O manual (item 5) declara #A91918 como uma das três cores institucionais,
   mas NÃO exige as três em toda peça: item 9 "Usos indevidos" não fala de
   paleta, e no próprio símbolo a divisão medida é 81,6% azul / 11,8% amarelo
   / 6,7% vermelho. O vermelho é acento da marca, não co-protagonista.

   Restrição que decide tudo: vermelho x azul institucional dá 1,20:1 e
   vermelho sobre o azul-escuro do bloco de clímax dá 1,18:1. Os dois não
   podem se tocar. Vermelho só vive em superfície clara — 7,40:1 no branco,
   6,86:1 no #F2F7FB, 4,76:1 sobre o amarelo.

   Usos aprovados (2026-07-29):
   1. Trio de pilares da home — uma cor institucional por pilar
      (.rbt-pilar__icone--azul / --amarelo / --vermelho).
   2. Pin de endereço — e SÓ o pin, onde ele aponta para um logradouro real:
      as quatro unidades do rodapé, a ficha das páginas de etapa e as ruas da
      página de Contato. Pin vermelho é convenção de mapa, não de alerta.

   Não usar: preenchimento de área grande, botão, borda de campo, qualquer
   coisa dentro do bloco azul, e degradê amarelo→vermelho (vira laranja).

   No modo escuro o vermelho some (1,18:1): cada um dos usos acima já tem
   regra .active-dark-mode devolvendo amarelo ou azul-claro.

   Erro de formulário usa --ranieri-erro (#8C1D18), separado de propósito.
   ========================================================================= */

/* =========================================================================
   Equilíbrio das três cores da marca (aplique 2026-08-21)
   -------------------------------------------------------------------------
   O manual do Ranieri define azul, amarelo e vermelho com o mesmo peso, mas o
   site nasceu com o vermelho quase ausente (4% das referências de cor no CSS
   contra 66% do azul). O caminho NÃO é pintar 1/3 dos pixels de cada cor —
   isso destrói hierarquia e, no caso do vermelho, aciona a leitura de "erro"
   que a interface reserva para alerta. O que se equaliza é a PRESENÇA: cada
   cor tem um papel e reaparece com regularidade ao longo da página.

     azul     — estrutura, navegação, ações primárias, fundos institucionais
     amarelo  — energia e destaque: marca-texto, selos, ícones sobre escuro
     vermelho — acento: fios de seção, marcadores, hover de apoio, trios

   Regras que este bloco respeita:
   · amarelo #FACA00 NUNCA como texto/traço sobre branco (contraste ~1.7:1);
     quando participa, é fundo com glifo escuro por cima;
   · vermelho fora de qualquer papel de estado (erro/exclusão) e fora de botão
     de ação primária, para não competir com a semântica de UI;
   · a cor nunca é o único portador de informação — sempre acompanha rótulo,
     ícone ou posição.
   ========================================================================= */

/* ---- Selos de seção: rodízio pelas três cores ---------------------------
   Eram quatro selos azuis, um amarelo e um vermelho ao longo da home. Agora
   cada seção puxa uma cor diferente da anterior, então o olho encontra as três
   ao percorrer a página, sem que nenhuma vire enfeite aleatório. */
.rbt-selo--amarelo {
  background: rgba(250, 202, 0, .20) !important;
  color: var(--ranieri-cinza-80) !important;
}
.rbt-selo--vermelho {
  background: var(--color-secondary-alt) !important;
  color: var(--ranieri-vermelho) !important;
}
/* Variante sólida, a pedido do cliente (ver a exceção do vermelho em botão).
   Separada de `--vermelho`, que é o selo suave e já serve "Serviços Adicionais":
   mudar aquela regra repintaria os dois. Branco sobre #A91918 = 7,40:1. */
.rbt-selo--vermelho-solido {
  background: var(--ranieri-vermelho) !important;
  color: #fff !important;
}

/* Sem esta linha o selo volta a azul no escuro: `.active-dark-mode
   .bg-primary-opacity` (styles.css) repinta com !important e especificidade
   maior que a do modificador sozinho. */
.active-dark-mode .rbt-selo--vermelho-solido {
  background: var(--ranieri-vermelho) !important;
  color: #fff !important;
}

.active-dark-mode .rbt-selo--amarelo { background: rgba(250, 202, 0, .16) !important; color: var(--ranieri-amarelo) !important; }
.active-dark-mode .rbt-selo--vermelho { background: rgba(169, 25, 24, .22) !important; color: #F4A3A2 !important; }

/* ---- Cards de curso: uma cor por etapa de ensino ------------------------
   Os cinco cards eram idênticos. O fio no topo dá a cada etapa uma marca
   própria (útil para reconhecer a etapa de relance) e distribui as três cores
   numa seção que era 100% azul. O fio tem 4px e fica sobre a foto: não disputa
   com o texto e não muda o peso do card. A seta do "Saiba Mais" acompanha a
   cor no hover — o mesmo sinal, no fim do card. */
.rbt-card-col .rbt-card { position: relative; }
.rbt-card-col .rbt-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--ranieri-azul);
  z-index: 2;
}
.rbt-card-col:nth-child(3n+2) .rbt-card::before { background: var(--ranieri-vermelho); }
.rbt-card-col:nth-child(3n+3) .rbt-card::before { background: var(--ranieri-amarelo); }

.rbt-card-col .transparent-button svg g { stroke: var(--ranieri-azul); transition: stroke .25s ease; }
.rbt-card-col:nth-child(3n+2) .rbt-card:hover .transparent-button svg g { stroke: var(--ranieri-vermelho); }
.rbt-card-col:nth-child(3n+3) .rbt-card:hover .transparent-button svg g { stroke: var(--ranieri-cinza-80); }

/* ---- Serviços adicionais: as três cores no mesmo bloco ------------------
   São exatamente três serviços e os três ícones eram amarelos. Com uma cor
   para cada, o trio da marca aparece junto, lado a lado — é a leitura mais
   direta do "as três cores têm o mesmo peso" que o manual pede. O amarelo fica
   com o primeiro (mantém o disco original, glifo escuro por cima); azul e
   vermelho entram cheios, com glifo branco, ambos acima de 4.5:1. */
.rbt-servicos-lista .rbt-servico:nth-child(2) .rbt-servico__icone { background: var(--ranieri-azul); }
.rbt-servicos-lista .rbt-servico:nth-child(2) .rbt-servico__icone i { color: #fff; }
.rbt-servicos-lista .rbt-servico:nth-child(3) .rbt-servico__icone { background: var(--ranieri-vermelho); }
.rbt-servicos-lista .rbt-servico:nth-child(3) .rbt-servico__icone i { color: #fff; }

/* ---- Dark mode: as três cores precisam clarear ---------------------------
   Azul #0565A4 e vermelho #A91918 são escuros por natureza — sobre o fundo
   escuro do tema noturno eles somem (o disco vermelho da faixa ficou quase
   invisível na primeira captura). Aqui entram as versões claras das mesmas
   cores, que é o que a paleta do dark já faz em outros pontos do site
   (--barra-1/2/3, trilha-regua), e o fundo do disco ganha mais alpha para o
   círculo continuar existindo. */
.active-dark-mode .rbt-hero__faixa i { color: #6FB6E4; background: rgba(111, 182, 228, .18); }
.active-dark-mode .rbt-hero__faixa li:nth-child(2) i { color: #F09A98; background: rgba(240, 154, 152, .18); }

.active-dark-mode .rbt-card-col .rbt-card::before { background: #46AEE2; }
.active-dark-mode .rbt-card-col:nth-child(3n+2) .rbt-card::before { background: #F09A98; }
.active-dark-mode .rbt-card-col:nth-child(3n+3) .rbt-card::before { background: var(--ranieri-amarelo); }
.active-dark-mode .rbt-card-col .transparent-button svg g { stroke: #46AEE2; }
.active-dark-mode .rbt-card-col:nth-child(3n+2) .rbt-card:hover .transparent-button svg g { stroke: #F09A98; }
.active-dark-mode .rbt-card-col:nth-child(3n+3) .rbt-card:hover .transparent-button svg g { stroke: var(--ranieri-amarelo); }

/* O disco cheio (serviços) mantém a cor institucional no claro; no escuro ele
   clareia junto, senão vira um buraco preto com um glifo branco dentro. */
.active-dark-mode .rbt-servicos-lista .rbt-servico:nth-child(2) .rbt-servico__icone { background: #1B7FC4; }
.active-dark-mode .rbt-servicos-lista .rbt-servico:nth-child(3) .rbt-servico__icone { background: #C33230; }

/* ---- Segunda leva: convites, blog, rotina e rodapé ----------------------- */

/* Convite do canal: o selo era branco translúcido sobre a foto escura, e o
   bloco inteiro ficava só em amarelo (o play e o link). O vermelho cheio no
   selo é o acento que faltava — sobre a foto escurecida ele tem 7.4:1 com o
   branco e não disputa com o botão de play, que continua sendo o foco. */
.rbt-convite__selo { background: var(--ranieri-vermelho); color: #fff; }
/* O cartão amarelo mantém o selo escuro com texto amarelo, do desenho original:
   vermelho sobre amarelo, com branco por cima, empilha três saturações no mesmo
   objeto pequeno. O acento vermelho fica só no card escuro, onde tem espaço. */
.rbt-convite__selo--escuro { background: var(--ranieri-cinza-80); color: var(--ranieri-amarelo); }

/* Nossa Rotina fecha o rodízio dos selos da home em amarelo — antes dela vêm
   parceiros (azul) e Rani (vermelho), então nenhuma cor se repete em sequência.
   Ordem final na página: azul · amarelo · vermelho · amarelo · vermelho · azul · amarelo. */
.rbt-rotina-selo { background: rgba(250, 202, 0, .20); color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-rotina-selo { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }

/* Rodapé: o hover dos links vira vermelho. É o único lugar em que o vermelho
   toca navegação, e funciona porque é ESTADO de hover — some quando o ponteiro
   sai, então não compete com o azul dos links em repouso nem sugere alerta. */
/* Usa o MESMO seletor da regra original (`.rbt-rodape__coluna a:hover`, que
   pintava de azul) em vez de um seletor mais genérico: assim a vitória vem da
   ordem no arquivo, sem depender de contar especificidade — e some a chance de
   um `:not()` esperto perder para uma regra antiga mais direta. */
.rbt-rodape__coluna a:hover { color: var(--ranieri-vermelho); }
.rbt-rodape__mail:hover, .rbt-rodape__tel:hover { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-rodape__coluna a:hover,
.active-dark-mode .rbt-rodape__mail:hover,
.active-dark-mode .rbt-rodape__tel:hover { color: #F09A98; }

/* ---- Páginas internas: uma cor de acento por página ---------------------
   Todos os selos de topo das internas eram amarelos. Duas páginas passam ao
   vermelho, o que dá a cada uma identidade própria e leva o acento para fora
   da home — sem tocar nas escalas monocromáticas (a régua de etapas de
   /cursos vai do azul claro ao escuro porque é PROGRESSÃO, não categoria:
   colorir aquilo destruiria a leitura de "início → fim"). */
.rbt-svc-selo, .rbt-pod-selo { background: var(--ranieri-vermelho); color: #fff; }
.active-dark-mode .rbt-svc-selo, .active-dark-mode .rbt-pod-selo { background: #C33230; color: #fff; }

/* Os três serviços têm as mesmas cores na home e na página interna: quem clicou
   no card amarelo da home encontra o mesmo amarelo aqui. Cor com função de
   reconhecimento só funciona se ela não mudar de página para página. */
.rbt-svc-indice li:nth-child(2) .rbt-svc-indice__icone { background: rgba(5, 101, 164, .12); color: var(--ranieri-azul); }
.rbt-svc-indice li:nth-child(3) .rbt-svc-indice__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-svc-indice li:nth-child(1) .rbt-svc-indice__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-svc-indice li:nth-child(2) .rbt-svc-indice__icone { background: rgba(111, 182, 228, .18); color: #6FB6E4; }
.active-dark-mode .rbt-svc-indice li:nth-child(3) .rbt-svc-indice__icone { background: rgba(240, 154, 152, .18); color: #F09A98; }
.active-dark-mode .rbt-svc-indice li:nth-child(1) .rbt-svc-indice__icone { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }

/* =========================================================================
   Nossa História: as três cores (2026-08-21)
   A página inteira estava em azul e amarelo. Os pontos abaixo foram
   escolhidos por serem CONJUNTOS — trio de números, cinco valores, o par
   missão/visão: em conjunto, a variação de cor lê como sistema, não como
   enfeite solto. O que NÃO foi tocado: a régua da linha do tempo, que vai do
   azul ao amarelo porque representa a passagem do tempo (1995 → hoje) —
   quebrar aquele gradiente com um terceiro tom destrói a leitura de percurso.
   ========================================================================= */

/* Os três números do topo (30 anos · 22 como Ranieri · 4 endereços) eram três
   ícones azuis. Um para cada cor: é o mesmo trio dos serviços, e aqui ele abre
   a página. O amarelo mantém glifo escuro; azul e vermelho, glifo na cor. */
.rbt-hist-numeros li:nth-child(2) i { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-hist-numeros li:nth-child(3) i { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-hist-numeros li:nth-child(2) i { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-hist-numeros li:nth-child(3) i { background: rgba(240, 154, 152, .18); color: #F09A98; }

/* Missão e Visão: os dois discos eram amarelos, dentro do bloco azul. Sobre o
   azul institucional, o vermelho CHEIO funciona (é o que a Proposta Pedagógica
   da home já faz nos pilares) — o que não funciona ali é vermelho translúcido,
   que esverdeia. Missão fica amarela, Visão vira vermelha. */
.rbt-hist-mv__cartao:nth-of-type(2) .rbt-hist-mv__icone,
.rbt-hist-mv__cartao + .rbt-hist-mv__cartao .rbt-hist-mv__icone {
  background: var(--ranieri-vermelho);
  color: #fff;
}

/* Os cinco valores: ícones azuis em rodízio pelas três cores. Cinco não divide
   por três, então a sequência fecha em azul-vermelho-amarelo-azul-vermelho —
   nenhuma cor encosta nela mesma. */
.rbt-hist-valor:nth-child(3n+2) .rbt-hist-valor__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-hist-valor:nth-child(3n+3) .rbt-hist-valor__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-hist-valor:nth-child(3n+2) .rbt-hist-valor__icone { background: rgba(240, 154, 152, .18); color: #F09A98; }
.active-dark-mode .rbt-hist-valor:nth-child(3n+3) .rbt-hist-valor__icone { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }

/* Selo do topo em vermelho: dá à página o mesmo acento próprio que Serviços e
   Ranicast ganharam, e é o primeiro elemento colorido que o visitante vê. */
.rbt-hist-selo { border-color: rgba(169, 25, 24, .35); color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-hist-selo { border-color: rgba(240, 154, 152, .4); color: #F09A98; }

/* Marcos da linha do tempo: os quatro badges de ano eram amarelos e os quatro
   nós, azuis. Ano e nó do mesmo marco passam a compartilhar uma cor, e os
   marcos alternam — 1995 azul, 1998 amarelo, 2004 vermelho, hoje amarelo.
   Isto NÃO é a régua (que segue em gradiente azul→amarelo, porque ali a cor
   representa a passagem do tempo): aqui cada marco é um evento distinto, então
   a variação identifica em vez de confundir. */
/* GOTCHA: a lista intercala marcos com "apartes" (`.rbt-hist-aparte`), então
   `nth-child(3)` pegava o SEGUNDO marco. `nth-child(N of .rbt-hist-marco)`
   conta só os marcos — e onde o seletor não for suportado a regra é ignorada
   inteira, deixando o amarelo padrão, que é uma degradação aceitável. */
.rbt-hist-marco:nth-child(1 of .rbt-hist-marco) .rbt-hist-marco__ano { background: var(--ranieri-azul); color: #fff; }
.rbt-hist-marco:nth-child(1 of .rbt-hist-marco) .rbt-hist-marco__no { border-color: rgba(5, 101, 164, .45); color: var(--ranieri-azul); }
.rbt-hist-marco:nth-child(3 of .rbt-hist-marco) .rbt-hist-marco__ano { background: var(--ranieri-vermelho); color: #fff; }
.rbt-hist-marco:nth-child(3 of .rbt-hist-marco) .rbt-hist-marco__no { border-color: rgba(169, 25, 24, .45); color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-hist-marco:nth-child(3 of .rbt-hist-marco) .rbt-hist-marco__no { border-color: rgba(240, 154, 152, .5); color: #F09A98; }

/* Títulos dos cartões desta página estavam em azul-escuro, enquanto os cartões
   da home usam cinza-80. Voltar ao cinza faz duas coisas de uma vez: alinha as
   duas páginas (o mesmo tipo de objeto deve ter a mesma cor de título) e tira
   do azul um punhado de elementos que ele ocupava sem precisar — o azul volta a
   marcar navegação e ação, não texto corrido. É a maior alavanca de equilíbrio
   da página: adicionar vermelho não compensa 92 elementos azuis. */
.rbt-hist-marco__corpo h3,
.rbt-hist-valor h3 { color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-hist-marco__corpo h3,
.active-dark-mode .rbt-hist-valor h3 { color: var(--color-white-dark); }

/* A régua do tempo ia do azul ao amarelo. Passa a atravessar as três cores da
   marca — azul (1995) · vermelho (o meio da história) · amarelo (hoje). Continua
   sendo UMA progressão contínua, então a leitura de percurso se mantém; o que
   muda é que a linha do tempo inteira virou a marca, e não dois terços dela. */
.rbt-hist-regua__preenchimento {
  background: linear-gradient(90deg,
    var(--ranieri-azul) 0%,
    var(--ranieri-azul) 34%,
    var(--ranieri-vermelho) 62%,
    var(--ranieri-amarelo) 100%);
}

/* Rótulo dos apartes ("o que mudou na educação"): eram azuis como todo o resto.
   Em vermelho, separam-se visualmente dos marcos — que é justamente o papel
   deles no texto: comentário lateral, não evento da escola. */
.rbt-hist-aparte__rotulo { color: var(--ranieri-vermelho); }
.rbt-hist-aparte__rotulo i { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-hist-aparte__rotulo,
.active-dark-mode .rbt-hist-aparte__rotulo i { color: #F09A98; }

/* O cartão de cada marco acendia em azul no hover, independentemente do marco.
   Agora acende na cor do próprio marco: o mesmo sinal que o badge de ano já dá. */
.rbt-hist-marco:nth-child(3 of .rbt-hist-marco) .rbt-hist-marco__cartao:hover { border-color: rgba(169, 25, 24, .45); }
.rbt-hist-marco:nth-child(2 of .rbt-hist-marco) .rbt-hist-marco__cartao:hover { border-color: rgba(250, 202, 0, .65); }

/* O número de cada KPI acompanha a cor do próprio ícone — antes os três eram
   azuis. O do meio fica azul mesmo: "22" em amarelo sobre branco daria 1.7:1,
   e número grande é texto, não decoração. Só o terceiro vai para o vermelho. */
.rbt-hist-numeros li:nth-child(3) strong { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-hist-numeros li:nth-child(3) strong { color: #F09A98; }

/* O nó do marco de 1998 estava azul enquanto o badge dele é amarelo. Passa a
   acompanhar: cor do nó e cor do ano contam a mesma coisa. */
.rbt-hist-marco:nth-child(2 of .rbt-hist-marco) .rbt-hist-marco__no { border-color: rgba(250, 202, 0, .75); color: #8A6D00; }
.active-dark-mode .rbt-hist-marco:nth-child(2 of .rbt-hist-marco) .rbt-hist-marco__no { border-color: rgba(250, 202, 0, .55); color: var(--ranieri-amarelo); }

/* =========================================================================
   Proposta Pedagógica: as três cores (2026-08-21)
   Página em azul 72% / amarelo 25% / vermelho 3%. Aqui o desequilíbrio tinha
   uma segunda fonte além do azul: TODO disco de ícone era amarelo — os quatro
   pilares e as seis competências. Rodar essas duas famílias resolve os dois
   lados de uma vez (tira excesso de amarelo E dá lugar ao vermelho), sem
   inventar enfeite novo.
   ========================================================================= */

/* Três números do topo (4 pilares · 6 competências · 5 etapas): um por cor,
   como em Nossa História e nos serviços. */
.rbt-prop-numeros li:nth-child(2) i { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-prop-numeros li:nth-child(3) i { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-prop-numeros li:nth-child(3) strong { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-prop-numeros li:nth-child(2) i { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-prop-numeros li:nth-child(3) i { background: rgba(240, 154, 152, .18); color: #F09A98; }
.active-dark-mode .rbt-prop-numeros li:nth-child(3) strong { color: #F09A98; }

/* Os quatro pilares: disco, rótulo ("PILAR 2 DE 4") e o fio da frase-chave
   passam a compartilhar a cor do pilar. São quatro para três cores, então o
   ciclo fecha em amarelo · azul · vermelho · amarelo — nenhuma encosta em si
   mesma, e o primeiro segue amarelo como estava. */
.rbt-prop-pilar:nth-child(2) .rbt-prop-pilar__marca { background: var(--ranieri-azul); color: #fff; }
.rbt-prop-pilar:nth-child(2) .rbt-prop-pilar__chave { border-left-color: var(--ranieri-azul); }
.rbt-prop-pilar:nth-child(3) .rbt-prop-pilar__marca { background: var(--ranieri-vermelho); color: #fff; }
.rbt-prop-pilar:nth-child(3) .rbt-prop-pilar__chave { border-left-color: var(--ranieri-vermelho); }
.rbt-prop-pilar:nth-child(3) .rbt-prop-pilar__rotulo { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-prop-pilar:nth-child(3) .rbt-prop-pilar__rotulo { color: #F09A98; }

/* As seis competências: os seis discos eram amarelos. Rodam de três em três.
   O glifo do disco amarelo continua escuro; nos cheios, branco. */
.rbt-prop-comp:nth-child(3n+2) .rbt-prop-comp__icone { background: var(--ranieri-azul); color: #fff; }
.rbt-prop-comp:nth-child(3n+3) .rbt-prop-comp__icone { background: var(--ranieri-vermelho); color: #fff; }
.active-dark-mode .rbt-prop-comp:nth-child(3n+2) .rbt-prop-comp__icone { background: #1B7FC4; }
.active-dark-mode .rbt-prop-comp:nth-child(3n+3) .rbt-prop-comp__icone { background: #C33230; }

/* Mesma correção feita em Nossa História: o título dentro do cartão volta ao
   cinza-80 da home. Os cartões das duas páginas são o mesmo objeto e estavam
   com cores diferentes — além de equilibrar, isto conserta a inconsistência.
   O azul continua marcando o que é navegável (rótulo do pilar, links). */
.rbt-prop-comp__corpo h3 { color: var(--ranieri-cinza-80); }

/* Selo do topo em vermelho, dando à página o acento próprio que Serviços,
   Ranicast e Nossa História já têm. */
.rbt-prop-selo { color: var(--ranieri-vermelho); border-color: rgba(169, 25, 24, .35); }
.active-dark-mode .rbt-prop-selo { color: #F09A98; border-color: rgba(240, 154, 152, .4); }

/* =========================================================================
   Demais páginas: rodízio das três cores nos conjuntos de ícones
   -------------------------------------------------------------------------
   Cada página tinha uma família de discos toda da mesma cor (azul nas de
   contato/atalhos, amarelo nas de entrega/quem-é). Rodar essas famílias é o
   que muda a leitura da página inteira sem inventar decoração nova. Regras de
   sempre: amarelo só como fundo com glifo escuro; azul e vermelho cheios com
   glifo branco, ou translúcidos com glifo na cor.
   ========================================================================= */

/* --- Cursos (/cursos.php): a construção da trilha --- */
.rbt-trilha-const:nth-child(3n+2) .rbt-trilha-const__icone { background: var(--ranieri-azul); color: #fff; }
.rbt-trilha-const:nth-child(3n+3) .rbt-trilha-const__icone { background: var(--ranieri-vermelho); color: #fff; }
.active-dark-mode .rbt-trilha-const:nth-child(3n+2) .rbt-trilha-const__icone { background: #1B7FC4; }
.active-dark-mode .rbt-trilha-const:nth-child(3n+3) .rbt-trilha-const__icone { background: #C33230; }

/* --- Serviços: "para quem é" --- */
.rbt-svc-quem:nth-child(3n+2) .rbt-svc-quem__icone { background: var(--ranieri-azul); color: #fff; }
.rbt-svc-quem:nth-child(3n+3) .rbt-svc-quem__icone { background: var(--ranieri-vermelho); color: #fff; }

/* --- Eu sou Ranieri: atalhos e extras (eram todos azuis) --- */
.rbt-sou-atalho:nth-child(3n+2) .rbt-sou-atalho__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-sou-atalho:nth-child(3n+3) .rbt-sou-atalho__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-sou-extra:nth-child(3n+2) .rbt-sou-extra__icone { color: var(--ranieri-cinza-80); background: rgba(250, 202, 0, .22); }
.rbt-sou-extra:nth-child(3n+3) .rbt-sou-extra__icone { color: var(--ranieri-vermelho); background: rgba(169, 25, 24, .12); }
.active-dark-mode .rbt-sou-atalho:nth-child(3n+2) .rbt-sou-atalho__icone,
.active-dark-mode .rbt-sou-extra:nth-child(3n+2) .rbt-sou-extra__icone { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-sou-atalho:nth-child(3n+3) .rbt-sou-atalho__icone,
.active-dark-mode .rbt-sou-extra:nth-child(3n+3) .rbt-sou-extra__icone { background: rgba(240, 154, 152, .18); color: #F09A98; }

/* --- Contato: canais de atendimento e as quatro unidades --- */
.rbt-cont-canal:nth-child(3n+2) .rbt-cont-canal__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-cont-canal:nth-child(3n+3) .rbt-cont-canal__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-cont-unidade:nth-child(3n+2) .rbt-cont-unidade__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-cont-unidade:nth-child(3n+3) .rbt-cont-unidade__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-cont-canal:nth-child(3n+2) .rbt-cont-canal__icone,
.active-dark-mode .rbt-cont-unidade:nth-child(3n+2) .rbt-cont-unidade__icone { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-cont-canal:nth-child(3n+3) .rbt-cont-canal__icone,
.active-dark-mode .rbt-cont-unidade:nth-child(3n+3) .rbt-cont-unidade__icone { background: rgba(240, 154, 152, .18); color: #F09A98; }

/* --- Rani Conexão: formatos e mudanças --- */
.rbt-conex-formato:nth-child(3n+2) .rbt-conex-formato__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-conex-formato:nth-child(3n+3) .rbt-conex-formato__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-conex-mudanca:nth-child(3n+2) .rbt-conex-mudanca__icone { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-conex-mudanca:nth-child(3n+3) .rbt-conex-mudanca__icone { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }

/* --- E-books: o que vem na entrega --- */
.rbt-ebk-entrega:nth-child(3n+2) .rbt-ebk-entrega__icone { background: var(--ranieri-azul); color: #fff; }
.rbt-ebk-entrega:nth-child(3n+3) .rbt-ebk-entrega__icone { background: var(--ranieri-vermelho); color: #fff; }

/* --- Títulos de cartão: cinza-80, como na home ---------------------------
   Mesma correção já feita em Nossa História e Proposta. Estas páginas usavam
   azul-escuro no título DENTRO do cartão, enquanto o mesmo objeto na home é
   cinza. Alinhar é a maior alavanca de equilíbrio: cada família dessas vale
   de 4 a 12 elementos, e nenhum aplique de vermelho compensa isso. O azul
   segue marcando o que é clicável — repare que os títulos-LINK (trilha-etapa,
   pod-card) ficam de fora, porque ali o azul indica navegação. */
.rbt-etp-card h3,
.rbt-svc-amco__corpo h3,
.rbt-sou-extra h3,
.rbt-cont-unidade h4,
.rbt-conex-mudanca h3,
.rbt-conex-quem__cartao h3,
.rbt-mat-item h3,
.rbt-ebk-parte h3,
.rbt-ebk-entrega h3 { color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-etp-card h3,
.active-dark-mode .rbt-svc-amco__corpo h3,
.active-dark-mode .rbt-sou-extra h3,
.active-dark-mode .rbt-cont-unidade h4,
.active-dark-mode .rbt-conex-mudanca h3,
.active-dark-mode .rbt-conex-quem__cartao h3,
.active-dark-mode .rbt-mat-item h3,
.active-dark-mode .rbt-ebk-parte h3,
.active-dark-mode .rbt-ebk-entrega h3 { color: var(--color-white-dark); }

/* --- Selo do topo: uma cor de acento por página --------------------------
   Serviços, Ranicast, Nossa História e Proposta já tinham ganhado o seu. Aqui
   entram os que faltavam, alternando para nenhuma página vizinha repetir. */
.rbt-trilha-selo { color: var(--ranieri-vermelho); border-color: rgba(169, 25, 24, .35); }
.rbt-cont-selo   { color: var(--ranieri-vermelho); border-color: rgba(169, 25, 24, .35); }
.rbt-conex-selo  { background: rgba(250, 202, 0, .20); color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-trilha-selo,
.active-dark-mode .rbt-cont-selo { color: #F09A98; border-color: rgba(240, 154, 152, .4); }
.active-dark-mode .rbt-conex-selo { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }

/* --- Páginas de curso: cabeçalho de seção em rodízio ---------------------
   Cada página de curso tem 4 a 6 seções numeradas, e todas tinham o mesmo
   cabeçalho: selo azul + fio amarelo. Agora o selo e o fio de cada seção
   compartilham uma cor, e as seções alternam — a página inteira passa a ter as
   três cores no lugar de mais azul. É o mesmo raciocínio dos marcos da linha
   do tempo: cada seção é um assunto distinto, não um degrau de escala. */
.rbt-etp-secao:nth-child(3n+2) .rbt-etp-secao__num { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-etp-secao:nth-child(3n+2) .rbt-etp-secao__cab h2::after { background: var(--ranieri-azul); }
.rbt-etp-secao:nth-child(3n+3) .rbt-etp-secao__num { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.rbt-etp-secao:nth-child(3n+3) .rbt-etp-secao__cab h2::after { background: var(--ranieri-vermelho); }
.active-dark-mode .rbt-etp-secao:nth-child(3n+2) .rbt-etp-secao__num { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-etp-secao:nth-child(3n+3) .rbt-etp-secao__num { background: rgba(240, 154, 152, .18); color: #F09A98; }
.active-dark-mode .rbt-etp-secao:nth-child(3n+3) .rbt-etp-secao__cab h2::after { background: #F09A98; }

/* O título da seção acompanha o cinza dos demais títulos; o azul continua no
   selo numerado, onde ainda marca a estrutura da página. */
.rbt-etp-secao__cab h2 { color: var(--ranieri-cinza-80); }
.active-dark-mode .rbt-etp-secao__cab h2 { color: var(--color-white-dark); }

/* --- Serviços: cabeçalho numerado de cada serviço ------------------------
   `.rbt-svc-cab__num` marcava 01/02/03 sempre em azul, e os três serviços já
   têm cor própria no índice do topo (amarelo · azul · vermelho). O número
   passa a repetir a cor do seu serviço: quem desceu a página reconhece de
   qual dos três está lendo sem voltar ao índice. */
.rbt-svc-bloco:nth-of-type(1) .rbt-svc-cab__num { background: rgba(250, 202, 0, .22); color: var(--ranieri-cinza-80); }
.rbt-svc-bloco:nth-of-type(3) .rbt-svc-cab__num { background: rgba(169, 25, 24, .12); color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-svc-bloco:nth-of-type(1) .rbt-svc-cab__num { background: rgba(250, 202, 0, .16); color: var(--ranieri-amarelo); }
.active-dark-mode .rbt-svc-bloco:nth-of-type(3) .rbt-svc-cab__num { background: rgba(240, 154, 152, .18); color: #F09A98; }

/* --- Cursos: cartões de etapa ------------------------------------------
   Os cinco cartões da trilha herdavam a mesma faixa azul. Cada etapa recebe a
   cor que já usa no card da home (Berçário azul · Ed. Infantil vermelho ·
   Anos Iniciais amarelo · Anos Finais azul · Médio vermelho) — a mesma etapa
   tem a mesma cor nas duas páginas, senão a cor não ajuda a reconhecer nada. */
.rbt-trilha-etapa:nth-child(3n+2) .rbt-trilha-etapa__ordem { background: var(--ranieri-vermelho); color: #fff; }
.rbt-trilha-etapa:nth-child(3n+3) .rbt-trilha-etapa__ordem { background: var(--ranieri-amarelo); color: var(--ranieri-cinza-80); }
.rbt-trilha-etapa:nth-child(3n+2) .rbt-trilha-etapa__faixa { color: var(--ranieri-vermelho); }
.active-dark-mode .rbt-trilha-etapa:nth-child(3n+2) .rbt-trilha-etapa__ordem { background: #C33230; }
.active-dark-mode .rbt-trilha-etapa:nth-child(3n+2) .rbt-trilha-etapa__faixa { color: #F09A98; }

/* ---- Vídeo no card de projeto (mesma fachada do Ranicast) ---------------
   A capa é imagem local e o iframe do YouTube só nasce no clique — nenhuma
   visita carrega rastreador sem pedir, que é o que a política de privacidade
   promete. Copia a mecânica e o visual de `.rbt-pod-player`, ajustando a
   escala para o tamanho do card: play de 86px ficaria maior que o cartão. */
.rbt-etp-card__player {
  position: relative;
  overflow: hidden;
  background: var(--ranieri-azul);
  aspect-ratio: 4 / 3;
  border-radius: 18px 18px 0 0;
}
.rbt-etp-card__player--ativo { aspect-ratio: 16 / 9; }
.rbt-etp-card__player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbt-etp-card__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.rbt-etp-card__btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: 0;
  padding: 0 16px;
  background: rgba(3, 32, 54, .32);
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(2, 30, 54, .5);
  transition: background .3s ease;
}
.rbt-etp-card__btn:hover { background: rgba(3, 32, 54, .46); }
.rbt-etp-card__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ranieri-amarelo);
  color: var(--ranieri-azul);
  font-size: 22px;
  box-shadow: 0 12px 28px rgba(2, 30, 54, .3);
  transition: transform .3s ease;
}
.rbt-etp-card__btn:hover .rbt-etp-card__play { transform: scale(1.08); }
.rbt-etp-card__btn:focus-visible { outline: 3px solid var(--ranieri-amarelo); outline-offset: -3px; }

/* =========================================================================
   Sem círculos nas aberturas (cliente, 14/10/2026)
   Os três círculos (vermelho/azul/amarelo) saíram do topo de todas as páginas,
   como já tinham saído da hero da home (.rbt-hero__fundo). Os desenhos de cada
   __fundo continuam lá em cima, só escondidos: para voltar, apagar este bloco.
   Os arcos brancos dentro dos blocos azuis (__fundo de mv, etapas, comum,
   tour, proxima, quem, fala, casa, conexao, agenda, form) NÃO são estes e
   continuam.
   ========================================================================= */
.rbt-hist-abertura__fundo,
.rbt-prop-abertura__fundo,
.rbt-trilha-abertura__fundo,
.rbt-etp-abertura__fundo,
.rbt-svc-abertura__fundo,
.rbt-sou-abertura__fundo,
.rbt-cont-abertura__fundo,
.rbt-pod-abertura__fundo,
.rbt-pod-ep__fundo,
.rbt-conex-abertura__fundo,
.rbt-mat-abertura__fundo,
.rbt-priv-abertura__fundo,
.rbt-e404-fundo,
.rbt-ebk-abertura__fundo { display: none; }