/* ===========================================
   HOME HERO — CINEMÁTICA (SEMPRE DARK)
   A hero mantém estética dark em ambos os temas
   para preservar a identidade visual da marca.
   =========================================== */
.home-hero {
  position: relative;
  min-height: min(860px, calc(100svh - 76px));
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,11,.98) 0%, rgba(8,9,11,.88) 43%, rgba(8,9,11,.2) 72%),
    linear-gradient(0deg, rgba(8,9,11,.95), transparent 45%);
  z-index: 1;
}

.hero-visual {
  position: absolute;
  inset: 0 0 0 42%;
  overflow: hidden;
}

.hero-visual img,
.hero-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.75) contrast(1.12) brightness(.72);
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-14deg, transparent 0 76px, rgba(255,255,255,.06) 77px, transparent 78px 152px);
  mix-blend-mode: overlay;
}

/* Hero copy — forçar cores cinemáticas independente do tema */
.hero-copy { position: relative; z-index: 2; max-width: 850px; padding: clamp(5rem, 10vw, 8rem) 0; color: #f5f5f2; }
.hero-copy h1 { max-width: 850px; color: #f5f5f2; }
.hero-copy h1 em { color: var(--red-soft); font-style: normal; }
.hero-copy .lede { max-width: 680px; margin-top: 1.5rem; color: #d0d1d4; }
.hero-copy .actions { margin-top: 2rem; }
.hero-copy .btn:not(.btn-primary) { color: #fff; border-color: rgba(255,255,255,.22); }


.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
  margin-top: 2rem;
  color: #c0c1c4;
  font-size: .78rem;
}

.hero-proof span::before { content: "•"; margin-right: .5rem; color: var(--red-soft); }

.home-intro { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.home-intro h2 { max-width: 850px; }
.home-intro p { max-width: 720px; margin-top: 1.5rem; color: var(--muted); font-size: 1.06rem; }

@media (max-width: 760px) {
  .home-hero { min-height: calc(100svh - 76px); }
  .home-hero::before { background: linear-gradient(90deg, rgba(8,9,11,.97), rgba(8,9,11,.72)), linear-gradient(0deg, #08090b, transparent 60%); }
  .hero-visual { inset: 0; }
  .hero-visual img,
  .hero-visual video { object-position: 58% center; filter: saturate(.6) contrast(1.15) brightness(.48); }
  .home-intro { grid-template-columns: 1fr; gap: 1rem; }
}