@charset "utf-8";
/* CSS Document */
.grid-master {
    display: grid;
    gap: 30px;
    padding: 20px;
    align-items: stretch;
}
/* Estilo base dos anúncios */
.ad-sticker { 

 
            padding: 20px; 
            text-align: center; 

            min-height: 300px;
        }
/* ==========================================
           CASO 1: > 1920px (3 Colunas)
           ========================================== */
@media (min-width: 1901px) {
    .grid-master {
        grid-template-columns: 1fr 900px 1fr;
    }
	
    .ad-esq, .ad-dir {
        position: sticky;
        bottom: 20px;
    }
    .col-esq, .col-dir {
        display: flex;
        flex-direction: column;
    }
    .flex-spacer {
        flex-grow: 1;
    }
}
/* ==========================================
           CASO 2: 1280px a 1920px (2 Colunas)
           ========================================== */
@media (min-width: 1301px) and (max-width: 1900px) {
    .grid-master {
        grid-template-columns: 400px 1fr;
		 gap: 10px;
    }
    /* Coluna da esquerda mantém o sticker */
    .col-esq {
        display: flex;
        flex-direction: column;
		max-width: 400px;
    }
    .ad-esq {
        position: sticky;
        bottom: 20px;
		max-width: 400px;
    }
    .flex-spacer-esq {
        flex-grow: 1;
    }
    /* A MÁGICA: A coluna da direita "explode" e joga o AD para o grid pai */
    .col-dir {
        display: contents;
		max-width: auto;
    }
    .ad-dir {
        grid-column: 2; /* Força o AD a ficar na base da coluna central */
        margin-top: 20px;
        position: static; /* No meio da página ele não é sticker */
    }
	.ad-sticker { 

 
            padding: 10px; 

        }
}
@media (min-width: 1271px) and (max-width: 1300px) {
    .grid-master {
        grid-template-columns: 1fr 860px;
		 gap: 10px;
    }
    /* Coluna da esquerda mantém o sticker */
    .col-esq {
        display: flex;
        flex-direction: column;
    }
    .ad-esq {
        position: sticky;
        bottom: 20px;
    }
    .flex-spacer-esq {
        flex-grow: 1;
    }
    /* A MÁGICA: A coluna da direita "explode" e joga o AD para o grid pai */
    .col-dir {
        display: contents;
    }
    .ad-dir {
        grid-column: 2; /* Força o AD a ficar na base da coluna central */
        margin-top: 20px;
        position: static; /* No meio da página ele não é sticker */
    }
	.ad-sticker { 

 
            padding: 10px; 

        }
}
/* ==========================================
           CASO 3: < 1280px (Mobile/Tablet)
           ========================================== */
@media (max-width: 1270px) {
    .grid-master {
        display: flex;
        flex-direction: column;
        align-items: center;
		gap: 20px;
		padding: 0px;
    
    }
    .conteudo-central, .col-esq, .col-dir {
        width: 95%;
        max-width: 860px;
		padding: 0px;
    }
    .ad-sticker { 

            padding: 00px 0px; 
            text-align: center; 
            border-radius: 10px;
            min-height: 100px;
        }
    .flex-spacer {
        display: none;
    }
}
/* ESTILO DO CONTEÚDO */
.conteudo-central {

    padding: 0px;

    min-height: 300px;

}