/* Definição de Cores e Fontes (TOTALMENTE UNIFORMIZADAS) */
:root {
    /* COR PRIMÁRIA: Laranja/Castanho forte - #af4616 */
    --color-primary: #af4616; 
    --color-text-light: #ffffff;
    --color-text-dark: #333333;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Lato', sans-serif;
    --header-height: 80px;
    /* COR SECUNDÁRIA (para escurecimento no :hover): #993b13 (Tom escuro de #af4616) */
    --color-darker-primary: #993b13;
    /* REMOVIDO: --color-accent-gold: #bfa17d; */
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text-dark);
}

/* ============================================== */
/* ESTILOS DA SECÇÃO 1: HEADER E HERO */
/* ============================================== */

.main-header {
    position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height);
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 5%; 
    
    /* CORREÇÃO CHAVE: Aumentar o Z-index para garantir a visibilidade */
    z-index: 9999; 
    
    background-color: transparent;
    color: var(--color-text-light);
    font-size: 10px;
    font-family: var(--font-body);
}


.logo { display: flex; flex-direction: column; line-height: 1; }
/* AJUSTE PARA O LOGOTIPO DE IMAGEM */
.logo-img {
    /* CORREÇÃO CHAVE: Aumentar a altura para um valor mais visível e adequado */
    height: 70px; /* Valor testado para maior visibilidade. Se necessário, tente 80px */
    width: auto; /* Mantém a proporção da imagem */
    display: block;
    margin: 0;
}

/* Opcional: Remova o display flex do .logo se não precisar mais de alinhamento de dois textos */
.logo {
    display: block; /* Mudar de flex para bloco simples */
    /* ... (restantes propriedades do .logo) ... */
}

/* 2. ENVOLTÓRIO DA NAVEGAÇÃO E CONTACTO (O BLOCO QUE ESTÁ À DIREITA) */
.nav-wrapper {
    display: flex;
    align-items: center;
    /* CORREÇÃO CHAVE: Remove a margem desnecessária se o menu estiver muito à direita */
    margin-left: auto; /* Garante que ocupa o espaço mínimo */
}

/* 3. NAVEGAÇÃO (Onde estão os links GEOLOGICAL TOURS, etc.) */
.main-nav {
    /* CORREÇÃO CHAVE: Aplica uma margem generosa à esquerda para forçar o menu para o centro. */
    /* Ajuste este valor (ex: 80px) se ainda estiver muito à direita. */
    margin-right: 30px; 
    margin-left: 80px; 
}

/* ESTILOS DA NAVEGAÇÃO */
.main-nav ul { 
    list-style: none; 
    
    /* CHAVE: GARANTE O ALINHAMENTO LADO A LADO */
    display: flex; 
    
    gap: 30px; 
    padding: 0; 
    margin: 0;
}

.main-nav a { 
    text-decoration: none; 
    color: var(--color-text-light); 
    
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    
    /* CHAVE: Aumentar a transparência para 0.7 (Fica mais "apagado") */
    opacity: 0.7; 
    
    transition: all 0.2s ease-out; 
    
    /* CORREÇÃO 1: Reduzir o padding-bottom para aproximar a borda da letra */
    padding-bottom: 3px; 
    
    /* Manter a borda transparente para reservar o espaço sem que o layout se mova */
    border-bottom: 2px solid transparent; 
    
    white-space: nowrap; 
}

/* O bloco .main-nav a:hover mantém o opacity: 1 e font-weight: 800 para o "acender" */
.main-nav a:hover { 
    color: var(--color-text-light); 
    font-weight: 800; 
    border-bottom: 2px solid var(--color-primary);
    opacity: 1; /* Garante o branco total no hover */
}

.dropdown-icon { font-size: 10px; margin-left: 5px; }

.header-contact { 
    display: flex; 
    align-items: center; /* CHAVE: Garante que os filhos (link e botão) estão centrados verticalmente */
    gap: 20px; 
    margin-left: 20px; 
}

.header-contact a { 
    color: var(--color-text-light); 
    text-decoration: none; 
    font-weight: 600; 
    
    /* CHAVE: Aumentar a transparência para 0.7 (Uniformidade com o Menu) */
    opacity: 0.7; 
    
    /* Garante que o link se alinha corretamente */
    display: flex; 
    align-items: center; 
    
    transition: all 0.2s ease-out; 
    
    /* Reserva o espaço para a borda sem desformatar */
    border-bottom: 2px solid transparent; 
    padding-bottom: 3px; 
}
/* O HOVER mantém o opacity: 1 para o efeito "acender" */
.header-contact a:hover {
    color: var(--color-text-light); 
    font-weight: 800; 
    border-bottom: 2px solid var(--color-primary);
    opacity: 1; /* CHAVE: Garante opacidade total no hover */
}

/* NOVO ESTILO PARA O "EMAIL US!" (Fica IGUAL ao link do telefone) */
.cta-header {
    /* Remove o visual de botão e aplica o de link */
    background-color: transparent; 
    padding: 0; 
    border: none;
    
    /* Replicar as propriedades do .header-contact a */
    color: var(--color-text-light); 
    text-decoration: none; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    transition: all 0.2s ease-out; 
    border-bottom: 2px solid transparent; 
    padding-bottom: 3px; 
}

.cta-header:hover {
    /* Replicar o hover do .header-contact a */
    color: var(--color-text-light); 
    font-weight: 800; 
    border-bottom: 2px solid var(--color-primary);
}

/* AJUSTE PARA O ÍCONE DO WHATSAPP (Igualar ao Email) */
.header-contact .whatsapp-icon {
    font-size: 16px;      /* Mesma escala do email-icon */
    margin-right: 8px;    /* Mesma distância do email-icon */
    vertical-align: middle; 
    display: inline-flex;
    justify-content: center;
    width: 16px;          /* Força a mesma largura de ocupação */
}

/* GARANTIR QUE O TAMANHO DO TEXTO É IGUAL EM AMBOS */
.header-contact a, 
.cta-header {
    font-size: 10x;      
    white-space: nowrap;  /* Evita quebra de linha no número */
}

.cta-header .email-icon {
    /* Estilo do ícone */
    font-size: 16px; 
    margin-right: 8px; 
    vertical-align: middle; 
}

.cta-button {
    background-color: var(--color-primary); 
    color: var(--color-text-light);
    /* Manter o padding e outros estilos de botão */
    padding: 12px 25px; 
    border: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background-color 0.3s;
    font-family: var(--font-body);
    text-decoration: none; 
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    /* CHAVE DE RIGOR: Uniformização do Raio da Borda para 4px */
    border-radius: 4px;
}

.cta-button:hover { 
    background-color: #993b13; 
}

.hero-section {
    position: relative; height: 100vh; min-height: 600px;
    background: url('/img/Header1.jpg') center center / cover no-repeat;
    display: flex; align-items: center; padding: 0 5%;
}
.background-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background-image: 
        /* NOVO GRADIENTE: Escurecimento agressivo nos primeiros 8%, com transição suave */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 8%, transparent 30%),
        
        /* Gradiente Original 1 (Horizontal) */
        linear-gradient(to right, rgba(0, 0, 0, 0.7) 35%, transparent 100%),
        
        /* Gradiente Original 2 (Fundo) */
        linear-gradient(to top, rgba(0, 0, 0, 0.6) 25%, transparent 100%);
}

.hero-content {
    position: relative; z-index: 10; color: var(--color-text-light); max-width: 600px; padding-bottom: 80px;
}

.hero-subtitle { font-size: 14px; font-weight: 700; letter-spacing: 0.15em; margin-bottom: 10px; opacity: 0.8; }
.hero-title { 
    font-family: var(--font-heading);
    font-size: 90px; line-height: 0.9; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; 
}
.highlight-text { color: var(--color-primary); } 
.hero-description { max-width: 450px; margin-bottom: 30px; font-size: 16px; font-weight: 300; }
.cta-button { padding: 15px 35px; font-size: 16px; }

