/* ============ MOBILE FIRST HELPERS ============ */
/* Ajustes gerais */
@media (max-width: 1080px){
  /* evita “pulo” sob o header fixo */
  #header-spacer{ height: calc(var(--topbar-h, 44px) + 72px); }
}

/* ============ HEADER & MENU ============ */
@media (max-width: 920px){
  /* Topbar mais compacta */
  .topbar .wrap{ padding: .4rem .9rem; }
  .topbar .left,.topbar .right{ gap:.6rem; }

  /* Header em 2 linhas: logo acima, menu abaixo (rolável) */
  #header-wrap .nav{
    grid-template-columns: 1fr;         /* quebra a linha */
    gap: 10px;
    padding-block: 10px;
  }
  #header-wrap .logo{ justify-content:center; }
  #header-wrap .logo img{ height: 48px; }

  #header-wrap .mainbar{
    justify-content:flex-start;
    overflow-x:auto;                     /* rolagem horizontal do menu */
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 4px;
  }
  #header-wrap .menu{
    display:flex; gap:16px; margin:0; padding:0 4px 2px;
  }
  #header-wrap .menu > li > a{
    display:block; padding:.55rem .7rem; border-radius:10px;
    background:#fff; border:1px solid var(--divider,#d9e2ea);
    font-weight:700; white-space:nowrap;
  }

  /* Submenus viram bloco expansível em fluxo (sem posição absoluta) */
  .submenu{
    position: static !important;
    opacity: 1 !important;
    transform:none !important;
    pointer-events:auto !important;
    min-width: 0; padding:.25rem 0 0;
    background: transparent; box-shadow:none; border:none;
  }
  .submenu a{
    padding:.45rem 0; border-left:0; display:block;
    font-weight:600; font-size:.95rem;
  }
}

/* ============ HERO / SEÇÕES EM GERAL ============ */
@media (max-width: 920px){
  .hero-dinamico{ min-height: 56vh; }
  main{ padding: calc(var(--topbar-h,44px) + 70px) 1rem 0; }


}

/* ============ BLOCO “QUEM SOMOS” (cards em 1 coluna) ============ */
@media (max-width: 780px){
  .wrap-somos{ grid-template-columns: 1fr; gap:22px; }
  .grid-somos{ grid-template-columns: 1fr; gap:22px; }
  .right-somos{
    border-left:0; 
    padding-top:18px; padding-left:0;
  }

  .main-somos {
    background: #fff;
    padding: 0px 20px;
}
}

/* ============ LISTA/GRID DE NOTÍCIAS E CHECKLIST ============ */
@media (max-width: 900px){
  .container{ flex-direction: column; }
  .news-section{
    width: 100%;
    grid-template-columns: 1fr;  /* 1 coluna no mobile */
    margin: 20px 0 0;
  }
  .news-section .news-item:nth-child(3){
    grid-column: auto; margin: 12px 0 0;
  }
  .checkbox-list{
    width: 100%; margin: 18px 0 28px;
  }
}

