/* ============================================================
   MUNDO | Landing pages — o móvel das LPs
   ------------------------------------------------------------
   As peças que TODA landing page usa, na ordem em que aparecem:

     0 · a barra de campanha (logo e um botão, sem menu)
     1 · a abertura, direto na mesa
     2 · a folha: cabeçalho de ficha, texto e listas
     3 · a trilha de etapas
     4 · as fichinhas de prova e a anotação na margem
     5 · o anexo grampeado
     6 · a ficha de dúvidas
     7 · a carta, o fecho de toda LP
     8 · o rodapé enxuto

   Depende de /ferramentas/_motor/sistema.css, que traz as cores,
   as fontes, o papel, os botões e as etiquetas. Depende também
   de /assets/nav.css, de onde vem o desenho da barra.

   ATENÇÃO A QUEM MEXER NO sistema.css: ele nasceu para as
   ferramentas, mas as três landing pages carregam ele também.
   Mudou lá, mudou aqui.

   POR QUE A BARRA NÃO TEM MENU
   Estas páginas são destino de campanha paga. Landing page com
   quinze saídas no topo perde no meio da leitura quem chegou
   pelo anúncio. Então a barra é a mesma do site no desenho, e
   tem só duas saídas: o logo, que volta para a home, e o botão,
   que abre o WhatsApp.
   ============================================================ */

/* A largura da home, não a das ferramentas. Sem isto a barra
   muda de largura quando a pessoa vai da home para a LP. */
:root{
  --container:1180px;
  --secao:clamp(2.75rem,5vw,4.5rem);
  --folio-topo:clamp(20px,3vw,30px);
}

/* ============================================================
   0 · A BARRA DE CAMPANHA
   ------------------------------------------------------------
   O nav.css esconde o botão em tela de celular, porque lá quem
   aparece é o ☰. Como aqui não existe ☰, o botão precisa
   continuar à vista: ele é a única ação do topo.
   ============================================================ */
.navbar--campanha .nav-cta{margin-left:auto}

@media(max-width:900px){
  .navbar--campanha .nav-cta{display:inline-flex}
  .navbar--campanha{padding:8px 8px 8px 15px;gap:10px}
  .navbar--campanha .nav-logo svg{height:21px}
  .navbar--campanha .nav-cta{font-size:.82rem;padding:9px 13px}
}
@media(max-width:400px){
  .navbar--campanha .nav-cta{font-size:.76rem;padding:9px 11px;gap:6px}
  .navbar--campanha .nav-cta svg{display:none}
}

/* ============================================================
   1 · A ABERTURA — sobre a mesa, antes de qualquer folha
   ============================================================ */
.abertura{padding:clamp(6.5rem,11vw,9rem) 0 clamp(2.5rem,5vw,4rem)}

.abertura-cabeco{
  display:flex;align-items:center;gap:14px;
  border-bottom:1.5px solid var(--fio-forte);
  padding-bottom:9px;margin-bottom:clamp(1.6rem,3.4vw,2.5rem);
}
.abertura-cabeco .fim{margin-left:auto;color:var(--tinta-45)}
@media(max-width:560px){.abertura-cabeco .fim{display:none}}

/* Todo filho de grade precisa de min-width:0. Sem isto o
   navegador se recusa a encolher a coluna abaixo da menor
   largura do conteúdo, e uma tabela larga empurra a página
   inteira para o lado no celular. */
.abertura-topo,.sobre-grade{display:grid}
.abertura-topo > *,.sobre-grade > *,.conta-grade > *,.situacao-grade > *{min-width:0}
.abertura-topo{gap:clamp(2rem,4vw,3rem)}
.abertura h1{
  font-size:clamp(2.2rem,calc(1.8rem + 3.1vw),4.1rem);line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'opsz' 96;text-wrap:balance;
}
/* O verde marca a metade que carrega o argumento. */
.abertura h1 em{font-style:normal;color:var(--verde-vivo)}
@media(max-width:560px){.abertura h1 br{display:none}}

.abertura-sub{
  margin-top:clamp(1.1rem,2.2vw,1.7rem);
  font-size:clamp(1.04rem,calc(1.03rem + .06vw),1.11rem);
  line-height:1.58;color:var(--tinta-70);max-width:50ch;
}
/* ── A promessa, entre o problema e o botão ────────────────
   O parágrafo de cima conta o que acontece sem a Mundo. Esta
   linha diz o que a Mundo faz. Usa a mesma régua da margem da
   .nota-margem, mas ao contrário: fio cheio em vez de fio
   fraco, tinta em vez de cinza. É onde o olho para antes de
   chegar no botão.                                          */
.abertura-frase{
  margin-top:clamp(1.1rem,2.2vw,1.6rem);
  padding-left:13px;border-left:2px solid var(--terra);
  font-size:clamp(1.06rem,calc(1.01rem + .22vw),1.22rem);
  line-height:1.5;font-weight:600;color:var(--tinta);max-width:40ch;
}

.abertura-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(1.3rem,2.5vw,1.9rem)}
@media(max-width:520px){
  .abertura-ctas{flex-direction:column;align-items:stretch}
  .abertura-ctas .btn{width:100%}
}
/* A linha embaixo do botão: o que acontece quando a pessoa clica. */
.abertura-apoio{
  display:block;margin-top:14px;font-size:.93rem;line-height:1.5;
  color:var(--tinta-45);max-width:46ch;
}
.abertura-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:clamp(1.1rem,2vw,1.5rem)}
/* Etiqueta comprida não cabe numa linha de celular, e o
   sistema.css proíbe a quebra por padrão. Aqui a quebra é
   liberada: uma etiqueta de duas linhas é melhor que uma
   página que rola para o lado. */
