/* =====================================================================
   FITDREAMS® SLEEP & RELAX — lp08 · página de conversão
   PAINEL DE CONTROLE DO VISUAL

   Para mudar a aparência da página inteira, troque SÓ os valores do
   bloco :root abaixo. A página alterna faixas escuras (noite) e claras
   (seções com .secao--clara). Mobile primeiro: o tráfego é celular.
   ===================================================================== */
:root {
  /* --- FAIXAS ESCURAS (noite) --- */
  --cor-fundo:        #0B1226;  /* azul-noite: fundo das faixas escuras */
  --cor-fundo-2:      #16204A;  /* topo do degradê do hero */
  --cor-superficie:   #1A2245;  /* cards sobre o escuro */
  --cor-borda:        #2A3563;
  --cor-texto:        #F4F1FA;
  --cor-texto-suave:  #A8B2D1;
  --cor-marca:        #C9B8FF;  /* lilás-luar: destaques no escuro */

  /* --- FAIXAS CLARAS --- */
  --cor-clara-fundo:  #F4F1FA;  /* creme-lilás das faixas claras */
  --cor-clara-card:   #FFFFFF;
  --cor-clara-borda:  #DDD6F3;
  --cor-clara-texto:  #141B3A;
  --cor-clara-suave:  #4E5677;
  --cor-clara-marca:  #5B47C9;  /* violeta: destaques no claro */

  /* --- BOTÃO DE COMPRA — cor exclusiva do botão --- */
  --cor-cta:          #F5C26B;
  --cor-cta-hover:    #E8A848;
  --cor-cta-texto:    #1A1100;
  --sombra-cta:       0 8px 22px rgba(232, 168, 72, 0.35);

  /* --- APOIO --- */
  --cor-estrela:      #F5C26B;
  --cor-ok:           #1F9D55;  /* verde dos reforços (no claro) */
  --cor-ok-escuro:    #7BD389;  /* verde dos reforços (no escuro) */
  --cor-cashback:     #DDF7E8;
  --cor-cashback-texto: #0B5A32;
  --cor-preto:        #07091A;  /* barra do topo e rodapé */

  /* --- TIPOGRAFIA --- */
  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, sans-serif;
  --fs-hero:   clamp(1.85rem, 8vw, 2.7rem);
  --fs-titulo: clamp(1.45rem, 6vw, 2rem);
  --fs-texto:  clamp(1rem, 3.9vw, 1.06rem);

  /* --- ESPAÇO E FORMA --- */
  --pad-secao: clamp(2.5rem, 10vw, 4rem);
  --largura-max: 560px;
  --raio-botao: 20px;   /* nunca pill */
  --raio-card:  16px;
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--fs-texto);
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); /* espaço do botão fixo */
}
img, video { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 0.75rem; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* =====================================================================
   BARRA DO TOPO + LOGO
   ===================================================================== */
.barra-oferta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.9rem;
  padding: 0.5rem 16px;
  background: var(--cor-preto);
  font-size: 0.85rem; text-align: center;
}
.barra-oferta p { margin: 0; }
.barra-oferta strong, .barra-oferta__timer span { color: var(--cor-cta); }
.barra-oferta__timer span { font-variant-numeric: tabular-nums; font-weight: 700; }

.marca-topo { padding: 0.9rem 16px 0; background: var(--cor-fundo-2); }
.marca-topo img { width: 132px; margin: 0 auto; }

/* =====================================================================
   SEÇÕES — escura é o padrão, .secao--clara inverte
   ===================================================================== */
.secao { padding: var(--pad-secao) 0; text-align: center; }
.secao--clara { background: var(--cor-clara-fundo); color: var(--cor-clara-texto); }

.chapeu {
  margin-bottom: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cor-marca);
}
.secao--clara .chapeu { color: var(--cor-clara-marca); }

.titulo {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: var(--fs-titulo); line-height: 1.2;
  margin-bottom: 0.75rem;
}
.sub { color: var(--cor-texto-suave); margin-bottom: 1.5rem; }
.secao--clara .sub { color: var(--cor-clara-suave); }

/* =====================================================================
   BOTÃO DE COMPRA
   ===================================================================== */
.botao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 64px;
  margin-top: 1.5rem; padding: 0.85rem 1rem;
  background: var(--cor-cta); color: var(--cor-cta-texto);
  border-radius: var(--raio-botao);
  box-shadow: var(--sombra-cta);
  text-decoration: none; text-align: center;
  transition: background 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:hover { background: var(--cor-cta-hover); }
