header.banner {
  background: url("/assets/images/reforma-tributaria/certo/bg-banner-mob.webp")
    no-repeat bottom;
  background-size: cover;
}

.banner-campo {
  background: url("/assets/images/reforma-tributaria/certo/bg-banner-desk.webp")
    no-repeat center;
  background-size: cover;
}

.badge {
  width: fit-content;
  border-radius: 9999px;
  padding: 6px 17px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge.badge--green-outline {
  border: 1px solid rgba(216, 254, 0, 0.4);
  background: rgba(216, 254, 0, 0.2);
  color: #d8fe00;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge.badge--green {
  border-radius: 10px;
  background: #d8fe00;
  color: #003e51;
  font-size: 12px;
  font-weight: 700;
}

.badge.badge--blue-outline {
  border: 1px solid rgba(0, 228, 245, 0.4);
  background: rgba(0, 228, 245, 0.2);
  color: #00e2f4;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge.badge--blue {
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #003e51;

  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.badge.badge--blue strong {
  color: #fff;
  font-size: 14px;
}

.badge.badge--gray-outline {
  border-radius: 12px;
  border: 1px solid rgba(26, 64, 77, 0.15);
  background: rgba(26, 64, 77, 0.05);

  color: currentColor;
  font-size: 14px;
  font-weight: 600;
}

.badge.badge--cup {
  display: flex;
  padding: 0.6rem;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
}

.badge.badge--cup-item.active {
  border-radius: 9999px;
  background: #d8fe00;
  color: #003e51;
  font-weight: 700;
  pointer-events: none;
  transition: all 1500ms ease;
}

.badge.badge--cup-item {
  font-size: 14px;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 0;
}

.badge.badge--highlight,
.badge.badge--custom {
  width: 100%;
  padding: 13px 21px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);

  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-transform: capitalize;
}

.badge.badge--custom,
.badge.badge--custom-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;

  padding: 21px;
  border-radius: 20px;
}

.badge--text {
  display: flex;
  padding: 34px 33px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;

  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.form-hubspot {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #003e51;
  backdrop-filter: blur(6px);
}

form.form-hubspot input:not([type="submit"]) {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: #195162 !important;
  padding: 0.5rem 0.8rem !important;
  color: #fff;
}

form.form-hubspot input[type="submit"] {
  border-radius: 16px;
  background: #d8fe00;

  color: currentColor;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.small-text {
  font-size: 12px;
  font-weight: 400;
}

.bg-azul-light {
  background: radial-gradient(335.62% 51.48% at 50% 50%, #fff 0%, #e6fcfe 100%);
}

.card-shadow {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.card-highlight {
  padding: 2rem;
  border-radius: 20px;
  border-left: 4px solid #d8fe00;
  background: var(--Azul-Contador-Darker, #003e51);
}

.card-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(26, 64, 77, 0.15);
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.grid-cards,
.grid-cards-gradient,
.grid-cards-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100%);
  gap: 2rem;
}

.card-blue-dark {
  display: inline-flex;
  padding: 28.5px 41px 30px 25px;
  align-items: center;
  gap: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.bg-azul-dark {
  background:
    radial-gradient(
      57.27% 46.87% at 90% 10%,
      rgba(0, 228, 245, 0.15) 0%,
      rgba(0, 228, 245, 0) 60%
    ),
    linear-gradient(180deg, #0f262e 0%, #173945 100%);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/images/reforma-tributaria/certo/img-campo.webp")
      no-repeat right;
    background-size: contain;
    z-index: -1;
  }
}

.bg-gradient-azul {
  background: radial-gradient(335.62% 51.48% at 50% 50%, #fff 0%, #e6fcfe 100%);
}

.texto-cinza {
  color: rgba(255, 255, 255, 0.6);
}

.card-gradient-blue {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
  padding: 1rem;
  transition:
    filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-gradient-blue.blur {
  filter: blur(2px);
}

.card-gradient-blue .card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.card-gradient-blue .card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}

.card-gradient-blue .card-footer ul {
  list-style-image: url("/assets/images/reforma-tributaria/certo/img-lista.webp");
}

.card-profile {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-profile .card-profile-content {
  background: #00e2f4;
  padding: 2rem;
  text-align: center;
  height: 100%;
}

.sec-faq .accordion .accordion-item:first-child,
.sec-faq .accordion .accordion-item {
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.faq-certo .accordion-item .accordion-button:not(.collapsed) {
  background: transparent;
  color: currentColor;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

footer .social img {
  filter: none;
}

@media (min-width: 768px) {
  header.banner {
    background: url("/assets/images/reforma-tributaria/certo/bg-banner-desk.webp")
      no-repeat center;
    background-size: cover;
  }

  .card-gradient-blue {
    position: relative;

    &:first-child::before,
    &:nth-child(2)::before {
      content: "";
      position: absolute;
      right: -1.8rem;
      top: 3rem;
      background: url(/assets/images/reforma-tributaria/certo/img-seta-card.webp)
        no-repeat center right;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  }

  .grid-cards {
    grid-template-columns: repeat(auto-fit, minmax(486px, 1fr));
  }

  .grid-cards-gradient {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .grid-cards-custom {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .badge.badge--cup {
    padding: 0.6rem 0.5rem;
    justify-content: normal;
    width: fit-content;
  }

  .card-outline {
    justify-content: flex-start;
  }
}