.abertura-tags .etq{white-space:normal;line-height:1.55;text-align:left}

/* No computador a abertura tem duas colunas: a frase manda na
   esquerda, a figura assenta na direita. */
.abertura-fig{display:none;margin:0}
@media(min-width:1024px){
  .abertura-topo{
    grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
    column-gap:clamp(30px,4vw,58px);align-items:center;
  }
  /* Com a manchete de cinco linhas, centralizar deixava a figura
     começando quase na altura do parágrafo. Aqui ela sobe e
     encosta no topo do texto. Só esta página usa o --larga. */
  .abertura-topo--larga{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start}
  .abertura h1{font-size:clamp(2.9rem,calc(1.98rem + 2.3vw),4rem);letter-spacing:-.032em}
  .abertura h1 br{display:none}
  .abertura-sub{max-width:44ch;font-size:1.1rem}
  .abertura-fig{display:block;justify-self:end;width:100%;max-width:412px}
  .abertura-topo--larga{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
}

.fig-cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;color:var(--tinta-45);margin-bottom:8px;
}

/* ============================================================
   2 · A FOLHA — cabeçalho de ficha, texto e listas
   ============================================================ */
.secao{padding:var(--secao) 0}

/* O cabeçalho da folha: rótulo em cima, título grande embaixo,
   e o número da ficha encostado na margem direita. */
.cab-ficha{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;
  padding:clamp(24px,3.4vw,36px) var(--pad-dir) 16px var(--margem);
  border-bottom:1.5px solid var(--fio-forte);
}
.cab-ficha h2{
  font-size:clamp(1.68rem,calc(1.66rem + .78vw),2.35rem);
  font-variation-settings:'wdth' 88;letter-spacing:-.034em;
  max-width:26ch;margin-top:11px;
}
.cab-ficha h2 em{font-style:normal;color:var(--verde-vivo)}
.cab-meta{text-align:right;color:var(--tinta-45);line-height:1.9;white-space:nowrap}
.cab-folio{display:block}
@media(max-width:640px){.cab-ficha{grid-template-columns:1fr}}

/* Cabeçalho de seção que fica na mesa, sem folha em volta. */
.cab-mesa{
  border-bottom:1.5px solid var(--fio-forte);padding-bottom:12px;
  margin-bottom:clamp(1.4rem,2.8vw,2.2rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;
}
.cab-mesa h2{
  font-size:clamp(1.68rem,calc(1.66rem + .78vw),2.35rem);
  font-variation-settings:'wdth' 88;letter-spacing:-.034em;margin-top:11px;
}
.cab-mesa h2 em{font-style:normal;color:var(--verde-vivo)}
@media(max-width:640px){.cab-mesa{grid-template-columns:1fr}}

/* O folio no canto do papel, à altura da linha de cima. */
.bloco-folio{
  position:absolute;top:var(--folio-topo);right:var(--pad-dir);
  color:var(--tinta-45);z-index:2;
}

/* ── O texto dentro da folha ── */
.txt{font-size:1.03rem;line-height:1.64;color:var(--tinta-70);max-width:62ch}
.txt + .txt{margin-top:.9rem}
/* O .txt só herda margem de outro .txt. Depois de uma figura ele
   nascia colado, e a frase que fecha o raciocínio parecia legenda
   do desenho em vez de parágrafo. */
.buscas + .txt,
.compara + .txt{margin-top:clamp(18px,2.6vw,26px)}
.txt strong{color:var(--tinta);font-weight:600}
.txt--lede{font-size:clamp(1.06rem,calc(1.05rem + .06vw),1.14rem);color:var(--tinta)}
/* A frase que fecha o raciocínio. Mesma régua da margem que a
   .nota-margem usa, ao contrário: fio cheio e tinta cheia, porque
   esta afirma em vez de ressalvar. */
.txt--frase{
  padding-left:13px;border-left:2px solid var(--terra);
  font-size:clamp(1.04rem,calc(1rem + .18vw),1.14rem);
  line-height:1.5;font-weight:600;color:var(--tinta);max-width:52ch;
}
.txt + .txt--frase{margin-top:clamp(16px,2.4vw,22px)}

/* ── A lista com visto: o que está incluso ── */
.lista-check{display:grid}
.lista-check li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:13px;align-items:start;
  padding:12px 0;border-bottom:1px dashed var(--fio-medio);
  font-size:.96rem;line-height:1.52;color:var(--tinta-70);
}
.lista-check li:first-child{border-top:1px dashed var(--fio-medio)}
.lista-check li:last-child{border-bottom:0}
.visto{
  width:20px;height:20px;flex:none;margin-top:1px;
  border:1.4px solid var(--verde-vivo);border-radius:2px;
  display:grid;place-items:center;color:var(--verde-vivo);
}
.visto svg{width:11px;height:11px}

/* ── A anotação na margem: ressalva, fonte, aviso ──────────
   Fio fino à esquerda e letra menor. É o que alguém escreveu
   ao lado do texto, não o texto.                            */
.nota-margem{
  margin-top:clamp(16px,2.4vw,22px);
  padding-left:13px;border-left:2px solid var(--fio-terra);
  font-size:.875rem;line-height:1.6;color:var(--tinta-70);max-width:60ch;
}
.nota-margem strong{color:var(--tinta);font-weight:600}
.nota-margem .mono-s{display:block;color:var(--terra);margin-bottom:7px}

