.maquetacion {
    display: grid;
    grid-template-areas:
        "header" 
        "navbar"
        "main"
        "footer";
    grid-template-columns: 100%;
    grid-template-rows: auto auto 1fr auto;
    margin: 0 auto;
    /*max-width: 100rem; limitar pantallas extra grandes*/
    min-height: 100vh;
}

.header {
    grid-area: header;
}

.navbar {
    grid-area: navbar;
    background-color: var(--color-1);
}

.main {
    grid-area: main;
    animation: aparecer 1s linear 1;
}

.footer {
    grid-area: footer;
    background-color: var(--color-1);
    border-left: 1px solid white;
}

@media (min-width: 768px) {
    .maquetacion {
        grid-template-areas:
        "navbar header" 
        "navbar main"
        "navbar main"
        "navbar footer";
        grid-template-columns: auto 1fr;
    }
    .header {
        border-bottom: 2px solid var(--color-3);
    }
}

@media (min-width: 1024px) {
}