/* ==============================================================
   GG ARQUITECTOS
   STYLE.CSS

   ORGANIZAÇÃO:

   01 — Variáveis globais
   02 — Reset e configuração geral
   03 — Página inicial / Menu
   04 — Seletor de idioma comum
   05 — Rodapé
   06 — Páginas internas
   07 — Cabeçalho comum
   08 — Contactos
   09 — Projetos
   10 — Desktop / Tablet
   11 — Mobile
   12 — Enquadramento das imagens
   13 — Cursor
   ============================================================== */

/* ==============================================================
   FONTES
   ============================================================== */

@font-face {

    font-family: "TeX Gyre Adventor";

    src:
        url("../fonts/texgyreadventor-regular.otf")
        format("opentype");

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}


@font-face {

    font-family: "TeX Gyre Adventor";

    src:
        url("../fonts/texgyreadventor-bold.otf")
        format("opentype");

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}

/* ==============================================================
   01 — VARIÁVEIS GLOBAIS
   ============================================================== */

:root {

    /* ----------------------------------------------------------
       COR PRINCIPAL
       ---------------------------------------------------------- */

    --cor-gg: rgb(29, 54, 99);


    /* ----------------------------------------------------------
       CABEÇALHO — DESKTOP
       ---------------------------------------------------------- */

    --logo-top-desktop: 24px;

    --logo-left-desktop: 24px;

    --idioma-top-desktop: 30px;

    --idioma-right-desktop: 24px;


    /* ----------------------------------------------------------
       CABEÇALHO — MOBILE
       ---------------------------------------------------------- */

    --logo-top-mobile: 20px;

    --logo-left-mobile: 24px;

    --idioma-top-mobile: 26px;

    --idioma-right-mobile: 24px;


    /* ----------------------------------------------------------
       TAMANHO DO LOGO2
       ---------------------------------------------------------- */

    --logo-width-desktop: 45px;

    --logo-width-mobile: 35px;


    /* ----------------------------------------------------------
       MARGENS MOBILE DO CONTEÚDO
       ---------------------------------------------------------- */

    --margem-conteudo-mobile: 24px;


    /* ----------------------------------------------------------
       INÍCIO DO CONTEÚDO MOBILE

       Contactos:
       24px margem superior
       +
       70px espaço antes da localização
       =
       94px
       ---------------------------------------------------------- */

    --inicio-conteudo-mobile: 94px;


    /* ----------------------------------------------------------
       RODAPÉ DOS PROJETOS

       1. distância entre o último projeto e o rodapé
       2. distância entre o rodapé e o fim da página

       DESKTOP e MOBILE são independentes.
       ---------------------------------------------------------- */

    --distancia-fundo-rodape-desktop: 20px;


    --distancia-fundo-rodape-mobile: 20px;

}



/* ==============================================================
   02 — RESET E CONFIGURAÇÃO GERAL
   ============================================================== */

html {

    width: 100%;

    height: 100%;

}


body {

    width: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

    background-color: white;

font-family:
    "TeX Gyre Adventor",
    Arial,
    Helvetica,
    sans-serif;

}


*,
*::before,
*::after {

    box-sizing: border-box;

}



/* ==============================================================
   03 — PÁGINA INICIAL / MENU
   ============================================================== */

.pagina-entrada {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: white;

}



/* ==============================================================
   LOGO DA PÁGINA INICIAL
   ============================================================== */

.ligacao-logo {

    display: block;

    text-decoration: none;

}


.logo-entrada {

    display: block;

    width: 320px;

    max-width: 60vw;

    height: auto;

    cursor: pointer;

}



/* ==============================================================
   MENU INTERATIVO
   ============================================================== */

.menu-interativo {

    position: relative;

    width: 320px;

    max-width: 60vw;

}


.menu-interativo .logo-entrada {

    width: 100%;

    max-width: none;

}



/* ==============================================================
   MENU PT / EN
   ============================================================== */

.imagem-menu {

    width: 100%;

    max-width: none;

    height: auto;

}


.imagem-menu-pt {

    display: block;

}


.imagem-menu-en {

    display: none;

}



/* ==============================================================
   ÁREAS CLICÁVEIS DO MENU
   ============================================================== */

.zona-menu {

    position: absolute;

    display: block;

    cursor: pointer;

    z-index: 2;

}


/* CONTACTOS */

.zona-contactos {

    left: 16%;

    top: 20%;

    width: 18%;

    height: 18%;

}


/* PROJETOS */

.zona-projetos {

    left: 63%;

    top: 17%;

    width: 18%;

    height: 18%;

}


/* INÍCIO */

.zona-inicio {

    left: 36.5%;

    top: 39%;

    width: 29%;

    height: 22%;

}


/* PUBLICAÇÕES */

.zona-publicacoes {

    left: 25%;

    top: 69%;

    width: 18%;

    height: 18%;

}


/* EQUIPA */

.zona-equipa {

    left: 70%;

    top: 55%;

    width: 18%;

    height: 18%;

}



/* ==============================================================
   04 — SELETOR DE IDIOMA
   ============================================================== */

.seletor-idioma {

    position: absolute;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

    padding: 0;

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1;

}

/* ==============================================================
   SELETOR ARQUITETURA / DESIGN
   ============================================================== */

.seletor-tipo-projeto {

    position: absolute;

    z-index: 50;

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0;

    padding: 0;

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1;

}


/* ==============================================================
   BOTÕES ARQUITETURA / DESIGN
   ============================================================== */

.botao-tipo-projeto {

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--cor-gg);

    font-family: inherit;

    font-size: inherit;

    font-weight: 400;

    line-height: inherit;

    text-decoration: none;

}


/* HOVER */

.botao-tipo-projeto:hover {

    text-decoration: underline;

    text-underline-offset: 3px;

}


/* OPÇÃO ATIVA */

.botao-tipo-projeto.tipo-projeto-ativo {

    text-decoration: underline;

    text-underline-offset: 3px;
    font-weight: 700;

}


/* SEPARADOR | */

.separador-tipo-projeto {

    color: var(--cor-gg);

}



/* ==============================================================
   BOTÕES PT / EN
   ============================================================== */

.botao-idioma {

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--cor-gg);

    font-family: inherit;

    font-size: inherit;

    font-weight: 400;

    line-height: inherit;

    cursor: pointer;

}


.botao-idioma.idioma-ativo {

    font-weight: 700;

}


.botao-idioma:hover {

    text-decoration: underline;

}


.separador-idioma {

    color: var(--cor-gg);

}



/* ==============================================================
   05 — RODAPÉ GERAL

   INDEX / MENU / CONTACTOS continuam com
   o funcionamento que já tinham.
   ============================================================== */

.rodape-entrada {

    position: fixed;

    right: 24px;

    bottom: 20px;

    left: 24px;

    color: var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.4;

    text-align: center;

}



/* ==============================================================
   06 — PÁGINAS INTERNAS
   ============================================================== */

.pagina-interna {

    position: relative;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    background-color: white;

    overflow-x: hidden;

}



/* ==============================================================
   07 — CABEÇALHO COMUM

   CONTACTOS + PROJETOS

   O cabeçalho fica sempre referenciado ao ecrã,
   independentemente da posição do conteúdo.
   ============================================================== */

.cabecalho-interno {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    width: 100%;

    height: 0;

    margin: 0;

    padding: 0;

    z-index: 1000;
}



/* ==============================================================
   LOGO2 — REGRAS GERAIS
   ============================================================== */

.cabecalho-logo-link {

    position: absolute;

    display: block;

    width: fit-content;

    margin: 0;

    padding: 0;

    text-decoration: none;

    z-index: 50;

}


.cabecalho-logo {

    display: block;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

}



/* ==============================================================
   08 — CONTACTOS
   ============================================================== */

.pagina-contactos {

    overflow-y: auto;

}



/* ==============================================================
   CONTACTOS — MORADA
   ============================================================== */

