/* ============================================================
   AUDITPharma, auditoria do Farmácia Popular com IA
   Folha única de estilo. Todo token vive no :root.
   Mobile-first: base escrita para 360px, media queries só somam.
   Breakpoints: 48rem, 62rem, 75rem.
   ============================================================ */

:root {
  /* ---------- Azul e verde, cores da logomarca AUDITPharma ---------- */
  --azul: #1337aa;
  --azul-escuro: #0f2264;
  --azul-medio: #4359a1;
  --azul-claro: #6bb9e6;
  --azul-palido: #eef3fd;

  /* Navy dominante, derivado de #1337aa escurecido. É a base de tensão da
     página: alto ticket, cliente em crise, prazo correndo. */
  --navy-noite: #04081f;
  --navy: #08103a;
  --navy-medio: #0d1a5c;

  /* Superfícies translúcidas sobre fundo escuro. Cor sólida sobre navy
     achata; a chapa translúcida mantém profundidade. */
  --chapa: rgb(255 255 255 / 8%);
  --chapa-forte: rgb(255 255 255 / 14%);
  --fio: rgb(255 255 255 / 16%);
  --fio-forte: rgb(255 255 255 / 28%);
  --linha: #d7dff2;

  --verde: #88c032;
  --verde-escuro: #4f8a22;
  --verde-palido: #f0f8e6;
  --verde-agua: #70c7de;

  /* ---------- Família do vermelho, risco e Programa ---------- */
  --vermelho: #ff0b05;
  --vermelho-fp: #ff0000;
  --vermelho-vivo: #e00b05;
  --vermelho-texto: #c40a04;
  --vermelho-tinta: #8d0703;
  --vermelho-noite: #4a0302;
  --vermelho-suave: #ffd9d7;
  --vermelho-palido: #fff0ef;

  /* ---------- Selo Farmácia Popular ---------- */
  --fp-amarelo: #fdce04;
  --fp-verde: #00ce02;
  --fp-azul: #263877;
  --fp-azul-claro: #14b8ff;
  --fp-laranja: #faa61d;
  --amarelo: #fdce04;
  --amarelo-fundo: #fff8e0;

  /* ---------- WhatsApp, sinal de conversa ---------- */
  --verde-zap: #118355;
  --verde-zap-fundo: #0a5c3c;

  --branco: #fff;
  --texto: #16204a;
  --texto-fraco: #55608c;
  --sobre-escuro: #eaf0ff;
  --sobre-escuro-fraco: #a9bbe8;

  /* ---------- Espaço, em rem ---------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2.5rem;
  --e6: 4rem;

  /* ---------- Raio e sombra ---------- */
  --radius: 0.75rem;
  --radius-sm: 0.375rem;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(15 34 100 / 8%), 0 10px 30px rgb(15 34 100 / 8%);
  --shadow-alto: 0 2px 6px rgb(15 34 100 / 12%), 0 18px 48px rgb(15 34 100 / 16%);

  /* ============================================================
     SISTEMA AUDITPHARMA, fase 1

     Estrutura herdada da EternaCloud (badge pill, h2 em duas linhas,
     cards simétricos, sombra tingida, escala fluida). Paleta herdada
     da PRÓPRIA logomarca, não das referências de terceiros.

     Amostragem de pixel do auditpharma-logo.png:
       verde #84C030 .... 57,3% da arte
       azul  #0C30A8 .... 42,0% da arte
     O verde é a cor DOMINANTE da marca. Por isso ele é o acento, e
     não o azul que eu havia proposto antes.

     Contraste medido, e é o que define a regra de uso:
       verde sobre a tinta escura .... 7,5:1   aprovado
       verde sobre branco ............ 2,2:1   reprovado
     Daí existir o --verde-tinta: o mesmo verde escurecido, 5,1:1,
     para quando ele precisar carregar texto sobre fundo claro.

     Nenhum degradê carrega texto. Degradê só em superfície.
     ============================================================ */

  --tinta: #0c1b4a; /* navy derivado do azul da logo */
  --tinta-media: #16255e; /* superfície de cartão */
  --azul-marca: #0c30a8; /* azul exato da logo · 10,4:1 no branco */
  --verde-marca: #84c030; /* verde exato da logo · acento em fundo escuro */
  --verde-tinta: #4f7a14; /* o mesmo verde para texto no branco · 5,1:1 */
  --apoio: #8a93b8; /* subtítulos */
  --apagado: #7c86a8; /* texto das dores, fraco de propósito */
  --chapa-clara: #f7f8fb; /* fundo de badge em banda clara */
  --risco: #c40a04; /* SÓ prazo e penalidade */

  --r-card: 18px;
  --r-chip: 20px;
  --sombra-card: 0 3px 9px rgb(63 74 126 / 6%), 0 1px 29px rgb(63 74 126 / 10%);

  /* Verdana, o padrão da casa (decisão D9). É fonte do sistema: nenhum
     pedido a terceiro, e por isso nenhum IP de visitante sai da página
     antes do primeiro texto. Geneva cobre o macOS antigo e DejaVu Sans o
     Linux. Número usa tabular-nums. */
  --fonte: Verdana, Geneva, "DejaVu Sans", sans-serif;

  /* ---------- Letra, Verdana em dois pesos ----------
     Mantida como fallback e para as seções ainda não redesenhadas. */
  --font: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --texto-peso: 400;
  --forte: 700;

  --largura: 75rem;
  --t: 0.32s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   RESET
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: var(--texto-peso);
  line-height: 1.6;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--azul);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   ESTRUTURA
   ============================================================ */

main > section,
.rodape {
  padding-block: var(--e5);
  padding-inline: var(--e3);
}

main > section > *,
.rodape > * {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
}

/* ---------- Tipografia da página ---------- */

h2 {
  font-size: clamp(1.375rem, 5.5vw, 2.25rem);
  font-weight: var(--forte);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--azul-escuro);
}

h3 {
  font-size: 1.0625rem;
  font-weight: var(--forte);
  line-height: 1.25;
  color: var(--azul-escuro);
}

h4 {
  font-size: 0.9375rem;
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 3rem;
  padding: var(--e2) var(--e4);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: var(--forte);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}

/* O botão tem chão. A sombra sólida deslocada abaixo dele dá espessura
   física, e o hover levanta a peça mantendo o chão, mais um brilho na
   própria cor. O active afunda. É o que separa botão de retângulo. */

/* AÇÃO 4: um único CTA primário na página inteira. Verde de acento,
   texto navy, chão sólido de três estados. Tudo o mais é fantasma. */

.btn--primario {
  background: var(--verde);
  color: var(--navy-noite);
  box-shadow: 0 4px 0 var(--verde-escuro);
}

.btn--primario:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--verde-escuro),
    0 12px 28px rgb(136 192 50 / 42%);
}

.btn--primario:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--verde-escuro);
}

.btn--grande {
  min-height: 3.5rem;
  padding-inline: var(--e5);
  font-size: 1.0625rem;
}

/* Fantasma: peso visivelmente menor, nunca preenchido. Ele se adapta
   ao fundo em que cai. */
.btn--fantasma {
  background: transparent;
  border-color: var(--linha);
  color: var(--azul-escuro);
}

.btn--fantasma:hover {
  border-color: var(--azul);
  color: var(--azul);
}

.banda-escura .btn--fantasma {
  background: var(--chapa);
  border-color: var(--fio-forte);
  color: var(--branco);
  backdrop-filter: blur(6px);
}

.banda-escura .btn--fantasma:hover {
  background: var(--chapa-forte);
  border-color: var(--branco);
  color: var(--branco);
}

/* ============================================================
   01 TOPO E MENU
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--t) var(--ease);
  border-bottom: 1px solid var(--linha);
}

.topo__marca { display: block; flex: 0 0 auto; }

.topo__marca img {
  width: auto;
  height: 1.75rem;
}

.topo__toggle {
  margin-left: auto;
  min-height: 2.75rem;
  padding: var(--e2) var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: var(--forte);
  color: var(--azul-escuro);
  cursor: pointer;
}

.topo__nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: var(--e1);
  padding-block: var(--e2);
}

.topo__nav[data-aberto="true"] { display: flex; }

.topo__nav a {
  padding: var(--e2) 0;
  font-size: 0.875rem;
  font-weight: var(--forte);
  color: var(--azul-escuro);
  text-decoration: none;
}

.topo__nav a {
  transition: color var(--t) var(--ease);
}

.topo__nav a:hover { color: var(--azul); }

.topo__cta {
  align-self: flex-start;
  padding: var(--e2) var(--e3);
  background: var(--verde-zap);
  color: var(--branco);
  border-radius: var(--radius-pill);
}

.topo__cta:hover { background: var(--verde-zap-fundo); color: var(--branco); }

/* ============================================================
   02 HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--e5) var(--e6);
}

/* Marca d'água: o símbolo cresce fora do canto, em opacidade baixa.
   Decoração pura, fora da árvore de acessibilidade. */
