/* =====================================================
   RESET
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #06152f;
    color: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}


/* =====================================================
   VARIAVEIS
===================================================== */

:root {

    --azul-escuro: #06152f;
    --azul: #0b2550;
    --azul-claro: #153a76;

    --dourado: #f5c542;
    --dourado-claro: #ffe58a;
    --dourado-escuro: #b98509;

    --branco: #ffffff;
    --cinza: #aebbd0;

    --verde: #20b26b;

    --roxo: #5c3dbb;
    --vermelho: #a92c3d;
    --laranja: #d87921;

}


/* =====================================================
   TOPO
===================================================== */

.topo {

    position: sticky;
    top: 0;
    z-index: 100;

    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5%;

    background:
        rgba(6, 21, 47, 0.96);

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

    backdrop-filter: blur(15px);

}

.logo {

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;

}

.logo span {
    color: var(--dourado);
}

.botao-menu {

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 12px;

    background: #102957;
    color: white;

    cursor: pointer;

    font-size: 23px;

    transition: 0.25s;

}

.botao-menu:hover {
    background: var(--dourado);
    color: var(--azul-escuro);
    transform: scale(1.05);
}

.botao-topo {

    background:
        linear-gradient(
            135deg,
            var(--dourado),
            var(--dourado-claro)
        );

    color: var(--azul-escuro);

    padding: 12px 20px;

    border-radius: 12px;

    font-weight: 900;

    box-shadow:
        0 8px 25px
        rgba(245, 197, 66, 0.20);

    transition: 0.25s;

}

.botao-topo:hover {
    transform: translateY(-2px);
}


/* =====================================================
   MENU LATERAL
===================================================== */

.menu-overlay {

    position: fixed;
    inset: 0;

    background:
        rgba(0, 0, 0, 0.70);

    z-index: 199;

    opacity: 0;
    visibility: hidden;

    transition: 0.3s;

}

.menu-overlay.ativo {

    opacity: 1;
    visibility: visible;

}


.menu-lateral {

    position: fixed;

    top: 0;
    left: 0;

    width: 310px;
    max-width: 85%;

    height: 100vh;

    background:
        linear-gradient(
            180deg,
            #091d40,
            #06152f
        );

    z-index: 200;

    padding: 30px;

    transform: translateX(-100%);

    transition: 0.35s;

    box-shadow:
        15px 0 50px
        rgba(0, 0, 0, 0.35);

    /* PERMITE ROLAR O MENU */
    overflow-y: auto;

    /* EVITA QUE A BARRA DE ROLAGEM FIQUE COLADA NO CONTEÚDO */
    scrollbar-width: thin;

}


.menu-lateral.aberto {
    transform: translateX(0);
}

.fechar-menu {

    position: absolute;

    top: 18px;
    right: 18px;

    border: none;
    background: none;

    color: white;

    font-size: 32px;

    cursor: pointer;

}

.menu-logo {

    font-size: 24px;
    font-weight: 900;

    margin:
        20px
        0
        35px;

}

.menu-logo span {
    color: var(--dourado);
}

.menu-lateral nav {

    display: flex;
    flex-direction: column;

    gap: 8px;

}

.menu-lateral nav a {

    padding: 14px 15px;

    border-radius: 10px;

    font-weight: 700;

    transition: 0.2s;

}

.menu-lateral nav a:hover {

    background: #123267;
    color: var(--dourado);

    transform: translateX(4px);

}


/* =====================================================
   HERO
===================================================== */

.hero {

    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 80px 7%;

    background:
        radial-gradient(
            circle at 80% 30%,
            #153a76,
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(245, 197, 66, 0.08),
            transparent 30%
        ),
        var(--azul-escuro);

}

.hero-conteudo {

    width: 100%;
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 50px;

    align-items: center;

}

.pequeno-titulo {

    color: var(--dourado);

    font-weight: 900;

    letter-spacing: 2px;

    font-size: 14px;

}

.hero h1 {

    font-size:
        clamp(
            45px,
            6vw,
            82px
        );

    line-height: 0.98;

    margin: 20px 0;

}

.hero h1 span {

    display: block;

    color: var(--dourado);

}

.hero-descricao {

    max-width: 600px;

    font-size: 19px;

    color: #b8c4d8;

}

.botoes {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}

.botao-principal,
.botao-secundario,
.botao-jogar,
.botao-afiliado,
.botao-programacao {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 14px 22px;

    border-radius: 12px;

    font-weight: 900;

    cursor: pointer;

    border: none;

    transition:
        0.25s ease;

}


/* ======================================================
   VER NOSSAS SALAS — AZUL CLARO
====================================================== */

.botao-principal {

    background:
        linear-gradient(
            135deg,
            #4db8ff,
            #78d4ff
        );

    color: #082044;

    box-shadow:
        0 10px 30px
        rgba(77, 184, 255, 0.22);

}

.botao-principal:hover {

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

    box-shadow:
        0 14px 35px
        rgba(77, 184, 255, 0.35);

}


/* ======================================================
   GANHE SEU BÔNUS — VERDE
====================================================== */

.botao-secundario {

    background:
        linear-gradient(
            135deg,
            #20b866,
            #45df8b
        );

    color: white;

    box-shadow:
        0 10px 30px
        rgba(32, 184, 102, 0.20);

}

.botao-secundario:hover {

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

    box-shadow:
        0 14px 35px
        rgba(32, 184, 102, 0.35);

}


/* ======================================================
   JOGUE AGORA — AMARELO
====================================================== */

.botao-jogar {

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffe27a
        );

    color: #102957;

    box-shadow:
        0 10px 30px
        rgba(245, 197, 66, 0.22);

}

.botao-jogar:hover {

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

    box-shadow:
        0 14px 35px
        rgba(245, 197, 66, 0.38);

}


/* ======================================================
   SEJA UM AFILIADO — LARANJA
====================================================== */

.botao-afiliado {

    background:
        linear-gradient(
            135deg,
            #f47b20,
            #ffad42
        );

    color: white;

    box-shadow:
        0 10px 30px
        rgba(244, 123, 32, 0.22);

}

.botao-afiliado:hover {

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

    box-shadow:
        0 14px 35px
        rgba(244, 123, 32, 0.38);

}

/* ======================================================
   TODAS AS PARTIDAS — ROXO
====================================================== */

.botao-programacao {

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #b78cff
        );

    color: white;

    box-shadow:
        0 10px 30px
        rgba(139, 92, 246, 0.22);

}

.botao-programacao:hover {

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

    box-shadow:
        0 14px 35px
        rgba(139, 92, 246, 0.38);

}

/* =====================================================
   SEÇÕES
===================================================== */

section {
    padding: 90px 6%;
}

.titulo-secao {

    text-align: center;

    max-width: 750px;

    margin:
        0
        auto
        45px;

}

.titulo-secao span {

    color: var(--dourado);

    font-weight: 900;

    font-size: 13px;

    letter-spacing: 2px;

}

.titulo-secao h2 {

    font-size:
        clamp(
            32px,
            5vw,
            52px
        );

    margin: 10px 0;

}

.titulo-secao p {
    color: #aebbd0;
}


/* =====================================================
   CADASTRO — BRANCO
===================================================== */

.cadastro {

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f6fa
        );

    color: #14233c;

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 45px;

    align-items: center;

}

.selo-bonus {

    display: inline-block;

    background:
        rgba(245, 197, 66, 0.14);

    border:
        1px solid
        rgba(185, 133, 9, 0.30);

    color: #9a6b00;

    padding: 7px 13px;

    border-radius: 50px;

    font-weight: 900;

    font-size: 12px;

}

.cadastro-info h2 {

    font-size:
        clamp(
            34px,
            5vw,
            55px
        );

    line-height: 1;

    margin: 18px 0;

}

.cadastro-info h2 span {

    display: block;

    color: #b98509;

}

.cadastro-info > p {

    color: #5f6b7d;

    max-width: 520px;

}

.beneficios {

    display: grid;

    gap: 10px;

    margin-top: 22px;

}

.beneficios div {

    display: flex;

    align-items: center;

    gap: 12px;

}

.beneficios strong {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--dourado);

    color: var(--azul-escuro);

}

.cadastro-formulario {

    background: white;

    color: #14233c;

    padding: 28px;

    border-radius: 20px;

    box-shadow:
        0 15px 45px
        rgba(15, 31, 55, 0.13);

    border:
        1px solid
        #e4e8ef;

}

.cadastro-formulario h3 {
    font-size: 25px;
}

.cadastro-formulario > p {

    color: #667085;

    margin:
        4px
        0
        18px;

}

.cadastro-formulario form {

    display: grid;

    gap: 6px;

}

.cadastro-formulario label {

    font-size: 12px;

    font-weight: 800;

    margin-top: 5px;

}

.cadastro-formulario input,
.cadastro-formulario select {

    width: 100%;

    padding: 12px 14px;

    border:
        1px solid
        #d6dce5;

    border-radius: 9px;

    outline: none;

    color: #14233c;

    background: #fafbfc;

}

.cadastro-formulario input:focus {

    border-color: #d3a515;

    background: white;

}

.cadastro-formulario button {

    margin-top: 12px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffd967
        );

    color: #06152f;

    font-weight: 900;

    cursor: pointer;

    transition: 0.25s;

}

.cadastro-formulario button:hover {
    transform: translateY(-2px);
}


/* =====================================================
   SALAS
===================================================== */

.salas {

    background:
        linear-gradient(
            180deg,
            #06152f,
            #0b1e40
        );

}

.salas-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

.sala-card {

    min-width: 0;

    border-radius: 22px;

    padding: 28px;

    text-align: center;

    border: none;

    position: relative;

    overflow: hidden;

    transition: 0.25s;

}

.sala-card:hover {
    transform: translateY(-5px);
}


/* BINGO */

.sala-card:nth-child(1) {

    background:
        linear-gradient(
            145deg,
            #154d8c,
            #0b2d5a
        );

}


/* KENO BINGO */

.sala-card:nth-child(2) {

    background:
        linear-gradient(
            145deg,
            #59368f,
            #301d59
        );

}


/* KENO VEM SER FELIZ */

.sala-card:nth-child(3) {

    background:
        linear-gradient(
            145deg,
            #b85628,
            #703015
        );

}

.sala-logo {

    min-height: 105px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    font-size: 28px;

    font-weight: 900;

    line-height: 1.05;

}

.sala-card p {

    color: rgba(255,255,255,0.80);

    margin:
        10px
        0
        20px;

    font-size: 14px;

}

.botao-sala {

    display: block;

    background:
        linear-gradient(
            135deg,
            var(--dourado),
            var(--dourado-claro)
        );

    color: var(--azul-escuro);

    padding: 13px;

    border-radius: 10px;

    font-weight: 900;

    transition: 0.2s;

}

.botao-sala:hover {
    transform: scale(1.03);
}



/* =====================================================
   PARTIDAS ESPECIAIS — NOVO LAYOUT
===================================================== */

.proxima-partida {

    background: #ffffff;

    padding-top: 70px;
    padding-bottom: 70px;

}


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

.proxima-partida .titulo-secao {

    text-align: center;

    margin-bottom: 35px;

}

.proxima-partida .titulo-secao span {

    color: #c99a24;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 3px;

}

.proxima-partida .titulo-secao h2 {

    color: #17244d;

    font-size: 38px;

    font-weight: 900;

    margin:
        8px
        0
        10px;

}

.proxima-partida .titulo-secao p {

    color: #667085;

}


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

.proxima-partida-card {

    max-width: 1100px;

    margin: auto;

    display: grid;

    gap: 24px;

    padding:
        0
        20px;

}


/* =====================================================
   CARD DA PARTIDA
===================================================== */

.partida-especial-card {

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border:
        1px solid
        #e6e8ee;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    box-shadow:
        0 15px 45px
        rgba(23,36,77,0.14);

}


/* =====================================================
   IMAGEM
===================================================== */

.partida-especial-imagem {

    width: 100%;

    height: 100%;

    min-height: 340px;

    object-fit: cover;

}

.partida-sem-imagem {

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #17244d,
            #c99a24
        );

    color: #ffffff;

    font-weight: 900;

    font-size: 26px;

}


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

.partida-especial-conteudo {

    padding: 28px;

    color: #17244d;

}


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

.partida-destaque {

    display: block;

    text-align: center;

    color: #c99a24;

    font-weight: 900;

    font-size: 11px;

    letter-spacing: 2px;

    margin-bottom: 8px;

}

.partida-sala {
    text-align: center;
    color: #17244d;
    font-weight: 900;
    font-size: 14px;
    margin: 2px 0 8px;
    letter-spacing: 0.5px;
}

/* =====================================================
   NOME DA PARTIDA
===================================================== */

.partida-especial-conteudo h3 {

    text-align: center;

    color: #17244d;

    font-size: 30px;

    line-height: 1.15;

    margin:
        0
        0
        22px;

    font-weight: 900;

}


/* =====================================================
   DATA E HORÁRIO
===================================================== */

.partida-info {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    margin-bottom: 18px;

}

.partida-info span {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        12px
        10px;

    border-radius: 12px;

    background: #f4f6fa;

    border:
        1px solid
        #e3e7ef;

    color: #667085;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}

.partida-info strong {

    margin-top: 5px;

    color: #17244d;

    font-size: 16px;

    font-weight: 900;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 768px) {

    .proxima-partida {

        padding-top: 50px;

        padding-bottom: 50px;

    }


    .proxima-partida .titulo-secao h2 {

        font-size: 30px;

    }


    .partida-especial-card {

    grid-template-columns: 1fr;

}


.partida-especial-imagem {

    min-height: 180px;

    max-height: 210px;

}


.partida-sem-imagem {

    min-height: 180px;

}


.partida-especial-conteudo {

    padding: 16px;

}


.partida-especial-conteudo h3 {

    font-size: 23px;

    margin-bottom: 16px;

}


.partida-info {

    gap: 7px;

    margin-bottom: 14px;

}


.partida-info span {

    padding:
        10px
        7px;

}


.partida-info strong {

    font-size: 14px;

}
}


/* =====================================================
   CONTADOR
===================================================== */

.contador-partida {

    background: #07152e;

    padding: 17px;

    border-radius: 14px;

    text-align: center;

    margin-bottom: 18px;

}

.contador-partida > small {

    color: var(--dourado);

    font-weight: 900;

}

.contador-numeros {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;

    margin-top: 10px;

}

.contador-numeros div {

    background: #ffffff;

    border: 1px solid #d5dce7;

    border-radius: 7px;

    padding: 6px 3px;

}




.contador-numeros strong {

    display: block;

    font-size: 20px;

    line-height: 1;

    color: #17244d !important;

    font-weight: 900;

}





.contador-numeros small {

    display: block;

    margin-top: 3px;

    font-size: 8px;

    font-weight: 700;

    color: #7b8799;

}



/* =====================================================
   PRÊMIOS DA PARTIDA
===================================================== */

.premios-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

}


/* =====================================================
   KUADRA E KINA
===================================================== */

