/* ================================================================
   TARGET INFORMAÇÕES — MENU UNIFICADO (Home / Institucional)
   Espelha o componente de navegação já usado nas páginas de produto
   (assets/css/global.css) para eliminar a divergência visual do menu.
   Autocontido: não interfere em nenhuma outra regra existente.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── TIPOGRAFIA UNIFICADA COM AS PÁGINAS DE PRODUTO ──────
   Sobrescreve as variáveis de fonte do style.css (Poppins/Inter,
   nem sempre carregadas) para usar o mesmo par de fontes do
   restante do site, evitando a "troca de fonte" ao navegar. */
:root {
  --font-main: 'DM Sans', sans-serif;
  --font-modern: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif; }

:root {
  --nav-h: 76px;
  --nav-r-s: 8px;
  --nav-r-m: 14px;
  --nav-r-l: 20px;
  --nav-r-f: 100px;
  --nav-tr: .22s cubic-bezier(.4,0,.2,1);
  --nav-sh-s: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --nav-sh-l: 0 16px 48px rgba(0,0,0,.11), 0 8px 16px rgba(0,0,0,.06);
  --nav-sh-r: 0 6px 20px rgba(196,30,58,.28);
  --nav-head: 'Plus Jakarta Sans', sans-serif;
  --nav-body: 'DM Sans', sans-serif;
  --nav-ink: #0F172A;
  --nav-ink-3: #334155;
  --nav-ink-4: #64748B;
  --nav-ink-5: #94A3B8;
  --nav-border: #E5E7EB;
  --nav-muted: #F3F4F6;
  --nav-red-bg: rgba(196,30,58,.06);
  --nav-green: #059669;  --nav-green-bg: rgba(5,150,105,.08);
  --nav-gold:  #D97706;  --nav-gold-bg:  rgba(217,119,6,.08);
  --nav-blue:  #2563EB;  --nav-blue-bg:  rgba(37,99,235,.07);
  --nav-teal:  #0891B2;  --nav-teal-bg:  rgba(8,145,178,.07);
  --nav-purple:#7C3AED;  --nav-purple-bg:rgba(124,58,237,.07);
  --nav-indigo:#4F46E5;  --nav-indigo-bg:rgba(79,70,229,.08);
  --nav-orange:#EA580C;  --nav-orange-bg:rgba(234,88,12,.08);
  --nav-lime:  #65A30D;  --nav-lime-bg:  rgba(101,163,13,.08);
  --nav-cyan:  #0284C7;  --nav-cyan-bg:  rgba(2,132,199,.08);
  --nav-rose:  #E11D48;  --nav-rose-bg:  rgba(225,29,72,.08);
}

#prog { position:fixed; top:0; left:0; height:3px; background:var(--gradient-red); z-index:1200; width:0; transition:width .1s; }

.nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(196,30,58,.1);
  transition: var(--nav-tr);
}
.nav.solid { background: rgba(255,255,255,.98); box-shadow: var(--nav-sh-s); border-bottom-color: var(--nav-border); }

/* Barra superior totalmente branca na página inicial */
.home-page .nav,
.home-page .nav.solid {
  background:#fff;
  border-bottom-color:var(--nav-border);
}

.nav-wrap { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

.nav a, .nav button { text-decoration: none; }

.nav-logo { display:flex; align-items:center; gap:11px; }
.nav-logo img { height:46px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); transition: var(--nav-tr); }
.nav-logo .nav-logo-divider { width:1px; height:34px; flex:0 0 1px; background:var(--nav-border); }
.nav-logo .nav-logo-serasa { width:118px; height:48px; object-fit:contain; filter:none; }

.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links > a, .nav-drop-btn {
  padding: 10px 16px; border-radius: var(--nav-r-s);
  font-family: var(--nav-body); font-size:.9rem; font-weight:500; color: var(--nav-ink-3);
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  transition: color var(--nav-tr), background var(--nav-tr);
}
.nav-links > a:hover, .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--red); background: var(--nav-red-bg); }
.nav-links > a.on, .nav-drop-btn.on { color: var(--red); font-weight: 700; }
.nav-drop-btn svg { width:11px; height:11px; transition: transform var(--nav-tr); }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }

.nav-cta {
  margin-left: 8px; padding: 11px 24px !important;
  background: var(--gradient-red) !important; color:#fff !important;
  border-radius: var(--nav-r-f) !important; font-family: var(--nav-head) !important;
  font-weight:700 !important; font-size:.85rem !important;
  box-shadow: var(--nav-sh-r); transition: var(--nav-tr) !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,30,58,.38); color:#fff !important; }

