/* site/assets/css/site.css
 * Extras do ordo360.org que `base.css` não cobre, e os poucos pontos em que
 * este site se afasta dela de propósito. `base.css` é COMPARTILHADA com o
 * tec.capital: o que é específico do Ordo360 mora aqui, nunca lá.
 *
 * O que este arquivo define:
 *  - a receita ÚNICA de cartão (`.od-cartao` + `.od-medalhao`) e a de item
 *    enumerado (`.od-passo` + `.od-marcador`), que substituíram as quatro e as
 *    três linguagens que conviviam antes;
 *  - o jogo de ícones derivado do símbolo da marca (`.od-ico`);
 *  - a escala de texto do site: dois tamanhos de corpo e teto de 70ch;
 *  - cabeçalho, hero com peça de produto, faixas, prova com micro-visualização,
 *    rodapé de fechamento e o seletor de idioma.
 *
 * Gerado por gerar.mjs a partir de src/render.mjs — só var(--token), zero hex.
 * Prefixo próprio (`od-`) para não confundir com as classes `tc-` do site
 * irmão tec.capital, mesmo reaproveitando a mesma receita.
 */

/* ---------- Escada de canto: 8 px em controle, 12 px em cartão, pílula só em
   chip e etiqueta. Antes conviviam três raios; a pílula em todo botão era o
   que mais afastava a página de "produto de software". ---------- */
.btn {
  border-radius: var(--radius-control);
}
.badge,
.s-etiqueta,
.od-idioma > summary {
  border-radius: var(--radius-pill);
}

/* ---------- Escala de texto ----------
   DOIS tamanhos de corpo no site inteiro, não cinco: `body-m` é o padrão e
   `body-l` é reservado a chamada de seção e fecho. Tudo que é texto corrido
   ganha teto de 70ch — havia parágrafos de 110 caracteres por linha, e a linha
   longa é o que mais cansava a leitura. */
main p,
main li {
  font-size: var(--font-style-body-m-size);
  line-height: var(--font-style-body-m-line-height);
}
.s-secao > .container > p,
.od-intro {
  max-width: 70ch;
  font-size: var(--font-style-body-l-size);
  line-height: var(--font-style-body-l-line-height);
  color: var(--color-text-muted);
}

/* Título de seção com o degradê da marca: o azul escuro abre para o azul claro
   no fim da linha, ecoando o símbolo. Só no título de nível 2, e só quando o
   navegador sabe recortar o fundo no texto. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .s-titulo {
    background: linear-gradient(
      100deg,
      var(--color-text-brand) 30%,
      var(--color-action-primary) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Sobre a faixa de marca e sobre o hero o degradê some: ali o título é claro. */
  .s-hero .s-titulo,
  .od-faixa-marca .s-titulo {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }
}
/* Título de seção de segundo nível (integração, ecossistema, Europa, grupos do
   catálogo): um degrau abaixo, para que a hierarquia não seja plana. */
.s-titulo--menor {
  font-size: var(--font-style-heading-l-size);
  line-height: var(--font-style-heading-l-line-height);
}

/* ---------- Botões ----------
   Uma altura por porte, um raio só, e a variante sobre mídia para o hero (onde
   um botão branco de contorno sobre azul saía apagado). */
.btn {
  font-weight: 600;
}
.btn--lg {
  min-height: 3rem;
  padding-inline: var(--space-6);
}
.btn--sm {
  min-height: 2.25rem;
}
.btn--sobre-midia {
  border: 1px solid var(--color-border-glass);
  background: var(--alpha-white10);
  color: var(--color-text-on-media);
  backdrop-filter: blur(6px);
}
.btn--sobre-midia:hover {
  background: var(--alpha-white25);
}
/* Sobre o azul do hero a primária se inverte: azul sobre azul não é ação, é
   camuflagem. Aqui ela é a superfície clara e o texto é o azul de marca. */
.s-hero .btn--primary {
  border-color: transparent;
  background: var(--color-surface-default);
  color: var(--color-text-brand);
}
.s-hero .btn--primary:hover {
  background: var(--color-surface-sunken);
}

/* ---------- Link com seta ----------
   O "Ver planos" solto virava um link azul perdido no meio de dois botões. Agora
   é um terceiro nível declarado de ação: texto + seta que avança no hover. */
