/* =========================================================
   SMARIM EMPRESARIAL
   Paleta e tipografia conforme o Manual de Identidade Visual.
   ========================================================= */

/* FONTES · servidas pelo próprio site, em assets/fontes.
   Antes vinham do Google Fonts, e cada visita mandava o IP do
   visitante para o Google.
   Só o subconjunto "latin", que já cobre todo o português.
   Prata e Lato têm licença SIL Open Font License: podem ser
   hospedadas aqui. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fontes/lato-300.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/prata-400.woff2") format("woff2");
}

:root {
  /* cores da marca (manual, pág. 19) */
  --borgonha: #6d0024;
  --dourado: #b99b60;
  --cinza: #4d4c4e;
  --branco: #fefefe;

  /* Fontes provisórias. Quando houver licença da Conso/Corbel,
     troque estas duas linhas e os @font-face lá em cima. */
  --fonte-titulo: "Prata", Georgia, serif;
  --fonte-texto: "Lato", system-ui, -apple-system, sans-serif;

  /* --- variáveis originais das animações, como vieram nos seus arquivos ---
     Mantidas com os nomes e valores de lá, inclusive as cores próprias
     (#340A16 / #CBA14C), que diferem da paleta do manual. */
  --burgundy: #340a16;
  --gold: #cba14c;

  --mark-dur: 1.1s;
  --word-delay: 0.55s;
  --word-dur: 1s;

  --spin-dur: 2.6s;
  --enter-dur: 0.6s;

  /* desfoque do efeito vidro do cabeçalho (a cor vem do modo) */
  --desfoque: blur(14px) saturate(180%);

  --largura-max: 1152px;
}

/* =========================================================
   MODOS DO SITE · claro (branco) e borgonha (vermelho)
   O visitante troca pelo botão do cabeçalho; a escolha fica
   guardada no localStorage e o <head> a aplica antes da
   primeira pintura, para a página não piscar no modo errado.

   Daqui para baixo o CSS não usa mais a cor crua para
   superfície e texto: usa estes apelidos, e é só isso que
   muda entre um modo e outro.
   ========================================================= */
:root,
html[data-tema="claro"] {
  --fundo-pagina: var(--branco);
  --texto: var(--cinza);
  --titulo: var(--borgonha);
  --fundo-rodape: var(--borgonha);

  --vidro: rgba(254, 254, 254, 0.72);
  --menu-fundo: #fefefe;
  --linha: rgba(77, 76, 78, 0.12);

  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--borgonha);

  /* fundo animado: no claro ele é só um sopro de cor sobre o branco */
  --mancha-ouro: rgba(185, 155, 96, 0.32);
  --mancha-escura: rgba(109, 0, 36, 0.12);
  --marca-opacidade: 0.30; /* dourado sobre branco pede mais que o borgonha pedia */

  /* rótulos em versalete (sobretítulo do hero, títulos dos cartões):
     dourado escurecido, porque o do manual não se lê sobre branco */
  --rotulo: #8f7038;

  --cartao-fundo: rgba(254, 254, 254, 0.78);
  --cartao-borda: rgba(77, 76, 78, 0.14);
  --icone: var(--borgonha);

  /* realce dentro dos cartões: o fio, o tracinho da lista, a letra
     do pilar. É dourado enquanto o cartão for borgonha. */
  --realce: var(--dourado);
  /* fundo da capa do artigo quando ainda não há foto */
  --capa-fundo: linear-gradient(135deg, #4a0018, #2b0812);
  --cartao-sombra: rgba(52, 10, 22, 0.4);

  /* botão cheio: cor e texto, para poder virar dentro do cartão */
  --acao-fundo: var(--dourado);
  --acao-texto: var(--borgonha);

  --botao-hover-fundo: var(--borgonha);
  --botao-hover-texto: var(--branco);
  --vazado-borda: rgba(109, 0, 36, 0.35);
  --vazado-texto: var(--borgonha);
  --vazado-hover: var(--borgonha);
}

html[data-tema="borgonha"] {
  /* um tom abaixo do borgonha do manual, para o hero e o rodapé
     ainda se destacarem como blocos próprios sobre a página */
  --fundo-pagina: #5b001e;
  --texto: rgba(254, 254, 254, 0.8);
  --titulo: var(--branco);
  --fundo-rodape: #430016;

  --vidro: rgba(91, 0, 30, 0.72);
  --menu-fundo: #4c0019;
  --linha: rgba(185, 155, 96, 0.28);

  --menu-cor: rgba(254, 254, 254, 0.78);
  --menu-cor-ativa: var(--dourado);

  --mancha-ouro: rgba(185, 155, 96, 0.34);
  --mancha-escura: rgba(52, 10, 22, 0.78);
  --marca-opacidade: 0.28;

  --rotulo: var(--dourado);

  --cartao-fundo: rgba(109, 0, 36, 0.42);
  --cartao-borda: rgba(185, 155, 96, 0.26);
  --icone: var(--dourado);

  --realce: var(--dourado);
  --capa-fundo: linear-gradient(135deg, var(--borgonha), #340a16);
  --cartao-sombra: rgba(20, 4, 9, 0.55);

  --acao-fundo: var(--dourado);
  --acao-texto: var(--borgonha);

  --botao-hover-fundo: var(--branco);
  --botao-hover-texto: var(--borgonha);
  --vazado-borda: rgba(254, 254, 254, 0.4);
  --vazado-texto: var(--branco);
  --vazado-hover: var(--dourado);
}

/* O hero não redefine mais a força da marca nem das manchas: com uma
   camada só, quem manda é a da página, e um valor diferente aqui não
   teria onde ser desenhado. */

/* ---------- reset enxuto ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* A cor da página fica no <html>, não no <body>: assim a camada do
   fundo animado (z-index -1, dentro do body) aparece por cima dela.
   Se o fundo fosse do body, ele taparia a animação. */
html {
  height: 100%;
  background: var(--fundo-pagina);
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.45s ease;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: color 0.45s ease;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--titulo);
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* foco visível para navegação por teclado */
:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

/* =========================================================
   FUNDO ANIMADO · em todas as páginas
   Nasceu no hero da home e virou peça solta, para poder ficar
   atrás de qualquer página. Duas camadas de movimento em loop,
   ambas discretas de propósito:
   1) o símbolo em marca d'água, uma volta a cada 90s;
   2) duas manchas de cor que derivam pelo fundo.
   Só transform e opacity são animados — o navegador resolve na
   placa de vídeo e não repinta a página a cada quadro.

   As cores saem das variáveis do modo (--mancha-ouro,
   --mancha-escura, --marca-cor), então o mesmo fundo serve tanto
   ao modo branco quanto ao vermelho. O hero redefine as três
   mais fortes, porque lá o fundo é sempre borgonha.
   ========================================================= */
.fundo-anim {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* variante de página inteira: presa à viewport, atrás de todo o
   conteúdo. Vai logo no começo do <body> de cada página. */
.fundo-anim--pagina {
  position: fixed;
}

/* --- manchas de cor --- */
.fundo-anim__mancha {
  position: absolute;
  width: max(62vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.fundo-anim__mancha--dourada {
  top: -26vw;
  left: -16vw;
  background: radial-gradient(circle, var(--mancha-ouro), transparent 68%);
  animation: derivaDourada 26s ease-in-out infinite alternate;
}
.fundo-anim__mancha--escura {
  right: -22vw;
  bottom: -28vw;
  background: radial-gradient(circle, var(--mancha-escura), transparent 70%);
  animation: derivaEscura 34s ease-in-out infinite alternate;
}

@keyframes derivaDourada {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(9vw, 6vh, 0) scale(1.12);
  }
}
@keyframes derivaEscura {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(-8vw, -5vh, 0) scale(1);
  }
}

/* --- símbolo em marca d'água ---
   Uma arte só, o símbolo dourado, nos dois modos. Já tentei tingir o
   símbolo com uma máscara CSS: funciona em servidor, mas some quando
   a página é aberta direto do disco (file://), porque o Chrome trata
   o SVG da máscara como origem estranha. <img> abre em qualquer caso,
   e por isso a cor vem no arquivo, não no CSS. */
.fundo-anim__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vh, 680px);
  opacity: var(--marca-opacidade, 0.06);
  /* o dourado do manual é discreto: sem este empurrão de saturação ele
     chega no branco como um bege, não como ouro. Não é `mask`, é função
     do próprio CSS, então abre igual no file:// */
  filter: saturate(1.3);
  animation: giroLento 90s linear infinite;
  /* sem isto o navegador redesenha o SVG a cada quadro do giro,
     em vez de rasterizar uma vez e só girar a textura pronta */
  will-change: transform;
}
@keyframes giroLento {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* =========================================================
   CABEÇALHO
   ========================================================= */
/* Fundo translúcido com desfoque. Precisa de alfa no background —
   uma cor opaca não deixa nada passar para o backdrop-filter borrar. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vidro);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.45s ease;
}
/* ao rolar, uma linha fininha separa o menu do conteúdo */
.cabecalho.rolou {
  border-bottom-color: var(--linha);
}

/* Navegadores sem suporte a backdrop-filter ficariam com o menu
   semitransparente e o texto ilegível: devolvemos o fundo sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho,
  .menu {
    background: var(--barra-solida);
  }
}

/* A ordem no HTML é logo -> botão de modo -> hambúrguer -> menu,
   porque a regra do menu mobile depende de o hambúrguer vir antes
   dele. Quem coloca cada um no seu lugar na tela é o "order". */
.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding-block: 20px;
}

.cabecalho__logo {
  flex: none; /* sem isto o flex espreme a logo quando o menu aperta */
  margin-right: auto;
}
.cabecalho__logo img {
  height: 36px;
  width: auto;
}
/* A barra do cabeçalho é sempre do modo contrário ao da página
   (branco -> barra borgonha, vermelho -> barra branca), então a arte
   da logo vai ao contrário também: a BRANCA sobre a barra borgonha,
   a BORGONHA sobre a barra branca. Por isso os nomes das classes
   dizem qual é a arte, e não em que modo ela aparece. */
.cabecalho__marca--escura {
  display: none;
}
html[data-tema="borgonha"] .cabecalho__marca--escura {
  display: block;
}
html[data-tema="borgonha"] .cabecalho__marca--branca {
  display: none;
}

.menu {
  order: 1;
  display: flex;
  align-items: center;
  gap: 36px;
}

.menu a {
  position: relative;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--menu-cor);
  transition: color 0.25s ease;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: var(--dourado);
  transition: width 0.3s ease;
}
.menu a:hover {
  color: var(--menu-cor-ativa);
}
.menu a:hover::after,
.menu a[aria-current="page"]::after {
  width: 100%;
}
.menu a[aria-current="page"] {
  color: var(--menu-cor-ativa);
}

/* botão hambúrguer */
.menu-botao {
  order: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-botao span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--menu-cor-ativa);
  transition: transform 0.3s ease, opacity 0.3s ease,
    background-color 0.45s ease;
}
.menu-botao[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-botao[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-botao[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   BOTÃO DE MODO · branco <-> vermelho
   Só a bolinha, sem rótulo ao lado: ela mostra a cor do modo
   que o clique vai trazer. Quem diz em palavras é o aria-label
   e o title, escritos pelo site.js.

   O círculo tem 40px mesmo com a bolinha de 14: é o alvo do
   dedo, não o desenho. Uma bolinha de 14px seria pequena
   demais para acertar no celular.
   ========================================================= */
.tema-botao {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--menu-cor);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.tema-botao:hover {
  border-color: var(--dourado);
}

.tema-botao__bolha {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--borgonha);
  box-shadow: inset 0 0 0 1px rgba(185, 155, 96, 0.6);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
/* um empurrãozinho ao passar o mouse: sem texto, é o que confirma
   que ali tem um botão e não um enfeite */
.tema-botao:hover .tema-botao__bolha {
  transform: scale(1.15);
}
html[data-tema="borgonha"] .tema-botao__bolha {
  background: var(--branco);
}

/* =========================================================
   CONTEÚDO
   ========================================================= */
.principal {
  flex: 1;
}

/* Alinhado à esquerda, como o hero da home: o título das páginas
   internas é o mesmo tipo de abertura, só mais curto. Era centrado
   até 29/08/2026, quando ele pediu o mesmo tratamento da home. */
.titulo-pagina {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;
  padding-block: 96px;
}
.titulo-pagina h1 {
  /* mesma escala do h1 do hero, para as aberturas casarem */
  max-width: 18ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
}
.titulo-pagina .risco {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--dourado);
  margin-top: 28px;
}

/* =========================================================
   PÁGINA DE CONTATO
   Cartões translúcidos: o fundo animado da página passa por
   trás deles, de leve. As cores saem do modo, como no resto.
   ========================================================= */
.secao {
  padding-bottom: clamp(48px, 8vh, 88px);
}

/* variante do título quando a página tem conteúdo abaixo:
   sem a altura de tela cheia das páginas ainda vazias */
.titulo-pagina--curto {
  min-height: 0;
  padding-block: clamp(56px, 9vh, 104px) clamp(32px, 5vh, 56px);
}
.titulo-pagina__apoio {
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  font-weight: 300;
}

.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* --- cartões dos meios de contato --- */
.cartoes {
  display: grid;
  gap: 14px;
}

.cartao {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: border-color 0.3s ease, background-color 0.45s ease;
}
.cartao:hover {
  border-color: var(--realce);
}

.cartao__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cartao-borda);
  border-radius: 50%;
  color: var(--icone);
}
.cartao__icone svg {
  width: 21px;
  height: 21px;
}

