/* CONFIGURAÇÕES GERAIS */

* {
    margin: 0; /* remove as margens padrão do navegador */
    padding: 0; /* remove os espaçamentos internos padrão */
    box-sizing: border-box; /* inclui padding e borda no tamanho total */
}

body {
    font-family: Arial, Helvetica, sans-serif; /* define a fonte principal */
    background: #000000; /* define o fundo preto */
}

/* MENU */

.menu {
    width: 100%; /* ocupa toda a largura da tela */
    height: 70px; /* define a altura do menu */
    background: linear-gradient(to right, #000, #001f7a); /* degradê preto e azul */
    display: flex; /* ativa o Flexbox */
    justify-content: center; /* centraliza os links horizontalmente */
    align-items: center; /* centraliza verticalmente */
    position: fixed; /* mantém o menu fixo */
    top: 0; /* posiciona no topo */
    left: 0; /* encosta na esquerda */
    z-index: 1000; /* mantém o menu acima do conteúdo */
}

.logo {
    position: absolute; /* permite posicionar separadamente */
    left: 20px; /* distância da borda esquerda */
}

.logo img {
    height: 50px; /* altura da imagem da logo */
}

.menu ul {
    display: flex; /* coloca os links lado a lado */
    list-style: none; /* remove os marcadores */
    gap: 40px; /* espaço entre os links */
}

.menu a {
    color: white; /* cor dos links */
    text-decoration: none; /* remove o sublinhado */
    font-size: 18px; /* tamanho da fonte */
    font-weight: bold; /* deixa em negrito */
}

.menu a:hover {
    color: #4da3ff; /* muda a cor ao passar o mouse */
}

/* BOTÃO DO PERFIL NA NAVBAR */

.botao-perfil {
    width: 55px; /* define a largura do círculo */
    height: 55px; /* define a altura do círculo */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza o piloto verticalmente */
    justify-content: center; /* centraliza o piloto horizontalmente */
    background: #111936; /* define o fundo azul escuro */
    border: 2px solid #245cff; /* adiciona a borda azul */
    border-radius: 50%; /* transforma o botão em um círculo */
    overflow: hidden; /* esconde as partes do piloto que ultrapassam o círculo */
    position: relative; /* estabelece a referência de posicionamento */
    color: white; /* define a cor de possíveis ícones */
    font-size: 20px; /* define o tamanho de possíveis ícones */
    cursor: pointer; /* mostra a mãozinha ao passar o mouse */
    transition: 0.3s; /* suaviza os efeitos */
}
.acoes-menu {
    position: absolute; /* posiciona o conjunto na navbar */
    right: 25px; /* distância da borda direita */
    display: flex; /* coloca carrinho e perfil lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 20px; /* espaço entre os elementos */
}

.acoes-menu .botao-carrinho {
    position: relative; /* mantém o carrinho no Flexbox */
    right: auto; /* remove o deslocamento lateral */
    flex-shrink: 0; /* impede o botão de encolher */
}

.acoes-menu .perfil-menu {
    position: relative; /* mantém o perfil no Flexbox */
    right: auto; /* remove o deslocamento lateral */
    flex-shrink: 0; /* impede o perfil de encolher */
}

/* BOTÃO DO CARRINHO */

.botao-carrinho {
    width: 130px; /* largura do botão */
    height: 60px; /* altura do botão */
    border: none; /* remove a borda */
    background: transparent; /* fundo transparente */
    position: relative; /* referência para posicionar o contador */
    cursor: pointer; /* mostra o cursor de clique */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
}

.botao-carrinho img {
    width: 130px; /* largura da imagem */
    height: auto; /* mantém a proporção */
    object-fit: contain; /* mostra a imagem sem cortar */
    transition: .3s; /* suaviza o efeito de hover */
}

.botao-carrinho:hover img {
    transform: scale(1.1); /* aumenta a imagem ao passar o mouse */
}

/* BANNER */

.banner-ingressos {
    margin-top: 70px; /* evita sobreposição com o menu */
    width: 100%; /* ocupa toda a largura */
    min-height: 420px; /* altura mínima do banner */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza o conteúdo verticalmente */
    padding: 0 8%; /* espaço nas laterais */
    background: linear-gradient(rgba(4, 8, 25, .78),rgba(4, 8, 25, .78)), url("../IMAGENS/CARROS/fundoingressos.png"); /* imagem com camada escura */
    background-size: cover; /* preenche toda a área */
    background-position: right center; /* posiciona a imagem à direita */
}

.banner-conteudo {
    max-width: 650px; /* limita a largura do conteúdo */
}

.banner-conteudo span {
    color: #3b82ff; /* texto azul */
    font-size: 17px; /* tamanho da fonte */
    letter-spacing: 5px; /* espaço entre as letras */
    text-transform: uppercase; /* transforma em maiúsculas */
}

.banner-conteudo h1 {
    color: white; /* título branco */
    font-size: 78px; /* tamanho do título */
    margin: 14px 0; /* espaço acima e abaixo */
    font-style: italic; /* deixa em itálico */
    text-shadow: 0 0 30px rgba(0, 0, 0, .45); /* sombra no título */
}

.banner-conteudo p {
    color: #e6e6e6; /* texto cinza claro */
    font-size: 20px; /* tamanho da descrição */
    line-height: 32px; /* espaço entre linhas */
    max-width: 620px; /* limita a largura do parágrafo */
}


/* AVISO DE LOGIN */
.aviso-login{
    display:none; /* mantém o aviso escondido inicialmente */
    position:fixed; /* fixa o aviso na tela */
    top:0; /* ocupa desde o topo */
    left:0; /* ocupa desde a esquerda */
    width:100%; /* ocupa toda a largura */
    height:100%; /* ocupa toda a altura */
    background:rgba(0,0,0,.80); /* escurece o fundo */
    z-index:6000; /* fica acima do mapa e do carrinho */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
}
.aviso-login-conteudo{
    width:90%; /* adapta a largura à tela */
    max-width:430px; /* limita a largura máxima */
    padding:35px; /* espaçamento interno */
    background:linear-gradient(135deg,#07122f,#0d2c70); /* degradê azul escuro */
    border:1px solid #3b82ff; /* borda azul */
    border-radius:22px; /* arredonda os cantos */
    box-shadow:0 0 45px rgba(36,92,255,.35); /* brilho azul */
    text-align:center; /* centraliza os textos */
    animation:entradaAvisoLogin .3s ease; /* anima a entrada */
}
.aviso-login-icone{
    width:70px; /* largura do círculo */
    height:70px; /* altura do círculo */
    margin:0 auto 20px; /* centraliza e cria espaço abaixo */
    border-radius:50%; /* deixa circular */
    background:#245cff; /* fundo azul */
    color:white; /* ícone branco */
    font-size:30px; /* tamanho do cadeado */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza verticalmente */
    justify-content:center; /* centraliza horizontalmente */
}
.aviso-login-conteudo h2{
    color:white; /* título branco */
    font-size:26px; /* tamanho do título */
    margin-bottom:15px; /* espaço abaixo */
}
.aviso-login-conteudo p{
    color:#b9c9e8; /* descrição azul-clara */
    font-size:16px; /* tamanho da descrição */
    line-height:1.6; /* espaçamento entre linhas */
    margin-bottom:25px; /* espaço antes dos botões */
}
.aviso-login-botoes{
    display:flex; /* coloca os botões lado a lado */
    justify-content:center; /* centraliza os botões */
    gap:12px; /* espaço entre os botões */
}
.aviso-login-botoes button,
.aviso-login-botoes a{
    padding:13px 20px; /* espaçamento interno */
    border:1px solid #3b82ff; /* borda azul */
    border-radius:10px; /* arredonda os cantos */
    color:white; /* texto branco */
    font-size:14px; /* tamanho do texto */
    font-weight:bold; /* deixa em negrito */
    text-decoration:none; /* remove sublinhado do link */
    cursor:pointer; /* cursor de clique */
    transition:.3s; /* suaviza o hover */
}
.aviso-login-botoes button{
    background:#101e3d; /* fundo escuro do botão voltar */
}
.aviso-login-botoes a{
    background:#245cff; /* fundo azul do botão login */
}
.aviso-login-botoes button:hover,
.aviso-login-botoes a:hover{
    background:#3b82ff; /* destaca o botão ao passar o mouse */
    transform:translateY(-2px); /* levanta levemente */
}

/* GRANDES PRÊMIOS */

.gps {
    width: 100%; /* ocupa toda a largura */
    padding: 55px 8%; /* espaçamento interno */
    background: repeating-linear-gradient(135deg,#070b18 0px,#070b18 35px,#091025 35px,#091025 36px); /* cria o fundo com linhas diagonais */
    text-align: center; /* centraliza os textos */
}

.gps h2 {
    font-size: 42px; /* tamanho do título */
    color: white; /* texto branco */
    margin-bottom: 10px; /* espaço abaixo */
    font-style: italic; /* deixa em itálico */
}

.gps p {
    color: #cfcfcf; /* texto cinza claro */
    font-size: 18px; /* tamanho da descrição */
    margin-bottom: 30px; /* espaço abaixo */
}

/* CARDS */
.cards-gps{
    display:flex; /* coloca os cards lado a lado */
    justify-content:center; /* centraliza os cards */
    gap:30px; /* espaço entre os cards */
    flex-wrap:wrap; /* permite quebrar para outra linha */
}
.card-gp{
    width:340px; /* largura do card */
    min-height:480px; /* altura mínima do card */
    background:#0f1529; /* fundo azul escuro */
    border-radius:22px; /* arredonda os cantos */
    overflow:hidden; /* esconde o conteúdo que ultrapassar o card */
    box-shadow:0 20px 45px rgba(0,0,0,.35); /* adiciona sombra */
    transition:.35s ease; /* suaviza as animações */
    cursor:pointer; /* mostra o cursor de clique */
}
.card-gp:hover{
    transform:translateY(-8px) scale(1.02); /* levanta e aumenta o card */
    box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 35px rgba(59,130,255,.20); /* aumenta a sombra e adiciona brilho azul */
}
.card-gp img{
    width:100%; /* ocupa toda a largura do card */
    height:200px; /* altura da imagem */
    object-fit:cover; /* preenche o espaço sem deformar */
    display:block; /* remove o espaço extra da imagem */
}
.card-gp h3{
    color:white; /* deixa o título branco */
    font-size:32px; /* tamanho do título */
    margin-top:22px; /* espaço acima do título */
    font-style:italic; /* deixa o título em itálico */
}
.card-gp span{
    display:block; /* coloca o texto em uma linha própria */
    color:#3b82ff; /* cor azul */
    font-size:18px; /* tamanho do texto */
    margin-top:10px; /* espaço acima */
}
.card-gp p{
    color:#d7d7d7; /* cor cinza claro */
    font-size:17px; /* tamanho da descrição */
    margin:15px 0; /* espaço acima e abaixo */
}
.card-gp button{
    width:200px; /* largura do botão */
    height:52px; /* altura do botão */
    margin-top:10px; /* espaço acima */
    margin-bottom:25px; /* espaço abaixo */
    border:none; /* remove a borda */
    border-radius:14px; /* arredonda os cantos */
    background:#245cff; /* fundo azul */
    color:white; /* texto branco */
    font-size:18px; /* tamanho do texto */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
    transition:.3s; /* suaviza o hover */
}
.card-gp button:hover{
    background:#3b82ff; /* muda para azul mais claro */
}
/* DATA DOS GPS */
.card-gp .data-gp{
    display:flex; /* coloca calendário e data lado a lado */
    align-items:center; /* centraliza verticalmente */
    justify-content:center; /* centraliza dentro do card */
    gap:8px; /* espaço entre ícone e data */
    margin-top:12px; /* distância da localização */
    margin-bottom:18px; /* distância do botão */
    color:#b9c9e8; /* azul claro */
    font-size:14px; /* tamanho da data */
}
.card-gp .data-gp i{
    color:#3b82ff; /* deixa o calendário azul */
    font-size:16px; /* tamanho do ícone */
}
/* MODAL DO MAPA */
.modal-mapa{
    display:none; /* mantém a janela escondida inicialmente */
    position:fixed; /* fixa a janela na tela */
    top:0; /* encosta no topo */
    left:0; /* encosta na esquerda */
    width:100%; /* ocupa toda a largura */
    height:100%; /* ocupa toda a altura */
    background:rgba(0,0,0,.80); /* fundo preto transparente */
    z-index:2000; /* fica acima do restante da página */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
}
.conteudo-modal{
    position:relative; /* permite posicionar elementos internos */
    width:95%; /* ocupa 95% da largura disponível */
    max-width:1500px; /* limita a largura máxima */
    max-height:90vh; /* limita a altura a 90% da tela */
    padding:40px; /* espaço interno */
    background:#07122f; /* fundo azul escuro */
    border:1px solid #0d4ee6; /* borda azul */
    border-radius:25px; /* arredonda os cantos */
    box-shadow:0 0 50px rgba(0,90,255,.35); /* brilho azul */
    overflow:auto; /* permite rolagem quando necessário */
}
.conteudo-modal h2{
    color:white; /* texto branco */
    font-size:40px; /* tamanho do título */
    font-style:italic; /* deixa em itálico */
    margin-bottom:30px; /* espaço abaixo */
}
/* ÁREA DO MAPA */
.area-mapa{
    width:100%; /* ocupa toda a largura */
    display:flex; /* coloca mapa e informações lado a lado */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
    gap:30px; /* espaço entre mapa e informações */
}
/* CONTAINER DO MAPA */
.mapa-container{
    position:relative; /* serve de referência para posicionar os setores */
    width:100%; /* ocupa toda a largura disponível */
    max-width:1150px; /* limita a largura máxima */
    display:flex; /* ativa o Flexbox */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
}
/* MAPA */
.mapa-container img{
    width:100%; /* ocupa toda a largura do container */
    height:auto; /* mantém a proporção da imagem */
    display:block; /* remove o espaço extra da imagem */
    object-fit:contain; /* mostra o mapa inteiro sem cortar */
}
/* BOTÕES DOS SETORES */
.setor{
    position:absolute; /* posiciona cada setor sobre o mapa */
    min-width:50px; /* largura mínima do botão */
    height:38px; /* altura do botão */
    padding:0 10px; /* espaço interno nas laterais */
    pointer-events:auto; /* permite interação com o mouse */
    border:2px solid white; /* borda branca */
    border-radius:11px; /* arredonda os cantos */
    color:white; /* texto branco */
    font-size:15px; /* tamanho do texto */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
    transform:translate(-50%,-50%); /* centraliza o botão na posição definida */
    opacity:0; /* mantém o botão invisível */
    transition:.3s; /* suaviza os efeitos */
    z-index:10; /* coloca os setores acima do mapa */
}
.setor:hover{
    transform:translate(-50%,-50%) scale(1.12); /* aumenta o botão sem perder a posição */
    box-shadow:0 0 18px rgba(59,130,255,.8); /* adiciona brilho azul */
}
/* ARQUIBANCADAS */
.setor-a{
    left:55%; /* posição horizontal do setor A */
    top:71%; /* posição vertical do setor A */
    background:#ff1515; /* fundo vermelho */
}
.setor-d{
    left:95%; /* posição horizontal do setor D */
    top:23%; /* posição vertical do setor D */
    background:#ff1515; /* fundo vermelho */
}
.setor-g{
    left:31%; /* posição horizontal do setor G */
    top:17%; /* posição vertical do setor G */
    background:#ff1515; /* fundo vermelho */
}
.setor-h{
    left:85%; /* posição horizontal do setor H */
    top:12%; /* posição vertical do setor H */
    background:#ff1515; /* fundo vermelho */
}
.setor-m{
    left:87%; /* posição horizontal do setor M */
    top:42%; /* posição vertical do setor M */
    background:#ff1515; /* fundo vermelho */
}
.setor-r{
    left:59%; /* posição horizontal do setor R */
    top:7%; /* posição vertical do setor R */
    background:#ff1515; /* fundo vermelho */
}
/* ARQUIBANCADA PREMIUM */
.setor-b{
    left:72%; /* posição horizontal do setor B */
    top:56%; /* posição vertical do setor B */
    background:#ff1515; /* fundo vermelho */
}
/* SETORES VIP */
.setor-gpclub,
.setor-pitstop{
    background:#777; /* fundo cinza dos setores VIP */
}
.setor-gpclub{
    left:59%; /* posição horizontal do Grand Prix Club */
    top:38%; /* posição vertical do Grand Prix Club */
}
.setor-pitstop{
    left:79%; /* posição horizontal do Pit Stop Club */
    top:49%; /* posição vertical do Pit Stop Club */
}
/* HEINEKEN */
.setor-gramado,
.setor-estrela{
    background:#20b900; /* fundo verde dos setores Heineken */
}
.setor-gramado{
    left:10%; /* posição horizontal do Gramado */
    top:50%; /* posição vertical do Gramado */
}
.setor-estrela{
    left:22%; /* posição horizontal do Estrela */
    top:58%; /* posição vertical do Estrela */
}
/* ORANGE TREE CLUB */
.setor-orange{
    left:62%; /* posição horizontal do Orange Tree Club */
    top:55%; /* posição vertical do Orange Tree Club */
    background:#168cff; /* fundo azul */
}



/* SETORES DE MADRID */
/* GOLD */
.setor-madrid-gold1A{
    left:5%; /* posição horizontal do Gold 1A */
    top:23%; /* posição vertical do Gold 1A */
    background:#ffc400; /* fundo amarelo */
}
.setor-madrid-gold1{
    left:10%; /* posição horizontal do Gold 1 */
    top:19%; /* posição vertical do Gold 1 */
    background:#ffc400; /* fundo amarelo */
}
.setor-madrid-gold2{
    left:14%; /* posição horizontal do Gold 2 */
    top:14%; /* posição vertical do Gold 2 */
    background:#ffc400; /* fundo amarelo */
}
/* SILVER */
.setor-madrid-silverplus{
    left:35%; /* posição horizontal do Silver */
    top:17%; /* posição vertical do Silver */
    background:#bdbdbd; /* fundo cinza */
}
/* SILVER PLUS */
.setor-madrid-silver1{
    left:58%; /* posição horizontal do Silver Plus 1 */
    top:21%; /* posição vertical do Silver Plus 1 */
    background:#8fc8df; /* fundo azul claro */
}
.setor-madrid-silver2{
    left:60%; /* posição horizontal do Silver Plus 2 */
    top:48%; /* posição vertical do Silver Plus 2 */
    background:#8fc8df; /* fundo azul claro */
}
/* BRONZE */
.setor-madrid-bronze1{
    left:92%; /* posição horizontal do Bronze 1 */
    top:50%; /* posição vertical do Bronze 1 */
    background:#ff7518; /* fundo laranja */
}
/* SETORES DOS ESTADOS UNIDOS */
.setor-eua-1{
    left:73%; /* posição horizontal do setor 1 */
    top:16%; /* posição vertical do setor 1 */
    background:#ff1515; /* fundo vermelho */
}
.setor-eua-2{
    left:95%; /* posição horizontal do setor 2 */
    top:25%; /* posição vertical do setor 2 */
    background:#1677ff; /* fundo azul */
}
.setor-eua-3{
    left:53%; /* posição horizontal do setor 3 */
    top:74%; /* posição vertical do setor 3 */
    background:#ffd000; /* fundo amarelo */
}
.setor-eua-4{
    left:10%; /* posição horizontal do setor 4 */
    top:38%; /* posição vertical do setor 4 */
    background:#c900ff; /* fundo roxo */
}
.setor-eua-5{
    left:51%; /* posição horizontal do setor 5 */
    top:21%; /* posição vertical do setor 5 */
    background:#20d9e8; /* fundo azul-claro */
}
/* SETORES DE SINGAPURA */
.setor-singapura-a{
    left:26%; /* posição horizontal do setor A */
    top:61%; /* posição vertical do setor A */
    background:#ff1515; /* fundo vermelho */
}
.setor-singapura-b{
    left:42%; /* posição horizontal do setor B */
    top:13%; /* posição vertical do setor B */
    background:#1677ff; /* fundo azul */
}
.setor-singapura-c{
    left:78%; /* posição horizontal do setor C */
    top:13%; /* posição vertical do setor C */
    background:#ffd000; /* fundo amarelo */
}
.setor-singapura-d{
    left:65%; /* posição horizontal do setor D */
    top:58%; /* posição vertical do setor D */
    background:#20b900; /* fundo verde */
}
.setor-singapura-e{
    left:41%; /* posição horizontal do setor E */
    top:36%; /* posição vertical do setor E */
    background:#c900ff; /* fundo roxo */
}
/* FECHAR MAPA */
.fechar-modal{
    position:absolute; /* posiciona o botão dentro do modal */
    top:20px; /* distância do topo */
    right:20px; /* distância da direita */
    width:45px; /* largura do botão */
    height:45px; /* altura do botão */
    border:none; /* remove a borda */
    border-radius:50%; /* deixa o botão circular */
    background:#d61d1d; /* fundo vermelho */
    color:white; /* texto branco */
    font-size:20px; /* tamanho do X */
    cursor:pointer; /* cursor de clique */
    transition:.3s; /* suaviza a animação */
}
/* INFORMAÇÕES DO SETOR */
.info-setor{
    display:none; /* esconde as informações inicialmente */
    width:350px; /* largura do painel */
    flex-shrink:0; /* impede que o painel encolha */
    padding:30px; /* espaçamento interno */
    background:#0f1d3d; /* fundo azul escuro */
    border:1px solid #245cff; /* borda azul */
    border-radius:18px; /* arredonda os cantos */
    text-align:left; /* alinha os textos à esquerda */
    box-shadow:0 0 25px rgba(36,92,255,.25); /* brilho azul */
}
.info-setor h3{
    color:white; /* título branco */
    font-size:32px; /* tamanho do título */
    margin-bottom:8px; /* espaço abaixo */
}
.info-setor span{
    display:block; /* ocupa uma linha própria */
    color:#3b82ff; /* texto azul */
    font-size:18px; /* tamanho da fonte */
    font-weight:bold; /* deixa em negrito */
    margin-bottom:15px; /* espaço abaixo */
}
#precoSetor{
    color:#4da3ff; /* cor azul-claro do preço */
    font-size:27px; /* tamanho do preço */
    font-weight:bold; /* destaca o preço */
    margin-bottom:20px; /* espaço abaixo */
}
/* DETALHES DO SETOR */
#detalhesSetor{
    list-style:none; /* remove os marcadores padrão */
    padding:0; /* remove o espaçamento interno */
    margin:0 0 20px 0; /* deixa espaço abaixo da lista */
}
#detalhesSetor li{
    color:#dcdcdc; /* texto cinza-claro */
    font-size:17px; /* tamanho do texto */
    line-height:1.5; /* espaçamento entre linhas */
    padding:8px 0 8px 25px; /* cria espaço para o marcador */
    border-bottom:1px solid rgba(255,255,255,.08); /* linha divisória */
    position:relative; /* referência para posicionar o marcador */
}
#detalhesSetor li::before{
    content:"•"; /* adiciona um marcador personalizado */
    position:absolute; /* posiciona o marcador */
    left:5px; /* distância da esquerda */
    color:#3b82ff; /* marcador azul */
    font-size:22px; /* tamanho do marcador */
}
/* CARRINHO */
.carrinho{
    display:none; /* esconde o carrinho inicialmente */
    position:fixed; /* fixa a janela na tela */
    top:0; /* encosta no topo */
    left:0; /* encosta na esquerda */
    width:100%; /* ocupa toda a largura */
    height:100%; /* ocupa toda a altura */
    background:rgba(0,0,0,.80); /* fundo escuro transparente */
    z-index:3000; /* fica acima do mapa */
    justify-content:center; /* centraliza horizontalmente */
    align-items:center; /* centraliza verticalmente */
}
/* CONTADOR DO CARRINHO */
#contadorCarrinho{
    position:absolute; /* posiciona sobre o botão do carrinho */
    top:5px; /* distância do topo */
    right:5px; /* distância da direita */
    min-width:20px; /* largura mínima */
    height:20px; /* altura do contador */
    padding:0 5px; /* espaço nas laterais */
    background:#245cff; /* fundo azul */
    color:white; /* número branco */
    border-radius:50%; /* arredonda o contador */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza verticalmente */
    justify-content:center; /* centraliza horizontalmente */
    font-size:12px; /* tamanho do número */
    font-weight:bold; /* deixa em negrito */
}
#contadorCarrinho:empty{
    display:none; /* esconde o contador se estiver vazio */
}
/* CONTEÚDO DO CARRINHO */
.conteudo-carrinho{
    position:relative; /* referência para posicionar o botão fechar */
    width:500px; /* largura da janela */
    min-height:300px; /* altura mínima */
    padding:40px; /* espaçamento interno */
    background:#07122f; /* fundo azul escuro */
    border:1px solid #245cff; /* borda azul */
    border-radius:20px; /* arredonda os cantos */
    color:white; /* texto branco */
    box-shadow:0 0 40px rgba(36,92,255,.4); /* brilho azul */
}
.conteudo-carrinho h2{
    font-size:32px; /* tamanho do título */
    margin-bottom:30px; /* espaço abaixo do título */
}
.fechar-carrinho{
    position:absolute; /* posiciona dentro do carrinho */
    top:15px; /* distância do topo */
    right:15px; /* distância da direita */
    width:40px; /* largura do botão */
    height:40px; /* altura do botão */
    border:none; /* remove a borda */
    border-radius:50%; /* deixa circular */
    background:#d61d1d; /* fundo vermelho */
    color:white; /* texto branco */
    font-size:18px; /* tamanho do X */
    cursor:pointer; /* cursor de clique */
}
/* TOTAL DO CARRINHO */
.total-carrinho{
    display:flex; /* coloca o título e valor lado a lado */
    justify-content:space-between; /* separa os elementos */
    margin-top:30px; /* espaço acima */
    font-size:20px; /* tamanho do texto */
}
/* FINALIZAR COMPRA */
.finalizar-compra{
    width:100%; /* ocupa toda a largura */
    height:50px; /* altura do botão */
    margin-top:25px; /* espaço acima */
    border:none; /* remove a borda */
    border-radius:12px; /* arredonda os cantos */
    background:#245cff; /* fundo azul */
    color:white; /* texto branco */
    font-size:17px; /* tamanho da fonte */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
}
/* BOTÃO COMPRAR */
#comprarSetor{
    margin-top:10px; /* espaço acima */
    padding:14px 25px; /* espaçamento interno */
    border:none; /* remove a borda */
    border-radius:12px; /* arredonda os cantos */
    background:#245cff; /* fundo azul */
    color:white; /* texto branco */
    font-size:17px; /* tamanho da fonte */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
    transition:.3s; /* suaviza os efeitos */
}
#comprarSetor:hover{
    background:#3b82ff; /* muda para azul mais claro */
    transform:scale(1.05); /* aumenta levemente o botão */
}
/* EFEITO DO BOTÃO FECHAR */
.fechar-modal:hover{
    background:#ff3030; /* muda para vermelho mais claro */
    transform:scale(1.1); /* aumenta o botão */
}
/* AVISO DE CARRINHO VAZIO */
.aviso-carrinho-vazio{
    display:flex; /* coloca ícone e texto lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:15px; /* espaço entre os elementos */
    margin-top:20px; /* espaço acima */
    padding:18px; /* espaçamento interno */
    background:#101e3d; /* fundo azul escuro */
    border:1px solid #3b82ff; /* borda azul */
    border-left:4px solid #3b82ff; /* destaque na lateral esquerda */
    border-radius:12px; /* arredonda os cantos */
    box-shadow:0 0 20px rgba(59,130,255,.15); /* brilho azul suave */
    animation:aparecerAviso .3s ease; /* anima a entrada do aviso */
}
.aviso-icone{
    color:#4da3ff; /* cor azul do ícone */
    font-size:28px; /* tamanho do ícone */
}
.aviso-texto{
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* coloca título e descrição um abaixo do outro */
    gap:5px; /* espaço entre os textos */
}
.aviso-texto strong{
    color:white; /* título branco */
    font-size:16px; /* tamanho do título */
}
.aviso-texto span{
    color:#b9c9e8; /* descrição azul-clara */
    font-size:13px; /* tamanho da descrição */
    line-height:1.4; /* espaçamento entre linhas */
}
.aviso-carrinho-vazio.saindo{
    opacity:0; /* torna o aviso transparente */
    transition:opacity .3s ease; /* suaviza o desaparecimento */
}
/* NOTIFICAÇÃO DE INGRESSO ADICIONADO */
.notificacao-carrinho{
    position:fixed; /* mantém a notificação fixa */
    top:95px; /* posiciona abaixo do menu */
    left:50%; /* posiciona no centro horizontal */
    transform:translate(-50%,-30px); /* define a posição inicial da animação */
    z-index:5000; /* mantém acima dos outros elementos */
    min-width:360px; /* largura mínima */
    padding:18px 25px; /* espaçamento interno */
    background:linear-gradient(135deg,#07122f,#0d2c70); /* degradê azul escuro */
    border:1px solid #3b82ff; /* borda azul */
    border-radius:16px; /* arredonda os cantos */
    box-shadow:0 10px 35px rgba(0,0,0,.55),0 0 25px rgba(59,130,255,.35); /* sombra escura e brilho azul */
    display:flex; /* coloca ícone e texto lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:15px; /* espaço entre ícone e texto */
    font-family:Arial,Helvetica,sans-serif; /* define a fonte */
    animation:entrarNotificacao .45s ease forwards; /* executa a animação de entrada */
}



/* ÍCONE DE CONFIRMAÇÃO */


/* ÍCONE DE CONFIRMAÇÃO */
.icone-notificacao{
    width:42px; /* largura do círculo */
    height:42px; /* altura do círculo */
    border-radius:50%; /* deixa o ícone circular */
    background:#245cff; /* fundo azul */
    color:white; /* símbolo branco */
    font-size:25px; /* tamanho do símbolo */
    font-weight:bold; /* deixa o símbolo em negrito */
    display:flex; /* ativa o Flexbox */
    align-items:center; /* centraliza verticalmente */
    justify-content:center; /* centraliza horizontalmente */
    flex-shrink:0; /* impede que o círculo encolha */
    animation:aparecerCheck .5s ease; /* anima a entrada do símbolo */
}
/* TEXTO DA NOTIFICAÇÃO */
.texto-notificacao{
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* coloca os textos um abaixo do outro */
    gap:4px; /* espaço entre os textos */
}
.texto-notificacao strong{
    color:white; /* título branco */
    font-size:17px; /* tamanho do título */
}
.texto-notificacao span{
    color:#b9c9e8; /* descrição azul-clara */
    font-size:14px; /* tamanho da descrição */
}
/* ITENS DO CARRINHO */
#itensCarrinho{
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* organiza os ingressos verticalmente */
    gap:15px; /* espaço entre os ingressos */
    max-height:400px; /* altura máxima da lista */
    overflow-y:auto; /* permite rolagem vertical */
}
.item-carrinho{
    display:flex; /* coloca as informações lado a lado */
    align-items:center; /* centraliza verticalmente */
    justify-content:space-between; /* distribui os elementos */
    gap:20px; /* espaço entre os elementos */
    padding:18px; /* espaçamento interno */
    background:#0f1d3d; /* fundo azul escuro */
    border:1px solid rgba(59,130,255,.35); /* borda azul transparente */
    border-radius:15px; /* arredonda os cantos */
    box-shadow:0 5px 15px rgba(0,0,0,.25); /* sombra do item */
}
/* INFORMAÇÕES DO INGRESSO */
.info-item{
    flex:1; /* ocupa o espaço disponível */
}
.info-item h3{
    color:white; /* nome do setor em branco */
    font-size:20px; /* tamanho do nome */
    margin-bottom:6px; /* espaço abaixo */
}
.gp-item{
    color:#4da3ff; /* nome do GP em azul */
    font-size:14px; /* tamanho do texto */
    margin-bottom:5px; /* espaço abaixo */
}
.tipo-item{
    color:#bdbdbd; /* tipo do ingresso em cinza */
    font-size:14px; /* tamanho do texto */
}
/* QUANTIDADE */
.quantidade-item{
    display:flex; /* coloca os botões e número lado a lado */
    align-items:center; /* centraliza verticalmente */
    gap:10px; /* espaço entre os elementos */
}
.quantidade-item span{
    min-width:25px; /* largura mínima do número */
    text-align:center; /* centraliza o número */
    color:white; /* número branco */
    font-size:18px; /* tamanho do número */
    font-weight:bold; /* deixa em negrito */
}
.mais-item,
.menos-item{
    width:30px; /* largura dos botões */
    height:30px; /* altura dos botões */
    border:1px solid #245cff; /* borda azul */
    border-radius:8px; /* arredonda os cantos */
    background:#07122f; /* fundo azul escuro */
    color:white; /* símbolos brancos */
    font-size:20px; /* tamanho dos símbolos */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
    transition:.2s; /* suaviza a mudança de cor */
}
.mais-item:hover,
.menos-item:hover{
    background:#245cff; /* deixa o fundo azul ao passar o mouse */
}
/* PREÇO DO INGRESSO */
.preco-item{
    display:flex; /* ativa o Flexbox */
    flex-direction:column; /* organiza os elementos verticalmente */
    align-items:flex-end; /* alinha os elementos à direita */
    gap:8px; /* espaço entre os elementos */
}
.preco-item strong{
    color:#4da3ff; /* preço em azul-claro */
    font-size:17px; /* tamanho do preço */
}
/* REMOVER INGRESSO */
.remover-item{
    border:none; /* remove a borda */
    background:transparent; /* fundo transparente */
    color:#ff5c5c; /* texto vermelho */
    font-size:13px; /* tamanho do texto */
    font-weight:bold; /* deixa em negrito */
    cursor:pointer; /* cursor de clique */
    padding:4px 0; /* espaço acima e abaixo */
    transition:.2s; /* suaviza o hover */
}
.remover-item:hover{
    color:#ff3030; /* deixa o vermelho mais forte */
    text-decoration:underline; /* sublinha ao passar o mouse */
}


