/* ==========================================================================
   base.css — BASE GLOBAL (tokens + reset + tipografia)
   ========================================================================== */

:root{
  /* Brand */
  --cor-primaria: #0c3f8c;
  --cor-secundaria: #fcad0b;
  --cor-atencao: #ff0000;

  /* Neutros */
  --cor-branco: #ffffff;
  --cor-preto: #0b0b0d;
  --cor-cinza-texto: #4b5563;
  --cor-cinza-suave: #e5e7eb;

  /* Fundos */
  --cor-fundo-escuro: #081a3a;
  --cor-fundo-claro: #f7f7f7;

  /* Botões */
  --cor-botao: var(--cor-primaria);
  --cor-botao-hover: #08306e;

  --cor-botao-destaque: var(--cor-secundaria);
  --cor-botao-destaque-hover: #e09a07;

  /* Tipografia */
  --font-base: Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-wide: 1600px;

  /* Espaçamentos */
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-26: 26px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;

  /* Radius */
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-22: 22px;

  /* Shadows */
  --shadow-1: 0 4px 8px rgba(0,0,0,.10);
  --shadow-2: 0 8px 20px rgba(0,0,0,.18);

  /* Z-index */
  --z-topbar: 1000;
  --z-popup: 1100;

  /* ✅ ALTURA REAL APROXIMADA DA TOP-BAR FIXA
     (se ficar pequeno/grande no seu tema, ajuste aqui)
  */
  --topbar-height: 56px;

  --transition: .18s ease;
}

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

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

body{
  margin: 0;
  font-family: var(--font-base);
  color: var(--cor-preto);
  background: #fff;
  overflow-x: hidden;

  /* ✅ evita conteúdo ficar por baixo da top-bar fixa */
  padding-top: var(--topbar-height);
}

img{
  max-width: 100%;
  display: block;
}

/* Acessibilidade: foco visível */
:focus-visible{
  outline: 3px solid rgba(252,173,11,.70);
  outline-offset: 2px;
}

/* Reduz animações quando usuário pede */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Títulos (mantendo suas classes)
   ========================================================================== */
.titulo-preto h1,
.titulo-vermelho h2,
.titulo-branco h2{
  font-weight: 800;
  margin-bottom: 40px;
}

.titulo-preto h1{ font-size: 28px; color: var(--cor-preto); }
.titulo-vermelho h2{ font-size: 28px; color: var(--cor-primaria); }
.titulo-branco h2{ font-size: 20px; color: var(--cor-branco); margin-bottom: 10px; }