/* =====================================================================
   Proativa — Design Tokens
   Fonte única de verdade para cor, tipografia e espaçamento.
   Regra de ouro: nenhum valor de cor/fonte/spacing hardcoded fora daqui.
   ===================================================================== */

:root {
  /* ---------- Marca ---------- */
  --azul:        #0B3A82;  /* azul institucional */
  --azul-escuro: #082C63;  /* footer, faixa CTA, hover de navy */
  --azul-050:    #EEF3FB;  /* fundo claro: header de página / faixa do hero */
  --azul-100:    #DCE7F6;  /* bordas e tints sutis */

  --cta:        #22C55E;   /* VERDE DE AÇÃO — exclusivo p/ botões/WhatsApp */
  --cta-hover:  #16A34A;

  /* ---------- Texto e superfícies ---------- */
  --ink:       #0E1B33;    /* texto principal */
  --ink-soft:  #51607A;    /* texto secundário, legendas, eyebrow */
  --bg:        #FFFFFF;
  --surface:   #F6F8FC;    /* fundo de seção alternada */
  --line:      #E2E8F2;    /* bordas neutras */

  /* ---------- Estados de feedback ----------
     Erro usa --danger; sucesso reusa --cta (não existe --success).
     Só em mensagem de formulário/validação — nunca como cor decorativa. */
  --danger:    #DC2626;    /* borda e texto de mensagem de erro */
  --danger-bg: #FEF2F2;    /* fundo da mensagem de erro */

  /* ---------- Cores das áreas (wayfinding) ----------
     USO: borda (topo/esquerda), ícone, hover, indicador.
     NUNCA: fundo grande, texto sobre branco, duas áreas na mesma peça. */
  --area-ingles:      #E8722B;  /* laranja  */
  --area-comunicacao: #0FA3A3;  /* turquesa */
  --area-oratoria:    #E0A100;  /* âmbar (amarelo usável) */
  --area-imersoes:    #0E8F5E;  /* verde — distinto do --cta de propósito */

  /* ---------- Tipografia ---------- */
  --font-display: "Bricolage Grotesque", "Sora", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.4rem, 1.4rem + 3.2vw, 3.8rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2vw, 2.9rem);
  --fs-h2:      clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-body:  1.65;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   800;
  --tracking-eyebrow: 0.12em;

  /* ---------- Espaçamento (escala única — nada fora disso) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---------- Raio, sombra, layout ---------- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(14,27,51,.04), 0 8px 24px rgba(14,27,51,.06);
  --container: 1160px;
  --measure:   68ch;                      /* largura de leitura de artigo */
  --section-y: clamp(48px, 8vw, 96px);    /* respiro vertical de seção */
}

/* =====================================================================
   Base
   ===================================================================== */
body {
  font: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-text);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--azul);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); font-weight: var(--w-black); }
h2 { font-size: var(--fs-h2); font-weight: var(--w-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); }
p  { margin: 0 0 var(--space-4); max-width: var(--measure); }

/* =====================================================================
   Primitivos (os 3 blocos que todo o site reusa)
   ===================================================================== */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section   { padding-block: var(--section-y); }
.section--alt { background: var(--surface); }

.eyebrow {
  font: var(--w-bold) var(--fs-eyebrow)/1 var(--font-text);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* Botão */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--w-bold) 1rem/1 var(--font-text);
  padding: 14px 22px; border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn--cta   { background: var(--cta); color: #fff; }
.btn--cta:hover { background: var(--cta-hover); }
.btn--ghost { background: transparent; color: var(--azul); border-color: var(--azul-100); }
.btn--ghost:hover { border-color: var(--azul); background: var(--azul-050); }

/* Card */
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* =====================================================================
   Sistema de áreas — aplique .area--X no card/elemento da área.
   A cor entra via --area; o resto do site não precisa saber qual é.
   ===================================================================== */
.area--ingles      { --area: var(--area-ingles); }
.area--comunicacao { --area: var(--area-comunicacao); }
.area--oratoria    { --area: var(--area-oratoria); }
.area--imersoes    { --area: var(--area-imersoes); }

.card--area { border-top: 4px solid var(--area); }
.card--area .card__icon { color: var(--area); }
.card--area:hover { border-color: var(--area); }