.hero::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -10rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(136 192 50 / 14%), transparent 62%);
  pointer-events: none;
}

.hero__grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e5);
}

.hero__copia {
  display: grid;
  gap: var(--e3);
  justify-items: start;
}

/* O logotipo deixou de ser arte central: vira lockup contido, alinhado
   ao texto, no tamanho de uma assinatura. */
/* Chapa clara atrás do lockup, usada só no rodapé. O azul #1337aa da
   marca sobre o navy #08103a fica em torno de 1,6:1, ilegível: a chapa
   é o que resolve sem tocar no PNG. No hero o logotipo saiu do corpo,
   como nas duas referências, e a manchete carrega a dobra. */
.chapa-marca {
  display: inline-block;
  padding: var(--e2) var(--e3);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 30%);
}

.hero__aviso {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3) var(--e1) var(--e1);
  border: 1px solid var(--vermelho-vivo);
  border-radius: var(--radius-pill);
  background: rgb(255 11 5 / 12%);
  font-size: 0.8125rem;
  color: var(--sobre-escuro);
}

.hero__aviso b {
  padding: 2px var(--e2);
  border-radius: var(--radius-pill);
  background: var(--vermelho-vivo);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__promessa {
  font-size: clamp(1.75rem, 6.4vw, 3rem);
  font-weight: var(--forte);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--branco);
  text-wrap: balance;
}

/* A palavra-chave em acento, o padrão das duas referências. */
.acento { color: var(--verde); }

.hero__apoio {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sobre-escuro);
}

.hero__acoes {
  display: grid;
  gap: var(--e2);
  width: 100%;
}

.hero__prova {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3) var(--e2) var(--e2);
  background: var(--chapa);
  border: 1px solid var(--fio);
  border-radius: var(--radius);
}

.hero__prova img { width: 3.25rem; height: auto; }

.hero__prova p {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sobre-escuro);
}

.hero__prova b { color: var(--branco); font-weight: var(--forte); }

/* ---------- Prova visual: linha do tempo da auditoria ---------- */

.linha-tempo {
  padding: var(--e4);
  background: var(--chapa);
  border: 1px solid var(--fio);
  border-radius: var(--radius);
  box-shadow: var(--shadow-alto);
  backdrop-filter: blur(6px);
}

.linha-tempo__titulo {
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--fio);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}

.linha-tempo__lista {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e4);
}

/* O fio vertical liga os marcos, e o ponto de cada um pousa em cima
   dele. Um pseudo-elemento para o fio, outro para o ponto. */
.marco {
  position: relative;
  padding-left: var(--e5);
}

.marco::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 1.1rem;
  bottom: calc(var(--e4) * -1);
  width: 2px;
  background: var(--fio);
}

.marco:last-child::before { display: none; }

.marco::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--sobre-escuro-fraco);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 8%);
}

.marco--feito::after { background: var(--sobre-escuro-fraco); }
.marco--prazo::after { background: var(--vermelho-vivo); box-shadow: 0 0 0 4px rgb(255 11 5 / 22%); }
.marco--analise::after { background: var(--verde); box-shadow: 0 0 0 4px rgb(136 192 50 / 24%); }
.marco--envio::after { background: var(--branco); box-shadow: 0 0 0 4px rgb(255 255 255 / 18%); }

/* O quinto marco é diferencial competitivo, não etapa acessória: ele
   ganha chapa própria, contorno verde e um selo. A leitura precisa
   registrar que o trabalho continua DEPOIS do envio. */
.marco--segunda {
  margin-top: var(--e2);
  padding: var(--e3) var(--e3) var(--e3) var(--e5);
  border-radius: var(--radius);
  background: rgb(136 192 50 / 12%);
  box-shadow: inset 0 0 0 1px rgb(136 192 50 / 45%);
}

.marco--segunda::before { display: none; }

.marco--segunda::after {
  left: var(--e3);
  top: 1.1rem;
  background: var(--verde);
  box-shadow: 0 0 0 5px rgb(136 192 50 / 26%);
}

.marco--segunda .marco__rotulo { color: var(--verde); }

.marco__selo {
  display: inline-block;
  margin-top: var(--e2);
  padding: 2px var(--e2);
  border-radius: var(--radius-pill);
  background: var(--verde);
  color: var(--navy-noite);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.marco__rotulo {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-escuro-fraco);
}

.marco--prazo .marco__rotulo { color: var(--vermelho-suave); }
.marco--analise .marco__rotulo { color: var(--verde); }

.marco__nome {
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: var(--forte);
  line-height: 1.3;
  color: var(--branco);
}

.marco--feito .marco__nome { color: var(--sobre-escuro-fraco); }

/* A barra do prazo é a única peça animada da página: ela existe para
   dizer que o tempo já começou a andar. */
.marco__barra {
  height: var(--e1);
  margin-top: var(--e2);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 12%);
  overflow: hidden;
}

.marco__barra span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--vermelho-vivo), var(--vermelho-fp));
}

.marco__nota {
  margin-top: var(--e2);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--sobre-escuro-fraco);
}

.marco__camadas {
  display: grid;
  gap: var(--e1);
  margin-top: var(--e2);
  font-size: 0.8125rem;
  color: var(--sobre-escuro);
}

.marco__n {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-right: var(--e2);
  border-radius: 50%;
  background: rgb(136 192 50 / 18%);
  font-size: 0.75rem;
  font-weight: var(--forte);
  color: var(--verde);
}

/* ============================================================
   BARRA DE CREDIBILIDADE
   ============================================================ */

.credibilidade { padding-block: var(--e4); }

.credibilidade__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e4) var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--fio);
}

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

.metrica__ico {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  margin-bottom: var(--e1);
  border-radius: var(--radius-sm);
  background: var(--chapa);
  border: 1px solid var(--fio);
  color: var(--verde);
}

.metrica__numero {
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: var(--forte);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
}

.metrica__rotulo {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--sobre-escuro-fraco);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (min-width: 48rem) {
  main > section,
  .rodape { padding-block: var(--e6); padding-inline: var(--e4); }

  .topo { padding-inline: var(--e4); }
  .topo__marca img { height: 2.25rem; }
  .topo__toggle { display: none; }

  .topo__nav {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--e4);
    margin-left: auto;
    padding-block: 0;
  }

  .topo__cta { align-self: auto; }

  .hero__acoes {
    grid-auto-flow: column;
    justify-content: start;
    width: auto;
  }

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

