/* =====================================================================
   KIT PROMAGNÉSIO + COMPLEXO B — lp06 · "Protocolo E4"
   PAINEL DE CONTROLE DO VISUAL

   Para mudar a aparência da página inteira, troque SÓ os valores do
   bloco :root abaixo. Você não precisa mexer em nenhuma outra parte.
   ===================================================================== */
:root {
  /* --- CORES — paleta "Violeta Always Fit" -------------------------
     cor-cta é a cor do botão de compra. Ela é EXCLUSIVA do botão:
     não use em título, ícone ou fundo, senão o botão perde o destaque.
     A página é DARK: violeta-quase-preto nos fundos, lilás nos títulos
     e dourado reservado ao botão de compra. */
  --cor-fundo:           #0E0B14;  /* violeta quase-preto: fundo da página */
  --cor-fundo-alt:       #14101E;  /* violeta das seções alternadas */
  --cor-superficie:      #1B1527;  /* fundo dos cards */
  --cor-marca:           #C4A6FF;  /* lilás: títulos e destaques */
  --cor-marca-clara:     #6C3FB0;  /* violeta médio de apoio (bordas) */
  --cor-azul:            #A98BE0;  /* lilás suave: numeração e chapéus */
  --cor-azul-fundo:      #241C33;  /* violeta escuro: fundo de selos e realces */
  --cor-estrela:         #E8B44A;  /* dourado das estrelas de avaliação */
  --cor-cta:             #E8B44A;  /* BOTÃO DE COMPRA — só aqui */
  --cor-cta-hover:       #D6A033;
  --cor-cta-texto:       #231603;  /* texto ESCURO sobre o botão dourado */
  --cor-texto:           #F3EFFA;  /* texto principal */
  --cor-texto-suave:     #AEA3C4;  /* texto secundário */
  --cor-borda:           #2C2340;  /* borda violeta */
  --cor-ok:              #5FD8A4;  /* verde dos reforços de segurança */
  --cor-escuro:          #08060E;  /* quase-preto (barra do topo e rodapé) */

  /* --- Textos que ficam SOBRE os fundos mais escuros --- */
  --cor-sobre-escuro:    #AEA3C4;  /* texto na coluna quase-preta */
  --cor-sobre-escuro-forte: #F3EFFA;  /* destaque na coluna quase-preta */
  --cor-sobre-escuro-fraco: #736A87;  /* marcador de "errado" */
  --cor-sobre-azul:      #F3EFFA;  /* texto na coluna violeta */
  --cor-sobre-azul-luz:  #C4A6FF;  /* marcador de "certo" e contador */
  --cor-barra-texto:     #F3EFFA;  /* texto da barra do topo */
  --cor-rodape-texto:    #8E82A6;  /* texto do rodapé */

  /* --- TIPOGRAFIA (acompanha o tamanho da tela) --- */
  --fonte-titulo: "Inter", system-ui, -apple-system, sans-serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, sans-serif;
  --fs-hero:   clamp(1.85rem, 7.2vw, 2.9rem);
  --fs-titulo: clamp(1.45rem, 5.6vw, 2.1rem);
  --fs-sub:    clamp(1rem, 4.1vw, 1.15rem);
  --fs-texto:  clamp(1rem, 3.9vw, 1.075rem);
  --fs-peq:    0.875rem;

  /* --- ESPAÇAMENTO --- */
  --esp-1: 0.5rem;  --esp-2: 1rem;   --esp-3: 1.5rem;
  --esp-4: 2rem;    --esp-6: 3rem;
  --pad-secao: clamp(2.5rem, 9vw, 4.5rem);
  --largura-max: 640px;   /* largura do conteúdo no desktop */

  /* --- FORMA --- */
  --raio-botao: 20px;   /* cantos do botão de compra */
  --raio-card:  16px;
  --raio-peq:   10px;
  --sombra-card: 0 10px 30px rgba(8, 6, 14, 0.55);
  --sombra-cta:  0 8px 24px rgba(232, 180, 74, 0.30);

  /* --- ESPAÇO PARA IMAGEM (o que ainda falta incluir) --- */
  --cor-espaco-borda:    #E8B44A;  /* dourado: chama atenção pro que falta */
  --cor-espaco-fundo:    #1D1629;
  --cor-espaco-texto:    #C4A6FF;
}

