/* =====================================================================
   BASE.CSS — KIT ENGENHARIA VEXYON PROSPECÇÃO SITES

   O QUE ESTE ARQUIVO É:
     Reset + tokens estruturais + sistema de gradiente de fundo
     + utilitários de layout. ENGENHARIA PURA.

   O QUE ESTE ARQUIVO NÃO É:
     Paleta, tipografia específica, sombras decorativas, espaçamentos
     "bonitos", efeitos visuais por cliente. Isso vem do CONCEITO.

   REGRA: qualquer decisão estética aqui → mover para conceito.css.
   ===================================================================== */

/* =====================================================================
   1. TOKENS — PREENCHER POR CLIENTE (zero valores default "bonitos")

   Convenção de cor:
     --cor-fundo-1  = mais escuro (herói/topo) — início do gradiente
     --cor-fundo-2  = tom médio de transição
     --cor-fundo-3  = mais claro (CTA/rodapé) — fim do gradiente
     --cor-destaque = cor de acento (botões, links, ícones)
     --cor-texto    = cor principal de texto sobre fundo escuro
     --cor-texto-soft = variante com opacidade reduzida (subtítulos)

   Convenção de tipografia:
     --font-display = família de títulos/destaque (serif, display)
     --font-body    = família de corpo/UI (sans-serif legível)

   Tokens de layout:
     NÃO alterar --section-pad e --nav-h sem motivo técnico documentado.
     São resultado de 20 rodadas de calibração (ver README-KIT.md).
   ===================================================================== */
:root {
  /* PALETA — substituir pelos valores do conceito do cliente */
  --cor-fundo-1:    ; /* ex: #1a0a0a · tom mais escuro, topo da página */
  --cor-fundo-2:    ; /* ex: #2b1017 · tom médio de transição */
  --cor-fundo-3:    ; /* ex: #f0e0c0 · tom claro, CTA/rodapé */
  --cor-destaque:   ; /* ex: #D6A344 · acento: botões, links, ícones */
  --cor-texto:      ; /* ex: #F6F1F1 · texto principal s/ fundo escuro */
  --cor-texto-soft: ; /* ex: rgba(246,241,241,.72) · subtítulos */

  /* TIPOGRAFIA — substituir pela escolha do conceito */
  --font-display: serif;            /* placeholder — substituir pela fonte de título */
  --font-body:    -apple-system, sans-serif; /* placeholder — substituir pela fonte de corpo */

  /* ===================================================================
     LAYOUT — valores de engenharia, NÃO alterar por gosto estético

     --nav-h: altura da nav fixa. Usada em calc() nos paddings do hero
     para o conteúdo não ficar sob a nav.

     --section-pad: ritmo vertical único de TODAS as seções.
     Bug que este token mata: "espaçamento sem ritmo" causado por valores
     soltos (18vh aqui, 16vh ali, 8vh acolá) — cada dev sorteia um número
     diferente. Com o token único, o ritmo é consistente automaticamente.
     clamp(88px, 12vh, 168px):
       - 88px: piso em mobile pequeno (nunca cola as seções)
       - 12vh: escala proporcional ao viewport
       - 168px: teto em desktop 1440px (nunca fica "vazio demais")
     Para meia-seção: calc(var(--section-pad) * .5) — multiplica, não reinventa.
     =================================================================== */
  --nav-h:       76px;
  --section-pad: clamp(88px, 12vh, 168px);
}

/* =====================================================================
   2. RESET MINIMAL
   Margem zero, box-sizing universal, overflow-x contido.
   ===================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* scroll-behavior: auto → controlado pelo Lenis (motor.js).
     Não usar smooth aqui: conflita com Lenis e cria duplo-efeito. */
  scroll-behavior: auto;
}

img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }

/* =====================================================================
   3. BODY — GRADIENTE CONTÍNUO DE FUNDO

   PROBLEMA QUE RESOLVE: "buracos de cor chapada" entre seções.
   Quando uma seção não declara background próprio, o fundo do body
   aparece — e se o body for uma cor chapada qualquer, cria-se um
   "buraco" visualmente desconexo. O gradiente estica por toda a altura
   real do documento e garante que qualquer trecho sem fundo próprio
   mostre a franja correta do amanhecer/conceito.

   COMO PREENCHER:
   1. Definir --cor-fundo-1, --cor-fundo-2, --cor-fundo-3 no :root acima.
   2. Ajustar as paradas % conforme o conceito (topo escuro/fim claro
      é o padrão Vexyon; inverter se o conceito pedir claro→escuro).
   3. Adicionar paradas intermediárias se o conceito tiver 4+ tons.

   IMUNE a prefers-reduced-motion: não é animação, só existe como cor.
   ===================================================================== */
