/* ============================================================
   SITE — landing page da INFORPOP
   Nenhuma cor literal aqui: tudo sai de `brand.css`.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + var(--s4));
}

/* A barra do topo é FLUTUANTE: ela sai do fluxo, e quem reserva o
   espaço dela é a primeira dobra de cada página. As três medidas
   abaixo são a única fonte dessa altura. */
:root {
  --topo-pastilha: clamp(46px, 5vw, 52px);
  --topo-folga: clamp(10px, 1.6vh, 16px);
  --topo-h: calc(var(--topo-pastilha) + 2 * var(--topo-folga));
}

main > :first-child {
  padding-top: var(--topo-h);
}

/* O corpo desce de 16px para 15px porque a Verdana tem altura de x
   muito maior: a 15px ela desenha a mesma mancha aparente que a letra
   do sistema desenhava a 16px, e devolve a linha que a largura dela
   tinha tomado. Recalibração de AD-11, não redução de legibilidade. */
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-yellow);
  color: var(--on-brand-yellow);
}

/* ---------- Escala tipográfica ----------
   Os corpos abaixo foram recalibrados em 28/08/2026, quando a letra do
   projeto virou Verdana (AD-11). Cada degrau caiu entre 7% e 12%: a
   Verdana é larga e tem altura de x grande, então o mesmo número em
   pixel desenha maior e ocupa mais linha. O degrau que mais caiu é o
   `display`, porque nele a penalidade de largura se acumula na frase
   inteira e a manchete começava a quebrar em três linhas. */

.display {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.07;
  font-weight: var(--peso-forte);
  letter-spacing: -0.022em;
}

.h1 {
  font-size: clamp(24px, 3vw, 35px);
  line-height: 1.16;
  font-weight: var(--peso-forte);
  letter-spacing: -0.018em;
}

.h2 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
}

.h3 {
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: var(--peso-forte);
}

.lead {
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.6;
  color: var(--text-muted);
}

.small {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.label {
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- Estrutura ---------- */

.wrap {
  width: min(1160px, 100% - var(--s8));
  margin-inline: auto;
}

section {
  position: relative;
}

.section {
  padding-block: clamp(40px, 5.2vw, 72px);
}

.section-head {
  max-width: 660px;
  margin-bottom: var(--s7);
  display: grid;
  gap: var(--s3);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.section-head.center .eyebrow {
  justify-self: center;
}

/* O lockup do produto. Como o letreiro da INFORPOP, ele é escuro: no tema
   escuro ganha uma chapa clara, senão some no fundo vinho. */
.product-lockup {
  height: 66px;
  width: auto;
  margin-block: var(--s1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product-lockup {
    background: var(--plate);
    border-radius: var(--r-sm);
    padding: var(--s2) var(--s3);
  }
}

/* O selo Aqui Tem Farmácia Popular marca todo tópico, não só o rodapé:
   é a mesma leitura de marca que os decks de apresentação já usam. Uma
   regra só, porque o `.dot` é o mesmo elemento nas dezoito ocorrências
   do site: trocar aqui troca em todo lugar de uma vez. */
.eyebrow .dot {
  width: 12px;
  height: 20px;
  background-image: url("/assets/brand/aqui-tem-farmacia-popular.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px; /* alvo mínimo de toque — acessibilidade */
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 15px;
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition:
    transform var(--t-state) ease,
    background var(--t-state) ease,
    border-color var(--t-state) ease,
    box-shadow var(--t-state) ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--primary);
  color: var(--on-brand-red);
  box-shadow: var(--e-md);
}

.btn-primary:hover {
  background: var(--primary-pressed);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-on-dark {
  background: var(--on-dark-surface);
  color: var(--on-dark);
  border-color: var(--on-dark-edge-strong);
  backdrop-filter: blur(6px);
}

.btn-on-dark:hover {
  background: var(--on-dark-hover);
}

.btn-yellow {
  background: var(--brand-yellow);
  color: var(--on-brand-yellow);
}

.btn-yellow:hover {
  background: var(--brand-yellow-deep);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--s6);
  font-size: 16px;
}

/* O CTA principal ganha LUZ, não cor nova: o amarelo do selo vira
   brilho ao redor do botão que já é amarelo. */
.btn-glow {
  box-shadow: var(--glow-cta);
}

.btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-cta-forte);
}

/* ---------- Barra do topo ---------- */

/* A barra deixou de ser uma faixa translúcida e virou COMPOSIÇÃO: a
   marca à esquerda, a pílula de navegação no centro, a chamada à
   direita. Além de ser o desenho da referência, isso resolve um
   problema nosso: sobre o hero escuro a faixa translúcida sumia. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: var(--topo-folga);
  animation: descer 700ms var(--ease-saida) both;
  transition: padding-block var(--t-panel) ease;
}

.topbar[data-scrolled="true"] {
  padding-block: calc(var(--topo-folga) * 0.6);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 2vw, var(--s6));
}

/* A marca vira um disco, como o mark da referência. O símbolo ocupa
   72% do disco: o disco não muda de tamanho quando o desenho muda. */
.brandmark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--topo-pastilha);
  height: var(--topo-pastilha);
  border-radius: var(--r-pill);
  background: var(--plate);
  box-shadow: var(--shadow-pill);
  transition: transform var(--t-state) ease;
}

.brandmark:hover {
  transform: scale(1.04);
}

.brandmark-simbolo {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* ---- O letreiro INFORPOP, recortado do logotipo ----
   O PNG oficial traz letreiro E assinatura ("Se é Farmácia Popular…"). A
   assinatura, reduzida à altura de uma barra de topo, vira borrão — e ela já
   é o título do hero, escrita em texto de verdade. Então a barra mostra só o
   letreiro, por recorte, sem gerar um segundo arquivo de marca.

   O recorte foi MEDIDO no canal alfa do PNG (1559x672): o letreiro ocupa
   x188..1388 e y230..397 — 1201x168. Os fatores abaixo são essas medidas
   divididas pela altura do letreiro, para que `--wm` (a altura desejada)
   seja o único número a mexer. */
.wordmark {
  display: block;
  background: url("../assets/brand/inforpop.png") no-repeat;
  background-size: calc(var(--wm) * 9.2798) auto; /* 1559 / 168 */
  background-position: calc(var(--wm) * -1.119) calc(var(--wm) * -1.369);
  width: calc(var(--wm) * 7.1488); /* 1201 / 168 */
  height: var(--wm);
}

.topbar .wordmark {
  --wm: 21px;
}

.foot-logo .wordmark {
  --wm: 28px;
}

/* O letreiro oficial em PNG ainda é azul, herança da identidade anterior. No
   tema escuro ele precisa de uma chapa clara atrás, senão some no fundo vinho.
   Pendência aberta: gerar o letreiro na cor nova da marca. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-logo {
    background: var(--plate);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    width: max-content;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: var(--topo-pastilha);
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pill);
  backdrop-filter: saturate(160%) blur(14px);
}

.nav a {
  position: relative;
  padding: 8px clamp(6px, 0.9vw, 13px);
  border-radius: var(--r-pill);
  font-size: clamp(12.5px, 1.15vw, 15px);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  color: var(--text-muted);
  opacity: 0.62;
  transition:
    color var(--t-state) ease,
    opacity var(--t-state) ease;
}

.nav a:hover {
  opacity: 1;
  color: var(--primary);
}

/* O indicador da referência: três pontos de 3px sob o rótulo, feitos
   com um ponto e duas sombras deslocadas. Quem marca o link ativo é o
   observador de rolagem em `comum.js`. */
.nav a[data-active="true"] {
  opacity: 1;
  color: var(--text);
}

.nav a[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--primary);
  box-shadow:
    -5px 0 0 var(--primary),
    5px 0 0 var(--primary);
  transform: translateX(-50%);
}

.nav-cta {
  flex: none;
  min-height: var(--topo-pastilha);
  box-shadow: var(--shadow-pill);
}

.menu-toggle {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(1100px 520px at 78% -10%, var(--glow-green), transparent 60%),
    radial-gradient(760px 420px at 8% 108%, var(--glow-yellow), transparent 62%),
    linear-gradient(
      155deg,
      var(--brand-red-deep) 0%,
      var(--brand-red-darkest) 46%,
      var(--brand-red-night) 100%
    );
}

