/* Onda X public site - final layout for "Como importar" section. */
.public-home #como-importar.landing-section {
  padding: 20px 0 28px !important;
  background:
    radial-gradient(circle at 48% 12%, rgba(28, 92, 170, .08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

.public-home #como-importar .page-container {
  width: min(100% - 96px, 1460px) !important;
  max-width: 1460px !important;
}

.public-home #como-importar .section-heading {
  margin: 0 auto 18px !important;
  text-align: center !important;
}

.public-home #como-importar .section-heading p {
  margin: 0 0 6px !important;
  color: #c88b00 !important;
  font-size: .74rem !important;
  font-weight: 950 !important;
  letter-spacing: .34em !important;
}

.public-home #como-importar .section-heading h2 {
  color: #071e3a !important;
  font-size: clamp(2.12rem, 2.65vw, 2.62rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.03 !important;
}

.public-home #como-importar .section-heading span {
  margin-top: 6px !important;
  color: #526176 !important;
  font-size: 1.04rem !important;
}

.public-home #como-importar .import-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  max-width: 1415px !important;
  margin: 0 auto !important;
}

.public-home #como-importar .or-badge {
  position: static !important;
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border: 1px solid #d8e5f4 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #071e3a !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 24px rgba(8, 31, 59, .08) !important;
  transform: none !important;
}

.public-home #como-importar .import-card,
.public-home #como-importar .import-card-featured {
  display: flex !important;
  flex-direction: column !important;
  min-height: 610px !important;
  padding: 22px 26px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.public-home #como-importar .import-card-featured {
  border: 2px solid #f6bd00 !important;
  background:
    radial-gradient(circle at 22% 10%, rgba(47, 118, 184, .32), transparent 28%),
    radial-gradient(circle at 68% 56%, rgba(32, 88, 139, .28), transparent 38%),
    linear-gradient(145deg, #08284d 0%, #05172d 100%) !important;
  box-shadow: 0 18px 42px rgba(5, 21, 43, .22) !important;
}

.public-home #como-importar .import-card:not(.import-card-featured) {
  border: 1px solid #cfdde9 !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(9, 31, 56, .08) !important;
}

.public-home #como-importar .import-card-head {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
}

.public-home #como-importar .import-icon {
  width: 50px !important;
  height: 50px !important;
}

.public-home #como-importar .solution-badge {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 194, 26, .16) !important;
  color: #ffc21a !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}

.public-home #como-importar .solution-badge-green {
  background: #dff5e7 !important;
  color: #07833d !important;
}

.public-home #como-importar .import-card h3 {
  font-size: 1.42rem !important;
  line-height: 1.04 !important;
}

.public-home #como-importar .import-card-head p {
  margin-top: 4px !important;
  font-size: .84rem !important;
  line-height: 1.22 !important;
}

.public-home #como-importar .import-price {
  min-width: 122px !important;
  text-align: right !important;
}

.public-home #como-importar .import-price strong {
  font-size: 2.86rem !important;
}

.public-home #como-importar .import-price-green {
  min-width: 150px !important;
  color: #071e3a !important;
}

.public-home #como-importar .import-price-green strong {
  color: #078b42 !important;
  font-size: 2.28rem !important;
}

.public-home #como-importar .import-price span {
  font-size: .84rem !important;
}

.public-home #como-importar .import-price small {
  font-size: .68rem !important;
}

.public-home #como-importar .import-main-copy,
.public-home #como-importar .import-card:not(.import-card-featured) .import-main-copy {
  margin: 14px 0 10px !important;
  font-size: .8rem !important;
  line-height: 1.32 !important;
}

.public-home #como-importar .import-benefits-title,
.public-home #como-importar .service-example-title {
  display: block !important;
  margin: 0 0 6px !important;
  color: #ffc21a !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
}

.public-home #como-importar .import-benefits {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 0 12px !important;
}

.public-home #como-importar .import-card-featured .import-benefits {
  padding: 8px 18px 2px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
}

.public-home #como-importar .import-card-featured .import-benefits::before {
  left: 70px !important;
  right: 70px !important;
  top: 27px !important;
}

.public-home #como-importar .import-benefits span {
  min-height: 56px !important;
  gap: 5px !important;
  font-size: .7rem !important;
  line-height: 1.18 !important;
}

.public-home #como-importar .import-benefits i {
  width: 34px !important;
  height: 34px !important;
  font-size: .95rem !important;
}

