/*
  Bright IT — nova casca visual 2026
  Somente apresentação: cores, tipografia visual, ícones, cartões, cabeçalho e rodapé.
  Links, textos, SEO, rotinas, scripts e estrutura funcional permanecem no HTML original.
*/
:root{
  --brand-brown:#94764e;
  --brand-brown-dark:#735738;
  --brand-gold:#c7a26b;
  --brand-gold-light:#e8d6b8;
  --brand-cream:#fbf7f0;
  --brand-cream-2:#f3eadc;
  --brand-ink:#171716;
  --brand-charcoal:#28231e;
  --brand-charcoal-2:#1c1916;
  --brand-line:#ded2c2;
  --brand-muted:#6c655d;
  --navy:#28231e;
  --navy2:#342d27;
  --blue:#94764e;
  --blue2:#c7a26b;
  --green:#94764e;
  --green2:#735738;
  --text:#201d1a;
  --muted:#6c655d;
  --line:#e5dbcf;
  --soft:#fbf7f0;
  --shadow:0 16px 38px rgba(67,49,30,.11);
}

body{
  color:var(--brand-ink);
  background:#fff;
}

/* Cabeçalho branco inspirado na folha timbrada */
header{
  height:104px;
  background:rgba(255,255,255,.98);
  color:var(--brand-ink);
  border-bottom:1px solid rgba(148,118,78,.28);
  box-shadow:0 6px 24px rgba(44,34,24,.08);
  overflow:visible;
}
header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,var(--brand-brown-dark),var(--brand-gold),#ead9bd,var(--brand-brown));
}
.brand{min-width:286px;}
.brand img{width:260px;height:auto;max-height:79px;object-fit:contain;object-position:left center;}
.brand-sub{
  margin-top:-7px;
  margin-left:70px;
  font-size:.58rem;
  letter-spacing:.20em;
  font-weight:800;
  color:#111;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav-links{color:var(--brand-ink);}
.nav-links a,.nav-dropdown-toggle{color:var(--brand-ink);}
.nav-links a:hover,.nav-dropdown-toggle:hover,.nav-dropdown.open .nav-dropdown-toggle{color:var(--brand-brown);}
.nav-dropdown-menu{
  background:#fff;
  border:1px solid var(--brand-line);
  box-shadow:0 18px 45px rgba(51,39,26,.16);
}
.nav-dropdown-menu::before{
  background:#fff;
  border-left-color:var(--brand-line);
  border-top-color:var(--brand-line);
}
.nav-dropdown-menu a{color:#2c2722;}
.nav-dropdown-menu a:hover{background:var(--brand-cream);color:var(--brand-brown-dark);}
.menu-btn{border-color:rgba(148,118,78,.45);color:var(--brand-brown);background:#fff;}

/* Botões e ícones */
.btn{border-radius:7px;box-shadow:0 8px 20px rgba(115,87,56,.10);}
.btn-green,.btn-blue{background:linear-gradient(135deg,var(--brand-brown),var(--brand-brown-dark));}
.btn-green:hover,.btn-blue:hover{background:linear-gradient(135deg,var(--brand-brown-dark),#5f462d);}
.eyebrow{color:var(--brand-brown);letter-spacing:.14em;}
.icon{color:var(--brand-brown);}
.more{color:var(--brand-brown-dark);}

/* Home: mantém exatamente a imagem atual de câmera/servidor/cabos */
.hero{
  min-height:560px;
  color:var(--brand-ink);
  background:
    linear-gradient(90deg,rgba(253,249,242,.995) 0%,rgba(253,249,242,.97) 34%,rgba(253,249,242,.82) 47%,rgba(253,249,242,.14) 67%,rgba(253,249,242,.02) 100%),
    url("./images/hero-ti-cftv.webp") center right/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,transparent 0%,var(--brand-gold) 22%,var(--brand-brown) 55%,transparent 100%);
  opacity:.7;
}
.hero h1{color:#181716;text-shadow:0 1px 0 rgba(255,255,255,.3);}
.hero h1 .blue{color:var(--brand-brown);}
.hero p{color:#3e3934;}

.services{background:linear-gradient(180deg,#fff 0%,#fdfaf6 100%);}
.section-head h2,.regional h2,.cta h2{color:#201d1a;}
.service{
  border-color:#e7dccf;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(85,63,39,.045);
}
.service:hover{border-color:#cdb895;box-shadow:0 16px 36px rgba(85,63,39,.11);}
.service p{color:#625c55;}

.regional{background:linear-gradient(90deg,#fbf6ef,#f0e4d3,#fbf7f1);}
.bridge{border:1px solid rgba(148,118,78,.22);}
.regional .copy > p:last-of-type{color:#585149;}

.benefits{background:#fff;}
.benefit{border-color:#e6ddd2;}
.benefit svg{stroke:var(--brand-brown);}

.cta{background:linear-gradient(180deg,#fbf7f0,#f1e7d8);border-top:1px solid #e6dacb;}

/* Páginas internas */
.subhero{
  color:var(--brand-ink);
  background:
    radial-gradient(circle at 88% 18%,rgba(199,162,107,.20),transparent 25%),
    linear-gradient(135deg,#fffdf9 0%,#f3e8d7 56%,#e8d6ba 100%);
  border-bottom:1px solid rgba(148,118,78,.24);
}
.subhero:after{
  width:540px;height:540px;right:-140px;top:-245px;
  background:radial-gradient(circle,rgba(148,118,78,.20),transparent 66%);
}
.breadcrumb{color:#756b60;}
.breadcrumb a{color:var(--brand-brown-dark);}
.breadcrumb span{color:#aa8f6a;}
.subhero .lead{color:#514b44;}
.quick-card{background:linear-gradient(145deg,#fdfaf5,#f3e8d9);border-color:#e5d6c2;}
.card{border-color:#e5dbcf;border-radius:10px;}
.card:hover{border-color:#ccb491;}
.card .num{color:var(--brand-brown);}
.alt{background:linear-gradient(180deg,#fcfaf6,#f3ebdf);}
.step{border-color:#e3d7c8;border-radius:10px;}
.related{border-top-color:#eee5db;}
.related-links a{border-color:#d6c2a4;color:var(--brand-brown-dark);background:#fdf9f3;}
.related-links a:hover{background:#f3e7d6;}
.faq details{border-color:#e4d9cc;}

/* Rodapé escuro neutro, com dourado/marrom da identidade */
footer{background:linear-gradient(135deg,var(--brand-charcoal-2),#30271f);color:#fff;border-top:4px solid var(--brand-brown);}
.footer-brand img{width:225px;max-height:72px;object-fit:contain;object-position:left center;}
.footer-brand .brand-sub{color:#fff;margin-left:58px;margin-top:-6px;font-size:.49rem;}
.footer-brand p{color:#d9d2ca;}
footer h3{color:#d9b67d;}
footer a,footer .footer-col p{color:#ece7e1;}
.contact-line svg{stroke:#d7b67d;}
.contact-line .wa-svg{fill:#d7b67d;stroke:none;}
.social a{border-color:rgba(215,182,125,.72);color:#e0c18e;}
.copyright{border-top-color:rgba(255,255,255,.12);color:#d7d1cb;}

/* Foco acessível sem mudar comportamento */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(199,162,107,.55);outline-offset:3px;}

@media(max-width:1080px){
  header{height:92px;}
  .brand{min-width:240px;}
  .brand img{width:230px;max-height:69px;}
  .nav-links{top:92px!important;background:#fff!important;border-top:1px solid var(--brand-line);box-shadow:0 18px 35px rgba(50,37,24,.14);}
  .nav-links a,.nav-dropdown-toggle{color:var(--brand-ink)!important;}
  .nav-dropdown-menu{background:#f8f2e9!important;border-color:#dfcfb9!important;}
  .nav-dropdown-menu a{color:#2b2723!important;}
}
@media(max-width:640px){
  header{height:82px;}
  .brand{min-width:0;}
  .brand img{width:202px;max-height:60px;}
  .brand-sub{margin-left:54px;margin-top:-5px;font-size:.47rem;}
  .nav-links{top:82px!important;max-height:calc(100vh - 82px)!important;}
  .hero{min-height:520px;background-position:65% center;}
  .hero::before{content:"";position:absolute;inset:0;background:rgba(255,250,243,.16);pointer-events:none;}
  .hero-content{padding:58px 0 56px;}
  .hero h1{font-size:clamp(2.35rem,12vw,3.4rem);}
  .footer-brand img{width:210px;}
}

/* Home atual: seção Cases de Sucesso — apenas acabamento visual */
.cases{background:linear-gradient(180deg,#fff 0%,#fbf7f0 100%);}
.case-card{border-color:#e5dbcf!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(85,63,39,.045)!important;}
.case-card:hover{border-color:#cdb895!important;box-shadow:0 16px 36px rgba(85,63,39,.11)!important;}
.case-type,.case-domain{color:var(--brand-brown-dark)!important;}
.case-link{color:var(--brand-brown-dark)!important;}
.cases-cta .btn{background:linear-gradient(135deg,var(--brand-brown),var(--brand-brown-dark))!important;}

/* ==========================================================
   Bright IT — correção V2 fiel à prévia aprovada
   Somente visual. Ajusta topo, hero e brilhos.
   ========================================================== */

/* Topo com “balaquinhas” só na parte superior */
header{
  height:124px !important;
  display:block !important;
  position:sticky !important;
  top:0;
  background:linear-gradient(180deg,#ffffff 0%, #fffdf9 72%, #fbf6ee 100%) !important;
  border-bottom:1px solid rgba(148,118,78,.22) !important;
  box-shadow:0 8px 24px rgba(44,34,24,.08) !important;
  overflow:visible !important;
}
header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:74px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPGRlZnM+CiA8bGluZWFyR3JhZGllbnQgaWQ9ImcxIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+PHN0b3Agc3RvcC1jb2xvcj0iIzc1NTgzOCIvPjxzdG9wIG9mZnNldD0iLjQzIiBzdG9wLWNvbG9yPSIjY2Y5ZjY0Ii8+PHN0b3Agb2Zmc2V0PSIuNzYiIHN0b3AtY29sb3I9IiNmMGRhYjAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5YTc0NDQiLz48L2xpbmVhckdyYWRpZW50PgogPGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIHN0b3AtY29sb3I9IiNlN2Q1YmQiIHN0b3Atb3BhY2l0eT0iLjM1Ii8+PHN0b3Agb2Zmc2V0PSIuNTIiIHN0b3AtY29sb3I9IiNmOGVjZDgiIHN0b3Atb3BhY2l0eT0iLjk1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYzc5YTY2IiBzdG9wLW9wYWNpdHk9Ii40NSIvPjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHBhdGggZD0iTS03MCA0NiBDMTYwIDE4LCAzNjAgNDEsIDYwOCAzNiBDODUwIDMxLCAxMDQ2IDE0LCAxMjgwIDM1IEMxNDQxIDQ5LCAxNTI2IDQ4LCAxNjYwIDM0IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZzIpIiBzdHJva2Utd2lkdGg9IjE4IiBvcGFjaXR5PSIuOTIiLz4KPHBhdGggZD0iTS02MCA1NCBDMTgwIDIxLCAzODAgNTIsIDYxMiA0NyBDODQ4IDQyLCAxMDYwIDE5LCAxMjg0IDM3IEMxNDQwIDUwLCAxNTQwIDUwLCAxNjYwIDM2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZzEpIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0zMTAgNTUgQzUxNSA3MCwgNzA4IDI2LCA4ODAgMjQgQzEwMzggMjIsIDExOTYgNjIsIDEzNjAgNjAiIHRyYW5zZm9ybT0iIiBmaWxsPSJub25lIiBzdHJva2U9IiMxYzE5MTYiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iLjk0Ii8+CjxwYXRoIGQ9Ik0zNDAgNjAgQzU0OSA3NCwgNzIyIDM3LCA4OTEgMzUgQzEwNTAgMzMsIDExOTcgNjcsIDEzNTYgNjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q1YjE3NyIgc3Ryb2tlLXdpZHRoPSI2IiBvcGFjaXR5PSIuODgiLz4KPHBhdGggZD0iTS02MCA3NCBDMTg1IDYyLCA0MDYgNzUsIDY0NiA2OCBDODkyIDYxLCAxMTA0IDYxLCAxMzEyIDcwIEMxNDQ0IDc2LCAxNTQwIDc2LCAxNjYwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlNmQ4YzYiIHN0cm9rZS13aWR0aD0iNiIgb3BhY2l0eT0iLjY4Ii8+Cjwvc3ZnPg==");
  background-repeat:no-repeat;
  background-size:100% 74px;
  background-position:center top;
  pointer-events:none;
}
header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#b88e59 18%,#dbc29d 50%,#b88e59 82%,transparent);
  opacity:.72;
}
header .nav{
  position:relative;
  display:block !important;
  height:100%;
}
header .brand{
  position:absolute;
  left:0;
  top:16px;
  min-width:250px !important;
  z-index:2;
}
header .brand img{
  width:250px !important;
  max-height:68px !important;
  object-fit:contain;
  object-position:left center;
}
header .brand-sub{
  margin-top:-4px !important;
  margin-left:67px !important;
  font-size:.54rem !important;
  letter-spacing:.18em !important;
  color:#111 !important;
  white-space:nowrap;
}
header .nav > .btn{
  position:absolute;
  top:16px;
  right:0;
  z-index:2;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:8px !important;
}
header .nav-links{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:max-content;
  gap:34px;
  z-index:2;
}
header .nav-links a{
  color:var(--brand-ink) !important;
  font-size:.86rem;
}
header .nav-links a:hover{ color:var(--brand-brown-dark) !important; }
.menu-btn{ display:none !important; }

/* Hero fiel à prévia aprovada */
.hero{
  min-height:575px !important;
  color:var(--brand-ink) !important;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(252,248,241,.998) 0%, rgba(252,248,241,.985) 34%, rgba(252,248,241,.90) 44%, rgba(252,248,241,.42) 58%, rgba(252,248,241,.08) 74%, rgba(252,248,241,0) 100%),
    url("./images/hero-ti-cftv.webp") center right/cover no-repeat !important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjIwIj4KPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDZiMDcxIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9Ii4yOCI+CjxwYXRoIGQ9Ik0xMjAgMzUwTDE4NSAzMTJMMjQ4IDMzNkwzMTAgMjg0TDM3MiAzMTJMNDUyIDI1Mkw1MzAgMjg2TDYwMiAyMzZMNjc4IDI2Nkw3NTAgMjEyIi8+CjxwYXRoIGQ9Ik0xODUgMzEyTDE4NSAyNTBNMzEwIDI4NEwzMTAgMjQyTTQ1MiAyNTJMNDUyIDIxME02MDIgMjM2TDYwMiAxOTQiLz4KPHBhdGggZD0iTTYwIDQ1NkwxMjAgNDI0TDIwMCA0NTJMMjc4IDM5OEwzNTYgNDM0TDQzMiAzODBMNTA0IDQxNkw1ODAgMzYwTDY2MCAzOTRMNzMwIDM0OCIvPgo8L2c+CjxnIGZpbGw9IiNmZmY4ZWUiPgo8Y2lyY2xlIGN4PSIxODUiIGN5PSIzMTIiIHI9IjQiLz48Y2lyY2xlIGN4PSIyNDgiIGN5PSIzMzYiIHI9IjIiLjUiLz48Y2lyY2xlIGN4PSIzMTAiIGN5PSIyODQiIHI9IjQiLz48Y2lyY2xlIGN4PSIzNzIiIGN5PSIzMTIiIHI9IjIiLjUiLz48Y2lyY2xlIGN4PSI0NTIiIGN5PSIyNTIiIHI9IjQiLz48Y2lyY2xlIGN4PSI1MzAiIGN5PSIyODYiIHI9IjIiLjUiLz48Y2lyY2xlIGN4PSI2MDIiIGN5PSIyMzYiIHI9IjQiLz48Y2lyY2xlIGN4PSI2NzgiIGN5PSIyNjYiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjQyNCIgcj0iMyIvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjQ1MiIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iMjc4IiBjeT0iMzk4IiByPSIzIi8+PGNpcmNsZSBjeD0iMzU2IiBjeT0iNDM0IiByPSIyLjUiLz48Y2lyY2xlIGN4PSI0MzIiIGN5PSIzODAiIHI9IjMiLz48Y2lyY2xlIGN4PSI1MDQiIGN5PSI0MTYiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjU4MCIgY3k9IjM2MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjY2MCIgY3k9IjM5NCIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iNzMwIiBjeT0iMzQ4IiByPSIzIi8+CjwvZz4KPGcgc3Ryb2tlPSIjZmZmNmU4IiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iLjY4Ij4KPHBhdGggZD0iTTMwNCAyNzB2MjhNMjkwIDI4NGgyOCIvPjxwYXRoIGQ9Ik00NDYgMjM4djI4TTQzMiAyNTJoMjgiLz48cGF0aCBkPSJNNjAwIDIyMnYyNk01ODcgMjM1aDI2Ii8+PHBhdGggZD0iTTIwMCA0Mzh2MjJNMTg5IDQ0OWgyMiIvPgo8L2c+CjxnIGZpbGw9IiNlN2M1OGQiIG9wYWNpdHk9Ii41NSI+CjxjaXJjbGUgY3g9IjEwMCIgY3k9IjM0MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjE1NSIgY3k9IjQ2MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjM5MCIgY3k9IjM5MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjU0MCIgY3k9IjMyMCIgcj0iMiIvPjxjaXJjbGUgY3g9IjY5MiIgY3k9IjI5MiIgcj0iMiIvPgo8L2c+Cjwvc3ZnPg==");
  background-repeat:no-repeat;
  background-size:46% 74%;
  background-position:38% center;
  opacity:.58;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  height:86px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCIgeDI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNlYWRjYzEiLz48c3RvcCBvZmZzZXQ9Ii40OCIgc3RvcC1jb2xvcj0iI2M4OTM1OCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzZmNTAzMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPgo8cGF0aCBkPSJNODQwIDg5IEMxMDQ0IDc5IDEyMTAgNTYgMTM4NCAyNyBDMTQ5MiA5IDE1NjAgMTAgMTY0MCAyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2IpIiBzdHJva2Utd2lkdGg9IjEyIiBvcGFjaXR5PSIuOTMiLz4KPHBhdGggZD0iTTkyMCA4OSBDMTExMCA4MSAxMjU1IDY0IDE0MjAgNDEgQzE1MTYgMjggMTU3NiAyOSA2NDAgMzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2YwZGVjMCIgc3Ryb2tlLXdpZHRoPSI0IiBvcGFjaXR5PSIuOSIvPgo8cGF0aCBkPSJNMCA4OCBDMTUwIDc4IDI1MiA3OCAzNjIgODgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5OWI2MSIgc3Ryb2tlLXdpZHRoPSI4IiBvcGFjaXR5PSIuNjUiLz4KPC9zdmc+");
  background-repeat:no-repeat;
  background-size:100% 86px;
  background-position:center bottom;
  pointer-events:none;
  opacity:.92;
}
.hero .container,
.hero-content{position:relative;z-index:2;}
.hero-content{
  max-width:610px !important;
  padding:68px 0 62px !important;
}
.hero h1{
  font-size:clamp(3.65rem,5.45vw,5rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.055em !important;
  color:#141414 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.hero h1 .blue{ color:var(--brand-brown) !important; }
.hero p{
  max-width:540px !important;
  color:#4a443c !important;
  font-size:1rem !important;
  line-height:1.45 !important;
  margin-bottom:28px !important;
}
.hero .btn{
  min-height:54px;
  padding:0 22px;
  font-size:1rem;
  border-radius:8px;
}

/* Pequenos acabamentos para combinar com a prévia */
.services{border-top:1px solid rgba(199,162,107,.18) !important;}
.section-head .eyebrow{letter-spacing:.18em;}

@media (max-width:1180px){
  header .brand img{width:235px !important;}
  header .nav-links{gap:24px;}
}

@media (max-width:980px){
  header{
    height:92px !important;
    display:flex !important;
    align-items:center;
  }
  header::before{
    height:56px;
    background-size:145% 56px;
    background-position:center top;
    opacity:.86;
  }
  header .nav{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    height:auto;
  }
  header .brand{
    position:static;
    min-width:0 !important;
  }
  header .brand img{width:208px !important;max-height:58px !important;}
  header .brand-sub{margin-left:56px !important;font-size:.45rem !important;}
  header .nav > .btn{display:none !important;}
  .menu-btn{display:block !important;position:relative;z-index:5;}
  header .nav-links{
    display:none;
    position:absolute;
    left:0 !important;
    right:0 !important;
    top:92px !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    padding:22px 24px;
    background:#fff !important;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    border-top:1px solid var(--brand-line);
    box-shadow:0 18px 35px rgba(50,37,24,.14);
  }
  header .nav-links.open{display:flex;}
  .hero{
    min-height:560px !important;
    background-position:64% center !important;
  }
  .hero::before{
    background-size:68% 70%;
    background-position:28% center;
    opacity:.46;
  }
  .hero::after{
    height:68px;
    background-size:120% 68px;
    background-position:center bottom;
  }
  .hero-content{max-width:520px !important;padding:60px 0 56px !important;}
  .hero h1{font-size:clamp(2.95rem,8vw,4rem) !important;}
}

@media (max-width:640px){
  header{height:82px !important;}
  header::before{height:46px;background-size:180% 46px;opacity:.8;}
  header .brand img{width:185px !important;max-height:52px !important;}
  header .brand-sub{display:none;}
  header .nav-links{top:82px !important;max-height:calc(100vh - 82px) !important;overflow:auto;}
  .hero{
    min-height:520px !important;
    background-position:69% center !important;
  }
  .hero::before{
    background-size:100% 72%;
    background-position:16% center;
    opacity:.33;
  }
  .hero::after{
    height:54px;
    background-size:145% 54px;
    background-position:72% bottom;
  }
  .hero-content{padding:52px 0 52px !important;max-width:92% !important;}
  .hero h1{font-size:clamp(2.35rem,11vw,3.35rem) !important;}
  .hero p{font-size:.95rem !important;}
}

/* =====================================================================
   Bright IT — V3: usa a arte APROVADA como visual real no desktop
   ---------------------------------------------------------------------
   O HTML, textos, links, SEO e scripts continuam os mesmos.
   No desktop, cabeçalho e hero recebem as duas faixas da arte aprovada
   como backgrounds, enquanto os links originais permanecem clicáveis.
   Em telas menores, o layout responsivo normal continua ativo.
   ===================================================================== */

@media (min-width:981px){
  /* CABEÇALHO: imagem aprovada, proporcional */
  header{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1672 / 160 !important;
    max-height:none !important;
    display:block !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    background:#fff url("./images/brightit-header-aprovado.webp") center center / 100% 100% no-repeat !important;
    border:0 !important;
    box-shadow:0 3px 12px rgba(54,39,24,.08) !important;
    overflow:visible !important;
  }
  header::before,
  header::after{display:none !important;content:none !important;}

  header .container.nav{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    position:relative !important;
  }

  /* Logo já faz parte da imagem; o link original continua sobre ele */
  header .brand{
    position:absolute !important;
    left:12.1% !important;
    top:8% !important;
    width:23.8% !important;
    height:51% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    z-index:4 !important;
    cursor:pointer !important;
  }
  header .brand img,
  header .brand-sub{
    opacity:0 !important;
    visibility:visible !important;
  }

  /* Menu real, transparente e posicionado sobre o menu desenhado */
  header .nav-links{
    position:absolute !important;
    left:26.0% !important;
    top:63.5% !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    height:31% !important;
    display:flex !important;
    align-items:center !important;
    gap:25px !important;
    padding:0 !important;
    margin:0 !important;
    z-index:5 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  header .nav-links a{
    display:inline-flex !important;
    align-items:center !important;
    min-height:34px !important;
    padding:0 3px !important;
    margin:0 !important;
    color:transparent !important;
    text-shadow:none !important;
    background:transparent !important;
    border:0 !important;
    font-size:.86rem !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
  }
  header .nav-links a:hover,
  header .nav-links a:focus{color:transparent !important;background:transparent !important;}
  header .nav-links a::before,
  header .nav-links a::after{display:none !important;content:none !important;}

  /* WhatsApp desenhado na arte; mantém o link real por cima */
  header .nav > .btn{
    position:absolute !important;
    right:.8% !important;
    top:60.2% !important;
    width:8.9% !important;
    height:32% !important;
    min-width:115px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    z-index:6 !important;
    opacity:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    cursor:pointer !important;
  }
  header .nav > .btn:hover{transform:none !important;}
  header .menu-btn{display:none !important;}

  /* HERO: usa exatamente a faixa hero da arte aprovada */
  .hero{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1672 / 600 !important;
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:#faf6ef url("./images/brightit-hero-aprovado.webp") center center / 100% 100% no-repeat !important;
    color:transparent !important;
  }
  .hero::before,
  .hero::after{display:none !important;content:none !important;}

  .hero > .container{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    z-index:3 !important;
  }
  .hero-content{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* O texto original permanece no HTML/SEO, mas a arte aprovada já o exibe */
  .hero h1,
  .hero p{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  /* Mantém clicável o botão desenhado dentro da imagem */
  .hero .btn{
    position:absolute !important;
    left:10.1% !important;
    top:83.6% !important;
    width:23.1% !important;
    height:8.0% !important;
    min-width:270px !important;
    min-height:43px !important;
    padding:0 !important;
    margin:0 !important;
    opacity:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    cursor:pointer !important;
  }
  .hero .btn:hover{transform:none !important;}

  /* O começo da próxima seção deve encostar na arte como na prévia */
  .services{margin-top:0 !important;}
}

/* ==========================================================
   Bright IT — V4 ajustes visuais finais aprovados
   - novo logotipo completo
   - favicon cérebro/lâmpada
   - no desktop, cabeçalho com botão WhatsApp apenas
   - remoção visual da seta em SERVIÇOS
   ========================================================== */

/* Usa o logotipo completo nas áreas em que a imagem real aparece */
.brand-sub,
.footer-brand .brand-sub{
  display:none !important;
}
.brand img{
  width:330px !important;
  max-height:78px !important;
  height:auto !important;
  object-fit:contain;
  object-position:left center;
}
.footer-brand img{
  width:300px !important;
  max-height:72px !important;
  height:auto !important;
  object-fit:contain;
  object-position:left center;
}

/* Remove visualmente a seta do item Serviços no menu real */
.nav-links a:nth-child(2){
  font-size:0 !important;
  letter-spacing:0 !important;
}
.nav-links a:nth-child(2)::before{
  content:"SERVIÇOS";
  font-size:.86rem;
  font-weight:800;
  color:currentColor;
  letter-spacing:normal;
}

/* Desktop: mantém a arte aprovada do cabeçalho já ajustada */
@media (min-width:981px){
  header{
    background:#fff url("./images/brightit-header-aprovado.webp") center center / 100% 100% no-repeat !important;
  }
}

@media (max-width:1080px){
  .brand img{width:275px !important;max-height:68px !important;}
  .footer-brand img{width:270px !important;}
}
@media (max-width:640px){
  .brand img{width:215px !important;max-height:56px !important;}
  .footer-brand img{width:230px !important;}
  .nav-links a:nth-child(2)::before{font-size:.86rem;}
}

/* ==========================================================
   Bright IT — V5 correção funcional do cabeçalho/menu
   Mantém a arte aprovada, mas usa os elementos HTML reais
   para navegação, hover e links corretos.
   ========================================================== */

/* Remove a setinha do botão Serviços nas páginas internas */
.nav-dropdown-toggle > span[aria-hidden="true"]{
  display:none !important;
}

@media (min-width:981px){
  /* Fundo do cabeçalho passa a ser apenas decorativo (sem textos/botões embutidos) */
  header{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1672 / 160 !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    background:#fbf9f5 url("./images/brightit-header-aprovado.webp") center center / 100% 100% no-repeat !important;
    border:0 !important;
    box-shadow:0 3px 12px rgba(54,39,24,.08) !important;
    overflow:visible !important;
  }
  header::before,
  header::after{
    display:none !important;
    content:none !important;
  }

  header .container.nav{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
  }

  /* Logo real e clicável */
  header .brand{
    position:absolute !important;
    left:12.2% !important;
    top:10% !important;
    width:25.5% !important;
    max-width:430px !important;
    min-width:315px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    z-index:5 !important;
  }
  header .brand img{
    display:block !important;
    width:100% !important;
    max-width:430px !important;
    max-height:88px !important;
    height:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  header .brand-sub{display:none !important;}

  /* Menu real: cada link volta a ser o próprio alvo clicável */
  header .nav-links{
    position:absolute !important;
    left:50% !important;
    bottom:9.5% !important;
    top:auto !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:32px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    z-index:8 !important;
  }
  header .nav-links > a,
  header .nav-dropdown-toggle{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:auto !important;
    min-height:34px !important;
    padding:0 2px 5px !important;
    margin:0 !important;
    color:#1b1a18 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-transform:uppercase !important;
    text-shadow:none !important;
    white-space:nowrap !important;
    opacity:1 !important;
    visibility:visible !important;
    cursor:pointer !important;
    transition:color .18s ease !important;
  }

  /* Home: elimina o caractere ⌄ que está no texto HTML sem alterar o href */
  header .nav-links > a:nth-child(2){
    font-size:0 !important;
  }
  header .nav-links > a:nth-child(2)::before{
    content:"SERVIÇOS" !important;
    display:inline !important;
    color:inherit !important;
    font-family:"Manrope",Arial,sans-serif !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  /* Hover visível em todos os itens de menu */
  header .nav-links > a::after,
  header .nav-dropdown-toggle::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    width:0 !important;
    height:2px !important;
    background:var(--brand-brown) !important;
    transform:translateX(-50%) !important;
    transition:width .18s ease !important;
  }
  header .nav-links > a:hover,
  header .nav-links > a:focus-visible,
  header .nav-dropdown-toggle:hover,
  header .nav-dropdown-toggle:focus-visible,
  header .nav-dropdown.open .nav-dropdown-toggle{
    color:var(--brand-brown-dark) !important;
  }
  header .nav-links > a:hover::after,
  header .nav-links > a:focus-visible::after,
  header .nav-dropdown-toggle:hover::after,
  header .nav-dropdown-toggle:focus-visible::after,
  header .nav-dropdown.open .nav-dropdown-toggle::after{
    width:100% !important;
  }
  /* Início ativo apenas na Home */
  body:has(.hero) header .nav-links > a:first-child{
    color:var(--brand-brown-dark) !important;
  }
  body:has(.hero) header .nav-links > a:first-child::after{
    width:100% !important;
  }

  /* Dropdown das páginas internas permanece funcional */
  header .nav-dropdown{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    height:auto !important;
  }
  header .nav-dropdown-menu{
    top:calc(100% + 10px) !important;
    left:50% !important;
    transform:translateX(-50%) translateY(8px) !important;
    z-index:2000 !important;
  }
  header .nav-dropdown.open .nav-dropdown-menu{
    transform:translateX(-50%) translateY(0) !important;
  }
  header .nav-dropdown-menu a{
    color:#2c2722 !important;
    font-size:.78rem !important;
    text-transform:none !important;
  }
  header .nav-dropdown-menu a:hover{
    color:var(--brand-brown-dark) !important;
    background:var(--brand-cream) !important;
  }

  /* Botão real do WhatsApp no canto superior direito */
  header .nav > .btn{
    position:absolute !important;
    top:13% !important;
    right:1.15% !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:46px !important;
    padding:0 18px !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    opacity:1 !important;
    visibility:visible !important;
    color:#fff !important;
    background:linear-gradient(135deg,var(--brand-brown),var(--brand-brown-dark)) !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:0 8px 20px rgba(115,87,56,.18) !important;
    transform:none !important;
    font-size:.86rem !important;
    font-weight:800 !important;
    cursor:pointer !important;
    z-index:10 !important;
    transition:background .18s ease, transform .18s ease, box-shadow .18s ease !important;
  }
  header .nav > .btn:hover,
  header .nav > .btn:focus-visible{
    background:linear-gradient(135deg,var(--brand-brown-dark),#5f462d) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 10px 24px rgba(115,87,56,.22) !important;
  }
  header .nav > .btn .wa-svg{
    display:block !important;
    width:19px !important;
    height:19px !important;
    fill:currentColor !important;
  }

  header .menu-btn{display:none !important;}
}

/* Mobile/tablet: também remove a setinha da Home e mantém hover/foco visual */
@media (max-width:980px){
  .nav-links > a:nth-child(2){font-size:0 !important;}
  .nav-links > a:nth-child(2)::before{
    content:"SERVIÇOS" !important;
    display:inline !important;
    font-size:.86rem !important;
    font-weight:800 !important;
    color:inherit !important;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible,
  .nav-dropdown-toggle:hover,
  .nav-dropdown-toggle:focus-visible{
    color:var(--brand-brown-dark) !important;
  }
}

/* ==========================================================
   Bright IT — V6 estado ATIVO do menu
   Mantém o hover da V5 e destaca a seção escolhida.
   ========================================================== */

/* HOME — ao navegar para outra seção, remove o destaque fixo de Início */
body:has(.hero):has(#servicos:target) header .nav-links > a:first-child,
body:has(.hero):has(#cases:target) header .nav-links > a:first-child,
body:has(.hero):has(#sobre:target) header .nav-links > a:first-child,
body:has(.hero):has(#contato:target) header .nav-links > a:first-child{
  color:#1b1a18 !important;
}
body:has(.hero):has(#servicos:target) header .nav-links > a:first-child::after,
body:has(.hero):has(#cases:target) header .nav-links > a:first-child::after,
body:has(.hero):has(#sobre:target) header .nav-links > a:first-child::after,
body:has(.hero):has(#contato:target) header .nav-links > a:first-child::after{
  width:0 !important;
}

/* HOME — item correspondente à seção atual fica marcado */
body:has(#inicio:target) header .nav-links > a[href="#inicio"],
body:has(#servicos:target) header .nav-links > a[href="#servicos"],
body:has(#cases:target) header .nav-links > a[href="#cases"],
body:has(#sobre:target) header .nav-links > a[href="#sobre"],
body:has(#contato:target) header .nav-links > a[href="#contato"]{
  color:var(--brand-brown-dark) !important;
}
body:has(#inicio:target) header .nav-links > a[href="#inicio"]::after,
body:has(#servicos:target) header .nav-links > a[href="#servicos"]::after,
body:has(#cases:target) header .nav-links > a[href="#cases"]::after,
body:has(#sobre:target) header .nav-links > a[href="#sobre"]::after,
body:has(#contato:target) header .nav-links > a[href="#contato"]::after{
  width:100% !important;
}

/* PÁGINAS DE SERVIÇO — Serviços fica ativo por padrão */
body:has(.subhero):not(:has(#contato:target)) header .nav-dropdown-toggle{
  color:var(--brand-brown-dark) !important;
}
body:has(.subhero):not(:has(#contato:target)) header .nav-dropdown-toggle::after{
  width:100% !important;
}

/* Nas páginas internas, ao clicar em Contato, transfere o destaque para Contato */
body:has(.subhero):has(#contato:target) header .nav-dropdown-toggle{
  color:#1b1a18 !important;
}
body:has(.subhero):has(#contato:target) header .nav-dropdown-toggle::after{
  width:0 !important;
}
body:has(.subhero):has(#contato:target) header .nav-links > a[href="#contato"]{
  color:var(--brand-brown-dark) !important;
}
body:has(.subhero):has(#contato:target) header .nav-links > a[href="#contato"]::after{
  width:100% !important;
}

/* Tablet/celular: mantém a indicação de item ativo também no menu aberto */
@media (max-width:980px){
  body:has(.hero):has(#servicos:target) .nav-links > a[href="#servicos"],
  body:has(.hero):has(#cases:target) .nav-links > a[href="#cases"],
  body:has(.hero):has(#sobre:target) .nav-links > a[href="#sobre"],
  body:has(.hero):has(#contato:target) .nav-links > a[href="#contato"],
  body:has(.subhero):not(:has(#contato:target)) .nav-dropdown-toggle,
  body:has(.subhero):has(#contato:target) .nav-links > a[href="#contato"]{
    color:var(--brand-brown-dark) !important;
    font-weight:800 !important;
  }
}

/* ==========================================================
   Bright IT — V8 ajustes mobile + rodapé
   1) Restaura proporção do logotipo no celular sem alterar layout.
   2) Rodapé usa logotipo com “SOLUÇÕES EM TECNOLOGIA” branco.
   ========================================================== */

/* Rodapé: arquivo exclusivo com subtítulo branco */
.footer-brand img{
  width:300px !important;
  max-width:100% !important;
  height:auto !important;
  max-height:72px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

/* Celular: não muda a estrutura do header; apenas corrige o tamanho do novo logo */
@media (max-width:640px){
  header .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    flex:0 1 auto !important;
  }
  header .brand img{
    width:180px !important;
    max-width:56vw !important;
    height:auto !important;
    max-height:50px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .footer-brand img{
    width:230px !important;
    max-height:60px !important;
  }
}

/* Celulares mais estreitos */
@media (max-width:390px){
  header .brand img{
    width:168px !important;
    max-width:54vw !important;
  }
}

/* ==========================================================
   Bright IT — V9 cabeçalho mobile fiel à identidade desktop
   SOMENTE VISUAL: mantém estrutura, links, menu e scripts da V8.
   ========================================================== */

/* Tablet e mobile: mesmo conceito visual do cabeçalho aprovado */
@media (max-width:980px){
  header{
    height:112px !important;
    min-height:112px !important;
    display:flex !important;
    align-items:center !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    overflow:visible !important;
    background:#fbf8f2 url("./images/brightit-header-waves-mobile.webp?v=20261005-v10") center top / cover no-repeat !important;
    border-bottom:1px solid rgba(148,118,78,.28) !important;
    box-shadow:0 4px 14px rgba(44,34,24,.08) !important;
  }
  header::before,
  header::after{
    display:none !important;
    content:none !important;
  }
  header .container.nav{
    width:min(calc(100% - 28px), var(--container)) !important;
    height:100% !important;
    margin-inline:auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    position:relative !important;
  }
  header .brand{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    z-index:4 !important;
  }
  header .brand img{
    width:310px !important;
    max-width:72vw !important;
    max-height:84px !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:left center !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  header .brand-sub{display:none !important;}

  /* O botão WhatsApp do topo continua oculto no layout compacto */
  header .nav > .btn{display:none !important;}

  /* Hambúrguer preservado e integrado à nova identidade */
  header .menu-btn{
    display:grid !important;
    place-items:center !important;
    position:relative !important;
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(148,118,78,.42) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.90) !important;
    color:var(--brand-brown-dark) !important;
    box-shadow:0 5px 16px rgba(80,58,35,.10) !important;
    font-size:1.75rem !important;
    line-height:1 !important;
    z-index:6 !important;
  }
  header .menu-btn:hover,
  header .menu-btn:focus-visible{
    color:#fff !important;
    background:var(--brand-brown) !important;
    border-color:var(--brand-brown) !important;
  }

  /* Menu aberto começa abaixo do novo cabeçalho */
  header .nav-links{
    top:112px !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-height:calc(100vh - 112px) !important;
  }
}

/* Celulares */
@media (max-width:640px){
  header{
    height:102px !important;
    min-height:102px !important;
    background-position:center top !important;
    background-size:auto 102px !important;
  }
  header .container.nav{
    width:calc(100% - 22px) !important;
    gap:10px !important;
  }
  header .brand img{
    width:285px !important;
    max-width:76vw !important;
    max-height:76px !important;
  }
  header .menu-btn{
    flex-basis:54px !important;
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    font-size:1.6rem !important;
    border-radius:9px !important;
  }
  header .nav-links{
    top:102px !important;
    max-height:calc(100vh - 102px) !important;
  }
}

/* Celulares estreitos */
@media (max-width:390px){
  header{height:94px !important;min-height:94px !important;background-size:auto 94px !important;}
  header .container.nav{width:calc(100% - 18px) !important;}
  header .brand img{
    width:245px !important;
    max-width:72vw !important;
    max-height:68px !important;
  }
  header .menu-btn{
    flex-basis:50px !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    font-size:1.5rem !important;
  }
  header .nav-links{
    top:94px !important;
    max-height:calc(100vh - 94px) !important;
  }
}

/* ==========================================================
   Bright IT — V11 cabeçalho mobile explícito em HTML/CSS
   ----------------------------------------------------------
   O cabeçalho compacto deixa de depender das regras herdadas
   do cabeçalho desktop. A estrutura mobile é própria no HTML.
   ========================================================== */

/* Estrutura mobile existe no HTML, mas fica fora do desktop */
.mobile-header-explicit{
  display:none;
}

@media (max-width:980px){
  /* Cabeçalho passa a ser um contêiner previsível e independente */
  header{
    height:108px !important;
    min-height:108px !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    display:block !important;
    overflow:visible !important;
    background:#fbf8f2 !important;
    background-image:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(148,118,78,.28) !important;
    box-shadow:0 4px 14px rgba(44,34,24,.08) !important;
  }
  header::before,
  header::after{
    display:none !important;
    content:none !important;
  }

  /* Cabeçalho mobile verdadeiro: arte + logo + hambúrguer */
  .mobile-header-explicit{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:108px !important;
    min-height:108px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fbf8f2 !important;
    z-index:3 !important;
  }
  .mobile-header-ribbons{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:108px !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center top !important;
    pointer-events:none !important;
    user-select:none !important;
    z-index:0 !important;
  }
  .mobile-brand{
    display:block !important;
    position:absolute !important;
    left:22px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:min(330px, calc(100vw - 112px)) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2 !important;
  }
  .mobile-brand img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    max-height:82px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .mobile-header-explicit .mobile-menu-btn{
    display:grid !important;
    place-items:center !important;
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:58px !important;
    min-width:58px !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(148,118,78,.42) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.94) !important;
    color:var(--brand-brown-dark) !important;
    box-shadow:0 5px 16px rgba(80,58,35,.10) !important;
    font-family:Arial,sans-serif !important;
    font-size:1.75rem !important;
    font-weight:400 !important;
    line-height:1 !important;
    z-index:4 !important;
  }
  .mobile-header-explicit .mobile-menu-btn:hover,
  .mobile-header-explicit .mobile-menu-btn:focus-visible{
    color:#fff !important;
    background:var(--brand-brown) !important;
    border-color:var(--brand-brown) !important;
  }

  /* A estrutura desktop permanece no DOM apenas para fornecer o menu real */
  header > .container.nav{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  header > .container.nav > .brand,
  header > .container.nav > .btn,
  header > .container.nav > .menu-btn{
    display:none !important;
  }

  /* Menu funcional é o menu HTML original, aberto abaixo do novo cabeçalho */
  header .nav-links{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    bottom:auto !important;
    width:100% !important;
    max-height:calc(100vh - 108px) !important;
    margin:0 !important;
    padding:22px 24px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
    background:#fff !important;
    border-top:1px solid var(--brand-line) !important;
    box-shadow:0 18px 35px rgba(50,37,24,.14) !important;
    overflow:auto !important;
    transform:none !important;
    z-index:2000 !important;
  }
  header .nav-links.open{
    display:flex !important;
  }
  header .nav-links > a,
  header .nav-dropdown-toggle{
    color:var(--brand-ink) !important;
  }

  /* Dropdown de Serviços nas páginas internas, sem seta e adaptado ao mobile */
  header .nav-dropdown{
    width:100% !important;
  }
  header .nav-dropdown-toggle{
    width:auto !important;
    padding:0 !important;
    text-align:left !important;
  }
  header .nav-dropdown-toggle > span[aria-hidden="true"]{
    display:none !important;
  }
  header .nav-dropdown-menu{
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    margin:10px 0 0 !important;
    transform:none !important;
    box-shadow:none !important;
    border:1px solid var(--brand-line) !important;
  }
  header .nav-dropdown:not(.open) .nav-dropdown-menu{
    display:none !important;
  }
  header .nav-dropdown.open .nav-dropdown-menu{
    display:block !important;
    transform:none !important;
  }
}

@media (max-width:640px){
  header,
  .mobile-header-explicit{
    height:100px !important;
    min-height:100px !important;
  }
  .mobile-header-ribbons{
    height:100px !important;
    object-position:center top !important;
  }
  .mobile-brand{
    left:18px !important;
    width:min(300px, calc(100vw - 96px)) !important;
  }
  .mobile-brand img{
    max-height:74px !important;
  }
  .mobile-header-explicit .mobile-menu-btn{
    right:14px !important;
    width:54px !important;
    min-width:54px !important;
    height:54px !important;
    min-height:54px !important;
    font-size:1.6rem !important;
  }
  header .nav-links{
    max-height:calc(100vh - 100px) !important;
  }
}

@media (max-width:390px){
  header,
  .mobile-header-explicit{
    height:94px !important;
    min-height:94px !important;
  }
  .mobile-header-ribbons{
    height:94px !important;
  }
  .mobile-brand{
    left:14px !important;
    width:min(270px, calc(100vw - 86px)) !important;
  }
  .mobile-brand img{
    max-height:68px !important;
  }
  .mobile-header-explicit .mobile-menu-btn{
    right:11px !important;
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    font-size:1.5rem !important;
    border-radius:9px !important;
  }
  header .nav-links{
    max-height:calc(100vh - 94px) !important;
  }
}