/* --- Estilos Gerais --- */

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
}

/* Header */
header {
    background-color: #fe0606;
    color: white;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    max-width: 960px;
    margin: 0 auto;
}

header img {
    max-width: 80px;
    height: auto;
    margin: 0;
}

header div {
    font-size: 1.5em;
    font-weight: bold;
}

header span {
    font-size: 70%;
    display: block;
}

/* Botão Instalar Aplicação */
#instalarApp {
    background-color: #ffd700;
    color: rgb(0, 0, 0);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

#instalarApp:hover {
    background-color: #daba03;
}

/* Navegação */
nav {
    background-color: #414141;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 12px;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #d9e2ec;
    color: #414141;
}

/* Secções de Conteúdo (geral para index.html e outras) */
.section {
    max-width: 960px;
    margin: 20px auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section h1 {
    background: #d9e2ec;
    color: #414141;
    padding: 15px;
    margin: 0;
    font-size: 1.8em;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.content1 {
    padding: 20px;
    background: #f9f9f9;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* --- Estilos ESPECÍFICOS do Formulário de Agendamento --- */

.content1 form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0;
    box-shadow: none;
}


.content1 form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #414141;
}

.content1 form textarea {
    resize: vertical;
    min-height: 80px;
}

.content1 form p#resultado {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.1em;
}

.form-btn {
    background-color: #fe0606;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%; /* Ocupa a largura total da coluna da grelha */
    box-sizing: border-box; /* Garante que padding e border não aumentam a largura */
    max-width: 250px; /* Limita a largura em ecrãs muito grandes para não ficar demasiado esticado */
    margin: 10px auto 0 auto; /* Centra o botão e dá margem superior */
    display: block; /* Garante que se comporta como um bloco para centrar com margin: auto */
}

.form-btn:hover {
    border-color: #a30404;
}

/* Estilo para as mensagens de erro inline */
.error-message {
    color: #fe0606; /* Vermelho para o erro */
    font-size: 0.85em; /* Ligeiramente mais pequeno */
    margin-top: 2px; /* Pouco espaço acima */
    margin-bottom: 8px; /* Espaço para o próximo elemento */
    display: block; /* Garante que ocupa a sua própria linha por padrão */
    font-weight: bold;
    /* Adicionado para que a mensagem de erro comece invisível e apareça */
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, height 0.3s ease-out, margin-bottom 0.3s ease-out;
}

/* Estado visível da mensagem de erro */
.error-message.active { /* Esta classe será adicionada pelo JS quando houver erro */
    opacity: 1;
    height: auto; /* Permite que o conteúdo defina a altura */
    margin-bottom: 8px; /* Restaura a margem quando visível */
}

/* Ajustes gerais de margem para os campos do formulário */
.content1 form label {
    margin-bottom: 0; /* A label não adiciona margem no final dela */
}

/* REGRAS ADICIONADAS PARA UNIFORMIZAR A APARÊNCIA DOS CAMPOS DE FORMULÁRIO */
/* --- Estilos para inputs de texto, email, tel, textarea e selects --- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    background-color: #ffffff; /* Fundo branco para todos */
    border: 1px solid #ccc;    /* Borda cinzenta padrão */
    border-radius: 4px;        /* Cantos ligeiramente arredondados */
    padding: 8px 10px;         /* Espaçamento interno */
    width: 100%;               /* Ocupa a largura total do contentor */
    box-sizing: border-box;    /* Garante que padding e border estão incluídos na largura */
    font-family: 'Inter', sans-serif; /* Garante a mesma fonte */
    font-size: 1rem;           /* Garante o mesmo tamanho de letra */
    color: #333;               /* Cor do texto */
    -webkit-appearance: none;  /* Remove estilos padrão em navegadores WebKit (Chrome, Safari) */
    -moz-appearance: none;     /* Remove estilos padrão em navegadores Mozilla (Firefox) */
    appearance: none;          /* Remove estilos padrão para outros navegadores */
    /* Removido o width: calc(100% - 20px) e padding: 10px daqui para usar o padding: 8px 10px padrão acima */
    /* As regras acima são mais específicas e sobrepõem as que estavam em .content1 form input... */
}

/* Estilo ao focar o campo (quando o utilizador clica nele) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: #404040; /* Borda azul mais escura ao focar */
    outline: none;         /* Remove o contorno padrão azul/laranja do navegador */
    box-shadow: 0 0 0 2px #0000001d; /* Sombra suave para indicar foco */
}

