/* ===========================================================================
   BASE — fontes, reset, tipografia e layout.
   Não define NENHUM valor de cor/tamanho/espaço: só consome os tokens de
   tokens.css. A única exceção são as métricas do @font-face abaixo, que não
   são design — são a descrição do arquivo de fonte.
   =========================================================================== */

/* --- FONTE DOS TÍTULOS: Source Serif 4 (SIL OFL), auto-hospedada ----------
   Quatro arquivos woff2, só o subconjunto latino (~30–38 KB cada), em
   /fontes. Sem Google Fonts, sem CDN: nenhum pedido a terceiro, nenhum cookie,
   nada que dependa do consentimento. `font-display: swap` mostra o texto na
   hora com a reserva (Georgia) e troca quando a serifa chega. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontes/SourceSerif4-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontes/SourceSerif4-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fontes/SourceSerif4-SemiboldIt.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fontes/SourceSerif4-BoldIt.woff2") format("woff2");
}
/* A reserva: Georgia com a largura ajustada para ocupar o mesmo espaço da
   Source Serif 4. Assim o título não "pula" de linha quando a fonte chega. */
@font-face {
  font-family: "Source Serif 4 Reserva";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 26%;
}

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-corpo);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background: var(--cor-fundo-suave);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; }

/* Os ícones do site são de LINHA (stroke de 2px), não de massa nem emoji:
   emoji muda de cara em cada celular e faz cara de post. */
.icone {
  width: 1.25em; height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.25em;
}
.icone--grande { width: 40px; height: 40px; }

/* --- TIPOGRAFIA ---------------------------------------------------------- */
/* Serifa só em H1 e H2 (e no preço/números grandes, por classe). H3 fica na
   sans para a serifa continuar rara e, por isso, ter autoridade. */
h1, h2, h3 {
  margin: 0 0 var(--e3);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-titulo);
  overflow-wrap: anywhere;
}
h1, h2 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
h1 { font-size: var(--texto-titulo); }
h2 { font-size: var(--texto-titulo); }
h3 { font-size: var(--texto-grande); }

/* O H1 da landing e da /oferta: 36px no celular, 44px a partir de 720px (o
   token --texto-heroi já muda sozinho). Cabe em 3 linhas nos 358px úteis. */
.titulo-heroi, h1.heroi__titulo {
  font-size: var(--texto-heroi);
  line-height: var(--altura-linha-heroi);
  letter-spacing: .01em;
}

p { margin: 0 0 var(--e4); text-wrap: pretty; }
.subtitulo { color: var(--cor-texto-suave); font-size: var(--texto-medio); margin-bottom: var(--e6); }
.miudo    { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }

/* Números que se comparam (preço, dias, tabela) alinham em coluna. */
.tabular { font-variant-numeric: tabular-nums; }

/* Preço "por", números da régua e das capas: serifa grande. */
.numero-grande {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--texto-numero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preco-grande {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--texto-preco);
  line-height: 1;
  color: var(--cor-acento);
  font-variant-numeric: tabular-nums;
}

/* A assinatura de quem orienta: serifa itálica. Aparece no herói, no bloco
   escuro e no rodapé — é o que transforma "página de vendas" em "orientação
   de alguém". */
.assinatura {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: var(--peso-medio);
  font-size: var(--texto-grande);
  color: inherit;
}

/* O ==grifo== do H1 e do subtítulo — "grifo de caneta" areia, o mesmo do
   quiz. Contraste conferido: 12.56:1. */
mark, .destaque {
  background: var(--cor-marca-texto);
  color: var(--cor-texto);
  padding: 0 var(--e1);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--cor-primaria-esc); }

strong, b { font-weight: var(--peso-forte); }

hr {
  border: 0;
  border-top: 1px solid var(--cor-borda);
  margin: var(--e6) 0;
}

/* --- FOCO ---------------------------------------------------------------- */
/* Grosso e visível de propósito: quem navega por teclado ou tem visão reduzida
   precisa enxergar onde está. Nunca remover sem substituir por algo melhor. */
:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: var(--raio);
}

/* --- LAYOUT (mobile first, 390px) ---------------------------------------- */
.pagina    { max-width: var(--largura-pagina); margin: 0 auto; padding: 0 var(--e4); }
@media (min-width: 720px) { .pagina { padding: 0 var(--e8); } }
.leitura   { max-width: var(--largura-leitura); }
.estreita  { max-width: var(--largura-estreita); margin-left: auto; margin-right: auto; }
.pilha > * + * { margin-top: var(--e4); }
.pilha-larga > * + * { margin-top: var(--e8); }

/* O cartão único das telas de uma tarefa (login, recuperar senha, obrigado).
   No celular ele É a página; a partir de 560px vira um cartão desenhado pela
   borda, sem sombra, sobre o branco-salvia. */
.cartao {
  max-width: var(--largura-forma);
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e8);
  background: var(--cor-fundo);
  min-height: 100vh;
}
@media (min-width: 560px) {
  .cartao {
    margin: var(--e10) auto;
    padding: var(--e8) var(--e8) var(--e10);
    min-height: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-grande);
  }
}

/* Seção de página de venda: respiro grande entre uma e outra. O esqueleto é
   sempre o mesmo — linha de 3px + chapéu → H2 à esquerda → subtítulo →
   conteúdo (ver .chapeu em componentes.css). */
.secao { padding: var(--espaco-secao) 0; }
.secao--suave  { background: var(--cor-fundo-suave); }
.secao--branca { background: var(--cor-fundo); }

/* Pula para o conteúdo: primeiro item do teclado, escondido até receber foco. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  border-radius: var(--raio);
  z-index: var(--z-pular);
}
.pular-para-conteudo:focus { left: var(--e2); }

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

/* --- ENTRADA POR ROLAGEM ------------------------------------------------- */
/* A única animação de página: opacidade 0→1 e 12px para cima, uma vez. Só
   liga quando o JS marca html[data-js] e o item ainda não entrou; sem JS, a
   página aparece inteira. Desligada com prefers-reduced-motion (o token
   --transicao-entrada vira 0ms). */
html[data-js] .entra { opacity: 0; transform: translateY(12px); transition: opacity var(--transicao-entrada), transform var(--transicao-entrada); }
html[data-js] .entra[data-entrou="sim"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-js] .entra { opacity: 1; transform: none; }
}

/* --- ESCONDER ------------------------------------------------------------ */
/* `hidden` do HTML precisa vencer `display:flex`/`grid`. Sem esta linha, um
   bloco marcado como escondido pelo JavaScript continua aparecendo — e o aluno
   vê "carregando" e a lista de aulas ao mesmo tempo. */
[hidden] { display: none !important; }