/* PERFIL DO USUÁRIO */

.perfil-menu{
    position: absolute; /* permite posicionar o perfil dentro do menu */
    right: 25px; /* deixa o perfil a 25px do lado direito */

    display: flex; /* utiliza flexbox para organizar o conteúdo */
    align-items: center; /* centraliza o conteúdo verticalmente */
}


.botao-perfil{
    width: 45px; /* define a largura do botão */
    height: 45px; /* define a altura do botão */
    display: flex; /* utiliza flexbox para centralizar o ícone */
    align-items: center; /* centraliza o ícone verticalmente */
    justify-content: center; /* centraliza o ícone horizontalmente */
    background: #111936; /* define a cor de fundo do botão */
    border: 2px solid #245cff; /* cria uma borda azul ao redor do botão */
    border-radius: 50%; /* transforma o botão em um círculo */
    color: white; /* define a cor do ícone */
    font-size: 20px; /* define o tamanho do ícone */
    cursor: pointer; /* transforma o cursor em uma mão */
    transition: 0.3s; /* deixa o efeito do hover mais suave */
}


.botao-perfil:hover{
    background: #245cff; /* muda o fundo para azul */
    transform: scale(1.08); /* aumenta levemente o botão */
    box-shadow: 0 0 18px rgba(36, 92, 255, 0.6); /* adiciona um brilho azul */
}