.od-link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-text-brand);
  text-decoration: none;
}
.od-link-seta--sm {
  font-size: var(--font-style-body-s-size);
}
.od-link-seta .od-ico--seta {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-base);
}
.od-link-seta:hover .od-ico--seta {
  transform: translateX(0.2rem);
}
.od-link-seta--volta:hover .od-ico--seta {
  transform: translateX(-0.2rem);
}
.od-link-seta--volta .od-ico--seta {
  transform: rotate(180deg);
}
.od-link-seta--volta:hover .od-ico--seta {
  transform: rotate(180deg) translateX(0.2rem);
}
.od-link-seta:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- Etiqueta de seção ----------
   Ela abria DOZE seções da home, sempre igual, e por isso não sinalizava mais
   nada. Agora a etiqueta comum é um filete azul discreto, e só as duas viradas
   da narrativa — a abertura do problema e a entrada da prova — levam o filete
   dourado. É a última dose do acento na página. */
.s-etiqueta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-brand);
}
.s-etiqueta::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.s-etiqueta--virada::before {
  background: var(--color-border-accent);
}
/* No hero não há filete: a etiqueta já está sobre azul e o traço sumiria. */
.s-hero .s-etiqueta {
  display: block;
}
.s-hero .s-etiqueta::before {
  content: none;
}

/* ---------- Jogo de ícones ----------
   Um só: traço de 1,6 px, canto arredondado, caixa de 24 e sempre em
   `currentColor`. Antes havia emoji, caractere tipográfico e SVG conviviam na
   mesma página. */
.od-ico {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ---------- Utilidades de acessibilidade ---------- */
.od-oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.od-pular-conteudo {
  position: absolute;
  z-index: var(--z-index-sticky);
  top: var(--space-2);
  left: var(--space-2);
  transform: translateY(-150%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-surface-default);
  color: var(--color-text-brand);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-base);
}
.od-pular-conteudo:focus {
  transform: translateY(0);
}

/* ---------- Lockup da marca: proporção e respiro travados ----------
   Os dois SVG têm a mesma caixa (872x244), então basta fixar a altura: a
   largura sai da proporção e o lockup nunca "pula" ao trocar de tema. */
.od-logo {
  display: block;
  height: 1.75rem;
  width: auto;
}
.od-lockup {
  padding-inline: var(--space-1) var(--space-3);
}
.od-logo--escuro {
  display: none;
}
[data-theme="dark"] .od-logo--claro {
  display: none;
}
[data-theme="dark"] .od-logo--escuro {
  display: block;
}

/* ---------- Cabeçalho ----------
   Utilitários agrupados (idioma + tema juntos, num bloco só) e o CTA separado
   deles por um respiro maior: o cabeçalho passa a se ler da direita para a
   esquerda em vez de ser uma fileira de itens soltos. */
.od-utilitarios {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.od-utilitarios__grupo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border-subtle);
}
/* Os três controles da direita com a mesma altura. */
.od-utilitarios .od-idioma > summary,
.od-utilitarios .s-tema,
.od-nav-cta {
  height: 2.25rem;
}
/* Item ativo da navegação: marcado por um filete de marca sob o rótulo, não só
   por fundo — assim sobrevive ao tema escuro e ao alto contraste. */
.s-nav__itens a {
  position: relative;
}
.s-nav__itens a[aria-current="page"]::after,
.s-nav__itens a[data-ativo]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0.25rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-border-brand);
}
/* Quando a barra descola do topo ela ganha um degrau de elevação. */
header[data-barra][data-rolado] .s-nav {
  box-shadow: var(--shadow-md);
}
header[data-barra] .s-nav {
  transition: box-shadow var(--duration-base);
}

/* No celular a pílula quebrava em duas linhas e virava uma forma irregular
   sobre o hero: vira barra de largura total, marca e menu na mesma linha. */
@media (max-width: 47.99rem) {
  header[data-barra] .s-nav {
    border-radius: 0;
    padding-inline: var(--space-4);
  }
  header[data-barra] > .container {
    padding-inline: 0;
  }
  .od-logo {
    height: 1.5rem;
  }
  .od-nav-cta {
    display: none;
  }
  .od-utilitarios__grupo {
    padding-right: 0;
    border-right: 0;
  }
}

