/* Doorstep: estilos. Mobile first. */

:root {
  --indigo: #3B2F9E;
  --azul: #3B82F6;
  --ceu: #8FB2F8;
  --ceu-claro: #C7D7FC;
  --texto: #14162B;
  --cinza: #5B5E7E;
  --lavanda: #EEEBFF;
  --branco: #FFFFFF;
  --offwhite: #F7F6F2;
  --escuro: #14162B;

  --fonte-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 14px;
  --raio-sm: 10px;
  --largura: 1120px;
  --gutter: 20px;
  --topo-altura: 64px;
  --foco: var(--indigo);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: var(--indigo); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--branco); color: var(--indigo);
  padding: 10px 16px; border-radius: var(--raio-sm); font-weight: 700;
}
.pular:focus { top: 12px; }

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

/* Escuro (índigo e rodapé): foco claro */
.escuro { --foco: var(--ceu-claro); color: var(--branco); }
.escuro a:not(.btn) { color: var(--branco); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:active { transform: translateY(1px); }

/* Sobre fundo índigo: branco com texto índigo */
.btn--claro { background: var(--branco); color: var(--indigo); }
.btn--claro:hover { background: var(--lavanda); }

/* Sobre fundo claro: índigo com texto branco */
.btn--indigo { background: var(--indigo); color: var(--branco); }
.btn--indigo:hover { background: #2F2580; }

.btn--sm { min-height: 40px; padding: 8px 14px; font-size: .9375rem; border-radius: 10px; white-space: nowrap; }

.btn--bloco { width: 100%; }
@media (max-width: 420px) { .btn--bloco { padding: 14px 14px; font-size: 1rem; gap: 8px; } }
@media (min-width: 600px) { .btn--bloco { width: auto; } }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topo-altura);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.topo--rolado, .topo--solido {
  background: var(--indigo);
  box-shadow: 0 6px 24px rgba(20, 22, 43, .18);
}
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo__logo { display: block; flex: none; border-radius: 6px; }
.topo__logo img { height: 28px; width: auto; }
@media (min-width: 768px) {
  :root { --topo-altura: 76px; }
  .topo__logo img { height: 34px; }
}
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .topo__logo img { height: 23px; }
  .topo .btn--sm { font-size: .8125rem; padding: 8px 10px; }
}

/* ---------- Seções ---------- */
.secao { padding: 64px 0; }
@media (min-width: 768px) { .secao { padding: 96px 0; } }

.secao--lavanda { background: var(--lavanda); }
.secao--offwhite { background: var(--offwhite); }
.secao--branco { background: var(--branco); }
.secao--indigo { background: var(--indigo); }

.secao__titulo {
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  color: var(--indigo);
  max-width: 20ch;
}
.escuro .secao__titulo { color: var(--branco); }

.secao__cta { margin-top: 40px; }
@media (min-width: 768px) { .secao__cta { margin-top: 48px; } }

/* ---------- Primeira dobra ---------- */
.hero {
  position: relative;
  background: var(--indigo);
  padding: calc(var(--topo-altura) + 40px) 0 0;
  overflow: hidden;
}
.hero .container {
  display: grid;
  gap: 8px;
  position: relative;
}
.hero__texto { padding-bottom: 8px; }
.hero h1 {
  font-size: clamp(2.125rem, 9vw, 3.75rem);
  line-height: 1.08;
  max-width: 16ch;
}
.hero__sub {
  margin-top: 20px;
  font-size: 1.125rem;
  color: var(--ceu-claro);
  max-width: 36rem;
}
.hero__acao { margin-top: 32px; }
.hero__linha {
  margin-top: 14px;
  font-size: .9375rem;
  color: var(--ceu-claro);
}
.hero__barras {
  width: 56%;
  max-width: 240px;
  margin-left: auto;
  margin-top: 8px;
}
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--topo-altura) + 72px); }
  .hero .container {
    grid-template-columns: 1.35fr 1fr;
    align-items: end;
    gap: 48px;
  }
  .hero__texto { padding-bottom: 96px; }
  .hero__sub { font-size: 1.25rem; }
  .hero__barras { width: 100%; max-width: 420px; margin-top: 0; }
}

