/* =============================================================================================
                              --- Código CSS para Desktop Grandes ---
============================================================================================= */
/* ------------------- IMPORTAR TIPOGRAFIAS -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ------------------------- CSS GERAL ------------------------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* -------------------------- FOOTER --------------------------- */
footer {
    background-color: var(--third-color);
    display: flex;
    justify-content: center; align-items: center;
    height: 200px;

    color: var(--neutral-text-color);
    font-size: 0.9rem; font-family: 'Nunito'; font-weight: bold;
}

footer .title {
    color: var(--neutral-text-color);
    font-size: 1.2rem; font-family: 'Fredoka'; font-weight: bold;
    text-align: left;
}

.align-footer {
    display: flex; 
    justify-content: space-between; align-items: center;
    width: var(--base-resolution-width);
}

.align-footer > div:nth-of-type(1) { width: 22%; }

.contato-localizacao ul { margin-top: 10px; }
.contato-localizacao ul li { display: flex; }

.contato-localizacao ul li img {
    width: 19px; height: 19px;
    margin-right: 10px;
}

footer a { color: var(--neutral-text-color); text-decoration: underline; }
footer a:visited, footer a:focus { color: var(--neutral-text-color); }

/* =============================================================================================
                             --- Media Query para Desktop Menores ---
============================================================================================= */
@media (max-width: 1366px) and (min-width: 981px) {
    /* -------------------------- FOOTER --------------------------- */
    footer { height: 265px; }

    .align-footer { 
        flex-wrap: wrap; 
        justify-content: center;
        gap: 30px 4vw;
    }

    .align-footer > div:nth-of-type(1) { 
        display: flex; flex-flow: column wrap;
        align-items: center;
        width: 100%; 
    }
}

/* =============================================================================================
                                --- Media Query para Celulares ---
============================================================================================= */
@media (max-width: 980px) {
    /* -------------------------- FOOTER --------------------------- */
    .align-footer > div:nth-of-type(1) { min-width: 300px; }

    footer { height: auto; }

    footer .align-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding: 30px 30px;
        width: 100%;
    }

    .contato-localizacao:nth-of-type(3) { width: 90%; }
    .contato-localizacao ul li { justify-content: center; }
    .contato-localizacao ul li:not(:first-of-type) { margin-top: 5px; }
}