/* Estrutura da página: container, ritmo vertical, barra superior, rodapé e grades.
   Página de vendas: barra superior fixa, sem sidebar (exceção aprovada no plano). */

.container {
  width: min(100% - 2 * clamp(16px, 4vw, 24px), var(--largura));
  margin-inline: auto;
}

/* A página é dona do vão entre seções. Nenhuma seção carrega margem para se afastar da vizinha. */
.pagina {
  display: flex;
  flex-direction: column;
  gap: var(--sp-secao);
  padding: calc(var(--topbar-h) + var(--sp-7)) 0 var(--sp-secao);
  min-width: 0;
}

.pagina > * {
  min-width: 0;
}

/* Página do painel: o conteúdo começa logo abaixo da barra, sem o respiro do hero */
.pagina-painel {
  padding-top: calc(var(--topbar-h) + var(--sp-5));
}

.secao {
  position: relative;
}

.secao-miolo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.secao-cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: var(--largura-texto);
  margin-inline: auto;
  text-align: center;
}

.secao-titulo {
  font-size: var(--fs-3xl);
  text-wrap: balance;
}

.secao-sub {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  text-wrap: pretty;
}

/* Barra superior */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topbar-h);
}

/* O vidro mora num pseudo-elemento para a entrada ser só de opacidade */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-glass);
  border-bottom: 1px solid var(--borda);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.topbar-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 100%;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--toque);
}

.marca-simbolo {
  width: 36px;
  height: 36px;
}

.marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar-nav a,
.rodape-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--sp-3);
  border-radius: var(--raio-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
}

.topbar-nav a:hover,
.rodape-nav a:hover {
  color: var(--text);
}

/* Rodapé */
.rodape {
  border-top: 1px solid var(--borda);
  padding: var(--sp-7) 0 var(--sp-6);
}

.rodape-miolo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.rodape-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.rodape-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rodape-base {
  font-size: var(--fs-sm);
  color: var(--text-fraco);
}

/* Grades: cartões irmãos sempre com a mesma altura */
.grade {
  display: grid;
  gap: var(--sp-4);
  align-items: stretch;
}

.grade > * {
  min-width: 0;
  height: 100%;
}

.grade-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grade-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .grade-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .topbar-nav {
    display: none;
  }
}

@media (max-width: 720px) {
  .grade-2,
  .grade-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .secao-miolo {
    gap: var(--sp-6);
  }

  .rodape-linha {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .marca-nome {
    display: none;
  }
}

/* ---------- Seções ---------- */

/* Fecho de seção: frase e botão centralizados depois do miolo */
.secao-fecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}

/* 1. Hero */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  isolation: isolate;
}

.hero-luz,
.fecho-luz {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Mais estreita que a tela: ao respirar (escala 1.08 em motion.css) ela não pode alargar a página */
.hero-luz {
  inset: calc(-1 * var(--sp-8)) 6% auto 6%;
  height: 680px;
  background:
    radial-gradient(45% 55% at 72% 38%, var(--luz-roxa), transparent 70%),
    radial-gradient(35% 45% at 18% 22%, var(--accent-soft), transparent 70%);
}

.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--sp-8);
}

.hero-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.hero-titulo {
  font-size: var(--fs-hero);
  line-height: 1.06;
  text-wrap: balance;
}

.palavra {
  display: inline-block;
}

.hero-sub {
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--text-dim);
}

.hero-acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.hero-reforco {
  max-width: 48ch;
  font-size: var(--fs-sm);
  color: var(--text-fraco);
}

/* 2. Problema */
.lista-dores {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

/* 3. Solução: os cartões empilham ao rolar (o grude mora em motion.css) */
.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* 4. Como funciona */
.trilha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-5);
}

/* 8. Diagnóstico gratuito */
.oferta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-7);
  overflow: hidden;
}

.oferta-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.oferta-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* 9. FAQ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

/* 10. Fechamento */
.fecho {
  isolation: isolate;
}

.fecho-luz {
  inset: -30% 0;
  background: radial-gradient(45% 50% at 50% 50%, var(--luz-roxa), transparent 70%);
}

.fecho .secao-cabeca {
  gap: var(--sp-5);
}

@media (max-width: 1024px) {
  .hero-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .hero-texto,
  .hero-acao {
    align-items: center;
    text-align: center;
  }

  .painel {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 880px) {
  .oferta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-6);
  }
}

@media (max-width: 720px) {
  .hero {
    gap: var(--sp-7);
  }
}

@media (max-width: 520px) {
  .oferta {
    padding: var(--sp-5);
  }

  .etapa {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .hero-acao .btn,
  .oferta-texto .btn,
  .secao-fecho .btn,
  .fecho .btn {
    width: 100%;
  }
}