.contactos-morada {

    margin: 0 0 24px;

    font-style: normal;

}


.contactos-morada-link {

    display: inline-block;

    color: var(--cor-gg);

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

    text-decoration: none;

}


.contactos-morada-link:hover {

    text-decoration: underline;

}



/* ==============================================================
   CONTACTOS — TELEFONE / EMAIL
   ============================================================== */

.contactos-ligacoes {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin-bottom: 24px;

}


.contactos-link {

    color: var(--cor-gg);

    text-decoration: none;

}


.contactos-link:hover {

    text-decoration: underline;

}



/* ==============================================================
   CONTACTOS — REDES SOCIAIS
   ============================================================== */

.contactos-redes-sociais {

    display: flex;

    align-items: center;

    gap: 16px;

}


.contactos-rede-link {

    display: block;

    line-height: 0;

}


.contactos-rede-icone {

    display: block;

    width: 20px;

    height: 20px;

    object-fit: contain;

}


.contactos-rede-link:hover .contactos-rede-icone {

    opacity: 0.65;

}



/* ==============================================================
   09 — PROJETOS

   ALTERAÇÃO:

   projetos.html passa a funcionar como coluna.

   Isto permite que:
   projetos
   ↓
   rodapé
   ↓
   fim da página

   façam parte do mesmo fluxo vertical.
   ============================================================== */

.pagina-projetos {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    overflow-y: auto;

}



/* ==============================================================
   IMAGENS DOS PROJETOS
   ============================================================== */

.projeto-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* ==============================================================
   IMAGENS NORMAL / HOVER
   ============================================================== */

.projeto-imagem-base,
.projeto-imagem-hover {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity 0.5s ease;

}


.projeto-imagem-base {

    opacity: 1;

}


.projeto-imagem-hover {

    opacity: 0;

}



/* ==============================================================
   OVERLAY
   ============================================================== */

.projeto-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background-color: rgba(29, 54, 99, 0);

    opacity: 0;

    transition:
        background-color 0.25s ease,
        opacity 0.25s ease;

}



/* ==============================================================
   TEXTO DOS PROJETOS
   ============================================================== */

.projeto-nome {

    display: block;

    width: 100%;

    color: white;

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    text-align: center;

}


.projeto-nome-linha1 {

    display: block;

    font-weight: 700;

    line-height: 1.25;

    margin-bottom: 5px;

}


.projeto-nome-linha2 {

    display: block;

    font-weight: 400;

    line-height: 1.25;

}


.projeto-nome-linha3 {

    display: block;

    font-weight: 400;

    line-height: 1.25;

}



/* ==============================================================
   HOVER DOS PROJETOS
   ============================================================== */

@media (hover: hover) {

    .projeto-concluido:hover .projeto-imagem-base {

        opacity: 0;

    }


    .projeto-concluido:hover .projeto-imagem-hover {

        opacity: 1;

    }


    .projeto-concluido:hover .projeto-overlay {

        opacity: 1;

    }


    .projeto-em-curso:hover .projeto-overlay {

        background-color: rgba(29, 54, 99, 1);

        opacity: 1;

    }

}


.projeto-em-curso {

    cursor: default;

}



/* ==============================================================
   10 — DESKTOP / TABLET
   701px PARA CIMA
   ============================================================== */

@media (min-width: 701px) {


    /* ==========================================================
       VARIÁVEIS DE CONTEÚDO DESKTOP
       ========================================================== */

    .pagina-interna {

        --gg-largura-conteudo:
            min(
                80vw,
                calc((100vh - 220px) * 1.85),
                1200px
            );


        --gg-meia-altura-contactos:
            min(
                20vw,
                calc((100vh - 220px) * 0.4625),
                300px
            );


        --gg-inicio-conteudo:
            calc(
                50vh -
                var(--gg-meia-altura-contactos)
            );

    }



    /* ==========================================================
       CABEÇALHO DESKTOP
       ========================================================== */

    .cabecalho-logo-link {

        top: var(--logo-top-desktop);

        left: var(--logo-left-desktop);

        right: auto;

        bottom: auto;

        width: var(--logo-width-desktop);

    }


    .seletor-idioma {

        top: var(--idioma-top-desktop);

        right: var(--idioma-right-desktop);

        left: auto;

        bottom: auto;

    }



    /* ==========================================================
       CONTACTOS — COMPOSIÇÃO DESKTOP
       ========================================================== */

    .contactos-composicao {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: var(--gg-largura-conteudo);

        aspect-ratio: 2 / 1;

        container-type: inline-size;

        display: grid;

        grid-template-columns: repeat(7, 1fr);

        grid-template-rows: 60% 40%;

        column-gap:
            clamp(
                16px,
                2.5cqw,
                40px
            );

        row-gap: 0;

        overflow: visible;

        background-color: white;

    }



    /* ==========================================================
       CONTACTOS — TEXTO
       ========================================================== */

    .contactos-dados {

        grid-column: 1 / span 2;

        grid-row: 1;

        width: 100%;

        height: 100%;

        min-width: 0;

        min-height: 0;

        padding: 0;

        color: var(--cor-gg);

        font-family:
            "TeX Gyre Adventor",
            Arial,
            Helvetica,
            sans-serif;

        font-size:
            clamp(
                12px,
                2cqw,
                14px
            );

        line-height: 1.75;

    }


    .contactos-nome {

        margin: 0;

        font-weight: 700;

    }


    .contactos-dados p {

        margin: 0;

    }



    /* ==========================================================
       CONTACTOS — FOTO DO ATELIER
       ========================================================== */

    .contactos-foto-atelier-caixa {

        grid-column: 1 / span 2;

        grid-row: 2;

        width: 100%;

        height: 100%;

        min-width: 0;

        min-height: 0;

        overflow: hidden;

    }


    .contactos-foto-atelier {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: 80% 20%;

    }



    /* ==========================================================
       CONTACTOS — LOCALIZAÇÃO
       ========================================================== */

    .contactos-localizacao-caixa {

        grid-column: 3 / span 5;

        grid-row: 1 / span 2;

        width: 100%;

        height: 100%;

        min-width: 0;

        min-height: 0;

        overflow: hidden;

    }


    .contactos-localizacao {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: 30% 50%;

    }



    /* ==========================================================
       PROJETOS — ÁREA DESKTOP

       A margem inferior fica a 0 porque a distância
       entre projetos e rodapé passa a ser controlada
       diretamente pelo rodapé.
       ========================================================== */

    .projetos-area {

        position: relative;

        width: var(--gg-largura-conteudo);

        margin-top:
            var(--gg-inicio-conteudo);

        margin-right:
            auto;

        margin-bottom:
            0;

        margin-left:
            auto;

        container-type:
            inline-size;

        height:
            auto;

        overflow:
            visible;

    }



    /* ==========================================================
       PROJETOS — CARTÕES DESKTOP
       ========================================================== */

    .projeto-card {

        position: absolute;

        display: block;

        overflow: hidden;

        text-decoration: none;

    }

/* ==========================================================
   SELETOR ARQUITETURA / DESIGN — DESKTOP
   Sobre a primeira imagem
   ========================================================== */

.seletor-tipo-projeto {

    left: 0cqw;

    top: 0cqw;

}

    /* PROJETO 01 */

    .projeto-01 {

        left: 0cqw;

        top: 5cqw;

        width: 25cqw;

        height: 62cqw;

    }



    /* PROJETO 02 */

    .projeto-02 {

        left: 27cqw;

        top: 51cqw;

        width: 40cqw;

        height: 22.5cqw;

    }



    /* PROJETO 03 */

    .projeto-03 {

        left: 58cqw;

        top: 5cqw;

        width: 40cqw;

        height: 31.5cqw;

    }



    /* PROJETO 04 */

    .projeto-04 {

        left: 69cqw;

        top: 38.75cqw;

        width: 20cqw;

        height: 32.5cqw;

    }



    /* PROJETO 05 */

    .projeto-05 {

        left: 35cqw;

        top: 5cqw;

        width: 21cqw;

        height: 35.5cqw;

    }

/* PROJETO 06 */

.projeto-06 {

    right: 0.5cqw;

    top: 75cqw;

    width: 30.5cqw;

    height: 45cqw;

}


/* PROJETO 10 */

.projeto-10 {

    left: 12cqw;

    top: 101.5cqw;

    width: 45cqw;

    height: 25cqw;

}

/* PROJETO 11 */

.projeto-11 {

   right: 0cqw;

    top: 128.5cqw;

    width: 31cqw;

    height: 31cqw;

}

/* PROJETO 12 */

.projeto-12 {

    left: 12cqw;

    top: 75cqw;

    width: 55cqw;

    height: 25cqw;

}

/* PROJETO 13 */

.projeto-13 {

    right: 2cqw;

    top: 171.5cqw;

    width: 40cqw;

    height: 25cqw;

}

/* PROJETO 14 */

.projeto-14 {

    right: 33cqw;

    top: 128.5cqw;

    width: 42cqw;

    height: 31cqw;

}

/* PROJETO 15 */

.projeto-15 {

    left: 1cqw;

    top: 128.5cqw;

    width: 22cqw;

    height: 50cqw;

}

/* PROJETO 20 */

.projeto-20 {

    left: 25cqw;

    top: 162cqw;

    width: 30cqw;

    height: 40cqw;

}


    /* ==========================================================
       TEXTO DOS PROJETOS
       ========================================================== */

    .projeto-nome-linha1 {

        font-size:
            clamp(
                11px,
                1.4cqw,
                18px
            );

    }


    .projeto-nome-linha2 {

        font-size:
            clamp(
                9px,
                1.05cqw,
                14px
            );

    }


    .projeto-nome-linha3 {

        font-size:
            clamp(
                8px,
                0.9cqw,
                12px
            );

        margin-top:
            clamp(
                10px,
                1.4cqw,
                22px
            );

    }

/* ==========================================================
   DESIGN — COMPOSIÇÃO DESKTOP
   ========================================================== */


/* PROJETO 07 */

.pagina-design .projeto-07 {

    left: 0cqw;

    top: 5cqw;

    width: 31cqw;

    height: 20cqw;

}


/* PROJETO 08 */

.pagina-design .projeto-08 {

    left: 13cqw;

    top: 27cqw;

    width: 35cqw;

    height: 35cqw;

}


/* PROJETO 09 */

.pagina-design .projeto-09 {

    right: 0cqw;

    top: 5cqw;

    width: 50cqw;

    height: 30cqw;

}

/* PROJETO 16 */

.pagina-design .projeto-16 {

    right: 52cqw;

    top: 64cqw;

    width: 50cqw;

    height: 20cqw;

}

/* PROJETO 17 */

.pagina-design .projeto-17 {

    right: 20cqw;

    top: 64cqw;

    width: 25cqw;

    height: 35cqw;

}


/* PROJETO 18 */

.pagina-design .projeto-18 {

    right: 0cqw;

    top: 37cqw;

    width: 15cqw;

    height: 42cqw;

}

/* PROJETO 19 */

.pagina-design .projeto-19 {

    right: 47cqw;

    top: 86cqw;

    width: 30cqw;

    height: 50cqw;

}


    /* ==========================================================
       RODAPÉ DOS PROJETOS — DESKTOP

       DISTÂNCIA:
       último projeto
       ↓
       --distancia-projetos-rodape-desktop
       ↓
       rodapé
       ↓
       --distancia-fundo-rodape-desktop
       ↓
       fim da página
       ========================================================== */

    .pagina-projetos .projetos-rodape {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        flex-shrink: 0;

        width: auto;

        margin-top:
            50px;

        margin-right:
            24px;

        margin-bottom:
            20px;

        margin-left:
            24px;

        text-align: center;

    }

}

