/* ================================================= */
/* --- RESET BÁSICO (Obrigatório para começar do zero) --- */
/* ================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f4f2ea; /* Cor creme para o resto do site */
}

/* ================================================= */
/* --- SECÇÃO HERO --- */
/* ================================================= */
#hero {
    position: relative;
    width: 100%;
    height: 120vh; /* Ocupa exatamente 100% da altura do ecrã */
    background-color: #1f775e;
    overflow: hidden; /* Corta o que sair fora da secção */
    display: flex;
    justify-content: center;
}

/* --- FUNDOS ABSOLUTOS --- */
.bg-setas {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 15%; 
    min-width: 200px; /* Garante que não ficam fininhas demais */
    max-width: 350px; /* Impede que fiquem gigantes e comam o ecrã no monitor grande */
    object-fit: cover;
    object-position: left;
    z-index: 1;
}

.bg-cidade {
    position: absolute;
    bottom: 57%;
    right: 2%; 
    width: 55%; 
    max-width: 800px; /* Impede a cidade de ficar do tamanho do Godzilla */
    opacity: 0.4;
    z-index: 2;
}

/* --- CONTAINER PRINCIPAL --- */
.hero-container {
    position: relative;
    z-index: 10; 
    width: 100%;
    /* Removemos o max-width para ele esticar com o monitor */
    padding: 8vh 25% 40px 5%; /* Damos 25% de espaço à direita para o texto NUNCA bater nas setas */
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
/* --- 1. TOPO: TEXTOS --- */
.hero-texto {
    display: flex;
    flex-direction: column;
}

.hero-texto {
    display: flex;
    flex-direction: column;
}

.img-titulo-hero {
    width: 100%; /* Faz com que a imagem se adapte a ecrãs pequenos */
    max-width: 600px; /* Impede a imagem de ficar gigante num monitor grande (ajusta este valor a teu gosto!) */
    height: auto;
    margin-left: 3.5%;
    margin-top: 3.5%;
}

/* --- 2. MEIO: ESCADA DE IMAGENS --- */
.hero-escada {
    display: flex;
    flex-direction: column;
    width: 106%;
    margin-top: 10vh;
}

.frase {
    width: 30%; /* Largura de cada frase */
    min-width: 250px;
    height: auto;
    object-fit: contain;

    
    opacity: 0; /* Começam escondidas */
    animation: aparecerFrase 0.6s ease-out forwards; /* Define o tipo de animação */
}

/* Empurra as imagens para a direita formando a escada */
/* Define a margem E o atraso de cada uma */
.f1 { margin-left: 5%; animation-delay: 0.3s; } /* Aparece quase logo */
.f2 { margin-left: 45%; animation-delay: 0.9s; } /* Meio segundo depois da f1 */
.f3 { margin-left: 85%; animation-delay: 1.5s; } /* Meio segundo depois da f2 */

/* --- 3. FUNDO: RODAPÉ --- */
.hero-rodape {
    align-self: center; /* Centra em relação ao ecrã */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 25%;
}

.seta-animada {
    width: 70px;
    margin-bottom: 20px;
    animation: saltitar 2s infinite ease-in-out;
}

.logo-ps {
    height: 50px;
    width: auto;
}

@keyframes saltitar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ================================================= */
/* --- SECÇÃO SOBRE NÓS (Bloco a seguir ao Hero) --- */
/* ================================================= */
#sobre-nos {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --- 1. Faixa Verde Topo --- */
.sobre-topo {
    background-color: #1f775e;
    height: 180px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    position: relative;
    overflow: visible !important;

    z-index: 999;
}

.img-titulo-topo {
    width: 100%; /* Adapta-se a ecrãs pequenos */
    /* Limitamos a largura para não ficar muito grande e deixar espaço para o menu */
    max-width: 327px; 
    height: auto;
    position: relative;
    z-index: 10; /* Garante que fica por cima do desenho da cidade de fundo */
    margin-top: 1%;
}

/* --- Otimização para Telemóvel --- */
@media (max-width: 900px) {
    .img-titulo-topo {
        max-width: 300px; /* Fica ligeiramente mais pequena no telemóvel */
        margin-bottom: 15px; /* Dá espaço se o menu passar para baixo */
    }
}

.sobre-titulo h2 {
    font-size: clamp(3rem, 5vw, 6rem);
    font-weight: 900;
    color: #f4f2ea;
    line-height: 0.8;
    letter-spacing: -3px;
}

.sobre-titulo p {
    font-size: clamp(0.8rem, 1vw, 1.2rem);
    color: #65b18f;
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 600;
}

.sobre-bg-cidade {
    position: absolute;
    right: 48.5%;
    height: 100%;
    width: auto;
    object-fit: cover;
    z-index: 1;
}

.sobre-menu-nota {
    z-index: 2;
    font-size: 1.2rem;
    color: #113f31;
    text-align: right;
    font-weight: 500;
}

/* --- 2. Zona Central (Fundo claro/papel) --- */
.sobre-meio {
    /* Mudamos o padding de baixo para 0 */
    padding: 60px 5% 0 5%; 
    display: flex;
    align-items: flex-end; /* Faz com que o conteúdo (incluindo a foto) se alinhe pelo fundo */
    gap: 60px;
    background-image: url('./imagens/fundo.png');
}

.sobre-texto {
    flex: 1;
}

.sobre-texto p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
    color: #222;
    font-weight: 500;
}

