/*
    
    1 - FONTS
    2 - GENERAL HTML SETTINGS
    3 - COMMON STUCTURES
    4 - INDIVIDUAL PAGES

*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            1 - FONTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@font-face {
    font-family: 'Gotham-Book';
    src: url('../fonts/Gotham-Book.otf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Bold';
    src: url('../fonts/Gotham-Bold.otf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Italic';
    src: url('../fonts/Gotham-BookItalic.otf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Light';
    src: url('../fonts/Gotham-Light.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('../fonts/Gotham-Medium.otf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    2 - GENERAL HTML SETTINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

html.stop_scroll {
    overflow: hidden;
}

:root {
    /* Cores do Manual */
    --color-primary: #A6192E;   
    --color-secondary: #8A8D8F; 
    --color-black: #000;
    --color-white: #fff;
    
    /* Atribuição das Fontes */
    --font-gotham-book: 'Gotham-Book', sans-serif;
    --font-gotham-bold: 'Gotham-Bold', sans-serif;
    --font-gotham-italic: 'Gotham-Italic', sans-serif;
    --font-gotham-light: 'Gotham-Light', sans-serif;
    --font-gotham-medium: 'Gotham-Medium', sans-serif;
    --side-padding: 24px;
}

/* Aplicação Global */
body {
    font-family: var(--font-gotham-book);
    color: var(--color-black);

    
    /*background-color: var(--color-primary);*/
}

img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Aplicação nos Títulos */
h1, .hero-main-title {
    font-family: var(--font-gotham-light);
    text-transform: uppercase;
}

h2, .hero-subtitle {
    font-family: var(--font-gotham-book);
}

::selection {
    color: var(--color-white);
    background-color: var(--main-color);
}

a {
    position: relative;
    color: var(--main-color);
}

a:hover {
    color: var(--link-hover-color);
}

b, strong {
    font-weight: unset;
}

button {
    border: none;
    background-color: transparent;
    padding: 0;
}

button:focus, input:focus, textarea:focus {
    outline: none;
}

p:last-child {
    margin-bottom: 0 !important;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* Garante que cobre o ecrã todo, inclusive em telemóveis */
    background-color: #000; /* Ou o tom escuro/preto que preferires para o site */
    z-index: 999999; /* Acima de absolutamente tudo, inclusivamente do menu */
    pointer-events: none;
}

html.lenis, html.lenis body {
  height: auto !important;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        3 - COMMON STUCTURES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ----- Custom classes ----- */
a.underline-anim, .underline-anim a:not(.button, .wp-element-button, .wp-block-button__link) {
    color: var(--main-color);
    --underline-height: 0.1em;
    display: inline !important;
    background-image: linear-gradient(var(--main-color), var(--main-color));
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0% var(--underline-height);
    padding-bottom: 3px;
}

a.underline-anim:hover, .underline-anim a:not(.button, .wp-element-button, .wp-block-button__link):hover {
    color: var(--main-color);
    background-size: 100% var(--underline-height);
    background-position: bottom left;
}

a.underline-anim, .underline-anim a:not(.button, .wp-element-button, .wp-block-button__link), a.underline-anim:hover, .underline-anim a:not(.button, .wp-element-button, .wp-block-button__link):hover {
    transition: background-size 0.4s, color 0.4s, background-image 0.4s ease;
    -webkit-transition: background-size 0.4s, color 0.4s, background-image 0.4s ease;
    -moz-transition: background-size 0.4s, color 0.4s, background-image 0.4s ease;
    -o-transition: background-size 0.4s, color 0.4s, background-image 0.4s ease;
}

.mobile-only {
    display: none;
}

.full-width {
    width: 100%;
}

.img_wrapper {
    margin-bottom: 0;
}

.img_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ratioed_img {
    position: relative;
}

.ratioed_img:before {
    content: '';
    display: block;
}

.ratioed_img img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    position: absolute;
}

.clearfix {
    display: block;
    width: 100%;
    height: 1px;
}

.side_padding {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

/* Regular buttons */
.button, .wp-element-button {
    font-family: var(--font-gotham-light);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-black);
    border-radius: 0;
    border-bottom: 3px solid var(--color-black);
    background-color: transparent;
    padding: 0.75em 1em 0.35em;
    display: block;
    width: max-content;
    position: relative;
    z-index: 1;
}

.button:before, .wp-element-button:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: var(--color-black);
    z-index: -1;
    transform-origin: bottom;
    transform: scaleY(0);
}

.button:hover, .wp-element-button:hover, .hoverable_zone:hover .button, .hoverable_zone:hover .wp-element-button {
    color: var(--bg-color);
}

.button:hover:before, .wp-element-button:hover:before, .hoverable_zone:hover .button:before, .hoverable_zone:hover .wp-element-button:before {
    transform: scaleY(1);
}

.button, .wp-element-button, .button:hover, .wp-element-button:hover {
    transition: color 0.4s ease;
}


/* ----- Transitions ----- */
/* transform */
*:before, *:hover:before, *:focus:before, *:after, *:hover:after, *:focus:after {
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
}

