/* =============================================================================
   FUNIL DE QUIZ INTERATIVO — folha de estilo
   -----------------------------------------------------------------------------
   Design system extraído das telas de referência. Nenhum texto de conteúdo
   mora aqui — só forma, cor e espaçamento.

   Ordem do arquivo:
   1. Variáveis          6. Escala 0-10
   2. Base e cabeçalho   7. Carregamento
   3. Blocos comuns      8. Captura
   4. Capa               9. Resultado
   5. Perguntas         10. Desktop
   ============================================================================= */

/* ------------------------------------------------------------ 1. VARIÁVEIS -- */
:root {
  /* Cores */
  --preto:           #0F0F14;
  --texto-2:         #6B7280;
  --texto-3:         #9CA3AF;
  --borda:           #E5E7EB;
  --fundo:           #FFFFFF;

  --amarelo-forte:   #FFC93C;  /* banners de destaque */
  --amarelo-marca:   #FFD84D;  /* faixa sobre texto */
  --amarelo-claro:   #FEF6C7;  /* bloco de entregas */
  --dourado:         #8A6D1F;  /* texto dentro do bloco amarelo */

  --verde:           #22A44E;  /* botões e banners */
  --verde-escuro:    #1B7F3C;
  --verde-claro:     #D8F3E0;  /* bloco de benefícios */

  --vermelho:        #E23B3B;
  --vermelho-claro:  #FDECEC;

  /* Medidas */
  --raio:            16px;
  --raio-g:          20px;
  --coluna:          520px;   /* largura máxima no desktop */
  --respiro:         20px;    /* margem lateral no celular */

  /* Tipografia */
  --fonte-titulo: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-corpo:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------- 2. BASE E CABEÇALHO ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--preto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.45;
  /* Trava a rolagem horizontal em qualquer tela. */
  overflow-x: hidden;
}

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

button { font: inherit; cursor: pointer; }

mark {
  background: var(--amarelo-marca);
  color: inherit;
  padding: 0 .12em;
  border-radius: 2px;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fundo);
  padding: 10px var(--respiro) 12px;
  max-width: var(--coluna);
  margin: 0 auto;
}

.voltar {
  background: none;
  border: 0;
  padding: 4px 8px 8px 0;
  font-size: 24px;
  line-height: 1;
  color: var(--preto);
}
/* Na primeira tela não há para onde voltar — o espaço é preservado. */
.voltar[hidden] { visibility: hidden; display: block; }

.progresso {
  height: 8px;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  width: 0;
  background: var(--preto);
  border-radius: 999px;
  transition: width .35s ease;
}

.palco {
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 0 var(--respiro) 54px;
}

/* Entrada suave a cada troca de tela. */
.tela { animation: entra .28s ease both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- 3. BLOCOS COMUNS ----- */

/* Título principal de cada pergunta */
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 8px;
}

.subtitulo {
  color: var(--texto-2);
  font-size: 15px;
  font-style: italic;
  text-align: center;
  margin: 0 0 19px;
}

/* Banner de prova social acima do título.
   A "sombra sólida deslocada" é o detalhe característico do original. */
.banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  padding: 14px 15px 20px;   /* o respiro de baixo é o espaço da barrinha */
  margin: 4px 0 15px;
  font-size: 15px;
  line-height: 1.35;
}
.banner--amarelo {
  background: var(--amarelo-forte);
  box-shadow: 0 7px 0 -1px rgba(90, 68, 0, .55);
}
.banner--verde {
  background: var(--verde);
  color: #fff;
  font-weight: 600;
}
/* O bloco da pergunta 3 é texto solto, sem fundo — só a faixa amarela no meio. */
.banner--prova {
  background: none;
  padding: 0 0 14px;
  font-size: 17px;
  line-height: 1.4;
}

/* ---- Bloco de notificação -------------------------------------------------
   O destaque acima do título não nasce na tela: entra um instante depois que
   a página abre e traz uma barrinha enchendo embaixo, como os cards verdes da
   tela de carregamento. Quem controla o tempo é o CONFIG (conteudo.js).      */
