/* ==========================================================================
   A MARCA NA TELA
   ==========================================================================

   Diagnóstico do Thiago em 26/08: "meu site parece que um pedreiro que fez",
   comparando com o carwow.co.uk.

   Olhando o carwow lado a lado, quatro decisões explicam a diferença — e o
   site fazia o contrário nas quatro:

     1. A cor da marca ocupa a tela inteira. Lá é uma parede de ciano.
        Aqui o dourado aparecia só em fio de 1px e em rótulo de 12px.
     2. Tipografia de display: 56px, peso 700, caixa alta, entrelinha curta.
        Aqui era Inter 800 em caixa normal — macio.
     3. Quase nenhuma borda. Blocos preenchidos, não contornados.
        Aqui: caixa branca + borda cinza 1px + canto arredondado, sete vezes.
        É o componente mais genérico que existe na web.
     4. Composição — imagem sangrando, assimetria.

   E havia uma contradição: a marca Royal é PRETA COM DOURADO, e o site estava
   90% branco e cinza. Este arquivo inverte isso. O escuro passa a ser o
   padrão; o claro vira exceção, usada onde há texto longo para ler.

   Carrega depois de home.css e paginas.css, por isso vence sem !important.
   ========================================================================== */

:root {
  --rg-preto: #0E1011;          /* mais fundo que o charcoal, para dar camada */
  --rg-superficie: #16191B;     /* bloco sobre o preto */
  --rg-superficie-alta: #1D2124;
  --rg-fio: rgba(178, 187, 192, 0.24);
}

/* --------------------------------------------------------------------------
   1. Tipografia de display
   -------------------------------------------------------------------------- */