/* all */
.anim-all, .anim-all:hover, .anim-all:focus, input, input:hover, input:focus, textarea, textarea:hover, textarea:focus {
    transition-property: color, background-color, background-size, transform, width, clip-path, opacity, top, left, right, background-size, background-image;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

/* Parallaxes */
.parallax-anim {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

/* Se usadas as classes de corte de texto (SplitType) */
.split_lines:not(.initialized), 
.split_chars:not(.initialized) {
    opacity: 0 !important;
}

.split_lines .split-line {
    overflow: hidden !important;
    display: block; 
    position: relative;
}

.split_lines .inner_line {
    display: block;
    will-change: transform;
}

/* Se usadas as classes normais de slide/fade do teu projeto */
.slide-up:not(.loaded),
.slide-down:not(.loaded),
.slide-left:not(.loaded),
.slide-right:not(.loaded),
.fade-in:not(.loaded) {
    opacity: 0 !important;
}


/* ******************************************
                    NAVBAR
******************************************* */
/* Alinhamento da Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29px 0;
}

/* Ajuste do Logótipo no Header */
.navbar .custom-logo-link img {
    max-width: 179px;
    height: auto;
    display: block;
}

.navbar .container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.navigation-container {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

.navigation-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* --- CONTAINER E MENU --- */
.menu, .language-switcher-container {
    width: auto !important;
    flex: none !important;
}

.menu-page-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

/* --- LINKS DO MENU (BASE) --- */
.menu-page-list li a {
    text-transform: uppercase;
    font-family: var(--font-gotham-book);
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--color-black);
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 0;
    position: relative;
    display: inline-block;
    transition: color .2s cubic-bezier(.33, 1, .68, 1);
    z-index: 1;
}

/* --- EFEITO (INVISÍVEL POR DEFEITO) --- */
.menu-page-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 0px;
    background-color: var(--color-primary);
    z-index: -1;
    transition: height 0.2s cubic-bezier(.33,1,.68,1);
}

/* --- HOVER: SOBE PARA PREENCHER --- */
.menu-page-list li a:hover::after {
    height: 100%;
}

.menu-page-list li a:hover {
    color: var(--color-white);
}

/* --- ESTADO ATIVO: A LINHA É OBRIGATÓRIA --- */
.menu-page-list li.current-menu-item a::after {
    height: 4px !important; 
    transition: none !important;
}

/* Garante que o texto mantém a cor ativa */
.menu-page-list li.current-menu-item a {
    color: var(--color-black) !important;
}


/* --- HOVER NO ATIVO: MANTÉM A LINHA FIXA --- */
.menu-page-list li.current-menu-item a:hover::after,
.single-project-page .menu-page-list li:nth-child(3) a:hover::after,
.archive-projeto .menu-page-list li:nth-child(3) a:hover::after,
.page-template-page-missao-php .menu-page-list li:first-child a:hover::after {
    height: 4px !important; /* Impede que suba ao fazer hover no ativo */
}

/* --- LÍNGUAS (Mantido igual) --- */
.lang-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
    padding-left: 20px;
}

.lang-list li a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-black);
}

/* 1. Estado Base: Aplica o cinza claro e retira o bold a ambos por defeito */
.language-switcher-container .lang-list li a {
    color: #a0a0a0;
    font-weight: 400; 
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 2. Estado Ativo: O idioma atual ganha o destaque a preto e fonte bold */
.language-switcher-container .lang-list li.current-lang a {
    color: var(--color-black);
    font-weight: 700; 
}

/* 3. Estado Hover: Permite ao utilizador perceber que o cinza é clicável */
.language-switcher-container .lang-list li:not(.current-lang) a:hover {
    color: var(--color-primary); 
}

.lang-list li a:hover {
    color: var(--color-primary);
}


.header-divider {
    width: 100%;
    margin-top: -0.2%;
}

.menu_toggle {
    display: none; /* O botão não existe em ecrãs grandes */
}

@media (max-width: 991px) {
    /* Forçar o cabeçalho inteiro a estar acima de qualquer Hero ou Slider */
    header, 
    .site-header, 
    .header-mobile-wrapper { /* Substitui pelo nome da classe real do teu header */
        position: relative; /* ou fixed, se o teu menu andar contigo ao fazer scroll */
        z-index: 99999 !important; 
    }

    .menu_toggle {
        display: block;
        position: fixed; 
        z-index: 100000 !important; /* Um nível acima do próprio header */
        pointer-events: auto;
    }
}

/* Configuração base dos links da Navbar */
.site-header .nav-link { /* Ajusta a classe se os teus links usarem outro nome */
    position: relative;
    color: #000000;         /* Cor original do teu texto (ex: preto) */
    text-decoration: none;
    padding: 6px 12px;      /* Espaçamento para a barra cobrir com folga */
    display: inline-block;
    z-index: 1;             /* Garante que o link fica numa camada controlada */
    transition: color 0.35s ease; /* Transição suave para a cor do texto mudar para branco */
}

/* A barra que nasce por baixo do link */
.site-header .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;            /* Começa como uma linha fina por baixo */
    background-color: #000000; /* Cor da barra (igual à cor do texto ou tom escuro) */
    z-index: -1;            /* Importante: fica por TRÁS do texto para não o tapar */
    transform-origin: bottom;
    /* Usa a mesma curva de transição (easing) fluida que já tens no site */
    transition: height 0.35s cubic-bezier(.33,1,.68,1); 
}

/* --- ESTADO HOVER (Interatividade) --- */

.site-header .nav-link:hover {
    color: #000000; 
}

/* 2. A linha transforma-se num bloco e cobre a palavra inteira */
.site-header .nav-link:hover::before {
    height: 100%; 
}




/* ******************************************
                    FOOTER
******************************************* */
.footer-title {
    font-family: var(--font-gotham-book) !important;
    font-size: 0.9rem;
    letter-spacing: 0.8px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.footer-label {
    font-family: var(--font-gotham-book);
    font-size: 0.9rem;
    letter-spacing: 0.8px;
    color: var(--color-secondary);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.footer-label-inline {
    font-family: var(--font-gotham-book) !important;
    color: var(--color-secondary);
    font-size: 0.9rem;
    letter-spacing: 0.8px;
    min-width: 80px; /* Garante que os links fiquem alinhados verticalmente */
}

.footer-link-inline {
    font-family: var(--font-gotham-book);
    color: var(--color-black);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.8px;
}

/* Ícones Sociais com Círculo */
.social-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;  /* Tamanho do círculo */
    height: 45px;
    border: 1px solid var(--color-black);
    border-radius: 50%;
    color: var(--color-black);
    text-decoration: none;
    font-size: 1.3rem; /* Tamanho do ícone maior */
    transition: all 0.3s ease;
}

.social-icon-circle:hover {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
}

.footer-divider-1 {
    width: 95%;
    margin: 5% auto 40px;
}

.footer-divider-2 {
    margin: 45px -7% 20px;
    width: 110%;
}

/* Divisores Verticais */
.footer-col-divider {
    border-right: 1px solid #E5E5E5;
    padding-right: 30px;
    min-height: 80px; /* Garante que a linha tenha altura visível */
}

/* Remove o divisor na última coluna e em mobile */
@media (max-width: 767px) {
    .footer-col-divider {
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

.footer-legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.footer-legal-links li:not(:last-child):after {
    content: "•";
    margin: 0 20px;
    color: var(--color-black);
    font-size: 15px;
}

.footer-legal-links a {
    font-family: var(--font-gotham-light);
    font-size: 0.75rem;
    color: var(--color-black);
    text-decoration: none;
    letter-spacing: 0.8px;
}

.footer-legal-links a:hover {
    text-decoration: none;
}

.design {
    font-family: var(--font-gotham-light);
    font-size: 0.75rem;
    color: var(--color-black);
    text-decoration: none;
    letter-spacing: 0.8px;
    padding-left: 25px;
    display: inline-block;
    position: relative;
}

.design:hover {
    text-decoration: none;
}

.site-footer .footer-title,
.site-footer .footer-col-divider, 
.site-footer .social, 
.site-footer .footer-legal-links li, 
.site-footer .design {
    visibility: visible; /* Garante que o GSAP pode controlar a visibilidade */
}

.site-footer .footer-legal-links a::after,
.site-footer .design::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px; /* Espessura da linha */
    bottom: -4px; /* Distância da linha em relação ao texto */
    left: 0;
    background-color: var(--color-primary); /* Define aqui o teu tom exato de vermelho (ex: #E30613) */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out;
}

.site-footer .footer-legal-links a:hover::after,
.site-footer .design:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    text-decoration: none;
}

.site-footer .design::after {
    left: 60px;          /* Alinha o início da linha com o início do texto */
    width: calc(100% - 110px); /* Garante que a linha termina exatamente no fim da frase */
}


/* ******************************************
                    POPUPS
******************************************* */
.popup_modal {
    background-color: var(--color-white);
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    position: fixed;
    z-index: 999;
}

.popup_modal .close-pop-up {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
}

.popup_modal .close-pop-up:hover {
    transform: scale(1.3);
}

.popup_modal::-webkit-scrollbar {
    width: 8px;
}

.popup_modal::-webkit-scrollbar-track {
    background: transparent;
    margin: 0;
}

.popup_modal::-webkit-scrollbar-thumb {
    background: rgba(44, 44, 42, 0.3);
}

.popup_modal::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 44, 42, 0.5);
}