/* =====================================================================
   BASE — reset enxuto e tipografia geral
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--fs-texto);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  /* Espaço no rodapé para o botão fixo não cobrir conteúdo */
  padding-bottom: 104px;
}

/* Brilho violeta de fundo — assinatura visual da página. Fica atrás de tudo.
   É só CSS: não tem imagem para trocar. Para deixar mais ou menos
   visível, mexa no opacity. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(70% 45% at 15% 8%,  rgba(142, 91, 232, 0.22), transparent 70%),
    radial-gradient(60% 40% at 90% 35%, rgba(196, 166, 255, 0.14), transparent 70%),
    radial-gradient(80% 45% at 40% 95%, rgba(108, 63, 176, 0.24), transparent 70%);
}

/* Garante que o conteúdo fique acima do brilho de fundo.
   A barra do topo e o botão fixo já têm posição e z-index próprios
   mais abaixo — por isso não entram aqui. */
.marca-topo, main, .rodape { position: relative; z-index: 1; }

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

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.2;
  margin: 0 0 var(--esp-2);
  letter-spacing: -0.02em;
}

p { margin: 0 0 var(--esp-2); }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Foco visível — importante para acessibilidade */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--cor-marca);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--esp-2);
}

.texto-centro { text-align: center; color: var(--cor-texto-suave); }

/* =====================================================================
   BOTÃO DE COMPRA — largura cheia no celular
   O texto do botão fica no index.html; aqui só a aparência.
   O texto é ESCURO porque o botão é ciano.
   ===================================================================== */
.botao {
  display: block;
  width: 100%;
  /* Fonte grande com padding menor: o texto cresce e a altura fica igual */
  padding: 0.85rem 0.7rem;
  background: var(--cor-cta);
  color: var(--cor-cta-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.075rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--raio-botao);
  box-shadow: var(--sombra-cta);
  cursor: pointer;
  /* Alvo de toque confortável no celular */
  min-height: 56px;
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.botao:hover  { background: var(--cor-cta-hover); }
.botao:active { transform: translateY(1px); }

/* Linha 1 = a ação · Linha 2 = a data de hoje (preenchida pelo script)
   Para deixar o texto do botão maior ou menor, mexa só nestes dois
   font-size — a altura do botão continua a mesma. */
.botao__acao {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}
.botao__data {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--fonte-texto);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.85;
}

/* O botão fixo do rodapé é um pouco mais compacto */
.cta-fixo .botao__acao { font-size: 1.1rem; }
.cta-fixo .botao__data { font-size: 0.82rem; }

/* =====================================================================
   BARRA DE OFERTA — faixa fixa no topo com o contador
   ===================================================================== */
.barra-oferta {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--esp-2);
  align-items: center;
  justify-content: center;
  padding: 0.6rem var(--esp-2);
  background: var(--cor-escuro);
  color: var(--cor-barra-texto);
  text-align: center;
}
.barra-oferta p { margin: 0; font-size: var(--fs-peq); }
.barra-oferta__texto strong { color: var(--cor-marca); }
.barra-oferta__timer {
  font-variant-numeric: tabular-nums;
  color: var(--cor-sobre-azul-luz);
}
.barra-oferta__timer span { font-weight: 700; }

/* =====================================================================
   FAIXA DO LOGO — logo da marca acima do conteúdo
   O arquivo logo-topo.png já é branco, por isso aparece bem no escuro.
   Para trocar o tamanho do logo, mexa no max-width abaixo.
   ===================================================================== */
