/* Aprender Agora
   Paleta mínima: fundo, tinta, um cinza e a cor das linhas. Nenhuma cor de destaque.
   Tipografia: uma família só (Source Serif 4), dois pesos (400 e 600) e cinco tamanhos.
   Fonte servida do próprio site, cortada para os pesos 400 a 600; licença em /fonts. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-opsz-normal.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-opsz-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}
/* Georgia com as medidas da Source Serif 4: o texto não pula quando a fonte chega. */
@font-face {
  font-family: "Georgia ajustada";
  src: local("Georgia");
  size-adjust: 101.5%; ascent-override: 102.1%; descent-override: 33%; line-gap-override: 0%;
}

:root {
  --fundo: #fff;
  --tinta: #111;
  --tinta-suave: #666;
  --linha: #e5e5e5;

  --fonte: "Source Serif 4", "Georgia ajustada", Georgia, "Times New Roman", serif;

  /* Escala de tamanhos: nada no site foge destes cinco. */
  --fs-pequeno: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 3.625rem);

  /* Uma coluna só, como um ensaio: ~70 caracteres por linha. */
  --coluna: 40rem;
  --margem: clamp(1rem, 5vw, 2.5rem);
  --secao: clamp(2.5rem, 9vw, 7.5rem); /* no celular, 80px entre seções; no computador, 240px */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111;
    --tinta: #ededed;
    --tinta-suave: #999;
    --linha: #2a2a2a;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-optical-sizing: auto;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
/* Hover só onde há mouse: no toque, o estado ficaria preso depois do toque. */
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
strong { font-weight: 600; }

.coluna { max-width: calc(var(--coluna) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.5rem 1rem; background: var(--tinta); color: var(--fundo);
}
.pular:focus { top: 1rem; }

.sobretitulo { margin: 0 0 0.75rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); }

/* Botões e links de ação */
.botao {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent; /* mesma medida do botão com contorno */
  background: var(--tinta);
  color: var(--fundo);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s, transform 0.2s;
}

/* Ação secundária: mesmo tamanho do botão principal, só com contorno. */
.botao--contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }

/* Link com seta: altura de toque de 44px sem mudar o desenho. */
.link-seta { display: inline-block; padding-block: 0.5rem; font-weight: 600; text-decoration: none; }
.link-seta::after { content: " ↓"; }

@media (hover: hover) {
  .botao:hover { background: color-mix(in srgb, var(--tinta) 82%, var(--fundo)); color: var(--fundo); transform: translateY(-1px); }
  /* No hover, as duas variações só mudam um pouco o fundo; nenhuma vira a outra. */
  .botao--contorno:hover { background: color-mix(in srgb, var(--tinta) 8%, var(--fundo)); color: var(--tinta); }
  .link-seta:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) { .botao, .botao:hover { transition: none; transform: none; } }

/* Topo: não é fixo e não tem linha; sobe junto com a página ao rolar. */
/* Em telas estreitas, a marca perde o "Movimento" para caber na mesma linha dos ícones. */
.topo__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 4rem; padding-block: 0.5rem; }
.marca { padding-block: 0.5rem; font-weight: 600; text-decoration: none; }
@media (max-width: 23rem) { .marca__prefixo { display: none; } }
/* Ícones de contato: na cor do texto, com área de toque de 44px. */
.topo__acoes { display: flex; align-items: center; gap: 0.25rem; margin-right: -0.625rem; } /* alinha o desenho do último ícone à borda da coluna */
.topo__icone { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--tinta); }
@media (hover: hover) { .topo__icone:hover { color: var(--tinta-suave); } }


/* Abertura */
.abertura { padding-top: clamp(2.5rem, 10vw, 8rem); }
.abertura__texto { margin-top: 1.75rem; }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }

/* Seções: cada uma começa com uma linha fina, com o mesmo espaço dos dois lados. */
.secao { margin-top: var(--secao); padding-top: var(--secao); border-top: 1px solid var(--linha); }
.secao h2 { margin-bottom: 1.5rem; }

/* Manifesto: frases curtas em tamanho maior, para serem lidas como declaração. */
.manifesto p { font-size: var(--fs-h3); line-height: 1.5; margin-bottom: 1.25rem; }
.manifesto p:last-child { margin: 2rem 0 0; }

/* Números */
.numeros { display: grid; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 36rem) { .numeros { grid-template-columns: 1fr 1fr; } }
.numeros dt { font-size: var(--fs-h1); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.numeros dd { margin: 0.5rem 0 0; }
/* Em linha própria, mas só o texto é tocável, não a largura toda. */
.numeros dd a { display: table; margin-top: 0.25rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); }

/* Listas */
.pauta, .regras, .lista-marcada { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pauta li + li { margin-top: 1.75rem; }
/* Cada pauta abre com o mesmo travessão de "Como vamos pressionar", pendurado na linha do título. */
.pauta li { position: relative; padding-left: 1.5rem; }
.pauta li::before { content: "—"; position: absolute; left: 0; font-size: var(--fs-h3); line-height: 1.15; color: var(--tinta-suave); }
.pauta h3 { margin-bottom: 0.25rem; }
.pauta p { margin: 0; }

.regras li + li { margin-top: 0.75rem; }

.lista-marcada li { position: relative; padding-left: 1.5rem; }
.lista-marcada li + li { margin-top: 0.5rem; }
.lista-marcada li::before { content: "—"; position: absolute; left: 0; color: var(--tinta-suave); }

/* Como entrar: a única lista numerada, porque a ordem importa. */
.passos { margin: 0 0 2rem; padding-left: 1.5rem; }
.passos li { padding-left: 0.25rem; }
.passos li + li { margin-top: 0.5rem; }
.passos li::marker { color: var(--tinta-suave); }
.entrar__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
/* No celular, os dois botões ocupam a largura toda, um embaixo do outro. */
@media (max-width: 30rem) { .entrar__acoes .botao { flex: 1 1 100%; } }
.entrar__nota { margin-top: 1.25rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); }
.entrar__nota + .entrar__nota { margin-top: 0.5rem; }

/* Dúvidas */
.duvidas summary {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.75rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; font-weight: 400; color: var(--tinta-suave); }
.duvidas details[open] summary::after { content: "−"; }
.duvidas details p { margin: 0 0 1rem; }

/* Rodapé: uma linha fina fecha o texto, como as das seções. */
.rodape { margin-top: var(--secao); padding-block: 2rem 3rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); }
.rodape .coluna { border-top: 1px solid var(--linha); padding-top: 2rem; }
.rodape p { margin: 0 0 0.25rem; }
.rodape strong { color: var(--tinta); }

/* Como apoiar: cada forma de apoio abre com um subtítulo. */
.apoio__titulo { margin: 2.5rem 0 0.75rem; }
.link-seta--fora::after { content: " ↗"; }

/* Divulgue: WhatsApp sempre; o menu do aparelho só onde ele existe. */
.divulgar { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.link-seta--botao { padding: 0.5rem 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; }
.link-seta--botao::after { content: none; }

/* Canal do WhatsApp, flutuante: nas cores do site, escondido até o script mostrar. */
.flutuante {
  position: fixed; z-index: 10;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem 0.625rem 0.875rem;
  background: var(--tinta); color: var(--fundo);
  font-size: var(--fs-pequeno); font-weight: 600; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(0.5rem);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background-color 0.2s;
}
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; }
.flutuante:hover { background: color-mix(in srgb, var(--tinta) 82%, var(--fundo)); }
@media (prefers-reduced-motion: reduce) { .flutuante { transition: none; transform: none; } }