/* =========================================================================
   CACIOLA CONSULTORIA - BASE.CSS
   =========================================================================
   Arquivo: base.css
   Conteúdo: Reset, variáveis, tipografia, layout básico
   Projeto: caciola.com.br
   Resolução alvo: 1366x768
   
   ÍNDICE DESTE ARQUIVO:
   1. FONTES
   2. VARIÁVEIS CSS
   3. RESET
   4. TIPOGRAFIA
   5. LAYOUT (container, main)
   6. HEADER E NAVEGAÇÃO
   7. FOOTER
   ========================================================================= */


/* =========================================================================
   1. FONTES
   ========================================================================= */
/* Plus Jakarta Sans: fonte principal do site (pesos 400-800) */
/* JetBrains Mono: fonte monospace para código e captcha (pesos 400-500) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');


/* =========================================================================
   2. VARIÁVEIS CSS
   =========================================================================
   IMPORTANTE: Altere aqui para mudar cores em TODO o site
   ========================================================================= */
:root {
  /* --- CORES PRIMÁRIAS (azul principal) --- */
  --primary: #3b82f6;               /* Azul principal - botões, links, destaques */
  --primary-rgb: 59, 130, 246;      /* Mesmo azul em RGB para usar com rgba() */
  --primary-dark: #2563eb;          /* Azul escuro - hover de botões */
  --primary-light: #60a5fa;         /* Azul claro - gradientes */
  --primary-subtle: rgba(59, 130, 246, 0.08); /* Azul super leve - backgrounds */
  
  /* --- COR ACCENT (ciano/turquesa) --- */
  --accent: #06b6d4;                /* Ciano - gradientes e destaques secundários */
  --accent-rgb: 6, 182, 212;        /* Mesmo ciano em RGB */
  
  /* --- BACKGROUNDS ESCUROS (header, footer, hero) --- */
  --bg-void: #030712;               /* Preto profundo - header e footer */
  --bg-deep: #0a0f1a;               /* Azul muito escuro - hero sections */
  --bg-surface: #111827;            /* Cinza escuro - CTA section */
  --bg-elevated: #1f2937;           /* Cinza médio escuro - hover de menu */
  --bg-card: rgba(17, 24, 39, 0.8); /* Card transparente escuro (não usado) */
  --bg-card-hover: rgba(31, 41, 55, 0.9); /* Card hover escuro (não usado) */
  
  /* --- BACKGROUNDS CLAROS (seções de conteúdo) --- */
  --bg-light: #f8fafc;              /* Cinza muito claro - fundo das seções */
  --bg-white: #ffffff;              /* Branco puro - cards e formulários */
  
  /* --- CORES DE TEXTO --- */
  --text-primary: #f9fafb;          /* Branco - texto em fundo escuro */
  --text-secondary: #d1d5db;        /* Cinza claro - texto secundário escuro */
  --text-muted: #9ca3af;            /* Cinza médio - texto discreto */
  --text-subtle: #6b7280;           /* Cinza - texto muito discreto */
  --text-dark: #111827;             /* Preto - texto em fundo claro */
  --text-dark-secondary: #4b5563;   /* Cinza escuro - texto secundário claro */
  
  /* --- BORDAS --- */
  --border-subtle: rgba(255, 255, 255, 0.06);  /* Borda quase invisível escura */
  --border-default: rgba(255, 255, 255, 0.1);  /* Borda padrão escura */
  --border-hover: rgba(255, 255, 255, 0.15);   /* Borda hover escura */
  --border-light: #e5e7eb;          /* Borda cinza clara */
  --border-light-subtle: #f3f4f6;   /* Borda muito clara */
  
  /* --- CORES DE ESTADO --- */
  --success: #10b981;               /* Verde - sucesso */
  --success-bg: rgba(16, 185, 129, 0.1); /* Verde transparente */
  --error: #ef4444;                 /* Vermelho - erro */
  --error-bg: rgba(239, 68, 68, 0.1); /* Vermelho transparente */
  --warning: #f59e0b;               /* Laranja - aviso (não usado) */
  
  /* --- SOMBRAS --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);   /* Sombra pequena */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);  /* Sombra média */
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); /* Sombra grande */
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6); /* Sombra extra grande */
  --shadow-glow: 0 0 40px rgba(var(--primary-rgb), 0.15); /* Brilho azul */
  
  /* --- TRANSIÇÕES --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* Ease out suave */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* Ease in-out (não usado) */
  --duration-fast: 150ms;           /* Transição rápida */
  --duration-normal: 300ms;         /* Transição normal */
  --duration-slow: 500ms;           /* Transição lenta (não usado) */
  
  /* --- ESPAÇAMENTOS --- */
  --space-xs: 4px;                  /* Extra pequeno */
  --space-sm: 8px;                  /* Pequeno */
  --space-md: 16px;                 /* Médio */
  --space-lg: 24px;                 /* Grande */
  --space-xl: 32px;                 /* Extra grande */
  --space-2xl: 48px;                /* 2x extra grande */
  --space-3xl: 64px;                /* 3x extra grande */
  --space-4xl: 96px;                /* 4x extra grande */
  
  /* --- BORDER RADIUS --- */
  --radius-sm: 6px;                 /* Arredondamento pequeno */
  --radius-md: 10px;                /* Arredondamento médio */
  --radius-lg: 16px;                /* Arredondamento grande */
  --radius-xl: 24px;                /* Arredondamento extra grande */
  --radius-full: 9999px;            /* Círculo/pílula */
}