@media (min-width: 62rem) {
  .topo__marca img { height: 2.5rem; }
  .hero { padding-block: var(--e6); }

  /* Duas colunas assimétricas, o padrão da referência. */
  .hero__grade {
    grid-template-columns: 1.12fr 0.88fr;
    align-items: center;
    gap: var(--e6);
  }

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

  /* O COMPLETO ocupa mais área de coluna que o CONTROLE. */
  .painel__contraste { grid-template-columns: 0.72fr 1.28fr; align-items: start; }
  .painel__grade--04 { grid-template-columns: repeat(2, 1fr); max-width: 8rem; }
  .painel__grade--17 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 75rem) {
  .hero__grade { gap: calc(var(--e6) * 1.5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================
   RITMO DE BANDAS

   Alternância escura e clara ao longo da página. A banda escura
   redefine as cores de texto de uma vez, para os componentes
   funcionarem nos dois fundos sem reescrita.
   ============================================================ */

.banda-escura {
  background:
    radial-gradient(34rem 24rem at 88% 0%, rgb(136 192 50 / 12%), transparent 62%),
    radial-gradient(30rem 22rem at 4% 100%, rgb(19 55 170 / 34%), transparent 60%),
    linear-gradient(158deg, var(--navy) 0%, var(--navy-noite) 100%);
  color: var(--sobre-escuro);
}

.banda-escura h2,
.banda-escura h3,
.banda-escura h4 { color: var(--branco); }

.banda-escura .secao__lead,
.banda-escura p { color: var(--sobre-escuro); }

.banda-escura .olho { color: var(--verde); }

.banda-clara { background: var(--branco); }

/* ============================================================
   PADRÕES DE SEÇÃO
   ============================================================ */

/* Rótulo de seção: o filete curto antes do texto é o que transforma
   uma linha de caption em elemento de identidade. */

.olho {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul);
}

.olho::before {
  content: "";
  width: var(--e4);
  height: 2px;
  background: var(--verde);
}

.secao__lead {
  max-width: 46rem;
  margin-top: var(--e3);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto-fraco);
}

.cartao {
  padding: var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   03 PROVA
   ============================================================ */

.prova { background: linear-gradient(180deg, var(--azul-palido) 0%, var(--branco) 100%); }

.prova__numeros {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.prova__item {
  padding: var(--e4);
  background: var(--branco);
  border-radius: var(--radius);
  border-top: var(--e1) solid var(--azul);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.prova__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-alto);
}

.prova__item:nth-child(2) { border-top-color: var(--verde); }
.prova__item:nth-child(3) { border-top-color: var(--vermelho-vivo); }

.prova__numero {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: var(--forte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--azul);
}

.prova__legenda {
  margin-top: var(--e2);
  font-size: 0.875rem;
  color: var(--texto-fraco);
}

/* ============================================================
   03b PORTARIA, REGIME REVOGADO E REGIME VIGENTE
   ============================================================ */

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

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

/* A tarja de vigência para quem está rolando: a data é a informação
   mais acionável do bloco. */
.vigencia {
  align-self: start;
  padding: var(--e3) var(--e4);
  border-radius: var(--radius);
  background: var(--vermelho-palido);
  box-shadow: inset var(--e1) 0 0 var(--vermelho-vivo);
}

.vigencia__topo {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermelho-texto);
}

.vigencia__data {
  font-size: 1.75rem;
  font-weight: var(--forte);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--vermelho-tinta);
}

.vigencia__pe {
  margin-top: var(--e2);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--texto-fraco);
}

/* O aviso de arraste só existe onde o quadro realmente não cabe. */
.dica-arrastar {
  margin-top: var(--e4);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.regime-quadro {
  margin-top: var(--e2);
  overflow-x: auto;
}

.regime {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0 var(--e2);
  font-size: 0.875rem;
}

.regime th,
.regime td {
  padding: var(--e3);
  text-align: left;
  vertical-align: top;
  background: var(--branco);
}

.regime thead th {
  padding-block: 0 var(--e2);
  background: transparent;
}

.regime tbody th {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

.regime tbody td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.regime tbody tr { box-shadow: var(--shadow-card); }

/* As linhas que pesam no bolso ganham fundo e filete, no padrão da
   referência: `inset` empilhado com a sombra do cartão. */
.regime tbody .linha-forte th,
.regime tbody .linha-forte td { background: var(--vermelho-palido); }

.regime tbody .linha-forte { box-shadow: inset 3px 0 0 var(--vermelho-vivo), var(--shadow-card); }

.col-antes { color: var(--texto-fraco); }
.col-agora b { color: var(--vermelho-tinta); }

.chapa {
  display: inline-block;
  padding: 3px var(--e2);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chapa--antes { background: var(--linha); color: var(--texto-fraco); }
.chapa--agora { background: var(--vermelho-vivo); color: var(--branco); }

.chapa__data {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: var(--texto-peso);
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-fraco);
}

.regime__artigo {
  display: block;
  margin-top: var(--e1);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
}

/* O Radar entra como prova de autoridade, não como oferta: escala
   pequena, ao pé da seção normativa, sem CTA. */
.radar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  background: var(--azul-palido);
}

.radar img { width: 4.5rem; height: auto; flex: none; }

.radar__titulo {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul);
}

.radar__texto {
  margin-top: var(--e1);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.portaria__ressalva {
  margin-top: var(--e4);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* ============================================================
   04 RISCO, QUATRO ESTÁGIOS
   ============================================================ */

/* A banda mais grave da página. Vermelho noite, não vermelho pálido:
   é o único lugar em que o vermelho ocupa área grande. */
.banda-risco {
  background:
    radial-gradient(30rem 22rem at 88% -20%, rgb(255 0 0 / 26%), transparent 62%),
    linear-gradient(160deg, var(--vermelho-noite) 0%, #6d0604 58%, var(--vermelho-tinta) 100%);
  color: var(--vermelho-suave);
}
.risco h2 { color: var(--branco); }

.risco__intro {
  max-width: 46rem;
  margin-top: var(--e3);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--vermelho-suave);
}

.risco__faixa {
  height: var(--e1);
  margin-block: var(--e5) 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgb(255 217 215 / 30%), var(--vermelho-vivo), var(--fp-amarelo));
}

/* O filete lateral é `inset` na própria sombra, empilhado com a sombra
   do cartão. Assim ele acompanha o raio da caixa e não briga com o
   padding, o que uma borda faria. */
.estagio {
  position: relative;
  margin-top: var(--e3);
  padding: var(--e4);
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius);
  box-shadow: inset var(--e1) 0 0 var(--vermelho-vivo);
  backdrop-filter: blur(4px);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.estagio:hover {
  transform: translateY(-3px);
  background: rgb(255 255 255 / 11%);
  box-shadow: inset var(--e1) 0 0 var(--vermelho-vivo);
}

.estagio--2 { box-shadow: inset var(--e1) 0 0 var(--fp-laranja); }
.estagio--3 { box-shadow: inset var(--e1) 0 0 var(--fp-amarelo); }
.estagio--4 { box-shadow: inset var(--e1) 0 0 var(--branco); }

.estagio--2:hover { box-shadow: inset var(--e1) 0 0 var(--fp-laranja); }
.estagio--3:hover { box-shadow: inset var(--e1) 0 0 var(--fp-amarelo); }
.estagio--4:hover { box-shadow: inset var(--e1) 0 0 var(--branco); }

.estagio__ordem {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-amarelo);
}

.estagio h3 { margin-top: var(--e1); color: var(--branco); }

.estagio__texto {
  margin-top: var(--e2);
  font-size: 0.9375rem;
  color: var(--vermelho-suave);
}

/* O degrau cresce a cada estágio, a multa também. */
.estagio__degrau {
  height: var(--e2);
  margin-top: var(--e3);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 12%);
}

.estagio--1 .estagio__degrau { width: 25%; background: var(--vermelho-vivo); }
.estagio--2 .estagio__degrau { width: 50%; background: var(--fp-laranja); }
.estagio--3 .estagio__degrau { width: 75%; background: var(--fp-amarelo); }
.estagio--4 .estagio__degrau { width: 100%; background: var(--branco); }

.risco__saida {
  margin-top: var(--e5);
  font-size: 1rem;
  font-weight: var(--forte);
  color: var(--branco);
}

/* ============================================================
   05 CAMADAS
   ============================================================ */

.camada {
  margin-top: var(--e3);
  padding: var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.camada:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--azul) 40%, transparent);
  box-shadow: var(--shadow-card);
}

.camada:first-of-type { margin-top: var(--e5); }

.camada__ordem {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-escuro);
}

.camada h3 { margin-block: var(--e1) var(--e2); }
.camada p:last-child { font-size: 0.9375rem; color: var(--texto-fraco); }

.camada--ia { border-top: var(--e1) solid var(--azul); }
.camada--pleno { border-top: var(--e1) solid var(--verde); }
.camada--senior { border-top: var(--e1) solid var(--azul-escuro); }

/* ---------- Etapas anteriores às camadas ---------- */

.etapas {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e4);
  counter-reset: etapa;
}

.etapa {
  position: relative;
  padding: var(--e3) var(--e3) var(--e3) var(--e6);
  background: var(--branco);
  border-radius: var(--radius-sm);
  box-shadow: inset var(--e1) 0 0 var(--verde);
  font-size: 0.875rem;
  color: var(--texto-fraco);
  counter-increment: etapa;
}

.etapa strong { color: var(--azul-escuro); }

.etapa::before {
  content: counter(etapa, decimal-leading-zero);
  position: absolute;
  left: var(--e4);
  top: var(--e3);
  font-size: 0.875rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--verde-escuro) 60%, transparent);
}

