/*
 * TEMA — paleta e tipografia da marca.
 *
 * Carregado DEPOIS do styles.css de propósito: o Tailwind desta página é
 * pré-compilado e não dá para regenerar, então a forma de mudar a identidade é
 * sobrescrever aqui, no fim da cascata.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUE ESTA PALETA
 *
 * A anterior era #1d4ed8 azul + #7c3aed roxo + #22c55e verde no botão +
 * #facc15 amarelo na urgência. Essa combinação é a assinatura da categoria:
 * dava para adivinhar a paleta sabendo só o nicho. Lead que já viu duas
 * páginas dessas reconhece antes de ler.
 *
 * A fuga óbvia seria creme com serifada editorial — que virou a segunda
 * estampa mais repetida. Sair de um clichê para cair no seguinte não resolve.
 *
 * Estratégia: COMMITTED, uma cor saturada carregando a superfície.
 * Cena física: a mesa de uma sala de aula com o material impresso e
 * organizado em cima. Daí vêm o tijolo queimado e o ocre; o branco é de giz,
 * com croma 0.004 — branco-quebrado de verdade, não creme.
 *
 * O colorido infantil não entra no cromo da interface. Ele aparece dentro das
 * fotos do material, quando existirem. Quem compra é uma voluntária cansada
 * às 22h de sábado, não uma criança: a página precisa transmitir "está
 * organizado, pode descansar", não festa.
 *
 * Contraste conferido antes de escrever (WCAG 2.1 AA):
 *   tinta sobre giz .............. 16,16:1
 *   tinta-fraca sobre giz .........  6,10:1
 *   branco sobre tijolo (CTA) .....  5,88:1
 *   tijolo sobre giz (link) .......  5,46:1
 *   tinta sobre ocre (selo) .......  8,55:1
 *   branco sobre oliva ............  5,76:1
 * 11 de 11 pares aprovados.
 *
 * Hex, não oklch(): oklch precisa de Chrome 111+ e o público inclui aparelho
 * antigo tipo Galaxy J5.
 */

:root {
  --tijolo: #aa4515; /* cor da marca, botão de compra */
  --tijolo-escuro: #842b02; /* hover, pressionado */
  --tijolo-claro: #fde6da; /* fundo de destaque suave */
  --tinta: #221812; /* texto principal, seções escuras */
  --tinta-fraca: #675b54; /* texto secundário */
  --giz: #f9f6f4; /* fundo da página */
  --ocre: #e8ab3e; /* selo, destaque */
  --oliva: #46703d; /* confirmação, check */
}

/* ───────────────────────────────────────────────── tipografia
 * Bitter (slab) + Source Sans 3 (humanista): eixo de contraste real, não duas
 * sans parecidas. Slab vem da impressão e de sinalização — lê como material
 * impresso, que é o que o produto é. Nenhuma das duas está na lista de fontes
 * reflexo, e as duas entregam latin-ext (os acentos do português). */
:root {
  --font-display: "Bitter", Georgia, serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-sans);
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em; /* slab não pede o tracking apertado da grotesca */
}

/* ───────────────────────────────────────────────── neutros
 * As classes slate do Tailwind são cinza-azulado e brigam com a paleta quente.
 * Retintadas para a rampa de tinta. */
.text-slate-900,
.text-slate-800 {
  color: var(--tinta);
}
.text-slate-700 {
  color: #4a3f39;
}
.text-slate-600,
.text-slate-500 {
  color: var(--tinta-fraca);
}
/* #8a7d75 dava 3,7:1 no fundo giz, abaixo dos 4,5 do WCAG. Este passa nos dois
 * fundos que a página usa: 4,79:1 no giz e 5,15:1 no branco. */
.text-slate-400 {
  color: #786b62;
}

.bg-\[\#f9f6f4\] {
  background-color: var(--giz);
}
.bg-slate-50 {
  background-color: var(--giz);
}
.border-slate-200 {
  border-color: #e7dfda;
}
.border-slate-100,
.divide-slate-100 {
  border-color: #f0e9e5;
}

/* ───────────────────────────────────────────────── superfícies escuras
 * O hero era um degradê radial azul. Vira tinta chapada: uma cor só, sem
 * repintar a cada frame, e sem o azul que denunciava a categoria. */
.hero-radial {
  background: var(--tinta) !important;
}

.gradient-bg-blue {
  background-image: none !important;
  background-color: var(--tinta) !important;
}

.gradient-bg-diagonal {
  background-image: none !important;
  background-color: var(--tijolo) !important;
}

/* ───────────────────────────────────────────────── botões */
.btn-cta-green,
.btn-cta-yellow {
  background-image: none !important;
  background-color: var(--tijolo) !important;
  color: #fff !important;
}

.btn-cta-green:hover,
.btn-cta-yellow:hover {
  background-color: var(--tijolo-escuro) !important;
}

/* O pulso infinito do botão saiu: era mais uma animação eterna competindo com
 * a leitura, e chamar atenção com movimento é o oposto de "pode descansar". */
.btn-cta-green,
.btn-cta-yellow {
  animation: none !important;
}

/* ───────────────────────────────────────────────── barra de urgência
 * Era amarela com texto escuro, o elemento mais reconhecível da categoria.
 * Vira tinta com ocre: mesma função, sem a assinatura. */
.bg-\[\#e8ab3e\] {
  background-color: var(--tinta) !important;
  color: var(--ocre) !important;
  border-color: #3a2a20 !important;
}

