/* ==========================================================
   BASE MÍNIMA - estrutura solicitada
   ========================================================== */

:root{
  --bg:#000000;
  --surface:#ffffff;
  --footer:#1e73be;

  --maxw:1600px;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
}

/* Reset enxuto */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:#e8f6ff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Layout helpers */
.container{max-width:var(--maxw); margin-inline:auto; padding:0 var(--space-4)}
main > section{background:transparent}
main > section > .container{background:var(--surface); padding:var(--space-8) var(--space-4)}

/* Header */
header.header{background:transparent}
header.header > .container{background:var(--surface); padding:var(--space-6) var(--space-4)}

/* Footer */
footer{background:transparent; color:#fff}
.footer-brand > .container,
.footer-links > .container{background:var(--footer); padding:var(--space-8) var(--space-4)}

/* ===== header (módulo) ===== */
.header .header-wrap{display:flex; align-items:center; justify-content:space-between}
.header .brand{display:flex; gap:.75rem; align-items:center; color:#111}
.header .brand img{width:40px; height:auto}
.header .brand .brand-text{font-weight:700; font-size:1rem}

.header .menu{list-style:none; margin:0; padding:0; display:flex; gap:2rem; align-items:center}
.header .menu a{padding:.5rem .6rem; border-radius:8px}
.header .menu a:hover{background:#f1f6fb}
.header .btn-primary{background:#1e73be; color:#fff; padding:.6rem 1rem; border-radius:999px}
.header .btn-primary:hover{background:#155fa0}

/* ===== header mega menu ===== */
.header .menu > li{position:relative}
.header .menu > li.has-mega > a{position:relative}
.header .menu > li.has-mega .mega{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:900px;
  background:#2f3b46; color:#fff; border-radius:8px; padding:16px 20px;
  box-shadow:0 12px 36px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); z-index:60;
}
.header .menu > li.has-mega:hover .mega,
.header .menu > li.has-mega:focus-within .mega{display:block}
.header .mega{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px}
.header .mega strong{display:block; margin:4px 0 6px; font-weight:700}
.header .mega ul{margin:0 0 10px 0; padding:0; list-style:disc inside}
.header .mega a{color:#fff}
.header .mega a:hover{text-decoration:underline}

/* ===== header v2 ===== */
.header .topbar{display:flex; justify-content:flex-end; align-items:center; gap:.25rem; padding:.35rem 0; border-bottom:1px solid #e5e5e5; font-size:14px}
.header .topbar .quick{list-style:none; margin:0; padding:0; display:flex; align-items:center}
.header .topbar .quick li{display:flex; align-items:center}
.header .topbar .quick li + li::before{content:"|"; color:#9db9d8; margin:0 12px}
.header .topbar a{color:#1e73be}
.header .topbar .social{display:flex; gap:.5rem; margin-left:12px}
.header .topbar .social a{width:28px; height:28px; border-radius:50%; border:1.5px solid #b7cbe2; display:grid; place-items:center; font-size:12px}

.header .brand-row{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid #e5e5e5}
.header .brand-row .brand{display:flex; gap:.75rem; align-items:center; color:#111}
.header .brand-row .brand img{width:56px; height:auto}
.header .brand-row .brand strong{font-size:22px; letter-spacing:.3px}

.header .mainnav{position:relative; padding:0; border-bottom:1px solid #e5e5e5}
.header .mainnav .menubar{display:flex; justify-content:center; align-items:center; gap:2rem; margin:0; padding:.6rem 0; list-style:none}
.header .mainnav .menubar > li{position:relative}
.header .mainnav .menubar > li > a{display:block; padding:.6rem 0; color:#6b7280; text-transform:uppercase; font-weight:600; letter-spacing:.4px; position:relative}
.header .mainnav .menubar > li:hover > a{color:#111}

/* mega alinhado ao item */
.header .mainnav .menubar > li.has-mega{position:relative}
.header .mainnav .menubar > li.has-mega .mega{
  left:auto; right:0; transform:none; width:900px; top:100%;
  background:#2d3943; color:#fff; border-radius:3px; padding:20px 22px;
  box-shadow:0 18px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
}

/* dropdown simples (Ikebana) */
.header .mainnav .menubar > li.has-dd{position:relative}
.header .mainnav .menubar > li.has-dd .dd{
  display:none; position:absolute; top:100%; right:0; width:260px;
  background:#2d3943; color:#fff; border-radius:3px; padding:10px 0;
  box-shadow:0 18px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); z-index:60;
}
.header .mainnav .menubar > li.has-dd .dd a{display:block; padding:4px 16px; color:#fff}
.header .mainnav .menubar > li.has-dd .dd a:hover{background:rgba(255,255,255,.06)}
.header .mainnav .menubar > li.has-dd:hover .dd,
.header .mainnav .menubar > li.has-dd:focus-within .dd{display:block}
.header .mainnav .menubar > li.has-dd[aria-expanded="true"] .dd{display:block}

/* ===== header layout v3 (logo ESQ, menus DIR) ===== */
.header .masthead{display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center}
.header .masthead .col-left{display:flex; align-items:center}
.header .masthead .brand img{width:auto; height:65px}
.header .masthead .col-right{display:grid; grid-template-rows:auto auto; align-items:center}
.header .masthead .topbar{display:flex; justify-content:flex-end; align-items:center; gap:.25rem; padding:.35rem 0; border-bottom:none}
.header .masthead .topbar .quick{list-style:none; margin:0; padding:0; display:flex; align-items:center}
.header .masthead .topbar .quick li{display:flex; align-items:center}
.header .masthead .topbar .quick li + li::before{content:"|"; color:#9db9d8; margin:0 12px}
.header .masthead .topbar a{color:#1e73be}

/* Ícones sociais pintados via mask na cor institucional */
.header .masthead .topbar .social a{position:relative}
.header .masthead .topbar .social a img{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.header .masthead .topbar .social a:hover{background:#f1f6fb}
.header .masthead .topbar .social a::after{
  content:""; width:16px; height:16px; display:block;
  background:#777;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
          mask-size:contain;         mask-repeat:no-repeat;         mask-position:center;
}
.header .masthead .topbar .social a[href*="facebook.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
}
.header .masthead .topbar .social a[href*="instagram.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
}
.header .masthead .topbar .social a[href*="youtube.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');
}

.header .masthead .mainnav{border-bottom:1px solid #e5e5e5; padding:0}
.header .masthead .mainnav .menubar{justify-content:flex-end}

/* ===== hover/underline refinado (desktop) ===== */
.header .mainnav .menubar > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:#cfd4da; opacity:1; transition:background-color .15s ease;
}
.header .mainnav .menubar > li:hover > a::after,
.header .mainnav .menubar > li[aria-expanded="true"] > a::after{background:#f6a623}








/* ===== banner ===== */ 
#banner > .container{padding:0}
#banner .banner-carousel{position:relative}
#banner .slides{position:relative; width:100%; aspect-ratio:16/6.3; overflow:hidden; border-radius:0}
#banner .slide{margin:0; display:block; position:absolute; inset:0; opacity:0; transition:opacity .8s ease}
#banner .slide.is-active{opacity:1; z-index:1}
#banner .slide img{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
#banner .slide[data-focus="center"] img{object-position:50% 50%}
#banner .slide[data-focus="top"] img{object-position:50% 20%}
#banner .slide[data-focus="bottom"] img{object-position:50% 80%}
#banner .slide[data-focus="left"] img{object-position:20% 50%}
#banner .slide[data-focus="right"] img{object-position:80% 50%}
#banner .slide[data-focus="top-left"] img{object-position:25% 25%}
#banner .slide[data-focus="top-right"] img{object-position:75% 25%}
#banner .slide[data-focus="bottom-left"] img{object-position:25% 75%}
#banner .slide[data-focus="bottom-right"] img{object-position:75% 75%}
@supports not (aspect-ratio:16 / 6.3){
  #banner .slides{position:relative; height:0; padding-top:39.375%}
  #banner .slide{position:absolute; inset:0}
}


/* ===== banner (controles) ===== */
#banner .banner-carousel{position:relative}
#banner .banner-controls{pointer-events:none}
#banner .banner-nav{
  pointer-events:auto;
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(0,0,0,.38); color:#fff; font-size:20px; line-height:1;
  display:grid; place-items:center;
}
#banner .banner-nav:hover{background:rgba(0,0,0,.5)}
#banner .banner-nav.prev{left:10px}
#banner .banner-nav.next{right:10px}

/* Dots centralizados */
#banner .banner-dots{
  pointer-events:auto;
  position:absolute; z-index:5; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:10px; margin:0; padding:6px 10px; list-style:none;
  background:rgba(0,0,0,.25); border-radius:999px;
}
#banner .banner-dots button{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:#e5e7eb; opacity:.8;
}
#banner .banner-dots button[aria-current="true"]{
  background:#f6a623; opacity:1; transform:scale(1.15);
}

/* Mobile */
@media (max-width:600px){
  #banner .banner-nav{width:36px; height:36px; font-size:18px}
  #banner .banner-dots{bottom:8px; gap:8px; padding:4px 8px}
  #banner .banner-dots button{width:8px; height:8px}
}










/* ===== apresentação ===== */
#apresentacao .apresentacao-grid{display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:clamp(1rem,3vw,3rem); align-items:center}
#apresentacao .media{overflow:hidden; border-radius:4px}
#apresentacao .media img{width:100%; height:auto; display:block}
#apresentacao h2{margin:0 0 .5rem; font-size:clamp(2rem,3.2vw,3rem); line-height:1.1; letter-spacing:.02em; color:#5f6670; font-weight:700; text-transform:uppercase}
#apresentacao .texto p{margin:.6rem 0; color:#5a5f69; font-size:1.0625rem; line-height:1.75}
#apresentacao .btn-saiba{display:inline-block; margin-top:1rem; padding:.85rem 1.4rem; border-radius:6px; color:#fff; font-weight:600; background:linear-gradient(180deg,#4a73b9,#3a5ea1); box-shadow:0 12px 34px rgba(46,160,67,.18)}
#apresentacao .btn-saiba:hover{filter:brightness(1.05); transform:translateY(-1px)}
#apresentacao .frase{text-align:center; margin-top:clamp(2rem,4vw,3rem)}
#apresentacao .frase blockquote{margin:0 auto; max-width:1200px; font-size:clamp(1.6rem,1vw,2.6rem); line-height:1.25; font-weight:700; color:#111}
#apresentacao .frase cite{display:block; margin-top:.75rem; color:#7a7f88; font-style:normal}
@media (max-width:920px){
  #apresentacao .apresentacao-grid{grid-template-columns:1fr}
  #apresentacao .texto{padding-top:.5rem}
}

/* ===== áreas de atuação ===== */
#areas-de-atuacao .areas-title{font-size:clamp(2rem,3.2vw,3rem); color:#5f6670; margin:0 0 1rem 0; font-weight:700}
#areas-de-atuacao .area-feature{position:relative; margin-bottom:1.25rem}
#areas-de-atuacao .feature-image{margin:0}
#areas-de-atuacao .feature-image img{width:100%; height:100%; max-height:560px; object-fit:cover; display:block}
#areas-de-atuacao .feature-overlay{
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:min(560px,58%); background:rgba(45,57,67,.82); color:#fff; padding:22px 26px; border-radius:4px;
  box-shadow:0 26px 40px rgba(0,0,0,.35);
}
#areas-de-atuacao .feature-overlay h3{margin:0 0 .5rem; font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:800}
#areas-de-atuacao .feature-overlay p{margin:.25rem 0 1rem; line-height:1.55}
#areas-de-atuacao .areas-btn{display:inline-block; background:linear-gradient(180deg,#4a73b9,#3a5ea1); color:#fff; font-weight:700; padding:.85rem 1.3rem; border-radius:6px; box-shadow:0 14px 36px rgba(65,186,104,.22)}
#areas-de-atuacao .areas-btn:hover{filter:brightness(1.05)}

#areas-de-atuacao .areas-carousel{position:relative; padding:0 56px}
#areas-de-atuacao .areas-strip{margin:0; padding:0; list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,22%,320px); gap:12px; overflow-x:auto; scroll-behavior:smooth}
#areas-de-atuacao .areas-strip::-webkit-scrollbar{height:10px}
#areas-de-atuacao .areas-strip::-webkit-scrollbar-thumb{background:#d3d3d3; border-radius:999px}
#areas-de-atuacao .area-card{position:relative; border-radius:3px; overflow:hidden; cursor:pointer}
#areas-de-atuacao .area-card figure{margin:0; aspect-ratio:16/9}
#areas-de-atuacao .area-card img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(.9) brightness(.9)}
#areas-de-atuacao .area-card .label{position:absolute; inset:auto 10px 10px 10px; color:#fff; font-weight:800; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.65); font-size:1.1rem}
#areas-de-atuacao .area-card.is-active img{filter:none}
#areas-de-atuacao .areas-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:120px; border:0; cursor:pointer; background:#bdbdbd; color:#fff; font-size:22px; display:grid; place-items:center; border-radius:6px}
#areas-de-atuacao .areas-nav.prev{left:5px}
#areas-de-atuacao .areas-nav.next{right:5px}
#areas-de-atuacao .areas-nav:hover{background:#9e9e9e}
@media (max-width:960px){
  #areas-de-atuacao .feature-overlay{position:static; transform:none; width:auto; margin-top:-64px}
  #areas-de-atuacao .areas-carousel{padding:0 40px}
}
#areas-de-atuacao > .container{
  padding-left:clamp(1.5rem,4vw,4rem);
  padding-right:clamp(1.5rem,4vw,4rem);
}




/* Transição suave do destaque das Áreas de atuação */
#areas-de-atuacao .area-feature{
  transition: opacity .28s ease;
}
#areas-de-atuacao .area-feature.is-fading{
  opacity: 0;
}

/* Respeita usuários com motion reduzido */
@media (prefers-reduced-motion: reduce){
  #areas-de-atuacao .area-feature{ transition: none; }
}





/* ===== banner-auxiliar ===== */
#banner-auxiliar > .container{padding:100px 0}
#banner-auxiliar .aux-banner{margin:0}
#banner-auxiliar .aux-banner img{width:100%; height:auto; display:block}

/* ===== últimas notícias ===== */
#ultimas-noticias .news-header h2{margin:0; font-size:clamp(2rem,3.2vw,3rem); color:#5f6670; font-weight:700}
#ultimas-noticias .news-header p{margin:.25rem 0 1.25rem; color:#6b717c}
#ultimas-noticias .news-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.25rem,3vw,2.5rem); align-items:start}
#ultimas-noticias .news-feature{display:block}
#ultimas-noticias .news-feature .media{margin:0 0 .75rem; aspect-ratio:16/11; overflow:hidden; border-radius:2px}
#ultimas-noticias .news-feature .media img{width:100%; height:100%; object-fit:cover}
#ultimas-noticias .news-feature .title{margin:.25rem 0 .35rem; font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:800; color:#2a2e35}
#ultimas-noticias .news-feature .excerpt{margin:0 0 .75rem; color:#5a5f69; line-height:1.65}
#ultimas-noticias .news-feature .date{color:#7b808a; font-size:.95rem}
#ultimas-noticias .news-list{display:grid; gap:1.25rem}
#ultimas-noticias .news-item{display:grid; grid-template-columns:1fr 220px; gap:1rem; align-items:center; border-radius:2px}
#ultimas-noticias .news-item .thumb{margin:0; aspect-ratio:16/11; overflow:hidden; border-radius:2px}
#ultimas-noticias .news-item .thumb img{width:100%; height:100%; object-fit:cover}
#ultimas-noticias .news-item .title{margin:0 0 .25rem; font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:800; color:#2a2e35}
#ultimas-noticias .news-item .excerpt{margin:0 0 .5rem; color:#5a5f69}
#ultimas-noticias .news-item .date{color:#7b808a; font-size:.93rem}
#ultimas-noticias .news-more{display:flex; justify-content:center; margin-top:clamp(1.25rem,3vw,2rem)}
#ultimas-noticias .btn-more{display:inline-block; padding:.9rem 1.6rem; border-radius:6px; color:#fff; font-weight:700; background:linear-gradient(180deg,#4a73b9,#3a5ea1); box-shadow:0 12px 30px rgba(65,186,104,.18)}
#ultimas-noticias .btn-more:hover{filter:brightness(1.05)}
@media (max-width:980px){
  #ultimas-noticias .news-grid{grid-template-columns:1fr}
  #ultimas-noticias .news-item{grid-template-columns:1fr 180px}
}
#ultimas-noticias > .container{
  padding-left:clamp(1.5rem,4vw,4rem);
  padding-right:clamp(1.5rem,4vw,4rem);
}

/* ===== footer ===== */
footer .footer-brand > .container{background:#3b8fd3; color:#fff}
footer .fb-wrap{display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center}
footer .fb-logo img{height:56px; /* filter:brightness(0) invert(1) */}
footer .fb-text{margin:0; line-height:1.6; /* max-width:760px */}
footer .fb-social{display:flex; gap:14px}
footer .fb-social a{width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.95); display:grid; place-items:center}
footer .fb-social a::after{content:""; width:20px; height:20px; background:#fff; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
footer .fb-social a[href*="facebook.com"]::after{ -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); }
footer .fb-social a[href*="instagram.com"]::after{ -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); }
footer .fb-social a[href*="youtube.com"]::after{ -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg'); }
footer .fb-social a:hover{background:rgba(255,255,255,.12)}

footer .footer-links > .container{background:#0d62a6; color:#fff}
footer .fl-grid{display:grid; grid-template-columns:1fr 1fr 1.4fr 1fr 1fr; gap:2.5rem}
footer .fl-grid .col{position:relative}
footer .fl-grid .col + .col::before{content:""; position:absolute; left:-1.25rem; top:.75rem; bottom:.75rem; width:2px; background:rgba(255,255,255,.45)}
footer .fl-grid h5{margin:.25rem 0 1rem; font-size:.95rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff}
footer .fl-grid .group{margin:.6rem 0 1rem}
footer .fl-grid .group strong{display:block; font-size:.9rem; margin:.5rem 0 .35rem}
footer .fl-grid ul{margin:.25rem 0 0; padding-left:1.1rem; list-style:disc}
footer .fl-grid a{color:#fff; opacity:.9; display:inline-block; padding:.15rem 0}
footer .fl-grid a:hover{opacity:1; text-decoration:underline}
footer .footer-copy > .container{background:#0e3b59; color:#cbd5e1; text-align:center; padding:.6rem 1rem; font-size:.9rem}
@media (max-width:980px){
  footer .fb-wrap{grid-template-columns:1fr; text-align:center}
  footer .fb-social{justify-content:center}
  footer .fl-grid{grid-template-columns:1fr 1fr}
  footer .fl-grid .col + .col::before{display:none}
}

/* --- Anti-overflow geral --- */
html, body{overflow-x:hidden}
.container{width:100%}




/* ===== Botão do menu (hambúrguer sem Unicode) ===== */
.mainnav .nav-toggle{display:none; align-items:center; justify-content:center; gap:.5rem; background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:.5rem .8rem; font-size:1.1rem; cursor:pointer}
.mainnav .nav-toggle .bars,
.mainnav .nav-toggle .bars::before,
.mainnav .nav-toggle .bars::after{content:""; display:block; width:22px; height:2px; background:#6b7280; border-radius:2px}
.mainnav .nav-toggle .bars{position:relative}
.mainnav .nav-toggle .bars::before{position:absolute; top:-6px; left:0}
.mainnav .nav-toggle .bars::after{position:absolute; top:6px; left:0}




/* ========= MOBILE/TABLET (<= 980px) ========= */
@media (max-width:980px){

  /* Cabeçalho vira 2 linhas (grid) */
  .header .masthead{grid-template-columns:1fr}
  .header .masthead .col-left{justify-content:center}

  /* A coluna da direita passa a ter 2 linhas e 2 colunas */
  .header .masthead .col-right{
    display:grid;
    grid-template-columns:1fr auto;   /* ícones ESQ / botão DIR */
    grid-template-rows:auto auto;     /* quick (linha 1) / ícones+botão (linha 2) */
    align-items:center;
    row-gap:8px;
  }

  /* Só a topbar vira "contents" para distribuir quick/social.
     A MAINNAV permanece bloco para ancorar o painel mobile. */
  .header .masthead .topbar{display:contents}

  /* Linha 1: links "quick" ocupam a largura toda */
  .header .masthead .topbar .quick{
    grid-column:1 / -1;
    display:flex; flex-wrap:wrap; gap:10px 16px;
    margin:0; padding:0; list-style:none; justify-content:flex-start;
  }
  .header .masthead .topbar .quick li + li::before{content:none}

  /* Linha 2 (esquerda): ícones sociais */
  .header .masthead .topbar .social{
    grid-row:2; grid-column:1;
    display:flex; gap:12px; margin-left:0; justify-content:flex-start;
  }

  /* Linha 2 (direita): botão do menu */
  .header .masthead .mainnav{
    grid-row:2; grid-column:1 / -1;
    position:relative; min-height:32px; padding:0; border-bottom:1px solid #e5e5e5;
  }
  .header .masthead .mainnav .nav-toggle{
    display:inline-flex;
    position:absolute; right:0; bottom:-6px;
  }

  /* Oculta barras decorativas dos itens no mobile */
  .header .mainnav .menubar > li > a::after{content:none !important; display:none !important}

  /* Painel do menu (fechado por padrão) */
  #menubar{
    display:none;
    position:absolute; z-index:70;
    left:0; right:0; top:calc(100% + 8px);
    margin:0; padding:12px; list-style:none;
    background:#fff; border:1px solid #e5e5e5; border-radius:12px;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    grid-auto-rows:min-content; gap:8px;
  }
  .mainnav[data-open="true"] #menubar{display:grid !important}

  /* Itens em coluna, com área de toque maior */
  #menubar > li > a{
    display:block; padding:14px 10px; border-radius:8px;
    text-transform:none; letter-spacing:.2px; color:#111;
  }
  #menubar > li > a:hover{background:#e9f0f8}

  /* Submenus/mega viram blocos estáticos e 100% */
  #menubar > li.has-mega .mega,
  #menubar > li.has-dd .dd{
    position:static !important; width:100% !important; display:none;
    background:#fff; border:1px solid #e5e5e5; border-radius:8px; box-shadow:none;
    padding:10px; margin-top:6px;
  }
  #menubar > li[aria-expanded="true"] .mega,
  #menubar > li[aria-expanded="true"] .dd{display:block}

  .header .masthead .mainnav .menubar{justify-content:center}
}

/* --- Ajustes adicionais <600px --- */
@media (max-width:600px){
  #banner .slides{aspect-ratio:16/10}
  #areas-de-atuacao .areas-carousel{padding:0 28px}
  #areas-de-atuacao .areas-nav{width:36px; height:88px; font-size:18px}
  #areas-de-atuacao .feature-overlay{padding:16px 18px}
  #ultimas-noticias .news-item{grid-template-columns:1fr 120px; gap:.75rem}
  footer .fl-grid{grid-template-columns:1fr; gap:1.25rem}
}


/* === DESKTOP: mega menu centralizado e sem conflito === */
@media (min-width: 821px){
  /* O li não cria novo contexto de posicionamento */
  .header .mainnav .menubar > li.has-mega{ position: static; }

  /* Painel centralizado sob a barra de navegação */
  .header .mainnav .menubar > li.has-mega .mega{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 100%;
    width: 900px;              /* ajuste se quiser mais largo/estreito */
    padding: 24px 22px 16px;   /* mantém seu visual */
  }
}

/* (Opcional) Se existir qualquer regra fora de media query que faça
   right:0/transform:none no .mega, isto garante que ela não prevaleça. */
.header .mainnav .menubar > li.has-mega .mega{
  right: auto;
  transform: translateX(-50%);
}


/* === HOTFIX HEADER (sobrescreve regras conflitantes) === */

/* 1) Mobile: mainnav ocupa a linha inteira; painel abre na largura total */
@media (max-width:980px){
  .header .masthead .col-right{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items:center;
    row-gap:8px;
  }

  /* Expor quick/social diretamente na grade */
  .header .masthead .topbar{ display: contents; }

  /* Linha 1: links rápidos ocupam largura total */
  .header .masthead .topbar .quick{
    grid-column:1 / -1;
    display:flex; flex-wrap:wrap; gap:10px 16px; margin:0; padding:0; list-style:none;
  }
  .header .masthead .topbar .quick li + li::before{ content:none; }

  /* Linha 2: ícones à esquerda */
  .header .masthead .topbar .social{
    grid-row:2; grid-column:1; display:flex; gap:12px; margin-left:0;
  }

  /* Linha 2: botão à direita; .mainnav ancora o dropdown */
  .header .masthead .mainnav{
    grid-row:2; grid-column:1 / -1;       /* <-- ocupa a linha inteira */
    position:relative; display:flex; align-items:center;
  }
  .header .masthead .mainnav .nav-toggle{
    margin-left:auto; display:inline-flex;
  }

  /* Painel mobile - largura total da .mainnav */
  .header .mainnav #menubar{
    display:none; position:absolute; z-index:70;
    left:0; right:0; top:calc(100% + 8px);
    margin:0; padding:12px; list-style:none;
    background:#f5f7fa; border:1px solid #e5e5e5; border-radius:12px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    grid-auto-rows:min-content; gap:6px;
  }
  .mainnav[data-open="true"] #menubar{ display:grid !important; }

  .header .mainnav #menubar > li > a{
    display:block; padding:0px 10px; border-radius:8px; text-transform:none;
    letter-spacing:.2px; color:#111;
  }
  .header .mainnav #menubar > li > a:hover{ background:#e9f0f8; }

  /* Submenus viram blocos estáticos no mobile */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd .dd{
    position:static !important; width:100% !important; display:none;
    background:#fff; border:1px solid #e5e5e5; border-radius:8px; box-shadow:none;
    padding:10px; margin-top:6px;
  }
  .header .mainnav #menubar > li[aria-expanded="true"] .mega,
  .header .mainnav #menubar > li[aria-expanded="true"] .dd{ display:block; }
}

/* 2) Desktop: mega menu centralizado (remove conflitos) */
@media (min-width:981px){
  .header .mainnav .menubar{ display:flex; justify-content:center; align-items:center; gap:2rem; }

  /* O <li> não cria um novo contexto de posicionamento */
  .header .mainnav .menubar > li.has-mega{ position: static; }

  /* Painel centralizado */
  .header .mainnav .menubar > li.has-mega .mega{
    position:absolute; left:50%; right:auto; transform:translateX(-50%);
    top:100%; width:960px; z-index:60;
    background:#2d3943; color:#fff; border-radius:4px;
    padding:12px 22px 10px; box-shadow:0 18px 40px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
  }
}

/* 3) Botão hamburger sem Unicode (compatível com ISO-8859-1) */
.mainnav .nav-toggle{
  background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:.5rem .8rem;
}
.mainnav .nav-toggle .bars,
.mainnav .nav-toggle .bars::before,
.mainnav .nav-toggle .bars::after{
  content:""; display:block; width:22px; height:2px; background:#6b7280; border-radius:2px;
}
.mainnav .nav-toggle .bars{ position:relative; }
.mainnav .nav-toggle .bars::before{ position:absolute; top:-6px; left:0; }
.mainnav .nav-toggle .bars::after{ position:absolute; top:6px; left:0; }


/* === FIX: dropdowns fechados por padrão e abrem só nos gatilhos === */

/* Fecha o MEGA por padrão na barra principal (.mainnav) */
.header .mainnav .menubar > li.has-mega .mega { display: none; }

/* Fecha o dropdown simples por padrão (reforço) */
.header .mainnav .menubar > li.has-dd .dd { display: none; }

/* Desktop: mostra apenas em hover/focus/aria-expanded */
@media (min-width: 981px){
  .header .mainnav .menubar > li.has-mega:hover .mega,
  .header .mainnav .menubar > li.has-mega:focus-within .mega,
  .header .mainnav .menubar > li.has-mega[aria-expanded="true"] .mega { display: grid; }

  .header .mainnav .menubar > li.has-dd:hover .dd,
  .header .mainnav .menubar > li.has-dd:focus-within .dd,
  .header .mainnav .menubar > li.has-dd[aria-expanded="true"] .dd { display: block; }
}

/* Mobile: garante que regras de centralização não vazem */
@media (max-width: 980px){
  .header .mainnav .menubar > li.has-mega .mega{
    position: static !important;
    left: auto !important; right: auto !important; transform: none !important;
    width: 100% !important; display: none; /* fechado até aria-expanded=true */
  }
  .header .mainnav .menubar > li.has-mega[aria-expanded="true"] .mega,
  .header .mainnav .menubar > li.has-dd[aria-expanded="true"] .dd { display: block; }
}



/* === FIX: Areas de atuação - overlay no canto inferior direito (desktop) === */
#areas-de-atuacao .feature-overlay{
  top: auto;           /* remove o centrado vertical */
  bottom: 6%;          /* ancora no fundo... */
  right: 2%;           /* ...e à direita (mantém o mesmo afastamento) */
  transform: none;     /* sem translateY */
}

/* Mantém o comportamento mobile já existente (overlay empilhado) */
@media (max-width:960px){
  #areas-de-atuacao .feature-overlay{
    position: static;   /* preserva seu layout atual no mobile */
    transform: none;
    width: auto;
    margin-top: -64px;  /* mantém o pequeno encaixe sob a imagem, como antes */
  }
}




/* ===== PATCH MENU (força overrides) ===== */
:root{
  --menu-accent:#f6a623;
  --menu-line:#e5e5e5;
  --menu-text:#2a2e35;
}

/* 0) Tira bold e o underline laranja dos itens principais */
header.header .mainnav .menubar > li > a{
  font-weight:500 !important;        /* sem bold */
}
header.header .mainnav .menubar > li > a::after{
  background:transparent !important; /* remove sublinhado no hover/ativo */
}

/* 1) Linha cinza ENTRE as barras (na topbar) */
header.header .masthead .topbar{
  border-bottom:1px solid var(--menu-line) !important; /* a linha fica aqui */
  padding-bottom:8px !important;                       /* metade do vão */
}
header.header .masthead .mainnav{
  border-bottom:0 !important;                          /* sem linha aqui */
  padding-top:8px !important;                          /* outra metade do vão */
}

/* 2) Aparência unificada dos SUBMENUS (mega + simples) */
@media (min-width:981px){
  /* âncora em cada li */
  header.header .mainnav .menubar > li{ position:relative !important; }

  /* NADA de centralizar o mega: alinha como o Ikebana (right:0) */
  header.header .mainnav .menubar > li.has-mega > .mega{
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;
    transform:none !important;
  }

  /* Caixa branca com bordas laranja em cima e embaixo (mega e dd) */
  header.header .mainnav .menubar > li.has-mega > .mega,
  header.header .mainnav .menubar > li.has-dd   > .dd{
    background:#fff !important;
    color:var(--menu-text) !important;
    border:1px solid var(--menu-line) !important;
    border-top:3px solid var(--menu-accent) !important;
    border-bottom:3px solid var(--menu-accent) !important;
    border-radius:4px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.12) !important;
    z-index:60 !important;
  }

  /* Força exibir como block (se alguma regra usa grid) */
  header.header .mainnav .menubar > li.has-mega:hover > .mega,
  header.header .mainnav .menubar > li.has-mega:focus-within > .mega,
  header.header .mainnav .menubar > li.has-mega[aria-expanded="true"] > .mega{
    display:block !important;
  }

  /* Dropdown simples (Ikebana) - largura e itens */
  header.header .mainnav .menubar > li.has-dd > .dd{
    width:280px !important;
    padding:8px 0 !important;
  }
  header.header .mainnav .menubar > li.has-dd > .dd a{
    display:block !important;
    padding:8px 14px !important;
    color:var(--menu-text) !important;
  }
  header.header .mainnav .menubar > li.has-dd > .dd a:hover{
    background:#f6f8fc !important;
  }

  /* 3) Mega de "Áreas de atuação" EM UMA COLUNA */
  /* Mata o grid anterior do mega */
  header.header .mega{
    display:block !important;           /* sem grid de 3 colunas */
  }
  header.header .mainnav .menubar > li.has-mega > .mega{
    width:320px !important;             /* ajuste fino 300-360 px */
    padding:10px 0 !important;
  }
  /* Cada .col empilha dentro da mesma caixa */
  header.header .mainnav .menubar > li.has-mega > .mega .col{
    margin:0 0 6px 0 !important;
    padding:0 !important;
    border:0 !important;
  }
  header.header .mainnav .menubar > li.has-mega > .mega .col + .col{
    margin-top:6px !important;
    padding-top:6px !important;
    border-top:1px solid #eee !important; /* separador suave entre grupos */
  }
  header.header .mega strong{
    display:block !important;
    margin:6px 14px 4px !important;
    font-weight:700 !important;
    color:var(--menu-text) !important;
  }
  header.header .mega ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
  header.header .mega li + li{ margin-top:2px !important; }
  header.header .mega a{
    display:block !important;
    padding:8px 14px !important;
    color:var(--menu-text) !important;
  }
  header.header .mega a:hover{ background:#f6f8fc !important; }
}

/* 4) Garante contraste (caso algo antigo pinte de escuro) */
header.header .mainnav .menubar > li.has-dd .dd a{ color:var(--menu-text) !important; }


/* ===== FIX VISIBILIDADE - mega e dropdown fechados por padrão ===== */

/* 0) Fechados por padrão (força mesmo se houve !important antes) */
header.header .mainnav .menubar > li.has-mega > .mega,
header.header .mainnav .menubar > li.has-dd   > .dd {
  display:none !important;
}

/* 1) DESKTOP (>=981px): abrem só em hover/focus/aria-expanded */
@media (min-width:981px){
  header.header .mainnav .menubar > li.has-mega:hover         > .mega,
  header.header .mainnav .menubar > li.has-mega:focus-within  > .mega,
  header.header .mainnav .menubar > li.has-mega[aria-expanded="true"] > .mega{
    display:block !important;
  }

  header.header .mainnav .menubar > li.has-dd:hover           > .dd,
  header.header .mainnav .menubar > li.has-dd:focus-within    > .dd,
  header.header .mainnav .menubar > li.has-dd[aria-expanded="true"]   > .dd{
    display:block !important;
  }
}

/* 2) MOBILE/TABLET (<=980px): continua só abrindo via aria-expanded=true */
@media (max-width:980px){
  header.header .mainnav .menubar > li.has-mega[aria-expanded="true"] > .mega,
  header.header .mainnav .menubar > li.has-dd[aria-expanded="true"]   > .dd{
    display:block !important;
  }
}


/* ====== SUBMENU "Áreas de Atuação" - alinhamento ====== */
/* Desktop */
@media (min-width:981px){
  header.header .mainnav .menubar > li.has-mega > .mega{ width: 320px !important; }

  /* Títulos */
  header.header .mega strong,
  header.header .mega strong a{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;   /* alinhado à esquerda */
    font-weight:700 !important;
    color:#2a2e35 !important;
  }

  /* Listas e subitens */
  header.header .mega ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
  header.header .mega li + li{ margin-top:0 !important; }
  header.header .mega a{
    display:block !important;
    padding:8px 14px 8px 28px !important;   /* recuo dos subitens */
    color:#2a2e35 !important;
  }
  header.header .mega a:hover{ background:#f6f8fc !important; }
}

/* Mobile (o mega já está como bloco dentro do painel) */
@media (max-width:980px){
  .header .mainnav #menubar > li.has-mega .mega{ padding:6px 0 !important; }
  .header .mainnav #menubar > li.has-mega .mega strong,
  .header .mainnav #menubar > li.has-mega .mega strong a{
    display:block !important;
    padding:10px 10px 6px !important;       /* alinhado à esquerda */
    font-weight:700 !important;
  }
  .header .mainnav #menubar > li.has-mega .mega a{
    display:block !important;
    padding:8px 24px !important;            /* recuo leve dos subitens */
  }
}



/* ====== AJUSTE FINO SUBMENU "ÁREAS DE ATUAÇÃO" (DESKTOP) ====== */
@media (min-width:981px){
  /* largura e padding da caixa (mantém 1 coluna) */
  header.header .mainnav .menubar > li.has-mega > .mega{
    width:320px !important;
    padding:10px 0 !important;
  }

  /* SUBITENS: recuo leve (aplica primeiro) */
  header.header .mega ul a{
    display:block !important;
    padding:8px 14px 8px 28px !important;  /* 28px = recuo */
    color:#2a2e35 !important;
  }
  header.header .mega ul a:hover{ background:#f6f8fc !important; }

  /* TÍTULOS (strong): sem recuo, alinhados à esquerda
     - esta regra vem DEPOIS para vencer a anterior */
  header.header .mega strong{
    margin:0 !important;
    padding:10px 14px 6px !important;      /* sem indentação */
    font-weight:700 !important;
    color:#2a2e35 !important;
    display:block !important;
  }
  /* "Educacional" está como <strong><a>...</a></strong> - tira o recuo do <a> */
  header.header .mega strong > a{
    display:block !important;
    padding:10px 14px 6px !important;      /* mesma linha dos títulos */
    font-weight:700 !important;
    color:#2a2e35 !important;
  }
}

/* ====== MOBILE: tudo dentro do fluxo, sem box flutuando,
         todos os submenus visíveis quando o painel abre,
         com indentação correta ====== */
@media (max-width:980px){
  /* Painéis viram blocos estáticos (nada de absolute) */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd .dd{
    position:static !important;
    left:auto !important; right:auto !important; transform:none !important;
    width:100% !important;
    margin:6px 0 0 !important;
    box-shadow:none !important;         /* evita "box" flutuando */
  }

  /* Quando o menu está aberto, MOSTRA todos os submenus */
  .mainnav[data-open="true"] #menubar > li.has-mega .mega,
  .mainnav[data-open="true"] #menubar > li.has-dd .dd{
    display:block !important;
  }

  /* Títulos dos grupos: alinhados à esquerda, sem recuo */
  .header .mainnav #menubar > li.has-mega .mega strong,
  .header .mainnav #menubar > li.has-mega .mega strong > a{
    display:block !important;
    padding:10px 10px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
  }

  /* Subitens: leve indentação para marcar hierarquia */
  .header .mainnav #menubar > li.has-mega .mega ul a{
    display:block !important;
    padding:8px 24px !important;         /* recuo dos subitens */
    color:#2a2e35 !important;
  }
  .header .mainnav #menubar > li.has-mega .mega ul a:hover{
    background:#f0f4f9 !important;
  }
}


/* === FIX 1 - DESKTOP: títulos alinhados à esquerda, sem recuo duplo === */
@media (min-width:981px){
  /* Título de grupo (sem link) */
  .header .mainnav .menubar > li.has-mega > .mega .col > strong{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;     /* alinhado à esquerda */
    font-weight:700 !important;
    color:#2a2e35 !important;
  }
  /* Título que É link (caso do "Educacional") */
  .header .mainnav .menubar > li.has-mega > .mega .col > strong > a{
    display:block !important;
    /* anula o padding do <strong> para não somar recuos */
    margin:-10px -14px -6px -14px !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
  }

  /* Subitens: leve indentação */
  .header .mainnav .menubar > li.has-mega > .mega .col > ul a{
    display:block !important;
    padding:8px 14px 8px 28px !important; /* recuo dos subitens */
    color:#2a2e35 !important;
  }

  /* Garante cor correta para QUALQUER link do mega (vence regra antiga branca) */
  .header .mainnav .menubar > li.has-mega > .mega a{ color:#2a2e35 !important; }
}

/* === FIX 2 - MOBILE: tudo no fluxo e indentado corretamente === */
@media (max-width:980px){
  /* Painéis viram blocos; sem sombra/caixa flutuando */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd .dd{
    position:static !important;
    width:100% !important;
    margin:6px 0 0 !important;
    box-shadow:none !important;
  }
  /* Ao abrir o hamburger, mostre todos os submenus */
  .mainnav[data-open="true"] #menubar > li.has-mega .mega,
  .mainnav[data-open="true"] #menubar > li.has-dd .dd{
    display:block !important;
  }

  /* Títulos (sem e com link) alinhados à esquerda */
  .header .mainnav #menubar > li.has-mega .mega .col > strong{
    display:block !important;
    padding:10px 10px 6px !important;
    margin:0 !important;
    color:#2a2e35 !important;
  }
  .header .mainnav #menubar > li.has-mega .mega .col > strong > a{
    display:block !important;
    margin:-10px -10px -6px -10px !important; /* remove recuo duplo */
    padding:10px 10px 6px !important;
    color:#2a2e35 !important;
  }

  /* Subitens com leve recuo */
  .header .mainnav #menubar > li.has-mega .mega .col > ul a{
    display:block !important;
    padding:8px 24px !important;
    color:#2a2e35 !important;
  }
}