[data-notificacao] {
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
[data-notificacao].notificacao--visivel {
  opacity: 1;
  transform: none;
}

.banner__barra {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  width: 0;
  background: rgba(0, 0, 0, .28);
  border-radius: 999px;
  transition: width 0s linear;  /* a duração real vem do JS */
}
/* Sobre o texto claro do bloco de prova social a barra escura seria pesada. */
.banner--prova .banner__barra { background: var(--amarelo-forte); }

/* Botão verde de ação — usado na escala, na captura e nos CTAs do resultado. */
.botao {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: var(--verde);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  padding: 18px 15px;
  transition: filter .15s ease, transform .1s ease;
}
.botao:hover  { filter: brightness(1.06); }
.botao:active { transform: scale(.99); }

/* --------------------------------------------------------------- 4. CAPA --- */
.capa__selo {
  background: var(--amarelo-claro);
  color: var(--dourado);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: uppercase;
  border-radius: var(--raio);
  padding: 17px 19px;
  margin: 12px 0 17px;
}

.capa__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 29px;
  line-height: 1.16;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 12px;
}

.capa__subtitulo {
  color: var(--texto-2);
  font-size: 17px;
  text-align: center;
  margin: 0 0 26px;
}

.capa__chamada {
  color: var(--texto-2);
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
  margin: 0 0 10px;
}

/* `.pergunta-forte` é a mesma peça, disponível nas telas de opções (campo
   `pergunta` da pergunta em conteudo.js). */
.capa__pergunta,
.pergunta-forte {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 17px;
}

/* Dois cartões lado a lado: imagem em cima, faixa preta embaixo. */
.capa__opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cartao-foto {
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--borda);
  transition: transform .12s ease;
}
.cartao-foto:active { transform: scale(.98); }

.cartao-foto__imagem {
  aspect-ratio: 3 / 4;
  width: 100%;
  display: block;
  object-fit: cover;
  background: #F3F4F6;
}

/* Enquanto a foto real não existir em assets/, mostra o espaço identificado.
   A linha do [hidden] é obrigatória: sem ela, o `display: grid` abaixo vence o
   atributo hidden e o espaço aparece embaixo da foto que carregou. */
.cartao-foto__vazio[hidden] { display: none; }
.cartao-foto__vazio {
  aspect-ratio: 3 / 4;
  display: grid;
  place-content: center;
  gap: 6px;
  background: #F3F4F6;
  color: var(--texto-3);
  font-size: 13px;
  text-align: center;
  padding: 10px;
}
.cartao-foto__vazio span { font-size: 26px; }

.cartao-foto__faixa {
  background: var(--preto);
  color: #fff;
  font-size: 17px;
  letter-spacing: .02em;
  padding: 14px 8px;
}

.capa__rodape {
  color: var(--texto-2);
  font-size: 15px;
  text-align: center;
  margin: 19px 0 0;
}

/* ---------------------------------------------------------- 5. PERGUNTAS --- */
.pergunta { padding-top: 22px; }

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 19px;
}

/* Cartão de opção: círculo de rádio vazio + texto. */
.opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 19px 17px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--preto);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.opcao:hover { border-color: var(--texto-3); }
.opcao:active { transform: scale(.995); }

/* Estado de já respondida — visível ao voltar com o ←. */
.opcao[aria-checked="true"] {
  border-color: var(--verde);
  background: #F4FCF7;
}
.opcao[aria-checked="true"] .opcao__radio {
  border-color: var(--verde);
  background: var(--verde);
  box-shadow: inset 0 0 0 5px #fff;
}

.opcao__radio {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1.5px solid #D1D5DB;
  border-radius: 50%;
  transition: all .15s ease;
}

.opcao__texto { flex: 1; }

/* Segunda linha em itálico (perguntas 6 e 7). */
.opcao__complemento {
  display: inline;
  font-style: italic;
}

/* ------------------------------------------------------ 6. ESCALA 0 A 10 --- */
.escala {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 20px 0 24px;
  justify-items: center;
}
/* A segunda fileira tem 4 números e fica centralizada, como no original. */
.escala__nota:nth-child(7) { grid-column: 2; }

