/* ═══════════════════════════════════════════════════════════════════════
   base.css — fonte única de verdade da identidade visual
   Projeto: pequenosgrandescerebros.com.br
   Versão: v5.4 (2026-08-02)

   POR QUE ESTE ARQUIVO EXISTE
   Até a v5.3 a paleta e as @font-face viviam duplicadas dentro de cada HTML.
   Com o crescimento previsto (5 páginas internas + páginas de profissionais),
   toda correção de cor exigiria N edições idênticas — e uma seria esquecida.
   Aqui a regra existe UMA vez. O CSS específico de cada página continua
   inline no próprio HTML; só o que é compartilhado mora aqui.

   REGRA DE OURO
   Contraste NÃO se herda de uma variável. #E05D06 é aprovado sobre creme
   como título grande e reprovado como rótulo de 11px no mesmo fundo.
   O que vale é o PAR cor/fundo/tamanho. Todos os números abaixo foram
   medidos (fórmula WCAG 2.1 de luminância relativa), não estimados.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. PALETA — os hexadecimais da marca, inalterados desde a v5.1 ────── */

:root {
  /* Primária escura — petróleo.
     Uso: fundos de seção, texto sobre fundo claro, rótulos pequenos.
     Medido: 6.64:1 sobre --creme · 5.21:1 sobre --areia-l  → AA em qualquer tamanho. */
  --azul:       #0C6170;
  --azul-m:     #0E7383;   /* hover de superfície escura */
  --azul-l:     #B8D8DC;   /* decorativo — NUNCA texto */

  /* Acento sobre fundo escuro — turquesa.
     Medido: 3.09:1 sobre --azul. NÃO é texto pequeno. Serve para bordas,
     linhas, ícones decorativos e texto grande (>=24px). */
  --terra:      #37BEB0;
  --terra-l:    #6FD4C8;   /* 4.03:1 sobre --azul — ainda insuficiente p/ 11px */
  --terra-xl:   #8FE0D6;   /* 4.66:1 sobre --azul — ESTE é o de texto pequeno
                              sobre petróleo. Único tom acrescentado na v5.4;
                              é uma clarificação do turquesa da marca, não
                              uma cor nova na paleta. */

  /* Acento de ação — terracota.
     Medido: 3.42:1 sobre --creme  → aprovado SÓ como texto grande (>=24px).
             2.69:1 sobre --areia-l → decorativo apenas, reprova em todo tamanho.
             3.66:1 com branco por cima → aprovado só a partir de 18.66px bold.
     Portanto: títulos grandes, bordas e preenchimento de botão. Nunca rótulo. */
  --laranja:    #E05D06;
  --laranja-l:  #F07A2A;   /* hover — decorativo */
  --laranja-d:  #B84B04;   /* SOMBRA do mesmo terracota. Medido: 5.19:1 com
                              branco por cima (aprova painel grande de fundo
                              com texto normal) e 4.86:1 como texto sobre creme
                              (aprova rotulo pequeno). Usar sempre que o
                              terracota precisar carregar texto de leitura.
                              Segundo e ultimo tom acrescentado na v5.4 —
                              como o --terra-xl, e clarificacao/escurecimento
                              de uma cor que ja existe, nao cor nova. */

  /* Neutro quente — areia */
  --areia:      #D2B48C;   /* linhas, divisores. Como texto sobre petróleo mede
                              apenas 3.60:1 — não usar em rótulo pequeno. */
  --areia-l:    #EBDBC0;   /* fundo de seção · como texto sobre petróleo: 5.21:1 */
  --areia-txt:  #F0E4D0;   /* 5.65:1 sobre --azul — rótulo pequeno em fundo escuro */

  /* Azul royal — legado. Não utilizado na v5.4.
     Reprova sobre petróleo (1.45:1). Mantido só para não quebrar referências. */
  --royal:      #1531A9;

  /* Fundo e texto */
  --creme:      #FAF7F2;
  --branco:     #FFFFFF;
  --texto:      #1A1A1A;   /* 16.29:1 sobre creme */
  --texto-s:    #5A5A5A;   /* 6.45:1 sobre creme — secundário, seguro */

  /* ── Texto sobre fundo escuro (petróleo ou #1A1A1A) ──────────────────
     Branco com opacidade é armadilha: cada alpha é um contraste diferente.
     Sobre --azul o piso medido para 4.5:1 é alpha 0.72. Abaixo disso REPROVA.
     Use estes tokens em vez de escrever rgba() solto. */
  --on-dark:    rgba(255,255,255,0.95);  /* 6.58:1 — texto principal */
  --on-dark-2:  rgba(255,255,255,0.82);  /* 5.36:1 — secundário */
  --on-dark-3:  rgba(255,255,255,0.74);  /* 4.68:1 — mínimo AA. Não desça mais. */

  /* Verde do WhatsApp — cor de terceiro, fora da paleta.
     O #25D366 oficial mede 1.98:1 com branco por cima: reprova até como
     texto grande. Escurecido para 3.57:1, que aprova botão >=18.66px bold
     e o ícone (contraste de não-texto, piso 3:1), preservando a leitura
     de "verde do WhatsApp". */
  --wpp:        #189C47;
  --wpp-d:      #12833B;   /* hover */

  /* Métricas compartilhadas */
  --nav-h:      74px;
  --maxw:       1240px;
}