.premios-grid > div:nth-child(1),
.premios-grid > div:nth-child(2) {

    padding: 18px 16px;

    background: #eef4ff;

    border: 1px solid #c9d9f2;

    border-radius: 12px;

    min-height: 90px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

/* =====================================================
   CENTRALIZAR CAIXAS KUADRA E KINA
===================================================== */

.premios-grid > div:nth-child(1),
.premios-grid > div:nth-child(2) {

    width: 150px;
    justify-self: center;

}

/* =====================================================
   NOME — KUADRA E KINA
===================================================== */

.premios-grid > div:nth-child(1) span,
.premios-grid > div:nth-child(2) span {

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    text-align: center !important;

    color: #17244d !important;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


/* =====================================================
   VALOR — KUADRA E KINA
===================================================== */

.premios-grid > div:nth-child(1) strong,
.premios-grid > div:nth-child(2) strong {

    display: block;

    width: 100%;

    margin: 4px 0 0;

    padding: 0;

    text-align: center !important;

    color: #c99a24 !important;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.1;

}
/* =====================================================
   KENO - PRÊMIO PRINCIPAL
===================================================== */

.premios-grid div:nth-child(3) {

    grid-column: 1 / -1;

    padding: 17px 14px;

    background:
        linear-gradient(
            135deg,
            #e9f8ef,
            #d9f1e2
        );

    border:
        2px solid
        #65b982;

    border-radius: 14px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 88px;

    box-sizing: border-box;

    box-shadow:
        0 5px 15px
        rgba(52, 140, 82, 0.14);

}


/* =====================================================
   TÍTULO DOS PRÊMIOS
===================================================== */

.premios-grid span {

    display: block;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: #ffffff;

}


/* =====================================================
   VALOR DOS PRÊMIOS
===================================================== */

.premios-grid strong {

    display: block;

    color: var(--dourado);

    margin-top: 4px;

    font-size: 19px;

    font-weight: 800;

}


/* NOME DO KENO */

.premios-grid div:nth-child(3) span {

    color: #176b3a;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-align: center;

}

/* =====================================================
   PREÇOS
===================================================== */

.precos-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin: 12px 0;

}


.precos-grid div {

    padding: 11px;

    border-radius: 10px;

    text-align: center;

}


/* CARTELA ANTECIPADA */

.precos-grid .preco-antecipado {

    background: #eaf8ee;

    border:
        1px solid
        #b9dfc2;

}


.precos-grid .preco-antecipado small {

    color: #2e7d4f;

}


/* CARTELA NO DIA */

.precos-grid .preco-dia {

    background: #fff3df;

    border:
        1px solid
        #f0c98a;

}


.precos-grid .preco-dia small {

    color: #b56b00;

}


/* TEXTOS */

.precos-grid small {

    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.3px;

}


.precos-grid strong {

    display: block;

    margin-top: 4px;

    font-size: 18px;

    font-weight: 900;

    color: #17244d;

}


/* =====================================================
   GANHADORES — NOVA COR
===================================================== */

.ganhadores {

    background:
        linear-gradient(
            180deg,
            #321d3f,
            #21152d
        );

}

.ganhadores .titulo-secao span {
    color: #f4b6df;
}

.ganhadores-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

.ganhador-card {

    background:
        linear-gradient(
            145deg,
            #51315f,
            #301d3d
        );

    border-radius: 20px;
border: none;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.20);

}

.ganhador-imagem {

    width: 100%;

    height: 230px;

    object-fit: cover;

}

.ganhador-sem-foto {

    height: 230px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 65px;

    background:
        linear-gradient(
            135deg,
            #613c70,
            #321e40
        );

}

.ganhador-conteudo {

    padding: 20px;

}

.ganhador-conteudo > span {

    color: #f4b6df;

    font-size: 11px;

    font-weight: 900;

}

.ganhador-conteudo h3 {

    margin: 6px 0 12px;

    font-size: 22px;

}


/* KUADRA + KINA */

.ganhador-premios {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

}

.ganhador-premios div {

    background:
        rgba(255,255,255,0.07);

    border-radius: 9px;

    padding: 10px;

    text-align: center;

}

.ganhador-premios span {

    display: block;

    color: #c7b4ce;

    font-size: 9px;

}

.ganhador-premios strong {

    color: #f4b6df;

    font-size: 17px;

}


/* KENO */

.ganhador-keno {

    margin-top: 8px;

    padding: 13px;

    border-radius: 10px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(245,197,66,0.20),
            rgba(245,197,66,0.07)
        );

    border:
        1px solid
        rgba(245,197,66,0.30);

}

.ganhador-keno span {

    display: block;

    font-size: 10px;

    color: #d7c58d;

}

.ganhador-keno strong {

    display: block;

    color: var(--dourado);

    font-size: 28px;

}


/* =====================================================
   QUIZ — ROXO
===================================================== */

.quiz-section {

    background:
        linear-gradient(
            135deg,
            #26184d,
            #42246e
        );

}

.quiz-box {

    max-width: 850px;

    margin: auto;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid
        rgba(255,255,255,0.14);

    padding: 45px;

    border-radius: 25px;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.18);

}

.quiz-box h2 {

    font-size:
        clamp(
            30px,
            5vw,
            50px
        );

    margin: 15px 0;

}

.quiz-box p {

    color: #d5cce5;

    margin-bottom: 30px;

}

.quiz-escondido {
    display: none;
}

.quiz-progresso {

    color: #f2d27a;

    font-weight: 900;

    font-size: 12px;

}

#perguntaTexto {

    font-size: 23px;

    font-weight: 800;

    margin: 25px 0;

}

.opcoes-quiz {

    display: grid;

    gap: 12px;

}

.opcao-quiz {

    width: 100%;

    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    background:
        rgba(255,255,255,0.08);

    color: white;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 700;

    text-align: left;

    transition: 0.2s;

}

.opcao-quiz:hover {

    border-color: #f5c542;

    background:
        rgba(245,197,66,0.10);

    transform: translateY(-2px);

}

.resultado-partidas {

    display: grid;

    gap: 15px;

    margin: 25px 0;

}


/* =====================================================
   LINKS — VERDE
===================================================== */

.links-section {

    background:
        linear-gradient(
            180deg,
            #0c4036,
            #082d27
        );

}

.links-section .titulo-secao span {
    color: #6fe0b9;
}

.busca-links {

    max-width: 650px;

    margin:
        0
        auto
        30px;

}

.busca-links input {

    width: 100%;

    padding: 16px;

    border-radius: 12px;

    border:
        2px solid
        rgba(255,255,255,0.10);

    background:
        rgba(255,255,255,0.96);

    color: #14233c;

    outline: none;

}

.busca-links input:focus {

    border-color: #6fe0b9;

}

.links-grid {

    max-width: 1000px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

}

.link-ponto {

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 12px;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}

.link-ponto span {

    color: #6fe0b9;

    font-size: 11px;

    font-weight: 900;

}


/* =====================================================
   COMO FUNCIONA — LARANJA
===================================================== */

.como-funciona {

    background:
        linear-gradient(
            180deg,
            #593018,
            #351d10
        );

}

.como-funciona .titulo-secao span {
    color: #ffc06e;
}

.passos {

    max-width: 1000px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;

}

.passo {

    display: flex;

    gap: 18px;

    padding: 22px;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 15px;

}

.passo-numero {

    font-size: 25px;

    font-weight: 900;

    color: #ffc06e;

}

.passo h3 {
    margin-bottom: 5px;
}

.passo p {
    color: #dcc5b3;
}


/* =====================================================
   AFILIADO
===================================================== */

.afiliado {

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #b98509
        );

    color: #06152f;

    text-align: center;

}

.afiliado-conteudo {

    max-width: 700px;

    margin: auto;

}

.afiliado .pequeno-titulo {
    color: #06152f;
}

.afiliado h2 {

    font-size:
        clamp(
            40px,
            6vw,
            70px
        );

    line-height: 1;

    margin: 15px 0;

}

.afiliado h2 span {
    display: block;
}

.afiliado p {
    margin-bottom: 30px;
}

.afiliado .botao-principal {

    background: #06152f;

    color: white;

}


/* =====================================================
   POPUP
===================================================== */

.popup-overlay {

    position: fixed;

    inset: 0;

    z-index: 999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0,0,0,0.75);

    opacity: 0;

    visibility: hidden;

    transition: 0.3s;

}

.popup-overlay.ativo {

    opacity: 1;

    visibility: visible;

}

.popup-cadastro {

    width: 100%;

    max-width: 500px;

    background: white;

    color: #14233c;

    border-radius: 25px;

    padding: 40px 30px;

    text-align: center;

    position: relative;

    animation:
        aparecerPopup
        0.3s
        ease;

}

@keyframes aparecerPopup {

    from {

        transform:
            scale(0.85)
            translateY(20px);

        opacity: 0;

    }

    to {

        transform:
            scale(1)
            translateY(0);

        opacity: 1;

    }

}

.popup-fechar {

    position: absolute;

    top: 12px;
    right: 18px;

    border: none;
    background: none;

    font-size: 30px;

    cursor: pointer;

    color: #777;

}

.popup-icone {

    width: 70px;
    height: 70px;

    margin:
        0
        auto
        20px;

    border-radius: 50%;

    background: var(--verde);

    color: white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 35px;

    font-weight: 900;

}

.popup-cadastro h2 {

    font-size: 28px;

    margin-bottom: 12px;

}

.popup-cadastro p {

    color: #667085;

    margin-bottom: 25px;

}

.popup-botao-whatsapp {

    display: block;

    background: var(--verde);

    color: white;

    padding: 16px;

    border-radius: 12px;

    font-weight: 900;

}

.popup-agora-nao {

    margin-top: 15px;

    border: none;

    background: none;

    color: #777;

    cursor: pointer;

    font-weight: 700;

}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-flutuante {

    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: var(--verde);

    color: white;

    z-index: 150;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

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

    transition: 0.25s;

}

.whatsapp-flutuante:hover {

    transform:
        scale(1.08);

}


/* =====================================================
   MENSAGENS
===================================================== */

.carregando,
.sem-resultados {

    text-align: center;

    padding: 30px;

    color: #9eabc0;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    padding:
        40px
        6%;

    background: #030c1d;

    text-align: center;

}

.footer-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin:
        20px
        0;

}

.footer-links a {

    color: #aab7ca;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 900px) {

    .hero-conteudo,
    .cadastro {

        grid-template-columns:
            1fr;

    }

    .hero {

        text-align: center;

    }

    .hero-descricao {
        margin: auto;
    }

    .botoes {
        justify-content: center;
    }


    /* SALAS NO CELULAR */

    .salas-grid {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 14px;

        padding:
            5px
            5px
            15px;

        scrollbar-width: none;

    }

    .salas-grid::-webkit-scrollbar {
        display: none;
    }

    .sala-card {

        flex:
            0 0
            calc(33.333% - 10px);

        min-width: 0;

        padding: 20px 12px;

        scroll-snap-align: start;

    }

    .sala-logo {
        font-size: 20px;
        min-height: 90px;
    }

    .sala-card p {
        font-size: 11px;
    }


    /* PARTIDA */

    .partida-especial-card {

        grid-template-columns:
            1fr;

    }

    .partida-especial-imagem,
    .partida-sem-imagem {

        min-height: 280px;

    }


    /* GANHADORES */

    .ganhadores-grid {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 15px;

        padding:
            5px
            5px
            15px;

        scrollbar-width: none;

    }

    .ganhadores-grid::-webkit-scrollbar {
        display: none;
    }

    .ganhador-card {

        flex:
            0 0
            75%;

        scroll-snap-align: start;

    }

}


@media (max-width: 600px) {

    section {

        padding:
            55px
            5%;

    }


    .topo {

        padding:
            0
            4%;

    }

    .logo {
        font-size: 20px;
    }

    .botao-topo {

        padding:
            9px
            12px;

        font-size: 10px;

    }


    /* HERO */

    .hero {

        padding:
            55px
            5%;

    }

    .hero h1 {

        font-size: 47px;

    }

    .hero-descricao {

        font-size: 16px;

    }

    .botoes {

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 8px;

    }

    .botao-principal,
    .botao-secundario {

        width: 100%;

        padding:
            12px
            10px;

        font-size: 12px;

    }


    /* BOLAS */

    .hero-visual {

        min-height: 300px;

    }

   
    .bola {

        width: 52px;
        height: 52px;

        font-size: 18px;

    }


    /* CADASTRO */

    .cadastro {

        gap: 25px;

    }

    .cadastro-info h2 {

        font-size: 38px;

    }

    .beneficios {
        display: none;
    }

    .cadastro-formulario {

        padding: 22px;

    }


    /* SALAS */

    .salas-grid {

        margin-left: -2px;
        margin-right: -2px;

    }

    .sala-card {

        flex:
            0 0
            calc(33.333% - 9px);

        padding:
            18px
            8px;

        border-radius: 15px;

    }

    .sala-logo {

        min-height: 75px;

        font-size: 16px;

    }

    .sala-card p {

        display: none;

    }

    .botao-sala {

        font-size: 10px;

        padding: 10px 5px;

    }


    /* PARTIDAS */

    .partida-especial-card {

        border-radius: 17px;

    }

    .partida-especial-imagem,
    .partida-sem-imagem {

        min-height: 200px;

        max-height: 220px;

    }

    .partida-especial-conteudo {

        padding: 20px;

    }

    .partida-especial-conteudo h3 {

        font-size: 27px;

    }

    .partida-info {

        gap: 12px;

    }


    /* CONTADOR */

    .contador-partida {

        padding: 13px;

    }

    .contador-numeros strong {

        font-size: 18px;

    }


    /* PRÊMIOS */

    .premios-grid {

        grid-template-columns:
            1fr
            1fr;

    }

    .premios-grid div:nth-child(3) strong {

    margin-top: 5px;

    color: #125c32;

    font-size: 32px;

    font-weight: 950;

    line-height: 1;

    text-align: center;



    }


    /* GANHADORES */

    .ganhador-card {

        flex:
            0 0
            82%;

    }

    .ganhador-imagem,
    .ganhador-sem-foto {

        height: 190px;

    }


    /* QUIZ */

    .quiz-box {

        padding:
            30px
            18px;

        border-radius: 20px;

    }

    #perguntaTexto {

        font-size: 19px;

    }


    /* LINKS */

    .links-grid {

        grid-template-columns:
            1fr;

    }


    /* COMO FUNCIONA */

    .passos {

        grid-template-columns:
            1fr;

    }


    /* WHATSAPP */

    .whatsapp-flutuante {

        width: 55px;
        height: 55px;

        right: 15px;
        bottom: 15px;

    }

}
/* =====================================================
   COMO JOGAR — CHAMADA
===================================================== */

.botao-como-jogar {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 10px;

    padding: 14px 24px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffe27a
        );

    color: #102957;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(245, 197, 66, 0.20);

    transition:
        0.25s ease;

}

.botao-como-jogar span {

    font-size: 20px;

    line-height: 1;

}

.botao-como-jogar:hover {

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

    box-shadow:
        0 15px 35px
        rgba(245, 197, 66, 0.35);

}

/* =====================================================
   TUTORIAL — COMO JOGAR
===================================================== */

.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);
}


.tutorial-overlay.ativo {
    display: flex;
}


/* =====================================================
   CAIXA
===================================================== */

.tutorial-box {
    position: relative;

    width: 100%;
    max-width: 600px;

    max-height: 90vh;

    overflow: hidden;

    padding: 35px 30px 25px;

    border-radius: 24px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}


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

.tutorial-fechar {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: transparent;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    z-index: 5;
}


/* =====================================================
   INDICADORES
===================================================== */

.tutorial-indicadores {
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-bottom: 25px;
}


.tutorial-indicadores .indicador {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #d0d0d0;

    transition: 0.3s;
}


.tutorial-indicadores .indicador.ativo {
    width: 25px;

    border-radius: 10px;

    background: #d4a72c;
}


/* =====================================================
   SLIDES
===================================================== */

/* TODOS OS SLIDES FICAM ESCONDIDOS */

.tutorial-slide {
    display: none;

    min-height: 350px;

    align-items: center;
    justify-content: center;

    flex-direction: column;
}


/* SOMENTE O SLIDE ATIVO APARECE */

.tutorial-slide.ativo {
    display: flex;
}


/* =====================================================
   NÚMERO
===================================================== */

.tutorial-numero {
    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: 0.5;
}


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

.tutorial-icone {
    margin-bottom: 15px;

    font-size: 55px;
}


/* =====================================================
   ETAPA
===================================================== */

.tutorial-etapa {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}


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

.tutorial-slide h2 {
    margin: 0 0 15px;

    font-size: 28px;

    line-height: 1.2;
}


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

.tutorial-slide p {
    max-width: 500px;

    margin: 10px auto;

    font-size: 16px;

    line-height: 1.6;
}


/* =====================================================
   DESTAQUES
===================================================== */

