/* Estilo base do rodapé. */
.site-footer {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid var(--surface-border);

    margin-top: 150px;

    padding-top: 60px;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 30px;

    color: var(--text-soft);
}

/* Layout da grelha de colunas. */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px;
    width: 80vw;
    margin: 0 auto;
    padding-bottom: 24px;
}

/* Estilo dos títulos das colunas. */
.footer-col h3 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--text);
}

/* Espaçamento interno do texto e listas. */
.footer-col p,
.footer-col ul {
    margin: 0;
    padding: 5px 0;
    font-size: 0.8rem;
    transition: color 0.2s ease;
    font-weight: 300;
    max-width: 10vw;
}

/* Lista sem marcadores. */
.footer-col ul {
    list-style: none;
}

/* Espaço entre itens da lista. */
.footer-col ul li {
    margin-bottom: 10px;
    font-size: 0.8rem;
}

/* Estilo dos links do rodapé. */
.footer-col a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--text);
}

/* Marca principal do rodapé.------ ANITA N.---- */
.footer-brand {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
}

/* Espaço entre os ícones sociais. */
.social-list li {
    margin-bottom: 8px;
}

/* Base inferior do rodapé. */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    text-align: center;
    color: var(--text-soft);
    font-size: 0.85rem;
}




/* Ajuste para ecrãs médios. */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/*-------------- M O B I L E  ----------------------------------------------------------------------------------*/
@media (max-width: 620px) {

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .footer-col p,
    .footer-col ul,
    .footer-col a {

        text-align: center;
        max-width: 80%;
        margin: auto;

    }

    .footer-bottom {
        text-align: center;
    }





}