/*
  style.css → o VISUAL da landing page.

  Tudo aqui segue a identidade do novo site da Renovi (SiteRenovi/CLAUDE.md e app/globals.css).
  O site usa Tailwind; aqui é CSS puro, mas com os MESMOS valores (cores, raios, tamanhos).

  Organização:
  1. Variáveis (cores e medidas)     5. Seções da página (inclui o livro 3D)
  2. Base                            6. Movimento (estampas, 3D com o mouse, entradas, surgir ao rolar)
  3. Fundos em degradê               7. Telas maiores (responsivo)
  4. Componentes (botão, card, form)
*/

/* ========== 1. VARIÁVEIS ========== */
:root {
  /* Cores oficiais (manual "Identidade Visual - Renovi") */
  --navy: #010440;
  --green: #79b473;
  --mauve: #9e788f;
  --offwhite: #f3f3f4;
  --branco: #ffffff;

  /* Versões escuras para TEXTO pequeno sobre fundo claro (contraste 4,5:1) */
  --green-dark: #3f7a3a;
  --mauve-dark: #7a5670;

  /* Tons de apoio dos degradês */
  --mauve-light: #d6c8d1;
  --green-light: #b7d1b4;
  --navy-light: #3b3f9c;
  --peach: #f3e6da;

  /* Cores da estampa: um pouco mais clara ou escura que o fundo onde está */
  --estampa-mauve: #b99aae;
  --estampa-navy-light: #8e93f0;

  /* Tons para dar VOLUME nos elementos 3D */
  --navy-fundo: #000230;     /* lombada e verso do livro: mais escuros que o navy */
  --green-volume: #5a9554;   /* a "espessura" do número verde do dado de impacto */
  --pagina: #fbfbfb;         /* borda das páginas do livro */
  --pagina-linha: #e2e2e8;

  --erro: #b42318;
  --whatsapp: #25d366;
  --whatsapp-escuro: #1da851;

  /* Transparências do navy, para textos secundários (equivale a text-navy/80 do Tailwind) */
  --navy-80: rgb(1 4 64 / 0.8);
  --navy-70: rgb(1 4 64 / 0.7);
  --navy-15: rgb(1 4 64 / 0.15);

  --fonte: 'Baloo 2', ui-sans-serif, system-ui, sans-serif;

  /* Altura da faixa que mistura a chamada final (malva) com o rodapé (navy) */
  --mistura: 200px;
}

/* ========== 2. BASE ========== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
/* Rolagem suave nos links internos, só para quem não pediu "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }   /* títulos com linhas equilibradas */
p, li { text-wrap: pretty; }                     /* sem palavra sozinha na última linha */
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: 1280px;   /* max-w-7xl */
  margin: 0 auto;
  padding: 0 16px;
}

/* Some da tela, mas o leitor de tela ainda lê */
.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: -9999px; z-index: 60;
}
.pular:focus {
  left: 12px; top: 12px; padding: 8px 16px; border-radius: 12px;
  background: var(--navy); color: var(--branco);
}

[tabindex="-1"]:focus { outline: none; }

/* Textos padrão das seções */
.sobretitulo {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--mauve-dark);
  margin-bottom: 0.5rem;
}
.sobretitulo--claro { color: rgb(255 255 255 / 0.8); }
.sobretitulo--navy { color: var(--navy); }

.destaque { color: var(--green-dark); }   /* palavra em destaque nos títulos */

.secao__titulo {
  max-width: 48rem;
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 800;
}

/* ========== 3. FUNDOS EM DEGRADÊ (do canto claro para a cor cheia) ========== */
.bg-degrade-claro {
  background-color: var(--offwhite);
  background-image:
    radial-gradient(circle at 0% 0%, var(--peach), transparent 40%),
    radial-gradient(circle at 100% 100%, var(--peach), transparent 40%);
}
.bg-degrade-navy {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 0% 0%, var(--navy-light), transparent 45%),
    radial-gradient(circle at 100% 100%, var(--navy-light), transparent 45%);
}
.bg-degrade-malva {
  background-image: linear-gradient(135deg, var(--mauve-light), var(--mauve));
}