/* ---------- Rotina ---------- */
.rotina__lista {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 14px;
}
.rotina__lista li {
  position: relative;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 20px 20px 20px 44px;
  font-size: 1.0625rem;
}
.rotina__lista li::before {
  content: "";
  position: absolute; left: 20px; top: 24px;
  width: 6px; height: 20px; border-radius: 3px;
  background: var(--azul);
}
@media (min-width: 768px) {
  .rotina__lista { grid-template-columns: 1fr 1fr; gap: 18px; }
  .rotina__lista li { padding: 24px 24px 24px 50px; font-size: 1.125rem; }
  .rotina__lista li::before { left: 24px; top: 29px; }
}

/* ---------- Números ---------- */
html.sem-numeros [data-secao="numeros"] { display: none; }

.numeros__grade {
  display: grid; gap: 28px;
  margin-top: 36px;
}
.numero {
  border-top: 2px solid rgba(199, 215, 252, .35);
  padding-top: 20px;
}
.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  line-height: 1;
  color: var(--branco);
}
.numero__valor span { color: var(--ceu); }
.numero__texto {
  margin-top: 10px;
  color: var(--ceu-claro);
  font-size: 1.125rem;
  max-width: 24ch;
}
.numeros__frase {
  margin-top: 44px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.375rem, 4.5vw, 1.875rem);
  line-height: 1.25;
  max-width: 26ch;
}
.numeros__nota {
  margin-top: 16px;
  font-size: .875rem;
  color: var(--ceu-claro);
}
@media (min-width: 768px) {
  .numeros__grade { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/* ---------- O que fazemos ---------- */
.cartoes {
  display: grid; gap: 16px;
  margin-top: 32px;
}
.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
  border: 1px solid rgba(59, 47, 158, .08);
}
.cartao__icone {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--lavanda);
  color: var(--indigo);
  margin-bottom: 18px;
}
.cartao__icone svg { width: 26px; height: 26px; }
.cartao h3 { font-size: 1.25rem; color: var(--indigo); font-weight: 600; }
.cartao p { margin-top: 8px; color: var(--cinza); }
@media (min-width: 640px) { .cartoes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cartoes { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* ---------- Como funciona ---------- */
.passos {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 28px;
  counter-reset: passo;
}
.passo {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
}
.passo::before {
  content: counter(passo);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.375rem;
}
.passo h3 { font-size: 1.25rem; color: var(--indigo); font-weight: 600; padding-top: 2px; }
.passo p { margin-top: 6px; color: var(--cinza); }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
  .passos::before {
    content: "";
    position: absolute; top: 26px; left: 52px; right: 12%;
    height: 2px; background: var(--ceu-claro);
  }
  .passo { grid-template-columns: 1fr; position: relative; }
  .passo h3 { padding-top: 8px; }
}

/* ---------- Para quem é ---------- */
.perfil {
  display: grid; gap: 16px;
  margin-top: 32px;
}
.perfil__coluna {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
}
.perfil__coluna--nao { background: transparent; border: 2px solid rgba(91, 94, 126, .2); }
.perfil__coluna h3 { font-size: 1.25rem; font-weight: 600; color: var(--indigo); }
.perfil__coluna--nao h3 { color: var(--texto); }
.perfil__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.perfil__lista li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.perfil__lista svg { width: 24px; height: 24px; margin-top: 1px; }
.perfil__coluna--sim svg { color: var(--indigo); }
.perfil__coluna--nao svg { color: var(--cinza); }
.perfil__fecho {
  margin-top: 28px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  line-height: 1.3;
  color: var(--indigo);
  max-width: 34ch;
}
@media (min-width: 768px) {
  .perfil { grid-template-columns: 1fr 1fr; gap: 20px; }
  .perfil__coluna { padding: 32px; }
}

/* ---------- Planos ---------- */
.planos {
  display: grid; gap: 16px;
  margin-top: 32px;
}
.plano {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(59, 47, 158, .08);
}
.plano h3 { font-size: 1.5rem; color: var(--indigo); }
.plano p { margin-top: 10px; color: var(--texto); flex: 1; }
.plano__preco {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(59, 47, 158, .12);
  font-weight: 700;
  color: var(--indigo);
  font-size: .9375rem;
}
.fundadores {
  margin-top: 20px;
  background: var(--indigo);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 20px 24px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.fundadores strong { font-family: var(--fonte-titulo); font-weight: 600; color: var(--ceu-claro); }
@media (min-width: 900px) {
  .planos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fundadores { padding: 24px 32px; font-size: 1.125rem; }
}

/* ---------- Perguntas frequentes ---------- */
.faq { margin-top: 32px; display: grid; gap: 12px; max-width: 820px; }
.faq details {
  background: var(--branco);
  border-radius: var(--raio);
  border: 1px solid rgba(59, 47, 158, .08);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--indigo);
  border-radius: var(--raio);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--indigo);
  border-bottom: 2.5px solid var(--indigo);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { padding: 0 22px 22px; color: var(--cinza); }

/* ---------- Chamada final ---------- */
.final { position: relative; overflow: hidden; }
.final .container { position: relative; z-index: 1; }
.final h2 { font-size: clamp(2rem, 7vw, 3rem); max-width: 22ch; }
.final__texto { margin-top: 16px; color: var(--ceu-claro); font-size: 1.125rem; max-width: 34rem; }
.final .secao__cta { margin-top: 32px; }
.final__fecho { margin-top: 28px; font-size: .9375rem; color: var(--ceu-claro); }
.final__barras {
  position: absolute; right: -24px; bottom: 0;
  width: 46%; max-width: 360px;
  opacity: .55;
  pointer-events: none;
}
@media (max-width: 767px) {
  .final { padding-bottom: 150px; }
  .final__barras { width: 40%; max-width: 160px; right: 16px; opacity: .6; }
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--escuro);
  color: var(--ceu-claro);
  padding: 48px 0 calc(48px + env(safe-area-inset-bottom));
  font-size: .9375rem;
}
.rodape__logo { height: 30px; width: auto; }
.rodape__grade { display: grid; gap: 24px; }
.rodape__marca p { margin-top: 14px; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape__links a { color: var(--branco); }
.rodape__copy { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(199, 215, 252, .15); }
@media (max-width: 899px) {
  /* espaço para o botão flutuante não cobrir os links */
  .rodape { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .rodape__grade { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .rodape__links { justify-items: end; }
}

/* ---------- Botão flutuante (só no celular) ---------- */
.flutuante {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right));
  /* 84px: fica acima do selo "Powered by Netlify" (quadro de 64px, canto inferior direito, plano grátis) */
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--branco);
  border: 2px solid var(--branco);
  box-shadow: 0 10px 28px rgba(20, 22, 43, .35);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  --foco: var(--azul);
}
.flutuante svg { width: 24px; height: 24px; }
.flutuante--visivel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (min-width: 900px) { .flutuante { display: none; } }

/* ---------- Página de texto (privacidade) ---------- */
.pagina-texto { padding: calc(var(--topo-altura) + 48px) 0 72px; }
.pagina-texto .container { max-width: 760px; }
.pagina-texto h1 { font-size: clamp(2rem, 7vw, 2.75rem); color: var(--indigo); }
.pagina-texto .atualizado { margin-top: 10px; color: var(--cinza); font-size: .9375rem; }
.pagina-texto h2 { font-size: 1.375rem; color: var(--indigo); margin-top: 40px; font-weight: 600; }
.pagina-texto p, .pagina-texto ul { margin-top: 12px; }
.pagina-texto ul { padding-left: 22px; }
.pagina-texto li + li { margin-top: 6px; }
.pagina-texto .voltar { display: inline-block; margin-top: 48px; font-weight: 700; }