/* Exclusivo do banner dinâmico de index2.php.
   A imagem define a altura do cabeçalho, sem recortes ou distorção.
   No mobile, a imagem continua sendo exibida separadamente no conteúdo. */
@media (min-width: 576px) {
    .home-banner.home-banner-proporcional {
        display: grid;
        height: auto;
        width: 100%;
        background-image: none;
    }

    .home-banner-proporcional-link {
        grid-area: 1 / 1;
        align-self: start;
        min-width: 0;
    }

    .home-banner-proporcional-imagem {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Sobrepõe apenas o menu; a área livre continua clicável no banner. */
    .home-banner-proporcional-menu {
        grid-area: 1 / 1;
        align-self: start;
        z-index: 2;
        pointer-events: none;
    }

    .home-banner-proporcional-menu nav {
        pointer-events: auto;
    }
}