.escala__nota {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 18px;
  background: var(--preto);
  color: #fff;
  font-size: 17px;
  transition: transform .1s ease, background .15s ease;
}
.escala__nota:active { transform: scale(.95); }
.escala__nota[aria-pressed="true"] {
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(34,164,78,.28);
}

/* ------------------------------------------------------- 7. CARREGAMENTO --- */
.carregando { padding-top: 110px; }

.carregando__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}

.carregando__trilho {
  height: 12px;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.carregando__preenchimento {
  height: 100%;
  width: 0;
  background: var(--preto);
  border-radius: 999px;
  transition: width .3s linear;
}

.etapas { display: flex; flex-direction: column; gap: 12px; }

/* Cada card entra um por vez e traz sua própria mini-barra no rodapé. */
.etapa {
  position: relative;
  overflow: hidden;
  background: var(--verde);
  color: #fff;
  border-radius: var(--raio);
  padding: 17px 17px 19px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.28;
  animation: entra .3s ease both;
}

.etapa__barra {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  width: 0;
  background: rgba(0, 0, 0, .3);
  transition: width .3s linear;
}

/* --------------------------------------------------------- 8. CAPTURA ------ */
.captura { padding-top: 94px; }

.captura__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 29px;
  line-height: 1.16;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 14px;
}

.captura__subtitulo {
  color: var(--texto-2);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 20px;
}

.captura__destaque {
  display: inline;
  background: var(--amarelo-marca);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.85;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 3px 4px;
}
.captura__destaque-caixa { margin: 0 0 26px; }

.campo__rotulo {
  display: block;
  color: var(--texto-2);
  font-size: 16px;
  margin-bottom: 10px;
}

.campo__entrada {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 17px;
  font-family: var(--fonte-corpo);
  font-size: 17px;
  color: var(--preto);
  margin-bottom: 12px;
}
.campo__entrada::placeholder { color: var(--texto-3); font-style: italic; }
.campo__entrada:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(34,164,78,.15);
}

/* -------------------------------------------------------- 9. RESULTADO ----- */
.resultado { padding-top: 15px; }

/* ---- Revelação por rolagem -------------------------------------------------
   Cada bloco da página final entra suavemente quando chega à tela e volta ao
   estado inicial quando sai, de modo que a página ganha vida tanto descendo
   quanto subindo. Quem liga e desliga a classe é o observador em quiz.js.    */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .75, .3, 1);
}
.revelar--visivel {
  opacity: 1;
  transform: none;
}

.resultado__selo {
  position: relative;
  overflow: hidden;
  background: var(--amarelo-forte);
  box-shadow: 0 7px 0 -1px rgba(90, 68, 0, .55);
  border-radius: var(--raio);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  padding: 15px 17px 22px;
  margin-bottom: 19px;
}

.resultado__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 23px;
  text-align: center;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.resultado__subtitulo {
  color: var(--texto-2);
  font-size: 17px;
  text-align: center;
  margin: 0 0 22px;
}

/* --- Gráfico de evolução --- */
.grafico { margin-bottom: 8px; }
.grafico svg { width: 100%; height: auto; overflow: visible; }

.grafico__rotulos {
  display: flex;
  justify-content: space-between;
  color: var(--texto-2);
  font-size: 14px;
  margin-top: 4px;
}

.dedicacao {
  font-size: 17px;
  text-align: center;
  margin: 17px 0 20px;
}

/* --- Termômetros verticais --- */
.termometros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 19px;
}

.termometro {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 19px 14px 15px;
  text-align: center;
}

.termometro__tubo {
  position: relative;
  width: 84px;
  height: 210px;
  margin: 0 auto 14px;
  background: #F3F4F6;
  border-radius: 14px;
  overflow: hidden;
}

/* O nível sobe de zero até --nivel quando o bloco entra na tela. */
.termometro__nivel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-radius: 14px;
  transition: height .9s cubic-bezier(.2, .75, .3, 1) .15s;
}
.revelar--visivel .termometro__nivel { height: var(--nivel); }
.termometro__nivel--baixo { background: var(--vermelho); }
.termometro__nivel--alto  { background: var(--verde); }

