/* ============================================================
   PLB — Protocolo Liso Blindado · Rafael Guerra
   Estrutura: 12 dobras (references/pagina-vendas-12-dobras.md)
   Tokens: references/responsive-dossier-rg.md
   Paleta: herdada da versão B original (_refs/versao-b-original.html)
   ============================================================ */

/* ===== TOKENS — BASE (mobile) ============================= */
:root {
  /* Paleta original do PLB */
  --lilas: #E7DFF2;
  /* fundo principal */
  --lilas-claro: #F1EAF9;
  /* seções alternadas */
  --pink: #EE4C86;
  /* acento, preenchimentos, títulos grandes */
  --pink-forte: #E63980;
  /* seções de impacto */
  --pink-profundo: #C4246B;
  /* dobra 10 — separa da oferta, que já é pink-forte */
  --pink-texto: #C2185B;
  /* pink acessível para texto pequeno (≥4,5:1 em fundo claro) */
  --amarelo: #F2B233;
  /* detalhes, setas — nunca texto sobre fundo claro */
  --grafite: #3E3A45;
  /* texto */
  --creme: #F7F2EC;
  /* cards */
  --branco: #FFFFFF;
  --borda: #E3D6F2;
  --borda-creme: #EBDFD2;

  /* preço riscado — vermelho legível sobre fundo claro (4,9:1) */
  --vermelho-riscado: #C42121;

  /* vinho da dobra 10 — o pink levado ao fundo do tom. Escuro o
     bastante pra separar da oferta, e sem sair da família da marca. */
  --vinho: #6B1038;

  /* CTA — verde acessível (#22A653 original dá só 2,8:1 com branco) */
  --verde-cta: #168527;
  --verde-cta-hover: #0F6B21;

  /* Tipografia */
  --f-titulo: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-texto: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala de SALES PAGE (responsive-rules.md § Tipografia responsiva).
     Não é a escala genérica do dossiê (32/40/52) — em sales page a escala
     específica vence. Mesma usada no PRC, ICP e CSC. */
  --fs-h1: 22px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  /* Espaçamento (base 4/8) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --max-width: 100%;
  --padding-lateral: 28px;
  --measure: 100%;
  --section-y: 64px;
  --card-gap: 16px;
  --hero-min: 100svh;

  /* Formas */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sombra-card: 0 4px 16px rgba(62, 58, 69, .07);
  --sombra-cta: 0 8px 22px rgba(22, 133, 39, .32);
  --sombra-foto: 0 18px 40px rgba(238, 76, 134, .2);
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 24px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    /* corpo fica em 16px em todos os breakpoints — regra de sales page */
    --padding-lateral: 32px;
    --measure: 620px;
    --section-y: 96px;
    --card-gap: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --max-width: 1060px;
    --padding-lateral: 40px;
    --measure: 680px;
    --section-y: 120px;
    --card-gap: 24px;
  }
}

/* ===== RESET ============================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* SEM `scroll-behavior: smooth` — removido em 16/08/2026, e não é preferência
   estética: era o maior vazamento de conversão da página.

   O Clarity de 13–16/08 mostrou 34 dead clicks em "Quero Meu Liso Blindado",
   em 32 de 40 sessões amostradas com dead click. Só os botões-ÂNCORA morriam
   (o do hero e o `.motivos-fecho` da dobra 4); os que vão direto pro checkout
   registravam clique normal. O `script.js` foi descartado como causa — ele não
   dá preventDefault nem toca no href das âncoras.

   O motivo: 100% do tráfego chega pelo webview do Instagram/Facebook, e ali um
   scroll suave de ~12.700px (do botão do hero, em ~694px, até o `#oferta`, em
   ~13.442px) engasga ou é abortado sem aviso. Ela toca, a tela não muda naquele
   instante, e vai embora — 34 eventos em 32 sessões, ou seja, toca UMA vez e
   desiste.

   Salto instantâneo não tem esse modo de falha: a tela muda inteira, não tem
   como parecer que nada aconteceu. O bloco de `prefers-reduced-motion` lá
   embaixo já forçava `auto` — agora é o comportamento único.

   ⚠️ Não reintroduzir sem antes encurtar a distância até o `#oferta`. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-texto);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grafite);
  background: var(--lilas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
  /* as listas numeradas da página desenham o próprio número (counter ou
     span), então o marcador nativo do <ol> sempre sobra */
}

h1,
h2,
h3 {
  font-family: var(--f-titulo);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* Atalho de teclado: primeiro foco da página pula a dobra 1 inteira.
   Só aparece quando recebe foco. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--grafite);
  color: var(--branco);
  border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-small);
  font-weight: 600;
}

.pular-para-conteudo:focus {
  left: 0;
  top: 0;
}

/* ===== ARQUITETURA DE SEÇÃO ===============================
   Fundo na section (borda a borda), conteúdo sempre no .container.
   Nenhuma classe que compartilhe elemento com .container usa
   `padding` shorthand — só `padding-block`.
   ========================================================== */
section {
  padding-block: var(--section-y);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: max(var(--padding-lateral), env(safe-area-inset-left));
}

.prosa {
  max-width: var(--measure);
}

.centro {
  text-align: center;
}

.centro .prosa {
  margin-inline: auto;
}

.tag {
  display: block;
  font-size: var(--fs-tiny);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pink-texto);
  margin-bottom: var(--space-3);
}

.subtitulo {
  margin-top: var(--space-4);
}

/* ===== TÍTULO DE SEÇÃO — sempre centralizado ==============
   Regra da página inteira: o cabeçalho de cada dobra (tag + h2 +
   linha de apoio) fica no eixo central. O CONTEÚDO abaixo segue
   alinhado à esquerda — texto corrido centralizado cansa a leitura.
   ========================================================== */
section h2,
section>.container>.tag {
  text-align: center;
}

section h2 {
  margin-inline: auto;
}

.provas-apoio,
.para-quem-apoio,
.motivos-intro {
  text-align: center;
  margin-inline: auto;
}

/* ===== BOTÕES =============================================
   Texto do CTA nunca quebra em duas linhas no mobile.
   ========================================================== */
.botao-cta {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 16px 28px;
  background: var(--verde-cta);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  border-radius: var(--r-pill);
  box-shadow: var(--sombra-cta);
  transition: background .2s ease, transform .15s ease;
}

.botao-cta:hover {
  background: var(--verde-cta-hover);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .botao-cta {
    display: inline-block;
    width: auto;
    padding: 16px 36px;
    font-size: 15px;
    white-space: normal;
  }
}

/* ===== MARCA ==============================================
   Sales page não tem cabeçalho fixo nem menu — uma saída só,
   que é o CTA. A marca vive no topo da dobra 1.
   ========================================================== */
.logo {
  width: 100%;
  max-width: 220px;
  /* ← tamanho da logo no MOBILE */
  height: auto;
  margin: 0 auto;
}

/* ← tamanho da logo no DESKTOP (a partir de 768px) */
@media (min-width: 768px) {
  .logo {
    max-width: 250px;
  }
}

/* ===== FAIXA DE QUALIFICAÇÃO (topo) ======================
   Rola com a página — não é cabeçalho fixo.
   ========================================================== */