/* ========== MOBILE (<>980px) - menu suspenso com a mesma caixa do desktop ========== */
@media (max-width:980px){

  /* 0) O painel do hamburger vira "neutro" (sem caixa cinza pesada) */
  .header .mainnav #menubar{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:8px 0 12px !important;
    gap:10px !important;
  }

  /* 1) Itens de primeiro nível (A FUNDAÇÃO, NOTÍCIAS, ÁREAS DE ATUAÇÃO, IKEBANA...) */
  .header .mainnav #menubar > li > a{
    display:block !important;
    padding:12px 14px !important;
    border-radius:8px !important;
    font-weight:600 !important;
    color:#2a2e35 !important;
  }
  .header .mainnav #menubar > li > a:hover{ background:#e9f0f8 !important; }

  /* 2) As caixas de submenu (mega e dd) ficam LARGAS e com a mesma "moldura laranja" do desktop */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd   .dd{
    display:block !important;             /* sempre visíveis no mobile */
    position:static !important;           /* nada de absolute */
    width:calc(100% - 24px) !important;   /* ocupa quase toda a largura do painel */
    margin:4px 12px 12px !important;      /* respira dos lados */
    padding:8px 0 !important;
    background:#fff !important;
    border:1px solid var(--menu-line) !important;
    border-top:3px solid var(--menu-accent) !important;
    border-bottom:3px solid var(--menu-accent) !important;
    border-radius:8px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.08) !important;
  }

  /* 3) Títulos de grupo (Cultural, Educacional, Bem Estar, Assistencial) alinhados à esquerda */
  .header .mainnav #menubar > li.has-mega .mega .col > strong{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
  }
  /* Caso o título seja link (Educacional) não soma recuos */
  .header .mainnav #menubar > li.has-mega .mega .col > strong > a{
    display:block !important;
    margin:-10px -14px -6px -14px !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
  }

  /* 4) Subitens com leve indentação (hierarquia visual) */
  .header .mainnav #menubar > li.has-mega .mega .col > ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a{
    display:block !important;
    padding:10px 14px 10px 28px !important; /* recuo */
    color:#2a2e35 !important;
  }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a:hover{ background:#f0f4f9 !important; }

  /* 5) O dropdown simples (Ikebana) usa a mesma caixa */
  .header .mainnav #menubar > li.has-dd   .dd a{
    display:block !important;
    padding:10px 14px !important;
    color:#2a2e35 !important;
  }
}

