/* CT-HOME-METRICAS-17 | onda inferior + centralização dos cards.
   Adição visual à CT-15. Não altera os indicadores dinâmicos ou conteúdos. */

/* Reserva espaço abaixo dos cards para a curva azul ter desenho nítido. */
html body .data-ribbon.ct-metric-ribbon {
  position: relative !important;
  border: 0 !important;
  border-block: 0 !important;
  padding-bottom: 102px !important;
}

/* A onda inferior é um recorte na cor original do papel do site.
   A faixa azul continua sendo desenhada pela CT-15. */
html body .data-ribbon.ct-metric-ribbon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;
  height: 90px !important;
  z-index: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23f8f7f2%22%20d%3D%22M0%2058%20C145%20105%20252%2022%20408%2058%20C564%2093%20679%20102%20823%2052%20C997%20-2%201109%2084%201260%2062%20C1333%2051%201398%2041%201440%2053%20L1440%20120%20L0%20120%20Z%22%2F%3E%3C%2Fsvg%3E") center bottom / 100% 100% no-repeat !important;
  pointer-events: none !important;
}

/* Mesma hierarquia em todos os quatro indicadores. */
html body .data-ribbon.ct-metric-ribbon > .wrap {
  position: relative;
  z-index: 2 !important;
}
html body .data-ribbon.ct-metric-ribbon > .wrap > span {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body .data-ribbon.ct-metric-ribbon > .wrap > span > b {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  html body .data-ribbon.ct-metric-ribbon {
    padding-bottom: 82px !important;
  }
  html body .data-ribbon.ct-metric-ribbon::after {
    height: 66px !important;
  }
}
@media (max-width: 480px) {
  html body .data-ribbon.ct-metric-ribbon {
    padding-bottom: 72px !important;
  }
  html body .data-ribbon.ct-metric-ribbon::after {
    height: 54px !important;
  }
}