@charset "utf-8";
/* CSS Document */
* { box-sizing: border-box; margin: 0; padding: 0; }

.grid-container-col3 {
    font-family: sans-serif;
    background: #f0f2f5;
    display: grid;
    /* min-height: 110vh; /* Mantém a altura total da tela */
    
    /* Ajuste aqui: Apenas 2 linhas de tamanho para 2 linhas de áreas */
    /* A primeira linha (conteúdo) estica (1fr), a segunda (footer) se ajusta (auto) */
    
    grid-template-columns: minmax(350px, 1fr) 800px minmax(350px, 1fr);
    grid-template-rows: auto 1fr auto; /* Adicionamos uma linha 'auto' para a nav no topo */
    grid-template-areas:
        "navbar navbar navbar" /* Nova linha para a nav */
        "lateral-esq centro lateral-dir"
        "footer footer footer";
    
    gap: 20px;
    padding: 0px 0 0 0; /* Removi o padding de baixo para o footer encostar */
    box-sizing: border-box;
}
/* NAV FIXA */
.sub-navbar {
	grid-area: navbar; /* Diz ao grid onde ela deve ficar */
   /* width: 100%;
    height: 65px;
    background: #1a73e8;
    color: white;
    display: flex;
    align-items: center; 
    padding: 40px 30px 0px;
	*/
}

/* ADS */
.ad-box {
    
    align-items: center;
    justify-content: center;
    text-align: center;
	
	/*
	color: #666;
	background: #fff;
    font-weight: bold;
    display: flex;
    background: #fff;
    border: 2px dashed #4285F4;
	*/

	min-width: 300px;
    min-height: 300px;
    position: sticky;
    bottom: 20px;
    align-self: end;
    justify-self: center;
}

#ad-1 { grid-area: lateral-esq; }
#ad-2 { grid-area: lateral-dir; }

.main-centro-col3 {
    grid-area: centro;
	/* 
    background: #fff;
    padding: 30px;
    min-height: 500px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	width: 800px;
	 */
	justify-self: center;   /* 🔥 centraliza horizontalmente */
}


	/* ============================= */
/* 🖥️ FASE 2 - ATÉ 1800px       */
/* ============================= */
@media (max-width: 1800px) {

    .grid-container-col3 {
        grid-template-columns: minmax(300px, 350px) 1fr;
        grid-template-areas:
            "navbar navbar"
        "lateral-esq centro"
        "footer footer";
    }

    #ad-2 {
        display: none;
    }

    #ad-1 {
        justify-self: center;
    }
}


/* ============================= */
/* 📱 FASE 3 - ATÉ 1200px       */
/* ============================= */
@media (max-width: 1200px) {

    .grid-container-col3 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "navbar"
        "lateral-esq"
        "centro"
        "footer";
    }

    #ad-1 {
        position: relative;      /* deixa de ser sticky lateral */
        bottom: auto;
        width: 100%;
        min-height: 100px;           /* formato banner mobile */
        align-self: start;
    }

    #ad-2 {
        display: none;
    }
	.main-centro-col3 {
    padding: 30px 5px;
	width: 100%;
}
}