/* Reset básico para remover margens padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* =====================================================
   FUNDO PRINCIPAL DO SITE
===================================================== */

body {

    /* Cor de segurança */
    background-color: #050207;

    /* Degradê futurista */
    background-image:

        /* Luz rosa no lado esquerdo */
        radial-gradient(circle at 10% 20%,
            rgba(255, 43, 166, 0.25),
            transparent 35%),

        /* Luz roxa no lado direito */
        radial-gradient(circle at 90% 30%,
            rgba(120, 40, 200, 0.25),
            transparent 35%),

        /* Luz rosa na parte inferior */
        radial-gradient(circle at 70% 80%,
            rgba(255, 43, 166, 0.15),
            transparent 35%),

        /* Fundo principal */
        linear-gradient(135deg,
            #030104 0%,
            #0b0410 30%,
            #16071d 55%,
            #0b0410 75%,
            #030104 100%);

    /* Altura mínima */
    min-height: 100vh;

    /* Não repete o fundo */
    background-repeat: no-repeat;

    /* Faz preencher o espaço */
    background-size: cover;
}



.menu-navegacao {
    display: flex;
    justify-content: flex-end;
    /* Mantém logo na didreita no final */
    align-items: center;
    /* Mudado para center para alinhar perfeitamente com os links */
    background-color: #120917;
    /* Sólido */
    padding: 5px 20px;
    /* Reduzido o topo/base para 5px e laterais para 20px */
}


/* Mantém os links em linha */
.menu-navegacao ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-navegacao li a {
    color: white;
    text-decoration: none;
    padding: 13px 10px;
    display: block;
}

.menu-navegacao li a:hover {
    background-color: #d7aadd;
    /* Efeito visual ao passar o mouse nos links */
    transition: background-color 0.3s ease;
    border-radius: 10px;
}

/* =====================================================
   BANNER PRINCIPAL
===================================================== */

.banner-principal {

    /* Ocupa toda a largura */
    width: 100%;

    /* Altura mínima */
    min-height: 620px;

    /* Fundo escuro com leve brilho central */
    background:
        radial-gradient(circle at center,
            #2a092e 0%,
            #120917 45%,
            #050306 100%);

    /* Centraliza o conteúdo */
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* 
       30px = espaço no topo
       20px = espaço nas laterais
       80px = espaço embaixo
    */
    padding: 30px 20px 80px;

    /* Centraliza os textos */
    text-align: center;

    position: relative;

    overflow: hidden;
}

/* =====================================================
   CONTEÚDO DO BANNER
===================================================== */

.conteudo-banner {

    /* Largura máxima */
    max-width: 950px;

    /* Ocupa a largura disponível */
    width: 100%;

    /* Mantém o conteúdo acima do fundo */
    position: relative;

    z-index: 2;
}


/* =====================================================
   LOGO DO LOBO
===================================================== */

.logo-banner {

    /* Tamanho da logo */
    width: 170px;

    /* Mantém a proporção */
    height: auto;

    /* Espaço inferior */
    margin-bottom: 10px;

    /* Brilho leve */
    filter:
        drop-shadow(0 0 15px rgba(255, 43, 166, 0.35)) drop-shadow(0 0 30px rgba(255, 43, 166, 0.15));
}


/* =====================================================
   NOME MORVERSE
===================================================== */

.nome-morverse {

    /* Cor */
    color: white;

    /* Tamanho */
    font-size: 82px;

    /* Peso */
    font-weight: 900;

    /* Espaçamento entre letras */
    letter-spacing: 5px;

    /* Remove margem padrão */
    margin: 0;

    /* Profundidade */
    text-shadow:
        0 3px 0 #777,
        0 7px 12px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(255, 43, 166, 0.25);
}


/* =====================================================
   SUBTÍTULO
===================================================== */

.subtitulo-banner {

    /* Rosa */
    color: #ff2ba6;

    /* Tamanho */
    font-size: 22px;

    /* Espaçamento */
    letter-spacing: 7px;

    /* Peso */
    font-weight: 600;

    /* Margem */
    margin-top: 8px;
}


/* =====================================================
   LINHA DECORATIVA
===================================================== */

.linha-banner {

    /* Largura */
    width: 100px;

    /* Altura */
    height: 3px;

    /* Cor */
    background-color: #ff2ba6;

    /* Centraliza */
    margin: 25px auto;

    /* Arredonda */
    border-radius: 10px;

    /* Brilho */
    box-shadow:
        0 0 10px #ff2ba6,
        0 0 20px rgba(255, 43, 166, 0.5);
}


/* =====================================================
   PACOTE DE JOGOS
===================================================== */

.descricao-banner {

    /* Cor */
    color: white;

    /* Tamanho */
    font-size: 34px;

    /* Peso */
    font-weight: 700;

    /* Margem */
    margin-bottom: 12px;
}


/* =====================================================
   TEXTO EXPLICATIVO
===================================================== */

.texto-banner {

    /* Cor mais suave */
    color: #cfcfcf;

    /* Tamanho */
    font-size: 17px;

    /* Melhor leitura */
    line-height: 1.6;

    /* Limita largura */
    max-width: 650px;

    /* Centraliza */
    margin: 0 auto 30px;
}


/* =====================================================
   BOTÃO
===================================================== */

.botao-banner {

    /* Permite padding e transform */
    display: inline-block;

    /* Fundo rosa */
    background-color: #d7aadd;

    /* Texto escuro */
    color: #120917;

    /* Remove sublinhado */
    text-decoration: none;

    /* Peso */
    font-weight: bold;

    /* Tamanho */
    font-size: 16px;

    /* Espaçamento interno */
    padding: 16px 34px;

    /* Arredondamento */
    border-radius: 10px;

    /* Animação suave */
    transition: 0.3s ease;

    /* Sombra */
    box-shadow:
        0 8px 20px rgba(255, 43, 166, 0.25);
}


/* Efeito ao passar o mouse */
.botao-banner:hover {

    /* Sobe levemente */
    transform: translateY(-3px);

    /* Aumenta brilho */
    box-shadow:
        0 12px 28px rgba(255, 43, 166, 0.40);
}


/* =====================================================
   RESPONSIVIDADE - TABLET
===================================================== */

@media (max-width: 900px) {

    .banner-principal {
        min-height: 560px;
    }

    .logo-banner {
        width: 160px;
    }

    .nome-morverse {
        font-size: 62px;
    }

    .subtitulo-banner {
        font-size: 18px;
        letter-spacing: 5px;
    }

    .descricao-banner {
        font-size: 28px;
    }
}


/* =====================================================
   RESPONSIVIDADE - CELULAR
===================================================== */

@media (max-width: 600px) {

    .banner-principal {

        /* Menor altura */
        min-height: 520px;

        /* Espaçamento */
        padding: 60px 15px;
    }

    .logo-banner {

        /* Logo menor */
        width: 125px;
    }

    .nome-morverse {

        /* Nome menor */
        font-size: 44px;

        /* Menos espaço entre letras */
        letter-spacing: 2px;
    }

    .subtitulo-banner {

        /* Fonte menor */
        font-size: 13px;

        /* Menos espaçamento */
        letter-spacing: 3px;
    }

    .linha-banner {

        /* Linha menor */
        width: 70px;

        /* Menos margem */
        margin: 20px auto;
    }

    .descricao-banner {

        /* Título adaptado */
        font-size: 24px;
    }

    .texto-banner {

        /* Texto menor */
        font-size: 15px;
    }

    .botao-banner {

        /* Botão responsivo */
        width: 100%;

        /* Limita o tamanho */
        max-width: 300px;

        /* Espaçamento */
        padding: 15px 20px;
    }
}

/* =====================================================
   SEÇÃO: COMO FUNCIONA
===================================================== */

.como-funciona {

    /* Espaçamento interno da seção */
    padding: 80px 20px;

    /* Fundo escuro */
    background-color: transparent;

    /* Centraliza todo o conteúdo */
    text-align: center;
}


/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

.container-como-funciona {

    /* Largura máxima da seção */
    max-width: 1000px;

    /* Centraliza o container */
    margin: 0 auto;
}


/* =====================================================
   CABEÇALHO DA SEÇÃO
===================================================== */

.titulo-como-funciona {

    /* Espaço abaixo do título */
    margin-bottom: 35px;
}


/* Texto pequeno acima do título */
.titulo-como-funciona span {

    /* Cor de destaque */
    color: #d7aadd;

    /* Tamanho da fonte */
    font-size: 14px;

    /* Deixa o texto mais forte */
    font-weight: bold;

    /* Espaçamento entre as letras */
    letter-spacing: 2px;

    /* Transforma em letras maiúsculas */
    text-transform: uppercase;
}


/* Título principal */
.titulo-como-funciona h2 {

    /* Cor */
    color: white;

    /* Tamanho */
    font-size: 40px;

    /* Espaço acima e abaixo */
    margin: 10px 0 15px;

    /* Peso */
    font-weight: 700;
}


/* Texto explicativo */
.titulo-como-funciona p {

    /* Cor mais suave */
    color: #cfcfcf;

    /* Tamanho */
    font-size: 17px;

    /* Altura entre as linhas */
    line-height: 1.6;

    /* Limita a largura */
    max-width: 650px;

    /* Centraliza */
    margin: 0 auto;
}


/* =====================================================
   ÁREA DO VÍDEO
===================================================== */

.video-container {

    /* Limita a largura */
    max-width: 800px;

    /* Centraliza */
    margin: 0 auto;

    /* Fundo */
    background-color: #000;

    /* Arredonda as bordas */
    border-radius: 16px;

    /* Esconde qualquer parte que ultrapasse a borda */
    overflow: hidden;

    /* Borda fina */
    border: 1px solid rgba(215, 170, 221, 0.25);

    /* Sombra suave */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.40),
        0 0 25px rgba(215, 170, 221, 0.10);
}


/* Vídeo */
.video-container video {

    /* Ocupa toda a largura disponível */
    width: 100%;

    /* Remove pequeno espaço inferior padrão */
    display: block;

    /* Mantém o vídeo proporcional */
    height: auto;
}


/* =====================================================
   BENEFÍCIOS ABAIXO DO VÍDEO
===================================================== */

.beneficios-video {

    /* Espaço acima */
    margin-top: 30px;

    /* Organiza os benefícios */
    display: flex;

    /* Centraliza */
    justify-content: center;

    /* Permite quebrar linha em telas menores */
    flex-wrap: wrap;

    /* Espaço entre os itens */
    gap: 15px 30px;
}


/* Cada benefício */
.beneficios-video p {

    /* Cor */
    color: white;

    /* Tamanho */
    font-size: 16px;

    /* Alinhamento */
    display: flex;

    align-items: center;

    /* Espaço entre o check e o texto */
    gap: 8px;

    /* Fundo leve */
    background-color: rgba(255, 255, 255, 0.04);

    /* Espaçamento interno */
    padding: 10px 15px;

    /* Arredondamento */
    border-radius: 10px;
}


/* Check dos benefícios */
.beneficios-video p span {

    /* Cor de destaque */
    color: #d7aadd;

    /* Peso */
    font-weight: bold;

    /* Tamanho */
    font-size: 18px;
}


/* =====================================================
   CHAMADA PARA AÇÃO
===================================================== */

.cta-video {

    /* Espaço acima */
    margin-top: 35px;
}


/* Texto acima do botão */
.cta-video p {

    /* Cor */
    color: #d8d8d8;

    /* Tamanho */
    font-size: 16px;

    /* Espaço abaixo */
    margin-bottom: 15px;
}


/* Botão */
.botao-video {

    /* Permite aplicar largura, padding e transform */
    display: inline-block;

    /* Fundo */
    background-color: #d7aadd;

    /* Cor do texto */
    color: #120917;

    /* Tira o sublinhado */
    text-decoration: none;

    /* Deixa o texto em negrito */
    font-weight: bold;

    /* Tamanho */
    font-size: 16px;

    /* Espaçamento interno */
    padding: 15px 32px;

    /* Arredonda */
    border-radius: 10px;

    /* Transição suave */
    transition: 0.3s ease;

    /* Sombra */
    box-shadow: 0 8px 20px rgba(215, 170, 221, 0.20);
}


/* Efeito ao passar o mouse */
.botao-video:hover {

    /* Aumenta levemente */
    transform: translateY(-3px);

    /* Clareia um pouco */
    background-color: #e4b9e9;

    /* Aumenta a sombra */
    box-shadow: 0 12px 25px rgba(215, 170, 221, 0.30);
}


/* =====================================================
   RESPONSIVIDADE - TABLET
===================================================== */

@media (max-width: 900px) {

    .como-funciona {

        /* Reduz o espaçamento */
        padding: 70px 20px;
    }


    .titulo-como-funciona h2 {

        /* Título um pouco menor */
        font-size: 36px;
    }


    .video-container {

        /* Deixa o vídeo aproveitar melhor a tela */
        max-width: 720px;
    }

}


/* =====================================================
   RESPONSIVIDADE - CELULAR
===================================================== */

@media (max-width: 600px) {

    .como-funciona {

        /* Espaçamento menor no celular */
        padding: 55px 15px;
    }


    .titulo-como-funciona {

        /* Menor distância até o vídeo */
        margin-bottom: 25px;
    }


    .titulo-como-funciona span {

        /* Texto menor */
        font-size: 12px;

        /* Menos espaçamento entre letras */
        letter-spacing: 1.5px;
    }


    .titulo-como-funciona h2 {

        /* Título menor */
        font-size: 30px;
    }


    .titulo-como-funciona p {

        /* Texto menor */
        font-size: 15px;
    }


    .video-container {

        /* Borda um pouco menor */
        border-radius: 12px;
    }


    .beneficios-video {

        /* Coloca os benefícios um embaixo do outro */
        flex-direction: column;

        /* Centraliza */
        align-items: center;

        /* Menor espaço */
        gap: 10px;
    }


    .beneficios-video p {

        /* Ocupa toda a largura disponível */
        width: 100%;

        /* Limita o tamanho */
        max-width: 320px;

        /* Centraliza o conteúdo */
        justify-content: center;

        /* Fonte menor */
        font-size: 15px;
    }


    .botao-video {

        /* Botão ocupa quase toda a largura */
        width: 100%;

        /* Limita a largura */
        max-width: 320px;

        /* Tamanho confortável */
        font-size: 15px;

        /* Espaçamento interno */
        padding: 15px 20px;
    }

}


/* =========================================================
    SEÇÃO DE PACOTES DE JOGOS
    Essa parte controla toda a aparência dos pacotes.
 ========================================================= */


/* ---------------------------------------------------------
   ÁREA PRINCIPAL DA SEÇÃO
--------------------------------------------------------- */

.pacotes-jogos {

    /* Cor de fundo da seção */
    background-color: #120917;

    /* Espaçamento interno:
       80px em cima e embaixo
       20px nas laterais */
    padding: 80px 20px;

    /* Cor padrão dos textos */
    color: white;
}


/* ---------------------------------------------------------
   CONTAINER DOS PACOTES
--------------------------------------------------------- */

.container-pacotes {

    /* Define a largura máxima do conteúdo */
    max-width: 1100px;

    /* Centraliza o conteúdo na página */
    margin: 0 auto;
}


/* ---------------------------------------------------------
   TÍTULO DA SEÇÃO
--------------------------------------------------------- */

.titulo-pacotes {

    /* Centraliza todo o conteúdo */
    text-align: center;

    /* Cria espaço entre o título e os cards */
    margin-bottom: 50px;
}


/* Texto pequeno:
   "ESCOLHA SEU PACOTE" */

.titulo-pacotes span {

    /* Cor lilás, igual à usada no seu menu */
    color: #d7aadd;

    /* Tamanho da fonte */
    font-size: 14px;

    /* Deixa o texto mais forte */
    font-weight: bold;

    /* Espaçamento entre as letras */
    letter-spacing: 2px;
}


/* Título:
   "Pacotes de Jogos" */

.titulo-pacotes h2 {

    /* Tamanho do título */
    font-size: 42px;

    /* Espaçamento acima e abaixo */
    margin: 10px 0;
}


/* Texto abaixo do título */

.titulo-pacotes p {

    /* Cor cinza clara */
    color: #cfcfcf;

    /* Tamanho da fonte */
    font-size: 16px;
}


/* =========================================================
   ÁREA DOS CARDS
========================================================= */

.cards-pacotes {

    /* Ativa o sistema Grid do CSS */
    display: grid;

    /* Cria duas colunas */
    grid-template-columns: repeat(2, 1fr);

    /* Espaço entre os dois cards */
    gap: 30px;
}


/* =========================================================
   CARD INDIVIDUAL
========================================================= */

.card-pacote {

    /* Permite posicionar o selo dentro do card */
    position: relative;

    /* Cor de fundo do card */
    background-color: #1c1020;

    /* Borda do card */
    border: 1px solid #39243d;

    /* Arredonda os cantos */
    border-radius: 18px;

    /* Espaçamento interno do card */
    padding: 40px 30px;

    /* Centraliza o conteúdo */
    text-align: center;

    /* Deixa as animações suaves */
    transition: 0.3s ease;
}


/* =========================================================
   EFEITO AO PASSAR O MOUSE NO CARD
========================================================= */

.card-pacote:hover {

    /* Faz o card subir 8 pixels */
    transform: translateY(-8px);

    /* Muda a cor da borda */
    border-color: #d7aadd;

    /* Cria uma sombra ao redor */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   CARD DE 5.000 JOGOS
   Este é o pacote MAIS COMPLETO.
========================================================= */

.card-pacote.destaque {

    /* Borda mais grossa para destacar o pacote */
    border: 2px solid #d7aadd;

    /* Fundo com um leve degradê */
    background: linear-gradient(145deg,
            #1c1020,
            #29152e);

    /* Sombra permanente para destacar o card */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   SELO "MAIS COMPLETO"
========================================================= */

.selo-pacote {

    /* Permite posicionar o selo livremente */
    position: absolute;

    /* Coloca o selo um pouco acima do card */
    top: -14px;

    /* Posiciona o selo no centro */
    left: 50%;

    /* Corrige o posicionamento horizontal */
    transform: translateX(-50%);

    /* Cor de fundo do selo */
    background-color: #d7aadd;

    /* Cor do texto */
    color: #120917;

    /* Espaçamento interno */
    padding: 7px 20px;

    /* Deixa o selo arredondado */
    border-radius: 30px;

    /* Tamanho do texto */
    font-size: 12px;

    /* Deixa o texto em negrito */
    font-weight: bold;

    /* Espaçamento entre as letras */
    letter-spacing: 1px;

    /* Impede que o texto quebre */
    white-space: nowrap;
}


/* =========================================================
   ÍCONE DO PACOTE
========================================================= */

.icone-pacote {

    /* Tamanho do emoji */
    font-size: 50px;

    /* Espaço abaixo do emoji */
    margin-bottom: 15px;
}


/* =========================================================
   NOME DO PACOTE
========================================================= */

.card-pacote h3 {

    /* Tamanho do nome */
    font-size: 25px;

    /* Espaço abaixo do nome */
    margin-bottom: 20px;
}


/* =========================================================
   ÁREA DA QUANTIDADE DE JOGOS
========================================================= */

.quantidade-jogos {

    /* Ativa Flexbox */
    display: flex;

    /* Coloca 5.000 e JOGOS um abaixo do outro */
    flex-direction: column;

    /* Espaço abaixo */
    margin-bottom: 20px;
}


/* Número:
   5.000 ou 300.000 */

.quantidade-jogos strong {

    /* Tamanho grande */
    font-size: 48px;

    /* Diminui o espaço vertical */
    line-height: 1;

    /* Cor lilás */
    color: #d7aadd;
}


/* Palavra "JOGOS" */

.quantidade-jogos span {

    /* Tamanho pequeno */
    font-size: 13px;

    /* Negrito */
    font-weight: bold;

    /* Espaçamento entre letras */
    letter-spacing: 3px;

    /* Espaço acima */
    margin-top: 7px;
}


/* =========================================================
   DESCRIÇÃO DO PACOTE
========================================================= */

.card-pacote p {

    /* Cor cinza clara */
    color: #cfcfcf;

    /* Espaçamento entre as linhas */
    line-height: 1.6;

    /* Espaço abaixo */
    margin-bottom: 25px;
}


/* =========================================================
   LISTA DE BENEFÍCIOS
========================================================= */

.card-pacote ul {

    /* Remove as bolinhas padrão da lista */
    list-style: none;

    /* Remove espaçamento interno padrão */
    padding: 0;

    /* Remove margem padrão */
    margin: 0 0 30px;

    /* Alinha os benefícios à esquerda */
    text-align: left;
}


/* Cada benefício da lista */

.card-pacote li {

    /* Espaçamento entre os benefícios */
    padding: 8px 0;

    /* Cor do texto */
    color: #eeeeee;
}

.emuladores {
    line-height: 1.7;
}

.basico3000 {
    line-height: 1.7;
}

/* =========================================================
   BOTÃO DOS PACOTES
========================================================= */

.botao-pacote {

    /* Faz o botão ocupar toda a largura */
    display: block;

    /* Cor do botão */
    background-color: #d7aadd;

    /* Cor do texto */
    color: #120917;

    /* Remove o sublinhado do link */
    text-decoration: none;

    /* Espaçamento interno */
    padding: 15px 20px;

    /* Arredonda os cantos */
    border-radius: 8px;

    /* Texto em negrito */
    font-weight: bold;

    /* Tamanho do texto */
    font-size: 14px;

    /* Faz a animação ficar suave */
    transition: 0.3s ease;
}


/* =========================================================
   EFEITO DO BOTÃO AO PASSAR O MOUSE
========================================================= */

.botao-pacote:hover {

    /* Muda o fundo para branco */
    background-color: white;

    /* Aumenta o botão levemente */
    transform: scale(1.03);
}


/* =========================================================
   RESPONSIVIDADE — CELULAR
========================================================= */

/* Essas regras serão aplicadas quando a tela
   tiver no máximo 768 pixels de largura */

@media (max-width: 768px) {


    /* Reduz o espaço da seção no celular */

    .pacotes-jogos {

        /* Menos espaço vertical */
        padding: 60px 15px;
    }


    /* Diminui o título no celular */

    .titulo-pacotes h2 {

        /* Tamanho menor para caber melhor */
        font-size: 32px;
    }


    /* -----------------------------------------------------
       NO CELULAR OS DOIS CARDS FICAM UM ABAIXO DO OUTRO
    ----------------------------------------------------- */

    .cards-pacotes {

        /* Apenas uma coluna */
        grid-template-columns: 1fr;
    }


    /* Diminui o espaçamento interno dos cards */

    .card-pacote {

        /* Menos espaço nas laterais */
        padding: 35px 25px;
    }


    /* Diminui o tamanho dos números */

    .quantidade-jogos strong {

        /* Evita que "300.000" fique apertado no celular */
        font-size: 42px;
    }

}

/* =========================================================
   SEÇÃO: JOGOS MAIS VENDIDOS
========================================================= */

.jogos-mais-vendidos {

    /* Fundo da seção */
    background-color: transparent;

    /* Espaçamento */
    padding: 80px 20px;

    /* Cor dos textos */
    color: white;
}


/* =========================================================
   CONTAINER
========================================================= */

.container-jogos {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   TÍTULO
========================================================= */

.titulo-jogos {

    /* Centraliza */
    text-align: center;

    /* Espaço abaixo */
    margin-bottom: 50px;
}


.titulo-jogos span {

    /* Cor lilás */
    color: #d7aadd;

    /* Tamanho */
    font-size: 14px;

    /* Negrito */
    font-weight: bold;

    /* Espaçamento */
    letter-spacing: 2px;
}


.titulo-jogos h2 {

    /* Tamanho */
    font-size: 40px;

    /* Espaçamento */
    margin: 10px 0 15px;
}


.titulo-jogos p {

    /* Cor */
    color: #cfcfcf;

    /* Tamanho */
    font-size: 16px;

    /* Altura */
    line-height: 1.6;
}


/* =========================================================
   GRID DOS JOGOS
========================================================= */

.grid-jogos {
    display: grid;

    /* 3 jogos por linha */
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

/* =========================================================
   CARD DO JOGO
========================================================= */

.card-jogo {

    /* Fundo */
    background-color: #1c1020;

    /* Borda */
    border: 1px solid #39243d;

    /* Arredondamento */
    border-radius: 16px;

    /* Esconde qualquer conteúdo que ultrapasse */
    overflow: hidden;

    /* Permite posicionar o selo */
    position: relative;

    /* Animação */
    transition: 0.3s ease;
}


/* =========================================================
   EFEITO HOVER
========================================================= */

.card-jogo:hover {

    /* Sobe o card */
    transform: translateY(-8px);

    /* Borda lilás */
    border-color: #d7aadd;

    /* Sombra */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   CARD DESTAQUE
========================================================= */

.destaque-jogo {

    /* Borda especial */
    border: 2px solid #d7aadd;
}


/* =========================================================
   SELO
========================================================= */

.selo-jogo {

    /* Posicionamento */
    position: absolute;

    /* Distância do topo */
    top: 15px;

    /* Distância da esquerda */
    left: 15px;

    /* Fundo */
    background-color: #d7aadd;

    /* Texto */
    color: #120917;

    /* Espaçamento */
    padding: 7px 12px;

    /* Arredondamento */
    border-radius: 20px;

    /* Tamanho */
    font-size: 11px;

    /* Negrito */
    font-weight: bold;

    /* Mantém em cima da imagem */
    z-index: 2;
}


/* =========================================================
   IMAGEM DO JOGO
========================================================= */

.imagem-jogo {

    /* Largura */
    width: 100%;

    /* Proporção aproximada das capas */
    aspect-ratio: 1/ 1;

    /* Esconde excesso */
    overflow: hidden;

    /* Fundo caso a imagem demore */
    background-color: #0d080f;

}


.imagem-jogo img {

    /* Ocupa todo o espaço */
    width: 100%;

    height: 100%;

    /* Mantém a capa proporcional */
    object-fit: cover;

    /* Animação */
    transition: 0.4s ease;

    /* Remove espaços estranhos */
    display: block;
}


/* Zoom da capa ao passar o mouse */

.card-jogo:hover .imagem-jogo img {

    transform: scale(1.05);
}


/* =========================================================
   INFORMAÇÕES DO JOGO
========================================================= */

.info-jogo {

    /* Espaçamento */
    padding: 18px 20px 20px;

    /* Centraliza */
    text-align: center;
}


.info-jogo h3 {

    /* Tamanho */
    font-size: 18px;

    /* Espaço */
    margin-bottom: 8px;

    /* Efeito de brilho */
    text-shadow: 0 0 8px #c840da;
}


.info-jogo span {

    /* Cor */
    color: #d7aadd;

    /* Tamanho */
    font-size: 12px;

    /* Negrito */
    font-weight: bold;

    /* Espaçamento */
    letter-spacing: 2px;
}


/* =========================================================
   CTA
========================================================= */

.cta-jogos {

    /* Centraliza */
    text-align: center;

    /* Espaço acima */
    margin-top: 50px;
}


.cta-jogos p {

    /* Cor */
    color: #cfcfcf;

    /* Espaço */
    margin-bottom: 18px;

    /* Tamanho */
    font-size: 16px;
}


.botao-jogos {

    /* Permite aplicar padding */
    display: inline-block;

    /* Fundo */
    background-color: #d7aadd;

    /* Texto */
    color: #120917;

    /* Remove sublinhado */
    text-decoration: none;

    /* Espaçamento */
    padding: 15px 30px;

    /* Cantos */
    border-radius: 8px;

    /* Negrito */
    font-weight: bold;

    /* Tamanho */
    font-size: 14px;

    /* Animação */
    transition: 0.3s ease;
}


.botao-jogos:hover {

    /* Fundo branco */
    background-color: white;

    /* Pequeno aumento */
    transform: scale(1.03);
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 900px) {

    .grid-jogos {

        /* 2 cards por linha */
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 768px) {

    .jogos-mais-vendidos {

        /* Menos espaço no celular */
        padding: 60px 15px;
    }


    .titulo-jogos h2 {

        /* Título menor */
        font-size: 30px;
    }


    .grid-jogos {

        /* Um card por linha */
        grid-template-columns: 1fr;
    }


    .card-jogo {

        /* Limita a largura no celular */
        max-width: 360px;

        /* Centraliza */
        margin: 0 auto;

        /* Ocupa toda a largura disponível */
        width: 100%;
    }

}

.titulo-jogos h2 .rosa {
    color: #ff4fd8;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
}

/* =========================================================
   SEÇÃO: FEEDBACKS DOS CLIENTES
========================================================= */

.feedbacks-clientes {
    background-color: #120917;
    padding: 90px 20px;
    color: white;
}


/* =========================================================
   CONTAINER
========================================================= */

.container-feedbacks {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   CABEÇALHO DA SEÇÃO
========================================================= */

.titulo-feedbacks {
    text-align: center;
    margin-bottom: 50px;
}


/* CLIENTES REAIS */

.titulo-feedbacks>span {
    color: #d7aadd;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}


/* Título */

.titulo-feedbacks h2 {
    color: white;
    font-size: 42px;
    margin: 10px 0 15px;
}


/* Palavra rosa */

.rosa-feedback {
    color: #ff4fd8;
}


/* Texto abaixo do título */

.titulo-feedbacks p {
    max-width: 700px;
    margin: 0 auto;

    color: #cfcfcf;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GRID DOS FEEDBACKS
========================================================= */

.grid-feedbacks {
    display: grid;

    /* 3 cards por linha */
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.card-feedback {
    position: relative;

    background:
        linear-gradient(145deg,
            #1c1020,
            #130817);

    border: 1px solid #39243d;

    border-radius: 18px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition: 0.3s ease;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35);
}


/* Hover */

.card-feedback:hover {
    transform: translateY(-6px);

    border-color: #d7aadd;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.50),
        0 0 20px rgba(255, 79, 216, 0.12);
}


/* =========================================================
   ETIQUETA VÍDEO / FEEDBACK
========================================================= */

.tipo-feedback {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 10;

    background-color: #d7aadd;

    color: #120917;

    padding: 7px 13px;

    border-radius: 30px;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.40);
}


/* Etiqueta das imagens */

.tipo-feedback.imagem {
    background-color: #ff4fd8;
}


/* =========================================================
   ÁREA DA FOTO / VÍDEO
========================================================= */

.midia-feedback {
    width: 100%;

    /*
       ESSA É A PARTE MAIS IMPORTANTE.
       Todos os cards terão a mesma área para mídia.
    */
    height: 390px;

    background:
        linear-gradient(145deg,
            #050207,
            #0d060f);

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}


/* =========================================================
   VÍDEOS
========================================================= */

.midia-feedback video {
    width: 100%;

    height: 100%;

    /*
       CONTAIN mostra o vídeo inteiro
       sem cortar as laterais ou parte de cima.
    */
    object-fit: contain;

    display: block;

    background-color: #000;
}


/* =========================================================
   IMAGENS / PRINTS DO WHATSAPP
========================================================= */

.midia-feedback img {
    width: 100%;

    height: 100%;

    /*
       Mostra o print inteiro.
       Não corta a conversa.
    */
    object-fit: contain;

    display: block;
}


/* =========================================================
   PARTE INFERIOR DO CARD
========================================================= */

.info-feedback {
    padding: 20px 20px 22px;

    text-align: center;

    /*
       Faz todos os cards manterem
       uma aparência parecida.
    */
    flex-grow: 1;
}


/* Título */

.info-feedback h3 {
    color: white;

    font-size: 18px;

    margin-bottom: 8px;

    text-shadow:
        0 0 8px rgba(255, 79, 216, 0.25);
}


/* Descrição */

.info-feedback p {
    color: #bfbfbf;

    font-size: 14px;

    line-height: 1.6;

    margin: 0;
}


/* =========================================================
   CTA
========================================================= */

.cta-feedbacks {
    text-align: center;

    margin-top: 55px;
}


.cta-feedbacks p {
    color: #cfcfcf;

    font-size: 16px;

    margin-bottom: 18px;
}


/* Botão */

.botao-feedbacks {
    display: inline-block;

    background-color: #d7aadd;

    color: #120917;

    text-decoration: none;

    font-weight: bold;

    font-size: 14px;

    padding: 16px 35px;

    border-radius: 9px;

    transition: 0.3s ease;

    box-shadow:
        0 8px 20px rgba(215, 170, 221, 0.20);
}


.botao-feedbacks:hover {
    background-color: white;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(215, 170, 221, 0.30);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .grid-feedbacks {

        /* 2 cards por linha */
        grid-template-columns: repeat(2, 1fr);
    }


    .midia-feedback {
        height: 420px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .feedbacks-clientes {
        padding: 60px 15px;
    }


    .titulo-feedbacks {
        margin-bottom: 35px;
    }


    .titulo-feedbacks h2 {
        font-size: 30px;
    }


    .titulo-feedbacks p {
        font-size: 15px;
    }


    .grid-feedbacks {

        /* Um feedback por linha */
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .card-feedback {
        width: 100%;

        max-width: 420px;

        margin: 0 auto;
    }


    .midia-feedback {

        /*
           Um pouco maior porque vídeos
           de WhatsApp geralmente são verticais.
        */
        height: 480px;
    }


    .botao-feedbacks {
        width: 100%;

        max-width: 320px;
    }

}

/* =========================================================
   SEÇÃO: NOSSOS SERVIÇOS
========================================================= */

.nossos-servicos {

    /* Fundo transparente para aproveitar o fundo futurista */
    background-color: transparent;

    /* Espaçamento da seção */
    padding: 90px 20px;

    /* Cor padrão */
    color: white;
}


/* =========================================================
   CONTAINER
========================================================= */

.container-servicos {

    /* Largura máxima */
    width: 100%;

    max-width: 1200px;

    /* Centraliza */
    margin: 0 auto;
}


/* =========================================================
   TÍTULO
========================================================= */

.titulo-servicos {

    /* Centraliza */
    text-align: center;

    /* Espaço abaixo */
    margin-bottom: 55px;
}


/* Pequeno texto acima */

.titulo-servicos>span {

    /* Cor lilás */
    color: #d7aadd;

    /* Tamanho */
    font-size: 14px;

    /* Negrito */
    font-weight: bold;

    /* Espaçamento */
    letter-spacing: 2px;
}


/* Título principal */

.titulo-servicos h2 {

    color: white;

    font-size: 42px;

    margin: 10px 0 15px;
}


/* Palavra rosa */

.rosa-servicos {

    color: #ff4fd8;
}


/* Texto abaixo do título */

.titulo-servicos p {

    color: #cfcfcf;

    font-size: 16px;

    line-height: 1.7;

    max-width: 700px;

    margin: 0 auto;
}


/* =========================================================
   GRID DOS SERVIÇOS
========================================================= */

.grid-servicos {

    /* Grid */
    display: grid;

    /* 2 cards por linha */
    grid-template-columns: repeat(2, 1fr);

    /* Espaçamento */
    gap: 30px;
}


/* =========================================================
   CARD
========================================================= */

.card-servico {

    /* Necessário para o selo */
    position: relative;

    /* Fundo */
    background:
        linear-gradient(145deg,
            #1c1020,
            #140a17);

    /* Borda */
    border: 1px solid #39243d;

    /* Cantos */
    border-radius: 18px;

    /* Espaçamento */
    padding: 38px 32px;

    /* Organiza o conteúdo */
    display: flex;

    flex-direction: column;

    /* Animação */
    transition: 0.3s ease;

    /* Sombra */
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   HOVER
========================================================= */

.card-servico:hover {

    /* Card sobe */
    transform: translateY(-8px);

    /* Borda rosa/lilás */
    border-color: #d7aadd;

    /* Brilho */
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.50),
        0 0 25px rgba(255, 79, 216, 0.10);
}


/* =========================================================
   CARD DESTAQUE
========================================================= */

.destaque-servico {

    /* Borda mais forte */
    border: 2px solid #d7aadd;

    /* Fundo diferente */
    background:
        linear-gradient(145deg,
            #241128,
            #170b1b);
}


/* =========================================================
   SELO
========================================================= */

.selo-servico {

    position: absolute;

    top: -14px;

    right: 25px;

    background-color: #d7aadd;

    color: #120917;

    padding: 7px 16px;

    border-radius: 30px;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* =========================================================
   ÍCONE
========================================================= */

.icone-servico {

    /* Área do ícone */
    width: 65px;

    height: 65px;

    /* Centraliza o emoji */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Tamanho */
    font-size: 32px;

    /* Fundo */
    background-color: rgba(215, 170, 221, 0.08);

    /* Borda */
    border: 1px solid rgba(215, 170, 221, 0.20);

    /* Arredondamento */
    border-radius: 16px;

    /* Espaço abaixo */
    margin-bottom: 22px;
}


/* =========================================================
   TÍTULO DO SERVIÇO
========================================================= */

.card-servico h3 {

    color: white;

    font-size: 24px;

    margin-bottom: 14px;

    text-shadow:
        0 0 8px rgba(255, 79, 216, 0.20);
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.card-servico>p {

    color: #cfcfcf;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 22px;
}


/* =========================================================
   LISTA
========================================================= */

.card-servico ul {

    /* Tira bolinhas */
    list-style: none;

    padding: 0;

    /* Empurra botão para baixo */
    margin: 0 0 28px;

    /* Faz ocupar espaço disponível */
    flex-grow: 1;
}


/* Cada item */

.card-servico li {

    color: #eeeeee;

    font-size: 14px;

    padding: 8px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}


/* Último item sem linha */

.card-servico li:last-child {

    border-bottom: none;
}


/* =========================================================
   BOTÃO
========================================================= */

.botao-servico {

    display: block;

    width: 100%;

    text-align: center;

    background-color: #d7aadd;

    color: #120917;

    text-decoration: none;

    padding: 15px 20px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s ease;
}


/* Hover botão */

.botao-servico:hover {

    background-color: white;

    transform: scale(1.02);
}


/* =========================================================
   CTA FINAL
========================================================= */

.cta-servicos {

    text-align: center;

    margin-top: 55px;
}


.cta-servicos p {

    color: #cfcfcf;

    font-size: 16px;

    margin-bottom: 18px;
}


/* Botão CTA */

.botao-cta-servicos {

    display: inline-block;

    background-color: #d7aadd;

    color: #120917;

    text-decoration: none;

    padding: 16px 35px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s ease;

    box-shadow:
        0 8px 20px rgba(215, 170, 221, 0.20);
}


.botao-cta-servicos:hover {

    background-color: white;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(215, 170, 221, 0.30);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .grid-servicos {

        /* Continua com 2 colunas */
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }


    .card-servico {

        padding: 35px 25px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .nossos-servicos {

        padding: 60px 15px;
    }


    .titulo-servicos {

        margin-bottom: 40px;
    }


    .titulo-servicos h2 {

        font-size: 30px;
    }


    .titulo-servicos p {

        font-size: 15px;
    }


    .grid-servicos {

        /* 1 card por linha */
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .card-servico {

        padding: 32px 24px;
    }


    .card-servico h3 {

        font-size: 21px;
    }


    .selo-servico {

        right: 18px;
    }


    .botao-cta-servicos {

        width: 100%;

        max-width: 320px;
    }

}

/* =========================================================
   SEÇÃO: FAQ / PERGUNTAS FREQUENTES
========================================================= */

.faq {
    /* Espaçamento superior e inferior da seção */
    padding: 90px 20px;

    /* Mantém o background futurista principal do site */
    background: transparent;

    /* Cor padrão dos textos */
    color: white;
}


/* =========================================================
   CONTAINER PRINCIPAL DO FAQ
========================================================= */

.container-faq {
    /* Ocupa toda a largura disponível */
    width: 100%;

    /* Limita a largura para melhorar a leitura */
    max-width: 1000px;

    /* Centraliza o conteúdo */
    margin: 0 auto;
}


/* =========================================================
   TÍTULO DA SEÇÃO
========================================================= */

.titulo-faq {
    /* Centraliza os textos */
    text-align: center;

    /* Espaço entre título e perguntas */
    margin-bottom: 50px;
}


/* Pequeno texto "PERGUNTAS FREQUENTES" */

.titulo-faq>span {
    color: #d7aadd;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;
}


/* Título principal */

.titulo-faq h2 {
    color: white;

    font-size: 42px;

    margin: 10px 0 15px;
}


/* Palavra rosa do título */

.rosa-faq {
    color: #ff4fd8;
}


/* Parágrafo abaixo do título */

.titulo-faq p {
    color: #cfcfcf;

    font-size: 16px;

    line-height: 1.7;

    max-width: 680px;

    margin: 0 auto;
}


/* =========================================================
   LISTA DE PERGUNTAS
========================================================= */

.lista-faq {
    /* Coloca uma pergunta embaixo da outra */
    display: flex;

    flex-direction: column;

    /* Espaço entre as perguntas */
    gap: 16px;
}


/* =========================================================
   CARD DE CADA PERGUNTA
========================================================= */

.item-faq {
    /* Fundo escuro com degradê */
    background: linear-gradient(145deg,
            #1c1020,
            #140a17);

    /* Borda */
    border: 1px solid #39243d;

    /* Cantos arredondados */
    border-radius: 14px;

    /* Esconde qualquer conteúdo que ultrapasse o card */
    overflow: hidden;

    /* Suaviza efeitos */
    transition: 0.3s ease;

    /* Sombra */
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   QUANDO A PERGUNTA ESTIVER ABERTA
========================================================= */

.item-faq[open] {
    /* Muda a borda */
    border-color: #d7aadd;

    /* Adiciona brilho */
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(255, 79, 216, 0.08);
}


/* =========================================================
   PERGUNTA / SUMMARY
========================================================= */

.item-faq summary {
    /* Necessário para posicionar o botão + */
    position: relative;

    /* Mostra que é clicável */
    cursor: pointer;

    /* Remove marcador padrão */
    list-style: none;

    /* Espaçamento interno */
    padding: 22px 60px 22px 24px;

    /* Cor */
    color: white;

    /* Tamanho */
    font-size: 17px;

    /* Negrito */
    font-weight: 700;

    /* Transição */
    transition: 0.3s ease;
}


/* Remove a seta padrão do navegador */

.item-faq summary::-webkit-details-marker {
    display: none;
}


/* Muda a cor da pergunta ao passar o mouse */

.item-faq summary:hover {
    color: #d7aadd;
}


/* =========================================================
   BOTÃO + DA PERGUNTA
========================================================= */

.item-faq summary::after {
    /* Símbolo fechado */
    content: "+";

    /* Posicionamento */
    position: absolute;

    right: 24px;

    top: 50%;

    transform: translateY(-50%);

    /* Tamanho */
    width: 30px;

    height: 30px;

    /* Centraliza o símbolo */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Formato circular */
    border-radius: 50%;

    /* Fundo transparente lilás */
    background-color: rgba(215, 170, 221, 0.10);

    /* Borda */
    border: 1px solid rgba(215, 170, 221, 0.25);

    /* Cor do + */
    color: #d7aadd;

    /* Tamanho do + */
    font-size: 22px;

    font-weight: bold;

    /* Animação */
    transition: 0.3s ease;
}


/* =========================================================
   QUANDO A PERGUNTA ESTIVER ABERTA
   O + VIRA -
========================================================= */

.item-faq[open] summary::after {
    content: "−";

    /* Fundo lilás */
    background-color: #d7aadd;

    /* Símbolo escuro */
    color: #120917;

    /* Pequena animação */
    transform:
        translateY(-50%) rotate(180deg);
}


/* =========================================================
   ÁREA DA RESPOSTA
========================================================= */

.resposta-faq {
    /* Espaçamento interno */
    padding: 0 24px 22px;
}


/* Texto da resposta */

.resposta-faq p {
    color: #cfcfcf;

    font-size: 15px;

    line-height: 1.7;

    /* Espaço entre pergunta e resposta */
    padding-top: 18px;

    /* Linha divisória */
    border-top:
        1px solid rgba(255, 255, 255, 0.06);
}


/* =========================================================
   DESTAQUES IMPORTANTES DAS RESPOSTAS
========================================================= */

.resposta-faq strong {
    /* Destaca informações como:
     20 minutos
     15 GB
     pagamento após instalação
     Wi-Fi
     controle sem fio
  */

    color: #d7aadd;

    font-weight: 700;
}


/* =========================================================
   CTA ABAIXO DAS PERGUNTAS
========================================================= */

.cta-faq {
    /* Centraliza */
    text-align: center;

    /* Espaço acima */
    margin-top: 45px;
}


/* Texto do CTA */

.cta-faq p {
    color: #cfcfcf;

    font-size: 16px;

    margin-bottom: 18px;
}


/* =========================================================
   BOTÃO DO FAQ
========================================================= */

.botao-faq {
    /* Permite aplicar padding corretamente */
    display: inline-block;

    /* Cor principal */
    background-color: #d7aadd;

    /* Texto escuro */
    color: #120917;

    /* Remove sublinhado */
    text-decoration: none;

    /* Tamanho */
    padding: 16px 35px;

    /* Cantos */
    border-radius: 9px;

    /* Fonte */
    font-size: 14px;

    font-weight: bold;

    /* Animação */
    transition: 0.3s ease;

    /* Sombra */
    box-shadow:
        0 8px 20px rgba(215, 170, 221, 0.20);
}


/* Efeito ao passar o mouse */

.botao-faq:hover {
    /* Botão fica branco */
    background-color: white;

    /* Sobe levemente */
    transform: translateY(-3px);

    /* Aumenta a sombra */
    box-shadow:
        0 12px 25px rgba(215, 170, 221, 0.30);
}


/* =========================================================
   RESPONSIVIDADE - CELULAR
========================================================= */

@media (max-width: 650px) {

    /* Diminui os espaços da seção */
    .faq {
        padding: 60px 15px;
    }


    /* Aproxima o título das perguntas */
    .titulo-faq {
        margin-bottom: 38px;
    }


    /* Diminui o título */
    .titulo-faq h2 {
        font-size: 30px;
    }


    /* Diminui o subtítulo */
    .titulo-faq p {
        font-size: 15px;
    }


    /* Ajusta as perguntas */
    .item-faq summary {
        font-size: 15px;

        padding:
            20px 55px 20px 20px;
    }


    /* Ajusta o botão + */
    .item-faq summary::after {
        right: 18px;

        width: 28px;

        height: 28px;

        font-size: 20px;
    }


    /* Ajusta as respostas */
    .resposta-faq {
        padding:
            0 20px 20px;
    }


    .resposta-faq p {
        font-size: 14px;
    }


    /* Botão maior no celular */
    .botao-faq {
        width: 100%;

        max-width: 320px;
    }

}

/* =====================================================
   SEÇÃO: CTA FINAL - VERSÃO MAIS CHAMATIVA
===================================================== */

.cta-final {
    padding: 100px 20px;

    background: transparent;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BRILHO GRANDE ATRÁS DO CTA
===================================================== */

.cta-final::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 850px;
    height: 500px;

    background:
        radial-gradient(circle,
            rgba(255, 43, 166, 0.20) 0%,
            rgba(120, 40, 200, 0.12) 35%,
            transparent 70%);

    filter: blur(15px);

    pointer-events: none;
}


/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

.container-cta-final {
    max-width: 920px;

    margin: 0 auto;

    padding: 65px 45px;

    text-align: center;

    position: relative;

    z-index: 2;

    border-radius: 24px;

    /* Fundo escuro futurista */
    background:
        radial-gradient(circle at top,
            rgba(255, 43, 166, 0.10),
            transparent 45%),
        linear-gradient(145deg,
            #16071d,
            #120917 50%,
            #050207);

    /* Borda iluminada */
    border:
        1px solid rgba(215, 170, 221, 0.35);

    /* Sombra externa */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(255, 43, 166, 0.12),
        inset 0 0 30px rgba(215, 170, 221, 0.04);
}


/* =====================================================
   LINHA DE BRILHO NO TOPO
===================================================== */

.container-cta-final::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 65%;
    height: 2px;

    background:
        linear-gradient(90deg,
            transparent,
            #d7aadd,
            #ff2ba6,
            #d7aadd,
            transparent);

    box-shadow:
        0 0 15px rgba(255, 43, 166, 0.70);
}


/* =====================================================
   TEXTO PEQUENO DO TOPO
===================================================== */

.cta-final-topo {
    display: inline-block;

    color: #d7aadd;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 20px;

    padding: 8px 16px;

    border-radius: 30px;

    background:
        rgba(215, 170, 221, 0.08);

    border:
        1px solid rgba(215, 170, 221, 0.20);

    box-shadow:
        0 0 15px rgba(255, 43, 166, 0.08);
}


/* =====================================================
   TÍTULO PRINCIPAL
===================================================== */

.container-cta-final h2 {
    color: white;

    font-size: 46px;

    line-height: 1.15;

    margin-bottom: 22px;

    text-shadow:
        0 0 20px rgba(255, 43, 166, 0.18);
}


/* Destaque */
.container-cta-final h2 span {
    display: block;

    color: #d7aadd;

    margin-top: 8px;

    text-shadow:
        0 0 16px rgba(215, 170, 221, 0.30);
}


/* =====================================================
   TEXTO DE APOIO
===================================================== */

.texto-cta-final {
    max-width: 650px;

    margin: 0 auto 38px;

    color: #cfcfcf;

    font-size: 17px;

    line-height: 1.7;
}


/* =====================================================
   BENEFÍCIOS
===================================================== */

.beneficios-cta-final {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 40px;
}


.beneficio-cta {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    background:
        rgba(215, 170, 221, 0.07);

    border:
        1px solid rgba(215, 170, 221, 0.18);

    border-radius: 30px;

    transition: 0.3s ease;
}


/* Pequeno efeito ao passar o mouse */
.beneficio-cta:hover {
    transform: translateY(-2px);

    border-color:
        rgba(215, 170, 221, 0.40);

    box-shadow:
        0 0 15px rgba(255, 43, 166, 0.10);
}


.beneficio-cta span {
    color: #d7aadd;

    font-size: 18px;

    font-weight: bold;
}


.beneficio-cta p {
    margin: 0;

    color: #eeeeee;

    font-size: 14px;
}


/* =====================================================
   BOTÃO PRINCIPAL
===================================================== */

.botao-cta-final {
    display: inline-block;

    background-color: #d7aadd;

    color: #120917;

    text-decoration: none;

    padding: 18px 40px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.5px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;

    box-shadow:
        0 10px 25px rgba(215, 170, 221, 0.25),
        0 0 20px rgba(255, 43, 166, 0.12);

    /* Animação suave */
    animation:
        brilhoBotaoCTA 2.5s infinite;
}


/* Hover */
.botao-cta-final:hover {
    background-color: white;

    transform:
        translateY(-4px) scale(1.03);

    box-shadow:
        0 15px 35px rgba(215, 170, 221, 0.35),
        0 0 30px rgba(255, 43, 166, 0.20);
}


/* =====================================================
   ANIMAÇÃO DO BOTÃO
===================================================== */

@keyframes brilhoBotaoCTA {

    0% {
        box-shadow:
            0 10px 25px rgba(215, 170, 221, 0.20),
            0 0 10px rgba(255, 43, 166, 0.08);
    }

    50% {
        box-shadow:
            0 12px 30px rgba(215, 170, 221, 0.35),
            0 0 25px rgba(255, 43, 166, 0.20);
    }

    100% {
        box-shadow:
            0 10px 25px rgba(215, 170, 221, 0.20),
            0 0 10px rgba(255, 43, 166, 0.08);
    }
}


/* =====================================================
   TEXTO ABAIXO DO BOTÃO
===================================================== */

.observacao-cta-final {
    margin-top: 16px;

    color: #999999;

    font-size: 13px;
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 650px) {

    .cta-final {
        padding: 70px 15px;
    }


    .container-cta-final {
        padding: 48px 22px;

        border-radius: 18px;
    }


    .container-cta-final h2 {
        font-size: 31px;
    }


    .texto-cta-final {
        font-size: 15px;
    }


    .beneficios-cta-final {
        flex-direction: column;

        align-items: stretch;
    }


    .beneficio-cta {
        justify-content: center;
    }


    .botao-cta-final {
        width: 100%;

        max-width: 350px;

        padding: 17px 20px;
    }

}

/* =========================================================
   SEÇÃO: BÔNUS EXCLUSIVO
========================================================= */

.secao-bonus {

    /* Espaçamento da seção */
    padding: 90px 20px;

    /* Mantém o fundo principal do site */
    background: transparent;

    /* Necessário para efeitos decorativos */
    position: relative;

    /* Evita estouro dos brilhos */
    overflow: hidden;
}


/* =========================================================
   BRILHO DE FUNDO
========================================================= */

.secao-bonus::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 900px;
    height: 500px;

    background:
        radial-gradient(circle,
            rgba(255, 43, 166, 0.15),
            rgba(120, 40, 200, 0.08) 40%,
            transparent 70%);

    filter: blur(20px);

    pointer-events: none;
}


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.container-bonus {

    /* Limita a largura */
    max-width: 1150px;

    /* Centraliza */
    margin: 0 auto;

    /* Duas colunas */
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 55px;

    /* Fundo do card */
    background:
        linear-gradient(145deg,
            rgba(22, 7, 29, 0.96),
            rgba(18, 9, 23, 0.96),
            rgba(5, 2, 7, 0.98));

    /* Espaçamento interno */
    padding: 55px;

    /* Borda */
    border:
        1px solid rgba(215, 170, 221, 0.25);

    border-radius: 24px;

    /* Profundidade */
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.50),
        0 0 30px rgba(255, 43, 166, 0.08);

    position: relative;

    z-index: 2;
}


/* Linha iluminada superior */
.container-bonus::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 60%;

    height: 2px;

    background:
        linear-gradient(90deg,
            transparent,
            #d7aadd,
            #ff2ba6,
            #d7aadd,
            transparent);

    box-shadow:
        0 0 15px rgba(255, 43, 166, 0.55);
}


/* =========================================================
   CONTEÚDO
========================================================= */

.conteudo-bonus {

    position: relative;

    z-index: 2;
}


/* =========================================================
   SELO
========================================================= */

.selo-bonus {

    display: inline-block;

    color: #d7aadd;

    background:
        rgba(215, 170, 221, 0.08);

    border:
        1px solid rgba(215, 170, 221, 0.22);

    padding: 9px 15px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1.5px;

    margin-bottom: 22px;
}


/* =========================================================
   TÍTULO
========================================================= */

.conteudo-bonus h2 {

    color: white;

    font-size: 37px;

    line-height: 1.2;

    margin-bottom: 14px;
}


/* Palavra destacada */
.conteudo-bonus h2 span {

    color: #d7aadd;
}


/* =========================================================
   NOME DO JOGO
========================================================= */

.conteudo-bonus h3 {

    color: #ff2ba6;

    font-size: 40px;

    font-weight: 900;

    margin-bottom: 20px;

    text-shadow:
        0 0 18px rgba(255, 43, 166, 0.30);
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.descricao-bonus {

    color: #cfcfcf;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 25px;
}


/* =========================================================
   LISTA DE BENEFÍCIOS
========================================================= */

.lista-bonus {

    list-style: none;

    margin: 0 0 25px;

    padding: 0;
}


.lista-bonus li {

    color: #eeeeee;

    font-size: 15px;

    padding: 10px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}


/* Ícone ✓ */
.lista-bonus li span {

    color: #d7aadd;

    font-weight: bold;

    margin-right: 8px;
}


/* =========================================================
   AVISO SOBRE O PACOTE
========================================================= */

.aviso-bonus {

    color: #d7aadd;

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 30px;
}


/* =========================================================
   BOTÃO
========================================================= */

.botao-bonus {

    display: inline-block;

    background-color: #d7aadd;

    color: #120917;

    text-decoration: none;

    padding: 17px 32px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s ease;

    box-shadow:
        0 10px 25px rgba(215, 170, 221, 0.22);
}


/* Hover do botão */
.botao-bonus:hover {

    background-color: white;

    transform:
        translateY(-3px) scale(1.02);

    box-shadow:
        0 14px 30px rgba(215, 170, 221, 0.32);
}


/* =========================================================
   ÁREA DA IMAGEM
========================================================= */

.imagem-bonus {

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;
}


/* Brilho atrás da imagem */
.imagem-bonus::before {

    content: "";

    position: absolute;

    width: 90%;
    height: 90%;

    background:
        radial-gradient(circle,
            rgba(255, 43, 166, 0.18),
            transparent 68%);

    filter: blur(20px);
}


/* Imagem PES 2027 */
.imagem-bonus img {

    width: 100%;

    max-width: 520px;

    height: auto;

    display: block;

    border-radius: 18px;

    position: relative;

    z-index: 2;

    border:
        1px solid rgba(215, 170, 221, 0.25);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.50),
        0 0 25px rgba(255, 43, 166, 0.13);

    transition: 0.4s ease;
}


/* Efeito na imagem */
.imagem-bonus img:hover {

    transform:
        translateY(-5px) scale(1.015);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(255, 43, 166, 0.20);
}


/* =========================================================
   TABLET / CELULAR
========================================================= */

@media (max-width: 850px) {

    .container-bonus {

        /* Passa para uma coluna */
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 45px 30px;

        text-align: center;
    }


    /* Imagem aparece primeiro no celular */
    .imagem-bonus {

        order: -1;
    }


    .conteudo-bonus h2 {

        font-size: 32px;
    }


    .conteudo-bonus h3 {

        font-size: 34px;
    }


    .lista-bonus {

        max-width: 450px;

        margin:
            0 auto 25px;
    }


    .imagem-bonus img {

        max-width: 500px;
    }

}


/* =========================================================
   CELULAR PEQUENO
========================================================= */

@media (max-width: 550px) {

    .secao-bonus {

        padding: 65px 15px;
    }


    .container-bonus {

        padding: 35px 20px;

        border-radius: 18px;
    }


    .conteudo-bonus h2 {

        font-size: 27px;
    }


    .conteudo-bonus h3 {

        font-size: 30px;
    }


    .descricao-bonus {

        font-size: 15px;
    }


    .botao-bonus {

        width: 100%;

        max-width: 340px;

        padding: 16px 20px;
    }

}

/* =========================================================
   RODAPÉ / FOOTER
========================================================= */

.rodape {

    background:
        linear-gradient(180deg,
            #120917 0%,
            #0b0410 55%,
            #050207 100%);

    border-top:
        1px solid rgba(215, 170, 221, 0.18);

    color: white;

    position: relative;

    overflow: hidden;
}


/* Brilho decorativo */

.rodape::before {

    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    transform: translateX(-50%);

    width: 800px;
    height: 350px;

    background:
        radial-gradient(circle,
            rgba(255, 43, 166, 0.12),
            rgba(120, 40, 200, 0.06) 40%,
            transparent 70%);

    filter: blur(25px);

    pointer-events: none;
}


/* Container principal */

.container-rodape {

    max-width: 1150px;

    margin: 0 auto;

    padding: 65px 25px 45px;

    display: grid;

    grid-template-columns:
        1.3fr 0.8fr 0.9fr 1fr;

    gap: 45px;

    position: relative;

    z-index: 2;
}


/* Logo */

.logo-rodape {

    width: 75px;

    height: auto;

    margin-bottom: 12px;

    filter:
        drop-shadow(0 0 12px rgba(255, 43, 166, 0.25));
}


/* Marca */

.rodape-marca h2 {

    color: white;

    font-size: 25px;

    letter-spacing: 3px;

    margin-bottom: 14px;
}


.rodape-marca p {

    color: #bfbfbf;

    font-size: 14px;

    line-height: 1.7;

    max-width: 320px;
}


/* Títulos */

.rodape-links h3,
.rodape-atendimento h3 {

    color: #d7aadd;

    font-size: 16px;

    margin-bottom: 20px;
}


/* Listas */

.rodape-links ul {

    list-style: none;

    padding: 0;

    margin: 0;
}


.rodape-links li {

    margin-bottom: 11px;
}


/* Links */

.rodape-links a {

    color: #bfbfbf;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s ease;
}


.rodape-links a:hover {

    color: #d7aadd;

    padding-left: 4px;
}


/* Atendimento */

.rodape-atendimento p {

    color: #bfbfbf;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 16px;
}


.whatsapp-rodape {

    display: inline-block;

    color: #d7aadd;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s ease;
}


.whatsapp-rodape:hover {

    color: white;
}


/* Parte inferior */

.rodape-inferior {

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    padding: 20px;

    position: relative;

    z-index: 2;
}


.rodape-inferior p {

    margin: 0;

    color: #777777;

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .container-rodape {

        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .container-rodape {

        grid-template-columns: 1fr;

        padding: 50px 25px 40px;

        gap: 35px;

        text-align: center;
    }


    .rodape-marca p,
    .rodape-atendimento p {

        margin-left: auto;

        margin-right: auto;
    }


    .logo-rodape {

        width: 70px;
    }

}

/* =========================================================
   BANNER DE COOKIES
========================================================= */

.banner-cookies {

    position: fixed;

    left: 20px;
    right: 20px;
    bottom: 20px;

    max-width: 1050px;

    margin: 0 auto;

    background:
        linear-gradient(145deg,
            #16071d,
            #120917,
            #050207);

    border:
        1px solid rgba(215, 170, 221, 0.35);

    border-radius: 16px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.70),
        0 0 30px rgba(255, 43, 166, 0.12);

    padding: 22px;

    z-index: 99999;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.conteudo-cookies {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   TEXTO
========================================================= */

.texto-cookies {

    max-width: 700px;
}


.texto-cookies h3 {

    color: #ffffff;

    font-size: 17px;

    margin-bottom: 9px;
}


.texto-cookies p {

    color: #bfbfbf;

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


.texto-cookies a {

    color: #d7aadd;

    font-weight: bold;
}


/* =========================================================
   BOTÕES
========================================================= */

.acoes-cookies {

    display: flex;

    gap: 10px;

    flex-shrink: 0;
}


.acoes-cookies button {

    cursor: pointer;

    padding: 12px 20px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: bold;

    transition: 0.3s ease;
}


/* Botão rejeitar */

.botao-rejeitar-cookies {

    background: transparent;

    color: #d7aadd;

    border:
        1px solid rgba(215, 170, 221, 0.45);
}


.botao-rejeitar-cookies:hover {

    background:
        rgba(215, 170, 221, 0.08);

    color: #ffffff;
}


/* Botão aceitar */

.botao-aceitar-cookies {

    background: #d7aadd;

    color: #120917;

    border:
        1px solid #d7aadd;
}


.botao-aceitar-cookies:hover {

    background: #ffffff;

    border-color: #ffffff;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .banner-cookies {

        left: 12px;
        right: 12px;
        bottom: 12px;

        padding: 20px;
    }


    .conteudo-cookies {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;
    }


    .acoes-cookies {

        width: 100%;
    }


    .acoes-cookies button {

        flex: 1;

        padding: 13px 10px;
    }

}

/* =====================================================
   MENU HAMBÚRGUER - MOBILE
===================================================== */

/* Botão escondido no computador */
.botao-menu-mobile {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

/* Barrinhas do botão */
.botao-menu-mobile span {
    display: block;
    width: 28px;
    height: 3px;
    margin: 5px 0;
    background-color: #d7aadd;
    border-radius: 10px;
    transition: 0.3s;
}

/* =====================================================
   VERSÃO MOBILE
===================================================== */

@media (max-width: 768px) {

    .menu-navegacao {
        position: relative;

        display: flex;
        justify-content: flex-end;
        align-items: center;

        padding: 18px 24px;
    }

    /* Mostra o botão hambúrguer */
    /* =====================================================
   BOTÃO HAMBÚRGUER PREMIUM
===================================================== */

    .botao-menu-mobile {
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 48px;
        height: 48px;

        /* Espaçamento das bordas */
        margin-right: 4px;
        margin-top: 2px;

        /* Fundo escuro transparente */
        background: rgba(18, 9, 23, 0.85);

        /* Borda lilás */
        border: 1px solid rgba(215, 170, 221, 0.35);

        border-radius: 12px;

        cursor: pointer;

        /* Brilho suave */
        box-shadow:
            0 0 15px rgba(255, 43, 166, 0.12);

        transition: 0.3s;

        z-index: 1001;
    }

    /* Barrinhas do hambúrguer */
    .botao-menu-mobile span {
        display: block;

        width: 24px;
        height: 3px;

        margin: 3px 0;

        background: #d7aadd;

        border-radius: 10px;

        transition: 0.3s;
    }

    /* Menu fechado por padrão */
    .menu-navegacao ul {
        display: none;

        position: absolute;
        top: 100%;
        right: 15px;

        width: 220px;

        flex-direction: column;

        background: #120917;

        border: 1px solid rgba(215, 170, 221, 0.25);
        border-radius: 14px;

        padding: 12px;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.45),
            0 0 20px rgba(120, 40, 200, 0.15);

        z-index: 1000;
    }

    /* Menu aberto */
    .menu-navegacao ul.menu-aberto {
        display: flex;
    }

    /* Cada opção */
    .menu-navegacao ul li {
        width: 100%;
        list-style: none;
    }

    /* Links */
    .menu-navegacao ul li a {
        display: block;
        width: 100%;

        padding: 12px 14px;

        color: #ffffff;
        text-decoration: none;

        border-radius: 8px;
    }

    /* Efeito ao tocar/passar */
    .menu-navegacao ul li a:hover {
        background: rgba(215, 170, 221, 0.12);
        color: #d7aadd;
    }

}