.rg-root h1 {
  font-size: clamp(38px, 6.2vw, 76px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.rg-root h2 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.rg-root h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* O rótulo de seção deixa de ser cinza miúdo e vira marcação dourada.

   ATENÇÃO À VARIANTE: `rg-eyebrow` fica sobre fundo escuro e usa o dourado
   claro; `rg-eyebrow-claro` fica sobre fundo CLARO e precisa do dourado
   escuro. A primeira versão desta regra pintou as duas de #C9A84C e derrubou
   o contraste para 2,13:1 em /sobre/ e /ferramentas/ — reprova em AA. */
.rg-root .rg-eyebrow,
.rg-root .rg-eyebrow-claro {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rg-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Um traço dourado antes do rótulo: marca de seção, não decoração. */
.rg-root .rg-eyebrow::before,
.rg-root .rg-eyebrow-claro::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rg-gold);
  flex: none;
}

/* A variante de fundo claro: mesma marcação, tom que passa em AA. */
.rg-root .rg-eyebrow-claro { color: var(--rg-gold-dark); }
.rg-root .rg-eyebrow-claro::before { background: var(--rg-gold-dark); }

/* Dentro de seção escura da home, o `-claro` volta ao dourado claro — o nome
   da classe diz respeito ao fundo original, não ao que está aqui. */
.home .rg-secao:not(.rg-secao-cronicas) .rg-eyebrow-claro { color: var(--rg-gold); }
.home .rg-secao:not(.rg-secao-cronicas) .rg-eyebrow-claro::before { background: var(--rg-gold); }
.rg-escuro .rg-eyebrow-claro { color: var(--rg-gold); }
.rg-escuro .rg-eyebrow-claro::before { background: var(--rg-gold); }

/* --------------------------------------------------------------------------
   2. O escuro vira o padrão

   A home tinha seis seções claras contra uma escura. Agora o preto é a base e
   o claro aparece só onde há texto longo — as crônicas — para não cansar a
   leitura. Alternância deliberada, não aleatória.
   -------------------------------------------------------------------------- */

.home .rg-root { background: var(--rg-preto); }

.home .rg-secao {
  background: var(--rg-preto);
  color: var(--rg-on-dark-soft);
}
.home .rg-secao h2,
.home .rg-secao h3 { color: var(--rg-on-dark); }
.home .rg-secao p { color: var(--rg-on-dark-soft); }
.home .rg-secao strong { color: var(--rg-on-dark); }

/* A faixa alternada deixa de ser cinza-claro e vira uma camada acima do preto. */
.home .rg-secao-alt { background: var(--rg-superficie); }

/* Exceção: as crônicas ficam claras. Texto para ler pede fundo claro, e o
   contraste com o resto da página marca "aqui é conteúdo". */
.home .rg-secao-cronicas {
  background: var(--rg-paper);
  color: var(--rg-text);
}
.home .rg-secao-cronicas h2,
.home .rg-secao-cronicas h3 { color: var(--rg-ink); }
.home .rg-secao-cronicas p { color: var(--rg-text); }

/* --------------------------------------------------------------------------
   3. Fim da caixa branca com borda

   Cartão contornado é o componente padrão de qualquer template. Aqui vira
   superfície preenchida, separada por elevação e por um fio dourado à
   esquerda — que é a marca aparecendo na estrutura, não em enfeite.
   -------------------------------------------------------------------------- */

.home .rg-momentos {
  background: transparent;
  border: 0;
  gap: 14px;
}
.home .rg-momento {
  background: var(--rg-superficie);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 28px 26px;
  transition: background-color .16s ease, border-color .16s ease;
}
.home .rg-momento:hover {
  background: var(--rg-superficie-alta);
  border-left-color: var(--rg-gold);
}
.home .rg-momento h3 { color: var(--rg-on-dark); font-size: 19px; }
.home .rg-momento p { color: var(--rg-on-dark-soft); }

.home .rg-servico {
  background: var(--rg-superficie);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
  transition: background-color .16s ease, border-color .16s ease;
}
.home .rg-servico:hover { background: var(--rg-superficie-alta); border-left-color: var(--rg-gold); }
.home .rg-servico h3 { color: var(--rg-on-dark); }
.home .rg-servico-quando { color: var(--rg-on-dark-soft); }
.home .rg-servico-entrega { color: var(--rg-on-dark-soft); }
.home .rg-servico-entrega strong { color: var(--rg-on-dark); }

/* O destaque de blindagem: onde o dourado ganha presença de parede. */
.home .rg-servico-destaque {
  background: var(--rg-superficie);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.home .rg-servico-destaque-texto {
  border-top: 0;
  border-left: 4px solid var(--rg-gold);
}
.home .rg-servico-destaque-texto h3 { color: var(--rg-on-dark); }
.home .rg-servico-destaque-lado {
  background: rgba(178, 187, 192, 0.08);
  border-left: 0;
  border-top: 1px solid var(--rg-fio);
}
.home .rg-destaque-lado-titulo { color: var(--rg-gold); }
.home .rg-destaque-lado-texto { color: var(--rg-on-dark-soft); }
@media (min-width: 981px) {
  .home .rg-servico-destaque-lado { border-top: 0; border-left: 1px solid var(--rg-fio); }
}

/* Links de ação no escuro. */
.home .rg-secao .rg-link-acao { color: var(--rg-on-dark); }
.home .rg-secao .rg-link-acao:hover { color: var(--rg-gold); }
.home .rg-secao-cronicas .rg-link-acao { color: var(--rg-ink); }

/* Notas e rodapés de seção. */
.home .rg-secao-nota { color: var(--rg-on-dark-soft); border-top-color: var(--rg-fio); }
.home .rg-secao-nota a { color: var(--rg-on-dark); text-decoration-color: var(--rg-gold); }
.home .rg-nota { color: var(--rg-on-dark-soft); }
.home .rg-secao-intro { color: var(--rg-on-dark-soft); }

/* --------------------------------------------------------------------------
   4. Blocos que mudaram de material na rodada anterior
   -------------------------------------------------------------------------- */

.home .rg-construcao-linha { color: var(--rg-on-dark-soft); }
.home .rg-construcao-linha a { color: var(--rg-on-dark); }

.home .rg-fala { border-left-color: var(--rg-gold); }
.home .rg-fala p { color: var(--rg-on-dark) !important; }
.home .rg-fala cite { color: var(--rg-gold); }

.home .rg-cronicas-home a { border-left-color: transparent; }
.home .rg-video-titulo { color: var(--rg-on-dark); }

/* A ferramenta já era escura; agora só encosta na nova base. */
.home .rg-secao-ferramenta.rg-escuro { background: var(--rg-superficie); }

/* --------------------------------------------------------------------------
   5. O herói ganha escala

   Era o único bloco com personalidade e mesmo assim estava contido. Com o
   resto da página escuro, ele precisa de mais respiro e mais peso para
   continuar sendo abertura e não só mais uma faixa preta.
   -------------------------------------------------------------------------- */

.home .rg-hero {
  background: var(--rg-preto);
  padding-block: clamp(64px, 10vh, 120px);
  border-bottom: 0;
  position: relative;
}
/* Um brilho dourado difuso atrás do título — a marca como luz, não como
   contorno. Não é imagem: é gradiente, então não pesa nada. */
.home .rg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(178,187,192,0.11), transparent 70%);
  pointer-events: none;
}
.home .rg-hero > * { position: relative; }

