/* Q5 V22: catálogo ilustrado, páginas de serviços e navegação compartilhada. */
:root {
  --q5-navy: #061c36;
  --q5-blue: #087ef2;
  --q5-cyan: #65d8ff;
  --q5-ink: #132d48;
  --q5-muted: #496179;
  --q5-line: #dce7f1;
  --q5-header-height: 92px;
}
.q5-wrap { width: min(1320px, calc(100% - 80px)); margin-inline: auto; }
.q5-skip-link {
  position: fixed; left: 20px; top: 12px; z-index: 1500;
  padding: 10px 18px; border-radius: 6px; background: #fff; color: #061c36;
  font-weight: 700; transform: translateY(-150%);
}
.q5-skip-link:focus { transform: translateY(0); }
.spa-site .home-nav-wrap {
  width: min(1420px, calc(100% - 64px)); height: var(--q5-header-height); gap: 24px;
}
.spa-site .home-brand { flex: 0 0 132px; width: 132px; transform: scale(.88); transform-origin: left center; }
.spa-site .home-brand .brand-q { color: #fff; }
.spa-site .home-brand .brand-5 { color: #27afff; }
.spa-site .home-nav { gap: clamp(18px, 2vw, 32px); }
.spa-site .home-nav > a, .spa-site .home-drop > button { font-size: 14px; padding: 28px 0; }
.spa-site .quote-button { margin-left: 0; min-width: 174px; font-size: 13px; border-radius: 8px; }
.spa-site .home-drop-menu { top: 70px; min-width: 310px; max-height: min(70vh, 620px); overflow-y: auto; }
.spa-site .home-drop:not(.open) .home-drop-menu { display: none; }
.spa-site .home-drop.open .home-drop-menu { display: block; }
.spa-site .home-drop > button.active::after { transform: scaleX(1); }
.spa-site .home-drop-menu a.active, .spa-site .home-drop-menu a[aria-current="page"] {
  background: #158cf329; color: #83dbff;
}
.spa-site .solutions-menu a:first-child { border-bottom: 1px solid #ffffff26; border-radius: 5px 5px 0 0; margin-bottom: 5px; }
.spa-site .inner-view, .monitoring-direct { padding-top: var(--q5-header-height); }
.q5-service-view, .q5-solutions-view { background: #fff; color: var(--q5-ink); }
.q5-service-hero, .q5-catalogue-hero {
  background: radial-gradient(ellipse at 84% 20%, #124d78, transparent 65%), var(--q5-navy);
  color: #fff;
}
.q5-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 34px; color: #aac9e3; font-size: 12px; }
.q5-breadcrumb a { padding-block: 4px; }
.q5-breadcrumb a:hover { color: #fff; }
.q5-breadcrumb > span[aria-hidden] { color: #6186a9; }
.q5-eyebrow { display: block; color: #0870c7; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.q5-service-hero .q5-eyebrow, .q5-catalogue-hero .q5-eyebrow, .q5-cta .q5-eyebrow { color: var(--q5-cyan); }
.q5-service-hero > .q5-wrap { padding-block: 32px 64px; }
.q5-service-intro { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 54px; }
.q5-service-copy { min-width: 0; }
.q5-service-copy h1 { margin: 16px 0 20px; font-size: clamp(36px, 3.5vw, 54px); line-height: 1.1; letter-spacing: -.04em; }
.q5-service-copy > p { margin: 0; color: #c8dbee; font-size: 17px; line-height: 1.8; }
.q5-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.q5-tags li { padding: 6px 10px; border: 1px solid #ffffff25; border-radius: 5px; color: #c7e5fb; font-size: 11px; }
.q5-service-visual { min-width: 0; margin: 0; }
.q5-service-visual .mw-image-link { border-color: #38607e; box-shadow: 0 24px 65px #0003; }
.q5-service-visual picture, .q5-service-visual img { display: block; width: 100%; height: auto; }
.q5-service-visual figcaption { margin-top: 12px; color: #97b9d5; font-size: 11px; line-height: 1.6; }
.q5-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; margin-top: 26px; padding: 12px 20px; border: 1px solid transparent;
  border-radius: 7px; background: var(--q5-blue); color: #fff; font-size: 13px; line-height: 1.4; font-weight: 800;
}
.q5-button:hover { background: #0068d3; }
.q5-service-section { padding-block: 72px; }
.q5-service-heading { max-width: 850px; margin-bottom: 34px; }
.q5-service-heading h2, .q5-application-copy h2, .q5-related h2, .q5-cta h2 {
  margin: 14px 0 18px; font-size: clamp(27px, 2.5vw, 38px); line-height: 1.2; letter-spacing: -.03em;
}
.q5-service-heading p, .q5-application-copy p { margin: 0; color: var(--q5-muted); font-size: 16px; line-height: 1.9; }
.q5-scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.q5-scope-card { padding: 24px; border: 1px solid var(--q5-line); border-radius: 10px; background: #f9fbfe; }
.q5-scope-card > span { color: #0870c7; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.q5-scope-card h3 { margin: 16px 0 12px; font-size: 18px; line-height: 1.35; }
.q5-scope-card p { margin: 0; color: var(--q5-muted); font-size: 13px; line-height: 1.8; }
.q5-application { padding-block: 60px; border-block: 1px solid var(--q5-line); background: #f2f7fc; }
.q5-application-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 80px; }
.q5-application-list { list-style: none; margin: 24px 0 0; padding: 0; }
.q5-application-list li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid #d7e5f0; font-size: 14px; color: #385571; }
.q5-application-list li::before { content: ""; position: absolute; width: 6px; height: 6px; top: 22px; left: 0; border-radius: 50%; background: var(--q5-blue); }
.q5-example { padding: 26px 30px; border: 1px solid #c9dceb; border-radius: 10px; background: #fff; }
.q5-example strong { color: #0870c7; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.q5-example p { margin: 14px 0 0; font-size: 16px; line-height: 1.85; color: #385571; }
.q5-example .q5-example-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--q5-line); color: #62788d; font-size: 12px; }
.q5-related { padding-block: 58px; }
.q5-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.q5-related-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border: 1px solid #d0e1ef; border-radius: 8px; font-size: 14px; font-weight: 700; }
.q5-related-link > span { color: var(--q5-blue); font-size: 20px; }
.q5-related-link:hover { background: #f3f9ff; border-color: #8dbfea; }
.q5-cta { padding-block: 54px; background: linear-gradient(110deg, #124f7a, #082d50); color: #fff; }
.q5-cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.q5-cta-grid > div { max-width: 740px; }
.q5-cta h2 { font-size: clamp(26px, 2.5vw, 35px); }
.q5-cta p { margin: 0; color: #c5dced; font-size: 15px; line-height: 1.8; }
.q5-cta .q5-button { margin: 0; flex: 0 0 auto; }
.q5-catalogue-hero { padding-block: 56px 62px; }
.q5-catalogue-hero h1 { margin: 18px 0 22px; max-width: 900px; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.1; letter-spacing: -.04em; }
.q5-catalogue-hero p { margin: 0; max-width: 780px; font-size: 18px; line-height: 1.8; color: #c8dbee; }
.q5-catalogue-body { padding-block: 58px 72px; background: #f5f8fc; }
.q5-catalogue-label { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.q5-catalogue-label h2 { margin: 0; font-size: 25px; line-height: 1.3; letter-spacing: -.025em; }
.q5-catalogue-label p { margin: 0; align-self: center; color: var(--q5-muted); font-size: 13px; }
.q5-solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.q5-solution-card { overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--q5-line); border-radius: 11px; background: #fff; box-shadow: 0 10px 24px #14335106; }
.q5-solution-image { display: block; background: var(--q5-navy); overflow: hidden; }
.q5-solution-image picture, .q5-solution-image img { display: block; width: 100%; height: auto; }
.q5-solution-image img { aspect-ratio: 1672 / 941; object-fit: contain; transition: filter .18s ease; }
.q5-solution-image:hover img { filter: brightness(1.12); }
.q5-solution-card-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.q5-solution-index { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #0870c7; }
.q5-solution-card h3 { margin: 10px 0 14px; font-size: 21px; line-height: 1.3; }
.q5-solution-card p { margin: 0 0 20px; color: var(--q5-muted); font-size: 14px; line-height: 1.8; }
.q5-solution-card .q5-card-link { margin-top: auto; padding-top: 14px; border-top: 1px solid #e2ecf5; color: #0870c7; font-size: 12px; font-weight: 800; }
.q5-card-link span { float: right; font-size: 17px; line-height: 1; }
.q5-footer { padding-block: 30px; background: #04162b; color: #a7bfd6; font-size: 12px; }
.q5-footer .q5-wrap { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.q5-footer strong { display: block; margin-bottom: 4px; font-size: 14px; color: #fff; }
.q5-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.q5-footer a:hover { color: #fff; }
.showing-monitor .q5-footer { display: none; }
.q5-solution-image:focus-visible, .q5-card-link:focus-visible, .q5-button:focus-visible,
.q5-related-link:focus-visible, .q5-breadcrumb a:focus-visible, .home-header a:focus-visible,
.home-header button:focus-visible, .q5-footer a:focus-visible {
  outline: 3px solid #58baff; outline-offset: 4px;
}
.site-view[hidden] { display: none !important; }
.mw-lightbox button[hidden] { display: none; }
.q5-monitor-banner { margin: 0; }
.q5-monitor-banner picture, .q5-monitor-banner img { display: block; width: 100%; height: auto; }
.q5-monitor-banner figcaption { padding-top: 12px; color: #a9c4df; font-size: 11px; line-height: 1.6; }
.monitoring-content .mw-resource-grid.q5-overview-grid { grid-template-columns: .8fr 1.2fr; }
.mw-section, .mw-hero { scroll-margin-top: calc(var(--q5-header-height) + 20px); }
@media (max-width: 1100px) {
  :root { --q5-header-height: 72px; }
  .spa-site .home-header, .spa-site:not(.showing-home) .home-header { background: #0b344fea; backdrop-filter: blur(12px); }
  .spa-site .home-nav-wrap { width: 100%; height: 72px; padding: 0 24px; gap: 16px; }
  .spa-site .home-brand { flex: 0 0 108px; width: 108px; height: 54px; transform: none; }
  .spa-site .home-brand .brand-q, .spa-site .home-brand .brand-5 { font-size: 43px; }
  .spa-site .home-brand .brand-5 { left: 37px; }
  .spa-site .home-brand small { top: 43px; font-size: 7px; letter-spacing: 3.2px; }
  .spa-site .home-menu-btn { display: block; margin-left: auto; border: 1px solid #ffffff70; border-radius: 7px; padding: 8px 13px; background: #ffffff12; color: #fff; font-size: 14px; }
  .spa-site .quote-button { display: none; }
  .spa-site .home-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; margin: 0; max-height: calc(100svh - 72px); overflow-y: auto; padding: 12px 24px 22px; flex-direction: column; align-items: stretch; gap: 0; background: #061b31fa; }
  .spa-site .home-nav.show { display: flex; }
  .spa-site .home-nav > a, .spa-site .home-drop > button { display: block; width: 100%; padding: 15px 0; text-align: left; }
  .spa-site .home-nav > a::after, .spa-site .home-drop > button::after { display: none; }
  .spa-site .home-nav > a.active, .spa-site .home-drop > button.active { color: #83dbff; }
  .spa-site .home-drop-menu { position: static; width: 100%; min-width: 0; max-height: none; overflow: visible; margin: 0 0 8px; background: #0a2948; box-shadow: none; border-color: #ffffff1f; }
  .spa-site .home-drop-menu a { white-space: normal; padding: 11px 12px; font-size: 14px; line-height: 1.35; }
  .q5-service-intro { gap: 32px; }
  .q5-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q5-application-grid { gap: 40px; }
  .q5-solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .q5-wrap { width: calc(100% - 48px); }
  .q5-service-intro { grid-template-columns: 1fr; gap: 32px; }
  .q5-service-copy { max-width: 670px; }
  .q5-service-copy h1 { font-size: clamp(35px, 6vw, 49px); }
  .q5-service-hero > .q5-wrap { padding-block: 24px 46px; }
  .q5-service-section { padding-block: 52px; }
  .q5-application-grid { grid-template-columns: 1fr; gap: 30px; }
  .q5-related-grid { grid-template-columns: 1fr; gap: 12px; }
  .q5-cta-grid { flex-direction: column; align-items: flex-start; gap: 26px; }
  .q5-catalogue-label { flex-direction: column; gap: 10px; }
  .q5-catalogue-label p { align-self: flex-start; }
  .monitoring-content .mw-resource-grid.q5-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .q5-wrap { width: calc(100% - 36px); }
  .spa-site .home-nav-wrap { padding-inline: 18px; }
  .q5-breadcrumb { font-size: 11px; gap: 8px; margin-bottom: 24px; }
  .q5-service-copy h1 { font-size: 34px; }
  .q5-service-copy > p { font-size: 15px; }
  .q5-tags { gap: 6px; margin-top: 20px; }
  .q5-tags li { font-size: 10px; }
  .q5-service-visual figcaption, .q5-monitor-banner figcaption { font-size: 10px; }
  .q5-scope-grid { grid-template-columns: 1fr; gap: 14px; }
  .q5-scope-card { padding: 22px; }
  .q5-service-heading p { font-size: 15px; }
  .q5-application { padding-block: 44px; }
  .q5-example { padding: 24px; }
  .q5-example p { font-size: 15px; }
  .q5-related { padding-block: 44px; }
  .q5-related-link { padding: 18px 20px; }
  .q5-cta { padding-block: 42px; }
  .q5-cta .q5-button { width: 100%; }
  .q5-catalogue-hero { padding-block: 38px 42px; }
  .q5-catalogue-hero h1 { font-size: 35px; }
  .q5-catalogue-hero p { font-size: 16px; }
  .q5-catalogue-body { padding-block: 38px 48px; }
  .q5-solution-grid { grid-template-columns: 1fr; gap: 22px; }
  .q5-solution-card-body { padding: 22px; }
  .q5-footer .q5-wrap { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}