/* ---------- Seletor de idioma (<details>) ---------- */
.od-idioma {
  position: relative;
}
.od-idioma > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2.25rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-pill);
  color: inherit;
  font-size: var(--font-style-label-s-size);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.od-idioma > summary::-webkit-details-marker {
  display: none;
}
.od-idioma > summary:hover {
  background: var(--color-surface-brand-subtle);
}
.od-idioma > summary:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.od-idioma__seta {
  width: var(--size-icon-sm, 1rem);
  height: var(--size-icon-sm, 1rem);
  transition: transform var(--duration-base);
}
.od-idioma[open] .od-idioma__seta {
  transform: rotate(180deg);
}
.od-idioma__lista {
  position: absolute;
  z-index: var(--z-index-sticky);
  top: calc(100% + var(--space-2));
  right: 0;
  display: grid;
  gap: var(--space-1);
  min-width: 10rem;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
.od-idioma__lista a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-default);
  font-size: var(--font-style-body-s-size);
  text-decoration: none;
}
.od-idioma__lista a:hover {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
}

/* ---------- Hero ----------
   Duas colunas no largo: argumento à esquerda, peça de produto à direita. A
   página vendia portal, app e painel sem mostrar nenhuma superfície — eram
   8.000 px de texto sobre azul. */
.od-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
@media (min-width: 62rem) {
  .od-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}
.od-hero__conteudo {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}
.od-hero-micro {
  margin-top: var(--space-3);
  opacity: 0.75;
}
/* A serifada fica reservada à citação: aqui o fecho do hero volta para a sans,
   um degrau acima do corpo. */
.od-hero-assinatura {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-glass);
  font-size: var(--font-style-body-l-size);
  line-height: var(--font-style-body-l-line-height);
  font-weight: 500;
  opacity: 0.92;
}

/* ---------- Peça de produto do hero ---------- */
.od-peca {
  position: relative;
  z-index: 1;
  display: none;
}
@media (min-width: 62rem) {
  .od-peca {
    display: block;
  }
}
/* `drop-shadow` recorta a FORMA, não a caixa — é o que faz a peça parecer
   apoiada e não colada. Os dois valores vêm de token: sobre o azul do hero a
   sombra tem que ser mais funda que sobre o branco de #plataforma. */
.od-peca__svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--shadow-drop-on-media));
}
/* A segunda peça, a de #plataforma: as três superfícies lado a lado sobre fundo
   claro. No celular ela some — em 375 px seria uma faixa de 4 mm de altura. */
.od-peca--faixa {
  margin-top: var(--space-8);
}
.od-peca--faixa .od-peca__svg {
  filter: drop-shadow(var(--shadow-drop));
}
.od-peca__painel rect {
  fill: var(--color-surface-default);
}
.od-peca__painel > rect:first-child {
  stroke: var(--color-border-subtle);
}
.od-peca__barra {
  fill: var(--color-surface-sunken);
}
.od-peca__ponto {
  fill: var(--color-border-default);
}
.od-peca__menu {
  fill: var(--color-surface-sunken);
}
.od-peca__linha {
  fill: var(--color-border-default);
}
.od-peca__linha--ativa {
  fill: var(--color-action-primary);
}
.od-peca__bloco {
  fill: var(--color-surface-sunken);
}
.od-peca__destaque {
  fill: var(--color-action-primary);
}
.od-peca__serie {
  fill: none;
  stroke: var(--color-action-primary);
}
.od-peca__grade {
  fill: none;
  stroke: var(--color-border-subtle);
}
.od-peca__app > rect:first-child {
  fill: var(--color-text-brand);
}
.od-peca__appTela {
  fill: var(--color-surface-default);
}
.od-peca__marca {
  fill: var(--color-surface-default);
}

/* ---------- #problema: o filete de apoio é o dado crítico ----------
   Eixo à esquerda como o resto da seção: só a chamada final centraliza. */
.od-apoio {
  max-width: 70ch;
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-brand);
  font-size: var(--font-style-body-l-size);
  line-height: var(--font-style-body-l-line-height);
  font-weight: 500;
  color: var(--color-text-brand);
}

/* ---------- Faixas de seção ----------
   Sangria total, sem raio: com `border-radius` numa faixa que ocupa a largura
   da tela sobrava um entalhe nas bordas, e a seção parecia um cartão gigante
   mal posicionado. Todas na família azul, variando só a intensidade. */
