/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-align: center;
  padding-top: 160px;
  padding-bottom: 50px;
}

.subpage-hero-section{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-align: center;
  padding-top: 160px;
  padding-bottom: 50px;
}

#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}

/* Overlay preto com opacidade */
.black-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Ajuste a opacidade */
  z-index: 1;
}


/* Container para as formas do overlay */
.video-overlay-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Pseudo-element para a forma da esquerda (BEFORE) */
.video-overlay-shapes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Cobre a largura total */
  height: 100%; /* Cobre a altura total */
  background-color: var(--primary-color);
  z-index: 1; /* Z-index relativo ao seu pai */
  /* Clip-path da forma esquerda (baseado no seu código) */
  clip-path: polygon(0px calc(60vh - 100px), 0px 0px, 34% 0px); /* Ajuste o 40% */
  pointer-events: auto;
}

/* Pseudo-element para a PRIMEIRA forma da direita (AFTER) - Sólida */
.video-overlay-shapes::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* Cobre a largura total */
  width: 100%; /* Cobre a largura total */
  height: 100%; /* Cobre a altura total */
  background-color: var(--gold-accent); /* Cor dourada sólida */
  z-index: 2; /* Acima da segunda forma dourada (z-index 1) se houver sobreposição */
   /* NOVO: Clip-path para a primeira forma da direita - Define a banda de cima */
   /* Pontos: Superior-direito (100% da largura, Y1% do topo), Inferior-direito (100% da largura, Y2% do topo), Ponto na borda inferior (X1% da largura, bottom), Ponto na borda inferior (X2% da largura, bottom) */
   /* Estimativa baseada na imagem: Ângulo que vai do topo direito para o bottom esquerdo */
   clip-path: polygon(100% 0%, 100% 40%, 60% 100%, 80% 100%); /* Ajuste os % para o posicionamento e espessura da banda */
  pointer-events: auto;
}

/* NOVO: Estilos para a SEGUNDA forma da direita (.second-right-shape) - Com opacidade */
.second-right-shape {
    position: absolute;
    top: 0;
    left: 0; /* Cobre a largura total */
    width: 100%; /* Cobre a largura total */
    height: 100%; /* Cobre a altura total */
    background-color: rgba(212, 175, 55, 0.5); /* Cor dourada com 50% de opacidade */
    z-index: 1; /* Abaixo da primeira forma dourada (z-index 2) */
    /* NOVO: Clip-path para a segunda forma da direita - Define a banda de baixo (paralela) */
     /* Pontos: Superior-direito (100% da largura, Y3% do topo), Inferior-direito (100% da largura, Y4% do topo), Ponto na borda inferior (X3% da largura, bottom), Ponto na borda inferior (X4% da largura, bottom) */
     /* Estimativa baseada na imagem, paralela à primeira forma */
    clip-path: polygon(100% 45%, 100% 85%, 30% 100%, 50% 100%); /* Ajuste os % para o posicionamento e espessura, mantendo paralelismo */
    pointer-events: auto;
}


.hero-content {
  position: relative;
  z-index: 3; /* Conteúdo acima de todas as formas */
  max-width: 1000px;
  padding: 0 20px;
  margin: -70px auto 0 auto; /* Mantendo seu margin-top manual */
}

.hero-content h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 3.5em;
  margin-bottom: 20px;
  color: var(--white);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}

.hero-content p {
  font-size: 1.5em;
  margin-bottom: 40px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Estilos Específicos para o Modo Imagem (Subpáginas) --- */
.hero-section.hero-image-mode {
    min-height: 50vh; /* Altura um pouco menor para subpáginas */
}

.hero-section.hero-image-mode .hero-subpage-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra toda a área */
    z-index: 0; /* Fica no fundo */
}

.hero-section .black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Alterado para 0.7 para um foco menor na imagem */
    z-index: 1; /* Acima do vídeo/imagem, abaixo do conteúdo */
}

/* Botão .btn-saiba-mais está em base.css */

/* Media Queries específicas do Hero */
@media (max-width: 1024px) {
  .hero-section {
    padding-top: 140px;
  }

  .hero-content h1 {
    font-size: 3.5em;
  }

  .hero-content p {
    font-size: 1.3em;
  }

  /* Ajuste das formas em telas menores - Reajustar pontos */
  .video-overlay-shapes::before {
     clip-path: polygon(0px calc(100vh - 80px), 0px 0px, 50% 0px); /* Exemplo */
  }

  .video-overlay-shapes::after {
     clip-path: polygon(100% 5%, 100% 30%, 70% 100%, 85% 100%); /* Exemplo de ajuste */
  }
   .second-right-shape {
     clip-path: polygon(100% 35%, 100% 60%, 40% 100%, 55% 100%); /* Exemplo de ajuste */
   }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: 110px;
    height: 80vh;
  }

  .hero-content h1 {
    font-size: 2.8em;
  }

  .hero-content p {
    font-size: 1.1em;
  }

  /* Simplifica ou remove em telas pequenas */
  .video-overlay-shapes::before,
  .video-overlay-shapes::after,
  .second-right-shape { /* Aplica regras aos 3 elementos de forma */
    /* Opção 1: Simplificar para retângulo (anteriormente usado) */
     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
     background-color: var(--primary-color); /* Volta para cor sólida (pode ajustar) */
     background-image: none; /* Remove gradiente */
  }
   /* Se optar por remover completamente, use display: none para todos os 3 */
    /* .video-overlay-shapes::before, .video-overlay-shapes::after, .second-right-shape { display: none; } */

}

@media (max-width: 480px) {
  .hero-section {
    padding-top: 90px;
    height: 70vh;
  }

  .hero-content h1 {
    font-size: 2em;
  }

  .hero-content p {
    font-size: 1em;
  }

  /* Remove as formas em telas muito pequenas */
  .video-overlay-shapes::before,
  .video-overlay-shapes::after,
  .second-right-shape { /* Remove os 3 elementos de forma */
    display: none;
  }
}