.tutorial-destaque,
.tutorial-exemplo {
    margin: 18px auto;

    padding: 12px 18px;

    border-radius: 12px;

    background: #f3f3f3;

    font-weight: 700;
}


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

.tutorial-botoes-final {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;
}


.tutorial-jogue,
.tutorial-continuar {
    padding: 12px 20px;

    border-radius: 10px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}


.tutorial-jogue {
    background: #d4a72c;

    color: #ffffff;
}


.tutorial-continuar {
    border: none;

    background: #eeeeee;

    color: #222222;
}


/* =====================================================
   NAVEGAÇÃO
===================================================== */

.tutorial-navegacao {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;
}


.tutorial-nav {
    border: none;

    background: transparent;

    font-weight: 800;

    cursor: pointer;
}


#tutorialContador {
    font-size: 14px;

    font-weight: 700;
}


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

@media (max-width: 600px) {

    .tutorial-box {
        padding: 30px 20px 20px;

        border-radius: 20px;
    }


    .tutorial-slide {
        min-height: 380px;
    }


    .tutorial-slide h2 {
        font-size: 24px;
    }


    .tutorial-slide p {
        font-size: 15px;
    }


    .tutorial-icone {
        font-size: 48px;
    }


    .tutorial-navegacao {
        gap: 8px;
    }


    .tutorial-nav {
        font-size: 12px;
    }

}
/* =====================================================
   CORES DO TUTORIAL
===================================================== */

.tutorial-box {
    background: #ffffff;
    color: #172033;
}


.tutorial-fechar {
    color: #172033;
}


.tutorial-numero {
    color: #c99a24;
}


.tutorial-etapa {
    color: #c99a24;
}


.tutorial-slide h2 {
    color: #172033;
}


.tutorial-slide p {
    color: #4b5563;
}


.tutorial-destaque,
.tutorial-exemplo {
    background: #f7f3e7;
    color: #172033;
    border: 1px solid #e5d39a;
}


.tutorial-indicadores .indicador {
    background: #d1d5db;
}


.tutorial-indicadores .indicador.ativo {
    background: #c99a24;
}


.tutorial-nav {
    color: #172033;
}


#tutorialContador {
    color: #c99a24;
}


.tutorial-jogue {
    background: #c99a24;
    color: #ffffff;
}


.tutorial-continuar {
    background: #f1f3f5;
    color: #172033;
    border: 1px solid #d9dde3;
}
/* =====================================================
   TUTORIAL PROFISSIONAL
===================================================== */

.tutorial-box {
    position: relative;

    background: #ffffff;

    border: 1px solid rgba(201, 154, 36, 0.18);

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.25);

    border-radius: 28px;

    padding: 38px 35px 25px;

    overflow: hidden;
}


/* =====================================================
   LINHA DOURADA NO TOPO
===================================================== */

.tutorial-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #c99a24,
        #e5c45c,
        #c99a24
    );
}


/* =====================================================
   SLIDE
===================================================== */

.tutorial-slide {
    position: relative;

    min-height: 360px;

    padding: 10px 10px 5px;
}


/* =====================================================
   NÚMERO DO PASSO
===================================================== */

.tutorial-numero {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #f7f3e7;

    border: 2px solid #e5d39a;

    color: #c99a24;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 5px 15px rgba(201, 154, 36, 0.12);
}


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

.tutorial-icone {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    margin: 0 auto 18px;

    border-radius: 22px;

    background: linear-gradient(
        145deg,
        #fffaf0,
        #f5edd7
    );

    border: 1px solid #ead9a7;

    font-size: 40px;

    box-shadow:
        0 10px 25px rgba(201, 154, 36, 0.12);
}


/* =====================================================
   ETAPA
===================================================== */

.tutorial-etapa {
    margin-bottom: 10px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


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

.tutorial-slide h2 {
    margin: 0 auto 15px;

    max-width: 500px;

    font-size: 30px;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: -0.5px;
}


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

.tutorial-slide p {
    max-width: 500px;

    margin: 10px auto;

    font-size: 16px;

    line-height: 1.65;
}


/* =====================================================
   DESTAQUES
===================================================== */

.tutorial-destaque,
.tutorial-exemplo {
    display: inline-block;

    margin: 20px auto;

    padding: 13px 20px;

    border-radius: 14px;

    background: #faf7ee;

    border: 1px solid #ead9a7;

    color: #172033;

    font-size: 15px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.04);
}


/* =====================================================
   NAVEGAÇÃO
===================================================== */

.tutorial-navegacao {
    position: relative;

    margin-top: 10px;

    padding-top: 20px;

    border-top: 1px solid #eeeeee;
}


/* =====================================================
   BOTÕES DE NAVEGAÇÃO
===================================================== */