.caixa-assinatura {
    margin-top: 40px;
    text-align: right; /* Alinhado à direita conforme o design */
}

.img-assinatura {
    height: 120px;
    width: auto;
    margin-bottom: 5px;
}

.caixa-assinatura .cargo-verde {
    font-weight: 800;
    color: #1f775e;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 3%;
    margin-left: 28%
}

.sobre-foto {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    
    margin-bottom: px; /* Puxa a foto para baixo. Ajusta este valor para a altura exata do teu rodapé! */
    z-index: 20;
}

.img-candidata {
    width: 200%;
    max-width: 600px;
    height: auto;

    position: relative; 
    top: 70px;
}

.img-texto-sobreposto {
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 90%;
    max-width: 350px;

    margin-bottom: 8%;
}

.img-candidata-seccao {
    width: 200%;
    max-width: 600px;
    height: auto;

    position: relative; 
    top: 0px;
}

.img-candidata-seccao-barca {
    width: 200%;
    max-width: 400px;
    height: auto;

    position: relative; 
    top: 0px;
}

.img-candidata-seccao-pr {
    width: 200%;
    max-width: 500px;
    height: auto;

    position: relative; 
    top: 0px;
}

.img-texto-sobreposto {
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 90%;
    max-width: 350px;

    margin-bottom: 8%;
}



/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .sobre-topo {
        flex-direction: column;
        height: auto;
        padding: 30px 20px;
        text-align: center;
    }
    .sobre-bg-cidade {
        position: relative;
        right: 0;
        width: 100%;
        margin: 20px 0;
    }
    .sobre-meio {
        flex-direction: column;
        padding: 40px 20px;
    }
    .caixa-assinatura {
        text-align: center;
    }
    .img-texto-sobreposto {
        right: auto;
    }
    .img-candidata {
        top: 0px;
    }
}

/* ================================================= */
/* --- SECÇÃO MANDATÁRIA --- */
/* ================================================= */
#mandataria {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Se tiveres a imagem da textura de papel, podes adicioná-la aqui */
    background-image: url('./imagens/fundo.png');
}

.mandataria-meio {
    /* Mudamos o padding de baixo para 0 */
    padding: 80px 5% 0 5%; 
    display: flex;
    align-items: flex-end; /* Alinha a foto à base */
    gap: 60px;
    max-width: 1300px;
    margin: 0 auto;
}

/* --- Lado Esquerdo: Foto --- */
.mandataria-foto {
    flex: 1;
    display: flex;
    justify-content: center;
}

.img-mandataria {
    width: 500%;
    max-width: 1150px;
    height: auto;
}

/* --- Lado Direito: Texto --- */
.mandataria-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mandataria-texto p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
    color: #222;
    font-weight: 500;
}

/* Caixa da assinatura alinhada à direita */
.caixa-assinatura-direita {
    margin-top: 40px;
    align-self: flex-end; /* Encosta o bloco todo à direita do container flex */
    text-align: right;
}

.caixa-assinatura-direita .cargo-verde {
    font-weight: 800;
    color: #1f775e;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 3%;
}



/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .mandataria-meio {
        flex-direction: column; /* Coloca a foto em cima e o texto em baixo */
        padding: 40px 20px;
    }
    
    .caixa-assinatura-direita {
        align-self: center; /* Volta a centrar a assinatura no telemóvel para ficar melhor */
        text-align: center;
    }
}

/* ================================================= */
/* --- SECÇÃO AGENDA (Calendário Interativo) --- */
/* ================================================= */
#agenda {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('./imagens/fundo.png');
}

