/* 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 */
}


.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 */
}

/* DIVISÓRIA DISCRETA ANTES DO BOTÃO */
.card-gp .data-gp::after {
    content: ""; /* cria o elemento decorativo */
    position: absolute; /* permite posicionar a linha abaixo da data */
    bottom: -19px; /* coloca a linha abaixo da data */
    left: 50%; /* posiciona a partir do centro */
    transform: translateX(-50%); /* centraliza a linha */
    width: 65%; /* define a largura da linha */
    height: 1px; /* mantém a linha fina */
    background: linear-gradient(to right,transparent,rgba(59, 130, 255, 0.45),transparent); /* cria uma linha azul que desaparece nas extremidades */
}

/* REFERÊNCIA PARA POSICIONAR A DIVISÓRIA */
.card-gp .data-gp {
    position: relative; /* permite posicionar a linha em relação à data */
}

.card-gp button{
    width:200px; /* largura do botão */
    height:52px; /* altura do botão */
    margin-top:16px; /* 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 GRANDES PRÊMIOS */
.card-gp .data-gp {
    display: flex; /* coloca o calendário e a data lado a lado */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    gap: 9px; /* separa o ícone do texto */
    width: fit-content; /* adapta a largura ao conteúdo */
    max-width: calc(100% - 24px); /* evita ultrapassar as bordas */
    margin: 14px auto 18px; /* centraliza e mantém os espaçamentos */
    padding: 9px 14px; /* cria espaço interno */
    background: rgba(36, 92, 255, 0.08); /* adiciona um fundo azul muito discreto */
    border: 1px solid rgba(59, 130, 255, 0.22); /* borda azul suave */
    border-radius: 9px; /* arredonda os cantos */
    color: #dce7ff; /* deixa a data mais clara */
    font-size: 14px; /* mantém o tamanho da fonte */
}
.card-gp .data-gp i{
    color:#3b82ff; /* deixa o calendário azul */
    font-size:16px; /* tamanho do ícone */
}

/* SEÇÃO COMO COMPRAR */
.como-comprar {
    padding: 65px 8% 75px; /* espaçamento interno */
    background: #070b18; /* fundo azul quase preto */
    text-align: center; /* centraliza os textos */
}

/* TÍTULO DA SEÇÃO */
.como-comprar-titulo span {
    color: #3b82ff; /* destaque azul */
    font-size: 14px; /* tamanho do subtítulo */
    font-weight: bold; /* deixa em negrito */
    letter-spacing: 3px; /* espaça as letras */
}
.como-comprar-titulo h2 {
    color: white; /* título branco */
    font-size: 38px; /* tamanho do título */
    font-style: italic; /* mantém a identidade visual */
    margin: 12px 0; /* espaço acima e abaixo */
}
.como-comprar-titulo p {
    color: #aab8d0; /* texto cinza azulado */
    font-size: 17px; /* tamanho da descrição */
    margin-bottom: 40px; /* separa dos cards */
}

/* CONTAINER DOS QUATRO PASSOS */
.passos-compra {
    display: grid; /* organiza os cards em grade */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* quatro colunas */
    gap: 20px; /* espaço entre os cards */
    max-width: 1450px; /* limita a largura */
    margin: 0 auto; /* centraliza o conjunto */
}

/* CARD DE CADA PASSO */
.passo-compra {
    position: relative; /* referência para o número */
    padding: 30px 20px; /* espaço interno */
    background: #101a30; /* fundo azul escuro */
    border: 1px solid #223a67; /* borda azul discreta */
    border-radius: 16px; /* arredonda os cantos */
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; /* suaviza o hover */
}
.passo-compra:hover {
    transform: translateY(-5px); /* levanta o card */
    border-color: #3b82ff; /* destaca a borda */
    box-shadow: 0 0 25px rgba(59,130,255,.15); /* brilho azul discreto */
}

/* NÚMERO DO PASSO */
.numero-passo {
    display: block; /* coloca o número em linha própria */
    color: #3b82ff; /* azul elétrico */
    font-size: 15px; /* tamanho do número */
    font-weight: bold; /* destaca o número */
    margin-bottom: 18px; /* espaço antes do ícone */
}

/* ÍCONE DO PASSO */
.icone-passo {
    width: 65px; /* largura do círculo */
    height: 65px; /* altura do círculo */
    display: flex; /* ativa o Flexbox */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    margin: 0 auto 20px; /* centraliza e separa do título */
    background: #142b55; /* fundo azul */
    border: 1px solid #245cff; /* borda azul */
    border-radius: 50%; /* deixa circular */
    color: #60a5fa; /* cor do ícone */
    font-size: 27px; /* tamanho do ícone */
}

/* TÍTULO E DESCRIÇÃO DO PASSO */
.passo-compra h3 {
    color: white; /* título branco */
    font-size: 20px; /* tamanho do título */
    margin-bottom: 12px; /* espaço abaixo */
}
.passo-compra p {
    color: #b9c9e8; /* texto cinza azulado */
    font-size: 15px; /* tamanho da descrição */
    line-height: 1.6; /* melhora a leitura */
}

/* AVISO DE LOGIN OBRIGATÓRIO */
.como-comprar .aviso-compra {
    margin-top: 35px; /* separa dos cards */
    color: #aab8d0; /* cor discreta */
    font-size: 14px; /* tamanho do texto */
}
.aviso-compra i {
    color: #3b82ff; /* cadeado azul */
    margin-right: 7px; /* espaço entre ícone e texto */
}

/* 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 */
.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 */
}