/* ============ “MODELO DE NEGÓCIO” (lado a lado -> empilhado) ============ */
@media (max-width: 960px){
  .container-negocio{
    flex-direction: column; height: auto; width: 92%; margin: 16px 4%;
  }
  .esquerda{ min-height: 38vh; }
  .direita{ padding: 28px 20px; gap: 22px; }
  .item{ margin-left: 0; gap: 14px; }
  .icone-wrapper{ min-width:72px; min-height:72px; box-shadow:0 0 0 4px #e5e5e5; }
  .texto h3{ font-size: 18px; }
  .texto p{ font-size: 15px; }
}

/* ============ “SÓCIOS” (cards 100%) ============ */
@media (max-width: 680px){
  .centro-quem-somos{ width: 92%; margin: 24px 4%; }
  .box-socio{ width: 100%; float:none; max-width: 520px; margin: 0 auto 18px; }
  .box-socio img{ width: 120px; height:120px; }
}

/* ============ TIMELINE / COMENTÁRIOS (margens e fontes) ============ */
@media (max-width: 700px){
  .time1,.time2,.time3{ width: 100%; float:none; margin: 24px 0 0; }
  .linha-time{ height: 3px; }
  .coments{ width: 92%; margin: 0 4%; }
  .icone-comentario{ width: 16%; }
  .texto-comentatio{ width: 84%; padding: 18px; }
}

/* ============ FOOTER ============ */
@media (max-width: 900px){
  .footer-wrap{ grid-template-columns: 1fr; gap: 18px; padding: 36px 18px 22px; }
  .wheels img{ max-width: 320px; }
  .social{ justify-content: flex-start; }
  .box-footer{ min-height: 540px; }
  .frase{ font-size: 26px; margin-left: 0; padding: 0 6%; }
  .autor{ margin-left: 0; padding: 0 6%; }
  .logo-footer{ width: 100%; }
  .contato{ width: 92%; margin: 24px 4%; }
  .qrcode{ width: 60%; float:none; margin: 18px auto 0; }
}

/* ============ DASHBOARD / ANALÍTICOS (colunas -> empilhado) ============ */
@media (max-width: 980px){
  .analise_eixos{ flex-direction: column; gap: 18px; }
  .resultado_geral{ width: 100%; flex: 0 0 auto; }
  .info_eixos{ width: 100%; min-width: 0; }
  .box_temal{ max-width: 100%; float:none; }
  .modular{ width: 100%; height:auto; float:none; }
}


/* =========================
   HERO — Mobile (texto sobre imagem)
   ========================= */
@media (max-width: 768px){

/* ===== FIX: Header branco 100% (sem transparência) ===== */
.header::after {
  background: #fff !important;      /* fundo branco sólido */
  opacity: 1 !important;            /* 100% visível */
  box-shadow: 0 4px 10px rgba(0,0,0,.06); /* sombra leve opcional */
}

/* garante que o topo e os menus não herdem transparência */
.header, 
#header-wrap.sticky .header,
#header-wrap.menu-hover .header {
  background: #fff !important;
}

/* caso alguma variável de cor esteja sobrepondo */
.header::before {
  background: none !important;
  opacity: 0 !important;
}


  .hero-atv{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* imagem: cobre o fundo */
  .hero-atv__photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* cobre toda a área sem distorcer */
    object-position: center;    /* centraliza a parte mais importante da imagem */
    z-index: 0;
  }

  /* gradiente leve para melhorar legibilidade do texto */
  .hero-atv::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 40%, transparent 80%);
    z-index:1;
  }

  /* conteúdo: agora sobre a imagem */
  .hero-atv__inner{
    position: relative;
    z-index: 2;
    padding: clamp(60px, 18vh, 140px) 20px 80px; /* topo e base bem equilibrados */
    color: #fff;
    text-align: left;
  }

  .hero-atv__title,
  .hero-atv__sub{
    color: #fff;
    text-shadow: 0 3px 8px rgba(0,0,0,0.35);
  }

  .hero-atv__lozenge{ display:none; } /* esconde o losango no mobile */
  .hero-atv__glow{ opacity:0.4; }      /* reduz brilho */
  .hero-atv__wave{ display:none; }     /* remove a onda inferior */
}

  @media (max-width: 768px){
  .pv-grid{
    display: block;
    margin-top: 30px;
  }

  .diamond2-home{
  display: none;
  height: 1px;
}
}