/* Dropdown */
.nav-drop { position: relative; }
.nav-drop-menu {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width: 310px; background:#fff; border:1px solid var(--nav-border);
  border-radius: var(--nav-r-l); padding:14px 8px 10px; margin-top:10px;
  box-shadow: var(--nav-sh-l); z-index:10;
  max-height: calc(100vh - var(--nav-h) - 24px); overflow-y:auto;
}
.nav-drop-menu.wide {
  width: 640px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.nav-drop-menu::before { content:''; position:absolute; top:-10px; left:0; right:0; height:12px; }
.nav-drop.open .nav-drop-menu { display:flex; flex-direction:column; gap:2px; }
.nav-drop-menu a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: var(--nav-r-m); font-size:.875rem; color: var(--nav-ink-3); transition: var(--nav-tr); }
.nav-drop-menu a:hover { background: var(--nav-red-bg); color: var(--red); }
.nav-drop-menu a:hover .dm-name { color: var(--red); }
.dm-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.dm-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 6px; }
.dm-grid-3 .dm-col { display:contents; }
.dm-grid-3 .dm-col-label { display:none; }
.dm-col { display:flex; flex-direction:column; gap:2px; }
.dm-col-label { padding-top:4px; }
.dm-section-label { padding-top:4px; }
.dm-manuals { display:flex; flex-direction:column; gap:2px; }
.dm-products { display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; }
.dm-manuals a { padding:8px 12px; }
.dm-manuals .dm-name { font-size:.78rem; font-weight:600; }
.dm-ico { width:34px; height:34px; border-radius: var(--nav-r-s); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dm-ico svg { width:17px; height:17px; }
.dm-ico.red    { background: var(--nav-red-bg);    color: var(--red); }
.dm-ico.green  { background: var(--nav-green-bg);  color: var(--nav-green); }
.dm-ico.gold   { background: var(--nav-gold-bg);   color: var(--nav-gold); }
.dm-ico.blue   { background: var(--nav-blue-bg);   color: var(--nav-blue); }
.dm-ico.teal   { background: var(--nav-teal-bg);   color: var(--nav-teal); }
.dm-ico.purple { background: var(--nav-purple-bg); color: var(--nav-purple); }
.dm-ico.indigo { background: var(--nav-indigo-bg); color: var(--nav-indigo); }
.dm-ico.orange { background: var(--nav-orange-bg); color: var(--nav-orange); }
.dm-ico.lime   { background: var(--nav-lime-bg);   color: var(--nav-lime); }
.dm-ico.cyan   { background: var(--nav-cyan-bg);   color: var(--nav-cyan); }
.dm-ico.rose   { background: var(--nav-rose-bg);   color: var(--nav-rose); }
.dm-ico.muted  { background: var(--nav-muted);     color: var(--nav-ink-4); }
.dm-name { font-family: var(--nav-head); font-weight:700; color: var(--nav-ink); font-size:.84rem; line-height:1.2; transition: var(--nav-tr); }
.dm-sub  { font-size:.72rem; color: var(--nav-ink-5); margin-top:1px; }
.dm-div  { height:1px; background: var(--nav-border); margin:6px 8px; }
.dm-label { padding:8px 12px 4px; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--nav-ink-5); font-family: var(--nav-head); }

/* Mobile toggle */
.nav-tog { display:none; flex-direction:column; gap:5px; width:28px; padding:3px 0; background:none; border:none; cursor:pointer; }
.nav-tog span { display:block; height:2px; background: var(--nav-ink-3); border-radius:2px; transition: var(--nav-tr); }

.nav-mob {
  display:none; position:fixed; top: var(--nav-h); left:0; right:0;
  background:#fff; border-bottom:1px solid var(--nav-border);
  box-shadow: var(--nav-sh-s); padding:14px 24px 26px; flex-direction:column; gap:2px;
  z-index:999; max-height: calc(100vh - var(--nav-h)); overflow-y:auto;
}
.nav-mob.open { display:flex; }
.nav-mob a { padding:13px 10px; border-bottom:1px solid var(--nav-border); color:var(--nav-ink-3); font-size:.95rem; font-weight:500; transition:color var(--nav-tr); font-family: var(--nav-body); }
.nav-mob a:hover { color: var(--red); }
.nav-mob .mob-label { padding:14px 10px 6px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--nav-ink-5); font-family: var(--nav-head); }
.nav-mob a.mob-cta { border-bottom:none; margin-top:8px; color:#fff; background: var(--gradient-red); border-radius: var(--nav-r-f); font-family: var(--nav-head); font-weight:700; text-align:center; box-shadow: var(--nav-sh-r); }

@media (max-width: 991px) {
  .nav-links { display:none; }
  .nav-tog { display:flex; }
  .nav-drop-menu.wide { width:310px; }
  .dm-grid-3 { grid-template-columns:1fr; gap:2px; }
}

@media (max-width: 480px) {
  .nav-logo { gap:8px; }
  .nav-logo img { height:40px; }
  .nav-logo .nav-logo-divider { height:29px; }
  .nav-logo .nav-logo-serasa { width:94px; height:40px; }
}