.marca-topo {
  padding: 0.85rem var(--esp-2) 0.6rem;
  background: var(--cor-fundo-alt);
  text-align: center;
}
.marca-topo img {
  width: auto;
  height: auto;
  max-width: 132px;
  margin: 0 auto;
}

/* =====================================================================
   1. HERO — primeira dobra
   ===================================================================== */
.hero {
  padding: var(--esp-3) 0 var(--pad-secao);
  background: linear-gradient(180deg, var(--cor-fundo-alt) 0%, var(--cor-fundo) 55%);
  text-align: center;
}

.selo-marca {
  display: inline-block;
  margin-bottom: var(--esp-2);
  padding: 0.4rem 0.9rem;
  background: var(--cor-azul-fundo);
  border: 1px solid var(--cor-marca-clara);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-marca);
}

.hero__titulo {
  font-size: var(--fs-hero);
  font-weight: 800;
  margin-bottom: var(--esp-2);
}
.hero__titulo strong {
  font-weight: 800;
  color: var(--cor-marca);
  /* Faixa azul por baixo da frase que carrega a promessa */
  box-shadow: inset 0 -0.28em 0 var(--cor-azul-fundo);
}

.hero__sub {
  font-size: var(--fs-sub);
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-3);
}
.hero__sub strong { color: var(--cor-texto); }

/* O botão vem depois do texto; a imagem abre a página */
.hero .botao { margin-bottom: var(--esp-3); }

.hero__figura { margin: 0 0 var(--esp-3); }
.hero__figura img {
  /* A arte já vem no formato certo (antes/depois com os selos DIA 01 e DIA 28
     na base) — nada de recorte, senão os selos são cortados fora. */
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}

.hero__reforcos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-1) var(--esp-2);
  margin-top: var(--esp-3);
}
.hero__reforcos li {
  font-size: var(--fs-peq);
  font-weight: 600;
  color: var(--cor-texto-suave);
}
.hero__reforcos li::before {
  content: "✓";
  margin-right: 0.35rem;
  color: var(--cor-ok);
  font-weight: 700;
}

/* =====================================================================
   SEÇÕES — estrutura comum
   ===================================================================== */
.secao { padding: var(--pad-secao) 0; }

/* ---------------------------------------------------------------------
   RITMO DAS DOBRAS — a página alterna faixas ESCURAS e faixas CLARAS.
   A ordem, de cima para baixo, é esta (mexeu na ordem das seções?
   reveja esta lista, senão duas faixas da mesma cor ficam coladas):

     hero ......... escuro (degradê)     oferta ....... escuro (degradê)
     mecanismo .... escuro               tempo ........ CLARO
     prints 1 ..... CLARO                faq .......... escuro
     sinais ....... escuro               fechamento ... CLARO
     frentes ...... CLARO                rodapé ....... quase-preto
     comparativo .. escuro
     prints 2 ..... CLARO  (prints + fotos dos clientes)

   Para virar uma seção de escuro para claro, basta somar a classe
   "secao--clara" no <section> do index.html. O contrário é tirar a classe.
   --------------------------------------------------------------------- */

/* Estas ficam sem fundo próprio, para o brilho azul aparecer atrás */
.secao--mecanismo,
.secao--sinais,
.secao--comparativo,
.secao--faq { background: transparent; }

/* ---------------------------------------------------------------------
   FAIXA CLARA — a seção inteira troca de paleta.
   Só as cores são redefinidas aqui: todo componente que estiver dentro
   (card, print, botão, selo) se repinta sozinho, sem regra extra.
   --------------------------------------------------------------------- */
