/* ==========================================================================
   1. ESCUDO GLOBAL CONTRA TRANSBORDO (ANTI-PINCH OUT)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

html,
body {
    /* CORREÇÃO: overflow-x deve ser 'hidden' para evitar o desvio horizontal */
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: var(--pearl-body);
    line-height: 1.6;
}

a {
    text-decoration: none;
    transition: 0.3s ease;
    color: #000000;
}

ul {
    list-style: none;
}

:root {
    --primary-red: #000018;

    /* Azul Escuro Institucional */
    --accent-red: #b00e26;
    --accent-red-dark: #8a0b1e;

    /* Vermelho Pragmatur */
    --dark-grey: #2e2e2e;
    --light-grey: #f5f5f5;

    /* Variáveis Madre Pérola */
    --pearl-light: #ffffff;
    --pearl-body: #fcfaf8;
    --pearl-shadow: #edebe9;
    --pearl-gradient: linear-gradient(135deg, var(--pearl-light) 0%, var(--pearl-body) 50%, var(--pearl-shadow) 100%);
}

/* ==========================================================================
   2. HEADER: A ILHA FLUTUANTE (COM TROCA DE LOGO)
   ========================================================================== */
header {
    /* 1. Layout Flexbox e Posição Fixa */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    z-index: 1000;
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);

    /* 2. Dimensões da Ilha (Estado Inicial Grande) */
    width: calc(100% - 12px);
    max-width: none;
    height: 90px;

    /* Começa com 90px */
    /* 3. Efeito Vidro Apple */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(40px) saturate(210%);
    -webkit-backdrop-filter: blur(40px) saturate(210%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);

    /* Sombra Inicial */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);

    /* Transição suave para tudo */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   ESTADO SCROLLED (Quando desces a página)
   ========================================================= */
header.scrolled {
    height: 70px !important;

    /* Encolhe para 70px */
}

/* =========================================================
   LÓGICA DO LOGÓTIPO (MÉTODO INFALÍVEL)
   ========================================================= */
.logo {
    display: flex;
    align-items: center;
    height: 100%;
    width: 220px;
    flex-shrink: 0;
}

/* 1. Estado Inicial (Topo): Mostra Texto, Esconde Ícone */
header .logo-text {
    display: block;
    height: 42px;
    width: auto;
    transition: opacity 0.3s ease;
}

header .logo-icon {
    display: none;

    /* Escondido de início */
    height: 40px;
    width: auto;
}

/* 2. Estado Scrolled: Esconde Texto, Mostra Ícone */
header.scrolled .logo-text {
    display: none !important;

    /* Força o texto a desaparecer */
}