/* ── O bloco verde de fecho: a conclusão da seção ── */
.fecho-verde{
  margin-top:clamp(14px,2vw,20px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px);align-items:start;
  background:var(--verde);color:#F7F2E6;border-radius:2px;
  padding:clamp(22px,3vw,30px) clamp(20px,2.6vw,34px);
}
.fecho-verde-ic{
  width:38px;height:38px;flex:none;border:1.5px solid var(--terra-viva);border-radius:2px;
  display:grid;place-items:center;color:var(--terra-viva);
}
.fecho-verde-ic svg{width:19px;height:19px}
.fecho-verde b{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.12rem,calc(1rem + .64vw),1.55rem);
  letter-spacing:-.03em;line-height:1.18;color:#F7F2E6;max-width:30ch;
}
.fecho-verde p{margin-top:8px;font-size:.965rem;line-height:1.55;color:rgba(247,242,230,.78);max-width:58ch}
.fecho-verde p strong{color:#F7F2E6;font-weight:600}
@media(max-width:620px){.fecho-verde{grid-template-columns:1fr;gap:12px}}

/* ============================================================
   3 · A TRILHA — etapas numa régua, com o número na margem
   ============================================================ */
.trilha{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3.4vw,44px);margin-top:clamp(30px,4.4vw,50px);padding-top:36px;
}
.trilha--fundo-folha .etapa-no{background:var(--folha)}
.trilha-fio{position:absolute;left:0;right:0;top:11px;border-top:1px solid var(--fio-medio)}
.etapa{position:relative;min-width:0}
.etapa-no{
  position:absolute;top:-33px;left:0;display:grid;place-items:center;
  color:var(--terra);background:var(--folha);padding:0 9px 0 0;line-height:0;
}
.etapa-num{
  display:block;font-family:var(--fs);font-weight:700;
  font-size:clamp(2.3rem,calc(2.3rem + 1.1vw),3.3rem);
  line-height:.86;color:var(--terra);letter-spacing:-.022em;font-variant-numeric:tabular-nums;
}
.etapa-quando{
  display:block;margin-top:13px;font-family:var(--fm);font-size:.5rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-45);
}
.etapa h3,.etapa h4{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(1.12rem,calc(1.12rem + .1vw),1.22rem);letter-spacing:-.028em;margin-top:8px;
}
.etapa p{font-size:.965rem;line-height:1.58;color:var(--tinta-70);margin-top:8px;max-width:34ch}

@media(max-width:820px){
  .trilha{grid-template-columns:1fr;gap:30px;padding-top:0;padding-left:34px}
  .trilha-fio{left:7px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--fio-medio)}
  .etapa-no{top:2px;left:-34px;padding:9px 0}
}

/* ============================================================
   4 · AS FICHINHAS DE PROVA — papel solto sobre a mesa
   ============================================================ */
.provas{display:grid;gap:12px;margin-top:clamp(16px,2.4vw,22px)}
@media(min-width:561px){.provas--2{grid-template-columns:1fr 1fr}}
@media(min-width:701px){
  .provas--3{grid-template-columns:repeat(3,1fr)}
  .provas--4{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px) and (min-width:441px){
  .provas--3,.provas--4{grid-template-columns:1fr 1fr}
}

.prova{
  position:relative;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha-2);box-shadow:var(--papel-3);
  padding:14px 16px 15px;transform:rotate(-.5deg);
}
.prova:nth-child(2n){transform:rotate(.6deg)}
.prova:nth-child(3n){transform:rotate(-.3deg)}
.prova .mono-s{color:var(--tinta-45);display:block;margin-bottom:7px}
.prova b{font-family:var(--fs);font-weight:700;font-size:1.32rem;line-height:1.06;display:block;letter-spacing:-.015em}
.prova b .accent{color:var(--verde-vivo)}
.prova .sub{display:block;font-size:.78rem;color:var(--tinta-45);margin-top:6px;line-height:1.45}
.prova p{font-size:.895rem;line-height:1.5;color:var(--tinta-70);margin-top:9px}
.prova p strong{color:var(--tinta);font-weight:600}
/* fichinha com o número de fora escrito pequeno ao lado */
.prova-de{font-family:var(--fc);font-size:.79rem;font-weight:400;color:var(--tinta-45);letter-spacing:0}

/* ── O carimbo redondo ── */
.selo{
  width:clamp(112px,13vw,152px);aspect-ratio:1;
  border:2.5px solid var(--terra);border-radius:50%;
  display:grid;place-items:center;text-align:center;color:var(--terra);
  transform:rotate(-9deg);flex:none;
  box-shadow:inset 0 0 0 4px var(--folha), inset 0 0 0 5.5px var(--terra);
}
.selo span{
  font-family:var(--fm);font-size:clamp(.5rem,.62vw,.55rem);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.85;
}
.selo--g{width:clamp(126px,15vw,176px)}
.selo--g span{font-size:clamp(.55rem,.68vw,.6rem);line-height:1.95}

/* ============================================================
   5 · O ANEXO GRAMPEADO — um papel preso em cima do outro
   ============================================================ */
.anexo{
  position:relative;background:var(--folha-2);
  border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-3);transform:rotate(-.7deg);
}
.anexo--r{transform:rotate(.8deg)}
.anexo--reto{transform:none}
.clipe{
  position:absolute;top:-12px;left:22px;width:15px;height:27px;
  border:1.6px solid var(--fio-medio);border-radius:8px 8px 3px 3px;
  border-bottom-color:transparent;z-index:3;pointer-events:none;
}
.anexo-cab{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--fio-medio);background:var(--folha);
}
.anexo-cab .mono-s{color:var(--terra)}
.anexo-cab h3{font-family:var(--fd);font-weight:800;font-size:1.04rem;letter-spacing:-.026em;line-height:1.16;width:100%}
.anexo-cab p{width:100%;margin-top:5px;font-size:.885rem;line-height:1.5;color:var(--tinta-70)}
.anexo-corpo{padding:14px 15px}
.anexo-leg{
  font-family:var(--fc);font-size:.845rem;line-height:1.55;color:var(--tinta-70);
  padding:12px 15px;border-top:1px dashed var(--fio-medio);
}