body {
  background: linear-gradient(180deg,
    var(--cor-fundo-1)  0%,
    var(--cor-fundo-2) 50%,
    var(--cor-fundo-3) 100%);
  color: var(--cor-texto);
  font-family: var(--font-body);
  font-size: 16px;        /* base: nunca abaixo de 16px em mobile (evita iOS auto-zoom) */
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   4. GRAIN — textura de ruído fixa

   Adiciona micro-textura que reduz o visual "digital demais" em fundos
   chapados. NÃO é estética por cliente — é padrão de qualidade do kit.
   Ajuste opacity entre .03 (quase invisível) e .08 (perceptível).
   Default: .05 (calibrado em 20 rodadas de teste visual).
   mix-blend-mode: overlay → se integra ao fundo sem sujar o texto.
   ===================================================================== */
.grain {
  position:   fixed;
  inset:      0;
  z-index:    1;
  pointer-events: none;
  opacity:    .05;
  mix-blend-mode: overlay;
  /* SVG inline de ruído fractal — sem request HTTP, sem 404 em snapshot */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   5. UTILITÁRIOS ESTRUTURAIS
   Layout e posicionamento. Zero estética.
   ===================================================================== */

/* Container padrão: max-width + padding lateral responsivo */
.container {
  max-width: 1320px;
  margin:    0 auto;
  padding-left:  clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
}

/* Seção de conteúdo: aplica ritmo vertical único via --section-pad */
.content-section {
  padding-top:    var(--section-pad);
  padding-bottom: var(--section-pad);
  padding-left:   clamp(20px, 5vw, 56px);
  padding-right:  clamp(20px, 5vw, 56px);
  max-width:  1320px;
  margin:     0 auto;
  position:   relative;
  z-index:    2;
}

/* Painel de altura total (hero, manifesto, depoimentos, CTA) */
.panel {
  height:   100svh;  /* svh: respeita a barra de endereços mobile */
  width:    100%;
  overflow: hidden;
  position: relative;
}

/* =====================================================================
   6. NAV
   Estrutura fixa de nav. Cores/tipografia: vêm do conceito.css.
   .scrolled é adicionada pelo motor.js (initNav) após threshold de scroll.
   ===================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index:  500;
  height:   var(--nav-h);
  display:  flex;
  align-items: center;
  padding:  0 clamp(20px, 5vw, 56px);
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.scrolled {
  /* Cor de fundo ao rolar: derivar de --cor-fundo-1 com opacidade no conceito.css.
     Placeholder genérico funcional enquanto o conceito não é preenchido. */
  background:      rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:      0 8px 30px -12px rgba(0,0,0,.5);
}
.nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:     100%;
  max-width: 1440px;
  margin:    0 auto;
}
.nav-links {
  display: none;
  gap:     32px;
  font-size:   .86rem;
  font-weight: 500;
}
.nav-links a { opacity: .82; transition: opacity .2s; padding: 10px 2px; }
.nav-links a:hover { opacity: 1; }
@media (min-width: 860px) { .nav-links { display: flex; } }

/* CTA da nav: estilo base — cores vêm do conceito */
.nav-cta {
  display:       flex;
  align-items:   center;
  padding:       11px 20px;
  border-radius: 100px;
  font-size:     .82rem;
  font-weight:   700;
  min-height:    44px; /* touch target mínimo (Apple HIG) */
  background:    var(--cor-destaque);
  color:         var(--cor-fundo-1);
}

/* =====================================================================
   7. BOTÕES — estrutura base
   Estética (cor, sombra, hover) → conceito.css
   ===================================================================== */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:         10px;
  padding:     16px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size:   .98rem;
  min-height:  52px;  /* touch target com folga */
  cursor:      pointer;
  border:      none;
  transition:  box-shadow .3s, transform .2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--cor-destaque);
  color:      var(--cor-fundo-1);
}

/* =====================================================================
   8. FOCO ACESSÍVEL
   Visível em teclado. Cor derivada de --cor-destaque (automático).
   ===================================================================== */
:focus-visible {
  outline:        2px solid var(--cor-destaque);
  outline-offset: 3px;
  border-radius:  4px;
}

/* =====================================================================
   9. REDUCED-MOTION — estado final direto para TUDO

   PROBLEMA QUE RESOLVE: texto invisível em dispositivos com
   prefers-reduced-motion=reduce onde as animações GSAP seriam desativadas
   mas o estado inicial (opacity:0) já havia sido aplicado.
   Esta regra força o estado final visual independente de JS.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       .001ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      .001ms !important;
  }
}