/* --- GERAL E VARIÁVEIS --- */
:root {
    --primary-blue: #32a1d7;
    --dark-text: #555;
    --light-text: #888;
    --heavy-text: #4a4a4a;
    --bg-white: #ffffff;
    --azul-claro: #63b8f0;
    --amarelo: #ebcb31;
    --azul-mais-escuro: #4e83b9;
    --verde-azulado: #17a2b8;

    /* Adicionei uma cor escura para o fundo do mega menu, inspirada no seu tema */
    --dark-blue-bg: rgba(15, 32, 51, 0.97);
}

.red-hat-text {
    font-family: "Red Hat Text", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-style: normal;
}

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

body {
    font-family: 'Red Hat Text' !important;
    font-weight: 400 !important;
    /* Define o peso padrão para 400 */
    color: var(--dark-text) !important;
    background-color: var(--bg-white) !important;

    /* A propriedade 'font-optical-sizing' é geralmente ativada por defeito
       pelo browser quando a fonte o suporta, mas pode adicioná-la se quiser. */
    font-optical-sizing: auto;
}


/* 1. Impede que o site transborde globalmente */
html,
body {
    width: 100%;
}

/* =================================================================== */
/* SEGURANÇA CONTRA OVERFLOW DE ELEMENTOS DO TOPO                      */
/* =================================================================== */

/* 1. Força a imagem de topo a ser responsiva e nunca transbordar */
.page-hero-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 2. Força o banner de avisos a cortar qualquer elemento interno que passe dos 100% */
.bottom-banner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    /* Corta o margin-left de 60px do slider para não dar overflow global */
}

/* 3. Força as breadcrumbs a manterem-se nos limites */
.breadcrumbs-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 4. O contentor principal continua a cortar as tabelas/grelhas internas */
.pagina-interna main,
.obra-detalhe-container,
.main-content,
.page-content-wrapper {
    width: 100%;
    overflow-x: hidden !important;
}

/* 2. Força a quebra de texto em endereços ou links longos */
.info-content {
    flex: 1;
    /* Permite que o texto ocupe o espaço disponível */
    min-width: 0;
    /* Correção para bug de flexbox no mobile */
}

.info-content p,
.info-content h4,
.info-content a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* 3. Correção para o News Grid que tinha 'nowrap' */
/* Se este elemento existir na página, ele estava a forçar o scroll */
@media (max-width: 991px) {
    .news-grid {
        flex-wrap: wrap !important;
        /* Permite que os cards passem para baixo */
    }

    .news-grid.container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
}


.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

/* =================================================================== */
/* SKIP LINK - SOLUÇÃO DEFINITIVA
/* =================================================================== */
.skip-link {
    position: fixed;
    /* Fixado na janela, não na página */
    top: -300px;
    /* Escondido bem acima da tela */
    left: 0;
    width: 100%;
    /* Ocupa a largura toda */
    background-color: #0056b3 !important;
    /* Azul SMAS forte */
    color: #ffffff !important;
    /* Texto branco */
    text-align: center;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 700;
    z-index: 999999 !important;
    /* Valor absurdo para ficar ACIMA do header (1000) e menu mobile (10000) */
    text-decoration: none;
    transition: top 0.3s ease;
    /* Animação suave a descer */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* O segredo: Quando recebe o foco do teclado, desce para o topo */
.skip-link:focus {
    top: 0 !important;
    outline: 4px solid #f1c40f;
    /* Borda amarela para alto contraste */
}




/* ======================================================== */
/*         HERO SLIDER: CONTEÚDO À DIREITA (REFINADO)       */
/* ======================================================== */

/* O contentor principal do slider */
.hero-slider.owl-carousel {
    height: 100vh;
    /* OCUPA A ALTURA TOTAL DO ECRÃ */
    width: 100%;
    position: relative;
    background-color: #e0e0e0;
}

/* Garante que todas as camadas do Owl Carousel ocupem a altura total */
.hero-slider .owl-stage-outer,
.hero-slider .owl-stage,
.hero-slider .owl-item {
    height: 100% !important;
}

/* Cada slide individual */
.hero-slider .item {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Centraliza o conteúdo verticalmente e empurra para a direita */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    /* Essencial para posicionar os ícones sociais absolutamente */
}

/* O contentor do texto, posicionado sobre a imagem */
.hero-slider .hero-content {
    position: relative;
    z-index: 2;
    padding-right: 15%;
    /* Aumentei um pouco para afastar da margem */
    max-width: 700px;
    color: var(--dark-text);
    /* Remover margem bottom, pois os ícones sociais serão posicionados fora daqui */
    margin-bottom: 0;
    border-radius: 8px;
}

@media (min-width: 991px) {
    .hero-slider .hero-content {
        text-align: left !important;
    }
}

/* Ajustes nos elementos de texto com SOMBRA SUAVE (text-shadow) */
.hero-slider .hero-content .subtitle {
    color: var(--primary-blue);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    /* ADICIONADO: Sombra muito suave para contraste de leitura */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
}

.hero-slider .hero-content .title-container,
.hero-slider .hero-content .title-container * {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--heavy-text);
    margin: 10px 0;
    /* ADICIONADO: Sombra suave para o título negrito */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.hero-slider .hero-content .description-container,
.hero-slider .hero-content .description-container * {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark-text);
    margin: 25px 0;
    /* ADICIONADO: Sombra suave e discreta para a descrição */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.32);
}