/* ============================================================
   6 · A FICHA DE DÚVIDAS
   ------------------------------------------------------------
   Uma folha só, cada pergunta uma linha. Abre e fecha com o
   <details> do próprio HTML: sem uma linha de JavaScript, e
   funciona no teclado de graça.

   O atributo name="duvidas" faz o navegador fechar uma quando
   a outra abre. Navegador antigo ignora e deixa as duas
   abertas, que é um jeito pior mas não é um jeito quebrado.
   ============================================================ */
.duvida{border-bottom:1px dashed var(--fio-medio)}
.duvida:last-of-type{border-bottom:0}

.duvida > summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  cursor:pointer;list-style:none;
  padding:clamp(15px,2.2vw,19px) var(--pad-dir) clamp(15px,2.2vw,19px) var(--margem);
  transition:background .16s var(--ease);
}
.duvida > summary::-webkit-details-marker{display:none}
.duvida > summary:hover{background:var(--folha-2)}
.duvida > summary:focus-visible{outline:2.5px solid var(--terra);outline-offset:-3px}

.duvida-p{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1rem,calc(.95rem + .3vw),1.19rem);
  letter-spacing:-.026em;line-height:1.26;color:var(--tinta);
}
/* O sinal: um + que gira e vira ×. */
.duvida-sinal{
  width:30px;height:30px;flex:none;
  border:1.3px solid var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;color:var(--terra);background:var(--folha-2);
  transition:transform .22s var(--ease),border-color .18s,background .18s;
}
.duvida-sinal svg{width:13px;height:13px}
.duvida > summary:hover .duvida-sinal{border-color:var(--fio-terra);background:var(--terra-fraca)}
.duvida[open] .duvida-sinal{transform:rotate(45deg)}

.duvida-corpo{
  padding:0 var(--pad-dir) clamp(18px,2.6vw,24px) var(--margem);
}
.duvida-corpo p{font-size:.965rem;line-height:1.6;color:var(--tinta-70);max-width:64ch}
.duvida-corpo p + p{margin-top:.8rem}
.duvida-corpo strong{color:var(--tinta);font-weight:600}
.duvida-corpo a{color:var(--verde-vivo);border-bottom:1.5px solid var(--verde-claro)}
.duvida-corpo a:hover{color:var(--terra);border-bottom-color:var(--fio-terra)}

@media(prefers-reduced-motion:reduce){
  .duvida-sinal{transition:none}
}

/* ============================================================
   7 · A CARTA — o fecho de toda LP
   ------------------------------------------------------------
   A peça mais formal do sistema: moldura dupla de certificado,
   ação de um lado, carimbo do outro.
   ============================================================ */
.carta{
  position:relative;
  background:linear-gradient(178deg,var(--folha) 0%,var(--folha) 58%,#F6EFDF 100%);
  border:1px solid var(--fio-medio);border-radius:2px;box-shadow:var(--papel-2);
  padding:clamp(30px,4.8vw,66px);
}
.carta::before{content:'';position:absolute;inset:clamp(11px,1.5vw,18px);border:1px solid var(--fio-medio);border-radius:1px;pointer-events:none}
.carta::after{content:'';position:absolute;inset:clamp(16px,2.1vw,25px);border:1px solid var(--fio-terra);border-radius:1px;pointer-events:none}
.carta > *{position:relative;z-index:1}
.carta-folio{position:absolute;top:clamp(24px,3.4vw,44px);right:clamp(30px,4.8vw,66px);color:var(--tinta-45);z-index:2}

.carta-cab{max-width:64ch}
.carta-cab h2{
  font-size:clamp(1.78rem,calc(1.7rem + 1.5vw),3rem);
  font-variation-settings:'wdth' 85;letter-spacing:-.04em;line-height:1.03;margin-top:14px;
}
.carta-cab h2 em{font-style:normal;color:var(--verde-vivo)}
@media(max-width:560px){.carta-cab h2 br{display:none}}

.carta-fecho{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,52px);align-items:center;
  margin-top:clamp(28px,4.4vw,46px);padding-top:clamp(24px,3.4vw,36px);
  border-top:1px solid var(--fio-medio);
}
.carta-acao{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.carta-nota{font-size:.94rem;line-height:1.55;color:var(--tinta-45);max-width:48ch}
/* A mesma nota muda de papel quando sobe para o cabeçalho: embaixo
   do botão ela é letra miúda, e o cinza claro está certo; embaixo
   da manchete ela é subtítulo, e nessa altura o cinza claro some.
   Aqui ela ganha o corpo e a tinta dos outros subtítulos da página.
   Escrito assim, a nota das outras três LPs não muda. */
.carta-cab .carta-nota{
  margin-top:clamp(14px,2vw,20px);
  font-size:clamp(1rem,calc(.98rem + .12vw),1.1rem);
  line-height:1.55;color:var(--tinta-70);max-width:52ch;
}
.carta-nota--mono{
  font-family:var(--fm);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-45);line-height:1.85;max-width:44ch;
}
.btn--xl{font-size:.735rem;padding:20px 32px;letter-spacing:.16em;box-shadow:var(--papel-1)}
.btn--tinta.btn--xl{box-shadow:var(--papel-1),inset 0 0 0 1px rgba(247,242,230,.22)}
.btn--tinta.btn--xl:hover{box-shadow:var(--papel-2),inset 0 0 0 1px rgba(247,242,230,.3)}