.hero::after {
  /* A marca-d'água é o símbolo da INFORPOP, não um enfeite qualquer. */
  content: "";
  position: absolute;
  inset: auto -140px -220px auto;
  width: 620px;
  height: 620px;
  background: url("../assets/brand/symbol.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(var(--s7), 5vw, var(--s10));
  align-items: center;
  padding-block: clamp(56px, 7vw, 92px) clamp(64px, 8vw, 104px);
}

.hero-copy {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.hero .display {
  color: var(--on-dark);
}

.hero .display .accent {
  background: linear-gradient(100deg, var(--brand-yellow) 0%, var(--brand-green-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(15px, 1.55vw, 17.5px);
  line-height: 1.6;
  color: var(--on-dark-body);
  max-width: 54ch;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  padding: 7px 14px 7px 9px;
  border-radius: var(--r-pill);
  background: var(--on-dark-surface);
  border: 1px solid var(--on-dark-edge);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-badge .pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--brand-green-soft);
  box-shadow: 0 0 0 0 var(--pulse-ring);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px var(--pulse-ring-fade);
  }

  100% {
    box-shadow: 0 0 0 0 var(--pulse-ring-fade);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* Quatro números do RADAR, em duas colunas, cada um com a fonte
   abreviada embaixo. Número sem data envelhece e vira passivo. */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--on-dark-line);
  margin-top: var(--s2);
}

.hero-proof div {
  display: grid;
  gap: 1px;
}

.hero-proof b {
  font-size: 26px;
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-proof small {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--on-dark-muted);
}

.hero-proof span {
  font-size: 13px;
  color: var(--on-dark-muted);
}

/* ============================================================
   HERO DE DOBRA INTEIRA — só no index
   ============================================================
   A referência entrega tudo numa tela: prova, promessa, ação e os
   números. Aqui a mesma composição, com o fundo desenhado em CSS.
   A classe é separada de propósito: `vagas.html` e a página da
   solução seguem com o hero curto de duas colunas.
   ============================================================ */

/* A abertura ocupava a tela inteira, e em monitor alto isso virava
   meia tela de vermelho vazio acima e abaixo do texto: o conteúdo do
   hero mede pouco mais de 600px e não cresce junto com a janela. O
   teto de 760px mantém a dobra imponente sem cobrar rolagem por
   espaço em branco. */
.hero-cheio {
  min-height: clamp(560px, 88svh, 760px);
  display: grid;
  align-content: center;
}

.hero-cheio .wrap {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(var(--s6), 4vh, var(--s8));
  padding-block: clamp(var(--s6), 4vh, var(--s8)) clamp(var(--s5), 3vh, var(--s7));
}

.hero-cheio .hero-copy {
  justify-items: center;
  max-width: 940px;
  gap: clamp(var(--s4), 2.4vh, var(--s5));
}

/* A manchete continua QUEBRANDO em duas linhas: em português a frase é
   longa, e travar em uma linha só espremeria a tipografia.

   O teto caiu de 78px para 62px com a virada para Verdana: aos 78px a
   primeira linha ("Se é Farmácia Popular,") não cabia mais nos 940px da
   coluna e virava três linhas, jogando a dobra 48px além da tela. */
.hero-cheio .display {
  font-size: clamp(29px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-cheio .hero-sub {
  max-width: 62ch;
  margin-inline: auto;
}

.hero-cheio .hero-actions {
  justify-content: center;
}

/* A tarja de cima é TEXTO, não pastilha: com a pílula de prova logo
   abaixo, duas pastilhas empilhadas pesariam a mesma coisa duas vezes. */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-body);
}

.hero-tag .pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--brand-green-soft);
  box-shadow: 0 0 0 0 var(--pulse-ring);
  animation: pulse 2.4s ease-out infinite;
}

/* ---------- A pílula de prova ----------
   O equivalente honesto do "Trusted by 2000+ Enterprises": as
   entidades do setor que caminham com a INFORPOP, e não logotipo de
   cliente que não temos.

   A referência usa anéis circulares sobrepostos. Aqui não dá: os
   logotipos das entidades são lockups de 480x96, e num círculo de
   34px eles viram uma tira de 7px de altura. A forma muda, a função
   é a mesma: chapa clara para o logotipo respirar, dentro da pílula. */

.hero-selo {
  --selo-h: clamp(60px, 6.6vw, 68px);

  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  height: var(--selo-h);
  padding-inline: 6px var(--s4);
  border-radius: var(--r-pill);
  background: var(--on-dark-surface);
  border: 1px solid var(--on-dark-edge-strong);
  backdrop-filter: blur(6px);
}

.selo-marcas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* A chapa é ESCURA, não clara: os PNG das entidades são desenhados em
   branco sobre transparente, e sobre chapa branca eles somem. */
.selo-marca {
  display: grid;
  place-items: center;
  height: calc(var(--selo-h) - 12px);
  padding-inline: var(--s3);
  border-radius: var(--r-pill);
  background: var(--on-dark-inset);
  border: 1px solid var(--on-dark-line);
}

.selo-marca img {
  width: auto;
  height: calc(var(--selo-h) - 24px);
}

.selo-texto {
  font-size: clamp(12px, 1.3vw, 13.5px);
  font-weight: var(--peso-forte);
  color: var(--on-dark-body);
}

/* ---------- Os quatro números que fecham a dobra ---------- */

.hero-metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4) clamp(var(--s5), 3vw, var(--s8));
  width: 100%;
  padding-top: clamp(var(--s5), 3vh, var(--s7));
  border-top: 1px solid var(--on-dark-line);
}

.metrica {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.metrica-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--s1);
  border-radius: var(--r-md);
  background: var(--on-dark-surface);
  border: 1px solid var(--on-dark-line);
  color: var(--on-dark);
}

.metrica b {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: var(--peso-forte);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.metrica > span {
  font-size: clamp(12px, 1.2vw, 13.5px);
  line-height: 1.35;
  color: var(--on-dark-body);
}

.metrica small {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--on-dark-muted);
}

/* ---------- Aparelho do balcão (mockup da tela Início) ---------- */

.device-stage {
  display: grid;
  place-items: center;
  position: relative;
}

.device-stage::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--on-dark-glow), transparent 62%);
}

.device {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 402 / 800; /* a largura lógica de referência do app */
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, var(--device-shell-top), var(--device-shell-bottom));
  box-shadow:
    var(--shadow-device),
    0 0 0 1px var(--on-dark-inset) inset;
  transform: rotate(-1.6deg);
}

.device-screen {
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  color: var(--text);
}

.device-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--device-shell-bottom);
  z-index: 3;
}

.dev-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 30px var(--s4) var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.dev-header .bars {
  display: grid;
  gap: 3px;
}

.dev-header .bars i {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-muted);
}

.dev-header .title {
  font-size: 15px;
  font-weight: var(--peso-forte);
}

.dev-header .gear {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-faint);
}

.dev-greet {
  padding: var(--s4) var(--s4) var(--s2);
  display: grid;
  gap: 2px;
}

.dev-greet b {
  font-size: 17px;
}

.dev-greet span {
  font-size: 12px;
  color: var(--text-muted);
}

.dev-grid {
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  align-content: start;
}

.dev-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3);
  display: grid;
  gap: var(--s2);
  box-shadow: var(--e-sm);
  min-height: 84px;
}

.dev-tile .ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.dev-tile .ico svg {
  width: 17px;
  height: 17px;
}

.dev-tile b {
  font-size: 12.5px;
  font-weight: var(--peso-forte);
}

.dev-tile small {
  font-size: 10px;
  color: var(--text-faint);
  display: block;
  margin-top: -4px;
}

.dev-tile.soon {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
}

.dev-tile.soon .ico {
  background: var(--skeleton);
  color: var(--text-faint);
}

.dev-tile.soon b {
  color: var(--text-muted);
}

.dev-chip {
  display: inline-flex;
  align-self: start;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--skeleton);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dev-foot {
  padding: var(--s3) var(--s4) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s2);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-muted);
}

.dev-foot .fp {
  color: var(--fp-red-text);
  font-weight: var(--peso-forte);
}

.device-tag {
  position: absolute;
  right: -26px;
  bottom: 48px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: 2px;
  animation: float 6s ease-in-out infinite;
}

.device-tag b {
  font-size: 15px;
}

.device-tag span {
  font-size: 11px;
  color: var(--text-muted);
}

.device-tag .ok {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--on-brand-green);
  display: grid;
  place-items: center;
}

@keyframes float {
  50% {
    transform: translateY(-9px);
  }
}

/* ---------- Faixa de logos / confiança ---------- */

/* ---------- Faixa de fatos ----------
   Era uma lista cinza de itens com um tique pequeno, e sumia na página.
   Agora cada fato é um cartão com pastilha cheia: mesma informação, peso
   visual de prova. */

.strip {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--s7);
}

.strip .wrap {
  display: grid;
  gap: var(--s5);
  overflow: hidden;
}

.strip p {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.strip p::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* O trilho corre sem emenda porque `empresa.js` monta o conteúdo DUAS
   vezes e a animação desloca metade dele. Ele para no ponteiro e no
   foco (WCAG 2.2.2), e em `prefers-reduced-motion` a segunda volta
   some e a faixa volta a ser uma grade parada. */
@keyframes correr {
  to {
    transform: translateX(calc(-50% - var(--s4) / 2));
  }
}

.strip ul {
  display: flex;
  width: max-content;
  gap: var(--s4);
  animation: correr 46s linear infinite;
}

.strip:hover ul,
.strip:focus-within ul {
  animation-play-state: paused;
}

.strip li {
  display: flex;
  align-items: center;
  flex: none;
  width: clamp(250px, 25vw, 300px);
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: var(--peso-forte);
  color: var(--text);
}

.strip-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-brand-red);
}

.strip svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   DOBRA TINTA — a faixa escura de destaque
   ============================================================
   A dobra escura da referência, resolvida por TOKEN e não por
   exceção de componente: a faixa redeclara a paleta para si mesma,
   e todo componente que já existe (cartão, pastilha, lista, ícone)
   desenha certo dentro dela, nos dois temas, sem uma linha nova
   por componente. É escura nos dois temas, como as faixas da marca.
   ============================================================ */

.band-ink {
  --bg: var(--ink);
  --surface: var(--ink-surface);
  --surface-alt: var(--ink-surface-alt);
  --border: var(--on-dark-line);
  --text: var(--on-dark);
  --text-muted: var(--on-dark-body);
  --text-faint: var(--on-dark-muted);
  --primary: var(--brand-red-on-dark);
  --primary-pressed: var(--brand-red-soft);
  --primary-soft: var(--on-dark-surface);
  --on-brand-red: var(--brand-red-night);
  --danger: var(--danger-on-dark);
  --danger-soft: var(--danger-soft-on-dark);
  --success: var(--success-on-dark);
  --success-soft: var(--success-soft-on-dark);
  --warning: var(--brand-yellow);
  --warning-soft: var(--on-dark-surface);
  --e-sm: none;
  --e-md: none;
  --e-lg: none;

  background: var(--ink);
  color: var(--on-dark);
}

/* ---------- Cartões ---------- */

.grid {
  display: grid;
  gap: var(--s4);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6);
  min-width: 0;
  box-shadow: var(--e-sm);
  display: grid;
  gap: var(--s3);
  align-content: start;
  transition:
    transform var(--t-panel) ease,
    box-shadow var(--t-panel) ease,
    border-color var(--t-panel) ease;
}

.card.hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-md);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
}

.card p {
  color: var(--text-muted);
  font-size: 15px;
}

.icon-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
}

.icon-badge svg {
  width: 22px;
  height: 22px;
}

.icon-badge.green {
  background: var(--success-soft);
  color: var(--success);
}