.od-faixa-neutra {
  background: var(--color-surface-sunken);
}
.od-faixa-marca {
  background: var(--color-surface-brand-subtle);
}
/* A faixa abraça o conteúdo: o `padding-block` da seção somava ao respiro
   interno e sobravam ~100 px de nada entre o último elemento e o fim da faixa. */
.od-faixa-neutra > .container > :last-child,
.od-faixa-marca > .container > :last-child {
  margin-bottom: 0;
}

/* ---------- #o-que-muda: o contraste que a seção existe para mostrar ----------
   "Hoje" e "Com o Ordo360" tinham tratamento idêntico. Agora o antes é
   superfície rebaixada com texto de apoio e o depois é superfície de marca com
   texto cheio: o contraste se vê antes de se ler. */
.od-antes-depois {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}
@media (min-width: 60rem) {
  .od-antes-depois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Subgrade: as quatro faixas do cartão (medalhão, título, "hoje", "com o
     Ordo360") passam a ser as MESMAS quatro linhas nos três cartões. Sem isso
     cada "com o Ordo360" começava numa altura diferente, conforme o tamanho do
     texto acima, e a comparação que a seção existe para mostrar não se lia de
     relance. Onde não houver subgrade, cada cartão só empilha — nada quebra. */
  @supports (grid-template-rows: subgrid) {
    .od-antes-depois {
      grid-template-rows: repeat(4, auto);
    }
    .od-antes-depois .od-pessoa,
    .od-antes-depois .od-pessoa .card__corpo {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      gap: 0;
    }
  }
}
.od-pessoa__estado {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
}
/* O "hoje" estica: no empilhamento do celular e onde não houver subgrade, é
   isso que impede o cartão de terminar com uma sobra branca embaixo. */
.od-pessoa__estado--antes {
  flex: 1 1 auto;
}
.od-pessoa__estado--depois {
  margin-bottom: 0;
}
.od-pessoa__estado--antes {
  background: var(--color-surface-sunken);
}
.od-pessoa__estado--antes .od-cartao__texto {
  color: var(--color-text-subtlest);
}
.od-pessoa__estado--depois {
  background: var(--color-surface-brand-subtle);
  border-left: 3px solid var(--color-border-brand);
}
.od-pessoa__estado--depois .od-cartao__texto {
  color: var(--color-text-default);
}
.od-pessoa__rotulo {
  margin: 0 0 var(--space-2);
  font-size: var(--font-style-label-xs-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtlest);
}
.od-pessoa__estado--depois .od-pessoa__rotulo {
  color: var(--color-text-brand);
}

/* ---------- Cabeçalho de grupo em /plataforma/ ---------- */
.od-grupo-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.od-grupo-cabecalho > div {
  min-width: 0;
}

/* ---------- Item enumerado: UMA receita ----------
   Antes eram três (filete de 2 px com número no ciclo, número solto nos passos,
   quadradinho azul na lista do catálogo). O marcador é o símbolo da marca
   reduzido: um arco que fecha mais a cada passo, com o número dentro. */
.od-passos,
.od-ciclo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .od-passos,
  .od-ciclo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 68rem) {
  .od-passos,
  .od-ciclo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.od-passo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.od-marcador {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--color-border-brand);
}
.od-marcador__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.od-marcador__num {
  position: relative;
  font-family: var(--font-family-display);
  font-size: var(--font-style-label-s-size);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text-brand);
}
.od-passo__titulo {
  margin: 0;
  font-size: var(--font-style-heading-s-size);
  line-height: var(--font-style-heading-s-line-height);
  font-weight: 600;
  color: var(--color-text-default);
}
.od-passo__texto {
  margin: 0;
  max-width: 34ch;
  font-size: var(--font-style-body-s-size);
  line-height: var(--font-style-body-s-line-height);
  color: var(--color-text-muted);
}

/* ---------- Assinaturas dos clientes ----------
   Sem o chip cinza: um carrossel de retângulos cinzas parecia campo não
   preenchido justo onde o site tenta provar credibilidade. Enquanto não chegam
   os arquivos, cada nome é uma assinatura tipográfica em azul monocromático —
   e o contêiner já normaliza a altura óptica para quando virarem imagem. */
