/* ============================================================
   SUTHUB — Menu mobile (ver menu-mobile.js)
   Usa as variáveis de cor de cada página, com valores de reserva.
   ============================================================ */
.mm-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--line, rgba(0,79,73,0.14)); border-radius: 10px;
  color: var(--green-deep, #004F49);
}
.mm-toggle[hidden] { display: none; }
.mm-toggle:focus-visible, .mm-panel a:focus-visible, .mm-panel button:focus-visible {
  outline: 2px solid var(--green-accent, #007C74); outline-offset: 2px;
}
.mm-bars { position: relative; display: block; width: 18px; height: 12px; }
.mm-bars span {
  position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}
.mm-bars span:nth-child(1) { top: 0; }
.mm-bars span:nth-child(2) { top: 5px; }
.mm-bars span:nth-child(3) { top: 10px; }
.mm-toggle.is-open .mm-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.mm-toggle.is-open .mm-bars span:nth-child(2) { opacity: 0; }
.mm-toggle.is-open .mm-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.mm-panel {
  position: fixed; left: 0; right: 0; bottom: 0; top: 64px; z-index: 60;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #FFFFFF; border-top: 1px solid var(--line, rgba(0,79,73,0.10));
  padding: 8px 20px 32px; font-family: inherit;
}
.mm-panel[hidden] { display: none; }
.mm-list, .mm-sub { list-style: none; margin: 0; padding: 0; }
.mm-list > li { border-bottom: 1px solid var(--line, rgba(0,79,73,0.10)); }
.mm-link {
  display: block; padding: 16px 2px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--green-deep, #004F49); text-decoration: none;
}
.mm-link--group { padding-bottom: 8px; }
.mm-sub { padding: 0 0 12px; }
.mm-sublink { display: block; padding: 10px 2px 10px 14px; text-decoration: none; border-left: 2px solid var(--line, rgba(0,79,73,0.12)); }
.mm-sub-tt { display: block; font-size: 15px; font-weight: 500; color: var(--green-deep, #004F49); }
.mm-sub-ds { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-muted, #5B6B66); margin-top: 2px; }
.mm-foot { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 22px; }
.mm-foot .mm-cta { justify-content: center; white-space: normal; text-align: center; }
.mm-lang { display: flex; gap: 6px; }
.mm-lang button {
  flex: 1; padding: 10px 0; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  color: var(--ink-muted, #5B6B66); background: #FFFFFF; border: 1px solid var(--line, rgba(0,79,73,0.14)); border-radius: 10px;
}
.mm-lang button.active { color: #FFFFFF; background: var(--green-accent, #007C74); border-color: var(--green-accent, #007C74); }
.mm-login { align-self: center; font-size: 14.5px; font-weight: 500; color: var(--green-deep, #004F49); text-decoration: none; padding: 6px 0; }

/* Entre 1001 e 1199 px o menu desktop não cabe em uma linha (PT/ES quebram
   "Para Quem" e "Quem Somos"); nessa faixa o menu mobile assume a navegação.
   O menu-mobile.js mostra o botão sempre que .nav estiver oculta, então os dois
   menus nunca aparecem juntos nem somem ao mesmo tempo. */
@media (max-width: 1199px) {
  .site-header .nav, .site-header .lang, .site-header .btn-login { display: none !important; }
}
@media (min-width: 1200px) {
  .site-header .nav a, .site-header .nav-trigger { white-space: nowrap; }
}

/* Mega-menu do desktop com 5 soluções: o 5º cartão ocupa a última linha inteira. */
.mega-grid > .mega-card:nth-child(5) { grid-column: 1 / -1; }
.mega-grid > .mega-card:nth-child(5) .mega-ds { max-width: none; }

/* trava a rolagem da página enquanto o menu está aberto */
html.mm-locked, html.mm-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .mm-bars span { transition: none; } }