/* ==========================================================================
                                  PRODEQ THEME
   ========================================================================== */

   

/* ==========================================================================
   A. GERAL DO SITE (A "RÉGUA", BODY E ADMIN)
   Versão Corrigida (Anti-Zoom)
   ========================================================================== */

/* 1. CONFIGURAÇÃO DA RAIZ (HTML) */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    /* Remova qualquer menção a 100vw nestas tags */
}

/* Garante que o slider não "empurra" a página para fora no Firefox */
.projetos-slider-wrapper {
    max-width: calc(100% + 40px) !important; /* Compensa as margens negativas de -20px */
    box-sizing: border-box !important;
}

/* 2. CONFIGURAÇÃO DO CORPO (BODY) */
body {
    background-color: #ffffff !important;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* SEGURANÇA CONTRA ZOOM OUT */
    overflow-x: hidden !important; 
    position: relative;
    
    /* Deixa a largura ser automática (100% do pai) */
    width: auto !important;
    max-width: 100% !important;
    
    /* Espaço para o cabeçalho */
    padding-top: 100px !important; 
}

/* 3. O CONTENTOR GLOBAL (A "RÉGUA") */
.container, 
.container-fluid {
    /* Largura base */
    width: 100% !important;
    
    /* Limite máximo para monitores grandes */
    max-width: 1320px !important;
    
    /* Centrar na página */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Margens laterais de segurança */
    padding-left: 30px !important;
    padding-right: 30px !important;
    
    /* Garante que o padding está INCLUÍDO na largura total */
    box-sizing: border-box !important; 
}

/* 4. IMAGENS RESPONSIVAS */
img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
}

/* 5. AJUSTES MOBILE */
@media (max-width: 991.98px) {
    .container, 
    .container-fluid {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    body {
        background-attachment: scroll !important;
        background-position: top center !important;
    }
}


/* -----------------------------------------------------------
   4. LIMPEZAS TÉCNICAS DO DRUPAL
   Esconde etiquetas automáticas que estragam o design.
   ----------------------------------------------------------- */
.field--name-field-conteudo-visual > .field__label,
.field--name-field-conteudo-visual .field-label,
.visually-hidden-focusable {
    display: none !important;
}


/* -----------------------------------------------------------
   5. BARRA DE ADMINISTRAÇÃO (DRUPAL TOOLBAR)
   Garante que a barra preta de admin não tapa o nosso menu.
   ----------------------------------------------------------- */

/* Quando a barra de admin simples aparece */
body.toolbar-fixed header,
body.toolbar-fixed .site-header { 
    top: auto !important;         /* Desliga o 'top: 0' forçado */
    margin-top: auto !important;  /* Deixa o navegador calcular o espaço */
	display: none; !important;
}

/* Quando a barra de admin dupla (com atalhos) aparece */
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open header,
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .site-header { 
    margin-top: 0px !important;  /* Empurra o header 39px para baixo */
}



/* ==========================================================================
   B. HEADER (CABEÇALHO) - VERSÃO FINAL COM HOVER ISOLADO
   ========================================================================== */

header,
header.navbar,
#navbar,
.site-header {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 9998 !important; 
    margin-top: 0 !important;
    padding-top: 0 !important;    
    padding-bottom: 0 !important; 
    background-color: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.02);
}

.navbar .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-right: 0px !important;
    padding-left:  0px !important;
}

/* --- VERSÃO DESKTOP --- */
@media (min-width: 992px) {
    .navbar-toggler { display: none !important; }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    ul.navbar-nav {
        flex-direction: row !important;
        gap: 10px; 
    }

    .nav-link {
        color: #222 !important;
        font-weight: 600;
        font-size: 1rem;
        padding: 8px 8px !important;
    }
    
    /* [CORREÇÃO] HOVER APENAS NO MENU DE PÁGINAS */
    /* Usamos .navbar-nav para garantir que não afeta o seletor de idiomas */
    .navbar-nav .nav-link:hover {
        color: #0175AC !important;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
}

/* --- VERSÃO MOBILE --- */
@media (max-width: 991.98px) {
    .navbar-toggler {
        display: block !important;
        border: 2px solid #0175AC !important;
        border-radius: 5px !important;
        padding: 6px 6px !important;
        margin-right: 15px !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3e%3Cpath stroke='%230175AC' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3e%3C/svg%3e") !important;
        width: 1.6em;
        height: 1.6em;
    }

    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100% !important;
        left: 0px !important;
        width: 100vw !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        padding: 30px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        border-top: 1px solid rgba(0,0,0,0.05);
        z-index: 1020 !important;
    }
    
    /* Estilo links mobile - apenas para o menu de páginas */
    .navbar-nav .nav-link {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 1rem !important;
        color: #333 !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
}

/* ==========================================================================
   C. SELETOR DE IDIOMA - BOTÃO ÚNICO (IMAGENS LOCAIS)
   ========================================================================== */

/* 1. Esconde o idioma ativo */
#block-prodeq-theme-seletordeidioma .is-active {
    display: none !important;
}

/* 2. Contentor do Seletor */
#block-prodeq-theme-seletordeidioma {
    display: flex !important;
    align-items: center !important;
    padding-right: 15px;
}

#block-prodeq-theme-seletordeidioma a.language-link {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    transition: all 0.3s ease;
    padding: 4px 8px !important;
    font-size: 0 !important; /* Esconde o texto "Português" / "English" */
}

/* 3. Ícones de Bandeira via Servidor */
#block-prodeq-theme-seletordeidioma a.language-link::before {
    content: "";
    display: inline-block;
    width: 24px;   
    height: 18px;  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Moldura subtil para a bandeira não "sumir" no fundo branco */
}

/* Bandeira de Portugal (Aparece quando o site está em EN) */
#block-prodeq-theme-seletordeidioma .pt-pt a::before {
    background-image: url('/themes/custom/prodeq/images/pt.svg') !important;
}

/* Bandeira do Reino Unido (Aparece quando o site está em PT) */
#block-prodeq-theme-seletordeidioma .en a::before {
    background-image: url('/themes/custom/prodeq/images/en.png') !important;
}

/* 4. Hover */
#block-prodeq-theme-seletordeidioma a.language-link:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* ==========================================================================
   AJUSTE MOBILE (Alinhado com o Menu)
   ========================================================================== */
@media (max-width: 991px) {
    #block-prodeq-theme-seletordeidioma {
        /* Remove alinhamentos de topo/header */
        position: static !important; 
        padding: 15px 20px !important; /* Alinha com o padding lateral do teu menu */
        justify-content: flex-start !important; /* Alinha à esquerda como os textos */
        border-top: 1px solid #eee; /* Opcional: separa visualmente do último item */
    }

    #block-prodeq-theme-seletordeidioma a.language-link {
        padding: 10px 0 !important; /* Remove o fundo de botão se quiseres que pareça texto */
        background-color: transparent !important;
    }
    
    /* Se quiseres que apareça "PT" ou "EN" por extenso no mobile */
    #block-prodeq-theme-seletordeidioma .pt-pt a::after { 
        content: ""; 
        font-size: 1rem; 
        margin: 10 10px;
        color: #333;
    }
    #block-prodeq-theme-seletordeidioma .en a::after { 
        content: ""; 
        font-size: 1rem; 
        margin: 10 10px;
        color: #333;
    }
}

/* ==========================================================================
   AJUSTE MOBILE (Alinhado com o Menu)
   ========================================================================== */
@media (max-width: 991.98px) {
    #block-prodeq-theme-seletordeidioma {
        /* Remove alinhamentos de topo/header */
        position: static !important; 
        padding: 0px 0px !important; /* Alinha com o padding lateral do teu menu */
        justify-content: flex-start !important; /* Alinha à esquerda como os textos */
        border-top: 1px solid #eee; /* Opcional: separa visualmente do último item */
    }

    #block-prodeq-theme-seletordeidioma a.language-link {
        padding: 0px 0 !important; /* Remove o fundo de botão se quiseres que pareça texto */
        background-color: transparent !important;
    }
    
    /* Se quiseres que apareça "PT" ou "EN" por extenso no mobile */
    #block-prodeq-theme-seletordeidioma .pt-pt a::after { 
        content: ""; 
        font-size: 1rem; 
        margin: 10 10px;
        color: #333;
    }
    #block-prodeq-theme-seletordeidioma .en a::after { 
        content: ""; 
        font-size: 1rem; 
        margin: 10 10px;
        color: #333;
    }
}

/* ==========================================================================
   C. HERO BANNERS + Bloco Intro genérico (HOME & INTERNAS)
   Modo Boxed | Controlo Manual de Altura | Títulos Unificados
   ========================================================================== */

/* -----------------------------------------------------------
   1. HERO HOME (Configuração Base - O Esqueleto)
   Define a caixa, o fundo e o posicionamento geral.
   ----------------------------------------------------------- */
.hero-wrapper-final {
    /* Define que este elemento é a referência para o que estiver lá dentro (ex: imagem absoluta) */
    position: relative;
    
    /* Largura base: tenta ocupar tudo... */
    width: 100%;
    
    /* ...mas pára de crescer quando chegar aos 1320px (o tamanho da régua) */
    max-width: 1320px !important;
    
    /* MARGENS:
       -120px (Topo): Puxa o banner para cima para ficar atrás do cabeçalho de vidro.
       auto (Direita/Esquerda): Centra a caixa horizontalmente no ecrã.
       0 (Baixo): Não empurra nada para baixo. */
    margin: -10px auto 0 auto !important;
    
    /* Cria espaço vazio no topo para o texto não ficar tapado pelo menu (compensa os -120px) */
    padding-top: 50px;
    
    /* FUNDO:
       linear-gradient: Uma película branca quase opaca (0.9) por cima de tudo.
       var(--hero-bg): A imagem original (cinzenta) definida no Drupal. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--hero-bg);
    
    /* Garante que a imagem de fundo não se repete se o ecrã for gigante */
    background-repeat: no-repeat;
    
    /* ARREDONDAMENTO: Apenas nos cantos inferiores (30px) */
    border-radius: 0 0 30px 30px !important;
    
    /* Corta tudo o que sair fora das bordas arredondadas */
    overflow: hidden;
}

/* LIMPEZAS TÉCNICAS:
   Remove margens e paddings extra que o Bootstrap adiciona automaticamente
   e que estragam o nosso alinhamento à régua. */
.hero-wrapper-final .container,
.hero-wrapper-final .row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   C1. ECRÃS GIGANTES (> 1400px)
   Monitores de secretária grandes
   ========================================================================== */
@media (min-width: 1400px) {
    .hero-wrapper-final {
        /* [EDITAR ALTURA AQUI]
           Define a altura total da caixa cinzenta.
           - Opção Pixels: min-height: 600px; (Tamanho fixo)
           - Opção Ecrã:   min-height: 65vh;  (65% da altura da janela do utilizador) */
        min-height: 485px !important;  
        
        /* PARALLAX: A imagem de fundo fica parada enquanto fazes scroll */
        background-attachment: fixed;
        
        /* A imagem estica para cobrir todo o espaço */
        background-size: cover;
        
        /* A imagem de fundo centra-se no meio da caixa */
        background-position: center center;
        
        /* FLEXBOX: Permite alinhar o Texto e a Imagem Azul lado a lado */
        display: flex;
        
        /* Alinha o conteúdo verticalmente ao centro da caixa */
        align-items: center;
    }

    /* --- O BLOCO DE TEXTO (60%) --- */
    .hero-text-content {
        /* Ocupa 60% da largura disponível */
        flex: 0 0 60% !important;     
        max-width: 60% !important;
        
        /* Margens zeradas porque já estamos alinhados com o container pai */
        padding-left: 5px !important; 
        padding-right: 0px !important;
        
        /* Texto alinhado à esquerda */
        text-align: left !important;
    }

    /* --- A IMAGEM AZUL LATERAL (40%) --- */
    .hero-wrapper-final::after {
        /* Cria um elemento "fantasma" vazio para colocar a imagem */
        content: ''; 
        
        /* Posicionamento livre dentro da caixa pai */
        position: absolute; 
        top: 0; 
        right: 0;
        
        /* Largura: O resto que sobra do texto (40%) */
        width: 40%; 
        
        /* Altura: Ocupa toda a altura da caixa */
        height: 100%; 
        
        /* Busca a mesma imagem do banner */
        background-image: var(--hero-bg); 
        background-size: cover; 
        
        /* [EDITAR POSIÇÃO DA IMAGEM AZUL]
           1º Valor (60%): Posição Horizontal (Cola à direita).
           2º Valor (0%):  Posição Vertical. 
              0% = Topo (Vê-se o céu). 
              100% = Fundo (Vê-se o chão). */
        background-position: 60% 0% !important; 
        
        background-repeat: no-repeat;
    }
}

/* ==========================================================================
   C2. PORTÁTEIS E TABLETS NA HORIZONTAL (Entre 992px e 1400px)
   A maioria dos laptops (13" a 15")
   ========================================================================== */
@media (min-width: 600px) and (max-width: 1399.98px) {
    .hero-wrapper-final {
        /* [EDITAR ALTURA PORTÁTIL]
           Geralmente queremos um banner mais baixo aqui. */
        min-height: 485px !important;
        
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        display: flex;
        align-items: center;
    }

    /* Ajuste Texto (50%) - Mais apertado no portátil */
    .hero-text-content {
        flex: 0 0 60% !important;     
        max-width: 60% !important;
        
        /* Damos um pouco de margem lateral interna */
        padding-left: 5px !important; 
        padding-right: 0px !important;
        text-align: left !important;
    }

    /* Ajuste Imagem Azul (50%) - Mais larga no portátil */
    .hero-wrapper-final::after {
        content: ''; position: absolute; top: 0; right: 0;
        width: 40%; height: 100%; 
        background-image: var(--hero-bg); 
        background-size: cover; 
        
        /* [EDITAR POSIÇÃO DA IMAGEM AZUL]
           1º Valor (60%): Posição Horizontal (Cola à direita).
           2º Valor (0%):  Posição Vertical. 
              0% = Topo (Vê-se o céu). 
              100% = Fundo (Vê-se o chão). */
        background-position: 60% 0% !important;
        background-repeat: no-repeat;
    }
    
    /* Garante que os títulos colam à margem esquerda */
    .hero-text-content h1, .hero-text-content h2, .hero-text-content .lead {
        margin-left: 0 !important; padding-left: 0 !important;
    }
}

/* ==========================================================================
   C3. TABLET E MOBILE (< 600px)
   Telemóveis e iPads na vertical
   ========================================================================== */
@media (max-width: 599.98px) {
    
    .hero-wrapper-final {
        /* 1. MANTER O FUNDO: Reafirmamos o fundo com a película branca */
        background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--hero-bg) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        
        /* 2. ESTRUTURA: Ocupa a largura total e ajusta altura ao texto */
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 60px 0 !important; /* Dá espaço em cima e em baixo do texto */
        border-radius: 0 0 20px 20px !important;
        display: block !important;
    }

    /* 3. ESCONDER APENAS A SOBREPOSIÇÃO (A imagem azul extra) */
    .hero-wrapper-final::after,
    .hero-mobile-img {
        display: none !important;
        content: none !important; /* Garante que o pseudo-elemento morre aqui */
    }

    /* 4. TEXTO: Maximizar a leitura e a largura */
    .hero-text-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 25px !important; /* Respiro lateral */
        text-align: left !important;
        box-sizing: border-box;
    }

    /* Títulos Mobile */
    .hero-text-content h1, 
    .hero-text-content .hero-title-unified {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 25px !important;
        color: #333 !important; /* Cor escura para contrastar com o fundo claro */
    }
}

/* ==========================================================================
   ESTILOS DOS TÍTULOS (PRODEQ + Associação) - VERSÃO OTIMIZADA
   ========================================================================== */

