/* Cartão financeiro flutuante do Hero. Posição fica em hero.css.
   Desktop: medidas em --u (1px no frame de 1200px do Figma; ver hero.css).
   Mobile: medidas em --m (1px no frame de 335px; Figma "Card — Parcela mensal": padding 12, ícone 24, textos 14/18/14). */

.hero-card {
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px solid var(--borda-card);
  border-radius: calc(16 * var(--u));
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-flutuante);
  white-space: nowrap;
}

.hero-card__top {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.hero-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--verde-20);
}

.hero-card__icon img {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

.hero-card__label {
  color: var(--texto-corpo);
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
}

.hero-card__value {
  color: var(--texto-titulo);
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: calc(28 * var(--u));
}

.hero-card__note {
  color: var(--texto-apoio);
  font-size: max(12px, calc(14 * var(--u))); /* piso de 12px em 1024px */
  line-height: calc(20 * var(--u));
}

@media (max-width: 1023.98px) {
  .hero-card {
    gap: calc(4 * var(--m));
    padding: calc(12 * var(--m));
    border-radius: calc(16 * var(--m));
    box-shadow: var(--sombra-painel);
  }

  .hero-card__top {
    gap: calc(10 * var(--m));
  }

  .hero-card__icon {
    width: calc(24 * var(--m));
    height: calc(24 * var(--m));
    border-radius: calc(12 * var(--m));
  }

  .hero-card__icon img {
    width: calc(14 * var(--m));
    height: calc(14 * var(--m));
  }

  .hero-card__label {
    font-size: calc(14 * var(--m));
    line-height: calc(20 * var(--m));
  }

  .hero-card__value {
    font-size: calc(18 * var(--m));
    line-height: calc(26 * var(--m));
  }

  .hero-card__note {
    font-size: calc(14 * var(--m));
    line-height: calc(20 * var(--m));
  }

  /* No mobile o cartão precisa ser mais estreito para não invadir o cabelo da foto (bug reportado):
     o texto quebra em vez de forçar uma única linha, então o cartão fica mais alto e mais estreito. */
  .hero-card {
    max-width: calc(136 * var(--m));
    white-space: normal;
  }

  .hero-card__top {
    flex-wrap: wrap;
  }
}