.icon-badge.yellow {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--primary-soft);
  color: var(--primary);
}

.badge.soon {
  background: var(--skeleton);
  color: var(--text-muted);
}

.badge.live {
  background: var(--success-soft);
  color: var(--success);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

/* ---------- Como funciona ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

.step {
  display: grid;
  gap: var(--s3);
  align-content: start;
  position: relative;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-brand-red);
  font-weight: var(--peso-forte);
  font-size: 17px;
  box-shadow: var(--e-md);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 56px;
  right: calc(var(--s6) * -1 + 8px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
}

.step p {
  color: var(--text-muted);
  font-size: 15px;
}

/* ---------- Catálogos (pílulas) ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: var(--peso-forte);
  box-shadow: var(--e-sm);
  transition:
    border-color var(--t-state) ease,
    color var(--t-state) ease;
}

.pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pill svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* ---------- Painel escuro (segurança) ---------- */

.panel-dark {
  border-radius: var(--r-lg);
  color: var(--on-dark);
  padding: clamp(var(--s7), 5vw, var(--s9));
  background:
    radial-gradient(680px 320px at 88% 0%, var(--glow-blue), transparent 62%),
    linear-gradient(150deg, var(--brand-red-darkest), var(--brand-red-night));
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--s6), 4vw, var(--s8));
  align-items: center;
}

.panel-dark .h1 {
  color: var(--on-dark);
}

.panel-dark .lead {
  color: var(--on-dark-body);
}

.panel-dark ul {
  display: grid;
  gap: var(--s4);
}

.panel-dark li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.panel-dark li .tick {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--on-dark-surface);
  display: grid;
  place-items: center;
  color: var(--brand-green-soft);
}

.panel-dark li b {
  display: block;
  font-size: 15px;
}

.panel-dark li span {
  font-size: 14px;
  color: var(--on-dark-muted);
}

/* ---------- Depoimentos ---------- */

.quote {
  display: grid;
  gap: var(--s4);
}

.quote p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--peso-forte);
  font-size: 14px;
  flex: none;
}

.quote b {
  font-size: 14px;
  display: block;
}

.quote small {
  font-size: 12.5px;
  color: var(--text-muted);
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--brand-yellow-deep);
}

.stars svg {
  width: 15px;
  height: 15px;
}

/* ---------- Plano grátis ---------- */

.free-plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(var(--s5), 4vw, var(--s8));
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--brand-yellow);
  border-radius: var(--r-lg);
  padding: clamp(var(--s5), 3vw, var(--s7));
  box-shadow: var(--e-md);
}

.free-seal {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--on-brand-yellow);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: var(--peso-forte);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
}

.free-body {
  display: grid;
  gap: var(--s3);
}

.free-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}

.free-tiers div {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.free-tiers b {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-brand-red);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: var(--peso-forte);
  flex: none;
}

.free-tiers span {
  font-size: 14px;
  font-weight: var(--peso-forte);
  max-width: 12ch;
  line-height: 1.25;
}

.free-rules {
  display: grid;
  gap: var(--s2);
}

.free-rules li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13.5px;
  color: var(--text-muted);
}

.free-rules svg {
  color: var(--primary);
  flex: none;
}

/* ---------- Planos pagos ---------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  text-align: center;
}

.plan .btn {
  margin-top: auto;
}

.plan.featured {
  border-color: var(--primary);
  box-shadow: var(--e-md);
}

.plan-name {
  color: var(--primary);
  font-size: 18px;
}

.plan-range {
  font-size: 12.5px;
  font-weight: var(--peso-forte);
  color: var(--text);
}

.plan-from {
  font-size: 11px;
  color: var(--text-faint);
}

.plan .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: var(--primary);
}

.plan .price .cur {
  font-size: 15px;
  font-weight: var(--peso-forte);
}

.plan .price b {
  font-size: 34px;
  font-weight: var(--peso-forte);
  letter-spacing: -0.025em;
}

.plan-installments {
  font-size: 11.5px;
  color: var(--text-muted);
}

.plan ul {
  display: grid;
  gap: var(--s2);
  margin-block: var(--s2);
}

.plan li {
  display: flex;
  gap: var(--s2);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text);
}

.plan li svg {
  color: var(--primary);
  flex: none;
}

.plan-share {
  font-size: 12px;
  font-weight: var(--peso-forte);
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: var(--r-sm);
  padding: 6px var(--s2);
}

.plan-day {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: var(--s3);
}

.plan .ribbon {
  position: absolute;
  top: calc(var(--s3) * -1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-yellow);
  color: var(--on-brand-yellow);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Condições dos planos ---------- */

.conditions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2) var(--s6);
  margin-top: var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.conditions li {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text-muted);
}

.conditions svg {
  color: var(--brand-green-deep);
  flex: none;
  margin-top: 3px;
}

/* ---------- Lista de marcas de verificação (diferenciais) ---------- */

.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s6);
}

.checks li {
  display: flex;
  gap: var(--s3);
  align-items: center;
  font-size: 15px;
}

.icon-badge.sm {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  flex: none;
}

.icon-badge.sm svg {
  width: 18px;
  height: 18px;
}

/* ---------- Cartão de solução ---------- */

.card.featured {
  border-color: var(--primary);
  box-shadow: var(--e-md);
}

.solucao-faixa {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12.5px;
}

.solucao {
  display: flex;
  flex-direction: column;
}

/* A logomarca ocupa o lugar do nome no cartão: o <h3> segue sendo o nome
   acessível, agora pelo `alt` da imagem. Todo PNG é 560x64, então a proporção
   já reserva a altura e a lista não salta enquanto carrega. */
.card.solucao {
  gap: var(--s3);
  padding: var(--s5);
}

/* O que a solução RESOLVE é o título do cartão. O nome do produto vira
   assinatura no pé, porque o cliente compra o problema resolvido e não
   o nome do sistema. */
.solucao-resolve {
  font-size: 16px;
  line-height: 1.3;
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
}

.solucao-pe {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

.solucao-marca {
  display: block;
  max-width: min(190px, 100%);
}

.sol-logo {
  width: 100%;
  height: auto;
}

/* As logomarcas das soluções são coloridas sobre transparente: no tema
   escuro ganham a mesma chapa clara do letreiro, senão somem no azul-noite.
   O teto cresce junto com o respiro para a imagem manter o mesmo tamanho. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solucao-marca {
    background: var(--plate);
    border-radius: var(--r-sm);
    padding: var(--s2) var(--s3);
    max-width: min(214px, 100%);
  }
}

.solucao p {
  margin: 0;
}

/* ---------- Linha do tempo da INFORPOP ---------- */

/* ============================================================
   JORNADA — a linha do tempo da casa
   ============================================================
   Cada marco é um cartão sobre a espinha, com o ano em numeral
   grande e um nó na linha. O último marco é o compromisso, e por
   isso ganha borda e nó cheios em amarelo.
   ============================================================ */

/* O reset zera o recuo de `ul`, não o de `ol`, e a jornada é uma lista
   ordenada: sem esta linha ela carrega 40px de recuo do navegador, e o
   traço aceso (`::before`, ancorado no bloco de padding da lista) fica
   deslocado da espinha apagada, que é ancorada em cada marco. */
.timeline {
  position: relative;
  display: grid;
  gap: var(--s3);
  padding-inline-start: 0;
}

.marco {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s4);
  align-items: start;
  padding-left: var(--s6);
}

/* A espinha, em segmentos: cada marco desenha o seu pedaço. */
.marco::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: calc(var(--s3) * -1);
  width: 2px;
  background: var(--on-dark-line);
}

.marco:first-child::before {
  top: 14px;
}

.marco:last-child::before {
  bottom: auto;
  height: 14px;
}

/* O nó, na altura do ano. */
.marco::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  border: 2px solid var(--on-dark-edge-strong);
  background: var(--brand-red-night);
  transition:
    background var(--t-panel) ease,
    border-color var(--t-panel) ease,
    transform var(--t-panel) ease;
}

.marco:last-child::after {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 5px var(--glow-yellow);
}

.marco-ano {
  font-size: 22px;
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-yellow);
  font-variant-numeric: tabular-nums;
}

.marco-corpo {
  display: grid;
  gap: 3px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--on-dark-surface);
  border: 1px solid var(--on-dark-edge);
}

.marco:last-child .marco-corpo {
  border-color: var(--brand-yellow);
  background: var(--on-dark-hover);
}

.marco-corpo b {
  font-size: 15px;
  color: var(--on-dark);
}

.marco-corpo span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

/* ---------- Lista de contato ---------- */

.contact-list {
  display: grid;
  gap: var(--s3);
}

.contact-list li {
  display: flex;
  gap: var(--s3);
  align-items: center;
}

.contact-list svg {
  color: var(--primary);
  flex: none;
}

.contact-list a,
.contact-list > li > span {
  display: grid;
  gap: 1px;
}

.contact-list b {
  font-size: 15px;
}

.contact-list span span,
.contact-list a span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.contact-list a:hover b {
  color: var(--primary);
}

.center-text {
  text-align: center;
}

/* ---------- Formulário / CTA final ---------- */

.cta {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(var(--s6), 4vw, var(--s8));
  box-shadow: var(--e-md);
}

.form {
  display: grid;
  gap: var(--s3);
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field label {
  font-size: 12.5px;
  font-weight: var(--peso-forte);
  color: var(--text-muted);
}

/* `width: 100%` mais `min-width: 0`: sem os dois, o <select> reserva a
   largura da opção mais longa ("Guardar e organizar os documentos das
   vendas") e estoura a viewport do celular. Com a barra do topo
   flutuante, esse estouro empurrava o botão do menu para fora da tela. */
.field input,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition:
    border-color var(--t-state) ease,
    box-shadow var(--t-state) ease;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.form .consent {
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- Rodapé ---------- */

/* O endereço vem em duas partes, a rua e o andar. Sem `block` os dois
   `span` correm na mesma linha e o texto emenda: "Av. Paulista,
   10797º e 8º andar". */
#rodape-contato span {
  display: block;
}

#rodape-contato li + li {
  margin-top: 2px;
}