/* ==============================================================
   FAIXA DE TEXTO EM MOVIMENTO
   ============================================================== */

.faixa-texto {

    position: relative;

    width:
        var(--gg-largura-conteudo);

    margin-top: 50px;

    margin-right: auto;

    margin-left: auto;

    overflow: hidden;

    color:
        var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.3;

padding-top: 2px;
    padding-bottom: 2px;

    white-space: nowrap;

}


/* ==============================================================
   ELEMENTO QUE SE MOVE
   ============================================================== */

.faixa-texto-track {

    display: flex;

    width: max-content;

    animation:
        faixa-texto-movimento
        18s
        linear
        infinite;

    will-change: transform;

}


/* ==============================================================
   CADA GRUPO
   ============================================================== */

.faixa-texto-grupo {

    display: flex;

    flex-shrink: 0;

    align-items: center;

}


/* ==============================================================
   CADA FRASE
   ============================================================== */

.faixa-texto-grupo span {

    display: inline-block;

    padding-right: 70px;

}


/* ==============================================================
   ANIMAÇÃO CONTÍNUA
   ============================================================== */

@keyframes faixa-texto-movimento {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}

/* ==============================================================
   TABLET
   ============================================================== */

@media (min-width: 701px) and (max-width: 1024px) {

    .contactos-dados {

        font-size: 10px;

        line-height: 1.55;

    }

}



/* ==============================================================
   11 — MOBILE
   ATÉ 700px
   ============================================================== */