/* ---------- Telas do aplicativo, prova visual da camada 1 ---------- */

.telas {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e4);
}

.tela { display: grid; justify-items: center; }

/* A moldura é a técnica da referência: borda grossa na cor da marca,
   raio grande e sombra alta. A largura é fixa no pai, para a caixa
   medir igual antes e depois de a imagem chegar. */
.tela__fone { width: 13rem; max-width: 100%; }

.tela__fone img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  border: 5px solid var(--azul-escuro);
  background: var(--branco);
  box-shadow: var(--shadow-alto);
}

.tela__legenda {
  margin-top: var(--e3);
  max-width: 22ch;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  color: var(--texto-fraco);
}

/* ============================================================
   06 INCLUÍDO
   ============================================================ */

.incluido { background: linear-gradient(180deg, var(--verde-palido) 0%, var(--branco) 100%); }

.incluido__lista {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e5);
}

.incluido__lista li {
  position: relative;
  padding: var(--e3) var(--e3) var(--e3) var(--e5);
  background: var(--branco);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.incluido__lista li::before {
  content: "";
  position: absolute;
  left: var(--e3);
  top: 1.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--verde);
}

/* ============================================================
   07 COMPARATIVO
   ============================================================ */

.comparativo__rolagem {
  margin-top: var(--e5);
  overflow-x: auto;
}

.comparativo__tabela {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comparativo__tabela th,
.comparativo__tabela td {
  padding: var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--fio);
}

.comparativo__tabela thead th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-escuro-fraco);
}

.comparativo__tabela tbody th { font-weight: var(--texto-peso); }
.comparativo__tabela td { text-align: center; font-weight: var(--forte); }
.comparativo__tabela .sim { color: var(--verde); }
.comparativo__tabela .nao { color: var(--sobre-escuro-fraco); }

/* ============================================================
   08 CLIENTES
   ============================================================ */

.clientes { background: var(--azul-palido); }

.depoimento {
  position: relative;
  margin-top: var(--e3);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.depoimento:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-alto);
}

/* A aspa de abertura em corpo grande, atrás do texto, é decoração
   pura: `aria-hidden` não é necessário porque pseudo-elemento não
   entra na árvore de acessibilidade. */
.depoimento::before {
  content: "\201C";
  position: absolute;
  top: var(--e2);
  left: var(--e4);
  font-size: 4rem;
  line-height: 1;
  font-weight: var(--forte);
  color: color-mix(in srgb, var(--azul) 18%, transparent);
}

.depoimento:first-of-type { margin-top: var(--e5); }

.depoimento blockquote p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
}

.depoimento blockquote p::before { content: "\201C"; }
.depoimento blockquote p::after { content: "\201D"; }

.depoimento figcaption {
  margin-top: var(--e3);
  font-size: 0.8125rem;
  font-weight: var(--forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

/* ============================================================
   09 PAINÉIS
   ============================================================ */

/* AÇÃO 5: o salto de 04 para 17 precisa ser VISTO antes de lido. O bloco
   do COMPLETO ocupa mais colunas, e cada painel é um quadrado desenhado:
   quatro quadrados contra dezessete, na mesma escala. */
.painel__prova {
  margin-top: var(--e5);
}

.painel__prova img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--fio);
  box-shadow: var(--shadow-alto);
}

.painel__prova figcaption {
  margin-top: var(--e2);
  font-size: 0.8125rem;
  color: var(--sobre-escuro-fraco);
}

.painel__contraste {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.painel__lado {
  padding: var(--e4);
  border-radius: var(--radius);
}

.painel__lado--controle {
  background: var(--chapa);
  border: 1px solid var(--fio);
}

.painel__lado--completo {
  background:
    radial-gradient(20rem 14rem at 92% 0%, rgb(136 192 50 / 24%), transparent 62%),
    var(--chapa-forte);
  border: 1px solid var(--verde);
  box-shadow: var(--shadow-alto);
}

.painel__plano {
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sobre-escuro-fraco);
}

.painel__lado--completo .painel__plano { color: var(--verde); }

.painel__numero {
  font-size: clamp(2.5rem, 12vw, 4rem);
  font-weight: var(--forte);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}

.painel__lado--completo .painel__numero { color: var(--verde); }

.painel__grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e1);
  margin-block: var(--e3);
}

.painel__grade i {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: rgb(255 255 255 / 16%);
}

.painel__grade--17 i { background: var(--verde); }

.painel__legenda {
  font-size: 0.875rem;
  color: var(--sobre-escuro-fraco);
}

/* ============================================================
   10 PLANOS
   ============================================================ */

.planos { background: var(--azul-palido); }

.planos__cards {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.plano {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.plano {
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.plano:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-alto);
}

.plano--completo {
  border-color: var(--verde);
  box-shadow:
    inset 0 var(--e1) 0 var(--verde),
    var(--shadow-alto);
}

.plano--completo:hover {
  box-shadow:
    inset 0 var(--e1) 0 var(--verde),
    0 4px 10px rgb(15 34 100 / 14%),
    0 24px 60px rgb(15 34 100 / 20%);
}

.plano__mensal {
  padding: var(--e2) var(--e3);
  border-radius: var(--radius-sm);
  background: var(--azul-palido);
  font-size: 0.8125rem;
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

.plano__subitens {
  display: grid;
  gap: var(--e1);
  margin-top: var(--e2);
  padding-left: var(--e3);
  font-size: 0.875rem;
  color: var(--texto-fraco);
}

.plano__subitens li { position: relative; padding-left: var(--e3); }

.plano__subitens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: var(--e2);
  height: 2px;
  border-radius: 0;
  background: var(--azul-medio);
}

.plano__selo {
  align-self: flex-start;
  padding: var(--e1) var(--e3);
  border-radius: var(--radius-pill);
  background: var(--verde);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plano h3 { font-size: 1.375rem; letter-spacing: 0.06em; }

.plano__resumo { font-size: 0.9375rem; color: var(--texto-fraco); }

.plano__itens { display: grid; gap: var(--e2); font-size: 0.9375rem; }

.plano__itens li {
  position: relative;
  padding-left: var(--e4);
}

.plano__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--verde);
}

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

/* ---------- Condições comerciais, sem valor ---------- */

.planos__condicoes {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e5) var(--e4);
  background: var(--branco);
  border: 2px dashed var(--azul);
  border-radius: var(--radius);
  text-align: center;
}

.planos__condicoes h3 { font-size: 1.125rem; }

.planos__condicoes-lista {
  display: grid;
  gap: var(--e2);
  max-width: 44rem;
  font-size: 0.9375rem;
  color: var(--texto-fraco);
}

/* ============================================================
   11 OBJEÇÕES
   ============================================================ */

.objecoes { counter-reset: objecao; }

.objecao {
  position: relative;
  margin-top: var(--e3);
  padding: var(--e4) var(--e6) var(--e4) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-top: var(--e1) solid var(--azul);
  border-radius: var(--radius);
  counter-increment: objecao;
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.objecao:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* O numeral herda a cor da própria borda do cartão, a 45%, e não a
   22%: em cartão claro o numeral sumia. */
.objecao::before {
  content: counter(objecao, decimal-leading-zero);
  position: absolute;
  top: var(--e3);
  right: var(--e4);
  font-size: 2rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--azul) 45%, transparent);
}

.objecao:nth-child(3) { border-top-color: var(--verde); }
.objecao:nth-child(3)::before { color: color-mix(in srgb, var(--verde-escuro) 45%, transparent); }
.objecao:nth-child(4) { border-top-color: var(--vermelho-vivo); }
.objecao:nth-child(4)::before { color: color-mix(in srgb, var(--vermelho-texto) 45%, transparent); }

.objecao:first-of-type { margin-top: var(--e5); }
.objecao h3 { color: var(--azul-escuro); }
.objecao p { margin-top: var(--e2); font-size: 0.9375rem; color: var(--texto-fraco); }

/* ============================================================
   12 FAQ
   ============================================================ */

.faq { background: var(--azul-palido); }

.faq__item {
  margin-top: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--branco);
  border-radius: var(--radius-sm);
}

.faq__item:first-of-type { margin-top: var(--e5); }

.faq__item {
  transition: box-shadow var(--t) var(--ease);
}

.faq__item:hover { box-shadow: var(--shadow-card); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  font-size: 0.9375rem;
  font-weight: var(--forte);
  color: var(--azul-escuro);
  cursor: pointer;
  list-style: none;
}

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