/* --- Reutilização do Topo e Rodapé das secções anteriores --- */
.agenda-topo {
    background-color: #1f775e;
    height: 180px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
}
.agenda-titulo h2 { font-size: clamp(3rem, 5vw, 6rem); font-weight: 900; color: #f4f2ea; line-height: 0.8; letter-spacing: -3px; }
.agenda-titulo p { font-size: clamp(0.8rem, 1vw, 1.2rem); color: #65b18f; text-transform: uppercase; margin-top: 8px; font-weight: 600; }
.agenda-bg-cidade { position: absolute; right: 48.5%; height: 100%; width: auto; object-fit: cover; z-index: 1; }
.agenda-menu-nota { z-index: 2; font-size: 1.2rem; color: #113f31; text-align: right; font-weight: 500; }
.agenda-rodape { background-color: #1f775e; height: 60px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
.agenda-bg-setas-fundo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./imagens/setas-rodape.png'); background-size: cover; background-position: center; z-index: 1; }
.agenda-logo-ps { height: 35px; width: auto; position: relative; z-index: 2; }

/* --- Zona Central: Layout --- */
.agenda-meio {
    padding: 80px 5%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* --- Lado Esquerdo: Calendário --- */
.calendario-bloco {
    flex: 1;
    max-width: 500px;
}

.mes-titulo {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1f775e; /* 2026 a verde escuro */
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.mes-verde-claro {
    color: #65b18f; /* MAIO a verde claro */
}

/* A Grelha do Calendário */
.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 colunas iguais */
    row-gap: 20px;
}

/* Letras dos dias (SEG, TER...) */
.dia-semana {
    font-weight: 900; /* Alterado de 600 para 900 para ficar bem a negrito */
    color: #1f775e;
    text-align: center;
    font-size: 0.9rem;
    padding-bottom: 15px;
}

/* Números dos dias */
.dia, .dia-vazio {
    text-align: center;
    font-weight: 600;
    color: #1f775e;
    font-size: 1rem;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s ease; /* Animação suave no clique e hover */
}

/* --- Navegação dos Meses --- */
.mes-navegacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.mes-navegacao button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #1f775e;
    cursor: pointer;
    font-weight: 900;
    transition: color 0.2s;
    padding: 0 10px;
}

.mes-navegacao button:hover {
    color: #65b18f;
}

.mes-titulo {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1f775e;
    text-align: center;
    letter-spacing: -1px;
    min-width: 250px; /* Impede que o bloco salte muito ao mudar de mês */
}

/* --- Novas Grelhas (Separamos o cabeçalho dos dias para o JS não apagar as letras) --- */
.calendario-cabecalho, .calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendario-grid {
    row-gap: 20px;
}

/* Garante as linhas certas */
.calendario-cabecalho > div:not(:nth-child(7n)),
.calendario-grid > div:not(:nth-child(7n)) {
    border-right: 1px solid rgba(255, 255, 255, 0.8);
}

/* Linhas separadoras verticais (exceto no último dia da semana - Domingo) */
.dia-semana:not(:nth-child(7n)),
.dia:not(:nth-child(7n)), 
.dia-vazio:not(:nth-child(7n)) {
    border-right: 1px solid rgba(255, 255, 255, 0.8); 
}

/* Efeito ao passar o rato e estado Ativo */
.dia:hover {
    background-color: rgba(101, 177, 143, 0.3); /* Fundo verde clarinho no hover */
}

.dia.ativo {
    background-color: #1f775e;
    color: #f4f2ea;
}

.dia.hoje {
    border: 2px solid #65b18f !important; /* Um aro verde claro */
    font-weight: 900;
    color: #1f775e;
}

/* --- Lado Direito: Detalhes do Evento --- */
.evento-bloco {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px; /* Desce o texto para alinhar mais ao meio do calendário */
    margin-left: 3%;
}

.evento-data {
    font-size: 3rem;
    font-weight: 900;
    color: #65b18f;
    line-height: 1;
    letter-spacing: -2px;
}

.evento-info h4 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1f775e;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.1;
}

.evento-info p {
    font-size: 1.1rem;
    font-style: italic;
    color: #1f775e;
}

#caixa-eventos-lista {
    flex: 1;
    display: flex;
    flex-direction: column; /* Eventos um debaixo do outro */
    gap: 30px;
    margin-top: 60px;
}

.evento-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(31, 119, 94, 0.1); /* Linha subtil entre eventos */
    padding-bottom: 20px;
}

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

/* Faz o título do Mês parecer um botão clicável */
.mes-titulo {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mes-titulo:hover {
    transform: scale(1.05); /* Dá um pequeno zoom ao passar o rato */
}

/* Caixa que segura a lista de eventos do mês */
#vista-mes {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os eventos da lista */
    max-height: 250px; /* Limita a altura */
    overflow-y: auto; /* Cria barra de rolagem se houver muitos eventos */
    padding-right: 15px;
    width: 100%;
}

/* O design de cada evento na lista mensal */
.evento-item-mes h4 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #1f775e;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.evento-item-mes p {
    font-size: 0.9rem;
    font-style: italic;
    color: #1f775e;
}

