/* =========================================================
   ABERT Landing - correção responsiva do topo
   Este CSS é propositalmente defensivo para corrigir sobreposição
   de logo e botões no mobile.
   ========================================================= */

@media (max-width: 768px) {
  header,
  .header,
  .app-header,
  .site-header,
  .topbar,
  .navbar,
  nav {
    max-width: 100%;
  }

  header img,
  .header img,
  .app-header img,
  .site-header img,
  .navbar img {
    max-width: min(230px, 58vw) !important;
    height: auto !important;
  }

  header a,
  header button,
  .header a,
  .header button,
  .app-header a,
  .app-header button,
  .site-header a,
  .site-header button,
  .navbar a,
  .navbar button {
    white-space: nowrap;
  }
}

/* Correção mais agressiva para telas estreitas */
@media (max-width: 560px) {
  header,
  .header,
  .app-header,
  .site-header,
  .navbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  header img,
  .header img,
  .app-header img,
  .site-header img,
  .navbar img {
    max-width: 220px !important;
  }

  header nav,
  .header nav,
  .app-header nav,
  .site-header nav,
  .navbar nav {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
}