.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: var(--s8) var(--s6);
}

.footer .cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s7);
}

.foot-logo img {
  height: 40px;
  width: auto;
}

.footer h3 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s3);
}

.footer li {
  margin-bottom: var(--s2);
}

.footer a {
  font-size: 14.5px;
  color: var(--text-muted);
}

.footer a:hover {
  color: var(--primary);
}

.foot-sig {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-faint);
}

.selo {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.selo img {
  height: 78px;
  width: auto;
}

.selo span {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 30ch;
}

/* ============================================================
   UTILITÁRIOS DE COMPOSIÇÃO
   ============================================================
   Cada classe aqui nasceu de um `style=""` que estava no HTML.
   A política é migrate-on-touch (CODE-STANDARDS §1.4): quem toca
   no bloco tira o estilo inline e nomeia a intenção.
   ============================================================ */

.sprite {
  position: absolute;
}

.section.tight-top {
  padding-top: 0;
}

.section.tight-bottom {
  padding-bottom: 0;
}

.section.on-surface {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.card.card-panel {
  gap: var(--s5);
  padding: clamp(var(--s6), 4vw, var(--s8));
}

.section-head.flush {
  margin-bottom: 0;
}

.stack {
  display: grid;
  gap: var(--s4);
}

.stack.start {
  align-content: start;
}

.badge.on-dark {
  justify-self: start;
  background: var(--on-dark-surface);
  color: var(--on-dark);
}

.foot-claim {
  color: var(--primary);
}

.foot-sobre {
  max-width: 36ch;
}

.dev-ver {
  margin-left: auto;
}

.planos-titulo {
  margin: var(--s8) 0 var(--s5);
}

.vigencia {
  margin-top: var(--s5);
}

/* A legenda de cartão: `--text-muted` e não `--text-faint`. */
.free-unit,
.solucao-resumo {
  color: var(--text-muted);
}

/* ============================================================
   MAPA DAS SOLUÇÕES — o desenho do negócio
   ============================================================
   Uma raiz, uma espinha e três etapas. O galho e o nó são
   desenhados com pseudo-elemento, sem imagem e sem SVG extra.

   Ele nasceu dentro do hero vermelho, em corpo miúdo, e por isso
   usava a paleta de fundo escuro. Em 29/08/2026 virou dobra
   própria e CLARA: preto não é cor de superfície neste site, é
   cor de destaque pontual, e uma dobra que carrega as quinze
   soluções não é destaque pontual, é conteúdo para ler.

   Todo corpo subiu junto com a mudança: o que era etiqueta de
   10px agora é texto de leitura.
   ============================================================ */

.esteira-tag {
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mapa {
  display: grid;
  gap: var(--s3);
}

.mapa-raiz {
  display: inline-grid;
  gap: 2px;
  justify-self: start;
  margin-left: 4px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  background: var(--brand-yellow);
  color: var(--on-brand-yellow);
}

.mapa-raiz b {
  font-size: 17px;
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
}

.mapa-raiz span {
  font-size: 13px;
  font-weight: var(--peso-forte);
  opacity: 0.78;
}

.mapa-ramos {
  position: relative;
  display: grid;
  gap: var(--s3);
  padding-left: 42px;
}

.ramo {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition:
    background var(--t-panel) ease,
    border-color var(--t-panel) ease;
}

.ramo:hover,
.ramo:focus-within {
  background: var(--surface-alt);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
}

/* A espinha, em segmentos: o primeiro sobe até a raiz, o último
   para no próprio nó. É isso que dá o desenho de mapa. */
.ramo::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.ramo:first-child::before {
  top: -12px;
}

.ramo:last-child::before {
  bottom: auto;
  height: 26px;
}

.ramo::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 26px;
  width: 24px;
  height: 2px;
  background: var(--border);
}

/* O nó é o PASSO: o mapa diz a ordem, e não só que existem três
   grupos. É a leitura que a dobra precisa entregar em um segundo. */
.ramo-passo {
  position: absolute;
  left: -37px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-brand-red);
  font-size: 12.5px;
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ramo-nome {
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--success);
}

.ramo-tit {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: var(--peso-forte);
  letter-spacing: -0.018em;
  color: var(--text);
}

/* Quantas soluções entram naquela etapa. O número é derivado do
   catálogo, então ele nunca discorda das etiquetas abaixo. */
.ramo-conta {
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-muted);
}

.ramo-conta b {
  color: var(--primary);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.ramo ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.ramo li {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: var(--peso-forte);
  color: var(--text);
  transition:
    background var(--t-state) ease,
    border-color var(--t-state) ease,
    color var(--t-state) ease,
    transform var(--t-state) ease;
}

/* A solução que já tem página vira porta: a etiqueta clicável ganha
   o vermelho no ponteiro, e a que ainda não tem página fica parada.
   Enquanto as outras catorze não tiverem página, só uma acende, e
   isso é a verdade do site, não um defeito do desenho. */
.chip-link a {
  display: block;
  margin: -6px -14px;
  padding: 6px 14px;
}

.chip-link:hover,
.chip-link:focus-within {
  transform: translateY(-2px);
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-brand-red);
}

/* O atalho de volta, no topo do hero de uma página interna. */
.hero-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  min-height: 44px;
  font-size: 13px;
  font-weight: var(--peso-forte);
  color: var(--on-dark-muted);
}

.hero-voltar svg {
  transform: rotate(180deg);
}

/* ============================================================
   JORNADA DA AUDITORIA — os quatro degraus
   ============================================================ */

.icon-badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.card.risco {
  position: relative;
  overflow: hidden;
  gap: var(--s2);
  padding: var(--s5);
}

.risco-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* O degrau vira NUMERAL FANTASMA sangrado no canto do cartão, como os
   "01/02/03" da referência: ele ordena a leitura sem disputar peso com
   o título. Fica atrás do texto e não recebe ponteiro.

   Ele é filho DIRETO do cartão, e não do cabeçalho: o cabeçalho recebe
   `position: relative` na regra abaixo e viraria o bloco de contenção,
   ancorando o numeral no alto de uma faixa de 44px. */
.risco-degrau {
  position: absolute;
  inset: auto -8px -18px auto;
  z-index: 0;
  font-size: clamp(58px, 6vw, 78px);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink-ghost);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.risco > *:not(.risco-degrau) {
  position: relative;
  z-index: 1;
}

.icon-badge.sm.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.risco-lista {
  display: grid;
  gap: 5px;
  margin-top: var(--s1);
}

.risco-lista li {
  position: relative;
  padding-left: var(--s4);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.risco-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--border);
}

.risco .risco-lista li::before {
  background: var(--danger);
}

/* ============================================================
   OS TRÊS MOMENTOS — agrupamento do catálogo de soluções
   ============================================================ */

.momentos {
  display: grid;
  gap: clamp(var(--s7), 3.5vw, var(--s9));
  max-width: 1000px;
  margin-inline: auto;
}

.momento {
  display: grid;
  gap: var(--s6);
}

.momento-head {
  max-width: 660px;
  display: grid;
  gap: var(--s2);
}

/* ============================================================
   CONTRATAÇÃO — os dois níveis e o modelo comercial
   ============================================================ */

/* ---------- Contratação em três passos ----------
   Eram dois painéis lado a lado, cada um com 570px de largura e mais
   de 1200px de altura: um paredão de texto em coluna estreita, e a
   dobra passava de 1800px. Agora cada pergunta de quem compra é um
   PASSO, e os três correm LADO A LADO: a dobra deixa de somar as três
   alturas e passa a valer a maior delas. A ordem é a das perguntas:
   qual nível eu peço, onde a diferença aparece, como eu pago. */

.contratar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  align-items: stretch;
}

.passo-contrata {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s5);
  align-content: start;
  padding: clamp(var(--s5), 2.6vw, var(--s6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--e-sm);
}

.passo-contrata-head {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

/* O numeral é marcador de ordem, não título: fica em corpo pequeno,
   com filete próprio, para não competir com o nome do passo. */
.passo-contrata-num {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  color: var(--primary);
}

.passo-contrata-num::after {
  content: "";
  width: var(--s5);
  height: 1px;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
}

.passo-contrata-corpo {
  display: grid;
  gap: var(--s4);
  align-content: start;
  min-width: 0;
}

.passo-contrata-nota {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  color: var(--text-muted);
}

/* Dentro de uma coluna de terço, tudo empilha: grade dentro de grade
   estreita só produz linha órfã. */
.contratar .conditions {
  grid-template-columns: 1fr;
  margin-top: 0;
  padding: var(--s4);
}

.variacoes {
  display: grid;
  gap: var(--s3);
}

.variacao {
  display: flex;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}

.variacao:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.variacao-corpo {
  display: grid;
  gap: 3px;
}

.variacao-corpo b {
  font-size: 15px;
  font-weight: var(--peso-forte);
}

.variacao-onde {
  color: var(--text-muted);
}

.variacao-muda {
  font-size: 14.5px;
  line-height: 1.5;
}

/* O link para a página da solução, no rodapé do cartão. */
.btn-sm {
  min-height: 38px;
  padding: 0 var(--s4);
  font-size: 13.5px;
}

.solucao-link {
  align-self: flex-start;
  margin-top: var(--s1);
}

/* ============================================================
   CONVERSÃO — a chamada única e as peças da página de solução
   ============================================================
   Regra medida em 973 posts do nicho: uma chamada por página,
   sempre com o mesmo texto e o mesmo destino.
   ============================================================ */

.cta-unica {
  box-shadow: var(--e-md);
}

.cta-apoio {
  align-self: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

.hero .cta-apoio {
  color: var(--on-dark-muted);
}

.cta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s7);
}