/* CAIXA DO PERFIL */

.caixa-perfil{
    position: absolute; /* permite posicionar a caixa em relação ao perfil */
    top: 58px; /* coloca a caixa abaixo do botão de perfil */
    right: 0; /* alinha a caixa com o lado direito do botão */
    width: 280px; /* define a largura da caixa */
    padding: 18px; /* cria espaço interno */
    background: #0b1020; /* define o fundo azul quase preto */
    border: 1px solid #245cff; /* cria uma borda azul */
    border-radius: 15px; /* arredonda os cantos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* adiciona sombra */
    display: none; /* deixa a caixa escondida inicialmente */
    z-index: 2000; /* mantém a caixa acima dos outros elementos */
}


/* INFORMAÇÕES DO USUÁRIO */

.usuario-perfil{
    display: flex; /* coloca o ícone e os dados lado a lado */
    align-items: center; /* centraliza os elementos verticalmente */
    gap: 12px; /* cria espaço entre o ícone e os dados */
    padding-bottom: 15px; /* cria espaço abaixo das informações */
    margin-bottom: 10px; /* separa as informações das opções */
    border-bottom: 1px solid #26304d; /* cria uma linha divisória */
}


/* CÍRCULO DO PILOTO DENTRO DO MENU */

.icone-usuario {
    width: 55px; /* define a largura do círculo */
    height: 55px; /* define a altura do círculo */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    background: #16234a; /* define o fundo azul escuro */
    border-radius: 50%; /* deixa o elemento circular */
    overflow: hidden; /* recorta as partes do piloto que ultrapassam o círculo */
    position: relative; /* estabelece a referência de posicionamento */
    flex-shrink: 0; /* impede que o círculo diminua */
    color: #4da3ff; /* define a cor de possíveis ícones */
    font-size: 20px; /* define o tamanho de possíveis ícones */
}
/* IMAGEM DO PILOTO NA NAVBAR */

