/* ═══════════════════════════════════════════════════
   HERO
   Estrutura conforme Figma 47:1429
   Outer (#hero): padding 24px all · bg #1b1b1b
   Inner (.hero__inner): border-radius 16px · overflow hidden
   ═══════════════════════════════════════════════════ */


/* ── Outer container ──
   Só responsável pelo padding de 24px e bg escuro.
   Não tem min-height — o inner define a altura.        */
#hero {
  background-color: var(--c-dark);
  padding: 24px;
}


/* ── Inner container ──
   Contém vídeo, overlay, SVG e conteúdo.
   border-radius + overflow: hidden clipam tudo dentro.
   min-height = viewport - navbar - 48px (2×padding).  */
.hero__inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 1183px; /* Figma: inner container 1872×1183px */
  display: flex;
  flex-direction: column;
  background-color: var(--c-dark);
}


/* ── Vídeo de fundo ──
   mix-blend-mode: luminosity desatura o vídeo,
   mantendo apenas a luminância → skyline em tons escuros. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  mix-blend-mode: luminosity;
}


/* ── Overlay preto 80% ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.80);
}


/* ── Grafismo SVG (lado direito) ──
   Figma: x=963px y=219px dentro do inner (1872×1183px)
   width: 909/1872 = 48.56% → 909px @ 1872px inner
   right: 0 → borda direita do SVG rente ao inner
   top: 219/1183 = 18.5% → 219px @ 1183px inner
   overflow:visible expõe os paths além do viewBox.     */
.hero__graphic {
  position: absolute;
  right: 0;
  top:  18.5%;
  width: 48.56%;
  z-index: 2;
  pointer-events: none;
}

.hero__graphic svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}


/* ── Stage: empurra conteúdo ao fundo ──
   padding-bottom: 150px @ 1920px (150/1920 = 7.8125vw)
   padding-left: var(--gutter) = 150px @ 1920px
   Conteúdo alinha ao fundo → topo livre: 1183 − 150 − 808 = 225px ✓ */
.hero__stage {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(60px, 7.8125vw, 150px);
}


/* ── Coluna esquerda: intro → desc → botões (gap 64px) ── */
.hero__left {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 64px);
  max-width: clamp(480px, 52vw, 932px);
}


/* ── Introduction Section: badge + h1 (gap 48px) ──
   Badge e headline no mesmo container flex para moverem
   juntos em qualquer zoom ou viewport — conforme Figma.  */
.hero__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vh, 48px);
  align-items: flex-start;
}


/* ── Badge ── */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.15);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  opacity: 0;
  animation: hero-fade 0.8s var(--ease) 0.10s forwards;
}

.hero__badge-dot {
  width: 8.6px;
  height: 8.6px;
  border-radius: 50%;
  background: var(--c-red);
  flex-shrink: 0;
}

.hero__badge-text {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.94vw, 18px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-light);
  white-space: nowrap;
}


/* ── Headline ── */
.hero__h1 {
  font-family: var(--f-sans);
  font-size: clamp(44px, 7.29vw, 140px);
  font-weight: var(--fw-regular);
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--c-light);
}

/* Clip-reveal por linha */
.hero__h1-line {
  display: block;
  overflow: hidden;
}

.hero__h1-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-rise 0.9s var(--ease) forwards;
}

.hero__h1-line:nth-child(1) > span { animation-delay: 0.12s; }
.hero__h1-line:nth-child(2) > span { animation-delay: 0.26s; }
.hero__h1-line:nth-child(3) > span { animation-delay: 0.40s; }

.hero__h1 strong {
  font-weight: var(--fw-medium);
  color: var(--c-red);
}


/* ── Descrição ── */
.hero__desc {
  font-family: var(--f-sans);
  font-size: clamp(14px, 1.46vw, 28px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(244, 245, 247, 0.80);
  max-width: clamp(300px, 34vw, 589px);
  opacity: 0;
  animation: hero-fade 0.9s var(--ease) 0.55s forwards;
}


/* ── CTAs ── */
.hero__actions {
  display: flex;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-fade 0.9s var(--ease) 0.72s forwards;
}

/* Base */
.hero__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-sans);
  font-size: clamp(13px, 1.15vw, 22px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.05em;
  white-space: nowrap;
  border-radius: 12px;
  transition:
    background    var(--dur-base) var(--ease),
    color         var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease);
}

/* Primário ─────────────────────────────────────────
   Estrutura: dois elementos lado a lado.
   Esquerda: texto sobre bg vermelho (herdado do botão).
   Direita: quadrado 64×64 com bg #1b1b1b e seta SVG vermelha.
   Figma: pl-36px pr-10px py-10px · gap-36px · rounded-12px    */
.hero__btn--primary {
  background:  var(--c-red);
  color:       var(--c-light);
  border:      1px solid var(--c-red);
  padding:     10px 10px 10px 36px;
  gap:         36px;
}

.hero__btn--primary:hover {
  background:   transparent;
  color:        var(--c-red);
  border-color: var(--c-red);
}

.hero__btn-label {
  /* Só para semântica; estilo herdado do botão */
}

/* Quadrado da seta: bg #1b1b1b conforme spec */
.hero__btn-icon {
  width:   64px;
  height:  64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:   #1b1b1b;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease);
}

.hero__btn-icon svg {
  width:  17px;
  height: 17px;
  transition: transform var(--dur-base) var(--ease);
}

.hero__btn--primary:hover .hero__btn-icon svg {
  transform: translateX(4px);
}

/* Outline */
.hero__btn--outline {
  background:  transparent;
  color:       var(--c-light);
  border:      1px solid var(--c-light);
  padding:     0 36px;
  justify-content: center;
}

.hero__btn--outline:hover {
  background: var(--c-light);
  color:      var(--c-dark);
}


/* ═══════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════ */

@keyframes hero-rise {
  to { transform: translateY(0); }
}

@keyframes hero-fade {
  to { opacity: 1; }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .hero__graphic {
    width: 65%;
    right: -4%;
  }
}

@media (max-width: 1024px) {
  .hero__graphic {
    width: 75%;
    right: -8%;
    top: auto;
    bottom: -5%;
    opacity: 0.70;
  }

  .hero__left {
    max-width: 100%;
  }

  .hero__btn--primary {
    padding: 8px 8px 8px 28px;
    gap: 20px;
  }

  .hero__btn-icon {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 768px) {
  .hero__badge-text {
    font-size: 11px;
  }

  .hero__graphic {
    width: 90%;
    right: -15%;
    opacity: 0.50;
  }

  .hero__btn--outline {
    padding: 0 24px;
  }
}

@media (max-width: 540px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__btn--outline {
    padding: 16px 24px;
    align-self: auto;
  }
}