/* A linha de fonte embaixo de todo número. */
.fonte {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

.provas {
  display: grid;
  gap: var(--s4);
}

.provas li {
  display: flex;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}

.provas li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.prova-corpo {
  display: grid;
  gap: 3px;
}

.prova-corpo b {
  font-size: 15px;
  line-height: 1.45;
  font-weight: var(--peso-forte);
}

.faq {
  display: grid;
  gap: var(--s3);
  max-width: 820px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding: var(--s4) var(--s5);
  font-size: 16px;
  font-weight: var(--peso-forte);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex: none;
  color: var(--primary);
  transform: rotate(90deg);
  transition: transform var(--t-state) ease;
}

.faq-item[open] summary svg {
  transform: rotate(-90deg);
}

.faq-corpo {
  display: grid;
  gap: var(--s2);
  padding: 0 var(--s5) var(--s5);
}

.fechamento {
  display: grid;
  gap: var(--s4);
  padding: clamp(var(--s7), 5vw, var(--s9));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--e-md);
}

.fechamento .lead {
  max-width: 62ch;
}

.fechamento .contact-list {
  margin-top: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.form-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
}

/* ============================================================
   RADAR INFORPOP — o dado entre a dor e a oferta
   ============================================================ */

.radar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.radar-num {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.radar-num b {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.radar-num b.texto {
  font-size: clamp(21px, 2.1vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.radar-rot {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: var(--peso-forte);
  color: var(--text);
}

.radar-num .small {
  font-size: 13px;
}

.radar-fonte {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.radar-leitura {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-top: var(--s5);
  padding: var(--s5);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  font-size: 15px;
  line-height: 1.55;
  font-weight: var(--peso-forte);
  color: var(--text);
}

.radar-leitura svg {
  flex: none;
  margin-top: 3px;
  color: var(--primary);
}

/* ============================================================
   PARCERIA — didática em três passos
   ============================================================ */

.passos-num {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s2);
}

.passos-num li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.passo-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-brand-red);
  font-size: 12px;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.passo-corpo {
  display: grid;
  gap: 1px;
}

.passo-corpo b {
  font-size: 15px;
}

.parceria-ganho {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  margin-top: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: var(--peso-forte);
}

.parceria-ganho svg {
  flex: none;
  margin-top: 3px;
  color: var(--brand-green-deep);
}

/* ============================================================
   ENTIDADES, VÍDEO, CARREIRAS E REDES
   ============================================================ */

.entidades {
  margin-top: var(--s5);
}

.entidades-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}

.entidade {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.entidade-nome {
  font-size: 15px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  color: var(--text);
}

/* Os PNG das entidades são desenhados em branco sobre transparente.
   Sobre o cartão claro eles somem: a chapa escura é o que os torna
   visíveis, e é a mesma solução da pílula de prova do hero. */
.entidade-chapa {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--ink);
}

.entidade-logo {
  height: 34px;
  width: auto;
}

.entidade .small {
  font-size: 12.5px;
  line-height: 1.35;
}

.video-dep {
  display: grid;
  gap: var(--s3);
}

.video-dep video {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--skeleton);
}

.video-dep figcaption {
  display: grid;
  gap: 1px;
}

.frentes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.frentes li {
  display: grid;
  gap: 2px;
  padding: var(--s4);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.frentes b {
  font-size: 15px;
}

.redes {
  display: flex;
  gap: var(--s2);
}

.rede {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
  transition:
    background var(--t-state) ease,
    color var(--t-state) ease;
}

.rede:hover {
  background: var(--primary);
  color: var(--on-brand-red);
}

/* ============================================================
   AVISO DE CALENDÁRIO — o prazo do Ministério
   ============================================================ */

.aviso {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  padding: clamp(var(--s5), 4vw, var(--s7));
  border-radius: var(--r-lg);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
}

.aviso-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--warning);
  color: var(--on-warning);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.aviso p {
  max-width: 78ch;
  color: var(--text);
}

.aviso-fonte {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.solucao-destaque {
  grid-column: span 2;
}

.solucao-destaque .solucao-resolve {
  font-size: 19px;
}

/* ============================================================
   BUSCA DE VAGA POR MUNICÍPIO
   ============================================================ */

.hero-curto .wrap {
  grid-template-columns: 1fr;
  padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 72px);
}

.hero-curto .hero-copy {
  max-width: 760px;
}

.busca {
  display: grid;
  gap: var(--s2);
  width: min(560px, 100%);
}

.busca-rotulo {
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.busca-campo {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  border: 1px solid var(--on-dark-edge-strong);
  background: var(--plate);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: var(--peso-forte);
}

.busca-campo::placeholder {
  color: var(--text-faint);
  font-weight: var(--peso-texto);
}

.busca .small {
  color: var(--on-dark-body);
}

.busca-fonte {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--on-dark-muted);
}

.vagas-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.vaga {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--e-sm);
}

.vaga-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.vaga-uf {
  display: inline-block;
  margin-left: var(--s2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: var(--peso-forte);
  vertical-align: middle;
}

.vaga-n {
  display: grid;
  justify-items: end;
  flex: none;
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--peso-forte);
  color: var(--text-muted);
  text-align: right;
}

.vaga-n b {
  font-size: 30px;
  line-height: 1;
  font-weight: var(--peso-forte);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.vaga-dados {
  display: grid;
  gap: 4px;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.vaga-dados li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 13.5px;
  color: var(--text-muted);
}

.vaga-dados b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.vaga .btn {
  justify-self: start;
}

.vaga-vazio {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  grid-column: 1 / -1;
  padding: clamp(var(--s5), 4vw, var(--s7));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.vaga-vazio p {
  max-width: 70ch;
  color: var(--text-muted);
}

/* A busca embutida no Radar: mesma mecânica, peso menor, e sobre
   superfície clara em vez da faixa vermelha do hero. */
.busca-embutida {
  margin-top: var(--s6);
}

.busca-clara .busca-rotulo {
  color: var(--primary);
}

.busca-clara .busca-campo {
  border-color: var(--border);
  box-shadow: var(--e-sm);
}

.busca-clara .small {
  color: var(--text-muted);
}

.busca-embutida .vagas-lista:empty {
  display: none;
}

/* O botão é `white-space: nowrap` por padrão, e este rótulo tem 48
   caracteres: no celular ele sozinho definia a largura mínima da
   página inteira. Aqui, e só aqui, o texto pode quebrar. */
.busca-link {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: var(--s2);
}

/* ============================================================
   CARREIRAS — a página das vagas
   ============================================================
   O cartão de vaga é largo de propósito: as duas listas, o que se
   faz e o que se pede, precisam ser lidas LADO A LADO. Empilhadas
   elas viram um paredão que ninguém termina.

   Nenhum valor de remuneração aparece nesta página, por decisão de
   conteúdo. O que o desenho evidencia é o BENEFÍCIO.
   ============================================================ */

.vagas-grade {
  display: grid;
  gap: clamp(var(--s5), 3vw, var(--s7));
}

.card.vaga {
  position: relative;
  overflow: hidden;
  gap: var(--s5);
}

.vaga-topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s4);
}

/* Cada área tem a sua cor. Três cartões iguais viram paredão: a cor
   é o que faz alguém achar a SUA vaga sem ler os três.

   O azul de apoio precisa da versão clareada: sobre a dobra TINTA o
   `--brand-blue-soft` dá 3,0 de contraste e reprova em AA. */
.vaga[data-cor="verde"] {
  --vaga-cor: var(--brand-green-soft);
}

.vaga[data-cor="azul"] {
  --vaga-cor: var(--brand-blue-on-dark);
}

.vaga[data-cor="amarelo"] {
  --vaga-cor: var(--brand-yellow);
}

/* `.card p` já pinta todo parágrafo de cartão com `--text-muted`, e
   ele tem especificidade maior que uma classe sozinha. Por isso o
   rótulo da área e o das colunas vêm prefixados por `.vaga`. */
.vaga .vaga-area {
  color: var(--vaga-cor, var(--primary));
}

.vaga .icon-badge {
  background: var(--on-dark-inset);
  color: var(--vaga-cor, var(--primary));
}

.vaga .vaga-selos li.forte {
  background: var(--vaga-cor, var(--primary));
  border-color: var(--vaga-cor, var(--primary));
  color: var(--ink);
}

.vaga .vaga-fatos svg {
  color: var(--vaga-cor, var(--primary));
}

.vaga::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--vaga-cor, var(--primary));
}

/* A marca-d'água repete o ícone do cabeçalho em corpo grande. Ela é
   enfeite: fica atrás de tudo e fora da árvore de acessibilidade. */
.vaga-marca {
  position: absolute;
  inset: auto -40px -50px auto;
  z-index: 0;
  color: var(--vaga-cor, var(--primary));
  opacity: 0.07;
  pointer-events: none;
}

.card.vaga > *:not(.vaga-marca) {
  position: relative;
  z-index: 1;
}

.vaga-topo .h2 {
  margin-top: 2px;
}

/* As etiquetas de contrato, número de posições e regime. A primeira
   é a que decide se a pessoa continua lendo, então ela é a cheia. */
.vaga-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: flex-end;
}

.vaga-selos li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

.vaga-selos li.forte {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-brand-red);
}

.vaga-resumo {
  max-width: 68ch;
}

.vaga-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  padding-block: var(--s4);
  border-block: 1px solid var(--border);
}

.vaga-fatos li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13.5px;
  color: var(--text-muted);
}

.vaga-fatos svg {
  flex: none;
  color: var(--primary);
}

.vaga-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s5), 3vw, var(--s7));
}

.vaga .vaga-rotulo {
  margin-bottom: var(--s3);
  color: var(--vaga-cor, var(--primary));
}

/* O que a vaga tem A MAIS da cultura comum. Fica em caixa própria
   para não se confundir com o que vale para todas. */
.vaga-extra {
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  background: var(--success-soft);
  border: 1px solid var(--brand-green-deep);
}

.vaga .vaga-extra .vaga-rotulo {
  color: var(--success);
}

.vaga-extra .checks {
  grid-template-columns: 1fr;
  gap: var(--s2);
}

.vaga-extra .checks li {
  font-size: 14px;
  color: var(--text);
}

