@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-800-normal.woff2") format("woff2");
}

/* =========================================================
   DESIGN SYSTEM — lucianosilva.com.br
   Cada cor mora só aqui. O resto do CSS usa apenas var(--nome).
   ========================================================= */

:root {
  /* Paleta de marca (fixa, vem da logo) */
  --cor-azul-noite: #061226;
  --cor-azul-marinho: #0A1A33;
  --cor-azul-eletrico: #0878E8;
  --cor-ciano: #00D4FF;
  --cor-ciano-claro: #83E9FF;
  --cor-laranja: #FE6502; /* laranja da logo */
  --cor-gelo: #E6FAFF;
  --cor-prata: #DDE6F0;
  --cor-branco: #FFFFFF;

  /* Tema claro (padrão) — paleta própria */
  --cor-fundo: #FFFFFF;
  --cor-fundo-suave: #F3F6FA;
  --cor-superficie: #FFFFFF;
  --cor-texto: #1B2A3F;
  --cor-texto-suave: #5A6B82;
  --cor-destaque-texto: #0766C9;
  --cor-borda: #E2E8F0;

  /* Transparências (uma de cada) */
  --veu-escuro: rgba(6, 18, 38, .7);
  --sombra-card: 0 10px 30px rgba(10, 26, 51, .08);
  --sombra-brilho: 0 0 18px rgba(0, 212, 255, .35);
  --sombra-faixa: 0 12px 28px rgba(6, 18, 38, .5);

  /* Tipografia */
  --fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Montserrat", "Segoe UI", Arial, sans-serif;
  --escala-fonte: 1;

  /* Raios */
  --raio-imagem: 10px;
  --raio-card: 12px;
  --raio-botao: 999px;

  /* Espaçamentos (respiro) */
  --espaco-xs: 8px;
  --espaco-sm: 12px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 32px;
  --espaco-xxl: 48px;
  --espaco-secao: 88px;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-altura: 116px;
  --transicao: .25s ease;
}

/* Tema escuro — paleta própria, definida só pelo Claude (nunca editável pelo cliente) */
[data-tema="escuro"] {
  --cor-fundo: #050D1A;
  --cor-fundo-suave: #0B1A30;
  --cor-superficie: #0E2038;
  --cor-texto: #E6EEF7;
  --cor-texto-suave: #9FB0C6;
  --cor-destaque-texto: #00D4FF;
  --cor-borda: #1A2E4A;
}

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

html { scroll-behavior: smooth; font-size: calc(100% * var(--escala-fonte)); }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cor-ciano);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  margin: 0 0 var(--espaco-md);
}

.site-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao), color var(--transicao);
}

.btn:hover { transform: translateY(-1px); }

/* Começar / iniciar: azul-claro da logo */
.btn-ciano {
  background: var(--cor-ciano);
  color: var(--cor-azul-marinho);
  box-shadow: var(--sombra-brilho);
}

/* Contato sobre fundo escuro */
.btn-contorno {
  background: transparent;
  border-color: var(--cor-ciano);
  color: var(--cor-branco);
}

.btn-contorno:hover {
  background: var(--cor-ciano);
  color: var(--cor-azul-marinho);
}

/* Ícones de linha (SVG) */
.icone {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Contorno sobre fundo escuro (secundário) */
.btn-contorno-claro {
  background: transparent;
  border-color: var(--cor-ciano);
  color: var(--cor-branco);
}

.btn-contorno-claro:hover {
  background: var(--cor-ciano);
  color: var(--cor-azul-marinho);
}

/* Contorno sobre fundo claro (secundário) */
.btn-contorno-escuro {
  background: transparent;
  border-color: var(--cor-azul-marinho);
  color: var(--cor-azul-marinho);
}

.btn-contorno-escuro:hover {
  background: var(--cor-azul-marinho);
  color: var(--cor-branco);
}