.cartao h2 {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}
.cartao__corpo > :not(h2) {
  margin-top: 10px;
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
}
/* um fio embaixo desde o começo: sem ele o telefone e o e-mail ficam
   iguais ao texto que não é clicável */
.cartao a {
  border-bottom: 1px solid var(--cartao-borda);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cartao a:hover {
  color: var(--menu-cor-ativa);
  border-bottom-color: var(--realce);
}

/* --- mini mapa --- */
.mapa {
  padding: 10px;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: background-color 0.45s ease;
}
.mapa__quadro {
  display: block;
  width: 100%;
  height: clamp(280px, 46vh, 460px);
  border: 0;
}
/* o aviso que ocupa o lugar do mapa até a pessoa pedir para vê-lo
   (LGPD: o Google só recebe dados depois do clique). Mesma altura
   do iframe, para a página não pular quando ele troca de lugar. */
.mapa__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: clamp(280px, 46vh, 460px);
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--cartao-contorno);
}
.mapa__aviso p {
  max-width: 42ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}
.mapa__aviso a {
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
}
.mapa__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--menu-cor);
  transition: color 0.25s ease;
}
.mapa__link svg {
  width: 15px;
  height: 15px;
  color: var(--icone);
}
.mapa__link:hover {
  color: var(--menu-cor-ativa);
}

/* --- cartão do WhatsApp --- */
.zap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 4vw, 44px);
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: background-color 0.45s ease;
}
.zap__copia h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}
.zap__copia p {
  margin-top: 10px;
  max-width: 46ch;
  font-weight: 300;
}
.zap__botao svg {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

@media (max-width: 900px) {
  .contato__grade {
    grid-template-columns: 1fr;
  }
  .zap__botao {
    width: 100%;
  }
}

/* =========================================================
   HERO · só na home
   NÃO TEM FUNDO PRÓPRIO, e isso é a correção de 29/08/2026.

   Ele tinha: uma camada de fundo animada dentro dele, mais
   forte, sobre um fundo opaco que tapava a camada fixa da
   página. Só que a camada do hero rola com a página e a da
   página fica presa à tela. Ao descer, via-se o símbolo do hero
   subindo e outro, parado, aparecendo atrás dele, com uma
   emenda visível na borda de baixo. Era o que ele reclamou.

   Agora é uma camada só no site inteiro, a fixa da página, e o
   hero é transparente por cima dela. Nada sobe, nada aparece
   atrás, e o símbolo tem uma posição só, em qualquer modo e em
   qualquer página.
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 720px);
  padding-block: clamp(72px, 10vh, 128px);
  color: var(--texto);
  /* o fio que separa a abertura do conteúdo: dourado no modo vermelho,
     quase invisível no branco. Com o hero transparente ele é o único
     sinal de onde a abertura termina. */
  border-bottom: 1px solid var(--linha);
}

/* --- conteúdo --- */
.hero__sobretitulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}

.hero__titulo {
  margin-top: 20px;
  max-width: 16ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
  color: var(--titulo);
}

.hero__texto {
  margin-top: 24px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 300;
  color: var(--texto);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

/* --- conteúdo do hero --- */
.hero__interno {
  position: relative;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.botao--principal {
  background: var(--acao-fundo);
  color: var(--acao-texto);
}
.botao--principal:hover {
  background: var(--botao-hover-fundo);
  color: var(--botao-hover-texto);
}
/* o vazado vive dentro do hero, então segue o modo junto com ele */
.botao--vazado {
  border-color: var(--vazado-borda);
  color: var(--vazado-texto);
}
.botao--vazado:hover {
  border-color: var(--vazado-hover);
  color: var(--vazado-hover);
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  margin-top: auto;
  background: var(--fundo-rodape);
  color: var(--rodape-texto);
  transition: background-color 0.45s ease;
}
.rodape__interno {
  padding-block: 40px;
}

.rodape__grade {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.2fr 1fr 1fr;
}

.rodape__logo {
  height: 36px;
  width: auto;
}
.rodape__lema {
  margin-top: 14px;
  max-width: 20rem;
  font-size: 13px;
  color: var(--rodape-apagado);
}

.rodape h2 {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rodape-rotulo);
}
.rodape h2 + * {
  margin-top: 12px;
}
.rodape h2:not(:first-child) {
  margin-top: 20px;
}

.rodape address,
.rodape p.dado {
  font-size: 13px;
  font-style: normal;
  color: var(--rodape-texto);
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--rodape-texto);
}
.rodape__lista a {
  transition: color 0.25s ease;
}
.rodape__lista a:hover {
  color: var(--rodape-realce);
}

.rodape__assinatura {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rodape-linha);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--rodape-apagado);
}

/* =========================================================
   ABERTURA · código original do arquivo smarim_abertura_branco.html
   Copiado sem alterações: cores, tempos, curvas e keyframes.
   O único acréscimo é o .encerrando lá embaixo, que faz a tela
   sair de cena — o arquivo original era uma demo e não terminava.

   Ela segue branca nos dois modos do site: o símbolo e o logotipo
   desta animação são as artes borgonha, que sumiriam num fundo
   vermelho.
   ========================================================= */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}
html[data-abertura="tocar"] .abertura {
  display: flex;
}
html[data-abertura="tocar"] body {
  overflow: hidden;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.4vw, 20px);
}
.logo img {
  display: block;
  height: auto;
}
.logo .mark {
  width: clamp(78px, 11vw, 120px);
}
.logo .word {
  width: clamp(160px, 26vw, 300px);
}

/* estado inicial: invisíveis */
.mark {
  opacity: 0;
}
.word {
  opacity: 0;
}

/* disparo */
.play .mark {
  animation: introMark var(--mark-dur) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.play .word {
  animation: introWord var(--word-dur) cubic-bezier(0.25, 0.8, 0.3, 1)
    var(--word-delay) forwards;
}

/* símbolo: sobe, escala e sai do desfoque */
@keyframes introMark {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.82);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
/* wordmark: revela da esquerda para a direita */
@keyframes introWord {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

/* acréscimo: encerra a abertura e revela o site */
.abertura {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.abertura.encerrando {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   LOADER · código original do arquivo smarim_loader_branco.html
   Copiado sem alterações.
   ========================================================= */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  /* Repare que a transição NÃO está aqui, e sim na regra .done abaixo.
     É de propósito: assim ela vale só na saída. Quando o loader volta
     a aparecer (ao sair para outra página), a transição some junto com
     a classe e ele acende inteiro, na hora. Com a transição aqui, ele
     nascia transparente e ia clareando; a página nova então entrava
     com o loader dela já opaco, e o pulo de um para o outro parecia
     uma segunda tela de carregamento. */
}
/* quando a abertura toca, é ela que toma conta da tela */
html[data-abertura="tocar"] .loader-screen {
  display: none;
}
/* estado final: some suavemente · a duração precisa bater com
   DURACAO_SAIDA no site.js */
.loader-screen.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Numa troca de página o selo não repete a entrada: ele já estava
   crescido e girando na página anterior, e refazer o "cresce do 0.6
   com desfoque" era o que mais dava a impressão de duas telas de
   carregamento seguidas. O giro e o pulso continuam.

   Quem põe o data-loader é o script no <head>, antes da primeira
   pintura; se viesse depois, o selo já teria começado a crescer. */
html[data-loader="continua"] .seal {
  animation: none;
}

/* wrapper faz a ENTRADA (uma vez) */
.seal {
  animation: sealEnter var(--enter-dur) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* imagem faz o GIRO (contínuo) */
.seal img {
  display: block;
  width: clamp(64px, 9vw, 96px);
  height: auto;
  animation: spin var(--spin-dur) linear infinite;
}

@keyframes sealEnter {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* rótulo */
.loading-label {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--burgundy);
  opacity: 0.55;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.75;
  }
}

/* =========================================================
   ENTRADA DO HERO
   O conteúdo sobe uma vez, ao carregar. Fica dentro de
   no-preference porque o estado inicial é invisível: quem pediu
   menos movimento não recebe nem o ponto de partida, e o texto
   simplesmente já está lá.

   data-entrada="tocar" (gravado no <head>, e ao contrário de
   data-abertura nunca muda depois) avisa que a abertura vai rodar
   antes — então a entrada espera a tela branca sair de cena.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .hero__interno > * {
    animation: subirEntrada 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--degrau, 0s) + var(--espera-abertura, 0s));
  }
  .hero__interno > *:nth-child(2) {
    --degrau: 0.1s;
  }
  .hero__interno > *:nth-child(3) {
    --degrau: 0.2s;
  }
  .hero__interno > *:nth-child(4) {
    --degrau: 0.3s;
  }

  html[data-entrada="tocar"] .hero__interno > * {
    --espera-abertura: 2.4s;
  }
}

@keyframes subirEntrada {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   TELA MÉDIA · o menu vira hambúrguer
   Com seis itens a barra não cabe mais em tablet: os nomes
   quebravam em duas linhas e a logo era espremida. Fica em
   1023px para o menu completo só aparecer quando couber.
   ========================================================= */
@media (max-width: 1023px) {
  .menu-botao {
    display: flex;
  }

  /* Fechado por padrão e aberto pelo estado do próprio botão: assim o
     menu já nasce correto, sem esperar o JS e sem piscar aberto. */
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
    /* Fundo opaco, não o vidro do cabeçalho: o painel cai para fora
       da caixa dele, e um backdrop-filter aninhado não enxerga o que
       está atrás da página — o menu ficava translúcido de verdade,
       com o texto do hero passando por baixo. */
    background: var(--menu-fundo);
    border-top: 1px solid var(--linha);
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.5);
  }
  .menu-botao[aria-expanded="true"] ~ .menu {
    display: flex;
  }
  .menu a {
    padding-block: 14px;
  }
  .menu a::after {
    display: none;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
  .hero__titulo {
    max-width: none;
  }
  .hero__acoes .botao {
    flex: 1 1 100%;
  }

  .rodape__grade {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* =========================================================
   Acessibilidade: respeita quem pediu menos movimento
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* mesmas regras dos seus arquivos originais */
  .mark,
  .word {
    opacity: 1 !important;
  }
  .word {
    clip-path: none !important;
  }
  .seal,
  .seal img,
  .loading-label {
    animation: none;
  }
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   PÁGINA DO PROGRAMA CONDUZ
   Peças novas, todas montadas com o que a página de contato
   já usava: fundo translúcido do cartão, fio de 1px, dourado
   nos rótulos. Nenhuma cor crua — tudo sai das variáveis do
   modo, então a página inteira acompanha o botão claro/vermelho.

   As grades ficam aqui embaixo, depois das media queries do
   arquivo, com as quebras de tela dela própria no fim deste
   bloco — assim nada precisa disputar com o resto.
   ========================================================= */

/* o ® do CONDUZ: pequeno e sem o espaçamento das maiúsculas */
.marca-reg {
  font-size: 0.34em;
  vertical-align: super;
  letter-spacing: 0;
}

/* --- acréscimos ao título da página --- */
.titulo-pagina__rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
  margin-bottom: 18px;
}
.titulo-pagina__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* --- cabeça de cada seção: rótulo, título e texto de apoio --- */
.secao__cabeca {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vh, 40px);
}
/* quando a seção tem um segundo assunto embaixo do primeiro */
.secao__cabeca--meio {
  margin-top: clamp(48px, 7vh, 80px);
}
.secao__rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}
.secao__cabeca h2 {
  margin-top: 14px;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
}
.secao__texto {
  margin-top: 16px;
  font-weight: 300;
}

/* =========================================================
   BLOCOS EM GRADE
   Mesma pele do .cartao da página de contato, só que em
   coluna: rótulo em cima, título, texto embaixo.
   ========================================================= */
.grade {
  display: grid;
  gap: 14px;
}
.grade--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grade--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grade--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Cinco itens (os valores da página Sobre): três em cima e dois embaixo,
   numa grade de seis colunas. Os de baixo ficam mais largos e a fileira
   fecha nas duas pontas, em vez de sobrar um buraco no fim. */
.grade--5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grade--5 > li {
  grid-column: span 2;
}
.grade--5 > li:nth-child(n + 4) {
  grid-column: span 3;
}

.bloco {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: border-color 0.3s ease, background-color 0.45s ease;
}
.bloco:hover {
  border-color: var(--realce);
}
.bloco__rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}
.bloco h3 {
  margin-top: 12px;
  font-size: 1.25rem;
}
.bloco h3:first-child {
  margin-top: 0;
}
.bloco > p:not(.bloco__rotulo) {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

/* --- os seis pilares: a letra da sigla vira o ícone --- */
.pilar__letra {
  display: grid;
  place-items: center;
  /* era 52px com letra de 1.75rem; diminuída a pedido dele em
     05/10/2026, para o nome do pilar ganhar o protagonismo */
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: 1px solid var(--cartao-borda);
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--rotulo);
}

/* =========================================================
   JORNADA DA MATURIDADE
   Oito etapas em fila. As setas entre elas (pedido da cliente,
   05/10/2026) estão no fim do arquivo, em "SETAS DA JORNADA".
   ========================================================= */
.jornada {
  /* o reset do arquivo zera só o ul; aqui é uma lista numerada,
     e os números quem desenha é o .jornada__num */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.jornada__etapa {
  padding: 20px 22px;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  border-top: 2px solid var(--realce);
  transition: border-color 0.3s ease, background-color 0.45s ease;
}
.jornada__num {
  font-family: var(--fonte-titulo);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--rotulo);
}
.jornada__etapa h3 {
  margin-top: 8px;
  font-size: 1.0625rem;
}

/* --- lista de entregas dentro de cada trilha --- */
.trilha__lista {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cartao-borda);
  display: grid;
  gap: 10px;
}
.trilha__lista li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 300;
}
.trilha__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--realce);
}