.faixa-topo {
  /* pink-profundo, e não pink-forte: a 10px em maiúsculas o branco sobre
     #E63980 dá 3,99:1 e reprova no WCAG AA. Sobre #C4246B dá 5,51:1. */
  background: var(--pink-profundo);
  color: var(--branco);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 7px 14px;
}

/* aparelho estreito: aperta pra caber numa linha só */
@media (max-width: 385px) {
  .faixa-topo {
    font-size: 9px;
    letter-spacing: .01em;
    padding-inline: 10px;
  }
}

@media (min-width: 768px) {
  .faixa-topo {
    font-size: var(--fs-tiny);
    letter-spacing: .08em;
    padding-block: 12px;
  }
}

/* Os dois blocos que nunca se separam ---------------------- */
.promessa-marca,
.promessa-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.promessa-marca {
  gap: var(--space-2);
}

.promessa-acao {
  gap: var(--space-3);
}

/* ===== DOBRA 1 — PROMESSA ================================= */
.promessa {
  min-height: var(--hero-min);
  /* piso, não teto: cresce se precisar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-y);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* segura os enfeites dentro da dobra */
}

/* ---- A foto de fundo e a camada de contraste ---------------
   A imagem cobre a dobra inteira; o texto ganha legibilidade por
   um degradê de lilás por cima dela — forte onde tem texto, aberto
   onde está a modelo. Sem caixa, sem moldura: ela É o fundo. */
.promessa-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 20%;
  z-index: 0;
}

.promessa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* CELULAR: a foto é uma faixa no TOPO e derrete para baixo, no lilás.
     O derretimento começa cedo de propósito: é ele que abre o espaço
     para a marca subir sem cair em cima do rosto. */
  background: linear-gradient(to bottom,
      transparent 0, transparent 36vw,
      rgba(231, 223, 242, .86) 56vw,
      var(--lilas) 72vw, var(--lilas) 100%);
}

@media (max-width: 767px) {
  /* A dobra ocupa a tela inteira e distribui a folga entre os blocos.
     No aparelho pequeno não sobra nada e ela simplesmente encosta;
     no grande, o respiro vai para os intervalos, não para o fim. */
  .promessa {
    justify-content: flex-start;
    min-height: 100svh;
    padding-block: 0 var(--space-7);
  }

  .promessa>.container {
    padding-top: 55vw;
    /* reserva a faixa de foto no topo — quanto menor, mais a marca sobe
       e mais folga sobra embaixo, que é onde o dedo alcança o CTA */
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .promessa-fundo {
    bottom: auto;
    height: 82vw;
    object-position: 50% 0;
  }

  /* respiro menor: tudo precisa caber na primeira tela */
  .promessa-grade {
    gap: var(--space-4);
  }

  /* O CTA é o único item que ganha folga extra: encostado nos bullets ele
     parece o quarto item da lista em vez de a saída da dobra. */
  .promessa-acao {
    margin-top: var(--space-3);
  }

  .promessa-bullets {
    gap: var(--space-2);
  }
}

@media (min-width: 768px) {
  .promessa-fundo {
    object-position: 72% 24%;
  }

  /* no desktop o degradê vira horizontal: texto à esquerda, ela livre à direita */
  .promessa::before {
    background:
      linear-gradient(to right, var(--lilas) 0%, rgba(231, 223, 242, .96) 26%, rgba(231, 223, 242, .60) 42%, rgba(231, 223, 242, .10) 60%, transparent 74%),
      linear-gradient(to bottom, transparent 74%, rgba(231, 223, 242, .85) 100%);
  }
}

/* ---- Enfeite: malha de pontinhos ------------------------
   A malha só aparece onde o fundo já é lilás liso. Sobre a foto
   ela vira sujeira: some antes de encostar na modelo.
   CELULAR: a foto está no topo, então a malha nasce DEPOIS dela.
   DESKTOP: a foto está à direita, então a malha fica à esquerda. */
.promessa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(196, 36, 107, .20) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 58vw, rgba(0, 0, 0, .55) 76vw, #000 96vw);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 58vw, rgba(0, 0, 0, .55) 76vw, #000 96vw);
}

@media (min-width: 768px) {
  .promessa::after {
    -webkit-mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, .5) 34%, transparent 58%);
    mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, .5) 34%, transparent 58%);
  }
}

/* O conteúdo sobe acima dos dois enfeites */
.promessa>.container {
  position: relative;
  z-index: 2;
}

.promessa h1 {
  max-width: 820px;
  margin-inline: auto;
}

.promessa h1 em {
  font-style: normal;
  color: var(--pink-texto);
}


/* Bloco centralizado em relação à headline, itens alinhados à esquerda entre si */
.promessa-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  justify-self: center;
  font-size: var(--fs-body);
  font-weight: 600;
}

.promessa-bullets li {
  position: relative;
  padding-left: 36px;
}

.promessa-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ===== IMAGEM SOLTA ======================================
   Sem moldura, sem caixa: a sombra vai NA imagem (drop-shadow
   segue o recorte real, inclusive em PNG/WebP com transparência,
   ao contrário de box-shadow, que desenha o retângulo da caixa).
   ========================================================== */
.imagem-solta {
  width: 100%;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 14px 26px rgba(62, 58, 69, .22));
}

/* ===== GRADE DA DOBRA 1 ===================================
   MOBILE: uma coluna, na ordem do HTML.
   ========================================================== */
.promessa-grade {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-7);
  max-width: 560px;
  margin-inline: auto;
}

/* CTA ocupa a largura toda do espaço, no mobile e no desktop */
.promessa-grade .botao-cta {
  display: block;
  width: 100%;
  justify-self: stretch;
}

/* Item de grid não encolhe abaixo do conteúdo por padrão — `min-width: 0`
   evita o estouro. NÃO usar `max-width: 100%` aqui: como esta regra vem
   depois de `.logo` e tem a mesma especificidade, ela anulava o teto da
   logo silenciosamente. Imagens já ganham `max-width: 100%` no reset. */
.promessa-grade>* {
  min-width: 0;
}

/* Nome explicativo do produto — colado na logo, não é subheadline */
.promessa-descritor {
  /* o respiro em relação à logo é do .promessa-marca — nada de margem aqui */
  font-size: var(--fs-tiny);
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .08em;
  /* caixa alta precisa de respiro entre as letras */
  color: var(--pink-texto);
  max-width: 340px;
}

/* Imagem da hero — a modelo dissolve no fundo da dobra.
   Duas máscaras multiplicadas (`intersect`):
   · a elipse apaga a sala em volta, mantendo o miolo (celular + modelo);
   · a linear derrete a base, pra imagem não terminar em corte reto.
   Máscara em CSS, e não gravada no arquivo: assim o fade acompanha o
   lilás em qualquer tela e dá pra regular sem reexportar a foto.
   Sem sombra: sombra em imagem que desaparece nas bordas denuncia o
   retângulo que a máscara está justamente escondendo. */
.promessa-mockup {
  width: 100%;
  max-width: 320px;
  /* ← tamanho da imagem no MOBILE */
  height: auto;
  /* O degradê é só do lado ESQUERDO (o lado do texto) e está gravado no
     arquivo, no canal alpha. Os outros três lados são corte limpo — daí
     o arredondamento, que só aparece à direita, onde a imagem existe. */
  border-radius: 28px;
}