/* 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 */
    }
}


/* RESPONSIVIDADE - INGRESSOS */

/* ESCONDER SELEÇÃO MOBILE NO COMPUTADOR */

.selecao-setor-mobile {
    display: none; /* esconde a seleção no computador */
}

/* TABLETS E CELULARES */

@media (max-width: 820px) { /* aplica os estilos em telas de até 820px */

    /* BANNER PRINCIPAL */
    .banner-ingressos {
        min-height: 380px; /* define a altura mínima do banner */
        padding: 50px 6%; /* cria espaço interno vertical e lateral */
        background-position: center; /* centraliza a imagem de fundo */
    }
    .banner-conteudo {
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 100%; /* impede que ultrapasse o espaço disponível */
    }
    .banner-conteudo span {
        font-size: 15px; /* diminui o texto FÓRMULA 1 */
        letter-spacing: 3px; /* define o espaço entre as letras */
    }
    .banner-conteudo h1 {
        font-size: 58px; /* diminui o título INGRESSOS */
        line-height: 1.1; /* ajusta a altura da linha do título */
    }
    .banner-conteudo p {
        font-size: 17px; /* diminui a descrição do banner */
        line-height: 1.6; /* aumenta o espaço entre linhas do texto */
    }


    /* CARDS DOS GRANDES PRÊMIOS */
    .gps {
        padding: 45px 5%; /* ajusta o espaço interno da seção */
    }
    .gps h2 {
        font-size: 34px; /* diminui o título da seção */
    }
    .gps > p {
        font-size: 16px; /* adapta a descrição da seção */
        line-height: 1.6; /* melhora o espaço entre linhas */
    }
    .cards-gps {
        gap: 22px; /* define a distância entre os cards */
    }
    .card-gp {
        width: calc(50% - 11px); /* organiza dois cards por linha */
        min-width: 0; /* permite que os cards diminuam */
        min-height: auto; /* adapta a altura ao conteúdo */
    }
    .card-gp h3 {
        font-size: 26px; /* diminui o nome do Grande Prêmio */
    }
    .card-gp span {
        font-size: 16px; /* adapta o nome do circuito */
    }
    .card-gp p {
        font-size: 15px; /* diminui os textos informativos */
    }

    /* MODAL DO MAPA */
    .modal-mapa {
        padding: 10px; /* cria espaço entre o modal e a tela */
        align-items: center; /* centraliza a janela verticalmente */
    }

    .conteudo-modal {
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 100%; /* impede ultrapassar a tela */
        max-height: 90vh; /* limita a altura a 90% da janela */
        max-height: 90dvh; /* considera a altura visível do dispositivo */
        padding: 25px 15px; /* ajusta o espaço interno da janela */
        overflow-y: auto; /* permite rolagem vertical quando necessário */
        overflow-x: hidden; /* impede rolagem horizontal */
        border-radius: 20px; /* arredonda os cantos do modal */
    }

    .conteudo-modal h2 {
        font-size: 28px; /* diminui o título do GP */
        line-height: 1.2; /* adapta a altura da linha */
        padding-right: 45px; /* reserva espaço para o botão fechar */
        margin-bottom: 20px; /* cria espaço abaixo do título */
    }
    .fechar-modal {
        top: 12px; /* posiciona o botão a 12px do topo */
        right: 12px; /* posiciona o botão a 12px da direita */
        z-index: 30; /* mantém o botão acima dos elementos inferiores */
    }


    /* MAPA E INFORMAÇÕES */

    .area-mapa {
        display: flex; /* ativa o Flexbox */
        flex-direction: column; /* coloca mapa e informações em coluna */
        align-items: stretch; /* estica os elementos na largura disponível */
        justify-content: flex-start; /* começa os elementos pelo topo */
        gap: 20px; /* define a distância entre os elementos */
    }

    .mapa-container {
        position: relative; /* serve de referência para os setores */
        display: block; /* faz o mapa ocupar sua própria linha */
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 100%; /* impede que ultrapasse a janela */
        min-width: 0; /* permite reduzir quando necessário */
        flex: none; /* impede o Flexbox de redimensionar o mapa */
    }
    .mapa-container img {
        width: 100%; /* adapta a imagem à largura do container */
        height: auto; /* mantém a proporção original da imagem */
        display: block; /* remove o espaço extra abaixo da imagem */
    }

    /* ESCONDER BOTÕES SOBRE O MAPA */
    .mapa-container .setor {
        opacity: 0; /* mantém invisíveis os botões sobre a imagem */
        pointer-events: none; /* impede clicar nos marcadores pelo toque */
    }


    /* SELEÇÃO DOS SETORES */
    .selecao-setor-mobile {
        display: flex; /* mostra a seleção no celular */
        flex-direction: column; /* coloca seus elementos em coluna */
        width: 100%; /* ocupa a largura disponível */
        min-width: 0; /* permite diminuir sem ultrapassar o modal */
        flex: none; /* impede redimensionamento pelo Flexbox */
        padding: 18px; /* cria espaço interno */
        gap: 15px; /* separa o título, a barra e a lista */
        background: #0f1d3d; /* define o fundo azul-escuro */
        border: 1px solid #245cff; /* adiciona a borda azul */
        border-radius: 15px; /* arredonda os cantos */
    }
    .selecao-setor-mobile h3 {
        color: white; /* deixa o título branco */
        font-size: 18px; /* define o tamanho do título */
        font-weight: bold; /* deixa o texto em negrito */
        text-align: center; /* centraliza o título */
        letter-spacing: 1px; /* adiciona espaço entre as letras */
    }


    /* BARRA DE SELEÇÃO */

    .abrir-setores-mobile {
        display: flex; /* coloca o texto e a seta lado a lado */
        align-items: center; /* centraliza verticalmente */
        justify-content: space-between; /* separa o texto e a seta */
        width: 100%; /* ocupa toda a largura */
        padding: 15px; /* cria espaço interno para tocar */
        background: #07122f; /* define o fundo azul-escuro */
        color: white; /* deixa o texto branco */
        border: 1px solid #346dff; /* adiciona a borda azul */
        border-radius: 10px; /* arredonda os cantos */
        font-size: 15px; /* define o tamanho do texto */
        cursor: pointer; /* mostra o cursor de clique */
    }
    .abrir-setores-mobile i {
        transition: transform 0.2s; /* suaviza o movimento da seta */
    }
    .abrir-setores-mobile[aria-expanded="true"] i {
        transform: rotate(180deg); /* gira a seta ao abrir a lista */
    }


    /* LISTA DE SETORES */

    .lista-setores-mobile {
        display: none; /* mantém a lista escondida inicialmente */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* cria duas colunas iguais */
        gap: 10px; /* define o espaço entre os botões */
        width: 100%; /* ocupa toda a largura da seleção */
    }

    .lista-setores-mobile.aberta {
        display: grid; /* mostra a lista em formato de grade */
    }


    /* BOTÕES DOS SETORES */

    .botao-setor-mobile {
        width: 100%; /* ocupa toda a largura da coluna */
        min-width: 0; /* evita ultrapassar a coluna */
        min-height: 46px; /* define uma altura mínima confortável */
        padding: 10px 8px; /* cria espaço interno nos botões */
        background: #07122f; /* define o fundo azul-escuro */
        color: white; /* deixa o texto branco */
        border: 1px solid #346dff; /* adiciona a borda azul */
        border-radius: 10px; /* arredonda os cantos */
        font-size: 13px; /* define o tamanho dos nomes */
        font-weight: bold; /* deixa os nomes em negrito */
        cursor: pointer; /* mostra o cursor de clique */
        overflow-wrap: anywhere; /* permite quebrar nomes longos */
        transition: 0.2s; /* suaviza mudanças visuais */
    }

    .botao-setor-mobile.ativo {
        background: #245cff; /* destaca o setor selecionado em azul */
        border-color: white; /* deixa a borda branca */
        box-shadow: 0 0 15px rgba(36, 92, 255, 0.5); /* adiciona brilho azul */
    }


    /* INFORMAÇÕES DO SETOR */
    .info-setor {
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 100%; /* impede ultrapassar o modal */
        min-width: 0; /* permite reduzir em telas pequenas */
        padding: 20px; /* define o espaço interno do painel */
    }
    .info-setor h3 {
        font-size: 24px; /* ajusta o nome do setor */
        overflow-wrap: anywhere; /* evita que nomes longos ultrapassem */
    }
    #precoSetor {
        font-size: 21px; /* adapta o tamanho do preço */
        line-height: 1.4; /* melhora o espaço entre linhas */
    }
    #detalhesSetor li {
        font-size: 14px; /* diminui os textos dos benefícios */
        line-height: 1.5; /* melhora a leitura da lista */
    }
    #comprarSetor {
        width: 100%; /* faz o botão ocupar toda a largura */
    }


    /* CARRINHO RESPONSIVO */
    .carrinho {
        padding: 12px; /* cria espaço nas bordas da tela */
    }

    .conteudo-carrinho {
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 500px; /* limita a largura máxima do carrinho */
        max-height: 90vh; /* limita a altura a 90% da janela */
        max-height: 90dvh; /* adapta à altura visível do dispositivo */
        min-height: 0; /* permite que a janela diminua de altura */
        padding: 30px 20px; /* cria espaço interno */
        overflow-y: auto; /* permite rolar o conteúdo do carrinho */
        border-radius: 18px; /* arredonda os cantos */
    }
    .conteudo-carrinho h2 {
        font-size: 26px; /* diminui o título MEU CARRINHO */
        padding-right: 45px; /* reserva espaço para o botão fechar */
        margin-bottom: 25px; /* cria espaço abaixo do título */
    }
    #itensCarrinho {
        max-height: 45vh; /* limita a lista a 45% da altura da janela */
        overflow-y: auto; /* permite rolar quando houver muitos ingressos */
    }


    /* ITENS DO CARRINHO */
    .item-carrinho {
        display: flex; /* organiza as informações usando Flexbox */
        flex-wrap: wrap; /* permite quebrar os elementos em mais linhas */
        gap: 15px; /* define o espaço entre elementos */
        padding: 16px; /* cria espaço dentro de cada ingresso */
    }
    .info-item {
        flex: 1 1 100%; /* coloca as informações na primeira linha */
        min-width: 0; /* impede o texto de ultrapassar o card */
    }
    .info-item h3 {
        overflow-wrap: anywhere; /* permite quebrar nomes muito longos */
    }
    .quantidade-item {
        gap: 10px; /* separa os botões de quantidade */
    }
    .preco-item {
        margin-left: auto; /* posiciona o preço no lado direito */
    }


    /* TOTAL E FINALIZAÇÃO */

    .total-carrinho {
        gap: 12px; /* separa o texto Total do valor */
        font-size: 18px; /* adapta o tamanho do texto */
    }

    .finalizar-compra {
        width: 100%; /* ocupa toda a largura do carrinho */
        min-height: 50px; /* define uma altura mínima confortável */
        height: auto; /* permite que a altura acompanhe o conteúdo */
        padding: 12px; /* adiciona espaço interno */
        font-size: 15px; /* adapta o tamanho do texto */
    }