.public-home #como-importar .step-travel::before { content: "✈" !important; }
.public-home #como-importar .step-docs::before { content: "▤" !important; }
.public-home #como-importar .step-flag::before { content: "⚑" !important; }

.public-home #como-importar .service-example {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(205px, .8fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  border-color: rgba(255, 255, 255, .28) !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  line-height: 1.18 !important;
}

.public-home #como-importar .service-example div {
  min-height: 23px !important;
}

.public-home #como-importar .service-example dt,
.public-home #como-importar .service-example dd {
  padding: 4px 8px !important;
}

.public-home #como-importar .service-example dd {
  text-align: right !important;
}

.public-home #como-importar .service-example p {
  padding: 8px 9px 8px 0 !important;
  font-size: .62rem !important;
  line-height: 1.2 !important;
}

.public-home #como-importar .import-cta {
  position: relative !important;
  min-height: 44px !important;
  margin-top: auto !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
}

.public-home #como-importar .import-card.import-card-featured .import-cta,
.public-home #como-importar .import-card:not(.import-card-featured) .import-cta {
  margin-top: auto !important;
}

.public-home #como-importar .import-cta::after {
  content: "›" !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}

.public-home #como-importar .included-note {
  margin-top: 8px !important;
  font-size: .68rem !important;
  line-height: 1.25 !important;
}

.public-home #como-importar .freight-note {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .18) !important;
  font-size: .58rem !important;
  line-height: 1.35 !important;
}

.public-home #como-importar .flow-box {
  margin: 16px 0 12px !important;
  padding: 11px 18px 12px !important;
  border-color: #b8e5ca !important;
  border-radius: 8px !important;
}

.public-home #como-importar .flow-box strong {
  margin-bottom: 10px !important;
  font-size: .8rem !important;
}

.public-home #como-importar .flow-box div {
  display: grid !important;
  grid-template-columns: 1fr 42px 1fr 42px 1fr !important;
}

.public-home #como-importar .flow-box span {
  min-height: 74px !important;
  padding: 8px 8px !important;
  border: 1px solid #cfeada !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: .64rem !important;
}

.public-home #como-importar .flow-box i {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #d8f8e2 !important;
  color: #079342 !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
}

.public-home #como-importar .flow-doc::before { content: "1" !important; }
.public-home #como-importar .flow-tax::before { content: "2" !important; }
.public-home #como-importar .flow-invoice::before { content: "3" !important; }

.public-home #como-importar .import-benefits-light {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

.public-home #como-importar .import-benefits-light span {
  min-height: 78px !important;
  padding: 10px 8px !important;
  border: 1px solid #dbe8e3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: .58rem !important;
  line-height: 1.18 !important;
}

.public-home #como-importar .import-benefits-light i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: #edf9f2 !important;
  color: #079342 !important;
}

@media (max-width: 1080px) {
  .public-home #como-importar .page-container {
    width: min(100% - 36px, 760px) !important;
  }

  .public-home #como-importar .import-grid {
    grid-template-columns: 1fr !important;
    max-width: 760px !important;
  }

  .public-home #como-importar .or-badge {
    margin: 0 auto !important;
  }

  .public-home #como-importar .import-card,
  .public-home #como-importar .import-card-featured {
    min-height: 0 !important;
  }
}

@media (max-width: 680px) {
  .public-home #como-importar.landing-section {
    padding: 24px 0 !important;
  }

  .public-home #como-importar .page-container {
    width: min(100% - 28px, 560px) !important;
  }

  .public-home #como-importar .section-heading h2 {
    font-size: 2rem !important;
  }

  .public-home #como-importar .section-heading span {
    font-size: .98rem !important;
  }

  .public-home #como-importar .import-card,
  .public-home #como-importar .import-card-featured {
    padding: 22px 18px !important;
  }

  .public-home #como-importar .import-card-head {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .public-home #como-importar .import-price {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .public-home #como-importar .service-example,
  .public-home #como-importar .flow-box div,
  .public-home #como-importar .import-benefits,
  .public-home #como-importar .import-benefits-light {
    grid-template-columns: 1fr !important;
  }

  .public-home #como-importar .service-example dl {
    border-right: 0 !important;
  }

  .public-home #como-importar .service-example p {
    padding: 12px !important;
  }

  .public-home #como-importar .flow-box div::before,
  .public-home #como-importar .flow-box div::after,
  .public-home #como-importar .import-card-featured .import-benefits::before {
    display: none !important;
  }
}