.botao:active { transform: scale(0.98); }
.botao__acao { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.botao__data { font-size: 0.8rem; font-weight: 600; opacity: 0.75; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero {
  padding: 1.25rem 0 2.5rem;
  background: linear-gradient(180deg, var(--cor-fundo-2) 0%, var(--cor-fundo) 100%);
  text-align: center;
}
.nota-estrelas { font-size: 0.88rem; color: var(--cor-texto-suave); margin-bottom: 0.75rem; }
.nota-estrelas strong { color: var(--cor-texto); }
.estrelas { color: var(--cor-estrela); letter-spacing: 0.08em; margin-right: 0.25rem; }

.hero__titulo {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: var(--fs-hero); line-height: 1.12;
  margin-bottom: 0.75rem;
}
.hero__titulo em { font-style: normal; color: var(--cor-marca); }
.hero__sub { color: var(--cor-texto-suave); margin-bottom: 1rem; }
.hero__sub strong { color: var(--cor-texto); }
.hero__figura { margin: 0; }
.hero__figura img { width: 100%; border-radius: var(--raio-card); }
.hero .botao { margin-top: 1.25rem; }

.reforcos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem;
  margin-top: 0.9rem; font-size: 0.82rem; color: var(--cor-texto-suave);
}
.reforcos li::before { content: "✓ "; color: var(--cor-ok-escuro); font-weight: 700; }

/* =====================================================================
   PRINTS DE AVALIAÇÃO (empilhados) e CARROSSEL
   ===================================================================== */
.prints { display: grid; gap: 0.9rem; }
.print {
  padding: 6px;
  background: var(--cor-clara-card);
  border: 1px solid var(--cor-clara-borda);
  border-radius: var(--raio-card);
  box-shadow: 0 6px 18px rgba(20, 27, 58, 0.08);
}
.print img { width: 100%; border-radius: 10px; }
.secao:not(.secao--clara) .print { border-color: transparent; box-shadow: none; }

.prints--duplo { margin-top: 1.25rem; }

.carrossel {
  display: flex; gap: 12px;
  margin: 0 -16px; padding: 0 16px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel .print { flex: 0 0 86%; scroll-snap-align: center; align-self: center; }
.carrossel__contador {
  margin: 0.75rem 0 0; font-size: 0.82rem; font-weight: 600;
  color: var(--cor-texto-suave); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   3. A DOR — vídeo e sinais
   ===================================================================== */
.video-dor { margin: 0 0 1.25rem; }
.video-dor video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--raio-card); background: var(--cor-superficie);
}
.lista-sinais { display: grid; gap: 0.55rem; text-align: left; }
.lista-sinais li {
  position: relative; padding: 0.8rem 0.9rem 0.8rem 2.6rem;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: 12px; font-weight: 600;
}
.lista-sinais li::before {
  content: "✕"; position: absolute; left: 0.95rem; top: 0.8rem;
  color: #F08A8A; font-weight: 700;
}
.ponte { margin: 1.5rem 0 0; font-size: 1.05rem; color: var(--cor-texto-suave); }
.ponte strong { color: var(--cor-marca); }

/* =====================================================================
   4. FÓRMULA — 5 ativos
   ===================================================================== */
.produto { margin: 0 0 1.25rem; }
.produto img { width: 100%; border-radius: var(--raio-card); }
.ativos { display: grid; gap: 0.6rem; text-align: left; counter-reset: ativo; }
.ativos li {
  position: relative; padding: 0.85rem 0.95rem 0.85rem 3.3rem;
  background: var(--cor-clara-card); border: 1px solid var(--cor-clara-borda);
  border-radius: 12px; font-size: 0.95rem; color: var(--cor-clara-suave);
  counter-increment: ativo;
}
.ativos li::before {
  content: counter(ativo);
  position: absolute; left: 0.9rem; top: 0.9rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cor-clara-marca); color: #fff; font-weight: 700; font-size: 0.85rem;
}
.ativos strong { color: var(--cor-clara-texto); }
.ativos p { margin: 0.2rem 0 0; }
.ativos__frente {
  display: block; margin-bottom: 0.1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor-clara-marca);
}
.selos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
  margin-top: 1.25rem;
}
.selos li {
  padding: 0.35rem 0.8rem; border-radius: 999px;
  background: #E9E3FB; color: var(--cor-clara-texto);
  font-size: 0.82rem; font-weight: 600;
}
.selos li::before { content: "✓ "; color: var(--cor-ok); }

/* =====================================================================
   5. FASES
   ===================================================================== */
.fases { display: grid; gap: 0.7rem; text-align: left; }
.fases li {
  padding: 1rem; border-left: 3px solid var(--cor-marca);
  background: var(--cor-superficie); border-radius: 0 12px 12px 0;
}
.fases__periodo {
  margin: 0 0 0.15rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-marca);
}
.fases h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.25rem; }
.fases li p:last-child { margin: 0; color: var(--cor-texto-suave); font-size: 0.95rem; }

.aviso-kit {
  margin-top: 1.25rem; padding: 1.1rem;
  background: rgba(245, 194, 107, 0.1); border: 1px solid rgba(245, 194, 107, 0.45);
  border-radius: var(--raio-card);
}
.aviso-kit h3 { font-size: 1.05rem; color: var(--cor-cta); margin-bottom: 0.35rem; }
.aviso-kit p { margin: 0; font-size: 0.95rem; color: var(--cor-texto); }

/* =====================================================================
   6. OFERTA — kits
   ===================================================================== */