/* COMO COMPRAR NO TABLET */
.como-comprar { padding: 50px 5%; /* reduz as margens da seção */ }
.passos-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); /* dois cards por linha */ }
.como-comprar-titulo h2 { font-size: 30px; /* reduz o título */ }
}

/* CELULARES */


@media (max-width: 480px) { /* aplica os estilos em telas de até 480px */

    /* BANNER PRINCIPAL */
    .banner-ingressos {
        min-height: 350px; /* define a altura mínima do banner */
        padding: 40px 20px; /* adiciona 40px em cima e embaixo e 20px nas laterais */
    }
    .banner-conteudo span {
        font-size: 12px; /* diminui o tamanho do subtítulo */
        letter-spacing: 2px; /* define o espaço entre as letras */
    }
    .banner-conteudo h1 {
        font-size: clamp(38px, 11vw, 48px); /* adapta o título entre 38px e 48px conforme a tela */
        line-height: 1.15; /* ajusta o espaço entre as linhas do título */
        margin: 12px 0; /* adiciona 12px acima e abaixo do título */
    }
    .banner-conteudo p {
        font-size: 14px; /* diminui o tamanho da descrição */
        line-height: 1.7; /* aumenta o espaço entre as linhas */
    }


    /* CARDS DOS GRANDES PRÊMIOS */
    .gps {
        padding: 35px 16px; /* ajusta o espaço interno da seção */
    }
    .gps h2 {
        font-size: 28px; /* diminui o título da seção */
        line-height: 1.2; /* ajusta a altura das linhas */
    }
    .gps > p {
        font-size: 14px; /* diminui o texto de apresentação */
        margin-bottom: 25px; /* cria espaço abaixo da descrição */
    }
    .cards-gps {
        flex-direction: column; /* organiza os cards um abaixo do outro */
        align-items: center; /* centraliza os cards horizontalmente */
        gap: 25px; /* adiciona espaço entre os cards */
    }
    .card-gp {
        width: 100%; /* ocupa toda a largura disponível */
        max-width: 380px; /* limita a largura máxima do card */
        min-height: auto; /* adapta a altura ao conteúdo */
    }
    .card-gp img {
        height: 185px; /* define a altura da imagem do GP */
    }
    .card-gp h3 {
        font-size: 28px; /* adapta o nome do Grande Prêmio */
        margin-top: 20px; /* cria espaço acima do nome */
    }
    .card-gp span {
        font-size: 16px; /* adapta o tamanho do nome do circuito */
    }
    .card-gp p {
        font-size: 15px; /* adapta os textos informativos */
        margin: 12px 0; /* adiciona espaço acima e abaixo dos textos */
    }
    .card-gp .data-gp {
        font-size: 13px; /* diminui o tamanho da data */
        margin-bottom: 15px; /* cria espaço abaixo da data */
    }
    .card-gp button {
        width: min(200px, 85%); /* usa até 200px, sem ultrapassar 85% do espaço */
        height: 48px; /* define uma altura confortável para tocar */
        font-size: 16px; /* adapta o tamanho do texto do botão */
        margin-bottom: 22px; /* adiciona espaço abaixo do botão */
    }
    
    /* MODAL DO MAPA */
    .conteudo-modal {
        padding: 25px 12px 18px; /* define espaços superior, lateral e inferior */
    }
    .conteudo-modal h2 {
        font-size: 25px; /* diminui o título do Grande Prêmio */
    }


    /* SELEÇÃO DOS SETORES */
    .selecao-setor-mobile {
        padding: 14px; /* diminui o espaço interno da seleção */
        gap: 12px; /* aproxima os elementos da seleção */
    }
    .selecao-setor-mobile h3 {
        font-size: 16px; /* adapta o tamanho do título ESCOLHA SEU SETOR */
    }
    .lista-setores-mobile {
        gap: 8px; /* reduz a distância entre os botões dos setores */
    }
    .botao-setor-mobile {
        min-height: 44px; /* mantém uma altura mínima confortável */
        padding: 10px 6px; /* reduz o espaço interno nas laterais */
        font-size: 12px; /* diminui os nomes dos setores */
    }


    /* CARRINHO */
    .conteudo-carrinho {
        padding: 25px 15px; /* adapta o espaço interno da janela */
    }
    .conteudo-carrinho h2 {
        font-size: 23px; /* diminui o título MEU CARRINHO */
    }
    .fechar-carrinho {
        top: 12px; /* posiciona o botão a 12px do topo */
        right: 12px; /* posiciona o botão a 12px da direita */
        width: 38px; /* define a largura do botão */
        height: 38px; /* define a altura do botão */
    }

    .item-carrinho {
        padding: 14px; /* adapta o espaço interno do ingresso */
        gap: 12px; /* reduz a distância entre os elementos */
    }
    .mais-item,.menos-item {
        width: 36px; /* define a largura dos botões de quantidade */
        height: 36px; /* define a altura dos botões de quantidade */
        font-size: 20px; /* adapta o tamanho dos símbolos + e − */
    }
    .preco-item strong {
        font-size: 15px; /* diminui o tamanho do preço destacado */
    }
    .total-carrinho {
        margin-top: 22px; /* cria espaço acima do total */
        font-size: 16px; /* adapta o tamanho do texto do total */
    }
    .finalizar-compra {
        margin-top: 20px; /* cria espaço acima do botão */
        font-size: 14px; /* diminui o texto FINALIZAR COMPRA */
    }
/* COMO COMPRAR NO CELULAR */
.como-comprar { padding: 45px 20px; /* espaço interno menor */ }
.passos-compra { grid-template-columns: 1fr; /* um card por linha */ }
.passo-compra { padding: 25px 20px; /* adapta o espaçamento */ }
.como-comprar-titulo h2 { font-size: 26px; /* adapta o título */ }
.como-comprar-titulo p { font-size: 15px; /* diminui a descrição */ }
}