/* Responsivo global — mobile + desktop */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-width: 0;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

main .container {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

@media (min-width: 992px) {
  main .container {
    max-width: 720px;
  }
}

#trilha,
.obj-trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  max-width: 100%;
  min-width: 0;
}

#trilha a,
.obj-trilha a {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.jumbotron {
  max-width: 100%;
  overflow-wrap: anywhere;
}

textarea,
input,
select,
.form-control {
  max-width: 100%;
}

#acess-drop-down {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  #menu {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }

  #rodape .recipiente {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (max-width: 480px) {
  .portal-bars-wrap {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}