/* 1. Estilo Visual Comum */
.hero-text-content .hero-title-unified {
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1.2 !important;
    font-size: 2.8rem; 
    
    /* SEGURANÇA NO DESKTOP: 
       Evitamos o hífen automático em títulos grandes para manter a estética. 
       A palavra só quebra se for maior que o ecrã. */
    hyphens: manual !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 2. Remover espaços para "colar" as duas partes */
.hero-text-content .hero-title-unified.top-part {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.hero-text-content .hero-title-unified.bottom-part {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
    display: block; 
}

/* 3. Ajuste para Mobile e Idiomas (Ajuste Crítico) */
@media (max-width: 991.98px) {
    .hero-text-content .hero-title-unified {
        font-size: 2rem !important;
        
        /* NO MOBILE ATIVAMOS A HIFENIZAÇÃO:
           Como o ecrã é estreito, aqui o hífen é necessário para 
           evitar que palavras longas em Inglês ou Português "cortem". */
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important;
    }
}

/* ==========================================================================
   BANNER SIMPLES (Páginas Internas / Aviso Legal)
   ========================================================================== */
.banner-hero-simples-wrap {
    width: 100%; 
    max-width: 1320px !important;
    margin: -120px auto 0 auto !important;
    min-height: 400px; 
    padding-top: 120px;
    
    background-size: cover; 
    background-position: center;
    background-attachment: fixed;
    
    /* Centra tudo ao meio */
    display: flex; align-items: center; justify-content: center;
    
    border-radius: 0 0 30px 30px !important; 
    overflow: hidden;
}

.banner-hero-simples-titulo {
    color: #000; 
    /* Tamanho responsivo: mínimo 2.2rem, ideal 8vw, máximo 3.5rem */
    font-size: 3.5rem; 
    font-weight: 800; text-transform: uppercase; 
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    text-align: center; padding: 0 20px;
}

/* ==========================================================================
   P-TEXTO CORRIDO (JUSTIFICAÇÃO E HIFENIZAÇÃO)
   ========================================================================== */

.paragraph--type--texto-corrido {
    /* 1. Justificação do texto */
    text-align: justify !important;
    text-justify: inter-word; /* Melhora o espaçamento entre palavras em browsers modernos */

    /* 2. Hifenização Automática (Compatibilidade total) */
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;

    /* 3. Prevenção de quebras feias */
    word-break: break-word; 
    
    /* 4. Otimização de leitura (opcional, mas recomendado) */
    line-height: 1.6;
    margin-bottom: 1.5rem;
}



@media (max-width: 991.98px) {
    .banner-hero-simples-wrap { 
        background-attachment: scroll !important; 
        min-height: 250px; 
        width: 95% !important;
    }
	
	.banner-hero-simples-titulo {
    color: #000; 
    /* Tamanho responsivo: mínimo 2.2rem, ideal 8vw, máximo 3.5rem */
    font-size: 2.5rem;
	
	}
	
}

/* ==========================================================================
   INTRODUÇÃO GENÉRICA (LAYOUT DIVIDIDO / SPLIT)
   (1/3 Imagem + 2/3 Texto - Serve para Missão, Serviços, Sobre, etc.)
   ========================================================================== */

/* O WRAPPER EXTERNO DA SECÇÃO
   --------------------------------------------------------------------------
   Define o palco principal. Fundo branco e sombras para destaque. */
.prodeq-split-section {
    position: relative;
    z-index: 10;                   /* Garante que fica acima do fundo base */
    background-color: #ffffff !important;
    width: 100% !important;
    
    /* PADDING: 80px em cima e baixo para o conteúdo respirar */
    padding: 80px 0 !important; 
    
    /* SOMBRAS DE PROFUNDIDADE:
       Dá o efeito de "cartão gigante" levantado sobre a página. */
    box-shadow: 
        0 15px 30px rgba(0,0,0,0.05),
        0 20px 30px -20px rgba(0,0,0,0.1) !important;
    
    overflow-x: hidden; /* Segurança contra scroll horizontal */
}

/* CONTENTOR CENTRAL (LARGURA FIXA)
   --------------------------------------------------------------------------
   Mantém o conteúdo alinhado com o resto do site (ex: 1320px). */
.prodeq-split-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
}

/* A CAIXA FLEX (O Pai das Colunas)
   --------------------------------------------------------------------------
   Usa Flexbox para colocar a Imagem e o Texto lado a lado. */
.prodeq-split-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha no telemóvel */
    background-color: #ffffff;
}

/* LADO ESQUERDO: VISUAL (IMAGEM - 1/3)
   -------------------------------------------------------------------------- */
.prodeq-split-visual {
    /* MATEMÁTICA: Ocupa exatamente 33.333% da largura */
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    position: relative;
    min-height: 400px; /* Altura mínima para garantir impacto visual */
    
    /* A imagem de fundo é definida no HTML/Twig, aqui controlamos o comportamento */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* ESTILO: O detalhe curvo apenas no canto inferior direito */
    border-bottom-right-radius: 60px; 
    z-index: 1;
}

/* Máscara Opcional (Overlay) */
.prodeq-split-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-bottom-right-radius: 60px; /* Segue a curva da imagem */
    pointer-events: none;
}

/* LOGÓTIPO CENTRADO NA IMAGEM */
.prodeq-split-logo {
    position: absolute;
    /* CENTRAMENTO ABSOLUTO PERFEITO */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 140px; /* Tamanho do logo */
}

.prodeq-split-logo img {
    width: 100% !important;
    height: auto !important;
}

/* LADO DIREITO: TEXTO (2/3)
   -------------------------------------------------------------------------- */
.prodeq-split-text {
    /* MATEMÁTICA: Ocupa o resto (66.666%) */
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
    
    /* PADDING: 60px à esquerda para afastar o texto da imagem */
    padding: 20px 20px 20px 60px; 
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra o texto verticalmente */
}

/* TIPOGRAFIA DA SECÇÃO */
.section-title-prodeq {
    font-size: 2.8rem !important;
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
}

/* Estilo para o corpo do texto */
.text-body p {
    font-size: 1.0rem !important;
    line-height: 1.6;
    color: #444;
    text-align: justify;
}

/* MOBILE (RESPONSIVIDADE)
   --------------------------------------------------------------------------
   Ajustes para quando o ecrã é menor que 992px (Tablets/Telemóveis). */
@media (max-width: 991.98px) {
    
    .prodeq-split-container {
        padding: 0 20px; /* Adiciona margens laterais de segurança */
    }

    /* TRANSFORMAÇÃO: As colunas deixam de estar lado a lado */
    .prodeq-split-visual, 
    .prodeq-split-text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* IMAGEM NO TOPO */
    .prodeq-split-visual {
        display: block !important;
        height: 220px !important;     /* Altura fixa menor */
        min-height: 220px !important;
        border-radius: 15px 15px 0 0; /* Arredonda apenas em cima */
        background-image: inherit; 
    }
    
    .prodeq-split-overlay {
        border-bottom-right-radius: 40px; /* Ajusta a curva para escala mobile */
    }

    /* TEXTO EM BAIXO */
    .prodeq-split-text {
        /* Remove o padding lateral gigante do desktop */
        padding: 30px 0 !important; 
    }
    
    /* TÍTULO MAIS PEQUENO */
    .section-title-prodeq {
        font-size: 1.5rem !important;
    }
}





/* ==========================================================================
   D. SECÇÕES DE CONTEÚDO (SERVIÇOS, PROJETOS, CONTACTOS)
   Restauro do Design Antigo com Segurança de Largura
   ========================================================================== */

/* ==========================================================================
   REGRA GERAL PARA BLOCOS BRANCOS (ESTRUTURA E TRANSIÇÃO)
   Esta regra unifica o comportamento de todas as grandes secções do site.
   ========================================================================== */

.paragraph--type--homepage-seccao-servicos,
.projetos-section,
.contactos-section,
.prodeq-associados-section,
.prodeq-services-intro-section,
footer {
    /* POSICIONAMENTO E CAMADAS */
    position: relative;           /* Permite que sombras e elementos internos se posicionem corretamente */
    z-index: 10;                  /* Garante que a secção fica acima do fundo, mas abaixo do menu (z-index 9999) */
    background-color: #ffffff !important; /* Cor de fundo branca pura para destacar o conteúdo */
    width: 100% !important;       /* Garante que a secção ocupa toda a largura do ecrã */
    
    /* RESPIRO VISUAL */
    /* 80px de espaço vazio no topo e no fundo para o conteúdo não parecer "apertado" */
    padding: 80px 0 !important;   

    /* ==========================================================================
       A MAGIA DAS SOMBRAS (BOX-SHADOW)
       Aqui criamos o efeito de "espelhamento" e profundidade.
       ========================================================================== */
    box-shadow: 
        /* 1. SOMBRA SUPERIOR EXTERNA: Projeta um brilho suave para cima da secção anterior */
        0 -15px 30px rgba(0,0,0,0.05), 

        /* 2. SOMBRA INFERIOR EXTERNA: Projeta um brilho suave para baixo, sobre a secção seguinte */
        0 15px 30px rgba(0,0,0,0.05),

        /* 3. SOMBRA INTERNA (INSET) NO TOPO: 
           Cria um efeito de "degrau" ou profundidade dentro da própria caixa no início. 
           O valor '-20px' (spread) ajuda a manter a sombra focada apenas na borda superior. */
        inset 0 20px 30px -20px rgba(0,0,0,0.1), 

        /* 4. SOMBRA DE TRANSIÇÃO FINAL: 
           Reforça a base da caixa com um degradé que ajuda a "fundir" o final de um bloco no outro. */
        0 20px 30px -20px rgba(0,0,0,0.1) !important;
    
    /* SEGURANÇA E PERFORMANCE */
    /* Impede que elementos com sombras muito largas ou animações criem uma barra de scroll 
       horizontal indesejada no telemóvel (o famoso problema do Zoom Out). */
    overflow-x: hidden; 
}



/* ==========================================================================
   D1. HOMEPAGE: SECÇÃO DE SERVIÇOS
   (Versão Final Educativa & Ajustada)
   ========================================================================== */

/* -----------------------------------------------------------
   1. TÍTULO GERAL ("Como podemos ajudá-lo")
   ----------------------------------------------------------- */
.field--name-field-homepage-seccao-titulo {
    display: block !important;       /* Garante que ocupa a linha toda */
    width: 100% !important;
    text-align: center !important;   /* Centra o texto no ecrã */
	
    
    /* Tipografia */
    font-size: 2.8rem !important;    /* Tamanho grande */
    font-weight: 800 !important;     /* Negrito extra forte */
    color: #000000 !important;       /* Cor preta */
    line-height: 1.1 !important;     /* Altura da linha (apertada) */
    
    /* Espaçamento */
    margin-bottom: 60px !important;  /* Empurra os ícones para baixo */
    
    /* Segurança (Régua) */
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 991.98px) {
	.field--name-field-homepage-seccao-titulo {
		font-size: 5rem !important;
	}
}



/* -----------------------------------------------------------
   2. A GRELHA (O "Pai" que segura todos os serviços)
   ----------------------------------------------------------- */
.field--name-field-homepage-seccao-itens,
.field--name-field-homepage-seccao-itens > .field__items {
    display: flex !important;        /* Ativa o modo flexível */
    flex-wrap: wrap !important;      /* Permite que os itens saltem de linha */
    justify-content: center !important; /* Centra tudo horizontalmente */
    
    /* Limites */
    max-width: 1320px !important;    /* Nunca passa da largura do site */
    width: 100% !important;
    margin: 0 auto !important;       /* Centra a grelha na página */
    
    /* [ESPAÇO ENTRE CARTÕES] */
    gap: 50px !important;            /* Distância horizontal entre serviços */
}

/* -----------------------------------------------------------
   3. O CARTÃO INDIVIDUAL (Cada Serviço)
   ----------------------------------------------------------- */
.paragraph--type--homepage-servico-item,
.field--name-field-homepage-seccao-itens .field__item {
    display: flex !important;
    flex-direction: column !important; /* Empilha: Ícone em cima, Texto em baixo */
    align-items: center !important;    /* Alinha tudo ao centro do cartão */
    text-align: center !important;
    
    /* Tamanho no PC (30% = Cabem 3 por linha) */
    flex: 0 1 30% !important; 
    min-width: 280px !important;       /* Tamanho mínimo para não ficar esmagado */
    
    height: auto !important;           /* Altura ajustável ao conteúdo */
}

/* -----------------------------------------------------------
   4. ELEMENTOS INTERNOS (Ícone, Título, Texto)
   ----------------------------------------------------------- */

/* --- A. ÍCONE (A Bola Azul) --- */
.field--name-field-homepage-servico-icone {
    display: flex !important;
    justify-content: center !important;
    width: 75px !important;          /* Largura da imagem */
    height: 75px !important;         /* Altura da imagem */
    
    /* [CONTROLAR DISTÂNCIA DO ÍCONE AQUI] */
    /* Aumenta este valor para afastar o ícone do título */
    margin-bottom: 5px !important;  
}

.field--name-field-homepage-servico-icone img {
    display: block !important;       /* Remove espaços fantasma */
    width: 75px !important;          /* Largura da imagem */
    height: 75px !important;         /* Altura da imagem */
    
    border-radius: 50% !important;   /* Faz a bola redonda */
    background: #f8f9fa !important;  /* Fundo cinza clarinho */
    border: 2px solid #0175AC !important; /* Borda Azul Prodeq */
    padding: 7px !important;        /* Espaço interno da bola */
    object-fit: contain !important;  /* Garante que o ícone não distorce */
}

/* --- B. TÍTULO DO SERVIÇO (Ex: Consultoria) --- */
.field--name-field-homepage-servico-titulo {
    font-size: 1.3rem !important; 
    font-weight: 700 !important;     /* Negrito */
    color: #000 !important;
    line-height: 1.2 !important;
    
    /* Distância entre o Título e a Descrição */
    margin-bottom: 6px !important;  
    width: 100% !important;
}

/* --- C. DESCRIÇÃO (O texto pequeno) --- */
.field--name-field-homepage-servico-descricao {
    font-size: 1rem !important;
    font-weight: 600 !important;     /* Semi-negrito para ler bem */
    line-height: 1.4 !important;
    color: #444 !important;          /* Cinza escuro */
    max-width: 350px;                /* Impede que o texto fique muito largo */
    margin: 0 auto !important;
}

/* Remove margens automáticas para termos controlo total */
.field--name-field-homepage-servico-descricao p {
    margin: 0 !important; 
    padding: 0 !important;
}


/* -----------------------------------------------------------
   5. BOTÃO "SAIBA MAIS" (Estilo Antigo Recuperado)
   ----------------------------------------------------------- */
.field--name-field-homepage-seccao-botao {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 30px !important;     /* Afasta o botão dos serviços */
}

.field--name-field-homepage-seccao-botao a {
	/* --- O SEGREDO PARA CENTRAR O TEXTO INTERNO --- */
    text-align: center !important;      /* Centra as linhas de texto entre si */
    line-height: 1.4 !important;        /* Dá espaço equilibrado entre linhas se quebrar */
    display: inline-block !important;   /* Garante que o alinhamento funciona bem */
	
    /* Estado Normal */
    background-color: #0175AC !important; /* Azul Prodeq */
    color: #ffffff !important;            /* Texto Branco */
    padding: 15px 40px !important;        /* Tamanho do botão */
    border-radius: 50px !important;       /* Redondo nas pontas */
    text-decoration: none !important;     /* Sem sublinhado */
    font-weight: 700 !important;          /* Negrito */
	text-transform: uppercase;
	font-size: 0.9rem;
    
    /* Suavidade da animação */
    transition: all 0.3s ease-in-out !important; 
    box-shadow: 0 4px 12px rgba(1, 117, 172, 0.2); /* Sombra suave normal */
}

/* -----------------------------------------------------------
   5. BOTÃO "ARQUIVO" (Estilo Antigo Recuperado)
   ----------------------------------------------------------- */


/* Container para centrar o botão na página */
.prodeq-btn-container {
  display: block;
  width: 100%;
  text-align: center;
  margin: 40px 0;
  clear: both;
}

/* Estilo do Botão (Pílula Azul) */
.prodeq-pill-link {
  display: inline-block;
  background-color: #0175AC; /* Azul Prodeq */
  color: #FFFFFF !important;
  font-family: sans-serif; /* Ou a fonte que usares */
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none !important;
  padding: 16px 40px;
  border-radius: 50px; /* Formato de Pílula */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(1, 117, 172, 0.2);
  
}