/* Abrindo o hamburger? Mostre tudo automaticamente (sem "tocar para abrir"). */
@media (max-width:980px){
  .mainnav[data-open="true"] #menubar > li.has-mega,
  .mainnav[data-open="true"] #menubar > li.has-dd{
    aria-expanded:true; /* semântico; algumas UAs ignoram - CSS abaixo garante */
  }
  .mainnav[data-open="true"] #menubar > li.has-mega .mega,
  .mainnav[data-open="true"] #menubar > li.has-dd   .dd{
    display:block !important;
  }
}


/* ========= MOBILE (<>980px) - fundo do painel + caixa alinhada à direita ========= */
@media (max-width:980px){

  /* Painel do hamburger ocupa a largura toda, com "scrim" escuro por trás */
  .header .mainnav{
    position:relative;
    z-index: 120; /* acima do banner */
  }
  .header .mainnav #menubar{
    display:none; /* já abre via [data-open="true"] */
    position:absolute;
    left:0; right:0; top:calc(100% + 8px);
    margin:0; padding:12px 12px 16px;
    background:rgba(0,0,0,.55) !important;   /* VOLTA o background */
    backdrop-filter:saturate(120%) blur(2px); /* opcional, dá leitura */
    border:0 !important;
    box-shadow:none !important;
    z-index: 130;                             /* acima do conteúdo */
  }
  .mainnav[data-open="true"] #menubar{ display:block !important; }

  /* Links de 1º nível dentro do painel */
  .header .mainnav #menubar > li > a{
    display:block;
    padding:12px 14px;
    border-radius:8px;
    color:#e7edf6;
  }
  .header .mainnav #menubar > li > a:hover{ background:rgba(255,255,255,.08); }

  /* A CAIXA dos submenus (mega e dd) - mesma cara do desktop,
     e ALINHADA À DIREITA dentro do painel */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd   .dd{
    display:block !important;            /* sempre visíveis no mobile */
    position:static !important;          /* sem absolute */
    width:min(92vw, 360px) !important;   /* largura confortável */
    margin:6px 8px 12px auto !important; /* <-- alinha à DIREITA */
    padding:8px 0 !important;
    background:#fff !important;
    border:1px solid var(--menu-line) !important;
    border-top:3px solid var(--menu-accent) !important;
    border-bottom:3px solid var(--menu-accent) !important;
    border-radius:10px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.18) !important;
  }

  /* Títulos (Cultural, Educacional, Bem Estar, Assistencial) à esquerda */
  .header .mainnav #menubar > li.has-mega .mega .col > strong{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
  }
  /* "Educacional" é link: tira qualquer recuo extra */
  .header .mainnav #menubar > li.has-mega .mega .col > strong > a{
    display:block !important;
    padding:10px 14px 6px !important;
    color:#2a2e35 !important;
  }

  /* Subitens indentados */
  .header .mainnav #menubar > li.has-mega .mega .col > ul{ margin:0; padding:0; list-style:none; }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a{
    display:block;
    padding:10px 14px 10px 28px !important; /* recuo */
    color:#2a2e35 !important;
  }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a:hover{
    background:#f0f4f9 !important;
  }

  /* Itens do dropdown simples (Ikebana) usam a mesma caixa */
  .header .mainnav #menubar > li.has-dd .dd a{
    display:block; padding:10px 14px; color:#2a2e35 !important;
  }
}