.promessa-mockup-caixa {
  display: flex;
  justify-content: center;
}

.promessa-autoridade {
  font-size: var(--fs-small);
  color: #6F667E;
  max-width: 420px;
}

/* ===== DESKTOP — duas colunas ==============================
   Texto à esquerda (nome → promessa → diferencial → CTA),
   mockup à direita.
   ========================================================== */
@media (min-width: 768px) {
  .promessa {
    text-align: left;
  }

  .promessa-grade {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--space-8);
    row-gap: var(--space-6);
    justify-items: start;
    align-content: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "marca"
      "titulo"
      "bullets"
      "acao";
    max-width: 46%;
    margin-inline: 0;
  }

  .promessa-marca {
    grid-area: marca;
    align-items: flex-start;
  }

  .promessa-marca .logo {
    margin: 0;
  }

  .promessa-grade h1 {
    grid-area: titulo;
    max-width: 100%;
    margin-inline: 0;
  }

  .promessa-bullets {
    grid-area: bullets;
  }

  .promessa-acao {
    grid-area: acao;
    align-items: flex-start;
  }

  .promessa-mockup-caixa {
    grid-area: mockup;
    align-self: center;
    justify-self: center;
  }

  .promessa-mockup {
    max-width: 560px;
  }
}

@media (min-width: 1024px) {
  .promessa-grade {
    column-gap: var(--space-9);
  }
}

/* ===== AJUSTE FINO DO CELULAR =============================
   Vem depois de tudo porque sobrescreve regras já declaradas.
   Objetivo único: o botão caber na primeira tela de 360px.
   ========================================================== */
@media (max-width: 767px) {
  .promessa-grade {
    flex: 1;
    gap: var(--space-3);
    align-content: space-between;
  }

  /* botão mais baixo, e um respiro maior separando ele dos bullets */
  .promessa-grade .botao-cta {
    padding-block: 13px;
    min-height: 46px;
  }

  .promessa-acao {
    gap: var(--space-2);
  }

  .promessa-descritor {
    max-width: 100%;
  }

  .promessa-marca {
    gap: 2px;
  }

  .promessa-grade h1 {
    font-size: 20px;
    margin-top: -2px;
  }

  .promessa-bullets {
    gap: 6px;
    font-size: 15px;
  }

  .promessa-bullets li {
    padding-left: 30px;
  }

  .promessa-bullets li::before {
    width: 20px;
    height: 20px;
    top: 2px;
    background-size: 13px;
  }

  .promessa-autoridade {
    font-size: var(--fs-tiny);
  }
}

/* Aparelho alto (844px pra cima): sobra espaço, então o conteúdo desce
   e começa depois da foto — nada de texto por cima da imagem. */
@media (max-width: 767px) and (min-height: 800px) {
  .promessa>.container {
    padding-top: 84vw;
  }
}

/* ===== DOBRA 2 — PROVA SOCIAL ============================= */
.provas {
  /* pink-profundo, não pink-forte: sobre #E63980 o texto de apoio dava
     3,1:1 e a tag 3,2:1 — os dois reprovavam. Aqui passam. */
  background: var(--pink-profundo);
  color: var(--branco);
}

.provas .tag {
  color: #FFEBC2;
}

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

.provas .provas-apoio {
  color: #FDECF3;
  font-weight: 600;
  max-width: 600px;
  margin-top: var(--space-3);
}

/* Faixa de provas — prints de WhatsApp e fotos reais.
   Os arquivos têm proporções diferentes (uns em pé, outros deitados):
   auto-fit + align-items:start deixa cada um manter a proporção real.
   Recortar print para uniformizar cortaria o texto, que é a prova.

   Sem moldura: nada de caixa, borda ou fundo em volta. A sombra vai
   NA imagem (drop-shadow segue o recorte real do arquivo, inclusive
   os cantos arredondados dos prints com transparência). */
/* Alvenaria de verdade: `columns` empilha os arquivos um sob o outro e
   deixa cada um com a altura que tem. Grid exigiria linhas de altura
   uniforme — e o buraco embaixo dos prints deitados seria enorme.
   O navegador equilibra as colunas sozinho; a ordem do HTML é só a
   ordem de leitura. */
.prints-faixa {
  columns: 1;
  column-gap: var(--space-2);
  margin-top: var(--space-7);
}

.prints-faixa img {
  width: 100%;
  margin-bottom: var(--space-2);
  border-radius: var(--r-md);
  break-inside: avoid;
  /* nunca partir um print no meio, entre duas colunas */
  filter: drop-shadow(0 8px 18px rgba(62, 58, 69, .28));
}

/* Prints em pé (recorte de tela cheia de celular) — 16/08/2026.
   Numa faixa em `columns`, todo item ocupa a largura da coluna e a altura sai
   da proporção. Os prints deitados têm proporção ~0,80; o print-04 tem 1,87 e
   o print-05 1,76 — ou seja, mais que o DOBRO da altura dos vizinhos. Eles
   dominavam a faixa e empurravam o resto da prova para fora da tela.

   A redução é por LARGURA (via `max-height` com `width:auto`), nunca por
   recorte: o conteúdo desses prints é texto de conversa, e cortar para caber
   destruiria justamente a prova. Ficam ~1,6x a altura dos vizinhos em vez de
   ~2,3x — menores, ainda legíveis.

   Se precisar afinar, é só este número. */
.prints-faixa img.print--alto {
  width: auto;
  max-height: 440px;
  margin-inline: auto;
}

/* Miniatura no celular + toque para ampliar — 19/08/2026.

   A faixa media ~2.140px de altura no celular. Com um teto único de 300px em
   TODOS os prints ela cai para ~1.740px: 400px devolvidos às dobras 4 a 8, sem
   ocultar prova nenhuma.

   A redução continua sendo por LARGURA (`width:auto` + `max-height`), nunca por
   recorte — o conteúdo é texto de conversa. O que mudou é que a legibilidade da
   miniatura deixou de ser requisito: quem quiser ler abre no toque (ver `.lupa`).
   A miniatura só precisa dizer "isto é uma conversa real"; a leitura é o zoom.

   Só no celular. No desktop a faixa já tem 2 ou 3 colunas e não sufoca a dobra —
   e são 2% do tráfego.

   Se precisar afinar, é este número. */
@media (max-width: 767px) {

  .prints-faixa img,
  .prints-faixa img.print--alto {
    width: auto;
    max-height: 300px;
    margin-inline: auto;
  }
}

/* Botão que embrulha cada print. Criado por JS (ver script.js) para que a
   miniatura seja focável e anunciada como botão pelo leitor de tela — um <img>
   com onclick não é nenhuma das duas coisas. Sem JS a imagem aparece igual,
   só não amplia: degradação limpa.

   As regras existem aqui, prontas, para que o embrulho em tempo de execução não
   mova nada na tela. */
.prova-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  /* nunca partir um print entre duas colunas — a regra mudou de lugar junto
     com o item da coluna, que agora é o botão e não mais a imagem */
  break-inside: avoid;
}

/* ===== LUPA — prova ampliada ==============================
   Montada uma única vez, no primeiro toque, e reaproveitada. Não existe no
   HTML de propósito: marcação que ninguém vê ainda é marcação que todo mundo
   baixa. */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(30, 26, 36, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}

