/* Imagine · LP v4 (23/09/2026): a v3 ajustada ao Guia de Marca 2026.
   Carrega por último e só sobrepõe. Manual: Downloads\IMAGINE_GUIADEMARCA.pdf
   - paleta: creme #FEF6EC, grafite #212121, laranja #E7691D, azul intenso #0152ED, azul suave #C8E5FC
   - títulos em Fellix Regular, textos em Fellix Light, espaçamento -5% (aqui Figtree, a substituta)
   - logotipo sempre como imagem oficial (positiva no claro, negativa no escuro), nunca digitado
   Papel das cores na página:
   - LARANJA = botão de conversão (texto branco, 19px+ em peso 600: passa AA de texto grande)
   - AZUL INTENSO = seção de destaque e rótulos/ícones sobre fundo claro
   - GRAFITE = herói, segurança, rodapé, plano em destaque
   - AZUL SUAVE = seção do livro da família e marca-texto da leitura */

/* ---------- tipografia ---------- */
h1, h2, h3, .heroi h1 { font-weight: 500; letter-spacing: -.05em; }
h2 { line-height: 1.02; }
b, strong { font-weight: 600; }
.heroi h1 { font-weight: 500; line-height: .92; }
.heroi h1 .enfase { letter-spacing: -.05em; }
.heroi h1 .enfase::after { background: var(--laranja); height: .07em; }
.olho { font-weight: 600; letter-spacing: .12em; }
.olho, .olho-escuro { color: var(--azul); }
.preco, .numeros b, .pilha-titulo, .pilha-total b, .dor-lista li { font-weight: 500; letter-spacing: -.05em; }
.idade strong, .resposta-titulo, .app-livro, .relato blockquote, .faq summary, .lado li b, .beneficios b, .nao-lista b, .familia-usos b { font-weight: 500; letter-spacing: -.03em; }
.lado-tag, .plano-tag, .selo-novo, .resposta-conta, .breve, .pilha em { font-weight: 600; }
.passos li::before { font-weight: 500; }

/* ---------- botões ---------- */
.btn-sol { background: var(--laranja); color: #fff; }
.btn-sol:hover { background: #D35E17; }
.btn-lg { font-size: 19px; }
.btn:focus-visible, .idade:focus-visible, .faq summary:focus-visible { outline-color: var(--azul); }

/* ---------- logotipo ---------- */
.logo { background: none; padding: 0; border-radius: 0; }
.logo img, .heroi .logo img { height: 34px; width: auto; }
.rodape img { background: none; padding: 0; border-radius: 0; height: 36px; }
.app-lado img { width: 120px; }

/* ---------- grafismo de apoio: os raios do símbolo ---------- */
.raios { position: absolute; pointer-events: none; z-index: 0; }
.raios svg { display: block; width: 100%; height: 100%; }

/* ---------- herói ---------- */
.avatares img, .avatares b { border-color: var(--grafite); }
.avatares b { background: var(--laranja); color: #fff; font-weight: 500; }
.estrelas { color: var(--raio-6); }
.pilula { font-weight: 500; }
.nota-topo b { font-weight: 600; }

/* ---------- seletor ---------- */
.idade[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--azul); }
.idade[aria-pressed="true"] span { background: var(--grafite); }
.resposta-titulo b { color: var(--azul); font-weight: 600; }
.resposta li::before, .plano li::before, .pilha li::before { color: var(--laranja); }
.resposta-conta { background: var(--azul-suave); color: var(--grafite); }

/* ---------- antes x depois: seção azul intenso ---------- */
.versus { background: var(--azul); color: #fff; overflow: hidden; }
.versus .olho { color: var(--azul-suave); }
.versus .wrap { position: relative; z-index: 1; }
.versus .raios { width: 520px; height: 520px; right: -200px; top: -200px; opacity: .22; }
.lado-imagine .lado-tag { background: var(--grafite); color: var(--raio-6); }
.vistos li::before { background: var(--laranja); color: #fff; }
.vs { background: var(--grafite); font-weight: 500; }
.versus .btn-noite { background: var(--laranja); color: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); }

/* ---------- app por dentro ---------- */
.app-lado li.ativo { background: var(--azul); color: #fff; }
.app-lado li { font-weight: 500; }
.app-rotulo { color: var(--azul); font-weight: 600; }
.progresso i { background: var(--laranja); }
.chip { font-weight: 500; }
.chip.ativo { background: var(--grafite); }
.selo-novo { background: var(--laranja); color: #fff; }
.app { box-shadow: 0 0 0 12px var(--grafite), 0 50px 90px -40px rgba(33,33,33,.55); }

/* ---------- livro da família: azul suave ---------- */
.familia { background: var(--azul-suave); overflow: hidden; }
.familia .wrap { position: relative; z-index: 1; }
.familia .raios { width: 460px; height: 460px; left: -230px; bottom: -230px; opacity: .5; }
.breve { background: var(--grafite); color: var(--raio-5); }
.capa-autor { font-weight: 600; }

/* ---------- relatos ---------- */
.rel-num b { color: var(--raio-6); font-weight: 500; }

/* ---------- primeira semana ---------- */
.pilar-coral { background: var(--azul); color: #fff; }
.pilar-coral p { color: #E3EEFD; }
.pilar-coral h3 { font-weight: 500; }

/* ---------- segurança ---------- */
.checks li::before { background: var(--laranja); color: #fff; }
.checks li { font-weight: 300; }

/* ---------- oferta ---------- */
.plano-tag { background: var(--laranja); color: #fff; }
.plano-destaque { background: var(--grafite); }
.pilha-total b { color: var(--azul); }
.pilha em { background: var(--laranja); color: #fff; }
.garantia-bloco { background: var(--azul); position: relative; overflow: hidden; }
.garantia-bloco p { color: #E3EEFD; }
.garantia-bloco .seguro { color: var(--azul-suave); }
.garantia-bloco h3 { font-weight: 500; }

/* ---------- FAQ ---------- */
.faq details { border-bottom-color: rgba(33,33,33,.12); }
.faq summary::after { color: var(--laranja); font-weight: 300; }

/* ---------- CTA final: laranja com os raios ---------- */
.final { background: var(--laranja); color: var(--grafite); position: relative; overflow: hidden; }
.final .wrap { position: relative; z-index: 1; }
.final .raios { width: 560px; height: 560px; right: -170px; top: 50%; transform: translateY(-50%); opacity: .35; }
.final .btn-noite { background: var(--grafite); color: #fff; }
.final-prova { font-weight: 600; }
.final-prova .avatares img { border-color: var(--laranja); }

/* ---------- rodapé ---------- */
.rodape { background: var(--grafite); }

@media (max-width: 720px) {
  .resposta .btn { font-size: 19px; }
  .logo img, .heroi .logo img { height: 28px; }
  .final .raios { width: 380px; height: 380px; right: -190px; top: auto; bottom: -190px; transform: none; }
  .versus .raios, .familia .raios { width: 320px; height: 320px; }
}

.versus .raios { color: var(--azul-suave); }
.familia .raios { color: #fff; }
.final .raios { color: var(--creme); }

/* rótulo sobre grafite: azul intenso reprova (2,6:1), usa o azul suave */
.seguranca .olho { color: var(--azul-suave); }