@import url('https://fonts.googleapis.com/css2?family=Anton&family=Sora:wght@100..800&display=swap');


* {
    box-sizing: border-box;
    user-select: none;
}


body {
    font-size: 16px;
    color: #fff;
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    accent-color: #FF6600;
}

body h1,
body h2,
body h3,
body h4 {
    font-family: "Sora", sans-serif;
    line-height: 1;
}

.container {
    max-width: 1320px;
    margin: 0 auto
}

.flex {
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly
}

.center {
    justify-content: center
}

.between {
    justify-content: space-between
}

.gap {
    gap: 30px;
}

.wrap {
    flex-wrap: wrap;
}

footer {
    background: #161820;
}

footer p {
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
}

#faq {
    background: #000000;
    padding: 50px 0;
    text-align: center;
}

#faq h2 {
    color: #FE4811;
    font-size: 2rem;
    font-weight: 700;
    text-wrap: balance;
    margin-bottom: 30px;
}


#faq li {
    padding: 20px 20px;
    border-radius: 10px;
    text-align: left;
    background: #161820;
}

#faq li h3 {
    color: #FE4811;
    font-size: 1.2rem;
    font-weight: 700;
}

#faq li p {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 300;
}

#faq li strong {
    font-weight: 600;
}

#faq li p a {
    color: #FF6300;
    text-decoration: underline;
}

#faq li .uk-accordion-title::before {
    background: url(../img/seta-faq.webp) center center no-repeat;
    background-size: contain;
    rotate: 180deg;
    transition: all .3s
}

#faq .uk-open .uk-accordion-title::before {
    rotate: 0deg
}

header {
    text-align: center;
    padding: 20px 0;
}

main {
    background: url(../img/headbackground.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#logo-kfc {
    max-width: 650px;
    padding: 20px;
}

#arealogo {
    align-items: center;
}

.logos-secundarios {
    margin-bottom: 50px;
    gap: 10px;
    justify-content: center;
}

h1 {
    text-transform: uppercase;
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    background: linear-gradient(to right,
            #facc22 40%,
            #f83600 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

h1 strong {
    display: block;
    font-size: 5rem;
    color: #FE4811;
    font-weight: 900;
    text-wrap: balance;
    margin: 10px 0;
}

/* arealogo fim */

#arealogo h2 {
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
}

#arealogo p {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 300;
    text-align: center;
}

#arealogo a {
    background: #FE4811;
    color: #fff;
    font-size: 1.8rem;
    padding: 15px 70px;
    border-radius: 10px;
    font-weight: 700;
    margin: 10px;
    transition: all 0.3s;
}

#arealogo a:hover {
    background: #fff;
    color: #FE4811;
}

/* arealogo fim */

/* circuito */

#circuito {
    background: url(../img/circuito-background.webp) center center no-repeat;
    background-size: cover;
    text-align: center;
    padding: 50px 0;
}

#circuito strong {
    font-weight: 800;
}



#circuito h2 {
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
}

#circuito p {
    font-size: 1.2rem;
    color: #fff;
}


/* fim circuito */


/* games */

#games {
    background: #F4F4F4 url(../img/dobra3-background.webp) center center no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#games .card-games {
    text-align: center;
    align-items: stretch;
}

#games .bg-ken,
.bg-yasuo {
    position: relative;
    padding: 30px;
    aspect-ratio: 644 / 585;
    border-radius: 30px;
    flex-direction: column;
}

.bg-ken {
    background: url(../img/Ken.webp) center center no-repeat;
    background-size: cover;
}

.bg-yasuo {
    background: url(../img/Yasuo.webp) center center no-repeat;
    background-size: cover;
}

.sf6logo {
    margin-bottom: 20px;
}

#games p {
    font-size: 2rem;
}

#games strong {
    font-weight: 900;
    font-size: 1.5rem;
}

#games li {
    font-size: 1.5rem;
}

/* fim games */

/*pontuacao*/

#pontuacao {
    background: #000000 url(../img/dobra4-background.webp) center center no-repeat;
    padding: 50px 0;
    text-align: center;
    background-size: cover;
}

#pontuacao h2 {
    color: #ffffff;
    font-weight: 900;
    font-size: 2.5rem;
    max-width: 800px;
    align-items: center;
    margin: 0 auto 40px;
}