/* O sinal gira em vez de trocar de glifo: um elemento só, uma
   transição só, e nenhum salto de layout. */
.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--azul);
  transition: rotate var(--t) var(--ease);
}

.faq__item[open] summary::after { rotate: 45deg; }

.faq__item p { margin-top: var(--e2); font-size: 0.9375rem; color: var(--texto-fraco); }

/* ============================================================
   13 FALAR E 14 CTA FINAL
   ============================================================ */

.falar { text-align: center; }
.falar p { margin-block: var(--e3) var(--e4); color: var(--sobre-escuro); }
.falar .btn { display: inline-flex; }

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

.cta-final h2 {
  max-width: 46rem;
  color: var(--branco);
  text-wrap: balance;
}

.cta-final__acoes {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e4);
}


/* ============================================================
   15 RODAPÉ E BOTÃO FLUTUANTE
   ============================================================ */

.rodape { text-align: left; }

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

.rodape__marca { display: grid; gap: var(--e3); justify-items: start; }

.rodape__marca .chapa-marca img { width: 11rem; height: auto; }

.rodape__slogan {
  font-size: 1.0625rem;
  font-weight: var(--forte);
  line-height: 1.25;
  color: var(--branco);
}

.rodape__sobre {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sobre-escuro-fraco);
  max-width: 34ch;
}

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

.selo img { height: 4.875rem; width: auto; }

.selo span {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--sobre-escuro-fraco);
  max-width: 30ch;
}

.rodape__coluna h3 {
  margin-bottom: var(--e3);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sobre-escuro-fraco);
}

.rodape__coluna li {
  margin-bottom: var(--e2);
  font-size: 0.875rem;
  color: var(--sobre-escuro-fraco);
}

.rodape__coluna a {
  color: var(--sobre-escuro);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.rodape__coluna a:hover { color: var(--verde); text-decoration: underline; }

.em-breve b {
  margin-left: var(--e2);
  padding: 2px var(--e2);
  border-radius: var(--radius-pill);
  background: var(--chapa);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-escuro-fraco);
}

.rodape__assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--fio);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--sobre-escuro-fraco);
}

.rodape__assinatura span:last-child { max-width: 52ch; }

/* ---------- O botão que fica ---------- */

.zap-fixo {
  position: fixed;
  right: var(--e3);
  bottom: var(--e3);
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3);
  border-radius: var(--radius-pill);
  background: var(--verde-zap);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: var(--forte);
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(4 8 31 / 34%);
  transition: transform var(--t) var(--ease);
}

.zap-fixo:hover { transform: translateY(-2px); color: var(--branco); }

.zap-fixo svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentcolor;
  flex: none;
}

.zap-fixo span { display: none; }

@media print { .zap-fixo { display: none; } }

/* ============================================================
   BREAKPOINTS DAS SEÇÕES
   ============================================================ */

@media (min-width: 48rem) {
  .prova__numeros { grid-template-columns: repeat(3, 1fr); }
  .incluido__lista { grid-template-columns: repeat(2, 1fr); }
  .planos__cards { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .cta-final__acoes { grid-auto-flow: column; justify-content: center; }
  .portaria__topo { grid-template-columns: 1.5fr 0.9fr; align-items: start; gap: var(--e5); }
  .telas { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .zap-fixo span { display: inline; }
  .rodape__grade { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--e5); }
  .estagio { padding: var(--e5); }
}

@media (min-width: 62rem) {
  .camadas, .clientes { max-width: var(--largura); margin-inline: auto; }
  .camadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
  /* Aqui havia um bloco duplicado de comentário e regra colado NO MEIO
     deste seletor. O resultado era `.camadas h2, .camadas .olho` recebendo
     o estilo de rótulo: em telas de 62rem para cima o título da seção
     "Como funciona" renderizava como caption minúsculo em caixa alta, e
     perdia o grid-column que o faz atravessar as três colunas.
     A definição válida de `.olho` continua no topo da folha. */
  .camadas h2,
  .camadas .olho { grid-column: 1 / -1; }

  .secao__lead { grid-column: 1 / -1; }
  .camada, .camada:first-of-type { margin-top: var(--e2); }

  .clientes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
  .clientes h2 { grid-column: 1 / -1; }
  .depoimento, .depoimento:first-of-type { margin-top: var(--e2); }

  .risco__saida { font-size: 1.125rem; }
  .dica-arrastar { display: none; }
}

/* ============================================================
   FASE 1 DO SISTEMA AUDITPHARMA
   Escopo: topo, herói e linha do tempo.

   Tudo vive neste bloco, no fim da folha. Reverter é apagar daqui
   até o fim do arquivo. As demais seções continuam no desenho
   antigo de propósito, até a aprovação das fases 2 e 3.

   Regra que governa o bloco inteiro: o verde da logo é o acento e
   só aparece sobre fundo escuro, onde mede 7,5:1. O vermelho é
   exclusivo de prazo e penalidade. Nenhum degradê carrega texto.
   ============================================================ */

/* ---------- Botões ----------
   O chão sólido de 4px saiu: é a assinatura do botão de SaaS barato.
   Entra pílula com sombra difusa na própria cor, que é o gesto da
   EternaCloud. Peso 600, não 700: o CTA convence, não grita. */

.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.btn--primario {
  background: var(--verde-marca);
  color: var(--tinta);
  box-shadow: 0 10px 26px rgb(132 192 48 / 22%);
}

.btn--primario:hover {
  background: #93cf3c;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgb(132 192 48 / 30%);
}

.btn--primario:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgb(132 192 48 / 20%);
}

/* ---------- Topo: fim da costura ----------
   A barra branca colada no navy criava uma linha de corte reta. O
   topo nasce da mesma tinta do herói e só ganha fio, desfoque e
   elevação depois que a página rola. */

.topo {
  background: var(--tinta);
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}

.topo[data-fixo="true"] {
  background: rgb(12 27 74 / 88%);
  border-bottom-color: rgb(255 255 255 / 14%);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 26%);
}

/* Menu aberto no celular precisa de chapa opaca sob os itens. */
.topo:has(.topo__nav[data-aberto="true"]) {
  background: var(--tinta);
  border-bottom-color: rgb(255 255 255 / 14%);
}

/* O logotipo é azul e verde sobre branco. Com o topo escuro, o azul
   #0C30A8 sobre a tinta cai para cerca de 1,5:1, ilegível, enquanto
   o verde continua legível. Entra knockout monocromático branco, que
   é o padrão de qualquer marca sobre fundo escuro. O certo é receber
   um PNG ou SVG branco oficial; o filtro é a aproximação. */
.topo__marca img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.topo__nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #c3cbe2;
}

.topo__nav a:hover { color: var(--verde-marca); }

.topo__toggle {
  background: transparent;
  border-color: rgb(255 255 255 / 22%);
  border-radius: var(--radius-pill);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* O verde do WhatsApp sobrevive, isolado no único botão de conversa.
   Ele NÃO é o verde da marca: é o sinal que o dono de drogaria
   reconhece, e por isso não pode virar acento. */
.topo__cta {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------- Herói ---------- */

.hero.banda-escura {
  background:
    radial-gradient(40rem 28rem at 84% -8%, rgb(132 192 48 / 9%), transparent 62%),
    radial-gradient(34rem 26rem at 0% 108%, rgb(12 48 168 / 30%), transparent 62%),
    linear-gradient(168deg, #102262 0%, var(--tinta) 66%);
}

/* A marca d'água some: era um halo solto, sem função. */
.hero::after { display: none; }

.hero__copia { gap: var(--e4); }

/* Badge pill, o dispositivo da EternaCloud, adaptado ao fundo escuro.
   Lá ele é chapa clara sobre branco; aqui é chapa translúcida sobre a
   tinta. A etiqueta vermelha dentro dele é o único vermelho do herói. */
.hero__aviso {
  gap: var(--e2);
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 7%);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #dbe2f2;
}

.hero__aviso b {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--risco);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Manchete em duas linhas, a segunda no acento. É a estrutura de h2
   dos dois templates que você aprovou, com o acento SÓLIDO no verde
   da marca em vez do degradê que reprovava em contraste. */
.hero__promessa {
  font-size: clamp(2rem, 5.6vw, 3.5rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--branco);
  font-variation-settings: normal;
}

.hero .acento {
  color: var(--verde-marca);
  font-style: normal;
  font-weight: 600;
  font-variation-settings: normal;
}

.hero__apoio {
  max-width: 34rem;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: #aab3d0;
}

.hero .btn--fantasma {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 22%);
  color: var(--branco);
  backdrop-filter: blur(6px);
}

.hero .btn--fantasma:hover {
  background: rgb(255 255 255 / 12%);
  border-color: var(--verde-marca);
  color: var(--verde-marca);
}

.hero__prova {
  padding: var(--e3);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 5%);
  box-shadow: 0 1px 29px rgb(4 10 34 / 30%);
}

