/* ===========================================================================
   A PÁGINA PRINCIPAL — só consome tokens. Nenhum valor de cor, tamanho ou
   espaço é escrito aqui.

   Mobile first em 390px, como todo o resto: a maior parte de quem chega por
   anúncio chega pelo celular.
   =========================================================================== */

/* --- HERÓI ---------------------------------------------------------------- */
.heroi { padding: var(--e10) 0 var(--e8); text-align: center; }
.heroi__chapeu   { display: inline-block; margin-bottom: var(--e4); }
.heroi__titulo   { margin-bottom: var(--e4); }
.heroi__subtitulo{ max-width: var(--largura-leitura); margin-left: auto; margin-right: auto; }
.heroi__imagem   { display: block; width: 100%; max-width: 520px; height: auto;
                   margin: var(--e6) auto; border-radius: var(--raio-grande); }
.heroi .botao    { margin-top: var(--e4); }
@media (min-width: 720px) { .heroi .botao--largo { width: auto; min-width: 320px; } }

/* --- DORES ---------------------------------------------------------------- */
.dores__lista { list-style: none; margin: var(--e6) 0 0; padding: 0;
                display: grid; gap: var(--e4); }
@media (min-width: 780px) { .dores__lista { grid-template-columns: repeat(3, 1fr); } }
.dor__icone  { display: block; font-size: 40px; line-height: 1; margin-bottom: var(--e3); }
.dor__titulo { margin-bottom: var(--e2); }
.dor__texto  { margin: 0; color: var(--cor-texto-suave); }

/* --- JORNADA -------------------------------------------------------------- */
.jornada__lista { list-style: none; margin: var(--e6) 0 0; padding: 0; }
.jornada__lista > li + li { margin-top: var(--e4); }
.jornada__item  { display: flex; gap: var(--e4); align-items: flex-start; }
.jornada__numero {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texto-medio); font-weight: var(--peso-forte);
  color: var(--cor-texto-invertido); background: var(--cor-primaria);
  border-radius: var(--raio-redondo);
}
.jornada__corpo h3 { margin-bottom: var(--e2); }
.jornada__corpo p  { margin-bottom: var(--e2); }

/* --- SELOS ---------------------------------------------------------------- */
.selos__lista { list-style: none; margin: 0; padding: 0;
                display: grid; gap: var(--e4); text-align: center; }
