/* ============================================================
   GuardaAReceita AI · landing de conversão
   ============================================================

   Arquivo ÚNICO de estilo. Todo token vive no `:root` abaixo e
   nenhuma cor literal aparece fora dele.

   Mobile-first de verdade: o CSS base é escrito para 360px, e as
   duas media queries (768px e 1200px) só acrescentam. Se você
   apagar as duas, a página continua correta no celular, que é
   onde o dono de drogaria lê.

   As cores saíram da AMOSTRAGEM DE PIXEL da logomarca oficial do
   GuardaAReceita AI, não de estimativa. O contraste medido de
   cada uma está anotado ao lado. Nada aqui vem da paleta da
   INFORPOP.
   ============================================================ */

/* @critico:inicio
   `tools/critico.mjs` copia daqui até `@critico:fim` para dentro do
   `index.html`, e o guard reprova o build se as duas pontas
   divergirem. Este arquivo continua sendo o único lugar onde se
   edita estilo.

   O trecho vai daqui até a dobra do carimbo, e o resto da folha chega
   sem bloquear a renderização. As três configurações foram MEDIDAS em
   preset móvel, não escolhidas por gosto:

   · folha externa, bloqueando   LCP 1.518ms, CLS 0
   · folha inteira embutida      LCP 1.591ms, porque o HTML incha
   · só a primeira dobra dentro  LCP   658ms, CLS 0

   A terceira venceu. O CLS de 0,056 que aparecia na terceira não era
   do CSS assíncrono: era `width: fit-content` na moldura do herói,
   corrigido logo abaixo. */

:root {
  /* ---------- Cor, extraída da logomarca ---------- */
  --azul: #1337aa; /* a palavra do logotipo · 9,75:1 no branco */
  --azul-escuro: #0d185c; /* o núcleo da nuvem · 16,13:1 */
  --azul-medio: #4359a1; /* o lóbulo lilás · 6,60:1 */
  --azul-claro: #6bb9e6; /* o lóbulo claro · só decoração */
  --verde-agua: #70c7de; /* o lóbulo direito · só decoração */
  --azul-palido: #eef3fd; /* fundo de faixa */
  --linha: #d7dff2;

  /* ---------- A família do vermelho ----------
     Duas origens que se encontram no mesmo tom. O "A" do logotipo do
     GuardaAReceita é #ff0b05 e o selo do Farmácia Popular é #ff0000:
     praticamente a mesma cor, e é por isso que o vermelho pode ser a
     ponte entre o produto e o Programa.

     A escala vai do papel de parede ao carimbo. Cada degrau tem uso
     declarado, porque vermelho sem regra vira alarme constante e
     alarme constante ninguém escuta. */
  --vermelho: #ff0b05; /* o "A" do logotipo · traço e ícone */
  --vermelho-fp: #ff0000; /* o selo do Programa · fundo e marca */
  --vermelho-vivo: #e00b05; /* botão e faixa · 4,98:1 no branco */
  --vermelho-texto: #c40a04; /* texto de risco · 6,19:1 */
  --vermelho-tinta: #8d0703; /* título sobre fundo claro · 9,72:1 */
  --vermelho-noite: #4a0302; /* fundo escuro da faixa vermelha */
  --vermelho-suave: #ffd9d7;
  --vermelho-palido: #fff0ef;

  /* ---------- As cores do selo Farmácia Popular ----------
     Amostradas do arquivo oficial, pixel a pixel. O amarelo do selo é
     exatamente o mesmo que a página já usava. */
  --fp-amarelo: #fdce04;
  --fp-verde: #00ce02;
  --fp-azul: #263877;
  --fp-azul-claro: #14b8ff;
  --fp-laranja: #faa61d;

  --amarelo: #fdce04; /* Farmácia Popular · SÓ como fundo */
  --amarelo-fundo: #fff8e0;

  /* O verde do WhatsApp. Não é cor da marca: é o sinal que o dono de
     drogaria reconhece, e por isso vive só nos botões de conversa. */
  --verde-zap: #118355; /* branco por cima · 4,77:1 medido */
  --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;
  --e7: 5.5rem;

  --radius: 0.75rem;
  --radius-sm: 0.375rem;
  --shadow-card: 0 1px 2px rgb(13 24 92 / 8%), 0 10px 30px rgb(13 24 92 / 8%);
  --shadow-alto: 0 2px 6px rgb(13 24 92 / 12%), 0 18px 48px rgb(13 24 92 / 16%);

  /* ---------- Letra ----------
     Verdana tem DOIS pesos, 400 e 700. Peso literal fora daqui é
     proibido: quem precisa de ênfase usa `--forte`. */
  --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;
}

/* `overflow-x: clip` e não `hidden`, e no `html` e não no `body`.
   Com `hidden` no body o navegador transforma o body em CONTAINER DE
   ROLAGEM: a janela para de rolar, e junto param `scrollIntoView`, o
   seletor de dor e qualquer link de âncora. `clip` corta o excesso
   horizontal sem criar container nenhum. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  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;
}

/* O foco é do teclado e precisa ser visto. Nunca remover. */
:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.pular {
  position: absolute;
  left: var(--e3);
  top: calc(var(--e3) * -6);
  z-index: 20;
  padding: var(--e2) var(--e3);
  background: var(--amarelo);
  color: var(--azul-escuro);
  font-weight: var(--forte);
  border-radius: var(--radius-sm);
  transition: top var(--t) var(--ease);
}

.pular:focus {
  top: var(--e3);
}

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

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

/* O respiro entre dobras. Estava em 64px no desktop e a página lia
   como um documento denso: cada assunto encostava no seguinte e o
   olho não tinha onde descansar entre um e outro. */
.faixa {
  padding-block: var(--e5);
}

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e3);
}

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

/* ---------- Tipografia da página ----------
   Verdana só tem dois pesos, então a personalidade não vem da
   fonte: vem do CONTRASTE DE ESCALA. Título enorme com entrelinha
   curta e tracking negativo de um lado, rótulo minúsculo com
   tracking largo do outro. É essa distância que dá caráter. */

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

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

.h1 {
  font-size: clamp(1.75rem, 7.5vw, 3.25rem);
  font-weight: var(--forte);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.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);
  text-wrap: balance;
}

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

.lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto-fraco);
}

.mini {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

.cabeca {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e5);
  max-width: 46rem;
}