/* ================= MOBILE (<>980px) - painel, visibilidade e alinhamentos ================ */
@media (max-width:980px){
  :root{
    /* ajuste livre: largura máxima do conteúdo do painel */
    --panel-max: 1120px;
    --overlay-opacity: .68;   /* escurecimento do fundo */
  }

  /* A barra principal fica por cima de tudo */
  .header .mainnav{ position:relative; z-index:200; }

  /* Painel do hamburger: vira um contêiner centralizado,
     e o FUNDO escuro vem de um pseudo-elemento fixo em tela cheia */
  .header .mainnav #menubar{
    display:none;                         /* abre com [data-open="true"] */
    position:absolute;
    top:calc(100% + 8px); left:0; right:0;
    padding:16px 14px 18px;
    background:transparent !important;    /* scrim vai no ::before */
    border:0 !important; box-shadow:none !important;
    max-width:var(--panel-max);           /* NÃO ocupa a tela toda */
    margin:0 auto;                        /* centraliza o painel */
  }
  .header .mainnav #menubar::before{
    content:"";
    position:fixed; inset:0;              /* cobre a viewport inteira */
    background:rgba(0,0,0,var(--overlay-opacity));
    backdrop-filter:blur(2px) saturate(110%);
    z-index:-1;                           /* fica atrás do conteúdo do painel */
  }
  .mainnav[data-open="true"] #menubar{ display:block !important; }

  /* Links de 1º nível (A Fundação / Notícias / Áreas...) */
  .header .mainnav #menubar > li > a{
    display:block; padding:12px 12px; border-radius:8px;
    color:#e7edf6; text-align:left;       /* garante esquerda */
  }
  .header .mainnav #menubar > li > a:hover{ background:rgba(255,255,255,.08); }

  /* Submenus (mega e dropdown) - mesma "caixa branca" do desktop,
     ALINHADA À DIREITA dentro do painel */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd   .dd{
    position:static !important;
    display:block !important;
    width:min(92vw, 360px) !important;     /* conforto visual */
    margin:8px 8px 14px auto !important;   /* <-- alinha à DIREITA */
    padding:8px 0 !important;
    background:#fff !important;
    border:1px solid var(--menu-line) !important;
    border-top:3px solid var(--menu-accent) !important;
    border-bottom:3px solid var(--menu-accent) !important;
    border-radius:12px !important;
    box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
    text-align:left;                        /* nada de herdar alinhamento à direita */
  }

  /* Títulos dos grupos (Cultural / Educacional / ...) SEM recuo */
  .header .mainnav #menubar > li.has-mega .mega .col > strong,
  .header .mainnav #menubar > li.has-mega .mega .col > strong > a{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
    text-align:left !important;            /* trava à esquerda */
  }

  /* Subitens INDENTADOS de forma consistente */
  .header .mainnav #menubar > li.has-mega .mega .col > ul{ margin:0; padding:0; list-style:none; }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a{
    display:block; padding:10px 14px 10px 28px !important;
    color:#2a2e35 !important; text-align:left !important;
  }
  .header .mainnav #menubar > li.has-mega .mega .col > ul a:hover{ background:#f0f4f9 !important; }

  /* Dropdown simples (Ikebana) reaproveita a mesma caixa */
  .header .mainnav #menubar > li.has-dd .dd a{
    display:block; padding:10px 14px; color:#2a2e35 !important; text-align:left;
  }
}