/* ============================================== */
/* Secção 1-Mobile (CORREÇÃO DE LARGURA E ALINHAMENTO) */
/* ============================================== */
@media (max-width: 768px) {
    
    /* RESET DE LARGURA: Garante que nada transborda lateralmente */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 1. Header Base: Adicionada transição suave */
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        
        /* PARÂMETRO CORRIGIDO: De #000000 para transparente */
        background-color: transparent !important; 
        
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        z-index: 100000 !important;
        box-sizing: border-box !important;
        
        /* Adicionamos transição para o caso de querer que ele mude ao fazer scroll */
        transition: background-color 0.3s ease !important;
    }

    /* 2. Botão Hamburguer: Dimensões Fixas e Transição */
    .herohamburguerboton {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 20px !important;
        z-index: 100001 !important;
        transition: all 0.3s ease-in-out !important;
    }

    .herohamburguerboton span {
        height: 3px !important;
        background-color: #ffffff !important;
        width: 100% !important;
        transition: all 0.3s ease-in-out !important;
    }

    /* 3. LOGO: Fade out suave */
    .logo {
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    }

    .logo img, 
    .main-header .logo {
        height: 40px !important; 
        width: auto !important;
        display: flex !important;      /* Alterado para flex para alinhar o conteúdo interno */
        align-items: center !important; /* Centra a imagem verticalmente no seu próprio contentor */
        align-self: center !important;  /* Centra o contentor no eixo do header */
        margin: 0 !important;           /* Remove margens que possam vir do desktop */
        padding: 0 !important;
    }

    .main-header .logo img {
        height: 100% !important;        /* Ocupa os 40px definidos no pai */
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* 4. ESTADO SCROLLED (Ao descer a página) */
    .main-header.scrolled {
        background-color: transparent !important;
    }

    .main-header.scrolled .logo {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* CORREÇÃO: Mantém posição e tamanho originais, apenas adiciona sombra para contraste */
    .main-header.scrolled .herohamburguerboton {
        background-color: transparent !important; /* Sem círculo para evitar saltos */
        width: 30px !important;  /* Rigor: mantém os 30px originais */
        height: 20px !important; /* Rigor: mantém os 20px originais */
        border-radius: 0 !important;
        justify-content: space-between !important;
        /* Sombreamento técnico para garantir visibilidade sobre fundos brancos */
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.8)) !important; 
    }

    .main-header.scrolled .herohamburguerboton span {
        width: 30px !important; 
        height: 3px !important;
        background-color: #ffffff !important;
    }
    /* 2. Nav Wrapper: Menu Lateral */
    .nav-wrapper {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; 
        width: 85% !important;
        height: 100vh !important;
        background-color: #1a1a1a !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important; 
        z-index: 99999 !important;
        transition: right 0.4s ease !important;
        margin: 0 !important;
        padding: 40px 10% !important; 
    }

    .nav-wrapper.mobile-active {
        right: 0 !important;
    }

    /* 3. Links e Contactos: Uniformização */
    .main-nav, .header-contact {
        margin: 0 !important;
        width: 100% !important;
    }

    .main-nav ul, .header-contact {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .main-nav a, .header-contact a, .cta-header {
        font-size: 16px !important; 
        text-decoration: none !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Espaçamento dos ícones */
    .header-contact a i, .header-contact a span, .cta-header i, .cta-header span {
        margin-right: 15px !important;
        font-style: normal !important;
    }

    .header-contact {
        margin-top: 40px !important;
    }

    /* 4. HERO SECTION: Correção da Imagem de Fundo */
    .hero-section {
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 120px 5% 60px 5% !important; /* Aumentado padding-top para o título não ficar por baixo do header fixo */
        background-position: center center !important;
        background-size: cover !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .background-overlay {
        width: 100% !important;
        left: 0 !important;
    }

    /* 5. TÍTULO HERO E CONTEÚDO */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .hero-title {
        font-size: 40px !important; /* Ligeiramente menor para garantir que cabe em todos os telemóveis */
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
        text-align: left !important;
        width: 100% !important;
    }

    .hero-subtitle {
        font-size: 20px !important;
        letter-spacing: 0.1em !important;
        text-align: left !important;
    }

    .hero-description {
        font-size: 16px !important;
        max-width: 100% !important;
        margin-bottom: 25px !important;
        text-align: left !important;
    }
} /* FIM DA MEDIA QUERY */

/* ============================================== */
/* ESTILOS DA SECÇÃO 2: GEOTOURS (4 COLUNAS - FINAL) */
/* ============================================== */

.geotours-section { 
    max-width: 1400px;
    margin: 80px auto; 
    padding: 0 5%;
}

.geotours-header-uniform {
    max-width: 100%; 
    margin: 0 auto 80px auto; 
    text-align: center; 
}

.geotours-section .section-title {
    font-family: var(--font-heading);
    font-size: 55px; 
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 20px; 
    line-height: 1.1;
    text-transform: uppercase;
}

.geotours-section .header-description {
    max-width: 600px; 
    margin: 0 auto 0 auto; 
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    opacity: 0.8;
}

/* ============================================== */
/* ESTILOS UNIVERSAIS DE SUBTÍTULO */
/* ============================================== */

/* Rigor: Aplica o estilo do subtítulo a ambas as secções (e futuras) */
.section-subtitle {
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 0.15em;
    color: var(--color-primary); 
    margin-bottom: 10px;
    opacity: 1; /* Garante que está visível */
    text-transform: uppercase;
}

/* --------------------------------- */
/* Se a secção GEOTOURS tiver um estilo de subtítulo diferente, utilize o seletor específico: */
.geotours-section .geotours-header-uniform .section-subtitle {
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 0.15em;
    color: var(--color-primary); 
    margin-bottom: 10px;
    opacity: 1;
    text-transform: uppercase;
}

.tours-grid-static {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
}

.tour-card {
    background-color: var(--color-text-light);
    border-radius: 6px; 
    overflow: hidden; 
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.3s;
    display: flex; 
    flex-direction: column; 
    text-decoration: none; 
    color: var(--color-text-dark); 
    cursor: pointer; 
}

.tour-card .card-content {
    background-color: var(--color-primary); 
    color: var(--color-text-light); 
    padding: 15px 15px 15px 15px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: space-between; 
}

.tour-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}

.tour-card:active {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
    transform: scale(0.99); 
    border: 1px solid var(--color-primary); 
}

.card-image {
    width: 100%;
    height: 450px; 
    min-height: 450px;
    overflow: hidden;
    flex-shrink: 0 !important; 
}

.card-image img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease; 
}

.tour-card:hover .card-image img {
    transform: scale(1.05); 
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    padding: 0; 
    line-height: 1.3;
    font-family: var(--font-body); 
    margin-bottom: 8px; 
}

.tour-card .card-content p {
    margin-top: 0; 
    margin-bottom: 0; 
    font-size: 14px; 
    line-height: 1.5;
    color: var(--color-text-light); 
    font-weight: 300;
}

.card-meta {
    display: flex;
    gap: 15px;
    margin: 0; 
    padding: 0; 
    font-size: 12px;
    color: var(--color-text-light); 
    font-family: var(--font-body);
}

.meta-item::before {
    content: "•";
    color: var(--color-text-light); 
    margin-right: 5px;
    font-size: 14px;
    line-height: 0;
    position: relative;
    top: -1px;
}


/* --------------------------------- */
/* RESPONSIVIDADE mobile: GEOTOURS          */
/* --------------------------------- */

/* Desktop Médio: 3 Colunas */
@media (max-width: 1200px) { 
    .tours-grid-static {
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }
}

/* Tablets: 2 Colunas */
@media (max-width: 992px) { 
    .tours-grid-static {
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
}

/* Mobile (Telemóveis): Scroll Horizontal (Carrossel Nativo) */
@media (max-width: 576px) {
    .tours-grid-static {
        display: flex;             /* Desativa a Grid e ativa Flexbox */
        overflow-x: auto;          /* Permite o scroll lateral */
        scroll-snap-type: x mandatory; /* Força o encaixe do cartão ao deslizar */
        gap: 15px;                 /* Espaçamento entre os cartões */
        padding: 10px 0 30px 0;    /* Espaço inferior para não cortar a sombra */
        
        /* Ocultar barra de scroll para estética limpa */
        scrollbar-width: none;     /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }

    .tours-grid-static::-webkit-scrollbar {
        display: none;             /* Chrome/Safari */
    }

    .tour-card {
        flex: 0 0 85%;             /* Cada cartão ocupa 85% da largura, revelando o próximo */
        scroll-snap-align: center; /* Garante que o cartão centra ao parar o toque */
        min-width: 280px;          /* Segurança para ecrãs muito pequenos */
    }

    .card-image {
        height: 380px;             /* Ajuste de proporção para ecrã vertical */
        min-height: 380px;
    }
}

/* ========================================================== */
/* ESTILOS DA SECÇÃO 3: testimonial-section */
/* ========================================================== */

.testimonial-section {
    background-color: #ffffff; 
    padding: 100px 0 100px 0; 
    position: relative; 
    overflow: hidden; 
}

.testimonial-content-wrapper {
    max-width: 1400px; 
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 0 5%; 
}

.testimonial-image-block {
    flex: 0 0 45%; 
    max-width: 45%;
    position: relative;
    
    margin-left: -2.5%; 
    margin-top: -50px; 
    z-index: 2; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
}

.testimonial-image-block img {
    width: 100%;
    display: block;
}

.testimonial-text-block {
    flex: 0 0 55%; 
    max-width: 55%;
    position: relative;
    
    padding-left: 20px;
    padding-right: 5%;
    padding-top: 50px; 
    padding-bottom: 50px;
    
    /* CHAVE: ELIMINAR O URL DO BACKGROUND-IMAGE! */
    background-image: none; /* AGORA ESTÁ VAZIO, SEM IMAGEM */
    
    background-size: 70%; 
    background-repeat: no-repeat;
    background-position: right 50%; 
    min-height: 400px;
}

.quote-icon {
    font-family: var(--font-heading);
    font-size: 100px; 
    color: var(--color-primary); 
    line-height: 0.8;
    position: absolute;
    top: 50px; 
    left: 0;
    opacity: 0.2;
    z-index: 1;
}

.testimonial-quote {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-dark);
    margin: 60px 0 20px 0; 
    max-width: 550px;
    position: relative; 
    z-index: 3;
}

.highlight-text-quote {
    color: var(--color-primary); 
    font-weight: 700;
}

.highlight-text-recommended {
    color: var(--color-primary); 
    padding-bottom: 0;
}

.testimonial-author {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    display: block;
    margin-top: 20px;
    position: relative; 
    z-index: 3;
}

.author-details {
    display: block;
    font-weight: 400;
    font-size: 12px;
    margin-top: 5px;
    letter-spacing: 0.05em;
    color: #999;
}