.lupa[data-aberta="true"] {
  opacity: 1;
  visibility: visible;
}

.lupa img {
  /* "tamanho real" na prática: o maior que a tela comporta, sem estourar */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lupa-fechar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  /* 44px é o alvo mínimo de toque; o X sozinho seria pequeno demais */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: var(--branco);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 768px) {
  .prints-faixa img.print--alto {
    max-height: 400px;
  }
}

@media (min-width: 560px) {
  .prints-faixa {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .prints-faixa {
    columns: 3;
  }
}

/* ===== DOBRA 3 — VOZES NA CABEÇA ==========================
   Balões alternados, como pensamento que vai e volta.
   Nada de grade de cards: card lê como catálogo, e aqui o
   conteúdo é a cabeça dela falando sozinha.
   ========================================================== */
.vozes {
  background: var(--lilas-claro);
  position: relative;
  overflow: hidden;
}

/* Pattern: fios ondulados, bem apagados. Se você mandar a foto da
   chapinha, ela entra aqui no lugar (ou por baixo) deste desenho. */
.vozes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 30c15-18 30-18 45 0s30 18 45 0 30-18 45 0' fill='none' stroke='%23C4246B' stroke-opacity='.13' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 120px 60px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 46%, transparent 34%, #000 100%);
  mask-image: radial-gradient(120% 90% at 50% 46%, transparent 34%, #000 100%);
}

/* Chapinha em marca d'água: o objeto que causou o problema, presente
   mas apagado. Regra de enquadramento: a ponta do cabo NUNCA aparece —
   ela sempre sai pela borda da tela, senão a peça parece flutuando.
   No desktop entra espelhada (scaleX) para o cabo apontar à direita. */
.vozes::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -12%;
  bottom: -18%;
  width: 62%;
  max-width: 720px;
  aspect-ratio: 760 / 677;
  background: url("_images/outros/chapinha.webp") center / contain no-repeat;
  opacity: .10;
  transform: rotate(-6deg) scaleX(-1);
}

@media (max-width: 767px) {
  /* No celular ela vai para a esquerda, sem espelhar: o cabo já aponta
     para baixo à esquerda e sai por ali. */
  .vozes::after {
    right: auto;
    left: -26%;
    bottom: -12%;
    width: 104%;
    max-width: none;
    opacity: .08;
    transform: rotate(6deg);
  }
}

.vozes>.container {
  position: relative;
  z-index: 1;
}

.vozes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 680px;
  margin: var(--space-7) auto 0;
}

.voz {
  position: relative;
  width: fit-content;
  max-width: 94%;
  padding: 14px 22px;
  background: var(--branco);
  border-radius: 22px 22px 22px 6px;
  /* três camadas: contorno fino, sombra curta de contato e sombra
     longa e difusa — é o conjunto que descola o balão do fundo */
  box-shadow:
    0 0 0 1px rgba(196, 36, 107, .07),
    0 2px 4px rgba(62, 58, 69, .06),
    0 14px 32px rgba(62, 58, 69, .16);
  font-size: var(--fs-body);
  font-style: italic;
  line-height: 1.45;
}

/* as duas bolinhas que saem do balão — o que faz ele ler como pensamento */
.voz::before,
.voz::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 4px 10px rgba(62, 58, 69, .12);
}

.voz::before {
  left: 10px;
  bottom: -12px;
  width: 12px;
  height: 12px;
}

.voz::after {
  left: -2px;
  bottom: -24px;
  width: 7px;
  height: 7px;
}

/* alternando o lado, o olho lê como conversa, não como lista */
.voz:nth-child(even) {
  align-self: flex-end;
  background: var(--creme);
  border-radius: 22px 22px 6px 22px;
}

/* no balão da direita as bolinhas saem pelo outro lado */
.voz:nth-child(even)::before {
  left: auto;
  right: 10px;
}

.voz:nth-child(even)::after {
  left: auto;
  right: -2px;
}

.vozes-fecho {
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--pink-texto);
}

/* Presença de botão de oferta, SEM a classe `.botao-oferta`.
   Aquela classe é semântica de checkout: o `script.js` pendura nela os
   parâmetros de origem e o evento `clique_checkout`. Um botão-âncora que a
   herdasse contaria como ida pro checkout e sujaria a única métrica que a
   gente está tentando ler. Então aqui só o tamanho, copiado dela:
   mesmo padding, mesmo corpo, mesma sombra.

   `white-space` continua `nowrap` (herdado do `.botao-cta`): "Quero Meu Liso
   Blindado" a 16px cabe em uma linha até em tela de 320px. */
.botao-cta--destaque {
  padding: 20px 24px;
  font-size: 16px;
  box-shadow: 0 10px 26px rgba(22, 133, 39, .42);
}

@media (min-width: 768px) {
  .botao-cta--destaque {
    padding: 19px 28px;
    font-size: 17px;
  }
}

/* CTA de ~25% — ver o comentário no index.html, dobra 3.
   Reusa `.botao-cta` inteiro (mesma cor, mesma altura, mesma regra de uma
   linha só no mobile). Aqui só a caixa e a linha de apoio. */
.vozes-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  margin: var(--space-6) auto 0;
}

.vozes-acao-apoio {
  text-align: center;
  font-family: var(--f-titulo);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
  color: var(--grafite);
}

@media (min-width: 768px) {
  .voz {
    max-width: 82%;
    padding: 16px 26px;
  }
}

/* ===== DOBRA 4 — TRANSIÇÃO DOR → SOLUÇÃO ==================
   Fundo creme: as vizinhas (dobra 3 e dobra 5) são lilás, e sem
   quebra o leitor sente que é tudo a mesma seção. O creme também
   combina com o conteúdo — é a dobra do alívio, "a culpa não é sua".
   ========================================================== */
.motivos {
  background: var(--creme);
  position: relative;
  overflow: hidden;
}

.motivos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(196, 36, 107, .10) 1.3px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 45%, transparent 40%, #000 100%);
  mask-image: radial-gradient(115% 85% at 50% 45%, transparent 40%, #000 100%);
}

.motivos>.container {
  position: relative;
  z-index: 1;
}

.motivos-intro {
  margin-top: var(--space-7);
  /* longe do título… */
}

.motivos-intro+.motivos-intro {
  margin-top: var(--space-3);
  font-weight: 600;
}

.motivos-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
  margin-top: var(--space-4);
  /* …e colada nos cards */
  counter-reset: motivo;
}

.motivo {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--branco);
  border-radius: 18px;
  padding: var(--space-5);
  /* mesma receita de sombra dos balões da dobra 3, pra página ter uma
     linguagem só: contorno fino + sombra de contato + sombra difusa */
  box-shadow:
    0 0 0 1px rgba(196, 36, 107, .06),
    0 2px 4px rgba(62, 58, 69, .05),
    0 12px 26px rgba(62, 58, 69, .10);
}

.motivo::before {
  counter-increment: motivo;
  content: counter(motivo);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--pink-texto);
  /* o amarelo sumia no creme */
  color: var(--branco);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--fs-small);
}

.motivo h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--pink-texto);
  margin-bottom: var(--space-2);
}

.motivo p {
  font-size: var(--fs-small);
}

/* Frase de virada: fecha o diagnóstico e abre a solução. Fica entre os
   cards e o botão, e é a única linha centralizada da dobra. */
