body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

header{
    
    padding: 10px 0;
    background: #f0f0f0;
}

.mapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px); /* Ajusta el valor según el tamaño de tu header y footer */
    text-align: center;
}

.mapa aside {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mapa article {
    display: flex;
    justify-content: center;
    width: 100%;
}

iframe {
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

main.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
}

main.app aside {
    display: flex;
    justify-content: center;
    width: 100%;
}

main.app article {
    display: flex;
    justify-content: center;
    width: 100%;
}

iframe {
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}