/* ==========================================================================
   JJACTIVOS — 00-BASE.CSS
   --------------------------------------------------------------------------
   Camada base do design system:
   - Variáveis (tokens) de cor, tipografia, espaçamento e movimento
   - Reset moderno
   - Estilos globais de tipografia e elementos HTML

   Fonte de verdade: "JJActivos — Especificação Mestre Website v1"
   Paleta e escala tipográfica conforme secção 4 (Design system) da spec.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTE INTER (alojada localmente)
   Servida a partir de assets/fonts em vez do Google Fonts, para que o
   endereço IP dos visitantes não seja transmitido à Google sem
   consentimento (RGPD). Fonte variável: cobre os pesos 400–800.
   Licença: assets/fonts/LICENSE-Inter-OFL.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS / VARIÁVEIS GLOBAIS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Cores institucionais (secção 4 — Paleta de trabalho) ---- */
  --color-deep-navy: #071B35;      /* fundo escuro: cobertura, confiança, CTAs, footer */
  --color-navy: #0B2444;           /* variação de navy para gradientes */
  --color-blue: #007FC3;           /* JJActivos Blue — estrutura */
  --color-cyan: #00BFE7;           /* Cyan — energia, detalhe, acento */
  --color-light-bg: #F4F8FA;       /* fundo claro alternado */
  --color-body: #182A3A;           /* texto corrente (charcoal-navy) */
  --color-white: #FFFFFF;

  /* ---- Cores derivadas / utilitárias ---- */
  --color-blue-soft: #E8F3FA;      /* fundo suave azul (cards, ícones) */
  --color-cyan-soft: #E0F7FC;      /* fundo suave ciano */
  --color-border: #E2EAF0;         /* borda subtil de cards */
  --color-border-strong: #CDD9E4;
  --color-muted: #5A6B7B;          /* texto secundário / legendas */
  --color-muted-on-dark: #A9C2DA;  /* texto secundário sobre navy */
  --color-navy-line: rgba(255, 255, 255, 0.12); /* separadores sobre navy */

  /* ---- Gradientes de marca (usados nas máscaras geométricas) ---- */
  --gradient-brand: linear-gradient(135deg, #007FC3 0%, #00BFE7 100%);
  --gradient-brand-deep: linear-gradient(135deg, #071B35 0%, #0B3B63 60%, #007FC3 100%);
  --gradient-navy: linear-gradient(160deg, #071B35 0%, #0A2A50 100%);
  --gradient-photo-placeholder: linear-gradient(135deg, #0B3B63 0%, #1E6FA8 45%, #4FA8D8 100%);

  /* ---- Tipografia (secção 4 — Tipografia) ---- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Escala tipográfica desktop indicativa da spec:
     H1 64–76 / H2 44–52 / H3 26–32 / body 17–19 / small 14–15
     Usamos clamp() para fluidez entre mobile e desktop. */
  --fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);   /* ~40 → 72px */
  --fs-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);     /* ~30 → 48px */
  --fs-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);  /* ~22 → 30px */
  --fs-h4: 1.15rem;                                  /* ~18px */
  --fs-body: 1.0625rem;                              /* ~17px */
  --fs-body-lg: 1.1875rem;                           /* ~19px */
  --fs-small: 0.875rem;                              /* ~14px */
  --fs-eyebrow: 0.8125rem;                           /* ~13px sobretítulos */

  --lh-tight: 1.08;   /* títulos */
  --lh-snug: 1.3;
  --lh-normal: 1.6;   /* corpo */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Espaçamento (escala base 8px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 1200px;   /* largura máxima de conteúdo */
  --container-wide: 1360px;  /* largura máxima para heros/bandas largas */
  --gutter: clamp(1.25rem, 4vw, 2.5rem); /* margem lateral responsiva */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Sombra (spec: "pouca sombra, border subtil") ---- */
  --shadow-card: 0 2px 4px rgba(7, 27, 53, 0.04), 0 8px 24px rgba(7, 27, 53, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(7, 27, 53, 0.06), 0 16px 40px rgba(7, 27, 53, 0.10);
  --shadow-header: 0 1px 0 rgba(7, 27, 53, 0.06), 0 4px 20px rgba(7, 27, 53, 0.05);

  /* ---- Movimento (secção 4 — Movimento; subtil, curto) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 480ms;

  /* ---- Header ---- */
  --header-h: 84px;          /* altura do header em repouso */
  --header-h-scrolled: 66px; /* altura compacta após scroll */
}

/* --------------------------------------------------------------------------
   2. RESET MODERNO
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

/* Respeitar preferência de movimento reduzido (spec 4 + 23) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA GLOBAL
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-deep-navy);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { line-height: var(--lh-normal); }

strong { font-weight: var(--fw-semibold); }

/* Acento ciano em títulos (a segunda linha dos heros usa esta classe) */
.text-cyan { color: var(--color-cyan); }
.text-blue { color: var(--color-blue); }
.text-white { color: var(--color-white); }

/* --------------------------------------------------------------------------
   4. ACESSIBILIDADE
   -------------------------------------------------------------------------- */
/* Estado de foco visível e consistente (spec 23) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Link "saltar para conteúdo" para navegação por teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-deep-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) 0;
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; }

/* Conteúdo apenas para leitores de ecrã */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}