.motivos-virada {
  max-width: 620px;
  margin: var(--space-7) auto var(--space-5);
  text-align: center;
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--pink-texto);
}

/* Card final: mesma família dos outros, cor invertida. Depois de cinco
   cards claros explicando o problema, ele é o único escuro — e é a
   primeira vez na dobra que o produto é nomeado. */
/* Era rosa (`--pink-forte`) até 16/08/2026. Virou verde porque o Clarity de
   13–16/08 mediu: ZERO sessões clicaram neste botão em 3 dias, contra 100+
   sessões clicando nos "Quero Meu Liso Blindado" verdes no mesmo período.
   Não é que ele convertia pouco — ele não era reconhecido como botão. Cor de
   CTA nesta página é o verde; qualquer outra cor a leitora lê como faixa
   decorativa.

   Continua com `font-size` de título e quebra de linha porque o texto é uma
   frase inteira, não um rótulo de botão — por isso NÃO usa `.botao-cta`. Se um
   dia a copy virar rótulo curto, aí sim troca pelo componente padrão. */
.motivos-fecho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  min-height: 48px;
  background: var(--verde-cta);
  color: var(--branco);
  border-radius: 18px;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  box-shadow:
    0 2px 4px rgba(62, 58, 69, .08),
    0 16px 34px rgba(22, 133, 39, .32);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

/* a seta é o que diz "isto é clicável" — sem ela o bloco lê como aviso */
.motivos-fecho::after {
  content: "→";
  flex-shrink: 0;
  font-size: 1.1em;
  transition: transform .2s ease;
}

.motivos-fecho:hover {
  background: var(--verde-cta-hover);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(62, 58, 69, .10),
    0 20px 40px rgba(22, 133, 39, .38);
}

.motivos-fecho:hover::after {
  transform: translateX(4px);
}

.motivos-fecho:focus-visible {
  outline: 3px solid var(--pink-texto);
  outline-offset: 3px;
}

.motivos h2 {
  max-width: 780px;
}

.motivos-intro {
  font-weight: 600;
  color: var(--pink-texto);
}

@media (min-width: 768px) {
  .motivos-lista {
    grid-template-columns: repeat(2, 1fr);
  }

  /* o 5º card fica sozinho na última linha — ocupa as duas colunas */
  .motivo:last-child {
    grid-column: 1 / -1;
  }

  .motivos-fecho {
    padding: var(--space-7) var(--space-6);
    font-size: var(--fs-h2);
  }
}

/* ===== DOBRA 5 — PASSO A PASSO ============================
   Escada, não caixas. As dobras 3, 4 e 6 já são feitas de blocos
   brancos — mais um aqui deixaria quatro seções com o mesmo peso.
   Aqui o desenho é o numeral grande + a linha que liga um degrau
   ao outro: leve, e reforça que são só três.
   ========================================================== */
.passos {
  background: var(--lilas-claro);
}

.passos-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
  counter-reset: passo;
}

.passo {
  position: relative;
  padding-left: 68px;
}

/* a linha que liga os degraus — some no último */
.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: calc(var(--space-6) * -1);
  width: 2px;
  background: linear-gradient(to bottom, rgba(196, 36, 107, .30), rgba(196, 36, 107, .06));
}

.passo-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--branco);
  box-shadow:
    0 0 0 1px rgba(196, 36, 107, .12),
    0 6px 16px rgba(62, 58, 69, .10);
  color: var(--pink-texto);
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}

.passo h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--pink-texto);
  line-height: 1.3;
  margin-bottom: var(--space-2);
  padding-top: 10px;
}

/* o verbo é o que faz a escada — vem destacado */
/* o verbo se diferencia pela caixa alta, não por outra cor —
   o título inteiro já é pink, como todo título de item da página */
.passo h3 em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.passo p {
  font-size: var(--fs-small);
}

.passos-fecho {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--branco);
  border-left: 4px solid var(--pink);
  border-radius: 6px 18px 18px 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(62, 58, 69, .10);
}

/* Tablet: 2 por linha. A linha horizontal só liga o par de cada linha —
   ligar o 2º ao 3º seria uma seta apontando para o fim da linha, e o
   próximo degrau está embaixo. */
@media (min-width: 768px) {
  .passos-grade {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-8);
  }

  .passo {
    padding-left: 0;
    padding-top: 72px;
  }

  .passo h3 {
    padding-top: 0;
  }

  .passo:not(:last-child)::before {
    left: 60px;
    right: calc(var(--space-6) * -1);
    top: 26px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, rgba(196, 36, 107, .30), rgba(196, 36, 107, .06));
  }

  /* nada de linha saindo do 2º card para fora da linha */
  .passo:nth-child(even)::before {
    display: none;
  }

  .passos-fecho {
    /* largura cheia do bloco, igual ao fecho da dobra 4 */
    max-width: 100%;
  }
}

/* Desktop: os quatro degraus lado a lado, ligados em sequência */
@media (min-width: 1024px) {
  .passos-grade {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--space-6);
  }

  .passo:nth-child(even)::before {
    display: block;
  }

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

/* ===== DOBRA 6 — TUDO QUE VAI RECEBER =====================
   Fundo branco: as dobras 5 e 7 são lilás-claro, e antes esta era
   lilás — três seções seguidas quase iguais. O branco também combina
   com a função, que é ser a mais rápida de ler da página.
   ========================================================== */
.entrega {
  background: var(--branco);
  position: relative;
  overflow: hidden;
}

/* Pattern: malha de pontinhos nas bordas, sumindo no miolo onde
   está a leitura. Mesma família da dobra 1 e da dobra 4. */
.entrega::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* pontinho rosa, não branco — sobre o fundo branco desta seção
     um ponto claro seria invisível. Alfa bem maior que o da dobra 4:
     lá o creme já dá contraste, aqui o branco não dá nenhum. */
  background-image: radial-gradient(circle, rgba(196, 36, 107, .34) 1.7px, transparent 1.8px);
  background-size: 22px 22px;
  /* miolo limpo menor, pra malha aparecer em mais área */
  -webkit-mask-image: radial-gradient(105% 75% at 50% 45%, transparent 26%, #000 88%);
  mask-image: radial-gradient(105% 75% at 50% 45%, transparent 26%, #000 88%);
}

.entrega>.container {
  position: relative;
  z-index: 1;
}

/* Tela dividida no desktop: produto de um lado, lista do outro */
.entrega-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
}

.entrega-produto {
  width: 82vw;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 16px 30px rgba(62, 58, 69, .18));
}

.entrega h2 {
  max-width: 720px;
  margin-inline: auto;
}

/* Lista de checagem — o check verde é o mesmo verde do botão:
   a página inteira usa essa cor para dizer "isto é seu". */
.entrega-checks {
  display: grid;
  gap: var(--space-3);
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}

.entrega-checks li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.entrega-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168527' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.entrega-mais {
  margin-top: var(--space-8);
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--pink-texto);
}

/* Bloco dos bônus — separado do produto principal, como o método pede */
.bonus-bloco {
  margin-top: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-7);
  background: var(--creme);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(196, 36, 107, .07),
    0 14px 32px rgba(62, 58, 69, .12);
}

