/* ============================================ V2 EXTRAS — Nav grouped, Sobre, Equipe, Benefícios ============================================ */ /* ---------- Nav with dropdowns ---------- */ .nav-wrap-v2 { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; } .nav-v2 { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 10px 12px 10px 22px; background: rgba(12, 20, 44, 0.82); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-radius: 999px; color: white; max-width: 1240px; width: 100%; } .nav-v2 .nav-logo { justify-self: start; grid-row: 1; } .nav-v2-links { justify-self: center; grid-row: 1; } .nav-v2-actions { display: flex; align-items: center; gap: 4px; justify-self: end; grid-column: 3; grid-row: 1; } /* ════════════════════════════════════════════════════════════════ CABEÇALHO CHEIO NO TOPO → PÍLULA NO SCROLL Estado padrão acima = PÍLULA (flutuante, arredondada). A classe .nav-at-top no (ativada por nav-scroll.js só na home, quando scroll<=8px) sobrescreve para o estado "cheio" (largura total). ════════════════════════════════════════════════════════════════ */ .nav-wrap-v2 { transition: top .45s cubic-bezier(.16, 1, .3, 1), padding .45s cubic-bezier(.16, 1, .3, 1); } .nav-v2 { transition: max-width .45s cubic-bezier(.16, 1, .3, 1), border-radius .45s cubic-bezier(.16, 1, .3, 1), background-color .45s ease, /* longhand — o shorthand `background` não anima de forma confiável */ border-color .45s ease, padding .45s cubic-bezier(.16, 1, .3, 1); } .nav-v2 .nav-logo { transition: border-color .45s ease; } /* traço separador some/aparece suave */ html.nav-at-top .nav-wrap-v2 { top: 0; padding: 0; } /* NO TOPO: cabeçalho 100% limpo — só logo, nome, links e botão. Sem plano de fundo, sem borda, sem blur, sem traço separador. */ html.nav-at-top .nav-v2 { max-width: 100%; border-radius: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 14px; padding-bottom: 14px; } html.nav-at-top .nav-v2 .nav-logo { border-right-color: transparent; } .nav-v2 .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 16px; padding-right: 22px; border-right: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .nav-v2-links { display: flex; gap: 2px; flex: 1; justify-content: center; } .nav-v2-item { position: relative; } .nav-v2-link { display: flex; align-items: center; gap: 6px; padding: 11px 18px; font-size: 14px; font-weight: 500; line-height: 1.25; /* explícito — alinha e