/* ========== 4. COMPONENTES ========== */

/* --- Botão: texto em caixa alta, cantos arredondados (rounded-xl) --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;   /* segura o brilho que atravessa o botão */
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.botao:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Sombra embaixo: o botão parece "solto" da página */
.botao--primario { background: var(--navy); color: var(--branco); box-shadow: 0 8px 18px -8px rgb(1 4 64 / 0.55); }
.botao--primario:hover { background: var(--navy-light); }
.botao--primario:disabled { opacity: 0.7; cursor: wait; }

@media (prefers-reduced-motion: no-preference) {
  /* Ao passar o mouse, o botão sobe um pouco; ao clicar, "afunda" */
  .botao--primario:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgb(1 4 64 / 0.6); }
  .botao--primario:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgb(1 4 64 / 0.6); }
}

.botao--compacto { padding: 0.5rem 1.25rem; }
.botao--largo { width: 100%; padding-top: 1rem; padding-bottom: 1rem; }
.botao__icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Ícones (desenhos de traço do Lucide) --- */
.lista-check svg, .card__icone svg, .sucesso__icone, .link-verde svg, .whatsapp-flutuante svg, .erro svg, .falha svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Lista com check verde --- */
.lista-check {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.85rem;
}
.lista-check li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.lista-check__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: rgb(121 180 115 / 0.25);   /* bg-green/25 */
  color: var(--green-dark);
}
.lista-check__icone svg { width: 18px; height: 18px; }

/* --- Cards com ícone (igual ao GradeDeCards do site) --- */
.grade-cards {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  gap: 1.5rem;
}
.card {
  background: var(--branco);
  border-radius: 1.5rem;   /* rounded-3xl */
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 0 0 1px rgb(1 4 64 / 0.05);
}
.card--offwhite { background: var(--offwhite); box-shadow: none; }
.card h3 { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.card p { margin-top: 0.75rem; color: var(--navy-80); }
.card__icone {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgb(121 180 115 / 0.25);
  color: var(--green-dark);
}
.card__icone svg { width: 28px; height: 28px; }
.card__icone--malva { background: rgb(158 120 143 / 0.2); color: var(--mauve-dark); }

/* --- Card do formulário (rounded-3xl, sombra grande) --- */
.cartao-form {
  position: relative;
  background: var(--branco);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(1 4 64 / 0.05);
  scroll-margin-top: 96px;
}
.cartao-form__titulo { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.cartao-form__aviso { margin: 0.35rem 0 1.5rem; font-size: 0.875rem; color: var(--navy-70); }

/* --- Campos --- */
.grade-campos { display: grid; gap: 1.25rem; }

.campo label,
.pilulas legend {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}
.campo input {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: var(--branco);
  padding: 0.75rem 1rem;
  border: 2px solid var(--navy-15);
  border-radius: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input::placeholder { color: rgb(1 4 64 / 0.4); }
.campo input:hover { border-color: rgb(1 4 64 / 0.35); }
.campo input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgb(1 4 64 / 0.2); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }

.erro {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--erro);
}
.erro:empty { display: none; }
.erro svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Pílulas de colaboradores --- */
.pilulas { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.pilulas__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pilulas label { cursor: pointer; }
.pilulas input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* o círculo do radio some; o visual é o <span> */
.pilulas span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--navy-15);
  border-radius: 0.75rem;
  background: var(--branco);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pilulas label:hover span { border-color: rgb(1 4 64 / 0.4); }
.pilulas input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--branco); }
.pilulas input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Aceite (LGPD) --- */
.aceite { margin-top: 1.5rem; }
.aceite label { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding: 0.5rem 0; cursor: pointer; }
.aceite input { width: 20px; height: 20px; margin: 0.2rem 0 0; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; }
.aceite span { font-size: 0.875rem; color: rgb(1 4 64 / 0.85); }
.aceite a { font-weight: 600; text-underline-offset: 2px; }