@media (max-width: 700px) {

/* ==========================================================
   SELETOR ARQUITETURA / DESIGN — MOBILE
   ========================================================== */

.seletor-tipo-projeto {

    left: 12px;

    top: 12px;

    font-size: 14px;

}

/* ==========================================================
   FAIXA EM CONSTRUÇÃO — MOBILE
   ========================================================== */

.faixa-texto {

    display: block;

    width: auto;

    margin-top: 60px;

    margin-right:
        var(--margem-conteudo-mobile);

    margin-left:
        var(--margem-conteudo-mobile);

    overflow: hidden;

    font-size: 12px;

}


.faixa-texto-track {

    display: flex;

    width: max-content;

    animation:
        faixa-texto-movimento
        14s
        linear
        infinite;

    will-change: transform;

}


.faixa-texto-grupo {

    display: flex;

    flex-shrink: 0;

    align-items: center;

}


.faixa-texto-grupo span {

    display: inline-block;

    flex-shrink: 0;

    padding-right: 50px;

}

    /* ==========================================================
       PÁGINAS INTERNAS MOBILE
       ========================================================== */

    .pagina-interna {

        position: relative;

        width: 100%;

        min-height: 100vh;

        margin: 0;

        padding: 0;

        background-color: white;

        overflow-x: hidden;

        overflow-y: auto;

    }



    /* ==========================================================
       CABEÇALHO MOBILE
       ========================================================== */

    .cabecalho-logo-link {

        top:
            var(--logo-top-mobile);

        left:
            var(--logo-left-mobile);

        right:
            auto;

        bottom:
            auto;

        width:
            var(--logo-width-mobile);

    }


    .seletor-idioma {

        top:
            var(--idioma-top-mobile);

        right:
            var(--idioma-right-mobile);

        left:
            auto;

        bottom:
            auto;

    }



    /* ==========================================================
       CONTACTOS MOBILE
       ========================================================== */

    .contactos-composicao {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto;

        row-gap: 30px;

        width: auto;

        height: auto;

        margin-top: 24px;

        margin-right:
            var(--margem-conteudo-mobile);

        margin-bottom:
            30px;

        margin-left:
            var(--margem-conteudo-mobile);

        overflow: visible;

    }



    /* ==========================================================
       CONTACTOS — LOCALIZAÇÃO MOBILE
       ========================================================== */

    .contactos-localizacao-caixa {

        grid-column: 1;

        grid-row: 1;

        position: relative;

        width: 100%;

        height: auto;

        aspect-ratio: 5 / 4;

        margin: 0;

        padding-top: 70px;

        overflow: hidden;

    }


    .contactos-localizacao-caixa img {

        display: block;

        width: 200%;

        height: 160%;

        object-fit: cover;

        object-position: 100% 50%;

    }



    /* ==========================================================
       CONTACTOS — DADOS MOBILE
       ========================================================== */

    .contactos-dados {

        grid-column: 1;

        grid-row: 2;

        position: relative;

        width: 100%;

        height: auto;

        min-height: 0;

        margin: 0;

        padding: 0;

        color: var(--cor-gg);

        font-family:
            "TeX Gyre Adventor",
            Arial,
            Helvetica,
            sans-serif;

        font-size:
            clamp(
                12px,
                3.2vw,
                14px
            );

        line-height: 2;

    }


    .contactos-nome {

        margin: 0;

        font-weight: 700;

    }


    .contactos-dados p {

        margin: 0;

    }



    /* ==========================================================
       CONTACTOS — FOTO MOBILE
       ========================================================== */

    .contactos-foto-atelier-caixa {

        grid-column: 1;

        grid-row: 3;

        position: relative;

        width: 100%;

        height: auto;

        aspect-ratio: 16 / 9;

        margin: 0;

        padding: 0;

        overflow: hidden;

    }


    .contactos-foto-atelier-caixa img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: 50% 50%;

    }



    /* ==========================================================
       PROJETOS MOBILE

       Mantém:
       - margem lateral 24px
       - início aos 94px
       - organização vertical

       A margem inferior passa a 0 porque
       o rodapé controla diretamente a distância.
       ========================================================== */

    .projetos-area {

        position: relative;

        width: auto;

        height: auto;

        margin-top:
            var(--inicio-conteudo-mobile);

        margin-right:
            var(--margem-conteudo-mobile);

        margin-bottom:
            0;

        margin-left:
            var(--margem-conteudo-mobile);

        display: flex;

        flex-direction: column;

        gap: 18px;

        overflow: visible;

    }



    /* ==========================================================
       PROJETOS — CARTÕES MOBILE
       ========================================================== */

    .projeto-card {

        position: relative;

        left: auto;

        right: auto;

        top: 45px;

        bottom: auto;

        width: 100%;

        height: auto;

        flex-shrink: 0;

        overflow: hidden;

        text-decoration: none;

    }



    /* ==========================================================
       PROPORÇÕES DOS PROJETOS MOBILE
       ========================================================== */

    .projeto-01 {

        aspect-ratio: 4 / 6;
        order: 1;

    }


    .projeto-02 {

        aspect-ratio: 16 / 9;
        order: 4;
    }


    .projeto-03 {

        aspect-ratio: 16 / 9;
        order: 3;
    }


    .projeto-04 {

        aspect-ratio: 4 / 6;
        order: 5;

    }


    .projeto-05 {

        aspect-ratio: 4 / 7;
        order: 2;
    }

.projeto-06 {

        aspect-ratio: 4 / 6;
        order: 6;
    }

.projeto-10 {

        aspect-ratio: 16 / 9;
        order: 8;
    }

.projeto-11 {

        aspect-ratio: 16 / 9;
        order: 11;
    }

.projeto-12 {

        aspect-ratio: 18 / 9;
        order: 7;
    }

.projeto-13 {

        aspect-ratio: 16 / 9;
        order: 12;
    }

.projeto-14 {

        aspect-ratio: 16 / 9;
        order: 10;
    }

.projeto-15 {

        aspect-ratio: 9 / 12;
        order: 9;
    }

.projeto-20 {

        aspect-ratio: 9 / 11;
        order: 13;
    }

    /* ==========================================================
       TEXTO MOBILE
       ========================================================== */

    .projeto-nome-linha1 {

        font-size: 16px;

    }


    .projeto-nome-linha2 {

        font-size: 12px;

    }


    .projeto-nome-linha3 {

        font-size: 11px;

        margin-top: 15px;

    }



    /* ==========================================================
       RODAPÉ CONTACTOS MOBILE

       NÃO ALTERADO.
       ========================================================== */

    .pagina-contactos .rodape-entrada {

        position: relative;

        right: auto;

        bottom: 16px;

        left: auto;

        width: auto;

        margin: 20px;

        text-align: center;

        font-size: 10px;


    }



    /* ==========================================================
       RODAPÉ PROJETOS MOBILE

       Segue o conteúdo dos projetos.
       ========================================================== */

    .pagina-projetos .projetos-rodape {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        flex-shrink: 0;

        width: auto;

        margin-top:
            10px;

        margin-right:
            20px;

        margin-bottom:
            16px;

        margin-left:
            20px;

        text-align: center;

        font-size: 10px;

    }


 /* ==========================================================
       DESIGN — CARTÕES MOBILE
       ========================================================== */

    .pagina-design .projeto-card {

        position: relative;

        left: auto;

        right: auto;

        top: 45px;

        bottom: auto;

        width: 100%;

        height: auto;

        flex-shrink: 0;

        overflow: hidden;

        text-decoration: none;

    }

/* ==========================================================
   DESIGN — MOBILE
   ========================================================== */

.pagina-design .projeto-07 {

    aspect-ratio: 16 / 12;

    order: 1;

}


.pagina-design .projeto-08 {

    aspect-ratio: 16 / 16;

    order: 3;

}


.pagina-design .projeto-09 {

    aspect-ratio: 16 / 9;

    order: 2;

}

.pagina-design .projeto-16 {

    aspect-ratio: 16 / 15;

    order: 4;

}

.pagina-design .projeto-17 {

    aspect-ratio: 5 / 7;

    order: 6;

}
.pagina-design .projeto-18 {

    aspect-ratio: 9 / 20;

    order: 5;

}

.pagina-design .projeto-19 {

    aspect-ratio: 9 / 16;

    order: 7;

}


    /* ==========================================================
       RODAPÉ INDEX / MENU MOBILE

       NÃO ALTERADO.
       ========================================================== */

    .pagina-entrada .rodape-entrada {

        right: 18px;

        bottom: 16px;

        left: 18px;

        font-size: 10px;

    }

}



/* ==============================================================
   12 — ENQUADRAMENTO DAS IMAGENS DOS PROJETOS
   ============================================================== */

.projeto-01 img {

    object-position: 50% 50%;

}


.projeto-02 img {

    object-position: 50% 50%;

}


.projeto-03 img {

    object-position: 50% 50%;

}


.projeto-04 img {

    object-position: 40% 22%;

}


.projeto-05 img {

    object-position: 50% 50%;

}



/* ==============================================================
   13 — CURSOR PERSONALIZADO
   ============================================================== */

@media (pointer: fine) {

    html,
    body,
    a,
    button,
    input,
    textarea,
    select {

        cursor: none !important;

    }


    .cursor-personalizado {

        position: fixed;

        top: 0;

        left: 0;

        width: 16px;

        height: 16px;

        border-radius: 50%;

        background-color:
            rgba(29, 54, 99, 0.8);

        pointer-events: none;

        z-index: 99999;

        opacity: 1;

        transform:
            translate(-50%, -50%);

        transition:
            width 0.15s ease,
            height 0.15s ease,
            opacity 0.15s ease,
            background-color 0.15s ease;

    }


    .cursor-personalizado.cursor-visivel {

        opacity: 1;

    }


    .cursor-personalizado.cursor-sobre-link {

        width: 50px;

        height: 50px;

        background-color:
            rgba(29, 54, 99, 0.2);

    }

}

/* ==========================================================
   PROJETOS — TOUCH
   ========================================================== */


/* ----------------------------------------------------------
   PROJETOS CONCLUÍDOS

   1.º toque:
   - imagem normal desaparece
   - imagem hover aparece
   - texto aparece

   2.º toque:
   - abre a página do projeto
   ---------------------------------------------------------- */

.projeto-concluido.toque-ativo
.projeto-imagem-base {

    opacity: 0;

}