/* Estilo para a seta do combobox (select) - Opcional, mas ajuda a uniformizar */
select {
    /* Adiciona uma seta personalizada para substituir a padrão do navegador */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.2-16.1%208.1-3.9%204.9-4.8%2011.6-2.6%2017.8l138.8%20138.8c4.1%204.1%209.6%206.1%2015.1%206.1s11-2%2015.1-6.1L289.2%2095.8c2.2-6.2%201.3-12.9-2.6-17.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center; /* Posição da seta */
    background-size: 12px; /* Tamanho da seta */
    padding-right: 30px;   /* Espaço para a seta para não sobrepor o texto */
}

/* Garante que o placeholder tem uma cor consistente */
input::placeholder,
textarea::placeholder {
    color: #999; /* Cor cinzenta mais clara para o texto de placeholder */
    opacity: 1; /* Garante que o placeholder não fica transparente */
}


/* Estilo para campos inválidos (bordas vermelhas quando há erro) */
/* Note: As regras específicas para campos inválidos no formulário (content1 form input.invalid...)
   já são suficientemente específicas, por isso, esta regra geral pode ser redundante
   se não quiseres que se aplique fora do content1.
   Se quiseres que se aplique GLOBALMENTE a qualquer input.invalid etc., então mantém. */
/* Removi a regra .content1 form input[type="tel"], etc. pois as novas regras gerais acima
   já abrangem e são mais limpas. */
/* Se, depois de testares, os campos não tiverem largura de 100% ou padding correto,
   podes reintroduzir regras mais específicas para .content1 form input...,
   mas a ideia é que as regras gerais no topo abranjam tudo. */
input.invalid,
select.invalid,
textarea.invalid {
    border-color: #ff0000; /* Borda vermelha para campos inválidos */
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
}


/* --- Estilos para elementos comuns em todas as páginas --- */