/* ==== MOBILE (<980px) - painel com overlay, caixa branca à direita, alinhamentos ==== */
@media (max-width:980px){
  :root{ --panel-max:1120px; --overlay-alpha:.68; }

  /* garante contexto e z-index da barra */
  .header .mainnav{ position:relative; z-index:300 !important; }

  /* painel do menu (conteúdo) */
  .header .mainnav #menubar{
    display:none;
    position:absolute; left:0; right:0; top:calc(100% + 8px);
    padding:16px 14px 18px;
    background:transparent !important;   /* overlay virá por JS */
    border:0 !important; box-shadow:none !important;
    max-width:var(--panel-max); margin:0 auto;          /* não ocupa a tela toda */
    text-align:left !important;
  }
  .mainnav[data-open="true"] #menubar{ display:block !important; }

  /* itens de 1º nível sempre à esquerda */
  .header .mainnav #menubar > li > a{
    text-align:left !important; color:#e7edf6 !important;
    display:block; padding:12px 12px; border-radius:8px;
  }
  .header .mainnav #menubar > li > a:hover{ background:rgba(255,255,255,.08); }

  /* CAIXAS de submenu (mega e dd) com o MESMO padrão do desktop,
     alinhadas à DIREITA dentro do painel */
  .header .mainnav #menubar > li.has-mega .mega,
  .header .mainnav #menubar > li.has-dd   .dd{
    position:static !important; display:block !important;
    width:min(92vw, 360px) !important;
    margin:8px 8px 14px auto !important;   /* <-- direita */
    padding:8px 0 !important;
    background:#fff !important; color:#2a2e35 !important;
    border:1px solid #e5e5e5 !important;
    border-top:3px solid #f6a623 !important;
    border-bottom:3px solid #f6a623 !important;
    border-radius:12px !important;
    box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
    text-align:left !important;
  }

  /* TÍTULOS (Cultural, Educacional, ...) sem indentação */
  .header .mainnav #menubar .mega .col > strong,
  .header .mainnav #menubar .mega .col > strong > a{
    display:block !important;
    margin:0 !important;
    padding:10px 14px 6px !important;
    font-weight:700 !important;
    color:#2a2e35 !important;
    text-align:left !important;
  }

  /* SUBITENS com leve indentação à esquerda (nunca à direita) */
  .header .mainnav #menubar .mega .col > ul{ margin:0; padding:0; list-style:none; }
  .header .mainnav #menubar .mega .col > ul a{
    display:block !important; padding:10px 14px 10px 28px !important;
    color:#2a2e35 !important; text-align:left !important;
  }
  .header .mainnav #menubar .mega .col > ul a:hover{ background:#f0f4f9 !important; }

  /* Dropdown simples reaproveita a mesma cara */
  .header .mainnav #menubar > li.has-dd .dd a{
    display:block; padding:10px 14px; color:#2a2e35 !important; text-align:left !important;
  }

  /* mata QUALQUER alinhamento à direita herdado por engano */
  .header .mainnav #menubar, 
  .header .mainnav #menubar *{ text-align:left !important; }
}