/* =========================================================
   CONFRONTO · contabilidade comum x método CONDUZ
   A coluna do CONDUZ é a única com a borda dourada; a outra
   fica de propósito mais apagada.
   ========================================================= */
.confronto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.confronto__coluna {
  padding: clamp(22px, 3vw, 32px);
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: background-color 0.45s ease;
}
.confronto__coluna--conduz {
  border-color: var(--realce);
}
.confronto__coluna h3 {
  font-size: 1.25rem;
}
.confronto__lista {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.confronto__lista li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 300;
}
.confronto__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1px;
  background: var(--realce);
}
.confronto__lista--comum li {
  opacity: 0.7;
}
.confronto__lista--comum li::before {
  background: currentColor;
}

/* =========================================================
   DIAGNÓSTICO · o convite do meio da página
   ========================================================= */
.diagnostico {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(26px, 4vw, 44px);
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: background-color 0.45s ease;
}
.diagnostico__copia h2 {
  margin-top: 14px;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}
.diagnostico__copia p {
  margin-top: 16px;
  max-width: 52ch;
  font-weight: 300;
}
.diagnostico__botao {
  margin-top: 32px;
}

/* fichas das dimensões avaliadas */
.fichas {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fichas li {
  padding: 9px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--menu-cor);
  border: 1px solid var(--cartao-borda);
}
.diagnostico__nota {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 300;
}

/* =========================================================
   HISTÓRIA · texto, citação e os números ao lado
   ========================================================= */
.historia {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.historia__copia p {
  font-weight: 300;
}
.historia__copia p + p {
  margin-top: 16px;
}

/* Link dentro do texto corrido. No site inteiro o <a> herda a cor e não
   tem sublinhado (é assim que o menu e os botões funcionam), então um
   link no meio de um parágrafo ficaria invisível. Aqui ele ganha um
   traço dourado por baixo, que engrossa ao passar o mouse. */
.historia__copia a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.25s ease;
}
.historia__copia a:hover,
.historia__copia a:focus-visible {
  text-decoration-thickness: 2px;
}

.citacao {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--cartao-fundo);
  border-left: 2px solid var(--realce);
  transition: background-color 0.45s ease;
}
.citacao p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--titulo);
}
.citacao__autor {
  margin-top: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rotulo);
}

.historia__numeros {
  display: grid;
  gap: 14px;
}
.historia__numeros li {
  padding: 20px 22px;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-contorno);
  transition: background-color 0.45s ease;
}
.historia__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--titulo);
}
.historia__rotulo {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rotulo);
}

/* =========================================================
   CONDUZ · telas menores
   ========================================================= */
@media (max-width: 1023px) {
  .grade--3,
  .grade--4,
  .grade--5,
  .jornada {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grade--5 > li,
  .grade--5 > li:nth-child(n + 4) {
    grid-column: auto;
  }
  /* Em duas colunas o quinto ficaria sozinho: ocupa a fileira toda. */
  .grade--5 > li:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .confronto,
  .diagnostico,
  .historia {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .grade--2,
  .grade--3,
  .grade--4,
  .grade--5,
  .jornada {
    grid-template-columns: 1fr;
  }
  .titulo-pagina__acoes .botao,
  .diagnostico__botao {
    width: 100%;
  }
}

/* =========================================================
   ENTRADA DOS CARTÕES AO ROLAR
   Cada cartão sobe e aparece quando entra na tela. Vale para
   o site inteiro (os cartões da página de contato também),
   para o movimento ser o mesmo em todo lugar.

   Quem marca é o site.js: ele põe .sobe em cada peça e troca
   para .sobe--visivel na hora certa. Sem JS nada disso existe
   e os cartões ficam simplesmente visíveis — por isso o estado
   escondido mora na classe, e não no próprio cartão.

   É animação, e não transição, de propósito: o .bloco e o
   .cartao já usam transition para a borda dourada do hover, e
   uma segunda declaração de transition apagaria a primeira.

   O @keyframes subirEntrada é o mesmo da entrada do hero, lá
   em cima — mesmo movimento, sem duplicar código.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .sobe {
    opacity: 0;
  }
  .sobe--visivel {
    animation: subirEntrada 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--degrau, 0s);
  }
}

/* os números da história contam até o valor final: sem largura
   fixa por dígito, o cartão inteiro tremeria a cada quadro */
.historia__valor {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   DESEMPENHO EM CELULAR
   O que num computador não custa nada e num
   aparelho modesto pesam o tempo todo. Nenhuma delas some
   da tela: o que sai é o trabalho por quadro, não o desenho.

   1) O desfoque do cabeçalho (backdrop-filter). Ele é o mais
      caro de todos porque não dá para guardar pronto: o
      cabeçalho é sticky, então a cada quadro de rolagem o
      navegador precisa borrar de novo o pedaço de página que
      passou atrás dele. No celular vira travada na rolagem.
      Aqui ele vira fundo sólido, igualzinho ao que o site já
      faz em navegador sem suporte a backdrop-filter.

   As manchas de cor derivando e o símbolo girando também eram
   desligados aqui no celular. Voltaram em 05/10/2026, a pedido
   dele: o celular tem de ser igual ao notebook, animação da
   marca d'água e tudo. Se algum aparelho engasgar na rolagem,
   é por aí que se começa a olhar.
   ========================================================= */
@media (max-width: 767px) {
  /* No notebook o símbolo é medido pela altura (78vh). Numa tela de
     celular em pé isso dava ~650px, bem mais largo que a tela: ele
     pediu menor em 05/10/2026. Aqui passa a ser medido pela largura. */
  .fundo-anim__marca {
    width: 64vw; /* era 85vw; ele pediu 25% menor */
  }

  .cabecalho {
    background: var(--barra-solida);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =========================================================
   HOME · as seções que entraram embaixo do hero
   Nada de peça nova: os cartões são o mesmo .bloco do resto
   do site, e as cores continuam saindo das variáveis do modo.
   ========================================================= */

/* O .secao só tem folga embaixo, porque numa página de conteúdo
   quem abre é o .titulo-pagina. Na home quem abre é o hero, que
   encosta na seção seguinte: esta variante devolve a folga de cima
   à primeira seção depois dele. */
.secao--respiro {
  padding-top: clamp(48px, 8vh, 88px);
}

/* O cabeçalho é sticky: sem isto, um link de âncora (o "Blog" do
   menu, por exemplo) para a seção embaixo dele e o título fica
   escondido atrás da barra. */
.secao[id] {
  scroll-margin-top: 96px;
}

/* --- os três números, em fila na home ---
   Na página Sobre eles ficam empilhados numa coluna ao lado do
   texto; aqui a linha inteira é deles. Mesmos cartões, só a
   direção da grade muda. */
.historia__numeros--linha {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- link no pé de um cartão ---
   O <a> do site herda a cor e não tem sublinhado, então dentro de
   um bloco ele precisa de forma própria. margin-top: auto empurra
   para o rodapé do cartão, para dois blocos vizinhos de alturas
   diferentes terminarem com o link na mesma linha. */
.bloco__link {
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rotulo);
  transition: color 0.25s ease;
}
.bloco__link span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}
.bloco:hover .bloco__link,
.bloco__link:focus-visible {
  color: var(--menu-cor-ativa);
}
.bloco:hover .bloco__link span {
  transform: translateX(4px);
}

/* =========================================================
   BLOG · a lista de artigos na home
   O desenho é o do modelo que você mandou (modelo blog/): capa
   em cima, etiqueta da editoria e tempo de leitura sobre ela,
   data com ícone, título, resumo e o "Ler o artigo" embaixo.

   A pele continua sendo a da SMARIM, e não a do modelo: canto
   reto e fio de 1px, como todo cartão do site, em vez de canto
   arredondado com sombra. Se você preferir o arredondado do
   modelo, é só pedir: são duas linhas (border-radius aqui e no
   .post__capa).
   ========================================================= */

/* linha de cima da lista: "3 artigos" à esquerda */
.posts__conta {
  margin-bottom: 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rotulo);
}

.post {
  /* âncora do link esticado, lá embaixo */
  position: relative;
  /* o .bloco tem folga interna de 24px; aqui a capa precisa
     encostar nas bordas, então quem tem folga é só o corpo */
  padding: 0;
  overflow: hidden;
}

/* --- capa --- */
.post__capa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--capa-fundo);
  overflow: hidden;
}
.post__capa img:not(.post__marca) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.post:hover .post__capa img:not(.post__marca) {
  transform: scale(1.04);
}

/* Capa sem foto: em vez de um buraco cinza, o símbolo da marca
   sobre o borgonha. Serve de espera até a imagem do artigo
   existir, e não parece defeito. */
.post__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.42;
}

/* etiquetas sobre a capa: editoria à esquerda, tempo à direita */
.post__etiqueta,
.post__tempo {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
}
.post__etiqueta {
  left: 12px;
  background: var(--dourado);
  color: var(--borgonha);
}
.post__tempo {
  right: 12px;
  /* borgonha bem fechado: a capa pode ser clara ou escura, e este
     tom segura o texto branco legível nos dois casos */
  background: rgba(52, 10, 22, 0.78);
  color: var(--branco);
}
.post__tempo svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* --- corpo do cartão --- */
.post__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.post__data {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 300;
  color: var(--rotulo);
}
.post__data svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.post__titulo {
  margin-top: 10px;
  font-size: 1.1875rem;
  line-height: 1.3;
}
/* O cartão inteiro vira alvo do clique, sem embrulhar tudo num <a>
   (o que faria o leitor de tela ler etiqueta, data, título e resumo
   como um nome de link só). O texto do link continua sendo só o
   título. */
.post__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post__titulo a {
  transition: color 0.25s ease;
}
.post:hover .post__titulo a {
  color: var(--menu-cor-ativa);
}

/* Resumo cortado em três linhas, como no modelo: com títulos de
   uma ou de duas linhas, os cartões da fileira terminam parecidos.
   Sem o corte, um resumo comprido empurraria o "Ler o artigo"
   sozinho para baixo. */
.post__resumo {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Não é link: quem leva ao artigo é o título. Este é o rótulo que
   avisa que o cartão tem para onde ir. */
.post__ler {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rotulo);
  transition: color 0.25s ease;
}
.post__ler span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}
.post:hover .post__ler {
  color: var(--menu-cor-ativa);
}
.post:hover .post__ler span {
  transform: translateX(4px);
}

/* SEM USO DESDE 31/08/2026: esta era a linha "o dia a dia da SMARIM
   também vai para o Instagram", no fim do blog. O cartão do convite
   ao Instagram, logo abaixo da seção, passou a dizer isso com mais
   força, e as duas juntas repetiam o mesmo recado. O estilo fica
   guardado aqui caso um dia a notinha volte. */
.posts__nota {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 300;
}
/* mesmo tratamento do link dentro do texto corrido da página Sobre */
.posts__nota a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.25s ease;
}
.posts__nota a:hover,
.posts__nota a:focus-visible {
  text-decoration-thickness: 2px;
}

/* =========================================================
   PÁGINA DO ARTIGO
   Uma página por artigo, todas iguais a artigo-modelo.html.
   A coluna de leitura é estreita de propósito: linha de texto
   comprida demais cansa, e aqui a pessoa veio para ler.
   ========================================================= */
.artigo__topo {
  padding-block: clamp(40px, 6vh, 64px) clamp(24px, 4vh, 36px);
}
.artigo__volta {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rotulo);
  transition: color 0.25s ease;
}
.artigo__volta:hover {
  color: var(--dourado);
}
.artigo__volta span {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.25s ease;
}
.artigo__volta:hover span {
  transform: translateX(-4px);
}

.artigo__titulo {
  max-width: 24ch;
  font-size: clamp(1.875rem, 5vw, 3rem);
}

/* data · tempo de leitura · autoria, tudo na mesma linha */
.artigo__ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 300;
  color: var(--rotulo);
}
.artigo__ficha span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.artigo__ficha svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.artigo__ficha .post__etiqueta {
  position: static;
  font-weight: 400;
}

/* capa larga, entre o título e o texto */
.artigo__capa {
  position: relative;
  aspect-ratio: 21 / 9;
  margin-bottom: clamp(32px, 5vh, 56px);
  background: linear-gradient(135deg, var(--borgonha), #340a16);
  border: 1px solid var(--cartao-borda);
  overflow: hidden;
}
.artigo__capa img:not(.post__marca) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artigo__capa .post__marca {
  width: 22%;
}

/* --- o texto do artigo --- */
.artigo__corpo {
  max-width: 68ch;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.artigo__corpo > * + * {
  margin-top: 20px;
}
.artigo__corpo h2 {
  margin-top: 44px;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
}
.artigo__corpo h3 {
  margin-top: 32px;
  font-size: 1.1875rem;
}
/* o parágrafo de abertura entra maior, como no jornal */
.artigo__corpo .artigo__abre {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--titulo);
}
.artigo__corpo ul {
  display: grid;
  gap: 10px;
  padding-left: 4px;
}
.artigo__corpo ul li {
  position: relative;
  padding-left: 20px;
}
.artigo__corpo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 9px;
  height: 1px;
  background: var(--dourado);
}
.artigo__corpo ol {
  padding-left: 22px;
  display: grid;
  gap: 10px;
}
.artigo__corpo a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.25s ease;
}
.artigo__corpo a:hover,
.artigo__corpo a:focus-visible {
  text-decoration-thickness: 2px;
}
.artigo__corpo strong {
  font-weight: 700;
  color: var(--titulo);
}
.artigo__corpo .citacao {
  margin-block: 32px;
}