/* Botão */
.hero-slider .hero-content .btn {
    background-color: var(--primary-blue);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-shadow: none;
    /* Mantém o botão limpo sem sombra de texto */
    display: inline-block;
    transition: background-color 0.3s ease;
}

.hero-slider .hero-content .btn:hover {
    background-color: #2980b9;
}

/* ========================================================== */
/*  NOVO POSICIONAMENTO: ÍCONES SOCIAIS NA EXTREMA DIREITA  */
/* ========================================================== */

/* Remove os ícones da posição original dentro do hero-content para evitar duplicação
   e garantir que o bloco de texto termine no botão. */
.hero-slider .hero-content .hero-social-icons {
    display: none !important;
}

/* Ícones Sociais - Posicionamento Fixo e vertical (como na sua imagem de referência) */
.hero-social-fixed {
    position: absolute;
    top: 50% !important;
    /* Alterado de 80% para 50% para centrar verticalmente */
    right: 20px;
    transform: translateY(-50%) !important;
    /* Mantém a centragem matemática perfeita */
    display: flex;
    flex-direction: column;
    /* Mantém os ícones em coluna */
    gap: 15px;
    z-index: 10;
    margin-right: 10px;
}

.hero-social-fixed a {
    background-color: transparent;
    color: var(--primary-blue);
    border: 1px solid #e0e0e0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-social-fixed a:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

/* 1. Alvo EXCLUSIVO da barra vertical do topo (exclui a barra horizontal de partilha) */
.hero-social-fixed:not(.horizontal) {
    position: absolute !important;
    top: 50% !important;
    /* Centrado verticalmente a 50% */
    right: 20px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    /* Mantém em coluna vertical */
    gap: 15px !important;
    z-index: 10 !important;
    margin-right: 10px !important;
}

/* 2. Restaura o alinhamento horizontal natural para a partilha nas páginas internas */
.hero-social-fixed.horizontal {
    position: static !important;
    /* Remove a posição absoluta */
    transform: none !important;
    /* Remove a translação vertical */
    display: flex !important;
    flex-direction: row !important;
    /* Garante que os ícones fiquem lado a lado */
    align-items: center !important;
    gap: 12px !important;
    /* Distância saudável entre os ícones de partilha */
    margin: 0 !important;
    width: auto !important;
}

/* 3. Força a barra do slider a rodar para horizontal e ir para o fundo APENAS em telemóveis (< 500px) */
@media (max-width: 500px) {
    .hero-social-fixed:not(.horizontal) {
        top: auto !important;
        right: 50% !important;
        bottom: 80px !important;
        /* Posicionado no fundo sobre o banner amarelo */
        transform: translateX(50%) !important;
        flex-direction: row !important;
        /* Roda as redes sociais para horizontal */
        gap: 15px !important;
        width: max-content !important;
        margin-right: 0 !important;
    }
}

/* Pontos de navegação do Owl Carousel - REMOVIDOS */
.hero-slider.owl-theme .owl-dots {
    display: none;
    /* ESCONDE OS DOTS */
}

/* Media Query para ecrãs menores */
@media (max-width: 992px) {
    .hero-slider.owl-carousel {
        height: 600px;
        /* Reduz a altura para não consumir 100% no mobile */
    }

    .hero-slider .item {
        justify-content: center;
        /* Centraliza o conteúdo */
        text-align: center;
    }

    .hero-slider .hero-content {
        padding: 20px 10px;
        max-width: 70%;
        margin: 0 auto;
    }

    /* Move os ícones sociais fixos para o fundo do slide em mobile */
    .hero-social-fixed {
        position: absolute;
        top: 70%;
        right: 20px;
        /* Alinha bem na direita */
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 15px;
        z-index: 10;
    }

    .hero-slider .hero-content .title-container,
    .hero-slider .hero-content .title-container * {
        font-size: 2.0rem !important;

    }

    .hero-slider .hero-content .description-container,
    .hero-slider .hero-content .description-container * {
        font-size: 0.9rem !important;
    }

    .bottom-banner .aviso-texto-wrapper>i {
        font-size: 15px !important;
        width: 30px !important;
        height: 30px !important;
    }

    .bottom-banner .aviso-texto-wrapper p {
        font-size: 15px !important;
    }

    .bottom-banner .aviso-texto-wrapper {
        gap: 10px !important;
    }

}

/* ========================================================== */
/*   AJUSTE DAS REDES SOCIAIS PARA MOBILE (ABAIXO DE 500PX)   */
/* ========================================================== */
@media (max-width: 500px) {
    .hero-social-fixed {
        /* Posicionamento horizontal no fundo */
        top: auto !important;
        right: 50% !important;
        bottom: 80px !important;
        transform: translateX(50%) !important;

        /* Disposição em linha */
        flex-direction: row !important;
        gap: 15px !important;
        width: max-content !important;
        margin-right: 0 !important;
    }

    .hero-social-fixed a {
        /* CORES IGUAIS AO FOOTER: Fundo azul sólido e ícone branco */
        background-color: var(--primary-blue) !important;
        color: #ffffff !important;
        border: none !important;
        /* Remove a borda cinza do desktop */

        /* Tamanho ligeiramente reduzido para mobile */
        width: 42px !important;
        height: 42px !important;

        /* Sombra suave para dar destaque sobre a imagem */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .hero-social-fixed a:hover {
        /* Cor de hover igual à do footer */
        background-color: var(--azul-mais-escuro) !important;
        color: #ffffff !important;
        transform: translateY(-3px);
    }
}

/* ========================================================== */
/*      EFEITO MARQUEE FINAL CORRIGIDO (MOBILE < 550PX)      */
/* ========================================================== */
@media (max-width: 550px) {

    /* 1. Contentor principal */
    .bottom-banner .aviso-texto-wrapper {
        overflow: hidden;
        display: flex;
        align-items: center;
        white-space: nowrap;
        position: relative;
    }

    /* 2. O ÍCONE (Círculo + Triângulo) */
    .bottom-banner .aviso-texto-wrapper>i {
        background-color: var(--amarelo);
        position: relative;
        z-index: 20;
        margin-right: 15px;
        flex-shrink: 0;

        /* CORREÇÃO DE CENTRAGEM: */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        /* Remove qualquer espaço extra */
        line-height: 0 !important;
        /* Impede que a altura da linha empurre o ícone */
        width: 30px !important;
        /* Garante tamanho fixo e igual */
        height: 30px !important;
    }

    /* 3. O TEXTO (Marquee) */
    .bottom-banner .aviso-texto-wrapper p {
        display: inline-block;
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: nowrap !important;

        /* Máscara de fade */
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);

        /* Velocidade lenta (25 segundos) */
        animation: scrollAviso 25s linear infinite;
        padding-left: 5px;
        width: fit-content;
    }
}

/* 4. Animação */
@keyframes scrollAviso {
    0% {
        transform: translateX(0);
    }

    8% {
        transform: translateX(0);
    }

    /* Pausa para leitura do início */
    85% {
        transform: translateX(-100%);
    }

    /* Desliza até ao fim */
    100% {
        transform: translateX(-100%);
    }
}

/* --- ÍCONES LATERAIS --- */
.side-icons {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.side-icons a {
    padding: 12px;
    color: rgb(255, 255, 255);
    font-size: 20px;
    transition: transform 0.2s ease;
    padding-left: 17px;
    width: 72px;
    padding: 0;
}

/*.side-icons a:hover {
    transform: scale(1.1);
}*/

.side-icons a:nth-child(1) {
    background-color: #c1e1ec;
    color: #32a1d7;
    margin-bottom: 7px;
    border-radius: 5px;
}

.side-icons a:nth-child(2) {
    background-color: #d1e8dd;
    color: #4CAF50;
    margin-bottom: 7px;
    border-radius: 5px;
}

.side-icons a:nth-child(3) {
    background-color: #d1e8dd;
    color: #4CAF50;
    margin-bottom: 7px;
    border-radius: 5px;
}

.side-icons a:nth-child(4) {
    background-color: #e3f0e4;
    color: #6e9a71;
    margin-bottom: 7px;
    border-radius: 5px;
}

.side-icons a:nth-child(5) {
    background-color: #f0e6d8;
    color: #a38b6c;
    margin-bottom: 7px;
    border-radius: 5px;
}

.hero-image {
    HEIGHT: 975PX;
}

.hero-social-icons {
    position: absolute;
    /* Posicionado em relação ao .hero-section */
    bottom: 100px;
    /* Distância da parte inferior */
    right: 20px;
    /* Distância da direita */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espaço entre os ícones */
    z-index: 10;
}

.hero-social-icons a {
    background-color: rgba(255, 255, 255, 0.0);
    /* Fundo semi-transparente */
    color: var(--primary-blue);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Torna os ícones circulares */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-social-icons a:hover {
    background-color: var(--primary-blue);
    color: white;
    /* Muda para a cor primária no hover */
    transform: scale(1.1);
}

.banner-trigger {
    position: absolute;
    /* Puxa-o para cima, alinhando com o banner.
       55px é a altura do seu banner. */
    margin-top: -55px;
    height: 1px;
    /* Apenas para ser detetável */
    width: 100%;
    pointer-events: none;
    /* Garante que é invisível e não interfere com cliques */
}

/* ESTADO PADRÃO: O banner comporta-se como você queria originalmente */
.bottom-banner {
    position: sticky !important;
    top: 100px !important;
    /* Onde ele agarra ao menu */
    z-index: 999 !important;
    margin-top: -55px !important;
    /* O seu ajuste original para sobrepor */

    /* Seus estilos visuais (não mudar) */
    width: 100% !important;
    height: 55px !important;
    background-color: var(--amarelo) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: transform 0.2s ease-in-out !important;
    /* Transição suave */
}

/* ESTADO MODIFICADOR: Quando estiver no topo da página, ele fica fixo em baixo */
.bottom-banner.is-fixed-at-bottom {
    position: fixed;
    top: auto;
    /* Anula o 'top: 100px' */
    bottom: 0;
    margin-top: 0;
    /* Anula a margem do estado sticky */
}

/* ---- ESTRUTURA E ALTURA DO OWL CAROUSEL ---- */
/* Garante que as estruturas do Owl preenchem a altura */
.bottom-banner .avisos-slider.owl-carousel,
.bottom-banner .owl-stage-outer,
.bottom-banner .owl-stage,
.bottom-banner .owl-item,
.bottom-banner .item {
    height: 100%;
}

/* ---- SOLUÇÃO PARA LARGURA E PADDING ---- */

/* 1. O .owl-item é o contentor que o Owl Carousel controla. Deixamo-lo simples. */
.bottom-banner .owl-item {
    display: flex !important;
    /* Essencial para o alinhamento do filho */
}

/* 2. O .item (filho direto do .owl-item) ocupa toda a largura e controla o padding. */
.bottom-banner .item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 30px;
    /* O padding lateral é aplicado aqui */
    box-sizing: border-box;
    /* Garante que o padding não aumenta a largura */
}

/* 3. O .container-fluid agora é apenas um wrapper interno sem padding. */
/* A estrutura do seu HTML já tem esta div, mas as regras de layout agora estão no .item.
   Se quiser simplificar o HTML, esta div (.container-fluid) pode até ser removida no futuro,
   colocando o .aviso-texto-wrapper e o .btn-aviso diretamente dentro do .item.
   Por agora, apenas removemos as regras de espaçamento dela. */
.bottom-banner .owl-item .container-fluid {
    display: flex;
    /* Mantém o layout flex para os seus filhos */
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;
    margin-left: 60px;
}

/* ---- LAYOUT DOS ELEMENTOS INTERNOS (TEXTO E BOTÃO) ---- */
.bottom-banner .aviso-texto-wrapper>i {
    font-size: 20px;
    /* Tamanho do triângulo de aviso */
    color: rgb(0, 0, 0);

    /* --- A MÁGICA DO CÍRCULO ACONTECE AQUI --- */
    width: 38px;
    /* Largura do círculo */
    height: 38px;
    /* Altura do círculo */
    border: 2px solid rgb(0, 0, 0);
    border-radius: 50%;
    /* Transforma o quadrado num círculo perfeito */

    /* --- PARA CENTRAR O ÍCONE DENTRO DO CÍRCULO --- */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Impede que o círculo seja esmagado se o texto for grande */
}

/* 4. O wrapper do texto ocupa o espaço disponível */
.bottom-banner .aviso-texto-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    min-width: 0;
    color: black !important;
}

/* 5. Estilo do parágrafo do aviso */
.bottom-banner .aviso-texto-wrapper p {
    font-weight: 300 !important;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: larger;
    color: black;
}

/* 6. O botão é empurrado para a direita */
.bottom-banner .btn-aviso {
    color: rgb(0, 0, 0);
    font-size: 1.0rem;
    flex-shrink: 0;
    color: black;
}

/* ---- EFEITO DE TRANSIÇÃO (FADE-IN) ---- */
.bottom-banner .avisos-slider {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* 1. Definimos o item como o ponto de referência relativo */
.bottom-banner .item {
    position: relative;
    cursor: pointer;
}

/* 2. Criamos um "tapete" invisível no link da seta que se expande por toda a barra */
.bottom-banner .btn-aviso::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* Garante que fica por cima do texto e ícones */
}

/* 3. Ajuste opcional: efeito visual ao passar o rato na barra */
.bottom-banner .item:hover {
    filter: brightness(0.95);
    /* Dá um leve escurecimento para indicar clique */
}

/* 4. Garante que o texto não impede o clique (opcional) */
.bottom-banner .aviso-texto-wrapper {
    pointer-events: none;
}

.main-servicos {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-left: 5%;
    padding-right: 5%;
}

@media (max-width: 992px) {

    /* 1. Reduz o padding lateral da barra de 30px para apenas 10px para encostar às bordas */
    .bottom-banner .item {
        padding: 0 10px !important;
    }

    /* 2. Força a remoção de qualquer recuo à esquerda no mobile */
    .bottom-banner .owl-item .container-fluid {
        margin-left: 0px !important;
    }

    /* 3. Diminui o espaço (gap) entre o ícone e o texto para libertar largura */
    .bottom-banner .aviso-texto-wrapper {
        gap: 8px !important;
        /* Reduzido de 15px para 8px */
    }

    /* 4. Otimiza o tamanho do círculo do ícone de aviso para mobile */
    .bottom-banner .aviso-texto-wrapper>i {
        width: 30px !important;
        /* Reduzido de 38px para 30px */
        height: 30px !important;
        /* Reduzido de 38px para 30px */
        font-size: 15px !important;
    }

    /* 5. Garante que o texto aproveita todo o espaço extra gerado */
    .bottom-banner .aviso-texto-wrapper p {
        font-size: 14px !important;
        /* Tamanho de letra ideal e legível para mobile */
    }
}

/* Regras para o layout ESTÁTICO (apenas acima de 1200px) */
@media (min-width: 1201px) {

    /* 1. Força o layout flexbox no contêiner principal */
    .main-servicos {
        display: flex !important;
        /* Força o display flex */
        justify-content: space-between;
    }

    /* 2. Força os itens a aparecerem e define a sua largura */
    /* Esta é a correção mais importante! */
    .main-servicos .box {
        display: block !important;
        /* Garante que os itens fiquem visíveis */
        width: 19% !important;
        /* Um pouco menos de 20% para garantir que cabem com margens/padding */
    }

    /* 3. Esconde completamente a estrutura do Owl Carousel nesta vista */
    .main-servicos .owl-stage-outer,
    .main-servicos .owl-dots,
    .main-servicos .owl-nav {
        display: none !important;
    }
}

/* Regras para o layout CARROSSEL (apenas abaixo de 1200px) */
@media (max-width: 1200px) {

    /* Garante que os itens dentro do carrossel se comportem bem */
    .main-servicos .box {
        width: 100%;
        /* Deixa o carrossel controlar a largura */
    }
}

.servicos-slider.owl-carousel {
    overflow: hidden !important;
}

.servicos-slider .owl-stage-outer {
    overflow: hidden !important;
}

.box {
    padding: 10px;
    width: 20%;
    text-align: center;
    color: white;
    font-weight: 600;
}

.conteudo {
    PADDING: 20PX;
    FONT-SIZE: 12px;
    border-radius: 20px;
}

.primeira .box .conteudo {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.primeira .box:hover .conteudo {
    transform: scale(1.05);
    /* aumenta ligeiramente */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* sombra suave */
}

.segunda {
    margin-top: 100px
}


/* --- SECÇÃO DE TEXTO INTRODUTÓRIO --- */
.info-section {
    padding: 80px 20px;
    text-align: center;
}

.info-section .section-title {
    font-size: 3.5rem;
    font-weight: 500;
    color: var(--primary-blue);
    margin-bottom: 40px;
    line-height: 1.2;
    text-align: left;
    margin-left: 25px;
}

.info-section .section-title span {
    font-weight: 400;
    color: var(--dark-text);
}

/* NOVO: Estilo para o contentor das duas caixas */
.info-section .text-content-split {
    display: flex;
    /* Ativa o Flexbox */
    justify-content: center;
    /* Centra as caixas se houver espaço extra */
    align-items: flex-start;
    /* Alinha as caixas pelo topo */
    gap: 60px;
    /* Espaço entre as duas caixas de texto */

    max-width: 85%;
    margin: 0 auto;
    text-align: left;
}

.etapas {
    color: white;
    background: #32a1d7;
    border-radius: 3px;
    padding-left: 9px;
    padding-right: 9px;
    font-weight: 500;
    padding-bottom: 3px;
}

/* Estilo para cada parágrafo (cada caixa) */
.info-section .text-content-split p {
    flex: 1;
    /* Faz com que cada caixa ocupe o mesmo espaço */
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--dark-text);
    text-align: justify;
}

/* --- RESPONSIVIDADE PARA A SECÇÃO --- */
@media (max-width: 768px) {
    .info-section .text-content-split {
        flex-direction: column;
        /* Coloca as caixas uma em cima da outra */
        gap: 30px;
        /* Reduz o espaço entre elas */
    }

    .info-section .section-title {
        font-size: 2.2rem;
    }
}

.news-section {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

.smcb-label {
    font-size: 1rem;
    color: #32a1d7;
    font-weight: 500;
}

.news-header .title-block .main-title {
    font-size: 2rem;
    font-weight: 500;
    color: #555555;
    margin: 5px 0 0 0;
    line-height: 1.2;
}

.news-header .view-all-link {
    text-decoration: none;
    color: #32a1d7;
    display: flex;
    align-items: center;
}

.news-header .view-all-link span {
    font-size: 1.5rem;
    margin-left: 8px;
    transition: transform 0.2s;
}

.news-header .view-all-link:hover span {
    transform: translateX(5px);
}

.news-grid {
    display: flex;
    /* ATIVA O FLEXBOX */
    flex-wrap: nowrap;
    /* Garante que os itens fiquem na mesma linha (importante para 4 itens) */
    gap: 30px;
    /* Mantém o espaçamento que você já tem */
}

/* 2. Os cards dentro da grelha: Dizemos para ocuparem o espaço disponível */
.news-grid .news-card {
    flex: 1;
    /* A "mágica": cada card cresce para preencher o espaço igualmente */
    min-width: 0;
    /* Previne problemas de overflow com conteúdo grande */
}

.news-grid.container {
    max-width: 2000px !important;
    margin: 0;
}

.news-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover,
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.news-card-image-container {
    position: relative;
    height: 275px;
    background-size: cover;
    background-position: center;
}

.news-icon {
    position: absolute;
    bottom: -25px;
    left: 20px;
    background-color: var(--azul-mais-escuro);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
    border: 3px solid #fff;
    font-size: 1.3rem;
}


.news-icon svg {
    width: 20px;
    height: 20px;
}


.news-card-content {
    padding: 40px 25px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #f9f9f9;
}

.news-card-date {
    color: #888;
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.news-card-title {
    font-size: 1.10rem;
    font-weight: 400;
    color: #32a1d7;
    line-height: 1.3;
    /* Altura de cada linha */

    position: relative;
    /* 3 linhas (3.9em) + espaço da linha azul = 4.6em */
    /* Como 4.6 é menor que 5.2 (4 linhas), a 4ª linha nunca aparecerá */
    min-height: 4.1em;
    max-height: 4.1em;
    margin-bottom: 20px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Diz ao browser para colocar reticências na 3ª linha */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* Cola a linha no fundo do espaço de 4.6em */
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #32a1d7;
    display: block;
}

.news-card-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-align: justify;
}

.news-card-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: auto;
}

.news-card-link {
    color: #555;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
}

.news-card-link:hover {
    color: #32a1d7;
}

.owl-theme .owl-nav {
    margin-top: 10px;
    display: none;
}

.news-card-link .arrow-circle {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.news-card-link:hover .arrow-circle {
    background-color: #32a1d7;
    border-color: #32a1d7;
    color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: 1fr 1fr;
    }

    .news-header .main-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .news-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .news-header .view-all-link {
        margin-top: 15px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}


.sustainability-section {
    padding: 5rem 0;
}

.image-container {
    position: relative;
}

.decorative-elements {
    position: absolute;
    top: 20px;
    left: -30px;
    height: calc(100% - 40px);
    width: 20px;
}

/* --- CÓDIGO CORRIGIDO (BARRA SÓLIDA) --- */
.decorative-elements::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    /* Ajustado para alinhar com os pontos */
    height: 120px;
    background-color: #3a6a9a;
    border-radius: 6px;
    /* Ajustado para a nova largura */
}

/* --- CÓDIGO CORRIGIDO (PONTOS) --- */
.decorative-elements::after {
    content: '';
    position: absolute;
    top: 140px;
    left: 5px;
    width: 9px;
    height: 170px;
    background-image: radial-gradient(#3a6a9a 2px, transparent 0),
        /* Ponto para a coluna da esquerda */
        radial-gradient(#3a6a9a 2px, transparent 0);
    background-repeat: repeat-y;
    background-position: 0 0, 8px 0;
    background-size: 100% 10px;
}

.sustainability-image {
    border-radius: 12px;
}



.content-column .main-title {
    color: #4A4A4A;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}



.sustainability-accordion .accordion-item {
    margin-bottom: 1.2rem;
    border: 1px solid #e9e9e9;
    border-radius: 10px !important;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.04);
    background-color: #FDFDFD;
}

.sustainability-accordion .accordion-header {
    border-radius: 10px !important;
}

.sustainability-accordion .accordion-button {
    background-color: #FDFDFD;
    color: #505050;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 10px !important;
    padding: 1.2rem 1.5rem;
    align-items: center;
}

.sustainability-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.sustainability-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: #e9e9e9;
}

/*.sustainability-accordion .accordion-button::after {
            background-image: none;
            content: '>';
            font-size: 1.5rem;
            font-weight: 300;
            color: #3a6a9a;
            transform: none;
            transition: transform 0.2s ease-in-out;
        }*/

.sustainability-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

.sustainability-accordion .accordion-body {
    font-size: 0.9rem;
    color: #666;
}

.accordion-icon {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .decorative-elements {
        display: none;
    }

    .content-column {
        margin-top: 2rem;
    }

    .content-column .main-title {
        font-size: 1.2rem;
    }

    .h1 {
        font-size: 1.3rem;
    }

}

.work-card-date {
    color: #888;
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.works-carousel-section {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    MARGIN-TOP: 100PX;
}

.work-card-link .arrow-circle {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
}

/* O rodapé que contém a linha e o link */
.work-card-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 25px;
    /* Mantém a margem para espaçamento */
    flex-shrink: 0;
    /* Impede que o rodapé encolha */
}

/* O link "Saber Mais" */
.work-card-link {
    color: #555;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
}

.work-card-link:hover {
    color: #32a1d7;
    /* Muda a cor do texto para o azul primário no hover */
}

/* 
   A classe .arrow-circle já está estilizada na secção de notícias.
   Apenas precisamos de adicionar o efeito de hover específico para o card de obras.
*/
.work-card-link:hover .arrow-circle {
    background-color: #32a1d7;
    border-color: #32a1d7;
    color: white;
}

/* Estrutura para os fundos (permite ter a barra castanha) */
.works-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.brown-bg-column {
    position: absolute;
    top: 0;
    right: 0;
    /* Alinha à direita */
    width: 20%;
    /* Largura da barra */
    height: 100%;
    background-color: #8B735B;
    /* Cor da barra vista numa das imagens de referência */
}

/* O conteúdo principal deve estar à frente dos fundos */
.works-carousel-section .container {
    position: relative;
    z-index: 1;
}

/* Estilo do cabeçalho da secção */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

.section-header .label {
    color: #4a90e2;
    font-weight: 600;
}

.section-header .main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #555;
    margin: 5px 0 0 0;
    line-height: 1.2;
}

.section-header .view-all-link {
    text-decoration: none;
    color: #0056b3;
    font-weight: 700;
    white-space: nowrap;
}

.section-header .view-all-link span {
    font-size: 1.5rem;
    margin-left: 8px;
}

/* Estilo de cada card (reutilizável) */
.work-card {
    background-color: #f9f9f9;
    border-radius: 20px;
    padding: 25px;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* border: 1px solid #e9e9e9; */
    box-shadow: 0 8px 16px rgb(0 0 0 / 5%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.work-card-icon {
    width: 50px;
    height: auto;
    margin: 0 auto 15px;
}

.work-card-title {
    font-size: 1.10rem;
    font-weight: 400;
    color: #32a1d7;
    line-height: 1.3;

    /* Altura exata para 3 linhas (3 * 1.3 = 3.9) */
    min-height: 4.1em;
    max-height: 4.1em;
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Garante que o divisor não mexe de lugar */
.work-card-divider {
    width: 40px;
    height: 3px;
    background-color: #4a90e2;
    border-radius: 2px;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.work-card-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    /* Ligeiro ajuste para melhor leitura */
    margin-top: 10px;

    /* A MÁGICA ESTÁ AQUI: */
    flex-grow: 1;
    /* 1. Faz este elemento esticar para ocupar o espaço livre */
    overflow: hidden;
    /* 2. Esconde qualquer texto que transborde */

    /* Opcional, mas recomendado: Truncar texto com reticências (...) após X linhas */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* Limita a descrição a um máximo de 4 linhas */
    text-overflow: ellipsis;
    text-align: justify;
}

.work-card-image {
    width: 100%;
    height: 205px;
    margin-top: 10px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
}

/* Garante que a seção ocupe a largura total sem criar scroll horizontal */
.works-carousel-section {
    width: 100%;
    overflow-x: hidden;
    /* Essencial para evitar a barra de scroll da página */
}

.works-slider.owl-theme .owl-dots {
    text-align: center;
    margin-top: 20px !important;
    margin-bottom: 130px;
}

.works-slider.owl-theme .owl-dots .owl-dot.active span,
.works-slider.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--primary-blue) !important;
}

.owl-carousel .owl-item {
    display: flex;
    margin-bottom: 20px;
}

.owl-carousel .item {
    height: 100%;
}


.page-intro-text {
    text-align: justify;
}

/* Nova classe que cria o layout de fundo em ecrã inteiro */
.hero-fullscreen-bg {
    height: 100vh;
    width: 100%;

    /* IMPORTANTE: Substitua pela URL da sua imagem */
    background-image: url('https://images.unsplash.com/photo-1591543620782-17d7152641a9?q=80&w=2940&auto=format&fit=crop');
    background-size: cover;
    background-position: center;

    /* Posiciona o conteúdo filho (hero-content) em baixo e à esquerda */
    display: flex;
    justify-content: flex-start;
    /* Alinha à esquerda */
    align-items: flex-end;
    /* Alinha em baixo */

    color: white;
}

/* Estilos para o conteúdo de texto (já existentes, mas aqui para contexto) */
.hero-fullscreen-bg .hero-content {
    padding: 50px;
    max-width: 700px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.hero-fullscreen-bg .subtitle {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.hero-fullscreen-bg h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 10px 0;
}

.hero-fullscreen-bg h1 span {
    color: #a7d8f3;
}

.hero-fullscreen-bg p {
    font-size: 1.3rem;
    margin-top: 20px;
}

.hero-fullscreen-bg .highlight-text {
    color: #32a1d7;
    font-weight: bold;
}

@media (max-width: 1434px) {

    /* 1. Mudar o layout do container principal para uma única coluna */
    .hero-section {
        grid-template-columns: 1fr;
        /* Muda de 50% 50% para uma única coluna */
        height: auto;
        /* Remove a altura fixa */
    }

    /* 2. FAZ A MÁGICA: Remove a curva e expande a imagem */
    .hero-image {
        height: 450px;
        /* Altura ajustada para a imagem no topo */
        width: 100%;
        /* Garante que o container ocupa a largura total */
        clip-path: none !important;
        /* REMOVE a forma curva, restaurando o retângulo */
    }

    .hero-image img {
        /* Opcional: Ajusta o foco da imagem para o que for mais importante */
        object-position: center 65%;
    }

    /* 3. Ajustar o conteúdo de texto para o novo layout */
    .hero-content {
        padding: 80px 20px;
        /* Adiciona espaçamento vertical e mantém o horizontal */
        text-align: center;
        /* Centraliza todo o texto */
    }

    /* 4. Centralizar o parágrafo e o botão */
    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content .btn {
        align-self: center;
        /* Centraliza o botão */
    }

    /* 5. Reposicionar os ícones sociais */
    .hero-social-icons {
        position: relative;
        flex-direction: row;
        justify-content: center;
        bottom: auto;
        right: auto;
        margin-top: 40px;
        gap: 20px;
    }
}

/* ================================================== */
/* === ESTILOS DO PRELOADER PERSONALIZADO === */
/* ================================================== */
/* 1. O contentor principal que cobre o ecrã (inalterado) */
#site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#site-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* 2. O contentor do SVG */
.loader-content-svg {
    position: relative;
    width: 100px;
    /* Controle o tamanho do loader aqui */
    height: 120px;
}

.drop-svg {
    width: 100%;
    height: 100%;
}

/* 3. Estilo dos caminhos (paths) do SVG */
.drop-track,
.drop-loader {
    fill: none;
    /* Remove o preenchimento da gota */
    stroke-width: 10;
    /* A espessura da borda */
    stroke-linecap: round;
    /* Pontas arredondadas */
}

/* O "trilho" de fundo da gota, com uma cor clara */
.drop-track {
    stroke: rgba(50, 161, 215, 0.2);
    /* Azul primário com baixa opacidade */
}

/* A parte da borda que será animada */
.drop-loader {
    stroke: #32a1d7;
    /* A sua cor primária */

    /* A mágica da animação: */
    /* Cria um "traço" de 250px seguido de um "espaço" de 1300px */
    /* O valor do espaço deve ser maior que o comprimento total do caminho */
    stroke-dasharray: 250 1300;

    /* Aplica a animação que moverá este traço */
    animation: draw-border 2s linear infinite;
}

/* --- Animação --- */
@keyframes draw-border {
    from {
        /* A animação começa com o traço no início */
        stroke-dashoffset: 0;
    }

    to {
        /* Ao final, o traço foi deslocado pelo comprimento total do caminho,
           criando a ilusão de movimento contínuo. */
        stroke-dashoffset: -1550;
        /* (250 + 1300) */
    }
}

/* (Opcional) Esconde a barra de scroll do body enquanto carrega */
body.loading {
    overflow: hidden;
}

.btn-outline-primary {
    /* Cor do texto e borda no estado normal */
    --bs-btn-color: var(--primary-blue);
    --bs-btn-border-color: var(--primary-blue);

    /* Cor de fundo e borda ao passar o rato (Hover) */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-blue);
    --bs-btn-hover-border-color: var(--primary-blue);

    /* Cor da sombra de foco (Convertido de #32a1d7 para RGB: 50, 161, 215) */
    --bs-btn-focus-shadow-rgb: 50, 161, 215;

    /* Cor de fundo e borda quando clicado (Active) */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-blue);
    --bs-btn-active-border-color: var(--primary-blue);

    /* Cores quando desativado */
    --bs-btn-disabled-color: var(--primary-blue);
    --bs-btn-disabled-border-color: var(--primary-blue);
}

@media (max-width: 767px) {

    .conteudo-rico-texto p {
        font-size: 0.9rem !important;
    }

    .conteudo-principal-texto .texto-central-conteudo {
        font-size: 1.0rem !important;
    }

    .texto-central-conteudo {
        font-size: 0.9rem !important;
    }


}