@media(min-width:901px){
  /* o carimbo é pressado por cima da moldura */
  .carta-fecho .selo--g{margin-right:clamp(-60px,-4.4vw,-22px)}
}
@media(max-width:900px){
  .carta-fecho{grid-template-columns:1fr;justify-items:start;gap:28px}
}
@media(max-width:560px){
  .carta-folio{display:none}
  .btn--xl{width:100%;font-size:.68rem;padding:18px 20px;letter-spacing:.13em}
}

/* ============================================================
   8 · O RODAPÉ ENXUTO
   ------------------------------------------------------------
   A LP não recebe o mapa de quatro colunas do resto do site,
   pelo mesmo motivo que a barra não tem menu: quem chegou pelo
   anúncio não precisa de quinze convites para sair.
   ============================================================ */
.rodape-lp{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:start;
}
@media(max-width:720px){.rodape-lp{grid-template-columns:1fr;gap:28px}}

.rodape-lp-links h5{
  font-family:var(--fm);font-size:.58rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--terra);
  padding-bottom:9px;border-bottom:1.5px solid var(--fio-forte);
}
.rodape-lp-links ul{list-style:none}
.rodape-lp-links li{border-bottom:1px dashed var(--fio-medio)}
.rodape-lp-links li:last-child{border-bottom:0}
.rodape-lp-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;font-size:.9rem;color:var(--tinta-70);
  transition:color .2s,padding-left .2s var(--ease);
}
.rodape-lp-links a:hover{color:var(--tinta);padding-left:5px}
.rodape-saida{
  flex:none;font-family:var(--fm);font-size:.62rem;font-weight:600;color:var(--tinta-25);
}
.rodape-lp-links a:hover .rodape-saida{color:var(--terra)}

/* ============================================================
   A FICHA "QUEM FAZ" — a foto presa na folha
   ============================================================ */
.sobre-grade{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(20px,4vw,46px);align-items:start;
  padding:clamp(22px,3.2vw,34px) var(--pad-dir) clamp(26px,3.6vw,38px) var(--margem);
}
@media(max-width:900px){.sobre-grade{grid-template-columns:1fr}}

.sobre-foto{
  position:relative;background:var(--folha-2);
  border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-1);padding:11px 11px 0;transform:rotate(-.9deg);
}
.sobre-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 16%;border-radius:1px}
.sobre-legenda{display:flex;align-items:center;gap:9px;padding:11px 2px}
.sobre-legenda .mono-s{color:var(--tinta-45)}

.sobre-grade h2{
  font-size:clamp(1.6rem,calc(1.55rem + .7vw),2.2rem);
  font-variation-settings:'wdth' 88;letter-spacing:-.034em;
  margin-top:11px;margin-bottom:clamp(14px,2vw,18px);max-width:24ch;
}
.sobre-grade h2 em{font-style:normal;color:var(--verde-vivo)}
/* a fila de etiquetas dentro de uma anotação de margem */
.nota-margem .abertura-tags{margin-top:12px}

@media(max-width:900px){
  .sobre-grade{gap:26px}
  .sobre-foto{width:76%;max-width:300px}
}
/* No celular a foto ocupa quase a largura da folha e passa por
   baixo do número da ficha, que fica solto no canto de cima. A
   folha ganha um respiro maior no topo para o número ter a linha
   dele só para ele. */
@media(max-width:560px){
  .sobre-grade{padding-top:clamp(46px,13vw,54px)}
}
@media(max-width:430px){.sobre-foto{width:84%}}

/* ============================================================
   A PÁGINA DE BUSCA EM MINIATURA
   ------------------------------------------------------------
   A tela que o paciente vê quando pesquisa, desenhada em papel:
   um resultado com dono e um resultado vazio. Usada nas três
   landing pages, porque é o documento do qual todas elas falam.
   ============================================================ */
.busca-mini{
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-2);overflow:hidden;transform:rotate(-.4deg);
}
.busca-mini-barra{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-bottom:1px solid var(--fio-medio);background:var(--folha-2);
}
.busca-mini-campo{
  display:inline-flex;align-items:center;gap:9px;flex:1;min-width:0;
  font-family:var(--fm);font-size:.575rem;letter-spacing:.02em;color:var(--tinta-70);
  border:1px solid var(--fio-medio);border-radius:50px;padding:7px 13px;background:var(--folha);
}
.busca-mini-campo svg{opacity:.55;flex:none}
.busca-mini-campo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.busca-mini-linha{padding:13px 15px;border-bottom:1px solid var(--fio-medio);position:relative}
.busca-mini-linha:last-child{border-bottom:0}
.busca-mini-url{
  display:flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:.535rem;letter-spacing:.02em;color:var(--verde-vivo);
  overflow-wrap:anywhere;
}
.busca-mini-url svg{flex:none;opacity:.75}
.busca-mini-tit{
  font-family:var(--fd);font-weight:700;font-size:1.02rem;
  letter-spacing:-.024em;margin-top:5px;line-height:1.16;
}
.busca-mini-desc{font-size:.845rem;line-height:1.45;color:var(--tinta-70);margin-top:6px}
.busca-mini-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}

/* O resultado vazio: hachurado, como campo não preenchido. */
.busca-mini-linha--vazia{
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(19,36,27,.028) 9px 18px);
}
.busca-mini-linha--vazia .busca-mini-url,
.busca-mini-linha--vazia .busca-mini-tit,
.busca-mini-linha--vazia .busca-mini-desc{color:var(--tinta-45)}
.marca-x{
  position:absolute;top:12px;right:13px;width:27px;height:27px;
  border:1.6px solid var(--terra);border-radius:3px;
  display:grid;place-items:center;color:var(--terra);
}
.marca-x svg{width:13px;height:13px}