.tutorial-nav {
    padding: 10px 14px;

    border-radius: 10px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.tutorial-nav:hover {
    transform: translateY(-2px);

    background: #f7f3e7;
}


/* =====================================================
   CONTADOR - DESTAQUE SECUNDÁRIO
===================================================== */

.contador-partida {

    background: #f1f4f9;

    padding: 10px 12px;

    border-radius: 11px;

    text-align: center;

    margin-bottom: 14px;

    border:
        1px solid
        #dce3ed;

}


/* =====================================================
   BOTÃO JOGUE AQUI
===================================================== */

.tutorial-jogue {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;

    padding: 14px 22px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 8px 20px rgba(201, 154, 36, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.tutorial-jogue:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(201, 154, 36, 0.32);
}


/* =====================================================
   CONTINUAR
===================================================== */

.tutorial-continuar {
    min-width: 150px;

    padding: 14px 22px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.tutorial-continuar:hover {
    transform: translateY(-2px);

    background: #e9ecef;
}


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

@media (max-width: 600px) {

    .tutorial-box {
        padding: 32px 20px 20px;

        border-radius: 22px;
    }


    .tutorial-slide {
        min-height: 390px;

        padding: 5px;
    }


    .tutorial-numero {
        width: 52px;
        height: 52px;
    }


    .tutorial-icone {
        width: 72px;
        height: 72px;

        font-size: 34px;
    }


    .tutorial-slide h2 {
        font-size: 24px;
    }


    .tutorial-slide p {
        font-size: 15px;
    }


    .tutorial-botoes-final {
        flex-direction: column;

        align-items: stretch;
    }


    .tutorial-jogue,
    .tutorial-continuar {
        width: 100%;
    }

}
/* =====================================================
   ANIMAÇÃO DOS SLIDES
===================================================== */

.tutorial-slide.ativo {
    animation: tutorialEntrada 0.5s ease;
}


@keyframes tutorialEntrada {

    from {
        opacity: 0;
        transform: translateX(25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}
/* =====================================================
   BARRA DE PROGRESSO DO TUTORIAL
===================================================== */

.tutorial-box::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #c99a24,
        #e5c45c
    );

    z-index: 10;
}


/* =====================================================
   PROGRESSO — ANIMAÇÃO DE 5 SEGUNDOS
===================================================== */

.tutorial-box.progresso-ativo::after {
    animation: tutorialProgresso 5s linear forwards;
}


@keyframes tutorialProgresso {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}

.botao-live {
    margin-top: 10px;
    background: transparent;
    border: 2px solid #c99a24;
    color: #c99a24;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.botao-live:hover {
    background: #c99a24;
    color: #ffffff;
    transform: translateY(-2px);
}
/* =====================================================
PARTIDAS ESPECIAIS — DETALHES
===================================================== */

.partida-detalhes {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

align-items: stretch;

margin-bottom: 18px;


}

/* =====================================================
DATA E HORÁRIO
===================================================== */

.partida-detalhes .partida-info {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 8px;

margin: 0;


}

.partida-detalhes .partida-info span {


display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 62px;

padding: 8px;

border-radius: 12px;

background: #f5f7fb;

border: 1px solid #e1e5ec;

color: #7a8496;

font-size: 9px;

font-weight: 900;

letter-spacing: 1px;


}

.partida-detalhes .partida-info strong {

margin-top: 4px;

color: #17244d;

font-size: 14px;

font-weight: 900;


}

/* =====================================================
CRONÔMETRO
===================================================== */

.partida-detalhes .contador-partida {


display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

min-height: 62px;

padding: 8px;

margin: 0;

border-radius: 12px;

background:
    linear-gradient(
        135deg,
        #17244d,
        #243765
    );

color: #ffffff;


}

.partida-detalhes .contador-titulo {


color: #d9b34c;

font-size: 9px;

font-weight: 900;

letter-spacing: 1px;

margin-bottom: 5px;


}

.partida-detalhes .contador-numeros {


display: flex;

align-items: center;

justify-content: center;

gap: 5px;


}

.partida-detalhes .contador-item {


display: flex;

flex-direction: column;

align-items: center;

min-width: 28px;


}

.partida-detalhes .contador-item strong {

color: #ffffff;

font-size: 15px;

line-height: 1;

font-weight: 900;


}

.partida-detalhes .contador-item small {


margin-top: 3px;

color: #bfc8d8;

font-size: 7px;

font-weight: 800;


}

/* =====================================================
PRÊMIOS
===================================================== */

.premios-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 8px;

margin-bottom: 14px;


}

.premios-grid > div {


text-align: center;

padding: 12px 6px;

border-radius: 12px;

background: #f5f7fb;

border: 1px solid #e1e5ec;


}

.premios-grid span {


display: block;

color: #7a8496;

font-size: 9px;

font-weight: 900;

letter-spacing: 1px;


}

.premios-grid strong {


display: block;

margin-top: 4px;

color: #17244d;

font-size: 18px;

font-weight: 900;


}

/* =====================================================
PREÇOS
===================================================== */

.precos-grid {


display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

margin-bottom: 16px;


}

.precos-grid > div {


display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 68px;

padding: 10px;

border-radius: 14px;

text-align: center;


}

/* ANTECIPADA */

.precos-grid .preco-antecipado {


background: #e8f7ef;

border: 1px solid #b9e5cb;


}

.precos-grid .preco-antecipado small {


color: #26734d;


}

/* NO DIA */

.precos-grid .preco-dia {


background: #fff2df;

border: 1px solid #f0d1a5;


}

.precos-grid .preco-dia small {


color: #a65b08;


}

.precos-grid small {


font-size: 8px;

font-weight: 900;

letter-spacing: 0.8px;


}

.precos-grid strong {


margin-top: 5px;

font-size: 21px;

font-weight: 900;

color: #17244d;


}

/* =====================================================
MOBILE
===================================================== */

/* =====================================================
   PARTIDA ESPECIAL - MOBILE
===================================================== */

@media (max-width: 768px) {

    

/* TÍTULO DA PARTIDA */

.proxima-partida-card .partida-especial-conteudo h3 {

    font-size: 21px;

    margin-bottom: 12px;

}

    .partida-detalhes {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .partida-detalhes .partida-info {

        grid-template-columns: 1fr 1fr;

        gap: 7px;

        margin-bottom: 14px;

    }


    .partida-detalhes .contador-partida {

        min-height: 58px;

        padding: 12px;

    }


    .partida-detalhes .contador-numeros {

        gap: 6px;

    }


    .partida-detalhes .contador-item strong {

        font-size: 14px;

    }


    /* IMAGEM */

    .partida-especial-imagem {

        min-height: 180px;

        max-height: 210px;

    }


    .partida-sem-imagem {

        min-height: 180px;

    }


    /* CONTEÚDO */

    .partida-especial-conteudo {

        padding: 16px;

    }


    .partida-especial-conteudo h3 {

        font-size: 23px;

        margin-bottom: 16px;

    }


    /* PRÊMIOS */

    .premios-grid {

        gap: 6px;

    }


    .premios-grid div:nth-child(1),
    .premios-grid div:nth-child(2) {

        padding: 10px;

    }


    .premios-grid div:nth-child(3) {

        padding: 12px;

    }


    .premios-grid strong {

        font-size: 17px;

    }


    .premios-grid div:nth-child(3) strong {

        font-size: 26px;

    }


    /* PREÇOS */

    .precos-grid {

        gap: 6px;

        margin: 10px 0;

    }


    .precos-grid div {

        padding: 9px;

    }


    .precos-grid strong {

        font-size: 16px;

    }


    /* BOTÃO */

    .botao-partida {

        padding: 12px;

        margin-top: 10px;

    }
/* =====================================================
   BOTÃO JOGUE AQUI
===================================================== */

.botao-partida {

    display: block;

    width: 100%;

    box-sizing: border-box;

    text-align: center;

    padding: 14px 18px;

    margin-top: 12px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #dcae28
        );

    color: #07152e !important;

    border:
        1px solid
        #e0b52f;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-decoration: none;

    box-shadow:
        0 6px 16px
        rgba(197, 148, 25, 0.28);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;

}


/* EFEITO AO PASSAR O MOUSE */

.botao-partida:hover {

    color: #07152e !important;

    filter: brightness(1.08);

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(197, 148, 25, 0.38);

}


/* EFEITO AO CLICAR */

.botao-partida:active {

    transform: translateY(0);

    box-shadow:
        0 4px 10px
        rgba(197, 148, 25, 0.25);

}
}
/* =====================================================
   PARTIDAS ESPECIAIS
===================================================== */

#proximaPartida {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* =====================================================
   CARROSSEL
===================================================== */

.carrossel-partidas {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.carrossel-partidas-lista {

    display: flex;
    flex-wrap: nowrap;

    gap: 24px;

    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 10px 0 25px;

    box-sizing: border-box;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carrossel-partidas-lista::-webkit-scrollbar {
    display: none;
}


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

.carrossel-partidas-lista .partida-especial-card {

    flex: 0 0 calc(50% - 12px);

    width: calc(50% - 12px);

    min-width: calc(50% - 12px);

    box-sizing: border-box;

    scroll-snap-align: start;

}


/* =====================================================
   IMAGEM
===================================================== */

.carrossel-partidas-lista .partida-especial-imagem {

    width: 100%;

    height: 340px;

    min-height: 340px;

    max-height: 340px;

    object-fit: cover;

    display: block;

}


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

.carrossel-partidas-lista .partida-especial-conteudo {

    padding: 28px;

}


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

@media (max-width: 768px) {

    #proximaPartida {
        width: 100%;
        max-width: 100%;
    }

    .carrossel-partidas-lista {

        gap: 18px;

        padding: 10px 0 20px;

    }

    .carrossel-partidas-lista .partida-especial-card {

        flex: 0 0 100%;

        width: 100%;

        min-width: 100%;

    }

    @media (max-width: 768px) {

    .carrossel-partidas-lista .partida-especial-imagem {

        width: 100%;

        height: 220px;

        min-height: 220px;

        max-height: 220px;

        object-fit: cover;

        display: block;

    }

}

}
/* =====================================================
   AJUSTE FINAL DOS CARDS DE PARTIDAS
===================================================== */

/* REMOVE SOMENTE O TEXTO "PARTIDA ESPECIAL" */
.partida-especial-card .partida-destaque {
    display: none !important;
}


/* =====================================================
   CARD — MANTÉM A IMAGEM DENTRO DA CAIXA
===================================================== */

.partida-especial-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* =====================================================
   IMAGEM — NÃO DEIXA ESCAPAR DO CARD
===================================================== */

.partida-especial-card .partida-especial-imagem {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}


/* =====================================================
   CAIXA DE TEXTO — MAIS COMPACTA
===================================================== */

.partida-especial-card .partida-especial-conteudo {
    padding: 18px 20px !important;
    box-sizing: border-box;
}


/* =====================================================
   DIMINUI UM POUCO O ESPAÇO ENTRE AS INFORMAÇÕES
===================================================== */

.partida-especial-card .partida-info {
    gap: 8px !important;
}

.partida-especial-card .partida-info span {
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
}

.partida-especial-card .partida-info strong {
    margin-top: 2px !important;
    line-height: 1.15 !important;
}


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

@media (max-width: 768px) {

    .partida-especial-card .partida-especial-conteudo {
        padding: 15px 16px !important;
    }

    .partida-especial-card .partida-info {
        gap: 6px !important;
    }

    .partida-especial-card .partida-info span {
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .partida-especial-card .partida-info strong {
        margin-top: 1px !important;
        line-height: 1.1 !important;
    }

}
/* =====================================================
   PARTIDAS — AJUSTE DO CONTEÚDO
===================================================== */

.partida-especial-conteudo {
    padding: 20px 22px !important;
}


/* NOME DA PARTIDA */

.partida-especial-conteudo h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}


/* DATA E HORÁRIO */

.partida-info {
    gap: 8px !important;
}

.partida-info span {
    line-height: 1.15 !important;
}

.partida-info strong {
    margin-top: 2px !important;
    line-height: 1.15 !important;
}


/* KUADRA / KINA / KENO */

.premios-grid {
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.premios-grid > div {
    padding: 8px 6px !important;
}


/* PREÇOS */

.precos-grid {
    gap: 8px !important;
    margin-top: 8px !important;
}

.precos-grid > div {
    padding: 8px 6px !important;
}


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

@media (max-width: 768px) {

    .partida-especial-conteudo {
        padding: 14px 16px !important;
    }

    .partida-especial-conteudo h3 {
        margin-bottom: 9px !important;
    }

    .partida-info {
        gap: 6px !important;
    }

    .premios-grid {
        gap: 6px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .premios-grid > div {
        padding: 7px 4px !important;
    }

    .precos-grid {
        gap: 6px !important;
        margin-top: 6px !important;
    }

    .precos-grid > div {
        padding: 7px 4px !important;
    }

}
/* =====================================================
   GANHADORES — AJUSTE DE LARGURA
===================================================== */

.carrossel-ganhadores {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ganhadores-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ganhadores-grid::-webkit-scrollbar {
    display: none;
}


/* CADA GANHADOR */

.ganhadores-grid .ganhador-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: center;
}


/* IMAGEM DENTRO DO CARD */

.ganhador-card .ganhador-imagem {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    box-sizing: border-box;
}


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

@media (max-width: 768px) {

    .carrossel-ganhadores {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .ganhadores-grid {
        width: 100%;
        max-width: 100%;
        gap: 10px;
        padding: 0;
    }

    .ganhadores-grid .ganhador-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

}

/* ==================================================
   INDIQUE E GANHE — VERSÃO FINAL
================================================== */

.indique-ganhe {
    width: 100%;
    padding: 80px 20px;

    background:
        linear-gradient(
            135deg,
            #063d2b 0%,
            #08734d 50%,
            #0b2550 100%
        );

    position: relative;
    overflow: hidden;

    color: #ffffff;
}

/* EFEITOS DE FUNDO */

.indique-ganhe::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -190px;
    right: -120px;

    background: rgba(245, 197, 66, 0.12);

    border-radius: 50%;

    pointer-events: none;
}

.indique-ganhe::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -170px;
    left: -100px;

    background: rgba(32, 178, 107, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


/* CONTEÚDO */

.indique-conteudo {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


/* ETIQUETA */

.indique-tag {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    border-radius: 30px;

    background: #f5c542;

    color: #06152f;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* TÍTULO */

.indique-conteudo h2 {

    margin: 0 0 16px;

    color: #ffffff;

    font-size: clamp(
        32px,
        5vw,
        50px
    );

    line-height: 1.1;

    font-weight: 900;
}


/* TEXTO */

.indique-conteudo > p {

    max-width: 760px;

    margin: 0 auto 28px;

    color: #e8fff5;

    font-size: 17px;

    line-height: 1.6;
}

.indique-conteudo > p strong {

    color: #ffe58a;

    font-size: 20px;
}


/* BOTÃO QUERO INDICAR */

.botao-indique-form {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 260px;

    padding: 16px 28px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffe58a
        );

    color: #06152f;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-indique-form:hover {

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.30);
}


/* ==================================================
   FORMULÁRIO
================================================== */

.indicacao-formulario {

    width: 100%;

    margin-top: 30px;

    padding: 30px;

    background: #ffffff;

    border-radius: 24px;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.28);

    text-align: left;

    color: #17244d;
}


/* GARANTE QUE O FORMULÁRIO ESCONDIDO REALMENTE FIQUE ESCONDIDO */

.indicacao-formulario[style*="display: none"] {
    display: none !important;
}


/* GRID */

.indicacao-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;
}


/* CAMPOS */

.campo-indicacao {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}

.campo-indicacao label {

    color: #17244d;

    font-size: 13px;

    font-weight: 900;
}

.campo-indicacao input,
.campo-indicacao textarea {

    width: 100%;

    padding: 13px 14px;

    border:
        2px solid
        #dbe3ee;

    border-radius: 11px;

    background: #f8fafc;

    color: #17244d;

    font-family: inherit;

    font-size: 15px;

    outline: none;
}

.campo-indicacao input {

    height: 48px;
}

.campo-indicacao textarea {

    min-height: 100px;

    resize: vertical;
}

.campo-indicacao input:focus,
.campo-indicacao textarea:focus {

    border-color: #20b26b;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(32, 178, 107, 0.12);
}


/* BOTÃO ENVIAR */

.indicacao-formulario
.botao-indique-form {

    width: 100%;

    min-width: 0;

    margin-top: 5px;

    background:
        linear-gradient(
            135deg,
            #20b26b,
            #12804c
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(32, 178, 107, 0.25);
}


/* MENSAGEM */

.mensagem-indicacao {

    display: none;

    margin-top: 18px;

    padding: 14px;

    border-radius: 12px;

    text-align: center;

    font-weight: 900;
}

.mensagem-indicacao.sucesso {

    display: block;

    background: #e8f8f0;

    color: #087443;

    border:
        1px solid
        #9ee0bd;
}

.mensagem-indicacao.erro {

    display: block;

    background: #fff0f0;

    color: #a92c3d;

    border:
        1px solid
        #e5aaaa;
}


/* ==================================================
   BOTÃO DO HERO
================================================== */
.botao-indique {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #e83e8c,
            #ff72b6
        );

    color: #ffffff;

    font-weight: 900;

    text-decoration: none;

    border: none;

    box-shadow:
        0 8px 22px
        rgba(232, 62, 140, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-indique:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(232, 62, 140, 0.38);
}

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

@media (max-width: 700px) {

    .indique-ganhe {

        padding:
            55px
            15px;
    }

    .indique-conteudo h2 {

        font-size: 29px;
    }

    .indique-conteudo > p {

        font-size: 15px;
    }

    .botao-indique-form {

        width: 100%;

        min-width: 0;
    }

    .indicacao-formulario {

        padding:
            22px
            18px;

        border-radius: 20px;
    }

    .indicacao-grid {

        grid-template-columns: 1fr;

        gap: 0;
    }

    .botao-indique {

        width: 100%;

        box-sizing: border-box;
    }
}

/* ==================================================
   INDIQUE E GANHE — VERSÃO FINAL
================================================== */

.indique-ganhe {
    width: 100%;
    padding: 80px 20px;

    background:
        linear-gradient(
            135deg,
            #063d2b 0%,
            #08734d 50%,
            #0b2550 100%
        );

    position: relative;
    overflow: hidden;

    color: #ffffff;
}

/* EFEITOS DE FUNDO */

.indique-ganhe::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -190px;
    right: -120px;

    background: rgba(245, 197, 66, 0.12);

    border-radius: 50%;

    pointer-events: none;
}

.indique-ganhe::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -170px;
    left: -100px;

    background: rgba(32, 178, 107, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


/* CONTEÚDO */

.indique-conteudo {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


/* ETIQUETA */

.indique-tag {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    border-radius: 30px;

    background: #f5c542;

    color: #06152f;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* TÍTULO */

.indique-conteudo h2 {

    margin: 0 0 16px;

    color: #ffffff;

    font-size: clamp(
        32px,
        5vw,
        50px
    );

    line-height: 1.1;

    font-weight: 900;
}


/* TEXTO */

.indique-conteudo > p {

    max-width: 760px;

    margin: 0 auto 28px;

    color: #e8fff5;

    font-size: 17px;

    line-height: 1.6;
}

.indique-conteudo > p strong {

    color: #ffe58a;

    font-size: 20px;
}


/* BOTÃO QUERO INDICAR */

.botao-indique-form {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 260px;

    padding: 16px 28px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffe58a
        );

    color: #06152f;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-indique-form:hover {

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, 0.30);
}


/* ==================================================
   FORMULÁRIO
================================================== */

.indicacao-formulario {

    width: 100%;

    margin-top: 30px;

    padding: 30px;

    background: #ffffff;

    border-radius: 24px;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.28);

    text-align: left;

    color: #17244d;
}


/* GARANTE QUE O FORMULÁRIO ESCONDIDO REALMENTE FIQUE ESCONDIDO */

.indicacao-formulario[style*="display: none"] {
    display: none !important;
}


/* GRID */

.indicacao-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;
}


/* CAMPOS */

.campo-indicacao {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}

.campo-indicacao label {

    color: #17244d;

    font-size: 13px;

    font-weight: 900;
}

.campo-indicacao input,
.campo-indicacao textarea {

    width: 100%;

    padding: 13px 14px;

    border:
        2px solid
        #dbe3ee;

    border-radius: 11px;

    background: #f8fafc;

    color: #17244d;

    font-family: inherit;

    font-size: 15px;

    outline: none;
}

.campo-indicacao input {

    height: 48px;
}

.campo-indicacao textarea {

    min-height: 100px;

    resize: vertical;
}

.campo-indicacao input:focus,
.campo-indicacao textarea:focus {

    border-color: #20b26b;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(32, 178, 107, 0.12);
}


/* BOTÃO ENVIAR */

.indicacao-formulario
.botao-indique-form {

    width: 100%;

    min-width: 0;

    margin-top: 5px;

    background:
        linear-gradient(
            135deg,
            #20b26b,
            #12804c
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(32, 178, 107, 0.25);
}


/* MENSAGEM */

.mensagem-indicacao {

    display: none;

    margin-top: 18px;

    padding: 14px;

    border-radius: 12px;

    text-align: center;

    font-weight: 900;
}

.mensagem-indicacao.sucesso {

    display: block;

    background: #e8f8f0;

    color: #087443;

    border:
        1px solid
        #9ee0bd;
}

.mensagem-indicacao.erro {

    display: block;

    background: #fff0f0;

    color: #a92c3d;

    border:
        1px solid
        #e5aaaa;
}


/* ==================================================
   BOTÃO DO HERO
================================================== */

.botao-indique {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #e83e8c,
            #ff72b6
        );

    color: #ffffff;

    font-weight: 900;

    text-decoration: none;

    border: none;

    box-shadow:
        0 8px 22px
        rgba(232, 62, 140, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.botao-indique:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(232, 62, 140, 0.38);
}

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

@media (max-width: 700px) {

    .indique-ganhe {

        padding:
            55px
            15px;
    }

    .indique-conteudo h2 {

        font-size: 29px;
    }

    .indique-conteudo > p {

        font-size: 15px;
    }

    .botao-indique-form {

        width: 100%;

        min-width: 0;
    }

    .indicacao-formulario {

        padding:
            22px
            18px;

        border-radius: 20px;
    }

    .indicacao-grid {

        grid-template-columns: 1fr;

        gap: 0;
    }

    .botao-indique {

        width: 100%;

        box-sizing: border-box;
    }
}

/* =====================================================
   INDICAÇÃO — MENSAGEM DE SUCESSO
===================================================== */

.mensagem-indicacao {
    display: none;
    width: 100%;
    margin-top: 25px;
}


.indicacao-sucesso-box {

    width: 100%;
    max-width: 650px;

    margin: 0 auto;

    padding: 35px 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f8ff
        );

    border-radius: 24px;

    border: 2px solid rgba(
        245,
        197,
        66,
        0.45
    );

    box-shadow:
        0 20px 50px rgba(
            6,
            21,
            47,
            0.16
        );

    text-align: center;

    position: relative;

    overflow: hidden;

}


/* DETALHE SUPERIOR */

.indicacao-sucesso-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            #f5c542,
            #dca900,
            #f5c542
        );

}


/* ÍCONE */

.indicacao-sucesso-icone {

    width: 72px;
    height: 72px;

    margin: 0 auto 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #f5c542,
            #dca900
        );

    color: #06152f;

    font-size: 38px;

    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(
            245,
            197,
            66,
            0.35
        );

}


/* TAG */

.indicacao-sucesso-tag {

    display: inline-block;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #a77900;

    margin-bottom: 8px;

}


/* TÍTULO */

.indicacao-sucesso-box h3 {

    margin: 0 0 15px;

    color: #06152f;

    font-size: 27px;

    line-height: 1.2;

}


/* TEXTO */

.indicacao-sucesso-box p {

    margin: 0 auto 20px;

    max-width: 540px;

    color: #52627a;

    font-size: 16px;

    line-height: 1.6;

}


.indicacao-sucesso-box p strong {

    color: #06152f;

}


/* CAIXA DO PRÊMIO */

.indicacao-premio-box {

    margin: 25px auto;

    padding: 20px;

    max-width: 360px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #06152f,
            #0b2550
        );

    box-shadow:
        0 12px 25px rgba(
            6,
            21,
            47,
            0.18
        );

}


.indicacao-premio-box span {

    display: block;

    color: #f5c542;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 4px;

}


.indicacao-premio-box strong {

    display: block;

    color: #ffffff;

    font-size: 34px;

    font-weight: 900;

}


/* AVISO */

.indicacao-aviso {

    padding: 16px 18px;

    background: #fff8df;

    border-left: 4px solid #f5c542;

    border-radius: 10px;

    color: #5c4a12 !important;

    font-size: 14px !important;

    text-align: left;

}


/* BOTÃO VOLTAR */

.botao-fechar-indicacao {

    border: none;

    border-radius: 12px;

    padding: 14px 28px;

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #dca900
        );

    color: #06152f;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.botao-fechar-indicacao:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(
            245,
            197,
            66,
            0.35
        );

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .indicacao-sucesso-box {

        padding: 30px 20px;

        border-radius: 20px;

    }


    .indicacao-sucesso-icone {

        width: 62px;
        height: 62px;

        font-size: 32px;

    }


    .indicacao-sucesso-box h3 {

        font-size: 23px;

    }


    .indicacao-sucesso-box p {

        font-size: 14px;

    }


    .indicacao-premio-box strong {

        font-size: 30px;

    }

}

/* =====================================================
   CADASTRO — NOVO VISUAL
===================================================== */

.cadastro {
    width: 100%;
    background: #ffffff;
    padding: 55px 20px;
    box-sizing: border-box;
}


/* =====================================================
   PARTE INICIAL
===================================================== */

.cadastro-info {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* SELO */

.selo-bonus {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #f5c542;
    color: #06152f;

    padding: 8px 20px;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1.5px;

    margin-bottom: 15px;
}


/* TÍTULO */

.cadastro-info h2 {
    margin: 0;

    color: #06152f;

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.1;

    font-weight: 900;
}

.cadastro-info h2 span {
    color: #d99f00;
}


/* TEXTO */

.cadastro-info p {
    margin: 15px auto 25px;

    max-width: 650px;

    color: #536174;

    font-size: 16px;

    line-height: 1.5;
}


/* =====================================================
   BOTÃO CADASTRE-SE AQUI
===================================================== */

.botao-cadastro {
    border: none;

    background: linear-gradient(
        135deg,
        #f5c542,
        #e6ad16
    );

    color: #06152f;

    min-width: 270px;

    padding: 17px 35px;

    border-radius: 12px;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow:
        0 7px 0 #b98200,
        0 12px 22px rgba(0, 0, 0, 0.16);

    transition: all 0.2s ease;
}

.botao-cadastro:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 0 #b98200,
        0 16px 28px rgba(0, 0, 0, 0.20);
}

.botao-cadastro:active {
    transform: translateY(3px);

    box-shadow:
        0 4px 0 #b98200,
        0 7px 12px rgba(0, 0, 0, 0.15);
}