/* === PATCH: Logo na mesma linha do "DOE AGORA..." (desktop) === */
@media (min-width:981px){
  /* Layout em áreas: [logo | topbar] na 1ª linha; menubar na 2ª */
  .header .masthead{
    display:grid !important;
    grid-template-columns:auto 1fr;
    column-gap:2rem;
    grid-template-areas:
      "logo   topbar"
      "mainnav mainnav";
    align-items:center;
  }

  /* Mantém seu HTML, só posiciona por área */
  .header .masthead .col-left{ grid-area:logo; }
  .header .masthead .col-right{ display:contents; } /* expõe filhos (topbar/mainnav) */

  /* A topbar (com "DOE AGORA") fica na 1ª linha, alinhada à direita */
  .header .masthead .topbar{
    grid-area:topbar;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.25rem;
    padding:.35rem 0 8px;                 /* metade do vão acima da linha */
    border-bottom:1px solid #e5e5e5;      /* << linha cinza aqui */
  }

  /* O menubar fica na 2ª linha, sem a linha cinza; outra metade do vão */
  .header .masthead .mainnav{
    grid-area:mainnav;
    padding-top:8px;
    border-bottom:0;
  }

  /* Ajuste fino de altura/alinhar baseline (opcional) */
  .header .masthead .brand img{ height:40px; width:auto; } /* ajuste se precisar */
  .header .masthead .brand{ align-items:center; }
  .header .masthead .topbar .quick{ align-items:center; }
}