.popup_modal::-webkit-scrollbar-thumb:active {
    background: rgba(44, 44, 42, 0.7);
}

.popup_modal.popup_active {
    display: block;
    -webkit-animation: openPopup .4s cubic-bezier(.33,1,.68,1);
    animation: openPopup .4s cubic-bezier(.33,1,.68,1);
}

.popup_modal.closing {
    -webkit-animation: closePopup .2s cubic-bezier(.33,1,.68,1);
    animation: closePopup .2s cubic-bezier(.33,1,.68,1);
}

@keyframes openPopup {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes closePopup {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
}

/* Background overlay */
.bg-overlay, [data-ajax-bg] {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    position: fixed;
    touch-action: none;
    z-index: 998;
}

[data-ajax-bg] .ajax_bg {
    pointer-events: none;
}

.bg-overlay.popup_active, [data-ajax-bg].ajax_active {
    display: block;
    -webkit-animation: animFade .4s cubic-bezier(.33,1,.68,1);
    animation: animFade .4s cubic-bezier(.33,1,.68,1);
}

.bg-overlay.closing {
    opacity: 0;
    -webkit-animation: animFadeOut .4s cubic-bezier(.33,1,.68,1);
    animation: animFadeOut .4s cubic-bezier(.33,1,.68,1);
}

@keyframes animFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes animFadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* ====== Ajax popup  ============== */
/* Posts container */
[data-ajax-container] .lds-ring {
    top: 0;
}

[data-ajax-container].loading [data-ajax-content] {
    opacity: 0;
    pointer-events: none;
}

/* Popup */
[data-ajax-bg] {
    padding: 50px 0;
    overflow: auto;
    touch-action: pan-y;
}

[data-ajax-bg] .lds-ring div {
    border: 4px solid var(--color-white);
    border-color: var(--color-white) transparent transparent transparent;
}

[data-ajax-modal] {
    display: none;
    margin: 0 auto;
    max-width: 850px;
    background-color: var(--color-white);
    position: relative;
    z-index: 2;
}

[data-ajax-modal] button[data-close] {
    --diameter: 25px;
    width: var(--diameter);
    height: var(--diameter);
    display: block;
    position: absolute;
    top: calc(3.5rem - var(--diameter) / 2);
    right: 50px;
    z-index: 2;
}

[data-ajax-modal] button[data-close]:hover {
    transform: scale(1.2);
}

[data-ajax-modal] .popup_content {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    position: relative;
}

[data-ajax-modal] .modal_header, [data-ajax-modal] .wp_content {
    --side-padding: 50px;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

[data-ajax-modal] .modal_header {
    padding-bottom: 2rem;
}

[data-ajax-modal] figure.img_wrapper {
    height: 450px;
}

[data-ajax-modal] figure.img_wrapper img {
    object-fit: cover;
}

[data-ajax-modal] .wp_content {
    padding-top: 3rem;
}

/* ====== Loading spinner  ============== */
.lds-ring {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: calc(50% - 26px);
    left: calc(50% - 26px);
    opacity: 0;
    pointer-events: none;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 45px;
    height: 45px;
    margin: 5px;
    border: 4px solid var(--color-black);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--color-black) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.loading > .lds-ring {
    opacity: 1;
}


/* ******************************************
                SLIDERS
******************************************* */
/* Estilo dos Dots */
.slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots button {
    font-size: 0; 
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--color-primary); 
    background: transparent;
    cursor: pointer;
    transition: 0.3s;
}

/* Bolinha ativa */
.slick-dots li.slick-active button {
    background: var(--color-primary);
}

/* 1. CONTAINER DO SLIDER */
.portfolio-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: auto;
    margin-left: 20px;
}

.secondary-slider {
    height: 300px;
    overflow: hidden;
}

.secondary-slider .portfolio-item img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-slider {
    width: 100%;
    height: 100%;
}

.portfolio-slider img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Faz a imagem preencher o espaço sem distorcer */
    object-position: center; /* Mantém o centro da foto visível */
    display: block;
}

@media (max-width: 768px) {
    .portfolio-slider-wrapper {
        height: 400px; /* Altura mais pequena para mobile */
    }
}