/* CORREÇÃO DE RIGOR PARA O LINK DO AUTOR (ANULAÇÃO DE PADRÃO DO NAVEGADOR) */
.testimonial-author .author-name-link {
    /* CHAVE 1: Força a cor a ser herdada do parágrafo pai (.testimonial-author) */
    color: inherit; 
    
    /* CHAVE 2: Remove o sublinhado padrão dos links */
    text-decoration: none; 
    
    /* CHAVE 3: Garante o peso da fonte (700 é o peso do .testimonial-author) */
    font-weight: 700; 
}

/* Efeito ao passar o rato (para feedback visual, sem sublinhado) */
.testimonial-author .author-name-link:hover {
    color: var(--color-primary); /* Use a sua cor primária (laranja/castanho) */
    text-decoration: none; /* Garante que o sublinhado não aparece no hover */
}

/* --------------------------------- */
/* Mobile: SECTION 3 TESTIMONIAL     */
/* --------------------------------- */

@media (max-width: 768px) {
    .testimonial-content-wrapper {
        flex-direction: column; /* Empilha imagem e texto verticalmente */
        align-items: center;
        gap: 20px;
        padding: 0 5%;
    }

    .testimonial-image-block {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;   /* Remove o desalinhamento lateral */
        margin-top: 0;    /* Remove a sobreposição negativa */
        margin-bottom: 20px;
    }

    .testimonial-text-block {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;  /* Remove o recuo lateral do desktop */
        padding-right: 0;
        padding-top: 20px;
        text-align: center; /* Opcional: centra o texto para um look mais "quote" */
        min-height: auto;
    }

    .quote-icon {
        position: relative; /* No mobile é mais seguro ser relativo para não sobrepor */
        top: 0;
        display: block;
        margin: 0 auto 10px auto;
        font-size: 60px; /* Reduz o tamanho das aspas */
    }

    .testimonial-quote {
        font-size: 20px; /* Reduz o texto para caber no telemóvel sem esmagar */
        margin: 10px auto;
        max-width: 100%;
    }

    .testimonial-author {
        margin-top: 30px;
    }
}

/* ========================================================== */
/* ESTILOS DA SECÇÃO 4: GEOWALKING (4 COLUNAS, UNIFORMIZADO) */
/* ========================================================== */

.geowalking-section {
    /* CORREÇÃO: Usar um fundo neutro, se necessário, ou deixar sem background-color se for branco */
    background-color: #ffffff; /* Fundo branco para garantir separação visual, se necessário */
    padding: 80px 0;
}

/* --------------------------------- */
/* CABEÇALHO (Centrado) */
/* --------------------------------- */
.geowalking-section .section-header-centered {
    max-width: 800px; 
    margin: 0 auto 50px auto; 
    text-align: center; 
}

/* TÍTULOS (Herda o estilo da Geotours/Padrão) */
.geowalking-section .section-title {
    font-family: var(--font-heading);
    font-size: 55px; 
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.geowalking-section .section-title .highlight-text {
    color: var(--color-primary); 
}

.geowalking-section .header-description {
    max-width: 600px; 
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    opacity: 0.8;
    margin: 0 auto;
}

/* ============================================== */
/* RIGOR TÉCNICO: ESTILOS UNIVERSAIS DE SUBTÍTULO */
/* (Igual ao Tailored Tours, Geowalking e Geotours) */
/* ============================================== */

/* Garante o estilo uniforme para o subtítulo em todas as secções. */
.section-subtitle {
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 0.15em;
    color: var(--color-primary); /* Cor primária (Laranja/Tijolo) */
    margin-bottom: 10px;
    opacity: 1; 
    text-transform: uppercase;
}

/* Se quiser garantir especificidade para a secção Geowalking, use: */
.geowalking-section .section-header-centered .section-subtitle {
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 0.15em;
    color: var(--color-primary); 
    margin-bottom: 10px;
    opacity: 1;
    text-transform: uppercase;
}

/* --------------------------------- */
/* LAYOUT: AJUSTE DO CONTENTOR DA GRELHA */
/* --------------------------------- */
.geowalking-section .tours-grid-static {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    max-width: 1400px; 
    margin: 0 auto;
    padding: 0 5%;
}

.geowalking-section .tour-card .card-image {
    height: 450px !important; 
    min-height: 450px !important;
    
    /* Propriedades de Flexbox/Layout herdadas (manter) */
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}


/* --------------------------------- */
/* MEDIAmobile SECTION 4 GEOWALKING */
/* --------------------------------- */

/* Mobile (Telemóveis): Scroll Horizontal - Secção 4 */
@media (max-width: 576px) {
    /* 1. Garante que o fundo e o espaçamento da secção estão limpos */
    .geowalking-section {
        padding: 60px 0;
    }

    /* 2. Remove restrições do container no mobile para permitir o scroll total */
    .geowalking-section .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 3. Alinha o cabeçalho com a margem de 5% (igual à Secção 2) */
    .geowalking-section .section-header-centered {
        padding: 0 5%;
        margin-bottom: 40px;
        text-align: center;
    }

    /* 4. Configuração da Grelha de Scroll */
    .geowalking-section .tours-grid-static {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        
        /* Chave do Alinhamento: 
           Padding de 5% faz o primeiro cartão alinhar com o título.
           O scroll vai até à borda por causa do overflow. */
        padding: 0 5% 30px 5%; 
        
        /* Remove margens negativas que estavam a causar o erro */
        margin-left: 0;
        margin-right: 0;
        
        scrollbar-width: none;
    }

    .geowalking-section .tours-grid-static::-webkit-scrollbar {
        display: none;
    }

    /* 5. Ajuste dos Cartões */
    .geowalking-section .tour-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        min-width: 280px;
    }

    /* 6. Ajuste do Título para escala mobile */
    .geowalking-section .section-title {
        font-size: 42px;
    }
}


/* ============================================== */
/* ESTILOS DA SECÇÃO 5: TAILORED TOURS (INVERSÃO: TEXTO ESQUERDA, IMAGENS DIREITA) */
/* ============================================== */

.tailored-tours-section {
    display: flex; 
    /* Inverte a ordem das colunas para: Conteúdo (Esquerda) e Mídia (Direita) */
    flex-direction: row; 
    
    min-height: 800px;
    background-color: var(--color-background-light); /* Fundo cinza/branco claro */
    max-width: 1400px;
    margin: 0 auto; /* Centraliza a secção na página */
    overflow: hidden; /* Garante que não há overflow lateral causado por margens negativas */
}