/* A barra de busca sozinha, sem o resultado embaixo. Serve para
   mostrar o que a pessoa digita, e nada mais. */
.busca-linha{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--fio-medio);border-radius:50px;
  padding:9px 15px;background:var(--folha);box-shadow:var(--papel-3);
}
.busca-linha svg{opacity:.5;flex:none;color:var(--tinta-45)}
.busca-linha span{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.02em;
  color:var(--tinta-70);line-height:1.5;
}
.buscas{display:grid;gap:9px;margin-top:clamp(16px,2.4vw,22px)}
.buscas .busca-linha:nth-child(2){margin-left:clamp(0px,2vw,26px)}
.buscas .busca-linha:nth-child(3){margin-left:clamp(0px,4vw,52px)}
@media(max-width:620px){.buscas .busca-linha{margin-left:0!important}}

/* ============================================================
   O GRÁFICO DE PONTOS
   ------------------------------------------------------------
   Quarenta quadradinhos, e os que valem vêm pintados. Duas
   coisas ao mesmo tempo, e as duas importam:

     1. dá para contar. "30 dos 40" vira uma coisa que a pessoa
        vê sem precisar acreditar em mim;
     2. mostra que a amostra é 40, que é pequena. Um gráfico de
        pizza com 75% esconderia isso. Este não deixa.

   É o mesmo motivo pelo qual a página escreve "30 dos 40" em
   vez de "75%": o denominador faz parte da verdade.
   ============================================================ */
.pontos{
  display:grid;grid-template-columns:repeat(10,1fr);
  gap:3px;margin:12px 0 0;max-width:132px;
}
.pontos i{
  display:block;aspect-ratio:1;border-radius:1px;
  border:1px solid var(--fio-medio);background:var(--folha);
}
.pontos i[data-on]{background:var(--terra);border-color:var(--terra)}
.pontos--verde i[data-on]{background:var(--verde-vivo);border-color:var(--verde-vivo)}
.pontos-leg{
  display:block;margin-top:9px;font-family:var(--fm);font-size:.5rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-25);
}

/* ============================================================
   A CITAÇÃO
   ------------------------------------------------------------
   A frase que carrega a seção, tirada do meio do texto e posta
   em pé sozinha. Serve para quem passa o olho e não lê: se ler
   só isto, entendeu a seção.

   Serifa em itálico é como o site marca gente falando.

   O tamanho é de propósito menor que o do título da ficha. Ela
   é a segunda voz da seção, não a primeira: se ficar do tamanho
   da manchete as duas brigam e a seção perde o eixo.
   ============================================================ */
.citacao{
  position:relative;margin-top:clamp(20px,3vw,30px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,30px);align-items:center;
  padding:clamp(18px,2.4vw,25px) clamp(17px,2.1vw,25px) clamp(18px,2.4vw,25px) clamp(38px,4vw,52px);
  border-top:1.5px solid var(--fio-forte);border-bottom:1.5px solid var(--fio-forte);
  background:var(--folha-2);
}
/* O alvo da marca, grande e apagado, ocupando a metade que
   sobrava à direita da frase. Não é enfeite solto: é o mesmo
   sinal que abre cada rótulo da página, aqui em tamanho de
   carimbo. */
.citacao-marca{
  flex:none;width:clamp(52px,7vw,88px);aspect-ratio:1;
  color:var(--terra);opacity:.16;transform:rotate(-9deg);
}
.citacao-marca svg{width:100%;height:100%;display:block}
@media(max-width:720px){.citacao{grid-template-columns:1fr}.citacao-marca{display:none}}
/* a aspa de fundo: sinal de que aqui tem alguém falando */
.citacao::before{
  content:'\201C';position:absolute;left:clamp(9px,1.3vw,15px);top:clamp(-4px,-.3vw,0px);
  font-family:var(--fs);font-size:clamp(3.4rem,5.2vw,4.9rem);line-height:1;
  color:var(--terra);opacity:.2;pointer-events:none;
}
.citacao p{
  font-family:var(--fs);font-style:italic;
  font-size:clamp(1.14rem,calc(.98rem + .72vw),1.58rem);
  line-height:1.32;letter-spacing:-.015em;color:var(--verde);max-width:37ch;
}
.citacao p strong{font-weight:700;color:var(--verde-vivo);font-style:italic}
.citacao--terra p{color:var(--terra)}
.citacao--terra p strong{color:var(--terra)}

/* ============================================================
   A MATRIZ DA ENTREGA
   ------------------------------------------------------------
   Nove itens em três grupos de três. A grade espelha exatamente
   essa estrutura: cada grupo é uma coluna, cada item é uma linha.
   Ler da esquerda para a direita é ler a linha do tempo que os
   próprios nomes dos grupos anunciam, de antes de investir até o
   acompanhamento. O layout não ilustra o conteúdo, ele é o
   conteúdo.

   Nove itens numa pilha seriam nove telas de rolagem. Em três
   colunas são três, e o olho pega os três grupos de uma vez antes
   de escolher onde ler.

   Cada item tem o seu desenho, no mesmo traço dos outros símbolos
   da casa. Verde é a cor do que passa e do que está incluído em
   todo o site, então é a cor dos nove.

   Os fios entre as colunas são o fundo da grade aparecendo por um
   vão de 1px, e não bordas ligadas caso a caso.
   ============================================================ */
.entrega{
  display:grid;gap:1px;margin-top:clamp(20px,3vw,30px);
  background:var(--fio-medio);
  border:1px solid var(--fio-medio);border-radius:2px;
  overflow:hidden;box-shadow:var(--papel-3);
}
.fase{background:var(--folha);min-width:0;display:flex;flex-direction:column}
.fase-cab{
  display:flex;align-items:center;gap:9px;color:var(--terra);
  padding:11px clamp(15px,1.9vw,20px);
  background:var(--folha-2);border-bottom:1px solid var(--fio-medio);
}
.fase-cab .alvo{flex:none}
.fase-lista{display:grid}