/* =====================================================
   FORMULÁRIO ABERTO
===================================================== */

#areaFormularioCadastro {
    width: 100%;
    max-width: 900px;

    margin: 40px auto 0;

    padding: 35px 40px;

    box-sizing: border-box;

    background: #f7f9fc;

    border: 1px solid #dce4ef;

    border-radius: 22px;

    box-shadow:
        0 10px 35px rgba(6, 21, 47, 0.10);
}


/* TÍTULO DO FORMULÁRIO */

#areaFormularioCadastro h3 {
    margin: 0 0 8px;

    text-align: center;

    color: #06152f;

    font-size: 28px;

    font-weight: 900;
}


/* TEXTO DO FORMULÁRIO */

#areaFormularioCadastro > p {
    margin: 0 0 28px;

    text-align: center;

    color: #667085;

    font-size: 15px;
}


/* FORM */

#formCadastro {
    width: 100%;
}


/* LABEL */

#formCadastro label {
    display: block;

    margin: 0 0 7px;

    color: #06152f;

    font-size: 14px;

    font-weight: 800;
}


/* CAMPOS */

#formCadastro input {
    width: 100%;

    height: 52px;

    padding: 0 16px;

    margin-bottom: 18px;

    box-sizing: border-box;

    border: 1px solid #ccd5e2;

    border-radius: 10px;

    background: #ffffff;

    color: #06152f;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#formCadastro input:focus {
    border-color: #d9aa24;

    box-shadow:
        0 0 0 3px rgba(245, 197, 66, 0.20);
}


/* BOTÃO DO FORMULÁRIO */

#formCadastro button {
    width: 100%;

    height: 55px;

    margin-top: 5px;

    border: none;

    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #06152f,
        #153a76
    );

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(6, 21, 47, 0.22);

    transition: all 0.2s ease;
}

#formCadastro button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(6, 21, 47, 0.28);
}


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

@media (max-width: 600px) {

    .cadastro {
        padding: 40px 16px;
    }


    .cadastro-info h2 {
        font-size: 30px;
    }


    .cadastro-info p {
        font-size: 14px;

        max-width: 360px;

        margin-top: 13px;
        margin-bottom: 22px;
    }


    .botao-cadastro {
        width: 100%;

        max-width: 310px;

        padding: 16px 20px;

        font-size: 16px;
    }


    #areaFormularioCadastro {
        margin-top: 30px;

        padding: 28px 20px;

        border-radius: 18px;
    }


    #areaFormularioCadastro h3 {
        font-size: 24px;
    }


    #formCadastro input {
        height: 50px;
    }

}
/* =====================================================
   BOTÕES DO RODAPÉ
===================================================== */

.footer-acoes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 22px auto;
}

.footer-acoes button {
    border: 2px solid #f5c542;
    background: transparent;
    color: #f5c542;

    min-width: 210px;
    padding: 13px 22px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition: all 0.2s ease;
}

.footer-acoes button:hover {
    background: #f5c542;
    color: #06152f;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.20);
}


/* CELULAR */

@media (max-width: 600px) {

    .footer-acoes {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .footer-acoes button {
        width: 100%;
        max-width: 320px;
    }

}
/* =====================================================
   MODAL — SOBRE NÓS
===================================================== */

.modal-sobre-nos {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);

    box-sizing: border-box;
}

.modal-sobre-conteudo {
    position: relative;

    width: 100%;
    max-width: 650px;

    padding: 45px 40px;

    background: #ffffff;

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);

    box-sizing: border-box;
}

.fechar-modal {
    position: absolute;
    top: 15px;
    right: 18px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: #06152f;
    color: #ffffff;

    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    transition: 0.2s ease;
}

.fechar-modal:hover {
    background: #f5c542;
    color: #06152f;
    transform: rotate(90deg);
}

.sobre-nos-tag {
    display: inline-flex;

    padding: 8px 18px;

    border-radius: 30px;

    background: #f5c542;
    color: #06152f;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.modal-sobre-conteudo h2 {
    margin: 18px 0 15px;

    color: #06152f;

    font-size: 36px;
    font-weight: 900;
}

.modal-sobre-conteudo p {
    margin: 0 auto 15px;

    max-width: 540px;

    color: #536174;

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

.sobre-nos-destaques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 28px 0;
}

.sobre-nos-destaques div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 105px;

    padding: 15px;

    background: #f7f9fc;

    border: 1px solid #dce4ef;
    border-radius: 15px;
}

.sobre-nos-destaques strong {
    font-size: 28px;
    margin-bottom: 8px;
}

.sobre-nos-destaques span {
    color: #06152f;
    font-size: 13px;
    font-weight: 800;
}

.sobre-nos-final {
    margin-top: 20px !important;

    color: #d09b00 !important;

    font-weight: 900;
}


/* CELULAR */

@media (max-width: 600px) {

    .modal-sobre-conteudo {
        padding: 40px 20px 30px;
        border-radius: 20px;
    }

    .modal-sobre-conteudo h2 {
        font-size: 29px;
    }

    .modal-sobre-conteudo p {
        font-size: 14px;
    }

    .sobre-nos-destaques {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sobre-nos-destaques div {
        min-height: 70px;
        flex-direction: row;
        gap: 12px;
    }

    .sobre-nos-destaques strong {
        margin-bottom: 0;
    }

}

/* =====================================================
   DÚVIDAS E RECLAMAÇÕES
===================================================== */

.modal-duvidas {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);

    box-sizing: border-box;
}

.modal-duvidas-conteudo {
    position: relative;

    width: 100%;
    max-width: 600px;

    padding: 42px 40px;

    background: #ffffff;

    border-radius: 24px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);

    box-sizing: border-box;
}

.duvidas-tag {
    display: inline-flex;

    padding: 8px 18px;

    border-radius: 30px;

    background: #f5c542;
    color: #06152f;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.modal-duvidas-conteudo h2 {
    margin: 18px 0 10px;

    color: #06152f;

    font-size: 32px;
    font-weight: 900;
}

.modal-duvidas-conteudo > p {
    margin: 0 0 25px;

    color: #667085;

    font-size: 15px;
    line-height: 1.5;
}

#formDuvidas label {
    display: block;

    margin: 0 0 7px;

    color: #06152f;

    font-size: 14px;
    font-weight: 800;
}

#formDuvidas input,
#formDuvidas textarea {
    width: 100%;

    padding: 14px 16px;

    margin-bottom: 18px;

    box-sizing: border-box;

    border: 1px solid #ccd5e2;
    border-radius: 10px;

    background: #ffffff;
    color: #06152f;

    font-family: inherit;
    font-size: 15px;

    outline: none;

    transition: 0.2s ease;
}

#formDuvidas input {
    height: 52px;
}

#formDuvidas textarea {
    min-height: 140px;
    resize: vertical;
}

#formDuvidas input:focus,
#formDuvidas textarea:focus {
    border-color: #d9aa24;

    box-shadow:
        0 0 0 3px rgba(245, 197, 66, 0.20);
}

.botao-enviar-duvida {
    width: 100%;
    height: 55px;

    margin-top: 3px;

    border: none;
    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #06152f,
        #153a76
    );

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition: 0.2s ease;
}

.botao-enviar-duvida:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(6, 21, 47, 0.28);
}

.mensagem-duvida-resultado {
    margin-top: 18px;

    text-align: center;

    font-size: 14px;
    font-weight: 700;
}


/* CELULAR */

@media (max-width: 600px) {

    .modal-duvidas-conteudo {
        padding: 38px 20px 25px;
        border-radius: 20px;
    }

    .modal-duvidas-conteudo h2 {
        font-size: 26px;
    }

    .modal-duvidas-conteudo > p {
        font-size: 14px;
    }

}

/* =====================================================
   TODAS AS PARTIDAS
===================================================== */

.todas-partidas {
    padding: 70px 20px;
    background: #f4f7fc;
}

.todas-partidas .titulo-secao {
    text-align: center;
    margin-bottom: 40px;
}

.todas-partidas .titulo-secao span {
    display: inline-block;
    color: #c99a24;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.todas-partidas .titulo-secao h2 {
    margin: 0;
    color: #17244d;
    font-size: 34px;
    font-weight: 900;
}

.todas-partidas .titulo-secao p {
    margin: 10px 0 0;
    color: #667085;
    font-size: 16px;
}


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

.todas-partidas-lista {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 24px;
}


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

.todas-partidas-card {
    width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(23, 36, 77, 0.08);

    overflow: hidden;

    position: relative;
}


/* Detalhe dourado no topo */

.todas-partidas-card::before {
    content: "";
    display: block;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #17244d,
        #d4a72c,
        #17244d
    );
}


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

.todas-partidas-conteudo {
    padding: 26px;
}


/* =====================================================
   SALA
===================================================== */

.todas-partidas-sala {
    display: inline-flex;

    padding: 6px 13px;

    border-radius: 30px;

    background: #17244d;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 10px;
}


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

.todas-partidas-card h3 {
    margin: 0 0 22px;

    color: #17244d;

    font-size: 25px;
    font-weight: 900;

    line-height: 1.2;
}


/* =====================================================
   DATA E HORÁRIO
===================================================== */

.todas-partidas-data {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 16px;
}

.todas-partidas-data > div {
    background: #f5f7fb;

    border: 1px solid #e3e8f1;

    border-radius: 12px;

    padding: 13px 15px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.todas-partidas-data span {
    color: #7b8497;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.todas-partidas-data strong {
    color: #17244d;

    font-size: 18px;
    font-weight: 900;
}


/* =====================================================
   CRONÔMETRO
===================================================== */

.todas-partidas-card .contador-partida {
    margin: 16px 0;

    padding: 14px;

    background: #17244d;

    border-radius: 14px;

    text-align: center;
}

.todas-partidas-card .contador-titulo {
    display: block;

    color: #dcb94c;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

    margin-bottom: 8px;
}

.todas-partidas-card .contador-numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;
}

.todas-partidas-card .contador-item {
    background: rgba(255, 255, 255, 0.10);

    border-radius: 9px;

    padding: 8px 4px;
}

.todas-partidas-card .contador-item strong {
    display: block;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1;
}

.todas-partidas-card .contador-item small {
    display: block;

    color: #d8dce6;

    font-size: 8px;
    font-weight: 700;

    margin-top: 5px;
}


/* =====================================================
   PRÊMIOS
===================================================== */

.todas-partidas-premios {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 16px;
}

.todas-partidas-premios > div {
    text-align: center;

    background: #f8f9fc;

    border: 1px solid #e5e9f0;

    border-radius: 12px;

    padding: 13px 8px;
}

