/* ==========================================================================
   Metrika — Base Global
   ========================================================================== */

/* Tokens */
:root{
  --bg-grad-a:#120A2A;
  --bg-grad-b:#0E0A1D;
  --surface:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:#F2F3F5;
  --muted:#B9B7C9;
  --brand-1:#7C3AED;     /* roxo base */
  --brand-2:#9F67FF;     /* roxo claro */
  --neon:#C084FC;        /* roxo neon para hover/destaque */
  --accent:#FFD34E;
  --radius:14px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow-soft:0 8px 22px rgba(0,0,0,.28);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
img{ max-width:100%; height:auto; display:block; image-rendering:auto }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid color-mix(in oklab, var(--neon) 70%, white 10%); outline-offset:2px }

/* ===== Layout base + Sticky Footer ===== */
html, body { height: 100%; }           /* base para 100% da viewport */

body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* Fundo base (fallback) */
  background:linear-gradient(180deg,var(--bg-grad-a) 0%,var(--bg-grad-b) 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  /* Sticky footer */
  min-height:100svh;                   /* lida melhor com barras móveis */
  display:flex;
  flex-direction:column;

  /* garante que o pseudo-fundo fixe fique atrás de tudo */
  position: relative;
}

/* Fundo contínuo fixo (evita “quebra” do background entre seções/páginas) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,var(--bg-grad-a) 0%,var(--bg-grad-b) 100%);
  /* Se quiser radiais/glows globais, adicione-os antes do linear-gradient acima */
}

main{ flex:1 0 auto; }                 /* ocupa o espaço e empurra o footer */
header, footer{ flex:0 0 auto; }       /* evita crescimento acidental */

/* Container padrão */
.container{ 
  max-width:1200px !important; 
  width:100% !important;
  margin:0 auto !important; 
  padding:0 20px !important;
}

.screen-reader-text, .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;
}
.muted{ color:var(--muted) }

/* ===== Utilitários de layout opcionais (usados por várias páginas) ===== */
.section{ padding:48px 0; }            /* aplique apenas onde quiser respiro entre blocos */
.grid{ display:grid; gap:22px; }       /* use com grid-template-columns conforme a página */

/* ==== Proteção de cores do header/footer ==== */
.header, .header .nav, .header a,
footer, footer a { color: inherit; }
.header .menu a { color: var(--header-link, #e9e1ff); }
footer .menu a { color: var(--footer-link, #e9e1ff); }

/* =========================
   Neutralização Elementor
   ========================= */
body[class*="elementor-kit-"]{
  color: var(--text);
  background: linear-gradient(180deg,var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
  font-family: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
body[class*="elementor-kit-"] a,
.elementor a{ color: inherit; text-decoration: none; }
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6{
  color: inherit; font-weight: 800;
}
body[class*="elementor-kit-"]{
  --e-global-color-primary: currentColor;
  --e-global-color-secondary: currentColor;
  --e-global-color-text: currentColor;
  --e-global-color-accent: var(--accent);
  --e-global-typography-primary-font-family: Inter;
  --e-global-typography-secondary-font-family: Inter;
  --e-global-typography-text-font-family: Inter;
  --e-global-typography-accent-font-family: Inter;
}
body[class*="elementor-kit-"] footer,
body[class*="elementor-kit-"] footer a{ color: inherit; }
:where(body[class*="elementor-kit-"]) a { color: inherit; }
.elementor-button,
.elementor a.elementor-button{
  color: inherit; background: transparent;
  border-color: rgba(255,255,255,.18);
}
.elementor-button:hover,
.elementor a.elementor-button:hover{
  background: rgba(255,255,255,.06);
  border-color: color-mix(in oklab, var(--neon) 60%, white 10%);
}

/* ===== Barra de rolagem personalizada ===== */
:root {
    scrollbar-gutter: stable;
    --scrollbar-thumb: #7C3AED;
    --scrollbar-track: #1a1a1a;
}

html {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 3px solid var(--scrollbar-track);
}
::-webkit-scrollbar-thumb:hover { background: #9F67FF; }

/* 1) Aproximar badges -> cards (reduz o espaço embaixo do hero) */
.hero { padding: 64px 0 16px; }   /* antes 36px ou 40px */

/* 2) (Opcional) Compactar o topo da seção seguinte */
.section { padding: 32px 0; }     /* antes 48/56px */

/* 3) (Opcional) Ajustar o espaço ENTRE os cards (linhas/colunas) */
.grid { gap: 18px; }              /* antes 22/24px */

/* Se algo da página estiver sobrepondo, force só o necessário: */
.hero { padding-bottom: 64px !important; }

/* Ritmo vertical básico entre seções com grid dentro de qualquer .container */
.container > .grid + .grid { margin-top: 18px; }