/* =========================================================
   hero.css — Seção Hero (primeira dobra do site)
   ========================================================= */

.hero-section {
  min-height: calc(100svh / var(--zoom, 1));
  min-height: calc(100vh / var(--zoom, 1)); /* fallback */
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 60px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------------------------------------------------------
   CONTEÚDO PRINCIPAL (título, subtítulo, CTAs)
   --------------------------------------------------------- */
.hero-content { max-width: 740px; }

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 20px;
}

.hero-title-accent { color: var(--red); }

.hero-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   BARRA DE STATS
   --------------------------------------------------------- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--gray-dark);
  border: 1px solid var(--gray-border);
  border-radius: 2px;
}

@media (min-width: 640px)  { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.stat-item {
  padding: 16px 18px;
  text-align: center;
  border-right: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
}
/* Remove bordas extras nas extremidades */
.stat-item:nth-child(2n) { border-right: none; }
.stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }

@media (min-width: 640px) {
  .stat-item { border-bottom: none; }
  .stat-item:nth-child(2n)  { border-right: 1px solid var(--gray-border); }
  .stat-item:nth-child(4n)  { border-right: none; }
}

.stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--red);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------------------------------------------------------
   ANIMAÇÃO DA HERO — CSS puro, independente de JS
   Garante que o conteúdo acima da dobra sempre apareça.
   --------------------------------------------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero-visible {
  animation: heroFadeUp 0.7s ease forwards;
  animation-delay: var(--hero-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .hero-visible { animation: none; opacity: 1; transform: none; }
}