/* --------------------------------- */
/* ESTILOS DA COLUNA DE CONTEÚDO (ESQUERDA) */
/* --------------------------------- */
.tailored-tours-content {
    flex: 1; /* Ocupa 50% do espaço */
    /* Ajuste o padding para alinhar o texto e dar espaço à direita das imagens */
    padding: 100px 5% 100px 8%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 50%;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: 10px;
    opacity: 0.6;
    text-transform: uppercase;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 55px; 
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 30px;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.section-title .highlight-text {
    /* Cor de destaque (Laranja/Tijolo) */
    color: var(--color-primary); 
}

.content-text-block p {
    max-width: 550px; /* Aumentado o max-width para melhor leitura na coluna */
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    opacity: 0.8;
}



/* --------------------------------- */
/* ESTILOS DA COLUNA DE MÍDIA (DIREITA) */
/* --------------------------------- */
.tailored-tours-media {
    flex: 1; /* Ocupa 50% do espaço */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end; /* Alinha o conteúdo à direita */
    padding: 50px 0;
    max-width: 50%;
}

.media-box {
    position: relative;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.primary-image {
    width: 80%; /* Imagem principal maior */
    align-self: flex-end; /* Alinha a imagem principal à direita */
    z-index: 5;
}

/* ESTILOS DA IMAGEM SECUNDÁRIA: AJUSTAR POSIÇÃO HORIZONTAL */
.secondary-image {
    width: 65%; 
    
    /* Mantivemos a sobreposição vertical reduzida */
    margin-top: -50px; 
    
    /* CORREÇÃO CHAVE DE POSIÇÃO HORIZONTAL: Aumentar o valor para EMPURRAR para a esquerda */
    margin-right: 40%; /* Aumentado de 20% (anteriormente) para 40% (maior deslocamento) */
    
    z-index: 10;
}

.media-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* ESTILOS PARA AS TAGS DE TEXTO SOBRE IMAGEM */
.image-tag {
    position: absolute;
    /* CORREÇÃO CHAVE: Afastar 10px do canto inferior direito */
    bottom: 10px;   
    right: 10px;    
    
    left: auto;  
    top: auto;   
    transform: none; 

    background-color: rgba(0, 0, 0, 0.6); 
    color: var(--color-text-light); 
    padding: 8px 15px; 
    font-size: 10px; 
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 15; 
}

/* AJUSTE para a tag da imagem inferior */
.image-tag.bottom-tag {
    position: absolute;
    
    /* CORREÇÃO CHAVE: Afastar 10px do canto inferior direito */
    bottom: 10px; 
    right: 10px; 
    
    left: auto;
    top: auto;
    transform: none;

    background-color: rgba(0, 0, 0, 0.6); 
    color: var(--color-text-light);
    padding: 8px 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 15;
}

/* CORREÇÃO FINAL DE ESTILO: GARANTIR QUE .section-subtitle DENTRO DE TAILORED TOURS USA O ESTILO .service-category */
.tailored-tours-content .section-subtitle {
    
    /* 1. ESTILOS DO .service-category (Cor, Tamanho, Peso, Espaçamento) */
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 0.15em;
    color: var(--color-primary); /* Laranja/Ferrugem */
    text-transform: uppercase;
    
    /* 2. Opacidade (para destaque total) */
    opacity: 1; 
    
    /* Nota: Se o .service-category usar a fonte padrão e o seu .section-subtitle também, não precisa de definir a font-family aqui. */
}

/* --------------------------------- */
/* Mobile: SECTION 5 TAILORED TOURS  */
/* --------------------------------- */

@media (max-width: 768px) {
    .tailored-tours-section {
        flex-direction: column;
        min-height: auto;
        padding-bottom: 40px;
    }

    .tailored-tours-content {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 40px 8% 30px 8%; /* Padding mais compacto */
    }

    /* ESCALA DE TEXTO REDUZIDA (PROPORCIONAL) */
    .tailored-tours-content .section-subtitle {
        font-size: 11px; /* Subtítulo discreto */
        margin-bottom: 8px;
    }

    .tailored-tours-content .section-title {
        font-size: 32px; /* Título muito mais pequeno e equilibrado */
        margin-bottom: 15px;
    }

    .content-text-block p {
        font-size: 14px; /* Texto de corpo padrão mobile */
        line-height: 1.5;
        max-width: 100%;
    }

    .tailored-tours-media {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 5%;
        display: flex;
        flex-direction: column;
    }

    /* GESTÃO DE SOBREPOSIÇÃO (Z-INDEX) */
    .primary-image {
        width: 85%;
        align-self: flex-end;
        z-index: 10; /* Fica À FRENTE */
        margin-bottom: 0;
    }

    .secondary-image {
        width: 70%;
        margin-top: -60px;    /* Sobe para debaixo da primeira */
        margin-left: 5%;      /* Desvia para a esquerda */
        align-self: flex-start;
        z-index: 5;          /* Fica ATRÁS */
    }

    .media-box img {
        border-radius: 4px; /* Suaviza os cantos no mobile */
    }

    .tailored-tours-media .image-tag, 
    .tailored-tours-media .image-tag.bottom-tag {
        font-size: 8px !important; /* 6px pode ser ilegível (limite de acessibilidade), recomendo 8px */
        padding: 4px 8px !important;
        bottom: 5px !important; /* Aproxima do canto para ganhar espaço na foto */
        right: 5px !important;
        letter-spacing: 0.05em; /* Reduz o espaçamento entre letras para caber melhor */
    }
}


/* ============================================== */
/* ESTILOS DA SECÇÃO 6: WHY CHOOSE US */
/* ============================================== */

.why-choose-us-section {
    background-color: #ffffff;
    padding: 100px 0; 
    overflow: hidden; 
}

.value-proposition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 2.5fr; 
    grid-template-rows: 400px 100px 300px 50px; 
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    min-height: 800px; 
    padding: 0 5%;
}

/* Estilos Comuns dos Itens */
.grid-item {
    position: relative;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: var(--color-text-light); 
    background-color: rgba(0, 0, 0, 0.6); 
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Posições no Grid */
.remote-locations {
    grid-column: 1 / span 2; 
    grid-row: 1 / span 3; 
    max-height: 550px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    margin-top: 0; 
}

.wildlife-encounters {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
    max-height: 300px; 
    margin-top: -50px;
    z-index: 10;
}

.exclusive-access {
    grid-column: 2 / span 2;
    grid-row: 3 / span 2; 
    margin-left: 50px; 
    margin-top: -150px; 
    z-index: 9;
    max-height: 350px;
}

.text-block {
    grid-column: 4 / span 1; 
    grid-row: 1 / span 4; 
    align-self: center; 
    padding-left: 40px;
    z-index: 12; 
}

.value-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 25px;
}

.value-description {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    max-width: 450px;
}

.cta-about-button {
    background-color: var(--color-primary); 
    color: var(--color-text-light); 
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 14px;
    transition: background-color 0.3s;
    margin-top: 15px;
    text-decoration: none;
    /* CHAVE DE RIGOR: Raio de Borda de 4px */
    border-radius: 4px; 
}

.cta-about-button:hover {
    background-color: #993b13;
    text-decoration: none;
}

/* --------------------------------- */
/* Mobile: SECTION 6 WHY CHOOSE US   */
/* --------------------------------- */

@media (max-width: 768px) {
    /* 1. CONTENTOR: Alterado para flex para permitir reordenação (order) */
    .why-choose-us-section .value-proposition-grid {
        display: flex !important; 
        flex-direction: column !important;
        width: 100% !important;
        padding: 40px 5% !important;
        min-height: auto !important;
    }

    /* 2. ITENS: Reset para flex-item */
    .why-choose-us-section .grid-item {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        position: relative !important;
    }

    /* 3. TEXTO NO TOPO (Prioridade absoluta) */
    .why-choose-us-section .text-block {
        order: -1 !important; /* Força o texto para antes das fotos */
        padding: 0 5% 40px 5% !important;
        z-index: 30;
    }

    .why-choose-us-section .value-title {
        font-size: 32px !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* 4. IMAGENS EM CASCATA */
    .why-choose-us-section .grid-item img {
        height: 280px !important;
        width: 100%;
        object-fit: cover;
        border-radius: 4px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    /* Imagem 1: Geological Expert - A MAIS ALTA (Frente) */
    .why-choose-us-section .remote-locations {
        order: 1;
        width: 85% !important;
        margin-left: 0 !important;
        margin-bottom: -60px !important; /* Puxa a 2ª para baixo dela */
        z-index: 20 !important; 
    }

    /* Imagem 2: Exclusive Insight - O MEIO (Entre a 1 e a 3) */
    .why-choose-us-section .wildlife-encounters {
        order: 2;
        width: 80% !important;
        margin-left: 20% !important; 
        margin-bottom: -60px !important; /* Puxa a 3ª para baixo dela */
        z-index: 10 !important; 
    }

    /* Imagem 3: Geosites - O FUNDO (Atrás de todas) */
    .why-choose-us-section .exclusive-access {
        order: 3;
        width: 85% !important;
        margin-left: 5% !important;
        z-index: 5 !important; 
    }

    /* 5. ETIQUETAS E BOTÃO */
    .why-choose-us-section .image-label {
        font-size: 8px !important;
        padding: 4px 8px !important;
        z-index: 25;
    }

    .why-choose-us-section .cta-about-button {
        display: inline-block;
        width: auto;
        padding: 12px 30px;
        font-size: 13px;
    }
}

/* ========================================================== */
/* ESTILOS DA SECÇÃO 7 REVIEWS (People Say) 
/* ========================================================== */

.reviews-section {
    /* CHAVE: Reduzir o padding superior de 100px para 50px */
    padding: 50px 0 100px 0; 
    background-color: #ffffff;
    font-family: var(--font-body); 
}

.reviews-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    text-align: center;
}

.reviews-title {
    font-family: var(--font-heading); 
    font-size: 65px; 
    font-weight: 700;
    color: var(--color-text-dark); 
    margin-bottom: 5px;
    line-height: 1;
}

/* --------------------------------- */
/* ESTILOS DA FRASE DE DESTAQUE ACIMA DO REVIEW - CORREÇÃO SÓBRIA */
/* --------------------------------- */
.review-highlight-quote {
    font-family: var(--font-heading); 
    font-size: 20px; 
    
    /* CHAVE 1: REMOÇÃO DO ITÁLICO */
    font-style: normal; 
    
    font-weight: 700; /* Aumentei para 700 para compensar a perda de cor/itálico */
    
    /* CHAVE 2: COR PRETA/ESCURA (usa a cor padrão do texto escuro) */
    color: var(--color-text-dark); 
    
    margin-bottom: 20px; 
    padding: 0 10%; 
    line-height: 1.4;
}

/* O PAI DO RATING É ESCURO */
.average-rating {
    font-family: var(--font-heading);
    font-size: 35px;
    font-weight: 500;
    color: var(--color-text-dark); 
    margin-bottom: 50px;
    /* PROPRIEDADES PARA ALINHAR CÍRCULOS, CONTADOR E TEXTO NO CABEÇALHO */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
}

/* CHAVE: REGRAS DO QUADRADO 25+ NO CABEÇALHO (Laranja) */
.reviews-section .average-rating .avatar-count-bubble {
    width: 30px; /* Tamanho ajustado ao cabeçalho (35px) */
    height: 30px; 
    margin-right: 15px; /* Espaço para separar dos círculos */
    margin-left: 0; 
    background-color: var(--color-primary); /* Fundo Laranja */
    border-radius: 4px; 
    
    /* Regras de Layout do Quadrado */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Mantém a sombra */
}

.reviews-section .average-rating .avatar-count-bubble .avatar-count {
    font-size: 12px; /* Tamanho ajustado à caixa de 30px */
    color: var(--color-text-light); /* Texto Claro para Contraste */
    font-weight: 700;
    margin-right: 0;
}

/* REGRAS DOS CÍRCULOS NO CABEÇALHO */
.stars-header {
    color: var(--color-primary); /* Laranja */
    font-size: 28px; 
    margin-right: 15px; 
    vertical-align: middle; 
}
.stars-header i {
    margin: 0 4px; /* Espaçamento entre os círculos */
}

/* CHAVE: DESTAQUE LARANJA VIA SPAN */
.highlight-text {
    color: var(--color-primary); 
    line-height: 1; 
}

/* --------------------------------- */
/* LAYOUT DA GRELHA STAGGERED (4 COLUNAS) */
/* --------------------------------- */

.reviews-grid-staggered {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; 
    margin-bottom: 50px;
}

.review-card {
    background-color: transparent;
    padding: 0;
    text-align: center; 
    grid-row-start: 1; 
}

.review-card.start-low {
    margin-top: 150px; 
}

/* --------------------------------- */
/* ESTILOS INTERNOS DO CARTÃO */
/* --------------------------------- */

.reviewer-info {
    display: block; 
    text-align: center;
    margin-bottom: 20px;
}

/* CHAVE: AVATARES GRANDES (QUADRADOS COM CANTOS SUAVES) */
.reviewer-avatar {
    width: 80px; 
    height: 80px;
    border-radius: 4px; 
    object-fit: cover;
    margin: 0 auto 10px auto; 
    display: block; 
}

.reviewer-details {
    line-height: 1.3;
}

.reviewer-name {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: var(--color-text-dark);
}

.reviewer-role {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* CHAVE: COR INSTITUCIONAL PARA OS ÍCONES (CÍRCULOS) nos cards de review */
.stars {
    color: var(--color-primary); /* LARANJA/TIJOLO */
    font-size: 18px;
    margin-bottom: 15px;
    display: block;
}
/* Espaçamento entre os ícones para melhor visualização dos círculos */
.stars i {
    margin: 0 2px;
}

.review-divider {
    border: none;
    border-top: 1px solid #ddd;
    width: 60%; 
    margin: 20px auto;
}

.review-text {
    font-size: 16px; 
    line-height: 1.6;
    color: var(--color-text-dark);
    padding: 0 5%;
}

/* --------------------------------- */
/* FOOTER ESTÁTICO E BOTÃO DE AÇÃO */
/* --------------------------------- */

.reviews-footer-static {
    text-align: right;
    padding-top: 50px;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.action-area {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    padding-right: 5%; 
}

/* Limpeza: O 25+ saiu daqui e foi para o cabeçalho */
.more-avatars {
    display: flex;
    align-items: center; 
    margin-right: 15px; 
    position: relative;
    /* Remover height: 40px se for desnecessário, deixamos agora a altura ser definida pelos small-avatars */
}

.plus-square-bubble {
    /* DIMENSÕES MANTIDAS (15px x 15px) */
    display: flex; 
    
    /* CHAVE 1: CENTRALIZE o conteúdo (horizontal e vertical) */
    align-items: center; 
    justify-content: center; 
    
    width: 15px; 
    height: 15px; 
    
    background-color: var(--color-primary); 
    border-radius: 4px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    
    /* Removemos o padding de canto que causava o desalinhamento interno */
    padding: 0; 
    
    vertical-align: top; 
    margin-left: 5px; 
    
    /* CHAVE 2: Mantém a correção de posicionamento no topo do elemento pai */
    margin-top: -12px; 
}

.plus-square-bubble .plus-count {
    color: var(--color-text-light); 
    /* CHAVE: TAMANHO DA FONTE 12px (Ocupa a maior parte da caixa de 15px) */
    font-size: 12px; 
    font-weight: 700;
    
    /* Garante que o texto fica centrado sem espaçamentos indesejados */
    line-height: 1; 
}

/* CHAVE: AVATARES PEQUENOS (QUADRADOS COM CANTOS SUAVES) */
.small-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px; 
    border: 2px solid #ffffff;
    object-fit: cover;
}

.small-avatar.overlapped {
    /* REMOÇÃO DA SOBREPOSIÇÃO: Ajustar para uma pequena margem positiva */
    margin-left: 5px; 
}

/* Regras gerais para .avatar-count e .avatar-count-bubble no rodapé (se o elemento fosse lá) */
/* Removidas as regras dimensionais que foram movidas para o cabeçalho */
.avatar-count-bubble {
    /* Regras base do elemento, apenas se for usado fora do cabeçalho */
    border-radius: 4px; 
}

.avatar-count {
    /* Regras base do elemento, apenas se for usado fora do cabeçalho */
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-right: 15px;
}


/* CHAVE: BOTÃO UNIFORMIZADO COM EFEITO DE ESCURECIMENTO */
.btn-review {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-primary); 
    color: var(--color-text-light);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
}

.btn-review:hover {
    background-color: #993b13; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transform: none; 
}

.btn-review:active {
    transform: scale(0.98); 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}


/* --------------------------------- */
/* Mobile: SECTION 7 REVIEWS*/
/* --------------------------------- */

@media (max-width: 768px) {
    .reviews-section {
        padding: 40px 0;
        overflow: hidden; /* Evita scroll horizontal na página toda */
    }

    .reviews-title {
        font-size: 32px !important;
        margin-bottom: 10px;
    }

    .average-rating {
        font-size: 20px !important;
        margin-bottom: 30px;
    }

    /* 1. TRANSFORMAÇÃO EM CARROSSEL */
    .reviews-grid-staggered {
        display: flex !important; /* Muda de Grid para Flex */
        flex-direction: row !important; /* Alinha em linha */
        overflow-x: auto !important; /* Ativa o scroll horizontal */
        scroll-snap-type: x mandatory !important; /* Força a paragem no card */
        gap: 20px !important;
        padding: 20px 10% 40px 10% !important; /* Espaço para ver as sombras e o próximo card */
        scrollbar-width: none; /* Esconde scrollbar no Firefox */
        -ms-overflow-style: none; /* Esconde scrollbar no IE/Edge */
    }

    .reviews-grid-staggered::-webkit-scrollbar {
        display: none; /* Esconde scrollbar no Chrome/Safari */
    }

    /* 2. AJUSTE DO CARD PARA CARROSSEL */
    .review-card {
        flex: 0 0 85vw !important; /* Cada card ocupa 85% da largura da janela */
        scroll-snap-align: center !important; /* Centra o card ao deslizar */
        background: #ffffff;
        border-radius: 8px;
        padding: 30px 20px !important;
        margin-top: 0 !important; /* Elimina o desalinhamento do desktop */
        box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Sombra para destacar do fundo */
    }

    /* 3. AJUSTES DE TEXTO NO MOBILE */
    .review-highlight-quote {
        font-size: 15px !important;
        padding: 0 !important;
    }

    .review-text {
        font-size: 14px !important;
        line-height: 1.6;
        padding: 0 !important;
        text-align: center;
    }

    .reviewer-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    /* 4. FOOTER E BOTÃO */
    .action-area {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .more-avatars {
        margin-right: 0 !important;
        margin-bottom: 15px;
    }

    .btn-review {
        width: 70% !important;
        text-align: center;
    }
}

/* ========================================================== */
/* ESTILOS DA SECÇÃO 8: CONSULTING & DEVELOPMENT */
/* ========================================================== */

#consulting-development-section {
    background-color: var(--color-background-light); 
    padding: 100px 0;
}

.consulting-showcase {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --------------------------------- */
/* ESTRUTURA BASE DOS BLOCOS DE SERVIÇO (FLEXBOX) */
/* --------------------------------- */

.service-block {
    display: flex;
    align-items: center;
    margin-bottom: 120px; /* Espaçamento entre os dois grandes blocos */
}

/* 1. BLOCO DE CONTEÚDO (Texto, Títulos, CTA) */
.service-content {
    flex: 1; 
    padding-right: 60px; /* Espaço entre o texto e a imagem */
}

/* 2. BLOCO DA IMAGEM */
.service-image-box {
    flex: 1; 
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: 650px; /* Altura fixa para impacto visual */
}

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


/* --------------------------------- */
/* ESTILOS DE TIPOGRAFIA */
/* --------------------------------- */

.service-category {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary); /* Destaque com o Laranja/Ferrugem */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-title {
    font-family: var(--font-heading);
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 30px;
}

.service-description {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-dark);
    opacity: 0.85;
    margin-bottom: 30px;
}

.key-services-list {
    list-style: none;
    padding-left: 0; /* Reset do padding padrão */
    margin-bottom: 40px;
    margin-top: 20px; /* Espaço extra após a descrição */
}

.key-services-list li {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--color-text-dark);
    
    /* RIGOR TÉCNICO: Alinhamento Flexbox */
    display: flex;
    align-items: flex-start; /* Alinha o check ao topo se o texto quebrar linha */
    gap: 12px; /* Espaço fixo entre o check e o início do texto */
}

.key-services-list li::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: bold;
    flex-shrink: 0; /* Garante que o check não deforma em ecrãs pequenos */
    
    /* Removido o margin-left negativo que causava o problema */
}