/* ================================
   MENU HAMBÚRGUER — Mobile
===================================*/
@media (max-width: 768px){

  /* Botão hamburguer */
  .nav-toggle{
    grid-column: 1 / 2;
    justify-self: start;
    align-self: center;
    width: 42px; height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content: "";
    display: block;
    width: 20px; height: 2px;
    background: #111;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
    position: relative;
  }
  .nav-toggle__bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle__bar::after { position:absolute; top: 6px; left:0; }

  /* Estado “X” quando aberto */
  #header-wrap.menu-open .nav-toggle__bar{
    transform: rotate(45deg);
  }
  #header-wrap.menu-open .nav-toggle__bar::before{
    transform: rotate(-90deg) translateX(-6px);
  }
  #header-wrap.menu-open .nav-toggle__bar::after{
    opacity: 0;
  }

  /* Overlay de fundo */
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 94;
  }
  /* atributo [hidden] some o overlay */
  .nav-overlay[hidden]{ display: none !important; }

  /* Painel lateral do menu */
  .mainbar{
    position: fixed;
    top: calc(var(--topbar-h) + 56px);     /* abaixo do header */
    left: 0; bottom: 0;
    width: min(86%, 360px);
    transform: translateX(-105%);
    transition: transform .28s ease;
    background: #fff;
    border-right: 1px solid #eef2f6;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    padding: .75rem;
    z-index: 95;
    display: block;                        /* sobrescreve grid desktop */
  }

  /* Abre o painel */
  #header-wrap.menu-open .mainbar{
    transform: translateX(0);
  }

  /* Lista vertical no off-canvas */
  .menu{
    display: block;
    overflow: auto;
    max-height: calc(100dvh - 120px);
    padding: .25rem 0 1rem;
  }
  .menu > li{
    list-style: none;
    border-radius: 10px;
  }
  .menu > li > a{
    display: block;
    font-weight: 800;
    font-size: 1.02rem;
    color: #111; text-decoration: none;
    padding: .8rem .7rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e9eef3;
    margin-bottom: .55rem;
  }

  /* Indicador de submenu (setinha) */
  .menu > li.has-sub > a{
    position: relative;
    padding-right: 2.2rem;
  }
  .menu > li.has-sub > a::after{
    content: "";
    position: absolute; right: .8rem; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid #111; border-bottom: 2px solid #111;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .2s ease;
  }

  /* Submenu como acordeão */
  .submenu{
    position: static;              /* tira o fixed do mobile anterior */
    transform: none;
    opacity: 1; pointer-events: auto;
    background: transparent;
    border: 0; box-shadow: none;
    padding: 0 .25rem .5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .24s ease;
  }
  .submenu a{
    padding: .65rem .8rem;
    border-radius: 8px;
    color: #111; text-decoration: none;
    display: block;
  }
  .submenu a:hover{
    background: #f7fafc;
    border-left: 3px solid var(--neon);
    padding-left: 1rem;
  }

  /* Estado aberto do acordeão (classe aplicada via JS) */
  .menu .is-open > .submenu{
    max-height: 600px; /* valor grande suficiente */
  }
  .menu .is-open > a::after{
    transform: translateY(-50%) rotate(45deg);
  }

  /* Evitar pulo e travar scroll do body quando o menu abre */
  body.lock-scroll{
    overflow: hidden;
    touch-action: none;
  }

  /* Ajusta o espaçador quando o header é fixed */
  #header-spacer{ height: calc(var(--topbar-h) + 64px); }

  /* Garante a visibilidade da faixa do header sobre imagem */
  .header::after{ opacity: 1; background: #ffffffee; }
}


@media (max-width: 768px){
  .mainbar{
    position: fixed;
    top: calc(var(--topbar-h) + 50px);
    left: 0;
    bottom: 0;
    width: 80%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s ease;
    padding: 1rem;
    overflow-y: auto;
    z-index: 95;
  }

  #header-wrap.menu-open .mainbar{
    transform: translateX(0);
  }

  .menu{
    display: block;
    margin: 0; padding: 0;
  }

  .menu > li{
    list-style: none;
    border-bottom: 1px solid #eee;
  }

  .menu > li > a{
    display: block;
    padding: 1rem .5rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
  }

  .submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }

  .menu > li.is-open > .submenu{
    max-height: 400px; /* expande quando abre */
  }

  .submenu a{
    display: block;
    padding: .75rem 1rem;
    color: #333;
    font-weight: 500;
  }

  /* Overlay escuro */
  .nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 90;
  }
  .nav-overlay[hidden]{ display: none !important; }

  /* Travar rolagem quando aberto */
  body.lock-scroll{ overflow: hidden; }
}


/* === LOGO colorido no mobile (evita "logo branco") === */
@media (max-width: 768px){
  .logo img{ filter: none !important; }
  .header:hover .logo img,
  .header.open .logo img{ filter: none !important; }
}