/* ─────────────────────────────────────── classes de valor arbitrário
 * ARMADILHA: o Tailwind aqui é pré-compilado, e classes como bg-[#22c55e]
 * viraram regras no styles.css com o hex ANTIGO no seletor. Ao trocar o hex no
 * HTML, essas 16 classes ficaram órfãs — sem erro, só sem pintar.
 * Pego pelo _reference/checar-classes.py. Rode ele depois de qualquer troca
 * de cor.
 *
 * Escritas aqui para o HTML e o CSS dizerem a mesma cor. A alternativa seria
 * redefinir os seletores antigos, mas aí o HTML diria #22c55e e pintaria
 * verde-oliva — mentira que o próximo a mexer paga. */

.bg-\[\#46703d\] {
  background-color: var(--oliva);
}
.bg-\[\#f9f6f4\] {
  background-color: var(--giz);
}
.bg-\[\#fde6da\] {
  background-color: var(--tijolo-claro);
}
.border-\[\#221812\] {
  border-color: var(--tinta);
}
.border-\[\#46703d\] {
  border-color: var(--oliva);
}
.border-\[\#aa4515\] {
  border-color: var(--tijolo);
}
.border-\[\#aa4515\]\/10 {
  border-color: rgb(170 69 21 / 0.1);
}
.hover\:border-\[\#e8ab3e\]\/30:hover {
  border-color: rgb(232 171 62 / 0.3);
}
.text-\[\#46703d\] {
  color: var(--oliva);
}
.text-\[\#aa4515\] {
  color: var(--tijolo);
}
.text-\[\#e8ab3e\] {
  color: var(--ocre);
}

/* Os degradês dos cards de bônus viram cor chapada: era mais um degradê
 * multicolor, o padrão que a página inteira está deixando para trás. */
.from-\[\#e8ab3e\],
.via-\[\#aa4515\],
.to-\[\#aa4515\] {
  --tw-gradient-from: initial;
  --tw-gradient-via: initial;
  --tw-gradient-to: initial;
}
.bg-gradient-to-br {
  background-image: none !important;
  background-color: var(--tijolo-claro) !important;
}

/* Números "01/02" vazados dos passos. */
.\[-webkit-text-stroke\:2px_\#aa4515\] {
  -webkit-text-stroke: 2px var(--tijolo);
}

/* As sombras dos botões vinham coloridas do tema antigo: halo amarelo no
 * .btn-cta-yellow e verde no .btn-cta-green, definidos no styles.css compilado.
 * Com o botão tijolo, o halo amarelo ficava visível ao redor. Sombra neutra,
 * na cor da própria tinta. */
.btn-cta-green,
.btn-cta-yellow {
  box-shadow:
    0 10px 24px -10px rgb(34 24 18 / 0.45),
    0 1px 0 0 rgb(255 255 255 / 0.15) inset !important;
}

.btn-cta-green:hover,
.btn-cta-yellow:hover {
  box-shadow:
    0 14px 30px -10px rgb(34 24 18 / 0.55),
    0 1px 0 0 rgb(255 255 255 / 0.15) inset !important;
}

/* Duas manchas roxo/índigo desfocadas (::before e ::after do hero), com 320px,
 * blur de 70px e animação infinita de 12s e 14s. Sobravam do tema antigo e
 * apareciam como um borrão roxo no canto sobre a tinta. São também 2 das 6
 * animações eternas que restavam. */
.hero-radial::before,
.hero-radial::after {
  display: none !important;
}

/* Selo "Recomendado" e sua sombra. Antes eram verdes, junto com a borda do
 * card — enquanto o botão de compra é tijolo. Duas cores de ênfase competindo
 * fazem o olho não saber onde é o caminho. Verde fica só no check de "sim,
 * inclui", que é semântico, não hierárquico. */
.bg-\[\#aa4515\] {
  background-color: var(--tijolo);
}
.shadow-\[0_8px_18px_-4px_rgba\(170\,69\,21\,0\.55\)\] {
  box-shadow: 0 8px 18px -4px rgb(170 69 21 / 0.55);
}

/* ───────────────────────────────────────────────── rodapé
 * Era bg-slate-900 (#0f172a), azul-acinzentado frio — o último resquício do
 * tema antigo, e ficava brigando com a tinta quente do resto da página. */
.bg-slate-900 {
  background-color: var(--tinta) !important;
}
.text-slate-300 {
  color: #c9bdb4;
}

/* ───────────────────────────────────────────────── capa do hero clicável
 * A arte traz uma barra "QUERO ACESSAR AGORA!" desenhada dentro dela. Como
 * parece botão, a imagem inteira virou link para os planos — mais honesto que
 * deixar a pessoa tocar e nada acontecer.
 *
 * Como agora é um alvo de toque, precisa parecer e responder como tal: cursor,
 * um leve avanço no hover e um anel de foco visível para quem navega por
 * teclado (o contorno padrão sumiria contra a tinta do hero). */
.hero-capa {
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-capa:hover {
  transform: translateY(-4px);
}

.hero-capa:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 4px;
}

/* O animate-float move a capa sozinho o tempo todo. Junto com o transform do
 * hover, os dois brigam pelo mesmo eixo e a imagem treme ao passar o mouse. */
.hero-capa:hover,
.hero-capa:focus-visible {
  animation: none !important;
}

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