/* --------------------------------- */
/* ESTILOS DE CTA (Reutilização) */
/* --------------------------------- */


.service-cta {
    /* Reutiliza o estilo do seu botão View More */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 15px 35px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    transition: background-color 0.3s;
}

.service-cta:hover {
    background-color: var(--color-darker-primary, #9c4524);
}

.service-content {
    flex: 1; 
    padding-right: 80px; /* Aumentado de 60 para 80 para mais elegância */
    padding-left: 20px;  /* ADICIONADO: Afasta o texto do limite esquerdo */
}
.product-development-block .service-content {
    padding-left: 80px; /* Garante simetria no bloco invertido */
    padding-right: 20px; /* Afasta do limite direito se necessário */
}

/* --------------------------------- */
/* MODIFICADOR: BLOCO DE DESENVOLVIMENTO DE PRODUTO */
/* INVERTE O LAYOUT (Imagem à Esquerda, Texto à Direita) */
/* --------------------------------- */
.product-development-block {
    flex-direction: row-reverse; /* Inverte a ordem: Imagem | Texto */
    margin-bottom: 0; /* Último bloco não precisa de margem inferior */
}

.product-development-block .service-content {
    padding-left: 60px; /* Adiciona padding à esquerda no bloco invertido */
    padding-right: 0; 
}


/* --------------------------------- */
/* Mobile: SECTION 8 CONSULTING      */
/* --------------------------------- */

@media (max-width: 768px) {
    #consulting-development-section {
        padding: 60px 0;
    }

    .consulting-showcase {
        padding: 0 8% !important; /* Aumenta a margem de segurança lateral */
    }

    .service-block {
        flex-direction: column !important;
        margin-bottom: 60px !important;
    }

    /* 1. IMAGEM NO TOPO (Mantendo a hierarquia visual) */
    .service-image-box {
        height: 300px !important;
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    /* 2. CONTEÚDO DE TEXTO */
    .service-content {
        order: 2 !important;
        padding: 0 !important; /* Limpa os paddings de 60px do desktop */
        text-align: left;
    }

    .service-title {
        font-size: 32px !important;
        margin-bottom: 20px;
    }

    .service-description {
        font-size: 15px !important;
        line-height: 1.5;
    }

    /* 3. CORREÇÃO DA LISTA (O PONTO CRÍTICO) */
    .key-services-list {
        padding-left: 1.5rem !important; /* Cria espaço interno para os ícones */
        margin-bottom: 35px;
    }

    .key-services-list li {
        font-size: 14px !important;
        line-height: 1.4;
        margin-bottom: 15px;
        position: relative;
    }

    .key-services-list li::before {
        content: "✓";
        position: absolute;
        left: -1.5rem; /* Posiciona o checkmark dentro do padding da lista */
        color: var(--color-primary);
        font-weight: bold;
    }

    /* 4. BOTÃO CTA (Ajuste para toque) */
    .service-cta {
        display: block !important; /* Ocupa a largura disponível no mobile */
        width: 100%;
        text-align: center;
        padding: 15px 20px !important;
        font-size: 13px !important;
    }
}

/* ========================================================== */
/* ESTILOS DA SECÇÃO 9: PORTFÓLIO */
/* ========================================================== */

.portfolio-section-horizontal {
    padding: 80px 0;
    background-color: var(--color-background-light); 
}

.portfolio-section-horizontal .container {
    /* Mantido o 90% para o cartão não ser full-width */
    max-width: 90%; 
    margin: 0 auto;
    /* Redefinido o padding para o padrão, se houver um container global */
    padding: 0 20px; 
}


/* --------------------------------- */
/* NOVO HEADER UNIFORME (Vertical e Centralizado) */
/* --------------------------------- */
.section-header-uniform-card {
    max-width: 800px; 
    margin: 0 auto 50px auto; /* Centraliza o bloco e espaça da imagem */
    text-align: center; /* Alinhamento centralizado para o padrão uniforme */
}

/* Reutilização dos estilos padrão para Títulos e Subtítulos */
.section-subtitle {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-text-dark);
    margin-bottom: 5px;
    opacity: 0.6;
    text-transform: uppercase;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 55px; 
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.section-title .highlight-text {
    color: var(--color-primary); 
}

.header-description-uniform {
    max-width: 600px; 
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    opacity: 0.8;
    margin: 0 auto; /* Centraliza o parágrafo dentro do seu max-width */
}


/* --------------------------------- */
/* CARTÃO PRINCIPAL (EFEITO) */
/* --------------------------------- */
.portfolio-main-card {
    position: relative;
    width: 100%;
    /* AUMENTAR ESTE VALOR PARA REVELAR MAIS ALTURA */
    height: 850px; 
    overflow: hidden; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.card-background-img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    display: block;
    filter: brightness(0.7); 
    
    /* ESSENCIAL: Transição suave */
    transition: transform 0.4s ease-in-out, filter 0.4s; 
}

/* Efeito de Zoom (Zoom in 5%) */
.portfolio-main-card:hover .card-background-img {
    /* Aplica apenas o efeito de zoom */
    transform: scale(1.05); 
    /* Opcional: Aumentar ligeiramente o brilho para destacar */
    filter: brightness(0.85); 
}


/* --------------------------------- */
/* OVERLAY DE CONTEÚDO (TEXTO) */
/* --------------------------------- */
.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px;
    color: var(--color-text-light); 
    max-width: 50%;
    text-align: left;
}