.box-beneficios {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.box-beneficios p:nth-of-type(2)::after {
    content: url(..//img/Troféu.webp);
    position: absolute;
    right: -80px;
    top: -77px;
}

.box-beneficios p:nth-of-type(2) {
    padding-right: 50px;
}

.box-beneficios p {
    background: #FE4811;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 1.8rem;
    font-weight: 900;
    position: relative;
}


/*fim pontuacao*/

/*Rank*/

#painel-rank {
    margin: 50px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: center;
}

.grid .card-rank:nth-child(9) { 
        grid-area: 3 / 2 / 4 / 3; 
    }
.grid .card-rank:nth-child(10) { grid-area: 3 / 3 / 4 / 4; }

.card-rank {
    background: linear-gradient(to top,
            #000000 20%,
            #005faa 190%);
    text-align: center;
    padding: 30px;
    border: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-radius: 20px;
    max-width: 600px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.card-rank hr {
    height: 0.6px;
    background: #fff;
    border-radius: 5px;
}

.card-rank p {
    color: #d0a85c;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.card-rank p:nth-child(4) {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
}


.valor-rank {
    display: flex;
    justify-content: center;
    align-items: center;
}

.valor-rank p {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d0a85c;
}

.valor-rank p strong {
    font-size: 5rem;
    font-weight: 900;
}

.valor-rank p span {
    font-size: 2.3rem;
    font-weight: bold;
    translate: 0 -9px;
}

.valor-rank p span:nth-child(3) {
    translate: -15px -9px;
}

.pontos-rank {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pontos-rank p strong {
    font-size: 3rem;
    color: #ffffff;
    align-items: center;
}

/*fim Rank*/

/*Inscrição*/

#inscricao {
    background: #000000 url(../img/dobra5-background.webp) center center no-repeat;
    padding: 50px 0;
    text-align: center;
    background-size: cover;
    position: relative;
}

.splash {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}

.titulo-inscricao h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    color: #fff;
}

.titulo-inscricao p {
    font-size: 1.8rem;
    font-weight: 400;
    align-items: center;
    margin: 20px auto;
    line-height: 35px;
    max-width: 800px;
}

.inscricao-form {
    margin: 40px;
    justify-content: center;
}

.inscricao-form .linkinscricao {
    flex: 1;
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 3;
}

.cta-inscricao a {
    background: #f83600;
    padding: 20px 35px;
    border: #000000;
    border-width: 3px;
    border-style: solid;
    font-weight: 700;
    border-radius: 10px;
    font-size: 1.5rem;
    width: 100%;


    color: #fff;
    transition: all 0.3s;
    display: inline-block;
}

.cta-inscricao a:hover {
    background: #ffffff;
    color: #f83600;
}

.regulamento {
    margin-top: 20px;
    text-decoration: underline;
    font-size: 1.2rem;
}

.regulamento a {
    text-decoration: none;
    color: #fff;
}

/*fim Inscrição*/

#ranking {
    padding: 50px 0;
    background: #005CA5;
    background: radial-gradient(circle, rgba(0, 92, 165, 1) 0%, rgba(0, 14, 25, 1) 100%);
    text-align: center;
}

#ranking h2{
    color: #fff;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#ranking h2::before, #ranking h2::after{
    content: url(../img/ranking-seta.webp);
}

#ranking h2::after{
    rotate: 180deg;
}

 .main-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            gap: 40px;
            flex-wrap: wrap; 
            width: 100%;
            max-width: 1300px;
        }

        .game-section {
            flex: 1;
            min-width: 350px;
            max-width: 600px;
        }

        .game-title img{
            max-height: 40px;
            margin-bottom: 20px;
        }

        .leaderboard-container {
            background-color: #171b26;
            border-radius: 12px;
            padding: 20px 20px 10px 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .row {
            display: grid;
            grid-template-columns: 40px 2fr 1fr 1.5fr;
            align-items: center;
            padding: 16px 10px;
            border-bottom: 1px solid #2a2e39;
            font-size: 1rem;
        }

        .row:last-child {
            border-bottom: none;
        }

        .header-row {
            color: #7b86a3;
            font-weight: 600;
            font-size: 0.7rem;
            border-bottom: 2px solid #2a2e39;
            padding-bottom: 12px;
            margin-bottom: 0px; 
            padding-right: 15px; 
        }

        .rank {
            font-weight: 700;
            color: #ffffff;
        }

        .header-row .rank {
            color: #7b86a3;
        }

        .player-name {
            font-weight: 600;
        }

        .points {
            text-align: center;
            font-weight: 600;
        }

        .medals-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
        }

        .medal-group {
            display: flex;
            align-items: center;
        }

        .medal-img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .multiplier {
            font-size: 0.6rem;
            color: #9ca3af;
            font-weight: 700;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #7b86a3;
        }


        .scrollable-body {
            max-height: 530px; 
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 5px; 
        }


        .scrollable-body::-webkit-scrollbar {
            width: 6px;
        }

        .scrollable-body::-webkit-scrollbar-track {
            background: #131722;
            border-radius: 4px;
        }

        .scrollable-body::-webkit-scrollbar-thumb {
            background: #2a2e39;
            border-radius: 4px;
        }

        .scrollable-body::-webkit-scrollbar-thumb:hover {
            background: #3f4556;
        }



