/* Estilos básicos para a página */

@font-face {
  font-family: "Pristina";
  src: url("../fonts/PRISTINA.TTF") format("truetype");
  /* Caso tenha versões .woff ou .woff2, adicione também aqui */
  font-weight: 100;
  font-style: italic;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
}

.parallax {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.parallax-bg {
  background-image: url("../imagens/violinistaluisKaufmann.jpeg");
  height: 100%;
  width: 100%;
  background-position: 50% 25%;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-attachment: scroll;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in; /* fade in rápido */
}

.parallax-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  opacity: 1;
}

.parallax::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(243, 202, 76, 0.3));
  z-index: 3;
}

/* Estilo do logo central na seção parallax */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(50px); /* Centralizado, +50px p/ baixo inicialmente */
  opacity: 0;
  transition: transform 1s ease-out 1s, opacity 1s ease-out 1s;
  z-index: 3;
}

/* Quando a página estiver carregada, remove o deslocamento de 50px e mostra */
body.loaded .logo {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.logo img {
  max-width: 600px;
  height: auto;
}

body.loaded .parallax-bg {
  opacity: 1;
}

/* Seção de Conteúdo após o parallax */
.conteudo {
  padding: 50px;
  text-align: center;
  background-color: #f4f4f4;
  height: 100vh;
}

/* ============================= */
/*         Navbar e Menu         */
/* ============================= */

.navbar {
  background-color: rgba(0, 0, 0, 0.7); /* Fundo preto com 70% de opacidade */
  padding: 15px 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: none; /* Remove transições relacionadas ao scroll */
}

@media (max-width: 900px) {
  .navbar {
    background-color: transparent;
    /* Se houver borda, remova-a também */
    border: none;
  }
}

/* Caso haja regras específicas para .navbar.scrolled, pode removê-las */
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar ul li {
  margin: 0 20px;
}

.navbar ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 22px;
  font-family: "Lora", serif;
  font-weight: lighter;
  transition: color 0.3s ease;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  color: #f3ca4c;
}

/* Ícone Hamburger com fundo dourado circular e reposicionado */
.hamburger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f3ca4c;
  color: #fff;
  font-size: 24px;
  display: none; /* Exibido apenas em telas pequenas via media query */
  position: absolute;
  right: 20px;
  top: calc(50% + 20px); /* Move o ícone 20px para baixo em relação ao centro */
  transform: translateY(-50%);
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 1001;
}

/* Menu lateral para mobile */
.menu-lateral {
  position: fixed;
  top: 0;
  right: -250px; /* Inicialmente fora da tela */
  width: 250px;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  transition: right 0.3s ease;
  z-index: 1000;
  padding-top: 60px;
}

.menu-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-lateral ul li {
  margin: 20px 0;
  text-align: center;
}

.menu-lateral ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  font-family: "Lora", serif;
}

/* Destaque para o link ativo no menu lateral */
.menu-lateral ul li a.active {
  color: #f3ca4c;
}

.menu-lateral.ativo {
  right: 0 !important; /* Força o menu a deslizar para a tela */
}