/* Efeito Hover - Apenas para Desktop */
@media (min-width: 992px) {
  .prodeq-pill-link:hover, 
  .field--name-field-homepage-seccao-botao a:hover, 
  .projetos-section .field--name-field-homepage-seccao-botao a:hover {
    background-color: #003366; /* Azul mais escuro ao passar o rato */
    transform: translateY(-4px); /* Sobe ligeiramente */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
}

/* Ajuste para mobile */
@media (max-width: 768px) {
  .prodeq-pill-link {
    padding: 14px 30px;
    font-size: 1rem;
    width: 80%; /* Ocupa quase a largura toda no telemóvel */
  }
}



/* ==========================================================================
   D2. HOMEPAGE: SECÇÃO DE PROJETOS
   Objetivo: Criar um slider de projetos "encaixotado" com borda azul,
   alinhado perfeitamente com a régua (container) do site.
   ========================================================================== */

/* 1. TÍTULO DA SECÇÃO */
.projetos-titulo {
    display: block !important;       /* Garante que o título se comporta como um bloco inteiro */
    width: 100% !important;          /* Ocupa toda a largura disponível */
    text-align: center !important;   /* Centra o texto horizontalmente */
    
    /* Tipografia H1 para manter consistência com a Secção de Serviços */
    font-size: 2.8rem !important;    /* Tamanho extra grande para impacto visual */
    font-weight: 800 !important;     /* Peso máximo da fonte (Extra Bold) */
    color: #000000 !important;       /* Cor preta sólida */
    line-height: 1.1 !important;     /* Altura de linha reduzida para títulos grandes não espalharem */
    
    margin-bottom: 60px !important;  /* Espaço generoso antes de começar o slider */
}


/* 2. CAIXA DO SLIDER (A BLUE BOX / WRAPPER) */
.projetos-slider-wrapper {
    background-color: #f8f9fa !important;  /* Fundo cinza muito claro para destacar os cartões brancos */
    
    /* TRUQUE DE ALINHAMENTO: Margens negativas */
    /* O container do Bootstrap tem um padding (espaço interno) de ~15-20px. 
       Usamos margens negativas para a borda azul "anular" esse espaço e colar 
       exatamente na linha guia (régua) do site. */
    width: auto !important; 
    margin-left: -20px !important;   /* Puxa a borda para a esquerda */
    margin-right: -20px !important;  /* Puxa a borda para a direita */
    margin-bottom: 50px !important;  /* Espaço após a caixa azul */
    
    padding: 60px 50px !important;   /* Espaço interno para que os cartões e setas não batam na borda azul */
    border-radius: 30px !important;  /* Cantos arredondados modernos */
    border: 4px solid #0175AC !important; /* A borda azul institucional da PRODEQ */
    position: relative !important;   /* Necessário para posicionar as setas de navegação lá dentro */
    box-sizing: border-box !important; /* Garante que o padding e a borda não aumentam a largura total da caixa */
}
/* 21. COR DA BOLINHA ATIVA (Azul na imagem) */
.projetos-slider-wrapper .swiper-pagination-bullet-active {
    background: #0175AC !important; /* Substitui pelo Azul Prodeq ou outra cor */
}

/* 3. O CARTÃO DO PROJETO (SLIDE INDIVIDUAL) */
.projeto-card { 
    background: #fff !important;           /* Cartão sempre branco para destacar do fundo cinza */
    border-radius: 12px !important;        /* Cantos ligeiramente arredondados */
    min-height: 300px !important;          /* Garante que todos os cartões têm a mesma altura mínima */
    display: flex !important;              /* Ativa flexbox para organizar imagem e texto */
    flex-direction: column !important;     /* Empilha o conteúdo verticalmente */
    text-decoration: none !important;      /* Remove o sublinhado de link do título */
    overflow: hidden !important;           /* Corta qualquer conteúdo que saia dos limites do cartão */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; /* Sombra muito leve para dar profundidade */
    transition: transform 0.3s ease !important; /* Animação suave para o efeito de hover */
}

@media (min-width: 992px) {
	/* Efeito ao passar o rato no cartão */
	.projeto-card:hover {
    transform: translateY(-5px) !important; /* O cartão "levanta" 5px quando o utilizador interage */
	}

}
/* Contentor da Imagem (Logótipo) */
.projeto-img-wrapper {
    height: 180px !important;        /* Altura fixa para todos os logótipos ficarem alinhados */
    width: 100% !important;
    display: flex !important;
    align-items: center !important;  /* Centra a imagem verticalmente */
    justify-content: center !important; /* Centra a imagem horizontalmente */
    padding: 20px !important;        /* Margem interna para o logótipo não tocar nas bordas */
    border-bottom: 1px solid #eee !important; /* Linha subtil a separar a imagem do título */
    background-color: #fff !important;
}

.projeto-img-wrapper img {
    max-height: 100% !important;     /* Impede que logótipos verticais deformem o cartão */
    max-width: 100% !important;      /* Impede que logótipos largos saiam do cartão */
    object-fit: contain !important;  /* Mantém a proporção original da imagem sem a cortar */
}

/* Texto/Título dentro do Cartão */
.projeto-titulo-card { 
    color: #0175AC !important;       /* Cor azul institucional */
    font-weight: 700 !important;     /* Negrito */
    font-size: 1rem !important;
    margin: 15px !important; 
    text-align: center !important;
    flex-grow: 1;                    /* Faz este bloco ocupar o espaço restante para alinhar cartões */
    display: flex;
    align-items: center;             /* Centra o texto verticalmente se tiver 1 ou 2 linhas */
    justify-content: center;
}

/* 4. SETAS DE NAVEGAÇÃO (SWIPER BUTTONS) */
.swiper-button-next, 
.swiper-button-prev {
    width: 50px !important;
    height: 50px !important;
    background-color: #ffffff !important;
    border: 3px solid #0175AC !important;
    color: #0175AC !important;
    border-radius: 50% !important;
    z-index: 50 !important;
    transition: all 0.3s ease !important;
    
    /* POSICIONAMENTO SEM TRANSFORM: 
       Colocamos a 50% e subimos metade da altura da seta (25px) via margem */
    top: 50% !important;
    margin-top: -25px !important; 
}

/* Posicionamento lateral das setas */
.swiper-button-prev { left: 10px !important; }
.swiper-button-next { right: 10px !important; }

/* Estilo do ícone da flecha */
.swiper-button-next:after, 
.swiper-button-prev:after {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
}

@media (min-width: 992px) {

	/* Efeito Hover nas Setas (Desktop & Mobile) */
	.swiper-button-next:hover, 
	.swiper-button-prev:hover {
		background-color: #0175AC !important;
		color: #ffffff !important;
		border-color: #0175AC !important;
		/* MANUTENÇÃO DE ALTURA: Impede que a seta desça ou suba no hover */
		box-shadow: 0 0 15px rgba(1, 117, 172, 0.4) !important;
	}
}

/* 5. BOTÃO "VER MAIS" NO FINAL DA SECÇÃO */
.projetos-section .field--name-field-homepage-seccao-botao {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Centra o botão na página */
    margin-top: 20px !important;        /* Espaço após a caixa azul */
}





/* -----------------------------------------------------------
   6. AJUSTES PARA DISPOSITIVOS MÓVEIS (MOBILE)
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {

    .projetos-slider-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 15px !important;
        border-width: 3px !important;
    }
    
    /* BLOQUEIO DO SALTO: Aplicamos a todos os estados de toque no mobile */
	.swiper-button-next, 
    .swiper-button-prev,
    .swiper-button-next:active,
    .swiper-button-prev:active,
    .swiper-button-next:focus { 
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        
        /* NO MOBILE: A seta tem 40px, logo subimos 20px para centrar */
        top: 50% !important;
        margin-top: -20px !important; 
        
        /* Remove o transform para evitar conflitos de renderização no toque */
        transform: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Ajuste de proximidade das bordas no mobile */
    .swiper-button-prev { left: 5px !important; }
    .swiper-button-next { right: 5px !important; }

    .swiper-button-next:after, 
    .swiper-button-prev:after {
        font-size: 1rem !important;
    }
}




/* ==========================================================================
   D3. HOMEPAGE: SECÇÃO DE CONTACTOS (LAYOUT WIDE)
   ========================================================================== */

/* 1. WRAPPER DOS CONTACTOS */
.contactos-wrapper { 
    display: flex !important; 
    flex-wrap: wrap !important; /* Permite cair linha no mobile */
    
    /* O SEGREDO DO ALINHAMENTO: */
    justify-content: space-between !important; /* Empurra os elementos para os extremos */
    gap: 20px !important; 
    
    max-width: 1320px;
    margin: 0 auto;
    margin-bottom: 60px !important;
    
    /* Removemos padding para colar mesmo à régua de 1320px */
    padding-left:  0px !important;
    padding-right: 0px !important;
}

/* 2. COLUNA DE INFORMAÇÃO (Texto - Mais estreita e à Esquerda) */
.contactos-info { 
    /* Define largura fixa: 30% do espaço */
    flex: 0 0 30% !important; 
    min-width: 300px !important; 
    
    text-align: left !important; 
    padding-left: 0 !important; /* Garante que começa na ponta esquerda */
}

/* 3. COLUNA DO MAPA (Mapa - Mais largo e à Direita) */
.contactos-mapa { 
    /* Define largura fixa: 65% do espaço (mapa grande) */
    flex: 0 0 65% !important; 
    min-width: 300px !important; 
    
    padding-right: 0 !important; /* Garante que acaba na ponta direita */
    display: block !important;
}

/* 4. VISUAL E TEXTO (Mantendo as tuas propriedades originais) */
.contactos-subtitulo {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #0175AC !important; /* Azul Prodeq */
    margin-bottom: 25px !important;
}

.contactos-info p, 
.contacto-morada-wrap {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin-bottom: 15px !important;
}

.contactos-info strong {
    color: #000 !important;
}

/* Links de telefone e email */
.contactos-info a {
    color: #0175AC !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.contactos-info a:hover {
    color: #003366 !important; /* Tom mais escuro no hover */
}

/* 5. ESTILO DO IFRAME (MAPA) */
.contactos-mapa iframe { 
    width: 100% !important; 
    height: 400px !important; 
    border-radius: 20px !important; 
    border: 3px solid #0175AC !important; 
    box-shadow: 0 10px 30px rgba(1, 117, 172, 0.1) !important;
    transition: transform 0.3s ease;
}

.contactos-mapa iframe:hover {
    transform: scale(1.01); 
}


/* GRELHA DE CONTACTOS */
.contactos-grid-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 30px;
    align-items: start;
}

/* SUBTÍTULO CENTRADO NA GRELHA */
.contactos-subtitulo {
    grid-column: 1 / -1; /* Ocupa as 2 colunas */
    text-align: center !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #0175AC !important; /* Azul Prodeq */
    margin-bottom: 25px !important;
}

/* CAIXA DE CADA ITEM (Telefone, Email, etc) */
.contacto-item-box {
    display: flex;
    flex-direction: column; /* Ícone em cima, texto em baixo */
    align-items: center;    /* Centra horizontalmente */
    text-align: center;
}

/* ESTILO DO ÍCONE (AZUL) */
.contacto-icon-header {
    color: #0175AC; /* Azul Prodeq */
    margin-bottom: 12px;
}

.contacto-icon-header svg {
    stroke: #0175AC; /* Força o azul no contorno do SVG */
}

/* TEXTO E LINKS */
.contacto-item-box a, 
.contacto-text-content {
    text-decoration: none;
    color: #333;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* MOBILE: Passa para 1 coluna */
@media (max-width: 768px) {
    .contactos-grid-items {
        grid-template-columns: 1fr;
    }
}

/* 6. COMPORTAMENTO MOBILE (Texto em cima, Mapa em baixo) */
@media (max-width: 991.98px) {
    .contactos-info, 
    .contactos-mapa {
        /* No telemóvel, ambos ocupam a largura total */
        flex: 0 0 100% !important; 
        max-width: 100% !important;
        
        /* O SEGREDO: Força o centro no telemóvel */
        text-align: center !important; 
        
        /* Remove o encosto às margens do desktop */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Devolvemos um pequeno padding lateral no mobile para não colar ao vidro */
    .contactos-wrapper {
        padding-left: -10px !important;
        padding-right: -10px !important;
        gap: 40px !important;
    }
}

/* ==========================================================================
   AJUSTES MOBILE: DESLIGAR ANIMAÇÕES E REDUZIR FONTES
   ========================================================================== */

@media (max-width: 991.98px) {


    /* 2. REDUÇÃO DO TAMANHO DAS LETRAS (Valores mais baixos) */
    
    /* Títulos Principais (Como podemos ajudá-lo / Projetos) */
    .field--name-field-homepage-seccao-titulo,
    .projetos-titulo {
        font-size: 2rem !important;      /* Reduzido de 2.2rem para 1.8rem */
        margin-bottom: 40px !important;
    }

    /* Títulos dos Cartões de Serviço */
    .field--name-field-homepage-servico-titulo {
        font-size: 1.5rem !important;      /* Reduzido de 1.3rem para 1.1rem */
    }

    /* Descrições dos Serviços */
    .field--name-field-homepage-servico-descricao {
        font-size: 1rem !important;       /* Reduzido de 1rem para 0.9rem */
    }

    /* Título da Secção de Contactos */
    .contactos-subtitulo {
        font-size: 2rem !important;      /* Reduzido de 1.8rem para 1.5rem */
    }

    /* Texto de Morada e Info de Contactos */
    .contactos-info p, 
    .contacto-morada-wrap,
    .contactos-info a {
        font-size: 1rem !important;     /* Reduzido de 1.05rem para 0.95rem */
    }
}


/* ==========================================================================
   D4. CAIXA DE TEXTO: AVISO LEGAL
   ========================================================================== */

/* 1. CONTAINER DO TEXTO (A CAIXA BRANCA QUE SOBE) */
.field--name-field-texto-corrido-conteudo {
    width: 100% !important;
    max-width: 1320px !important; /* Mantém a régua */
    margin: -60px auto 0 auto !important; /* Faz a caixa subir para cima do banner */
    background: #ffffff !important;
    padding: 80px 10% !important; /* Espaçamento interno generoso para o texto */
    border-radius: 30px 30px 0 0 !important; /* Arredonda só no topo */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    position: relative; 
    z-index: 20;
    
    /* Ativa a numeração automática para os títulos H2 dentro desta caixa */
    counter-reset: aviso-legal-counter; 
}

/* 2. TÍTULOS (H2) - IGUAIS À HOMEPAGE */
.field--name-field-texto-corrido-conteudo h2 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 800 !important; /* Negrito extra forte */
    color: #000000 !important;
    line-height: 1.1 !important;
    margin: 60px 0 30px 0 !important; /* Espaçamento entre secções do texto */
    
    /* Tamanho Desktop (Referência Serviços) */
    font-size: 2.8rem !important;
}

/* 3. NUMERAÇÃO AUTOMÁTICA DOS TÍTULOS */
/* Este código adiciona o "1. ", "2. ", etc., antes de cada título */
.field--name-field-texto-corrido-conteudo h2::before {
    counter-increment: aviso-legal-counter;
    content: counter(aviso-legal-counter) ". ";
}

/* 4. TEXTO CORRIDO (PARÁGRAFOS) */
.field--name-field-texto-corrido-conteudo p {
    font-size: 1.0rem !important;
    line-height: 1.8 !important; /* Mais espaçamento entre linhas para leitura legal */
    color: #444 !important;
    text-align: justify; /* Texto legal fica melhor justificado */
    margin-bottom: 25px !important;
}

/* 5. AJUSTES MOBILE */
@media (max-width: 991.98px) {
    .field--name-field-texto-corrido-conteudo {
        width: 95% !important; /* Dá margem nas pontas no telemóvel */
        padding: 40px 20px !important;
        margin-top: -30px !important; /* Sobe menos no mobile */
    }

    .field--name-field-texto-corrido-conteudo h2 {
        /* Tamanho Mobile (Referência Serviços) */
        font-size: 1.5rem !important;
        margin-top: 40px !important;
    }
}


/* ==========================================================================
   E. FOOTER (RODAPÉ) - CORES UNIFICADAS
   ========================================================================== */
footer, .site-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #eeeeee;
    text-align: center;
    padding: 40px 0 20px 0 !important;
    margin-top: 0 !important;
    box-shadow: inset 0 20px 30px -20px rgba(0,0,0,0.03) !important;
}