/* "Sete coisas que não são cobradas à parte" precisa de mais largura
   que as 46rem padrão para não deixar "parte" sozinho na segunda
   linha. Só este título, os outros ficam no padrão da casa. */
#incluido .cabeca {
  max-width: 54rem;
}

/* Bloco de texto que não usa `.cabeca`, como a chamada final e o
   convite para falar com o time. Sem isto o título encostava no
   parágrafo e o parágrafo encostava no botão. */
.final > .wrap .h2,
.falar .h2,
.painel-grade .h2 {
  margin-bottom: var(--e3);
}

.final-grade > div > p:not(.selo-sem),
.falar > div > p,
.painel-grade > div > p {
  margin-bottom: var(--e4);
}

/* ============================================================
   BOTÃO
   ============================================================

   O primário é AMARELO com texto azul-escuro: 10,76:1 medido, e é
   a cor do Farmácia Popular, que o dono de drogaria reconhece
   antes de ler. O amarelo NUNCA é texto, só fundo. */

.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);
}

.btn-principal {
  background: var(--amarelo);
  color: var(--azul-escuro);
  box-shadow: 0 4px 0 rgb(13 24 92 / 22%);
}

.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgb(13 24 92 / 22%),
    0 12px 28px rgb(253 206 4 / 45%);
}

.btn-principal:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgb(13 24 92 / 22%);
}

.btn-contorno {
  background: transparent;
  border-color: var(--azul);
  color: var(--azul);
}

.btn-contorno:hover {
  background: var(--azul);
  color: var(--branco);
}

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

.btn-bloco {
  width: 100%;
}

/* O que fica embaixo do botão. Tira a última objeção no ponto
   exato em que ela aparece, que é a mão indo clicar. */
/* Três linhas curtas, uma objeção por linha. Corrido, o leitor lê
   como uma frase só e nenhuma das três fica. */
.selo-sem {
  display: block;
  margin-top: var(--e3);
  font-size: 0.8125rem;
  font-weight: var(--forte);
  line-height: 1.7;
  color: var(--texto-fraco);
}

/* ============================================================
   CABEÇALHO
   ============================================================ */

.topo {
  position: sticky;
  top: var(--faixa-altura, 0px);
  z-index: 10;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

/* A barra do topo NÃO usa a coluna de conteúdo: ela ocupa a tela
   inteira, para a logomarca colar na borda esquerda e o botão do
   cadastro colar na direita. O resto da página segue no `wrap`
   centralizado de 75rem. */
.topo .wrap {
  max-width: none;
}

.topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 3.75rem;
}

.marca {
  display: block;
  line-height: 0;
}

/* 6,5rem no celular não é gosto, é conta: a 360px sobram 328px
   úteis, e a linha do topo precisa caber marca, CTA e botão do menu
   sem quebrar. Marca 104 + CTA 140 + menu 44 + duas folgas de 8 =
   304px, com 24px de sobra para o arredondamento não empurrar nada
   para a segunda linha. */
.marca img {
  width: 6.5rem;
  height: auto;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.topo .btn {
  min-height: 2.5rem;
  padding-inline: var(--e2);
  font-size: 0.8125rem;
}

.menu-abre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-abre svg {
  display: block;
  fill: none;
  stroke: var(--azul-escuro);
  stroke-width: 2;
  stroke-linecap: round;
}

/* No celular a nav vive na mesma linha do topo, mas quebra para a
   linha de baixo ao abrir: `flex-basis: 100%` no container que já é
   `flex-wrap: wrap`. Sem isso, o menu abriria espremido ao lado do
   botão. */
.menu {
  display: none;
  flex-basis: 100%;
  padding-block: var(--e2) var(--e3);
  border-top: 1px solid var(--linha);
}

.menu[data-aberto="true"] {
  display: block;
}

/* A ordem visual no celular: marca, ações, e a nav embaixo. */
.marca {
  order: 1;
}

.topo-acoes {
  order: 2;
}

.menu {
  order: 3;
}

.menu ul {
  display: grid;
  gap: var(--e1);
}

.menu a {
  display: block;
  padding: var(--e2) 0;
  color: var(--azul-escuro);
  font-weight: var(--forte);
  text-decoration: none;
}

.menu a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.menu-entrar a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  gap: var(--e2);
  padding-inline: var(--e5);
  border: 4px solid var(--vermelho);
  border-radius: var(--radius);
  color: var(--azul);
  font-weight: var(--forte);
  white-space: nowrap;
}

.menu-entrar img {
  width: 1.5rem;
  height: auto;
  flex-shrink: 0;
}

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

   Sem imagem de fundo. A atmosfera da nuvem da marca é
   reconstruída em gradiente, custo zero de rede e zero de CLS.
   O elemento de LCP é o H1, que é texto. */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--e5) var(--e6);
  /* A marca do Radar INFORPOP é vermelha de um lado e azul do outro. O
     herói repete essa divisão: o vermelho do Programa entra pela
     esquerda e o azul do produto domina o resto. É a mesma ideia
     inteira da página em uma imagem de fundo. */
  background:
    radial-gradient(40rem 30rem at -10% 4%, rgb(255 0 0 / 62%), transparent 60%),
    radial-gradient(28rem 22rem at 2% 88%, rgb(255 11 5 / 46%), transparent 58%),
    radial-gradient(20rem 16rem at 30% 40%, rgb(141 7 3 / 34%), transparent 62%),
    radial-gradient(30rem 20rem at 94% 4%, rgb(112 199 222 / 26%), transparent 58%),
    radial-gradient(26rem 18rem at 74% 104%, rgb(67 89 161 / 44%), transparent 62%),
    linear-gradient(168deg, var(--azul-escuro) 0%, #10236f 54%, var(--azul) 100%);
  color: var(--sobre-escuro);
}

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

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

.hero .olho {
  color: var(--amarelo);
}

.hero .olho::before {
  background: var(--amarelo);
}

.hero h1 {
  color: var(--branco);
  text-wrap: balance;
}

/* A segunda frase do título é a do TEMPO, e ela vem em amarelo:
   proteção e tempo são as duas promessas, e a cor separa uma da
   outra sem precisar de mais uma linha de texto. */
.h1-tempo {
  color: var(--amarelo);
}

/* O aviso da portaria abre o herói. É a única coisa da página que
   compete com a manchete, e compete de propósito: quem não sabe da
   mudança precisa saber antes de ler o resto. */