.od-assinatura {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  padding-inline: var(--space-5);
  flex: 0 0 auto;
}
.od-assinatura span,
.od-assinatura img {
  max-height: 2rem;
  font-family: var(--font-family-display);
  font-size: var(--font-style-label-m-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-brand);
  opacity: 0.55;
  transition: opacity var(--duration-base);
}
.od-carrossel:hover .od-assinatura span {
  opacity: 0.85;
}

/* ---------- Indicador dev-only: WhatsApp ainda não configurado ---------- */
[data-whatsapp-pendente] {
  outline: 1px dashed var(--color-border-warning);
  outline-offset: 2px;
}

/* ---------- Revelar ao rolar (liga com [data-revelar]/[data-visivel] de site.js) ----------
   Gated em html.js (classe posta pelo script inline do <head>): sem JS nada fica escondido.
   O conteúdo continua SEMPRE visível — quem chega por âncora (#secao) não dispara o
   observador e veria a seção vazia. O que mudou é só a entrada: mais longa e mais suave,
   porque 12 px em 300 ms numa rolagem rápida lia como tremor, não como movimento. */
html.js [data-revelar] {
  transform: translateY(1.25rem);
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js [data-revelar][data-visivel] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-revelar] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .od-pular-conteudo {
    transition: none;
  }
}

/* ---------- Depoimento (anônimo na home) ----------
   A aspa era o caractere \201C na fonte do sistema, com espaçamento irregular —
   o detalhe que mais denunciava improviso. Agora é SVG do mesmo jogo. */
.od-depoimento {
  position: relative;
  max-width: 46rem;
  margin: var(--space-8) 0 0;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-left: 3px solid var(--color-border-brand);
  background: var(--color-surface-raised);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.od-depoimento__aspas {
  display: block;
  color: var(--color-border-brand);
  opacity: 0.35;
}
.od-depoimento__aspas .od-ico {
  width: 1.75rem;
  height: 1.75rem;
}
.od-depoimento blockquote {
  margin: 0;
  border: none;
  padding: 0;
}
/* Único lugar do site com a serifada: ela vira sinal ("isto é fala de alguém")
   em vez de ruído espalhado por três blocos sem regra. */
.od-depoimento blockquote p {
  margin: var(--space-2) 0 0;
  max-width: 62ch;
  font-family: var(--font-family-editorial);
  font-size: var(--font-style-editorial-m-size);
  line-height: var(--font-style-editorial-m-line-height);
}
.od-depoimento figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.od-depoimento__autor {
  font-weight: 600;
  color: var(--color-text-muted);
}
.od-depoimento__nota {
  color: var(--color-text-subtlest);
}

/* ---------- Cartão: UMA receita ----------
   Conviviam quatro linguagens de contêiner (borda fina, sombra sem borda, fundo
   cinza chapado e faixa de marca). Sobrou esta: superfície elevada, borda sutil,
   sombra de um degrau, raio de cartão e padding de 28/32 px — o antigo 20 px
   deixava o texto colado na borda e é o que mais entregava "template". */
.od-cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base),
    box-shadow var(--duration-base),
    border-color var(--duration-base);
}
/* Hover de cartão: 2 px de subida e um degrau de sombra. Antes metade dos
   cartões não reagia a nada e a outra metade trocava a borda de cor. */
.od-cartao:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-md);
}
.od-cartao__titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--font-style-heading-s-size);
  line-height: var(--font-style-heading-s-line-height);
  /* 600, não 700: com o corpo em 400 o salto de peso era grande demais e o
     título parecia um bloco cheio em cada cartão. */
  font-weight: 600;
  color: var(--color-text-default);
}
/* Altura reservada para duas linhas de título: quando "360 do relacionamento"
   quebrava, empurrava só o seu corpo e os cinco cartões perdiam o eixo. A
   margem sai junto, senão o título de uma linha ficaria com respiro dobrado. */
@media (min-width: 62rem) {
  .od-grade-cartoes .od-cartao__titulo,
  .od-eixos .od-cartao__titulo {
    margin-bottom: 0;
    min-height: calc(2 * var(--font-style-heading-s-line-height));
  }
}
.od-cartao__texto {
  margin: 0;
  max-width: 46ch;
  font-size: var(--font-style-body-m-size);
  line-height: var(--font-style-body-m-line-height);
  color: var(--color-text-muted);
}
.od-cartao .card__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0;
}

/* Medalhão do ícone: o mesmo recipiente em todo cartão, para que a fileira tenha
   um eixo horizontal só. */