/* --- REDES SOCIAIS (Azul Prodeq com Hover Marinho) --- */
.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.footer-social-link {
    color: #0175AC !important; /* Azul Prodeq */
    font-size: 0.875rem;
    transition: color 0.3s ease, transform 0.3s ease !important;
    text-decoration: none !important;
}
@media (min-width: 992px) {
	.footer-social-link:hover {
		color: #003366 !important; /* Azul Marinho solicitado */
		transform: translateY(-3px);
	}
}

/* --- CONTACTOS RÁPIDOS (Links Limpos com Hover Marinho) --- */
.footer-mid-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.footer-mid-info a {
    color: #0175AC !important; /* Cor de texto normal inicialmente */
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.3s ease !important;
	font-size: 0.875rem;
}

@media (min-width: 992px) {

	/* Efeito Hover unificado para Links e Ícones de contacto */
	.footer-mid-info a:hover,
	.contact-item:hover .footer-icon {
		color: #003366 !important; /* Azul Marinho solicitado */
	}
}

/* Ícones de E-mail e Telefone */
.footer-icon {
    color: #0175AC !important; /* Azul Prodeq */
    margin-right: 8px;
    font-size: 0.875rem;
    transition: color 0.3s ease !important;
}

/* --- AVISO LEGAL E COPYRIGHT (Mantido Discreto) --- */
.footer-legal-area {
    font-size: 0.75rem; 
    color: #bbbbbb;     /* Cinza muito claro para passar despercebido */
    border-top: 1px solid #f9f9f9;
    padding-top: 15px;
}

.footer-legal-area a {
    color: #bbbbbb; 
    text-decoration: none;
    margin-left: 10px;
    transition: color 0.3s;
}
@media (min-width: 992px) {

	.footer-legal-area a:hover {
		color: #0175AC; /* Ganha cor apenas se procurado */
		text-decoration: underline;
	}
}

/* Auxiliares */
.footer-divider {
    color: #eeeeee;
    margin: 0 10px;
}

.contact-item {
    display: inline-flex;
    align-items: center;
}

/* --- MORADA (Com comportamento de link igual aos contactos) --- */
.footer-address {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}

/* Garante que o link da morada segue o estilo "limpo" e o hover marinho */
.footer-address a {
    color: #0175AC !important; /* Começa com Azul Prodeq para destacar que é clicável */
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.3s ease !important;
}

@media (min-width: 992px) {

	.footer-address a:hover {
		color: #003366 !important; /* Muda para o Azul Marinho no hover */
	}

	/* Sincroniza a mudança de cor do ícone do mapa com o link */
	.footer-address:hover .footer-icon {
		color: #003366 !important;
	}

}


/* ==========================================================================
   ==========================================================================
   F. A PRODEQ
   ========================================================================== 
   ==========================================================================*/
      
/* ==========================================================================
   F1. MISSÃO (1/3 IMAGEM + 2/3 TEXTO) - Reformulado para um genérico
   ========================================================================== */




/* ==========================================================================
   F2. EQUIPA - CORREÇÃO FINAL (CENTRAMENTO E TIPOGRAFIA)
   ========================================================================== */

.prodeq-team-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.team-container-aligned {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- TÍTULOS PRINCIPAIS --- */
.main-title-prodeq {
    font-size: 2.8rem !important; /* Título Principal Desktop */
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 60px;
}
/* Inserção da Barra Azul via CSS (Pseudo-elemento) */
/* Isto evita teres de mexer no HTML/Twig, a barra aparece sozinha */
.field--name-field-titulo-associados.field__item::after,
.field--name-field-sobre-equipa-titulo-seccao.field__item::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #0175AC;
    margin: 15px auto 40px auto; /* 15px de espaço do texto, 40px para o conteúdo abaixo */
    border-radius: 2px;
}


.field--name-field-sobre-seccao-titulo.field__item::after{
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: #0175AC;
    margin: 15px auto 40px auto; /* 15px de espaço do texto, 40px para o conteúdo abaixo */
    border-radius: 2px;
}






/* --- SUBTÍTULOS (ÓRGÃOS SOCIAIS) --- */
.team-section-subtitle {
    font-size: 2rem !important; /* Subtítulo Desktop */
    font-weight: 800;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
}


/* --- GRELHA CENTRADA --- */
.team-grid {
    display: flex !important;
    justify-content: center !important; /* Centra os membros horizontalmente */
    flex-wrap: wrap !important;
    gap: 40px;
}

/* Limpeza de Wrappers do Drupal */
.team-grid .field--name-field-sobre-membros-lista {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centra se houver menos de 3 membros */
    width: 100%;
    gap: 40px;
}

.team-grid .field__item {
    flex: 0 1 300px !important; /* Não deixa esticar, mantém o tamanho do cartão */
    margin: 0 !important;
    display: flex;
    justify-content: center;
}

/* --- CARTÃO DE MEMBRO --- */
.team-member-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra a foto e o texto entre si */
    text-align: center;
    width: 100%;
}

.member-photo-wrap {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}

.member-photo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid #0175AC !important; /* Borda Azul */
	box-shadow: 0 0 30px rgba(1, 117, 172, 0.35) !important;
}

/* --- TEXTO DE LEITURA (MEMBROS) --- */
.member-role {
    font-size: 1rem !important; /* Texto Confortável Desktop */
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.member-name {
    font-size: 1rem !important; /* Texto Confortável Desktop */
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 991.98px) {
    .main-title-prodeq {
        font-size: 2rem !important; /* Título Principal Mobile */
    }

    .team-section-subtitle {
        font-size: 1.3rem !important; /* Subtítulo Mobile */
    }

    .member-role, .member-name {
        font-size: 1rem !important; /* Texto Mobile */
    }

    .team-grid .field__item {
        flex: 0 0 100% !important; /* Ocupa a largura toda no telemóvel */
    }
}



/* ==========================================================================
   F3. ASSOCIADOS - A TÉCNICA DA GAIOLA (SOLUÇÃO FINAL)
   ========================================================================== */

.prodeq-associados-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}

.associados-header {
    text-align: center;
    margin-bottom: 50px;
}

/* --- GRELHA GERAL --- */
.associados-grid,
.associados-grid .field__items { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100%;
}

/* --- COLUNA INDIVIDUAL --- */
.associados-grid .field__item {
    display: flex !important;
    justify-content: center;
    flex: 0 0 calc(33.333% - 30px) !important;
    max-width: 350px;
    min-width: 280px;
    margin-bottom: 20px; 
}

/* --- LINK (Contentor Principal) --- */
.associado-card-link {
    display: block !important;
    width: 100% !important;
    height: 100%; 
    text-decoration: none !important;
}

/* --- A CARTA (A Caixa Exterior) --- */
.associado-card {
    background: #ffffff;
    border: 1px solid rgba(1, 117, 172, 0.15);
    border-radius: 15px;
    height: 180px !important; /* Altura fixa */
    width: 100% !important;
    
    /* PADDING ZERO: O controlo é feito na caixa interior */
    padding: 0 !important; 
    
    /* Isto é CRUCIAL: impede qualquer coisa de sair para fora da borda arredondada */
    overflow: hidden !important; 
    position: relative !important; /* Necessário para a "gaiola" funcionar */
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    
    /* DEBUG - Borda Vermelha (Apagar depois) */
    /* border: 2px solid red !important; */
}

/* --- A GAIOLA (A Caixa Azul) --- */
.associado-logo-box {
    /* Define o tamanho da "arena" onde o logo pode brincar.
       Se quiseres margem branca à volta, reduz isto (ex: 80% width, 80% height) */
    width: 100% !important;
    height: 100% !important;
    
    position: relative !important; /* O pai tem de ser relativo */
    
    /* DEBUG - Fundo Azul (Apagar depois) */
    /* background-color: rgba(0, 0, 255, 0.2) !important; */
}

/* --- O PRISIONEIRO (A Imagem/Logo) --- */
.associado-logo-box img,
.associados-grid img {
    /* POSICIONAMENTO ABSOLUTO: O Segredo */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    /* Força a imagem a ocupar a gaiola toda */
    width: 100% !important;
    height: 100% !important;
    
    /* CONTAIN: Garante que a imagem inteira é visível sem distorcer.
       Ela vai crescer até bater na parede mais próxima (topo ou lado). */
    object-fit: contain !important;
    
    margin: auto !important; /* Garante o centramento final */
    padding: 25px !important; /* Dá um "ar" para o logo não colar às bordas da carta */
    

}

/* --- HOVER EFEITOS --- */
@media (min-width: 992px) {
    .associado-card-link:hover .associado-card {
        transform: scale(1.02);
        box-shadow: 0 10px 30px rgba(1, 117, 172, 0.15);
        border-color: #0175AC;
    }
}

/* --- VERSÃO TABLET (2 POR LINHA) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .associados-grid,
    .associados-grid .field__items {
        flex-direction: row !important; /* Garante que fica em linha */
        justify-content: center !important;
    }

    .associados-grid .field__item {
        /* Cálculo para 2 colunas descontando o gap */
        flex: 0 0 calc(50% - 30px) !important; 
        max-width: 50% !important;
        margin-bottom: 30px;
    }
    
    .associado-card {
        height: 160px !important; /* Altura ajustada para tablet */
    }
}




/* ==========================================================================
   ==========================================================================
   G. SERVIÇOS (MASTER STYLESHEET)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   G1. INTRODUÇÃO (IMAGEM + TEXTO) - Reformulado para 1 genérico
   ========================================================================== */
   
   


/* ==========================================================================
   G2. GRELHA DE SERVIÇOS (LAYOUT E ESTRUTURA)
   ========================================================================== */

/* G2.1 CONFIGURAÇÃO DA SECÇÃO
   -------------------------------------------------------------------------- */
   

   
.prodeq-services-grid-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.services-header {
    text-align: center;
    margin-bottom: 50px;
}
.field--name-field-titulo-seccao-servicos.field__item::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #0175AC;
    margin: 15px auto 40px auto; /* 15px de espaço do texto, 40px para o conteúdo abaixo */
    border-radius: 2px;
}



/* G2.2 O PAI DOS CARTÕES (FLEXBOX)
   -------------------------------------------------------------------------- */
.services-grid .field__items {
    display: flex !important;
    flex-wrap: wrap !important;      /* Permite quebrar linha */
    justify-content: center !important; /* Centra os cartões na página */
    gap: 25px !important;            /* Espaço entre cartões */
    width: 100%;
}

/* G2.3 O ITEM INDIVIDUAL (CÁLCULO DE LARGURA)
   -------------------------------------------------------------------------- */
.services-grid .field__item {
    display: flex !important;
    
    /* MATEMÁTICA: 33% (1/3) menos o espaço do gap */
    flex: 0 0 calc(33% - 20px) !important;
    
    /* Define limites de largura para manter a estética */
    min-width: 300px;
    max-width: 380px;
    
    margin-bottom: 30px; 
    position: relative;
    transition: z-index 0s linear 0.1s;
}

/* G2.4 EFEITO DE PROFUNDIDADE (HOVER)
   --------------------------------------------------------------------------
   Traz o cartão para a frente (z-index 100) quando o rato passa por cima. */
.services-grid .field__item:hover {
    z-index: 100;
    transition-delay: 0s;
}

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



/* 
   G2.5 BOTÕES DE AÇÃO (FUNDO DA GRELHA)
   -------------------------------------------------------------------------- */

/* O Contentor que segura os botões */
.prodeq-btn-group {
    width: 100% !important;
    display: flex !important;
    
    /* CENTRAMENTO: Define se os botões ficam no meio ou à esquerda */
    justify-content: center !important; 
    
    flex-wrap: wrap !important;
    gap: 20px !important;        /* Espaço entre botões */
    margin-top: 50px !important; /* Afasta da grelha de cima (respiro) */
}

/* O Estilo do Botão */
.prodeq-btn-group a {
    /* Estado Normal */
    background-color: #0175AC !important; /* Azul Prodeq */
    color: #ffffff !important;
    
    padding: 15px 40px !important;        /* Tamanho generoso */
    border-radius: 50px !important;       /* Redondo nas pontas (Pill shape) */
    
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;        /* Tamanho de letra legível */
    display: inline-block !important;
    
    /* Suavidade */
    transition: all 0.3s ease-in-out !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border: 2px solid #0175AC !important; /* Borda igual ao fundo */
}

/* Estado Hover (Ao passar o rato) */
.prodeq-btn-group a:hover {
    background-color: #003366 !important;       /* Azul Escuro */
    border-color: #003366 !important;           /* Borda Escura */
    
    transform: translateY(-3px) !important;     /* Efeito Levitar */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    
    color: #ffffff !important;
}

/* Mobile: Botões empilhados */
@media (max-width: 768px) {
    .prodeq-btn-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .prodeq-btn-group a {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
    }
}





/* ==========================================================================
   G3. O CARTÃO DE SERVIÇO (ESTILO VISUAL)
   ========================================================================== */

/* G3.1 A CAIXA BRANCA
   -------------------------------------------------------------------------- */
.service-card {
    background: #ffffff;
    border-radius: 15px; 
    
    /* Padding inferior maior (50px) para acomodar a seta */
    padding: 30px 25px 50px 25px; 
    
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    position: relative; /* Base para elementos absolutos */
    
    /* Sombra suave inicial */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border: 1px solid rgba(0,0,0,0.02); 
    border-bottom: 4px solid transparent; 
    
    /* Transições suaves para animação */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* G3.2 LINK INVISÍVEL
   --------------------------------------------------------------------------
   Cobre todo o cartão para o tornar clicável. */
.service-link-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    cursor: pointer;
}


/* ==========================================================================
   G4. O ÍCONE (A BOLA)
   ========================================================================== */

/* G4.1 WRAPPER DO ÍCONE
   -------------------------------------------------------------------------- */
.service-icon-wrapper {
    width: 100%;
    margin-bottom: 20px;
    display: flex; 
    justify-content: center; 
    flex: 0 0 70px; /* Reserva altura fixa */
}

/* G4.2 O CÍRCULO
   -------------------------------------------------------------------------- */
.service-icon-circle {
    width: 70px;
    height: 70px;
    
    background-color: #ffffff;
    border: 2px solid #0175AC; /* Borda Azul PRODEQ */
    border-radius: 50%;
    
    /* Centramento Absoluto do conteúdo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden; 
}

/* G4.3 LIMPEZA DE ESTILOS DRUPAL
   -------------------------------------------------------------------------- */
.service-icon-circle .field, 
.service-icon-circle .field__item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* G4.4 A IMAGEM
   -------------------------------------------------------------------------- */
.service-icon-circle img {
    width: 55px !important; 
    height: 55px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   G5. TIPOGRAFIA E ALINHAMENTO (DESKTOP)
   ========================================================================== */

/* G5.1 TÍTULO PRINCIPAL (ALTURA FIXA)
   --------------------------------------------------------------------------
   Define uma altura de 75px para garantir que todos os títulos
   ocupam o mesmo espaço, alinhando o elemento seguinte. */
.service-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 5px !important;
    
    height: 75px; 
    width: 100%;
    overflow: hidden;
    
    /* Centramento do texto */
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;     
    text-align: center !important;      
}

/* Regra para forçar elementos internos do Drupal a centrar */
.service-title .field,
.service-title .field__item,
.service-title p {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; 
}

/* G5.2 SUBTÍTULO (FORÇA BRUTA DE ALINHAMENTO) */
.service-subtitle {
    font-size: 1rem;
    color: #0175AC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    
    /* 1. Definimos o tamanho da área */
    width: 100%;
    height: 90px;
    overflow: hidden;
    
    /* 2. Usamos Flexbox APENAS para o alinhamento Vertical (Cima/Baixo) */
    display: flex !important;
    align-items: center !important; 
    
    /* 3. Para a horizontal, confiamos no text-align do filho */
    justify-content: center !important;
}

/* 4. AQUI ESTÁ A CORREÇÃO "NUCLEAR" */
/* Dizemos a todas as divs do Drupal dentro do subtítulo:
   "Vocês ocupam a largura toda, mas o texto lá dentro TEM de estar no meio" */
.service-subtitle .field,
.service-subtitle .field__item,
.service-subtitle div {
    width: 100% !important;
    text-align: center !important;
    display: block !important; /* Removemos flex dos filhos para o text-align funcionar */
    margin: 0 !important;
    padding: 0 !important;
}


/* G5.3 A LISTA DE DESCRIÇÃO
   -------------------------------------------------------------------------- */
.service-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    
    /* Garante alinhamento à esquerda e ocupa o espaço restante */
    width: 100%;
    text-align: left;
    flex-grow: 1; 
}