/*Datas*/

#datas {
    background: #FE4811 url(../img/dobra6-background.webp) center center no-repeat;
    padding: 100px 0;
    background-size: cover;
    text-align: center;
}

#datas .grid {
    display: flex;
    flex-wrap: wrap;       /* Permite que as datas pulem linha se houver muitas */
    justify-content: center; /* Centraliza as caixas de data */
    gap: 20px;             /* Espaçamento entre cada card de data */
    margin-top: 40px;
}

#datas h2 {
    text-transform: uppercase;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 40px;
}

.data-destaque-full {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px; 
    overflow: hidden; 
}
.data-destaque-full:hover {
    transform: scale(1.05);
}

.data-destaque-full img {
    width: 100%;
    height: auto;
    display: block;
}

/* Em style.css */

.data-destaque-full {
    width: 100%;
    max-width: 1000px; /* Mantendo o alinhamento das 3 caixas superiores */
    margin: 40px auto 50px;
    position: relative; /* Contexto de posicionamento para o overlay */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Garante que a imagem não vaze em telas muito pequenas */
}

.data-destaque-full .background-laranja {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.data-destaque-full .overlay-conteudo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.data-destaque-full .texto-datas {
    font-family: "Sora", sans-serif;
    font-size: 3.0rem; 
    font-weight: 800;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    
    /* Força a informação a ficar em uma única linha horizontal */
    white-space: nowrap; 
    
    /* Mantendo a proteção contra o gradiente global do h1 */
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

.data-destaque-full .bloco-final {
    margin-top: 5px; /* Cria o distanciamento da data acima */
    color: #FFFFFF;
    font-size: 1.6rem;
    font-weight: 800;
}

.data-destaque-full .logo-casak {
    height: 1.6rem; 
    width: auto;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-3px);
    
    /* Afasta o logo exatamente 10px do texto "GRANDE FINAL NA" */
    margin-left: 10px !important; 
}

.data-destaque-full .texto-endereco {
    font-family: "Sora", sans-serif;
    font-size: 0.85rem;
    color: #FFF5CC;
    margin-top: 0px; /* Ajuste fino de proximidade com a logo */
    text-transform: uppercase;
}

/* Novo: Bloco Julho Gamer (Logos e Caixa Branca) */
.data-destaque-full .bloco-julho-gamer {
    margin: 5px 0; /* Respiro entre a linha de cima e a linha de endereço */
    gap: 15px; /* Define o espaço entre os logos e a caixa branca */
}

.data-destaque-full .logo-jogo {
    height: auto;
    display: block;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

/* Controle ISOLADO do Street Fighter 6 */
.data-destaque-full .logo-sf6 {
    width: 120px; /* Digite o tamanho ideal aqui */
}

/* Controle ISOLADO do 2XKO */
.data-destaque-full .logo-2xko {
    width: 70px; /* Digite o tamanho ideal aqui */
}

.data-destaque-full .badge-julho {
    background: #FFFFFF;
    color: #000000; /* Cor da letra puxando o laranja do fundo para harmonia */
    font-family: "Sora", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 20px; /* Isso cria os cantos arredondados (formato pílula) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade na caixa */
}

/* Responsividade: Inversão de Física e Tipografia Fluida */
@media (max-width: 768px) {
    /* 1. O contêiner pai passa a abraçar o conteúdo */
    .data-destaque-full {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 180px; /* Garante um respiro mínimo */
        padding: 20px 10px; /* Espaçamento interno de segurança */
    }

    /* 2. A imagem vira um "falso background" esticável */
    .data-destaque-full .background-laranja {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Estica a fita laranja sem distorcer o miolo */
        z-index: 0;
    }

    /* 3. O texto deixa de ser absoluto e empurra o contêiner */
    .data-destaque-full .overlay-conteudo {
        position: relative;
        z-index: 1;
        height: auto;
        padding: 0;
    }

    /* 4. Textos fluidos e permissão para quebra */
    .data-destaque-full .texto-datas {
        font-size: clamp(1.6rem, 7vw, 2.2rem); /* Cresce junto com a tela */
        white-space: normal; /* Libera a quebra de linha em telas minúsculas */
    }

    .data-destaque-full .bloco-final {
        font-size: 1rem;
        flex-wrap: wrap; /* Se apertar, o logo cai pra linha de baixo elegantemente */
        justify-content: center;
    }

    .data-destaque-full .logo-casak {
        height: 1.4rem;
        margin-left: 5px !important;
    }

    /* 5. Redução drástica dos logos gigantes */
    .data-destaque-full .bloco-julho-gamer {
        flex-wrap: wrap;
        gap: 10px;
    }

    .data-destaque-full .logo-sf6 {
        width: 110px; /* Bem menor que os 190px do desktop */
    }

    .data-destaque-full .logo-2xko {
        width: 75px; /* Bem menor que os 120px do desktop */
    }

    .data-destaque-full .badge-julho {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    .data-destaque-full .texto-endereco {
        font-size: 0.7rem;
        margin-top: 10px;
    }
}
/* =========================================
   BLOCO DE TRANSMISSÃO E DIVISOR
   ========================================= */

#datas .divisor-fita {
    width: 120px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 25px auto 15px auto;
    border-radius: 3px;
}

#datas .bloco-transmissao {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 15px; 
    font-family: "Sora", sans-serif;
}

#datas .titulo-transmissao {
    color: #ffffff;
    font-size: 1.5rem; /* AUMENTE OU DIMINUA AQUI! */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#datas .link-youtube {
    color: #ffffff;
    background-color: #1a1a1a; 
    padding: 15px 35px; /* Botão mais "gordinho" */
    border-radius: 8px;
    font-size: 1.6rem; /* AUMENTE OU DIMINUA AQUI! (o botão vai crescer junto) */
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

#datas .link-youtube:hover {
    background-color: #ffffff;
    color: #fc4c02; 
    transform: scale(1.05); 
}