.vaga-extra .checks svg {
  flex: none;
  color: var(--success);
}

.chips-secos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chips-secos li {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

.card.vaga .btn {
  justify-self: start;
}

/* O assunto do e-mail é o que faz a mensagem chegar em quem
   seleciona, então ele é conteúdo, não instrução escondida. */
.vaga-assuntos {
  display: grid;
  gap: var(--s2);
}

.vaga-assuntos li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 14px;
}

.vaga-assuntos b {
  min-width: 15ch;
}

.vaga-assuntos span {
  color: var(--primary);
  font-weight: var(--peso-forte);
}

/* ============================================================
   PARCEIROS — o programa AIN
   ============================================================ */

.vigencia-periodo {
  font-size: clamp(24px, 3vw, 33px);
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
  color: var(--warning);
}

/* ---------- A ESCADA DE PRÊMIO ----------
   O centro da página. Antes eram quatro cartões lado a lado, e eles
   ficavam soltos: nada dizia que o segundo vinha depois do primeiro.

   Agora os quatro dividem UM TRILHO. A barra sobe de degrau em
   degrau, e como a coluna é alinhada pela base, o nome do aparelho
   sobe junto com ela. É o desenho que conta a história, não o texto:
   subir a escada vale a pena.

   O nome do aparelho fica ACIMA da barra, e é ele que tem o corpo
   maior. O prêmio é o assunto; o número de indicações é a legenda. */

.escada {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--s2), 1.4vw, var(--s4));
  align-items: end;
}

.degrau {
  display: grid;
  align-content: end;
  gap: var(--s3);
  text-align: center;
}

/* O aparelho, que é o assunto da dobra. */
.degrau-premio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

.degrau-premio svg {
  flex: none;
  color: var(--brand-yellow-deep);
}

/* A barra. A altura é o degrau, e o trilho nasce dela: cada segmento
   avança meia lacuna para cada lado e encosta no vizinho, formando
   uma linha contínua sem elemento extra no HTML. */
.degrau-barra {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-bottom: 0;
}

.degrau-barra::after {
  content: "";
  position: absolute;
  inset: auto calc(-1 * clamp(var(--s2), 1.4vw, var(--s4))) -2px;
  height: 2px;
  background: var(--border);
}

.degrau-barra b {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  color: var(--primary);
}

.degrau[data-faixa="bronze"] .degrau-barra {
  height: 96px;
}

.degrau[data-faixa="prata"] .degrau-barra {
  height: 136px;
}

.degrau[data-faixa="ouro"] .degrau-barra {
  height: 182px;
}

/* O topo da escada: barra cheia, aparelho em corpo de manchete. */
.degrau[data-faixa="platina"] .degrau-barra {
  height: 240px;
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.degrau[data-faixa="platina"] .degrau-barra b {
  font-size: clamp(46px, 5.4vw, 72px);
  color: var(--on-brand-yellow);
}

/* No topo o nome ocupa duas linhas. Em `flex` a estrela ficaria
   centrada na altura das duas, solta do texto: em `block` ela volta a
   ser um caractere na frente da primeira linha. */
.degrau[data-faixa="platina"] .degrau-premio {
  display: block;
  font-size: clamp(17px, 2.1vw, 25px);
  letter-spacing: -0.02em;
}

.degrau[data-faixa="platina"] .degrau-premio svg {
  vertical-align: -2px;
  margin-right: 4px;
}

.degrau-selo {
  position: absolute;
  inset: auto 0 var(--s3) 0;
  font-size: 10px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-brand-yellow);
}

.degrau-nivel {
  margin-top: var(--s2);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.degrau[data-faixa="platina"] .degrau-nivel {
  color: var(--brand-yellow-deep);
}

.degrau-cond {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Os quatro números da dobra "por que a relação dura". A peça
   `.metrica` nasceu no hero, sobre fundo escuro, e por isso pinta o
   rótulo com `--on-dark-body`. Aqui ela está sobre superfície CLARA:
   sem esta correção o rótulo dá 1,13 de contraste e some. */
.relacao-provas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4) clamp(var(--s5), 3vw, var(--s7));
  padding-block: clamp(var(--s5), 3vw, var(--s6));
  border-block: 1px solid var(--border);
}

.relacao-provas .metrica {
  justify-items: start;
  text-align: left;
}

.relacao-provas .metrica b {
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--primary);
}

.relacao-provas .metrica > span {
  color: var(--text-muted);
}

.relacao-pontos {
  margin-top: clamp(var(--s5), 3vw, var(--s7));
}

.premios-apoio {
  margin-top: clamp(var(--s6), 4vw, var(--s8));
  display: grid;
  gap: var(--s3);
  max-width: 74ch;
}

.restricao {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.restricao svg {
  flex: none;
  margin-top: 2px;
}

/* ---------- As faixas da página do AIN ----------
   A página era clara, preta, clara, preta. Trocar o preto por branco
   deixaria sete dobras iguais, então a separação passou a ser de COR
   e não de escuridão: a dobra do prêmio ganha a cor da casa e a de
   como começar ganha o verde do sim, no mesmo vocabulário da faixa de
   busca de vaga da home. */

.band-premio {
  background: var(--primary-soft);
  border-block: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.band-comeco {
  background: var(--success-soft);
  border-block: 1px solid color-mix(in srgb, var(--brand-green-deep) 25%, transparent);
}

/* ---------- O selo da condição vigente ----------
   Era um painel âmbar de aviso, e como painel ele abria a página com
   uma ressalva. Como selo, colado na escada, ele diz o contrário: a
   condição está viva e é revista todo mês, que é exatamente o que a
   validade mensal significa. */

.vigencia-selo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}

.selo-vigencia {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--e-sm);
}

.selo-vigencia b {
  padding-left: var(--s2);
  border-left: 1px solid var(--border);
  color: var(--primary);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.vigencia-nota {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- A história da casa, na página do parceiro ----------
   Indicar é emprestar o próprio nome. Ninguém empresta o nome para
   quem não sabe de onde veio, e por isso a história entra aqui e não
   fica só na home. */

.historia-ain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.marco-ain {
  position: relative;
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding-top: var(--s5);
  border-top: 2px solid var(--border);
}

.marco-ain::before {
  content: "";
  position: absolute;
  inset: -5px auto auto 0;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.marco-ain-ano {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.marco-ain-nome {
  margin: 0;
  font-size: 16px;
  font-weight: var(--peso-forte);
  color: var(--text);
}

/* ---------- A chamada de ação da dobra dos prêmios ----------
   A escada mostra o que se ganha; esta faixa diz o que fazer com
   isso AGORA. Sem ela a dobra termina em admiração e a pessoa rola
   para longe do botão. */

.premios-acao {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s5) clamp(var(--s6), 5vw, var(--s9));
  margin-top: clamp(var(--s6), 4vw, var(--s8));
  padding: clamp(var(--s5), 4vw, var(--s7));
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-dark);
}

.premios-acao h3 {
  color: var(--on-dark);
}

.premios-acao p {
  margin-top: var(--s2);
  color: var(--on-dark-body);
}

/* ---------- As regras, em corpo de LEITURA ----------
   A dobra se chama "sem letra miúda". Escrevê-la em 15px seria a
   piada contra a própria página: aqui ela é maior que o corpo. */

.regras-lista li {
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.5;
}

.regras-lista svg {
  flex: none;
  margin-top: 3px;
  color: var(--success);
}

/* ---------- O chamariz da busca de vaga ----------
   Dobra logo abaixo do hero. Fundo tingido de vermelho fraco para
   se separar do hero acima e da dobra clara abaixo sem precisar de
   preto, e sem competir com a manchete. */

.busca-destaque {
  background: var(--primary-soft);
  border-block: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.destaque-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s6), 4vw, var(--s9));
  align-items: start;
}

.destaque-numeros {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s4) clamp(var(--s5), 3vw, var(--s7));
  justify-content: start;
  margin-top: var(--s2);
}

.destaque-numeros b {
  display: block;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* Filho DIRETO, e não descendente: `.destaque-numeros span` pegava
   também os `span` que o odômetro cria dentro do `<b>`, e os dígitos
   desciam de 36px para 12,5px. É a mesma armadilha de `.card p`. */
.destaque-numeros > li > span {
  display: block;
  margin-top: 4px;
  max-width: 17ch;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text-muted);
}

.destaque-busca {
  gap: var(--s4);
}

.destaque-busca .busca {
  width: 100%;
}

.destaque-busca .busca-campo {
  background: var(--surface-alt);
  border-color: var(--border);
}

/* A lista de resultados herda três colunas do Radar, e aqui ela vive
   dentro de meia dobra: em três colunas ela estoura o cartão. */
.destaque-busca .vagas-lista {
  grid-template-columns: 1fr;
}

.destaque-busca .busca-link {
  justify-self: start;
}

/* ---------- Contratação: os dois níveis e os três planos ----------
   A dobra era duas listas de texto corrido. Agora ela responde as
   duas perguntas na ordem em que elas aparecem na cabeça de quem
   compra: "qual nível eu peço?" e "como eu pago?". */

.niveis-par {
  display: grid;
  gap: var(--s3);
}