.aviso-regime {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e2) var(--e1) var(--e1);
  background: rgb(255 255 255 / 10%);
  border: 1px solid var(--amarelo);
  border-radius: var(--r-pill, 999px);
  color: var(--sobre-escuro);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.aviso-regime:hover {
  background: rgb(255 255 255 / 18%);
}

.aviso-regime b {
  padding: 2px var(--e2);
  background: var(--amarelo);
  border-radius: var(--r-pill, 999px);
  color: var(--azul-escuro);
  font-size: 0.6875rem;
  font-weight: var(--forte);
  letter-spacing: 0.1em;
}

.aviso-regime span {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

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

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

.hero .selo-sem {
  color: var(--sobre-escuro-fraco);
}

.hero-prova {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e2);
  padding: var(--e2) var(--e3) var(--e2) var(--e2);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  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);
}

/* ============================================================
   O SELO TEMPORAL sobre a tela real, assinatura da página
   ============================================================

   Era um documento desenhado em CSS. Desenho é ilustração, e o
   produto tem tela de verdade: agora o carimbo pousa sobre o print
   do app, com a IA já tendo lido o produto e o valor do Ministério.

   O carimbo desce uma vez, na carga. É o gesto que a página inteira
   imita depois, e nada mais se move com essa força. */

.fone {
  width: fit-content;
  margin: 0 auto;
}

/* O carimbo se posiciona pela TELA, e não pela figura inteira. Preso à
   figura, ele descia sobre a legenda em qualquer largura em que a
   legenda quebrasse em duas linhas. */
.fone-tela {
  position: relative;
  width: 17.5rem;
  max-width: 100%;
}

/* Sem `aspect-ratio` declarado: os atributos `width` e `height` do HTML
   já dão a proporção, e como a borda entra no box (box-sizing border-box)
   um `aspect-ratio` escrito à mão erraria a conta e o navegador
   apontaria a imagem como distorcida.

   O que resolvia o deslocamento era a largura FIXA no pai: com
   `fit-content` a caixa media diferente antes e depois de o arquivo
   chegar, e isso valia 0,056 de CLS. */
.fone img {
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  border: 6px solid var(--azul-escuro);
  box-shadow: var(--shadow-alto);
  background: var(--branco);
}

.fone-nota {
  margin-top: var(--e3);
  max-width: 100%;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--sobre-escuro-fraco);
}

.carimbo {
  position: absolute;
  right: -0.75rem;
  bottom: 1.5rem;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: var(--e2) var(--e3);
  background: var(--branco);
  border: 2px solid var(--vermelho);
  border-radius: var(--radius-sm);
  rotate: -6deg;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.carimbo-rotulo {
  font-size: 0.5625rem;
  font-weight: var(--forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermelho-texto);
}

.carimbo-hora {
  font-size: 0.875rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--azul-escuro);
}

.carimbo-codigo {
  font-size: 0.5625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
}

@media (prefers-reduced-motion: no-preference) {
  .carimbo {
    animation: carimbar 0.62s var(--ease) 0.6s both;
  }

  @keyframes carimbar {
    from {
      opacity: 0;
      scale: 2.4;
      rotate: 8deg;
    }

    70% {
      opacity: 1;
      scale: 0.94;
      rotate: -8deg;
    }

    to {
      opacity: 1;
      scale: 1;
      rotate: -6deg;
    }
  }
}

/* @critico:fim */

/* ============================================================
   SELO DE CREDIBILIDADE
   ============================================================

   A frase de exclusividade sozinha é afirmação. Ao lado de uma
   medalha com os anos de casa e de três provas datadas, ela vira
   currículo: quem lê no celular decide em segundos se acredita, e
   é o número que faz a conta, não o adjetivo. */

.selo-cred {
  display: grid;
  gap: var(--e4);
  justify-items: center;
  text-align: center;
}

.selo-medalha {
  display: grid;
  place-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--azul-escuro);
  box-shadow: 0 0 0 6px rgb(253 206 4 / 18%);
}

.selo-medalha-num {
  display: block;
  font-size: 2rem;
  font-weight: var(--forte);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.selo-medalha-rot {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.selo-corpo {
  display: grid;
  gap: var(--e3);
  justify-items: center;
}

.selo-olho {
  font-size: 0.6875rem;
  font-weight: var(--forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amarelo);
}

.selo-provas {
  display: grid;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid rgb(255 255 255 / 18%);
  width: 100%;
}

.selo-provas li {
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sobre-escuro-fraco);
}

.selo-provas b {
  font-size: 1.25rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--branco);
}

/* ============================================================
   O NOVO REGIME, Portaria 12.091
   ============================================================

   É a dobra de urgência da página, e a urgência vem do fato, não
   do adjetivo: os números saem do texto publicado e cada linha
   traz o artigo. Sem artigo citado, a linha não entra. */

.regime-acao {
  margin-top: var(--e5);
}

/* A fonte fica na tela, e não em nota escondida: alegação sobre
   norma sem a referência publicada não se sustenta. */
.regime-fonte {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid color-mix(in srgb, var(--amarelo) 55%, transparent);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* ---------- O selo "Você sabia?" ----------
   Ele existe para parar quem estava rolando. Fica ao lado da manchete
   da portaria, inclinado, em amarelo sobre azul escuro, e carrega a
   informação mais acionável da página: a maioria não sabe. */

.portaria-topo {
  display: grid;
  gap: var(--e5);
  align-items: center;
}

.portaria-topo .cabeca {
  margin-bottom: 0;
}

.voce-sabia {
  display: grid;
  gap: var(--e2);
  justify-items: center;
  padding: var(--e5) var(--e4);
  background:
    radial-gradient(12rem 8rem at 80% 10%, rgb(107 185 230 / 24%), transparent 60%),
    var(--azul-escuro);
  border: 3px solid var(--amarelo);
  border-radius: var(--radius);
  text-align: center;
  rotate: -2deg;
  box-shadow: var(--shadow-alto);
}

.voce-sabia-topo {
  font-size: clamp(1.5rem, 5vw, 2.125rem);
  font-weight: var(--forte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amarelo);
}

.voce-sabia-corpo {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sobre-escuro);
}

.voce-sabia-corpo b {
  font-weight: var(--forte);
  color: var(--branco);
}

