/* Agnes — identidade visual compartilhada (Home, Conversa, Sobre nós).
   Só cores, superfícies e iluminação. Carregar DEPOIS dos estilos de cada página. */
:root {
  --ag-bg: #111020;
  --ag-bg-2: #1B1730;
  --ag-surface: #242039;
  --ag-purple: #8E68D8;
  --ag-purple-soft: #B59CE3;
  --ag-text: #F5F3FA;
  --ag-text-2: #B8B2C9;
  --ag-border: rgba(181, 156, 227, 0.22);
  --ag-border-strong: rgba(181, 156, 227, 0.45);
  --ag-glass: rgba(36, 32, 57, 0.55);
  --ag-grad: linear-gradient(135deg, #7A58C9 0%, #8E68D8 55%, #B59CE3 100%);
  --ag-shadow: 0 12px 40px rgba(8, 6, 20, 0.45);
  --ag-glow: 0 0 28px rgba(142, 104, 216, 0.28);
  --ag-font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;

  /* aliases usados pelos estilos originais das páginas */
  --bg: var(--ag-bg);
  --bg-primary: var(--ag-bg);
  --bg-secondary: var(--ag-bg-2);
  --bg-card: rgba(36, 32, 57, 0.72);
  --text: var(--ag-text);
  --text-primary: var(--ag-text);
  --text-secondary: var(--ag-text-2);
  --muted: var(--ag-text-2);
  --border: var(--ag-border);
  --accent-blue: var(--ag-purple);
  --accent-purple: var(--ag-purple);
  --accent-pink: var(--ag-purple-soft);
  --accent-cyan: var(--ag-purple-soft);
  --gradient: var(--ag-grad);
  --gradient-main: var(--ag-grad);
}

html { background: var(--ag-bg); }
body {
  font-family: var(--ag-font);
  color: var(--ag-text);
  background:
    radial-gradient(60% 55% at 18% 28%, rgba(142, 104, 216, 0.16) 0%, transparent 70%),
    radial-gradient(50% 50% at 88% 85%, rgba(142, 104, 216, 0.11) 0%, transparent 72%),
    linear-gradient(180deg, #151228 0%, #111020 55%, #0F0E1C 100%);
  background-attachment: fixed;
}

/* Campo de partículas interativo: sempre atrás do conteúdo e sem capturar cliques */
#agnes-medusae-field {
  position: fixed !important; inset: 0; width: 100vw; height: 100vh;
  z-index: 1 !important; pointer-events: none !important; display: block;
}

/* Fundo único: remove camadas decorativas que só algumas páginas tinham (orbs desfocados e grade),
   que deixavam a Conversa/Sobre mais claras e acinzentadas que a Home. */
.orb { display: none !important; }
body::before { display: none !important; }

/* Cabeçalho: sem fundo próprio, sem borda e sem blur. Nenhuma opacity no cabeçalho:
   logotipo, links e botões ficam 100% nítidos. */
header#header,
header#header.scrolled {
  background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
header#header .logo { background: linear-gradient(90deg, #F5F3FA 0%, #E6DFF6 38%, #B59CE3 70%, #8E68D8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
header#header nav a { color: var(--ag-text-2); }
header#header nav a:hover { color: var(--ag-text); }
header#header nav a::after { background: var(--ag-purple-soft); }

/* Transição difusa cabeçalho → conteúdo: UM degradê vertical (cabeçalho + 90px), translúcido,
   atrás do conteúdo e acima do campo de partículas (as partículas continuam visíveis por baixo). */
:root { --ag-fade: 90px; }
html::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--hh, 82px) + var(--ag-fade));
  z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(17, 16, 32, .70) 0%, rgba(17, 16, 32, .60) 28%, rgba(17, 16, 32, .44) 48%,
    rgba(17, 16, 32, .26) 66%, rgba(17, 16, 32, .11) 82%, rgba(17, 16, 32, .03) 93%, rgba(17, 16, 32, 0) 100%);
}
/* Com a página rolada (Sobre nós), o texto que passa por baixo precisa de mais cobertura — ainda sem borda */
html:has(header#header.scrolled)::before {
  z-index: 900; /* página rolada: cobre o conteúdo que passa por baixo do cabeçalho (cabeçalho segue acima, z-index 1000) */
  background: linear-gradient(to bottom,
    rgba(17, 16, 32, .94) 0%, rgba(17, 16, 32, .90) 40%, rgba(17, 16, 32, .74) 58%,
    rgba(17, 16, 32, .46) 74%, rgba(17, 16, 32, .20) 88%, rgba(17, 16, 32, 0) 100%);
}

/* Botões padrão */
.btn-light, .cta-button, .button {
  background: var(--ag-grad) !important; color: #fff !important; border: 1px solid var(--ag-border-strong) !important;
  box-shadow: var(--ag-glow);
}
.btn-outline { border: 1px solid var(--ag-border-strong) !important; color: var(--ag-text) !important; background: rgba(142, 104, 216, 0.08) !important; }

/* Seções contínuas (referência: Home, que tem um fundo único e contínuo).
   Antes, cada seção da página Sobre tinha um fundo próprio com cantos retos (5–15% de roxo): as faixas se
   encontravam em linhas retas. Agora as seções não pintam fundo; só o bloco final mantém um brilho suave que
   some nas bordas, e o rodapé perde a linha de 1px. */
main > section:not(.cta-final) { background: none !important; }
main > section.cta-final { background: none !important; isolation: isolate; }
main > section.cta-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(142, 104, 216, .14), rgba(142, 104, 216, .05) 55%, transparent 78%);
}
footer { border-top: 0 !important; background: linear-gradient(to bottom, rgba(17, 16, 32, 0) 0%, rgba(17, 16, 32, .5) 100%) !important; }

/* Logo INEXX à direita do cabeçalho (igual nas 3 páginas): sem caixa, borda ou fundo; proporção preservada */
.hd-inexx { display: block; height: clamp(26px, 3.6vh, 34px); width: auto; flex: 0 0 auto; }
@media (max-width: 768px) { .hd-inexx { height: 24px; } }
@media (max-width: 400px) { .hd-inexx { height: 21px; } }