/* Armadilha para robôs: fora da tela */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.falha {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 1.5rem; padding: 1rem; border-radius: 0.75rem;
  background: rgb(180 35 24 / 0.1); color: var(--erro);
  font-size: 0.875rem; font-weight: 600;
}
.falha[hidden] { display: none; }

#botao-enviar { margin-top: 2rem; }

/* --- Tela de sucesso --- */
.sucesso { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sucesso[hidden] { display: none; }
.sucesso__icone { width: 56px; height: 56px; color: var(--green-dark); }
.sucesso h2 { margin-top: 1rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.sucesso > p { margin: 0.75rem 0 1.75rem; color: var(--navy-80); }
.sucesso__extra { margin-top: 1.5rem; font-size: 0.95rem; color: var(--navy-80); }

.link-verde {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-weight: 600; color: var(--green-dark); text-decoration: none;
}
.link-verde:hover { text-decoration: underline; }
.link-verde svg { width: 20px; height: 20px; }

/* --- Selo de aviso (igual ao [CONFIRMAR FONTE] do site) --- */
.selo {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--branco);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* ========== 5. SEÇÕES ========== */

/* --- Header: some ao rolar para baixo, volta ao rolar para cima (classe colocada pelo JS) --- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgb(243 243 244 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.topo--rolado { box-shadow: 0 1px 0 rgb(1 4 64 / 0.08); }
.topo--escondido { transform: translateY(-100%); }
.topo:focus-within { transform: none; }   /* quem navega pelo teclado sempre vê o header */

.topo__conteudo { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.topo__logo { display: inline-flex; min-height: 44px; align-items: center; }
.topo__logo img { width: 128px; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; }
.hero__fusao {   /* funde o fim do hero com o offwhite da página, sem linha de corte */
  position: absolute; inset: auto 0 0 0; height: 10rem; pointer-events: none;
  z-index: 1;   /* fica POR CIMA da estampa: o traço some aos poucos em vez de ser cortado em linha reta */
  background: linear-gradient(to bottom, transparent, var(--offwhite));
}
.hero__grade {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
}
.hero h1 {
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hero__subtitulo { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; color: var(--navy-80); }

/* Pilha de folhas paradas atrás do formulário: dá profundidade sem se mexer */
.form-pilha { position: relative; }
.form-pilha__folha {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  pointer-events: none;
}
.form-pilha__folha--verde {
  background: var(--green-light);
  rotate: 2deg;
}
.form-pilha__folha--malva {
  background: var(--mauve-light);
  rotate: -2.5deg;
}

/* --- Seções claras --- */
.secao { padding: 5rem 0; }
.secao--branca { background: var(--branco); }

/* --- Dado de impacto (navy) --- */
.impacto { position: relative; overflow: hidden; padding: 5rem 0; color: var(--branco); }
.impacto__conteudo { position: relative; z-index: 2; }
.impacto__numero {
  margin-top: 1rem;
  width: fit-content;   /* gira em torno do próprio número, não da largura da tela */
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  /*
    Número em 3D: vira um pouco para o mouse, e a "espessura" (camadas de sombra)
    aparece do lado oposto, como se fosse uma peça sólida. --ex/--ey = direção da espessura.
  */
  --ex: calc(var(--px, 0) * -1px);
  --ey: calc(1px - var(--py, 0) * 0.6px);
  transform: perspective(900px) rotateY(calc(var(--px, 0) * -6deg)) rotateX(calc(var(--py, 0) * 5deg));
  text-shadow:
    var(--ex) var(--ey) 0 var(--green-volume),
    calc(var(--ex) * 2) calc(var(--ey) * 2) 0 var(--green-volume),
    calc(var(--ex) * 3) calc(var(--ey) * 3) 0 var(--green-dark),
    calc(var(--ex) * 4) calc(var(--ey) * 4) 0 var(--green-dark),
    0 14px 24px rgb(0 0 0 / 0.3);
}
.impacto__legenda { margin-top: 1.5rem; max-width: 42rem; font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
.impacto__fonte {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-size: 0.875rem; color: rgb(255 255 255 / 0.75);
}

/* --- Chamada final (malva) --- */
.chamada {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 calc(var(--mistura) + 3rem);
}
.mistura-base {   /* termina na cor do rodapé: as duas seções se fundem sem corte */
  position: absolute; inset: auto 0 0 0; height: var(--mistura); pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--navy));
}
.chamada__grade { position: relative; z-index: 2; display: grid; gap: 3rem; align-items: center; }
.chamada__titulo { font-size: 1.875rem; line-height: 1.2; font-weight: 800; }
.chamada__titulo mark {
  background: rgb(255 255 255 / 0.7);
  color: var(--navy);
  border-radius: 0.5rem;
  padding: 0 0.5rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.chamada__texto { margin: 1.25rem 0 2rem; max-width: 32rem; font-size: 1.125rem; color: rgb(1 4 64 / 0.9); }

/* --- O guia como livro 3D ---
  Como funciona: .livro__corpo é uma "caixa" 3D (transform-style: preserve-3d).
  Cada face é um <div> girado e empurrado para o seu lugar, como montar uma caixa de papelão:
    frente (.capa) e verso → empurrados para frente/trás metade da espessura (translateZ)
    lombada e borda das páginas → girados 90° (rotateY) nas laterais
  Medidas em variáveis para as faces se encaixarem: largura (l), altura (a) e espessura (e).
*/
/*
  --abertura vai de 0 (fechado) a 1 (aberto). Registrar a variável com @property
  deixa o navegador ANIMAR o número aos poucos; capa, livro e sombra usam o mesmo valor,
  então tudo se move junto e no mesmo ritmo.
*/
@property --abertura {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.livro {
  --livro-l: 240px;
  --livro-a: calc(var(--livro-l) * 4 / 3);
  --livro-e: 26px;
  position: relative;
  width: var(--livro-l);
  height: var(--livro-a);
  margin: 0 auto 2.5rem;
  perspective: 1400px;   /* a "distância do olho": quanto menor, mais exagerado o 3D */
  font-size: calc(var(--livro-l) / 15);   /* textos de dentro crescem e diminuem junto com o livro */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --abertura: 0;
  /* Aberto, o livro anda para a direita: as duas páginas ficam centralizadas */
  translate: calc(var(--abertura) * 50%) 0;
  transition: --abertura 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.livro--aberto { --abertura: 1; }
.livro:focus-visible { outline: 3px solid var(--navy); outline-offset: 12px; border-radius: 1rem; }
.livro__corpo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Virado de lado (mostra a lombada) e olhando para o mouse: --px e --py vêm do JS (-1 a 1) */
  /* Fechado: virado de lado (mostra a lombada). Aberto: quase de frente, para ler as páginas */
  transform:
    rotateY(calc(24deg - var(--abertura) * 14deg - var(--px, 0) * 8deg))
    rotateX(calc(-9deg + var(--abertura) * 4deg + var(--py, 0) * 5deg));
}
.livro__corpo > * { position: absolute; }

.livro__verso {
  inset: 0;
  border-radius: 1rem 0.4rem 0.4rem 1rem;
  background: var(--navy-fundo);
  transform: translateZ(calc(var(--livro-e) / -2)) rotateY(180deg);
}
/*
  A lombada é 2px mais larga que a espessura: assim ela "cobre" a junta com a capa.
  Sem isso, a página branca de dentro aparecia pela fresta como um tracejado ("costura").
*/
.livro__lombada {
  top: 0;
  left: calc(var(--livro-e) / -2 - 1px);
  width: calc(var(--livro-e) + 2px);
  height: 100%;
  border-radius: 0.4rem;
  background: linear-gradient(to right, var(--navy-fundo), var(--navy) 45%, var(--navy-fundo));
  transform: rotateY(-90deg);
}
/* Borda das páginas (lado direito) e topo: um pouco para dentro da capa, como num livro de verdade */
.livro__paginas {
  top: 6px;
  left: calc(var(--livro-l) - 6px - (var(--livro-e) - 4px) / 2);
  width: calc(var(--livro-e) - 4px);
  height: calc(100% - 12px);
  background: repeating-linear-gradient(to right, var(--pagina) 0 2px, var(--pagina-linha) 2px 3px);
  transform: rotateY(90deg);
}
.livro__topo {
  left: 0;
  top: calc(6px - (var(--livro-e) - 4px) / 2);
  width: calc(var(--livro-l) - 6px);
  height: calc(var(--livro-e) - 4px);
  background: repeating-linear-gradient(to bottom, var(--pagina) 0 2px, var(--pagina-linha) 2px 3px);
  transform: rotateX(90deg);
}
/* A primeira página, por baixo da capa: só aparece quando a capa abre */
.livro__miolo {
  top: 6px;
  bottom: 6px;
  left: 3px;   /* um pouco para dentro: não encosta na junta da lombada */
  right: 6px;
  padding: 2.2em 1.6em 1.6em 1.9em;
  display: flex;
  flex-direction: column;
  border-radius: 0 0.3rem 0.3rem 0;
  background:
    linear-gradient(to right, rgb(1 4 64 / 0.12), transparent 1.4em),   /* sombra da dobra, junto da lombada */
    var(--pagina);
  color: var(--navy);
  transform: translateZ(calc(var(--livro-e) / 2 - 3px));
}
.miolo__titulo {
  font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mauve-dark);
}
.miolo__lista {
  margin: 0.8em 0 0; padding: 0; list-style: none;
  counter-reset: capitulo;   /* numeração feita no CSS: 01, 02, 03... */
  display: grid; gap: 0.75em;
}
.miolo__lista li {
  counter-increment: capitulo;
  display: grid; grid-template-columns: 1.9em 1fr; align-items: baseline;
  padding-bottom: 0.6em; border-bottom: 1px dashed rgb(1 4 64 / 0.15);
  font-size: 0.95em; font-weight: 600; line-height: 1.2;
}
.miolo__lista li::before {
  content: counter(capitulo, decimal-leading-zero);
  font-weight: 800; color: var(--green-dark);
}
.miolo__cta {
  margin-top: auto; align-self: flex-end;
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark);
}

/*
  A capa tem dois lados: a FRENTE (.capa) e o lado de DENTRO (.capa-dentro).
  Os dois giram juntos pela lombada; "backface-visibility: hidden" esconde cada um quando está de costas,
  então você vê a frente com o livro fechado e o lado de dentro com ele aberto.
*/
.capa,
.capa-dentro {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.capa-dentro {
  inset: 0;
  padding: 2.2em 1.7em 1.6em;
  display: flex;
  flex-direction: column;
  border-radius: 0.6rem 0.4rem 0.4rem 0.6rem;
  color: var(--navy);
  background-image: linear-gradient(135deg, var(--mauve-light), #e9e0e5);
  transform-origin: left center;
  /* gira junto com a capa e depois vira 180° no próprio lugar (por isso o translateX) */
  transform:
    translateZ(calc(var(--livro-e) / 2))
    rotateY(calc(var(--abertura) * -165deg))
    translateX(var(--livro-l))
    rotateY(180deg);
}
.capa-dentro__etiqueta {
  align-self: flex-start;
  padding: 0.2em 0.8em; border-radius: 999px; background: var(--navy); color: var(--branco);
  font-size: 0.7em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.capa-dentro__texto { margin-top: 0.9em; font-size: 1.1em; font-weight: 700; line-height: 1.25; }
.capa-dentro__logo { margin-top: auto; width: 5.5em; }
/*
  Sombra no chão: elipse desfocada embaixo do livro.
  Acompanha o livro: anda para o lado contrário do mouse (a "luz" vem de cima)
  e, com o livro aberto, se alarga para baixo das duas páginas.
*/
.livro__sombra {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -38px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(1 4 64 / 0.45), transparent);
  filter: blur(3px);
  pointer-events: none;
  transform:
    translateX(calc(var(--abertura) * var(--livro-l) * -0.5 - var(--px, 0) * 14px))
    scaleX(calc(1 + var(--abertura) * 1.15 - var(--px, 0) * 0.06));
}

/* Capa provisória do guia (a FRENTE do livro) */
.capa {
  inset: 0;
  overflow: hidden;
  padding: 2rem 1.75rem;
  border-radius: 0.4rem 0.6rem 0.6rem 0.4rem;   /* lado da lombada mais reto, como capa dura */
  color: var(--branco);
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 0% 0%, var(--navy-light), transparent 55%),
    radial-gradient(circle at 100% 100%, var(--navy-light), transparent 45%);
  display: flex;
  flex-direction: column;
  transform-origin: left center;   /* a capa "abre" girando pela lombada */
  transform: translateZ(calc(var(--livro-e) / 2)) rotateY(calc(var(--abertura) * -165deg));
}
/* Reflexo de luz que corre pela capa conforme o livro gira */
.capa::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.13) 45%, transparent 60%);
  background-size: 250% 100%;
  background-position: calc(50% + var(--px, 0) * 40%) 0;
}
/* Vinco da capa dura, junto da lombada */
.capa::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.1) 7px, transparent 16px);
}
.capa__estampa {
  position: absolute; width: 260px; height: 348px; right: -90px; bottom: -110px;
  color: var(--estampa-navy-light); opacity: 0.45;
  fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round;
}
.capa__logo { position: relative; width: 96px; }
.capa__etiqueta {
  position: relative; margin-top: auto; align-self: flex-start;
  padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--green); color: var(--navy);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.capa__titulo { position: relative; margin-top: 0.75rem; font-size: 1.85rem; line-height: 1.05; font-weight: 800; }