#datas .horarios-transmissao {
    background-color: #f5f5f5; 
    color: #000000; 
    padding: 15px 40px; 
    border-radius: 50px; 
    font-size: 1.25rem; /* AUMENTE OU DIMINUA AQUI! (Datas) */
    font-weight: 600;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
    gap: 20px; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    margin-top: 10px; 
}

#datas .horarios-transmissao strong {
    font-weight: 900;
    color: #fc4c02; 
}

#datas .divisor-horario {
    opacity: 0.2;
    font-weight: 400;
    font-size: 1.4rem; 
}

/* Responsividade da Transmissão e Divisor */
    #datas .divisor-fita {
        width: 80px;
        margin: 20px auto 10px auto;
    }

    #datas .bloco-transmissao {
        gap: 12px;
        padding: 0 10px;
    }
    
    #datas .titulo-transmissao {
        font-size: 1.1rem; /* Tamanho no celular */
    }

    #datas .link-youtube {
        font-size: 1.2rem; /* Tamanho do botão no celular */
        padding: 10px 20px;
    }

    #datas .horarios-transmissao {
        font-size: 0.85rem; /* Tamanho das datas no celular */
        padding: 12px 15px;
        gap: 8px;
    }
/* Estilo base para ambos os tipos de box (Azul e Laranja) */
.bg-azul, 
.bg-laranja {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    width: 100%;
    max-width: 320px;      /* Define um tamanho máximo elegante */
    min-height: 180px;     /* Garante altura mínima para não achatar */
    transition: transform 0.3s ease; /* Efeito suave ao passar o mouse */
    aspect-ratio: 397 / 226;
}

.bg-azul:hover, 
.bg-laranja:hover {
    transform: scale(1.05); /* Pequeno zoom ao interagir */
}

/* Cores e Backgrounds específicos */
.bg-azul {
    background: url(../img/bgazulbox.webp) center center no-repeat;
    background-size: cover;
}

.bg-laranja {
    background:url(../img/bglaranjabox.webp) center center no-repeat;
    background-size: cover;
}

