.useful-page { background: #fbfaf7; }
.useful-hero { position: relative; isolation: isolate; background: var(--useful-hero-image, url("../../img/geral/hero/rio_mira.JPG")) center 45% / cover no-repeat; }
.useful-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,39,67,.86), rgba(5,45,72,.43) 63%, rgba(5,45,72,.12)); }
.useful-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: 285px; padding-bottom: 70px; }
.useful-hero h1 { margin: 0 0 7px; color: #fff; font: 800 clamp(2.7rem, 4.5vw, 4.3rem)/1.08 "Montserrat", sans-serif; }
.useful-hero p { margin: 0; color: #fff; font-size: clamp(1.1rem, 1.65vw, 1.4rem); }
.useful-waves { position: absolute; z-index: 3; inset: auto 0 -1px; height: clamp(60px, 7vw, 100px); pointer-events: none; }
.useful-waves svg { display: block; width: 100%; height: 100%; }
.useful-wave-blue { fill: rgba(42,165,216,.88); }
.useful-wave-green { fill: rgba(36,142,81,.92); }
.useful-wave-white { fill: #fbfaf7; }

.useful-content { padding: 22px 0 74px; background: radial-gradient(circle at 10% 32%, rgba(233,243,248,.55), transparent 38%), #fbfaf7; }
.useful-container { max-width: 1480px; padding-inline: clamp(20px, 4vw, 62px); }
.useful-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(450px,1fr); align-items: end; gap: 28px 44px; margin-bottom: 28px; }
.useful-kicker { display: flex; align-items: center; gap: 13px; margin: 0 0 12px; color: #176545; font: 700 .75rem "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.useful-kicker::before { content: ""; width: 40px; height: 3px; background: #178758; }
.useful-heading h2 { max-width: 570px; margin: 0 0 10px; color: #11294a; font: 700 clamp(2rem, 3.5vw, 3.7rem)/1.05 Georgia, serif; letter-spacing: -.035em; }
.useful-heading > p:last-child { max-width: 580px; margin: 0; color: #4c5e76; font: 1.12rem/1.5 Georgia, serif; }
.useful-controls { padding-bottom: 5px; }
.useful-search { display: flex; min-height: 54px; overflow: hidden; border: 1px solid #cbd7df; border-radius: 8px; background: #fff; box-shadow: 0 2px 7px rgba(10,49,74,.03); }
.useful-search svg { flex: none; width: 22px; height: 22px; margin: auto 12px auto 18px; fill: none; stroke: #657993; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.useful-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #102b4d; font: .95rem "Montserrat", sans-serif; }
.useful-search input::placeholder { color: #6b7b91; }
.useful-search button, .useful-cta a { border: 0; border-radius: 5px; background: #125243; color: #fff; font: 700 .88rem "Montserrat", sans-serif; cursor: pointer; }
.useful-search button { margin: 3px; padding: 0 24px; }
.useful-search button:hover, .useful-cta a:hover { background: #0c4038; }
.useful-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.useful-filter { min-height: 38px; padding: 7px 15px; border: 1px solid #cbd8df; border-radius: 999px; background: transparent; color: #142f50; font: 700 .8rem "Montserrat", sans-serif; cursor: pointer; }
.useful-filter:hover { background: #e7f2f2; }
.useful-filter[aria-pressed="true"] { border-color: #145848; background: #145848; color: #fff; }
.useful-search:focus-within { outline: 3px solid #127ab6; outline-offset: 2px; }
.useful-search button:focus-visible, .useful-filter:focus-visible, .useful-cta a:focus-visible, .useful-card a:focus-visible { outline: 3px solid #127ab6; outline-offset: 3px; }

.useful-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.useful-card {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) minmax(214px,250px);
  align-items: center;
  gap: 15px;
  min-height: 132px;
  padding: 13px 15px;
  border: 1px solid #dfe6eb;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(20,54,77,.055);
}
.useful-card[hidden], .useful-empty[hidden] { display: none !important; }

.useful-card-icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  color: var(--icon-color,#14669c);
}
.useful-card-icon svg {
  width: 82px;
  height: 82px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.useful-card-icon--emblem {
  width: 104px;
  height: 104px;
}
.useful-card-icon--emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.useful-card-icon--municipio img {
  width: 122px;
  max-width: none;
  margin-left: -9px;
}

.useful-card--red { --icon-color: #d51d25; --badge-bg: #fff0f1; --badge-color: #c91b24; }
.useful-card--blue { --icon-color: #1265be; --badge-bg: #e9f3ff; --badge-color: #10519a; }
.useful-card--green { --icon-color: #14794f; --badge-bg: #eaf6f0; --badge-color: #135e48; }
.useful-card--navy { --icon-color: #173c6f; --badge-bg: #e9f3ff; --badge-color: #10519a; }
.useful-card--orange { --icon-color: #e67b25; --badge-bg: #f7e4cc; --badge-color: #e67b25; }

.useful-card-category { display: block; margin-bottom: 4px; color: var(--icon-color); font: 800 .66rem "Montserrat", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.useful-card h3 { margin: 0 0 3px; color: #102747; font: 700 1.48rem/1.14 Georgia, serif; }
.useful-card p { margin: 0; color: #536984; font: .87rem/1.38 "Montserrat", sans-serif; }

.useful-card-contacts {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  align-self: stretch;
}
.useful-card-contact {
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-height: 39px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--badge-bg);
  color: var(--badge-color);
  font-family: "Montserrat", sans-serif;
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.useful-card-contact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16,54,75,.09);
}
.useful-card-contact svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.useful-card-contact > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.useful-card-contact small {
  color: #5f7186;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.1;
}
.useful-card-contact strong {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.useful-card-contacts--single {
  align-content: center;
}
.useful-card-contacts--single .useful-card-contact {
  min-height: 72px;
  align-content: center;
  padding-block: 12px;
}
.useful-card-contacts--single .useful-card-contact svg {
  width: 28px;
  height: 28px;
}
.useful-card-contacts--single .useful-card-contact small {
  font-size: .72rem;
}
.useful-card-contacts--single .useful-card-contact strong {
  font-size: 1.25rem;
}
.useful-card-contact--pending {
  color: #6d7e89;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}
.useful-empty { margin: 25px 0; color: #536984; font: 1rem/1.5 "Montserrat", sans-serif; text-align: center; }
.useful-cta { display: flex; align-items: center; gap: 24px; margin-top: 18px; padding: 20px 30px; border-radius: 10px; background: #e4f2ff; }
.useful-cta > svg { flex: none; width: 68px; height: 68px; fill: none; stroke: #15559a; stroke-width: 2.3; }
.useful-cta-copy { flex: 1; }
.useful-cta-copy span { color: #155397; font: 800 .72rem "Montserrat", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.useful-cta h2 { margin: 2px 0; color: #102747; font: 700 1.9rem/1.1 Georgia, serif; }
.useful-cta p { margin: 0; color: #536984; font-size: .87rem; }
.useful-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-width: 175px; min-height: 44px; padding: 10px 16px; text-decoration: none; }

@media (max-width: 1180px) {
  .useful-card {
    grid-template-columns: 90px minmax(0,1fr) minmax(200px,230px);
    gap: 12px;
  }
  .useful-card-icon { width: 84px; height: 84px; }
  .useful-card-icon--emblem { width: 90px; height: 90px; }
  .useful-card-icon svg { width: 72px; height: 72px; }
  .useful-card-icon--municipio img { width: 108px; }
}

@media (max-width: 980px) {
  .useful-toolbar { grid-template-columns: 1fr; }
  .useful-grid { grid-template-columns: 1fr; }
  .useful-card {
    grid-template-columns: 100px minmax(0,1fr) minmax(220px,270px);
    min-height: 132px;
  }
  .useful-card-icon { width: 92px; height: 92px; }
  .useful-card-icon--emblem { width: 100px; height: 100px; }
  .useful-card-icon svg { width: 78px; height: 78px; }
  .useful-card-icon--municipio img { width: 118px; }
}

@media (max-width: 680px) {
  .useful-hero-inner { min-height: 255px; padding-bottom: 65px; }
  .useful-content { padding-top: 18px; }
  .useful-toolbar { gap: 20px; }
  .useful-search button { padding-inline: 12px; }
  .useful-filter { padding-inline: 12px; font-size: .74rem; }

  .useful-card {
    grid-template-columns: 76px minmax(0,1fr);
    gap: 10px 14px;
    padding: 15px;
  }
  .useful-card-icon { width: 70px; height: 70px; }
  .useful-card-icon--emblem { width: 76px; height: 76px; }
  .useful-card-icon--municipio img { width: 92px; margin-left: -8px; }
  .useful-card-icon svg { width: 62px; height: 62px; }

  .useful-card-contacts,
  .useful-card-contacts--single {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .useful-card-contacts--single .useful-card-contact { min-height: 58px; }

  .useful-cta { flex-wrap: wrap; gap: 12px; padding: 20px; }
  .useful-cta > svg { width: 45px; height: 45px; }
  .useful-cta a { width: 100%; }
}