.voce-sabia-pe {
  padding: var(--e1) var(--e3);
  background: var(--amarelo);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: var(--forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-escuro);
}

/* ============================================================
   FALAR COM GENTE DE VERDADE
   ============================================================

   O objetivo da página é o cadastro, e ele continua sendo o único
   botão amarelo acima dos planos. Mas quem prefere falar antes não
   pode ter que procurar: o verde do WhatsApp não disputa com o
   amarelo do cadastro, ele resolve outra objeção. */

.falar {
  display: grid;
  gap: var(--e5);
  align-items: center;
}

.falar .h2 {
  margin-block: var(--e2);
}

.falar-botoes {
  display: grid;
  gap: var(--e3);
  justify-items: stretch;
}

.btn-zap {
  background: var(--verde-zap);
  color: var(--branco);
  box-shadow: 0 4px 0 var(--verde-zap-fundo);
}

.btn-zap:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--verde-zap-fundo),
    0 12px 28px rgb(18 140 92 / 35%);
}

.btn-zap svg,
.falar-botoes .btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentcolor;
  flex: none;
}

.falar-nota {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-fraco);
  text-align: center;
}

/* ---------- O botão que fica ----------
   Fixo no canto, para quem trava no meio da página. Some na impressão
   e não cobre o rodapé, porque ele empurra o próprio espaço. */

.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);
  background: var(--verde-zap);
  border-radius: var(--r-pill, 999px);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: var(--forte);
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(13 24 92 / 28%);
  transition: transform var(--t) var(--ease);
}

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

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

/* No celular sobra só o ícone: rótulo fixo por cima do conteúdo tira
   mais do que dá numa tela de 360px. */
.zap-fixo span {
  display: none;
}

/* ============================================================
   O MECANISMO: a IA preenchendo
   ============================================================ */

.mecanismo {
  display: grid;
  gap: var(--e5);
  align-items: center;
  margin-top: var(--e5);
  padding: var(--e5) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.mecanismo img {
  width: 100%;
  max-width: 16rem;
  margin-inline: auto;
  border-radius: 1.25rem;
  border: 5px solid var(--azul-escuro);
  box-shadow: var(--shadow-card);
}

.mecanismo .h2 {
  margin-block: var(--e2);
}

.checks {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e3);
  font-size: 0.9375rem;
}

.checks li {
  padding-left: var(--e4);
  border-left: 3px solid var(--azul-claro);
}

.checks b {
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

/* ============================================================
   JÁ VEM INCLUÍDO
   ============================================================

   Sete itens de tamanhos diferentes viravam uma escada torta descendo
   a página. Agora todos têm a MESMA caixa: título de duas palavras em
   uma linha e descrição de duas linhas, com altura travada. O que
   diferencia os dois mais fortes é a cor, não o tamanho. */

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

.beneficio {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--e2) var(--e3);
  align-content: start;
  padding: var(--e4) var(--e4) var(--e5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

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

/* Dois dos sete carregam a promessa mais forte da casa. O que os
   separa é a cor e o filete, nunca o tamanho da caixa. */
.beneficio.destaque {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: var(--sobre-escuro);
}

.beneficio-marca {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--amarelo-fundo);
  border-radius: var(--radius-sm);
}

.beneficio.destaque .beneficio-marca {
  background: var(--amarelo);
}

.beneficio-marca svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--azul-escuro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beneficio-nome {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--forte);
  line-height: 1.25;
  color: var(--azul-escuro);
}

.beneficio.destaque .beneficio-nome {
  color: var(--amarelo);
}

.beneficio p {
  min-height: 3.2em;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texto-fraco);
}

.beneficio.destaque p {
  color: var(--sobre-escuro);
}

.beneficios-acao {
  margin-top: var(--e5);
}

/* ============================================================
   O DUELO, antes e depois
   ============================================================

   Era uma tabela de três colunas, e tabela não tem lado. Aqui os dois
   lados se enfrentam de verdade: o papel à esquerda com X vermelho, o
   produto à direita com check azul, e uma linha por situação. No
   celular os dois lados empilham e o X continua em cima do check, que
   é a ordem da história. */

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

.duelo-cabeca {
  display: none;
}

