/* estilo.css — EvaMemory · claro com toques lavanda.
   Segue a Diretriz Neurocognitiva (docs/33): calma, respiro, premium, sem exagero.
   Sem misticismo, sem neon, sem animação chamativa. Cor com PROPÓSITO. */

/* ─── peças-base (tokens): mudar aqui muda o site todo ─── */
:root {
  --lavanda:        #7c5cd6;   /* identidade, foco, ação */
  --lavanda-escuro: #5b3fb0;
  --lavanda-claro:  #efeaff;
  --lavanda-fundo:  #f7f5ff;

  --tinta:      #1f2033;       /* texto principal */
  --tinta-suave: #55566e;      /* texto secundário */
  --tinta-fraca: #8a8ba3;

  --borda:  #e6e3f2;
  --branco: #ffffff;
  --verde:  #16a34a;

  --raio:   16px;
  --raio-g: 22px;
  --sombra:   0 1px 2px rgba(31,32,51,.04), 0 8px 24px rgba(124,92,214,.06);
  --sombra-f: 0 2px 4px rgba(31,32,51,.05), 0 16px 40px rgba(124,92,214,.10);

  --largura: 1080px;
  --respiro: clamp(56px, 9vw, 108px);   /* espaço entre seções */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  color: var(--tinta);
  background: var(--branco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* profundidade sutil no topo — espaço amplo e silencioso, sem parecer "universo" */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 70vh;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--lavanda-fundo) 0%, transparent 72%);
  z-index: -1; pointer-events: none;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 750; }
h3 { font-size: 19px; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--lavanda-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
em { font-style: normal; color: var(--lavanda-escuro); font-weight: 600; }

section { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) 24px; }