.home .rg-hero-assinatura img {
  width: 72px; height: 72px;
  border: 2px solid var(--rg-gold);
}
.home .rg-hero-assinatura strong { color: var(--rg-on-dark); }

/* Botão primário com presença de marca. */
.home .rg-btn-primario {
  background: var(--rg-gold);
  color: var(--rg-preto);
  border-color: var(--rg-gold);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.home .rg-btn-primario:hover { background: #C9D0D4; border-color: #C9D0D4; }

/* --------------------------------------------------------------------------
   6. Fecho
   -------------------------------------------------------------------------- */

.home .rg-cta-final {
  background: var(--rg-superficie);
  border-top: 3px solid var(--rg-gold);
}
.home .rg-cta-final h2 { color: var(--rg-on-dark); }
.home .rg-cta-final p { color: var(--rg-on-dark-soft); }

@media (max-width: 640px) {
  .home .rg-momento { padding: 22px 20px; }
  .home .rg-hero { padding-block: 52px; }
}

/* --------------------------------------------------------------------------
   7. Acertos do herói depois de ver na tela

   A 76px o título quebrava em quatro linhas desiguais, com "desigual."
   sozinha na última — o `<br>` fixo brigava com a quebra natural. Saiu o
   `<br>`; a quebra agora vem da largura, que é o que se controla.

   E a assinatura ficava encostada à esquerda dentro de um bloco centralizado.
   -------------------------------------------------------------------------- */

.home .rg-hero h1 {
  max-width: 15ch;
  margin-inline: auto;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.02;
}

.home .rg-hero-texto {
  max-width: 48ch;
  margin-inline: auto;
  font-size: 18px;
}

.home .rg-hero-assinatura {
  justify-content: center;
  margin-inline: auto;
  width: fit-content;
}

/* O bloco da caixa e dos atalhos centraliza junto com o resto. */
.home .rg-hero-caixa { margin-inline: auto; }

@media (max-width: 640px) {
  .home .rg-hero h1 { max-width: 100%; font-size: clamp(32px, 8.4vw, 42px); }
  .home .rg-hero-assinatura img { width: 60px; height: 60px; }
}

/* A saída secundária do momento usava `--rg-muted` (#687076), pensado para
   fundo claro. Sobre a superfície escura dá 3,51:1 e reprova em AA. Passa a
   usar o tom de apoio do escuro, que é a mesma intenção — discreto — no
   contraste certo. */
.home .rg-momento-servico { color: var(--rg-on-dark-soft); }
.home .rg-momento-servico:hover { color: var(--rg-gold); border-bottom-color: var(--rg-fio); }

/* ==========================================================================
   8. O sistema nas páginas internas

   A home virou preta; o resto do site continuava branco. Clicar em "Sobre"
   era voltar ao site antigo.

   A regra que fica: **home e cabeçalhos são a marca; corpo de página interna
   é leitura.** Fundo claro onde há texto para ler não é falta de identidade,
   é decisão — ler texto longo em fundo preto cansa. O que unifica são a
   tipografia, o rótulo dourado e o fim das caixas contornadas.
   ========================================================================== */

/* Cabeçalho de página interna ganha o mesmo peso do herói. */
.rg-cabecalho {
  background: var(--rg-preto);
  padding-block: clamp(56px, 8vh, 96px);
  position: relative;
}
.rg-cabecalho::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 60% at 30% 0%, rgba(178,187,192,0.10), transparent 70%);
  pointer-events: none;
}
.rg-cabecalho > * { position: relative; }
.rg-cabecalho h1 { color: var(--rg-on-dark); }
.rg-cabecalho-texto { color: var(--rg-on-dark-soft); font-size: 18px; max-width: 56ch; }

