/* ============================================================
   VEKTRA - LAYOUT
   Estrutura fixa presente em todas as páginas:
   marca, barra de navegação, menu mobile e rodapé.
   O botão flutuante do VektraBot fica em components.css.
   ============================================================ */

/* ---------- Marca ----------
   Duas artes do logotipo oficial: uma com o "VEKTRA" branco (fundo
   escuro) e outra com ele em teal (fundo claro). O tema decide qual
   aparece. Como o theme-init.js roda antes da primeira pintura, não
   existe troca visível na carga. */
.brand{ display:flex; align-items:center; flex:none }
.brand-logo{
  display:block;width:auto;flex:none;
  height:30px;                /* o cabeçalho define a escala */
}
[data-theme="dark"]  .brand-logo-claro { display:none }
[data-theme="light"] .brand-logo-escuro{ display:none }

/* No rodapé cabe a assinatura "Inteligência Contábil" embaixo */
.foot-brand .brand-logo{ height:52px }

/* ---------- Barra de navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease,
             transform .42s var(--ease);
}
/* Rolando para baixo o cabeçalho sobe e some; rolando para cima ele volta */
.nav.oculta{ transform:translateY(-100%) }

.nav.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line-soft);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
}
.nav-right{ display:flex; align-items:center; gap:12px }

.nav-links{ display:none; align-items:center; gap:30px }
.nav-links a{
  font-size:14px;font-weight:500;color:var(--text-2);
  position:relative;padding:6px 0;transition:color .25s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--clay);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{ color:var(--text) }
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); transform-origin:left }

.nav .nav-cta{ display:none }

/* ---------- Alternador de tema ---------- */
.theme-btn{
  position:relative;width:40px;height:40px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;overflow:hidden;
  transition:border-color .3s ease, transform .3s var(--ease);
}
.theme-btn:hover{ border-color:var(--clay); transform:translateY(-1px) }
.theme-btn .ic{
  position:absolute;inset:0;margin:auto;width:19px;height:19px;color:var(--text);
  transition:transform .55s var(--ease), opacity .35s ease;
}
/* mostra o ícone do modo que será ativado */
[data-theme="dark"]  .theme-btn .ic-moon{ opacity:0; transform:rotate(-80deg) scale(.35) }
[data-theme="light"] .theme-btn .ic-sun { opacity:0; transform:rotate(80deg)  scale(.35) }
[data-theme="dark"]  .theme-btn:hover .ic-sun { color:var(--clay) }
[data-theme="light"] .theme-btn:hover .ic-moon{ color:var(--clay) }

/* ---------- Menu mobile ---------- */
.burger{
  width:42px;height:40px;display:grid;place-content:center;gap:5px;
  background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;
}
.burger i{
  display:block;width:16px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger.open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger.open i:nth-child(2){ opacity:0 }
.burger.open i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:199;
  background:var(--card);border-bottom:1px solid var(--line);
  padding:16px var(--pad) 26px;
  display:grid;gap:2px;
  /* desloca o painel inteiro + a altura da nav para sair da tela */
  transform:translateY(calc(-100% - var(--nav-h) - 4px));
  visibility:hidden;
  transition:transform .45s var(--ease), visibility 0s linear .45s;
}
.mobile-menu.open{
  transform:translateY(0);visibility:visible;
  transition:transform .45s var(--ease), visibility 0s;
}
.mobile-menu a{
  font-size:22px;font-weight:600;padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu a.active{ color:var(--clay) }   /* aba da página atual */
.mobile-menu .btn{ margin-top:18px; width:100% }

/* ---------- Rodapé ---------- */
.footer{
  padding:62px 0 32px;
  background:var(--bg);
  border-top:1px solid var(--line-soft);
}
.foot-grid{ display:grid; gap:38px }
.foot-brand p{
  margin:20px 0 0;color:var(--text-2);
  font-size:14px;font-weight:300;line-height:1.65;max-width:36ch;
}
.foot-col h4{
  margin:0 0 18px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);
}
.foot-col ul{ margin:0;padding:0;list-style:none;display:grid;gap:12px }
.foot-col a{
  font-size:14.5px;color:var(--text);opacity:.8;
  transition:color .25s ease, opacity .25s ease, padding-left .3s var(--ease);
}
.foot-col a:hover{ color:var(--clay); opacity:1; padding-left:5px }
.foot-bottom{
  margin-top:46px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:grid;gap:12px;
  font-size:12px;font-weight:300;color:var(--text-2);line-height:1.7;
}

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .foot-bottom{ grid-template-columns:1fr auto; align-items:center }
}
@media (min-width:900px){
  .brand-logo{ height:28px }
  .foot-brand .brand-logo{ height:60px }
  .nav-links{ gap:22px }
  .nav-links{ display:flex }
  .nav .nav-cta{ display:inline-flex }
  .burger{ display:none }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
}
@media (min-width:1100px){
  .brand-logo{ height:34px }
  .nav-links{ gap:30px }
}