/*
 * Página: engages. Carregado só no(s) template(s) da página (inc/assets.php).
 */

/* ==== Diversas ==== */

.diversas {
  padding: 40px 0;
}

.diversas .social {
  text-align: right;
  margin-top: -20px;
}

.diversas .social a {
  color: var(--cor-quase-preto);
  font-family: "Gotham";
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: 0.3s;
}

.diversas .social a:hover {
  opacity: 0.7;
}

.diversas .item-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.diversas .item-wrapper .col-4 {
  align-items: center;
  flex-direction: column;
  display: flex;
  margin-bottom: 40px;
  padding: 0 0 20px;
}

.diversas .item-wrapper .caixa-colunistas {
  position: relative;
}

.diversas .item-wrapper p {
  color: var(--cor-branco);
  font-family: "Gotham";
  margin-bottom: 0;
}

.diversas .item-wrapper .img-wrapper {
  border: 2px solid var(--cor-branco);
  padding: 10px;
  position: relative;
}

.diversas .item-wrapper .img-wrapper::before {
  content: "";
  width: 170px;
  height: 50px;
  background-color: #001f38;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.diversas .item-wrapper .img-wrapper::before {
  background-color: #00ffc4 !important;
}

.diversas .item-wrapper .engages-colunistas .img-wrapper::before {
  background-color: var(--cor-engages) !important;
}

.diversas .item-wrapper .engages-colunistas .caixa-nomes a {
  color: var(--cor-preto);
}

.diversas .item-wrapper img {
  width: 248px;
  height: 248px;
  background: var(--cor-branco);
  z-index: 2;
  position: relative;
}

.diversas .item-wrapper .caixa-nomes p {
  color: var(--cor-branco);
  background: var(--cor-rosa-spark);
  font-family: "Gotham";
  padding: 0.7rem 1.2rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-align: center;
  z-index: 3;
}

.diversas .item-wrapper .caixa-nomes {
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: -30px;
}

@media (max-width: 1199.98px) {
  .diversas h1 {
    font-size: 46px;
  }
}

@media (max-width: 991.98px) {
  .diversas .downloads a {
    text-align: initial;
    width: fit-content;
  }

  .diversas h1 {
    font-size: 40px;
    text-align: center;
  }

  .diversas h1:after {
    margin: 5px auto 0;
  }

  .diversas .item-wrapper br {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .diversas h1 {
    font-size: 30px;
  }

  .diversas .item-wrapper span {
    margin-right: 0;
  }

  .diversas .item-wrapper .col-4 {
    justify-content: center;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .diversas p {
    text-align: center;
  }
}