/* ===============================
   COLUNAS MÁGICAS – CSS FUNCIONAL
   =============================== */
/* Container principal */
.container-conteudo-col {
    width: 100%;
    padding: 30px;
}
/* Grid desktop: duas colunas */
.blocos-grid {
    display: grid;
    grid-template-columns: minmax(300px, 500px) 1fr;
    gap: 3.5rem;
    /* MUDANÇA AQUI: stretch obriga as colunas a terem a mesma altura */
    align-items: stretch;
}
.coluna-esquerda, .coluna-direita {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.coluna-direita {
    max-width: 1000px;
}
/* Coluna Esquerda como Flexbox para o spacer funcionar */
.coluna-esquerda {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.coluna-centro {
    display: block;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.blocoD1 {
    margin-top: -1.5rem;
}
.blocoD2 {
    margin-top: -1.5rem;
}
/* Blocos genéricos */
.bloco-col {
    width: 100%;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    /* background: #d9ebff; */
}
/* O ESPAÇADOR MÁGICO */
.flex-spacer {
    flex-grow: 1; /* Ele vai "sugar" todo o espaço restante até o chão */
    pointer-events: none;
}
/* ===============================
   MOBILE – coluna única intercalada
   =============================== */
@media (max-width: 1380px) {
    .blocos-grid {
        grid-template-columns: minmax(300px, 340px) 1fr; /* conteúdo | ads */
    }
}
@media (max-width: 1270px) {
    .blocoD1 {
        margin-top: 1.0rem;
    }
    .blocos-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    /* Remove containers das colunas */
    .coluna-esquerda, .coluna-direita {
        display: contents;
        margin-left: auto;
        margin-right: auto;
    }
    .bloco-alinhaX {
        margin-left: auto;
        margin-right: auto;
    }
    .sticky {
        position: static; /* desativa sticky no mobile */
    }
    .flex-spacer {
        display: none;
    } /* Some no mobile */
    /* Ordem mobile explícita */
    .blocoE1 {
        order: 1;
    } /* ad feed */
    .blocoD1 {
        order: 2;
    } /* Iframe C3 - Titulo - Descricao */
    .blocoD2 {
        order: 3;
    } /* ad responsivo */
    .blocoE2 {
        order: 4;
    } /* info Professores, como jogar */
    .blocoD3 {
        order: 5;
    } /* ad responsivo */
    .blocoE3 {
        order: 6;
    } /* sobre o jogo , curiosidades */
    .blocoD4 {
        order: 7;
    } /* screenshots */
    .blocoD5 {
        order: 8;
    } /* ad responsivo */
    .blocoD6 {
        order: 9;
    } /* screenshots */
    .blocoD7 {
        order: 10;
    } /* screenshots */
    .blocoD8 {
        order: 11;
    } /* screenshots */
    .blocoD9 {
        order: 12;
    } /* screenshots */
    .blocoD10 {
        order: 13;
    } 
	
	.container-conteudo-col {

    padding: 5px;
}
}