/* 2. AS SETAS (Para deixarem de ser "bolas") */
.slider-arrows-overlay {
    position: absolute;
    top: 47%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.slick-prev-custom, 
.slick-next-custom {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.5); 
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slick-prev-custom {
    right: 0 !important; /* Cola a seta ao limite direito da div .home-slider */
    margin-right: 0 !important; /* Remove qualquer margem manual que tenhas dado */
    left: auto;
}

.slick-next-custom {
    right: 0 !important; /* Cola a seta ao limite direito da div .home-slider */
    margin-right: 0 !important; /* Remove qualquer margem manual que tenhas dado */
    left: auto;
}

.slick-prev-custom:hover, 
.slick-next-custom:hover {
    background-color: var(--color-primary);
    color: white;
}

.slick-prev-custom i, 
.slick-next-custom i {
    font-size: 1rem;
    color: var(--color-white);
}

.slick-prev-custom:hover i, 
.slick-next-custom:hover i {
    color: white;
}

/* 3. AS BOLINHAS (INDICATIVOS) */
.portfolio-slider .slick-dots {
    position: relative;
    bottom: 0;
    display: flex !important;
    justify-content: flex-start;
    list-style: none;
    width: 100%;
    padding: 7px 0 0 0;
    margin: 0;
}

.portfolio-slider .slick-dots li {
    margin: 0 5px 0 0;
}

.portfolio-slider .slick-dots li button {
    font-size: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid white;
    background: transparent;
    cursor: pointer;
    transition: 0.3s;
    background-color: var(--color-secondary);
}

.portfolio-slider .slick-dots li.slick-active button {
    background: var(--color-primary);
}

/* Enquanto o Slick não inicializa, esconde o transbordo e força comportamento horizontal */
.portfolio-slider:not(.slick-initialized) {
    display: flex !important;
    overflow: hidden !important;
    /* Opcecional: podes definir uma altura de segurança igual à das tuas imagens, ex: max-height: 600px; */
}

/* Esconde todos os slides secundários antes do JS arrancar */
.portfolio-slider:not(.slick-initialized) > * {
    display: none !important;
}

/* Mantém apenas o primeiro slide visível e esticado a 100% da largura */
.portfolio-slider:not(.slick-initialized) > *:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* ******************************************
                CONTACT FORM 7
******************************************* */
/* Acceptance CF7 */
.wpcf7-acceptance {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    padding-left: 10px;
    margin-top: 1.25em;
    display: block;
    position: absolute;
    right: 0;
    margin-top: 1rem;
}

.wpcf7-acceptance input {
    display: none;
}

.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7-acceptance a {
    --main-color: #000;
}

.wpcf7-acceptance .wpcf7-list-item-label:before {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    margin-right: 9px;
    border: 1px solid var(--color-black);
    background-color: transparent;
    cursor: pointer;
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label:before {
    background-color: var(--color-primary);
    box-shadow: none;
    padding: 2px;
    background-clip: content-box;
}

/* Alinha o texto do checkbox com o botão de envio */
.wpcf7-acceptance,
.wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wpcf7-acceptance .wpcf7-list-item-label {
    display: inline !important; /* Remove o flex e devolve o fluxo natural ao texto */
    font-family: var(--font-gotham-light);
    font-size: 0.8rem !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.2;
}

.wpcf7-acceptance .wpcf7-list-item-label a {
    font-family: var(--font-gotham-medium);
    font-size: 0.8rem !important;
}

/* Contact Form 7 - CF7 */
form.wpcf7-form br {
    display: none;
}

form.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    letter-spacing: 0;
    padding: 0 8px;
    margin-top: 6px;
}

.wpcf7 form .wpcf7-response-output {
    border: none;
    text-align: left;
    padding: 0;
    font-family: var(--font-gotham-medium);
    font-size: 0.9rem;
    line-height: 1.2rem;
    margin: 2rem 0 0 0;
}

.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
    color: var(--color-primary);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    color: #e6a803;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: #46b450;
}


/* ******************************************
                COOKIE NOTICE
******************************************* */
#cookie-notice {
    bottom: 15px;
    background-color: transparent !important;
}

#cookie-notice .cookie-notice-container {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
    max-width: max-content;
    margin: 0 auto;
    font-family: var(--font-gotham-book) !important;
    font-size: 10px;
    letter-spacing: 0.8px;
    padding: 8px 13px 8px 20px;
    box-shadow: 0 9px 12px rgba(0, 0, 0, 0.1);
}

#cookie-notice .cookie-notice-container #cn-notice-text {
    margin: 0 !important;
}

#cookie-notice .cn-button:not(.cn-button-custom) {
    color: #000 !important;
    background-color: #fff !important;
    font-family: var(--font-gotham-bold) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 8px 10px 7px 10px !important;
    border-radius: 0 !important;
}

#cookie-notice .cn-button:not(.cn-button-custom):hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.cn-close-icon {
    display: none !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    4 - INDIVIDUAL PAGES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FRONT PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~ HERO SECTION ~~~~~~~ */
.hero-home {
    height: 85vh;
    width: calc(100% + var(--side-padding) * 2); 
    margin-left: calc(-1 * var(--side-padding));
    margin-right: calc(-1 * var(--side-padding));
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--color-white);
}

.hero-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2.5%;
    width: 105%; 
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/wp-content/uploads/2026/05/Banner-1-scaled.jpg');
    background-size: cover;
    background-position: center 60%;
    z-index: 1; 

    opacity: 0;
    transform: scale(1.08);
    
    transition: opacity 1.8s ease-out, transform 1.8s cubic-bezier(.33, 1, .68, 1);
}

.hero-home.fundo-ativo::before {
    opacity: 1;
    transform: scale(1);
}

.hero-home > * {
    position: relative;
    z-index: 2;
}

.hero-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    max-width: 550px;
}

.hero-subtitle {
    font-family: var(--font-gotham-light);
    font-size: 2.2rem;
    color: var(--color-white);
    letter-spacing: 0.8px;
}

/* ~~~~~~~ SOBRE NÓS SECTION ~~~~~~~ */
.home-section.section-about {
    padding-top: 84px; 
    padding-bottom: 100px;
}

.section-about .row {
    margin-left: 0;
    margin-right: 0;
}

.section-about .image-wrapper img.img-fluid {
    width: auto !important;
    max-width: 627px !important;
    display: block;
}

.content-box {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    margin-bottom: 25px;
}

.image_wrapper {
    padding: 0;
}

.image-wrapper.reveal-mask {
    position: relative !important;
    overflow: hidden !important; /* Se isto falhar, a imagem move-se mas tu não notas o efeito de máscara */
    display: block !important;
    width: 100%;
}

/* A imagem FILHA */
.image-wrapper.reveal-mask .reveal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.section-label {
    font-family: var(--font-gotham-medium); 
    color: var(--color-primary); 
    font-size: 0.8rem;
    letter-spacing: 1.25px;
    display: block;
}