/* ==========================================================================
   G6. INTERATIVIDADE E ELEMENTOS DECORATIVOS
   ========================================================================== */

/* G6.1 A SETA (POSICIONAMENTO ABSOLUTO)
   -------------------------------------------------------------------------- */
.service-arrow {
    position: absolute; 
    bottom: 30px;
    left: 25px; 
    
    color: #0175AC;
    font-weight: bold;
    font-size: 1.5rem;
    
    /* Inicialmente invisível e recuada */
    opacity: 0;
    transform: translateX(-10px); 
    transition: all 0.3s ease;
    
    z-index: 2;
}

/* G6.2 ESTADOS HOVER (APENAS DESKTOP)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Zoom no cartão */
    .service-card-wrapper:hover .service-card {
        transform: scale(1.05); 
        box-shadow: 0 20px 50px rgba(1, 117, 172, 0.2); 
        border-bottom-color: #0175AC; 
    }
    
    /* Mudança de cor no ícone */
    .service-card-wrapper:hover .service-icon-circle {
        background-color: #0175AC;
    }
    
    .service-card-wrapper:hover .service-icon-circle img {
        filter: brightness(0) invert(1);
    }
    
    /* Animação de entrada da seta */
    .service-card-wrapper:hover .service-arrow {
        opacity: 1; 
        transform: translateX(0); 
    }
}



/* ==========================================================================
   G7. VERSÃO MOBILE (INDEPENDENTE E "OVERWRITE" TOTAL)
   ========================================================================== */
@media (max-width: 991.98px) {
    
    /* G7.1 RESET DA GRELHA (COLUNA ÚNICA)
       ---------------------------------------------------------------------- */
    .services-grid .field__items {
        display: flex !important;
        flex-direction: column !important; /* Força um item debaixo do outro */
        align-items: center !important;
        gap: 25px !important; 
        width: 100% !important;
    }
    
    .services-grid .field__item {
        width: 100% !important;
        max-width: 350px !important;
        flex: 0 0 auto !important;     /* Desliga cálculos de 33% */
        margin-bottom: 0 !important;   /* O gap já trata do espaçamento */
        z-index: 1 !important;
    }

    /* G7.2 CARTÃO: ALTURA AUTOMÁTICA (CRÍTICO)
       ----------------------------------------------------------------------
       Aqui usamos !important para garantir que a altura fixa do desktop
       é ignorada. O cartão encolhe para caber apenas o conteúdo. */
    .service-card {
        height: auto !important; 
        min-height: 0 !important;
        padding: 30px 20px 60px 20px !important; 
    /* Ativa a borda azul estática no mobile */
        border-bottom: 3px solid #0175AC !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    }
}
    }

    /* G7.3 TÍTULO: RESET TOTAL DE ALTURA
       ---------------------------------------------------------------------- */
    .service-title {
        height: auto !important;       /* Remove os 75px */
        min-height: 0 !important;
        margin-bottom: 5px !important; /* Margem pequena */

        /* Remove comportamentos flex do desktop */
        flex: none !important; 
        display: block !important; 
    }
    
    .service-title * {
        height: auto !important;
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* G7.4 SUBTÍTULO: RESET TOTAL DE ALTURA
       ---------------------------------------------------------------------- */
    .service-subtitle {
        height: auto !important;      /* Remove os 90px */
        min-height: 0 !important;
        margin-bottom: 15px !important;

        flex: none !important;
        display: block !important;
    }
    
    .service-subtitle * {
        height: auto !important;
        display: block !important;
    }

    /* G7.5 A LISTA: FLUIDA E NATURAL
       ---------------------------------------------------------------------- */
    .service-desc {
        flex-grow: 0 !important;      /* Não tenta ocupar espaço extra */
        width: 100% !important; 
        max-width: 100% !important;
        text-align: left !important; 
        margin: 0 !important;
    }

    /* G7.6 SETA: SEMPRE VISÍVEL
       ---------------------------------------------------------------------- */
    .service-arrow {
        opacity: 1 !important;
        transform: translateX(0) !important;
        bottom: 25px !important;
        left: 20px !important; 
    }
}


/* ==========================================================================
   ==========================================================================
   H. PORTFÓLIO / PROJETOS (MASTER STYLESHEET)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   H1. GRELHA DE PROJETOS (LAYOUT E ESTRUTURA) - PADRÃO SECÇÃO G
   ========================================================================== */

/* H1.1 CONFIGURAÇÃO DA SECÇÃO (OPCIONAL - CASO QUEIRAS O MESMO RESPIRO)
   -------------------------------------------------------------------------- */
.prodeq-projects-grid-section {
    padding: 60px 0;
    background-color: #ffffff;
}


.field--name-field-sec-proj-titulo::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #0175AC;
    margin: 15px auto 40px auto; /* 15px de espaço do texto, 40px para o conteúdo abaixo */
    border-radius: 2px;
}



/* H1.2 O PAI DOS CARTÕES (FLEXBOX) 
   -------------------------------------------------------------------------- */
.prodeq-projects-grid .view-content {
    display: flex !important;
    flex-wrap: wrap !important;      /* Permite quebrar linha */
    justify-content: center !important; /* Centra os cartões na página */
    gap: 25px !important;            /* Espaço entre cartões igual ao G2.2 */
    width: 100%;
    max-width: 1320px;
    margin: 40px auto;
}

/* H1.3 O ITEM INDIVIDUAL (CÁLCULO DE LARGURA)
   -------------------------------------------------------------------------- */
.prodeq-projects-grid .views-row {
    display: flex !important;
    flex-direction: column !important;
    
    /* MATEMÁTICA PADRONIZADA: 33% (1/3) menos o gap */
    flex: 0 0 calc(33.333% - 20px) !important;
    
    /* Limites de largura para manter a estética do G2.3 */
    min-width: 300px;
    max-width: 380px; /* Reduzi de 450px para 380px para igualar ao G */
    
    margin-bottom: 30px; 
    position: relative;
    transition: z-index 0s linear 0.1s;
}

/* H1.4 EFEITO DE PROFUNDIDADE (HOVER)
   -------------------------------------------------------------------------- */
.prodeq-projects-grid .views-row:hover {
    z-index: 100;
    transition-delay: 0s;
}