.projeto-concluido.toque-ativo
.projeto-imagem-hover {

    opacity: 1;

}


.projeto-concluido.toque-ativo
.projeto-overlay {

    opacity: 1;

}



/* ----------------------------------------------------------
   PROJETOS A DECORRER

   Toque:
   - fica azul sólido
   - aparece informação
   ---------------------------------------------------------- */

.projeto-em-curso.toque-ativo
.projeto-overlay {

    background-color:
        rgba(29, 54, 99, 1);

    opacity: 1;

}

/* ==============================================================
   14 — PÁGINA INDIVIDUAL DE PROJETO
   GGLL139 E FUTUROS PROJETOS

   DESKTOP:
   - 7 colunas
   - colunas 1 + 2 = informação
   - coluna 3 = vazia
   - colunas 4 + 5 + 6 + 7 = galeria

   MOBILE:
   - título + local/ano
   - galeria
   - ficha técnica
   ============================================================== */


/* ==============================================================
   CONFIGURAÇÃO GERAL DA PÁGINA
   ============================================================== */

.pagina-projeto {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    overflow-y: auto;

    background-color: white;

}



/* ==============================================================
   ÁREA PRINCIPAL
   ============================================================== */

.projeto-detalhe-area {

    position: relative;

    flex-shrink: 0;

}



/* ==============================================================
   TÍTULO + LOCAL / ANO
   ============================================================== */

.projeto-detalhe-topo {

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

}


.projeto-detalhe-titulo {

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family: inherit;

    font-weight: 700;

}

@media (min-width: 701px) and (max-width: 1024px) {

    .projeto-detalhe-titulo {
        white-space: nowrap;
        font-size: 12px;
    }

}


.projeto-detalhe-local-ano {

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family: inherit;

    font-weight: 400;

}



/* ==============================================================
   FICHA TÉCNICA
   ============================================================== */

.projeto-detalhe-info-secundaria {

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

}


.projeto-detalhe-ficha {

    margin: 0;

    padding: 0;

}


.projeto-detalhe-legenda {

    margin: 0;

    padding: 0;

    font-weight: 400;

}


.projeto-detalhe-valor {

    margin: 0;

    padding: 0;

    font-weight: 400;

}



/* ==============================================================
   GALERIA
   ============================================================== */

.projeto-detalhe-galeria {

    margin: 0;

    padding: 0;

}


.projeto-detalhe-figura {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

    overflow: hidden;

}



/* ==============================================================
   IMAGENS

   REGRA BASE:

   - nunca distorcer
   - nunca cortar
   - nunca ultrapassar a largura da galeria
   ============================================================== */

.projeto-detalhe-imagem {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain;

    object-position: center;

    margin: 0 auto;

    padding: 0;

}



/* ==============================================================
   DESKTOP / TABLET
   701px PARA CIMA
   ============================================================== */

@media (min-width: 701px) {


    /* ==========================================================
       ÁREA PRINCIPAL

       7 COLUNAS

       1 + 2 = informação
       3     = espaço vazio
       4–7   = galeria
       ========================================================== */

    .projeto-detalhe-area {

        width:
            var(--gg-largura-conteudo);

        margin-top:
            var(--gg-inicio-conteudo);

        margin-right:
            auto;

        margin-bottom:
            0;

        margin-left:
            auto;


        display:
            grid;


        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            );


        column-gap:
            0;


        align-items:
            start;

    }



    /* ==========================================================
       TÍTULO + LOCAL / ANO

       COLUNAS 1 + 2
       ============================================================== */

    .projeto-detalhe-topo {

    position: fixed;

    top: var(--gg-inicio-conteudo);

    left:
        calc(
            (100vw - var(--gg-largura-conteudo)) / 2
        );

    width:
        calc(
            var(--gg-largura-conteudo) * 2 / 7
        );

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 4px;

    margin: 0;

    padding: 0;

    z-index: 20;
}



    .projeto-detalhe-titulo {

        flex:
            0 1 auto;

        font-size:
            clamp(
                13px,
                1.2vw,
                17px
            );

        line-height:
            1.25;

    }



    .projeto-detalhe-local-ano {

        flex:
            0 0 auto;

        font-size:
            clamp(
                10px,
                0.9vw,
                13px
            );

        line-height:
            1.25;

        text-align:
            left;

    }



    /* ==========================================================
       FICHA TÉCNICA

       Também ocupa as colunas 1 + 2.

       Fica por baixo do título.
       ============================================================== */

   .projeto-detalhe-info-secundaria {

    position: fixed;

    top:
        calc(
            var(--gg-inicio-conteudo) + 125px
        );

    left:
        calc(
            (100vw - var(--gg-largura-conteudo)) / 2
        );

    width:
        calc(
            var(--gg-largura-conteudo) * 2 / 7
        );

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            11px,
            1vw,
            14px
        );

    line-height: 1.55;

    z-index: 20;
}


    .projeto-detalhe-ficha {

        margin-bottom:
            22px;

    }



    .projeto-detalhe-legenda {

        margin-bottom:
            3px;

    }



    /* ==========================================================
       GALERIA

       COLUNA 3 FICA VAZIA.

       A galeria começa na coluna 4
       e ocupa até à coluna 7.
       ============================================================== */

    .projeto-detalhe-galeria {

        grid-column:
            4 / 8;

        grid-row:
            1;

        display:
            flex;

        flex-direction:
            column;

        gap:
            18px;

        width:
            100%;

        min-width:
            0;

    }



    /* ==========================================================
       IMAGENS DESKTOP

       IMPORTANTE:

       A largura máxima é a largura da galeria.

       A altura máxima é a altura do ecrã
       menos 120px.

       Assim:

       FOTO HORIZONTAL
       → tende a ocupar toda a largura.

       FOTO VERTICAL
       → reduz automaticamente até caber
         inteira na altura do ecrã.

       Nunca usa object-fit: cover.
       Portanto nunca existe corte.
       ============================================================== */

    /* ==========================================================
   IMAGENS DA GALERIA — DESKTOP
   ========================================================== */


/* CAIXA DE TODAS AS FOTOGRAFIAS */

.projeto-detalhe-figura {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;
}


/* FOTOGRAFIAS HORIZONTAIS */

.projeto-detalhe-imagem-horizontal {

    display: block;

    width: 100%;

    height: auto;

    max-width: auto;

    margin: 0;
}


/* FOTOGRAFIAS VERTICAIS */

.projeto-detalhe-imagem-vertical {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    max-height: calc(100vh - 40px);

    object-fit: cover;

    object-position: center;

    margin-left: 0;

    margin-right: 0;
}



    /* ==========================================================
       RODAPÉ DESKTOP
       ============================================================== */

    .pagina-projeto .projeto-detalhe-rodape {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

        flex-shrink:
            0;

        width:
            auto;

        margin-top:
            20px;

        margin-right:
            24px;

        margin-bottom:
            20px;

        margin-left:
            24px;

        text-align:
            center;

    }

}



/* ==============================================================
   MOBILE
   ATÉ 700px
   ============================================================== */