.section-title {
    font-family: var(--font-gotham-light);
    font-size: 2.5rem;
    color: var(--color-black);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.about-us-description p {
    font-family: var(--font-gotham-light); 
    color: var(--color-black);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
}

a[class*="btn-link"] {
    position: relative;
    display: inline-block;
    width: max-content;      /* Obriga o botão a ter APENAS a largura do texto */
    align-self: flex-start;  /* Impede que o Flexbox da .content-box o estique a 100% */
    padding: 8px 25px 8px 0;
    margin-top: 20px;
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
    letter-spacing: 2.7px;
    color: var(--color-black);
    text-decoration: none;
    z-index: 1;              /* Garante que o texto fica visível acima do fundo vermelho */
}

a[class*="btn-link"]:hover,
a[class*="btn-link"]:active {
    color: var(--color-white);
    text-decoration: none !important; /* Remove o underline fantasma do browser */
}

.line-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;     
    height: 1.5px; 
    background-color: var(--color-primary);
}

/* Bloco que sobe para preencher o botão */
.bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary); 
    
    /* ALTERAÇÃO AQUI: Começa com altura zero, ancorado na base */
    transform: scaleY(0); 
    transform-origin: bottom center; 
    
    z-index: -1; 
    pointer-events: none;
}

/* ~~~~~~~ PORTFÓLIO SECTION ~~~~~~~ */
.home-section.section-portfolio {
    padding-top: 35px; 
    padding-bottom: 50px;
}

.section-portfolio .row {
    margin-left: 0;
    margin-right: 0;
}

.content-box {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    margin-bottom: 40px;
}

.portfolio-title {
    font-family: var(--font-gotham-light);
    font-size: 2.8rem;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 25px;
}

.portfolio-description p {
    font-family: var(--font-gotham-light); 
    color: var(--color-black);
    font-size: 0.8rem;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

.btn-link-portfolio {
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
    color: var(--color-black);
    text-decoration: none;
    padding-bottom: 5px;
    display: inline-block;
    margin-top: 50px;
    letter-spacing: 2.7px;
}

.portfolio-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.portfolio-link:hover {
    text-decoration: none;
}

.portfolio-link:hover .project-title {
    color: var(--color-primary);
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ QUEM SOMOS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.about-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide o ecrã ao meio */
    gap: 50px;
    align-items: center;
    position: relative;
    padding-top: 5px;
}

/* Composição de Imagens */
.images-composition {
    position: relative;
    height: 750px; 
    display: flex;
    align-items: center;
}

.img-main {
    position: absolute;
    top: 5%;
    right: -9%;
    width: 60%;
    z-index: 3;
}

.img-secondary {
    position: absolute;
    bottom: 5%;
    left: -10%;
    width: 47%;
    z-index: 1;
}

.images-composition img {
    width: 100%;
    height: auto;
}

/* Bloco de Texto com Fundo */
.about-text-wrapper {
    box-sizing: border-box !important;
    background-color: #f4f1ec;
    padding: 70px 60px 95px 170px;
    margin-left: -90px;
    width: 127%;
    transform: translateY(114px);
    position: relative;
    z-index: 2;
    bottom: 67px;
}

.text-content-box  {
    max-width: 550px;
    position: relative;
    z-index: 5;
}

.historia-label {
    font-family: var(--font-gotham-medium); 
    color: var(--color-primary); 
    font-size: 0.8rem;
    letter-spacing: 1.25px;
    display: block;
}

.historia-title {
    font-family: var(--font-gotham-light); 
    font-size: 2.5rem;
    color: var(--color-black);
    margin-top: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-text {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    color: var(--color-black);
    line-height: 1.2;
    letter-spacing: 0.8px;
    max-width: 100%;
}

.btn-link-missao {
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
    color: var(--color-black);
    text-decoration: none;
    padding-bottom: 5px;
    display: inline-block;
    margin-top: 50px;
    letter-spacing: 2.7px;
    
    transform: none !important; /* Garante que não é deslocado para fora */
}

/* ~~~~~~~ TIMELINE ~~~~~~~ */
.section-timeline {
    padding: 150px 0 110px;
}

.timeline-title {
    font-family: var(--font-gotham-light); 
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 550px;
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 30px;
}

.timeline-wrapper {
    position: relative;
    padding-top: 40px;
}

/* A Linha Horizontal */
.timeline-line {
    position: absolute;
    top: 45px; /* Alinha exatamente com o centro dos pontos */
    width: 110%;
    left: -5%;
    height: 1px;
    background-color: #e5e5e5;
    z-index: 1;
}

.timeline-items {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    width: 108%;
    margin-left: -4%;
}

.timeline-item {
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-black);
    border-radius: 50%;
    margin-bottom: 20px; /* Espaço entre o ponto e o ano */
}

.timeline-year {
    font-family: var(--font-gotham-medium);
    color: var(--color-primary); 
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1.25px;
}

.timeline-desc {
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: #535659;
    max-width: 180px;
    text-align: center;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MISSÃO & VALORES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.section-mission {
    padding: 72px 0 40px 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Imagem ligeiramente maior que o bloco de texto */
    gap: 65px;
    align-items: center;
}

.mission-image {
    margin-left: -58px;
    width: calc(100% + 58px);
}

.mission-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mission-text {
    margin-left: 20px;
}

.mission-label {
    font-family: var(--font-gotham-medium); 
    color: var(--color-primary); 
    font-size: 0.8rem;
    letter-spacing: 1.25px;
    display: block;
}

.mission-title {
    font-family: var(--font-gotham-light);
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 10px 0 30px 0;
    text-transform: uppercase;
}

.mission-description p {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.8px;
    color: var(--color-black);
    margin-bottom: 20px;
}

/* ~~~~~~~ PRINCÍPIOS ~~~~~~~ */
.section-principles {
    padding: 40px 0;
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
}

.principles-main-title {
    font-family: var(--font-gotham-light);
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 5px 0 15px;
}

.principles-subtitle {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    color: var(--color-black);
    max-width: 350px;
    letter-spacing: 0.8px;
    max-width: 400px;
}

/* Lista de Itens */
.principle-item {
    display: flex;
    padding: 25px 0 25px 0;
    gap: 33px;
}

/* Remove a linha de cima do primeiro principio */
.principle-item:first-child {
    padding-top: 0;
    border-top: none;
}

/* Garante que o último principio não tem linha por baixo */
.principle-item:last-child {
    border-bottom: none;
}

.principle-item:last-child {
    border-bottom: none;
}

.principle-content {
    margin-left: 20px;
}

.principle-number {
    font-family: var(--font-gotham-book);
    color: #cac9be;
    font-size: 1rem;
    letter-spacing: 0.8px;
}

.principle-content h3 {
    font-family: var(--font-gotham-book);
    font-size: 1.1rem;
    margin-bottom: 20px;
    letter-spacing: 0.8px;
}

.principle-content p {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.6px;
    color: #535659;
    max-width: 400px;
}

/* ~~~~~~~ CLOSING STATEMENT ~~~~~~~ */
.section-mission-closing {
    padding: 70px 0;
    text-align: center;
}

.closing-statement {
    font-family: var(--font-gotham-italic); 
    font-size: 2.2rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--color-black);
    text-transform: italic; 
    margin-bottom: 25px;
}

.closing-content p {
    font-family: var(--font-gotham-light);
    font-size: 0.6rem;
    color: var(--color-black);
    max-width: 600px;
    margin: 0 auto;
    letter-spacing: 0.8px;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SERVIÇOS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.section-services-intro {
    padding: 60px 0 0;
}

.services-intro-content {
    max-width: 800px;
}

.services-label {
    font-family: var(--font-gotham-medium); 
    color: var(--color-primary); 
    font-size: 0.8rem;
    letter-spacing: 1.25px;
    display: block;
}

.services-main-title {
    font-family: var(--font-gotham-light);
    font-size: 2.5rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin-top: 15px;
    margin-bottom: 15px;
}

.services-intro-text {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--color-black);
    margin-bottom: 8px;
}

/* ~~~~~~~ CARDS SERVIÇOS ~~~~~~~ */
.section-services-list {
    padding: 60px 0 40px 0;
}

.services-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-left: -58px;
    margin-right: -58px;
    width: calc(100% + 116px);
}