#datas .grid p {
    font-weight: 900;
    font-size: 4rem;
}

#datas .grid img {
    max-width: 50%;
}

.local {
    margin-top: 50px;
    position: relative;
}

.local h3 {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.local h3::before {
    content: url(../img/controle.webp);
}

.local span strong {
    font-size: 2rem;
}

.local span {
    font-size: 1.6rem;
}

.controle {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    translate: 160% -80%;
}

/*Fim Datas*/

@media screen and (max-width: 1600px) {
    #painel-rank .grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto; 
    }
    
    .grid .card-rank:nth-child(9) { grid-area: auto; } 
    .grid .card-rank:nth-child(10) { grid-area: 4 / 2 / 5 / 3; }
}

@media screen and (max-width: 1250px) {
    #painel-rank .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    
    .grid .card-rank:nth-child(9),
    .grid .card-rank:nth-child(10) { 
        grid-area: auto; 
    }
}

@media screen and (max-width: 700px) {
    #painel-rank .grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }
    
    .grid .card-rank:nth-child(9),
    .grid .card-rank:nth-child(10) { 
        grid-area: auto; 
    }
    
    .card-rank {
        max-width: 100%;
    }
}

@media screen and (max-width: 1350px) {
    .container {
        margin: 0 30px
    }

}

@media screen and (max-width: 1035px) {

    main .container {
        margin: 0;
    }

    #arealogo {
        text-align: center;
        width: 100%;
        max-width: none;
        text-align: center;
    }

    h1 {
        font-size: 2.3rem;
    }

    h1 strong {
        font-size: 3rem;
    }

    #arealogo h2 span {
        margin: 0 auto;
        background: none;
        font-size: 1rem;
    }

    #arealogo h2 {
        font-size: 2rem;
    }

    #circuito h2 {
        font-size: 2rem;
    }

    .cta {
        margin: 0 auto;
    }


}


@media screen and (max-width: 650px) {

    #logo-kfc {
        max-width: stretch;
        padding: 20px;
    }

    .logos-secundarios {
        flex-direction: column;
        margin: auto;
        gap: 30px;
        margin-bottom: 40px;
    }

}


@media screen and (max-width: 825px) {
    #solucao .texto {
        max-width: none;
        text-align: center;
        text-wrap: balance;
    }

    #solucao .texto h2 {
        text-align: center;
    }

    #solucao hr {
        margin: 20px auto;
    }

    #solucao .texto p {
        text-align: center;
    }

    #solucao .card,
    #solucao .card,
    #solucao .card.solucao {
        max-width: none;
    }


}

@media screen and (max-width: 600px) {
 
    #solucao .card::after {
        display: none;
    }

    #computadores h2 {
        font-size: 2rem;
    }

    .pc .bg,
    .pc {
        max-width: none;
    }

    .pc {
        margin: 0 30px;
    }

    .texto-blog {
        text-align: center;
    }

    #games .card-games {
        flex-direction: column;
    }

    .local h3::before {
        display: none;
    }
}

@media screen and (max-width: 420px) {

    #arealogo a {
        padding: auto;
        flex: auto;
    }

    #datas .grid p {
        font-size: 2.4rem;
    }

    .titulo-inscricao h2 {
        font-size: 1.8rem;
    }

    .row{
        font-size: 0.8rem;
    }

    .scrollable-body{
        max-height: 250px;
    }

    #ranking h2::before, #ranking h2::after{
        display: none;
    }
}

@media screen and (max-width: 1450px) {
    #games .bg-ken {
        padding: 12px;
    }

    #games .bg-yasuo {
        padding: 12px;
    }

    #games p {
        padding: 5px;
    }

    #games p {
        font-size: clamp(1.25rem, 1vw + 1rem, 2rem);
    }

    #games strong {
        font-size: clamp(1.1rem, 0.6vw + 0.9rem, 1.5rem);
    }

    #games li {
        font-size: clamp(1.1rem, 0.6vw + 0.9rem, 1.5rem);
    }

}


@media screen and (max-width: 865px) {
  


    .bg-azul,
    .bg-laranja {
        margin: 0 auto 20px;
        max-width: 440px;

    }

    @media screen and (max-width: 865px) {
        .valor-rank p strong {
            font-size: 3.5rem;
        }

        .pontos-rank p strong {
            font-size: 2.2rem;
        }

    }

    @media screen and (max-width: 880px) {
        .box-beneficios p:nth-of-type(2)::after {
            display: none;
        }

        .box-beneficios p:nth-of-type(2) {
            padding-right: 20px;
        }

        .box-beneficios {
            flex-wrap: wrap;
        }
    }
}