/* =========================================================================
   3. RESET
   =========================================================================
   Remove estilos padrão do navegador para consistência
   ========================================================================= */

/* Box-sizing e reset de margens */
*, *::before, *::after {
  box-sizing: border-box;           /* Inclui padding e border no width/height */
  margin: 0;                        /* Remove margem padrão */
  padding: 0;                       /* Remove padding padrão */
}

/* HTML - configurações base */
html {
  height: 100%;                     /* Altura total da viewport */
  scroll-behavior: smooth;          /* Scroll suave ao clicar em âncoras */
  -webkit-font-smoothing: antialiased;      /* Suaviza fontes no Chrome/Safari */
  -moz-osx-font-smoothing: grayscale;       /* Suaviza fontes no Firefox Mac */
}

/* Body - layout flexbox para footer sempre embaixo */
body {
  height: 100%;                     /* Altura total */
  display: flex;                    /* Flexbox para footer fixo */
  flex-direction: column;           /* Coluna: header, main, footer */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;                  /* Tamanho base (1rem = 16px) */
  line-height: 1.6;                 /* Altura de linha confortável para leitura */
  color: var(--text-dark);          /* Cor de texto padrão (preto) */
  background: var(--bg-light);      /* Fundo cinza claro */
}

/* Imagens - responsivas por padrão */
img {
  max-width: 100%;                  /* Nunca ultrapassa o container */
  height: auto;                     /* Mantém proporção */
  display: block;                   /* Remove espaço fantasma abaixo da imagem */
}

/* Listas - remove bullets */
ul, ol {
  list-style: none;                 /* Remove bullets e números */
}

/* Botões - reset para estilizar do zero */
button {
  font-family: inherit;             /* Usa mesma fonte do site */
  cursor: pointer;                  /* Cursor de mãozinha */
  border: none;                     /* Remove borda padrão */
  background: none;                 /* Remove fundo padrão */
}


/* =========================================================================
   4. TIPOGRAFIA
   ========================================================================= */

/* Todos os títulos - configuração base */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;                 /* Negrito */
  line-height: 1.2;                 /* Altura de linha compacta */
  letter-spacing: -0.02em;          /* Letras levemente mais próximas */
}

/* H1 - Título principal das páginas */
h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem); /* Min 36px, ideal 5vw, max 56px */
  font-weight: 800;                 /* Extra negrito */
  letter-spacing: -0.03em;          /* Letras ainda mais próximas */
}

/* H2 - Subtítulos e títulos de seção */
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); /* Min 24px, ideal 3vw, max 32px */
}

/* H3 - Títulos menores (cards, CTA) */
h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem); /* Min 18px, ideal 2vw, max 22px */
}

/* Parágrafos */
p {
  margin-bottom: var(--space-md);   /* 16px de espaço abaixo de cada parágrafo */
}

/* Links - estilo base */
a {
  text-decoration: none;            /* Remove sublinhado */
  color: inherit;                   /* Herda cor do elemento pai */
  transition: color var(--duration-fast) var(--ease-out); /* Transição suave de cor */
}


/* =========================================================================
   5. LAYOUT
   ========================================================================= */

/* Container - centraliza e limita largura do conteúdo */
.container {
  width: 100%;                      /* Largura total disponível */
  max-width: 1280px;                /* Máximo 1280px de largura */
  margin: 0 auto;                   /* Centraliza horizontalmente */
  padding: 0 var(--space-lg);       /* 24px de padding lateral */
}

/* Main - área principal do conteúdo */
main {
  flex: 1 0 auto;                   /* Cresce para preencher, empurra footer para baixo */
}


/* =========================================================================
   6. HEADER E NAVEGAÇÃO
   =========================================================================
   Header escuro fixo no topo com navegação
   ========================================================================= */

/* Header principal */
header {
  background: var(--bg-void);       /* Fundo preto profundo */
  position: sticky;                 /* Fica fixo ao scrollar */
  top: 0;                           /* Cola no topo da tela */
  z-index: 1000;                    /* Fica acima de todo conteúdo */
  border-bottom: 1px solid var(--border-subtle); /* Linha sutil embaixo */
}