/* ── Cada item entregue ──
   O desenho acompanha o título, não o parágrafo. Numa coluna à
   esquerda do item inteiro ele comia 44px da medida do texto e o
   parágrafo caía para 36 letras por linha. Ao lado só do título,
   o parágrafo usa a coluna toda. */
.entregue{padding:clamp(14px,1.8vw,18px) clamp(15px,1.9vw,20px);border-top:1px dashed var(--fio)}
.entregue:first-child{border-top:0}
.entregue-cab{display:flex;align-items:center;gap:11px}
.entregue-ic{
  width:32px;aspect-ratio:1;flex:none;border-radius:2px;
  display:grid;place-items:center;
  color:var(--verde-vivo);background:var(--verde-fraco);
  border:1px solid var(--verde-fio);
}
.entregue-ic svg{width:18px;height:18px;display:block}
.entregue h3{
  font-family:var(--fd);font-weight:800;font-size:1.02rem;
  letter-spacing:-.024em;line-height:1.24;min-width:0;
}
.entregue p{margin-top:9px;font-size:.9rem;line-height:1.56;color:var(--tinta-70);max-width:50ch}

/* ── As três colunas ──
   Só a partir de 1000px, que é onde cada coluna ainda comporta a
   medida de texto que a tipografia pede em layout de mais de uma
   coluna. Abaixo disso a coluna vira uma tira.

   As quatro faixas (o nome do grupo e os três itens) são linhas da
   grade de fora, e cada coluna as herda com subgrid. Sem isso cada
   coluna mede a própria altura e os itens de mesma ordem começam
   em alturas diferentes: numa matriz com divisórias à vista, isso
   lê como desalinho, não como variação. Fica no fim do bloco de
   propósito: precisa vencer as regras acima, que têm a mesma
   força. */
@media(min-width:1000px){
  .entrega{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(3,auto)}
  .fase{display:grid;grid-row:span 4;grid-template-rows:subgrid}
  .fase-lista{grid-row:span 3;grid-template-rows:subgrid}
}

/* ============================================================
   O BLOCO ILUSTRADO
   ------------------------------------------------------------
   Um desenho em cima, um parágrafo embaixo, e um rótulo em
   monoespaçada ligando os dois. É como a página quebra um
   paredão de texto sem cortar uma palavra do texto.
   ============================================================ */
.blocos{display:grid;gap:clamp(16px,2.6vw,26px);margin-top:clamp(20px,3vw,28px)}
@media(min-width:721px){
  /* As três faixas de cada bloco (figura, rótulo, texto) viram três
     linhas da mesma grade, e o .bloco deixa de ser uma caixa. Sem
     isto, uma figura mais alta que a outra desalinha os dois rótulos
     e a folha fica torta. O respiro entre as faixas continua saindo
     das margens que cada uma já tem, por isso o row-gap zera. */
  .blocos--2{
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;
    grid-auto-flow:column;row-gap:0;
  }
  .blocos--2 .bloco{display:contents}
  .blocos--3{grid-template-columns:repeat(3,1fr)}
}
.bloco{display:flex;flex-direction:column;min-width:0}
.bloco-fig{
  background:var(--folha-2);border:1px solid var(--fio-medio);border-radius:2px;
  padding:clamp(14px,2vw,20px);display:grid;place-items:center;
  box-shadow:var(--papel-3);min-height:132px;
}
.bloco-fig svg{width:100%;height:auto;max-width:320px;display:block}

/* ── O extrato da tentativa ────────────────────────────────
   Mora dentro de um .bloco-fig, no lugar do desenho: aqui a
   figura é o próprio argumento. As quatro linhas ficam todas
   vistadas e a coluna da direita fica toda em interrogação.
   Fez tudo, não sabe o que voltou.                          */
.bloco-fig--doc{place-items:stretch}
.extrato{
  width:100%;background:var(--folha);border:1px solid var(--fio-medio);
  border-radius:2px;box-shadow:var(--papel-3);padding:13px 14px;
}
.extrato-fala{
  font-size:.95rem;line-height:1.45;font-weight:600;color:var(--tinta);
  padding-bottom:11px;border-bottom:1px solid var(--fio-medio);
}
.extrato-cab{display:flex;gap:10px;padding:10px 0 6px;color:var(--tinta-45)}
.extrato-cab span:last-child{margin-left:auto;color:var(--terra)}
.extrato-lista{display:grid}
.extrato-lista li{
  display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:7px 0;border-top:1px dashed var(--fio);
  font-size:.895rem;line-height:1.4;color:var(--tinta-70);
}
.extrato-lista .visto{width:16px;height:16px;margin-top:0}
.extrato-lista .visto svg{width:9px;height:9px}
/* A resposta que ninguém tem. */
.extrato-lista b{font-family:var(--fd);font-weight:800;font-size:1.05rem;color:var(--terra);line-height:1}
.bloco-rot{
  display:flex;align-items:center;gap:9px;
  margin-top:13px;padding-bottom:9px;border-bottom:1.5px solid var(--fio-forte);
  color:var(--terra);
}
.bloco-rot b{
  margin-left:auto;font-family:var(--fd);font-weight:800;font-size:.95rem;
  letter-spacing:-.02em;color:var(--tinta-25);
}
.bloco p{margin-top:11px;font-size:.955rem;line-height:1.58;color:var(--tinta-70)}
.bloco p strong{color:var(--tinta);font-weight:600}