/* O número flutua logo acima do topo do preenchimento. */
.termometro__valor {
  position: absolute;
  left: 0;
  right: 0;
  font-weight: 700;
  font-size: 17px;
}

.termometro__titulo {
  color: var(--texto-2);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}

/* --- Comparativo antes / depois --- */
.comparativo {
  display: grid;
  /* minmax(0,1fr) — sem isso o texto longo alarga a coluna e estoura a tela. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

/* 16px e não 18px: na coluna estreita do celular o corpo maior partia palavras
   como "Trabalhando" no meio. */
.comparativo__item { min-width: 0; font-size: 14px; }

.comparativo__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  font-weight: 700;
  color: var(--preto);
  margin-bottom: 7px;
  line-height: 1.2;
}
/* Palavra longa demais para a coluna (ex.: "consistentemente") é hifenizada,
   não partida em qualquer ponto. O lang="pt-BR" do documento guia a separação. */
.comparativo__topo > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.comparativo__pct { flex: 0 0 auto; }

/* Barra de 5 blocos com um marcador circular na posição do percentual. */
.barra-segmentos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

/* Os blocos coloridos acendem em sequência e o marcador desliza até a posição
   quando o comparativo entra na tela. */
.barra-segmentos__bloco {
  height: 12px;
  border-radius: 999px;
  background: var(--borda);
  transition: background .35s ease;
}
.barra-segmentos__bloco:nth-child(1) { transition-delay: .10s; }
.barra-segmentos__bloco:nth-child(2) { transition-delay: .18s; }
.barra-segmentos__bloco:nth-child(3) { transition-delay: .26s; }
.barra-segmentos__bloco:nth-child(4) { transition-delay: .34s; }
.barra-segmentos__bloco:nth-child(5) { transition-delay: .42s; }

.revelar--visivel .barra-segmentos__bloco--vermelho { background: var(--vermelho); }
.revelar--visivel .barra-segmentos__bloco--verde    { background: var(--verde); }

.barra-segmentos__marcador {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 21px;
  height: 21px;
  background: #fff;
  border: 2px solid var(--borda);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .8s cubic-bezier(.2, .75, .3, 1) .2s;
}
.revelar--visivel .barra-segmentos__marcador { left: var(--pos); }

/* --- Blocos de conteúdo --- */
.bloco {
  border-radius: var(--raio-g);
  padding: 22px 19px;
  margin-bottom: 20px;
}
.bloco--amarelo { background: var(--amarelo-claro); }
.bloco--verde   { background: var(--verde-claro); }

.bloco__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 17px;
}

/* Itens do bloco amarelo: título em caixa alta dourada, texto corrido. */
.entrega { margin-bottom: 15px; color: var(--dourado); font-size: 17px; line-height: 1.4; }
.entrega:last-child { margin-bottom: 0; }
.entrega__titulo { font-weight: 700; text-transform: uppercase; }

/* Itens do bloco verde: rótulo preto, descrição verde. */
.beneficio { margin-bottom: 12px; }
.beneficio:last-child { margin-bottom: 0; }
.beneficio__titulo {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 2px;
}
.beneficio__texto { color: var(--verde-escuro); font-size: 17px; line-height: 1.35; }

/* --- Card da oferta --- */
.oferta-banner {
  background: var(--amarelo-forte);
  border-radius: var(--raio);
  padding: 15px 17px;
  margin-bottom: 17px;
}
.oferta-banner__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 4px;
}
.oferta-banner__texto { font-size: 17px; }

.oferta {
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 20px;
}

.oferta__faixa {
  background: var(--preto);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-align: center;
  padding: 13px 12px;
}

.oferta__corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--verde-claro);
  padding: 17px 15px;
}

.oferta__etiqueta {
  color: var(--verde-escuro);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}

.oferta__preco {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .55);
  border-radius: 12px;
  padding: 12px 12px;
  text-align: right;
  color: var(--verde-escuro);
}
.oferta__de     { font-size: 14px; line-height: 1.2; }
.oferta__valor  { font-family: var(--fonte-titulo); font-weight: 700; font-size: 30px; line-height: 1.1; }
.oferta__valor small { font-size: 16px; }
.oferta__vista  { font-size: 15px; }