.duelo-lado {
  padding: var(--e2) var(--e4);
  border-radius: var(--r-pill, 999px);
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.duelo-lado-antes {
  background: var(--linha);
  color: var(--texto-fraco);
}

.duelo-lado-agora {
  background: var(--azul);
  color: var(--branco);
  /* O nome da marca depende do A maiúsculo no meio para se ler
     "Guarda A Receita". Maiúsculo total apaga essa pista. */
  text-transform: none;
}

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

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

.duelo-tema {
  font-size: 0.9375rem;
  font-weight: var(--forte);
  line-height: 1.3;
  color: var(--azul-escuro);
}

.duelo-par {
  display: grid;
  gap: var(--e3);
}

.duelo-antes,
.duelo-agora {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}

.duelo-antes {
  background: var(--vermelho-palido);
  color: var(--texto-fraco);
}

.duelo-agora {
  background: var(--azul-palido);
  color: var(--texto);
  font-weight: var(--forte);
}

.duelo-marca {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.duelo-marca svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.duelo-marca-x {
  background: var(--vermelho);
}

.duelo-marca-x svg {
  stroke: var(--branco);
}

.duelo-marca-ok {
  background: var(--azul);
}

.duelo-marca-ok svg {
  stroke: var(--branco);
}

.comparativo-acao {
  margin-top: var(--e5);
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */

.depoimento {
  display: grid;
  gap: var(--e4);
  align-content: start;
  padding: var(--e5) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

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

.depoimento blockquote p::before {
  content: "\201C";
  margin-right: -0.3em;
}

.depoimento blockquote p::after {
  content: "\201D";
  margin-left: -0.3em;
}

.depoimento figcaption {
  display: grid;
  font-size: 0.8125rem;
  color: var(--texto-fraco);
}

.depoimento figcaption b {
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

/* ============================================================
   PAINEL GERENCIAL
   ============================================================ */

.faixa-escura {
  background:
    radial-gradient(30rem 20rem at 90% 0%, rgb(107 185 230 / 22%), transparent 62%),
    linear-gradient(155deg, var(--azul-escuro) 0%, #10236f 100%);
  color: var(--sobre-escuro);
}

.faixa-escura .h2 {
  color: var(--branco);
}

.faixa-escura .lead {
  color: var(--sobre-escuro);
}

.faixa-escura .olho {
  color: var(--amarelo);
}

.faixa-escura .olho::before {
  background: var(--amarelo);
}

.faixa-escura .selo-sem {
  color: var(--sobre-escuro-fraco);
}

.painel-grade {
  display: grid;
  gap: var(--e5);
  align-items: center;
}

.painel-tela {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 22%);
  box-shadow: var(--shadow-alto);
}

/* ============================================================
   A FAIXA VERMELHA, o Programa
   ============================================================

   Regra de cor desta página, e ela vale do topo ao rodapé:

   · VERMELHO onde quem manda é o Ministério da Saúde. A regra, o
     risco, a multa, a auditoria.
   · AZUL onde quem resolve é o GuardaAReceita AI. A IA, o selo, os
     painéis, os planos.

   Não é gosto: é a divisão da própria marca do Radar INFORPOP, que é
   vermelha de um lado e azul do outro. Vermelho espalhado sem regra
   vira alarme constante, e alarme constante ninguém escuta. */

.faixa-vermelha {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(30rem 22rem at 88% -20%, rgb(255 0 0 / 22%), transparent 62%),
    linear-gradient(160deg, var(--vermelho-noite) 0%, #6d0604 58%, var(--vermelho-tinta) 100%);
  color: var(--sobre-escuro);
}

.faixa-vermelha .h2,
.faixa-vermelha .h3 {
  color: var(--branco);
}

.faixa-vermelha .lead {
  color: var(--vermelho-suave);
}

.faixa-vermelha .olho {
  color: var(--amarelo);
}

.faixa-vermelha .olho::before {
  background: var(--amarelo);
}

/* O selo do Programa é vermelho, some no fundo vermelho da faixa.
   Aqui ganha uma base branca por baixo, só nesse contexto, para não
   sumir de novo. */
.faixa-vermelha .selo-fp-linha img {
  padding: 3px;
  background: var(--branco);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.risco-intro {
  margin-top: var(--e5);
  margin-bottom: var(--e4);
}

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

.selo-fp-linha img {
  width: 2.75rem;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Os cartões de dor, agora sobre o vermelho. */
.faixa-vermelha .dor {
  background: var(--branco);
  border: 0;
  border-left: 4px solid var(--vermelho-vivo);
  box-shadow: var(--shadow-card);
}

.faixa-vermelha .dor h3 {
  color: var(--azul-escuro);
}

.faixa-vermelha .dor p {
  color: var(--texto-fraco);
}

/* O verde do WhatsApp não combina com o vermelho do Programa: aqui
   dentro o botão usa o mesmo amarelo do selo "Você sabia?" e do
   olho, que já é o acento estabelecido para quem está sobre o
   gradiente vermelho. */
.faixa-vermelha .btn-zap {
  background: var(--amarelo);
  color: var(--azul-escuro);
  box-shadow: 0 4px 0 rgb(13 24 92 / 22%);
}

.faixa-vermelha .btn-zap:hover {
  box-shadow:
    0 6px 0 rgb(13 24 92 / 22%),
    0 12px 28px rgb(253 206 4 / 45%);
}

/* A citação da fonte fica direto sobre o gradiente vermelho, sem
   cartão embaixo, então também precisa da cor clara, não do
   texto-fraco escuro que ela usa no fundo pálido original. */
.faixa-vermelha .regime-fonte {
  color: var(--vermelho-suave);
  border-top-color: color-mix(in srgb, var(--amarelo) 40%, transparent);
}

/* ============================================================
   BARRA DE PROVA
   ============================================================ */

.prova {
  background: var(--azul-escuro);
  color: var(--sobre-escuro);
  padding-block: var(--e4);
}

.prova-linha {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Uma linha só. O `max-width` de 44rem era o que quebrava a frase em
   duas: sem ele, os 71 caracteres cabem folgados na largura da dobra
   a partir do tablet. No celular ela quebra, e tem que quebrar. */
.prova-frase {
  font-size: clamp(1rem, 1.55vw, 1.375rem);
  font-weight: var(--forte);
  line-height: 1.35;
  color: var(--branco);
  max-width: none;
}

.prova-frase em {
  font-style: normal;
  color: var(--amarelo);
}

/* ============================================================
   DOR
   ============================================================

   O vermelho da marca é o "A" do logotipo, e aqui ele só marca
   RISCO. Não vira enfeite em lugar nenhum da página. */

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

.dor {
  display: grid;
  gap: var(--e3);
  padding: var(--e5) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.dor h3 {
  color: var(--vermelho-texto);
}

.dor p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ============================================================
   COMO FUNCIONA
   ============================================================

   Aqui o número é informação, não decoração: são três passos em
   ordem, e quem lê precisa da ordem. */

.passo {
  display: grid;
  gap: var(--e5);
  align-content: start;
  padding: var(--e5) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}

.passo-cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
}

/* A tela do passo, com moldura de aparelho. Largura travada para o
   cartão não crescer junto com a coluna. */
.passo img {
  width: 100%;
  max-width: 13.5rem;
  margin-inline: auto;
  border-radius: 1.125rem;
  border: 5px solid var(--azul-escuro);
  box-shadow: var(--shadow-card);
}

.passo h3 {
  margin-bottom: var(--e1);
}

.passo-num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--azul);
  border-radius: 50%;
  color: var(--branco);
  font-size: 1.0625rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
}

.passo p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

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

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

.plano {
  display: grid;
  gap: var(--e4);
  align-content: start;
  padding: var(--e5) var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.plano-gratis {
  border: 2px solid var(--azul);
  background: linear-gradient(180deg, var(--azul-palido), var(--branco) 40%);
}

.plano-cabeca {
  display: grid;
  gap: var(--e1);
}

.plano-nome {
  justify-self: start;
  padding: 0.375rem var(--e3);
  background: var(--azul);
  border-radius: var(--radius-sm);
  font-size: 1.125rem;
  font-weight: var(--forte);
  letter-spacing: -0.01em;
  color: var(--branco);
}

.plano-gratis .plano-nome {
  background: var(--amarelo);
  color: var(--azul-escuro);
}

.plano-faixa {
  font-size: 0.8125rem;
  color: var(--texto-fraco);
}

.plano-etiqueta {
  justify-self: start;
  padding: 2px var(--e2);
  background: var(--azul);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: var(--forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--branco);
}

/* ---------- O bloco de preço ----------
   REGRA DURA. O valor promocional do cartão e as duas informações
   que o qualificam (as 21 parcelas e o integral do boleto) vivem
   DENTRO deste mesmo elemento. Não é convenção de revisão: é
   estrutura, e `tools/check-preco.mjs` reprova o build se o
   promocional aparecer sozinho em qualquer lugar do HTML,
   incluindo meta tag e JSON-LD. */

.preco {
  display: grid;
  gap: var(--e1);
  padding: var(--e3);
  background: var(--azul-palido);
  border-radius: var(--radius-sm);
}

.preco-integral {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto);
}

.preco-integral b {
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

.preco-ou {
  font-size: 0.75rem;
  color: var(--texto-fraco);
}

.preco-valor {
  display: flex;
  align-items: baseline;
  gap: var(--e1);
  font-size: 2.25rem;
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--azul);
}

.preco-moeda {
  font-size: 1.125rem;
  letter-spacing: 0;
}

.preco-condicao {
  font-size: 0.6875rem;
  font-weight: var(--forte);
  line-height: 1.35;
  color: var(--azul-escuro);
}

.preco-zero .preco-valor {
  color: var(--azul-escuro);
}

.plano-itens {
  display: grid;
  gap: var(--e2);
  font-size: 0.75rem;
}

.plano-itens li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--e2);
  align-items: start;
}

.plano-itens svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano-itens b {
  font-weight: var(--forte);
  font-variant-numeric: tabular-nums;
}

.plano-rodape {
  padding-top: var(--e2);
  border-top: 1px solid var(--linha);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--texto-fraco);
}

/* A caixa do percentual, no mesmo azul pálido do bloco de preço, como
   na tabela oficial: o número que prova que o plano cabe no caixa. */
.plano-rodape-percentual {
  padding: var(--e2) var(--e3);
  border-top: 0;
  background: var(--azul-palido);
  border-radius: var(--radius-sm);
  color: var(--azul-escuro);
}

.plano-rodape-percentual b {
  font-size: 1.0625rem;
  color: var(--azul);
}

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

/* ---------- Cresce quando você quiser ---------- */

.cresce {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
  padding: var(--e4);
  background: var(--azul-escuro);
  border-radius: var(--radius);
  color: var(--sobre-escuro);
}

.cresce h3 {
  color: var(--amarelo);
}

.cresce ul {
  display: grid;
  gap: var(--e2);
  font-size: 0.875rem;
}

.cresce li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e2);
  align-items: baseline;
}

.cresce li::before {
  content: "+";
  font-weight: var(--forte);
  color: var(--amarelo);
}

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

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

/* Quatro caixas brancas iguais pareciam aviso legal. Cada uma passou a
   ter cor própria, filete no topo e o numeral da ordem: a dobra vira
   sequência de argumentos, não parede. */
.objecao {
  position: relative;
  display: grid;
  gap: var(--e2);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--azul);
  border-radius: var(--radius);
  counter-increment: objecao;
}

/* O numeral fica a 45% da cor da própria borda, e não a 22%: no
   primeiro cartão, azul claro sobre fundo azul claro sumia. A regra
   agora é uma só, e cada cartão herda a intensidade da sua cor. */
.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);
}

