/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  padding-top: 20px;
  background-color: #2d1b4d;
  background-image: url("https://www.transparenttextures.com/patterns/bedge-grunge.png");
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto Mono, sans-serif;
  color: #e0e0e0;
}

/* Estilo padrão para Desktop */
.chain-divider {
    text-align: center;
    width: 100%;
    overflow: hidden; /* Esconde o que sair para fora */
}

.divider-img {
    max-width: 100%; /* No desktop ele se ajusta ao site */
    height: auto;
}

/* Ajuste específico para Celular (Mobile) */
@media (max-width: 600px) {
    .divider-img {
        max-width: none;  /* Impede o GIF de encolher */
        width: 700px;     /* Força o GIF a manter um tamanho maior que a tela */
        position: relative;
        left: 50%;        /* Move o GIF para o meio */
        transform: translateX(-50%); /* Garante que o centro dele fique visível */
    }
}
  


        /* CONFIGURAÇÕES GERAIS */


        /* CONTAINER PRINCIPAL (A CAIXA ESCURA) */
        .container {
            background-color: #0a0a0a;
            max-width: 900px;
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            margin-bottom: 50px;
            border: 3px double #8a2be2; /* Borda dupla roxa */
            box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.5); /* Sombra sólida estilo retro */
            min-height: 90vh;
        }

        /* CABEÇALHO E LOGO */
        header {
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-bottom: 2px dashed #4b0082;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        #band-logo {
            width: 200px; /* Tamanho que você pode ajustar */
            height: auto;
            filter: drop-shadow(4px 4px 0px #4b0082);
            transition: transform 0.3s ease;
            display: block;
        }
        
        #band-logo:hover {
             /* Efeito de "vibração" ao passar o mouse */
            transform: scale(1.02) rotate(-1deg);
           filter: drop-shadow(6px 6px 0px #8A2BE2) contrast(1.2);
    
      
        }


.header-top {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 0;
 width: 100%;
 margin: 0 auto;
}

.header-divider {
    width: 100%;
    height: 330px;          /* Ajuste a altura conforme sua imagem */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('bannerhalftone.png'); /* Coloque o nome do arquivo aqui */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    margin-top: -20px;
}

@media (max-width: 600px) {
    .header-divider {
        height: 200px; /* Diminui um pouco a altura no celular */
        background-size: 100% auto; /* Força a imagem a ocupar a largura total do celular */
        margin-top: -40px;
    }
    
    .main-header {
        flex-direction: column;
        margin-top: -20px;
    }
    
  
}

        /* NAVEGAÇÃO */
        nav {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        nav a {
            color: #8a2be2;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 10px;
            text-transform: uppercase;
        }

        nav a:hover {
            background-color: #8a2be2;
            color: #000;
        }

        /* TÍTULOS E SEÇÕES */
        h2 {
            color: #fff;
            background-color: #4b0082;
            display: inline-block;
            padding: 5px 15px;
            transform: skew(-5deg); /* Estilo de recorte de revista */
            text-transform: uppercase;
        }

        section {
            margin-bottom: 20px;
        }

        .zine-box {
            border: 1px solid #333;
            padding: 20px;
            background-color: #121212;
            position: relative;
        }

        /* LISTA DE SHOWS (GIGS) */
        .show-item {
            border-bottom: 1px solid #2d1b4d;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
        }

        .show-item:last-child {
            border: none;
        }
        
        .show-item a {
    color: #a020f0; /* O roxo da banda */
    text-decoration: none;
    font-weight: bold;
}

.show-item a:hover {
    color: #fff;
    text-shadow: 0 0 5px #a020f0; /* Efeito de brilho ao passar o mouse */
    text-decoration: underline;
}

        /* RODAPÉ */
        footer {
            text-align: center;
            font-size: 0.8em;
            margin-top: 50px;
            color: #4b0082;
            border-top: 1px solid #222;
            padding-top: 20px;
        }

.gif-footer {
width: 80px;
}

        /* RESPONSIVIDADE PARA CELULAR */
        @media (max-width: 600px) {
            .container { padding: 15px; }
            #band-logo { width: 200px; }
            .show-item { flex-direction: column; }
        }
        

.banda-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.integrante-card {
  flex: 0 0 calc(50% - 20px);
  min-width: 250px;
  max-width: 280px;
  background-color: #000; /* Preto */
  border: 2px solid #4b0082; /* Roxo */
  color: #fff;
  transition: transform 0.3s ease; /* Pequena animação no card todo */
}

.integrante-card a {
    color: #a020f0; /* O roxo da banda */
    text-decoration: none;
    font-weight: bold;
}

.integrante-card a:hover {
    color: #fff;
    text-shadow: 0 0 5px #a020f0; /* Efeito de brilho ao passar o mouse */
    text-decoration: underline;
}

.info-card {
 margin-top: -20px; 
}

/* Responsividade: No celular, os cards ocupam a linha toda (1 por linha) */
@media (max-width: 600px) {
  .integrante-card {
    flex: 0 0 100%;
  }
}

/* Efeito na Imagem */
.integrante-card img {
  width: 85%;
  margin: 15px auto;
  display: block;
  border: 1px solid #5a005a;
  
  /* Deixa a foto preto e branco por padrão */
  filter: grayscale(100%); 
  /* Suaviza a volta da cor */
  transition: filter 0.5s ease-in-out; 
}

/* Quando passa o mouse no card, a foto fica colorida */
.integrante-card:hover img {
  filter: grayscale(0%);
}

/* Efeito opcional: destaque na borda ao passar o mouse */
.integrante-card:hover {
  border-color: #ff00ff; /* Roxo vibrante/Magenta */
  transform: translateY(-5px); /* Card sobe levemente */
}

.topo-card {
  background-color: #4b0082;
  padding: 8px;
  text-align: center;
  font-weight: bold;
}

.info-card {
  padding: 15px;
  text-align: left;
}

.contato-sessao {
    text-align: center;
    padding: 40px 20px;
    background-color: #000;
    color: #a020f0; /* Roxo */
    border: 2px dashed #a020f0; /* Borda tracejada estilo recorte */
    margin: 20px;
    margin-top: 50px;
}

.botao-contato {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    border: 2px solid #a020f0;
    color: #a020f0;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.3s;
}

.botao-contato:hover {
    background-color: #a020f0;
    color: #000;
    box-shadow: 4px 4px 0px #fff; /* Sombra branca para destacar */
}

.scroll-container {
    width: 100%;
    max-height: 450px; /* Define a altura máxima da caixa */
    overflow-y: scroll; /* Ativa a rolagem vertical */
    border: 3px double #a020f0; /* Borda roxa estilo retrô */
    background: #000;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    
  }

  /* Estilizando a barra de rolagem (Chrome/Edge/Safari) */
  .scroll-container::-webkit-scrollbar {
    width: 10px;
  }
  .scroll-container::-webkit-scrollbar-track {
    background: #111; 
  }
  .scroll-container::-webkit-scrollbar-thumb {
    background: #a020f0; /* Roxo */
    border: 2px solid #000;
  }

  /* Grid de fotos lá dentro */
  .grid-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Duas colunas */
    gap: 10px;
  }

  .grid-fotos img {
    width: 100%;
    filter: grayscale(0.5) contrast(1.2);
    transition: 0.3s;
    border: 1px solid #333;
  }

  .grid-fotos img:hover {
    filter: grayscale(0%) contrast(1);
    border-color: #a020f0;
  }

/* Ajuste para telas menores (celular) */
  @media (max-width: 600px) {
    .grid-fotos {
      /* No celular, 3 colunas podem ficar muito pequenas, 
         então mudamos para 2 ou 1 */
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Estilo do fundo da lightbox */
.lightbox {
  display: none; /* Escondido por padrão */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fundo preto bem escuro */
}

/* Imagem expandida */
.lightbox-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  margin-top: 5%;
  border: 3px solid #a020f0; /* Borda roxa característica */
}

/* Botão de fechar */
.fechar {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.fechar:hover { color: #a020f0; }

/* Texto da legenda */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-family: 'Courier New', Courier, monospace;
}
  


body {
    /* O cursor padrão vira uma estrela roxa */
    cursor: url('https://cur.cursors-4u.net/symbols/sym-8/sym763.cur'), auto;
}

a:hover {
    /* Quando passa o mouse no link, ele pode mudar para outro ícone ou manter a estrela */
    cursor: url('https://cur.cursors-4u.net/symbols/sym-8/sym763.cur'), pointer;
}