/* --- Bônus --- */
.bonus { margin-bottom: 15px; color: var(--dourado); font-size: 17px; line-height: 1.4; }
.bonus:last-child { margin-bottom: 0; }
.bonus__titulo { font-weight: 700; }

/* --- Depoimentos --- */
.depoimentos { margin-bottom: 20px; }

.depoimento {
  background: #17171C;
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 12px;
}

/* O print entra inteiro, na largura da coluna: em depoimento de WhatsApp o texto
   é a prova — cortar a imagem para caber numa proporção fixa destruiria o valor.
   Sem esta regra a imagem sai no tamanho natural do arquivo e estoura a tela. */
.depoimento img {
  display: block;
  width: 100%;
  height: auto;
}

/* A linha do [hidden] é obrigatória: sem ela, o `display: grid` abaixo vence o
   atributo hidden e o espaço aparece junto com o print que carregou. */
.depoimento__vazio[hidden] { display: none; }
.depoimento__vazio {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  gap: 8px;
  color: #6B7280;
  font-size: 14px;
  text-align: center;
  padding: 14px;
}
.depoimento__vazio span { font-size: 30px; }

.numeros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  color: var(--texto-2);
  font-size: 17px;
  text-align: center;
  margin: 17px 0 8px;
}
.numeros strong { color: var(--preto); }

/* --- Garantia --- */
.garantia { text-align: center; margin: 27px 0 20px; }
.garantia__selo { width: 260px; max-width: 78%; margin: 0 auto 19px; }

.garantia__texto {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.garantia__complemento { color: var(--texto-2); font-size: 16px; margin: 0; }

/* --- Selos de segurança --- */
.selo-linha { color: var(--texto-2); font-size: 16px; margin: 12px 0 0; }

/* --- FAQ --- */
.faq { margin: 29px 0 20px; }

.faq__item {
  border-bottom: 1px solid var(--borda);
  padding: 17px 0;
}
.faq__item:first-of-type { border-top: 1px solid var(--borda); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}
.faq__pergunta::-webkit-details-marker { display: none; }

/* A seta gira ao abrir. */
.faq__pergunta::after {
  content: "⌄";
  flex: 0 0 auto;
  color: var(--texto-3);
  font-size: 19px;
  line-height: 1;
  transform: translateY(-4px);
  transition: transform .2s ease;
}
.faq__item[open] .faq__pergunta::after { transform: translateY(2px) rotate(180deg); }

.faq__resposta {
  color: var(--texto-2);
  font-size: 16px;
  line-height: 1.45;
  margin: 12px 0 0;
}

/* --- Alerta e ancoragem final --- */
.alerta {
  background: var(--vermelho-claro);
  color: #C0392B;
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  padding: 17px;
  margin-bottom: 20px;
}

.ancoragem { margin-top: 26px; }
.ancoragem__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 23px;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 12px;
}
.ancoragem__lista { color: var(--texto-2); font-size: 17px; margin: 0 0 15px; padding-left: 24px; }
.ancoragem__lista li { margin-bottom: 4px; }
.ancoragem__fecho {
  color: var(--texto-2);
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  margin: 0;
}

/* Espaço entre os CTAs repetidos ao longo da página. */
.resultado .botao { margin: 8px 0 19px; }

/* ------------------------------------------------------------ 10. DESKTOP -- */
@media (min-width: 560px) {
  .titulo, .capa__titulo, .captura__titulo { font-size: 31px; }
  .palco { padding-bottom: 68px; }
}

/* Respeita quem pediu menos animação no sistema: nada se move, mas tudo
   continua visível e nos valores certos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .revelar, [data-notificacao] { opacity: 1; transform: none; }
  .termometro__nivel { height: var(--nivel); }
  .barra-segmentos__marcador { left: var(--pos); }
  .barra-segmentos__bloco--vermelho { background: var(--vermelho); }
  .barra-segmentos__bloco--verde    { background: var(--verde); }
}