.objecoes {
  counter-reset: objecao;
}

.objecao:nth-child(2) {
  background: var(--amarelo-fundo);
  border-top-color: var(--amarelo);
}

.objecao:nth-child(2)::before {
  color: color-mix(in srgb, var(--azul-escuro) 42%, transparent);
}

.objecao:nth-child(3) {
  background: var(--vermelho-palido);
  border-top-color: var(--vermelho);
}

.objecao:nth-child(3)::before {
  color: color-mix(in srgb, var(--vermelho-texto) 42%, transparent);
}

.objecao:nth-child(4) {
  background: var(--azul-escuro);
  border-top-color: var(--amarelo);
  color: var(--sobre-escuro);
}

.objecao:nth-child(4)::before {
  color: rgb(255 255 255 / 38%);
}

.objecao:nth-child(4) .h3 {
  color: var(--amarelo);
}

.objecao:nth-child(4) .objecao-marca {
  background: var(--amarelo);
}

.objecao-marca {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--amarelo-fundo);
  border-radius: 50%;
}

.objecao-marca svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--azul-escuro);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.objecao p {
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* O cartão reage ao ponteiro: quatro caixas paradas parecem aviso
   legal, e o que elas são é resposta a objeção. */
.objecao {
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

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

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

.objecoes-frase {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: var(--forte);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--azul-escuro);
}

/* ---------- Botão de contratar ---------- */

.btn-azul {
  background: var(--azul);
  color: var(--branco);
  box-shadow: 0 4px 0 var(--azul-escuro);
}

.btn-azul:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--azul-escuro),
    0 12px 28px rgb(19 55 170 / 35%);
}

/* ---------- A lista do painel gerencial ---------- */

.painel-itens {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e4);
  font-size: 0.875rem;
  line-height: 1.5;
}

.painel-itens li {
  padding-left: var(--e4);
  border-left: 3px solid var(--amarelo);
}

.painel-itens b {
  font-weight: var(--forte);
  color: var(--amarelo);
}

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

.faq {
  display: grid;
  gap: var(--e2);
  max-width: 48rem;
}

.faq-item {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: var(--forte);
  line-height: 1.35;
  color: var(--azul-escuro);
  cursor: pointer;
}

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

.faq-sinal {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: rotate var(--t) var(--ease);
}

.faq-botao[aria-expanded="true"] .faq-sinal {
  rotate: 45deg;
}

.faq-resposta {
  display: none;
  padding: 0 var(--e3) var(--e3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texto-fraco);
}

.faq-resposta[data-aberto="true"] {
  display: block;
}

.faq-resposta b {
  color: var(--texto);
  font-weight: var(--forte);
}

/* ============================================================
   CHAMADA FINAL
   ============================================================ */

.final {
  background:
    radial-gradient(26rem 20rem at 96% 100%, rgb(255 0 0 / 34%), transparent 60%),
    radial-gradient(28rem 18rem at 8% 0%, rgb(107 185 230 / 26%), transparent 62%),
    linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--sobre-escuro);
}

.final-grade {
  display: grid;
  gap: var(--e5);
  align-items: center;
}

.final h2 {
  color: var(--branco);
}