.todas-partidas-premios span {
    display: block;

    color: #7b8497;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

.todas-partidas-premios strong {
    display: block;

    color: #17244d;

    font-size: 17px;
    font-weight: 900;
}


/* KENO EM DESTAQUE */

.todas-partidas-premios > div:last-child {
    background: #f1f8f3;

    border-color: #b8d9c0;
}

.todas-partidas-premios > div:last-child span {
    color: #238044;
}

.todas-partidas-premios > div:last-child strong {
    color: #16733b;
}


/* =====================================================
   CARTELAS
===================================================== */

.todas-partidas-cartelas {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 14px;
}

.todas-partidas-cartelas > div {
    border-radius: 12px;

    padding: 14px;

    text-align: center;
}

.todas-partidas-cartelas > div:first-child {
    background: #edf8f0;

    border: 1px solid #b8dfc1;
}

.todas-partidas-cartelas > div:last-child {
    background: #fff6e8;

    border: 1px solid #f0d29a;
}

.todas-partidas-cartelas span {
    display: block;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.8px;

    margin-bottom: 5px;
}

.todas-partidas-cartelas > div:first-child span {
    color: #238044;
}

.todas-partidas-cartelas > div:last-child span {
    color: #b56b00;
}

.todas-partidas-cartelas strong {
    display: block;

    color: #17244d;

    font-size: 18px;
    font-weight: 900;
}


/* =====================================================
   BOTÃO JOGUE AQUI
===================================================== */

.todas-partidas-jogar {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    box-sizing: border-box;

    margin-top: 20px;

    min-height: 52px;

    border-radius: 12px;

    background: #d4a72c;

    color: #17244d;

    text-decoration: none;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.todas-partidas-jogar:hover {
    transform: translateY(-2px);

    background: #e3b83b;

    box-shadow:
        0 8px 20px rgba(180, 135, 25, 0.25);
}


/* =====================================================
   MENSAGEM
===================================================== */

.todas-partidas-lista .carregando {
    text-align: center;

    padding: 30px;

    color: #667085;

    font-size: 15px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .todas-partidas {
        padding: 50px 14px;
    }


    .todas-partidas .titulo-secao h2 {
        font-size: 27px;
    }


    .todas-partidas .titulo-secao p {
        font-size: 14px;
    }


    .todas-partidas-lista {
        gap: 18px;
    }


    .todas-partidas-conteudo {
        padding: 19px;
    }


    .todas-partidas-card h3 {
        font-size: 21px;

        margin-bottom: 17px;
    }


    .todas-partidas-data {
        gap: 8px;
    }


    .todas-partidas-data > div {
        padding: 11px 9px;
    }


    .todas-partidas-data strong {
        font-size: 16px;
    }


    .todas-partidas-card .contador-numeros {
        gap: 5px;
    }


    .todas-partidas-card .contador-item {
        padding: 7px 2px;
    }


    .todas-partidas-card .contador-item strong {
        font-size: 17px;
    }


    .todas-partidas-card .contador-item small {
        font-size: 7px;
    }


    .todas-partidas-premios {
        gap: 6px;
    }


    .todas-partidas-premios > div {
        padding: 11px 5px;
    }


    .todas-partidas-premios strong {
        font-size: 14px;
    }


    .todas-partidas-cartelas {
        gap: 7px;
    }


    .todas-partidas-cartelas > div {
        padding: 12px 7px;
    }


    .todas-partidas-cartelas strong {
        font-size: 16px;
    }


    .todas-partidas-jogar {
        min-height: 49px;

        margin-top: 16px;
    }

}

/* =====================================================
   PÁGINA DE PROGRAMAÇÃO
===================================================== */

.programacao-topo {
    width: 100%;
    box-sizing: border-box;
    background:
        linear-gradient(
            135deg,
            #101b3d 0%,
            #17244d 55%,
            #24376d 100%
        );
    padding: 25px 20px 55px;
}

.programacao-topo-conteudo {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.programacao-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.programacao-voltar:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.programacao-titulo {
    text-align: center;
    margin-top: 35px;
}

.programacao-titulo span {
    display: block;

    color: #dcb94c;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3px;

    margin-bottom: 10px;
}

.programacao-titulo h1 {
    margin: 0;

    color: #ffffff;

    font-size: 42px;
    font-weight: 900;

    letter-spacing: 1px;
}

.programacao-titulo p {
    margin: 12px 0 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 16px;
}


/* =====================================================
   ÁREA PRINCIPAL
===================================================== */

.programacao {
    width: 100%;
    box-sizing: border-box;

    padding: 55px 20px 80px;

    background: #f4f7fc;

    min-height: 500px;
}

.programacao-lista {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 24px;
}


/* =====================================================
   CARD DA PROGRAMAÇÃO
===================================================== */

.programacao-card {
    width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e7f0;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 32px rgba(23, 36, 77, 0.09);

    position: relative;
}

.programacao-card::before {
    content: "";

    display: block;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #17244d,
            #d4a72c,
            #17244d
        );
}

.programacao-card-conteudo {
    padding: 27px;
}


/* =====================================================
   SALA
===================================================== */

.programacao-sala {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 14px;

    background: #17244d;

    color: #ffffff;

    border-radius: 30px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;

    margin-bottom: 11px;
}


/* =====================================================
   NOME DA PARTIDA
===================================================== */

.programacao-card h2 {
    margin: 0 0 22px;

    color: #17244d;

    font-size: 27px;
    font-weight: 900;

    line-height: 1.2;
}


/* =====================================================
   DATA E HORÁRIO
===================================================== */

.programacao-data-hora {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 16px;
}

.programacao-info {
    background: #f5f7fb;

    border: 1px solid #e1e6ef;

    border-radius: 13px;

    padding: 14px 16px;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.programacao-info span {
    color: #7b8497;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}

.programacao-info strong {
    color: #17244d;

    font-size: 19px;
    font-weight: 900;
}


/* =====================================================
   CRONÔMETRO
===================================================== */

.programacao-card .contador-partida {
    margin: 16px 0;

    padding: 15px;

    background: #17244d;

    border-radius: 15px;

    text-align: center;
}

.programacao-card .contador-titulo {
    display: block;

    color: #dcb94c;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

    margin-bottom: 9px;
}

.programacao-card .contador-numeros {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;
}

.programacao-card .contador-item {
    background:
        rgba(255, 255, 255, 0.10);

    border-radius: 9px;

    padding: 9px 4px;
}

.programacao-card .contador-item strong {

    display: block;

    color: #f5c542 !important;

    font-size: 21px;

    font-weight: 900;

    line-height: 1;

}

.programacao-card .contador-item small {
    display: block;

    color: #d9dce5;

    font-size: 8px;
    font-weight: 700;

    margin-top: 5px;
}


/* =====================================================
   PRÊMIOS
===================================================== */

.programacao-premios {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 17px;
}

.programacao-premio {
    text-align: center;

    background: #f8f9fc;

    border: 1px solid #e3e8f0;

    border-radius: 13px;

    padding: 14px 8px;
}

.programacao-premio span {
    display: block;

    color: #7b8497;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    margin-bottom: 6px;
}

.programacao-premio strong {
    display: block;

    color: #17244d;

    font-size: 17px;
    font-weight: 900;
}


/* KENO */

.programacao-premio-keno {
    background: #eff8f2;

    border-color: #b9dbc3;
}

.programacao-premio-keno span {
    color: #258047;
}

.programacao-premio-keno strong {
    color: #16733b;
}


/* =====================================================
   CARTELAS
===================================================== */

.programacao-cartelas {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 14px;
}

.programacao-cartela {
    text-align: center;

    border-radius: 13px;

    padding: 14px;
}

.programacao-cartela span {
    display: block;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.8px;

    margin-bottom: 6px;
}

.programacao-cartela strong {
    display: block;

    color: #17244d;

    font-size: 18px;
    font-weight: 900;
}


/* ANTECIPADA */

.programacao-cartela-antecipada {
    background: #edf8f0;

    border: 1px solid #b8dfc1;
}

.programacao-cartela-antecipada span {
    color: #238044;
}


/* DIA */

.programacao-cartela-dia {
    background: #fff6e8;

    border: 1px solid #f0d29a;
}

.programacao-cartela-dia span {
    color: #b56b00;
}


/* =====================================================
   BOTÃO JOGUE AQUI
===================================================== */

.programacao-jogar {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 55px;

    box-sizing: border-box;

    margin-top: 20px;

    border-radius: 13px;

    background: #d4a72c;

    color: #17244d;

    text-decoration: none;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.programacao-jogar:hover {
    transform: translateY(-2px);

    background: #e3b83b;

    box-shadow:
        0 8px 20px
        rgba(180, 135, 25, 0.25);
}


/* =====================================================
   CARREGANDO / VAZIO
===================================================== */

.programacao-carregando,
.programacao-vazia {
    width: 100%;
    box-sizing: border-box;

    padding: 40px 20px;

    text-align: center;

    color: #667085;

    font-size: 15px;

    background: #ffffff;

    border: 1px solid #e3e8f0;

    border-radius: 18px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .programacao-topo {
        padding:
            18px 14px 42px;
    }

    .programacao-voltar {
        min-height: 40px;

        padding: 0 14px;

        font-size: 10px;
    }

    .programacao-titulo {
        margin-top: 28px;
    }

    .programacao-titulo span {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .programacao-titulo h1 {
        font-size: 31px;
    }

    .programacao-titulo p {
        font-size: 13px;
    }

    .programacao {
        padding:
            40px 14px 60px;
    }

    .programacao-lista {
        gap: 18px;
    }

    .programacao-card-conteudo {
        padding: 19px;
    }

    .programacao-card h2 {
        font-size: 21px;

        margin-bottom: 17px;
    }

    .programacao-data-hora {
        gap: 8px;
    }

    .programacao-info {
        padding: 11px 9px;
    }

    .programacao-info strong {
        font-size: 16px;
    }

    .programacao-card .contador-numeros {
        gap: 5px;
    }

    .programacao-card .contador-item {
        padding:
            8px 2px;
    }

    .programacao-card .contador-item strong {
        font-size: 17px;
    }

    .programacao-card .contador-item small {
        font-size: 7px;
    }

    .programacao-premios {
        gap: 6px;
    }

    .programacao-premio {
        padding:
            11px 5px;
    }

    .programacao-premio strong {
        font-size: 14px;
    }

    .programacao-cartelas {
        gap: 7px;
    }

    .programacao-cartela {
        padding:
            12px 7px;
    }

    .programacao-cartela strong {
        font-size: 16px;
    }

    .programacao-jogar {
        min-height: 50px;

        margin-top: 16px;
    }

}

/* =====================================================
   FILTROS DAS SALAS — PROGRAMAÇÃO
===================================================== */

.filtros-salas-programacao {

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

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 28px;

}


.filtro-sala {

    border: none;

    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(255,255,255,0.12);

    color: white;

    font-size: 0.85rem;

    font-weight: 900;

    cursor: pointer;

    transition:
        0.25s ease;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.18
    );

}


.filtro-sala:hover {

    transform: translateY(-2px);

    background: rgba(
        255,
        255,
        255,
        0.20
    );

}


.filtro-sala.ativo {

    background:
        linear-gradient(
            135deg,
            #f5c542,
            #ffdf73
        );

    color: #102a56;

    box-shadow:
        0 8px 22px
        rgba(
            245,
            197,
            66,
            0.30
        );

}


/* =====================================================
   BOTÃO ENTENDA NOSSAS SALAS
===================================================== */

.botao-entenda-salas {

    margin-top: 20px;

    padding: 11px 20px;

    border-radius: 999px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color: white;

    font-weight: 800;

    cursor: pointer;

    transition:
        0.25s ease;

}


.botao-entenda-salas:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    transform:
        translateY(-2px);

}


/* =====================================================
   MODAL
===================================================== */

.modal-salas {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(
            5,
            15,
            35,
            0.82
        );

    backdrop-filter:
        blur(8px);

}


.modal-salas.aberto {

    display: flex;

}


body.modal-aberto {

    overflow: hidden;

}


.modal-salas-conteudo {

    position: relative;

    width: min(
        900px,
        100%
    );

    max-height: 90vh;

    overflow-y: auto;

    padding: 38px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #071d42,
            #103c78
        );

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            0.45
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.modal-salas-fechar {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color: white;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

}


.modal-salas-titulo {

    text-align: center;

    margin-bottom: 30px;

}


.modal-salas-titulo span {

    color: #f5c542;

    font-weight: 900;

    letter-spacing: 2px;

    font-size: 0.85rem;

}


.modal-salas-titulo h2 {

    margin:
        8px 0 10px;

    color: white;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.5rem
        );

}


.modal-salas-titulo p {

    margin: 0 auto;

    max-width: 650px;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    line-height: 1.6;

}


/* =====================================================
   CARDS DAS SALAS
===================================================== */

.salas-explicacao {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;

}


.sala-explicacao-card {

    padding: 25px;

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.sala-explicacao-icone {

    font-size: 30px;

    margin-bottom: 8px;

}


.sala-explicacao-card h3 {

    margin:
        0 0 12px;

    color: #f5c542;

    font-size: 1.25rem;

}


.sala-explicacao-card p {

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    line-height: 1.6;

    margin:
        8px 0;

}


.sala-explicacao-card strong {

    color: white;

}


.sala-super-especial {

    border:
        1px solid
        rgba(
            245,
            197,
            66,
            0.45
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                245,
                197,
                66,
                0.13
            ),
            rgba(
                255,
                255,
                255,
                0.07
            )
        );

}


.sala-super-especial h3 {

    color: #ffdc62;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .filtros-salas-programacao {

        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding:
            4px 2px 10px;

        scrollbar-width: none;

    }


    .filtros-salas-programacao::-webkit-scrollbar {

        display: none;

    }


    .filtro-sala {

        flex:
            0 0 auto;

        white-space: nowrap;

        padding:
            11px 16px;

        font-size:
            0.78rem;

    }


    .modal-salas {

        padding: 12px;

    }


    .modal-salas-conteudo {

        padding:
            30px 18px 20px;

        border-radius:
            20px;

        max-height:
            94vh;

    }


    .salas-explicacao {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .sala-explicacao-card {

        padding: 20px;

    }

}

/* =====================================================
   BOTÃO FECHAR - FORMULÁRIO DE CADASTRO
===================================================== */

.cadastro-formulario {
    position: relative;
}

.fechar-formulario-cadastro {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #06152f;
    color: #ffffff;

    font-size: 23px;
    font-weight: 400;

    line-height: 34px;
    text-align: center;

    padding: 0;
    margin: 0;

    cursor: pointer;

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

    transition: 0.2s ease;

    z-index: 10;
}

.fechar-formulario-cadastro:hover {
    transform: scale(1.08);
    background: #b8860b;
}
/* =====================================================
   FORMULÁRIO INDIQUE E GANHE
===================================================== */

.indicacao-formulario {
    position: relative;
}

.fechar-indicacao {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    color: #16803c;

    font-size: 22px;
    font-weight: 400;
    line-height: 32px;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;

    z-index: 20;
}

.fechar-indicacao:hover {
    transform: scale(1.08);
    background: #ffffff;
    color: #b8860b;
}

/* =====================================================
   BOTÃO — ÁREA DE LINKS
===================================================== */

.botao-area-links {

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

    margin-top: 25px;
    padding: 14px 30px;

    background: linear-gradient(
        135deg,
        #d4af37,
        #f1d36a,
        #c99b25
    );

    color: #07152f;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.8px;

    text-decoration: none;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.45);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


/* EFEITO AO PASSAR O MOUSE */

.botao-area-links:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.32),
        0 0 14px rgba(212, 175, 55, 0.25);
}


/* EFEITO AO CLICAR */

.botao-area-links:active {

    transform: translateY(0);

}


/* CELULAR */

@media (max-width: 600px) {

    .botao-area-links {

        width: auto;
        max-width: 100%;

        padding: 13px 22px;

        font-size: 13px;

    }

}

/* =====================================================
   MENU LATERAL — ITENS EM EFEITO VIDRO
===================================================== */

.menu-lateral nav a {

    display: block;

    margin-bottom: 10px;
    padding: 13px 16px;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


/* AO PASSAR O MOUSE */

.menu-lateral nav a:hover {

    background: rgba(212, 175, 55, 0.16);

    border-color: rgba(212, 175, 55, 0.40);

    color: #f1d36a;

    transform: translateX(4px);

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* NO CELULAR — EFEITO AO TOCAR */

.menu-lateral nav a:active {

    transform: scale(0.98);

}

/* =====================================================
   BOTÃO — VER TODAS AS PARTIDAS
===================================================== */

.botao-todas-partidas {

    display: flex;

    justify-content: center;

    margin-top: 25px;
    padding-bottom: 10px;

}


.botao-todas-partidas a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 28px;

    background: linear-gradient(
        135deg,
        #3da9f5,
        #1684d8
    );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.6px;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


.botao-todas-partidas a:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.25),
        0 0 15px rgba(61, 169, 245, 0.25);
}


.botao-todas-partidas a:active {

    transform: translateY(0);

}


@media (max-width: 600px) {

    .botao-todas-partidas a {

        padding: 12px 23px;

        font-size: 13px;

    }

}
/* =====================================================
ENTENDA COMO FUNCIONAM AS NOSSAS SALAS
===================================================== */

.ajuda-salas {
width: 100%;
margin-top: 45px;
}

/* =====================================================
CHAMADA PRINCIPAL
===================================================== */

.ajuda-salas-chamada {
width: min(900px, 92%);
margin: 0 auto;
padding: 38px 30px;
text-align: center;
background:
linear-gradient(
145deg,
rgba(11, 72, 52, 0.96),
rgba(6, 43, 33, 0.98)
);
border: 1px solid rgba(95, 220, 157, 0.35);
border-radius: 22px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ajuda-salas-tag {
display: inline-block;
margin-bottom: 10px;
color: #6ee7a8;
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
}

.ajuda-salas-chamada h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: clamp(24px, 4vw, 32px);
font-weight: 900;
line-height: 1.2;
}

.ajuda-salas-chamada p {
max-width: 600px;
margin: 0 auto 25px;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.6;
}

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

.ajuda-salas-botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
padding: 14px 27px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 11px;
background:
linear-gradient(
135deg,
#36c878,
#159957
);
color: #ffffff;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.7px;
cursor: pointer;
box-shadow:
0 9px 24px rgba(21, 153, 87, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}

.ajuda-salas-botao span {
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease;
}

.ajuda-salas-botao:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
0 13px 30px rgba(21, 153, 87, 0.40),
0 0 18px rgba(54, 200, 120, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.ajuda-salas-botao:hover span {
transform: translateX(4px);
}

.ajuda-salas-botao:active {
transform: translateY(0);
}

/* =====================================================
PAINEL DE DÚVIDAS
===================================================== */

.ajuda-salas-painel {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(2, 10, 20, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow-y: auto;
}

.ajuda-salas-painel-conteudo {
position: relative;
width: min(850px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 45px 35px 35px;
background:
linear-gradient(
180deg,
#0a2140 0%,
#06172d 100%
);
border: 1px solid rgba(212, 175, 55, 0.28);
border-radius: 24px;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
animation: ajudaSalasEntrar 0.25s ease;
}

@keyframes ajudaSalasEntrar {
from {
opacity: 0;
transform: translateY(15px) scale(0.98);
}


to {
    opacity: 1;
    transform: translateY(0) scale(1);
}


}

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

.ajuda-salas-fechar {
position: absolute;
top: 16px;
right: 18px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 27px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease,
border-color 0.2s ease;
}

.ajuda-salas-fechar:hover {
background: rgba(220, 70, 70, 0.22);
border-color: rgba(255, 120, 120, 0.45);
transform: rotate(90deg);
}

/* =====================================================
CABEÇALHO DO PAINEL
===================================================== */

.ajuda-salas-cabecalho {
text-align: center;
margin-bottom: 28px;
padding: 0 25px;
}

.ajuda-salas-cabecalho .ajuda-salas-tag {
color: #d4af37;
}

.ajuda-salas-cabecalho h2 {
margin: 0 0 10px;
color: #ffffff;
font-size: clamp(25px, 4vw, 34px);
font-weight: 900;
line-height: 1.2;
}

.ajuda-salas-cabecalho p {
max-width: 600px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.70);
font-size: 14px;
line-height: 1.6;
}

/* =====================================================
PERGUNTAS
===================================================== */

.ajuda-salas-perguntas {
display: flex;
flex-direction: column;
gap: 10px;
}

.ajuda-salas-item {
overflow: hidden;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 13px;
transition:
border-color 0.2s ease,
background 0.2s ease;
}

.ajuda-salas-item:has(
.ajuda-salas-pergunta[aria-expanded="true"]
) {
border-color: rgba(54, 200, 120, 0.45);
background: rgba(54, 200, 120, 0.07);
}

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

.ajuda-salas-pergunta {
width: 100%;
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 15px 18px;
border: none;
background: transparent;
color: #ffffff;
text-align: left;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
}

.ajuda-salas-pergunta strong {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(54, 200, 120, 0.14);
color: #62dd9b;
font-size: 20px;
font-weight: 500;
line-height: 1;
transition:
transform 0.2s ease,
background 0.2s ease;
}

.ajuda-salas-pergunta:hover {
background: rgba(255, 255, 255, 0.035);
}

.ajuda-salas-pergunta[aria-expanded="true"] strong {
transform: rotate(45deg);
background: rgba(212, 175, 55, 0.16);
color: #f1d36a;
}

/* =====================================================
   RESPOSTAS
   ===================================================== */

.ajuda-salas-resposta {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}


.ajuda-salas-resposta p {
    margin: 0;
    padding: 0 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   PERGUNTA ABERTA
   ===================================================== */

.ajuda-salas-pergunta[aria-expanded="true"]
+ .ajuda-salas-resposta {
    max-height: 600px;
    opacity: 1;
}


/* =====================================================
   BLOCO ABERTO — PERGUNTA + RESPOSTA
   ===================================================== */

.ajuda-salas-item:has(
    .ajuda-salas-pergunta[aria-expanded="true"]
) {
    background:
        linear-gradient(
            145deg,
            rgba(13, 76, 55, 0.92),
            rgba(7, 49, 37, 0.96)
        );

    border-color: rgba(54, 200, 120, 0.48);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* =====================================================
   ESPAÇAMENTO DA RESPOSTA QUANDO ABERTA
   ===================================================== */

.ajuda-salas-pergunta[aria-expanded="true"]
+ .ajuda-salas-resposta p {
    padding:
        0 20px 21px;
}


/* =====================================================
   LINHA SEPARANDO PERGUNTA E RESPOSTA
   ===================================================== */

.ajuda-salas-pergunta[aria-expanded="true"]
+ .ajuda-salas-resposta::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 20px 17px;
    background:
        linear-gradient(
            90deg,
            rgba(54, 200, 120, 0),
            rgba(54, 200, 120, 0.40),
            rgba(54, 200, 120, 0)
        );
}


/* =====================================================
   DESTAQUE DAS PALAVRAS IMPORTANTES
   ===================================================== */

.ajuda-salas-resposta strong {
    color: #ffffff;
    font-weight: 800;
}


/* =====================================================
   AJUSTE DO BOTÃO DA PERGUNTA ABERTA
   ===================================================== */

.ajuda-salas-pergunta[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.035);
}


.ajuda-salas-pergunta[aria-expanded="true"] strong {
    transform: rotate(45deg);
    background: rgba(212, 175, 55, 0.18);
    color: #f1d36a;
}

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

.ajuda-salas-fechar-final {
display: block;
min-width: 130px;
min-height: 44px;
margin: 25px auto 0;
padding: 11px 24px;
border: 1px solid rgba(255, 255, 255, 0.17);
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.8px;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}

.ajuda-salas-fechar-final:hover {
background: rgba(212, 175, 55, 0.14);
border-color: rgba(212, 175, 55, 0.40);
transform: translateY(-1px);
}

/* =====================================================
SCROLL DO PAINEL
===================================================== */

.ajuda-salas-painel-conteudo::-webkit-scrollbar {
width: 7px;
}

.ajuda-salas-painel-conteudo::-webkit-scrollbar-track {
background: transparent;
}

.ajuda-salas-painel-conteudo::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 20px;
}

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

@media (max-width: 700px) {


.ajuda-salas {
    margin-top: 32px;
}


.ajuda-salas-chamada {
    width: calc(100% - 28px);
    padding: 30px 18px;
    border-radius: 18px;
}


.ajuda-salas-chamada h3 {
    font-size: 24px;
}


.ajuda-salas-chamada p {
    font-size: 13px;
    margin-bottom: 21px;
}


.ajuda-salas-botao {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    font-size: 11px;
}


.ajuda-salas-painel {
    align-items: flex-start;
    padding: 12px;
}


.ajuda-salas-painel-conteudo {
    width: 100%;
    max-height: 94vh;
    padding: 45px 14px 25px;
    border-radius: 20px;
}


.ajuda-salas-cabecalho {
    padding: 0 10px;
    margin-bottom: 22px;
}


.ajuda-salas-cabecalho h2 {
    font-size: 25px;
}


.ajuda-salas-cabecalho p {
    font-size: 13px;
}


.ajuda-salas-pergunta {
    min-height: 58px;
    padding: 14px;
    font-size: 13px;
}


.ajuda-salas-pergunta strong {
    width: 26px;
    height: 26px;
    font-size: 18px;
}


.ajuda-salas-resposta p {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12.5px;
    line-height: 1.7;
}


.ajuda-salas-pergunta[aria-expanded="true"]
+ .ajuda-salas-resposta p {
    padding: 0 14px 17px;
}


.ajuda-salas-fechar-final {
    width: 100%;
}


}


/* =====================================================
   PARTIDAS ESPECIAIS — COMPACTAR SEM REDUZIR IMAGEM
   ===================================================== */

.proxima-partida {
    padding-top: 30px;
    padding-bottom: 30px;
}

.proxima-partida .titulo-secao {
    margin-bottom: 12px;
}

.partida-especial-conteudo {
    padding: 10px 14px 10px;
}

.partida-sala {
    margin-bottom: 2px;
    padding: 3px 7px;
}

.partida-especial-conteudo h3 {
    margin-bottom: 5px;
}

.partida-detalhes {
    gap: 5px;
    margin-bottom: 5px;
}

.partida-info {
    gap: 5px;
}

.partida-info span {
    min-height: 34px;
    padding: 4px 7px;
}

.contador-partida {
    padding: 4px 6px;
}

.premios-grid {
    gap: 5px;
    margin-bottom: 5px;
}

.premios-grid > div {
    min-height: 38px;
    padding: 4px 5px;
}

.precos-grid {
    gap: 5px;
    margin-bottom: 6px;
}

.precos-grid > div {
    min-height: 34px;
    padding: 4px 8px;
}

.botao-partida {
    min-height: 34px;
    padding: 6px 12px;
}

.controles-carrossel {
    margin-top: 5px;
}


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

@media (max-width: 700px) {

    .proxima-partida {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .proxima-partida .titulo-secao {
        margin-bottom: 10px;
    }

    .partida-especial-conteudo {
        padding: 8px 9px 8px;
    }

    .partida-sala {
        margin-bottom: 2px;
        padding: 2px 6px;
    }

    .partida-especial-conteudo h3 {
        margin-bottom: 4px;
    }

    .partida-detalhes {
        margin-bottom: 4px;
    }

    .partida-info span {
        min-height: 30px;
        padding: 3px 5px;
    }

    .contador-partida {
        margin-top: 3px;
        padding: 3px 4px;
    }

    .premios-grid {
        margin-bottom: 4px;
    }

    .premios-grid > div {
        min-height: 33px;
        padding: 3px 2px;
    }

    .precos-grid {
        margin-bottom: 4px;
    }

    .precos-grid > div {
        min-height: 30px;
        padding: 3px 5px;
    }

    .botao-partida {
        min-height: 30px;
        padding: 5px 8px;
    }

    .controles-carrossel {
        margin-top: 4px;
    }
}

/* =====================================================
   POPUP INDIQUE E GANHE
===================================================== */

.popup-indique-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.75);

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    z-index: 9999;

    overflow-y: auto;
}


/* =====================================================
   ABRIR POPUP
===================================================== */

.popup-indique-overlay.ativo {
    display: flex;
}


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

.popup-indique-card {
    position: relative;

    width: 100%;
    max-width: 900px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 22px;

    padding: 40px;

    box-sizing: border-box;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}


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

.fechar-indique-popup {
    position: absolute;

    top: 15px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: #0b1f4b;

    color: #ffffff;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;
}


.fechar-indique-popup:hover {
    transform: scale(1.05);
}


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

.popup-indique-card .indique-conteudo {
    width: 100%;

    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.popup-indique-card .indique-tag {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #b8860b;
}


.popup-indique-card h2 {
    margin: 0 0 15px;

    color: #0b1f4b;

    font-size: 32px;

    line-height: 1.2;
}


.popup-indique-card .indique-conteudo > p {
    margin: 0 auto 25px;

    max-width: 700px;

    color: #555555;

    font-size: 16px;

    line-height: 1.6;
}


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

.popup-indique-card .botao-indique-form {
    border: none;

    border-radius: 10px;

    background: #0b1f4b;

    color: #ffffff;

    padding: 13px 24px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}


.popup-indique-card .botao-indique-form:hover {
    transform: translateY(-1px);
}


/* =====================================================
   FORMULÁRIO
===================================================== */

.popup-indique-card .indicacao-formulario {
    position: relative;

    margin-top: 25px;

    padding-top: 20px;

    text-align: left;
}


/* =====================================================
   BOTÃO FECHAR FORMULÁRIO
===================================================== */

.popup-indique-card .fechar-indicacao {
    position: absolute;

    top: 0;
    right: 0;

    border: none;

    background: transparent;

    color: #777777;

    font-size: 24px;

    cursor: pointer;
}


/* =====================================================
   CAMPOS
===================================================== */

.popup-indique-card .indicacao-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.popup-indique-card .campo-indicacao {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.popup-indique-card .campo-indicacao label {
    color: #0b1f4b;

    font-size: 14px;

    font-weight: 700;
}


.popup-indique-card .campo-indicacao input,
.popup-indique-card .campo-indicacao textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d7d7d7;

    border-radius: 9px;

    padding: 12px;

    background: #ffffff;

    color: #222222;

    font-size: 14px;

    outline: none;
}


.popup-indique-card .campo-indicacao input:focus,
.popup-indique-card .campo-indicacao textarea:focus {
    border-color: #0b1f4b;
}


.popup-indique-card .campo-endereco {
    grid-column: 1 / -1;
}


.popup-indique-card
.indicacao-formulario
> .campo-indicacao {
    margin-top: 18px;
}


.popup-indique-card textarea {
    resize: vertical;

    min-height: 100px;
}


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

.popup-indique-card
.indicacao-formulario
button[type="submit"] {
    margin-top: 20px;
}


/* =====================================================
   MENSAGEM
===================================================== */

.popup-indique-card .mensagem-indicacao {
    margin-top: 15px;

    text-align: center;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .popup-indique-overlay {
        padding: 10px;
    }


    .popup-indique-card {
        max-height: 94vh;

        padding: 28px 18px;

        border-radius: 18px;
    }


    .popup-indique-card h2 {
        font-size: 25px;
    }


    .popup-indique-card .indique-conteudo > p {
        font-size: 14px;
    }


    .popup-indique-card .indicacao-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .popup-indique-card .campo-endereco {
        grid-column: auto;
    }


    .fechar-indique-popup {
        top: 10px;
        right: 10px;

        width: 38px;
        height: 38px;
    }

}
/* =====================================================
   ABERTURA DO POPUP INDIQUE E GANHE
===================================================== */

.popup-indique-overlay.popup-indique-aberto {
    display: flex;
}

/* ======================================================
   CARROSSEL INICIAL
====================================================== */

.carrossel-inicial {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 30px auto 0;
    overflow: hidden;
}


.carrossel-slides {
    width: 100%;
}


.carrossel-slide {
    display: none;
    width: 100%;
    cursor: pointer;
}


.carrossel-slide.ativo {
    display: block;
}


.carrossel-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}


.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;

    font-size: 32px;
    line-height: 1;

    cursor: pointer;

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

    z-index: 5;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.carrossel-seta:hover {
    background: rgba(0, 0, 0, 0.8);
}


.carrossel-anterior {
    left: 12px;
}


.carrossel-proximo {
    right: 12px;
}


.carrossel-indicadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
}