.bonus-mockup {
  width: 78vw;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 14px 26px rgba(62, 58, 69, .18));
}

.bonus-selo {
  display: inline-flex;
  margin-top: var(--space-4);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: var(--f-titulo);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .04em;
}

.bonus-selo span {
  padding: 7px 14px;
}

.bonus-selo span:first-child {
  background: var(--pink-forte);
  color: var(--branco);
}

.bonus-selo span:last-child {
  background: var(--verde-cta);
  color: var(--branco);
}

.bonus-apoio {
  margin-top: var(--space-4);
  max-width: 560px;
  margin-inline: auto;
  font-size: var(--fs-small);
}

/* A lista dos bônus NÃO está na tela dividida: ela ocupa o container
   inteiro. Sem um teto próprio, as linhas iam até a borda e sobrava
   um vão à direita — o bloco parecia desalinhado. */
.entrega-checks--bonus {
  margin-top: var(--space-5);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .entrega-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }

  .entrega-produto {
    width: 100%;
    max-width: 100%;
  }

  /* só a lista de dentro da tela dividida solta o teto — ela já está
     limitada pela própria coluna. A dos bônus mantém o dela. */
  .entrega-split .entrega-checks {
    max-width: 100%;
  }

  .bonus-bloco {
    padding: var(--space-7);
  }
}

/* ===== DOBRA 7 — PARA QUEM SERVE ========================== */
.para-quem {
  background: var(--lilas-claro);
  position: relative;
  overflow: hidden;
}

.para-quem-apoio {
  margin-top: var(--space-3);
  font-weight: 600;
}

.publico-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: start;
  /* colunas de alturas diferentes não se esticam à toa */
}

/* Cada lista na sua caixa, com o tom da própria resposta: verde no que
   qualifica, rosa no que exclui. A cor do fundo já diz de que lado a
   coluna está antes de ler uma palavra. */
.publico {
  border-radius: var(--r-md);
  padding: var(--space-5);
  border: 1.5px solid;
}

.publico--sim {
  background: #E9F7EC;
  border-color: rgba(22, 133, 39, .3);
}

.publico--nao {
  background: #FBEAEA;
  border-color: rgba(196, 40, 40, .25);
}

.publico-titulo {
  display: block;
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.publico--sim .publico-titulo {
  color: #12691F;
}

.publico--nao .publico-titulo {
  color: #A82121;
}

.publico li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
}

/* Cada caixa fala numa cor só: o texto herda o tom do próprio bloco,
   em vez de misturar título colorido com item em grafite. */
.publico--sim {
  color: #12691F;
}

.publico--nao {
  color: #A82121;
}

.publico--sim strong,
.publico--nao strong {
  color: inherit;
}

.publico li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 800;
  font-size: 16px;
}

.publico--sim li::before {
  content: "✓";
  color: #12691F;
}

.publico--nao li::before {
  content: "✕";
  color: #A82121;
}

/* ----- Sanfona da coluna do NÃO ----- */

/* Aviso de que os itens abrem. Fica logo abaixo do título da coluna,
   antes do primeiro item — depois da lista ninguém leria. */
.publico-dica {
  margin-top: calc(var(--space-4) * -1 + var(--space-1));
  margin-bottom: var(--space-4);
  font-size: var(--fs-tiny);
  font-style: italic;
  color: #A82121;
  opacity: .8;
}

/* Sem fundo branco: a linha fica na mesma cor da caixa. Quem diz que
   ela abre é o contorno e a seta, não uma cor diferente. */
.publico-sanfona summary {
  background: transparent;
  border: 1px solid rgba(168, 33, 33, .28);
}
.publico-sanfona li {
  margin-bottom: var(--space-2);
  padding-left: 0;
  /* o ✕ sai do li e vai pro summary, alinhado com o texto */
}

.publico-sanfona li::before {
  content: none;
}

.publico-sanfona summary {
  position: relative;
  list-style: none;
  /* tira o triangulinho padrão… */
  cursor: pointer;
  padding: var(--space-4) 40px var(--space-4) 44px;
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: background .15s ease;
}

.publico-sanfona summary::-webkit-details-marker {
  display: none;
  /* …inclusive no Safari */
}

.publico-sanfona summary:hover,
.publico-sanfona details[open] summary {
  background: rgba(168, 33, 33, .07);
}

.publico-sanfona summary:focus-visible {
  outline: 2px solid #A82121;
  outline-offset: 2px;
}

/* ✕ à esquerda — dentro do respiro do item, nunca colado na borda */
.publico-sanfona summary::before {
  content: "✕";
  position: absolute;
  left: 16px;
  top: var(--space-4);
  color: #A82121;
  font-weight: 800;
  font-size: 16px;
}

/* seta à direita, gira ao abrir */
.publico-sanfona summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2.5px solid #A82121;
  border-bottom: 2.5px solid #A82121;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.publico-sanfona details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

/* A razão só aparece aberta — então pode vir no corpo de leitura
   normal, e não miúda como era quando ficava sempre à mostra.
   Alinhada com o texto do título, não com o ✕. */
.publico-sanfona details p {
  padding: var(--space-2) 20px var(--space-4) 44px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #7A4444;
}

/* Linha de corte: fecha a coluna do sim com o critério de decisão */
.publico-corte {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(22, 133, 39, .28);
  font-size: var(--fs-small);
  color: #12691F;
}

/* A virada — quem chegou aqui sem se reconhecer na lista do não
   acabou de se qualificar sozinho. Por isso ela é destaque, e não
   mais um parágrafo. */
.para-quem-virada {
  max-width: 100%;
  /* largura das duas colunas juntas */
  margin: var(--space-7) auto 0;
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--branco);
  border-left: 4px solid var(--pink);
  box-shadow: var(--sombra-card);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
}

.para-quem-virada em {
  font-style: normal;
  color: var(--pink-texto);
}

@media (min-width: 768px) {
  .publico-grade {
    grid-template-columns: 1fr 1fr;
  }

  .para-quem-virada {
    text-align: center;
    padding: var(--space-6);
    border-left: none;
    border-top: 4px solid var(--pink);
  }
}

/* ===== DOBRA 8 — ANCORAGEM ================================ */
.ancoragem {
  /* creme, não lilás: a dobra 7 acima é lilás-claro e as duas quase não
     se distinguiam — a virada de seção sumia. */
  background: var(--creme);
}

/* Aqui o tudão é só uma lembrança visual do pacote — quem tem que
   falar alto é a tabela de valores logo abaixo. Por isso pequeno. */
.ancoragem .imagem-solta {
  max-width: 200px;
  margin-top: var(--space-5);
}

.oferta-caixa .imagem-solta {
  width: 62vw;
  max-width: 230px;
  margin: 0 auto var(--space-4);
}

.oferta-decisao {
  display: contents;
  /* no mobile a coluna não existe: tudo continua empilhado */
}

.ancoragem-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  margin: var(--space-6) auto 0;
  max-width: 620px;
  /* a tabela dentro do container de 1060px ficava com um vão enorme
     entre o nome do item e o valor */
  box-shadow: var(--sombra-card);
  text-align: left;
}

.lista-valores {
  font-size: var(--fs-small);
}

.lista-valores li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px dashed var(--borda);
}

.lista-valores li:last-child {
  border-bottom: none;
}

