/* Portal do cidadão e páginas individuais de serviços */
.services-page-hero,
.service-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 78px;
  background: var(--ink);
  border-bottom: 1px solid #243244;
}

.services-page-hero .hero-bg,
.service-detail-hero .hero-bg { opacity: .28; filter: none; }
.services-page-hero .hero-bg:after,
.service-detail-hero .hero-bg:after { background: linear-gradient(90deg, rgba(101,227,225,.3), rgba(101,227,225,.05)); }
.services-page-hero .shell,
.service-detail-hero .shell { position: relative; z-index: 1; }
.services-page-hero .eyebrow,
.service-detail-hero .eyebrow { margin-bottom: 24px; }
.services-page-hero h1,
.service-detail-hero h1 { font: 700 clamp(45px, 6vw, 84px)/.94 var(--display); letter-spacing: -.08em; margin: 0; }
.services-page-hero h1 em { color: var(--cyan); font-style: normal; }
.services-page-lead { max-width: 510px; color: #abb8c8; font-size: 15px; line-height: 1.7; margin: 28px 0 0; }

.services-page-section,
.service-detail-section { padding: 85px 0 120px; }
.services-page-section .section-heading { margin-bottom: 48px; }
.services-page-section .section-heading h2 { font-size: clamp(39px, 5vw, 66px); }
.services-page-section .section-heading h2 em { color: var(--cyan); font-style: normal; }
.services-catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.service-card { position: relative; min-height: 174px; padding: 20px; display: flex; gap: 18px; align-items: flex-start; background: rgba(101,227,225,.36); color: var(--ink); text-decoration: none; transition: .25s; }
.service-card:hover { background: var(--cyan); transform: translateY(-5px); box-shadow: 7px 7px 0 rgba(7,17,31,.15); }
.service-card-icon { font: 500 28px var(--display); width: 42px; }
.service-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding-right: 25px; }
.service-card-copy small { color: #526e80; font: 9px var(--mono); letter-spacing: .12em; margin-bottom: 18px; }
.service-card-copy b { font-size: 17px; line-height: 1.1; }
.service-card-copy p { color: #416274; font-size: 12px; line-height: 1.5; margin: 9px 0 0; }
.service-card > i { position: absolute; right: 19px; bottom: 18px; font-style: normal; font-size: 21px; }
.empty-services { grid-column: 1 / -1; padding: 55px; background: rgba(101,227,225,.25); }
.empty-services h2 { font: 600 32px var(--display); letter-spacing: -.06em; margin: 22px 0 0; }

.service-detail-hero { padding: 61px 0 74px; }
.back-link { display: inline-block; color: var(--cyan); font: 10px var(--mono); text-decoration: none; margin-bottom: 42px; }
.back-link:hover { color: #fff; }
.service-detail-title { display: flex; align-items: center; gap: 20px; }
.service-detail-icon { display: grid; place-items: center; width: 58px; height: 58px; background: var(--cyan); color: var(--ink); font: 25px var(--display); }
.service-detail-lead { max-width: 670px; color: #abb8c8; font-size: 16px; line-height: 1.7; margin: 26px 0 0 78px; }
.service-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 70px; align-items: start; }
.service-detail-content { max-width: 730px; }
.service-detail-content p { color: #a6b4c8; font-size: 16px; line-height: 1.85; margin: 0 0 22px; }
.service-detail-content a:not(.button) {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  transition: color .2s ease, text-decoration-color .2s ease;
  word-break: break-word;
}
.service-detail-content a:not(.button):hover {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
.service-detail-content .service-placeholder { color: #7c8998; }
.service-detail-content .ql-align-center { text-align: center; }
.service-detail-content .ql-align-right { text-align: right; }
.service-detail-content .ql-align-justify { text-align: justify; text-justify: inter-word; }
.service-detail-content .ql-align-left { text-align: left; }
.service-detail-content .button { margin-top: 24px; }
.related-services { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 23px; }
.related-services .eyebrow { color: #9eb3cb; margin: 0 0 24px; }
.related-services a { position: relative; display: flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; border-top: 1px solid rgba(255, 255, 255, .2); padding: 17px 20px 17px 0; }
.related-services a:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.related-services a:hover b { color: var(--lime); }
.related-services a span { font-size: 21px; width: 23px; }
.related-services a b { font-size: 14px; line-height: 1.15; transition: .2s; }
.related-services a i { position: absolute; right: 0; color: var(--lime); font-style: normal; }

@media (max-width: 850px) {
  .services-page-hero, .service-detail-hero { padding: 70px 0 56px; }
  .services-catalog { grid-template-columns: 1fr; }
  .service-detail-layout { grid-template-columns: 1fr; gap: 42px; }
  .related-services { border-left: 0; border-top: 1px solid #b8c0ba; padding: 35px 0 0; }
}

@media (max-width: 520px) {
  .services-page-hero h1, .service-detail-hero h1 { font-size: 44px; }
  .service-detail-title { align-items: flex-start; }
  .service-detail-icon { flex: 0 0 45px; width: 45px; height: 45px; }
  .service-detail-lead { margin-left: 0; font-size: 14px; }
}