/* =========================================================================
   NBRTECH — NOVO VISUAL · base compartilhada
   Fontes locais, peças comuns, menu (.nbh) e rodapé (.nbf).
   Carregado por includes/header.php em TODAS as páginas, depois do style.css.

   Tudo aqui usa prefixo (nb-, nbh-, nbf-) para não esbarrar no style.css
   nem nos CSS de cada página de solução. Nenhuma regra mexe em elementos
   soltos (body, h1, p, section...) fora dos blocos do menu e do rodapé.
   ========================================================================= */

/* ---------- Fontes hospedadas no próprio site (o CSP só aceita 'self') ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/sora-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Cores e tamanhos ---------- */
:root{
  /* altura do menu (76px + 1px de borda). As páginas de solução usam esta
     variável para posicionar elementos "grudados" logo abaixo do menu. */
  --header-h:77px;

  --nb-ink:#0F172A;
  --nb-ink2:#334155;
  --nb-mute:#56657B;
  --nb-line:#E2E8F0;
  --nb-mist:#F6F8FC;
  --nb-blue:#2563EB;
  --nb-blue2:#1D4ED8;
  --nb-blue3:#60A5FA;
  --nb-night:#070C18;
  --nb-night2:#0D1526;
  --nb-nmute:#A9B6CC;

  --nb-f-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nb-f-disp:Sora,Inter,system-ui,sans-serif;
  --nb-f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Base dos blocos novos ----------
   O :where() zera a especificidade do "escopo" (.nbh/.nbf/.hn). O :is() mantém a
   especificidade de um seletor de tag, que empata com o style.css e vence por vir
   depois. Assim estes ajustes cancelam as margens/cores de h1-h4, p, label etc. do
   style.css apenas aqui dentro, e qualquer classe nossa vence tudo isso. */
:where(.nbh,.nbf,.hn){font-family:var(--nb-f-body);color:var(--nb-ink);line-height:1.5;-webkit-font-smoothing:antialiased}
:where(.nbh,.nbf,.hn) *,:where(.nbh,.nbf,.hn) *::before,:where(.nbh,.nbf,.hn) *::after{box-sizing:border-box}
:where(.nbh,.nbf,.hn) :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0;padding:0}
:where(.nbh,.nbf,.hn) :is(h1,h2,h3,h4){font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:normal;color:inherit}
:where(.nbh,.nbf,.hn) p{color:inherit}
:where(.nbh,.nbf,.hn) :is(ul,ol){list-style:none}
:where(.nbh,.nbf,.hn) a{color:inherit;text-decoration:none}
:where(.nbh,.nbf,.hn) :is(button,summary){font:inherit}
:where(.nbh,.nbf,.hn) svg{display:block;flex:none}
:where(.nbh,.nbf,.hn) img{max-width:100%}
.nbh :focus-visible,.nbf :focus-visible,.hn :focus-visible{outline:3px solid #93C5FD;outline-offset:2px}

/* ---------- Peças comuns ---------- */
.nb-i{display:block;flex:none}
.nb-d{font-family:var(--nb-f-disp)}
.nb-m{font-family:var(--nb-f-mono)}
.nb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
.nb-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 40px}