.avatar-navbar {
    width: 110%; /* aumenta a largura da imagem */
    height: 110%; /* aumenta a altura da imagem */
    object-fit: contain; /* mantém a proporção original do piloto */
    transform: translateY(5px); /* move o piloto para baixo, encaixando o pescoço na borda */
    display: block; /* remove espaços extras */
    flex-shrink: 0; /* impede que a imagem diminua */
}


/* IMAGEM DO PILOTO DENTRO DO MENU */

.avatar-menu {
    width: 110%; /* aumenta a largura da imagem */
    height: 110%; /* aumenta a altura da imagem */
    object-fit: contain; /* evita deformações na imagem */
    transform: translateY(5px); /* move o piloto para baixo, criando o efeito natural */
    display: block; /* remove espaços extras */
    flex-shrink: 0; /* impede que a imagem diminua */
}


.dados-usuario{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca nome e e-mail um abaixo do outro */
    gap: 3px; /* cria um pequeno espaço entre eles */
}


.dados-usuario strong{
    color: white; /* deixa o nome branco */
    font-size: 16px; /* define o tamanho do nome */
}


.dados-usuario span{
    color: #9da8bd; /* deixa o e-mail em cinza claro */
    font-size: 13px; /* define o tamanho do e-mail */
}

/* LOGIN E CADASTRO NO MENU */