.hero__prova p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #aab3d0;
}

.hero__prova b { font-weight: 600; color: var(--branco); }

/* ---------- Linha do tempo, o elemento assinatura ----------
   Cartão de 18px e sombra tingida no navy, que foi o detalhe da
   EternaCloud que nós dois elogiamos. A chapa branca a 8% saiu:
   ela lia como cinza sujo. Entra degradê sólido com profundidade. */

.linha-tempo {
  padding: var(--e4);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgb(22 37 94 / 92%), rgb(10 22 62 / 94%));
  box-shadow: 0 30px 70px rgb(4 10 34 / 52%);
  backdrop-filter: blur(8px);
}

.linha-tempo__titulo {
  border-bottom-color: rgb(255 255 255 / 12%);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--verde-marca);
}

.marco__rotulo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--apoio);
}

.marco__nome {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.marco__nota {
  font-size: 0.75rem;
  line-height: 1.55;
  color: #97a1c0;
}

/* Os pontos. O vermelho fica só no prazo, que é o único risco real
   desta peça. As etapas do produto passam ao verde da marca. */
.marco--prazo::after {
  background: var(--risco);
  box-shadow: 0 0 0 4px rgb(196 10 4 / 26%);
}

.marco--prazo .marco__rotulo { color: #ff9d99; }

.marco--analise::after {
  background: var(--verde-marca);
  box-shadow: 0 0 0 4px rgb(132 192 48 / 22%);
}

.marco--analise .marco__rotulo { color: var(--verde-marca); }

.marco--segunda {
  border-radius: var(--r-card);
  background: rgb(132 192 48 / 10%);
  box-shadow: inset 0 0 0 1px rgb(132 192 48 / 32%);
}

.marco--segunda::after {
  background: var(--verde-marca);
  box-shadow: 0 0 0 5px rgb(132 192 48 / 20%);
}

.marco--segunda .marco__rotulo { color: var(--verde-marca); }

.marco__selo {
  border-radius: var(--radius-pill);
  background: var(--verde-marca);
  color: var(--tinta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.marco__camadas {
  font-size: 0.8125rem;
  color: #c3cbe2;
}

/* A ordinal da camada é dado numerado de verdade: a sequência 1ª, 2ª,
   3ª importa, porque é a ordem das análises. Tabular para alinhar. */
.marco__n {
  background: rgb(132 192 48 / 16%);
  box-shadow: inset 0 0 0 1px rgb(132 192 48 / 30%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--verde-marca);
  font-variant-numeric: tabular-nums;
}

.marco__barra span {
  background: linear-gradient(90deg, var(--risco), #ff2a24);
}

@media (min-width: 62rem) {
  .linha-tempo { padding: var(--e5); }
}

/* ---------- Correção de especificidade ----------
   `.banda-escura p` (0,2,0) vence qualquer regra de classe única
   (0,1,0), independente da ordem na folha. Como quase todo elemento
   do herói e da linha do tempo é um <p>, a cor de todos eles estava
   sendo forçada para --sobre-escuro e a hierarquia tonal inteira
   desabava: título, rótulo, nome e nota saíam no mesmo tom.

   O defeito é anterior a este bloco, o verde do título da linha do
   tempo nunca apareceu. Aqui as regras são reescritas com o prefixo
   da banda para empatar em especificidade e vencer por ordem. */

.banda-escura .hero__promessa { color: var(--branco); }
.banda-escura .hero__aviso { color: #dbe2f2; }
.banda-escura .hero__apoio { color: #aab3d0; }
.banda-escura .linha-tempo__titulo { color: var(--verde-marca); }
.banda-escura .marco__rotulo { color: var(--apoio); }
.banda-escura .marco__nome { color: var(--branco); }
.banda-escura .marco__nota { color: #97a1c0; }
.banda-escura .marco__selo { color: var(--tinta); }
.banda-escura .marco--feito .marco__nome { color: #8a94b4; }
.banda-escura .marco--prazo .marco__rotulo { color: #ff9d99; }
.banda-escura .marco--analise .marco__rotulo { color: var(--verde-marca); }
.banda-escura .marco--segunda .marco__rotulo { color: var(--verde-marca); }

/* No celular a frase de apoio não cabe ao lado da etiqueta, e a
   pílula vira um bloco arredondado de duas linhas. Abaixo de 48rem
   o badge perde a moldura e vira agrupamento simples: a etiqueta
   continua sendo pílula, o texto desce solto. */
@media (max-width: 47.99rem) {
  .hero__aviso {
    padding: 0;
    border: 0;
    background: none;
    align-items: flex-start;
    gap: var(--e2);
  }
}

/* ============================================================
   FASE 2 DO SISTEMA AUDITPHARMA
   Escopo: as seis bandas escuras.
   credibilidade · comparativo · painel · falar · cta-final · rodapé

   Mesmas regras da fase 1: verde da logo como acento, e ele só
   aparece sobre fundo escuro. Vermelho continua exclusivo de risco.
   Nenhum degradê carrega texto.
   ============================================================ */

/* ---------- A banda ----------
   O halo verde limão do canto superior vira o verde da marca, e o
   azul do canto inferior passa a ser o azul exato da logomarca. */
.banda-escura {
  background:
    radial-gradient(34rem 24rem at 88% 0%, rgb(132 192 48 / 8%), transparent 62%),
    radial-gradient(30rem 22rem at 4% 100%, rgb(12 48 168 / 26%), transparent 60%),
    linear-gradient(158deg, #102262 0%, var(--tinta) 100%);
}

/* Título em peso 600, não 700. A EternaCloud usa 500 nos dois
   templates: o título convence pelo tamanho e pelo tracking fechado,
   não pela gordura da letra. */
.banda-escura h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--branco);
}

.banda-escura .secao__lead {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--apoio);
}

.banda-escura .olho { color: var(--verde-marca); }
.banda-escura .olho::before { background: var(--verde-marca); }
.banda-escura .acento { color: var(--verde-marca); }

/* ---------- Credibilidade ---------- */

.banda-escura .credibilidade__lista { border-top-color: rgb(255 255 255 / 12%); }

.metrica__ico {
  border-radius: var(--r-chip);
  background: rgb(132 192 48 / 12%);
  border-color: rgb(132 192 48 / 26%);
  color: var(--verde-marca);
}

.metrica__numero {
  font-size: clamp(1.625rem, 4.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--verde-marca);
}

.metrica__rotulo { color: var(--apoio); }

/* ---------- Comparativo ----------
   A coluna do COMPLETO ganha chapa verde discreta. O plano
   recomendado precisa se destacar sem que ninguém escreva
   "recomendado" em lugar nenhum. */

.comparativo__tabela th,
.comparativo__tabela td { border-bottom-color: rgb(255 255 255 / 10%); }

.comparativo__tabela thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--apoio);
}

.comparativo__tabela tbody th {
  font-weight: 400;
  color: #c3cbe2;
}

.comparativo__tabela td {
  font-weight: 600;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}

.comparativo__tabela th:nth-child(3),
.comparativo__tabela td:nth-child(3) { background: rgb(132 192 48 / 7%); }

.comparativo__tabela thead th:nth-child(3) { color: var(--verde-marca); }

.comparativo__tabela .sim { color: var(--verde-marca); }
.comparativo__tabela .nao { color: var(--apagado); }

/* ---------- Painéis ---------- */

.painel__prova img {
  border-radius: var(--r-card);
  border-color: rgb(255 255 255 / 12%);
  box-shadow: 0 30px 70px rgb(4 10 34 / 50%);
}

.banda-escura .painel__prova figcaption { color: var(--apoio); }

.painel__lado { border-radius: var(--r-card); }

.painel__lado--controle {
  background: rgb(255 255 255 / 5%);
  border-color: rgb(255 255 255 / 12%);
}

.painel__lado--completo {
  background:
    radial-gradient(20rem 14rem at 92% 0%, rgb(132 192 48 / 20%), transparent 62%),
    rgb(255 255 255 / 7%);
  border-color: rgb(132 192 48 / 45%);
  box-shadow: 0 24px 60px rgb(4 10 34 / 45%);
}

.banda-escura .painel__plano {
  font-weight: 600;
  color: var(--apoio);
}

.banda-escura .painel__lado--completo .painel__plano { color: var(--verde-marca); }

.banda-escura .painel__numero {
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--branco);
}

.banda-escura .painel__lado--completo .painel__numero { color: var(--verde-marca); }

.painel__grade i {
  border-radius: 4px;
  background: rgb(255 255 255 / 14%);
}

.painel__grade--17 i { background: var(--verde-marca); }

.banda-escura .painel__legenda { color: var(--apoio); }

/* ---------- Falar e CTA final ---------- */

.banda-escura .falar p { color: var(--apoio); }

.cta-final h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
}

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

.chapa-marca { border-radius: var(--r-card); }

.banda-escura .rodape__slogan {
  font-weight: 600;
  color: var(--branco);
}

.banda-escura .rodape__sobre { color: var(--apoio); }

.selo span { color: var(--apoio); }

.rodape__coluna h3 {
  font-weight: 600;
  color: var(--apoio);
}

.rodape__coluna li { color: var(--apoio); }
.rodape__coluna a { color: #c3cbe2; }
.rodape__coluna a:hover { color: var(--verde-marca); }

.em-breve b {
  background: rgb(132 192 48 / 16%);
  color: var(--verde-marca);
  font-weight: 700;
}

.rodape__assinatura {
  border-top-color: rgb(255 255 255 / 12%);
  color: var(--apoio);
}

/* ---------- O botão que fica ----------
   Verde do WhatsApp, não o verde da marca. São sinais diferentes e
   não podem se confundir. */
.zap-fixo {
  font-weight: 600;
  box-shadow: 0 10px 30px rgb(4 10 34 / 42%);
}

/* ---------- Correção de escopo ----------
   `.falar` e `.banda-escura` vivem no MESMO elemento <section>, então
   `.banda-escura .falar p` nunca casa: aquele seletor exige que uma
   classe seja descendente da outra. Encadeadas no próprio elemento,
   casam. Vale a regra geral: neste arquivo a classe da banda e a
   classe da seção estão sempre no mesmo <section>. */

.falar.banda-escura p { color: var(--apoio); }

/* ============================================================
   RODAPÉ NO PADRÃO DA CASA INFORPOP

   Medido nos dois rodapés oficiais, o da INFORPOP e o da
   GuardaAReceita AI. O padrão é ESTRUTURAL, não cromático: as duas
   compartilham o esqueleto e cada uma veste com a paleta do próprio
   produto (a INFORPOP usa marrons quentes, a GuardaAReceita usa
   navy frio). Aqui o esqueleto é o mesmo e a paleta é a do
   AUDITPharma.

   Constantes das duas, e que passam a valer aqui:
     · fundo branco, sempre depois de uma seção escura
     · quem assina é a INFORPOP, não o produto
     · slogan em #D90000, peso 700, quebrado em duas linhas
     · cabeçalho de coluna pequeno, 700, caixa alta, espaçado
     · divisor de 1px antes da assinatura final

   O verde aqui é o --verde-tinta, porque sobre branco o verde da
   logo mede 2,2:1 e reprova. É exatamente o caso de uso para o qual
   aquele token existe.
   ============================================================ */

.rodape.banda-clara {
  background: var(--branco);
  color: var(--tinta);
}

/* Escopo restrito ao <picture> do logotipo. A versão anterior dizia
   `.rodape__marca img` e alcançava TODA imagem do bloco, inclusive o
   selo do Farmácia Popular, que tem proporção 488x797. Forçado a
   176px de largura, o selo virava 287px de altura e dominava a
   coluna inteira. 12,5rem são os 200px medidos no rodapé oficial
   da INFORPOP. */
.rodape__marca > picture img {
  width: 12.5rem;
  height: auto;
}

/* A etiqueta não pode quebrar entre "em" e "breve". */
.em-breve b { white-space: nowrap; }
.em-breve { display: inline-block; }

/* O único vermelho fora do vocabulário de risco em toda a página. Ele
   não é alerta, é assinatura institucional, e vem das duas referências
   sem alteração. */
.rodape.banda-clara .rodape__slogan {
  margin-top: var(--e3);
  font-size: 0.96875rem;
  font-weight: 700;
  line-height: 1.35;
  color: #d90000;
}

.rodape.banda-clara .rodape__sobre {
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--apoio);
}

.rodape.banda-clara .selo span { color: var(--apoio); }

.rodape.banda-clara .rodape__coluna h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apoio);
}

.rodape.banda-clara .rodape__coluna li {
  font-size: 0.875rem;
  color: var(--apoio);
}

.rodape.banda-clara .rodape__coluna a {
  color: var(--tinta);
  text-decoration: none;
}

.rodape.banda-clara .rodape__coluna a:hover {
  color: var(--verde-tinta);
  text-decoration: underline;
}

.rodape.banda-clara .em-breve b {
  background: rgb(132 192 48 / 16%);
  color: var(--verde-tinta);
}

.rodape.banda-clara .rodape__assinatura {
  border-top-color: #dfe4f0;
  font-size: 0.75rem;
  color: var(--apoio);
}

/* ============================================================
   FASE 3 DO SISTEMA AUDITPHARMA
   Escopo: as oito bandas claras.
   prova · portaria · como funciona · incluído · clientes · planos
   objeções · FAQ

   ESTRATÉGIA DIFERENTE das fases 1 e 2, e de propósito.

   Lá eu reescrevi regra por regra. Aqui são mais de 40 usos de cor
   espalhados por 600 linhas, e escrever 40 sobreposições de seletor
   é exatamente o que já falhou duas vezes neste arquivo: primeiro no
   `.banda-escura .falar p`, que nunca casou porque as duas classes
   estão no mesmo elemento, depois no `.rodape__marca img`, que casou
   ALÉM da intenção e inchou o selo do Farmácia Popular.

   Então, em vez de brigar com seletor, eu reaponto os TOKENS ANTIGOS
   para os valores do sistema novo. Uma edição, efeito consistente em
   toda regra que já os consumia, e zero superfície de erro de escopo.
   ============================================================ */

:root {
  /* Azul e verde passam a ser os valores exatos amostrados da logo. */
  --azul: #0c30a8; /* 10,4:1 no branco */
  --azul-escuro: #0c1b4a; /* mesmo valor de --tinta */

  /* --verde continua sendo o verde da marca, mas com um contrato:
     em fundo claro ele só pinta SUPERFÍCIE (bolinha, filete, borda).
     Quem carrega texto sobre branco é --verde-escuro, que passa a
     valer o --verde-tinta e mede 5,1:1. */
  --verde: #84c030;
  --verde-escuro: #4f7a14;

  --texto: #0c1b4a;
  --texto-fraco: #5f6894; /* 5,4:1 no branco, passa AA em corpo */
  --linha: #dfe4f0;

  /* Cartão de 18px e sombra tingida no navy, o padrão da EternaCloud
     que nós dois elogiamos. Vale para a página inteira. */
  --radius: 18px;
  --shadow-card: 0 3px 9px rgb(63 74 126 / 6%), 0 1px 29px rgb(63 74 126 / 10%);
  --shadow-alto: 0 6px 16px rgb(63 74 126 / 8%), 0 24px 56px rgb(63 74 126 / 14%);
}

/* ---------- Tipografia das bandas claras ----------
   Peso 600 no lugar de 700, mesma decisão da fase 2: o título
   convence pelo tamanho e pelo tracking fechado, não pela gordura. */

.banda-clara h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--tinta);
}