/* aviso de que a leitura acabou, antes das chamadas do rodapé */
.artigo__fim {
  max-width: 68ch;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--cartao-borda);
  font-size: 14px;
  font-weight: 300;
}

/* --- home e artigo em telas menores --- */
@media (max-width: 767px) {
  .historia__numeros--linha {
    grid-template-columns: 1fr;
  }
  .artigo__capa {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   CARTÕES COLORIDOS · pedido em 29/08/2026
   No modo branco os cartões são BORGONHA; no modo vermelho
   eles são DOURADOS. É a inversão do que era antes, quando o
   cartão era só um véu translúcido por cima da página.

   COMO ISSO FUNCIONA, para não ter de reescrever cada regra:
   o cartão redefine, nele mesmo, os apelidos que o site já
   usava — --titulo, --texto, --rotulo, --icone, --realce. Como
   variável de CSS desce para os filhos, tudo que está dentro
   do cartão (título, resumo, tracinho da lista, ícone, botão)
   troca de cor junto, sem uma linha a mais.

   Por isso os acentos dourados de dentro do cartão passaram a
   sair de --realce, e não mais de --dourado cru: sobre um
   cartão dourado, dourado não se enxerga, e ali o realce vira
   borgonha.

   Fora do cartão nada mudou: página, hero, cabeçalho e rodapé
   continuam como estavam.
   ========================================================= */

/* --- modo branco: cartão borgonha, letra branca, acento dourado --- */
html[data-tema="claro"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  --cartao-fundo: var(--borgonha);
  --cartao-borda: rgba(185, 155, 96, 0.34);

  --titulo: var(--branco);
  --texto: rgba(254, 254, 254, 0.82);
  --rotulo: var(--dourado);
  --realce: var(--dourado);
  --icone: var(--dourado);
  --menu-cor: rgba(254, 254, 254, 0.82);
  --menu-cor-ativa: var(--dourado);

  /* o botão cheio segue dourado, que é o par natural do borgonha;
     o que muda é o hover, que não pode virar borgonha sobre borgonha */
  --botao-hover-fundo: var(--branco);
  --botao-hover-texto: var(--borgonha);

  /* a capa sem foto precisa ficar mais escura que o cartão, senão
     some dentro dele */
  --capa-fundo: linear-gradient(135deg, #4a0018, #2b0812);
}

/* --- modo vermelho: cartão dourado, letra borgonha, acento borgonha --- */
html[data-tema="borgonha"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  --cartao-fundo: var(--dourado);
  --cartao-borda: rgba(52, 10, 22, 0.3);

  --titulo: #340a16;
  --texto: rgba(52, 10, 22, 0.88);
  --rotulo: #5b001e;
  --realce: #5b001e;
  --icone: #5b001e;
  --menu-cor: rgba(52, 10, 22, 0.88);
  --menu-cor-ativa: #340a16;

  /* dourado sobre dourado não existe: dentro do cartão o botão
     cheio vira borgonha com letra branca */
  --acao-fundo: #5b001e;
  --acao-texto: var(--branco);
  --botao-hover-fundo: #340a16;
  --botao-hover-texto: var(--branco);

  --capa-fundo: linear-gradient(135deg, var(--borgonha), #340a16);
}

/* A cor do texto vem do apelido que o cartão acabou de redefinir.
   Sem esta linha, quem não declara cor própria continuaria herdando
   a cor da página. */
.bloco,
.cartao,
.jornada__etapa,
.confronto__coluna,
.diagnostico,
.zap,
.citacao,
.mapa,
.historia__numeros li {
  position: relative;
  color: var(--texto);
}

/* =========================================================
   COMO O CARTÃO REAGE AO TOQUE E AO MOUSE

   Três coisas ao mesmo tempo: ele sobe um pouco, ganha sombra
   e um fio de realce corre no alto, da esquerda para a direita.

   O movimento usa `translate`, e não `transform`: a entrada dos
   cartões ao rolar (subirEntrada) já anima transform com
   fill "both", e uma animação vence a declaração normal na
   cascata — o hover em transform simplesmente não aconteceria.
   `translate` é propriedade separada, então os dois convivem.

   :focus-within entra junto para quem navega pelo teclado: ao
   chegar no link de dentro do cartão, o cartão reage igual.

   Esta declaração de transition substitui de propósito as que
   cada cartão trazia (o .bloco tinha a dele, o .cartao a dele):
   duas declarações de transition no mesmo elemento não se
   somam, a última vence. Por isso border-color e
   background-color estão repetidos aqui.
   ========================================================= */
.bloco,
.cartao,
.jornada__etapa,
.confronto__coluna,
.diagnostico,
.zap,
.citacao,
.mapa,
.historia__numeros li {
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease, border-color 0.3s ease,
    background-color 0.45s ease, color 0.45s ease;
}

.bloco:hover,
.bloco:focus-within,
.cartao:hover,
.cartao:focus-within,
.jornada__etapa:hover,
.confronto__coluna:hover,
.diagnostico:hover,
.diagnostico:focus-within,
.zap:hover,
.zap:focus-within,
.citacao:hover,
.mapa:hover,
.mapa:focus-within,
.historia__numeros li:hover {
  translate: 0 -6px;
  /* Borda mais aparente (05/10/2026, pedido dele): a de 1px só trocava
     de cor e quase não se via. A primeira sombra é um anel de 2px na
     cor do realce, colado na borda, que soma 3px de contorno; a
     segunda é um brilho leve na mesma cor. Por sombra, e não com
     border-width, para o cartão não mudar de tamanho e empurrar o
     conteúdo 1px a cada passada do mouse. */
  box-shadow: 0 0 0 2px var(--realce),
    0 0 18px -6px var(--realce),
    0 22px 40px -22px var(--cartao-sombra);
  border-color: var(--realce);
}

/* ao clicar, ele afunda um pouco: confirma o toque no celular,
   onde não existe passar o mouse por cima */
.bloco:active,
.cartao:active,
.jornada__etapa:active,
.diagnostico:active,
.zap:active,
.mapa:active {
  translate: 0 -2px;
  transition-duration: 0.1s;
}

/* --- o fio de realce que corre no alto ---
   A jornada fica de fora: as etapas dela já nascem com o fio
   dourado em cima, e teriam dois. */
.bloco::before,
.cartao::before,
.confronto__coluna::before,
.diagnostico::before,
.zap::before,
.mapa::before,
.historia__numeros li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  background: var(--realce);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bloco:hover::before,
.bloco:focus-within::before,
.cartao:hover::before,
.cartao:focus-within::before,
.confronto__coluna:hover::before,
.diagnostico:hover::before,
.diagnostico:focus-within::before,
.zap:hover::before,
.zap:focus-within::before,
.mapa:hover::before,
.mapa:focus-within::before,
.historia__numeros li:hover::before {
  transform: scaleX(1);
}

/* a etapa da jornada não tem o fio correndo, então engrossa o
   dela e acende junto */
.jornada__etapa:hover {
  border-top-width: 4px;
}

/* --- as peças redondas de dentro crescem junto ---
   `scale` também é propriedade separada de transform, pelo
   mesmo motivo do translate lá em cima. */
.cartao__icone,
.pilar__letra {
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.3s ease, color 0.3s ease;
}
.cartao:hover .cartao__icone,
.bloco:hover .pilar__letra {
  scale: 1.08;
  border-color: var(--realce);
}

/* o número da história cresce um tico quando o cartão dele sobe */
.historia__valor {
  display: block;
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: left center;
}
.historia__numeros li:hover .historia__valor {
  scale: 1.05;
}

/* Quem pediu menos movimento continua tendo a cor e o realce,
   só que sem nada se mexendo. */
@media (prefers-reduced-motion: reduce) {
  .bloco,
  .cartao,
  .jornada__etapa,
  .confronto__coluna,
  .diagnostico,
  .zap,
  .citacao,
  .mapa,
  .historia__numeros li {
    transition: border-color 0.3s ease, background-color 0.45s ease,
      color 0.45s ease;
  }
  .bloco:hover,
  .bloco:focus-within,
  .cartao:hover,
  .cartao:focus-within,
  .jornada__etapa:hover,
  .confronto__coluna:hover,
  .diagnostico:hover,
  .diagnostico:focus-within,
  .zap:hover,
  .zap:focus-within,
  .citacao:hover,
  .mapa:hover,
  .mapa:focus-within,
  .historia__numeros li:hover {
    translate: none;
  }
  .bloco::before,
  .cartao::before,
  .confronto__coluna::before,
  .diagnostico::before,
  .zap::before,
  .mapa::before,
  .historia__numeros li::before {
    transition: none;
  }
  .cartao:hover .cartao__icone,
  .bloco:hover .pilar__letra,
  .historia__numeros li:hover .historia__valor {
    scale: none;
  }
}

/* =========================================================
   BARRA DO CABEÇALHO AO CONTRÁRIO DO MODO · pedido em 29/08/2026
   Modo branco, barra borgonha. Modo vermelho, barra branca.

   É o mesmo truque dos cartões coloridos: a barra redefine, nela
   mesma, os apelidos que o cabeçalho já usava (--vidro,
   --menu-cor, --menu-cor-ativa, --linha, --menu-fundo). O menu, o
   hambúrguer, o painel do celular e o fio de baixo acompanham
   sozinhos, sem uma regra a mais.

   A troca da arte da logo está lá em cima, junto do resto do
   cabeçalho, porque mexe em display e não em cor.

   O DESFOQUE SAIU DAQUI, e é consequência do pedido: com a barra
   translúcida, o borgonha do hero atravessava e a "barra branca"
   chegava rosada. Fechar a cor resolve, e uma cor fechada não
   deixa passar nada para o backdrop-filter borrar: ele viraria
   custo de rolagem sem nada na tela. O de fora do cabeçalho
   continua onde estava.

   --barra-solida é a mesma cor, usada nos dois lugares que já
   liam a cor da página: o navegador sem backdrop-filter e o
   celular. Sem ela a barra deixaria de ser contrária justamente
   onde mais se rola.
   ========================================================= */

/* fora do cabeçalho a barra não existe, mas a variável precisa de
   um valor de partida em cada modo */
:root,
html[data-tema="claro"] {
  --barra-solida: var(--borgonha);
}
html[data-tema="borgonha"] {
  --barra-solida: var(--branco);
}

.cabecalho {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- modo branco: barra borgonha --- */
html[data-tema="claro"] .cabecalho {
  --vidro: var(--borgonha);
  --barra-solida: var(--borgonha);
  --menu-fundo: #6d0024;

  --menu-cor: rgba(254, 254, 254, 0.82);
  --menu-cor-ativa: var(--dourado);
  --linha: rgba(185, 155, 96, 0.34);
}

/* --- modo vermelho: barra branca --- */
html[data-tema="borgonha"] .cabecalho {
  --vidro: var(--branco);
  --barra-solida: var(--branco);
  --menu-fundo: #fefefe;

  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--borgonha);
  --linha: rgba(77, 76, 78, 0.12);
}

/* O botão de modo agora é uma janelinha da cor da página, com a
   bolinha do modo que o clique vai trazer dentro dela.

   Antes o botão era vazado e a bolinha bastava. Não serve mais:
   a bolinha mostra a cor do modo contrário, que é exatamente a
   cor que a barra passou a ter, e uma bolinha borgonha sobre a
   barra borgonha sumiria. Com o fundo da página atrás dela, as
   duas cores voltam a aparecer, e o botão ainda ganha um jeito de
   interruptor: a janelinha é o modo de agora, a bolinha é o de
   depois. */
.tema-botao {
  background: var(--fundo-pagina);
  /* substitui a transition original, que não previa a cor de fundo
     do botão mudando junto com o modo */
  transition: border-color 0.25s ease, background-color 0.45s ease;
}

/* =========================================================
   MODO VERMELHO · o cartão passou a ser BRANCO (29/08/2026)
   Antes era dourado. Este bloco vem depois daquele e só
   sobrescreve o que muda, para o histórico da decisão ficar
   legível: o dourado continua ali em cima, comentado como
   estava, e aqui está por que ele saiu.

   Com o cartão branco, o miolo dele volta a ser exatamente a
   paleta da página no modo claro: título borgonha, texto
   cinza, rótulo no dourado escurecido (o do manual não se lê
   sobre branco) e o realce em dourado, que ali só desenha fio
   e tracinho, nunca texto.
   ========================================================= */
html[data-tema="borgonha"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  --cartao-fundo: var(--branco);
  --cartao-borda: rgba(77, 76, 78, 0.14);

  --titulo: var(--borgonha);
  --texto: var(--cinza);
  --rotulo: #8f7038;
  --realce: var(--dourado);
  --icone: var(--borgonha);
  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--borgonha);

  /* o botão cheio volta ao par de sempre, dourado com letra
     borgonha; o hover é que precisa sair do branco, senão
     sumiria dentro do cartão */
  --acao-fundo: var(--dourado);
  --acao-texto: var(--borgonha);
  --botao-hover-fundo: var(--borgonha);
  --botao-hover-texto: var(--branco);

  /* a capa sem foto fica borgonha: é o que separa ela do
     branco do cartão */
  --capa-fundo: linear-gradient(135deg, var(--borgonha), #340a16);
}

/* =========================================================
   RODAPÉ ACOMPANHANDO A BARRA DO MENU · pedido em 29/08/2026
   Modo branco: barra borgonha, rodapé borgonha. Modo vermelho:
   barra branca, rodapé branco. O rodapé e o cabeçalho passam a
   ser o mesmo par de cores, um em cima e outro embaixo.

   As cores do rodapé eram cravadas em rgba(254,254,254,...),
   escritas quando ele só podia ser escuro. Viraram apelidos
   (--rodape-texto, --rodape-rotulo, --rodape-apagado,
   --rodape-linha, --rodape-realce), definidos aqui, um jogo
   por modo.

   A arte da logo do rodapé inverte junto, pelo mesmo motivo do
   cabeçalho: a branca sobre o rodapé borgonha, a borgonha
   sobre o rodapé branco.
   ========================================================= */
html[data-tema="claro"] .rodape {
  --fundo-rodape: var(--borgonha);

  --rodape-texto: rgba(254, 254, 254, 0.75);
  --rodape-rotulo: var(--dourado);
  --rodape-apagado: rgba(254, 254, 254, 0.5);
  --rodape-linha: rgba(254, 254, 254, 0.15);
  --rodape-realce: var(--dourado);
}

html[data-tema="borgonha"] .rodape {
  --fundo-rodape: var(--branco);

  --rodape-texto: var(--cinza);
  /* o dourado do manual não se lê sobre branco: nos rótulos,
     que são texto, entra o escurecido; no que é só linha e
     hover, o dourado serve */
  --rodape-rotulo: #8f7038;
  --rodape-apagado: rgba(77, 76, 78, 0.65);
  --rodape-linha: rgba(77, 76, 78, 0.15);
  --rodape-realce: var(--borgonha);
}

/* a cor do texto também muda de modo, então entra na transição
   junto com o fundo */
.rodape {
  transition: background-color 0.45s ease, color 0.45s ease;
}

/* a arte da logo do rodapé, ao contrário do fundo dele */
.rodape__marca--escura {
  display: none;
}
html[data-tema="borgonha"] .rodape__marca--escura {
  display: block;
}
html[data-tema="borgonha"] .rodape__marca--branca {
  display: none;
}

/* =========================================================
   ENTRADA DO TÍTULO DAS PÁGINAS INTERNAS
   O mesmo movimento do hero da home, agora que a abertura das
   páginas internas é do mesmo tipo: o conteúdo sobe uma vez, ao
   carregar.

   A diferença é que aqui os filhos são as peças soltas (rótulo,
   título, risco, apoio, botões) e não um bloco só, então dá para
   escalonar de verdade, um depois do outro.

   Fica dentro de no-preference porque o ponto de partida é
   invisível: quem pediu menos movimento não recebe nem o começo,
   e o texto simplesmente já está lá.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .titulo-pagina > * {
    animation: subirEntrada 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--degrau, 0s) + var(--espera-abertura, 0s));
  }
  .titulo-pagina > *:nth-child(2) {
    --degrau: 0.08s;
  }
  .titulo-pagina > *:nth-child(3) {
    --degrau: 0.16s;
  }
  .titulo-pagina > *:nth-child(4) {
    --degrau: 0.24s;
  }
  .titulo-pagina > *:nth-child(5) {
    --degrau: 0.32s;
  }
  /* o sexto degrau nasceu com a assinatura da marca na página do
     Conduz, que pôs mais uma linha embaixo do título */
  .titulo-pagina > *:nth-child(6) {
    --degrau: 0.4s;
  }

  /* na primeira visita a abertura cobre a tela por ~2,3s: sem esta
     espera o título subiria atrás da tela branca e já estaria
     parado quando ela saísse */
  html[data-entrada="tocar"] .titulo-pagina > * {
    --espera-abertura: 2.4s;
  }
}

/* O risco é um <span> vazio: sem largura declarada ele nasceria
   com zero num container alinhado à esquerda. A largura já está na
   regra dele lá em cima; aqui só garantimos que o flex não o
   estique nem o esprema. */
.titulo-pagina .risco {
  flex: none;
}


/* =========================================================
   O CONTORNO DOURADO DO CARTÃO, MAIS NÍTIDO · 29/08/2026
   Ele pediu a borda dourada dos cartões um pouco mais visível.

   Foi preciso separar duas coisas que antes eram a mesma
   variável. O fio de fora, que desenha o cartão, e os fios de
   dentro (o divisor da lista de entregas, a roda do ícone do
   contato, o círculo da letra do pilar, as fichas do
   diagnóstico) não querem o mesmo peso: subir os dois juntos
   deixaria o miolo do cartão riscado.

   Então o contorno virou --cartao-contorno, e só ele subiu.
   --cartao-borda continua valendo para o que é de dentro.

   No modo vermelho o cartão é branco sobre a página borgonha:
   ali o recorte já é o próprio branco, e o contorno não tem
   trabalho a fazer. Por isso só o modo branco muda aqui.
   ========================================================= */

/* PEGADINHA DO CSS, e o motivo desta regra estar no cartão e não
   no :root: o var() de dentro de uma variável é resolvido ONDE ELA
   É DEFINIDA, não onde ela é usada. Escrito no :root,
   --cartao-contorno congelaria o --cartao-borda do :root e ignoraria
   o que o cartão redefine nele mesmo. Definido aqui, no próprio
   cartão, ele lê o valor local, que é o que se espera. */
.bloco,
.cartao,
.jornada__etapa,
.confronto__coluna,
.diagnostico,
.zap,
.citacao,
.mapa,
.historia__numeros li {
  --cartao-contorno: var(--cartao-borda);
}

html[data-tema="claro"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  /* era 0,34: o dourado do manual sobre o borgonha some quando
     está fraco assim, e o cartão parecia não ter borda */
  --cartao-contorno: rgba(185, 155, 96, 0.6);
}

/* =========================================================
   COMPARTILHAR O ARTIGO · 29/08/2026
   Fica no fim do texto, que é onde a pessoa decide se aquilo
   valia a pena mandar para alguém.

   Não é cartão: nenhuma das classes está na lista dos cartões
   coloridos, então este bloco segue a cor da página, como o
   resto do corpo do artigo.

   O fio de cima e a folga vieram do .artigo__fim, que os tinha
   antes: agora quem abre o rodapé do artigo é esta faixa, e a
   assinatura vem logo abaixo, sem segundo risco.
   ========================================================= */
.compartilhar {
  max-width: 68ch;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--cartao-borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.compartilhar__rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}

.compartilhar__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compartilhar__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--cartao-borda);
  border-radius: 50%;
  color: var(--texto);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease,
    scale 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.compartilhar__botao:hover {
  color: var(--menu-cor-ativa);
  border-color: var(--realce);
  scale: 1.08;
}
.compartilhar__botao:active {
  scale: 0.96;
  transition-duration: 0.1s;
}
.compartilhar__botao svg {
  width: 19px;
  height: 19px;
}

/* "Link copiado", escrito pelo site.js e apagado alguns segundos
   depois. Nasce sem texto, então não ocupa lugar até acontecer. */
.compartilhar__aviso {
  font-size: 12px;
  font-weight: 300;
  color: var(--rotulo);
}

/* A assinatura perdeu o fio e a folga grande, que passaram para a
   faixa de compartilhar logo acima. */
.artigo__fim {
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .compartilhar__botao:hover,
  .compartilhar__botao:active {
    scale: none;
  }
}

/* =========================================================
   CONVITE AO INSTAGRAM · 31/08/2026
   Pedido da cliente: um cartão, repetido em algumas páginas,
   com a frase do convite e um botão que leva ao perfil.

   É primo do cartão do WhatsApp: carrega a classe .zap junto,
   então já nasce com a mesma caixa, a mesma borda dourada e a
   mesma quebra no celular, sem repetir nada disso aqui. O
   modificador muda só o que precisa ser diferente para os dois
   não parecerem o mesmo cartão duas vezes seguidas: o selo
   redondo com o ícone, a etiqueta em cima do título e o arroba
   embaixo do botão.
   ========================================================= */

/* Selo e texto andam juntos: viram UM item da flex do .zap, e
   é isso que mantém o botão empurrado para a direita, como no
   cartão do WhatsApp. Sem este embrulho o selo contaria como
   um terceiro item e o espaçamento se abriria entre ele e o
   texto. */
.insta__frente {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 24px);
}

.insta__selo {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(48px, 6vw, 60px);
  aspect-ratio: 1;
  border: 1px solid var(--cartao-borda);
  border-radius: 50%;
  color: var(--icone);
}
.insta__selo svg {
  width: 52%;
  height: 52%;
}

/* A etiqueta é um <p> dentro do .zap__copia, e lá todo parágrafo
   nasce com 10px em cima. Aqui ela é a primeira linha do cartão,
   então esse respiro sai e vai para debaixo dela. */
.zap--insta .insta__rotulo {
  margin-top: 0;
  max-width: none;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rotulo);
}
.zap--insta .zap__copia h2 {
  margin-top: 12px;
}