header.scrolled .logo-icon {
    display: block !important;

    /* Força o ícone a aparecer */
    animation: iconPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes iconPop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   NAVEGAÇÃO
   ========================================================= */
nav ul {
    display: flex;
    gap: 35px;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav a {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: 0.3s ease;
}

nav a:hover {
    color: var(--accent-red);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.lang-switch {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--dark-grey);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-active {
    font-weight: 700;
    color: var(--primary-red);
}

.lang-link {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.lang-link:hover {
    color: var(--accent-red);
}

/* ==========================================================================
   3. BOTÕES UNIFICADOS (TIPOGRAFIA & VIDRO 3D) 💎
   ========================================================================== */
/* 1. O SEGREDO DA UNIFICAÇÃO: Força Montserrat e o espaçamento em tudo o que é botão */
.btn,
.link-arrow,
button,
input[type="submit"],
.cookie-banner button {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;

    /* Isto garante que o texto não pareça diferente */
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    -webkit-font-smoothing: antialiased;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. BOTÃO PRINCIPAL (AZUL PROFUNDO) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 32px;
    background: rgba(0, 0, 15, 0.92) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.btn:hover {
    background: var(--accent-red) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(176, 14, 38, 0.4);
}

/* 3. LINK ARROW (VIDRO CLARO) */
.link-arrow {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    color: var(--primary-red) !important;
}

.link-arrow:hover {
    background: var(--accent-red) !important;
    color: white !important;
    border-color: var(--accent-red) !important;
    transform: translateY(-2px) translateX(4px);
    box-shadow: 4px 8px 20px rgba(176, 14, 38, 0.25);
}

.hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: flex-start;
    padding-top: 23vh;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-top: 0px;
    background-repeat: no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 31, 40, 0.60) 0%, rgba(10, 31, 40, 0.30) 50%, rgba(10, 31, 40, 0.15) 100%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-content {
    max-width: 800px;
    color: #ffffff;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hero p {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 35px;
    opacity: 0.95;
    color: #ffffff;
}

.hero-home {
    background-image: url('../img/hero-home.jpg');
}

.hero-sobre {
    background-image: url('../img/hero-sobre.jpg');
}

.hero-servicos {
    background-image: url('../img/hero-servicos.jpg');
}

.hero-contactos {
    background-image: url('../img/hero-contactos.jpg');
}

/* ==========================================================================
   5. SEÇÕES & CARDS (DESIGN SPATIAL & VIDRO 3D) 💎
   ========================================================================== */
/* --- SOCIAL PROOF (CORRIGIDO PARA CENTRAR TUDO) --- */
.social-proof {
    padding: 80px 5%;
    text-align: center;
    background: radial-gradient(circle at center, #ffffff 0%, #fcfaf8 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;

    /* O SEGREDO DO CENTRO: Transformamos a secção num flex vertical */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Isto obriga o bloco de indicadores a ir para o meio */
}

.target-line {
    margin-bottom: 50px;
    width: 100%;

    /* Garante que a linha não encolhe */
}

.social-proof-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dark-grey);
    margin-bottom: 20px;
    line-height: 1.3;
}

.social-proof-text {
    font-size: 1.05rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* --- INDICADORES: LARGURA CONTROLADA --- */
.indicators {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;

    /* Largura controlada */
    width: 100%;
    max-width: 1000px;

    /* Limita a largura total */
    /* Margens automáticas (segurança extra) */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mantém os cartões bonitos e limitados */
/* Garante que todos têm a mesma largura exata */
.indicator-item {
    /* O TRUQUE: 'flex: 1' obriga todos a terem a mesma largura */
    flex: 1;

    /* Largura mínima para garantir que não ficam esmagados no telemóvel */
    min-width: 280px;

    /* Removemos o max-width individual para eles poderem esticar juntos */
    /* max-width: 350px; <--- APAGADO */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 24, 0.03);
    border-radius: 16px;
    padding: 35px 30px;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.indicator-item:hover {
    transform: translateY(-8px);
    background: #ffffff;
    border-color: rgba(176, 14, 38, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 24, 0.08);
}

.indicator-item h4 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-red);
    margin-bottom: 10px;
    text-shadow: 2px 4px 10px rgba(0, 0, 24, 0.1);
    letter-spacing: -0.02em;
}

.indicator-item p {
    font-size: 0.85rem;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- SERVIÇOS: ESTRUTURA E GRELHA (PRESERVADA) --- */
.services {
    padding: 100px 5%;
}

.section-title {
    margin-bottom: 50px;
    font-size: 1.8rem;
    color: var(--dark-grey);
    border-left: 5px solid var(--accent-red);
    padding-left: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

/* Homepage: layout 3+2 centrado (LOGICA MANTIDA) */
.services .grid {
    grid-template-columns: repeat(6, 1fr);
}

.services .grid .card {
    grid-column: span 2;
}

.services .grid .card:nth-child(4) {
    grid-column: 2 / span 2;
}

.services .grid .card:nth-child(5) {
    grid-column: 4 / span 2;
}

/* --- CARTÕES DE VIDRO 3D (Refinados) --- */
.card {
    background: rgba(252, 250, 248, 0.7) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px;
    position: relative;
    overflow: visible !important;

    /* Essencial para o salto 3D */
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 24, 0.04);
}

.card:hover {
    transform: translateY(-12px) scale(1.01);
    background: rgba(252, 250, 248, 0.95) !important;
    box-shadow: 0 35px 70px rgba(0, 0, 24, 0.12);
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Reflexo de luz dinâmico */
.card::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    opacity: 0;
    transition: 0.5s ease;
}

.card:hover::after {
    opacity: 1;
}

.card-content {
    padding: 40px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    /* Esta é a chave: faz a div ocupar o espaço todo */
    padding: 30px;

    /*  */
}

/* No css/style.css, verifica a classe .card-content .link-arrow */
.card-content .link-arrow {
    margin-top: auto;

    /* Empurra o botão para o fundo */
    align-self: flex-start;

    /* Mantém o botão à esquerda */
}

/* --- ACENTO RUBI 3D (Pop-out Lateral) --- */
.card h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--primary-red);
    text-transform: none;
    position: relative;
    padding-left: 20px;
    border-left: none !important;
    letter-spacing: 0.02em;
}

.card h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: var(--accent-red);
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover h3::before {
    transform: translateX(-18px) scaleX(1.5);

    /* Salto ligeiramente maior para impacto */
    background: #ce122d;
    box-shadow: 15px 5px 25px rgba(176, 14, 38, 0.4);
}

.card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* ==========================================================================
   6. CONTACTO & FORMULÁRIOS (MATERIAL DE VIDRO PREMIUM - SÓ DESIGN)
   ========================================================================== */
.contact-area {
    background-color: var(--light-grey);
    padding: 80px 5%;
    display: grid;

    /* Mantém a tua grelha original sem alterações */
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 50px;
    align-items: start;
}

.contact-form-container {
    /* 1. ESTÉTICA DE VIDRO (Sem mexer em larguras ou margens) */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(210%) !important;

    /* 2. BORDAS E SOMBRAS REFINADAS */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 20px;

    /* Cantos arredondados Spatial */
    padding: 20px;
    box-shadow: 0 40px 80px rgba(0, 0, 24, 0.12) !important;

    /* Nota: Removi width, max-width e justify-self para o Pinegrow mandar aqui */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;

    /* Ligeiramente menor e mais elegante */
    font-weight: 700;
    color: var(--dark-grey);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px;

    /* Mais espaço interno para conforto */
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;

    /* Inputs condizem com o container */
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: #ffffff !important;
    border-color: var(--accent-red);
    outline: none;

    /* Efeito de brilho e leve elevação ao clicar */
    box-shadow: 0 0 0 4px rgba(176, 14, 38, 0.1);
    transform: translateY(-2px);
}

/* Ajuste rápido para ecrãs pequenos apenas no preenchimento interno */
@media (max-width: 600px) {
    .contact-form-container {
        padding: 25px 20px;
    }
}

/* ==========================================================================
   6B. CONTACTOS - CANAIS DIRETOS
   ========================================================================== */
.contact-channel {
    margin-bottom: 40px;
}

.contact-label {
    margin-bottom: 5px;
}

.contact-note {
    font-size: 0.85rem;
    color: #666;
}

.form-privacy-note {
    font-size: 0.75rem;
    color: #999;
    margin-top: 15px;
    text-align: center;
}

.form-privacy-note a {
    color: var(--accent-red);
    text-decoration: underline;
}

.form-message {
    padding: 12px;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    font-size: 0.9rem;
}

.form-message[hidden] {
    display: none;
}

.form-message.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.form-message.error {
    background: #fbe9e7;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.office-highlights {
    margin-top: 30px;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ==========================================================================
   6C. MODAIS - LISTAS
   ========================================================================== */
dialog ul {
    margin: 20px 0;
    line-height: 1.8;
    list-style: disc;
    padding-left: 1.5rem;
}

/* ==========================================================================
   7. RODAPÉ INSTITUCIONAL (GLASSMORPHISM 3D)
   ========================================================================== */
footer {
    /* 1. EFEITO VIDRO ESCURO */
    background: rgba(0, 0, 24, 1) !important;

    /* Azul escuro com transparência */
    backdrop-filter: blur(25px) saturate(160%);
    -webkit-backdrop-filter: blur(25px) saturate(160%);
    color: #ffffff;
    padding: 80px 5% 40px 5%;
    position: relative;

    /* 2. EFEITO 3D (Luz de topo e profundidade) */
    border-top: 1px solid rgba(255, 255, 255, 0.12);

    /* Reflexo na borda superior */
    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.2);

    /* Sombra que "empurra" o footer para a frente */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col:nth-child(2) {
    text-align: center;
}

.footer-col:nth-child(3) {
    text-align: right;
}

/* --- CORREÇÃO DE VISIBILIDADE DO FOOTER (MOBILE) --- */
@media (max-width: 768px) {
    .footer-grid {
        /* 1. Transforma as 3 colunas numa lista vertical */
        grid-template-columns: 1fr !important;
        gap: 40px !important;

        /* Espaço entre as secções do footer */
        text-align: center !important;

        /* Centra o texto para ficar mais equilibrado */
    }

    .footer-col:nth-child(2),
    .footer-col:nth-child(3) {
        /* 2. Remove o alinhamento à direita/centro do desktop */
        text-align: center !important;
    }

    .footer-bottom {
        /* 4. Garante que o copyright também se ajusta */
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* LOGÓTIPO NO FOOTER (Com brilho suave) */
.logo-footer {
    font-size: 1.125rem !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    display: inline-block;
    transform: scale(1, 0.85);

    /* Squeeze original mantido */
    transition: 0.3s ease;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);

    /* Brilho leve */
}

.logo-footer:hover {
    color: var(--accent-red) !important;
    text-shadow: 0 0 15px rgba(176, 14, 38, 0.4);
}

.footer-col h4 {
    font-size: 1rem !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
}

.footer-col:nth-child(2) h4::after {
    left: 50%;
    transform: translateX(-50%);
}

.footer-col:nth-child(3) h4::after {
    left: auto;
    right: 0;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.7);

    /* Texto ligeiramente mais suave no vidro */
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-col a:hover {
    color: var(--accent-red);
    padding-left: 5px;

    /* Pequeno movimento 3D no hover */
}

.footer-legal {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.cmvm-reg span {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);

    /* Fundo sutil para o selo CMVM */
}

/* ==========================================================================
   8. COMPONENTES ESTRUTURAIS & MODAIS
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
}

.section {
    padding: 80px 0;
}

.section-white {
    background: var(--pearl-gradient);
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.section-light-grey {
    background-color: var(--light-grey);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    grid-area: 1 / 1 / 2 / 2;
    margin-top: 2px;
}

/* Alinha o topo das colunas na página de Contactos */
.section-contacts-grid .grid-2 {
    align-items: start;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: left;
    padding-top: 5%;
}

.stat-item h3 {
    font-size: 2.5rem;
    color: var(--primary-red);
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Acessibilidade: Labels visíveis apenas para leitores de ecrã */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   MODAIS COM EFEITO VIDRO (IGUAL À BARRA DE NAVEGAÇÃO)
   ========================================================================== */
dialog {
    /* 1. O MATERIAL DE VIDRO */
    background: rgba(255, 255, 255, 0.80) !important;

    /* Transparência para o efeito funcionar */
    backdrop-filter: blur(40px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(210%) !important;

    /* 2. BORDAS E IDENTIDADE */
    border: 1px solid rgba(255, 255, 255, 0.5);

    /* Borda fina de vidro */
    border-left: 6px solid var(--accent-red) !important;

    /* A tua borda vermelha original */
    border-radius: 8px;

    /* 3. DIMENSÕES E ESPAÇO */
    padding: 50px;
    max-width: 650px;
    width: 90%;

    /* 4. SOMBRA DE PROFUNDIDADE (Elevada) */
    box-shadow: 0 40px 80px rgba(0, 0, 24, 0.25) !important;
}

/* O Fundo escuro atrás do modal */
dialog::backdrop {
    background: rgba(10, 31, 40, 0.4);

    /* Azul escuro muito transparente */
    backdrop-filter: blur(8px);

    /* Desfoca o site atrás para destacar o modal */
    -webkit-backdrop-filter: blur(8px);
}

/* Ajuste do botão de fechar para combinar */
.modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    font-size: 1.2rem;

    /* Garantir que o X é visível */
    color: var(--dark-grey);
}

.modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
    color: var(--accent-red);
}

/* ==========================================================================
   8B. PÁGINA SOBRE NÓS (COM DESIGN SPATIAL 3D & MOBILE FIX)
   ========================================================================== */
/* 1. O CONTENTOR PRINCIPAL (Define o layout lado a lado) */
.about-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* Desktop: Lado a Lado */
    gap: 60px;
    align-items: center;
}

/* 2. TEXTO */
.about-with-image .about-text {
    max-width: none;
    margin-bottom: 0;
}

.about-text p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
}

/* 3. A NOVA MOLDURA DE VIDRO (IMAGEM) */
.about-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    min-height: 450px;

    /* Altura imponente em PC */
    /* Efeito Vidro/Acrílico */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);

    /* Sombra de elevação */
    box-shadow: 0 20px 50px rgba(0, 0, 24, 0.12);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Reflexo de luz na moldura */
.about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

/* Interação Hover */
.about-image:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0, 0, 24, 0.25);
    border-color: #ffffff;
}

