/* ==========================================================================
   INOVAIZE — Base: reset, tipografia, layout, fundo, acessibilidade
   Estrategia de animacao = progressive enhancement.
   Por padrao TUDO e visivel. O JS (main.js) so esconde elementos [data-anim]
   DEPOIS de confirmar que o GSAP carregou. Se o CDN falhar, o conteudo
   permanece visivel e legivel.
   ========================================================================== */

/* ---------- Fonte da marca: Arista Pro (fonte da LOGO) ----------
   Fonte comercial, NAO incluida no projeto. Coloque os arquivos .woff2 em
   assets/fonts/ com estes nomes para ativar. Enquanto nao existirem, o
   navegador cai automaticamente para "Sora" (fallback em --font-brand). */
@font-face {
  font-family: "Arista Pro";
  src: url("../fonts/AristaPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arista Pro";
  src: url("../fonts/AristaPro-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arista Pro";
  src: url("../fonts/AristaPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* trava qualquer scroll horizontal acidental */
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

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

:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
/* h1/h2 usam a fonte da marca (Arista Pro) como detalhe; cai para Sora. */
h1 { font-family: var(--font-brand); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-family: var(--font-brand); font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { text-wrap: pretty; }
strong { color: var(--text); font-weight: 600; }

::selection { background: rgba(58,123,200,.40); color: #fff; }

/* Revelacao de titulo por palavra (usada por [data-split] no main.js).
   Cada palavra e uma "janela" (overflow hidden) com um inner que desliza
   de baixo. inline-block => as palavras quebram de linha naturalmente nos
   espacos. O padding/margin negativo da folga para acentos e descendentes
   (a, c-cedilha, g, p) nao serem cortados pela mascara. */
.wsplit__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .15em .03em .14em;
  margin: -.15em -.03em -.14em;
}
.wsplit__inner { display: inline-block; will-change: transform; }

/* Quando o titulo usa gradiente (.text-grad) e e dividido em palavras,
   o background-clip:text do pai nao recorta filhos inline-block. Reaplicamos
   o gradiente por palavra para o texto continuar visivel. */
.text-grad .wsplit__inner,
.text-brand .wsplit__inner {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-grad .wsplit__inner { background-image: var(--grad-text); }
.text-brand .wsplit__inner { background-image: var(--grad-brand); }

/* ---------- Helpers de cor/realce ---------- */
.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
  z-index: var(--z-content);
}
/* semitransparente para a constelacao de fundo atravessar a secao */
.section--alt { background: rgba(255,255,255,.015); }
.section--tight { padding-block: clamp(48px, 5vw, 90px); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Desktop/tablet: mesmo modelo do hero para TODOS os titulos de secao.
   Coluna mais larga + fonte menor => linhas longas (3+ palavras), nada de
   bloco quadrado; descricao mais larga porem legivel. Mobile fica intacto. */
@media (min-width: 768px) {
  .section-head { max-width: 880px; }
  .section-head h2 {
    font-size: clamp(1.9rem, 0.8rem + 2.3vw, 2.85rem);
    line-height: 1.14;
    letter-spacing: -.008em;
    text-wrap: pretty;   /* preenche as linhas de cima (mais palavras no topo) */
  }
  .section-head .lead { max-width: 700px; }
  .section-head--center .lead { margin-inline: auto; }
}

.grid { display: grid; gap: var(--sp-5); }

/* Espacador de rolagem para ancoras nao ficarem sob o nav fixo */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- Fundo global: halo + grid tecnologico + flux ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Constelacao interativa de fundo (canvas), atras de todo o conteudo */
.bg-layer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-layer__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  opacity: .5;
}
.bg-layer__glow {
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.bg-layer__glow--a { top: -14%; left: 56%; background: radial-gradient(circle, rgba(58,123,200,.50), transparent 65%); }
.bg-layer__glow--b { top: 38%; left: -12%; background: radial-gradient(circle, rgba(29,70,120,.55), transparent 65%); }
.bg-layer__glow--c { top: 76%; left: 64%; background: radial-gradient(circle, rgba(110,166,230,.30), transparent 65%); }

/* SVG vertical "flux" que conecta as secoes (desenhado via JS no scroll) */
.flux-spine {
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
  z-index: var(--z-flux);
  pointer-events: none;
  display: none;             /* habilitado por JS apenas em telas grandes */
}

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: absolute;
  left: 16px; top: -120px;
  z-index: var(--z-modal);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

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

/* ---------- Respeito a "reduzir movimento" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-layer__glow { opacity: .28; }
}