@media (max-width: 700px) {


    /* ==========================================================
       ÁREA PRINCIPAL MOBILE

       A ordem é exatamente a ordem do HTML:

       1. título
       2. galeria
       3. ficha técnica
       ============================================================== */

    .projeto-detalhe-area {

        display:
            flex;

        flex-direction:
            column;

        width:
            auto;

        height:
            auto;

        margin-top:
            var(--inicio-conteudo-mobile);

        margin-right:
            var(--margem-conteudo-mobile);

        margin-bottom:
            0;

        margin-left:
            var(--margem-conteudo-mobile);

        padding: 0;

        box-sizing: border-box;

    }



    /* ==========================================================
       TÍTULO + LOCAL / ANO MOBILE
       ============================================================== */

    .projeto-detalhe-topo {

    position:
        relative;

    top:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;

    gap:
        4px;

    width:
        100%;

    margin:
        0 0 28px;

    padding:
        0;
}



    .projeto-detalhe-titulo {

        font-size:
            16px;

        line-height:
            1.25;

    }



    .projeto-detalhe-local-ano {

        font-size:
            12px;

        line-height:
            1.25;

        text-align:
            left;

    }



    /* ==========================================================
       GALERIA MOBILE
       ============================================================== */

    .projeto-detalhe-galeria {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: auto;

    margin: 0px;

    padding: 0;

    gap: 14px;

    box-sizing: border-box;
}


.projeto-detalhe-imagem,
.projeto-detalhe-imagem-horizontal,
.projeto-detalhe-imagem-vertical {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: calc(100svh - 120px);

    object-fit: contain;

    object-position: center;

    margin-left: auto;

    margin-right: auto;
}



    /* ==========================================================
       IMAGENS MOBILE

       Também nunca são cortadas.

       100svh corresponde à altura visível
       do ecrã do telemóvel.

       Retiramos 120px para criar margem
       e evitar que a fotografia fique escondida
       pelas barras do browser.
       ============================================================== */

    .projeto-detalhe-imagem {

        display:
            block;

        width:
            100%;

        height:
            auto;

        max-width:
            100%;

        max-height:
            calc(100svh - 120px);

        object-fit:
            contain;

        object-position:
            center;

        margin-left:
            auto;

        margin-right:
            auto;

    }



    /* ==========================================================
       FICHA TÉCNICA MOBILE

       Surge DEPOIS da última fotografia.
       ============================================================== */

    .projeto-detalhe-info-secundaria {

        position:
            relative;

        top:
            auto;

        width:
            100%;

        margin-top:
            30px;

        margin-right:
            0;

        margin-bottom:
            0;

        margin-left:
            0;

        padding:
            0;

        font-size:
            clamp(
                12px,
                3.2vw,
                14px
            );

        line-height:
            1.6;

    }



    .projeto-detalhe-ficha {

        margin-bottom:
            18px;

    }



    .projeto-detalhe-legenda {

        margin-bottom:
            2px;

    }



    /* ==========================================================
       RODAPÉ MOBILE
       ============================================================== */

    .pagina-projeto .projeto-detalhe-rodape {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

        flex-shrink:
            0;

        width:
            auto;

        margin-top:
            10px;

        margin-right:
            20px;

        margin-bottom:
            16px;

        margin-left:
            20px;

        text-align:
            center;

        font-size:
            10px;

    }

}

@media (pointer: fine) {

    .scroll-galeria-ativo .cursor-personalizado,
    .scroll-publicacoes-ativo .cursor-personalizado,
    .scroll-pagina-ativo .cursor-personalizado {

        width: 50px;

        height: 50px;

        background-color:
            rgba(29, 54, 99, 0.2);

    }

}




    .equipa-cargo {

        font-size: 12px;

    }


    .equipa-curriculo {

        font-size: 13px;

    }



    /* ==========================================================
       RODAPÉ MOBILE

       Deixa de estar fixo para ficar
       depois do último membro da equipa.
       ============================================================== */

    .pagina-equipa .rodape-entrada {

        position: relative;


        top: auto;

        right: auto;

        bottom: auto;

        left: auto;


        width: auto;


        margin-top: 0;

        margin-right: 24px;

        margin-bottom: 20px;

        margin-left: 24px;


        text-align: center;

    }


}

/* ==============================================================
   14 — EQUIPA
   ============================================================== */


/* ==============================================================
   PÁGINA EQUIPA — DESKTOP
   FIXA, SEM SCROLL
   ============================================================== */

.pagina-equipa {

    width: 100%;

    height: 100vh;

    min-height: 100vh;

    overflow: hidden;

}


/* ==============================================================
   ÁREA PRINCIPAL
   OCUPA EXATAMENTE O ECRÃ
   ============================================================== */

.equipa-area {

    position: relative;

    width: 100%;

    height: 100vh;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


/* ==============================================================
   COMPOSIÇÃO — DESKTOP
   ============================================================== */

.equipa-composicao {

    position: absolute;

    top: 45%;

    left: 50%;

    transform: translate(-50%, -50%);


    display: flex;

    flex-direction: row;

    align-items: bottom;

    justify-content: center;


    width:
        min(
            1120px,
            calc(100vw - 120px)
        );


    margin: 0;

    padding: 0;


    gap:
        clamp(
            6px,
            0.8vw,
            12px
        );

}

/* ==============================================================
   MEMBROS
   ============================================================== */

.equipa-membro {

    position: relative;

    flex: 0 0 auto;

    margin: 0;

    padding: 0;

    color: var(--cor-gg);

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    text-align: center;

}


/* ==============================================================
   TODOS OS MEMBROS
   MESMO TAMANHO
   ============================================================== */

.equipa-membro-destaque,
.equipa-membro-pequeno {

    width:
        clamp(
            140px,
            13vw,
            190px
        );

    margin-left: 0;

    order: initial;

}


/* ==============================================================
   PRIMEIRO MEMBRO
   MAIS AFASTADO DOS OUTROS TRÊS
   ============================================================== */

.equipa-membro-destaque {

    margin-right:
        clamp(
            100px,
            10vw,
            180px
        );

}


/* ==============================================================
   TRÊS MEMBROS DA DIREITA
   ============================================================== */

.equipa-membro-pequeno {

    margin-right: 0;

}

/* ==============================================================
   RETRATOS
   ============================================================== */

.equipa-retrato {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;

    padding: 0;

    border-radius: 50%;

    overflow: hidden;

    background-color: white;

}


.equipa-retrato img {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    border-radius: 50%;

    object-fit: cover;

    object-position: center;

}


/* ==============================================================
   TEXTO
   ============================================================== */

.equipa-texto {

    width: 100%;

    margin-top: 14px;

    padding: 0;


    display: flex;

    flex-direction: column;

    align-items: center;


    text-align: center;

}


/* ==============================================================
   NOME
   ============================================================== */

.equipa-nome {

    width: 100%;

    margin: 0;

    padding: 0;


    color: var(--cor-gg);


    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;


    font-size:
        clamp(
            12px,
            1vw,
            16px
        );


    line-height: 1.35;

    font-weight: 700;

    text-align: center;

}


/* ==============================================================
   CARGO
   ============================================================== */

.equipa-cargo {

    width: 100%;

    margin-top: 2px;

    margin-right: 0;

    margin-bottom: 0;

    margin-left: 0;

    padding: 0;


    color: var(--cor-gg);


    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;


    font-size:
        clamp(
            11px,
            0.9vw,
            14px
        );


    line-height: 1.35;

    font-weight: 400;

    text-align: center;

}


/* ==============================================================
   CURRÍCULO
   ============================================================== */

.equipa-curriculo {

    display: block;

    position: static;

    width: 100%;


    margin-top: 7px;

    margin-right: 0;

    margin-bottom: 0;

    margin-left: 0;


    padding: 0;


    color: var(--cor-gg);


    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;


    font-size:
        clamp(
            10px,
            0.9vw,
            12px
        );


    line-height: 1.35;

    font-weight: 400;

    text-align: center;

    text-decoration: underline;

    cursor: pointer;

}


/* ==============================================================
   RODAPÉ DESKTOP

   NÃO COLOCAR NENHUMA REGRA AQUI.

   O rodapé usa diretamente a regra geral:
   .rodape-entrada

   Assim fica exatamente como no Index/Menu.
   ============================================================== */

/* ==============================================================
   COLABORADORES ANTERIORES — DESKTOP
   ============================================================== */

.equipa-colaboradores-anteriores {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);


    /*
       MESMA LARGURA DA COMPOSIÇÃO DOS CÍRCULOS
    */

    width:
        min(
            1120px,
            calc(100vw - 120px)
        );


    /*
       CONTROLO DA ALTURA / POSIÇÃO

       Aumentar este valor = texto mais para baixo
       Diminuir este valor = texto mais para cima
    */

    top:
        calc(
            50% + 200px);


    margin: 0;

    padding: 0;


    color:
        var(--cor-gg);


    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;


    font-size:
        12px;


    line-height:
        1.4;


    font-weight:
        400;


    text-align:
        center;

}


