/* ===============================
   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 Esquerda como Flexbox para o spacer funcionar */
.coluna-direita {
	max-width: 1000px;
}
.coluna-esquerda {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.coluna-centro {
    display: block;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* 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, 400px) 1fr; /* conteúdo | ads */

}

	
}
@media (max-width: 1270px) {
	


  .blocos-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  /* 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 */
  .blocoD4 { order: 6; } /* sobre o jogo , curiosidades */
  .blocoE3 { 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; } /* screenshots */
	
.container-conteudo-col {

    padding: 5px;

}

}