@media (min-width: 560px) { .selos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .selos__lista { grid-template-columns: repeat(4, 1fr); } }
.selo-item        { padding: var(--e5) var(--e3); background: var(--cor-fundo);
                    border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.selo-item__icone { display: block; font-size: 32px; line-height: 1; margin-bottom: var(--e2); }
.selo-item__valor { display: block; font-size: var(--texto-titulo); font-weight: var(--peso-forte);
                    color: var(--cor-primaria); }
.selo-item__valor:empty { display: none; }
.selo-item__rotulo{ display: block; color: var(--cor-texto-suave); }

/* --- PRÓXIMO PASSO -------------------------------------------------------- */
.proximo-passo { text-align: center; }

/* --- DEPOIMENTOS ---------------------------------------------------------- */
.depoimentos__lista { list-style: none; margin: var(--e6) 0 0; padding: 0;
                      display: grid; gap: var(--e4); }
@media (min-width: 780px) { .depoimentos__lista { grid-template-columns: repeat(2, 1fr); } }
.depoimento__texto { margin-bottom: var(--e3); }
.depoimento__autor { margin: 0; font-weight: var(--peso-medio); }

/* --- OFERTA --------------------------------------------------------------- */
.oferta {
  max-width: var(--largura-leitura); margin-left: auto; margin-right: auto;
  padding: var(--e8) var(--e5); text-align: center;
  background: var(--cor-fundo); border: 3px solid var(--cor-primaria);
  border-radius: var(--raio-grande); box-shadow: var(--sombra-2);
}
.oferta__produto  { font-size: var(--texto-medio); font-weight: var(--peso-forte); margin-bottom: var(--e2); }
.oferta__contador { display: inline-block; padding: var(--e2) var(--e4); margin-bottom: var(--e4);
                    color: var(--cor-aviso-esc); background: var(--cor-aviso-fundo);
                    border: 2px solid var(--cor-aviso-borda); border-radius: var(--raio-redondo); }
.oferta__precos   { display: flex; align-items: baseline; justify-content: center;
                    gap: var(--e3); margin-bottom: var(--e2); }
/* Preço riscado precisa de mais que o risco: quem enxerga pouco não distingue
   um risco fino de um traço da fonte. Por isso vem menor e em cinza. */
.oferta__de   { text-decoration: line-through; color: var(--cor-texto-suave); font-size: var(--texto-corpo); }
.oferta__por  { font-size: 40px; font-weight: var(--peso-forte); color: var(--cor-primaria-esc); line-height: 1.1; }
.oferta__parcelas { font-size: var(--texto-medio); margin-bottom: var(--e2); }
.oferta__pix      { color: var(--cor-sucesso-esc); font-weight: var(--peso-medio); margin-bottom: var(--e5); }
.oferta__garantia { margin: var(--e4) 0 0; color: var(--cor-texto-suave); }

/* --- PERGUNTAS ------------------------------------------------------------ */
.pergunta { border: 1px solid var(--cor-borda); border-radius: var(--raio);
            margin-top: var(--e3); background: var(--cor-fundo); }
.pergunta__titulo {
  min-height: var(--alvo-toque);
  display: flex; align-items: center;
  padding: var(--e3) var(--e5);
  font-size: var(--texto-medio); font-weight: var(--peso-medio);
  cursor: pointer;
}
.pergunta__titulo:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
.pergunta__resposta { padding: 0 var(--e5) var(--e4); }
.pergunta__resposta p { margin-bottom: var(--e3); }

/* --- RODAPÉ --------------------------------------------------------------- */
.rodape { margin-top: var(--e16); padding: var(--e8) 0 calc(var(--e16) + 60px);
          background: var(--cor-fundo-suave); border-top: 1px solid var(--cor-borda); }
.rodape__aviso  { max-width: var(--largura-leitura); color: var(--cor-texto-suave); }
.rodape__links  { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); margin: var(--e5) 0; }
.rodape__link   { min-height: var(--alvo-toque-menor); display: inline-flex; align-items: center; }
.rodape__direitos { margin: 0; }

/* --- BARRA FIXA NO CELULAR ------------------------------------------------ */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 45;                     /* abaixo da barra do topo (50) e acima do resto */
  padding: var(--e3) var(--e4);
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -2px 12px rgba(0,0,0,.10);
}
/* Só no celular. Em tela larga sobra espaço e a oferta já está à vista; a barra
   ali só tapa conteúdo. */
@media (min-width: 900px) { .barra-fixa { display: none !important; } }

/* --- AVISO DE COOKIES ----------------------------------------------------- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;                     /* acima da barra fixa: a escolha vem antes */
  padding: var(--e5) 0;
  background: var(--cor-fundo);
  border-top: 3px solid var(--cor-primaria);
  box-shadow: 0 -4px 20px rgba(0,0,0,.16);
  max-height: 80vh; overflow-y: auto;
}
.cookies__titulo { font-size: var(--texto-medio); margin-bottom: var(--e2); }
.cookies__texto  { margin-bottom: var(--e4); }
.cookies__acoes  { display: flex; flex-direction: column; gap: var(--e3); }
@media (min-width: 720px) {
  .cookies__acoes { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cookies__acoes .botao { width: auto; min-width: 220px; }
}
.cookies__escolha { margin-top: var(--e5); }
.cookies__linha {
  display: flex; align-items: flex-start; gap: var(--e3);
  min-height: var(--alvo-toque); padding: var(--e2) 0;
  cursor: pointer;
}
.cookies__linha input { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px;
                        accent-color: var(--cor-primaria); }