/* === Botão hambúrguer e off-canvas (se ainda não tiver) === */
@media (max-width: 768px){
  .nav{
    grid-template-columns: 42px 1fr 42px; /* espaço pro botão + logo central */
    align-items: center;
  }
  .nav-toggle{
    grid-column: 1/2;
    justify-self: start;
    width: 42px; height: 42px;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; display: inline-flex; align-items:center; justify-content:center;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:""; display:block; width:20px; height:2px; background:#111; border-radius:2px;
    position:relative; transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle__bar::after { position:absolute; top: 6px; left:0; }
  #header-wrap.menu-open .nav-toggle__bar{ transform: rotate(45deg); }
  #header-wrap.menu-open .nav-toggle__bar::before{ transform: rotate(-90deg) translateX(-6px); }
  #header-wrap.menu-open .nav-toggle__bar::after{ opacity:0; }

  /* Painel lateral do menu (fica escondido até abrir) */
  .mainbar{
    position: fixed;
    top: calc(var(--topbar-h) + 56px);
    left: 0; bottom: 0; width: min(86%, 360px);
    background:#fff; border-right:1px solid #eef2f6;
    transform: translateX(-105%); transition: transform .28s ease;
    padding:.75rem; z-index:95; overflow:auto; display:block;
  }
  #header-wrap.menu-open .mainbar{ transform: translateX(0); }

  /* Lista vertical + acordeão */
  .menu{ display:block; margin:0; padding:0; }
  .menu > li{ list-style:none; }
  .menu > li > a{
    display:block; padding:.85rem .7rem; margin-bottom:.55rem;
    font-weight:800; color:#111; text-decoration:none;
    border:1px solid #e9eef3; background:#fff; border-radius:10px;
  }
  .submenu{
    position: static; max-height:0; overflow:hidden; padding:0 .25rem;
    transition: max-height .24s ease;
  }
  .menu > li.is-open > .submenu{ max-height: 600px; }
  .submenu a{ display:block; padding:.65rem .8rem; color:#111; text-decoration:none; }
  .submenu a:hover{ background:#f7fafc; border-left:3px solid var(--neon); padding-left:1rem; }

  /* Overlay para clicar fora */
  .nav-overlay{
    position: fixed; inset:0; background: rgba(0,0,0,.35); z-index:90;
  }
  .nav-overlay[hidden]{ display:none !important; }

  /* Travar scroll ao abrir */
  body.lock-scroll{ overflow:hidden; touch-action:none; }
}

@media (max-width: 768px){
  /* grade: logo no centro, botão à direita */
  .nav{
    grid-template-columns: 1fr auto 42px;  /* esquerda | logo | botão */
    align-items: center;
    position: relative;
    z-index: 2; /* acima da faixa branca */
  }

  .logo{ grid-column: 2 / 3; justify-self: center; }
  .logo img{ height: 44px; filter:none !important; }

  .nav-toggle{
    grid-column: 3 / 4;
    justify-self: end;
    width: 42px; height: 42px;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background:#fff; display:inline-flex; align-items:center; justify-content:center;
    z-index: 3; /* garante clique acima de tudo */
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:""; display:block; width:20px; height:2px; background:#111; border-radius:2px;
    position:relative; transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle__bar::after { position:absolute; top: 6px; left:0; }
  #header-wrap.menu-open .nav-toggle__bar{ transform: rotate(45deg); }
  #header-wrap.menu-open .nav-toggle__bar::before{ transform: rotate(-90deg) translateX(-6px); }
  #header-wrap.menu-open .nav-toggle__bar::after{ opacity:0; }

  /* painel off-canvas */
  .mainbar{
    position: fixed;
    top: calc(var(--topbar-h) + 56px);
    right: 0;                     /* desliza da DIREITA */
    left: auto;
    bottom: 0;
    width: min(86%, 360px);
    background:#fff;
    border-left: 1px solid #eef2f6;
    transform: translateX(105%);  /* escondido à direita */
    transition: transform .28s ease;
    padding: .75rem;
    z-index: 95;
    overflow-y: auto;
    display:block;
  }
  #header-wrap.menu-open .mainbar{ transform: translateX(0); }

  /* lista + acordeão */
  .menu{ display:block; margin:0; padding:0; }
  .menu > li{ list-style:none; }
  .menu > li > a{
    display:block; padding:.85rem .75rem; margin-bottom:.55rem;
    font-weight:800; color:#111; text-decoration:none;
    border:1px solid #e9eef3; background:#fff; border-radius:10px;
  }
  .menu > li.has-sub > a{ position:relative; padding-right:2rem; }
  .menu > li.has-sub > a::after{
    content:""; position:absolute; right:.8rem; top:50%;
    width:8px; height:8px; border-right:2px solid #111; border-bottom:2px solid #111;
    transform: translateY(-50%) rotate(-45deg); transition: transform .2s ease;
  }

  .submenu{
    position: static; max-height:0; overflow:hidden; padding:0 .25rem;
    transition:max-height .24s ease;
  }
  .menu > li.is-open > .submenu{ max-height: 600px; }
  .menu > li.is-open > a::after{ transform: translateY(-50%) rotate(45deg); }
  .submenu a{ display:block; padding:.65rem .9rem; color:#111; text-decoration:none; }
  .submenu a:hover{ background:#f7fafc; border-left:3px solid var(--neon); padding-left:1.1rem; }

  /* overlay e scroll-lock */
  .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:90; }
  .nav-overlay[hidden]{ display:none !important; }
  body.lock-scroll{ overflow:hidden; touch-action:none; }

  /* faixa branca do header visível no mobile */
  .header::after{ opacity:1; background:#ffffffee; }
}

/* ================================
   MOBILE: Menu e Submenu em LISTA
===================================*/
@media (max-width:768px){

  /* Painel off-canvas (mantém da direita, sem espaço “morto”) */
  .mainbar{
    position: fixed;
    top: calc(var(--topbar-h) + 56px);
    right: 0; left: auto; bottom: 0;
    width: min(86%, 360px);
    background:#fff;
    border-left: 1px solid #eef2f6;
    transform: translateX(105%);
    transition: transform .28s ease;
    padding: 0;                 /* sem padding para lista encostar */
    z-index: 95;
    overflow-y: auto;
    display: block;
  }
  #header-wrap.menu-open .mainbar{ transform: translateX(0); }

  /* LISTA — nível 1 */
  .menu{
    display:block;
    margin:0; padding:0;
    list-style:none;
  }
  .menu > li{
    list-style:none;
    margin:0; padding:0;
    border-bottom: 1px solid #f0f3f6;
  }

  /* Link do nível 1 como “row” (texto à esquerda, seta à direita) */
  .menu > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;

    width:100%;
    padding: 14px 16px;
    font: 800 1.02rem/1.2 Montserrat, system-ui, sans-serif;
    color:#111; text-decoration:none;

    background: transparent;
    border: 0; border-radius: 0;
    box-shadow: none;
    margin:0;
  }
  /* Seta à direita */
  .menu > li.has-sub > a::after{
    content:"";
    width: 8px; height: 8px;
    border-right: 2px solid #111; border-bottom: 2px solid #111;
    transform: rotate(-45deg);
    transition: transform .2s ease;
  }
  /* Rotaciona seta quando aberto */
  .menu > li.is-open > a::after{
    transform: rotate(45deg);
  }

  /* SUBMENU — lista “aninhada” */
  .submenu{
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
    padding: 0;                 /* sem padding externo */
    background: #fff;
  }
  .menu > li.is-open > .submenu{
    max-height: 800px;          /* valor grande para expandir */
  }

  /* Itens do submenu como linhas simples */
  .submenu a{
    display:block;
    padding: 12px 20px 12px 28px;   /* leve recuo à esquerda */
    font: 600 .98rem/1.25 Montserrat, system-ui, sans-serif;
    color:#222; text-decoration:none;
    border-top: 1px dashed #eceff3;
    background: transparent;
  }
  .submenu a:hover{
    background:#f8fafc;
  }

  /* Overlay e bloqueio de scroll permanecem */
  .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:90; }
  .nav-overlay[hidden]{ display:none !important; }
  body.lock-scroll{ overflow:hidden; touch-action:none; }

  /* Botão à direita (mantém) */
  .nav{
    grid-template-columns: 1fr auto 42px;
    align-items:center;
  }
  .logo{ grid-column: 2/3; justify-self:center; }
  .logo img{ height:44px; filter:none !important; }

  .nav-toggle{
    grid-column: 3/4; justify-self:end;
    width:42px; height:42px;
    border:1px solid #e2e8f0; border-radius:10px;
    background:#fff; display:inline-flex; align-items:center; justify-content:center;
    z-index:3;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:""; display:block; width:20px; height:2px; background:#111; border-radius:2px;
    position:relative; transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle__bar::after { position:absolute; top: 6px; left:0; }
  #header-wrap.menu-open .nav-toggle__bar{ transform: rotate(45deg); }
  #header-wrap.menu-open .nav-toggle__bar::before{ transform: rotate(-90deg) translateX(-6px); }
  #header-wrap.menu-open .nav-toggle__bar::after{ opacity:0; }

  /* Faixa branca do header visível (contraste sobre o banner) */
  .header::after{ opacity:1; background:#ffffffee; }
}

/* =========================================
   OVERRIDE MOBILE — LISTA VERTICAL TOTAL
   (força lista; mata pílulas e carrossel)
========================================= */
@media (max-width:768px){

  .area_cliente_mobile{
  display: block;
float: right;
margin-right: 15px;
}

  /* Botão à direita + logo central */
  .nav{ grid-template-columns: 1fr auto 42px; align-items: center; }
  .logo{ grid-column: 2/3; justify-self: center; }
  .logo img{ height:44px; filter:none !important; }

  .nav-toggle{
    grid-column: 3/4; justify-self: end;
    width:42px; height:42px; z-index:3;
    background:#fff; border:1px solid #e2e8f0; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:""; display:block; width:20px; height:2px; background:#111; border-radius:2px;
    position:relative; transition:transform .2s, opacity .2s;
  }
  .nav-toggle__bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle__bar::after { position:absolute; top: 6px; left:0; }
  #header-wrap.menu-open .nav-toggle__bar{ transform: rotate(45deg); }
  #header-wrap.menu-open .nav-toggle__bar::before{ transform: rotate(-90deg) translateX(-6px); }
  #header-wrap.menu-open .nav-toggle__bar::after{ opacity:0; }

  /* Painel off-canvas (abre da direita) */
  .mainbar{
    position: fixed !important;
    top: calc(var(--topbar-h) + 56px); right:0; left:auto; bottom:0;
    width: min(86%, 360px);
    background:#fff; border-left:1px solid #eef2f6;
    transform: translateX(105%); transition: transform .28s ease;
    padding: 0 !important;               /* sem acolchoamento externo */
    z-index: 100 !important;
    overflow-y: auto;
    display:block !important;            /* força aparecer */
  }
  #header-wrap.menu-open .mainbar{ transform: translateX(0); }

  /* Mata “carrossel de pílulas” do nível 1 */
  .nav .mainbar .menu{
    display:block !important;
    overflow: visible !important;
    white-space: normal !important;
    gap: 0 !important;
    margin:0 !important; padding:0 !important;
    list-style:none;
  }
  .nav .mainbar .menu > li{
    list-style:none; margin:0; padding:0;
    border-bottom:1px solid #f0f3f6;
  }

  /* Link do nível 1: linha cheia, com seta à direita */
  .nav .mainbar .menu > li > a{
    display:flex !important;
    align-items:center; justify-content:space-between;
    gap:.75rem;
    width:100% !important;
    padding:14px 16px !important;
    font: 800 1.02rem/1.2 Montserrat,system-ui,sans-serif !important;
    color:#111 !important; text-decoration:none !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .nav .mainbar .menu > li.has-sub > a::after{
    content:""; flex:0 0 auto;
    width:8px; height:8px;
    border-right:2px solid #111; border-bottom:2px solid #111;
    transform: rotate(-45deg); transition: transform .2s ease;
  }
  .nav .mainbar .menu > li.is-open > a::after{ transform: rotate(45deg); }

  /* SUBMENU: lista recuada, colapsável */
  .nav .mainbar .submenu{
    position: static !important;
    max-height: 0; overflow: hidden;
    transition: max-height .22s ease;
    padding: 0 !important; margin: 0 !important;
    background: #fff;
    /* remove qualquer sombra/box anterior */
    box-shadow: none !important; border: 0 !important;
  }
  .nav .mainbar .menu > li.is-open > .submenu{ max-height: 800px; }

  .nav .mainbar .submenu a{
    display:block !important;
    padding:12px 20px 12px 28px !important;  /* recuo esquerdo */
    font: 600 .98rem/1.25 Montserrat,system-ui,sans-serif !important;
    color:#222 !important; text-decoration:none !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    border-top:1px dashed #eceff3;
  }
  .nav .mainbar .submenu a:hover{ background:#f8fafc; }

  /* Overlay e bloqueio de rolagem */
  .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:90; }
  .nav-overlay[hidden]{ display:none !important; }
  body.lock-scroll{ overflow:hidden; touch-action:none; }

  /* Faixa branca do header por cima do banner */
  .header::after{ opacity:1; background:#ffffffee; }
}