.service-card {
    padding: 50px 40px; 
    min-height: 330px;
    display: flex;
    flex-direction: column;
    background-color: #f4f1ec;
}

.section-services-list .container {
    overflow: visible;
}

.service-card-icon {
    width: 75px;
    height: 45px;
    margin-bottom: 25px;
}

.service-card-icon img {
    width: 100%;
    height: 100%;
}

.service-card-title {
    font-family: var(--font-gotham-book);
    font-size: 1rem;
    letter-spacing: 0.8px;
    color: var(--color-black);
    margin-bottom: 25px;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    align-items: flex-start;
}

.service-card-text {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: #535659;
    margin: 0;
    margin-left: 20px;
    max-width: 180px;
}

/* Responsividade */
/* Tablets (Ecrãs médios) */
@media (max-width: 1200px) {
    .services-cards-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telemóveis */
@media (max-width: 600px) {
    .services-cards-grid {
        grid-template-columns: 1fr; /* 1 card por linha */
    }
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PORTFÓLIO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.section-portfolio-intro {
    padding: 60px 0 15px;
}

.portfolio-header {
    margin-bottom: 60px;
}

.portfolio-label {
    font-family: var(--font-gotham-medium); 
    color: var(--color-primary); 
    font-size: 0.8rem;
    letter-spacing: 1.25px;
    display: block;
}

.portfolio-main-title {
    font-family: var(--font-gotham-light);
    font-size: 2.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-black);
    margin-top: 15px;
}

.portfolio-intro-text {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--color-black);
    margin-bottom: 8px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Espaçamento entre os projetos */
    margin-left: -57px;
    margin-right: -57px;
    width: calc(100% + 114px);
}

.portfolio-card {
    display: flex;
    flex-direction: column;
}

/* O contentor da imagem na página de portfólio */
.portfolio-img-wrapper {
    width: 100%;
    /* Define uma proporção fixa. 
       Ex: 1/1 para quadrado, 4/3 para retângulos como no layout */
    aspect-ratio: 4 / 5; 
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

/* A imagem propriamente dita */
.portfolio-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;       /* Faz o recorte sem distorcer a imagem */
    object-position: center; /* Garante que o centro da foto é o que aparece */
    display: block;
}

.portfolio-info {
    margin-left: 58px !important;
}

.project-title {
    font-family: var(--font-gotham-light);
    font-size: 1.4rem;
    color: var(--color-black);
    margin-bottom: -5px;
}

.project-category {
    font-family: var(--font-gotham-book);
    text-transform: uppercase;
    font-size: 0.6rem;
    color: var(--color-secondary);
    letter-spacing: 0.8px;
}

/* Responsividade */
@media (max-width: 1300px) {
    .portfolio-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 projetos por linha */
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 projeto por linha */
    }
}

/* O Overlay: escuro e invisível por padrão */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Escurece um pouco mais para destacar o logo */
    
    /* Centralização perfeita */
    display: flex;
    align-items: center; /* Centro na vertical */
    justify-content: center; /* Centro na horizontal */
    
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5;
}

@media (hover : hover) {
    .portfolio-card:hover .portfolio-overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* Estilo do Logo no centro */
.overlay-logo {
    width: auto; /* Impede que estique na largura */
    height: auto; /* Impede que estique na altura */
    max-width: 21%; /* Ocupa no máximo % da largura do card */
    max-height: 16%; /* Ocupa no máximo % da altura do card */
    object-fit: contain; /* Mantém a proporção sem deformar */
    overflow: visible;
}

/* Pequeno zoom na imagem para dar um toque extra (opcional) */
.portfolio-img-wrapper img.img-fluid {
    transition: transform 0.5s ease;
}

.portfolio-card:hover img.img-fluid {
    transform: scale(1.05);
}

.portfolio-grid > div:nth-child(3) {
    pointer-events: none !important; /* Desativa links, cliques e efeitos de hover */
    cursor: default !important;      /* Garante que o rato não vira a "mãozinha" de link */
    
    /* Opcional: Se quiseres dar uma pista visual de que está indisponível, 
       podes tirar-lhe um bocado de opacidade tirando as duas barras abaixo: */
    /* opacity: 0.75 !important; */
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PROJETOS SINGLE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 1. Garante que a tua Navbar está sempre no topo de tudo */
header.main-header {
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 10001; 
}

/* 2. Ajusta a Modal para começar abaixo da Navbar */
.project-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; 
    display: none;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

/* Classe para congelar o site por trás */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh;
}

.close-project {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-white);
    font-size: 27px;
    z-index: 20;
    transition: all 0.3s ease;
}

.close-project:hover {
   background-color: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
}

/* Secção Hero: Bloco Bege + Slider */
.single-project-page .project-hero {
    overflow: hidden;
}