/* Cada linha recapitula: nome em cima, o que entrega embaixo */
.lista-valores li>span:first-child {
  display: block;
}

.lista-valores strong {
  display: block;
  font-weight: 700;
  line-height: 1.35;
}

.lista-valores small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-tiny);
  line-height: 1.4;
  color: #6F667E;
}

.lista-valores .valor {
  flex-shrink: 0;
  font-weight: 600;
}

.lista-valores .valor--riscado {
  text-decoration: line-through;
  color: var(--vermelho-riscado);
}

.lista-valores .valor--destaque {
  color: var(--pink-texto);
  font-weight: 700;
}

.ancoragem-total {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--borda);
  text-align: center;
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.ancoragem-total s {
  color: var(--vermelho-riscado);
  font-weight: 600;
}

/* ===== DOBRA 9 e 12 — OFERTA ============================== */
.oferta {
  /* mesmo motivo da dobra 2: contraste do texto de apoio e dos selos */
  background: var(--pink-profundo);
}

.oferta .tag {
  color: #FFEBC2;
}

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

.oferta-apoio {
  color: #FBD9E7;
  max-width: 560px;
  margin: var(--space-3) auto 0;
}

/* A caixa é a única coisa clara sobre o pink da seção: ela sozinha
   já marca "é aqui". Por isso não precisa de contorno forte — o que
   a destaca é a sombra funda, que a levanta do fundo. */
.oferta-caixa {
  position: relative;
  background: var(--creme);
  border: 1px solid var(--borda-creme);
  border-radius: 24px;
  max-width: 520px;
  /* no desktop vira duas colunas, logo abaixo */
  margin: var(--space-7) auto 0;
  /* espaço extra em cima: a fita ocupa a borda */
  padding: var(--space-7) var(--space-5) var(--space-6);
  text-align: center;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .5) inset,
    0 24px 60px rgba(0, 0, 0, .26);
}

/* Fita do desconto — cavalga a borda de cima */
.oferta-fita {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pink-profundo), var(--pink-texto));
  color: var(--branco);
  font-family: var(--f-titulo);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

/* O bloco de preço respira sozinho: filete em cima e embaixo o
   isolam do mockup e do botão, sem precisar de mais uma caixa. */
.preco-bloco {
  margin: var(--space-4) 0 0;
  padding-block: var(--space-4);
  border-block: 1px solid var(--borda-creme);
}

.oferta-caixa .lista-valores {
  text-align: left;
  margin-bottom: var(--space-5);
}

.oferta-caixa .lista-valores li {
  border-bottom-color: var(--borda-creme);
}

.preco-de {
  font-size: var(--fs-small);
  color: #6F667E;
}

.preco-de s {
  color: var(--vermelho-riscado);
}

/* Preço é elemento de "display", fora da hierarquia de heading —
   exceção legítima da escala (dossiê § 7.1). É o número mais
   importante da página inteira: tem que ganhar de tudo em volta. */
.preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: var(--f-titulo);
  font-size: 52px;
  font-weight: 800;
  color: var(--pink-texto);
  line-height: 1;
  letter-spacing: -.03em;
  margin: var(--space-1) 0;
}

/* "R$" pequeno e alinhado ao topo do número: o olho lê o 47, não o cifrão */
.preco-cifra {
  font-size: 24px;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 6px;
  letter-spacing: 0;
}

.preco small {
  font-size: 17px;
  font-weight: 600;
  color: var(--grafite);
  letter-spacing: 0;
}

.preco-parcelado {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--grafite);
}

/* Economia como etiqueta verde — mesmo verde do botão, que na página
   inteira quer dizer "isto é seu". */
.preco-economia {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(22, 133, 39, .12);
  color: #106A1F;
  font-size: var(--fs-tiny);
  font-weight: 700;
}

.preco-micro {
  font-size: var(--fs-small);
  color: #6F667E;
  margin: var(--space-4) 0;
}

/* O CTA da oferta é o maior da página: aqui é onde a compra acontece.
   Nas outras dobras o botão só empurra pra cá. */
.botao-oferta {
  display: block;
  width: 100%;
  padding: 20px 24px;
  font-size: 16px;
  white-space: normal;
  box-shadow: 0 10px 26px rgba(22, 133, 39, .42);
}

@media (min-width: 768px) {
  .botao-oferta {
    display: block;
    width: 100%;
    padding: 19px 28px;
    font-size: 17px;
  }
}

/* Selos abaixo do botão */
.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-tiny);
  color: #5F566E;
}

.selos li {
  position: relative;
  padding-left: 18px;
}

.selos li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde-cta);
  font-weight: 800;
}

/* Garantia fora da caixa de preço, e mais discreta que ela: é o que
   tira o risco depois da decisão, não outro argumento de venda. */
.garantia {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  max-width: 560px;
  margin: var(--space-6) auto 0;
  /* o véu branco fica em .10, não .14: sobre o pink-profundo ele clareia o
     fundo para #CA3A7A e o texto branco ainda dá 4,78:1. Em .14 o fundo vira
     #CC4380 e cai para 4,49:1 — reprova por um centésimo. */
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 16px;
  padding: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--branco);
  text-align: left;
}

.garantia strong {
  color: var(--branco);
}

.selo-garantia {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--amarelo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
}

@media (min-width: 768px) {
  /* Duas colunas: o pacote de um lado, a decisão do outro. Corta quase
     metade da altura, que era o que fazia a caixa não caber na tela. */
  .oferta-caixa {
    max-width: 820px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-7);
    padding: var(--space-7) var(--space-7) var(--space-6);
  }

  .oferta-caixa .imagem-solta {
    width: 100%;
    max-width: 300px;
    margin: 0;
  }

  .oferta-decisao {
    display: block;
    text-align: center;
  }

  .oferta-decisao .preco-bloco {
    margin-top: 0;
  }

  .preco {
    font-size: 62px;
  }

  .preco-cifra {
    font-size: 26px;
    margin-top: 7px;
  }

  .preco small {
    font-size: 19px;
  }
}

/* ===== DOBRA 10 — O PREÇO DE FICAR PARADO =================
   Dobra de aritmética emocional. Sem números inventados: quem faz a
   conta é ela. O que a página controla é o RITMO — pergunta curta,
   parágrafo curto, e uma única frase grande no fim de cada bloco.
   ========================================================== */
/* Malha de pontinhos claros nas bordas — a mesma família das dobras 4
   e 6, invertida para funcionar sobre fundo escuro. */