.conta-menu{
    position: absolute; /* posiciona a área no lado direito do menu */
    right: 25px; /* deixa espaço da borda direita */
    display: flex; /* coloca os links lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 12px; /* cria espaço entre os links */
}

.conta-menu a{
    color: white; /* deixa o texto branco */
    text-decoration: none; /* remove o sublinhado */
    font-size: 16px; /* define o tamanho do texto */
    font-weight: bold; /* deixa o texto em negrito */
}

.conta-menu a:hover{
    color: #4da3ff; /* deixa o texto azul ao passar o mouse */
}

.conta-menu .cadastro-menu{
    padding: 9px 15px; /* cria espaço dentro do botão */
    background: transparent; /* deixa o fundo transparente */
    border: 2px solid #245cff; /* adiciona a borda azul igual ao estilo do site */
    border-radius: 8px; /* arredonda os cantos */
    color: white; /* deixa o texto branco */
    transition: 0.3s; /* deixa o efeito mais suave */
}

.conta-menu .cadastro-menu:hover{
    background: #245cff; /* preenche o botão de azul ao passar o mouse */
    color: white; /* mantém o texto branco */
    box-shadow: 0 0 15px rgba(36, 92, 255, 0.5); /* adiciona um brilho azul */
}

/* OPÇÕES DO PERFIL */