.carrossel-indicador {
    width: 9px;
    height: 9px;

    padding: 0;
    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.45);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.carrossel-indicador.ativo {
    background: #ffffff;
    transform: scale(1.25);
}


@media (max-width: 768px) {

    .carrossel-inicial {
        max-width: 100%;
        margin-top: 20px;
    }


    .carrossel-slide img {
        border-radius: 12px;
    }


    .carrossel-seta {
        width: 36px;
        height: 36px;
        font-size: 27px;
    }


    .carrossel-anterior {
        left: 8px;
    }


    .carrossel-proximo {
        right: 8px;
    }

}

/* ======================================================
   CARROSSEL INICIAL — DESLIZE LATERAL
====================================================== */

.carrossel-inicial {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 30px auto 0;
    overflow: hidden;
    border: 5px solid #d4af37;
    border-radius: 18px;
    box-sizing: border-box;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.25),
        0 8px 25px rgba(0, 0, 0, 0.35);
}

.carrossel-slides {
    display: flex;
    width: 100%;
    transition: transform 0.7s ease-in-out;
}

.carrossel-slide {
    display: block;
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    cursor: pointer;
}

.carrossel-slide.ativo {
    display: block;
}

.carrossel-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 11px;
    object-fit: cover;
}


/* ======================================================
   REMOVER SETAS
====================================================== */

.carrossel-seta {
    display: none !important;
}


/* ======================================================
   INDICADORES
====================================================== */

.carrossel-indicadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.carrossel-indicador {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.carrossel-indicador.ativo {
    background: #d4af37;
    transform: scale(1.3);
}


@media (max-width: 768px) {

    .carrossel-inicial {
        max-width: 100%;
        margin-top: 20px;
        border-width: 4px;
        border-radius: 15px;
    }

    .carrossel-slide img {
        border-radius: 9px;
    }

}
/* ======================================================
   CARROSSEL INICIAL — AJUSTE FINAL
====================================================== */

/* Remove os indicadores */
.carrossel-indicadores {
    display: none !important;
}


/* Moldura dourada */
.carrossel-inicial {
    width: 100%;
    max-width: 760px;
    margin: 30px auto 0;
    padding: 0;
    overflow: hidden;

    border: 8px solid #d4af37;
    border-radius: 20px;

    box-sizing: border-box;

    box-shadow:
        0 0 0 2px #8f6f16,
        0 8px 28px rgba(0, 0, 0, 0.40);
}


/* Área das imagens */
.carrossel-slides {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;

    transition:
        transform 0.7s ease-in-out;
}


/* Cada slide */
.carrossel-slide {
    display: block;
    position: relative;

    flex: 0 0 100%;
    width: 100%;

    margin: 0;
    padding: 0;

    cursor: pointer;
}


/* Imagem ocupando todo o espaço */
.carrossel-slide img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    object-fit: cover;
}


/* Mobile */
@media (max-width: 768px) {

    .carrossel-inicial {
        width: 100%;
        max-width: 100%;

        margin-top: 20px;

        border-width: 6px;
        border-radius: 16px;
    }

}

/* ======================================================
   BORDA DOURADA MAIS GROSSA
====================================================== */

.carrossel-inicial {
    border: 14px solid #d4af37;

    box-shadow:
        0 0 0 3px #8f6f16,
        inset 0 0 0 4px #f5d76e,
        0 8px 28px rgba(0, 0, 0, 0.40);

    border-radius: 22px;
}


/* Mantém a imagem encostada na parte interna da moldura */
.carrossel-slides {
    margin: 0;
    padding: 0;
}


.carrossel-slide {
    margin: 0;
    padding: 0;
}


.carrossel-slide img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}


/* Mobile */
@media (max-width: 768px) {

    .carrossel-inicial {
        border-width: 10px;
        border-radius: 18px;
    }

}

/* ======================================================
   HERO — EFEITO PREMIUM COM BOLINHAS
   NÃO ALTERA O CARROSSEL
====================================================== */

.hero {
    position: relative;
    overflow: hidden;
}


/* LUZES DE FUNDO */

.hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    top: -220px;
    left: -180px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(212,175,55,.22),
        rgba(212,175,55,.06) 40%,
        transparent 70%
    );

    animation: luzHero 7s ease-in-out infinite alternate;

    pointer-events: none;
}


.hero::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -200px;
    bottom: -220px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(30,110,255,.15),
        transparent 70%
    );

    animation: luzHero2 9s ease-in-out infinite alternate;

    pointer-events: none;
}


@keyframes luzHero {

    from {
        transform: scale(1);
        opacity: .6;
    }

    to {
        transform: scale(1.15);
        opacity: 1;
    }
}