.capa__sub { position: relative; margin-top: 0.5rem; color: rgb(255 255 255 / 0.8); font-weight: 500; }

/* --- Rodapé (navy) --- */
.rodape { background: var(--navy); color: var(--branco); padding: 2rem 0 2.5rem; }
.rodape__topo { display: grid; gap: 2rem; }
.rodape__topo img { width: 144px; }
.rodape__assinatura { margin-top: 1rem; color: rgb(255 255 255 / 0.75); }
.rodape__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rodape__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: rgb(255 255 255 / 0.75); text-decoration: none; transition: color 0.2s;
}
.rodape__links a:hover { color: var(--branco); text-decoration: underline; }
.rodape__legal {
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.15);
  display: grid; gap: 0.25rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.65);
}

/* --- Botão flutuante do WhatsApp --- */
.whatsapp-flutuante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-width: 56px; height: 56px; padding: 0 16px; justify-content: center;
  border-radius: 999px;
  background: var(--whatsapp); color: var(--branco);
  font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.25);
  transition: background-color 0.2s;
}
.whatsapp-flutuante:hover { background: var(--whatsapp-escuro); }
.whatsapp-flutuante svg { width: 26px; height: 26px; }
.whatsapp-flutuante__texto { display: none; }
/* Anel que pulsa a cada 4 segundos */
.whatsapp-flutuante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--whatsapp); z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-flutuante::before { animation: pulso-whatsapp 4s ease-out infinite; }
}
@keyframes pulso-whatsapp {
  0% { transform: scale(1); opacity: 0.55; }
  35%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ========== 6. MOVIMENTO ========== */

/* --- Estampas de fundo --- */
.estampa {
  position: absolute;
  pointer-events: none;
  aspect-ratio: 360 / 482;   /* proporção do desenho */
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 7;            /* ≈ 2% da largura do desenho */
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}
/* Posições: cada uma medida para o traço não cruzar texto pequeno, cards nem números */
.estampa--hero { color: var(--mauve-light); width: 140px; top: 74px; left: -30px; z-index: 0; } /* atrás da faixa de fusão */                  /* ESQUERDA */
.estampa--impacto { color: rgb(142 147 240 / 0.5); width: 220px; right: -90px; bottom: -180px; }    /* DIREITA */
.estampa--chamada { color: var(--estampa-mauve); width: 200px; left: -60px; bottom: calc(var(--mistura) - 220px); } /* ESQUERDA */

/*
  Desenho do traço: com pathLength="1" o traço mede 1; deslocar o tracejado de 1 até 0 "desenha" a volta.
  O JS coloca a classe .estampa--desenhada quando a estampa entra na tela.
  Só acontece para quem NÃO pediu "reduzir movimento" (aí .com-movimento fica no <html>).
*/
.com-movimento .estampa .estampa__volta {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.com-movimento .estampa--desenhada .estampa__volta {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 2.2s ease-in-out, opacity 0.3s linear;
}
.com-movimento .estampa--desenhada .estampa__volta--2 { transition-delay: 0.4s; }

/* Giro bem lento, de um lado para o outro */
@media (prefers-reduced-motion: no-preference) {
  .estampa { animation: flutuar-estampa 16s ease-in-out infinite alternate; }
}
@keyframes flutuar-estampa {
  from { rotate: -4deg; }
  to { rotate: 4deg; }
}

/*
  --- Profundidade 3D que segue o mouse ---
  O JS (seção "3D" do main.js) só liga isto em computador com mouse e sem "reduzir movimento":
  aí coloca a classe .com-3d no <html>. No celular, os cards ficam retos e o livro flutua sozinho.
*/

/* Cards: inclinam na direção do mouse; o ícone "descola" do card (translateZ) */
.com-3d [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}
.com-3d [data-tilt].tilt--ativo {
  transition-duration: 0.12s, 0.3s;   /* acompanha o mouse rápido; volta devagar ao sair */
  box-shadow: 0 24px 40px -18px rgb(1 4 64 / 0.28), 0 0 0 1px rgb(1 4 64 / 0.05);
}
.com-3d [data-tilt] .card__icone { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.com-3d [data-tilt].tilt--ativo .card__icone { transform: translateZ(16px); }


@media (prefers-reduced-motion: no-preference) {
  /* Livro: sobe e desce devagar; a sombra no chão acompanha */
  .livro__corpo { animation: flutuar-livro 6s ease-in-out infinite alternate; }
  .livro__sombra { animation: sombra-livro 6s ease-in-out infinite alternate; }

  /*
    Entrada do hero ao abrir a página: os textos sobem levemente inclinados (rotateX),
    o formulário chega de lado e as folhas de trás se abrem em leque.
    "backwards" = fica invisível durante o atraso (delay), sem piscar antes.
  */
  .hero__texto > :not(.lista-check),
  .lista-check li {
    transform-origin: 50% 100%;
    animation: entrar-3d 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .hero__texto > :nth-child(1) { animation-delay: 0.05s; }
  .hero__texto > :nth-child(2) { animation-delay: 0.15s; }
  .hero__texto > :nth-child(3) { animation-delay: 0.3s; }
  .lista-check li:nth-child(1) { animation-delay: 0.45s; }
  .lista-check li:nth-child(2) { animation-delay: 0.55s; }
  .lista-check li:nth-child(3) { animation-delay: 0.65s; }

  .form-pilha { animation: entrar-form 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards; }
  .form-pilha__folha { animation: abrir-leque 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s backwards; }

  /* O check da lista se desenha depois que o item entra (o traço do ✓ mede ~23) */
  .lista-check svg {
    stroke-dasharray: 24;
    animation: desenhar-check 0.5s ease-out backwards;
  }
  .lista-check li:nth-child(1) svg { animation-delay: 0.85s; }
  .lista-check li:nth-child(2) svg { animation-delay: 0.95s; }
  .lista-check li:nth-child(3) svg { animation-delay: 1.05s; }
}

@keyframes flutuar-livro {
  from { translate: 0 0; }
  to { translate: 0 -8px; }
}
@keyframes sombra-livro {
  from { scale: 1; opacity: 1; }
  to { scale: 0.9; opacity: 0.75; }
}
@keyframes entrar-3d {
  from { opacity: 0; transform: perspective(800px) translateY(20px) rotateX(-14deg); }
}
@keyframes entrar-form {
  from { opacity: 0; transform: perspective(1400px) translateX(24px) rotateY(-7deg); }
}
@keyframes abrir-leque {
  from { rotate: 0deg; translate: 0 0; }   /* começa escondida atrás do formulário */
}
@keyframes desenhar-check {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

/* --- Surgir ao rolar: o JS esconde o que está fora da tela e anima quando entra --- */
[data-revelar-oculto] { opacity: 0; }
@media print { [data-revelar-oculto] { opacity: 1; } }

/* ========== 7. TELAS MAIORES ========== */
/* Celular: livro menor; aberto, encolhe um pouco para as duas páginas caberem na tela */
@media (max-width: 639px) {
  .livro { --livro-l: 200px; scale: calc(1 - var(--abertura) * 0.15); }
}

@media (min-width: 640px) {
  .grade-campos { grid-template-columns: 1fr 1fr; }
  .campo--largo { grid-column: 1 / -1; }
  .pilulas__grade { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 3rem; }
  .whatsapp-flutuante__texto { display: inline; }
}

@media (min-width: 768px) {
  :root { --mistura: 260px; }
  .container { padding: 0 2rem; }
  .cartao-form { padding: 2.5rem; }
  .hero__grade { padding-top: 8rem; }
  .hero__subtitulo { font-size: 1.25rem; }
  .secao, .impacto { padding: 7rem 0; }
  .secao__titulo, .chamada__titulo { font-size: 3rem; }
  .card { display: flex; gap: 1.5rem; padding: 2rem; }
  .card h3 { margin-top: 0; font-size: 1.5rem; }
  .impacto__numero { font-size: 8rem; }
  .impacto__legenda { font-size: 1.875rem; }
  .estampa--impacto { width: 360px; right: -8rem; top: 50%; bottom: auto; translate: 0 -50%; }
  .estampa--chamada { width: 380px; left: -5rem; bottom: calc(var(--mistura) - 200px); }
  .chamada { padding-top: 7rem; padding-bottom: calc(var(--mistura) + 4rem); }
  .livro { --livro-l: 280px; --livro-e: 30px; }
  .rodape__topo { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1024px) {
  /* Texto à esquerda e formulário à direita */
  /* padding de baixo maior: abre espaço livre embaixo da lista para a estampa */
  .hero__grade { grid-template-columns: 1fr 1fr; gap: 4rem; padding-bottom: 10rem; }
  .hero__fusao { height: 6rem; }
  .hero h1 { font-size: 3.5rem; }
  /* Estampa ESQUERDA, medida para ficar abaixo da lista (sem cruzar texto) e sumir na faixa de fusão */
  .estampa--hero { width: 300px; top: auto; bottom: -160px; left: -170px; }
  .grade-cards { grid-template-columns: repeat(3, 1fr); }
  .card { display: block; }
  .card h3 { margin-top: 1.5rem; }
  .chamada__grade { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; }
}