.equipa-colaboradores-anteriores p {

    margin: 0;

    padding: 0;

}

/* ==============================================================
   MOBILE
   ATÉ 700px
   ============================================================== */

@media (max-width: 700px) {


    /* ==========================================================
       PÁGINA MOBILE
       VOLTA A TER SCROLL
       ========================================================== */

    .pagina-equipa {

        height: auto;

        min-height: 100vh;

        overflow-x: hidden;

        overflow-y: auto;

    }


    /* ==========================================================
       ÁREA MOBILE
       ========================================================== */

    .equipa-area {

        position: relative;

        width: 100%;

        height: auto;

        min-height: auto;

        margin: 0;


        padding-top: 105px;

        padding-right:
            var(--margem-conteudo-mobile);

        padding-bottom: 0;

        padding-left:
            var(--margem-conteudo-mobile);


        overflow: visible;

    }


    /* ==========================================================
       COMPOSIÇÃO VERTICAL
       ========================================================== */

    .equipa-composicao {

        position: relative;

        top: auto;

        left: auto;

        transform: none;


        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;


        width: 100%;


        margin: 0;

        padding: 24px 0 0 0;


        gap: 42px;

    }


    /* ==========================================================
       TODOS OS CÍRCULOS IGUAIS
       ========================================================== */

    .equipa-membro,
    .equipa-membro-destaque,
    .equipa-membro-pequeno {

        width:
            min(
                68vw,
                250px
            );


        margin-right: 0;

        margin-left: 0;

    }


    .equipa-membro-destaque {

        order: 1;

    }


    .equipa-membro-pequeno {

        order: 2;

    }


    /* ==========================================================
       TEXTO MOBILE
       ========================================================== */

    .equipa-texto {

        width: 100%;

        margin-top: 12px;

        text-align: center;

    }


    .equipa-nome {

        font-size: 13px;

    }


    .equipa-cargo {

        font-size: 12px;

    }


    .equipa-curriculo {

        margin-top: 7px;

        font-size: 10px;

    }

/* ==========================================================
   COLABORADORES ANTERIORES — MOBILE

   Depois do último membro
   e antes do rodapé.
   ========================================================== */

.equipa-colaboradores-anteriores {

    position: relative;

    top: auto;

    left: auto;

    transform: none;


    width: auto;


    margin-top:
        35px;


    margin-right:
        20px;


    margin-bottom:
        20px;


    margin-left:
        20px;


    padding: 0;


    font-size:
        13px;


    line-height:
        1.5;


    text-align:
        center;

} 
    /* ==========================================================
       RODAPÉ EQUIPA — MOBILE

       Apenas no mobile deixa de estar fixo.

       Surge depois do último colaborador.
       ========================================================== */

    .pagina-equipa .rodape-entrada {

        position: relative;

        top: auto;

        right: auto;

        bottom: 16px;

        left: auto;


        width: auto;


        margin-top: 60px;

        margin-right: 20px;

        margin-bottom: 16px;

        margin-left: 20px;


        text-align: center;

        font-size: 10px;

    }

}


/* ==============================================================
   EQUIPA — CORREÇÃO FINAL DO RODAPÉ DESKTOP
   ============================================================== */

@media (min-width: 701px) {

    .pagina-equipa {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }


    .pagina-equipa .equipa-area {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }


    .pagina-equipa .rodape-entrada {
        position: fixed;

        top: auto;

        right: 24px;

        bottom: 20px;

        left: 24px;

        width: auto;

        margin: 0;

        z-index: 2000;

        text-align: center;
    }

}

/* ==============================================================
   15 — PUBLICAÇÕES
   ============================================================== */


/* ==============================================================
   PÁGINA
   ============================================================== */

.pagina-publicacoes {

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    overflow-y: auto;

    background-color: white;

}



/* ==============================================================
   CARTÕES — REGRAS GERAIS
   ============================================================== */

.publicacao-card {

    position: absolute;

    display: block;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: white;

}



/* ==============================================================
   IMAGENS
   ============================================================== */

.publicacao-card-imagem {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    object-fit: cover;

    object-position: center;

}



/* ==============================================================
   OVERLAY AZUL
   ============================================================== */

.publicacao-overlay {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    padding:
        clamp(
            14px,
            2cqw,
            28px
        );

    box-sizing: border-box;

    background-color:
        var(--cor-gg);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease;

}



/* ==============================================================
   TEXTO DO OVERLAY
   ============================================================== */

.publicacao-texto {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: 0;

    padding: 0;

    color: white;

    font-family:
        "TeX Gyre Adventor",
        Arial,
        Helvetica,
        sans-serif;

    text-align: center;

}



.publicacao-titulo {

    width: 100%;

    margin: 0 0 6px;

    padding: 0;

    color: white;

    font-family: inherit;

    font-size:
        clamp(
            11px,
            1.35cqw,
            17px
        );

    line-height: 1.25;

    font-weight: 700;

}



.publicacao-subtitulo {

    width: 100%;

    margin: 0;

    padding: 0;

    color: white;

    font-family: inherit;

    font-size:
        clamp(
            9px,
            1cqw,
            13px
        );

    line-height: 1.35;

    font-weight: 400;

}



.publicacao-data {

    width: 100%;

    margin: 2px 0 0;

    padding: 0;

    color: white;

    font-family: inherit;

    font-size:
        clamp(
            9px,
            1cqw,
            13px
        );

    line-height: 1.35;

    font-weight: 400;

}



.publicacao-descricao {

    width: 100%;

    margin:
        clamp(
            10px,
            1.2cqw,
            18px
        )
        0
        0;

    padding: 0;

    color: white;

    font-family: inherit;

    font-size:
        clamp(
            8px,
            0.9cqw,
            12px
        );

    line-height: 1.4;

    font-weight: 400;

}



/* ==============================================================
   HOVER DOS JPEGs
   ============================================================== */

@media (hover: hover) {

    .publicacao-card:not(.publicacao-card-video):hover
    .publicacao-overlay {

        opacity: 1;

    }

}



/* ==============================================================
   VÍDEOS — OVERLAY
   ============================================================== */

.publicacao-card-video .publicacao-overlay {

    cursor: pointer;

    pointer-events: auto;

}



/* ==============================================================
   VÍDEOS — HOVER

   Enquanto ainda não estiver ativo:
   hover = overlay azul
   ============================================================== */

@media (hover: hover) {

    .publicacao-card-video:not(.video-ativo):hover
    .publicacao-overlay {

        opacity: 1;

    }

}



/* ==============================================================
   VÍDEO ATIVO

   Depois do clique:
   - overlay desaparece
   - deixa de intercetar cliques
   - Vimeo fica utilizável
   ============================================================== */

.publicacao-card-video.video-ativo
.publicacao-overlay {

    opacity: 0;

    pointer-events: none;

}



/* ==============================================================
   VIMEO / EMBED
   ============================================================== */

