/* === HOTFIX v3 — HERO claro, compacto e com vídeo vertical (à esquerda) =====
   - Clareia/remover overlays do HERO
   - HERO em duas colunas: vídeo (à esquerda) estreito, texto (à direita)
   - Vídeo em card 9:16, sem barras, sem cortes agressivos no mobile
============================================================================= */

/* 1) Remover escurecimento/overlays do HERO */
.hero, .hero * { filter: none !important; }
.hero::before, .hero::after { content: none !important; }
.hero { background: transparent !important; }
.card::before, .card::after { content: none !important; }

/* 2) Grade do HERO: duas colunas em telas médias+ */
.hero .container{
  display: grid !important;
  grid-template-columns: 420px 1fr !important;   /* vídeo ~420px e texto ao lado */
  gap: clamp(16px, 3vw, 28px) !important;
  align-items: center !important;
}

/* 3) Card do vídeo: estreito e com proporção vertical 9:16 */
.hero .card{
  background: #0b0b0b !important;
  border: 1px solid #1f2937 !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}

.hero .video-wrap{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;    /* VIDEO VERTICAL */
  background: #000 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* vídeo: brilho normal; cobrir levemente para evitar barras */
.hero .video-wrap > video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* evita barras laterais no card vertical */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
}

/* 4) Texto do HERO à direita, sem overlay escuro */
.hero .hero-text{
  color: #e5e7eb !important;
  text-shadow: none !important;
}
.hero .hero-text h1{ color:#eaf2ff !important; }
.hero .hero-text p{ color:#c7d2fe !important; }

/* 5) Em telas pequenas (mobile), empilhar e usar contain p/ não cortar o vídeo */
@media (max-width: 768px){
  .hero .container{ grid-template-columns: 1fr !important; }
  .hero .video-wrap{ aspect-ratio: 9 / 16 !important; }
  .hero .video-wrap > video{ object-fit: contain !important; }
}

/* 6) Garantir que WhatsApp e header não poluam o HERO */
.site-header{ z-index: 50 !important; position: sticky !important; top: 0 }
.whatsapp-float{ z-index: 60 !important; }