/* Cartões de página interna: mesma decisão da home, sem contorno. */
.rg-pagina .rg-servico,
.rg-pagina .rg-formato-item,
.rg-pagina .rg-passaporte-itens > li,
.rg-pagina .rg-bl-nivel {
  border: 0;
  border-left: 3px solid var(--rg-rule);
  border-radius: 10px;
  background: var(--rg-white);
  transition: border-color .16s ease;
}
.rg-pagina .rg-servico:hover,
.rg-pagina .rg-bl-nivel:hover { border-left-color: var(--rg-gold); }

/* Os indicadores da blindagem viram números com peso, não linhas de texto.

   Eles ficam sobre fundo BRANCO nesta página. A primeira versão usou o
   dourado claro e o tom de apoio do escuro — 2,29:1 e 1,76:1, reprova. */
.rg-bl-n {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--rg-gold-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rg-bl-l { color: var(--rg-muted); font-size: 14.5px; line-height: 1.5; }

/* Se algum dia esse bloco for para fundo escuro, os tons acompanham. */
.rg-escuro .rg-bl-n { color: var(--rg-gold); }
.rg-escuro .rg-bl-l { color: var(--rg-on-dark-soft); }

/* Fecho de página: a mesma faixa dourada que separa a marca do rodapé. */
.rg-cta-final { border-top: 3px solid var(--rg-gold); }

/* No celular o rótulo quebra em duas linhas e o traço fica sozinho à
   esquerda, órfão. Ali ele não marca nada — some. */
@media (max-width: 600px) {
  .rg-root .rg-eyebrow::before,
  .rg-root .rg-eyebrow-claro::before { display: none; }
  .rg-root .rg-eyebrow,
  .rg-root .rg-eyebrow-claro { gap: 0; letter-spacing: 0.16em; }
}

/* --------------------------------------------------------------------------
   9. Título de cartão não é título de seção

   A escala de display foi aplicada a `h2` sem distinguir onde o `h2` está.
   Em `/cronicas/` os cartões usam `h2` para o nome de cada crônica — e com a
   regra geral eles saíram a 46px, do tamanho do título da página. Um índice
   com cinco manchetes gigantes é ilegível como lista.

   A hierarquia real: título de página > título de seção > título de item.
   -------------------------------------------------------------------------- */
.rg-root .rg-cronica-item h2,
.rg-root .rg-cronicas-home h2,
.rg-root .rg-cronicas-home h3,
.rg-root .rg-momento h3,
.rg-root .rg-servico h3,
.rg-root .rg-bl-nivel h3 {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.012em;
}
.rg-root .rg-servico-destaque-texto h3 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.14;
}