/* Simulador de crédito — seção adicionada após o hero */

/* `hidden` precisa vencer as regras de display do Webflow/flex. */
.simulador-section [hidden] {
  display: none !important;
}

.navbar-brand-wrapper {
  align-items: center;
  display: flex;
  gap: 16px;
}

.navbar-brand-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--_cores---verde);
  flex: none;
}

.navbar-partner-logo {
  height: 48.5px;
  width: auto;
  flex: none;
}

.simulador-section {
  background-color: var(--_cores---branco);
}

.simulador-wrapper {
  grid-column-gap: var(--_tamanhos---24px);
  grid-row-gap: var(--_tamanhos---24px);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.simulador-card {
  margin-top: var(--_tamanhos---16px);
  padding: var(--_tamanhos---40px);
  border: 1px solid var(--_cores---verde);
  border-radius: var(--_tamanhos---24px);
  background-color: var(--_cores---creme);
  box-shadow: 0 24px 60px #121d260d;
  width: 100%;
  max-width: 720px;
}

.simulador-type-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--_tamanhos---104px);
  background-color: var(--_cores---verde);
  width: 100%;
}

.simulador-type-btn {
  flex: 1;
  cursor: pointer;
  border: none;
  border-radius: var(--_tamanhos---104px);
  background-color: #fff0;
  color: var(--_cores---preto);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  padding: 12px 16px;
  transition: background-color .15s ease, color .15s ease;
}

.simulador-type-btn.is-active {
  background-color: var(--_cores---preto);
  color: var(--_cores---branco);
}

.simulador-type-btn:hover:not(.is-active) {
  background-color: #121d261a;
}

.simulador-values-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: var(--_tamanhos---32px);
}

.simulador-value-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.simulador-value-block.align-right {
  align-items: flex-end;
  text-align: right;
}

.simulador-value-label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--_cores---azul-capital);
  margin: 0;
  font-weight: 500;
}

.simulador-value-amount {
  font-size: 28px;
  font-weight: 900;
  line-height: 32px;
  color: var(--_cores---preto);
  margin: 0;
}

.simulador-value-amount.is-destaque {
  color: var(--_cores---azul-capital);
}

.simulador-value-suffix {
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
}

.simulador-value-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--_cores---verde);
  flex: none;
}

.simulador-slider-wrapper {
  width: 100%;
  margin-top: var(--_tamanhos---32px);
  padding: 0 4px;
}

.simulador-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 104px;
  background: var(--_cores---verde);
  outline: none;
  margin: 0;
  cursor: grab;
}

.simulador-slider:active {
  cursor: grabbing;
}

.simulador-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--_cores---amarelo);
  border: 4px solid var(--_cores---preto);
  box-shadow: 0 4px 12px #121d2640;
  cursor: grab;
  margin-top: 0;
}

.simulador-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.08);
}

.simulador-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--_cores---amarelo);
  border: 4px solid var(--_cores---preto);
  box-shadow: 0 4px 12px #121d2640;
  cursor: grab;
}

.simulador-slider::-moz-range-track {
  height: 8px;
  border-radius: 104px;
  background: var(--_cores---verde);
}

.simulador-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--_cores---azul-capital);
  font-weight: 500;
}

.simulador-footnote {
  margin-top: var(--_tamanhos---16px);
  font-size: 12px;
  line-height: 18px;
  color: #121d2699;
  text-align: center;
  width: 100%;
}

.simulador-cta {
  margin-top: var(--_tamanhos---24px);
  width: 100%;
  text-align: center;
  display: block;
}

@media screen and (max-width: 767px) {
  .navbar-brand-divider {
    display: none;
  }

  .navbar-partner-logo {
    display: none;
  }

  .simulador-card {
    padding: var(--_tamanhos---24px);
  }

  .simulador-values-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .simulador-value-divider {
    display: none;
  }

  .simulador-value-block.align-right {
    align-items: flex-start;
    text-align: left;
  }
}

@media screen and (max-width: 479px) {
  .simulador-type-btn {
    font-size: 12px;
    padding: 10px 6px;
  }

  .simulador-value-amount {
    font-size: 24px;
  }
}

/* ---------- Seção "planos" ---------------------------------------------- */

/* Os cards têm border-radius mas não recortavam a foto, que vazava nos cantos. */
.planos-card {
  overflow: hidden;
}

.planos-legal {
  font-size: 12px;
  line-height: 18px;
  color: #121d26cc;
  margin: var(--_tamanhos---8px) 0 0;
  max-width: 640px;
}


/* Foto do card de automóvel.
   A foto de imóvel é 1280x768, ou seja 5:3, e é essa proporção que define a
   altura da faixa naquele card. Fixar a mesma aqui é o que mantém os dois cards
   com altura idêntica em qualquer largura de tela: sem `aspect-ratio` a imagem
   renderiza na proporção natural do arquivo e o card de automóvel cresce junto.
   O `object-fit` recorta o excedente vertical, que na foto atual é céu e asfalto. */
.planos-card-foto {
  align-self: stretch;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-bottom-left-radius: var(--_tamanhos---24px);
  border-bottom-right-radius: var(--_tamanhos---24px);
}