/* ─── o pulso (assinatura visual da marca) ─── */
.pulso {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lavanda); vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(124,92,214,.45);
  animation: bater 2.4s infinite ease-out;
}
@keyframes bater {
  0%   { box-shadow: 0 0 0 0 rgba(124,92,214,.40); }
  70%  { box-shadow: 0 0 0 10px rgba(124,92,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,92,214,0); }
}
/* respeita quem pede menos movimento (requisito de acessibilidade, não opcional) */
@media (prefers-reduced-motion: reduce) {
  .pulso { animation: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ─── topo ─── */
.topo {
  max-width: var(--largura); margin: 0 auto;
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 9px; font-weight: 750; font-size: 18px; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.topo nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.topo nav a { color: var(--tinta-suave); }

/* ─── botões ─── */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  font-weight: 650; font-size: 16px; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-forte { background: var(--lavanda); color: #fff; box-shadow: var(--sombra-f); }
.btn-forte:hover { background: var(--lavanda-escuro); }
.btn-grande { padding: 17px 40px; font-size: 17px; }
.btn-fantasma { border: 1.5px solid var(--borda); color: var(--tinta); padding: 10px 20px; font-size: 15px; }
.btn-fantasma:hover { border-color: var(--lavanda); color: var(--lavanda-escuro); }

/* ─── herói (a dor) ─── */
.heroi { text-align: center; padding-top: clamp(40px, 6vw, 72px); }
.selo {
  display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: .02em;
  color: var(--lavanda-escuro); background: var(--lavanda-claro);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 26px;
}
.risco { color: var(--lavanda-escuro); position: relative; white-space: nowrap; }
.risco::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .14em; height: .09em;
  background: currentColor; opacity: .28;
}
.sub { font-size: clamp(17px, 2vw, 20px); color: var(--tinta-suave); max-width: 640px; margin: 0 auto 1em; }
.sub.forte { color: var(--tinta); font-weight: 550; }
.sub.centro { text-align: center; }
.acoes { margin-top: 34px; }
.dica-btn { display: block; margin-top: 12px; font-size: 14px; color: var(--tinta-fraca); }

/* ─── prova (antes / depois) ─── */
.prova h2, .como h2, .planos h2, .perguntas h2 { text-align: center; margin-bottom: 14px; }
.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 26px; box-shadow: var(--sombra);
}
.cartao-depois { border-color: #d9cffa; box-shadow: var(--sombra-f); }
.tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.tag-cinza   { background: #f1f1f5; color: #6c6d80; }
.tag-lavanda { background: var(--lavanda-claro); color: var(--lavanda-escuro); }
.conversa { margin: 22px 0 16px; }
.msg { border-radius: 14px; padding: 13px 16px; font-size: 15px; margin-bottom: 10px; }
.msg-eu { background: #f4f4f8; color: var(--tinta); }
.msg-ia { background: var(--branco); border: 1px solid var(--borda); color: var(--tinta-suave); }
.cartao-depois .msg-ia { background: var(--lavanda-fundo); border-color: #e2d9fb; color: var(--tinta); }
.nota { font-size: 14px; color: var(--tinta-fraca); margin: 0; }
.nota.nota-forte { color: var(--verde); font-weight: 600; }
.nota.centro { text-align: center; margin-top: 26px; }
.rodape-prova { text-align: center; font-size: 14px; color: var(--tinta-fraca); margin-top: 26px; }

/* ─── como funciona ─── */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.passo { text-align: left; }
.num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lavanda-claro); color: var(--lavanda-escuro);
  font-weight: 750; font-size: 17px; margin-bottom: 16px;
}
.passo p { color: var(--tinta-suave); font-size: 15px; margin: 0; }

/* ─── valores ─── */
.valores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.valor {
  background: var(--lavanda-fundo); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 24px;
}
.valor p { color: var(--tinta-suave); font-size: 15px; margin: 0; }

/* ─── planos ─── */
.grade-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 42px; }
.plano {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 28px 24px; box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.plano.destaque { border-color: var(--lavanda); box-shadow: var(--sombra-f); position: relative; }
.plano.destaque::before {
  content: "mais escolhido"; position: absolute; top: -12px; left: 24px;
  background: var(--lavanda); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.plano h3 { margin-bottom: 6px; }
.preco { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 2px; }
.preco small { font-size: 15px; font-weight: 600; color: var(--tinta-fraca); letter-spacing: 0; }
.plano .descricao { color: var(--tinta-suave); font-size: 14px; min-height: 42px; }
.plano ul { list-style: none; padding: 0; margin: 16px 0 22px; font-size: 14.5px; color: var(--tinta-suave); }
.plano li { padding: 5px 0 5px 24px; position: relative; }
.plano li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.plano .btn { margin-top: auto; text-align: center; }
.carregando { text-align: center; color: var(--tinta-fraca); grid-column: 1 / -1; }

/* ─── perguntas ─── */
.perguntas { max-width: 760px; }
details {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px 22px; margin-bottom: 12px; background: var(--branco);
}
details[open] { border-color: #d9cffa; background: var(--lavanda-fundo); }
summary { font-weight: 650; cursor: pointer; font-size: 16.5px; }
summary::marker { color: var(--lavanda); }
details p { margin: 14px 0 0; color: var(--tinta-suave); font-size: 15px; }

/* ─── chamada final ─── */
.final { text-align: center; }
.final h2 { margin-bottom: 30px; }

/* ─── pé ─── */
.pe {
  border-top: 1px solid var(--borda); margin-top: var(--respiro);
  padding: 40px 24px; text-align: center; color: var(--tinta-suave); font-size: 15px;
}
.pe nav { display: flex; gap: 22px; justify-content: center; margin: 14px 0; }
.pe .mini { font-size: 13px; color: var(--tinta-fraca); margin: 0; }
.pulso-pe { width: 8px; height: 8px; margin-right: 6px; }

/* ─── celular: menos elementos, mais respiro, nada espremido ─── */
@media (max-width: 860px) {
  .comparacao, .passos, .valores { grid-template-columns: 1fr; }
  .topo nav { gap: 14px; font-size: 14px; }
  section { padding-left: 20px; padding-right: 20px; }
  .btn { width: 100%; text-align: center; }
  .topo .btn-fantasma { width: auto; }
}

/* ─── foco visível (acessibilidade) ─── */
:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; border-radius: 8px; }