/* Personalizar a barrinha de scroll para ficar verde e elegante */
#vista-mes::-webkit-scrollbar {
    width: 6px;
}
#vista-mes::-webkit-scrollbar-track {
    background: rgba(31, 119, 94, 0.1);
    border-radius: 4px;
}
#vista-mes::-webkit-scrollbar-thumb {
    background: #65b18f;
    border-radius: 4px;
}

/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .agenda-meio {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 40px 20px;
    }
    .evento-bloco {
        margin-top: 0;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ================================================= */
/* --- SECÇÃO LISTA CANDIDATOS --- */
/* ================================================= */
#lista-candidatos {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Adiciona o teu fundo de papel aqui, se for global podes retirar */
    background-image: url('./imagens/fundo.png'); 
}

.lista-meio {
    position: relative; /* Importante para segurar a imagem dos prédios no fundo */
    padding: 80px 5% 0 5%;
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    min-height: 500px; /* Garante espaço para os prédios mesmo que a lista seja curta */
}

.lista-conteudo {
    position: relative;
    z-index: 2; /* Fica acima do desenho caso a lista cresça muito */
    width: 60%; /* Ocupa a parte esquerda do ecrã */
    padding-bottom: 60px; /* Dá um respiro antes da barra verde do rodapé */
}

.lista-titulo {
    color: #1f775e;
    font-size: 1.5rem; /* Ajusta se achares muito grande/pequeno */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.lista-nomes {
    list-style-type: none; /* Tira as bolinhas pretas normais */
    padding-left: 0; /* Remove o recuo padrão do navegador */
    margin-bottom: 40px;
}

/* --- Cada item da lista --- */
.lista-nomes li {
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 600; /* Pus um pouco mais gordinho para destacar */
    color: #222;
    position: relative; /* Necessário para posicionar a seta */
    padding-left: 35px; /* Espaço para caber a imagem da seta à esquerda */
    margin-bottom: 8px; /* Espacinho entre cada nome */
    display: flex;
    align-items: center;
}

/* --- A caixa invisível onde vamos colocar a seta --- */
.lista-nomes li::before {
    content: ''; /* Elemento vazio */
    position: absolute;
    left: 0;
    width: 20px; /* Largura da tua seta (ajusta se ficar muito grande/pequena) */
    height: 20px; /* Altura da tua seta */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- A MAGIA DA ALTERNÂNCIA --- */

/* Nos itens ÍMPARES (1, 3, 5, 7...) usa a seta verde */
.lista-nomes li:nth-child(odd)::before {
    background-image: url('./imagens/seta-lista-verde.png');
}

/* Nos itens PARES (2, 4, 6, 8...) usa a seta branca */
.lista-nomes li:nth-child(even)::before {
    background-image: url('./imagens/seta-lista-verde.png');
}

/* --- A Imagem do Desenho --- */
.lista-img-predios {
    position: absolute;
    bottom: 0; /* Cola a imagem ao fundo (à barra verde) */
    right: 5%;
    width: 40%;
    max-width: 550px;
    height: auto;
    z-index: 1; /* Fica atrás do texto */
    pointer-events: none; /* Impede que a imagem bloqueie cliques na lista */
}

/* --- Faixa Verde Fundo (Rodapé padrão) --- */
.lista-rodape {
    background-color: #1f775e;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 5; /* Garante que a barra verde fica sempre por cima de tudo */
}

.lista-bg-setas-fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./imagens/setas-rodape.png');
    background-size: cover; 
    background-position: center;
    z-index: 1;
}

.lista-logo-ps {
    height: 35px;
    width: auto;
    position: relative;
    z-index: 2;
}

/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .lista-meio {
        padding: 50px 20px 0 20px;
    }
    
    .lista-conteudo {
        width: 100%; /* O texto passa a ocupar 100% da largura */
    }
    
    .lista-img-predios {
        width: 70%;
        opacity: 0.3; /* Transforma o desenho numa marca de água mais sumida para não atrapalhar a leitura da lista que vai passar por cima no telemóvel */
    }
}