.secao--clara {
  --cor-fundo:        #F8F5FD;  /* fundo da faixa clara */
  --cor-fundo-alt:    #EDE5FA;  /* realces internos */
  --cor-superficie:   #FFFFFF;  /* cards e prints */
  --cor-marca:        #5B2E9E;  /* violeta escuro: títulos e destaques */
  --cor-marca-clara:  #C2A8E8;
  --cor-azul:         #6C3FB0;  /* chapéus e numeração */
  --cor-azul-fundo:   #EAE0F8;  /* fundo de selos */
  --cor-estrela:      #B07B14;  /* estrelas de avaliação */
  --cor-texto:        #1B1230;
  --cor-texto-suave:  #5B5175;
  --cor-borda:        #DED2F0;
  --cor-ok:           #0F8F5F;
  --sombra-card:      0 8px 24px rgba(27, 18, 48, 0.10);
  --cor-espaco-fundo: #F3ECFB;
  --cor-espaco-borda: #A9701A;
  --cor-espaco-texto: #5B2E9E;

  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Qualquer seção pode virar destino de link interno. A barra fixa do topo
   não pode cobrir o título quando a página pula até lá.
   (a seção de oferta tem a mesma folga, declarada junto com o degradê dela) */
.secao--mecanismo,
.secao--prints,
.secao--sinais,
.secao--frentes,
.secao--comparativo,
.secao--tempo,
.secao--faq,
.secao--fechamento { scroll-margin-top: 60px; }

.secao__chapeu {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-azul);
  text-align: center;
  margin-bottom: var(--esp-1);
}

.secao__titulo {
  font-size: var(--fs-titulo);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--esp-2);
}

.secao__sub {
  font-size: var(--fs-sub);
  color: var(--cor-texto-suave);
  text-align: center;
  margin-bottom: var(--esp-4);
}

.secao .botao { margin-top: var(--esp-4); }

/* =====================================================================
   2. MECANISMO — Protocolo T3
   ===================================================================== */
.figura-animada, .figura-larga { margin: 0 0 var(--esp-3); }
.figura-animada img, .figura-larga img {
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  width: 100%;
}

.destaque-frase {
  margin-top: var(--esp-2);
  padding: var(--esp-3);
  background: var(--cor-azul-fundo);
  border-radius: var(--raio-card);
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cor-marca);
  text-align: center;
}

/* =====================================================================
   CARTÃO DO PROTOCOLO T3 — o mecanismo mostrado de forma visual
   EDITAR AQUI: nada de texto; o conteúdo fica no index.html
   ===================================================================== */
.matriz {
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-marca-clara);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  text-align: center;
}

.matriz__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--esp-3);
}
.matriz__nome span {
  display: block;
  font-size: clamp(3.2rem, 17vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cor-marca);
}

/* As três definições: T, 3 e 1 */
.matriz__legenda {
  display: grid;
  gap: 0.6rem;
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-bottom: 1px dashed var(--cor-borda);
}
.matriz__legenda li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--cor-fundo-alt);
  border-radius: var(--raio-peq);
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
  text-align: left;
}
.matriz__legenda strong { color: var(--cor-texto); margin-right: 0.2rem; }
.matriz__simbolo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cor-marca);
  color: var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
}

.matriz__intro {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-azul);
  margin-bottom: var(--esp-2);
}

/* As 3 fórmulas como etiquetas */
.matriz__ativos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: var(--esp-2);
}
.matriz__ativos li {
  padding: 0.4rem 0.75rem;
  background: var(--cor-azul-fundo);
  border: 1px solid var(--cor-marca-clara);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-marca);
}

.matriz__nota {
  margin: 0;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* =====================================================================
   3. AS 3 FRENTES — cards numerados
   ===================================================================== */
.grid-frentes { display: grid; gap: var(--esp-2); }

.card-frente {
  position: relative;
  padding: var(--esp-3) var(--esp-3) var(--esp-3) 3.6rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}
.card-frente__num {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-2);
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-azul);
}
.card-frente h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.card-frente p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}

/* =====================================================================
   4. SINAIS — lista de identificação
   ===================================================================== */
.lista-sinais { margin-bottom: var(--esp-3); }
.lista-sinais li {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem var(--esp-2);
  margin-bottom: 0.5rem;
  background: var(--cor-superficie);
  border-radius: var(--raio-peq);
  border: 1px solid var(--cor-borda);
  font-size: 0.98rem;
}
.lista-sinais li::before {
  content: "•";
  color: var(--cor-marca);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
}