/* Linha gradiente decorativa no topo do header */
header::before {
  content: '';                      /* Pseudo-elemento */
  position: absolute;               /* Posicionamento absoluto */
  top: 0;                           /* No topo */
  left: 0;                          /* Da esquerda */
  right: 0;                         /* Até a direita */
  height: 2px;                      /* 2px de altura */
  background: linear-gradient(
    90deg,                          /* Gradiente horizontal */
    transparent,                    /* Começa transparente */
    var(--primary) 20%,             /* Azul em 20% */
    var(--accent) 50%,              /* Ciano no meio */
    var(--primary) 80%,             /* Azul em 80% */
    transparent                     /* Termina transparente */
  );
  opacity: 0.8;                     /* Levemente transparente */
}

/* Container da navegação */
.nav {
  display: flex;                    /* Flexbox */
  align-items: center;              /* Centraliza verticalmente */
  justify-content: space-between;   /* Logo à esquerda, menu à direita */
  height: 88px;                     /* Altura fixa do header */
  gap: var(--space-xl);             /* 32px de espaço entre logo e menu */
}

/* Logo - container */
.logo {
  display: flex;                    /* Flexbox para centralizar imagem */
  align-items: center;              /* Centraliza verticalmente */
  position: relative;               /* Para possíveis efeitos */
  transition: transform var(--duration-normal) var(--ease-out); /* Animação suave */
}

/* Logo - hover */
.logo:hover {
  transform: scale(1.02);           /* Leve aumento (2%) no hover */
}

/* Logo - imagem */
.logo img {
  height: 48px;                     /* Altura fixa da logo */
  width: auto;                      /* Largura automática mantém proporção */
}

/* Menu de navegação - container */
.menu {
  display: flex;                    /* Flexbox horizontal */
  align-items: center;              /* Centraliza verticalmente */
  gap: var(--space-sm);             /* 8px de espaço entre itens */
}

/* Menu - links */
.menu li a {
  display: block;                   /* Block para padding funcionar */
  padding: var(--space-sm) var(--space-md); /* 8px vertical, 16px horizontal */
  font-size: 0.9375rem;             /* 15px */
  font-weight: 500;                 /* Peso médio */
  color: var(--text-muted);         /* Cinza médio */
  border-radius: var(--radius-md);  /* Bordas arredondadas */
  transition: all var(--duration-fast) var(--ease-out); /* Transição suave */
  position: relative;               /* Para linha animada */
}

/* Menu - linha animada abaixo do link */
.menu li a::after {
  content: '';                      /* Pseudo-elemento */
  position: absolute;               /* Posicionamento absoluto */
  bottom: 4px;                      /* 4px acima da base */
  left: 50%;                        /* Começa no centro */
  width: 0;                         /* Largura 0 (escondida) */
  height: 2px;                      /* 2px de altura */
  background: var(--primary);       /* Cor azul */
  transform: translateX(-50%);      /* Centraliza horizontalmente */
  transition: width var(--duration-normal) var(--ease-out); /* Animação de largura */
}

/* Menu - hover do link */
.menu li a:hover {
  color: var(--text-primary);       /* Texto branco */
  background: var(--bg-elevated);   /* Fundo cinza escuro */
}

/* Menu - expande linha no hover e quando ativo */
.menu li a:hover::after,
.menu li a.active::after {
  width: calc(100% - var(--space-lg)); /* Linha quase da largura total */
}

/* Menu - link ativo (página atual) */
.menu li a.active {
  color: var(--text-primary);       /* Texto branco */
}


/* =========================================================================
   7. FOOTER
   ========================================================================= */

/* Footer principal */
footer {
  flex-shrink: 0;                   /* Não encolhe no flexbox */
  background: var(--bg-void);       /* Fundo preto profundo */
  border-top: 1px solid var(--border-subtle); /* Linha sutil em cima */
  padding: 6px 0;                   /* COMPACTO: 6px vertical para 1366x768 */
}

/* Footer - container interno */
.footer-inner {
  display: flex;                    /* Flexbox */
  flex-direction: column;           /* Empilha verticalmente */
  align-items: center;              /* Centraliza horizontalmente */
  gap: 8px;                         /* 8px entre logo e texto */
}

/* Footer - logo */
.footer-logo img {
  height: 28px;                     /* Logo menor que no header */
  width: auto;                      /* Mantém proporção */
  opacity: 0.8;                     /* Levemente transparente */
}

/* Footer - texto de copyright */
.footer-copy {
  font-size: 0.75rem;               /* 12px */
  color: var(--text-subtle);        /* Cinza discreto */
  text-align: center;               /* Centralizado */
  margin: 0;                        /* Remove margem padrão do p */
}


/* =========================================================================
   FIM DO ARQUIVO BASE.CSS
   ========================================================================= */