/* Sem Enrolação — base
   Paleta travada no briefing da Dra. Jéssica.
   Mobile-first de verdade: o público lê isso num Android de entrada, no 4G. */

:root {
  --carvao:  #171717;
  --carmim:  #C92145;
  --carmim-fundo: #FDECF0;
  --dourado: #F2B544;
  --creme:   #FFF8F1;
  --papel:   #FFFDFB;
  --fumaca:  #7A6A5D;
  --linha:   #E8DDD2;

  --fonte-estrutura: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-conversa: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --largura: 68rem;
  --leitura: 34rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--carvao);
  font-family: var(--fonte-estrutura);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- estrutura */
.faixa { padding: 4.5rem 1.25rem; }
.miolo { max-width: var(--largura); margin: 0 auto; }
.leitura { max-width: var(--leitura); }

/* `.miolo.leitura` juntos empatavam no max-width e a secao inteira ficava
   centralizada, desalinhada do heroi. O container segue a mesma coluna da
   pagina; quem estreita para largura de leitura sao os filhos. */
.miolo.leitura { max-width: var(--largura); }
.miolo.leitura > * { max-width: var(--leitura); }

.titulo {
  font-family: var(--fonte-estrutura);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 8.5vw, 4rem);
  text-wrap: balance;
}

.titulo-secao {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.conversa {
  font-family: var(--fonte-conversa);
  font-size: 1.18rem;
  line-height: 1.68;
  color: #2C2622;
}
.conversa p { margin: 0 0 1.1rem; }

.apoio { color: var(--fumaca); font-size: 0.95rem; line-height: 1.6; }

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--carmim);
  color: #fff;
  font-family: var(--fonte-estrutura);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  padding: 1.1rem 2rem;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  min-height: 56px;
  transition: background .16s ease, transform .16s ease;
}
.botao:hover { background: #A81837; }
.botao:active { transform: translateY(1px); }
.botao[disabled] { background: var(--linha); color: var(--fumaca); cursor: not-allowed; }
.botao-largo { width: 100%; }

.botao-vazado {
  background: transparent;
  color: var(--carvao);
  border: 2px solid var(--carvao);
}
.botao-vazado:hover { background: var(--carvao); color: var(--creme); }

/* ------------------------------------------------------------- cabeçalho */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 248, 241, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo-miolo {
  max-width: var(--largura); margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca {
  font-weight: 900; letter-spacing: -0.045em; font-size: 1.2rem;
  text-decoration: none; line-height: 1;
}

/* ------------------------------------------------------------- o contador */
/* Calmo de propósito. Contador que pisca em vermelho tem cara de golpe, e o
   público daqui já foi enganado o suficiente. Ele é factual porque é verdade. */
.relogio {
  background: var(--carvao);
  color: var(--creme);
  font-size: .95rem;
  padding: .7rem 1.25rem;
  text-align: center;
  line-height: 1.4;
}
.relogio b { color: var(--dourado); font-variant-numeric: tabular-nums; font-weight: 800; }
.relogio.venceu { background: var(--fumaca); }

/* --------------------------------------------------------------- as rotas */
.rotas { display: grid; gap: .75rem; margin: 2rem 0 0; }
@media (min-width: 52rem) { .rotas { grid-template-columns: repeat(3, 1fr); } }

.rota {
  display: block; width: 100%; text-align: left;
  background: var(--papel);
  border: 2px solid var(--carvao);
  border-radius: 8px;
  padding: 1.25rem 1.35rem;
  font-family: inherit;
  cursor: pointer;
  min-height: 92px;
  transition: background .15s ease, color .15s ease;
}
.rota:hover { background: var(--carvao); color: var(--creme); }
.rota[aria-pressed="true"] { background: var(--carvao); color: var(--creme); }
.rota[aria-pressed="true"] .rota-eco { color: var(--dourado); }

.rota-nome {
  display: block; font-weight: 900; font-size: 1.35rem;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: .3rem;
}
.rota-eco { display: block; font-size: .95rem; line-height: 1.45; color: var(--fumaca); }
.rota:hover .rota-eco { color: #C9BCB0; }

/* --------------------------------------------------------------- conteúdo */
.trilha { list-style: none; padding: 0; margin: 0; counter-reset: passo; }
.trilha li {
  counter-increment: passo;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-top: 1px solid var(--linha);
}
.trilha li::before {
  content: counter(passo);
  font-weight: 900; font-size: 1.1rem; color: var(--carmim);
  font-variant-numeric: tabular-nums;
}
.trilha h3 { margin: 0 0 .25rem; font-size: 1.06rem; font-weight: 800; letter-spacing: -0.01em; }
.trilha p { margin: 0; color: var(--fumaca); font-size: .96rem; line-height: 1.55; }

.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-limpa li {
  padding: .55rem 0 .55rem 1.9rem; position: relative; line-height: 1.55;
}
.lista-limpa li::before {
  content: ''; position: absolute; left: 0; top: 1.15rem;
  width: 1.1rem; height: 2px; background: var(--carmim);
}

/* ----------------------------------------------------------------- oferta */
.oferta {
  background: var(--carvao); color: var(--creme);
  border-radius: 12px; padding: 2rem 1.5rem;
}
.preco-antes {
  color: #9C8E82; text-decoration: line-through; font-size: 1.05rem;
}
.preco {
  font-weight: 900; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(3rem, 13vw, 4.6rem);
  font-variant-numeric: tabular-nums;
  margin: .3rem 0 .1rem;
}
.preco small { font-size: .34em; letter-spacing: -0.02em; }

/* -------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--linha); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.015em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .25rem; top: 1.05rem;
  font-size: 1.5rem; font-weight: 700; color: var(--carmim); line-height: 1;
}
.faq[open] summary::after { content: '–'; }
.faq .resposta { padding: 0 0 1.35rem; color: var(--fumaca); max-width: var(--leitura); }

/* ----------------------------------------------------------------- rodapé */
.rodape {
  background: var(--carvao); color: #9C8E82;
  padding: 3rem 1.25rem; font-size: .88rem; line-height: 1.65;
}
.rodape a { color: var(--creme); }
.aviso-legal {
  border-left: 3px solid var(--carmim);
  padding-left: 1rem; margin: 1.5rem 0 0; max-width: 44rem;
}

/* --------------------------------------------------------------- formulário */
.campo { margin: 0 0 1.1rem; }
.campo label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: .35rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .95rem 1rem;
  border: 2px solid var(--linha); border-radius: 6px;
  background: var(--papel); color: var(--carvao);
  min-height: 52px;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--carvao); outline: none;
}
.campo .dica { font-size: .84rem; color: var(--fumaca); margin-top: .3rem; }

.recado {
  padding: .95rem 1.1rem; border-radius: 6px; margin: 0 0 1.1rem;
  font-size: .95rem; line-height: 1.5;
}
.recado-erro { background: var(--carmim-fundo); color: #8E1230; border-left: 3px solid var(--carmim); }
.recado-ok { background: #F1F7EE; color: #2F5B22; border-left: 3px solid #58913F; }

.escondido { display: none !important; }

/* ==========================================================================
   Camada de atenção (02/09) — referência: movimentoinquietos.com.br
   Herói escuro, contador em blocos, faixa em movimento e CTA fixa no celular.
   O que NAO veio de la: barra vermelha de escassez. Numa pagina de advogada,
   pro publico que ja foi enganado, isso le como golpe.
   ========================================================================== */

/* -------------------------------------------------- contador em blocos --- */
.relogio-forte {
  background: var(--carvao);
  color: var(--creme);
  padding: .9rem 1rem 1rem;
  text-align: center;
}
.relogio-forte .chamada {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: #C9BCB0; margin: 0 0 .5rem;
}
.digitos { display: flex; justify-content: center; align-items: flex-start; gap: .5rem; }
.digitos .par { min-width: 3.6rem; }
.digitos b {
  display: block; font-size: 2.1rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; color: var(--dourado); font-variant-numeric: tabular-nums;
}
.digitos .par span { display: block; font-size: .68rem; color: #9C8E82; margin-top: .25rem; }
.digitos .dois-pontos {
  font-size: 1.7rem; font-weight: 900; color: #5C534D; line-height: 1.15;
}
.relogio-forte.venceu { background: var(--fumaca); }
.relogio-forte.venceu .digitos { display: none; }

/* ---------------------------------------------------- faixa em movimento --- */
.faixa-corre {
  background: var(--carmim); color: #fff;
  overflow: hidden; white-space: nowrap;
  padding: .55rem 0;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em;
  border-block: 2px solid var(--carvao);
}
.faixa-corre div { display: inline-block; animation: corre 26s linear infinite; }
.faixa-corre span { padding: 0 1.1rem; }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa-corre div { animation: none; }
}

/* ------------------------------------------------------------ herói escuro --- */
.heroi {
  background: var(--carvao);
  color: var(--creme);
  padding: 3rem 1.25rem 3.5rem;
}
.heroi .titulo { color: var(--creme); }
.heroi .conversa { color: #D6CABE; }
.heroi-grade { max-width: var(--largura); margin: 0 auto; }
@media (min-width: 62rem) {
  .heroi-grade { display: grid; grid-template-columns: 1fr 20rem; gap: 3rem; align-items: center; }
}

.heroi .rota {
  background: #211F1E;
  border-color: #4A433E;
  color: var(--creme);
}
.heroi .rota .rota-eco { color: #A3968B; }
.heroi .rota:hover, .heroi .rota[aria-pressed="true"] {
  background: var(--creme); border-color: var(--creme); color: var(--carvao);
}
.heroi .rota:hover .rota-eco, .heroi .rota[aria-pressed="true"] .rota-eco { color: var(--fumaca); }

/* Retrato da autora. Enquanto a foto real nao chega, o espaco se fecha sozinho
   em vez de deixar um buraco ou um boneco cinza na pagina. */
.retrato { display: none; }
.retrato.tem-foto { display: block; }
.retrato img {
  width: 100%; border-radius: 12px; border: 3px solid var(--dourado);
}
.retrato figcaption {
  margin-top: .85rem; font-size: .9rem; line-height: 1.5; color: #A3968B;
}
.retrato figcaption b { color: var(--creme); display: block; font-size: 1.02rem; }

/* ------------------------------------------------------------- pra voce ou nao --- */
.dois-lados { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .dois-lados { grid-template-columns: 1fr 1fr; } }
.lado { border: 2px solid var(--carvao); border-radius: 10px; padding: 1.4rem 1.35rem; }
.lado.nao { border-color: var(--linha); background: transparent; }
.lado h3 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; }
.lado ul { list-style: none; margin: 0; padding: 0; }
.lado li {
  padding: .5rem 0 .5rem 1.9rem; position: relative; line-height: 1.5; font-size: .98rem;
}
.lado li::before {
  position: absolute; left: 0; top: .48rem;
  font-weight: 900; font-size: 1rem;
}
.lado.sim li::before { content: '✓'; color: var(--carmim); }
.lado.nao li::before { content: '✕'; color: var(--fumaca); }
.lado.nao li { color: var(--fumaca); }

/* --------------------------------------------------------- CTA fixa no rodape --- */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--carvao); color: var(--creme);
  border-top: 2px solid var(--carmim);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transform: translateY(110%);
  transition: transform .25s ease;
}
.barra-fixa.aparece { transform: translateY(0); }
.barra-fixa .valor { font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.1; }
.barra-fixa .valor small { display: block; font-size: .68rem; font-weight: 600; color: #9C8E82; letter-spacing: 0; }
.barra-fixa .botao { padding: .85rem 1.3rem; min-height: 48px; font-size: .98rem; }
@media (min-width: 62rem) { .barra-fixa { display: none; } }
body.tem-barra { padding-bottom: 5rem; }

/* Cabecalho escuro na landing: a primeira tela precisa ler como UM bloco so.
   Uma faixa creme em cima do heroi corta o impacto pela metade. */
.topo.escuro {
  background: rgba(23, 23, 23, .94);
  border-bottom-color: #35302C;
}
.topo.escuro .marca, .topo.escuro a { color: var(--creme); }

/* Sem foto da autora, a grade vira uma coluna — senao sobra um vao de 20rem
   no desktop, que parece imagem quebrada. */
.heroi-grade.sem-foto { grid-template-columns: 1fr; }