/* =====================================================================
   5. COMPARATIVO — nós x as outras soluções
   ===================================================================== */
.comparativo { display: grid; gap: var(--esp-2); }

.comparativo__coluna {
  padding: var(--esp-3);
  border-radius: var(--raio-card);
}
.comparativo__cabecalho {
  font-size: 1.05rem;
  text-align: center;
  padding-bottom: var(--esp-2);
  margin-bottom: var(--esp-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
/* O marcador fica posicionado à esquerda para o texto correr inteiro,
   sem quebrar em duas colunas depois da palavra em negrito. */
.comparativo__coluna li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--esp-2);
  font-size: 0.95rem;
}
.comparativo__coluna li:last-child { margin-bottom: 0; }
.comparativo__coluna li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Coluna do Kit 01: azul com borda clara, marcadores de "certo" */
.comparativo__coluna--nos {
  background: var(--cor-azul-fundo);
  border: 1px solid var(--cor-marca);
  color: var(--cor-sobre-azul);
}
.comparativo__coluna--nos li::before { content: "✓"; color: var(--cor-sobre-azul-luz); }
.comparativo__coluna--nos strong { color: var(--cor-marca); }

/* Coluna das outras soluções: quase-preto, marcadores de "errado" */
.comparativo__coluna--eles {
  background: var(--cor-escuro);
  border: 1px solid var(--cor-borda);
  color: var(--cor-sobre-escuro);
}
.comparativo__coluna--eles .comparativo__cabecalho { color: var(--cor-sobre-escuro); }
.comparativo__coluna--eles li::before { content: "✕"; color: var(--cor-sobre-escuro-fraco); }
.comparativo__coluna--eles strong { color: var(--cor-sobre-escuro-forte); }


/* =====================================================================
   8. LINHA DE TEMPO — o que esperar
   ===================================================================== */
.linha-tempo {
  display: grid;
  gap: var(--esp-2);
  counter-reset: etapa;
}
.linha-tempo li {
  counter-increment: etapa;
  position: relative;
  padding: var(--esp-3) var(--esp-3) var(--esp-3) 3.4rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}
.linha-tempo li::before {
  content: counter(etapa);
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor-marca);
  color: var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight: 700;
}
.linha-tempo h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.linha-tempo p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}

/* =====================================================================
   9. OFERTA — cards de kit (é aqui que a venda fecha)
   ===================================================================== */
.secao--oferta {
  background: linear-gradient(180deg, var(--cor-fundo-alt) 0%, var(--cor-fundo) 100%);
  /* Compensa a barra fixa do topo quando a página rola até aqui */
  scroll-margin-top: 60px;
}

.grid-kits { display: grid; gap: var(--esp-3); }

.kit {
  display: block;
  position: relative;
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.kit img { margin: 0 auto var(--esp-2); max-width: 210px; }

/* Card em destaque: borda clara e etiqueta */
.kit--destaque {
  border: 2px solid var(--cor-marca);
  padding-top: 2.6rem;
}
.kit__tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.85rem;
  background: var(--cor-marca);
  color: var(--cor-fundo);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.kit__nome {
  font-size: 1.3rem;
  margin-bottom: var(--esp-1);
}
.kit__nome small {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
}
.kit__de {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  text-decoration: line-through;
}
/* O PREÇO GRANDE do card é a PARCELA — é o número que decide a compra.
   O "12x de" fica pequeno de propósito: quem lê rápido vê o valor, não a
   quantidade de parcelas. Para trocar o tamanho do preço, mexa só no
   font-size daqui. */
.kit__parcela {
  margin: 0.1rem 0 0;
  font-family: var(--fonte-titulo);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cor-marca);
  line-height: 1.15;
}
/* "12x de" — pequeno, na mesma linha do valor */
.kit__parcela-prefixo {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cor-texto-suave);
}
/* Sobe o asterisco: na base de um número grande ele parece um ponto final */
.kit__asterisco {
  font-size: 0.9rem;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--cor-texto-suave);
}