.banda-clara h3,
.banda-clara h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.banda-clara .secao__lead {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--texto-fraco);
}

/* ---------- Correção de contraste no selo do plano ----------
   Estava branco sobre o verde da logo, 2,2:1, reprovado. Passa a ser
   a tinta sobre o verde, 7,5:1, que é o mesmo par do botão primário.
   Coerência de sistema e acessibilidade na mesma troca. */
.plano__selo {
  background: var(--verde);
  color: var(--tinta);
  font-weight: 700;
}

/* ---------- Banda de risco ----------
   Único lugar da página onde o vermelho domina, e é onde ele deve
   dominar. Só o peso do título acompanha o sistema. */
.banda-risco h2 { font-weight: 600; letter-spacing: -0.028em; }

/* ============================================================
   CORREÇÕES DE CONTRASTE
   Achadas por auditoria automática de toda a página: para cada nó de
   texto visível, cor efetiva contra fundo efetivo, comparado ao
   mínimo WCAG AA (4,5:1 em corpo, 3:1 em texto grande).
   ============================================================ */

/* 1. O CTA do topo é um <a> DENTRO de .topo__nav, então a regra de cor
      dos links do menu o alcançava e derrubava o branco dele para
      2,94:1 sobre o verde do WhatsApp. Restaurado o branco, 4,77:1.
      É a terceira vez neste arquivo que eu escrevo seletor mais largo
      do que a intenção. */
