/* ============================================
   SPARTANE.AI — Global Navigation & Footer
   Mega-menu · Cross-page nav · Responsive
   ============================================ */

/* ===== TOPBAR OVERRIDE ===== */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-bottom:1px solid var(--sp-line, #e5e7eb) !important;
}
.topbar .wrap.nav{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar .brand{
  display:flex; align-items:center; gap:12px;
  font-size:18px; font-weight:800; letter-spacing:-.03em;
  color:var(--sp-navy, #0a1628);
  text-decoration:none; flex-shrink:0;
}
.topbar .brand-mark{
  width:auto; height:40px; border-radius:10px;
  overflow:hidden; background:transparent; display:flex; align-items:center;
}
.topbar .brand-mark img{
  height:40px; width:auto; display:block;
}

/* ===== MAIN NAV LINKS (desktop) ===== */
.nav-main{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav-main > li{ position:relative; }
.nav-main > li > a{
  display:flex; align-items:center; gap:5px;
  padding:10px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--sp-muted, #5b6674);
  text-decoration:none; transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-main > li > a:hover,
.nav-main > li.active > a{
  color:var(--sp-navy, #0a1628);
  background:rgba(37,99,235,.06);
}
.nav-main > li > a .chevron{
  width:12px; height:12px; transition:transform .2s;
  fill:none; stroke:currentColor; stroke-width:2;
}
.nav-main > li:hover > a .chevron{
  transform:rotate(180deg);
}

/* ===== MEGA-MENU DROPDOWN ===== */
.mega-menu{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:560px; padding:28px 32px;
  background:#fff; border:1px solid var(--sp-line, #e5e7eb);
  border-radius:16px; box-shadow:0 24px 64px rgba(2,6,23,.10);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s, visibility .2s, transform .15s;
  transform:translateX(-50%) translateY(6px);
  z-index:999;
}
.nav-main > li:hover > .mega-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega-menu.wide{
  min-width:640px;
}
.mega-label{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--sp-muted, #5b6674);
  margin:0 0 18px; padding:0 0 12px;
  border-bottom:1px solid var(--sp-line, #e5e7eb);
}
.mega-grid{
  display:grid; gap:6px;
}
.mega-grid.cols-2{ grid-template-columns:1fr 1fr; }
.mega-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.mega-grid.cols-4{ grid-template-columns:1fr 1fr 1fr 1fr; }

.mega-link{
  display:block;
  padding:14px 16px; border-radius:8px;
  text-decoration:none; color:inherit;
  transition:background .15s, transform .15s;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.mega-link:last-child{ border-bottom:none; }
.mega-link:hover{
  background:rgba(10,22,40,.03);
  transform:translateX(2px);
}
.mega-link .ml-icon{ display:none; }
.mega-link .ml-text strong{
  display:block; font-size:14px; font-weight:700;
  color:var(--sp-navy, #0a1628); letter-spacing:-.01em;
  transition:color .15s;
}
.mega-link:hover .ml-text strong{
  color:var(--sp-gold, #d4a853);
}
.mega-link .ml-text span{
  display:block; font-size:12.5px; color:var(--sp-muted, #5b6674);
  line-height:1.5; margin-top:3px; font-weight:400;
}

/* ===== NAV BUTTONS ===== */
.nav-btns{
  display:flex; gap:10px; align-items:center; flex-shrink:0;
}
.nav-btns .btn{
  min-height:44px; padding:0 20px; border-radius:999px;
  font-size:13.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; transition:.15s;
  text-decoration:none; white-space:nowrap;
}
.nav-btns .btn-login{
  background:transparent; color:var(--sp-navy, #0a1628);
  border-color:var(--sp-line, #e5e7eb);
}
.nav-btns .btn-login:hover{ border-color:var(--sp-navy, #0a1628); }
.nav-btns .btn-demo{
  background:var(--sp-navy, #0a1628); color:#fff;
}
.nav-btns .btn-demo:hover{ opacity:.92; }

/* ===== MOBILE HAMBURGER ===== */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; border-radius:10px;
  place-items:center; color:var(--sp-navy, #0a1628);
}
.nav-toggle svg{ width:24px; height:24px; }

/* ===== MOBILE PANEL ===== */
.mobile-panel{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(2,6,23,.5); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.mobile-panel.open{
  opacity:1; visibility:visible;
}
.mobile-drawer{
  position:absolute; top:0; right:0;
  width:min(360px, 85vw); height:100%;
  background:#fff; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s ease;
  box-shadow:-8px 0 40px rgba(2,6,23,.12);
}
.mobile-panel.open .mobile-drawer{
  transform:translateX(0);
}
.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--sp-line, #e5e7eb);
}
.mobile-drawer-head .brand{ font-size:16px; }
.mobile-close{
  background:none; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  color:var(--sp-navy, #0a1628);
}
.mobile-close:hover{ background:rgba(37,99,235,.06); }
.mobile-nav{
  padding:16px 20px; list-style:none; margin:0;
}
.mobile-nav > li{ border-bottom:1px solid var(--sp-line, #e5e7eb); }
.mobile-nav > li:last-child{ border:none; }
.mobile-nav > li > a{
  display:block; padding:14px 4px;
  font-size:15px; font-weight:700; color:var(--sp-navy, #0a1628);
  text-decoration:none;
}
.mobile-nav .sub-nav{
  list-style:none; padding:0 0 12px 12px; margin:0;
}
.mobile-nav .sub-nav li a{
  display:block; padding:8px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--sp-muted, #5b6674);
  text-decoration:none; transition:background .15s;
}
.mobile-nav .sub-nav li a:hover{
  background:rgba(37,99,235,.06); color:var(--sp-navy, #0a1628);
}
.mobile-nav-btns{
  padding:20px 24px; display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--sp-line, #e5e7eb);
}
.mobile-nav-btns .btn{ width:100%; text-align:center; }

/* ===== FOOTER GLOBAL ===== */
.footer-global{
  padding:56px 0 32px;
  background:var(--sp-navy, #0a1628);
  color:rgba(255,255,255,.7);
  margin-top:0;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:48px;
}
.footer-brand{
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.footer-brand img{ height:32px; width:auto; filter:invert(1) grayscale(1) contrast(5); mix-blend-mode:screen; }
.footer-brand span{
  font-size:18px; font-weight:800; color:#fff; letter-spacing:-.03em;
}
.footer-desc{
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.55);
  max-width:280px;
}
.footer-col h4{
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.4);
  margin:0 0 16px;
}
.footer-col ul{
  list-style:none; padding:0; margin:0;
}
.footer-col ul li{ margin-bottom:8px; }
.footer-col ul li a{
  font-size:14px; color:rgba(255,255,255,.65);
  text-decoration:none; transition:color .15s;
}
.footer-col ul li a:hover{ color:#fff; }
.footer-bottom{
  padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.4);
}
.footer-bottom a{
  color:rgba(255,255,255,.5); text-decoration:none;
}
.footer-bottom a:hover{ color:#fff; }

/* ===== RELATED READING SECTION ===== */
.related-section{
  padding:72px 0 80px;
  background:var(--sp-bg-soft, #f4f6f9);
  border-top:1px solid var(--sp-line, #e5e7eb);
}
.related-section .section-label{
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:var(--sp-blue, #2563eb); margin-bottom:8px;
}
.related-section h2{
  margin:0 0 32px; font-size:clamp(1.6rem, 3vw, 2.2rem);
  color:var(--sp-navy, #0a1628);
}
.related-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.related-card{
  background:#fff; border:1px solid var(--sp-line, #e5e7eb);
  border-radius:20px; overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .2s, transform .15s;
}
.related-card:hover{
  box-shadow:0 16px 48px rgba(2,6,23,.1);
  transform:translateY(-3px);
}
.related-card .rc-badge{
  display:inline-block; padding:6px 10px; margin:20px 20px 0;
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; border-radius:999px;
}
.related-card .rc-badge.plataforma{
  background:rgba(13,148,136,.1); color:#0d9488;
}
.related-card .rc-badge.comparativa{
  background:rgba(37,99,235,.08); color:#2563eb;
}
.related-card .rc-body{
  padding:14px 20px 22px;
}
.related-card .rc-body h3{
  font-size:1.05rem; margin:0 0 6px;
  color:var(--sp-navy, #0a1628);
}
.related-card .rc-body p{
  font-size:13.5px; color:var(--sp-muted, #5b6674);
  line-height:1.5; margin:0;
}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  padding:12px 0;
  font-size:13px; color:var(--sp-muted, #5b6674);
}
.breadcrumb a{
  color:var(--sp-blue, #2563eb); text-decoration:none; font-weight:600;
}
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb span{ margin:0 6px; opacity:.5; }

/* ===== NAV RIGHT (Recursos / FAQ) ===== */
.nav-right{
  margin-left:auto;
  gap:0;
}
.nav-right > li > a{
  font-size:13px;
  font-weight:500;
  color:var(--sp-muted, #5b6674);
}
.nav-right > li > a:hover{
  color:var(--sp-blue, #2563eb);
}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .nav-main{ display:none; }
  .nav-toggle{ display:grid; }
  .mobile-panel{ display:block; }
  .mega-menu{ display:none; }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .related-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:640px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .related-grid{
    grid-template-columns:1fr;
  }
  .nav-btns .btn-login{ display:none; }
  .footer-bottom{
    flex-direction:column; gap:8px;
  }
  .breadcrumb{ font-size:12px; }
}

/* ===== PAGE SECTION ANCHOR NAV (in-page) ===== */
.page-nav{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:10px 0; margin-bottom:4px;
}
.page-nav a{
  padding:8px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700;
  color:var(--sp-muted, #5b6674);
  text-decoration:none;
  border:1px solid transparent;
  transition:all .15s;
}
.page-nav a:hover{
  color:var(--sp-navy, #0a1628);
  background:rgba(37,99,235,.05);
  border-color:var(--sp-line, #e5e7eb);
}

/* ===== CONTRAST IMPROVEMENTS ===== */
/* Ensure hero overlays have enough contrast */
.hero-split .visual::after,
.hero-grid .visual::after,
.hero-stack .visual::after{
  background:linear-gradient(135deg, rgba(10,22,40,.35), rgba(10,22,40,.12) 50%) !important;
}
/* Navy section text */
section[style*="background:var(--navy)"] h2,
section[style*="background:var(--navy)"] h3,
section[style*="background:#0a1628"] h2,
section[style*="background:#0a1628"] h3{
  color:#fff !important;
}
/* Side-quote legibility */
.side-quote{ min-height:auto; }
.side-quote p{ font-size:1rem; line-height:1.45; }

/* Muted text minimum contrast */
.lede, .hero-sub, .hero-desc, p{
  color:var(--sp-muted, #5b6674) !important;
}
/* Reset for white-bg contexts */
.quote-card p,
.sp-mag-quote p,
.side-quote p,
.footer-global p,
.footer-global a,
section[style*="background:var(--navy)"] p{
  color:rgba(255,255,255,.82) !important;
}

/* ===== OLD NAV-LINKS HIDE (replaced by nav-main) ===== */
.topbar .nav-links{ display:none !important; }
.topbar .btns{ display:none !important; }