.overlay-location {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: var(--color-text-light);
    opacity: 0.7;
}

.overlay-title {
    font-size: 45px; 
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    /* CORREÇÃO 1: Reduzir a margem inferior do título principal */
    margin-bottom: 10px; 
}

.overlay-title .highlight-text-light {
    color: var(--color-text-light); 
}

/* --------------------------------- */
/* DETALHES DO PROJETO */
/* --------------------------------- */
.project-details {
    display: flex;
    margin-bottom: 25px;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.detail-icon {
    font-size: 20px;
    margin-right: 8px;
}

.detail-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* --------------------------------- */
/* CTA BUTTON (AGORA FORA DO CARD) */
/* --------------------------------- */
.view-more-card-cta {
    /* CHAVE: Estilos visuais do botão */
    background-color: var(--color-primary); 
    color: var(--color-text-light);
    padding: 12px 30px;
    border-radius: 2px;
    
    /* CHAVE: Propriedades de link */
    text-decoration: none; 
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block; /* Permite centralizar e aplicar margin */

    /* CHAVE DE RIGOR: Raio de Borda de 4px */
    border-radius: 4px;
    
    /* CHAVE: Espaçamento para o posicionar ABAIXO do cartão */
    margin-top: 30px; 
    
    transition: background-color 0.3s ease-in-out;
}

.view-more-card-cta:hover {
    background-color: var(--color-darker-primary, #9c4524); 
}

/* --------------------------------- */
/* NOVO ESTILO: WRAPPER PARA CENTRALIZAÇÃO (CHAVE) */
/* --------------------------------- */
.portfolio-card-and-cta-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center; /* Centraliza o cartão e o botão */
    width: 100%; 
}

/* --------------------------------- */
/* ESTILOS PARA O LINK DA IMAGEM (<a>) */
/* --------------------------------- */
.image-link-wrapper {
    text-decoration: none; 
    color: inherit; 
    display: block; /* Garante que o link cobre a área da imagem */
    width: 100%;
}

/* ============================================== */
/* NOVO ESTILO: ESPAÇAMENTO VERTICAL ENTRE CARTÕES */
/* Rigor: Essencial para separar os cartões duplicados */
/* ============================================== */
.margin-top-large {
    margin-top: 80px; /* Adiciona espaçamento vertical de 80px */
}

/* --------------------------------- */
/* Mobile: SECTION 9 PORTFOLIO        */
/* --------------------------------- */

@media (max-width: 768px) {
    .portfolio-section-horizontal {
        padding: 60px 0;
    }

    /* 1. HEADER DA SECÇÃO */
    .section-title {
        font-size: 38px !important;
        margin-bottom: 15px;
    }

    .header-description-uniform {
        font-size: 14px !important;
        padding: 0 5%;
    }

    /* 2. O CARTÃO (Ajuste de Altura para Mobile) */
    .portfolio-main-card {
        height: 500px !important; /* Reduzido de 850px para não exigir scroll excessivo */
        max-width: 100% !important;
    }

    /* 3. OVERLAY DE TEXTO (O PONTO CRÍTICO) */
    .card-content-overlay {
        max-width: 90% !important; /* Aumentado de 50% para 90% para caber o texto */
        padding: 25px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Garante leitura sobre a imagem */
        width: 100%;
    }

    .overlay-title {
        font-size: 28px !important; /* Reduzido de 45px para escala mobile */
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    .overlay-location {
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
    }

    /* 4. ESPAÇAMENTO ENTRE CARTÕES */
    .margin-top-large {
        margin-top: 50px !important;
    }

    /* 5. BOTÃO VIEW MORE */
    .view-more-card-cta {
        width: 80% !important;
        text-align: center;
        margin-top: 20px !important;
        padding: 14px !important;
        font-size: 13px !important;
    }
}


/* ============================================== */
/* ESTILOS DA SECÇÃO 10: CONTACT US */
/* ============================================== */

.contact-section {
    padding: 0; 
    background-color: #ffffff;
}

.contact-content-wrapper {
    display: flex;
    max-width: 1400px; 
    margin: 0 auto;
    min-height: 550px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
}

/* COLUNA 1: CTA (Cor Primária) */
.contact-cta-block {
    flex: 1; 
    background-color: var(--color-primary); 
    color: var(--color-text-light); 
    padding: 80px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.cta-welcome-title {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cta-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 350px;
}

/* Botão "READ MORE" */
.cta-read-more-button { 
    /* Assumindo que tem o mesmo background e cor de texto que o .cta-button */
    background-color: var(--color-primary); 
    color: var(--color-text-light);
    padding: 10px 20px; /* Padding ajustado, mas o resto é igual */
    
    /* CHAVE 1: Implementação da borda transparente para estabilidade */
    border: 2px solid transparent; 
    
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease; 
    text-decoration: none; 
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    border-radius: 4px;
    font-size: 14px; /* Exemplo de ajuste de fonte, se for um botão secundário */
} 

.cta-read-more-button:hover { 
    /* MANTER: O fundo escurece */
    background-color: var(--color-darker-primary); 
    
    /* CHAVE 2: Definir a cor da borda para branco/clara (o efeito de contorno) */
    border-color: var(--color-text-light); 
}


/* COLUNA 2: FORMULÁRIO (Branco) */
.contact-form-block {
    flex: 1; 
    background-color: var(--color-text-light);
    padding: 80px 50px;
}

/* Removemos a margem padrão do H2 que costuma empurrar elementos */
/* TÍTULO: Deve usar a fonte de destaque (Heading) */
.form-title {
    font-family: var(--font-heading); /* Garante que usa a mesma letra dos outros títulos */
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 !important;
    white-space: nowrap;
    text-transform: uppercase; /* Para manter o padrão de rigor dos seus títulos */
}

.header-contact-icons {
    display: flex;
    gap: 10px;             /* Espaço entre o botão WhatsApp e o Email */
}

/* ========================================================== */
/* BOTÕES DE CONTACTO RÁPIDO (HOME) */
/* ========================================================== */

/* Contentor que alinha o Título e os Botões em linha */
/* Este seletor comanda a linha do título */
.form-header-row {
    display: flex;         /* FORÇA A LINHA HORIZONTAL */
    flex-direction: row;   /* Garante que os elementos ficam lado a lado */
    align-items: center;   /* Alinha o centro do título com o centro dos círculos */
    gap: 20px;             /* Afasta os botões do texto "CONTACT US" */
    margin-bottom: 30px;   /* Espaço para o formulário que vem abaixo */
}

.form-header-row .form-title {
    margin: 0; /* Remove margens que desalinhariam os botões */
}

/* Estilo Base do Botão Circular */
.contact-button {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Medidas de Rigor */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    /* Estética */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 18px;
    
    /* Transições e Sombras */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;

    font-family: var(--font-body); /* Ou var(--font-heading) se quiser os números mais estilizados */
    font-weight: 700;
}

/* Comportamento de Hover */
.contact-button:hover {
    background-color: var(--color-darker-primary, #993b13);
    transform: translateY(-2px);
    color: var(--color-text-light);
}

/* Ajuste do ícone para garantir centralização absoluta */
.contact-button i {
    line-height: 0;
    display: block;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    outline: none;
    font-family: var(--font-body);
    
    /* CHAVE DE RIGOR: Arredondamento das caixas de texto */
    border-radius: 4px; 
}

.contact-form textarea {
    height: 120px;
    resize: none;
}

.cta-form-submit {
    background-color: var(--color-text-light);
    color: var(--color-text-dark);
    padding: 15px 30px;
    border: 1px solid #333; 
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 14px;
    align-self: flex-start; 
    transition: background-color 0.3s;
    
    /* CHAVE DE RIGOR: Arredondamento do botão de submissão */
    border-radius: 4px; 
}

/* ESTILO HOVER DO BOTÃO SEND MESSAGE */
.cta-form-submit:hover {
    /* 1. Remove o efeito de escurecimento, mantendo o fundo branco */
    background-color: var(--color-text-light); 
    
    /* 2. CHAVE: Mudar a cor do texto para o laranja primário */
    color: var(--color-primary); 
    
    /* 3. CHAVE: Mudar a cor da borda para o laranja primário */
    border: 1px solid var(--color-primary); 
    
    /* Garante que o raio de borda de 4px é mantido */
    border-radius: 4px; 
}

/* --------------------------------- */
/* Mobile: SECTION 10 CONTACT US     */
/* --------------------------------- */

@media (max-width: 768px) {
    .contact-section {
        padding: 0;
    }

    /* 1. WRAPPER: Conversão de Flex-row para Column */
    .contact-content-wrapper {
        flex-direction: column !important;
        min-height: auto !important;
        box-shadow: none; /* Remove sombra externa para um look mais flat no mobile */
    }

    /* 2. BLOCO LARANJA (CTA) */
    .contact-cta-block {
        padding: 60px 8% !important; /* Padding lateral em % para consistência */
        align-items: center !important; /* Centraliza conteúdo para melhor hierarquia */
        text-align: center;
    }

    .cta-welcome-title {
        font-size: 36px !important; /* Ajuste de escala */
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .cta-text {
        font-size: 14px !important;
        max-width: 100% !important; /* Ocupa a largura total disponível */
        margin-bottom: 30px;
    }

    /* REFORÇO DE VISIBILIDADE PARA O READ MORE (Estado Normal) */
    .cta-read-more-button {
        background-color: var(--color-text-light) !important; /* Branco */
        color: var(--color-primary) !important; /* Texto Laranja */
        border: 1px solid var(--color-text-light) !important;
        
        /* Mantém o resto do rigor visual */
        display: inline-block;
        padding: 15px 35px;
        border-radius: 4px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    /* EFEITO HOVER (Inverte para Sólido ou Escurece) */
    .cta-read-more-button:hover {
        background-color: transparent !important;
        color: var(--color-text-light) !important;
        border: 1px solid var(--color-text-light) !important;
    }

    /* 3. BLOCO DO FORMULÁRIO */
    .contact-form-block {
        padding: 60px 8% !important;
    }

    .form-title {
        font-size: 32px !important;
        text-align: center;
        margin-bottom: 30px;
    }

    .contact-form {
        gap: 15px !important; /* Redução ligeira do gap para poupar espaço vertical */
    }

    /* Otimização de Inputs para Touch */
    .contact-form input,
    .contact-form textarea {
        font-size: 16px !important; /* Evita o zoom automático do iOS ao focar no input */
        padding: 18px 15px !important; /* Aumenta a área de toque */
    }

    .contact-form textarea {
        height: 150px !important; /* Mais espaço para escrever no mobile */
    }

    /* 4. BOTÃO DE SUBMISSÃO */
    .cta-form-submit {
        align-self: stretch !important; /* Botão ocupa a largura total */
        width: 100%;
        padding: 18px !important;
        font-size: 14px !important;
        text-align: center;
        margin-top: 10px;
    }
}

/* ============================================== */
/* ESTILOS DA SECÇÃO 11: RODAPÉ (FOOTER) FINAL */
/* ============================================== */

/* Definições de Container Comuns */
.main-footer { padding: 0; font-size: 14px; }
.footer-container {
     max-width: 1400px; 
     margin: 0 auto;
}

/* --- PARTE 1: CONTEÚDO PRINCIPAL (Cor Primária) --- */
.footer-primary-content {
    background-color: var(--color-primary); /* Fundo #af4616 */
    color: var(--color-text-light); 
    padding: 80px 0 50px 0; 
}

/* AJUSTE CHAVE: Layout Grid para 4 Colunas */
.footer-grid-layout {
    display: grid;
    /* 1.8fr (Intro/Logo) | 1fr (Links 1) | 1fr (Links 2) | 1.2fr (Links 3) */
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr; 
    gap: 40px; /* Espaçamento padrão para 4 colunas */
    margin-bottom: 40px; 
    
    /* RIGOR: Aplicar PADDING lateral aqui para alinhar a grelha */
    padding: 0 5%; 
}

.footer-col h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
}

/* ESTILOS DA COLUNA DE INTRODUÇÃO/LOGO */
.footer-logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.footer-intro-text {
    font-size: 14px; 
    line-height: 1.6;
    margin-bottom: 30px; 
    opacity: 0.9;
    max-width: 300px; 
}

/* ESTILOS DE LINKS (Aplicados a todas as colunas de links) */
.footer-col ul { list-style: none; padding: 0; }
.footer-col a {
    text-decoration: none;
    color: var(--color-text-light);
    opacity: 0.8;
    line-height: 2.2; /* Aumenta a altura para melhor leitura */
    transition: opacity 0.3s;
    font-size: 13px;
    display: block; 
}
.footer-col a:hover { opacity: 1; text-decoration: underline; }

/* ESTILOS DAS REDES SOCIAIS */
.footer-social-icons {
    margin-top: 25px; 
    margin-bottom: 0; 
    display: block; 
}

/* ESTILOS DAS REDES SOCIAIS (ULTRA LIMPO - NOVO ESTILO) */
.footer-social-icons .social-link {
    display: inline-block;
    width: auto; 
    height: auto; 
    color: var(--color-text-light); 
    background-color: transparent; 
    border: none; 
    text-decoration: none;
    border-radius: 0; 
    font-size: 25px; 
    opacity: 0.8; 
    margin-right: 20px; 
    transition: opacity 0.3s, color 0.3s;
}

/* HOVER DOS ÍCONES SOCIAIS (EFEITO SIMPLES POR OPACIDADE) */
.footer-social-icons .social-link:hover {
    background-color: transparent; 
    color: var(--color-text-light); 
    opacity: 1; /* CHAVE DE RIGOR: Aumenta a opacidade para 100% no hover */
    text-decoration: none;
}


/* ESTILOS DA LINHA DE CONTACTO NO MENU (WHATSAPP/EMAIL/CONTACT US) */
.footer-contact-row {
    display: flex; 
    align-items: center; 
    padding: 5px 0; 
    list-style: none;
    justify-content: flex-start; 
    margin-left: 0 !important; 
    width: 100%; 
}

/* AJUSTE NO LAYOUT DOS LINKS INTERNOS */
.footer-contact-row .contact-link {
    display: flex;
    align-items: center;
    font-size: 16px;
    opacity: 0.8;
    color: var(--color-text-light); 
    text-decoration: none;
    line-height: 1; 
    margin-right: 15px; 
    margin-left: 0; 
}

.footer-contact-row .contact-link:hover {
    opacity: 1;
    color: var(--color-text-light);
    text-decoration: underline; 
}

/* O link "Contact us" (o texto) deve ser o último elemento */
.footer-contact-row .contact-us-link {
    font-size: 13px; 
    margin-left: 0; 
}

/* REGRAS ESPECÍFICAS PARA OS ÍCONES (ANULAÇÃO DO SUBALINHADO) */
.footer-contact-row .whatsapp-link:hover,
.footer-contact-row .email-link:hover {
    text-decoration: none;
}



/* LINHA DIVISÓRIA INTERNA */
.footer-internal-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 20px 0 30px 0;
}

/* ========================================================== */
/* ESTILOS DA LINHA INFERIOR (LRE / WEBCAMS) - CHAVES DE RIGOR */
/* ========================================================== */

/* AJUSTE: Garante que a linha inferior segue o alinhamento da grelha superior */
.footer-partners-row {
    display: flex;
    justify-content: flex-start; 
    align-items: center;

    /* RIGOR TÉCNICO: Replica o padding da grelha superior (footer-grid-layout) */
    padding: 20px 5% 40px 5%; 
    
    /* Garante que o container não ultrapassa os 1400px definidos no topo */
    max-width: 1400px;
    margin: 0 auto; 
}

/* Opcional: Garante que o bloco de links não tem margens parasitas */
.footer-links-center {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: 5px;
    margin: 0; /* Remove qualquer margem que possa deslocar o bloco */
}

/* CORREÇÃO DO TAMANHO DA LETRA E REFINAMENTO DO ESTILO TEXTO DO LRE/WEBCAMS */
.footer-text-link {
    font-size: 14px; 
    line-height: 1.6; 
    text-decoration: none;
    color: var(--color-text-light); 
    opacity: 0.8;
    font-weight: 400; /* Reduzido de 700 para Regular */
    transition: opacity 0.3s;
    white-space: nowrap; 
    font-family: inherit; 
    margin: 0; /* Anula margem lateral */
    padding: 2px 0;
}

.footer-text-link:hover {
    opacity: 1; 
    text-decoration: underline; 
}


/* --- PARTE 2: COPYRIGHT E AUTORIA (Fundo Branco, de ponta a ponta) --- */
.footer-copyright-strip {
    background-color: var(--color-text-light); /* Fundo Branco */
    padding: 20px 0; 
    border-top: 1px solid #eee; 
}

/* Aplica Flexbox para alinhamento Lado-a-Lado */
.footer-bottom-info {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    
    /* CHAVE DE RIGOR: Aplicar PADDING lateral e Max-Width para alinhamento */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%; 
}

/* Estilos de Texto do Copyright */
.copyright-info {
    font-family: var(--font-body); 
    font-size: 12px; /* Tamanho Padrão de Copyright */
    color: var(--color-text-dark); 
    opacity: 0.8;
    font-weight: 400; /* Uniformizado para Regular */
}

/* ESTILOS DE RIGOR PARA A IMAGEM CENTRAL NA FAIXA INFERIOR */
.footer-middle-logo {
    max-width: 100px; 
    max-height: 50px; 
    height: auto; 
    display: block; 
    align-self: center; 
    margin: 0 15px; 
    opacity: 0.5; /* Suaviza a imagem para não competir com o texto */
}

/* Estilo do Designer (Morada) */
.designer-info {
    font-family: var(--font-body); 
    font-size: 12px; /* Uniformizado com Copyright */
    color: var(--color-text-dark);
    opacity: 0.8;
    font-weight: 400; /* Uniformizado para Regular */
}

/* ============================================== */
/* STYLES: COOKIE CONSENT BANNER 1º Camada (FULL-WIDTH FIXED) */
/* ============================================== */
.cookie-banner {
    position: fixed; /* CRITICAL: Fixes the banner to the viewport */
    bottom: 0;        /* Places it exactly at the bottom */
    left: 0;          
    width: 100%;      
    
    background-color: #333; 
    color: white;
    padding: 30px; 
    box-sizing: border-box; 
    box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.4); 
    z-index: 99999; 
    
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

/* Rule to hide the banner (used by JavaScript) */
.cookie-banner.hidden {
    display: none; 
}

/* Text Style */
.cookie-banner p {
    flex-grow: 1;
    margin: 0; 
    font-size: 14px;
    line-height: 1.5;
    margin-right: 20px; 
}

/* Buttons and Links Styles */
.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0; 
}

.cookie-actions .cookie-link {
    color: #ccc; 
    text-decoration: underline;
    align-self: center;
    font-size: 13px;
}

/* UNIFICATION: Applies Primary Orange/Brown colour to ALL buttons */
.cookie-actions .btn-primary, 
.cookie-actions .btn-secondary {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    white-space: nowrap; 
    
    background-color: var(--color-primary); 
    color: white; 
    font-weight: 700;
}

/* ============================================== */
/* ESTILOS: MODAL DE CONFIGURAÇÃO (SEGUNDA CAMADA) */
/* ============================================== */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para focar no modal */
    z-index: 100000; /* CRÍTICO: Deve estar por cima de todo o conteúdo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-modal.hidden {
    display: none; /* Escondido por defeito, aberto pelo JavaScript */
}

.modal-content {
    background-color: white;
    color: #333;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.modal-content h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Estilo para as categorias de Cookies */
.cookie-category {
    margin: 10px 0;
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.cookie-category input {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.modal-content p {
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Estilos dos Botões no Modal */
.modal-actions {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

/* Estilo para 'Save preferences' */
.modal-save {
    /* Use a sua cor primária para um botão de acção positiva */
    background-color: var(--color-primary, #A94442); 
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
}

/* Estilo para 'Cancel' */
.modal-cancel {
    background-color: transparent;
    color: #333;
    border: 1px solid #ccc; 
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
}

/* --------------------------------- */
/* Mobile: SECTION 11 FOOTER         */
/* --------------------------------- */

@media (max-width: 768px) {
    /* 1. GRELHA: Transição para 2 Colunas */
    .footer-grid-layout {
        grid-template-columns: 1fr 1fr !important; /* Duas colunas iguais */
        column-gap: 20px !important;
        row-gap: 40px !important;
        padding: 0 5% !important;
        text-align: left; /* Alinhamento à esquerda economiza espaço vertical */
    }

    /* 2. LOGO E INTRO: Ocupa as duas colunas no topo */
    .footer-intro {
        grid-column: span 2; /* Faz o logo ocupar a largura toda */
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
        margin-bottom: -10px;
    }

    .footer-intro-text {
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* 3. REDUÇÃO DE TAMANHOS (Otimização de Espaço) */
    .footer-col h3 {
        font-size: 14px !important; /* Títulos menores */
        margin-bottom: 12px !important;
    }

    .footer-col a {
        line-height: 1.8 !important; /* Reduzido de 2.2 para 1.8 */
        font-size: 12px !important;
    }

    /* 4. LINKS LEGAIS E PARCEIROS */
    .footer-partners-row {
        padding: 0 8% !important; /* Margem lateral generosa para mobile */
        justify-content: center !important; /* Centra o bloco de links */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .footer-links-center {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Links legais também em 2 colunas */
        gap: 10px;
        width: 100%;
    }

    .footer-text-link {
        font-size: 11px !important;
        white-space: normal !important; /* Permite quebra de linha se necessário */
    }

    /* 5. FAIXA DE COPYRIGHT COMPACTA */
    .footer-copyright-strip {
        padding: 10px 0 !important; /* Reduzido para o mínimo funcional */
        background-color: var(--color-text-light);
    }

    .footer-bottom-info {
        display: flex !important;
        flex-direction: column !important; /* Mantém vertical */
        gap: 6px !important; /* Espaçamento mínimo entre blocos */
        align-items: center !important;
    }

    .footer-middle-logo {
        order: 1 !important;
        max-width: 50px !important;
        margin: 0 0 5px 0 !important;
        opacity: 0.6;
    }

    .designer-info {
        order: 2 !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
        text-align: center;
        max-width: 80%; /* Evita que o texto bata nas bordas */
    }
    .copyright-info {
        order: 3 !important;
        font-size: 9px !important; /* Ligeiramente menor para hierarquia */
        opacity: 0.7;
        text-align: center;
        margin-top: 2px !important;
    }
    .footer-copyright-strip {
        padding: 12px 0 !important;
    }

    /* 5. BANNER DE COOKIES REFORÇADO */
    .cookie-banner {
        padding: 20px !important;
        bottom: 0 !important;
    }

    .cookie-actions {
        width: 100% !important;
        flex-direction: column; /* Botões um por cima do outro para fácil clique */
    }

    .cookie-actions .btn-primary, 
    .cookie-actions .btn-secondary {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Ajuste do Modal de Preferências */
    .modal-content {
        width: 90% !important;
        padding: 25px !important;
    }
    
    .modal-actions {
        flex-direction: column;
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-text-light); /* Fundo branco */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Garante que está acima de tudo */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-content {
    text-align: center;
    font-family: var(--font-heading);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--color-primary); /* O seu laranja */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Classe para esconder o loader */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}