.nb-eb{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--nb-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nb-blue2);background:#EFF6FF;border:1px solid #DBEAFE;padding:9px 13px;border-radius:999px}
.nb-eb i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.nb-eb--dk{color:#93C5FD;background:rgba(59,130,246,.14);border-color:rgba(147,197,253,.28)}

.nb-bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;font:600 16px/1 var(--nb-f-body);border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;cursor:pointer}
.nb-bt:hover{transform:translateY(-2px)}
.nb-bt--pr{background:var(--nb-blue);color:#fff;box-shadow:0 14px 26px -14px rgba(37,99,235,.85)}
.nb-bt--pr:hover{background:var(--nb-blue2)}
.nb-bt--gh{background:#fff;border-color:#CBD5E1;color:var(--nb-ink)}
.nb-bt--gh:hover{border-color:var(--nb-blue)}
.nb-bt--gd{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);color:#fff}
.nb-bt--gd:hover{background:rgba(255,255,255,.12)}
.nb-bt--wa{background:#EAFBF1;border-color:#BFEBD1;color:#15803D}
.nb-bt--wa:hover{border-color:#15803D}

.nb-h2{font:700 clamp(1.9rem,3.6vw,2.9rem)/1.08 var(--nb-f-disp);letter-spacing:-.03em}
.nb-lead{font-size:18px;line-height:1.6;color:var(--nb-ink2)}

/* =========================================================================
   MENU (.nbh)
   ========================================================================= */
.nbh{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--nb-line)}
.nbh-in{position:relative;height:76px;display:flex;align-items:center;gap:30px}
.nbh-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.nbh-logo img{display:block;height:44px;width:auto;max-width:100%}

.nbh-lk{display:flex;gap:4px}
.nbh-lk>a,.nbh-top{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:10px;font-weight:600;font-size:15px;color:var(--nb-ink2);white-space:nowrap;transition:background .2s,color .2s}
.nbh-lk>a:hover,.nbh-mg:hover>.nbh-top,.nbh-mg:focus-within>.nbh-top{background:var(--nb-mist);color:var(--nb-ink)}
.nbh-lk>a[aria-current],.nbh-top[aria-current]{background:#EFF6FF;color:var(--nb-blue2)}
.nbh-top .nb-i{transition:transform .25s}
.nbh-mg:hover>.nbh-top .nb-i,.nbh-mg:focus-within>.nbh-top .nb-i{transform:rotate(180deg)}

/* painel das soluções (abre ao passar o mouse ou ao focar pelo teclado) */
.nbh-mega{position:absolute;left:40px;top:68px;width:min(900px,calc(100vw - 80px));background:#fff;border:1px solid var(--nb-line);border-radius:22px;padding:14px;box-shadow:0 40px 70px -30px rgba(15,23,42,.45);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s,visibility .22s}
.nbh-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nbh-mg:hover .nbh-mega,.nbh-mg:focus-within .nbh-mega{opacity:1;visibility:visible;transform:none}
.nbh-mg[data-dismissed] .nbh-mega{opacity:0;visibility:hidden;transform:translateY(8px)}
.nbh-mi{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;transition:background .2s}
.nbh-mi:hover{background:var(--nb-mist)}
.nbh-mi[aria-current]{background:#EFF6FF}
.nbh-mi-t{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.nbh-mi-x b{display:block;font:700 15px/1.2 var(--nb-f-disp);letter-spacing:-.01em}
.nbh-mi-x small{display:block;font-size:13px;line-height:1.4;color:var(--nb-mute);margin-top:2px}
.nbh-mi--cta{background:var(--nb-night);color:#fff}
.nbh-mi--cta .nbh-mi-x small{color:var(--nb-nmute)}
.nbh-mi--cta:hover{background:var(--nb-night2)}

.nbh-rt{margin-left:auto;display:flex;align-items:center;gap:18px}
.nbh-cta{height:44px;font-size:15px;padding:0 20px;border-radius:12px}
.nbh-cta-s{display:none}

/* barra de progresso de leitura (só onde o navegador sabe fazer sem JavaScript) */
.nbh-prog{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,#60A5FA,#2563EB);transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline:scroll()){.nbh-prog{animation:nbh-progx linear both;animation-timeline:scroll(root)}}
@keyframes nbh-progx{to{transform:scaleX(1)}}

/* menu do celular */
.nbh-mn{display:none}
.nbh-mn>summary{list-style:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--nb-line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--nb-ink)}
.nbh-mn>summary::-webkit-details-marker{display:none}
.nbh-mn-c{display:none}
.nbh-mn[open] .nbh-mn-o{display:none}
.nbh-mn[open] .nbh-mn-c{display:block}
.nbh-mp{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--nb-line);padding:16px 16px 32px;display:flex;flex-direction:column;box-shadow:0 30px 40px -30px rgba(15,23,42,.4);height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
.nbh-mp-lab{font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--nb-mute);padding:0 10px 8px}
.nbh-mpi{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 10px;border-radius:14px}
.nbh-mpi:hover,.nbh-mpi[aria-current]{background:var(--nb-mist)}
.nbh-mpi .nbh-mi-t{width:46px;height:46px;border-radius:13px}
.nbh-mpi .nbh-mi-x b{font-size:16px}
.nbh-mpi>.nb-i{margin-left:auto;color:#94A3B8}
.nbh-mp-lk{margin-top:12px;border-top:1px solid var(--nb-line)}
.nbh-mp-lk a{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 10px;font-weight:600;font-size:16px;border-bottom:1px solid var(--nb-line)}
.nbh-mp-lk a[aria-current]{color:var(--nb-blue2)}
.nbh-mp-lk .nb-i{color:#94A3B8}
.nbh-mp-ac{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.nbh-mp-ac .nb-bt{width:100%}
html.nb-lock{overflow:hidden}

@media (max-width:960px){
  .nbh-lk{display:none}
  .nbh-mn{display:block}
  .nbh-rt{gap:10px}
  .nbh-in{gap:12px}
  .nb-wrap{padding:0 24px}
}
@media (max-width:560px){
  .nbh-cta{padding:0 16px}
  .nbh-cta-l{display:none}
  .nbh-cta-s{display:inline}
  .nbh-logo img{height:36px}
}
@media (max-width:380px){
  .nbh-cta{display:none}
}

/* =========================================================================
   RODAPÉ (.nbf)
   ========================================================================= */
.nbf{background:#05080F;color:#C5D0E2;padding:76px 0 36px}
.nbf-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.nbf-logo{display:inline-flex}
.nbf-logo img{display:block;height:38px;width:auto}
.nbf-about{margin-top:16px;max-width:36ch;font-size:15px;line-height:1.6;color:#AEBBD0}
.nbf-ct{margin-top:18px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.nbf .nbf-ct a{display:flex;align-items:center;gap:10px;padding:6px 0;color:#C5D0E2;transition:color .2s}
.nbf .nbf-ct a:hover{color:#fff}
.nbf h3{font:600 12px/1 var(--nb-f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8F9DB5;margin-bottom:12px}
.nbf li a{display:block;padding:7px 0;font-size:15px;color:#C5D0E2;transition:color .2s}
.nbf li a:hover{color:#fff}
.nbf-bot{margin-top:52px;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;line-height:1.5;color:#8F9DB5}
@media (max-width:960px){
  .nbf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nbf-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .nbf{padding:56px 0 28px}
  .nbf-grid{gap:32px 20px}
  .nbf-grid>div:last-child{grid-column:1/-1}
}

/* ---------- Respeita quem pede menos movimento no sistema ---------- */
@media (prefers-reduced-motion:reduce){
  .nbh *,.nbf *{transition:none!important;animation:none!important}
  .nbh-prog{display:none}
}