@keyframes luzHero2 {

    from {
        transform: scale(1);
        opacity: .5;
    }

    to {
        transform: scale(1.2);
        opacity: .9;
    }
}


/* CONTEÚDO */

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


/* TÍTULO */

.hero h1 {
    animation: entradaHero 1s ease-out both;
}


@keyframes entradaHero {

    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* DESTAQUE DOURADO */

.hero h1 span {

    position: relative;
    display: inline-block;

    text-shadow:
        0 0 8px rgba(212,175,55,.35),
        0 0 22px rgba(212,175,55,.18);

    animation: brilhoHero 2.5s ease-in-out infinite alternate;
}


@keyframes brilhoHero {

    from {
        text-shadow:
            0 0 6px rgba(212,175,55,.25);
    }

    to {
        text-shadow:
            0 0 12px rgba(255,215,80,.7),
            0 0 28px rgba(212,175,55,.25);
    }
}

/* PARTÍCULAS DOURADAS */

.hero-descricao {
    position: relative;
    animation: entradaDescricao 1s ease-out .25s both;
}


@keyframes entradaDescricao {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .hero-texto::before {

        width: 20px;
        height: 20px;

        right: 4%;

        box-shadow:

            inset -4px -5px 7px rgba(0,0,0,.35),
            inset 3px 2px 5px rgba(255,255,255,.4),

            40px 55px 0 -5px #f1c232,
            40px 55px 8px -5px rgba(255,210,50,.4),

            -45px 85px 0 -6px #1976d2,
            -45px 85px 9px -6px rgba(30,120,255,.4),

            70px 115px 0 -7px #21a453,
            70px 115px 9px -7px rgba(30,200,90,.4);
    }
}


/* ACESSIBILIDADE */

@media (prefers-reduced-motion: reduce) {

    .hero::before,
    .hero::after,
    .hero h1,
    .hero h1 span,
    .hero-texto::before,
    .hero-descricao {
        animation: none;
    }
}

/* ======================================================
   CAIXA DA DESCRIÇÃO DO HERO
====================================================== */

.hero-descricao {
    display: inline-block;
    max-width: 650px;
    padding: 14px 20px;
    margin-top: 12px;

    background: rgba(5, 22, 55, 0.88);

    border: 1px solid rgba(212, 175, 55, 0.75);
    border-radius: 14px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        inset 0 0 14px rgba(212, 175, 55, 0.08);

    color: #ffffff;
    line-height: 1.5;
}
/* ======================================================
   BOLAS DO HERO
   LATERAIS + FLUTUAÇÃO + APARECER/DESAPARECER
====================================================== */

.hero-bolas {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


/* ======================================================
   CONFIGURAÇÃO GERAL
====================================================== */

.hero-bolas .bola {
    position: absolute;

    width: 62px;
    height: 62px;

    object-fit: contain;

    opacity: 0;

    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));

    animation:
        bolaAparecerFlutuar
        8s ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


/* ======================================================
   LADO ESQUERDO
====================================================== */

.bola-amarela {
    left: 2%;
    top: 18%;

    animation-delay: 0s !important;
}

.bola-azul {
    left: 5%;
    top: 55%;

    animation-delay: 2s !important;
}

.bola-rosa {
    left: 1%;
    top: 78%;

    animation-delay: 4s !important;
}

.bola-verde {
    left: 8%;
    top: 36%;

    animation-delay: 6s !important;
}


/* ======================================================
   LADO DIREITO
====================================================== */

.bola-vermelha {
    right: 2%;
    top: 20%;

    animation-delay: 1s !important;
}

.bola-azulrosa {
    right: 5%;
    top: 57%;

    animation-delay: 3s !important;
}


/* ======================================================
   BOLAS EXTRAS
====================================================== */

.bola-extra-1 {
    right: 1%;
    top: 78%;

    animation-delay: 5s !important;
}

.bola-extra-2 {
    left: 11%;
    top: 68%;

    width: 48px !important;
    height: 48px !important;

    animation-delay: 7s !important;
}

.bola-extra-3 {
    right: 10%;
    top: 39%;

    width: 48px !important;
    height: 48px !important;

    animation-delay: 2.5s !important;
}

.bola-extra-4 {
    left: 3%;
    top: 8%;

    width: 45px !important;
    height: 45px !important;

    animation-delay: 4.5s !important;
}

.bola-extra-5 {
    right: 3%;
    top: 8%;

    width: 45px !important;
    height: 45px !important;

    animation-delay: 6.5s !important;
}

.bola-extra-6 {
    right: 11%;
    top: 70%;

    width: 50px !important;
    height: 50px !important;

    animation-delay: 1.5s !important;
}


/* ======================================================
   ANIMAÇÃO
====================================================== */

@keyframes bolaAparecerFlutuar {

    0% {
        opacity: 0;
        transform:
            translateY(20px)
            scale(0.75)
            rotate(-8deg);
    }

    12% {
        opacity: 0.85;
    }

    35% {
        opacity: 1;
        transform:
            translateY(-12px)
            scale(1)
            rotate(5deg);
    }

    55% {
        opacity: 0.9;
        transform:
            translateY(-22px)
            scale(1.03)
            rotate(-4deg);
    }

    75% {
        opacity: 0.7;
        transform:
            translateY(-8px)
            scale(0.98)
            rotate(6deg);
    }

    100% {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.78)
            rotate(-8deg);
    }

}


/* ======================================================
   GARANTIR QUE O TEXTO FIQUE NA FRENTE
====================================================== */

.hero-conteudo {
    position: relative;
    z-index: 5;
}


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

@media (max-width: 768px) {

    .hero-bolas .bola {
        width: 42px;
        height: 42px;
    }

    .bola-extra-2,
    .bola-extra-3,
    .bola-extra-4,
    .bola-extra-5,
    .bola-extra-6 {
        width: 34px !important;
        height: 34px !important;
    }

    .bola-amarela {
        left: -5px;
    }

    .bola-azul {
        left: -8px;
    }

    .bola-rosa {
        left: -5px;
    }

    .bola-verde {
        left: 1px;
    }

    .bola-vermelha {
        right: -5px;
    }

    .bola-azulrosa {
        right: -8px;
    }

    .bola-extra-1 {
        right: -5px;
    }

    .bola-extra-6 {
        right: 1px;
    }

}
 /* =====================================================
    BOLAS - PARTIDAS ESPECIAIS
 ===================================================== */

.proxima-partida {
    position: relative;
    overflow: hidden;
}


/* =====================================================
   CAMADA DAS BOLAS
===================================================== */

.partidas-bolas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 1;
}


/* =====================================================
   BOLAS
===================================================== */

.partida-bola {
    position: absolute;

    width: 58px;
    height: 58px;

    object-fit: contain;

    opacity: 0;

    filter:
        drop-shadow(
            0 8px 12px rgba(0, 0, 0, 0.22)
        );

    animation:
        flutuarPartida
        9s ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


/* =====================================================
   ESQUERDA
===================================================== */

.partida-bola-1 {
    left: -8px;
    top: 18%;

    animation-delay: 0s;
}

.partida-bola-2 {
    left: 18px;
    top: 67%;

    width: 48px;
    height: 48px;

    animation-delay: 3s;
}

.partida-bola-3 {
    left: -12px;
    top: 43%;

    width: 43px;
    height: 43px;

    animation-delay: 6s;
}


/* =====================================================
   DIREITA
===================================================== */

.partida-bola-4 {
    right: -8px;
    top: 21%;

    animation-delay: 2s;
}

.partida-bola-5 {
    right: 18px;
    top: 66%;

    width: 48px;
    height: 48px;

    animation-delay: 5s;
}

.partida-bola-6 {
    right: -12px;
    top: 44%;

    width: 43px;
    height: 43px;

    animation-delay: 7s;
}


/* =====================================================
   ANIMAÇÃO
===================================================== */

@keyframes flutuarPartida {

    0% {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.75)
            rotate(-8deg);
    }

    12% {
        opacity: 0.75;
    }

    35% {
        opacity: 1;

        transform:
            translateY(-13px)
            scale(1)
            rotate(5deg);
    }

    55% {
        opacity: 0.9;

        transform:
            translateY(-22px)
            scale(1.04)
            rotate(-5deg);
    }

    75% {
        opacity: 0.65;

        transform:
            translateY(-7px)
            scale(0.98)
            rotate(6deg);
    }

    100% {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.75)
            rotate(-8deg);
    }

}


/* =====================================================
   CONTEÚDO SEMPRE NA FRENTE
===================================================== */

.proxima-partida > *:not(.partidas-bolas) {
    position: relative;

    z-index: 3;
}


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

@media (max-width: 768px) {

    .partida-bola {
        width: 40px;
        height: 40px;
    }

    .partida-bola-1 {
        left: -10px;
    }

    .partida-bola-2 {
        left: -6px;

        width: 34px;
        height: 34px;
    }

    .partida-bola-3 {
        left: -8px;

        width: 32px;
        height: 32px;
    }

    .partida-bola-4 {
        right: -10px;
    }

    .partida-bola-5 {
        right: -6px;

        width: 34px;
        height: 34px;
    }

    .partida-bola-6 {
        right: -8px;

        width: 32px;
        height: 32px;
    }

}

/* =====================================================
   SUGESTÕES DE E-MAIL
===================================================== */

.campo-email-sugestao {

    position: relative;

}


.sugestoes-email {

    display: none;

    flex-direction: column;

    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 4px);

    background: #ffffff;

    border: 1px solid #d8d8d8;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15);

    z-index: 50;

}


.sugestoes-email button {

    width: 100%;

    padding: 10px 12px;

    border: none;

    background: #ffffff;

    color: #222222;

    text-align: left;

    font-size: 14px;

    cursor: pointer;

}


.sugestoes-email button:hover {

    background: #f1f1f1;

}
/* =====================================================
   SUPER PRÊMIOS — CORREÇÃO DO MODAL
===================================================== */

.modal-super-premios {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    background: rgba(3, 10, 25, 0.75) !important;

    z-index: 999999 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease !important;
}


.modal-super-premios.ativo {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


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

.modal-super-premios-conteudo {

    position: relative !important;

    width: min(500px, 100%) !important;

    max-height: 90vh !important;

    overflow-y: auto !important;

    padding: 34px 28px 30px !important;

    background: #ffffff !important;

    border: 3px solid #d8a928 !important;

    border-radius: 24px !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45) !important;

    transform:
        translateY(20px)
        scale(0.96);

    transition:
        transform 0.3s ease !important;
}


.modal-super-premios.ativo
.modal-super-premios-conteudo {

    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   FECHAR
===================================================== */

.modal-super-premios-fechar {

    position: absolute !important;

    top: 12px !important;
    right: 14px !important;

    width: 36px !important;
    height: 36px !important;

    border: none !important;

    border-radius: 50% !important;

    background: #f1f1f1 !important;

    color: #06152f !important;

    font-size: 26px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 2 !important;
}


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

.modal-super-premios-titulo {

    text-align: center !important;

    margin-bottom: 25px !important;

    padding: 0 15px !important;
}


.modal-super-premios-titulo span {

    display: inline-block !important;

    margin-bottom: 6px !important;

    color: #d8a928 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    letter-spacing: 2px !important;
}


.modal-super-premios-titulo h2 {

    margin: 0 !important;

    color: #06152f !important;

    font-size: 29px !important;

    font-weight: 800 !important;
}


.modal-super-premios-titulo p {

    max-width: 390px !important;

    margin: 11px auto 0 !important;

    color: #263957 !important;

    font-size: 15px !important;

    line-height: 1.5 !important;
}


/* =====================================================
   SALAS
===================================================== */

.modal-super-premios-salas {

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;
}


.super-premios-sala {

    width: 100% !important;

    min-height: 72px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 15px !important;

    padding: 15px 20px !important;

    border: 2px solid transparent !important;

    border-radius: 15px !important;

    color: #ffffff !important;

    cursor: pointer !important;

    text-align: left !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.10) !important;
}


.super-premios-sala strong {

    font-size: 17px !important;

    font-weight: 800 !important;
}


.super-premios-sala span {

    padding: 7px 11px !important;

    border-radius: 20px !important;

    background: rgba(255, 255, 255, 0.25) !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* =====================================================
   CORES DAS SALAS
===================================================== */

.super-premios-bingo {

    background:
        linear-gradient(
            135deg,
            #20a568,
            #117344
        ) !important;
}


.super-premios-keno {

    background:
        linear-gradient(
            135deg,
            #2468b8,
            #12447f
        ) !important;
}


.super-premios-vem-ser-feliz {

    background:
        linear-gradient(
            135deg,
            #f39a27,
            #d66f0c
        ) !important;
}


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

@media (max-width: 600px) {

    .modal-super-premios {

        padding: 14px !important;

    }


    .modal-super-premios-conteudo {

        padding: 30px 17px 22px !important;

        border-radius: 20px !important;

    }


    .modal-super-premios-titulo h2 {

        font-size: 25px !important;

    }


    .modal-super-premios-titulo p {

        font-size: 14px !important;

    }


    .super-premios-sala {

        min-height: 66px !important;

        padding: 13px 15px !important;

    }


    .super-premios-sala strong {

        font-size: 15px !important;

    }

}

/* =====================================================
   MENU LATERAL — CORES MAIS VISÍVEIS
===================================================== */

.menu-lateral nav a {
    border-left: 4px solid transparent;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease;
}


/* 1 — INÍCIO */
.menu-lateral nav a:nth-child(1) {
    border-left-color: #20a568;
    background: rgba(32, 165, 104, 0.18);
}


/* 2 — COMO JOGAR */
.menu-lateral nav a:nth-child(2) {
    border-left-color: #2f80ed;
    background: rgba(47, 128, 237, 0.18);
}


/* 3 — CADASTRO */
.menu-lateral nav a:nth-child(3) {
    border-left-color: #d8a928;
    background: rgba(216, 169, 40, 0.18);
}


/* 4 — NOSSAS SALAS */
.menu-lateral nav a:nth-child(4) {
    border-left-color: #8e44ad;
    background: rgba(142, 68, 173, 0.18);
}


/* 5 — PARTIDAS ESPECIAIS */
.menu-lateral nav a:nth-child(5) {
    border-left-color: #f39a27;
    background: rgba(243, 154, 39, 0.18);
}


/* 6 — PROGRAMAÇÃO */
.menu-lateral nav a:nth-child(6) {
    border-left-color: #00a8cc;
    background: rgba(0, 168, 204, 0.18);
}


/* 7 — PRINCIPAIS DÚVIDAS */
.menu-lateral nav a:nth-child(7) {
    border-left-color: #e67e22;
    background: rgba(230, 126, 34, 0.18);
}


/* 8 — GANHADORES */
.menu-lateral nav a:nth-child(8) {
    border-left-color: #27ae60;
    background: rgba(39, 174, 96, 0.18);
}


/* 9 — SEJA UM AFILIADO */
.menu-lateral nav a:nth-child(9) {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.18);
}


/* 10 — ÁREA DO AFILIADO */
.menu-lateral nav a:nth-child(10) {
    border-left-color: #3498db;
    background: rgba(52, 152, 219, 0.18);
}


/* 11 — INDIQUE E GANHE */
.menu-lateral nav a:nth-child(11) {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.18);
}


/* 12 — LINKS */
.menu-lateral nav a:nth-child(12) {
    border-left-color: #16a085;
    background: rgba(22, 160, 133, 0.18);
}


/* 13 — QUIZ JOGADOR */
.menu-lateral nav a:nth-child(13) {
    border-left-color: #f1c40f;
    background: rgba(241, 196, 15, 0.18);
}


/* 14 — FALE CONOSCO */
.menu-lateral nav a:nth-child(14) {
    border-left-color: #25d366;
    background: rgba(37, 211, 102, 0.18);
}


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

.menu-lateral nav a:hover {
    transform: translateX(3px);

    background: rgba(255, 255, 255, 0.14);
}