.footer-layout {
                display: grid;
                row-gap: 8px;
                column-gap: 8px;

                grid-template-columns: 160px auto; /* Organiza na Horizontal */
                grid-template-rows: 199px 184px 184px; /* Organiza na Vertical */ /* 199, 184(176), 184(176) */
                /* 199px área do mar */
                /* 184px para Contato - btn 3x48px, gap 2x8px, borda 2x4px, padding 2x8px */
                /* 8px para Gap */
                /* 184px para Contato - btn 3x48px, gap 2x8px, borda 2x4px, padding 2x8px */
                grid-template-areas:
                    "footer-layout-col1 footer-layout-col0"
                    "footer-layout-col1 footer-layout-col2"
                    "footer-layout-col1 footer-layout-col3";

                border: 4px solid transparent;
                border-radius: 10px; /* --layout-radius--externo */
                overflow: hidden; /* garante que nada vaze dos cantos arredondados */

                /* height: 400px; */
                width: 100%;

                align-content: start; /* Eixo Vertical do grid inteiro */
            }

            @media (min-width: 560px) {
                .footer-layout {
                    grid-template-columns: 160px auto; /* Organiza na Horizontal */ /* 200px auto */
                    grid-template-rows: 199px 184px 184px; /* Organiza na Vertical */ /* 199, 184(176), 184(176) */
                    /* 199px área do mar */
                    /* 184px para Contato - btn 3x48px, gap 2x8px, borda 2x4px, padding 2x8px */
                    /* 2x8px para Gap */
                    /* 184px para MediaHub btn 3x48px, gap 2x4px, borda 2x4px, padding 2x8px */
                    grid-template-areas:
                        "footer-layout-col1 footer-layout-col0"
                        "footer-layout-col1 footer-layout-col2"
                        "footer-layout-col1 footer-layout-col3";
                }
            }

            @media (min-width: 800px) {
                .footer-layout {
                    grid-template-columns: 160px auto 360px; /* Organiza na Horizontal */ /* 200px auto 320px */
                    grid-template-rows: 199px 184px; /* Organiza na Vertical */ /* 199px, 184(176)px */
                    /* 199px área do mar */
                    /* 184px para Contato - btn 3x48px, gap 2x8px, borda 2x4px, padding 2x8px */
                    grid-template-areas:
                        "footer-layout-col1 footer-layout-col0 footer-layout-col0"
                        "footer-layout-col1 footer-layout-col2 footer-layout-col3";
                }
            }

            .footer-layout-col0 {
                grid-area: footer-layout-col0;

                border: 4px solid transparent;
                border-radius: 10px; /* --layout-radius--externo */
                overflow: hidden; /* garante que nada vaze dos cantos arredondados */
            }

            .footer-layout-col1 {
                grid-area: footer-layout-col1;

                border: 4px solid transparent;
                border-radius: 10px; /* --layout-radius--externo */
                overflow: hidden; /* garante que nada vaze dos cantos arredondados */
            }

            .footer-layout-col2 {
                grid-area: footer-layout-col2;

                border: 4px solid var(--color-menu-footer-border);
                border-radius: 10px; /* --layout-radius--externo */
                overflow: hidden; /* garante que nada vaze dos cantos arredondados */

                background: var(--color-menu-footer-back);

                padding: 8px;
            }

            .footer-layout-col3 {
                grid-area: footer-layout-col3;

                display: flex;

                align-items: center; /* Eixo Vertical */
                justify-content: center; /* Eixo Horizontal do grid inteiro */
        
                border: 4px solid var(--color-menu-footer-media-560-border);
                border-radius: 10px; /* --layout-radius--externo */
                overflow: hidden; /* garante que nada vaze dos cantos arredondados */

                background: var(--color-menu-footer-media-560-back);

                padding: 8px;
            }

            @media (min-width: 560px) {
                .footer-layout-col0 {
                    grid-area: footer-layout-col0;
                }
                .footer-layout-col1 {
                    grid-area: footer-layout-col1;
                }

                .footer-layout-col2 {
                    grid-area: footer-layout-col2;
                }
                .footer-layout-col3 {
                    grid-area: footer-layout-col3;

                    border: 4px solid var(--color-menu-footer-media-border);
                    background: var(--color-menu-footer-media-back);
                }
            }

            @media (min-width: 992px) {
                .footer-layout-col0 {
                    grid-area: footer-layout-col0;
                }
                .footer-layout-col1 {
                    grid-area: footer-layout-col1;
                }
                .footer-layout-col2 {
                    grid-area: footer-layout-col2;
                }
                .footer-layout-col3 {
                    grid-area: footer-layout-col3;
                }
            }

            .ul-footer--menu {
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: 100%;
            }

            .ul-footer--mediahub {
                display: flex;
                flex-wrap: wrap;          /* equivalente ao auto-fit */
                gap: 4px;                 /* substitui row + column gap */

                justify-content: center;  /* centraliza os itens */
                align-items: center;

                height: auto;
            }

            .li-footer--btn-link {
                display: flex;              /* permite centralizar conteúdo */
                align-items: center;
                justify-content: center;

                width: 100%;                /* ocupa toda a largura */
                padding: 12px 16px;

                background-color: var(--layout-input-btn-wait--back);
                color: var(--layout-input-btn-wait--front);
                text-decoration: none;

                border-radius: 4px;
                transition: background-color 0.2s ease;
            }

            .li-footer--btn-link:hover {
                background-color: var(--layout-input-btn-hover--back);
                color: var(--layout-input-btn-hover--front);
                outline: none;
            }
            .li-footer--btn-link:focus-visible {
                background-color: var(--layout-input-btn-focus--back);
                color: var(--layout-input-btn-focus--front);
                outline: none;
            }