/* ── 2. FONTES — self-hosted (LGPD: zero conexão com Google) ───────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/dm-sans-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/dm-sans-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/dm-sans-v15-latin-500.woff2') format('woff2');
}


/* ── 3. RESET E BASE ───────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--creme);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }


/* ── 4. ACESSIBILIDADE — base compartilhada ────────────────────────────── */

/* Foco visível em TUDO que recebe foco. 3px é o mínimo confortável.
   Dois tons porque o mesmo outline precisa aparecer nos dois fundos. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark summary:focus-visible {
  outline-color: var(--terra-xl);
}

/* Salto para o conteúdo — primeiro tabstop da página. */
.skip-link {
  position: absolute; top: -60px; left: 0;
  background: var(--azul); color: #fff;
  padding: 12px 20px; text-decoration: none;
  font-size: 14px; font-weight: 500;
  z-index: 10000; border-radius: 0 0 4px 0;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* Alvo do skip-link não deve ganhar contorno ao receber foco programático. */
main:focus { outline: none; }

/* Conteúdo só para leitor de tela (h1 semântico, rótulos de contexto). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Respeita quem pediu menos movimento — inclui o scroll suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── 5. UTILITÁRIOS DE COR — aplicam a regra de uso, não a cor solta ───── */

/* Rótulo pequeno em caixa alta (o antigo .tag).
   Sobre fundo CLARO usa petróleo (6.64:1) — o terracota reprovava a 3.42:1.
   A hierarquia de cor se mantém porque o terracota continua nos títulos. */
.u-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--azul);
  border-bottom: 2px solid var(--laranja);   /* o acento vira borda, não texto */
  padding-bottom: 4px; margin-bottom: 20px;
}
/* Mesmo rótulo sobre fundo ESCURO. */
.on-dark .u-eyebrow {
  color: var(--areia-txt);
  border-bottom-color: var(--terra);
}

/* Ênfase em título. Só vale porque títulos são >=24px (texto grande, piso 3:1).
   Sobre areia-l o terracota cai para 2.69:1 e reprova até em título — por isso
   a variante .u-em-dark existe e é obrigatória em seções de fundo areia. */
.u-em      { font-style: italic; color: var(--laranja); }
.u-em-dark { font-style: italic; color: var(--azul); }

/* Texto sobre fundo escuro — sempre por token, nunca rgba() literal. */
.on-dark            { color: var(--on-dark); }
.on-dark .u-muted   { color: var(--on-dark-2); }
.on-dark .u-muted-2 { color: var(--on-dark-3); }


/* ── 6. BOTÕES ─────────────────────────────────────────────────────────── */

/* CTA primário. O tamanho aqui NÃO é decoração: branco sobre --laranja mede
   3.66:1, que só é aprovado a partir de 18.66px em peso 700 (regra de texto
   grande do WCAG). Reduzir a fonte ou o peso reprova o botão. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 4px;
  text-decoration: none; letter-spacing: 0.3px;
  border: none; cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--laranja);
  color: #fff;
  font-size: 19px;      /* >= 18.66px — não reduzir */
  font-weight: 700;     /* bold obrigatório para a regra de texto grande */
  line-height: 1.2;
}
.btn-primary:hover { background: var(--laranja-l); transform: translateY(-1px); }

/* Secundário sobre fundo escuro. */
.btn-ghost {
  border: 1.5px solid rgba(255,255,255,0.45);
  color: var(--on-dark);
  font-size: 15px; font-weight: 400;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* WhatsApp. Verde escurecido para o par com branco funcionar. */
.btn-wpp {
  background: var(--wpp); color: #fff;
  font-size: 19px; font-weight: 700; border-radius: 6px;
}
.btn-wpp:hover { background: var(--wpp-d); transform: translateY(-2px); }


/* ── 7. ANIMAÇÃO DE ENTRADA ────────────────────────────────────────────── */

.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Sem JS o conteúdo precisa aparecer mesmo assim. */
.no-js .fade-up { opacity: 1; transform: none; }