@media screen and (max-width: 1830px) {
    .splash {
        display: none;
    }
}

@media screen and (max-width: 1040px) {

    .inscricao-form {
        flex-direction: column;
        align-items: center;
    }
}



.standalone-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    font-family: "Sora", sans-serif;
}

.standalone-box {
    width: 1034px;
    height: 808px;
    background-color: #161820; 
    border: 4px solid #fff; 
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.standalone-header {
    text-align: center;
    margin-bottom: 30px;
    height: 50px; 
}

.standalone-header img {
    height: 100%;
    object-fit: contain;
}

.standalone-columns {
    display: flex;
    gap: 40px;
    flex: 1;
}

.standalone-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.standalone-col:first-child {
    border-right: 1px solid #2a2e39; 
    padding-right: 40px;
}

.st-header-row {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1.5fr;
    color: #7b86a3;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid #2a2e39;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.st-row {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1.5fr;
    align-items: center;
    padding: 13px;
    border-bottom: 1px solid #232731;
    font-size: 0.9rem;
    height: 75px;
    background: #1a1d29;
}

.st-row:nth-child(odd){
    background: #222633;
}

.st-row:last-child {
    border-bottom: none;
}

.st-rank { font-weight: 700; color: #fff; text-align: left;}
.st-header-row .st-rank { color: #7b86a3; }
.st-player { font-weight: 600; color: #fff; }
.st-points { text-align: center; font-weight: 600; color: #fff; }
.st-medals { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* 1. Adicione transição na base para o container e textos */
.data-destaque-full,
.data-destaque-full .overlay-conteudo,
.data-destaque-full .texto-datas,
.data-destaque-full .bloco-final,
.data-destaque-full .bloco-julho-gamer,
.data-destaque-full .logo-jogo,
.data-destaque-full .logo-casak {
    /* Suaviza mudanças de tamanho, espaçamento e posição */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ajuste para telas abaixo de 1075px: Organização em Coluna/Escada */
@media (max-width: 1075px) {
    /* 1. Mudamos a física para o container crescer com o texto */
    .data-destaque-full {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px; /* Aumentamos o respiro vertical para a "escada" */
        min-height: auto;
    }

    /* 2. A imagem vira fundo absoluto para cobrir todo o conteúdo novo */
    .data-destaque-full .background-laranja {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* 3. O overlay vira o motor do tamanho da div */
    .data-destaque-full .overlay-conteudo {
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto;
    }

    /* 4. A DATA principal continua firme em uma linha */
    .data-destaque-full .texto-datas {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    /* 5. BLOCO FINAL: Logo desce para a linha debaixo */
    .data-destaque-full .bloco-final {
        flex-direction: column; /* Força o logo para baixo do texto */
        gap: 10px;
        margin-top: 15px;
    }

    .data-destaque-full .logo-casak {
        margin-left: 0 !important; /* Remove o espaço lateral */
        transform: none; /* Reseta o ajuste óptico lateral */
        height: 2.2rem;
    }

    /* 6. BLOCO JOGOS: Tudo um em cima do outro em coluna */
    .data-destaque-full .bloco-julho-gamer {
        flex-direction: column; /* Escada vertical */
        gap: 15px;
        margin: 20px 0;
    }

    /* Ajuste de escala dos logos para não dominarem a tela */
    .data-destaque-full .logo-sf6 {
        width: 150px; 
    }

    .data-destaque-full .logo-2xko {
        width: 100px;
    }

    /* 7. ENDEREÇO: Mantém a base da escada */
    .data-destaque-full .texto-endereco {
        font-size: 0.8rem;
        max-width: 90%;
        margin: 0 auto;
    }

    .data-destaque-full {
        /* Adicionamos uma leve animação de entrada para suavizar a troca de layout */
        animation: smoothBreak 0.5s ease-out;
    }
}

@media screen and (max-width: 1100px) {
    .standalone-box {
        width: 100%;
        height: auto;
        min-height: 808px;
    }
    .standalone-columns {
        flex-direction: column;
    }
    .standalone-col:first-child {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #2a2e39;
        padding-bottom: 40px;
    }
}

@keyframes smoothBreak {
    from { opacity: 0.8; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}