.final p {
  color: var(--sobre-escuro);
}

.final .selo-sem {
  color: var(--sobre-escuro-fraco);
}

.qr {
  display: grid;
  gap: var(--e2);
  justify-items: center;
  padding: var(--e3);
  background: var(--branco);
  border-radius: var(--radius);
  max-width: 15rem;
  margin-inline: auto;
}

.qr img {
  width: 10rem;
  height: 10rem;
}

.qr-nota {
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  color: var(--texto-fraco);
}

.qr-botao {
  min-height: 2.75rem;
  font-size: 0.9375rem;
}

/* No celular o QR não serve para nada: some, e sobra o botão. */
@media (max-width: 47.99rem) {
  .qr img,
  .qr-nota {
    display: none;
  }

  .qr {
    max-width: none;
    padding: 0;
    background: transparent;
  }
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  padding-block: var(--e6);
  background: var(--branco);
  border-top: 1px solid var(--linha);
}

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

/* A marca e o slogan formam UMA peça, e quem manda na largura é o
   SLOGAN, não a logomarca. Com largura fixa acontecia o contrário: a
   frase quebrava em três linhas para caber, e a regra da casa é que
   ela tenha sempre DUAS. Aqui o `nowrap` garante as duas linhas, o
   bloco mede o que a frase mais longa pede, e a logomarca se ajusta a
   essa medida. */
/* Largura declarada, e não `fit-content`: com `fit-content` o bloco
   media a largura INTRÍNSECA do arquivo da logomarca, 460px, e não a
   da frase. 15rem é a medida em que a linha mais longa do slogan,
   `Se é Farmácia Popular,`, cabe inteira em uma linha com folga, e a
   logomarca acompanha. */
.rodape-marca {
  width: 15rem;
  max-width: 100%;
  margin-bottom: var(--e3);
}

.rodape img {
  width: 100%;
  height: auto;
}

/* O slogan da casa é SEMPRE em duas linhas. Nunca corrido. */
.slogan {
  margin-top: var(--e2);
  font-size: 1.125rem;
  font-weight: var(--forte);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* Vermelho, como na landing institucional da INFORPOP. O slogan é da
     casa, não do produto: ele não usa o azul do GuardaAReceita AI. */
  color: var(--vermelho-texto);
}

/* O selo do Programa no rodapé, com a nota de propriedade da cor. Mesma
   construção da landing institucional da INFORPOP. */
.rodape-selo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e4);
}

.rodape-selo img {
  width: 3.25rem;
  height: auto;
  flex: none;
}

.rodape-selo span {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texto-fraco);
  max-width: 30ch;
}

.rodape h3 {
  margin-bottom: var(--e2);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.rodape ul {
  display: grid;
  gap: var(--e2);
  font-size: 0.875rem;
}

.rodape a {
  color: var(--azul-escuro);
  text-decoration: none;
}

.rodape a:hover {
  text-decoration: underline;
}

/* A vigência saiu do rodapé e subiu para a dobra dos planos, que é
   onde ela importa. Material comercial da casa vale por um mês, e o
   mês fica na tela, colado no preço. */
.vigencia {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  justify-self: start;
  padding: var(--e2) var(--e4);
  background: var(--amarelo);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: var(--forte);
  letter-spacing: 0.06em;
  color: var(--azul-escuro);
}

.rodape-fim {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--texto-fraco);
}

/* ============================================================
   MOVIMENTO
   ============================================================

   Um gesto forte, o carimbo, e depois só entrada discreta. Tudo
   em `opacity` e `translate`, que não recalculam layout: o CLS
   continua zero com a página inteira animando.

   Quem pediu menos movimento não recebe nenhum. */