/* ================================================= */
/* --- SECÇÃO CONTACTOS --- */
/* ================================================= */
#contactos {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('./imagens/fundo.png'); /* A tua textura */
}

/* --- Reutilização do Topo e Rodapé --- */

.contacto-rodape { background-color: #1f775e; height: 60px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
.contacto-bg-setas-fundo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./imagens/setas-rodape.png'); background-size: cover; background-position: center; z-index: 1; }
.contacto-logo-ps { height: 35px; width: auto; position: relative; z-index: 2; }

/* --- Zona Central: Layout --- */
.contacto-meio {
    padding: 80px 5%;
    display: flex;
    align-items: flex-start;
    gap: 80px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* --- Lado Esquerdo: Info --- */
.contacto-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.img-titulo-contributo {
    width: 100%;
    max-width: 350px;
    height: auto;
    margin-bottom: 30px; /* Dá espaço entre a imagem e o texto */
}

.contacto-info p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
    color: #222;
    font-weight: 500;
}

/* --- Lado Direito: Formulário --- */
.contacto-form-caixa {
    flex: 1;
    width: 100%;
}

.formulario-acreditar {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço entre as caixas de texto */
}

/* Estilo das caixas de input e textarea */
.formulario-acreditar input,
.formulario-acreditar textarea {
    width: 100%;
    padding: 18px 20px;
    background-color: transparent; /* Fundo transparente para mostrar o papel */
    border: 2px solid #65b18f; /* Borda verde clara */
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    color: #1f775e;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Muda a cor da borda quando se clica para escrever */
.formulario-acreditar input:focus,
.formulario-acreditar textarea:focus {
    outline: none;
    border-color: #1f775e; /* Borda verde escura */
    background-color: rgba(255, 255, 255, 0.5); /* Dá um fundo ligeiramente mais branco para destacar */
}

/* Muda a cor do texto padrão (o "O seu Nome" clarinho) */
.formulario-acreditar input::placeholder,
.formulario-acreditar textarea::placeholder {
    color: #88c8af;
    font-weight: 500;
}

/* --- Botão Enviar --- */
.botao-enviar {
    align-self: flex-start; /* Impede o botão de esticar até ao fim da caixa */
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #1f775e;
    color: #f4f2ea;
    border: none;
    font-size: 1rem;
    font-weight: 800;
    padding: 16px 40px;
    border-radius: 50px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(31, 119, 94, 0.2);
}

.botao-enviar:hover {
    background-color: #65b18f;
    color: #1f775e;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(101, 177, 143, 0.4);
}

.botao-enviar:hover .seta-botao {
    transform: translateX(6px);
}

/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .contacto-meio {
        flex-direction: column;
        gap: 50px;
        padding: 50px 20px;
    }
    
    .botao-enviar {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================= */
/* --- MENU DE NAVEGAÇÃO --- */
/* ================================================= */
.menu-site {
    position: relative;
    z-index: 9999; /* Garante que fica por cima do desenho da cidade */
}

.menu-lista {
    display: flex;
    gap: 30px; /* Espaço entre os botões do menu */
    list-style: none; /* Tira as bolinhas da lista */
    margin: 0;
    padding: 0;
}

.menu-lista li a {
    color: #f4f2ea; /* A cor creme do teu fundo, para contrastar com o verde */
    text-decoration: none; /* Tira o sublinhado dos links */
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease; /* Animação suave na cor */
}

/* O que acontece quando passas o rato por cima */
.menu-lista li a:hover {
    color: #65b18f; /* Muda para o verde clarinho */
}

/* --- O Toque de Mágica: Deslizar Suave --- */
html {
    scroll-behavior: smooth; 
    /* Isto faz com que, ao clicar no link, a página deslize lentamente até à secção em vez de saltar bruscamente! */
}

/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .menu-lista {
        flex-wrap: wrap; /* Permite que os links passem para a linha de baixo se não couberem */
        justify-content: center; /* Centra o menu no telemóvel */
        gap: 15px;
        margin-top: 20px;
    }
    
    .menu-lista li a {
        font-size: 0.9rem; /* Fica ligeiramente mais pequeno nos ecrãs pequenos */
    }
}

/* ================================================= */
/* --- SUBMENU (Dropdown) --- */
/* ================================================= */

/* Prepara o item principal para segurar o submenu */
.menu-item-com-submenu {
    position: relative; /* Mantém o submenu "preso" a este item */
}

/* A Caixa do submenu */
.submenu {
    position: absolute;
    top: 100%; /* Fica exatamente debaixo do botão "Listas" */
    left: 50%;
    transform: translateX(-50%) translateY(15px); /* Centra o submenu e empurra-o um pouco para baixo */
    background-color: #f4f2ea; /* Cor de creme para contrastar com o cabeçalho verde */
    min-width: 220px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Uma sombra bonita para dar profundidade */
    
    /* Configuração da animação (Escondido no início) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

/* O que acontece quando passas o rato no botão "Listas" */
.menu-item-com-submenu:hover .submenu {
    opacity: 1; /* Fica visível */
    visibility: visible;
    transform: translateX(-50%) translateY(5px); /* Sobe um bocadinho para dar o efeito de deslizar */
}

/* Estilo dos links dentro do submenu */
.submenu li a {
    color: #1f775e !important; /* Força a cor verde escura no texto do submenu */
    display: block; /* Faz com que toda a linha seja clicável */
    padding: 12px 20px;
    font-size: 0.9rem;
    text-transform: none; /* Letras normais, para nomes grandes de freguesias/secções */
    font-weight: 700;
    text-align: center;
}

/* Quando passas o rato nos itens do submenu */
.submenu li a:hover {
    background-color: rgba(101, 177, 143, 0.2); /* Fundo verde super claro */
    color: #1f775e;
}

/* --- Responsividade (Telemóveis) --- */
@media (max-width: 900px) {
    .submenu {
        position: static; /* No telemóvel, o submenu empurra o resto para baixo em vez de flutuar */
        transform: none;
        box-shadow: none;
        background-color: transparent;
        display: none; /* Esconde e só mostra com :hover ou cliques */
    }

    /* --- A CORREÇÃO ESTÁ AQUI ABAIXO --- */
    .menu-item-com-submenu:hover .submenu,
    .menu-item-com-submenu:focus-within .submenu,
    .menu-item-com-submenu:active .submenu {
        display: block;
        transform: none;
    }

    .submenu li a {
        color: #f4f2ea !important; /* Volta a ficar clarinho no telemóvel para se ler no fundo verde */
        padding: 8px;
    }
}

/* ================================================= */
/* --- NOVO DESIGN DOS RODAPÉS --- */
/* ================================================= */

/* Barra Verde Geral */
.rodape-estilizado, .sobre-rodape, .mandataria-rodape, .agenda-rodape, .lista-rodape, .contacto-rodape {
    background-color: #1f775e;
    height: 70px;
    display: flex;
    justify-content: space-between; /* Empurra as setas para as pontas e logo para o meio */
    align-items: center;
    padding: 0 4%; /* Espaço nas laterais */
    position: relative;
    width: 100%;
}

/* Tamanho das imagens das setas */
.setas-link img {
    height: 50px; /* Ajusta o tamanho das setas aqui */
    width: auto;
    transition: transform 0.3s ease;
}

/* Efeito de subir/descer um pouco quando passas o rato */
.seta-esq:hover img { transform: translateY(5px); }
.seta-dir:hover img { transform: translateY(-5px); }

/* Logo do PS no meio */
.logo-ps-rodape, .sobre-logo-ps, .agenda-logo-ps, .contacto-logo-ps {
    height: 40px;
    width: auto;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .rodape-estilizado {
        padding: 0 20px;
    }
    .setas-link img {
        height: 20px; /* Setas mais pequenas no telemóvel */
    }
}

/* ================================================= */
/* --- RESPONSIVIDADE (Tablets e Telemóveis) --- */
/* ================================================= */
@media (max-width: 900px) {
    .bg-cidade {
        display: none; /* Esconde a cidade para não ficar confuso no telemóvel */
    }
    
    .bg-setas {
        width: 100%;
        opacity: 0.15; /* Transforma as setas numa marca d'água de fundo */
    }

    .hero-container {
        padding: 5vh 20px 20px 20px;
        align-items: center; /* Centra tudo no telemóvel */
        text-align: center;
    }

    .hero-texto h1 {
        letter-spacing: -2px;
    }

    .hero-escada {
        align-items: center; /* Centra as frases */
        gap: 20px;
    }

    /* Retira o efeito escada e aumenta o tamanho das frases */
    .frase { width: 80%; }
    .f1, .f2, .f3 { margin-left: 0; }
}

@keyframes aparecerFrase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1; /* Fica visível e o CSS 'forwards' garante que se mantém */
    }
}