.kits { display: grid; gap: 1rem; }
.kit {
  position: relative; display: grid;
  grid-template-columns: 38% 1fr; align-items: center; gap: 0 0.75rem;
  padding: 1.6rem 0.9rem 0.9rem;
  background: var(--cor-clara-card); border: 2px solid var(--cor-clara-borda);
  border-radius: var(--raio-card);
  color: var(--cor-clara-texto); text-decoration: none; text-align: left;
  box-shadow: 0 8px 22px rgba(20, 27, 58, 0.08);
}
.kit--destaque { border-color: var(--cor-clara-marca); box-shadow: 0 10px 28px rgba(91, 71, 201, 0.22); }
.kit__tag {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  padding: 0.3rem 0.85rem; border-radius: 999px; white-space: nowrap;
  background: var(--cor-clara-marca); color: #fff;
  font-size: 0.75rem; font-weight: 700;
}
.kit__tag--suave { background: #E9E3FB; color: var(--cor-clara-marca); }
.kit img { width: 100%; }
.kit__info p { margin: 0; }
.kit__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.35rem; line-height: 1.1; margin-bottom: 0.3rem; }
.kit__nome small { display: block; font-family: var(--fonte-texto); font-size: 0.8rem; font-weight: 600; color: var(--cor-clara-suave); }
.kit__de { font-size: 0.85rem; color: var(--cor-clara-suave); text-decoration: line-through; }
.kit__preco { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.kit__preco small { font-size: 0.8rem; font-weight: 600; color: var(--cor-clara-suave); }
.kit__parcela { font-size: 0.85rem; color: var(--cor-clara-suave); }
.kit__noite {
  display: inline-block; margin-top: 0.35rem !important;
  font-size: 0.82rem; font-weight: 700; color: var(--cor-clara-marca);
}
.kit__cashback {
  grid-column: 1 / -1; margin: 0.8rem 0 0;
  padding: 0.45rem 0.7rem; border-radius: 10px;
  background: var(--cor-cashback); color: var(--cor-cashback-texto);
  font-size: 0.85rem; text-align: center;
}
.botao--kit { grid-column: 1 / -1; min-height: 54px; margin-top: 0.7rem; font-size: 1.1rem; font-weight: 700; }
.botao--secundario { background: transparent; color: var(--cor-clara-texto); border: 2px solid var(--cor-clara-texto); box-shadow: none; }
.botao--secundario:hover { background: #ECE8F7; }

.nota-parcela { margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--cor-clara-suave); }

.garantia {
  margin-top: 1.5rem; padding: 1.25rem;
  background: var(--cor-clara-card); border: 1px dashed var(--cor-clara-marca);
  border-radius: var(--raio-card);
}
.garantia h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.3rem; margin-bottom: 0.4rem; }
.garantia p { font-size: 0.95rem; color: var(--cor-clara-suave); }
.garantia__frete strong { color: var(--cor-ok); }
.garantia img { max-width: 240px; margin: 0.5rem auto 0; }

/* =====================================================================
   8. FAQ (acordeão)
   ===================================================================== */
.faq { display: grid; gap: 0.6rem; text-align: left; }
.faq__item {
  background: var(--cor-clara-card); border: 1px solid var(--cor-clara-borda);
  border-radius: 12px; overflow: hidden;
}
.faq__pergunta {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; min-height: 56px; padding: 0.9rem 1rem;
  background: none; border: 0; cursor: pointer;
  font: 600 0.96rem/1.35 var(--fonte-texto); color: var(--cor-clara-texto); text-align: left;
}
.faq__sinal { flex-shrink: 0; position: relative; width: 16px; height: 16px; margin-left: auto; }
.faq__sinal::before, .faq__sinal::after {
  content: ""; position: absolute; background: var(--cor-clara-marca); border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq__sinal::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__sinal::after  { top: 0; left: 7px; width: 2px; height: 16px; }
.faq__pergunta[aria-expanded="true"] .faq__sinal::after { transform: rotate(90deg); }
.faq__resposta { padding: 0 1rem 1rem; }
.faq__resposta p { margin: 0; font-size: 0.94rem; color: var(--cor-clara-suave); }

/* =====================================================================
   9. FECHAMENTO + RODAPÉ + BOTÃO FIXO
   ===================================================================== */
.secao--fechamento { background: linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-fundo-2) 100%); }

.rodape { padding: 2.5rem 0; background: var(--cor-preto); color: #8C97BA; text-align: center; }
.rodape img { width: 120px; margin: 0 auto 1rem; }
.rodape p { font-size: 0.8rem; }
.rodape__aviso { font-size: 0.74rem; opacity: 0.85; margin: 0; }

.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(7, 9, 26, 0.94);
  border-top: 1px solid var(--cor-borda);
}
.cta-fixo[hidden] { display: none; }
.cta-fixo .botao { margin: 0; min-height: 56px; padding: 0.6rem 1rem; }

/* =====================================================================
   DESKTOP — só para não ficar quebrado (o tráfego é 100% celular)
   ===================================================================== */
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .cta-fixo { display: none !important; }
  .carrossel .print { flex-basis: 70%; }
}

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