/* Botão e arroba, um debaixo do outro. O arroba não é link: quem
   leva ao perfil é o botão, e repetir o mesmo destino duas vezes
   só atrapalha quem navega por teclado. */
.insta__acao {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.insta__arroba {
  font-size: 12px;
  font-weight: 300;
  color: var(--rotulo);
}

@media (max-width: 900px) {
  /* No celular o selo ao lado do texto rouba largura de uma
     coluna que já está apertada, então ele sobe para cima da
     etiqueta e tudo fica alinhado à esquerda. O botão vai a
     largura cheia, como o do cartão do WhatsApp. */
  .insta__frente {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .insta__acao {
    width: 100%;
    justify-items: stretch;
  }
}

/* =========================================================
   LOADER · A ENTRADA E A SAÍDA DO CONDUZ · 30/09/2026
   Código original dos seus dois arquivos:
     "Entrada da pagina conduz/loader_transicao_logo.html"
     "Saida da pagina conduz/loader_saida_conduz.html"
   Substitui a versão anterior (a marca dourada que se montava a
   partir do selo), que saiu do CSS, do site.js e das seis páginas.

   O QUE ACONTECE
     · ENTRADA: ao abrir a página do Conduz, o selo gira enquanto ela
       carrega, acelera e some, e a logo do Conduz se desenha faixa
       por faixa (azul, laranja, seta) com "Entrando no ambiente
       Conduz" embaixo.
     · SAÍDA: na página do Conduz, um clique num link para outra
       página do site cobre a tela com a logo inteira, apaga as faixas
       seguindo as setas, traz o selo girando e só então navega. A
       página seguinte abre com o selo já girando, sem repetir a
       entrada dele (o mesmo data-loader="continua" de sempre).
     · Em todo o resto do site, o loader continua exatamente como era.

   O QUE MUDOU DO SEU CÓDIGO, e só isto:
     · As variáveis saíram do :root e foram para a própria tela
       (.loader-screen--conduz e .exit-screen). Os dois arquivos
       têm --stagger com valores diferentes (.32s e .28s); no :root,
       um apagaria o outro. Os valores são os seus.
     · .stage, .brand e .band ficam presos à tela de cada um, para
       não vazar para o resto do site.
     · A tela de saída nasce escondida (display: none) e aparece com
       o .show: no seu arquivo ela era a página inteira.
     · O selo da saída precisa desligar o sealEnter e o giro que o
       loader de sempre dá a todo .seal, senão ele apareceria por
       cima da logo antes da hora.
     · O fade-out da entrada é o seu, de .6s, e fica no .done (o do
       loader de sempre é .4s e também está só no .done, de propósito:
       ver o comentário do .loader-screen lá em cima).
   ========================================================= */

/* ---------- ENTRADA ---------- */
.loader-screen--conduz {
  --spin-dur: 2.6s;     /* uma volta do selo */
  --enter-dur: .6s;     /* entrada do selo */
  --draw-dur: .6s;      /* tempo pra desenhar UMA faixa */
  --stagger: .32s;      /* intervalo entre o início de uma faixa e a próxima */
  --pivot: 40% 47%;     /* centro do "C" da logo (eixo do giro) */
}
.loader-screen--conduz.done {
  transition: opacity .6s ease, visibility .6s ease;
}

.loader-screen--conduz .stage,
.exit-screen .stage {
  position: relative;
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 320/274;
  display: grid;
  place-items: center;
}

/* ângulo animável (Chrome, Edge, Safari 16.4+, Firefox 128+) */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.loader-screen--conduz .brand,
.exit-screen .brand { position: absolute; inset: 0; pointer-events: none; }

.loader-screen--conduz .band {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --sweep: 0deg;
  /* máscara em "leque": revela a partir de --start, crescendo no sentido anti-horário */
  -webkit-mask: conic-gradient(from var(--start) at var(--pivot),
      transparent 0 calc(360deg - var(--sweep)),
      #000 calc(360deg - var(--sweep) + 7deg));
          mask: conic-gradient(from var(--start) at var(--pivot),
      transparent 0 calc(360deg - var(--sweep)),
      #000 calc(360deg - var(--sweep) + 7deg));
}
/* --start = ponta da faixa (sentido horário) · --span = quanto ela percorre */
.loader-screen--conduz .band.navy   { --start: 72deg;  --span: 292deg; --i: 0; }
.loader-screen--conduz .band.orange { --start: 75deg;  --span: 298deg; --i: 1; }
.loader-screen--conduz .band.arrow  { --start: 230deg; --span: 158deg; --i: 2; }

.loader-screen--conduz.draw .band {
  animation: draw var(--draw-dur) cubic-bezier(.45,.05,.25,1) calc(var(--i) * var(--stagger)) both;
}
@keyframes draw { to { --sweep: var(--span); } }

/* brilho sutil quando a seta termina */
.loader-screen--conduz .brand::after {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,176,0,.22), transparent 70%);
  opacity: 0; z-index: -1;
}
.loader-screen--conduz.draw .brand::after {
  animation: glow 1.2s ease-out calc(2 * var(--stagger) + var(--draw-dur) * .8) both;
}
@keyframes glow { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

/* rótulo */
.loader-screen--conduz .loading-label { transition: opacity .35s ease; }
.loader-screen--conduz.reveal .loading-label { animation: none; opacity: 0; }

/* slot: "Carregando" e a mensagem ocupam o mesmo lugar */
.label-slot { display: grid; place-items: center; min-height: 1.6em; text-align: center; padding: 0 16px; }
.label-slot > * { grid-area: 1/1; }

/* mensagem de entrada (aparece enquanto a logo se desenha) */
.enter-msg {
  --navy: #1B2F7A;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--navy); opacity: 0;
}
.enter-msg strong { font-weight: 700; color: #E8740C; }
.loader-screen--conduz.draw .enter-msg {
  animation: msgIn .7s cubic-bezier(.2,.7,.2,1) var(--stagger) both;
}
@keyframes msgIn {
  0%   { opacity: 0; transform: translateY(8px); letter-spacing: .5em; filter: blur(3px); }
  100% { opacity: .85; transform: none; letter-spacing: .28em; filter: blur(0); }
}

/* acessibilidade: sem giro, só troca suave */
@media (prefers-reduced-motion: reduce) {
  .loader-screen--conduz .seal,
  .loader-screen--conduz .seal img,
  .loader-screen--conduz .loading-label { animation: none !important; }
  .loader-screen--conduz.reveal .seal { opacity: 0; transition: opacity .4s; }
  .loader-screen--conduz .band { -webkit-mask: none; mask: none; opacity: 0; transition: opacity .5s; }
  .loader-screen--conduz.draw .band { animation: none !important; opacity: 1; }
  .loader-screen--conduz.draw .brand::after { animation: none !important; }
  .loader-screen--conduz.draw .enter-msg { animation: none !important; opacity: .85; transition: opacity .5s; }
}

/* ---------- SAÍDA ---------- */
@property --erase { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.exit-screen {
  --navy: #1B2F7A;
  --orange: #E8740C;
  --erase-dur: .6s;    /* tempo pra apagar UMA faixa */
  --stagger: .28s;     /* intervalo entre as faixas */
  --reveal-dur: .9s;   /* entrada do selo (girando no sentido horário) */
  --spin-dur: 2.6s;    /* uma volta do selo */
  --pivot: 40% 47%;    /* centro do "C" da logo */

  position: fixed; inset: 0; z-index: 9999;
  background: #fff;
  display: none; /* no site ela espera o clique; ver .show */
  flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
}
.exit-screen.show { display: flex; }

.exit-screen .band {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --erase: 0deg;
  /* apaga a partir de --start crescendo no sentido anti-horário
     = mesma direção das setas: a cauda some primeiro, a ponta por último */
  -webkit-mask: conic-gradient(from var(--start) at var(--pivot),
      #000 0 calc(360deg - var(--erase) - 7deg),
      transparent calc(360deg - var(--erase)));
          mask: conic-gradient(from var(--start) at var(--pivot),
      #000 0 calc(360deg - var(--erase) - 7deg),
      transparent calc(360deg - var(--erase)));
}
.exit-screen .band.navy   { --start: 72deg;  --span: 300deg; --i: 0; }
.exit-screen .band.orange { --start: 75deg;  --span: 306deg; --i: 1; }
.exit-screen .band.arrow  { --start: 230deg; --span: 166deg; --i: 2; }

.exit-screen.erase .band {
  animation: erase var(--erase-dur) cubic-bezier(.55,0,.55,1) calc(var(--i) * var(--stagger)) both;
}
@keyframes erase { to { --erase: var(--span); } }

/* SELO (aparece no sentido horário) · o animation: none desliga o
   sealEnter e o giro que o loader de sempre dá a todo .seal */
.exit-screen .seal { opacity: 0; animation: none; }
.exit-screen .seal img { display: block; width: clamp(64px, 9vw, 96px); height: auto; animation: none; }

.exit-screen.seal-in .seal {
  animation: sealReveal var(--reveal-dur) cubic-bezier(.3,.1,.3,1) both;
}
/* giro horário: começa rápido e assenta na velocidade normal */
.exit-screen.seal-in .seal img {
  animation:
    spinIn var(--reveal-dur) cubic-bezier(.2,.6,.3,1) both,
    spin var(--spin-dur) linear var(--reveal-dur) infinite;
}
/* selo aparece INTEIRO: cresce e ganha nitidez enquanto gira no sentido horário */
@keyframes sealReveal {
  0%   { opacity: 0; transform: scale(.55); filter: blur(5px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes spinIn { from { transform: rotate(-270deg); } to { transform: rotate(0deg); } }

/* MENSAGEM */
.exit-msg {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--navy); opacity: 0; text-align: center; padding: 0 16px;
  transition: color .8s ease;
}
.exit-msg strong { font-weight: 700; color: var(--orange); transition: color .8s ease; }
.exit-screen.show .exit-msg { animation: msgIn .6s cubic-bezier(.2,.7,.2,1) .1s both; }
/* quando o selo assume, o texto ganha a cor dele */
.exit-screen.seal-in .exit-msg,
.exit-screen.seal-in .exit-msg strong { color: var(--burgundy); }

@media (prefers-reduced-motion: reduce) {
  .exit-screen .band { -webkit-mask: none; mask: none; }
  .exit-screen.erase .band { animation: none !important; opacity: 0; transition: opacity .4s; }
  .exit-screen.seal-in .seal { animation: none !important; opacity: 1; transition: opacity .4s; }
  .exit-screen.seal-in .seal img { animation: none !important; }
  .exit-screen.show .exit-msg { animation: none !important; opacity: .85; }
}

/* =========================================================
   PÁGINA DO CONDUZ · identidade própria · 08/09/2026

   A cliente disse que o Conduz é uma extensão da SMARIM, com
   cores próprias: azul, laranja e dourado. Ele pediu que a
   página inteira mudasse, barra do menu e rodapé incluídos.

   COMO ISTO FUNCIONA, E POR QUE NÃO FOI PRECISO REESCREVER NADA
   O site já não usa cor crua para superfície e texto: usa
   apelidos (--titulo, --texto, --rotulo, --acao-fundo...) que
   cada modo redefine. Este bloco só redefine os mesmos apelidos
   de novo, agora no <html> da página do Conduz. Título, cartão,
   botão, ícone, menu e rodapé trocam de cor sozinhos, porque
   nenhum deles sabe qual cor está lendo.
   Quem marca a página é o data-pagina="conduz" do <html>, que já
   existia por causa do loader.

   O MODO CONTINUA SENDO O DO SITE
   O botão de modo segue funcionando: aqui o escuro é o AZUL no
   lugar do borgonha. O valor guardado continua sendo "borgonha",
   e é de propósito: é a chave do localStorage, compartilhada com
   as outras cinco páginas. Quem escolheu o escuro na home entra
   no Conduz no escuro, só que em azul. Trocar o nome da chave
   faria o visitante perder a escolha ao mudar de página.
   Quem diz "azul" em palavras é o site.js, no rótulo do botão.

   AS CORES SAÍRAM DA ARTE DA IDENTIDADE · 10/09/2026
   Os três valores de marca foram lidos direto do material que
   você mandou em "identidade conduz": o azul do logotipo é
   #01285f, o laranja da barra é #fd5a02 e o dourado é #dfa02c.
   O azul e o laranja daqui eram versões apagadas deles, de
   quando eu só tinha a logo pequena; agora batem com a arte.

   OS QUATRO LARANJAS, E POR QUE SÃO QUATRO
   Laranja é uma cor de meio-tom: a mesma que serve de fundo não
   serve de palavra. Cada um tem um contraste medido:
     --laranja        #f75c04  a cor da marca, a da barra do
                               material. Só onde é FORMA: fio do
                               cartão, mancha do fundo, chapa de
                               cor com texto azul-escuro por cima.
     --laranja-fundo  #bd4f0c  superfície que leva texto branco
                               (4,9:1 · passa em texto normal).
     --laranja-texto  #a8460b  palavra sobre branco (5,9:1).
     --laranja-claro  #f2884a  palavra sobre o azul escuro (6,0:1).
   É a mesma disciplina que o site já tinha com o dourado, que é
   #b99b60 como linha e #8f7038 quando vira texto sobre branco.

   O DOURADO AQUI É O DA MARCA DO CONDUZ
   --dourado passa de #b99b60 (manual da SMARIM) para #dfa02c, que
   é o dourado do próprio símbolo do Conduz. Como é redefinido no
   <html>, o risco do título, os fios e os rótulos acompanham.
   Sobre branco ele dá 2,1:1, então continua valendo a regra de
   sempre: dourado é linha, nunca palavra; palavra sobre branco é
   #8f7038. Sobre o azul escuro ele dá 6,5:1 e pode ser palavra.

   O loader e a marca d'água continuam com o dourado antigo
   (#dca648): é código seu, e a diferença entre os dois não se
   enxerga. Se quiser igualar, é o --seal-gold lá em cima.
   ========================================================= */

/* as cores do Conduz, e só nesta página */
html[data-pagina="conduz"] {
  --azul: #0c2a5e;        /* títulos, barra, rodapé */
  --azul-medio: #1a3f7a;  /* hover e superfície um passo acima */
  --azul-fundo: #0b2650;  /* a página no modo escuro */
  --azul-menu: #14356b;   /* painel do menu no celular */

  --laranja: #f75c04;
  --laranja-fundo: #bd4f0c;
  --laranja-texto: #a8460b;
  --laranja-claro: #f2884a;

  --dourado: #dfa02c;
}

/* --- modo claro · página branca, acentos azuis --- */
html[data-pagina="conduz"][data-tema="claro"] {
  --titulo: var(--azul);
  --fundo-rodape: var(--azul);

  --vidro: rgba(254, 254, 254, 0.72);
  --menu-fundo: #fefefe;
  --linha: rgba(12, 42, 94, 0.12);

  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--azul);

  /* o fundo animado passa a ter laranja no lugar do sopro dourado:
     é o jeito mais barato de a cor nova aparecer sem gritar */
  --mancha-ouro: rgba(247, 92, 4, 0.2);
  --mancha-escura: rgba(12, 42, 94, 0.13);

  --icone: var(--azul);

  --capa-fundo: linear-gradient(135deg, #16386f, #0a1f3d);
  --cartao-sombra: rgba(5, 17, 36, 0.4);

  /* a ação cheia é o lugar do laranja: é o que a pessoa clica */
  --acao-fundo: var(--laranja-fundo);
  --acao-texto: var(--branco);

  --botao-hover-fundo: var(--azul);
  --botao-hover-texto: var(--branco);
  --vazado-borda: rgba(12, 42, 94, 0.35);
  --vazado-texto: var(--azul);
  --vazado-hover: var(--azul);

  --barra-solida: var(--azul);
}

/* --- modo escuro · aqui ele é AZUL, não borgonha --- */
html[data-pagina="conduz"][data-tema="borgonha"] {
  --fundo-pagina: var(--azul-fundo);
  --texto: rgba(254, 254, 254, 0.8);
  --titulo: var(--branco);
  --fundo-rodape: var(--branco);

  --vidro: rgba(20, 48, 74, 0.72);
  --menu-fundo: #09203f;
  --linha: rgba(223, 160, 44, 0.28);

  --menu-cor: rgba(254, 254, 254, 0.78);
  --menu-cor-ativa: var(--dourado);

  --mancha-ouro: rgba(223, 160, 44, 0.3);
  --mancha-escura: rgba(4, 14, 30, 0.78);

  --rotulo: var(--dourado);

  --cartao-fundo: rgba(35, 73, 111, 0.42);
  --cartao-borda: rgba(223, 160, 44, 0.26);
  --icone: var(--dourado);

  --realce: var(--dourado);
  --capa-fundo: linear-gradient(135deg, var(--azul), #0a1f3d);
  --cartao-sombra: rgba(4, 12, 26, 0.55);

  --acao-fundo: var(--laranja-fundo);
  --acao-texto: var(--branco);

  --botao-hover-fundo: var(--branco);
  --botao-hover-texto: var(--azul);
  --vazado-borda: rgba(254, 254, 254, 0.4);
  --vazado-texto: var(--branco);
  --vazado-hover: var(--dourado);

  --barra-solida: var(--branco);
}

/* --- a barra continua sendo do modo contrário à página --- */
html[data-pagina="conduz"][data-tema="claro"] .cabecalho {
  --vidro: var(--azul);
  --barra-solida: var(--azul);
  --menu-fundo: var(--azul-menu);

  --menu-cor: rgba(254, 254, 254, 0.82);
  --menu-cor-ativa: var(--dourado);
  --linha: rgba(223, 160, 44, 0.34);
}
html[data-pagina="conduz"][data-tema="borgonha"] .cabecalho {
  --vidro: var(--branco);
  --barra-solida: var(--branco);
  --menu-fundo: #fefefe;

  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--azul);
  --linha: rgba(77, 76, 78, 0.12);
}

/* A bolinha do botão de modo é a única cor crua do cabeçalho: ela
   mostra o modo que o clique vai trazer, e ali isso é o azul.
   No modo escuro ela já é branca, e branca continua certa. */
html[data-pagina="conduz"][data-tema="claro"] .tema-botao__bolha {
  background: var(--azul);
}

/* --- o rodapé acompanha a barra, como no resto do site --- */
html[data-pagina="conduz"][data-tema="claro"] .rodape {
  --fundo-rodape: var(--azul);

  --rodape-texto: rgba(254, 254, 254, 0.75);
  --rodape-rotulo: var(--dourado);
  --rodape-apagado: rgba(254, 254, 254, 0.5);
  --rodape-linha: rgba(254, 254, 254, 0.15);
  --rodape-realce: var(--dourado);
}
html[data-pagina="conduz"][data-tema="borgonha"] .rodape {
  --fundo-rodape: var(--branco);

  --rodape-texto: var(--cinza);
  --rodape-rotulo: #8f7038;
  --rodape-apagado: rgba(77, 76, 78, 0.65);
  --rodape-linha: rgba(77, 76, 78, 0.15);
  --rodape-realce: var(--azul);
}

/* --- os cartões ---
   O fio que corre no alto no hover (--realce) é o laranja: é a
   única coisa da página que se move, e é onde a cor de destaque
   rende mais. O contorno fica dourado, que é o da marca.
   --realce só desenha traço, nunca palavra: a letra do pilar e os
   textos que acendem no hover usam --rotulo e --menu-cor-ativa
   desde 29/08/2026, justamente para não dependerem dele. */
html[data-pagina="conduz"][data-tema="claro"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  --cartao-fundo: var(--azul);
  --cartao-borda: rgba(223, 160, 44, 0.34);
  --cartao-contorno: rgba(223, 160, 44, 0.6);

  --titulo: var(--branco);
  --texto: rgba(254, 254, 254, 0.82);
  --rotulo: var(--dourado);
  --icone: var(--dourado);
  --menu-cor: rgba(254, 254, 254, 0.82);
  --menu-cor-ativa: var(--dourado);

  /* sobre o azul do cartao o laranja da marca fica escuro demais
     para se ver: aqui entra o clareado */
  --realce: var(--laranja-claro);

  /* o botao cheio segue laranja, que se ve bem sobre o azul; o
     hover e que precisa sair dele, senao seria laranja sobre azul
     virando laranja sobre azul */
  --botao-hover-fundo: var(--branco);
  --botao-hover-texto: var(--azul);

  /* a capa sem foto precisa ficar mais escura que o cartao */
  --capa-fundo: linear-gradient(135deg, #0a1f3d, #061627);
}

/* No modo escuro o cartão é branco, como no resto do site desde
   29/08/2026 — então o miolo dele volta a ser a paleta clara, só
   que a do Conduz. */
html[data-pagina="conduz"][data-tema="borgonha"] :is(.bloco,
    .cartao,
    .jornada__etapa,
    .confronto__coluna,
    .diagnostico,
    .zap,
    .citacao,
    .mapa,
    .historia__numeros li) {
  --cartao-fundo: var(--branco);
  --cartao-borda: rgba(77, 76, 78, 0.14);

  --titulo: var(--azul);
  --texto: var(--cinza);
  --rotulo: #8f7038;
  --realce: var(--laranja);
  --icone: var(--azul);
  --menu-cor: var(--cinza);
  --menu-cor-ativa: var(--azul);

  --acao-fundo: var(--laranja-fundo);
  --acao-texto: var(--branco);
  --botao-hover-fundo: var(--azul);
  --botao-hover-texto: var(--branco);

  --capa-fundo: linear-gradient(135deg, var(--azul), #0a1f3d);
}

/* =========================================================
   A ASSINATURA DA MARCA · 10/09/2026
   "DIREÇÃO HOJE. SUSTENTABILIDADE AMANHÃ." vem embaixo do
   nome no material, nas duas cores: a primeira metade no azul,
   a segunda no laranja. Aqui ela entra embaixo do <h1>, com o
   mesmo espacejamento largo da arte.

   No modo escuro o azul do fundo come a primeira metade, então
   ela vira branca. A segunda metade não pode ser o laranja da
   marca sobre azul (fica ilegível): usa o --laranja-claro, que
   existe exatamente para isso.
   ========================================================= */
.conduz-assinatura {
  margin-top: 20px;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.7;
}
.conduz-assinatura__hoje {
  color: var(--titulo);
}
.conduz-assinatura__amanha {
  color: var(--laranja-texto);
}
html[data-pagina="conduz"][data-tema="borgonha"] .conduz-assinatura__amanha {
  color: var(--laranja-claro);
}

/* =========================================================
   MARCA D'ÁGUA DA PÁGINA DO CONDUZ · 30/09/2026
   Código original do arquivo dele:
     "Marca d' água pagina conduz/marca_dagua_conduz_limpa.html"

   Substitui a de 08/09 (marca dourada em SVG, derivando). Agora é
   a logo nova, em três faixas, que se desenha no fundo uma faixa
   por vez no sentido anti-horário, e depois, a cada ciclo, um
   brilho percorre a logo seguindo as setas e ela respira.

   As três faixas são os mesmos .webp do loader de entrada
   (assets/img/original/conduz-faixa-*.webp, idênticos byte a
   byte aos embutidos no arquivo dele). Só o brilho é arquivo novo:
   conduz-faixa-brilho.webp. O conduz-dourado.svg antigo ficou no
   disco, sem uso.

   Classes, variáveis, keyframes e tempos estão como ele mandou.
   A máscara é conic-gradient, gradiente do próprio CSS, não
   arquivo: abre igual no file://.

   O que é meu, só de encaixe:
   · a marca vive dentro do .fundo-anim--pagina, no lugar do <img>
     antigo, e não solta no <body>. Por isso ficou de fora a regra
     dele `.watermark ~ * { position: relative; z-index: 1 }`: aqui
     ela pegaria a abertura, os loaders e o cabeçalho, que são
     fixed/sticky, e desmontaria o site. A camada de fundo já fica
     atrás de tudo;
   · as animações esperam o loader do Conduz sair. Sem isso o
     desenho de entrada (0,3s depois de abrir) acontecia inteiro
     escondido atrás da tela de carregamento, que dura uns 6s. Assim
     a logo do loader some e a mesma logo se desenha no fundo;
   · no celular o brilho e a respiração param (decisão de
     desempenho de 20/08/2026); o desenho de entrada, que toca uma
     vez só, continua;
   · na impressão ela não sai, como a anterior.
   ========================================================= */
html[data-pagina="conduz"] {
  --wm-size: min(72vmin, 640px); /* tamanho da logo */
  --wm-x: 50%; /* posição horizontal do centro */
  --wm-y: 52%; /* posição vertical do centro */
  --wm-opacity: 0.07; /* intensidade da marca (0.04 a 0.10 é o ideal) */
  --wm-shine: 0.2; /* intensidade do brilho que passa */
  --wm-cycle: 9s; /* intervalo entre um brilho e outro */
  --wm-draw: 0.9s; /* tempo pra desenhar cada faixa na entrada */
  --wm-stagger: 0.45s; /* intervalo entre faixas na entrada */
  --wm-pivot: 40% 47%; /* centro do "C" da logo */
}

@property --wm-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --wm-pos {
  syntax: "<angle>";
  inherits: false;
  initial-value: 80deg;
}

.watermark {
  position: fixed;
  z-index: 0;
  left: var(--wm-x);
  top: var(--wm-y);
  width: var(--wm-size);
  aspect-ratio: 320/274;
  translate: -50% -50%;
  pointer-events: none;
  user-select: none;
  animation: wmBreathe var(--wm-cycle) ease-in-out
    calc(3 * var(--wm-stagger) + var(--wm-draw)) infinite;
}
.watermark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}

/* --- faixas: desenho de entrada --- */
.wm-band {
  opacity: var(--wm-opacity);
  --wm-sweep: 0deg;
  -webkit-mask: conic-gradient(
    from var(--start) at var(--wm-pivot),
    transparent 0 calc(360deg - var(--wm-sweep)),
    #000 calc(360deg - var(--wm-sweep) + 10deg)
  );
  mask: conic-gradient(
    from var(--start) at var(--wm-pivot),
    transparent 0 calc(360deg - var(--wm-sweep)),
    #000 calc(360deg - var(--wm-sweep) + 10deg)
  );
  animation: wmDraw var(--wm-draw) cubic-bezier(0.45, 0.05, 0.25, 1)
    calc(var(--i) * var(--wm-stagger) + 0.3s) both;
}
.wm-band.navy {
  --start: 72deg;
  --span: 300deg;
  --i: 0;
}
.wm-band.orange {
  --start: 75deg;
  --span: 306deg;
  --i: 1;
}
.wm-band.arrow {
  --start: 230deg;
  --span: 166deg;
  --i: 2;
}
@keyframes wmDraw {
  to {
    --wm-sweep: var(--span);
  }
}

/* --- brilho que percorre a logo no sentido das setas (anti-horário) --- */
.wm-shine {
  opacity: var(--wm-shine);
  --wm-pos: 80deg;
  /* cunha com frente suave e rastro que se apaga */
  -webkit-mask: conic-gradient(
    from calc(var(--wm-pos) - 12deg) at var(--wm-pivot),
    transparent 0,
    #000 12deg,
    transparent 70deg,
    transparent 360deg
  );
  mask: conic-gradient(
    from calc(var(--wm-pos) - 12deg) at var(--wm-pivot),
    transparent 0,
    #000 12deg,
    transparent 70deg,
    transparent 360deg
  );
  visibility: hidden;
  animation: wmShine var(--wm-cycle) linear
    calc(3 * var(--wm-stagger) + var(--wm-draw)) infinite;
}
@keyframes wmShine {
  0% {
    visibility: visible;
    --wm-pos: 80deg;
  }
  38% {
    visibility: visible;
    --wm-pos: -310deg;
  } /* dá a volta seguindo as setas */
  38.1%,
  100% {
    visibility: hidden;
    --wm-pos: -310deg;
  }
}

/* respiração bem sutil */
@keyframes wmBreathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.015;
  }
}

/* versão monocromática (fica mais discreta atrás de textos coloridos) */
.watermark--mono img {
  filter: grayscale(1) brightness(0.55);
}

@media (prefers-reduced-motion: reduce) {
  .watermark,
  .wm-band,
  .wm-shine {
    animation: none !important;
  }
  .wm-band {
    -webkit-mask: none;
    mask: none;
  }
  .wm-shine {
    display: none;
  }
}

/* meu: tudo congelado no quadro zero enquanto o loader do Conduz
   estiver na tela. Quando ele ganha .done, o desenho começa. Se o
   loader não for o do Conduz (abertura tocando), nada fica preso. */
html:has(.loader-screen--conduz:not(.done)) :is(.watermark, .wm-band, .wm-shine) {
  animation-play-state: paused;
}

/* meu: no celular era só o desenho de entrada; desde 05/10/2026 o
   celular tem a marca d'água inteira, igual ao notebook (pedido dele). */

@media print {
  .watermark {
    display: none;
  }
}

/* =========================================================
   LOGO DO CONDUZ NA BARRA E NO RODAPÉ · 08/09/2026
   Arte original dele: "logo conduz/conduz-logo-300.png"

   As duas marcas aparecem juntas, SMARIM · CONDUZ: quem clica na
   logo vai para a home da SMARIM, e continua sendo verdade que o
   CONDUZ é um método dela. A do CONDUZ não é link, e por isso
   está fora do <a> — dentro dele, entraria no nome do link.

   DUAS ARTES, PELO MESMO MOTIVO DA LOGO DA SMARIM
   O wordmark do CONDUZ é bordô e sumiria na barra azul do modo
   claro. Então ele tem as mesmas duas versões que a logo da
   SMARIM já tem: a clara sobre o fundo azul, a escura sobre o
   fundo branco. As artes claras saíram do PNG dele, com o bordô
   virando branco e o dourado do símbolo e da assinatura intactos.
   Classes próprias, e não as --marca-- da SMARIM: reaproveitar
   aquelas obrigaria a brigar com as regras de display delas.

   POR QUE A BARRA USA UMA ARTE DEITADA
   A logo dele é empilhada, símbolo em cima e palavra embaixo. A
   barra tem 81px: empilhada ali, "CONDUZ" ficaria com 6px de
   altura e a assinatura sumiria. A deitada é o mesmo arquivo
   recortado em duas peças e remontado lado a lado, pixel por
   pixel o que ele mandou. No rodapé sobra altura, e lá entra a
   empilhada como veio.

   O TAMANHO É MENOR QUE O DA SMARIM, E É DE PROPÓSITO
   28px contra os 36px da logo da SMARIM. Quem assina a página é a
   empresa; o CONDUZ é o programa, e vem em segundo. Na mesma
   altura, o símbolo do CONDUZ puxava o olho primeiro.
   ========================================================= */
.cabecalho__marcas {
  display: flex;
  align-items: center;
  gap: 12px;
  /* o margin-right: auto era do .cabecalho__logo, que agora mora
     aqui dentro: é este bloco que empurra o menu para a direita */
  margin-right: auto;
  flex: none;
}
.cabecalho__marcas .cabecalho__logo {
  margin-right: 0;
}

.cabecalho__conduz-par {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* o fiozinho entre as duas marcas: separa sem pesar */
.cabecalho__par {
  width: 1px;
  height: 26px;
  flex: none;
  background: var(--linha);
}

.cabecalho__conduz {
  height: 28px;
  width: auto;
  flex: none;
}
.cabecalho__conduz--escura {
  display: none;
}
html[data-tema="borgonha"] .cabecalho__conduz--escura {
  display: block;
}
html[data-tema="borgonha"] .cabecalho__conduz--branca {
  display: none;
}

/* --- barra no celular · 05/10/2026, pedido dele ---
   Barra mais baixa (81px -> ~56px), logo da SMARIM menor e a do
   CONDUZ aparecendo ao lado dela na página do programa. Antes a do
   CONDUZ sumia abaixo de 1023px; ele reparou e pediu de volta.
   As contas para caber: num celular de 390px sobram 342px dentro do
   container, e marcas + botão de modo + hambúrguer dão ~316px. Abaixo
   de 390px (os de 360px) tudo encolhe mais um degrau. */
@media (max-width: 767px) {
  .cabecalho__interno {
    gap: 10px;
    padding-block: 10px;
  }
  .cabecalho__logo img {
    height: 28px;
  }
  .cabecalho__marcas,
  .cabecalho__conduz-par {
    gap: 8px;
  }
  .cabecalho__par {
    height: 20px;
  }
  .cabecalho__conduz {
    height: 22px;
  }
  .tema-botao,
  .menu-botao {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 389px) {
  .cabecalho__logo img {
    height: 24px;
  }
  .cabecalho__conduz {
    height: 19px;
  }
}

/* --- rodapé ---
   A empilhada, embaixo da logo da SMARIM e antes do lema. É block
   porque as duas logos são <img>: inline, elas dividiriam a linha. */
.rodape__conduz {
  /* a marca nova é deitada, então o tamanho aqui é por LARGURA: por
     altura, como era com a empilhada, ela sairia com 300px de largura
     e estouraria a coluna do rodapé */
  width: 170px;
  height: auto;
  margin-top: 18px;
}
.rodape__conduz--escura {
  display: none;
}
.rodape__conduz--branca {
  display: block;
}
html[data-tema="borgonha"] .rodape__conduz--escura {
  display: block;
}
html[data-tema="borgonha"] .rodape__conduz--branca {
  display: none;
}

/* =========================================================
   CARTÕES MENORES NO CELULAR · 05/10/2026, pedido dele
   Vale para todos os cartões do site. Nada muda de lugar nem
   de cor: só a folga de dentro, o espaço entre eles e o
   tamanho de título e texto, para caber mais na tela e rolar
   menos. Fica no fim do arquivo de propósito, para vencer as
   regras de cada cartão sem precisar de seletor mais forte.
   ========================================================= */
@media (max-width: 767px) {
  .grade,
  .cartoes,
  .jornada,
  .historia__numeros {
    gap: 10px;
  }

  /* folga de dentro */
  .bloco,
  .citacao {
    padding: 16px 18px;
  }
  .cartao,
  .jornada__etapa,
  .historia__numeros li,
  .post__corpo {
    padding: 14px 16px;
  }
  .confronto__coluna,
  .diagnostico,
  .zap {
    padding: 20px 18px;
    gap: 16px;
  }
  .cartao {
    gap: 14px;
  }

  /* títulos */
  .bloco h3,
  .post__titulo {
    font-size: 1.0625rem;
  }
  .bloco h3 {
    margin-top: 8px;
  }
  .jornada__etapa h3 {
    font-size: 1rem;
  }
  .confronto__coluna h3 {
    font-size: 1.125rem;
  }
  .zap__copia h2,
  .diagnostico h2 {
    font-size: 1.35rem;
  }
  .historia__valor {
    font-size: 1.6rem;
  }
  .citacao p {
    font-size: 1rem;
  }

  /* textos */
  .bloco > p:not(.bloco__rotulo),
  .cartao__corpo > :not(h2) {
    margin-top: 8px;
    font-size: 14px;
  }
  .trilha__lista {
    margin-top: 12px;
    padding-top: 12px;
  }

  /* peças de dentro */
  .cartao__icone {
    width: 36px;
    height: 36px;
  }
  .cartao__icone svg {
    width: 18px;
    height: 18px;
  }
  .post__capa {
    aspect-ratio: 16 / 8;
  }
  .mapa {
    padding: 8px;
  }
}

/* =========================================================
   SETAS DA JORNADA · 05/10/2026, pedido da cliente
   "1 seta 2 seta 3...": cada etapa aponta para a seguinte.

   O DESENHO
   No computador são duas fileiras em zigue-zague:
       1 → 2 → 3 → 4
                   ↓
       8 ← 7 ← 6 ← 5
   Assim toda seta liga vizinhos e nenhuma atravessa a tela de
   volta para a esquerda. A segunda fileira é invertida só no
   desenho (grid-area); no HTML a ordem continua 1 a 8, que é a
   que o leitor de tela e o teclado seguem.
   Até 1023px vira uma coluna só, com todas as setas para baixo.

   A SETA
   Um SVG pequeno dentro de cada etapa (menos a 08), com a linha
   e a ponta em dois traços. Ela é desenhada apontando para a
   direita e girada pela propriedade `rotate` conforme o lugar.
   Cor: --dourado, que na página do CONDUZ é o dourado dele.

   O EFEITO, em dois tempos
   1) Quando o cartão entra na tela (.sobe--visivel, do site.js),
      a seta se desenha: primeiro a linha, depois a ponta.
   2) Depois disso um brilho percorre as setas em ordem, da 1ª à
      7ª, a cada 6s: cada uma acende, avança 4px na direção em
      que aponta e volta. É o "caminho" sendo percorrido.
   O avanço usa `transform` no SVG, que é aplicado DEPOIS do
   `rotate`, então anda sempre no sentido da seta.
   Sem JS ou com movimento reduzido, as setas ficam paradas e
   inteiras.
   ========================================================= */
.jornada__seta {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--dourado);
  pointer-events: none;
}
.jornada__seta svg {
  display: block;
  width: 34px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.jornada__seta path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* --- computador: zigue-zague em duas fileiras --- */
@media (min-width: 1024px) {
  .jornada {
    column-gap: 48px;
    row-gap: 60px;
  }
  .jornada__etapa:nth-child(5) { grid-area: 2 / 4; }
  .jornada__etapa:nth-child(6) { grid-area: 2 / 3; }
  .jornada__etapa:nth-child(7) { grid-area: 2 / 2; }
  .jornada__etapa:nth-child(8) { grid-area: 2 / 1; }

  /* 1, 2, 3: no vão à direita, apontando para a direita */
  .jornada__seta {
    top: 50%;
    left: 100%;
    width: 48px;
    height: 12px;
    margin-top: -6px;
  }
  /* 4: embaixo, apontando para baixo */
  .jornada__etapa:nth-child(4) .jornada__seta {
    top: 100%;
    left: 50%;
    width: 30px;
    height: 60px;
    margin: 0 0 0 -15px;
  }
  .jornada__etapa:nth-child(4) .jornada__seta svg {
    rotate: 90deg;
  }
  /* 5, 6, 7: no vão à esquerda, apontando para a esquerda */
  .jornada__etapa:nth-child(n + 5) .jornada__seta {
    left: auto;
    right: 100%;
  }
  .jornada__etapa:nth-child(n + 5) .jornada__seta svg {
    rotate: 180deg;
  }
}

/* --- tablet e celular: uma coluna, setas para baixo ---
   Número e nome na mesma linha: o cartão fica baixo e a coluna
   de oito não vira uma rolagem sem fim. */
@media (max-width: 1023px) {
  .jornada {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }
  .jornada__etapa {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .jornada__etapa h3 {
    margin-top: 0;
  }
  .jornada__seta {
    top: 100%;
    left: 50%;
    width: 30px;
    height: 34px;
    margin-left: -15px;
  }
  .jornada__seta svg {
    width: 26px;
    rotate: 90deg;
  }
}

/* --- o efeito --- */
@media (prefers-reduced-motion: no-preference) {
  .sobe--visivel .jornada__seta-linha {
    animation: setaDesenha 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: calc(var(--degrau, 0s) + 0.45s);
  }
  .sobe--visivel .jornada__seta-ponta {
    animation: setaDesenha 0.35s ease-out both;
    animation-delay: calc(var(--degrau, 0s) + 0.95s);
  }
  /* O brilho só começa quando a ÚLTIMA etapa aparece, e começa para
     todas no mesmo instante: se cada seta partisse quando o próprio
     cartão entra na tela, a segunda fileira (que entra depois, ao
     rolar) sairia fora de compasso e a onda não seguiria 1, 2, 3...
     O 1,8s é o tempo de a última terminar de se desenhar. */
  .jornada:has(> .sobe--visivel:last-child) .jornada__seta svg {
    animation: setaPercurso 6s ease-in-out infinite;
    animation-delay: calc(1.8s + var(--seta-vez, 0s));
  }
  .jornada__etapa:nth-child(2) { --seta-vez: 0.55s; }
  .jornada__etapa:nth-child(3) { --seta-vez: 1.1s; }
  .jornada__etapa:nth-child(4) { --seta-vez: 1.65s; }
  .jornada__etapa:nth-child(5) { --seta-vez: 2.2s; }
  .jornada__etapa:nth-child(6) { --seta-vez: 2.75s; }
  .jornada__etapa:nth-child(7) { --seta-vez: 3.3s; }
}
@keyframes setaDesenha {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes setaPercurso {
  0%,
  18%,
  100% {
    opacity: 0.9;
    transform: translateX(0);
    filter: none;
  }
  8% {
    opacity: 1;
    transform: translateX(4px);
    filter: drop-shadow(0 0 6px var(--dourado));
  }
}

/* =========================================================
   PÁGINA DO BLOG E PESQUISA · 05/10/2026
   blog.html tem todos os artigos; a home, os três mais recentes
   e o botão "Ver todos os artigos" (.posts__mais), que é a única
   porta para a página: ela não está no menu, a pedido da cliente.

   O campo segue o desenho do site: canto reto, fio de 1px, e o
   dourado só quando ele está em uso (foco). As cores saem dos
   apelidos do modo, então ele acompanha o branco e o vermelho
   (e o laranja/azul nunca entra aqui: a página não é do CONDUZ).
   ========================================================= */
.posts__mais {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.posts__mais .botao span {
  margin-left: 10px;
  transition: translate 0.3s ease;
}
.posts__mais .botao:hover span {
  translate: 4px 0;
}

.busca {
  max-width: 560px;
  margin-bottom: 28px;
}
.busca[hidden] {
  display: none;
}
.busca__rotulo {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rotulo);
}
.busca__campo {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--fundo-pagina);
  border: 1px solid var(--vazado-borda);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.busca__campo:focus-within {
  border-color: var(--dourado);
  box-shadow: 0 0 0 1px var(--dourado), 0 0 18px -8px var(--dourado);
}
.busca__lupa {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  color: var(--rotulo);
}
.busca__entrada {
  flex: 1;
  min-width: 0;
  padding: 15px 14px;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--fonte-texto);
  /* 16px de propósito: abaixo disso o iPhone dá zoom na tela ao
     tocar no campo, e a página fica torta até a pessoa desfazer */
  font-size: 16px;
  font-weight: 300;
  color: var(--titulo);
  -webkit-appearance: none;
  appearance: none;
}
.busca__entrada::placeholder {
  color: var(--texto);
  opacity: 0.7;
}
/* o "x" que o Chrome põe sozinho no campo de busca: já existe o nosso */
.busca__entrada::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.busca__limpar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto);
  cursor: pointer;
  transition: color 0.2s ease;
}
.busca__limpar:hover,
.busca__limpar:focus-visible {
  color: var(--titulo);
}
.busca__limpar svg {
  width: 16px;
  height: 16px;
}
.busca__limpar[hidden] {
  display: none;
}

/* cartão que não bate com a pesquisa. Classe e não `hidden`: o
   .bloco tem display:flex, que passaria por cima do hidden */
.post.post--fora {
  display: none;
}

.busca__vazio {
  max-width: 520px;
  padding: 28px 0 8px;
}
.busca__vazio[hidden] {
  display: none;
}
.busca__vazio-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  color: var(--titulo);
}
.busca__vazio p + p {
  margin-top: 8px;
  font-weight: 300;
}
.busca__vazio .botao {
  margin-top: 22px;
}
/* O .botao foi desenhado para <a>. Num <button> o navegador põe
   fundo cinza-claro e a fonte dele: no modo vermelho o texto do
   vazado (branco) sumia sobre esse fundo. Vale para qualquer
   <button class="botao"> que aparecer no site daqui em diante. */
button.botao {
  font-family: inherit;
  cursor: pointer;
}
button.botao--vazado {
  background: none;
}

@media (max-width: 767px) {
  .busca {
    margin-bottom: 20px;
  }
  .busca__entrada {
    padding: 13px 12px;
  }
  .posts__mais .botao {
    width: 100%;
  }
}

/* =========================================================
   BLOG SEM ARTIGOS · aviso de "Em breve" · 05/10/2026
   Os três artigos de exemplo saíram e a lista ficou vazia. O
   aviso mora no HTML da home e da blog.html o tempo todo, e é o
   CSS que decide quem aparece, olhando se a seção tem algum
   .post dentro (:has). Assim, quando o primeiro artigo for
   colado, o aviso some e a lista, a contagem, a pesquisa e o
   botão "Ver todos os artigos" voltam, sem apagar nada à mão.

   O aviso é um .bloco, então já ganha a cor de cartão de cada
   modo, a entrada ao rolar e o hover com a borda dourada.
   ========================================================= */
.secao:has(.posts .post) .blog__embreve {
  display: none;
}
.secao:not(:has(.posts .post)) :is(.posts, .posts__conta, .posts__mais) {
  display: none;
}

.blog__embreve {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(26px, 4vw, 44px);
}
.blog__embreve-marca {
  width: clamp(64px, 8vw, 96px);
  height: auto;
  opacity: 0.85;
  /* giro lento como o da marca d'água do fundo, mais apressado: um
     "trabalhando nisso" sem ampulheta nem barra de progresso. Não
     reaproveita o giroLento porque aquele carrega o translate de
     centralização da marca d'água e tiraria o símbolo do lugar. */
  animation: embreveGiro 40s linear infinite;
}
@keyframes embreveGiro {
  to {
    rotate: 360deg;
  }
}
.blog__embreve h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}
.blog__embreve p:not(.bloco__rotulo) {
  max-width: 62ch;
}

@media (max-width: 767px) {
  .blog__embreve {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px;
    padding: 22px 18px;
  }
  .blog__embreve-marca {
    width: 56px;
  }
}