.od-medalhao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
}
.od-medalhao--grupo {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0;
}
/* Sobre a faixa de marca o medalhão sumia: o fundo dele É a cor da faixa. */
.od-faixa-marca .od-medalhao {
  background: var(--color-surface-raised);
}
.od-medalhao--grupo .od-ico {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------- Grade de cartões que não deixa linha órfã ----------
   Grade de SEIS colunas com itens que ocupam dois módulos: assim a última linha
   se fecha sozinha em vez de deixar buraco à direita. Com 5 itens (o caso de
   #causa, dos eixos e de dois grupos do catálogo) os dois últimos passam a
   ocupar três módulos cada e a fileira fecha; com 2 e com 4, metade cada. */
.od-grade-cartoes,
.od-eixos {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .od-grade-cartoes,
  .od-eixos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .od-grade-cartoes > *,
  .od-eixos > * {
    grid-column: span 3;
  }
}
@media (min-width: 62rem) {
  .od-grade-cartoes > *,
  .od-eixos > * {
    grid-column: span 2;
  }
  /* Exatamente dois itens: metade cada. */
  .od-grade-cartoes > :first-child:nth-last-child(2),
  .od-grade-cartoes > :first-child:nth-last-child(2) ~ *,
  .od-eixos > :first-child:nth-last-child(2),
  .od-eixos > :first-child:nth-last-child(2) ~ * {
    grid-column: span 3;
  }
  /* Exatamente cinco: 3 em cima, 2 largos embaixo. */
  .od-grade-cartoes > :nth-child(4):nth-last-child(2),
  .od-grade-cartoes > :nth-child(5):nth-last-child(1),
  .od-eixos > :nth-child(4):nth-last-child(2),
  .od-eixos > :nth-child(5):nth-last-child(1) {
    grid-column: span 3;
  }
}

/* ---------- Painel de destaque (a explicação histórica em #causa) ---------- */
.od-painel {
  margin-top: var(--space-8);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-card);
  border-left: 3px solid var(--color-border-brand);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  max-width: 70ch;
}
.od-painel h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-text-brand);
}
.od-painel p {
  margin: 0;
  font-size: var(--font-style-body-m-size);
  line-height: var(--font-style-body-m-line-height);
  color: var(--color-text-muted);
}

/* ---------- Fechos de seção ----------
   Um eixo por seção: o cabeçalho é à esquerda, então estes também. Só a chamada
   final (#conversa e #plat-fecho) centraliza. */
.od-universos {
  max-width: 70ch;
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-brand);
  color: var(--color-text-brand);
}
.od-fecho-faixa {
  max-width: 70ch;
  margin: var(--space-7) 0 0;
  font-size: var(--font-style-heading-s-size);
  line-height: var(--font-style-heading-s-line-height);
  font-weight: 600;
  color: var(--color-text-brand);
}
.od-centro {
  max-width: var(--container-prose);
  margin-inline: auto;
  text-align: center;
}
/* Texto que fecha uma seção depois das ações, sempre no eixo da esquerda. */
.od-texto-apoio {
  max-width: 70ch;
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
}
.od-voltar {
  margin: var(--space-8) 0 0;
}
.od-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.od-acoes--centro {
  justify-content: center;
}

/* ---------- Ecossistema ---------- */
.od-ecossistema {
  background: var(--color-surface-sunken);
}
/* Volta para a sans: a serifada é da citação. */
.od-ecossistema__texto {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--font-style-body-l-size);
  line-height: var(--font-style-body-l-line-height);
  color: var(--color-text-muted);
}

/* ---------- Prova: painel de indicadores ----------
   Os oito valores agora têm a MESMA altura óptica, seja dígito, palavra ou
   estrelas — `.od-numero__topo` é a caixa fixa onde o valor se acomoda, e o
   qualificador fica sempre na mesma posição. Antes cada tipo renderizava num
   tamanho diferente e a fileira não lia como painel. */
/* Oito indicadores em quatro colunas fecham duas fileiras cheias. Com
   `auto-fit` davam 5+3 e a segunda fileira ficava com um buraco à direita. */