@media (prefers-reduced-motion: no-preference) {
  .surge {
    opacity: 0;
    translate: 0 1.25rem;
    transition:
      opacity 0.5s var(--ease) var(--atraso, 0ms),
      translate 0.5s var(--ease) var(--atraso, 0ms);
  }

  .surge[data-visto="true"] {
    opacity: 1;
    translate: 0 0;
  }

  .hero-copia > * {
    animation: entrar 0.55s var(--ease) both;
  }

  .hero-copia > :nth-child(1) {
    animation-delay: 0.05s;
  }

  .hero-copia > :nth-child(2) {
    animation-delay: 0.12s;
  }

  .hero-copia > :nth-child(3) {
    animation-delay: 0.19s;
  }

  .hero-copia > :nth-child(4) {
    animation-delay: 0.26s;
  }

  .hero-copia > :nth-child(5) {
    animation-delay: 0.33s;
  }

  .hero-copia > :nth-child(6) {
    animation-delay: 0.4s;
  }

  @keyframes entrar {
    from {
      opacity: 0;
      translate: 0 0.75rem;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* ============================================================
   768px
   ============================================================ */

@media (min-width: 48rem) {
  .faixa {
    padding-block: var(--e7);
  }

  .cabeca {
    margin-bottom: var(--e6);
  }

  .final-grade,
  .falar,
  .painel-grade,
  .rodape-grade {
    gap: var(--e6);
  }

  .marca img {
    width: 10.5rem;
  }

  .topo-linha {
    gap: var(--e3);
  }

  .topo .btn {
    padding-inline: var(--e3);
    font-size: 0.875rem;
  }

  .wrap {
    padding-inline: var(--e4);
  }

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

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

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

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

  .final-grade {
    grid-template-columns: 1.3fr 0.7fr;
  }

  .rodape-grade {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .cresce {
    grid-template-columns: 1fr 1.6fr;
    align-items: center;
  }

  .seletor {
    grid-template-columns: auto 1fr;
    gap: var(--e4);
  }

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

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

  /* No tablet e no desktop o duelo fica lado a lado de verdade, com a
     faixa dos dois lados no topo. */
  .duelo-cabeca {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3);
    margin-left: calc(15rem + var(--e4));
  }

  .duelo-linha {
    grid-template-columns: 15rem 1fr;
    align-items: center;
    gap: var(--e4);
  }

  .duelo-par {
    grid-template-columns: 1fr 1fr;
  }

  .objecoes-acao {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: var(--e4) var(--e5);
  }

  .selo-cred {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    gap: var(--e5);
  }

  .selo-corpo {
    justify-items: start;
  }

  .selo-provas {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e4);
  }

  .regime-alerta {
    grid-template-columns: 0.8fr 1.2fr;
    padding: var(--e5);
  }

  .portaria-topo {
    grid-template-columns: 1.45fr 0.55fr;
  }

  .falar {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .zap-fixo span {
    display: inline;
  }

  .zap-fixo {
    right: var(--e4);
    bottom: var(--e4);
    padding: var(--e3) var(--e4);
  }

  .mecanismo {
    grid-template-columns: 1.1fr 0.9fr;
    padding: var(--e5);
  }

  .painel-grade {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* ============================================================
   1200px
   ============================================================ */

/* ============================================================
   992px, o ponto em que o hero cabe em duas colunas
   ============================================================

   A 768px a coluna de texto ficava com 391px e a manchete quebrava
   em seis linhas. Duas colunas só valem a pena quando a primeira
   tem largura de manchete. */

@media (min-width: 62rem) {
  .hero-grade {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--e5);
  }

  .documento {
    max-width: none;
  }
}

@media (min-width: 75rem) {
  .planos {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Seis colunas para sete cartões: os dois de destaque ocupam metade
     cada um na primeira linha, e os cinco restantes dividem a segunda
     em terços, três numa linha e dois na outra. Com dez colunas o
     cartão comum ficava com um quinto da largura, o texto quebrava
     em quatro linhas e a segunda leva ficava três vezes mais alta
     que a primeira: a "mesma caixa" do comentário acima só existe se
     a largura das duas fileiras for parecida. */
  .beneficios {
    grid-template-columns: repeat(6, 1fr);
  }

  .beneficio {
    grid-column: span 2;
  }

  .beneficio.destaque {
    grid-column: span 3;
  }

  .comparativo {
    font-size: 0.9375rem;
  }

  /* ---------- A mesma baseline de preço ----------
     Os seis cartões dividem as linhas da grade externa, então o
     bloco de preço de um cartão começa na MESMA altura do bloco
     do vizinho, mesmo com nomes de tamanhos diferentes. É o que
     `subgrid` resolve e nenhuma altura fixa resolveria. */
  .plano {
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: var(--e3);
  }

  .menu-abre {
    display: none;
  }

  /* No desktop a linha do topo NÃO quebra. Sem isto, a nav com seis
     itens empurrava o botão do cadastro para a segunda linha, embaixo
     da logomarca. O que cede é a nav, que encolhe. */
  .topo-linha {
    flex-wrap: nowrap;
  }

  /* No desktop a nav volta para o meio da linha, entre a marca e o
     CTA, e deixa de ocupar uma faixa própria. */
  .menu {
    display: block;
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .topo-acoes {
    order: 3;
  }

  .menu ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e2) var(--e3);
  }

  .menu ul {
    display: flex;
    gap: var(--e4);
  }

  .menu a {
    padding: 0;
    font-size: 0.875rem;
  }

  .menu-entrar {
    padding-left: var(--e3);
    border-left: 1px solid var(--linha);
  }

  .topo-linha {
    min-height: 4.25rem;
  }
}

/* ============================================================
   FAIXA DE INDICAÇÃO
   ============================================================

   Fica ACIMA do cabeçalho fixo, não dentro dele: rola para fora
   de vista no scroll, e o cabeçalho sticky assume o topo sozinho,
   igual ao comportamento do Nibo que inspirou este componente. */

.faixa-indicacao {
  position: sticky;
  top: 0;
  z-index: 11;
  background: var(--vermelho-vivo);
  color: var(--branco);
}

.faixa-indicacao-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  padding-block: var(--e2);
  font-size: 0.8125rem;
  text-align: center;
}

.faixa-indicacao-linha p {
  margin: 0;
}

.faixa-indicacao-cta {
  padding: 0.375rem 0.875rem;
  background: var(--amarelo);
  color: var(--azul-escuro);
  font-weight: var(--forte);
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}

/* ============================================================
   POP UP DE ENTRADA
   ============================================================

   Some por padrão via `hidden` no HTML, e só aparece depois do
   `ligarPopupEntrada` confirmar que a sessão ainda não fechou.
   Sem JavaScript, o pop up nunca chega a mostrar: não é conteúdo
   essencial, é oferta comercial, então falhar fechado é o certo. */

.popup-entrada {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3);
  background: rgb(13 24 92 / 72%);
}

.popup-entrada[hidden] {
  display: none;
}

.popup-entrada-caixa {
  position: relative;
  width: 100%;
  max-width: 42.5rem;
  max-height: 90vh;
  overflow: hidden auto;
  background: var(--azul-palido);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(13 24 92 / 35%);
}

.popup-entrada-fecha {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul-escuro);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  box-shadow: var(--shadow-card);
}

.popup-entrada-grade {
  display: grid;
}

/* O painel escuro com a marca. É a mesma composição da capa da
   apresentação institucional: nuvem, nome e o slogan do produto
   embaixo, não só o símbolo isolado. */
.popup-entrada-marca {
  display: grid;
  place-items: center;
  padding: var(--e4);
  background: var(--vermelho-vivo);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* O selo redondo, mesma linguagem visual do selo do plano grátis:
   amarelo, borda tracejada, levemente girado. Aqui carrega a
   chamada, não o nome do plano. */
.popup-entrada-chamada {
  font-size: clamp(0.9375rem, 3.4vw, 1.25rem);
  font-weight: var(--forte);
  line-height: 1.2;
  color: var(--branco);
  text-align: left;
  letter-spacing: -0.01em;
}

.popup-entrada-lista-painel {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--azul-palido);
  border-radius: 0 0 var(--radius) var(--radius);
}

.popup-entrada-logo {
  width: 8.9rem;
  height: auto;
  justify-self: center;
}

.popup-entrada-lista {
  display: grid;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.popup-entrada-lista li {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.8125rem;
  font-weight: var(--forte);
  line-height: 1.3;
  color: var(--azul-escuro);
}

.popup-entrada-lista li::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-size: 0.6875rem;
  font-weight: var(--forte);
}

.popup-entrada-lista b {
  font-weight: var(--forte);
  color: var(--azul-escuro);
}

.popup-entrada-caixa .btn {
  margin: var(--e3);
  width: calc(100% - 2 * var(--e3));
}

@media (min-width: 34rem) {
  .popup-entrada-grade {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
  }

  .popup-entrada-marca {
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .popup-entrada-lista-painel {
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .popup-entrada-lista li {
    white-space: nowrap;
  }
}