/* Exibir hamburger e ocultar menu principal em telas pequenas */
@media (max-width: 900px) {
  .hamburger {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

/* ============================= */
/*       Seção Sobre o Violinista       */
/* ============================= */

.sobre-violinista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  background-image: url("../imagens/fundo.png");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #333;
  position: relative;
  z-index: 2;
}

.sobre-violinista::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.texto-sobre {
  width: 50%;
  font-family: "Lora", serif;
  z-index: 2;
}

.texto-sobre h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.texto-sobre p {
  font-size: 18px;
  color: #fff;
  line-height: 1.6;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.imagem-sobre {
  width: 50%;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.imagem-sobre img {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Ajustes para telas menores na seção Sobre */
@media (max-width: 1008px) {
  .sobre-violinista {
    flex-direction: column;
    text-align: center;
  }
  .texto-sobre,
  .imagem-sobre {
    width: 100%;
  }
  .imagem-sobre img {
    width: 400px;
    height: 400px;
  }
}
.sobre-violinista-video.fallback {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../imagens/apresenta.jpeg") no-repeat center center;
  background-size: cover;
}

.sobre-violinista-video {
  position: relative;
  width: 100%;
  height: 100vh; /* Ajuste conforme necessário */
  overflow: hidden;
}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.sobre-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza verticalmente */
  align-items: center; /* centraliza horizontalmente */
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  height: 100vh; /* ocupa toda a altura da viewport */
}

/* ============================= */
/*       Seção de Eventos       */
/* ============================= */

.eventos-parallax {
  position: relative;
  background-image: url("../imagens/fundoeventos.jpeg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 60px 20px;
  color: #fff;
  text-align: center;
  z-index: 1;
}

.eventos-parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.eventos-parallax h2 {
  font-size: 64px;
  font-family: "Great Vibes", cursive;
  color: #fff;
  z-index: 2;
  position: relative;
}

.eventos-conteudo {
  position: relative;
  z-index: 2;
}

.eventos-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Ajustes para telas menores na seção de eventos */
@media (max-width: 768px) {
  .eventos-container {
    flex-direction: column;
    align-items: center;
  }
  .evento-card {
    width: 100%;
    max-width: 400px;
  }
  .logo img {
    max-width: 100vw;
    height: auto;
  }

  /* Centraliza melhor o background no mobile */
  .parallax-bg {
    background-position: center center;
  }
}

/* ============================= */
/*         Cartões de Evento         */
/* ============================= */

.evento-card {
  width: 500px;
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.evento-card:hover {
  transform: translateY(-10px);
}

.evento-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.evento-titulo {
  font-family: "Great Vibes", cursive;
  font-size: 50px;
  text-align: center;
  color: #333;
  margin: 25px 0;
  padding: 0;
  line-height: 1;
}

/* ============================= */
/*         Swiper           */
/* ============================= */

.swiper-container {
  width: 100%;
  height: 350px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
}
/* Botão para fechar o menu lateral */
.close-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  z-index: 1002; /* Certifique-se de que fique acima do menu */
}

/* FOOTER */
footer {
  background: #000;
  color: #fff;
  position: relative;
  padding: 40px 20px;
  /* Remova ou teste sem overflow se suspeitar de problemas */
  /* overflow: hidden; */
  /* Impede que o footer encolha no layout Flex */
  flex-shrink: 0;
}

/* Degradê dourado na borda superior */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, #000, transparent);
  z-index: 1;
}

/* CONTAINER PRINCIPAL DO FOOTER */
.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* LOGO */
.footer-logo {
  text-align: center;
}

.footer-logo img {
  display: block;
  margin: 0 auto;
  max-width: 400px;
  height: auto;
}

/* LINKS */
.footer-links {
  text-align: center;
}

.footer-links h3 {
  margin: 0 0 10px;
  font-family: "Lora", serif;
  font-weight: lighter;
  font-size: 1.5rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
}

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  transition: color 0.3s ease;
  font-family: "Lora", serif;
  font-weight: lighter;
}

.footer-links ul li a:hover {
  color: #f3ca4c;
}

/* REDES SOCIAIS */
.footer-social {
  text-align: center;
}

.footer-social h3 {
  margin: 0 0 10px;
  font-family: "Lora", serif;
  font-weight: lighter;
  font-size: 1.5rem;
}

.footer-social .social-list {
  display: inline-block;
  text-align: left;
  gap: 10px;
}

.footer-social .social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.footer-social .social-item img {
  width: 28px;
  height: auto;
}

.footer-social .social-item a {
  font-family: "Lora", serif;
  font-weight: lighter;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* RODAPÉ INFERIOR */
.footer-bottom {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}

/* MEDIA QUERY */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer-logo {
    width: 100%;
    text-align: center;
  }
  .footer-logo img {
    max-width: 90vw;
  }
}