.od-numeros {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 62rem) {
  .od-numeros {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.od-numero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}
/* O primeiro é o dado crítico: é dele o dourado, e só dele (mais as estrelas e a
   série em destaque dos gráficos). Em TODOS os três o ouro é forma preenchida,
   nunca cor de texto — como texto ele escurecia para #8A6900 e lia como oliva. */
.od-numero--destaque {
  border-left: 3px solid var(--color-border-accent);
}
/* Duas linhas do valor em texto cabem aqui: é essa caixa, e não o tamanho da
   fonte, que iguala a altura óptica de "+7 anos", "Alemanha e Brasil" e das
   estrelas. */
.od-numero__topo {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
}
.od-numero__valor {
  font-family: var(--font-family-display);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  color: var(--color-text-brand);
}
/* Palavra em vez de dígito ("Alemanha e Brasil"): um degrau menor de corpo, mas
   a MESMA altura óptica, porque quem reserva a altura é `__topo`. */
.od-numero__valor--texto {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.2;
}
.od-numero__rotulo {
  font-size: var(--font-style-body-s-size);
  line-height: var(--font-style-body-s-line-height);
  color: var(--color-text-muted);
}
.od-estrelas {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--color-border-accent);
}
.od-estrelas .od-ico {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Micro-visualizações de #prova ----------
   Monocromáticas na rampa azul, grade tracejada em borda sutil e a série de
   destaque no dourado. Nenhuma inventa dado: cada uma desenha o valor que está
   escrito logo acima. */
.od-grafico {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: auto;
  padding-top: var(--space-3);
  overflow: visible;
}
.od-grafico--largo {
  width: 100%;
  max-width: 7rem;
  height: 2.25rem;
}
.od-grafico__trilho {
  stroke: var(--color-border-subtle);
}
.od-grafico__serie {
  stroke: var(--color-action-primary);
}
.od-grafico__grade {
  stroke: var(--color-border-subtle);
}
.od-grafico__ponto {
  fill: var(--color-action-primary);
}
.od-grafico__ponto--destaque {
  fill: var(--color-border-accent);
}

/* ---------- Carrossel contínuo de logos (sem JavaScript) ----------
   A lista entra duplicada e a animação anda exatamente metade da largura, então
   o ponto de emenda nunca aparece. A máscara usa um token opaco só pelo canal
   alfa — não há cor solta aqui. */
.od-carrossel {
  overflow: hidden;
  margin-top: var(--space-8);
  mask-image: linear-gradient(
    90deg,
    transparent,
    var(--color-surface-default) 14%,
    var(--color-surface-default) 86%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    var(--color-surface-default) 14%,
    var(--color-surface-default) 86%,
    transparent
  );
}
.od-carrossel__trilho {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: od-desliza 44s linear infinite;
}
.od-carrossel:hover .od-carrossel__trilho,
.od-carrossel:focus-within .od-carrossel__trilho {
  animation-play-state: paused;
}
@keyframes od-desliza {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .od-carrossel {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .od-carrossel__trilho {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}

/* ---------- Chamada da Europa ---------- */
.od-chamada-europa {
  max-width: 70ch;
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-brand);
  font-size: var(--font-style-body-l-size);
  line-height: var(--font-style-body-l-line-height);
  color: var(--color-text-brand);
}

/* ---------- Chamada final ----------
   O contorno dourado em volta de um retângulo de 1.200 px era a maior área de
   acento da página — exatamente o oposto da dose de 10%. Filete de marca. */
.s-chamada {
  border-color: var(--color-border-brand);
}

/* ---------- Contato abaixo da chamada final ---------- */
.od-contato {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

/* ---------- Rodapé ----------
   Faixa de fechamento em superfície afundada: a página termina, não escorre para
   o branco. Cada coluna agrupa um tipo de coisa — marca, contato, links — em vez
   dos cinco tipos empilhados que havia antes. */
.od-rodape-faixa {
  margin-top: var(--space-10);
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border-subtle);
}
.od-rodape {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: 1fr;
  padding-block: var(--space-9) var(--space-6);
}
@media (min-width: 48rem) {
  .od-rodape {
    grid-template-columns: 1.6fr 1fr 1fr;
    align-items: start;
  }
}
.od-rodape__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-style-body-s-size);
  line-height: var(--font-style-body-s-line-height);
  color: var(--color-text-muted);
}
.od-rodape__col--marca .od-logo {
  align-self: flex-start;
  height: 1.75rem;
  width: auto;
  margin-bottom: var(--space-2);
}
.od-rodape__texto {
  margin: 0;
  max-width: 44ch;
}
.od-rodape__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Todos os links do rodapé têm o mesmo tratamento: sublinhado só no hover, cor
   de texto padrão. Antes e-mail, telefone e links institucionais tinham três
   aparências diferentes na mesma caixa. */