.topo__nav a.topo__cta,
.topo__nav a.topo__cta:hover { color: var(--branco); }

/* 2. Rodapé. O --apoio foi desenhado para fundo ESCURO: sobre branco
      ele mede 3,02:1 e reprova em nove elementos. Quem serve fundo
      claro é o --texto-fraco, 5,4:1. Erro meu ao montar o rodapé. */
.rodape.banda-clara .rodape__sobre,
.rodape.banda-clara .selo span,
.rodape.banda-clara .rodape__coluna h3,
.rodape.banda-clara .rodape__coluna li,
.rodape.banda-clara .rodape__assinatura { color: var(--texto-fraco); }

/* 3. Rótulo de 10px sobre chapa cinza clara, media 4,24:1. Em corpo
      de 10px não cabe economia de contraste: vai para a tinta. */
.chapa--antes { color: var(--tinta); }

/* 4. O "Não" da tabela comparativa sobre a banda escura media 4,09:1
      com --apagado. Com --apoio mede 4,92:1 e continua visivelmente
      mais fraco que o "Sim", que é o efeito pretendido. */
.comparativo__tabela .nao { color: var(--apoio); }

/* ============================================================
   CORREÇÃO: o topo não cabia entre 768px e 932px

   O menu horizontal ligava em 48rem (768px), mas o conteúdo do topo
   precisa de 932px para caber:

     logotipo .................. 191px
     itens do menu ............. 533px
     vãos entre os itens ....... 144px
     padding lateral ............ 48px
     vão entre marca e menu ..... 16px
                                 -----
                                  932px

   Nessa faixa de 164px o botão do WhatsApp era empurrado para fora da
   viewport e aparecia cortado. O menu recolhido volta a valer até
   62rem (992px), que dá 60px de folga sobre o mínimo real.
   ============================================================ */

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .topo__toggle { display: inline-flex; }

  .topo__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--e1);
    margin-left: 0;
    padding-block: var(--e2);
  }

  .topo__nav[data-aberto="true"] { display: flex; }
  .topo__cta { align-self: flex-start; }
}

/* ============================================================
   RODAPÉ: lockup no ritmo da GuardaAReceita

   Medido no rodapé dela, que é a irmã mais próxima do AUDITPharma
   (as duas são página de produto, enquanto a da INFORPOP é o site
   institucional):

     logotipo ............... 240px de largura
     logo até o slogan ........ 8px
     slogan ................... 18px, itálico, peso 700, #C40A04
     slogan até o parágrafo ... 16px

   O meu estava com 32px entre logotipo e slogan, o dobro do dobro,
   porque somei um margin-top de 16px ao gap de 16px da grade. Os dois
   liam como blocos separados em vez de um lockup só.
   ============================================================ */

.rodape__marca { gap: var(--e2); }

.rodape.banda-clara .rodape__marca > picture img { width: 15rem; }

.rodape.banda-clara .rodape__slogan {
  margin-top: 0;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.3;
  color: #c40a04;
}

.rodape.banda-clara .rodape__sobre { margin-top: var(--e2); }
.rodape.banda-clara .selo { margin-top: var(--e2); }

/* ============================================================
   CORREÇÃO: grid de "como funciona" estourava a viewport

   As colunas declaradas eram `repeat(3, 1fr)`, mas o computado saía
   `168px 722px 143px`, somando 1066px dentro de um contêiner de
   952px. Overflow de 114px.

   Causa: `1fr` é atalho de `minmax(auto, 1fr)`, e esse mínimo `auto`
   é o min-content do item. Um dos cartões pedia 722px de mínimo e
   arrastava a faixa inteira junto. O `minmax(0, 1fr)` zera esse piso
   e devolve as três colunas iguais.

   O defeito é anterior a este trabalho: só ficou visível depois que o
   h2 voltou a atravessar as três colunas e passou a exibir a largura
   real do grid.
   ============================================================ */

@media (min-width: 62rem) {
  .camadas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   CORREÇÃO: as telas do aplicativo estouravam a coluna

   Em 62rem a seção vira grade de três colunas e cada `.camada` ocupa
   uma delas, com 305px. Mas a camada 1 carrega três telas de celular
   que pedem 672px, e elas vazavam 367px para fora do contêiner.

   Duas decisões aqui:

   1. `.etapas` não é uma camada, é o que vem ANTES das camadas. Ela
      estava sendo colocada automaticamente numa das três colunas e
      empurrando a camada 3 para uma segunda linha. Passa a atravessar
      a grade inteira, e aí as três camadas ficam realmente lado a lado.

   2. As telas voltam a ser rolagem horizontal contida dentro da própria
      coluna, que já é o comportamento delas no celular. A alternativa
      seria encolher o telefone para cerca de 95px, ilegível.
   ============================================================ */

@media (min-width: 62rem) {
  .etapas { grid-column: 1 / -1; }

  .telas {
    grid-template-columns: repeat(3, 13rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--e2);
  }

  .tela { scroll-snap-align: start; }
  .dica-arrastar { display: block; }
}

/* ============================================================
   AUD-05 e AUD-07

   <picture> envolve 8 imagens (WebP em 2 tamanhos, PNG de reserva).
   Sem `display: contents`, o <picture> viraria o item de layout no
   lugar da <img> e `flex: none`, `width` e `height` das regras
   existentes deixariam de valer.

   Alvo de toque de 44px (WCAG 2.5.5) em tela estreita e em ponteiro
   grosso (tablet). No desktop com mouse a densidade original fica.
   ============================================================ */

picture { display: contents; }

@media (max-width: 47.99rem), (pointer: coarse) {
  .topo__marca { display: flex; align-items: center; min-height: 2.75rem; }

  .topo__nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .topo__cta { justify-content: center; }

  .faq__item summary { min-height: 2.75rem; }

  .rodape__coluna li { margin-bottom: 0; }

  .rodape__coluna a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* ============================================================
   INFRA-7: página 404 da INFORPOP

   Reaproveita as bandas e botões que já existem. O logotipo da
   INFORPOP é claro sobre claro, então ele ganha a chapa branca do
   rodapé, o mesmo recurso usado ali.
   ============================================================ */

.erro404 {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e4);
  text-align: center;
}

.erro404__logo {
  width: 15rem;
  height: auto;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-card);
  background: var(--branco);
}

.erro404 h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--branco);
}

.erro404 p { color: var(--apoio); }

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

@media (min-width: 48rem) {
  .erro404__acoes { grid-auto-flow: column; }
}

/* ---------- Topo com Verdana ----------
   A Verdana é larga: o menu horizontal passou a
   precisar de 982px (logotipo 191 + vão 16 + itens 583 + 6 vãos de 24
   + padding 48). O recolhimento, que valia até 62rem (992px), vai até
   64rem (1024px). Em Windows a barra de rolagem clássica tira cerca de
   17px da largura útil sem alterar a media query, e com 992px a folga
   era de 10px: o menu quebraria de linha. Em 1024px a folga é de 42px. */

/* ---------- AUD-07, complemento ----------
   O resumo do FAQ e o logotipo do topo têm 44px em qualquer largura:
   o FAQ não é denso e o topo comporta. O link curto do rodapé ("FAQ",
   28px de largura) também precisa de largura mínima. */

.topo__marca { display: flex; align-items: center; min-height: 2.75rem; }
.faq__item summary { min-height: 2.75rem; }

@media (max-width: 47.99rem), (pointer: coarse) {
  .rodape__coluna a { min-width: 2.75rem; }
}