/* H1.5 WRAPPER INTERNO (Opcional, caso uses no Twig) */
.project-card-wrapper {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   H2. O CARTÃO DE PROJETO (ESTILO VISUAL)
   ========================================================================== */

/* H2.1 A CAIXA BRANCA (ALTURA FIXA)
   -------------------------------------------------------------------------- */
.prodeq-project-card {
    background: #ffffff;
    border-radius: 15px;
    
    /* ALTURA FIXA: Mantém a grelha alinhada no Desktop */
    height: 400px !important; 
    min-height: 400px !important;
    max-height: 400px !important;
    
    padding: 0 0px 20px 0 !important; /* Espaço para a seta absoluta no fundo */
    
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden;
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border: 1px solid rgba(0,0,0,0.02); 
    border-bottom: 4px solid transparent; 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* H2.2 LINK INVISÍVEL (CLIQUE TOTAL)
   -------------------------------------------------------------------------- */
.project-card-link-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    cursor: pointer;
    display: block;
}

/* ==========================================================================
   H3. CONTEÚDO VISUAL E TEXTUAL
   ========================================================================== */

/* --- H.3.1 A IMAGEM (CONTENTOR PAI) --- */
.project-card-image {
    width: 100% !important;
    height: 90px !important;
    flex-shrink: 0;
    background-color: #fff;
    
    /* Centramento absoluto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	margin-bottom: 10px;
    
    border-bottom: 1px solid #f9f9f9;
    overflow: hidden;
    
    /* Remove qualquer padding que possa estar a empurrar a imagem */
    padding: 0 !important; 
}

/* --- LIMPEZA DRUPAL + AJUSTE DE RESPIRAÇÃO --- */
.project-card-image .field,
.project-card-image .field__item,
.project-card-image .field__items {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- A IMAGEM EM SI (Onde damos o espaço) --- */
.project-card-image img {
    /* Define que a imagem só pode ocupar 80% do espaço, 
       criando automaticamente uma margem de 10% a toda a volta */
    max-width: 85% !important; 
    max-height: 80% !important; 
    
    /* Mantém a proporção e centra */
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
}

/* H3.2 O CORPO DO TEXTO
   -------------------------------------------------------------------------- */
.project-card-body {
    padding: 0 25px;
    width: 100%;
    flex-grow: 1 !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* TÍTULO (ALTURA FIXA PARA ALINHAMENTO) */
.project-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 0px;
    
    width: 100%;
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important; 
    text-align: center !important;
}

/* BARRINHA AZUL */
.project-card-divider-blue {
    width: 40px !important;
    height: 3px !important;
    background-color: #0175AC !important;
    margin: 10px auto 15px auto !important;
    border-radius: 2px;
    flex-shrink: 0;
}

/* TEXTO DE DETALHES (JUSTIFICADO) */
.project-card-details,
.project-card-body p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    width: 100%;
    
    text-align: justify !important;   
    text-align-last: center !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
}

/* ÁREA DE FINANCIAMENTO */
.project-card-funding {
    margin-top: 10px;
    padding: 0px 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-funding img {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    background-color: #fff;
    
    /* Centramento do Bloco Pai */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

/* ==========================================================================
   H4.1 A SETA (ESTILO UNIFICADO COM NEWSLETTERS)
   ========================================================================== */

.prodeq-project-card .project-card-arrow {
    /* 1. Reset e Cores */
    display: inline-block !important;
    color: #0175AC !important;
    font-size: 1.5rem !important;
    font-weight: bold;
    
    /* 2. Posicionamento no Footer do Cartão */
    position: absolute !important;
    bottom: 25px !important;
    left: 25px !important;
    z-index: 99 !important;

    /* 3. Estado Inicial para Animação (Invisível e à esquerda) */
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

/* H4.4 ESTADOS HOVER (APENAS DESKTOP)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* 1. Elevação e Borda do Cartão */
    .prodeq-projects-grid .views-row:hover .prodeq-project-card {
        transform: scale(1.03);
        box-shadow: 0 20px 50px rgba(1, 117, 172, 0.2);
        border-bottom: 4px solid #0175AC !important; /* Borda azul sólida no hover */
    }

    /* 2. Animação da Seta (Surge e desliza para a direita) */
    .prodeq-projects-grid .views-row:hover .project-card-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   H5. VERSÕES MOBILE (PRESERVAÇÃO DE PROPORÇÕES)
   ========================================================================== */

/* MOBILE: 1 cartão centralizado (Abaixo de 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .prodeq-projects-grid .view-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .prodeq-projects-grid .views-row {
        width: 100% !important;
        /* O cartão pode ficar mais largo que no desktop, mas mantendo a altura */
        max-width: 380px !important; 
        flex: 0 0 auto !important;
        margin-bottom: 25px !important;
    }

    /* PRESERVAÇÃO DA FORMATAÇÃO DESKTOP */
    .prodeq-project-card {
        height: 400px !important; 
        min-height: 400px !important;
        max-height: 400px !important;
    }

	/* --- H.3.1 A IMAGEM (CONTENTOR PAI) --- */
	.project-card-image {
		width: 100% !important;
		height: 90px !important;
		flex-shrink: 0;
		background-color: #fff;
		
		/* Centramento absoluto */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		
		border-bottom: 1px solid #f9f9f9;
		overflow: hidden;
		
		/* Remove qualquer padding que possa estar a empurrar a imagem */
		padding: 0 !important; 
	}
	
	/* --- LIMPEZA DRUPAL + AJUSTE DE RESPIRAÇÃO --- */
	.project-card-image .field,
	.project-card-image .field__item,
	.project-card-image .field__items {
		width: 100% !important;
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* --- A IMAGEM EM SI (Onde damos o espaço) --- */
	.project-card-image img {
		/* Define que a imagem só pode ocupar 80% do espaço, 
		criando automaticamente uma margem de 10% a toda a volta */
		max-width: 85% !important; 
		max-height: 80% !important; 
		
		/* Mantém a proporção e centra */
		object-fit: contain !important;
		display: block !important;
		margin: auto !important;
	}


    /* Ajuste de escala do título para não quebrar nos 400px em ecrãs estreitos */
    .project-card-title {
        font-size: 1.25rem !important;
        height: auto !important;
        min-height: 40px !important;
    }

    /* SETA: Sempre visível no Mobile (sem hover) */
    .prodeq-project-card .project-card-arrow {
        opacity: 1 !important;
        transform: translateX(0) !important;
        left: 30px !important; /* Ligeiramente mais à esquerda no mobile */
        bottom: 20px !important;
    }
	
	
	/* Ativa a borda azul estática no mobile */
    .prodeq-project-card {
        border-bottom: 3px solid #0175AC !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    }
	
}





/* ==========================================================================
   SECÇÃO I: PÁGINA DE PROJETO (VERSÃO FINAL - HOVERS SÓ EM DESKTOP)
   ========================================================================== */

/* --- I.1 BANNER DE TOPO --- */
.node-type-pagina-de-projeto .page-header,
.node-type-pagina-de-projeto h1.page-title {
    background-color: #eaf6fb; 
    background-image: linear-gradient(to right, #ffffff, #eaf6fb, #d4edf8);
    color: #000; 
    font-weight: 900;
    text-transform: uppercase;
    text-align: center; 
    padding: 40px 20px;
    margin-bottom: 0px; 
    width: 100%;
}

/* --- I.2 ABAS (REMOVIDO) --- */

/* --- I.3 LOGÓTIPOS & LAYOUT PRINCIPAL --- */

/* Logo do Projeto (Centrado) */
.field--name-field-logo-imagem-do-projeto {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    clear: both;
}

/* Força a imagem a comportar-se bem */
.field--name-field-logo-imagem-do-projeto img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}
.field--name-field-logo-imagem-do-projeto .field__label { display: none; }

/* Logótipo Financiamento (Rodapé - Afastado) */
.field--name-field-logotipo-financiamento {
    margin-top: 100px;
    border-top: 1px solid #eee;
    padding-top: 40px;
    display: flex;
    justify-content: center;
    width: 100%;
    clear: both;
}
.field--name-field-logotipo-financiamento img { max-height: 80px; width: auto; }


/* --- I.4 FICHA TÉCNICA (Correção de Alinhamento e Parágrafo) --- */
.field--name-field-referencia,
.field--name-field-duracao,
.field--name-field-financiamento-entidade,
.field--name-field-financiamento-valor,
.field--name-field-investigador-principal,
.field--name-field-estado-do-projeto {
    max-width: 900px; 
    margin: 0 auto 10px auto; 
    text-align: left;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
    clear: both;

    /* A CURA: Transforma a linha num sistema de duas colunas */
    display: flex !important;
    align-items: flex-start !important; /* Mantém o título no topo se o texto for longo */
}

/* Coluna 1: Etiquetas a Azul (Largura Fixa) */
.field--name-field-referencia .field__label,
.field--name-field-duracao .field__label,
.field--name-field-financiamento-entidade .field__label,
.field--name-field-financiamento-valor .field__label,
.field--name-field-investigador-principal .field__label,
.field--name-field-estado-do-projeto .field__label {
    font-weight: 800;
    color: #0175AC;
    
    /* Força a largura da coluna azul para 200px */
    flex: 0 0 200px !important; 
    width: 200px !important;
    margin-right: 15px;
    display: block !important;
}

/* Coluna 2: Conteúdo a Preto (Faz parágrafo alinhado) */
.field--name-field-referencia .field__item,
.field--name-field-duracao .field__item,
.field--name-field-financiamento-entidade .field__item,
.field--name-field-financiamento-valor .field__item,
.field--name-field-investigador-principal .field__item,
.field--name-field-estado-do-projeto .field__item {
    flex: 1 !important; /* Ocupa todo o resto da linha */
    color: #000;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Ajuste para Mobile Pequeno */
@media (max-width: 600px) {
    .field--name-field-referencia .field__label,
    .field--name-field-duracao .field__label,
    .field--name-field-financiamento-entidade .field__label,
    .field--name-field-financiamento-valor .field__label,
    .field--name-field-investigador-principal .field__label,
    .field--name-field-estado-do-projeto .field__label {
        flex: 0 0 140px !important; /* Reduz a coluna azul para dar mais espaço ao texto no mobile */
        width: 140px !important;
        font-size: 1rem;
    }
}

/* 8. O Título instituicoes-parceiras-tit - CENTRADO */
.field--name-field-instituicoes-parceiras-tit,
.field--name-field-instituicoes-parceiras .field__label,
.field--name-field-equipa-do-projeto .field__label,
.field--name-field-resultados-e-publicacoes .field__label  {
    text-align: center;    
    display: block;        
    width: 100%;           
    
    font-weight: 900;
    text-transform: uppercase;
	margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.25rem;
    color: #0175AC;
}

/* ==========================================================================
   I.5 PARCEIROS (3 POR LINHA | CENTRADOS | CORREÇÃO NOME)
   ========================================================================== */

/* 1. O Contentor Principal */
.field--name-field-instituicoes-parceiras {
    max-width: 1200px;
    margin: 60px auto;     
    clear: both;
    width: 100%;           
}

/* 3. A GRELHA (O Pai) */
.field--name-field-instituicoes-parceiras .field__items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centra o grupo de cartões no ecrã */
    gap: 30px !important;       
    align-items: stretch !important;    
}

/* 4. A COLUNA (O Item Invisível que segura o cartão) */
.field--name-field-instituicoes-parceiras .field__item {
    display: flex !important;   /* Para passar a altura 100% ao filho */
    
    /* --- LARGURA FIXA (DESKTOP E TABLET GRANDE) --- */
    /* 3 cartões por linha exatos (33.333% menos o gap) */
    width: calc(33.333% - 20px) !important;
    
    /* IMPEDE de esticar: Se houver só 2, eles mantêm o tamanho de 1/3 e ficam no meio */
    flex-grow: 0 !important; 
    
    min-width: 280px;           
    max-width: 400px;
    margin: 0 !important;
}

/* 5. O CARTÃO (VISUAL) */
.parceiro-card-final {
    position: relative;
    width: 100% !important;     /* Preenche a coluna */
    height: 100% !important;    /* Preenche a altura (igual aos vizinhos) */
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;    /* Centra conteúdo verticalmente */
    
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    padding: 30px 20px;
    text-align: center;
}

/* Área do Logo (Centrado) */
.parceiro-logo-area {
    width: 100%;
    flex: 1;
    /* Força o conteúdo direto a centrar */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important; 
    margin-bottom: 20px;
    min-height: 90px;
}

/* TRUQUE: Forçar as "caixas invisíveis" do Drupal a centrar também */
.parceiro-logo-area .field,
.parceiro-logo-area .field__item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* A Imagem em si */
.parceiro-logo-area img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
    margin: 0 auto !important; 
    display: block !important;
}

/* Barra Azul */
.parceiro-barra-azul {
    width: 40px;
    height: 4px;
    background-color: #0175AC;
    border-radius: 2px;
    margin: 0 auto 15px auto;
    flex-shrink: 0; 
}

/* --- CORREÇÃO DO NOME (CENTRAMENTO FORÇADO) --- */
.parceiro-nome-area {
    width: 100%;
    text-align: center !important;
    flex-shrink: 0;
    font-weight: 700;
    color: #000 !important;
    font-size: 1.125rem;
    line-height: 1.3;
    
    /* Garante que o contentor é flexível e centra os filhos */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

/* AQUI ESTÁ A CURA: Obriga os campos internos a ficarem no meio */
.parceiro-nome-area .field,
.parceiro-nome-area .field__item,
.parceiro-nome-area p {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}


/* Link */
.parceiro-link-cover a {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; opacity: 0; font-size: 0;
}

/* 6. RESPONSIVO */

/* TABLET (Entre 768px e 1024px) - 2 por linha */
@media (min-width: 768px) and (max-width: 1024px) {
    .field--name-field-instituicoes-parceiras .field__item {
        width: calc(50% - 15px) !important; 
    }
}

/* MOBILE (Menos de 768px) - 1 por linha */
@media (max-width: 767.98px) {
    .field--name-field-instituicoes-parceiras .field__item {
        width: 95% !important; 
        max-width: 350px;
    }
    
    .parceiro-card-final {
        height: auto !important;
    }
}

/* 7. Esconder se vazio */
.field--name-field-instituicoes-parceiras:not(:has(.field__item)) {
    display: none !important;
}




/* --- I.6 CAIXAS DE TEXTO (CORREÇÃO DE MARGENS E HIFENIZAÇÃO) --- */
.field--name-field-descricao-projeto,
.field--name-field-equipa-do-projeto .field__item,
.field--name-field-resultados-e-publicacoes .field__item {
    max-width: 900px; 
    /* O 'auto' nas laterais centra a caixa se a largura for menor que 100% */
    margin: 40px auto !important; 
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    border-left: 5px solid #0175AC;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;

    /* Hifenização e Justificação */
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    word-break: break-word;

    /* GARANTIA DE MARGEM: Impede que o padding "estique" a caixa para fora */
    box-sizing: border-box !important; 
}

/* --- AJUSTE ESPECÍFICO PARA MOBILE --- */
@media (max-width: 991.98px) {
    .field--name-field-descricao-projeto,
    .field--name-field-equipa-do-projeto .field__item,
    .field--name-field-resultados-e-publicacoes .field__item {
        /* Definimos 90% para sobrar 5% de margem em cada lado (esquerda e direita) */
        width: 90% !important; 
        padding: 30px 20px !important; /* Reduzimos um pouco o padding interno no mobile */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}

.field--name-field-descricao-projeto .field__label { display: none; }


/* --- I.4 & I.6 CORREÇÃO DE MARGENS MOBILE (TEXTO) --- */
@media (max-width: 991.98px) {
    /* Ficha Técnica */
    .field--name-field-referencia,
    .field--name-field-duracao,
    .field--name-field-financiamento-entidade,
    .field--name-field-financiamento-valor,
    .field--name-field-investigador-principal,
    .field--name-field-estado-do-projeto,
    /* Caixas de Texto (Descrição, Equipa, Resultados) */
    .field--name-field-descricao-projeto,
    .field--name-field-equipa-do-projeto .field__item,
    .field--name-field-resultados-e-publicacoes .field__item {
        width: 98% !important; /* Força a caixa a não ocupar 100% da largura */
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 5px !important; /* Espaço interno para o texto não colar */
        padding-right: 5px !important;
        box-sizing: border-box;
    }
}



/* ==========================================================================
   I.7 LISTA DE ARQUIVO (3 COLUNAS, ALTURA 80PX)
   ========================================================================== */

/* 1. Contentor da Lista */
.view-arquivo-lista .view-content {
    max-width: 1200px;
    margin: 0 auto 80px auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 2. A LINHA (ROW) - Altura Fixa de 80px */
a.arquivo-row-item {
    display: flex;
    align-items: center;      
    justify-content: space-between;

    /* AQUI: Altura reduzida para 80px */
    height: 80px;            
    padding: 0 20px;          /* Padding lateral ligeiramente reduzido */

    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    /* Barra Lateral Transparente */
    border-left: 6px solid transparent;

    text-decoration: none !important;
    color: #000;
    transition: all 0.2s ease;
}

/* --- AS 3 COLUNAS IGUAIS (33% CADA) --- */
.col-logo, 
.col-titulo, 
.col-financiamento {
    flex: 1;                  /* Largura igual para todos */
    display: flex;            
    align-items: center;      
    height: 100%;             
    overflow: hidden;         
}

/* 3. Coluna Esquerda (Logo Projeto) - Alinhada à Esquerda */
.col-logo {
    justify-content: flex-start; 
}

.col-logo img {
    /* Altura máxima ajustada para caber em 80px com folga */
    max-height: 60px;         
    width: auto;
    max-width: 100%;          
    object-fit: contain;
    object-position: left;
}

/* 4. Coluna Centro (Título) - ALINHAMENTO FORÇADO */
.col-titulo {
    display: flex !important;
    align-items: center !important;   /* Força o centro vertical */
    justify-content: center !important; /* Força o centro horizontal */
    
    height: 100%;             /* Ocupa a altura toda da linha */
    padding: 0 5px;           /* Pequena margem lateral */
    margin: 0;
}

/* O SEGREDO: Removemos todas as margens de qualquer coisa que esteja lá dentro */
.col-titulo * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important; /* Garante que as linhas de texto não empurram para cima */
    border: none !important;
}

a.arquivo-row-item .col-titulo {
    /* Estilos do Texto */
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    color: #000000;
    text-transform: uppercase;
    
    /* Previne quebras estranhas */
    white-space: normal;
}

/* 5. Coluna Direita (Financiamento) - Alinhada à Direita */
.col-financiamento {
    justify-content: flex-end; 
}

.col-financiamento img {
    /* Logos de financiamento costumam ser mais largos, altura menor */
    max-height: 45px;          
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: right;
}

/* ==========================================================================
   HOVER EFFECTS (SÓ DESKTOP)
   ========================================================================== */
@media (min-width: 992px) {
    a.arquivo-row-item:hover {
        background-color: #fafafa;
        border-left-color: #0175AC; /* Barra azul aparece */
    }

    a.arquivo-row-item:hover .col-titulo {
        color: #0175AC !important; /* Título fica azul */
    }
}

/* ==========================================================================
   MOBILE (Ajuste para empilhar com bom espaçamento)
   ========================================================================== */
@media (max-width: 768px) {
    a.arquivo-row-item {
        flex-direction: column;
        height: auto;          /* Altura automática para caber tudo */
        
        /* Mais espaço em cima e em baixo dentro da caixa */
        padding: 40px 20px;    
        
        /* AQUI ESTÁ O "PAD": Cria 30px de espaço entre cada elemento */
        gap: 30px;             
        
        border-left: none;
    }

    /* Reset das colunas para ocuparem a largura toda */
    .col-logo, .col-titulo, .col-financiamento {
        flex: auto;
        width: 100%;
        justify-content: center !important; 
        height: auto;          /* Importante para não cortar as margens */
    }

    /* Ajuste Logo Cima */
    .col-logo img { 
        height: 70px;          /* Tamanho bom para mobile */
        object-position: center; 
        margin-bottom: 5px;   /* Empurra um pouco mais o título */
    }

    /* Ajuste Título */
    .col-titulo {
        /* Garante que o título tem espaço para respirar */
        padding: 0 10px;
    }
    
    /* Ajuste Logo Baixo */
    .col-financiamento img {
        height: 50px;
        object-position: center;
        margin-top: 5px;      /* Afasta-se um pouco mais do título */
    }
}


/* ==========================================================================
   I.8 ESTILOS FINAIS: TÍTULOS E BOTÃO PÍLULA
   ========================================================================== */

/* 1. TÍTULO "PROJETOS ATIVOS" */
h2.titulo-seccao-projetos {
    text-align: center;       
    font-weight: 800;         
    color: #000000;          
    text-transform: uppercase;
    font-size: 1rem;         
    margin-top: 50px;
    margin-bottom: 40px;
    letter-spacing: -0.5px;   
    width: 100%;
    display: block;
}

/* 2. O CONTENTOR DO BOTÃO */
.ver-arquivo-wrapper {
    width: 100%;
    text-align: center;       
    margin: 60px 0;           
    clear: both;
}









/* ==========================================================================
   J. NEWSLETTERS (ESTILOS ISOLADOS)
   ========================================================================== */
   
   
/* Seleciona a div exata do campo que viste no F12 */


.field--name-field-titulo-grelha-cartoes-news.field__item {
    display: block !important;
    text-align: center !important;
    margin-top: 60px !important;
    margin-bottom: 15px !important;
    
    /* Estilo do Texto */
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #000 !important;
}

/* Inserção da Barra Azul via CSS (Pseudo-elemento) */
/* Isto evita teres de mexer no HTML/Twig, a barra aparece sozinha */
.field--name-field-titulo-grelha-cartoes-news.field__item::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #0175AC;
    margin: 15px auto 40px auto; /* 15px de espaço do texto, 40px para o conteúdo abaixo */
    border-radius: 2px;
}


.newsletter-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	transition: all 0.3s ease-in-out; /* Garante que afeta todas as propriedades */
	/* ADICIONA ISTO AQUI */
    border-bottom: 2px solid transparent;
}

.newsletter-card-image {
    width: 100% !important;
    height: 90px !important;
    flex-shrink: 0;
    background-color: #fff;
    
    /* Centramento absoluto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    border-bottom: 1px solid #f9f9f9;
    overflow: hidden;
    
    /* Remove qualquer padding que possa estar a empurrar a imagem */
    padding: 0 !important; 
}


/* --- LIMPEZA DRUPAL + AJUSTE DE RESPIRAÇÃO --- */
.newsletter-card-image .field,
.newsletter-card-image .field__item,
.newsletter-card-image .field__items {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- A IMAGEM EM SI (Onde damos o espaço) --- */
.newsletter-card-image img {
    /* Define que a imagem só pode ocupar 80% do espaço, 
       criando automaticamente uma margem de 10% a toda a volta */
    max-width: 85% !important; 
    max-height: 80% !important; 
    
    /* Mantém a proporção e centra */
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
}


.newsletter-card-body {
    flex-grow: 1; 
    padding: 10px 20px 0px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    box-sizing: border-box;
}

.newsletter-card-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 5px 0 !important;
    line-height: 1.2;
}

.newsletter-card-date {
    font-size: 1rem !important;
    color: #666 !important;
    font-style: italic;
    margin-bottom: 10px !important;
}

.newsletter-card-divider {
    width: 40px;
    height: 3px;
    background-color: #0175AC;
    margin: 0 auto 15px auto !important;
}

.newsletter-card-summary {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
    width: 100%;
    box-sizing: border-box;

    /* HIFENIZAÇÃO ATIVA */
    text-align: justify !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    word-break: break-word;
}

.newsletter-card-footer {
    padding: 0 25px 25px 25px !important;
    margin-top: auto;
}

.newsletter-card-arrow {
    color: #0175AC !important;
    font-size: 1.5rem;
    font-weight: bold;
}

.newsletter-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    cursor: pointer;
}

/* Replicando o comportamento dos projetos nas Newsletters */
@media (min-width: 992px) {
    
    /* 1. Elevação e Sombra do Cartão */
    .newsletter-card-wrapper:hover {
        transform: scale(1.03); 
        box-shadow: 0 20px 50px rgba(1, 117, 172, 0.2); 
        /* Opcional: Se quiser a borda azul em baixo como nos projetos */
        border-bottom: 2px solid #0175AC;
        transition: all 0.3s ease !important;
    }

    /* 2. Preparação da Seta (Estado Inicial) */
    .newsletter-card-arrow {
        display: inline-block; /* Garante que o transform funcione */
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease !important;
    }

    /* 3. Animação da Seta no Hover */
    .newsletter-card-wrapper:hover .newsletter-card-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 991.98px) {
    /* Ativa a borda azul estática no mobile */
    .newsletter-card-wrapper {
        border-bottom: 3px solid #0175AC !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    }
	

	.newsletter-card-title {
    font-size: 1.25rem !important;
}
	
}

/* ==========================================================================
   K. PÁGINA INTERNA DA NEWSLETTER
   ========================================================================== */
   
   
/* ==========================================================================
   K.0 - SEPARADORES COM SOMBRA FULL-WIDTH (ENTRE ARTIGOS)
   ========================================================================== */

/* 1. Devolvemos a largura normal ao contentor principal */
.field--name-field-conteudo-da-newsletter {
    max-width: 800px !important; 
    margin: 0 auto;
    /* GARANTIA: Tem de estar visible para a sombra poder sair para os lados */
    overflow-x: visible !important; 
}

/* 2. Preparamos o artigo para receber a sombra no topo */
.paragraph--type--artigo-de-newsletter {
    position: relative;
    padding-top: 80px; /* Dá um grande respiro DEPOIS da sombra começar o artigo */
    margin-top: 60px;  /* Dá um grande respiro ANTES da sombra (afasta do artigo anterior) */
}

/* 3. O SEGREDO: O separador invisível que estica 100% do ecrã */
.paragraph--type--artigo-de-newsletter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Puxa para o centro exato do ecrã */
    width: 100vw; /* 100% da largura da janela do browser */
    height: 10px; /* Altura mínima para o teu Inset (sombra interna) funcionar bem */
    background-color: transparent;

    /* A TUA MAGIA DAS SOMBRAS */
    box-shadow: 
        /* 1. SOMBRA SUPERIOR EXTERNA */
        0 -15px 30px rgba(0,0,0,0.05), 
        /* 2. SOMBRA INFERIOR EXTERNA */
        0 15px 30px rgba(0,0,0,0.05),
        /* 3. SOMBRA INTERNA (INSET) NO TOPO */
        inset 0 20px 30px -20px rgba(0,0,0,0.1), 
        /* 4. SOMBRA DE TRANSIÇÃO FINAL */
        0 20px 30px -20px rgba(0,0,0,0.1) !important;
}

/* 4. SEGURANÇA GERAL DO SITE */
/* Evita que o 100vw crie uma barra de scroll horizontal irritante no Windows */
body {
    overflow-x: hidden;
}


/* K.1 - IMAGEM DE CAPA (field_nl_head_image) - CORREÇÃO DE CENTRAMENTO */
.field--name-field-nl-head-image {
    display: flex !important;       /* Força o comportamento Flex */
    justify-content: center !important; /* Centra horizontalmente */
    align-items: center !important;
    margin-top: 30px !important;
    margin-bottom: 60px !important; /* Ajustei para 100px para não ser excessivo, mas podes manter os 200px */
    width: 100% !important;
    clear: both;                     /* Limpa possíveis floats anteriores */
}

.field--name-field-nl-head-image img {
    max-width: 450px !important;    /* Ajusta o tamanho conforme necessário */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;      /* Reforço de centramento para browsers antigos */
}

/* K.1.1 - PREÂMBULO DA NEWSLETTER (TEXTO CORRIDO) */
.field--name-field-preambulo-newsletter {
    font-size: 1rem;       /* Ligeiramente maior que o corpo normal */
    line-height: 1.8;
    color: #555;              /* Cinza escuro para diferenciar do preto do artigo */
    text-align: justify;
    font-style: italic;       /* Itálico para dar o tom de introdução */
    max-width: 800px;         /* Alinhado com a largura dos artigos */
    margin: 0 auto 50px auto; /* Centrado com margem inferior para o conteúdo */
    padding: 0 20px;          /* Pequeno respiro lateral para mobile */
}

/* Opcional: Adiciona uma linha subtil abaixo do preâmbulo para separar dos artigos */
.field--name-field-preambulo-newsletter::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: #0175AC; /* Azul PRODEQ */
    margin: 30px auto 60px auto;  /* Centra a linha separadora */
}

/* ==========================================================================
   K.1.2 - DATA DE PUBLICAÇÃO DA NEWSLETTER
   ========================================================================== */

.field--name-field-data-de-publicacao-nl {
    width: 100%;
    max-width: 800px;               /* Mesma largura do texto dos artigos */
    margin: 0 auto 30px auto;       /* Centra e dá um respiro para o que vem a seguir */
    padding-left: 25px !important;  /* Margem de segurança igual à do texto */
    padding-right: 25px !important; /* Margem de segurança igual à do texto */
    box-sizing: border-box;         /* Impede que o padding parta a largura no mobile */
    
    /* Estilo editorial (opcional, podes ajustar ao teu gosto) */
    font-size: 1rem;
    color: #666;                    /* Cinza para ser discreto e não competir com o texto */
    font-style: italic;
    text-align: right;              /* Dá um toque de revista alinhar a data à direita */
}

/* ==========================================================================
   K.2 - ESTRUTURA DOS ARTIGOS (TEXTO A CONTORNAR A IMAGEM - FORÇADO)
   ========================================================================== */

.field--name-field-conteudo-da-newsletter {
    max-width: 800px; 
    margin: 0 auto;
}

/* TÍTULO DO ARTIGO (ISOLADO NO TOPO) */
.field--name-field-titulo-do-artigo {
    font-size: 2rem;
    color: #000000 !important;
    font-weight: 800;
    text-align: center !important;
    margin-bottom: 30px !important; 
    display: block !important;
    width: 100% !important;
    clear: both !important; /* Garante que o título reina sozinho no topo */
}

/* Opcional: Adiciona uma linha subtil abaixo do preâmbulo para separar dos artigos */
.field--name-field-titulo-do-artigo::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: #0175AC; /* Azul PRODEQ */
    margin: 30px auto 60px auto;  /* Centra a linha separadora */
}