.project-hero {
    position: relative;
    padding-bottom: 65px;
    padding-top: 40px;
}

.project-hero-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.bg-bege {
    background-color: #f4f1ec;
}

.p-5 {
    padding: 2.68rem !important;
    padding-bottom: 0 !important;
}

.project-intro-block {
    padding: 60px;
    width: 40.2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    margin-left: -50px;
}

.n-margin-left {
    margin-left: -19px;
}

.project-logo img {
    max-width: 75px;
    margin-bottom: 30px;
    margin-top: 11px;
}

.project-main-title {
    font-family: var(--font-gotham-light);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.25px;
}

.project-description-short {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    margin-bottom: 40px;
    color: var(--color-black);
}

/* Meta-dados (Localização, etc.) */
.project-meta-info {
    margin-top: -5px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.project-meta-info-divider {
    width: 110%;
    margin-top: 110px;
    margin-left: -5%;
}

.meta-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    font-size: 0.6rem;
}

.meta-label {
    font-family: var(--font-gotham-light);
    color: var(--color-secondary);
    letter-spacing: 0.8px;
}

.meta-value {
    font-family: var(--font-gotham-medium);
    color: var(--color-secondary);
    letter-spacing: 0.8px;
}

/* Secção de Detalhes (Características e Parceiros) */
.project-details-section {
    padding: 0 0 50px;
    margin-left: 120px;
}

.characteristics-container {
    width: 600px;
    padding-left: 44px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 125px;
}

.charac-subtitle-1 {
    font-size: 1rem;
    font-family: var(--font-gotham-light);
    letter-spacing: 0.8px;
}

.charac-subtitle-2 {
    font-size: 1rem;
    font-family: var(--font-gotham-light);
    letter-spacing: 0.8px;
    margin-left: 40px;
    max-width: 300px;
}

.charac-label {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-gotham-medium);
    font-size: 0.6rem;
    margin-bottom: 40px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

    /* Ícones de Características */
    .icons-grid {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }

    .icon-item {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        max-width: 150px;
    }

    .icon-wrapper {
        height: 45px; 
        margin-bottom: 20px;
    }

    .icon-wrapper img {
        height: 100%;
        width: auto;
        object-fit: contain;
    }

    .caract-title {
        font-family: var(--font-gotham-book);
        font-size: 1.1rem;
        letter-spacing: 0.8px;
        display: block;
        margin-bottom: -5px !important;
    }

    .caract-info {
        display: block;
        color: var(--color-secondary);
        font-family: var(--font-gotham-light);
        font-size: 0.7rem;
        letter-spacing: 0.8px;
    }

    .charac-divider {
        display: none;
    }

    /* Parceiros */
    /* Espaçamento da linha toda */
    .project-info-row {
        width: 100%;
        clear: both;
        position: relative;
    }

    .project-info-row:before {
        content: "";
        position: absolute;
        left: 0;
        width: 1px;
        background-color: #e5e5e5;
        top: 50%;
        transform: translateY(-50%);
        height: calc(100% + 40px);
        transform-origin: top center;
        scale: 1 var(--line-scale, 0); /* começa invisível */
    }

    /* Cada item (Função + Nome) */
    .partner-item {
        display: block !important;
        position: relative !important; 
        margin-bottom: 0 !important;
        height: auto !important;
        clear: both;
    }

    /* Estilo da Função (Light) */
    .partner-role {
        display: block !important;
        position: relative !important;
        top: auto !important;    /* Reseta posições fixas */
        left: auto !important;
        font-family: var(--font-gotham-light);
        font-size: 0.6rem;
        color: var(--color-secondary);
        line-height: 1 !important;
        letter-spacing: 0.8px;
        margin-bottom: 4px !important;
    }

    /* Estilo do Nome (Bold) */
    .partner-name {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-family: var(--font-gotham-medium);
        font-size: 0.6rem;
        color: var(--color-secondary);
        line-height: 1 !important;
        letter-spacing: 0.8px;
    }

    /* Garante que a coluna do Bootstrap permite o crescimento */
    .project-info-row .col-md-6, 
    .project-info-row .col-12 {
        height: auto !important;
        position: relative !important;
    }

    .porfolio-divider {
        width: 95%;
    }

/* Secção Secundária */
.custom-ml {
    margin-left: -35px !important; 
}

.header-evolucao {
    margin-bottom: 4rem !important;
}

.label-red {
    font-family: var(--font-gotham-medium);
    color: var(--color-primary);
    font-size: 0.7rem;
    margin-left: 80px;
    letter-spacing: 1px;
}

.title-evolucao {
    font-family: var(--font-gotham-light);
    font-size: 2rem; 
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 500px;
    margin-top: 10px;
    margin-left: 80px;
    color: var(--color-black);
}

.sidebar-evolucao {
    height: 100%;
    margin-right: -50px !important;
}

.sidebar-evolucao.ml-4 {
    margin-left: 1.2rem !important;
}

.long-description {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--color-black);
    margin-top: 50px;
    max-width: 100%;
}

/* Garante que a imagem extra não deforma a coluna */
.img-extra-wrap img {
    width: 100%;
    height: auto;
    display: block;
}


/* --- Slider Principal (Hero) --- */
/* Garantir que as imagens dentro do slider cubram todo o espaço */
/* Criar um contentor personalizado mais largo */
.container-custom {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding-left: 75px;
    padding-right: 75px;
}

.container-custom.position-relative {
    position: relative;
}

.img-full-height {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Forçar o Slider a ocupar 100% da altura da coluna pai */
.mainProjectSwiper {
    width: 100%;
    height: 100% !important; /* Importante para alinhar com o bloco bege */
    min-height: 500px; /* Altura mínima para não ficar muito esmagado em ecrãs pequenos */
}

.mainProjectSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem preencher o espaço sem distorcer */
    object-position: center;
}

.mainProjectSwiper .swiper-button-next, 
.mainProjectSwiper .swiper-button-prev {
    color: var(--color-white);
    width: 40px;
    height: 40px;
    background-color: #8a8d8f94;
}

.swiper-button-prev:hover, 
.swiper-button-next:hover {
    background-color: var(--color-primary);
    color: white;
}


.mainProjectSwiper .swiper-button-next::after, 
.mainProjectSwiper .swiper-button-prev::after {
    font-size: 24px;
}

/* Seta da Esquerda */
.mainProjectSwiper .swiper-button-prev {
    left: 0 !important; /* Move a seta totalmente para a esquerda */
}