.publicacao-embed {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


.publicacao-embed iframe {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    border: 0;

}



/* ==============================================================
   DESKTOP
   701px PARA CIMA
   ============================================================== */

@media (min-width: 701px) {


    /* ==========================================================
       ÁREA GERAL
       ============================================================== */

    .publicacoes-area {

        position: relative;

        width:
            var(--gg-largura-conteudo);

        height:
            auto;

        margin-top:
            var(--gg-inicio-conteudo);

        margin-right:
            auto;

        margin-bottom:
            0;

        margin-left:
            auto;

        padding:
            0;

        container-type:
            inline-size;

        overflow:
            visible;

    }



    /* ==========================================================
       PUBLICAÇÃO 19
       ============================================================== */

    .publicacao-19 {

        left: 5cqw;

        top: 0cqw;

        width: 23cqw;

        height: 34cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 18
       ============================================================== */

    .publicacao-18 {

        left: 30cqw;

        top: 5cqw;

        width: 35cqw;

        height: 25cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 17
       ============================================================== */

    .publicacao-17 {

        right: 2cqw;

        top: 1cqw;

        width: 30cqw;

        height: 30cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 16
       ============================================================== */

    .publicacao-16 {

        left: 0cqw;

        top: 36cqw;

        width: 28cqw;

        height: 38cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 15
       ============================================================== */

    .publicacao-15 {

        left: 30cqw;

        top: 33cqw;

        width: 28cqw;

        height: 40cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 14
       ============================================================== */

    .publicacao-14 {

        right: 20cqw;

        top: 62cqw;

        width: 20cqw;

        height: 28cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 13 — VÍDEO
       ============================================================== */

    .publicacao-13 {

        right: 0cqw;

        top: 34cqw;

        width: 40cqw;

        height: 25.875cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 12
       ============================================================== */

    .publicacao-12 {

        right: 0cqw;

        top: 62cqw;

        width: 18cqw;

        height: 28cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 11
       ============================================================== */

    .publicacao-11 {

        left: 2cqw;

        top: 76cqw;

        width: 18cqw;

        height: 22cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 10 — VÍDEO
       ============================================================== */

    .publicacao-10 {

       left: 22cqw;

        top: 76cqw;

        width: 36cqw;

        height: 23.875cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 09
       ============================================================== */

    .publicacao-09 {

        right: 7cqw;

        top: 93cqw;

        width: 32cqw;

        height: 39cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 08
       ============================================================== */

    .publicacao-08 {

        left: 0cqw;

        top: 101cqw;

        width: 29cqw;

        height: 35cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 07
       ============================================================== */

    .publicacao-07 {

        left: 33cqw;

        top: 101cqw;

        width: 25cqw;

        height: 35cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 06
       ============================================================== */

    .publicacao-06 {

        left: 1cqw;

        top: 139cqw;

        width: 28cqw;

        height: 38cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 05
       ============================================================== */

    .publicacao-05 {

        left: 33cqw;

        top: 139cqw;

        width: 24cqw;

        height: 34cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 04
       ============================================================== */

    .publicacao-04 {

        right: 1cqw;

        top: 136cqw;

        width: 38cqw;

        height: 30cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 03
       ============================================================== */

    .publicacao-03 {

        left: 8cqw;

        top: 179cqw;

        width: 20cqw;

        height: 30cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 02
       ============================================================== */

    .publicacao-02 {

        left: 30cqw;

        top: 179cqw;

        width: 27cqw;

        height: 35cqw;

    }



    /* ==========================================================
       PUBLICAÇÃO 01
       ============================================================== */

    .publicacao-01 {

        right: 4cqw;

        top: 169cqw;

        width: 35cqw;

        height: 45cqw;

    }



    /* ==========================================================
       RODAPÉ DESKTOP
       ============================================================== */

    .pagina-publicacoes .publicacoes-rodape {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        flex-shrink: 0;

        width: auto;

        margin-top: 50px;

        margin-right: 24px;

        margin-bottom: 20px;

        margin-left: 24px;

        text-align: center;

    }

}



/* ==============================================================
   MOBILE
   ATÉ 700px
   ============================================================== */

@media (max-width: 700px) {


    /* ==========================================================
       ÁREA MOBILE
       ============================================================== */

    .publicacoes-area {

        position: relative;

        display: flex;

        flex-direction: column;

        width: auto;

        height: auto;

        margin-top:
            var(--inicio-conteudo-mobile);

        margin-right:
            var(--margem-conteudo-mobile);

        margin-bottom:
            24px;

        margin-left:
            var(--margem-conteudo-mobile);

        padding: 0;

        gap: 24px;

        overflow: visible;

    }



    /* ==========================================================
       TODOS OS CARTÕES MOBILE
       ============================================================== */

    .publicacao-card {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        width: 100%;

        height: auto;

        flex-shrink: 0;

        margin: 0;

        padding: 0;

        aspect-ratio:
            auto;

    }



    /* ==========================================================
       VÍDEOS MOBILE
       ============================================================== */

    .publicacao-card-video {

        aspect-ratio:
            16 / 9;

    }



    /* ==========================================================
       TEXTO MOBILE
       ============================================================== */

    .publicacao-titulo {

        font-size: 16px;

    }


    .publicacao-subtitulo,
    .publicacao-data {

        font-size: 12px;

    }


    .publicacao-descricao {

        margin-top: 15px;

        font-size: 11px;

    }



    /* ==========================================================
       MOBILE — OVERLAY

       Em dispositivos táteis não existe hover real.
       O overlay só deverá ser controlado por JS
       quando quisermos esse comportamento.
       ============================================================== */

    /* ==========================================================
   MOBILE — OVERLAY POR TOQUE
   ========================================================== */

.publicacao-card .publicacao-overlay {

    opacity: 0;

    pointer-events: none;

}


/*
 * Primeiro toque:
 * mostra o cartão azul.
 */

.publicacao-card.toque-ativo
.publicacao-overlay {

    opacity: 1;

    pointer-events: auto;

}


/*
 * Nos vídeos o overlay invisível tem de poder
 * receber o primeiro toque.
 *
 * Caso contrário, o toque iria diretamente
 * para o iframe do Vimeo.
 */

.publicacao-card-video:not(.video-ativo)
.publicacao-overlay {

    pointer-events: auto;

}


/*
 * Quando o vídeo é ativado,
 * o overlay desaparece e liberta o Vimeo.
 */

.publicacao-card-video.video-ativo
.publicacao-overlay {

    opacity: 0;

    pointer-events: none;

}


    /* ==========================================================
       RODAPÉ MOBILE
       ============================================================== */

    .pagina-publicacoes .publicacoes-rodape {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        flex-shrink: 0;

        width: auto;

        margin-top: 10px;

        margin-right: 20px;

        margin-bottom: 16px;

        margin-left: 20px;

        text-align: center;

        font-size: 10px;

    }

}



/* ==============================================================
   ENQUADRAMENTO INDIVIDUAL DAS IMAGENS

   PODES ALTERAR ESTES VALORES
   PARA AJUSTAR CADA CAPA.
   ============================================================== */

.publicacao-19 img {

    object-position: 50% 50%;

}


.publicacao-18 img {

    object-position: 50% 50%;

}


.publicacao-17 img {

    object-position: 50% 50%;

}


.publicacao-16 img {

    object-position: 50% 50%;

}


.publicacao-15 img {

    object-position: 50% 50%;

}


.publicacao-14 img {

    object-position: 50% 50%;

}


.publicacao-12 img {

    object-position: 50% 50%;

}


.publicacao-11 img {

    object-position: 50% 50%;

}


.publicacao-09 img {

    object-position: 50% 50%;

}


.publicacao-08 img {

    object-position: 50% 50%;

}


.publicacao-07 img {

    object-position: 50% 50%;

}


.publicacao-06 img {

    object-position: 50% 50%;

}


.publicacao-05 img {

    object-position: 50% 50%;

}


.publicacao-04 img {

    object-position: 50% 50%;

}


.publicacao-03 img {

    object-position: 50% 50%;

}


.publicacao-02 img {

    object-position: 50% 50%;

}


.publicacao-01 img {

    object-position: 50% 50%;

}

/* ==============================================================
   EVITAR FLASH ANTES DO CÁLCULO DA PÁGINA
   ============================================================== */

.layout-pendente .projetos-rodape,
.layout-pendente .publicacoes-rodape,
.layout-pendente .projeto-detalhe-rodape,
.layout-pendente .faixa-texto {

    visibility: hidden;

}