/* IMAGEM DO ARTIGO (CORRIGIDA A CLASSE COM 'M' NO FIM) */
.field--name-field-artigo-imagem {
    float: left !important;
    clear: none !important;
    max-width: 45% !important; 
    margin-top: 6px !important; 
    margin-right: 25px !important; 
    margin-bottom: 25px !important;
    display: block !important;
}

.field--name-field-artigo-imagem img {
    width: 100% !important;
    max-height: 250px !important; /* Garante que não excede metade em altura e largura */
    height: auto !important;
    object-fit: contain !important; 
    border-radius: 4px;
    display: block !important;
}

/* Garante que o corpo do artigo não tem bloqueios para contornar a imagem */
.field--name-field-corpo-do-artigo {
    clear: none !important;
    overflow: visible !important; 
    display: block !important;
}

/* GARANTIA DE LIMPEZA NO FINAL DO ARTIGO */
.field--name-field-conteudo-da-newsletter .field__item::after {
    content: "";
    display: table;
    clear: both !important;
}

/* ==========================================================================
   K.2.1 - AJUSTES DE LEITURA (JUSTIFICADO, HIFENIZAÇÃO E MOBILE)
   ========================================================================== */

/* 1. Margens de Segurança para Janelas Pequenas / Mobile */
.paragraph--type--artigo-de-newsletter {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
	font-size: 1rem !important;
    padding-left: 25px !important;  /* Margem lateral esquerda inquebrável */
    padding-right: 25px !important; /* Margem lateral direita inquebrável */
    box-sizing: border-box;         /* Garante que o padding não estica a caixa além dos 800px */
}

/* 2. Texto Justificado + Hifenização Automática */
.field--name-field-intro-texto,           /* Editorial da newsletter - pagina dos cartoes */
.field--name-field-preambulo-newsletter,  /* Preambulo da newsletter */
.newsletter-card-summary,                 /* Texto cartão */
.field--name-field-corpo-do-artigo {      /* Artigo Newsletter */
    text-align: justify !important;
    
    /* Ativa a hifenização (separação de sílabas) em todos os browsers */
    -webkit-hyphens: auto !important; /* Safari e Chrome */
    -ms-hyphens: auto !important;     /* Edge */
    hyphens: auto !important;         /* Standard */
    
    /* Evita que links longos ou palavras gigantes partam a largura da página */
    word-break: break-word; 
    overflow-wrap: break-word;
}



/* ==========================================================================
   K.3 - ÁREA DOS AUTORES (UNIFORMIZADO E CENTRADO)
   ========================================================================== */

/* 1. REGRAS GERAIS DE FOTOS (Tamanho 140x170 para todos) */
.field--name-field-foto-do-autor-artigo img,
.field--name-field-preambulo-autores img {
    width: 140px !important; 
    height: 170px !important;
    object-fit: cover;
    border: 2px solid #0175AC !important;
    box-shadow: 0 0 15px rgba(1, 117, 172, 0.4) !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
}

/* 2. TIPOGRAFIA UNIFICADA */
.field--name-field-nome-do-autor-artigo {
    font-weight: 800 !important;
    color: #333 !important;
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.field--name-field-empresa-cargo-autor-artigo,
.field--name-field-empresa-autor-artigo {
    font-weight: 800 !important;
    font-style: italic !important;
    color: #0175AC !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* 3. LAYOUT IGUAL PARA TODOS (PREÂMBULO E ARTIGOS) */
/* Aplicamos o mesmo estilo de 'stack' vertical e centramento */
.field--name-field-preambulo-autores,
.field--name-field-nl-autores-artigo {
    display: flex !important;
    justify-content: center !important;
    gap: 60px; /* Espaço entre autores se houver mais que um lado a lado */
    flex-wrap: wrap;
    margin: 40px auto !important;
    width: 100% !important;
}

.field--name-field-preambulo-autores .paragraph,
.field--name-field-nl-autores-artigo .paragraph {
    display: flex !important;
    flex-direction: column !important; /* Foto em cima, texto em baixo */
    align-items: center !important;   /* Centra tudo horizontalmente */
    text-align: center !important;     /* Centra o texto */
    max-width: 300px !important;       /* Limita a largura para o texto não espalhar */
}

/* Ajuste para garantir que os campos de texto não herdam grids antigos */
.field--name-field-nl-autores-artigo .field {
    display: block !important;
    width: 100% !important;
}

/* 6. RESPONSIVIDADE (Mobile) */
@media (max-width: 991.98px) {
    .field--name-field-nl-autores-artigo .paragraph {
        grid-template-columns: 1fr !important; /* Foto em cima no telemóvel */
        justify-items: center !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    .field--name-field-nl-autores-artigo .field--name-field-foto-do-autor-artigo,
    .field--name-field-nl-autores-artigo .field--name-field-nome-do-autor-artigo,
    .field--name-field-nl-autores-artigo .field--name-field-empresa-cargo-autor-artigo,
    .field--name-field-nl-autores-artigo .field--name-field-empresa-autor-artigo {
        grid-column: 1 !important;
    }
    .field--name-field-nl-autores-artigo .field--name-field-foto-do-autor-artigo {
        grid-row: 1 !important;
        margin-bottom: 15px !important;
    }
	
	.field--name-field-titulo-do-artigo {
    font-size: 1.5rem;
    color: #000000 !important;
    font-weight: 800;
    text-align: center !important;
    margin-bottom: 30px !important; 
    display: block !important;
    width: 100% !important;
    clear: both !important; /* Garante que o título reina sozinho no topo */

}

}


/* ==========================================================================
   L. NEWS & ASSEMBLY CARDS (CENTRADO E COM HIFENIZAÇÃO)
   ========================================================================== */

/* 1. GRELHA (Contentor Pai) */
.news-highlights-grid .view-content{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    /* CENTRAMENTO: Garante que 1 ou 2 cartões fiquem no meio da página */
    justify-content: center !important; 
    gap: 40px !important; 
    width: 100% !important;
    max-width: 1320px;
    margin: 40px auto !important;
}

/* 2. CADA ITEM (A Coluna da View) */
.news-highlights-grid .views-row{
    /* MÁXIMO 3 POR LINHA: O '0 0' impede que o cartão estique para ocupar o vazio */
    flex: 0 0 calc(33.333% - 27px) !important; 
    display: flex !important;
    min-width: 320px !important;
    max-width: 400px !important;
    margin-bottom: 30px !important;
}

/* 3. O CARTÃO (Wrapper) */
.news-assembly-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Faz todos os cartões da mesma linha terem altura igual */
    width: 100% !important;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent; 
}

/* 4. IMAGEM DO CARTÃO */
.news-assembly-card-image {
    width: 100% !important;
    height: 120px !important;
    flex-shrink: 0;
    background-color: #fff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f9f9f9;
    padding: 0 !important;
}

.news-assembly-card-image img {
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important;
}

/* 5. CORPO DO CARTÃO */
.news-assembly-card-body {
    flex-grow: 1; /* Empurra o footer/seta para o fundo */
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.news-assembly-card-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 5px 0 !important;
    line-height: 1.2;
    font-style: normal !important;
}

.news-assembly-card-date {
    font-size: 1rem !important;
    color: #666 !important;
    font-style: italic;
    margin-bottom: 10px !important;
}

.news-assembly-card-divider {
    width: 40px;
    height: 3px;
    background-color: #0175AC;
    margin: 0 auto 15px auto !important;
}

.news-assembly-card-summary {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
    
    /* HIFENIZAÇÃO E JUSTIFICAÇÃO (PEDIDO) */
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    word-break: break-word;
}

/* 6. FOOTER E SETA */
.news-assembly-card-footer {
    padding: 0 25px 25px 25px !important;
    margin-top: auto;
}

.news-assembly-card-arrow {
    color: #0175AC !important;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease !important;
}

.news-assembly-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    cursor: pointer;
}


/* ==========================================================================
   AJUSTE MOBILE (LARGURA FIXA E EMPILHADO)
   ========================================================================== */

/* 1. Comportamento Desktop (Lado a lado) */
.node--type-pagina-noticias-geral .field--name-field-botao-arquivo-projetos.field__items {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 40px auto !important;
}

/* 2. Regras comuns para o Botão (Link) */
.node--type-pagina-noticias-geral .field--name-field-botao-arquivo-projetos .prodeq-pill-link {
  width: 300px !important;         /* Mantém a largura que pediste */
  min-height: 70px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
}

/* 3. AJUSTE MOBILE: Forçar um por cima do outro e centrados */
@media (max-width: 768px) {
  .node--type-pagina-noticias-geral .field--name-field-botao-arquivo-projetos.field__items {
    flex-direction: column !important; /* Muda de linha para coluna */
    align-items: center !important;    /* Garante o centramento horizontal */
    gap: 0px !important;              /* Espaço vertical entre os dois */
  }

  .node--type-pagina-noticias-geral .field--name-field-botao-arquivo-projetos .prodeq-pill-link {
    /* Mantém os 300px no mobile, a menos que o ecrã seja mais pequeno que 300px */
    max-width: 100% !important; 
  }
}



/* 7. INTERATIVIDADE (DESKTOP) */
@media (min-width: 992px) {
    .news-assembly-card-wrapper:hover {
        transform: scale(1.03);
        box-shadow: 0 20px 50px rgba(1, 117, 172, 0.2);
        border-bottom: 2px solid #0175AC;
    }

    .news-assembly-card-wrapper:hover .news-assembly-card-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 8. AJUSTE MOBILE (UMA COLUNA CENTRADA) */
@media (max-width: 991.98px) {
    .news-highlights-grid .views-row{
        flex: 0 0 100% !important; /* Ocupa largura total */
        max-width: 400px !important; /* Mas não estica demais em tablets */
        margin-left: auto !important;
        margin-right: auto !important;
    }
	/* Ativa a borda azul estática no mobile */
    .news-assembly-card-wrapper {
        border-bottom: 3px solid #0175AC !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    }
    .news-assembly-card-arrow {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

	.field--name-field-titulo-grelha-cartoes-news.field__item {
    
    /* Estilo do Texto */
    font-size: 2rem !important;
	}
	.news-assembly-card-summary {
		font-size: 1rem!important;
	}
	
	.news-assembly-card-title {
		font-size: 1.5.rem!important;
	}
	
	.news-assembly-card-date {
		font-size: 1rem!important;
	}
}




/* ==========================================================================
   M LISTA DE ARQUIVO (3 COLUNAS, ALTURA 80PX)
   ========================================================================== */

/* 1. Contentor da Lista */
.arquivo-news-ag .view-content {
    max-width: 1200px; /* Largura máxima da tabela */
    margin: 40px auto 80px auto; /* Centraliza o bloco todo na página */
    display: flex;
    flex-direction: column;
    padding: 0 40px; /* MARGENS LATERAIS: Ajusta aqui a distância das bordas */
    box-sizing: border-box;
}

/* 2. A LINHA (ROW) - Altura Fixa de 80px */
a.arquivo-news-ag {
    display: flex;
    align-items: center;      
    justify-content: space-between;

    /* AQUI: Altura reduzida para 80px */
    height: 80px;            
    padding: 0 20px;          /* Padding lateral ligeiramente reduzido */

    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    /* Barra Lateral Transparente */
    border-left: 6px solid transparent;

    text-decoration: none !important;
    color: #000;
    transition: all 0.2s ease;
}

/* --- AS 3 COLUNAS IGUAIS (33% CADA) --- */
.col-logo, 
.col-titulo, 
.col-data {
    flex: 1;                  /* Largura igual para todos */
    display: flex;            
    align-items: center;      
    height: 100%;             
    overflow: hidden;         
}

/* 3. Coluna Esquerda (Logo Projeto) - Alinhada à Esquerda */
.col-logo {
    justify-content: flex-start; 
}

.col-logo img {
    /* Altura máxima ajustada para caber em 80px com folga */
    max-height: 60px;         
    width: auto;
    max-width: 100%;          
    object-fit: contain;
    object-position: left;
}

/* 4. Coluna Centro (Título) - ALINHAMENTO FORÇADO */
.col-titulo {
    display: flex !important;
    align-items: center !important;   /* Força o centro vertical */
    justify-content: center !important; /* Força o centro horizontal */
    
    height: 100%;             /* Ocupa a altura toda da linha */
    padding: 0 5px;           /* Pequena margem lateral */
    margin: 0;
}

/* O SEGREDO: Removemos todas as margens de qualquer coisa que esteja lá dentro */
.col-titulo * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important; /* Garante que as linhas de texto não empurram para cima */
    border: none !important;
}

a.arquivo--news-ag .col-titulo {
    /* Estilos do Texto */
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    color: #000000;
    text-transform: uppercase;
    
    /* Previne quebras estranhas */
    white-space: normal;
}

/* Coluna 3: Data (Direita) */
.col-data, .arquivo-news-ag .views-field-created {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #666 !important;
	justify-content: flex-end; 
	font-style: italic !important;
}
}



/* ==========================================================================
   HOVER EFFECTS (SÓ DESKTOP)
   ========================================================================== */
@media (min-width: 992px) {
    a.arquivo-news-ag:hover {
        background-color: #fafafa;
        border-left-color: #0175AC; /* Barra azul aparece */
    }

    a.arquivo-news-ag:hover .col-titulo {
        color: #0175AC !important; /* Título fica azul */
    }
}

/* ==========================================================================
   MOBILE (Ajuste para empilhar com bom espaçamento)
   ========================================================================== */
@media (max-width: 768px) {
    a.arquivo--news-ag {
        flex-direction: column;
        height: auto;          /* Altura automática para caber tudo */
        
        /* Mais espaço em cima e em baixo dentro da caixa */
        padding: 40px 20px;    
        
        /* AQUI ESTÁ O "PAD": Cria 30px de espaço entre cada elemento */
        gap: 30px;             
        
        border-left: none;
    }

    /* Reset das colunas para ocuparem a largura toda */
    .col-logo, .col-titulo, .col-data {
        flex: auto;
        width: 100%;
        justify-content: center !important; 
        height: auto;          /* Importante para não cortar as margens */
    }

    /* Ajuste Logo Cima */
    .col-logo img { 
        height: 70px;          /* Tamanho bom para mobile */
        object-position: center; 
        margin-bottom: 5px;   /* Empurra um pouco mais o título */
    }

    /* Ajuste Título */
    .col-titulo {
        /* Garante que o título tem espaço para respirar */
        padding: 0 10px;
    }
    
    /* Ajuste Logo Baixo */
    .col-data img {
        height: 50px;
        object-position: center;
        margin-top: 5px;      /* Afasta-se um pouco mais do título */
    }
}


/* ==========================================================================
   N - PÁGINA DE ASSEMBLEIA GERAL (ESTRUTURA COMPLETA)
   ========================================================================== */
   
/* ==========================================================================
   N.0 - SEPARADORES COM SOMBRA FULL-WIDTH (ENTRE ARTIGOS)
   ========================================================================== */


/* 2. Preparamos o artigo para receber a sombra no topo */
.field--name-field-convocatoria-ag, 
.field--name-field-titulo-ag{
    position: relative;
    padding-top: 80px; /* Dá um grande respiro DEPOIS da sombra começar o artigo */
    margin-top: 60px;  /* Dá um grande respiro ANTES da sombra (afasta do artigo anterior) */
}

/* 3. O SEGREDO: O separador invisível que estica 100% do ecrã */
.field--name-field-convocatoria-ag::before,
.field--name-field-titulo-ag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Puxa para o centro exato do ecrã */
    width: 100vw; /* 100% da largura da janela do browser */
    height: 10px; /* Altura mínima para o teu Inset (sombra interna) funcionar bem */
    background-color: transparent;

    /* A TUA MAGIA DAS SOMBRAS */
    box-shadow: 
        /* 1. SOMBRA SUPERIOR EXTERNA */
        0 -15px 30px rgba(0,0,0,0.05), 
        /* 2. SOMBRA INFERIOR EXTERNA */
        0 15px 30px rgba(0,0,0,0.05),
        /* 3. SOMBRA INTERNA (INSET) NO TOPO */
        inset 0 20px 30px -20px rgba(0,0,0,0.1), 
        /* 4. SOMBRA DE TRANSIÇÃO FINAL */
        0 20px 30px -20px rgba(0,0,0,0.1) !important;
}

/* 4. SEGURANÇA GERAL DO SITE */
/* Evita que o 100vw crie uma barra de scroll horizontal irritante no Windows */
body {
    overflow-x: hidden;
}

/* 2. IMAGEM (Centrada, logo abaixo do título) */
.field--name-field-imagem-de-capa-ag {
    text-align: center !important;
    margin-bottom: 40px !important;
	margin-top: 40px !important;
    display: block !important;
}

.field--name-field-imagem-de-capa-ag img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
}