.opcoes-perfil{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca as opções uma abaixo da outra */
    gap: 5px; /* cria espaço entre as opções */
}


.opcoes-perfil a{
    width: 100%; /* faz a opção ocupar toda a largura */
    padding: 11px 12px; /* cria espaço interno */
    display: flex; /* coloca o ícone e o texto lado a lado */
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* cria espaço entre o ícone e o texto */
    color: #e6e6e6; /* define a cor do texto */
    text-decoration: none; /* remove o sublinhado */
    border-radius: 8px; /* arredonda os cantos */   
    transition: 0.3s; /* deixa o hover suave */
}


.opcoes-perfil a:hover{
    background: #16234a; /* adiciona um fundo ao passar o mouse */
    color: #4da3ff; /* muda o texto para azul */
}


.opcoes-perfil i{
    width: 20px; /* mantém os ícones alinhados */
    text-align: center; /* centraliza os ícones */
}


.opcoes-perfil .sair-perfil{
    color: #ff5c5c; /* deixa a opção de sair vermelha */
}


.opcoes-perfil .sair-perfil:hover{
    background: rgba(255, 92, 92, 0.1); /* adiciona um fundo vermelho transparente */
    color: #ff7070; /* deixa o vermelho um pouco mais claro */
}

/* FOOTER */
footer{
    width:100%; /* ocupa toda a largura da tela */
    height:50px; /* define a altura do rodapé */
    background:linear-gradient(to right,#000000,#1d1d8f,#2b2bb8); /* cria um fundo em degradê */
    display:flex; /* organiza os elementos em linha */
    justify-content:space-between; /* distribui os elementos com espaço entre eles */
    align-items:center; /* centraliza verticalmente */
    padding:0 30px; /* cria espaço interno nas laterais */
    color:white; /* define a cor branca do texto */
    font-size:18px; /* define o tamanho da fonte */
}

/* ANIMAÇÃO DE ENTRADA */
@keyframes entrarNotificacao{
    from{
        opacity:0; /* começa invisível */
        transform:translate(-50%,-30px) scale(.90); /* começa acima e menor */
    }
    to{
        opacity:1; /* termina visível */
        transform:translate(-50%,0) scale(1); /* volta ao tamanho e posição normais */
    }
}
/* ANIMAÇÃO DO CHECK */
@keyframes aparecerCheck{
    0%{
        transform:scale(0); /* começa sem tamanho */
        opacity:0; /* começa invisível */
    }
    70%{
        transform:scale(1.15); /* aumenta um pouco além do tamanho normal */
        opacity:1; /* fica totalmente visível */
    }
    100%{
        transform:scale(1); /* retorna ao tamanho normal */
    }
}
/* ANIMAÇÃO DE SAÍDA */
.notificacao-carrinho.saindo{
    animation:sairNotificacao .4s ease forwards; /* executa a saída e mantém o estado final */
}
@keyframes sairNotificacao{
    from{
        opacity:1; /* começa visível */
        transform:translate(-50%,0) scale(1); /* começa na posição e tamanho normais */
    }
    to{
        opacity:0; /* termina invisível */
        transform:translate(-50%,-20px) scale(.95); /* sobe e diminui levemente */
    }
}
/* ANIMAÇÃO DO CARRINHO */
.animacao-carrinho{
    animation:balancarCarrinho .5s ease; /* aplica o balanço ao carrinho */
}
@keyframes balancarCarrinho{
    0%{
        transform:rotate(0deg) scale(1); /* começa na posição normal */
    }
    20%{
        transform:rotate(-10deg) scale(1.08); /* gira à esquerda e aumenta */
    }
    40%{
        transform:rotate(10deg) scale(1.08); /* gira à direita mantendo o aumento */
    }
    60%{
        transform:rotate(-7deg) scale(1.05); /* gira à esquerda com menor intensidade */
    }
    80%{
        transform:rotate(7deg) scale(1.03); /* gira à direita quase no tamanho normal */
    }
    100%{
        transform:rotate(0deg) scale(1); /* volta à posição e tamanho originais */
    }
}
/* ANIMAÇÃO DO AVISO */
@keyframes aparecerAviso{
    from{
        opacity:0; /* começa invisível */
        transform:translateY(10px); /* começa um pouco abaixo */
    }
    to{
        opacity:1; /* termina visível */
        transform:translateY(0); /* volta à posição normal */
    }
}
/* RESPONSIVO */
@media (max-width:600px){
    .notificacao-carrinho{
        min-width:auto; /* remove a largura mínima fixa */
        width:90%; /* ocupa 90% da largura da tela */
        padding:15px; /* diminui o espaçamento interno */
    }
    .texto-notificacao strong{
        font-size:15px; /* diminui o título em telas pequenas */
    }
    .texto-notificacao span{
        font-size:13px; /* diminui a descrição em telas pequenas */
    }
}
/* ANIMAÇÃO DO AVISO */
@keyframes entradaAvisoLogin{
    from{
        opacity:0; /* começa invisível */
        transform:scale(.9); /* começa menor */
    }
    to{
        opacity:1; /* termina visível */
        transform:scale(1); /* volta ao tamanho normal */
    }
}