/* CT-HOME-METRICAS-15 — onda azul escuro da logomarca, mais amplitude, menor intervalo entre ondas. */
/* A Home e os indicadores dinâmicos permanecem intactos. */
.data-ribbon.ct-metric-ribbon {
  position: relative;
  isolation: isolate;
  z-index: 2;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  margin: -26px 0 0 !important;
  padding: 124px 0 34px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20136%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22marca%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23012268%22%2F%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%2303457f%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2304699d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url%28%23marca%29%22%20d%3D%22M0%2068%20C152%20-3%20283%20108%20453%2057%20C632%202%20727%200%20922%2060%20C1102%20114%201229%20-3%201440%2056%20L1440%20136%20H0%20Z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(90deg, #012268 0%, #03457f 55%, #04699d 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, left 104px !important;
  background-size: 100% 136px, 100% calc(100% - 104px) !important;
}

/* Mantém o cálculo e o conteúdo original de cada métrica. */
.data-ribbon.ct-metric-ribbon > .wrap {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: initial !important;
  gap: 18px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

.data-ribbon.ct-metric-ribbon > .wrap > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0;
  min-height: 123px;
  margin: 0 !important;
  padding: 20px 22px !important;
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(23, 63, 53, .12) !important;
  border-radius: 14px !important;
  box-shadow: 0 9px 22px rgba(13, 55, 65, .08);
  color: #395c60 !important;
  font-family: var(--sans, Arial, sans-serif);
  font-weight: 500;
  font-size: 13px !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal;
}
.data-ribbon.ct-metric-ribbon > .wrap > span > b {
  display: block !important;
  margin: 0 0 9px !important;
  color: #173f35 !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 600 !important;
  font-size: clamp(35px, 3.05vw, 47px) !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 900px) {
  .data-ribbon.ct-metric-ribbon {
    margin-top: -20px !important;
    padding-top: 101px !important;
    padding-bottom: 28px !important;
    background-position: center top, left 88px !important;
    background-size: 100% 115px, 100% calc(100% - 88px) !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap > span {
    min-height: 103px;
    padding: 17px 17px !important;
    font-size: 12px !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap > span > b {
    font-size: clamp(31px, 6vw, 41px) !important;
    margin-bottom: 8px !important;
  }
}
@media (max-width: 480px) {
  .data-ribbon.ct-metric-ribbon {
    margin-top: -16px !important;
    padding-top: 91px !important;
    padding-bottom: 24px !important;
    background-position: center top, left 79px !important;
    background-size: 100% 103px, 100% calc(100% - 79px) !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap {
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap > span {
    min-height: 98px;
    border-radius: 11px !important;
    padding: 14px 12px !important;
    font-size: 11px !important;
  }
  .data-ribbon.ct-metric-ribbon > .wrap > span > b {
    font-size: clamp(29px, 8vw, 37px) !important;
    margin-bottom: 7px !important;
  }
}