/* Seta da Direita */
.mainProjectSwiper .swiper-button-next {
    right: 0 !important; /* Move a seta totalmente para a direita */
}

.mainProjectSwiper .swiper-button-next, 
.mainProjectSwiper .swiper-button-prev {
    padding: 0; 
    margin: 0;
}

.mainProjectSwiper .swiper-pagination-bullet {
    background: var(--color-white);
    opacity: 0.6;
}

.mainProjectSwiper .swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
}

/* --- Slider Secundário (História) --- */
.secondary-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-left: 50px;
}

/* Formatação da Fração (01 -- 04) */
.swiper-pagination-fraction {
    font-family: var(--font-gotham-light);
    font-size: 0.7rem;
    color: var(--color-black);
    flex: 0 0 120px;
    min-width: 80px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    position: relative !important;
    bottom: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.swiper-pagination-current {
    color: var(--color-primary);
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
}

.divider {
    width: 40px;
    display: block;
    margin: 0 1rem;
    border: none;
    border-top: 1px solid var(--color-secondary) !important;
    transform-origin: left;
    transition-delay: 0.5s;
}

/* Setas de navegação inferiores */
.custom-nav-arrows {
    display: flex;
}

.custom-nav-arrows > div {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.custom-nav-arrows > div.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.arrows-border-left {
    border-left: 1px solid var(--color-secondary);
    padding-left: 10px !important;
    height: 100%;
}

/* O desenho da seta */
.arrow-line {
    display: inline-block;
    width: 12px;  
    height: 12px; 
    border-top: 1px solid var(--color-black); 
    border-right: 1px solid var(--color-black);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Direção Esquerda */
.arrow-line.left {
    transform: rotate(-135deg);
}

/* Direção Direita */
.arrow-line.right {
    transform: rotate(45deg);
}

/* Efeito Hover Elegante */
.custom-nav-secondary button:hover .arrow-line {
    border-color: var(--color-primary)
}

.slider-col-wrapper {
    width: 100%;
    max-width: 715px;
    padding-left: 20px;
}

.secondaryProjectSwiper {
    width: 100%;
    height: 400px; 
}

.secondaryProjectSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
}

.secondaryProjectSwiper .swiper-slide {
    width: calc(100% + 5px) !important; 
    margin-right: -5px !important;
}

.swiper {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Esconde as imagens que não estão ativas */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preenche o espaço sem deformar */
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CONTACTOS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 110px;
    padding: 60px 0;
    align-items: start;
}

.contact-form-wrapper {
    margin-top: 150px; 
}

/* Remove a margem superior do formulário CF7 para não haver conflitos */
.cf7-custom-form {
    margin-top: 0;
}

.contact-info {
    max-width: 400px;
}

.contact-intro-text {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    color: var(--color-black);
    line-height: 1.2;
    letter-spacing: 0.8px;
    margin: 20px 0 40px;
    width: 465px;
    max-width: 500px;
}

.detail-item strong {
    font-family: var(--font-gotham-medium);
    color: var(--color-black);
    font-size: 0.8rem;
    letter-spacing: 0.7px;
    display: block;
}

.detail-item {
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    color: var(--color-black);
    margin: 20px 0 20px;
}

/* Estilo dos Inputs */
/* Adiciona a linha por cima apenas no primeiro campo (Nome) */
.cf7-custom-form .form-row:first-child {
    border-top: 1px solid #e5e5e5;
}
.cf7-custom-form .form-row {
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e5e5; /* A linha horizontal do layout */
}

.cf7-custom-form input, 
.cf7-custom-form textarea {
    width: 100%;
    border: none !important;
    padding: 15px 0;
    background: transparent;
    font-family: var(--font-gotham-light);
    font-size: 0.8rem;
    outline: none;
}

/* Botão Enviar */
.btn-wrapper,
.cf7-custom-form input[type="submit"],
.contact-form-wrapper input[type="submit"],
.contact-form-wrapper button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    position: relative;
    display: inline-block;
    width: max-content;
    align-self: flex-start;
}

.btn-wrapper {
    padding: 0 25px 0 0;
}

.cf7-custom-form input[type="submit"],
.contact-form-wrapper input[type="submit"],
.contact-form-wrapper button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    padding: 8px 0;
    font-family: var(--font-gotham-book);
    font-size: 0.7rem;
    letter-spacing: 2.7px;
    color: var(--color-black) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
}

.cf7-custom-form input[type="submit"]:hover,
.contact-form-wrapper input[type="submit"]:hover,
.contact-form-wrapper button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
    color: var(--color-white) !important;
    background: transparent !important;
}

/* Checkbox da Privacidade */
.acceptance-wrapper {
    font-size: 0.8rem;
    margin-bottom: 20px;
    color: var(--color-black);
}








/* 1. 🖥️ CONTENTOR DA NAVBAR (Fica exatamente como está, intocável) */
.navbar .container {
    max-width: 1600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 85px !important;  /* Mantém o logótipo onde está */
    padding-right: 85px !important; /* Alinha o menu à direita */
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

/* 2. 🖥️ CONTENTORES DO CONTEÚDO (Serviços, Sobre Nós, Portfólio, etc.) */
.hero-home .container,
.home-section .container,
.section-about .container,
.section-portfolio .container,
.section-about-us .container,
.section-timeline .container,
.section-mission .container,
.section-principles .container,
.section-mission-closing .container,
.section-services-intro .container,
.section-services-list .container,
.section-portfolio-intro .container,
.section-contact .container,
.site-footer .container {
    max-width: 1600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 118px !important;     
    padding-right: 118px !important; 
}

.hero-home .container {
    padding-left: 140px !important; 
    padding-right: 85px !important;
}

.home-section .container,
.section-about .container {
    padding-left: 48px !important;
    padding-right: 85px !important;
}

@media (min-width: 1380px) {
    .section-about .content-box {
        margin-left: 0 !important; 
    }
}

.section-portfolio .container {
    padding-left: 102px !important;
    padding-right: 85px !important;
}

.site-footer .container {
    padding-left: 140px !important;
    padding-right: 85px !important;
}

/* ==========================================================================
   🎯 CORREÇÃO DO FORMULÁRIO
   ========================================================================== */

.cf7-custom-form .form-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.contact-form-wrapper form,
.contact-form-wrapper .wpcf7 {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.cf7-custom-form {
    padding-left: 0px !important; 
}