/* Hero — Figma: "Hero" (mobile) e "header e hero" (desktop). */

.hero {
  padding-block: 16px 32px;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 600px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__eyebrow {
  padding: 6px 12px; /* "pílula" do mobile: só o espaçamento, sem fundo */
  color: var(--verde-90);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em; /* Figma: 1.12px em 14px */
  text-transform: uppercase;
}

/* Trecho da eyebrow que só existe no desktop */
.hero__eyebrow-extra {
  display: none;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__title {
  color: var(--texto-hero-titulo);
  font-family: var(--fonte-titulo);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em; /* Figma: -0.72px em 36px e -1.12px em 56px */
}

.hero__description {
  color: var(--texto-hero-corpo);
  font-size: 18px;
  line-height: 1.5;
}

/* Envolve os dois CTAs + o link de treinamento, para o link ficar mais perto dos botões (24px)
   do que os botões ficam do texto acima (32px, gap do .hero__content) */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Link discreto abaixo dos CTAs: não é botão, não compete com o CTA principal */
.hero__training-link {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--texto-titulo);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.hero__training-link img {
  flex: none;
}

/* Composição da imagem. Mobile (Figma "Frame 44", 335 × 371): quadro azul em CSS + mulher recortada + cartão real
   por cima (assim o cartão pode flutuar sozinho). Medidas em --m: 1 unidade = 1px em 335px de largura,
   e a composição escala junto com a largura (até 480px). */
.hero__visual {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 441 / 489;
}

@media (max-width: 1023.98px) {
  .hero__visual {
    container-type: inline-size;
  }

  .hero__visual > * {
    --m: 1px; /* navegadores sem container query units ficam no tamanho do Figma */
  }

  @supports (width: 1cqw) {
    .hero__visual > * {
      --m: calc(100cqw / 335);
    }
  }
}

/* A imagem exportada inclui sombra e margem em volta do quadro azul, então é maior que a
   composição do Figma. Medidas em % da largura da composição (mobile: 335px em 375px). */
.hero__frame {
  position: absolute;
  left: calc(8 * var(--m));
  top: calc(46.2 * var(--m));
  width: calc(320 * var(--m));
  height: calc(320 * var(--m));
  border: calc(2 * var(--m)) solid var(--azul-marinho-20);
  border-radius: calc(24 * var(--m));
  background: linear-gradient(162deg, var(--azul-marinho-30) 4.3%, var(--azul-marinho-50) 87.8%);
  box-shadow:
    inset 0 calc(3 * var(--m)) calc(4 * var(--m)) 0 rgb(27 46 81 / 0.1),
    calc(5 * var(--m)) calc(6 * var(--m)) calc(12 * var(--m)) 0 rgb(1 17 54 / 0.3);
}

.hero__visual-img {
  position: absolute;
  left: calc(61 * var(--m));
  top: calc(23.2 * var(--m));
  width: calc(265 * var(--m));
  height: calc(341 * var(--m));
  max-width: none;
  border-radius: calc(24 * var(--m));
}

.hero__card {
  display: none;
}

/* Mobile: só o cartão de cartão parcelado (Figma), meio sobre a moldura, meio para fora */
.hero__card--credit-card {
  display: flex;
  position: absolute;
  left: calc(-9 * var(--m));
  top: calc(55.2 * var(--m));
}

/* Desktop
   Medidas do Figma (frame de 1200px, conteúdo de 1104px) expressas em --u:
   1 unidade = 1px em 1200px; encolhe até ≈0,84 em 1024px e cresce junto com o container
   até o teto de 1344px
   (--u = 1,217, atingido em 1440px). Depois disso o container para, e a composição ainda
   ganha até +0,05px por unidade (≈ +4%) entre 1440px e 1920px de viewport, sem passar do
   container. Texto, imagem, cartões e espaços escalam pelo mesmo fator, então a
   composição mantém as proporções do Figma em qualquer largura desktop. */
@media (min-width: 1024px) {
  .hero {
    padding-block: 0;
  }

  .hero__inner {
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto auto; /* larguras vêm dos filhos, em --u (578 e 441) */
    justify-content: space-between;
    align-items: start;
    gap: 0;
  }

  .hero__content,
  .hero__visual {
    --u: 1px; /* navegadores sem container query units ficam no tamanho do Figma */
  }

  @supports (width: 1cqw) {
    .hero__content,
    .hero__visual {
      --u: var(--u-fluid);
    }
  }

  .hero__content {
    width: calc(578 * var(--u));
    gap: calc(32 * var(--u));
    max-width: none;
    margin-top: calc(116 * var(--u)); /* Figma: texto em y=188, header termina em y=72 */
  }

  .hero__text {
    gap: calc(16 * var(--u));
  }

  .hero__eyebrow {
    padding: 0;
    font-size: max(12px, calc(14 * var(--u))); /* piso de 12px para não ficar ilegível em 1024px */
    line-height: calc(20 * var(--u));
  }

  .hero__eyebrow-extra {
    display: inline;
  }

  .hero__copy {
    gap: calc(18 * var(--u));
  }

  .hero__title {
    font-size: calc(56 * var(--u));
  }

  .hero__description {
    font-size: calc(20 * var(--u));
  }

  .hero__actions {
    flex-direction: row;
    gap: calc(16 * var(--u));
  }

  .hero__actions .btn {
    min-height: calc(54 * var(--u));
    padding: calc(6 * var(--u)) calc(24 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .hero__visual {
    width: calc(441 * var(--u));
    margin-top: calc(75 * var(--u)); /* Figma: imagem em y=147 */
    aspect-ratio: 441 / 489;
  }

  .hero__frame {
    display: none; /* no desktop o quadro azul já vem dentro da imagem */
  }

  .hero__visual-img {
    left: -1.66%; /* -7,3 de 441 */
    top: 0;
    width: 105.6%; /* 465,7 de 441 */
    height: auto;
    border-radius: 0;
  }

  .hero__card {
    display: flex;
    position: absolute;
  }

  .hero__card--credit-card {
    left: calc(-70 * var(--u));
    top: calc(25 * var(--u));
    width: calc(210 * var(--u));
  }

  .hero__card--money-wavy {
    left: calc(-127 * var(--u));
    top: calc(329 * var(--u));
  }
}

/* Entrada do Hero: só opacity + `translate` (não mexe no layout), em sequência curta:
   eyebrow → título → descrição → botões → imagem → cartões. Só sem "reduzir movimento". */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    --enter-y: 16px; /* mobile: mais discreto */
  }

  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__cta-group,
  .hero__frame,
  .hero__visual-img {
    animation: hero-enter var(--dur-enter) var(--ease-out) var(--enter-delay, 0ms) backwards;
  }

  .hero__eyebrow {
    --enter-delay: 40ms;
  }

  .hero__title {
    --enter-delay: 140ms;
  }

  .hero__description {
    --enter-delay: 240ms;
  }

  .hero__cta-group {
    --enter-delay: 340ms;
  }

  /* A imagem começa antes dos cartões para eles pousarem sobre ela, e demora um pouco mais */
  .hero__frame,
  .hero__visual-img {
    --enter-delay: 300ms;
    --enter-y: 24px;
    animation-duration: 900ms;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero {
    --enter-y: 28px;
  }

  .hero__visual-img {
    --enter-y: 36px;
  }
}

/* (a animação `hero-enter` está em motion.css: as outras páginas usam a mesma entrada) */

/* Flutuação dos cartões (desktop e mobile): contínua, independente do scroll, só sem "reduzir movimento".
   Sobe e desce em volta da posição do Figma (metade da amplitude para cada lado), lenta e sem sincronia:
   duração e fase diferentes em cada cartão. Sem rotação, escala nem mudança de sombra.
   A entrada usa `translate` e a flutuação usa `transform`: são propriedades separadas, então a
   flutuação segue contínua por baixo da entrada (a fase negativa já a deixa em andamento desde o início)
   e nada "pula" quando a entrada termina. */
@media (prefers-reduced-motion: no-preference) {
  .hero__card {
    --float-amp: calc(10 * var(--m, 1px)); /* mobile: mais contida */
    animation:
      hero-enter var(--dur-enter) var(--ease-out) var(--enter-delay, 0ms) backwards,
      hero-card-float var(--dur-float) var(--ease-float) -1.6s infinite;
  }

  .hero__card--credit-card {
    --enter-delay: 580ms;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero__card {
    --float-amp: calc(16 * var(--u)); /* ≈16px em 1200px, ≈19px em 1344px */
    animation-duration: var(--dur-enter), 5s;
    animation-delay: var(--enter-delay, 0ms), -1s;
  }

  .hero__card--credit-card {
    --enter-delay: 480ms;
  }

  .hero__card--money-wavy {
    animation-duration: var(--dur-enter), 5.8s;
    animation-delay: 580ms, -3.2s;
  }
}

@keyframes hero-card-float {
  0%,
  100% {
    transform: translateY(calc(var(--float-amp) * 0.5));
  }

  50% {
    transform: translateY(calc(var(--float-amp) * -0.5));
  }
}