/* ============================================================================
   ATIVE-HERO.CSS
   Milestone: Refino premium do HERO (primeira dobra)
   Regras:
   - sem cores hardcoded (somente tokens de ative-variables.css)
   - sem mexer em estilos de seções fora do hero
   ============================================================================ */

header.masthead {
  position: relative;
  overflow: hidden;

  background-color: var(--hero-bg);
  background-image:
    radial-gradient(900px 600px at 15% 20%, rgba(var(--dourado-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(800px 520px at 85% 30%, rgba(var(--dourado-rgb), 0.1) 0%, transparent 65%),
    linear-gradient(135deg, rgba(var(--marrom-escuro-rgb), 0.96) 0%, rgba(var(--marrom-escuro-rgb), 0.82) 100%);
  background-repeat: no-repeat;
  background-size: cover;

  min-height: 100vh;
  min-height: 100svh;

  /* Desktop: precisa compensar navbar fixa (sem body padding-top) */
  padding: calc(var(--nav-h) + clamp(4rem, 8vh, 5.5rem)) 0 clamp(4rem, 7vh, 6rem);
}

@media (max-width: 991.98px) {
  header.masthead {
    /* Mobile: o body já tem padding-top var(--nav-h) */
    padding-top: clamp(2rem, 5vh, 3rem);
    min-height: calc(100svh - var(--nav-h));
  }
}

header.masthead .container {
  position: relative;
  z-index: 1;
}

.ative-hero-row {
  row-gap: 2.5rem;
}

.ative-hero-title {
  font-size: clamp(2.05rem, 3.9vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 10px 28px rgba(var(--marrom-escuro-rgb), 0.55);
}

.ative-hero-accent {
  color: var(--dourado);
}

.ative-hero-lead {
  font-size: clamp(1.08rem, 1.35vw, 1.35rem);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.ative-hero-support {
  max-width: 62ch;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .ative-hero-support {
    margin-left: auto;
    margin-right: auto;
  }
}

.ative-hero-cta {
  margin-top: 2rem;
}

.ative-hero-micro {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--on-hero-muted);
}

/* Mídia (foto) */
.ative-hero-media {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: 0;

  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--hero-border);
  box-shadow: var(--sombra-forte);

  /* mantém sensação “material” sem hardcode */
  background: rgba(var(--marrom-escuro-rgb), 0.25);
  /* aspect-ratio: 4 / 5; */
  aspect-ratio: 5 / 7;
}

.ative-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: 50% 18%; */
  object-position: 50% 28%;
  display: block;
}

.ative-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(var(--marrom-escuro-rgb), 0.06) 0%,
      transparent 20%,
      transparent 55%,
      rgba(var(--marrom-escuro-rgb), 0.5) 100%
    ),
    radial-gradient(ellipse at center, transparent 30%, rgba(var(--marrom-escuro-rgb), 0.12) 100%);
}

/* Moldura premium com brilho interno */
.ative-hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .ative-hero-media {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  .ative-hero-media {
    max-width: 100%;
    /* aspect-ratio: 16 / 11; */
    aspect-ratio: 5 / 7;
    max-height: 420px;
  }

  .ative-hero-photo {
    object-position: 50% 0%;
  }
}

/* =========================
   EYEBROW / KICKER (reutilizável)
========================= */

.ative-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);

  background: rgba(var(--dourado-rgb), 0.1);
  border: 1px solid rgba(var(--dourado-rgb), 0.22);
  color: var(--text-primary);

  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.ative-eyebrow-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex: 0 0 auto;

  background: linear-gradient(135deg, var(--dourado), var(--cobre));
  box-shadow: var(--sombra-dourada);
}

.ative-surface-hero .ative-eyebrow {
  color: var(--on-hero);
  border-color: var(--hero-border);
  background: rgba(var(--dourado-rgb), 0.12);
}

.ative-surface-hero .ative-google-micro {
  color: var(--on-hero);
  border-color: var(--hero-border);
  background: rgba(var(--dourado-rgb), 0.1);
}