/* Seção Sobre */
.sobre-section {
  background-color: var(--primary-color);
  /* Fundo com a cor primária */
  color: var(--white);
  /* Define a cor do texto padrão para branco nesta seção */
  padding: 60px 0 60px 0;
  /* Aumenta o padding inferior para criar espaço para o botão se projetar */
  position: relative;
  /* Essencial para posicionar o botão absolutamente em relação a esta seção */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  /* Adiciona uma sombra sutil para dar profundidade */
}

/* Ajusta a cor do título h2 para branco nesta seção */
.sobre-section h2 {
  color: var(--white);
}

.sobre-content {
  max-width: 1000px;
  /* Largura máxima para o texto */
  margin: 0 auto;
  /* Centraliza o bloco de texto */
  text-align: justify;
  /* Justifica o texto para um visual mais formal */
}

.sobre-content p {
  margin-bottom: 20px;
  font-size: 1.4em;
  color: var(--white);
  /* Garante que os parágrafos sejam brancos */
  opacity: 0.9;
  /* Adiciona uma leve transparência para não ser totalmente chapado */
}

.sobre-content p:last-child {
  margin-bottom: 0;
}

/* Wrapper do botão de vídeo: Responsável pelo posicionamento exato */
.video-play-button-wrapper {
  bottom: 0;
  /* Alinha a base do wrapper com a base da seção */
  left: 50%;
  /* Move o wrapper para o centro horizontalmente */
  transform: translate(-50%, 50%);
  /* translateX(-50%) centraliza o wrapper, translateY(50%) move para fora da seção */
  z-index: 10;
  /* Garante que o botão fique acima de outros elementos na página */
  display: flex;
  /* Para centralizar o ícone dentro do botão (já faz o que o btn-play-video fazia com 'display: flex') */
  justify-content: center;
  align-items: center;
  margin: 40px 0 0 0;
}

/* Estilo do botão de play redondo */
.btn-play-video {
  display: flex;
  /* Mantido aqui para garantir o alinhamento interno */
  align-items: center;
  justify-content: center;
  width: 80px;
  /* Largura do botão */
  height: 80px;
  /* Altura do botão (igual à largura para ser redondo) */
  border-radius: 50%;
  /* Torna o botão redondo */
  background-color: var(--gold-accent);
  /* Cor de fundo do botão (dourado) */
  color: var(--primary-color);
  /* Cor do ícone (azul escuro) */
  font-size: 2.5em;
  /* Tamanho do ícone */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Sombra para dar profundidade */
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  /* Transições suaves para efeitos de hover */
  text-decoration: none;
  /* Remove o sublinhado padrão de links */
  position: relative;
  /* ESSENCIAL para os pseudo-elementos ::before e ::after */
  z-index: 12;
  /* Garante que o botão esteja acima dos pseudo-elementos */
  /* Removido: margin: -20px 0 0 0; e position: absolute; pois o wrapper já faz o posicionamento */
}

.btn-play-video:hover {
  transform: scale(1.1);
  /* Apenas escala ao passar o mouse */
  background-color: var(--primary-color);
  /* Inverte a cor de fundo no hover */
  color: var(--white);
  /* Inverte a cor do ícone no hover */
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  /* Sombra um pouco mais forte no hover */
}


/* --- Efeito de Borda Circular com ::before e ::after (Opção 1: Pulsante) --- */
.btn-play-video::before,
.btn-play-video::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  /* Borda branca semi-transparente */
  z-index: -1;
  /* Fica atrás do botão */
  animation: pulse-border 2s infinite ease-out;
  /* Animação de pulsação */
}

.btn-play-video::before {
  width: 100px;
  /* Um pouco maior que o botão */
  height: 100px;
  top: -10px;
  /* Ajusta a posição para centralizar */
  left: -10px;
  opacity: 0;
  /* Começa invisível */
  animation-delay: 0s;
  /* Começa imediatamente */
}

.btn-play-video::after {
  width: 120px;
  /* Ainda maior */
  height: 120px;
  top: -20px;
  left: -20px;
  opacity: 0;
  /* Começa invisível */
  animation-delay: 0.5s;
  /* Começa com um atraso */
}

/* Animação de pulsação */
@keyframes pulse-border {
  0% {
    transform: scale(0.5);
    /* Começa menor */
    opacity: 0;
  }

  50% {
    opacity: 0.5;
    /* Atinge opacidade máxima */
  }

  100% {
    transform: scale(1.2);
    /* Expande além do tamanho final */
    opacity: 0;
    /* Desaparece */
  }
}


/* Estilos para o Modal de Vídeo (cores e aparência) - Mantidos como antes */
.modal-content {
  background-color: var(--primary-color);
  /* Fundo do modal com sua cor primária */
  border: none;
  /* Remove borda padrão */
  border-radius: 10px;
  /* Arredonda as bordas do modal */
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Linha sutil no cabeçalho */
  padding: 1rem 1.5rem;
}

.modal-title {
  color: var(--gold-accent);
  /* Cor do título do modal */
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  /* Torna o 'X' do botão de fechar branco */
  opacity: 0.8;
}

.btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 0;
  /* Remove padding padrão do Bootstrap no corpo do modal para o vídeo ocupar 100% */
}

/* Media Queries específicas do Sobre e para responsividade do botão em telas menores */
@media (max-width: 768px) {
  .sobre-content {
    text-align: left;
    /* Alinha à esquerda em telas menores */
  }

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

  /* Ajustes para o botão em telas pequenas (celulares) */
  .btn-play-video {
    width: 60px;
    /* Botão um pouco menor */
    height: 60px;
    font-size: 1.8em;
    /* Ícone menor */
  }

  .video-play-button-wrapper {
    bottom: 0;
    /* Garante que a base do wrapper está na base da seção */
    /* Transform já está definido corretamente no desktop, ele se mantém */
  }

  .sobre-section {
    padding-bottom: 100px;
    /* Ajusta o padding inferior da seção para telas menores */
    border-bottom-left-radius: 50px;
    /* Curvatura um pouco menor em mobile */
    border-bottom-right-radius: 50px;
    margin-bottom: 40px;
    /* Ajusta a margem inferior */
  }

  /* Ajuste dos pseudo-elementos para mobile */
  .btn-play-video::before {
    width: 80px;
    height: 80px;
    top: -10px;
    left: -10px;
  }

  .btn-play-video::after {
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
  }
}