/* ==========================================================================
   BLOCO: Início — hero com título, alinhador 3D e números
   HTML: <section class="hero" id="inicio">  ·  JS: js/sections/inicio.js
   Figma 880-1316 (página de 1664):
   - card 1648 com recuo de 8px, ~1086 de altura
   - 112px no topo para a nav (recuo 8 + caixa da nav de 104)
   - área central 880px com o bloco de texto (562px) centralizado
   - linha de números logo abaixo
   Sem animação de abertura (decisão): só parallax leve e micro-interações.
   ========================================================================== */

.hero {
  padding: var(--inset) var(--inset) 0;
}

.hero__card {
  --hero-top: calc(var(--nav-h) + 2 * var(--nav-pad) + var(--inset)); /* 112 */
  --hero-area: 880px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-sm);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* texto centralizado na área de 880px */
  min-height: calc(var(--hero-top) + var(--hero-area));
  padding-top: var(--hero-top);
}
.hero__inner {
  position: relative;
}
/* Espaçamentos do bloco de texto: tag 16 · título 24 · parágrafo 48 · ações */
.hero__tag {
  margin-bottom: var(--s-16);
}
/* Título: estilo display do Figma (classe .t-display no HTML) */
.hero__line {
  display: block;
}
.hero__lead {
  max-width: 456px;
  margin-top: var(--s-24);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-24);
  margin-top: 48px;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--c-text-strong);
}
.rating .icon {
  width: 18px;
  height: 18px;
  fill: url(#g-gold-bright);
  transition: transform var(--dur-slow) var(--ease-out);
}
.rating:hover .icon {
  transform: rotate(72deg) scale(1.15);
}

/* Horário no canto direito, alinhado ao topo da tag (x→1544, y=245) */
.hero__meta {
  position: absolute;
  top: 0;
  right: var(--container-margin);
}

/* Alinhador 3D (dentro do .hero__inner): tamanho natural 912px em 1664,
   topo alinhado ao topo do texto, passa 8px da borda direita do card
   (x 752 → 1664). z-index -1: atrás do texto, na frente do fundo do card.
   --parallax é atualizado pelo inicio.js ao rolar (só desktop). */
.hero__media {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(-1 * var(--inset));
  width: min(55.3%, 912px); /* 912 / 1648 */
  pointer-events: none;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}
.hero__media img {
  width: 100%;
}

/* --- Linha de números (divisor em y=967) ---------------------------------- */
.hero__stats {
  position: relative;
  z-index: 1;
}
.stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-24);
  padding-block: var(--s-20);
  border-top: var(--stroke) solid var(--c-border-soft);
}
.stat {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}
.stat--end {
  justify-self: end;
}
/* Números: estilo h3 do Figma (Ovo) */
.stat__num {
  font-family: var(--f-display);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-text-strong);
  white-space: nowrap;
}
.stat__label {
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--c-text-strong);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
  .hero__content {
    display: block;
    min-height: 0;
    padding-top: calc(var(--hero-top) + var(--s-32));
  }
  .hero__meta {
    position: static;
    align-items: flex-start;
    margin-top: var(--s-32);
    text-align: left;
  }
  .hero__media {
    position: relative;
    z-index: auto;
    top: auto;
    right: auto;
    width: min(88%, 620px);
    margin: var(--s-24) auto 0;
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats .btn-circle {
    display: none;
  }
  .stat {
    gap: var(--s-12);
  }
  .stat__label {
    font-size: var(--t-small-size);
    line-height: var(--t-small-lh);
  }
  .stat__label br {
    display: none;
  }
}

@media (max-width: 560px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }
  .stat--end {
    justify-self: start;
  }
}