/* ============================================================
   O COMPARATIVO — o que acontece se sim, o que acontece se não
   ============================================================ */
.compara{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--fio-medio);border-radius:2px;overflow:hidden;
  box-shadow:var(--papel-3);margin-top:clamp(18px,2.6vw,26px);
}
@media(max-width:640px){.compara{grid-template-columns:1fr}}
.compara-lado{background:var(--folha);padding:clamp(16px,2.2vw,22px);position:relative;min-width:0;
  display:flex;flex-direction:column}
.compara-lado + .compara-lado{border-left:1px solid var(--fio-medio)}
@media(max-width:640px){.compara-lado + .compara-lado{border-left:0;border-top:1px solid var(--fio-medio)}}
.compara-lado--nao{
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(19,36,27,.03) 9px 18px),var(--folha-2);
}
.compara-cab{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1.5px solid var(--fio-forte)}
.compara-lado--sim .compara-cab{color:var(--verde-vivo);border-bottom-color:var(--verde-vivo)}
.compara-lado--nao .compara-cab{color:var(--terra);border-bottom-color:var(--fio-terra)}
.compara-sinal{
  width:20px;height:20px;flex:none;border:1.4px solid currentColor;border-radius:2px;
  display:grid;place-items:center;
}
.compara-sinal svg{width:11px;height:11px}
.compara-lado p{margin:12px 0 13px;font-size:.93rem;line-height:1.55;color:var(--tinta-70)}
/* O texto de um lado tem duas linhas e o do outro tem uma. Sem o
   auto, os dois desenhos começavam em alturas diferentes; com ele,
   os dois assentam no pé da coluna, que é a mesma nos dois lados. */
.compara-fig{margin-top:auto}
.compara-fig svg{width:100%;height:auto;display:block}


/* ============================================================
   A GRADE DE ANEXO — o texto de um lado, a caixa do outro
   ------------------------------------------------------------
   No computador a caixa fica ao lado do texto. No celular ela
   desce, encolhe um pouco e entorta: vira um papel encostado na
   folha em vez de um bloco colado nela.
   ============================================================ */
.conta-grade{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30vw,360px);
  gap:clamp(20px,3.4vw,40px);align-items:start;
}
@media(max-width:900px){
  .conta-grade{grid-template-columns:1fr;gap:26px}
  .conta-grade > div:last-child{width:88%;max-width:360px;margin-left:auto}
  .conta-grade .painel{transform:rotate(-.6deg)}
}
@media(max-width:430px){.conta-grade > div:last-child{width:94%}}

/* ── Uma fichinha de prova em largura de parágrafo ──
   Quando o número é o argumento do parágrafo, e não um dado ao
   lado dele, a fichinha cresce e o texto entra dentro dela. */
.prova--larga{margin:clamp(18px,2.6vw,24px) 0;padding:clamp(15px,2vw,19px) clamp(16px,2.2vw,20px);transform:rotate(-.4deg)}
.prova--larga .pontos{max-width:180px;margin-bottom:13px}
.prova--larga p{font-size:.965rem;line-height:1.56;max-width:52ch}

/* ============================================================
   REVELAÇÃO — a folha assenta na mesa
   ============================================================ */
.rv{opacity:0;transform:translateY(12px)}
.rv.on{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv-d1.on{transition-delay:.08s}
.rv-d2.on{transition-delay:.16s}
.rv-d3.on{transition-delay:.24s}
.rv-selo{opacity:0;transform:rotate(-24deg)}
.rv-selo.on{opacity:1;transform:rotate(-9deg);transition:opacity .18s linear,transform .34s cubic-bezier(.3,1.5,.5,1)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-selo{opacity:1!important;transform:none!important;transition:none!important}
  .btn{transition:none}
}

/* ============================================================
   ESCALA DE TIPO NO CELULAR
   Fica no fim de propósito: precisa vencer as regras de
   componente definidas acima, que têm a mesma força.
   ============================================================ */
@media(max-width:760px){
  .mono{font-size:.685rem;letter-spacing:.13em}
  .mono-s{font-size:.605rem;letter-spacing:.14em}
  .etq{font-size:.585rem}
  .anexo-cab .mono-s,.rodape-lp-links h5{font-size:.635rem}
  .carta-nota--mono{font-size:.585rem}
  .footer-bottom p{font-size:.6rem}
  .btn{font-size:.7rem}
  .btn--g,.btn--xl{font-size:.72rem}
  /* O número da ficha vai para o canto do papel em vez de empilhar
     embaixo do rótulo, que é onde ele fica na home. */
  .cab-ficha,.cab-mesa{position:relative;grid-template-columns:1fr;gap:11px}
  .cab-ficha .cab-folio,.cab-mesa .cab-folio{position:absolute;z-index:2}
  .cab-ficha .cab-folio{top:var(--folio-topo);right:var(--pad-dir)}
  .cab-mesa .cab-folio{top:1px;right:0}
  /* A etiqueta é a legenda do título, não um bloco à parte: fica
     colada nele, e o respiro grande é entre o topo do card e ela. */
  .cab-ficha h2,.cab-mesa h2{margin-top:6px}
  /* O rótulo não pode passar por baixo do número da ficha, que
     está ancorado no canto. Reserva o lugar dele. */
  .cab-ficha .rotulo,.cab-mesa .rotulo{max-width:calc(100% - 96px)}
}
@media(max-width:349px){
  /* tela muito estreita: o folio não cabe ao lado do rótulo */
  .cab-ficha{padding-top:calc(var(--folio-topo) + 30px)}
}

/* Um segundo corpo dentro da mesma folha: continua de onde o
   primeiro parou, sem abrir outro respiro no topo. */
.folha-corpo--continua{padding-top:0}