/* === HOTFIX 01 - Header v4: logo + ícones sociais === */

/* 1) Logo de volta ao tamanho correto (desktop e mobile) */
.header .masthead-v4 .brand img{
  height:56px !important;
  width:auto !important;
  display:block;
}

/* 2) Ícones sociais: tamanho, borda e layout */
.header .masthead-v4 .topbar .social a{
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  border:1.5px solid #b7cbe2 !important;
  display:grid !important;
  place-items:center !important;
}

/* 2.1) Esconde o <img> original (vamos usar mask para a cor) */
.header .masthead-v4 .topbar .social a img{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* 2.2) Ícone via mask com a cor padrão */
.header .masthead-v4 .topbar .social a::after{
  content:""; width:16px; height:16px; display:block;
  background:#777 !important;              /* cor padrão do ícone */
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
          mask-size:contain;         mask-repeat:no-repeat;         mask-position:center;
}

/* 2.3) Mapeia cada rede */
.header .masthead-v4 .topbar .social a[href*="facebook.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
}
.header .masthead-v4 .topbar .social a[href*="instagram.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
}
.header .masthead-v4 .topbar .social a[href*="youtube.com"]::after{
  -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');
          mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');
}

/* 2.4) Hover suave (fundo claro, mesma borda; ícone pode ganhar a cor institucional) */
.header .masthead-v4 .topbar .social a:hover{ background:#f1f6fb !important; }
.header .masthead-v4 .topbar .social a:hover::after{ background:#1e73be !important; }


/* === HOTFIX 02 - alinhamentos finos do cabeçalho (desktop) === */
@media (min-width:981px){
  /* 1) Logo e topbar na MESMA BASE */
  .header .masthead-v4 .masthead-top{
    align-items:flex-end !important; /* alinha pela base */
  }
  .header .masthead-v4 .topbar{
    padding:0 !important;            /* remove respiro que "subia" a base */
    line-height:1 !important;
  }
  .header .masthead-v4 .topbar .quick a{
    display:inline-block;             /* garante baseline consistente */
    padding:0 !important;
    line-height:1.05 !important;      /* microajuste da altura do texto */
  }
  /* Mantém os ícones centrados verticalmente na mesma linha */
  .header .masthead-v4 .topbar .social a{
    display:grid !important;
    place-items:center !important;
  }

  /* 2) Linha cinza mais próxima da base do logo */
  .header .masthead-v4 .masthead-divider{
    margin:4px 0 0 !important;        /* encosta mais no conjunto logo+topbar */
    height:1px; background:#e5e5e5;
  }

  /* 3) Menu principal à DIREITA */
  .header .masthead-v4 .mainnav .menubar{
    justify-content:flex-end !important;
  }
}

/* === HOTFIX 03 - cabeçalho alinhado, 1 linha divisória, menubar à direita === */
@media (min-width:981px){

  /* (A) ZERA bordas antigas que criavam linha duplicada */
  .header .masthead .brand-row,
  .header .masthead .mainnav,
  .header .masthead .topbar,
  .header .mainnav,
  .header .masthead-v4 .mainnav{
    border-top:0 !important;
    border-bottom:0 !important;
  }

  /* (B) ÚNICA divisória: logo abaixo do conjunto logo+topbar */
  .header .masthead-v4 .masthead-divider{
    display:block !important;
    height:1px !important;
    background:#e5e5e5 !important;
    margin:6px 0 0 !important; /* mais próxima da base do logo */
  }

  /* (C) Linha de cima em grid com bases alinhadas (logo + DOE AGORA...) */
  .header .masthead-v4 .masthead-top{
    display:grid !important;
    grid-template-columns:auto 1fr !important; /* logo | topbar */
    column-gap:2rem !important;
    align-items:end !important;               /* alinha pela base */
  }

  /* Logo permanece em 56px */
  .header .masthead-v4 .brand img{
    height:56px !important;
    width:auto !important;
    display:block;
  }

  /* Topbar "desce" para bater a base com o logo */
  .header .masthead-v4 .topbar{
    display:flex !important;
    align-items:flex-end !important;
    padding:0 0 20px 0 !important;
    line-height:1 !important;
    border:0 !important; /* garante que ela não desenhe linha */
  }
  .header .masthead-v4 .topbar .quick a{
    display:inline-block !important;
    padding:0 0 2px 0 !important;  /* micro-ajuste para a BASE */
    line-height:1.1 !important;
  }
  .header .masthead-v4 .topbar .social{
    margin-left:12px !important;
  }
  .header .masthead-v4 .topbar .social a{
    margin-bottom:2px !important;  /* faz os ícones "tocarem" a base */
  }

  /* (D) Menubar alinhado à DIREITA e sem linhas extras */
  .header .masthead-v4 .mainnav{
    padding-top:8px !important;
    border:0 !important;
  }
  .header .masthead-v4 .mainnav .menubar{
    justify-content:flex-end !important;
    margin:0 !important;
  }
}

/* (Opcional) Se ainda houver 1px de desencontro visual, ative este empurrão: */
/*
@media (min-width:981px){
  .header .masthead-v4 .topbar{ transform:translateY(1px); }
}
*/

/* ===== FIX MOBILE MENU (<=980px) ===== */
@media (max-width:980px){
  .mainnav{ position:relative; z-index:300; }
  .mainnav .nav-toggle{
    display:inline-flex; align-items:center; gap:.5rem;
    position:absolute; right:0; bottom:-6px;
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    padding:.5rem .8rem; cursor:pointer;
  }
  .mainnav .nav-toggle .bars,
  .mainnav .nav-toggle .bars::before,
  .mainnav .nav-toggle .bars::after{
    content:""; display:block; width:22px; height:2px; background:#6b7280; border-radius:2px;
  }
  .mainnav .nav-toggle .bars{ position:relative; }
  .mainnav .nav-toggle .bars::before{ position:absolute; top:-6px; left:0; }
  .mainnav .nav-toggle .bars::after{ position:absolute; top: 6px; left:0; }

  /* Painel fechado por padrão */
  #menubar{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 8px);
    margin:0; padding:12px; list-style:none;
    background:#fff; border:1px solid #e5e5e5; border-radius:12px;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    grid-auto-rows:min-content; gap:8px;
  }
  .mainnav[data-open="true"] #menubar{ display:grid !important; }

  /* Itens raiz (alvo de toque maior) */
  #menubar > li > a{
    display:block; padding:14px 10px; border-radius:8px; color:#111;
  }
  #menubar > li > a:hover{ background:#e9f0f8; }

  /* Submenus/mega viram blocos estáticos e 100% */
  #menubar > li.has-mega .mega,
  #menubar > li.has-dd   .dd{
    position:static !important; width:100% !important; display:none;
    background:#fff; border:1px solid #e5e5e5; border-radius:8px; box-shadow:none;
    padding:10px; margin-top:6px;
  }
  #menubar > li[aria-expanded="true"] .mega,
  #menubar > li[aria-expanded="true"] .dd{ display:block !important; }

  /* Opcional: "cortina" de fundo quando aberto */
  .mainnav[data-open="true"]::after{
    content:""; position:fixed; inset:0; z-index:-1;
    background:rgba(0,0,0,.55); backdrop-filter:saturate(120%) blur(2px);
  }

  /* Evita underline/barras decorativas no mobile */
  .mainnav .menubar > li > a::after{ content:none !important; }
}