/* O valor à vista vira apoio, logo abaixo da parcela */
.kit__avista {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}
.kit__avista strong { color: var(--cor-texto); font-weight: 700; }
.kit__unidade {
  margin: 0.25rem 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-ok);
}

.botao--kit { margin-top: 0; }
/* Os botões dentro dos cards de kit não têm a 2ª linha da data,
   então recebem o texto maior direto no próprio botão. */
.botao--kit { font-size: 1.2rem; }

/* Nota da parcela, logo abaixo dos cards */
.nota-parcela {
  margin: var(--esp-3) 0 0;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  text-align: center;
}

/* Reforços de segurança abaixo dos kits */
.reforcos-compra {
  margin-top: var(--esp-3);
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  text-align: center;
}
.reforcos-compra p {
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
}
.reforcos-compra strong { color: var(--cor-ok); }
.reforcos-compra img {
  margin: var(--esp-2) auto 0;
  max-width: 220px;
}

/* =====================================================================
   10. PERGUNTAS FREQUENTES (acordeão)
   ===================================================================== */
.faq { display: grid; gap: 0.6rem; }

.faq__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-peq);
  overflow: hidden;
}

.faq__pergunta {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: 56px;
  padding: var(--esp-2);
  background: none;
  border: 0;
  font-family: var(--fonte-texto);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--cor-texto);
  text-align: left;
  cursor: pointer;
}

/* O sinal de + vira − quando a resposta está aberta */
.faq__sinal {
  flex-shrink: 0;
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: auto;
}
.faq__sinal::before, .faq__sinal::after {
  content: "";
  position: absolute;
  background: var(--cor-marca);
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq__sinal::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__sinal::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__pergunta[aria-expanded="true"] .faq__sinal::after { transform: rotate(90deg); }

.faq__resposta { padding: 0 var(--esp-2) var(--esp-2); }
.faq__resposta p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}

/* =====================================================================
   11. FECHAMENTO + RODAPÉ
   ===================================================================== */
.secao--fechamento { text-align: center; }
/* A arte dos potes é recortada (fundo transparente): sem moldura. */
.secao--fechamento img {
  margin: 0 auto var(--esp-3);
  max-width: 300px;
}

.rodape {
  padding: var(--esp-6) 0;
  background: var(--cor-escuro);
  color: var(--cor-rodape-texto);
  text-align: center;
}
.rodape img { margin: 0 auto var(--esp-3); max-width: 140px; }
.rodape p { font-size: 0.82rem; }
.rodape__aviso { font-size: 0.75rem; opacity: 0.75; margin-bottom: 0; }

/* =====================================================================
   BOTÃO FIXO DE COMPRA (celular)
   ===================================================================== */
.cta-fixo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  padding: 0.6rem var(--esp-2);
  background: rgba(14, 11, 20, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cor-borda);
}
.cta-fixo[hidden] { display: none; }
.cta-fixo .botao { padding: 0.95rem 1rem; }

/* =====================================================================
   DEPOIMENTOS EM PRINT — mural das avaliações que chegam por mensagem.
   Os prints têm alturas diferentes: por isso NÃO há altura fixa aqui.
   Cada print entra com a proporção do próprio arquivo.
   ===================================================================== */
/* Cabeçalho de prova do mural: contagem + nota + estrelas */
.prova__contagem {
  margin: 0 0 0.3rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--cor-marca);
}
.estrelas { color: var(--cor-estrela); letter-spacing: 0.06em; }