.parado::before,
.para-quem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.parado::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1.6px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(105% 75% at 50% 45%, transparent 30%, #000 92%);
  mask-image: radial-gradient(105% 75% at 50% 45%, transparent 30%, #000 92%);
}

.para-quem::before {
  background-image: radial-gradient(circle, rgba(196, 36, 107, .22) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(110% 80% at 50% 45%, transparent 34%, #000 94%);
  mask-image: radial-gradient(110% 80% at 50% 45%, transparent 34%, #000 94%);
}

.parado>.container,
.para-quem>.container {
  position: relative;
  z-index: 1;
}

.parado {
  position: relative;
  overflow: hidden;
  /* A dobra do "ficar parado" é a mais escura da página. O cinza que
     estava aqui saía da paleta; o vinho é o mesmo pink levado ao fundo
     do tom — separa da oferta logo acima sem virar outra marca. */
  background: var(--vinho);
  color: #FFF0F6;
}

.parado h2 {
  color: var(--branco);
  max-width: 620px;
}

/* segunda linha do título: mesma frase, meio tom abaixo — é o
   "não precisa falar pra ninguém", que baixa a guarda */
.parado-h2-leve {
  font-weight: 600;
  color: #FBD9E7;
}

/* ----- As perguntas ----- */
.parado-perguntas {
  max-width: 620px;
  margin: var(--space-7) auto 0;
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.parado-perguntas li {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) 52px;
  background: rgba(255, 255, 255, .09);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* interrogação como marcador: lembra que é pergunta, não afirmação —
   afirmação nesta dobra soaria acusação */
.parado-perguntas li::before {
  content: "?";
  position: absolute;
  left: 18px;
  top: var(--space-4);
  font-family: var(--f-titulo);
  font-size: 22px;
  font-weight: 800;
  color: var(--amarelo);
  line-height: 1.3;
}

/* A pergunta da próxima química é a que converte dúvida em prazo */
.parado-pergunta-chave {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .34);
  font-weight: 600;
}

/* ----- A conta que ninguém faz ----- */
.parado-conta {
  margin: var(--space-8) auto 0;
  text-align: left;
}

.parado-conta p {
  margin-bottom: var(--space-4);
}

.parado-abre {
  font-weight: 700;
  color: var(--branco);
}

/* A frase que abre a conta: é o diagnóstico do qual todo o resto
   decorre. Fica entre o corpo e a frase-âncora em peso. */
.parado-alerta {
  margin: var(--space-5) 0 !important;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .1);
  border-left: 4px solid var(--amarelo);
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--branco);
}

.parado-conta strong {
  color: var(--branco);
}

/* Frase-âncora — a única em corpo de display na dobra.
   Fora da hierarquia de heading, igual ao preço (dossiê § 7.1). */
.parado-ancora {
  margin-top: var(--space-6);
  font-family: var(--f-titulo);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--branco);
}

/* ----- O relógio real ----- */
.parado-relogio {
  margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--amarelo);
  background: rgba(0, 0, 0, .13);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  text-align: left;
}

.parado-relogio p+p {
  margin-top: var(--space-3);
}

.parado-relogio strong {
  color: var(--amarelo);
}

/* ----- A virada: os dois pratos da balança ----- */
.parado-compara-titulo {
  margin-top: var(--space-8);
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--branco);
  text-align: center;
}

.parado-balanca {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
  margin-top: var(--space-5);
  align-items: start;
  text-align: left;
}

.prato {
  border-radius: var(--r-md);
  padding: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.prato-rotulo {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--f-titulo);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* O prato do "ficar parado" é apagado de propósito: ele é o caminho
   que a página não quer que ela escolha. */
.prato--parado {
  background: rgba(0, 0, 0, .16);
  color: #E9C6D8;
}

.prato--parado .prato-rotulo {
  color: #E9C6D8;
}

/* O prato da ação é claro e sólido — é o único bloco desta dobra
   com fundo cheio, e é onde o preço aparece. */
.prato--acao {
  background: var(--creme);
  color: var(--grafite);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.prato--acao .prato-rotulo {
  color: var(--pink-texto);
}

.prato--acao strong {
  color: var(--pink-texto);
  font-weight: 800;
}

.parado-remate {
  max-width: 620px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: #FBD9E7;
}

@media (min-width: 768px) {
  .parado-ancora {
    font-size: 34px;
  }

  .parado-balanca {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== DOBRA 11 — AUTORIDADE ==============================
   O expert só aparece aqui. Foto + números de um lado, a fala dele
   do outro. O texto é o protagonista: a foto é do tamanho de um
   retrato, não de um pôster.
   ========================================================== */
.autoridade {
  background: var(--creme);
}

.autoridade-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
  align-items: start;
}

.autoridade-lado {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.autoridade-foto {
  width: 78vw;
  max-width: 380px;
  height: auto;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 18px 36px rgba(62, 58, 69, .24));
}

/* Números como credencial escaneável: quem não lê o texto ainda
   leva os cinco fatos. */
.autoridade-numeros {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 380px;
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.autoridade-numeros li {
  position: relative;
  padding-left: 26px;
}

.autoridade-numeros li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

.autoridade-numeros strong {
  color: var(--pink-texto);
  font-weight: 800;
}

/* ----- A fala ----- */
.autoridade-texto {
  text-align: left;
}

.autoridade-texto p+p {
  margin-top: var(--space-4);
}

.autoridade-abre {
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--pink-texto);
}

.autoridade-texto strong {
  color: var(--grafite);
  font-weight: 700;
}

/* A missão é o ponto mais alto do texto — vira citação, não parágrafo.
   É o que troca autoridade por aliança: ele não está acima dela,
   está do lado dela contra alguém. */
.autoridade-missao {
  margin-top: var(--space-5) !important;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--pink);
  background: var(--branco);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--sombra-card);
  font-family: var(--f-titulo);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--pink-texto);
}

@media (min-width: 768px) {
  .autoridade-grade {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: var(--space-8);
    /* a coluna da foto é bem mais curta que a do texto — centrada,
       o vão sobra dividido em cima e embaixo em vez de tudo embaixo */
    align-items: center;
  }

  .autoridade-foto {
    width: 100%;
  }
}

/* ===== DOBRA 12 — FAQ ===================================== */
.faq {
  background: var(--lilas-claro);
}

.faq-lista {
  margin-top: var(--space-6);
}

.faq-item {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--f-titulo);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pink-texto);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.faq-item .faq-resposta {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-small);
}

/* ===== FOOTER ============================================= */
.rodape-marca {
  font-size: var(--fs-body);
  color: var(--branco);
  margin-bottom: var(--space-3);
}

.rodape-empresa {
  margin-top: var(--space-2);
  font-size: var(--fs-tiny);
}

.rodape {
  background: var(--grafite);
  color: #CFC4DC;
  padding-block: var(--space-7);
  text-align: center;
  font-size: var(--fs-small);
}

.rodape p {
  margin-bottom: var(--space-2);
}

.rodape a {
  text-decoration: underline;
}

.rodape a:hover {
  color: var(--branco);
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.rodape-legal {
  font-size: var(--fs-tiny);
  /* a 12px sobre o grafite, o #9E92AC anterior dava 3,78:1. Este dá 5,0:1. */
  color: #B5AAC1;
  margin-top: var(--space-4);
}

/* ===== ACESSIBILIDADE ===================================== */
:focus-visible {
  outline: 3px solid var(--pink-texto);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   DOBRA 4 · CARD — variante escolhida: LISTA EDITORIAL.
   Sem caixa: o número grande em marca d'água separa um motivo do
   outro, e um filete fecha cada bloco. As variantes B e C que
   também foram testadas ficaram no histórico do Git.
   ========================================================== */
.motivos--a .motivo {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--space-5) 0 var(--space-5) 76px;
  position: relative;
  border-bottom: 1px solid rgba(196, 36, 107, .16);
}

.motivos--a .motivo::before {
  position: absolute;
  left: 0;
  top: 14px;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: rgba(196, 36, 107, .28);
  font-size: 54px;
  line-height: 1;
  font-weight: 800;
}