.nivel-card {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

/* O nome e o ícone dividem UMA linha. Em coluna própria, o ícone
   roubava 60px de uma coluna que já é um terço da dobra. */
.nivel-nome {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: 14px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  color: var(--primary);
}

.nivel-chamada {
  font-size: 16px;
  font-weight: var(--peso-forte);
  line-height: 1.3;
  color: var(--text);
}

.planos-par {
  display: grid;
  gap: var(--s2);
}

/* Deitado: o percentual à esquerda e o parcelamento à direita. Em três
   colunas dentro de um terço da dobra cada plano ficaria com 115px. */
.plano {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
}

.plano-entrada {
  font-size: 13px;
  color: var(--text-muted);
}

.plano-entrada b {
  font-size: 27px;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.plano-parcelas {
  font-size: 14px;
  font-weight: var(--peso-forte);
  color: var(--text);
}

.plano-nota {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* A dobra da INFORPOP tem dois blocos: a jornada e as seis frentes.
   O segundo cabeçalho precisa de ar para não parecer legenda do
   primeiro. */
.estrutura-head {
  margin-top: clamp(var(--s8), 6vw, var(--s10));
}

/* ---------- Painéis que expandem ----------
   Um painel abre e os outros cedem espaço: o JavaScript só troca o
   atributo, a divisão é do CSS.

   O painel fechado NÃO some: ele vira lombada, com o ícone em cima
   e o nome da frente na vertical. Sem isso, cinco das seis frentes
   ficariam ilegíveis até alguém passar o ponteiro por cima.

   Só a partir de 1001px e só com movimento permitido. Abaixo disso
   a dobra continua sendo a grade de três colunas, com tudo aberto:
   no celular não existe ponteiro para revelar o que está fechado. */

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .paineis {
    display: flex;
    gap: var(--s3);
    align-items: stretch;
    min-height: 384px;
  }

  .paineis > * {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition:
      flex var(--t-entrada-curta) var(--ease-saida),
      background var(--t-panel) ease,
      border-color var(--t-panel) ease;
  }

  .paineis > [data-aberto="true"] {
    flex: 3.6 1 0;
    background: var(--surface-alt);
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  }

  /* Fechado: o cartão vira lombada, com o ícone em cima e DUAS colunas
     de texto na vertical, o nome e a legenda.

     A legenda não é enfeite: duas das seis frentes se chamam "Unidade
     de Negócios", e o que separa uma da outra ("Alta Complexidade" e
     "Expansão") mora só nela. Sem a segunda coluna, a lombada mostraria
     dois rótulos idênticos. */
  .paineis > :not([data-aberto="true"]) {
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    justify-content: center;
    align-content: start;
    gap: var(--s2);
    padding-inline: var(--s3);
  }

  .paineis > :not([data-aberto="true"]) .card-head {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .paineis > :not([data-aberto="true"]) .h3,
  .paineis > :not([data-aberto="true"]) .solucao-resumo {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  .paineis > :not([data-aberto="true"]) .h3 {
    grid-column: 1;
  }

  .paineis > :not([data-aberto="true"]) .solucao-resumo {
    grid-column: 2;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .paineis > :not([data-aberto="true"]) .risco-lista {
    display: none;
  }

  .paineis > [data-aberto="true"] .h3 {
    max-width: 100%;
  }
}

/* ============================================================
   EFEITOS DE CENA
   ============================================================
   Odômetro, contador de prazo, linha que se desenha, cursor,
   painéis, gotas, shader e pintura. O comportamento vive em
   `scripts/numeros.js` e `scripts/cena.js`; a aparência é toda
   daqui. Nenhum deles roda em `prefers-reduced-motion`.
   ============================================================ */

/* Só para o leitor de tela: sai da tela sem sair da árvore. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Odômetro ----------
   Cada algarismo é uma fita de 0 a 9 que desliza até parar. O que
   não é dígito (o ponto de milhar, o "%", o "+") entra como texto
   fixo entre as fitas, senão "28.552" viraria "28552". */

.conta[data-odo="true"] {
  display: inline-flex;
  align-items: center;
  line-height: 1.05;
}

.odo {
  display: inline-flex;
}

.odo-digito {
  height: 1.05em;
  overflow: hidden;
  line-height: 1.05;
}

.odo-fita {
  display: flex;
  flex-direction: column;
  transition: transform 900ms var(--ease-saida);
}

.odo-fixo {
  line-height: 1.05;
}

/* ---------- Contador do prazo do Ministério ---------- */

.prazo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block: var(--s1) var(--s2);
}

.prazo[data-encerrado="true"] {
  display: block;
  font-size: 14px;
  font-weight: var(--peso-forte);
  color: var(--warning);
}

.prazo-caixa {
  min-width: 70px;
  padding: 10px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}

.prazo-caixa b {
  display: block;
  font-size: 30px;
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.prazo-caixa span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Linha do tempo que se desenha ----------
   A espinha apagada continua sendo o `::before` de cada marco. O
   traço aceso é UM só, por cima, e a altura dele vem de `--cheio`. */

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 2px;
  height: var(--cheio, 0%);
  max-height: calc(100% - 14px);
  background: var(--brand-yellow);
  pointer-events: none;
}

.marco[data-aceso="true"]::after {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  transform: scale(1.2);
}

.timeline[data-desenha="true"] .marco-ano,
.timeline[data-desenha="true"] .marco-corpo {
  transition: opacity var(--t-panel) ease;
}

.timeline[data-desenha="true"] .marco:not([data-aceso="true"]) .marco-ano,
.timeline[data-desenha="true"] .marco:not([data-aceso="true"]) .marco-corpo {
  opacity: 0.45;
}

/* ---------- Cursor desenhado ----------
   Branco com `mix-blend-mode: difference`: uma cor só que se
   inverte contra a faixa vermelha e contra o cartão branco. O anel
   cresce sobre link e botão, e é isso que devolve a pista de clique
   que o ponteiro do sistema dava de graça. */

.cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity var(--t-panel) ease;
}

.cursor[data-vivo="true"] {
  opacity: 1;
}

.cursor-ponto,
.cursor-anel {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--r-pill);
  will-change: transform;
}

.cursor-ponto {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--cursor-tinta);
}

.cursor-anel {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--cursor-tinta);
  transition:
    width var(--t-panel) ease,
    height var(--t-panel) ease,
    margin var(--t-panel) ease;
}

.cursor[data-sobre="true"] .cursor-anel {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
}

body[data-cursor="desenhado"] {
  cursor: none;
}

/* O cursor de texto continua sendo do sistema: dentro de um campo o
   ponto desenhado não diz onde a letra vai entrar. */
body[data-cursor="desenhado"] input,
body[data-cursor="desenhado"] select,
body[data-cursor="desenhado"] textarea {
  cursor: auto;
}

/* ---------- Fundo em shader do hero ---------- */

.shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Com o shader no ar a aurora em CSS sai de cena: duas camadas em
   movimento na mesma dobra brigam uma com a outra. */
.hero[data-shader="true"]::before {
  display: none;
}

/* ---------- Manchete palavra por palavra ---------- */

/* A entrada linha a linha some quando o JavaScript assume a frase. */
.display[data-split="true"] .linha {
  animation: none;
}

.palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms var(--ease-saida),
    transform 520ms var(--ease-saida);
}

.palavra[data-dentro="true"] {
  opacity: 1;
  transform: none;
}

/* ---------- Tópicos que se pintam ----------
   O gradiente é recortado no próprio texto e a posição dele vem de
   `--pintado`, que o `cena.js` move por quadro. A ponta apagada é
   `--text-muted`, cor que passa em AA: quem parar de rolar no meio da
   dobra continua lendo. */

[data-pinta="true"] {
  --pinta-cheio: var(--text);
  --pinta-vazio: var(--text-muted);

  /* As duas paradas correm de -22% a 144% para que `--pintado: 0%`
     deixe o bloco INTEIRO apagado e `100%` o deixe inteiro pintado. Com
     as paradas cruas, o topo do texto já nasceria pintado. */
  background-image: linear-gradient(
    180deg,
    var(--pinta-cheio) calc(var(--pintado, 100%) * 1.44 - 22%),
    var(--pinta-vazio) calc(var(--pintado, 100%) * 1.44)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Na dobra TINTA `--text-muted` é o rosa quase branco do corpo: entre
   ele e o branco não existe diferença que o olho registre. A ponta
   apagada ali é o branco a 78%, que continua passando em AA. */
.band-ink [data-pinta="true"] {
  --pinta-vazio: var(--on-dark-muted);
}

/* ---------- O prazo do Ministério, em evidência ----------
   A data deixou de ser um trecho da frase e virou o objeto da dobra:
   bloco de calendário à esquerda, título ao lado, relógio embaixo. */

.aviso-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--s4), 2.5vw, var(--s6));
  align-items: center;
}

.aviso-data {
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 104px;
  padding: var(--s3) var(--s4) var(--s4);
  border-radius: var(--r-md);
  background: var(--warning);
  color: var(--on-warning);
  line-height: 1;
}

.aviso-data b {
  font-size: clamp(46px, 6vw, 62px);
  font-weight: var(--peso-forte);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.aviso-data span {
  font-size: 12px;
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* O ano se separa do mês por TAMANHO, não por transparência: a 70% de
   opacidade sobre o âmbar o contraste cai para 4,02 e reprova em AA. */
.aviso-data span:last-child {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
}

.aviso-titulo {
  display: grid;
  gap: 6px;
}

.aviso-chamada {
  font-size: 14px;
  font-weight: var(--peso-forte);
  color: var(--warning);
}

/* ---------- Gotas ----------
   O desfoque somado ao contraste é o que funde uma gota na outra. */

.gotas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.28;
  filter: blur(11px) contrast(22);
}

/* Qualquer dobra com canvas de fundo, em qualquer página: o conteúdo
   sobe acima dele. O irmão adjacente evita ter de listar `id` a `id`. */
.gotas ~ .wrap,
.shader ~ .wrap {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .gotas {
    display: none;
  }

  .odo-fita {
    transition: none;
  }
}

/* ============================================================
   MOVIMENTO — a rolagem como um plano contínuo
   ============================================================
   Três camadas, e só três:

   1. ENTRADA  · todo bloco nasce deslocado, desfocado e um pouco
                 menor, e assenta na curva `--ease-saida`. O desfoque
                 é o que faz a rolagem parecer contínua: o conteúdo
                 "resolve" em vez de aparecer.
   2. ESCALONAMENTO · cada elemento recebe `--d` do observador, então
                 uma fileira de cartões entra em cascata e não em bloco.
   3. RESPOSTA · hover e estado seguem em `--t-state`, porque isso é
                 resposta a toque e não pode esperar.

   Quem pede menos movimento recebe tudo pronto, sem nenhuma das três.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity var(--t-entrada) var(--ease-saida),
    transform var(--t-entrada) var(--ease-saida),
    filter var(--t-entrada-curta) var(--ease-saida);
  transition-delay: var(--d, 0ms);
}

.reveal[data-seen="true"] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Entrada do topo e do hero ----------
   O hero não usa observador: ele já está na tela quando a página
   abre, então a coreografia é por atraso puro. */

@keyframes descer {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    filter: blur(6px);
  }
}