.prints { display: grid; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.print {
  padding: 0.5rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}
.print img { display: block; width: 100%; height: auto; border-radius: var(--raio-peq); }
/* Marcação de print que ainda não está na pasta */
.espaco-imagem--print { aspect-ratio: 4 / 3; }

/* =====================================================================
   DESKTOP — a partir de 720px. O celular é a base; aqui só ajustamos.
   ===================================================================== */
@media (min-width: 720px) {
  .prints { grid-template-columns: repeat(2, 1fr); align-items: start; }
  :root { --largura-max: 900px; }

  body { padding-bottom: 0; }

  /* No desktop o botão fixo não é necessário */
  .cta-fixo { display: none !important; }

  /* Botões deixam de ocupar a largura toda */
  .secao .botao, .hero .botao {
    width: auto;
    min-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .botao--kit { width: 100%; min-width: 0; }

  .hero__figura img { max-width: 520px; margin: 0 auto; }

  .grid-frentes { grid-template-columns: repeat(2, 1fr); }
  .comparativo  { grid-template-columns: repeat(2, 1fr); }
  .linha-tempo  { grid-template-columns: repeat(2, 1fr); }
  .grid-kits    { grid-template-columns: repeat(2, 1fr); }

  /* O kit em destaque ocupa a linha inteira */
  .kit--destaque { grid-column: 1 / -1; }

  .figura-animada img, .figura-larga img { max-width: 560px; margin: 0 auto; }
}

/* =====================================================================
   OS 2 MAIS VENDIDOS — o pódio que justifica a composição do kit.
   EDITAR AQUI: nada. O texto todo fica no index.html.
   Usa só tokens: se repinta sozinho na faixa escura e na faixa clara.
   ===================================================================== */
.mais-vendidos {
  margin-top: var(--esp-4);
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  text-align: center;
}
.mais-vendidos__chapeu {
  margin: 0 0 var(--esp-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-azul);
}
.mais-vendidos__podio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
}
.mais-vendidos__podio li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--cor-azul-fundo);
  border-radius: var(--raio-peq);
  text-align: left;
}
/* O nome e a legenda ficam num invólucro próprio: dentro de um flex,
   <strong> e <small> soltos entrariam lado a lado. */
.mais-vendidos__nome { display: block; line-height: 1.3; }
.mais-vendidos__nome strong { color: var(--cor-texto); }
.mais-vendidos__nome small {
  display: block;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}
.mais-vendidos__posicao {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--cor-marca);
  color: var(--cor-fundo);
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 800;
}
.mais-vendidos__texto { margin: 0; color: var(--cor-texto-suave); }

/* =====================================================================
   BOTÃO DE WHATSAPP (flutuante)
   Fica ACIMA da barra fixa de compra para não cobrir o botão dela.
   É o único link da página isento do back redirect — o script lá
   embaixo reconhece pelo id #btn-watsapp e pelo endereço wa.me.
   ===================================================================== */
#btn-watsapp {
  position: fixed;
  right: 16px;
  bottom: 116px;   /* altura da barra fixa + folga */
  z-index: 50;
  display: flex;
  align-items: center;
}
#btn-watsapp svg {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

/* =====================================================================
   ESPAÇO PARA IMAGEM — marcação dourada de onde falta foto.
   Some da página assim que o arquivo estiver em /images.
   ===================================================================== */
.espaco-imagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: var(--esp-3);
  background: var(--cor-espaco-fundo);
  border: 2px dashed var(--cor-espaco-borda);
  border-radius: var(--raio-card);
}
.espaco-imagem--quadrado { aspect-ratio: 1 / 1; }
.espaco-imagem--retrato  { aspect-ratio: 540 / 635; }
.espaco-imagem__rotulo {
  font-family: var(--fonte-texto);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-espaco-borda);
}
.espaco-imagem__dica {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-texto);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cor-espaco-texto);
}
.espaco-imagem__medida {
  font-family: var(--fonte-texto);
  font-size: 0.72rem;
  color: var(--cor-espaco-borda);
}

/* O aviso tracejado nasce escondido no HTML. O script só o mostra se o
   arquivo da imagem não estiver em /images. Como .espaco-imagem é flex,
   o [hidden] precisa ser reforçado aqui — senão o flex vence o atributo. */
[hidden] { display: none !important; }

/* =====================================================================
   Respeita quem prefere menos animação no sistema
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}