.od-rodape a {
  color: var(--color-text-default);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.od-rodape a:hover {
  text-decoration: underline;
  color: var(--color-text-brand);
}
@media (min-width: 48rem) {
  .od-rodape__col--fim {
    align-items: flex-start;
  }
}
.od-rodape__fecho {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  margin: 0;
  padding-block: var(--space-4) var(--space-7);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-style-body-s-size);
  color: var(--color-text-subtlest);
}
.od-rodape__assinatura {
  color: var(--color-text-subtlest);
}
/* No rodapé o seletor de idioma abre para CIMA. */
.od-idioma--rodape .od-idioma__lista {
  top: auto;
  bottom: calc(100% + var(--space-2));
  right: auto;
  left: 0;
}
@media (min-width: 48rem) {
  .od-idioma--rodape .od-idioma__lista {
    right: 0;
    left: auto;
  }
}

/* ---------- Voltar ao topo ----------
   Era um círculo dourado sólido flutuando sobre o conteúdo — o elemento mais
   chamativo da página inteira era um utilitário. Vira um controle discreto de
   superfície elevada, que só ganha cor de marca quando o ponteiro chega. */
.s-voltar-topo {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  color: var(--color-text-brand);
  box-shadow: var(--shadow-md);
  transition:
    background var(--duration-base),
    color var(--duration-base),
    border-color var(--duration-base);
}
.s-voltar-topo:hover {
  border-color: var(--color-border-brand);
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
}
.s-voltar-topo svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Tema escuro ----------
   No escuro o cartão era um retângulo levemente mais claro sem contorno: a borda
   sumia e as fileiras viravam manchas. Aqui a separação passa a vir da borda,
   não da sombra (que no escuro não aparece), e a superfície elevada sobe um
   degrau em relação ao fundo. */
[data-theme="dark"] .od-cartao,
[data-theme="dark"] .od-numero,
[data-theme="dark"] .od-painel,
[data-theme="dark"] .od-depoimento {
  border: 1px solid var(--color-border-default);
  box-shadow: none;
}
[data-theme="dark"] .od-cartao:hover,
[data-theme="dark"] .od-numero:hover {
  border-color: var(--color-border-brand);
  background: var(--color-surface-sunken);
  box-shadow: none;
}
[data-theme="dark"] .od-painel,
[data-theme="dark"] .od-depoimento {
  border-left: 3px solid var(--color-border-brand);
}
[data-theme="dark"] .od-medalhao {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-accent);
}
[data-theme="dark"] .od-assinatura span {
  color: var(--color-text-default);
  opacity: 0.6;
}
/* No escuro a peça de produto perdia metade do desenho: barra, menu lateral e
   blocos usam superfícies que, no escuro, são quase a cor do próprio painel.
   Aqui cada camada sobe um degrau para o desenho continuar legível. */
[data-theme="dark"] .od-peca--faixa .od-peca__svg {
  filter: drop-shadow(var(--shadow-drop-on-media));
}
[data-theme="dark"] .od-peca__painel > rect:first-child {
  stroke: var(--color-border-default);
}
[data-theme="dark"] .od-peca__barra,
[data-theme="dark"] .od-peca__menu,
[data-theme="dark"] .od-peca__bloco {
  fill: var(--color-surface-raised);
}
[data-theme="dark"] .od-peca__linha,
[data-theme="dark"] .od-peca__ponto {
  fill: var(--color-border-strong);
}

/* ---------- Microinterações ----------
   Uma curva e duas durações no site inteiro. Tudo que é decorativo para sob
   `prefers-reduced-motion`; o que fica é só a mudança de cor. */
.od-assinatura span,
.od-medalhao,
.s-nav__itens a::after {
  transition: all var(--duration-base) cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .od-cartao,
  .od-cartao:hover,
  .od-link-seta .od-ico--seta,
  .od-link-seta:hover .od-ico--seta,
  .s-voltar-topo {
    transform: none;
    transition: none;
  }
  .od-cartao:hover {
    border-color: var(--color-border-brand);
  }
}