header.banner {
  background: url('/assets/images/reforma-tributaria/banner-desk.webp') no-repeat bottom center;
}

.text-rotate {
  transform: rotate(-5deg);
}

.bg-green {
  background: #C8FE00;
}

.texto-cinza {
  color: #FFFFFF66;
}

.texto-cinza--dark {
  color: #676F7E !important;
}

.text-and-bullets {

  &::before,
  &::after {
    content: '';
    display: inline-block;
    margin: 0 1rem;
    background: #00E4F5;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
  }
}

.bg-dark {
  background: #0F131A !important;
}

.bg-cinza {
  background: #F9FAFB;
}

.bg-cinza--dark {
  background: #F3F5F7;
}

.bg-player {
  background: #070C15;
}

.player {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16/9;
}

.badge {
  display: inline-flex;
  padding: 0.8rem 1rem;
  align-items: center;
  gap: 0.8rem;

  border-radius: 9999px;
  border: 1px solid rgba(0, 228, 245, 0.50);
  background: rgba(0, 228, 245, 0.30);
  backdrop-filter: blur(2px);

  .badge--icon {
    width: 16px;
    height: 16px;
  }

  .badge--text {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    color: #00E4F5;
  }
}

.badge__light {
  background-color: #00E4F51A;
  border: none;

  .badge--text {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }
}

.badge__gray {
  background-color: #E8EBEE;
  border: none;

  .badge--text {
    color: #676F7E;
  }
}

.badge__green {
  background: #C8FE00;

  .badge--text {
    color: #131720;
  }
}

.badge__orange {
  background: rgba(255, 121, 26, 0.10);

  .badge--text {
    color: #FF791A;
  }
}

.badge__blue {
  background: #00E4F5;

  .badge--text {
    color: #131720;
  }
}

.badge__petroleo {
  background: #00424F;
  padding: 6px 16px;
  border: 1px solid #00E4F5;

  .badge--text {
    color: #FFF;
    font-weight: 400;
  }
}

.owl-carousel .owl-item img {
  width: 100%;
  height: auto;
}

.cards:not(.cards--materials) {
  display: flex;
  padding: 2rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 20px;
  border: 1px solid #E0E6EB;
  background: #FFF;
  max-width: 15rem;

  strong,
  h3 {
    color: #131720;
    font-size: 17.7px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
  }

  p {
    color: #676F7E;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.75px;
    min-height: 12rem;
  }

  a:not(.card--content) {
    width: 100%;
    text-align: center;
    font-size: 13.9px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    border-radius: 9999px;
    color: #FFF;
  }

  a:not(.laranja-cta):not(.blue-cta):not(.green-cta):not(.card--content) {
    color: #00E4F5;
    border: 1px solid #00E4F5;
    background: #F9FAFB;
  }

  a.green-cta {
    color: #131720;
  }
}

.cards.cards--materials {
  min-width: 100%;
  min-height: unset;

  span {
    color: #00E4F5;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .card--icon {
    height: 214px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  a:not(.laranja-cta):not(.blue-cta),
  p {
    color: #676F7E;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    border: none;
    background: none;
    text-align: left;
    padding: 0 !important;
  }
}

.grid-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));

  .cards.cards--for-thumbs {
    width: 100%;
    max-width: 100%;
  }
}

.cards.cards--for-thumbs {
  width: 24rem;
  max-width: 24rem;
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;

  &:last-child {
    margin-right: 0;
  }

  article {
    width: 100%;
    height: 100%;
  }

  .card--icon {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .card--content {
    padding: 2rem;

    .card--badges {
      .badge {
        padding: 4px 10px;
      }

      .badge--text {
        font-weight: normal;
        font-size: 12px;
      }
    }
  }
}

.bg-laranja,
.bg-verde {
  p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  a {
    color: #FFF;
    text-align: center;
    font-size: 13.8px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
  }
}

.bg-laranja {
  border: 1px solid rgba(255, 121, 26, 0.20);
  background: rgba(255, 121, 26, 0.10) !important;
}

.bg-verde {
  a {
    color: #131720;
    border: 1px solid #000 !important;
  }
}

.cards.cards--calendar {
  width: 30rem;
  max-width: 30rem;
  min-height: 162px;
  gap: 1rem;

  span {
    color: #131720;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
  }

  .card--icon span {
    font-size: 14px;
    color: #233343;
    font-weight: 700;
    text-transform: none;
  }
}

.cards.cards--news {
  max-width: 24rem;

  .badge.badge__light {
    padding: 0.4rem 1rem;
  }

  p {
    min-height: auto;
  }

  .card--badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
  }

  .card--badges .badge .badge--text {
    font-size: 12px;
    font-weight: 700;
  }

  a.cta.transparent-cta {
    background: #00424F;
    border: none;
    color: #FFF;
  }
}

.cards.cards--tax-reform {
  justify-content: flex-start;
}

.knowledge {
  display: grid;
  width: 60rem;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  .content {
    display: inline-flex;
    padding: 15.375px 15.86px 38.875px 16px;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
  }
}

.formulario.form-live .form {
  border-radius: 2rem;

  .input-group input[type="submit"] {
    background-color: #00E4F5;
    border-color: transparent !important;
    padding: 0;
  }
}

.cta.petroleo-cta {
  color: #00E4F5;
}

.player-dark {
  position: absolute;
  inset: 40% 45%;
}

@media (max-width: 425px) {

  .cards,
  .cards.cards--for-thumbs,
  .cards.cards--calendar,
  .cards.cards--news {
    min-width: 100%;
    max-width: none;
  }

  .knowledge {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cards {
    grid-template-columns: repeat(1, minmax(8rem, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .cards {
    max-width: 20rem;
  }

  .cards.cards--news {
    max-width: 21rem;
  }

  .cards.cards--calendar,
  .cards.cards--for-thumbs {
    width: 20rem;
  }

  .grid-cards {
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
  }
}

@media(min-width: 1921px) {
  header.banner {
    background: url('/assets/images/reforma-tributaria/banner-xl.webp') no-repeat bottom center;
  }
}