.about-image:hover img {
    transform: scale(1.1);
}

/* --- REGRAS PARA MOBILE/TABLET (A MÁGICA ACONTECE AQUI) --- */
@media (max-width: 992px) {
    .about-with-image {
        /* Muda para Flexbox para podermos controlar a ordem */
        display: flex !important;
        flex-direction: column !important;

        /* Empilha verticalmente */
    }

    .about-text {
        order: 1;

        /* Força o texto para o TOPO */
        margin-bottom: 40px;

        /* Dá espaço antes da imagem */
    }

    .about-image {
        order: 2;

        /* Força a imagem para BAIXO */
        width: 100%;
        position: relative;
        min-height: 0px;

        /* Altura ajustada para telemóvel */
    }
}

/* --- BOTÕES E CTA --- */
.about-cta {
    margin-top: 30px;
}

.about-cta .btn {
    background-color: var(--primary-red) !important;
    color: #ffffff !important;
    border: 2px solid var(--primary-red) !important;
    font-weight: 900;
}

.about-cta .btn:hover {
    background-color: var(--accent-red) !important;
    border: 2px solid var(--accent-red) !important;
}

/* Grelhas Auxiliares */
.grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.cta-final {
    text-align: center;
}

.cta-final .section-title {
    border-left: none;
    text-align: center;
    padding-left: 0;
}

