/* ============================================================================
   Anthares 44 — NAVBAR (componente compartilhado)
   Navbar da Home (index.html / about.html) reutilizada nas demais páginas.
   • Bloco BASE = cópia fiel das regras vencedoras de style.css (Home).
   ========================================================================== */

/* ----------------------------------------------------- BASE (= Home) ----- */
.navbar {
    background: var(--page-background);
    /* Alinhamento estilo Google Antigravity: grupo à ESQUERDA (logo + links)
       e botão empurrado à DIREITA via margin-left:auto do .nav-actions. */
    display: flex;
    align-items: center;
    gap: 44px;                       /* espaço logo → primeiro link (~40–48px) */
    min-height: 64px;
    padding: 0 40px 0 72px;          /* logo inicia ~72px da borda esquerda; botão mantém 40px à direita */
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    border: none;
    box-shadow: none;
}

.logo-container { display: inline-flex; align-items: center; gap: 11px; color: #111111; text-decoration: none; justify-self: start; }
.logo-icon { width: auto; font-size: 1.1rem; height: 0.73em; flex-shrink: 0; }
.logo-text { font-size: 1.1rem; font-weight: 400; letter-spacing: -0.02em; color: #111111; }
.logo-text strong { font-weight: 700; }

.nav-links {
    display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
    gap: 0; justify-self: center;
}
.nav-links li { display: flex; align-items: center; }
.nav-links li + li::before {            /* separador "•" entre itens */
    content: "•";
    color: #d2d2d2;
    font-size: 9px;
    margin: 0 13px;
}
.nav-links a {
    text-decoration: none; color: #111111; opacity: .68;
    font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
    transition: opacity .2s ease, color .2s ease;   /* 200ms suave */
}
.nav-links a:hover { color: #000000; opacity: 1; }
.nav-actions { display: inline-flex; align-items: center; gap: 32px; margin-left: auto; }

.nav-demo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 9999px;
    background: #111111; color: #ffffff;
    font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background .2s ease;
}
.nav-demo:hover { background: #2a2a2a; }
.nav-demo svg { color: #ffffff; }

/* ------------------------- RESPONSIVO (= Home) -------------------------- */
@media (max-width: 900px) {
    .nav-links { display: none; }                       /* mesma regra da Home */
}
@media (max-width: 620px) {
    .navbar { padding: 0 20px; min-height: 70px; }
    .nav-actions { gap: 16px; }
    .nav-demo { padding: 9px 16px; font-size: 14px; }
    .logo-text { font-size: 1rem; }
}
@media (max-width: 390px) {
    .navbar { padding: 0 14px; min-height: 64px; }
    .logo-text { font-size: 0.9rem; }
    .nav-demo { padding: 8px 14px; font-size: 13px; gap: 6px; }
    .nav-demo svg { width: 14px; height: 14px; }
}

/* Lockup da marca: "Anthares" + o mark oficial (anthares-logo.png).
   ÚNICA identidade visual do projeto — PNG transparente, tinta escura (#0e0f12),
   proporção natural do mark (~1,2:1). Sem caixa, sem fundo, sem border-radius.
   width:auto → a largura segue a proporção (nunca achatada/esticada); a altura
   acompanha a tipografia. align-items:center do .logo-container centraliza. */
.logo-icon { width: auto; height: 0.95em; font-size: 1.1rem; align-self: center; flex-shrink: 0; display: block; }

/* ============================================================================
   MEGA MENU (estilo Google Antigravity) — escopo .nav-mega* / .nav-trigger.
   Não altera altura/cores/tipografia/espaçamentos do restante do site.
   ========================================================================== */
/* gatilho: mesma aparência dos demais links; só ganha estado "ativo" */
.nav-trigger { cursor: pointer; }
.nav-trigger.is-active { color: #000; opacity: 1; }

/* Link simples (Pricing): herda o estilo base de .nav-links a; fica destacado
   apenas na própria página (classe aplicada por navbar.js). Aditivo e seguro:
   só atinge o link da página atual, sem afetar as demais. */
.nav-links a.nav-link.is-active { color: #000; opacity: 1; }

/* Painel: filho de .navbar, surge logo abaixo, largura do container, fundo
   branco, borda e sombra sutis, cantos inferiores arredondados. */
.nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;                                   /* = largura do container da navbar */
    z-index: 95;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, .07);
    border-top-color: rgba(17, 17, 17, .04);
    border-radius: 0 0 18px 18px;               /* só cantos inferiores */
    box-shadow: 0 22px 48px -28px rgba(16, 20, 40, .20), 0 6px 16px -12px rgba(16, 20, 40, .10);
    padding: 26px 30px;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .27s cubic-bezier(.22, .61, .36, 1),
                transform .27s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .27s;
}
.navbar.mega-open .nav-mega {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .27s cubic-bezier(.22, .61, .36, 1),
                transform .27s cubic-bezier(.22, .61, .36, 1),
                visibility 0s;
}

/* viewport: altura animada (troca de conteúdo sem “pular”) */
.nav-mega__viewport { position: relative; overflow: hidden; transition: height .27s cubic-bezier(.22, .61, .36, 1); }

/* cada categoria: cross-fade suave; empilhadas (absolutas) → só a ativa aparece */
.nav-mega__panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: minmax(220px, 292px) 1fr;
    gap: 44px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.nav-mega__panel.is-active { opacity: 1; pointer-events: auto; }

/* lado esquerdo: título + descrição + botão */
.nm-intro { padding-right: 8px; }
.nm-title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #111111; }
.nm-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: #6b7280; }
.nm-cta {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 18px; padding: 8px 15px;
    border-radius: 9999px; border: 1px solid #e6e6e2; background: #ffffff;
    color: #111111; font-size: 13px; font-weight: 500; text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nm-cta:hover { background: #f5f5f2; border-color: #dcdcd6; transform: translateY(-1px); }
.nm-cta svg { color: #111111; }

/* lado direito: colunas alinhadas, bastante respiro */
.nm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
.nm-col-title {
    display: block; margin: 4px 0 12px; padding-left: 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9aa0a6;
}
.nm-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 9px 12px; border-radius: 12px;
    text-decoration: none; transition: background .18s ease;
}
.nm-item:hover { background: #f6f6f4; }
.nm-ic {
    flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 10px; border: 1px solid #ececea; background: #fafafa; color: #3a3a3a;
    transition: border-color .18s ease, color .18s ease;
}
.nm-item:hover .nm-ic { border-color: #dedede; color: #111111; }
.nm-txt { display: flex; flex-direction: column; min-width: 0; }
.nm-item-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: #111111; line-height: 1.35; }
.nm-item-desc { font-size: 12px; color: #8a8f98; line-height: 1.4; }


/* ------------------------- RESPONSIVO (mega menu) ----------------------- */
/* Desktop estreito: empilha lado esquerdo sobre as colunas (sem quebrar). */
@media (max-width: 1080px) {
    .nav-mega { padding: 22px 22px; }
    .nav-mega__panel { grid-template-columns: 1fr; gap: 20px; }
    .nm-intro { padding-right: 0; }
}
/* Onde os links do topo se escondem (≤900px, regra base), o painel também
   é neutralizado → nada some/quebra e a navbar mobile atual fica intacta. */
@media (max-width: 900px) {
    .nav-mega { display: none; }
    .navbar.mega-open .nav-mega { display: none; }
}
/* Acordeão (toque/telas pequenas onde os gatilhos aparecem): colunas em 1. */
@media (max-width: 760px) {
    .nm-cols { grid-template-columns: 1fr; }
}

/* Acessibilidade: sem animação de altura/opacidade p/ quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
    .nav-mega, .nav-mega__viewport, .nav-mega__panel { transition: none !important; }
    .navbar.mega-open .nav-mega { transform: none; }
}