/* 3. CONVOCATÓRIA (Título com etiqueta e barra azul) */
.field--name-field-convocatoria-ag .field__label,
.field--name-field-titulo-ag {
    font-size: 2.8rem;
    color: #000000 !important;
    font-weight: 800;
    text-align: center !important;
    margin-bottom: 30px !important; 
    display: block !important;
    width: 100% !important;
    clear: both !important; /* Garante que o título reina sozinho no topo */
}

.field--name-field-convocatoria-ag .field__label::after,
.field--name-field-resumo-ag .field__label::after,
.field--name-field-titulo-ag::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: #0175AC; /* Azul PRODEQ */
    margin: 30px auto 60px auto;  /* Centra a linha separadora */
}

/* 4. AJUSTES DE LEITURA  */

.field--name-field-convocatoria-ag .field__item,
.field--name-field-resumo-ag .field__item {
    width: 100%;
	font-size: 1rem !important;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px !important;  /* Margem lateral esquerda inquebrável */
    padding-right: 25px !important; /* Margem lateral direita inquebrável */
    box-sizing: border-box;         /* Garante que o padding não estica a caixa além dos 800px */
	text-align: justify !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    word-break: break-word;
}




/* ==========================================================================
   N - ASSEMBLEIAS GERAIS (DESIGN FINAL COM ÍCONE)
   ========================================================================== */

/* 1. TÍTULO CENTRAL (ASSEMBLEIA GERAL) */
.field--name-field-titulo-ag {
    text-align: center !important;
    margin: 40px auto 10px auto !important;
}

.field--name-field-titulo-ag.field__item {
    font-weight: 800 !important;
    font-size: 2.8rem !important;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
}

.field--name-field-titulo-ag .field__item::after {
    content: "" !important;
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 4px;
    background-color: #0175AC !important;
}

/* 2. MOLDURA DA DATA COM ÍCONE DE CALENDÁRIO */
.field--name-field-data-ag {
    display: table !important;
    margin: 30px auto !important;
    border: 2px solid #0175AC !important;
    background-color: #ffffff !important;
    padding: 20px 20px !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(1, 117, 172, 0.12) !important;
    text-align: center !important;
    position: relative;
}



/* 6. DATA DA ASSEMBLEIA (Centrada após o título) */
.field--name-field-data-ag .field__label {
    text-align: center;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.field--name-field-data-ag .field__item {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;
}



/* 7. RESUMO (Subtítulo + Texto corrido) */
.field--name-field-resumo-ag .field__label {
    font-size: 2.8rem;
    color: #000000 !important;
    font-weight: 800;
    text-align: center !important;
    margin-bottom: 30px !important; 
    display: block !important;
    width: 100% !important;
    clear: both !important; /* Garante que o título reina sozinho no topo */
}

.field--name-field-resumo-ag .field__item {
    color: #000000 !important;
}




@media (max-width: 991.98px) {
    .field--name-field-resumo-ag .field__label {
    font-size: 2rem;
	}



.field--name-field-data-ag .field__item {
    text-align: center;
    font-weight: 700;
    font-size: 1.125rem;
	
	}



.field--name-field-data-ag .field__label {
    text-align: center;
    font-weight: 800;
    font-size: 1.25rem;
	}


.field--name-field-titulo-ag.field__item {
    font-weight: 800 !important;
    font-size: 2rem !important;
	}
}


/* ==========================================================================
   O - PÁGINA DE NOTÍCIAS (ESTRUTURA INSTITUCIONAL)
   ========================================================================== */
   
   
/* 1. Preparamos o artigo para receber a sombra no topo */
.field--name-field-imagem-news, 
.field--name-field-anexos{
    position: relative;
    padding-top: 80px; /* Dá um grande respiro DEPOIS da sombra começar o artigo */
    margin-top: 60px;  /* Dá um grande respiro ANTES da sombra (afasta do artigo anterior) */
}

/* 2. O SEGREDO: O separador invisível que estica 100% do ecrã */
.field--name-field-imagem-news::before,
.field--name-field-anexos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Puxa para o centro exato do ecrã */
    width: 100vw; /* 100% da largura da janela do browser */
    height: 10px; /* Altura mínima para o teu Inset (sombra interna) funcionar bem */
    background-color: transparent;

    /* A TUA MAGIA DAS SOMBRAS */
    box-shadow: 
        /* 1. SOMBRA SUPERIOR EXTERNA */
        0 -15px 30px rgba(0,0,0,0.05), 
        /* 2. SOMBRA INFERIOR EXTERNA */
        0 15px 30px rgba(0,0,0,0.05),
        /* 3. SOMBRA INTERNA (INSET) NO TOPO */
        inset 0 20px 30px -20px rgba(0,0,0,0.1), 
        /* 4. SOMBRA DE TRANSIÇÃO FINAL */
        0 20px 30px -20px rgba(0,0,0,0.1) !important;
}

/* 3. SEGURANÇA GERAL DO SITE */
/* Evita que o 100vw crie uma barra de scroll horizontal irritante no Windows */
body {
    overflow-x: hidden;
}



/* 4. IMAGEM COM BORDA AZUL PRODEQ */
.field--name-field-imagem-news {
    display: flex;
    justify-content: center;
    width: 90%;
	margin-left: auto;
    margin-right: auto;
    padding-left: 25px !important;  /* Margem lateral esquerda inquebrável */
    padding-right: 25px !important; /* Margem lateral direita inquebrável */

}

.field--name-field-imagem-news img {
	display: inline-block;
    max-width: 100% !important;    /* Deixa um pequeno respiro lateral */
    height: auto !important;
    border-radius: 4px;
    border: 3px solid #0175AC !important; /* MOLDURA AZUL PRODEQ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


/* 5. CORPO DA NOTÍCIA (Texto corrido e justificado) */
.field--name-field-corpo-news {
	font-size: 1rem !important;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px !important;  /* Margem lateral esquerda inquebrável */
    padding-right: 25px !important; /* Margem lateral direita inquebrável */
    box-sizing: border-box;         /* Garante que o padding não estica a caixa além dos 800px */
	text-align: justify !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    word-break: break-word;
}


/* 6. VÍDEO RESPONSIVO (Agora espelha o comportamento do texto) */
.field--name-field-video-news {
    width: 100%;
    max-width: 800px;               /* IGUAL AO TEXTO */
    margin: 60px auto !important;   /* Centra na página */
    padding-left: 25px !important;  /* MARGEM IGUAL AO TEXTO */
    padding-right: 25px !important; /* MARGEM IGUAL AO TEXTO */
    box-sizing: border-box;
}

/* Moldura para o vídeo */
.field--name-field-video-news .field__item {
    position: relative;
    padding-bottom: 56.25%;      
    height: 0;
    overflow: hidden;
}

/* Garante que o iframe ocupa o espaço interno da moldura com borda */
.field--name-field-video-news iframe, 
.field--name-field-video-news video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;      
    height: 100% !important;     
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 3px solid #0175AC !important; /* Moldura movida para o container do item */
    border-radius: 4px; /* Para condizer com a imagem */
}


/* ==========================================================================
   O.2 - ANEXOS: CARDS DE DOCUMENTO E IMAGEM (CENTRADOS)
   ========================================================================== */
   
/* 0. CENTRAR O LABEL DOS ANEXOS E A BARRINHA */
.field--name-field-anexos .field__label {
    width: 100%;                  /* Força o label a ocupar a linha toda */
    text-align: center !important; /* Centra o texto */
    font-weight: 800 !important;
    font-size: 2.8rem !important;
    color: #000000 !important;
    display: block !important;    /* Mudado de inline-block para block para aceitar o text-align */
    padding-bottom: 15px;
    margin-bottom: 25px;
    position: relative;
}



.field--name-field-anexos .field__label::after {
    content: "" !important;
    position: absolute;
    bottom: 0;
    left: 50% !important;         /* Move para o centro */
    transform: translateX(-50%);  /* Ajuste preciso para centrar a barra */
    width: 80px;                  /* Largura fixa da barrinha */
    height: 4px;
    background-color: #0175AC !important;
}


/* 1. CONTAINER DA GRELHA (Centrado na Página) */
.field--name-field-anexos .field__items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    margin-top: 30px !important;
    justify-content: center !important; /* CENTRA OS CARDS NA PÁGINA */
    max-width: 1000px; /* Alinhado com a largura da página básica */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. O CARD (Link do Anexo) */
.field--name-field-anexos .field__item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* CENTRA O CONTEÚDO VERTICALMENTE NO CARD */
    width: 170px !important;
    height: 210px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 15px !important; /* Ajustado para melhor equilíbrio */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 3. A "PREVIEW" VISUAL (O retângulo de cima) */
.field--name-field-anexos .field__item a::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 85px !important;
    height: 110px !important;
    margin-bottom: 12px !important; /* Reduzi ligeiramente para dar ar ao título */
    font-weight: 900 !important;
    font-size: 1.3rem !important;
    border-radius: 4px !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0; /* Impede que a preview encolha se o título for grande */
}

/* 3.1--- ESTILO PDF (Aspeto de Documento) --- */
.field--name-field-anexos .field__item a[href$=".pdf"]::before {
    content: "PDF" !important;
    background: #fdfdfd !important;
    border: 1px solid #eee !important;
    border-top: 15px solid #e74c3c !important; 
    color: #e74c3c !important;
}

/* 3.2--- ESTILO IMAGEM (Aspeto de Fotografia/Galeria) --- */
.field--name-field-anexos .field__item a[href$=".png"]::before,
.field--name-field-anexos .field__item a[href$=".jpg"]::before,
.field--name-field-anexos .field__item a[href$=".jpeg"]::before {
    content: "IMG" !important;
    background: #f4f9fc !important; 
    border: 2px solid #0175AC !important; 
    color: #0175AC !important;
    background-image: linear-gradient(45deg, #0175AC 25%, transparent 25%), 
                      linear-gradient(-45deg, #0175AC 25%, transparent 25%);
    background-size: 15px 15px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* 3.3. O TÍTULO (Centrado por baixo da preview) */
.field--name-field-anexos .field__item a {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.2;
    overflow: hidden;
    width: 100%; /* Garante que o texto usa a largura do card */
}

/* 3.4. LIMPEZA E HOVER */
.field--name-field-anexos .file { background: none !important; padding: 0 !important; }

@media (min-width: 992px) {
    .field--name-field-anexos .field__item a:hover {
        border-color: #0175AC !important;
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 20px rgba(1, 117, 172, 0.15) !important;
    }
}



/* 2. DATA DE PUBLICAÇÃO (Moldura centrada com ícone, estilo Assembleias) */

.field--name-field-data-de-publicacao-news {
    width: 100%;
    max-width: 800px;               /* Mesma largura do texto dos artigos */
    margin: 0 auto 30px auto;       /* Centra e dá um respiro para o que vem a seguir */
    padding-left: 25px !important;  /* Margem de segurança igual à do texto */
    padding-right: 25px !important; /* Margem de segurança igual à do texto */
    box-sizing: border-box;         /* Impede que o padding parta a largura no mobile */
    
    /* Estilo editorial (opcional, podes ajustar ao teu gosto) */
    font-size: 1rem;
    color: #666;                    /* Cinza para ser discreto e não competir com o texto */
    font-style: italic;
    text-align: right;              /* Dá um toque de revista alinhar a data à direita */
}

/* 7. AJUSTE MOBILE (Consistência total) */
@media (max-width: 991.98px) {
    .field--name-field-anexos .field__label {
		font-weight: 800 !important;
		font-size: 2rem !important;
		color: #000000 !important;

	}
}