@keyframes surgir-linha {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes pulsar {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }

  70% {
    transform: translateY(0) scale(1.03);
  }
}

.entra {
  animation: surgir var(--t-entrada) var(--ease-saida) both;
  animation-delay: var(--d, 0ms);
}

/* Os cinco passos da coreografia do hero. O número é a ORDEM em que a
   peça entra, não o milissegundo: quem lê a marcação sabe a sequência
   sem abrir a folha de estilo. */
.entra-1 {
  --d: 40ms;
}

.entra-2 {
  --d: 280ms;
}

.entra-3 {
  --d: 340ms;
}

.entra-4 {
  --d: 400ms;
}

.entra-5 {
  --d: 500ms;
}

.entra-pulso {
  animation: pulsar var(--t-entrada) var(--ease-saida) both;
  animation-delay: var(--d, 0ms);
}

/* A manchete entra linha a linha, e é isso que dá o efeito de
   máquina de escrever sem escrever letra a letra. */
.display .linha {
  display: block;
  animation: surgir-linha 850ms var(--ease-saida) both;
}

.display .linha:nth-child(1) {
  animation-delay: 120ms;
}

.display .linha:nth-child(2) {
  animation-delay: 300ms;
}

/* ---------- A luz que atravessa a faixa da marca ----------
   Não é vídeo nem imagem: é um brilho radial que percorre o hero em
   ciclo longo. Custa zero byte de download e nunca falha por CSP. */

@keyframes deriva {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-6%, 4%, 0) scale(1.12);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 130%;
  background:
    radial-gradient(52% 46% at 22% 18%, var(--glow-yellow), transparent 62%),
    radial-gradient(46% 40% at 78% 72%, var(--glow-green), transparent 64%);
  animation: deriva 26s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- A barra de progresso da leitura ----------
   O fio no alto do documento diz o tamanho do caminho. É o que
   sustenta a sensação de um site só, e não de páginas empilhadas. */

.progresso {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
  pointer-events: none;
}

/* ---------- Número que conta ---------- */

.conta {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-seen="true"] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .topbar,
  .entra,
  .entra-pulso,
  .display .linha,
  .hero::before {
    animation: none;
  }

  /* O trilho para de vez: parado no meio do ciclo ele mostraria a
     segunda volta. A cópia decorativa sai e a faixa volta a ser grade. */
  .strip ul {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    transform: none;
  }

  .strip li[aria-hidden="true"] {
    display: none;
  }

  .progresso {
    display: none;
  }
}

/* ---------- Reserva de espaço para o que o JS monta ----------
   O hero é a primeira coisa que a pessoa vê, e os dois blocos abaixo
   nascem vazios e crescem quando o render roda. Com a grade centrada,
   esse crescimento reposicionava a coluna inteira e produzia 0,177 de
   deslocamento acumulado. A altura fica reservada de antemão, só onde
   as duas colunas convivem: em tela estreita elas empilham e a reserva
   viraria buraco. */

@media (min-width: 1001px) {
  #hero-proof {
    min-height: 152px;
  }

  /* Os quatro números do topo de Carreiras nascem vazios e crescem
     quando o render roda. Sem a reserva o hero inteiro pula 109px, e
     o deslocamento acumulado da página passa de 0,4. */
  #carreiras-resumo {
    min-height: 109px;
  }

  #hero-selo {
    min-height: 46px;
  }

  #vagas-topo {
    min-height: 100px;
  }

  /* O mapa saiu do hero e virou dobra própria: a reserva agora é a
     altura real do desenho, não a da coluna que ele ocupava. */
  .esteira-stage {
    min-height: 336px;
  }
}

/* ---------- Responsivo ---------- */

@media (max-width: 1180px) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .vagas-lista {
    grid-template-columns: repeat(2, 1fr);
  }

  .solucao-destaque {
    grid-column: span 2;
  }

  .entidades-lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .frentes {
    grid-template-columns: 1fr;
  }

  .grid-4,
  .radar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .wrap,
  .destaque-grade {
    grid-template-columns: 1fr;
  }

  /* Em tela estreita a PROMESSA vem antes da imagem. O aparelho ilustra,
     não vende: quem decide continuar rolando é o título. */
  .device-stage {
    order: 1;
  }

  .device {
    transform: none;
  }

  .device-tag {
    right: -6px;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step:not(:last-child)::after {
    display: none;
  }

  .panel-dark,
  .cta {
    grid-template-columns: 1fr;
  }

  .footer .cols {
    grid-template-columns: 1fr 1fr;
  }

  .free-plan {
    grid-template-columns: auto 1fr;
  }

  .free-rules {
    grid-column: 1 / -1;
  }

  .checks,
  .conditions {
    grid-template-columns: 1fr;
  }

  /* Em duas colunas a escada continua escada: as barras mantêm a
     altura crescente dentro de cada par. */
  .escada {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--s7);
  }

  .relacao-provas,
  .historia-ain {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Notebook de tela baixa: a dobra inteira só cabe se a respiração
   encolher. Sem isso a linha da fonte dos números fica 20px abaixo do
   corte, e a promessa de "tudo numa tela" se perde no aparelho mais
   comum do escritório. */
@media (min-width: 721px) and (max-height: 880px) {
  .hero-cheio .wrap {
    gap: var(--s6);
    padding-block: var(--s6) var(--s5);
  }

  .hero-cheio .hero-copy {
    gap: var(--s4);
  }
}

/* A barra troca por hambúrguer antes do resto do desenho quebrar: com SETE
   itens e um botão (a home ganhou "Vagas" depois deste número ter sido
   calibrado em seis), o topo já aperta bem acima do limite do celular —
   entre 900 e 1000px o último item, "Contato", ficava embaixo do botão
   vermelho, sem quebrar linha nem encolher mais. */
@media (max-width: 1040px) {
  .contratar {
    grid-template-columns: 1fr;
  }

  .nav {
    display: none;
  }

  .nav[data-open="true"] {
    display: grid;
    position: absolute;
    top: calc(100% - var(--topo-folga) / 2);
    left: var(--s4);
    right: var(--s4);
    height: auto;
    padding: var(--s4);
    gap: var(--s1);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-float);
  }

  .nav[data-open="true"] a {
    padding: 12px var(--s4);
    opacity: 1;
  }

  .nav[data-open="true"] a[data-active="true"]::after {
    display: none;
  }

  .nav-cta {
    margin-left: auto;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: var(--topo-pastilha);
    height: var(--topo-pastilha);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-pill);
    cursor: pointer;
    order: 2;
  }
}

@media (max-width: 720px) {
  .vagas-lista {
    grid-template-columns: 1fr;
  }

  .solucao-destaque {
    grid-column: auto;
  }

  .hero-proof,
  .entidades-lista {
    grid-template-columns: 1fr;
  }

  .hero-metricas {
    grid-template-columns: repeat(2, 1fr);
  }

  #carreiras-resumo {
    min-height: 196px;
  }

  .hero-cheio .display {
    letter-spacing: -0.028em;
  }

  .hero-cheio .wrap {
    gap: var(--s7);
  }

  .hero-cheio .hero-copy {
    gap: var(--s4);
  }

  /* No celular a frase da pílula quebra em duas linhas: a altura passa
     a ser mínima, não fixa, senão o texto vaza da pastilha. */
  .hero-selo {
    height: auto;
    min-height: var(--selo-h);
    padding-block: 5px;
  }

  .selo-texto {
    line-height: 1.3;
  }

  .grid-4,
  .radar-grid {
    grid-template-columns: 1fr;
  }

  .cta-fixa {
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--e-lg);
  }

  .cta-fixa .cta-unica {
    width: 100%;
  }

  body:has(.cta-fixa) {
    padding-bottom: 92px;
  }

  .wrap {
    width: min(1160px, 100% - var(--s5));
  }

  .nav-cta {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .grid-3,
  .grid-2,
  .field-row,
  .niveis-par,
  .planos-par,
  .destaque-grade {
    grid-template-columns: 1fr;
  }

  .destaque-numeros {
    grid-template-columns: repeat(2, 1fr);
  }

  /* O botão é `white-space: nowrap` por padrão. Com a Verdana, que é
     larga, um rótulo longo ("Não renovei ainda, preciso de ajuda")
     passa a definir sozinho a largura mínima da página e estoura a
     viewport do celular. Aqui, e só aqui, todo botão pode quebrar. */
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding-block: var(--s2);
  }

  /* O aparelho encolhe para o título aparecer sem rolagem. */
  .device {
    width: min(266px, 70vw);
  }

  .footer .cols {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .free-plan {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .free-tiers {
    justify-content: center;
  }

  .timeline li {
    gap: var(--s3);
  }

  .hero-proof {
    gap: var(--s4) var(--s6);
  }

  /* Em coluna única a escada perde a metáfora de altura: as barras
     viram faixas iguais e o aparelho segue sendo o assunto de cada
     uma. Melhor perder a metáfora do que espremer quatro barras de
     alturas diferentes num celular. */
  .escada {
    grid-template-columns: 1fr;
    row-gap: var(--s5);
  }

  .degrau[data-faixa="bronze"] .degrau-barra,
  .degrau[data-faixa="prata"] .degrau-barra,
  .degrau[data-faixa="ouro"] .degrau-barra,
  .degrau[data-faixa="platina"] .degrau-barra {
    height: 84px;
    border-radius: var(--r-md);
    border-bottom-width: 1px;
  }

  .degrau-barra::after {
    display: none;
  }

  .relacao-provas,
  .historia-ain {
    grid-template-columns: repeat(2, 1fr);
  }

  .premios-acao {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}