.cta-final p {
    font-size: 1.1rem;
    color: #555;
    max-width: 650px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   9. SERVIÇOS ZIG-ZAG (DESIGN SPATIAL)
   ========================================================================== */
.service-row {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 60px 0;
    flex-direction: row;
    position: relative;
    overflow: visible;

    /* Essencial para o efeito 3D não ser cortado */
}

.service-row:nth-of-type(even) {
    flex-direction: row-reverse;
}

/* 1. A MOLDURA DE IMAGEM (EFEITO ACRÍLICO 3D) */
.service-image {
    flex: 1;
    height: 420px;
    border-radius: 12px;
    position: relative;

    /* Base do Vidro */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);

    /* Borda de reflexo de luz */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    /* Sombra profunda para "descolar" da página */
    box-shadow: 0 20px 50px rgba(0, 0, 24, 0.12);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.6s ease;
}

/* Efeito de Profundidade no Hover da Imagem */
.service-row:hover .service-image {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 40px 80px rgba(0, 0, 24, 0.2);
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* 2. O TEXTO COM O ACENTO RUBI 3D */
.service-text {
    flex: 1;
}

.service-heading {
    font-size: 1.8rem;
    color: var(--primary-red);
    position: relative;
    padding-left: 25px;
    margin-bottom: 25px;

    /* Removemos a borda flat original */
    border-left: none !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* A barra de vidro vermelho (Rubi) */
.service-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    width: 6px;
    height: 90%;
    background: var(--accent-red);
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Quando passas o rato na LINHA, o título reage */
.service-row:hover .service-heading::before {
    transform: translateX(-20px) scaleX(1.6);
    background: #ce122d;
    box-shadow: 15px 5px 25px rgba(176, 14, 38, 0.4);
}

.service-text p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* REVISÃO MOBILE PARA ZIG-ZAG */
@media (max-width: 768px) {
    .service-row,
    .service-row:nth-of-type(even) {
        flex-direction: column !important;
        gap: 40px;
        padding: 50px 0;
    }

    .service-image {
        width: 100%;
        height: 300px;
    }

    /* No mobile o salto é menor para não sair do ecrã */
    .service-row:hover .service-heading::before {
        transform: translateX(-10px) scaleX(1.4);
    }
}

/* ==========================================================================
   9B. SECÇÕES SERVIÇOS (QUEM APOIAMOS, COMO TRABALHAMOS, CTA)
   ========================================================================== */
.section-intro {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 1200px;
}

.clientes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.cliente-item {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.cliente-item:hover {
    transform: translateY(-4px);
    box-shadow: 4px 12px 24px rgba(0, 0, 24, 0.06);
}

.cliente-item h4 {
    font-size: 1rem;
    color: var(--dark-grey);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.cliente-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    align-items: center;
}

@media (max-width: 992px) {
    .clientes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .clientes-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   10. SISTEMA DE MENU MOBILE (PAINEL COMPACTO SEM SCROLL)
   ========================================================================== */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 992px) {
    /* 1. O HEADER TRANSFORMA-SE NO PAINEL LATERAL */
    header.menu-open {
        /* POSICIONAMENTO: Encostado à direita com 6px */
        position: fixed !important;
        left: auto !important;
        right: 6px !important;
        top: 6px !important;
        transform: none !important;

        /* DIMENSÕES: Ajuste automático para caber o conteúdo */
        width: 50% !important;
        max-width: 320px !important;

        /* Largura confortável */
        height: auto !important;

        /* A altura ajusta-se ao conteúdo */
        min-height: 360px !important;

        /* Tamanho mínimo para ficar bonito */
        max-height: 85vh !important;

        /* Nunca ocupa o ecrã todo */
        /* LAYOUT VERTICAL */
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;

        /* ESPAÇAMENTOS APERTADOS (Para evitar scroll) */
        padding: 60px 20px 30px 20px !important;

        /* Topo 60px chega para o botão X */
        gap: 5px !important;

        /* Quase sem espaço entre blocos */
        /* ESTÉTICA */
        border-radius: 8px !important;
        box-shadow: -10px 20px 50px rgba(0,0,24,0.25) !important;
        overflow-y: auto;

        /* Scroll só se for estritamente necessário */
    }

    /* 2. LOGÓTIPO NO MENU (GRANDE E VISÍVEL) */
    header.menu-open .logo {
        display: flex !important;
        width: 100% !important;

        /* Ocupa toda a largura do menu */
        max-width: none !important;

        /* Remove restrições antigas */
        justify-content: center !important;

        /* Centra horizontalmente */
        align-items: center !important;
        margin: 0 !important;

        /* Remove margens externas */
        padding: 0 !important;

        /* Remove padding interno */
        order: -1;
        flex-shrink: 0;
    }

    /* Forçar o Texto PRAGMATUR a aparecer */
    header.menu-open .logo-text {
        display: block !important;
        height: 60px !important;
        width: auto !important;
        margin: 0 auto !important;

        /* Margem automática garante o centro */
        opacity: 1 !important;
    }

    header.menu-open .logo-icon {
        display: none !important;
    }

    /* 3. O MENU DE NAVEGAÇÃO */
    .nav-menu {
        display: none;
        width: 100%;
    }

    header.menu-open .nav-menu {
        display: flex !important;
        opacity: 1;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-menu ul {
        flex-direction: column !important;
        gap: 15px !important;

        /* Espaço entre links */
        padding: 0 !important;
        width: 100%;
        text-align: center;
        margin-top: 30px !important;

        /* Pequeno espaço logo abaixo do logo */
    }

    .nav-menu a {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--primary-red);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        padding: 0px 0;

        /* Área de clique vertical */
    }

    /* LANG SWITCH DENTRO DO MENU MOBILE */
    .nav-lang-switch {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 0.85rem;
        letter-spacing: 0.05em;
    }

    .nav-lang-switch .lang-active {
        font-weight: 700;
        color: var(--primary-red);
    }

    .nav-lang-switch .lang-link {
        color: #888;
        text-decoration: none;
        font-weight: 400;
        transition: color 0.3s ease;
    }

    .nav-lang-switch .lang-link:hover {
        color: var(--primary-red);
    }

    /* 4. BOTÃO HAMBURGUER (FIXO NO TOPO DIREITO DO PAINEL) */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        top: 25px;
        right: 20px;
        z-index: 10001;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        width: 30px;
        height: 2px;
        background-color: var(--primary-red);
        transition: 0.3s;
    }

    /* Animação do X */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header-actions {
        display: none;
    }

    /* --- GARANTIA DA POSIÇÃO ORIGINAL (FECHADO) --- */
    /* Isto garante que quando fechas, ele volta a ser a barra bonita no topo */
    header {
        width: calc(100% - 12px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        top: 6px !important;
        padding: 0 15px !important;
        max-width: 1980px !important;
        height: 70px !important;

        /* Força a altura original quando fechado */
    }

    /* --- CORREÇÃO DO ESPAÇO BRANCO & FIX DO HERO --- */
    /* 1. Estado Normal (Menu Fechado) */
    .hero {
        height: auto !important;

        /* MUDAR AQUI: remove a altura forçada */
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;

        /* Aumenta o padding para dar ar, mas sem ocupar o ecrã todo */
        padding-top: 85px !important;
        padding-bottom: 40px !important;
    }

    /* Garante que o texto fica centrado no telemóvel */
    .hero-content {
        width: 100%;
        text-align: center;
    }

    /* 2. Estado Aberto (Menu Aberto) */
    /* Isto diz: "Se o header tiver a classe menu-open, o hero sobe para 0" */
    header.menu-open + .hero,
    header.menu-open ~ .hero,
    header.menu-open ~ main .hero {
        margin-top: 0 !important;
    }
}

/* <--- ESTA CHAVETA É IMPORTANTE: Fecha o @media (max-width: 992px) */
/* ==========================================================================
   CONFIGURAÇÃO DESKTOP (SEGURANÇA)
   ========================================================================== */
@media (min-width: 993px) {
    .nav-menu {
        display: flex !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-lang-switch {
        display: none !important;
    }
}

.map-container iframe {
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 4px;
    filter: grayscale(100%) contrast(90%);
    transition: filter 0.5s ease;
}

.map-container iframe:hover {
    filter: grayscale(0%) contrast(100%);
}

@media (max-width: 768px) {
    .service-row,
    .service-row:nth-of-type(even) {
        flex-direction: column;
        gap: 40px;
        padding: 60px 0;
    }

    .service-image {
        width: 100%;
        height: 300px;
    }

    .map-container iframe {
        height: 250px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

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

/* ==========================================================================
   CORREÇÃO FINAL: FORÇAR LISTA E EMPILHAMENTO (MOBILE)
   ========================================================================== */
@media (max-width: 992px) {
    /* 1. Força os cartões da Home em Lista */
    .services .grid,
    .grid-2x2,
    .clientes-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 2. FORÇA O FORMULÁRIO PARA BAIXO */
    .contact-area {
        grid-template-columns: 1fr !important;

        /* Uma coluna só */
        text-align: center;

        /* Opcional: centra o texto acima do formulário */
        padding: 50px 20px !important;
    }

    .contact-form-container {
        margin-top: 20px;

        /* Dá espaço entre o texto e o formulário */
        padding: 25px 20px !important;

        /* Fica mais compacto no telemóvel */
    }

    /* Reseta cartões */
    .services .grid .card,
    .grid-2x2 .card,
    .clientes-grid .cliente-item {
        grid-column: auto !important;
        width: 100% !important;
    }
}

/* Overlay do menu (fundo escuro, tipo modal) */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 19, 12, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 900;

    /* abaixo do painel do menu, acima da página */
}

/* Quando o header entra em modo painel (menu-open), o overlay ativa */
header.menu-open + .menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Em desktop, não precisamos de overlay */
@media (min-width: 993px){
    .menu-overlay {
        display: none;
    }
}

/* ==========================================================================
   BANNER DE COOKIES (DESIGN DE VIDRO FLUTUANTE)
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    /* Centra o banner no ecrã */
    width: 90%;
    max-width: 550px;
    z-index: 9999;

    /* 1. MATERIAL DE VIDRO (Igual ao Menu) */
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;

    /* 2. EFEITO 3D E BORDAS */
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px;

    /* Cantos bem arredondados para um look moderno */
    padding: 25px;

    /* Sombra profunda para "descolar" do fundo */
    box-shadow: 0 20px 60px rgba(0, 0, 24, 0.2) !important;

    /* Garantia que está visível (se o JS remover o atributo 'hidden') */
    display: block;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Esconder o banner com classe hidden ou atributo hidden */
.cookie-banner[hidden],
.cookie-banner.hidden {
    display: none !important;
    opacity: 0;
    transform: translate(-50%, 40px);
}

.cookie-banner-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.cookie-banner p {
    font-size: 0.85rem;
    color: #2e2e2e;
    line-height: 1.6;
    margin: 0;
}

.cookie-banner a {
    color: var(--accent-red);
    text-decoration: underline;
    font-weight: 700;
}

/* AÇÕES (BOTÕES) NO BANNER */
.cookie-banner-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 5px;
}

/* Como já alteraste os .btn antes, estes herdam o vidro automaticamente! 
   Apenas diminuímos um pouco o tamanho para o banner. */
.cookie-banner .btn {
    height: 38px !important;
    padding: 0 20px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
}

/* Responsividade Mobile */
@media (max-width: 576px) {
    .cookie-banner {
        bottom: 15px;
        padding: 20px;
        width: calc(100% - 30px);
    }

    .cookie-banner-actions {
        flex-direction: column;

        /* Botões empilhados no telemóvel */
        width: 100%;
    }

    .cookie-banner .btn {
        width: 100%;
    }
}

/* ==========================================================================
   CORREÇÃO DOS MODAIS EM MOBILE (FIX FINAL)
   ========================================================================== */
@media (max-width: 768px) {
    dialog {
        /* 1. Recuperar espaço: Reduzir o enchimento de 50px para 20px */
        padding: 25px 20px !important;

        /* 2. Largura: Usar quase o ecrã todo */
        width: 95% !important;
        max-width: none !important;

        /* 3. Segurança: Garantir que não sai do ecrã se for muito alto */
        max-height: 85vh !important;
        overflow-y: auto !important;

        /* Cria scroll se necessário */
        /* Ajuste da borda vermelha para ser mais fina no telemóvel */
        border-left-width: 4px !important;
    }

    /* 4. DOMAR A TIPOGRAFIA GIGANTE */
    dialog h2,
    dialog h3,
    dialog h4 {
        /* Força o título a ficar mais pequeno (estava a herdar tamanhos gigantes) */
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        word-wrap: break-word;

        /* Evita que palavras longas cortem */
    }

    dialog p,
    dialog li {
        font-size: 0.95rem !important;

        /* Texto de leitura confortável */
        line-height: 1.6 !important;
    }

    dialog ul {
        padding-left: 20px !important;

        /* Ajuste da lista */
    }

    /* 5. BOTÃO DE FECHAR (Mais fácil de clicar) */
    .modal-close {
        top: 10px !important;
        right: 10px !important;
        font-size: 1.5rem !important;

        /* Aumenta o tamanho do X */
        padding: 5px;

        /* Aumenta a área de toque */
        background: rgba(255,255,255,0.8);

        /* Fundo para garantir leitura */
        border-radius: 50%;
    }
}

/* ==========================================================================
   CORREÇÃO DO BOTÃO NO MODAL (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Dá espaço extra no fundo do modal para o botão não bater na borda */
    dialog {
        padding-bottom: 40px !important;
    }

    /* 2. Ajustes específicos para o botão dentro do modal */
    dialog .btn {
        /* Afasta o botão do texto de cima */
        margin-top: 30px !important;

        /* Dá uma margem de segurança em baixo */
        margin-bottom: 10px !important;

        /* Ocupa a largura disponível (fica mais estético) */
        width: 100% !important;

        /* Reduz ligeiramente a letra para tentar caber tudo numa linha */
        font-size: 0.75rem !important;
        padding: 0 10px !important;

        /* Reduz enchimento lateral se necessário */
    }
}

button.btn.btn-form {
    width: 100%;
}

/* ==========================================================================
   AJUSTES MOBILE PERSONALIZADOS (Pinegrow)
   ========================================================================== */
@media (max-width: 992px) {
    .section-hero-mobile-fix {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Adicionar mais classes aqui conforme necessário */
}

.mobile-spacing-tight {
    padding-top: 0px !important;
    padding-bottom: 20px !important;
}