/* ===== FECHADOS POR PADRÃO (reforço geral) ===== */
.mainnav .menubar > li.has-mega .mega,
.mainnav .menubar > li.has-dd   .dd{ display:none; }

/* ===== DESKTOP (>=981px): abre por hover/focus/expanded, fica absoluto ===== */
@media (min-width:981px){
  .mainnav .menubar{ display:flex; justify-content:center; gap:2rem; }
  .mainnav .menubar > li{ position:relative; }
  .mainnav .menubar > li.has-mega:hover .mega,
  .mainnav .menubar > li.has-mega:focus-within .mega,
  .mainnav .menubar > li.has-mega[aria-expanded="true"] .mega{ display:block; }
  .mainnav .menubar > li.has-dd:hover .dd,
  .mainnav .menubar > li.has-dd:focus-within .dd,
  .mainnav .menubar > li.has-dd[aria-expanded="true"] .dd{ display:block; }
}


/* ==== QUICK LINKS (DOE AGORA, LOJA, etc) - MOBILE FIX ==== */
@media (max-width:980px){

  /* 1) Evita que a coluna direita "empurre" a largura */
  .header .masthead .col-right{ min-width:0; }
  .header .masthead .col-right{
    grid-template-columns: minmax(0,1fr) auto; /* esquerda pode encolher */
  }

  /* 2) Lista de atalhos quebra linha sem estourar a página */
  .header .masthead .topbar .quick{
    display:flex; flex-wrap:wrap; gap:10px 12px;
    margin:0; padding:0; list-style:none;
    overflow-x:hidden; /* garante: nada cria rolagem horizontal */
  }
  .header .masthead .topbar .quick li{ min-width:0; }
  .header .masthead .topbar .quick li + li::before{ content:none; } /* remove a "|" no mobile */

  /* 3) Links não podem forçar largura: permitem quebra dentro da palavra */
  .header .masthead .topbar .quick a{
    display:inline-block;
    max-width:100%;
    white-space:normal !important;      /* mata qualquer nowrap herdado */
    overflow-wrap:anywhere;             /* quebra "MOKITI OKADA TV" se precisar */
    word-break:normal;
    hyphens:auto;
    line-height:1.2;
    padding:6px 8px;                    /* toque confortável, sem estourar */
    border-radius:8px; background:#f6f8fc;
  }
}

/* (Opcional) Preferir tudo em UMA LINHA com rolagem lateral suave */
@media (max-width:600px){
  .header .masthead .topbar .quick{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header .masthead .topbar .quick::-webkit-scrollbar{ display:none; }
  .header .masthead .topbar .quick a{ white-space:nowrap !important; }
}


/* ==== FIX DEFINITIVO - QUICK LINKS NÃO ESTOURAM NO MOBILE ==== */
@media (max-width:980px){

  /* 1) Deixe os itens do header encolherem (quebra o "min-content size" do grid) */
  .header :is(.masthead .col-right, .brand-row, .header-wrap, .topbar, .mainnav){
    min-width:0 !important;
  }

  /* 2) A barra de atalhos pode e deve quebrar linha */
  .header :is(.masthead .topbar .quick, .topbar .quick){
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px 12px !important;
    margin:0 !important; padding:0 !important; list-style:none;
    overflow-x:hidden !important; /* não cria rolagem horizontal */
    min-width:0 !important;       /* grid item pode encolher */
  }
  /* remove o separador "|" no mobile */
  .header :is(.masthead .topbar .quick li + li::before, .topbar .quick li + li::before){
    content:none !important;
  }

  /* 3) Links podem quebrar dentro da palavra longa ("MOKITI OKADA TV") */
  .header :is(.masthead .topbar .quick a, .topbar .quick a){
    display:inline-block;
    max-width:100%;
    white-space:normal !important;
    overflow-wrap:anywhere;  /* permite "qualquer" quebra se necessário */
    word-break:normal;
    hyphens:auto;
    line-height:1.2;
    padding:6px 8px;
    border-radius:8px;
    background:#f6f8fc;
  }

  /* 4) Ícones sociais e o botão do menu não podem forçar largura */
  .header :is(.masthead .topbar .social, .topbar .social){ min-width:0 !important; flex:0 0 auto; }
  .header :is(.mainnav, .masthead .mainnav){ min-width:0 !important; }

  /* 5) (Opcional) Se a sua topbar fica numa única linha, permita "quebrar em 2": */
  .header :is(.topbar){ display:flex; flex-wrap:wrap; gap:8px 12px; }
  .header :is(.topbar .quick){ order:1; flex-basis:100%; }
  .header :is(.topbar .social){ order:2; }
  .header :is(.mainnav .nav-toggle){ order:3; }
}

/* Preferir tudo em uma LINHA com scroll lateral suave? Use junto: */
@media (max-width:600px){
  .header :is(.masthead .topbar .quick, .topbar .quick){
    flex-wrap:nowrap !important;
    overflow-x:auto !important; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header :is(.masthead .topbar .quick, .topbar .quick)::-webkit-scrollbar{ display:none; }
  .header :is(.masthead .topbar .quick a, .topbar .quick a){ white-space:nowrap !important; }
}