.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}
.social {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s;
}
.social img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}
.facebook { background: #414141; color: white; }
.facebook:hover { background: #1256A3; }
.instagram { background: #414141; color: white; }
.instagram:hover { background: #C1354E; }
.google { background: #414141; color: white; }
.google:hover { background: #2C69C9; }

.whatsapp-btn, .phone-btn {
    display: inline-flex;
    align-items: center;
    background: #414141;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
    margin-top: 10px;
    margin-right: 10px;
}
.whatsapp-btn img, .phone-btn img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}
.whatsapp-btn:hover {
    background: #30d24e;
}
.phone-btn:hover {
    background: #006bd7;
}

a.linkgeral {
    color: #0056b3;
    text-decoration: none;
}
a.linkgeral:visited {
    color: #0056b3;
}
a.linkgeral:hover {
    color: #fe0606;
    text-decoration: underline;
}
a.linkgeral:active {
    color: #b00000;
}

dt {
    font-weight: bold;
    color: #006bd7;
    margin-top: 10px;
    font: size 1em;
}

dd {
    margin-left: 20px;
    margin-bottom: 10px;
    font: size 1em;
}


/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    color: white;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cookie-banner p {
    margin: 0;
    font-size: 0.9em;
}

.cookie-banner a {
    color: #ffd700;
    text-decoration: underline;
}

.cookie-banner button {
    background-color: #ffd700;
    color: #414141;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cookie-banner button:hover {
    background-color: #e3c100;
}


/* --- Footer Melhorado --- */
footer {
    background-color: #414141; /* O teu cinzento escuro */
    color: white;
    padding: 30px 20px; /* Mais padding para mais espaço */
    margin-top: 40px; /* Mais margem para separar do conteúdo */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centrar tudo por defeito */
}

.footer-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas pequenas */
    justify-content: space-around; /* Distribui o espaço entre as secções */
    max-width: 1000px; /* Largura máxima para o conteúdo do footer */
    margin: 0 auto 20px auto; /* Centra o wrapper e dá margem inferior */
    gap: 30px; /* Espaço entre as secções do footer */
}

.footer-section {
    flex: 1; /* Permite que cada secção ocupe espaço */
    min-width: 200px; /* Largura mínima para cada coluna antes de quebrar */
    text-align: left; /* Alinha o texto à esquerda dentro de cada secção */
    margin-bottom: 20px; /* Margem para quando as colunas empilham */
}

.footer-section h4 {
    color: #ffd700; /* Destaque os títulos das secções do footer com amarelo */
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Linha divisória suave */
    padding-bottom: 8px;
    text-align: center; /* Centrar o título da secção */
}

.footer-section p,
.footer-section ul {
    margin: 0;
    padding: 0;
    list-style: none; /* Remove bullets de lista */
    font-size: 1em;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffd700; /* Amarelo no hover para os links do footer */
    text-decoration: underline;
}

/* Ajustes para os links sociais no footer, se quiseres mantê-los separados */
.footer-section .social-links {
    justify-content: flex-start; /* Alinha os links sociais à esquerda na coluna */
    margin-top: 15px;
}
.footer-section .social {
    background: none; /* Remove o fundo dos botões sociais para uma aparência mais limpa no footer */
    color: white;
    padding: 0; /* Remove padding */
}
.footer-section .social:hover {
    background: none; /* Sem fundo no hover */
    color: #ffd700; /* Mudar só a cor do texto no hover */
}
.footer-section .social img {
    margin-right: 5px; /* Menos margem entre ícone e texto */
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória para o copyright */
    padding-top: 20px;
    margin-top: 20px;
    font-size: 0.85em;
    text-align: center;
}

/* Media Query para responsividade - empilha as colunas em telas pequenas */
@media (max-width: 768px) {
    .footer-section {
        min-width: 100%; /* Ocupa a largura total em telas pequenas */
        text-align: center; /* Centra o texto nas colunas empilhadas */
    }
    .footer-section h4 {
        text-align: center; /* Garante que os títulos também ficam centrados */
    }
    .footer-section .social-links {
        justify-content: center; /* Centra os links sociais quando empilhados */
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 10px;
    }

    nav ul li {
        margin: 5px 10px;
    }

    .section {
        margin: 15px;
        padding: 0;
    }

    .content1 {
        padding: 15px;
    }

    .social-links {
        flex-direction: column;
        align-items: center;
    }

    .whatsapp-btn, .phone-btn {
        width: calc(100% - 20px);
        margin: 5px auto;
        justify-content: center;
    }

    .cookie-banner {
        padding: 10px;
    }
}
.faq-container {
    padding: 0 25px; /* Adiciona 25px de espaço nas laterais */
}

/* Ajusta o padding para telemóveis */
@media (max-width: 768px) {
    .faq-container {
        padding: 0 15px; /* Reduz para 15px em telas pequenas */
    }
}

/* Ajustes para o sistema de FAQ/secções colapsáveis */
.title {
    background: #414141;
    color: white;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.title:hover, .title.active {
    background: #fe0606;
}
.content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    background: #f1f1f1;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}
.content.open {
    max-height: 4000px;
    padding: 15px;
}

/* --- Estilos para o Botão de Submissão Dinâmico --- */
#submitButton {
    /* Adiciona uma transição suave para as mudanças de cor e texto */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 1em;
}

/* Estilo para WhatsApp */
.btn-whatsapp {
    background-color: #00ae40; /* Verde WhatsApp */
    color: white; /* Cor do texto para contraste */
    border-color: #00ae40; /* Borda da mesma cor do fundo */
}
.btn-whatsapp:hover { /* Comportamento ao passar o mouse */
    filter: brightness(110%); /* Clareia a cor em 10% */
}
/* Estilo para SMS */
.btn-sms {
    background-color: #0066d3; /* Azul SMS */
    color: white;
    border-color: #0066d3;
}
.btn-sms:hover { /* Comportamento ao passar o mouse */
    filter: brightness(110%); /* Clareia a cor em 10% */
}
/* Estilo para Email */
.btn-email {
    background-color: #d90000; /* Vermelho Email */
    color: white;
    border-color: #d90000;
}
.btn-email:hover { /* Comportamento ao passar o mouse */
    filter: brightness(110%); /* Clareia a cor em 10% */
}
/* --- Força o fundo branco para campos com preenchimento automático --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #333 !important; /* Cor do texto para contraste */
    transition: background-color 5000s ease-in-out 0s; /* Transição longa para evitar a mudança visível */
}
/* --- Botão Flutuante de Agendamento --- */
.floating-btn {
    position: fixed; /* Fixa o elemento na viewport */
    bottom: 20px;    /* 20px do fundo da tela */
    right: 20px;     /* 20px da direita da tela */
    background-color: #ffd700; /* Cor de destaque (vermelho do teu tema) */
    color: black;    /* Cor do texto  */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 50px; /* Bordas bem arredondadas para parecer um "pill" */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold; /* Texto em negrito */
    font-size: 1.1em; /* Tamanho da letra */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar um efeito 3D e destacar */
    z-index: 999; /* Garante que o botão está acima de outros elementos */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transição suave */
    display: flex; /* Para centralizar o texto se tivermos ícones mais tarde */
    align-items: center;
    justify-content: center;
}

.floating-btn:hover {
    background-color:#ffe600; /* Cor mais escura ao passar o mouse */
    transform: translateY(-3px); /* Pequeno efeito de "saltar" ao passar o mouse */
}

/* Ajuste para telas pequenas (opcional) */
@media (max-width: 768px) {
    .floating-btn {
        bottom: 15px; /* Mais perto do fundo */
        right: 15px;  /* Mais perto da direita */
        padding: 12px 20px; /* Um pouco menor em telas pequenas */
        font-size: 1em;
    }
}
/* --- Estilos para a seção de Serviços com Imagem --- */

/* Wrapper para a lista e a imagem */
.services-content-wrapper {
    display: flex; /* Ativa o Flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha seguinte em telas pequenas */
    justify-content: center; /* Centra horizontalmente quando há espaço */
    align-items: flex-start; /* Alinha os itens pelo topo */
    gap: 20px; /* Espaço entre a lista e a imagem */
    padding: 20px; /* Espaçamento interno para o wrapper */
}

/* Estilo para a lista (ul) dentro do wrapper */
.services-content-wrapper ul {
    flex: 1; /* Permite que a lista cresça e ocupe o espaço disponível */
    min-width: 280px; /* Largura mínima para a lista antes de quebrar */
    padding-left: 20px; /* Ajusta o padding da lista */
    margin: 0; /* Remove margem padrão */
    list-style-type: disc; /* Garante os marcadores de lista */
}

.services-content-wrapper ul li {
    font-weight: bold; /* Deixa os itens da lista em negrito */
    margin-bottom: 8px; /* Espaçamento entre os itens da lista */
    color: #333; /* Cor do texto dos itens da lista */
}

/* Estilo para a imagem dentro do wrapper */
.services-image {
    max-width: 45%; /* A imagem ocupa no máximo 45% da largura do wrapper quando há espaço */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 8px; /* Cantos ligeiramente arredondados para a imagem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar a imagem */
    flex-shrink: 0; /* Impede que a imagem encolha mais do que o necessário */
    min-width: 250px; /* Largura mínima da imagem antes de se ajustar */
}

/* Ajustes para telas menores (responsividade) */
@media (max-width: 768px) {
    .services-content-wrapper {
        flex-direction: column; /* Em telas pequenas, empilha a lista e a imagem */
        align-items: center; /* Centra os itens quando empilhados */
    }

    .services-content-wrapper ul,
    .services-image {
        max-width: 100%; /* Ocupam a largura total disponível */
        min-width: unset; /* Remove largura mínima para melhor ajuste */
    }

    .services-content-wrapper ul {
        padding-left: 0; /* Remove padding lateral da lista quando empilhada */
        text-align: center; /* Centra o texto da lista */
        list-style-position: inside; /* Move os marcadores para dentro para centralizar melhor */
    }
}
/* --- Estilos para o Banner de Aviso de Férias (Topo) --- */
.vacation-banner-top {
    background-color: #ffd700; /* Amarelo do teu tema (cor de alerta) */
    color: #414141; /* Cinzento escuro para o texto */
    padding: 12px 20px;
    text-align: center;
    font-size: 1.0em;
    font-weight: normal;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Adiciona um espaço abaixo do banner */
}

/* Garante que o texto dentro do banner não está em negrito desnecessariamente */
.vacation-banner-top p {
    margin: 0;
}

/* Se o banner estiver no topo e precisares que fique fixo ao rolar a página */
/* Descomenta as linhas abaixo se quiseres que ele siga o scroll */
/*
.vacation-banner-top {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 998; // Ligeiramente abaixo da navegação, mas acima do conteúdo
}
*/

/* --- Estilos para o Menu Retrátil (Accordion) --- */
.accordion-item {
    border: 1px solid #dcdcdc; /* Borda cinzenta suave */
    border-radius: 8px;
    margin-bottom: 15px; /* Espaço entre os itens */
    overflow: hidden; /* Importante para a animação da altura */
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.accordion-header {
    display: flex;
    justify-content: space-between; /* Espaça o título e o ícone */
    align-items: center;
    padding: 18px 25px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #f1f1f1;
}

.accordion-title {
    margin: 0;
    font-size: 1.2em;
    color: #414141; /* O teu cinzento escuro */
}

.accordion-icon {
    font-size: 2em; /* Tamanho do ícone */
    color: #fe0606; /* O teu vermelho */
    transition: transform 0.3s ease;
}

/* O conteúdo da resposta, escondido por padrão */
.accordion-content {
    max-height: 0; /* A altura inicial é 0 para estar escondido */
    padding: 0 25px;
    background-color: #fefefe;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease; /* Transição para a animação */
}

.accordion-content p {
    margin: 0;
    padding-bottom: 25px;
    line-height: 1.6;
}

/* Estado Ativo: Quando o header é clicado, o conteúdo expande */
.accordion-item.active .accordion-content {
    max-height: 500px; /* Um valor alto para que o conteúdo caiba */
    padding-top: 15px;
}

/* Rotaciona o ícone de "+" para "x" ou seta para baixo */
.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}