/* Configurações Gerais */

* {
    box-sizing: border-box; /* Garante que padding não aumenta o tamanho real */
}

html, body {
    height: 100%; /* Essencial para o body saber o que é 100% */
    overflow-x:hidden;
    width: 100%;
    position: relative;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Altura total da janela */
    margin: 0;
    line-height: 1.6;
    color: #333;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Barra de Informações (Verde) */
/* - - - - - - - - - - - -  Barra superior verde escuro Global - - - - - - - - - - -*/
.top-bar-cor {
    background-color: #1b5e20; /* O teu verde escuro */
    color: white;
    padding: 2px 0;
    width: 100%;

}

@media (max-width: 768px) {
    .top-bar-cor .container {
        flex-direction: column; /* Empilha contactos e idiomas */
        padding: 10px;
        text-align: center;
        align-items: center;
    }

    .top-bar-info {
        align-items: center;
        text-align: center;
        gap: 5px;
        flex-wrap: wrap;       /* Se não couberem, passam para a linha seguinte */
    }

    .idiomas {
        margin-left: 0;
        margin-top: 10px;
        justify-content: center;
    }
}

.top-bar-cor .container {
    margin: 0 auto;
    padding:  0px;
    display: flex;
    justify-content: space-evenly; /* Empurra Redes para um lado, Idiomas para o outro */
    align-items: center;
}

/* - - - - - - - - - - - -  Barra superior verde escuro Global - - - - - - - - - - -*/

/* - - - - - - - - - - - -  Informações na barra superior - - - - - - - - - - -*/

.top-bar-info {
    color: rgb(241, 229, 229) !important;
    padding: 5px 0;
    font-size: 0.8rem;
    font-family: 'roboto', sans-serif;
    text-decoration: none !important;
    gap: 10px; /* Espaço entre os contactos */
    display: flex;
}

.top-bar-info .container {
    width: 100%;
    margin: 0 auto;
    padding: 5px 20px;
    display: flex;
    justify-content: left; /* Alinha os contactos ao centro */
    gap: 50px; /* Espaço entre telefone e email */
    
    
    
}

.contacto-link {
    text-decoration: none; /* Remove o sublinhado */
    color: inherit;        /* Mantém a cor branca (ou a cor do pai) */
    display: inline-flex;
    align-items: center;

}
/* - - - - - - - - - - - -  Informações na barra superior - - - - - - - - - - -*/


/* - - - - - - - - - - - - - Redes Sociais - - - - - - - - - - - - - */
.redes-sociais {
    display: flex;
    gap: 10px;
    align-items: center;
}

.redes-sociais a {
    text-decoration: none;
    font-size: 1.0rem; /* Tamanho do ícone */
    color: #a5d6a7;    /* Cor inicial (verde clarinho para combinar com a Casa) */
    transition: all 0.3s ease; /* Faz a mudança de cor ser suave */
    align-items: center;
    border-image: round;
}

.redes-sociais a.facebook:hover  {
    color: #1877F2;
    transform: translateY(-3px); /* Faz o ícone "saltar" um bocadinho */
}

.redes-sociais a.instagram:hover  {
    color: #E4405F;
    transform: translateY(-3px); /* Faz o ícone "saltar" um bocadinho */
}

.redes-sociais a.booking:hover  {
    color: #276dc3;
    transform: translateY(-3px); /* Faz o ícone "saltar" um bocadinho */
}
/* - - - - - - - - - - - - - Redes Sociais - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - Idiomas - - - - - - - - - - - - - */

.idiomas {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 15px;
    float: right;
}

.botao-idioma img {
    display: block;
    border-radius: 2px; /* Cantos levemente arredondados */
    transition: 0.3s;
    opacity: 0.6; /* Deixa as bandeiras mais discretas */
}

/* Quando passamos o rato ou a bandeira está ativa */
.botao-idioma:hover img, 

.botao-idioma.active img {
    opacity: 1; /* Fica com a cor total */
    transform: scale(1.1); /* Aumenta ligeiramente */
    border-color: white; /* Borda fica branca */
    
}

/* - - - - - - - - - - - - - Idiomas - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - Estilo da Barra Fixa - - - - - - - - - - - - - */

@media (max-width: 768px) {
    .bar-fixa nav {
        flex-direction: column; /* Nome em cima, links em baixo */
        padding: 10px;
    }

    .nome-casa {
        font-size: 1.2rem; /* Diminui um pouco o tamanho no telemóvel */
        margin-bottom: 10px;
        text-align: center;
    }

    .bar-fixa ul {
        justify-content: center; /* Centraliza os links */
        flex-wrap: wrap;       /* Se não couberem, passam para a linha seguinte */
        gap: 10px;
        padding: 0;
    }

    .bar-fixa ul li {
        margin-left: 0; /* Remove a margem esquerda que empurra os links */
    }

    .redes-sociais {
        margin-top: 15px;
        justify-content: center;
    }
}

.bar-fixa {
    background-color: #85b485;
    width: 100%;       /* Ocupa sempre a largura total do ecrã */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;   /* Padding vertical apenas, o horizontal é controlado pelo nav */
}

.nome-casa {
    color: #edf3ee;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'roboto', sans-serif;
    margin-left: 0p; /* Pequeno espaçamento à esquerda */
    justify-content: left; /* Alinha o nome à esquerda */
    display: flex; /* Para que o justify-content funcione */
}

.bar-fixa-menu {
    font-family:'roboto', sans-serif;
    text-decoration: none;
}

.bar-fixa-menu.active {
    color: #2c4c3b !important; /* O teu verde da página visitar */
    font-weight: 800;          /* Deixa o texto mais "grosso" */
    position: relative;
}

.bar-fixa-menu:hover {
    text-decoration: underline; /* O sublinhado aparece apenas ao passar o rato */
    color: #2c4c3b;
}
  
/* Ajuste dos links para não herdarem estilos estranhos */
.bar-fixa ul {
    display: flex;
    list-style: none;
    margin: 0;
}

.bar-fixa ul li {
    margin-left: 20px;
}

.bar-fixa ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

/* Justificação de Texto */
.texto-justificado {
    text-align: justify;
    max-width: 800px;
    margin: 30px auto;
}


nav {
    display: flex;
    justify-content: space-between; /*Empurra o logo para um lado e os links para o outro*/
    align-items: center;
    max-width: 1100px;
    margin: 0 auto; /* Centraliza o conteúdo na tela */
    padding: 0 20px;

}

/* 4. Colocar os botões seguidos na barra fixa(Horizontal) */
nav ul {
    display: flex;       /* Coloca as páginas lado a lado */
    list-style: none;    /* Remove os pontos pretos da lista */
    margin: 0;
    padding: 0;
}

/* 5. Espaçamento entre os links */
nav ul li {
    margin-left: 15px;   /* Cria espaço entre cada botão */
}

    /* 6. Botões da barra fixa */
nav ul li a {
    color: #edf3ee; /* Verde para os links */
    text-decoration: none; /* Retira o sublinhado */
    font-family: sans-serif;
    font-size: 1rem;
    transition: 0.3s;      /* Faz a cor mudar suavemente */
}

/* Efeito ao passar o rato na barra fixa (Hover) */
nav ul li a:hover {
    color: #a5d6a7; /* Um verde mais claro quando passas o rato */
}

/* Apenas para teste: cria um espaço gigante para permitir scroll */
main {
    overflow: hidden; /* Corta espaços indesejados de margens negativas */
    flex: 1 0 auto;
    display: block;
    width: 100%;
}

/* - - - - - - - - - - - - - Estilo do Slider de Fotos - - - - - - - - - - - - - */

.slider-container {
    width: 100%;
    max-width: 100%; /* Alinhado com o teu container do header */
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.slider {
    position: relative;
    height: 80vh; /* Altura do slider. Ajusta conforme as tuas fotos e ocupa 80% da altura da viewport independente do modelo*/
}

.slide {
    display: none; /* Esconde todos por padrão */
    width: 100%;
    height: 100%;
}

.slide.active {
    display: block; /* Mostra apenas o ativo */
    animation: fade 1s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a foto preenche o espaço sem deformar */
    object-position:  55% 62%; /* Centraliza a foto dentro do slide */
}

/* Legenda sobre a imagem */
.slide-legenda {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(27, 94, 32, 0.8); /* O teu verde com transparência */
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1.2rem;
}

/* Botões Next/Prev */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.5rem;
    transition: 0.3s;
    z-index: 10;
}

.prev { left: 10px; border-radius: 0 5px 5px 0; }
.next { right: 10px; border-radius: 5px 0 0 5px; }

.prev:hover, .next:hover { background: #1b5e20; }

/* Efeito de transição suave */
@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Ajuste para Telemóvel */
@media (max-width: 768px) {
    .slider { height: 300px; }
    .slide-legenda { font-size: 0.9rem; bottom: 15px; left: 15px; }
}

/* - - - - - - - - - - - - - Estilo do Slider de Fotos - - - - - - - - - - - - - */


/*- - - - - - - - - - - - - Comodidades (Ícones) - - - - - - - - - - - - - */


.comodidades {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Um fundo cinza muito claro para destacar do branco */
    text-align: center;
    font-family: 'roboto', sans-serif;
}

.comodidades h2 {
    color: #2c4c3b;
    margin-bottom: 40px;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.grelha-comodidades {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    /* Cria 4 colunas iguais. Em ecrãs pequenos, ajusta-se automaticamente */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.item-comodidade {
    background: white;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.item-comodidade:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.item-comodidade i {
    font-size: 2.5rem;
    color: #2c4c3b; /* O teu verde oficial */
}

.item-comodidade span {
    font-weight: 500;
    color: #333;
    font-size: 1rem;
}

/* Ajuste para ecrãs muito pequenos (telemóveis) */
@media (max-width: 480px) {
    .grelha-comodidades {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas lado a lado no mobile */
        gap: 15px;
    }
    .item-comodidade i {
        font-size: 2rem;
    }
    .item-comodidade span {
        font-size: 0.85rem;
    }
}

/*- - - - - - - - - - - - - Comodidades (Ícones) - - - - - - - - - - - - - */


/*- - - - - - - - - - - - - Descrição da Casa - - - - - - - - - - - - - - - */

.descricao-casa .container
{
    max-width: 1200px;
    margin: 0 auto;
    
}

.descricao-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 50px 0;
}


.texto-descricao {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: 'roboto', sans-serif;
    text-align: justify;
    padding: 0 0px;
}

/* No telemóvel, a imagem passa para baixo do texto */
@media (max-width: 768px) {
    .descricao-grid {
        flex-direction: column;
    }
}

.btn-ver-fotos
{
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    text-decoration: none;
    padding: 12px 30px;
    font-family: 'roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;      /* Texto ligeiramente mais forte */
    text-transform: uppercase; /* Dá um toque mais formal */
    letter-spacing: 1px;    /* Espaçamento discreto entre letras */
    
    color: #2c4c3b;        /* O teu verde oficial */
    background-color: #ffffff; /* Fundo branco puro por defeito */
    border: 2px solid #2c4c3b; /* Borda verde oficial */
    border-radius: 30px;   /* Cantos totalmente arredondados (estilo "pílula") */
    
    cursor: pointer;
    position: relative;
    overflow: hidden;      /* Necessário para o efeito de preenchimento suave */
    transition: all 0.4s ease; /* Transição suave para todas as propriedades */
    
    /* Sombra discreta para dar profundidade */
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.15);
}
.btn-ver-fotos:hover {
background-color: #2c4c3b; /* Preenche com o verde oficial */
    color: #ffffff;            /* Texto fica branco */
}  

/* - - - - - - - - - - - - - Avaliações - - - - - - - - - - - - - - - - */

.avaliacoes {
    padding: 20px 20px;
    text-align: center;
}
/* - - - - - -  - - - - - - - - Disponibilidade - - - - - - - - -  - - - - - */

.reserva-container{
  max-width:900px;
  margin:auto;
  padding:20px;
  background:white;
  border-radius:8px;
  text-align: center;

}

.reserva-container h2{
  text-align: center;
  font-family: 'roboto', sans-serif;
  color:#2c4c3b;
}

.reserva-container h4{
  text-align: center;
  font-family: 'roboto', sans-serif;
  color:#2c4c3b;
}


.calendario-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Dia de Entrada (Metade Livre de Manhã / Metade Ocupada de Tarde) */
.calendario-grid .dia.entrada-ocupada {
    /* Gradiente: Branco no topo esquerdo, Vermelho no fundo direito */
    background: linear-gradient(201deg, #ffcccc 50%, #ffffff 50%) !important;
    color: #333 !important;
    cursor: pointer;
    border: 1px solid #ddd;
}

/* O Dia Selecionado continua a ter força para cobrir a diagonal verde */
.calendario-grid .dia.selecionado {
    background: #2e7d32 !important;
    color: white !important;
    font-weight: bold !important;
    border: none !important;
}

/* Dia Ocupado Inteiro */
.calendario-grid .dia.ocupado {
    background-color: #ffcccc !important; /* Vermelho claro */
}

/* O Teu Dia de Check-Out (Meio Ocupado / Meio Livre) */
.calendario-grid .dia.saida-livre {
    /* Gradiente: Vermelho no topo esquerdo, Branco no fundo direito */
    background: linear-gradient(19deg, #ffcccc 50%, #ffffff 50%) !important;
    color: #333 !important;
    cursor: pointer;
    border: 1px solid #ddd;
}

.calendario-grid .dia.selecionado {
    background: #2e7d32 !important;
    color: white !important;
    font-weight: bold !important;
    border: none !important; /* Para remover a borda verde do hover, se ficar presa */
}

/* Hover no dia de saída para o cliente perceber que pode clicar */

.calendario-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-top:15px;
}

.dia-semana{
  font-weight:bold;
  text-align:center;
}

.dia{
  padding:10px;
  text-align:center;
  border-radius:6px;
  cursor:pointer;
  position: relative;
  z-index: 1;

}

.dia.livre{ background:#e8f5e9; }

.dia.ocupado{
  background:#ffcdd2;
  color:#777;
}


/* Ajuste para o texto não ficar escondido na diagonal */


.dia.intervalo{ background:#a5d6a7; }

/* Dias que já passaram */
.dia.passado {
    color: #ccc; /* Cor cinza clara */
    text-decoration: line-through; /* Risca o número */
    cursor: not-allowed; /* Muda o ícone do rato */
    opacity: 0.6;
}

/* Evitar que datas passadas mudem de cor ao passar o rato, se tiver :hover */
.dia.passado:hover {
    background: transparent;
}

.legenda{
  margin-top:12px;
  display:flex;
  gap:15px;
  font-size:14px;
}

.cor{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:3px;
  margin-right:6px;
}

.cor.livre{ background:#e8f5e9; }
.cor.ocupado{ background:#ffcdd2; }
.cor.selecionado-legenda{ background:#2e7d32; }

.legenda .cor.saida-livre {
    background: linear-gradient(45deg, #ffcccc 50%, #ffffff 50%);
    border: 1px solid #ccc;
}

.legenda .cor.entrada-ocupada {
    background: linear-gradient(45deg, #ffffff 50%, #ffcccc 50%);
    border: 1px solid #ccc;
}

.info-selecao{
  margin-top:20px;
  padding:15px;
  background:#f1f8e9;
  border-radius:6px;
}

.form-reserva{
    margin-top:20px;
    padding:20px;
    background:#f5f5f5;
    border-radius:8px;
}

.form-reserva form{
    display:grid;
    gap:12px;
}

.form-reserva input,
.form-reserva select,
.form-reserva textarea{
    padding:10px;
    border-radius:6px;
    border:1px solid #ccc;
}

.btn-enviar-reserva{
    background:#2e7d32;
    color:white;
    padding:12px;
    border:none;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
}

.btn-enviar-reserva:hover{
    background:#1b5e20;
}



/* - - - - - - - - - - - - - Galeria de Fotos - - - - - - - - - - - - - */

.galeria-seccao .container {
    max-width: 1500px;    /* Aumentamos para caberem as 5 colunas à vontade */
    margin: 0 auto;
    padding: 0 30px;      /* Mantemos uma margem de segurança nas bordas */
}
/* Container dos botões para garantir que estão centrados e espaçados */
.filtro-galeria {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    flex-wrap: wrap;       /* Se o ecrã for pequeno, os botões quebram para a linha seguinte */
    gap: 15px;             /* Espaço uniforme entre os botões */
    margin-bottom: 50px;   /* Espaço para a grelha de fotos */
    padding: 0 10px;
    margin: 30px 0 50px 0;
    
}

.filtro-btn {
    padding: 12px 30px;
    font-family: 'roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;      /* Texto ligeiramente mais forte */
    letter-spacing: 1px;    /* Espaçamento discreto entre letras */
    margin-bottom: 15px;
    
    color: #2c4c3b;        /* O teu verde oficial */
    background-color: #ffffff; /* Fundo branco puro por defeito */
    border: 2px solid #2c4c3b; /* Borda verde oficial */
    border-radius: 30px;   /* Cantos totalmente arredondados (estilo "pílula") */
    
    cursor: pointer;
    position: relative;
    overflow: hidden;      /* Necessário para o efeito de preenchimento suave */
    transition: all 0.4s ease; /* Transição suave para todas as propriedades */
    
    /* Sombra discreta para dar profundidade */
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.15);
}

.filtro-btn:hover, .filtro-btn.active {
    background-color: #2c4c3b; /* Preenche com o verde oficial */
    color: #ffffff;            /* Texto fica branco */
    
    /* Sombra mais forte no hover para parecer que flutua */
    box-shadow: 0 5px 15px rgba(27, 94, 32, 0.3);
}


/* Forçar a grelha a comportar-se */
.grelha-fotos {
    display: grid !important;
    /* O auto-fill vai preencher o espaço disponível com o novo limite de 1200px */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important; /* Aumentei um pouco o espaço entre fotos para ficar mais arejado */
    width: 100% !important;
}

.foto-item {
    height: 250px !important;
    position: relative !important;
    display: block; /* O filtro JS vai mudar isto */    
    cursor: pointer;;
}

.foto-item:hover {
    transform: scale(1.02); /* Aumenta ligeiramente para dar o efeito de "salto" */
    box-shadow: 0 12px 25px rgba(27, 94, 32, 0.25); /* Sombra ligeiramente esverdeada para combinar */
}

.foto-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 15px;
    transition: transform 0.5s ease;
}

/* --- AJUSTES PARA ECRÃS MENORES --- */

/* Portáteis pequenos ou Tablets em Horizontal (4 colunas) */
@media (max-width: 1200px) {
    .grelha-fotos {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablets em Vertical (3 colunas) */
@media (max-width: 900px) {
    .grelha-fotos {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Telemóveis Grandes (2 colunas) */
@media (max-width: 600px) {
    .grelha-fotos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Telemóveis Pequenos (1 coluna) */
@media (max-width: 400px) {
    .grelha-fotos {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Fundo do Zoom */
.zoom-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* A Imagem no Zoom */
#foto-grande {
    max-width: 85%;
    max-height: 80%;
    border: 4px solid white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Botões e Setas */
.fechar-btn {
    position: absolute; top: 20px; right: 40px;
    color: white; font-size: 50px; cursor: pointer;
}

.nav-btn {
    position: absolute;
    background: none; border: none;
    color: white; font-size: 60px; cursor: pointer;
    padding: 20px;
    transition: 0.3s;
}
.nav-btn:hover { color: #85b485; }
.prev { left: 20px; }
.next { right: 20px; }


/* - - - - - - - - - - - - - Galeria de Fotos - - - - - - - - - - - - - */


/* - - - - - - - - - - - - Página Visitar - -  - - - - - - - - - - */

.visitar-container {
    padding: 0 5%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px; /* Cria o espaço entre os cards e o contacto */
    min-height: 60vh;     /* Garante que o footer não sobe se houver poucos cards */

}

.intro-visitar {
    text-align: center;
    margin-bottom: 50px;
}

.intro-visitar h1 {
    color: #1b5e20;
    margin-bottom: 20px;
    margin-top: auto;
    font-size: 2rem;
    text-transform: uppercase;
    font-family: 'roboto', sans-serif;
}

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

.locais-cards {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3sease, box-shadow 0.3s ease;
    display:flex;
    flex-direction: column;
}

.locais-cards:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    cursor: pointer;
}

.locais-cards img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.info-cards {
    padding: 20px;
}

.info-cards h3 {
    color: #2c4c3b; /* O teu verde */
    margin-bottom: 10px;
}

.distancia {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    font-weight: bold;
}

.card-link {
    text-decoration: none;
    color: inherit;
    height: 100;
    display:flex;
    flex-direction: column;;
    transition: color 0.3s ease;
}

/* --- Estilo dos Botões de Filtro --- */
.filtro-descubra {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    flex-wrap: wrap;       /* Se o ecrã for pequeno, os botões quebram para a linha seguinte */
    gap: 15px;             /* Espaço uniforme entre os botões */
    margin-bottom: 50px;   /* Espaço para a grelha de fotos */
    padding: 0 10px;
    margin: 30px 0 50px 0;
}

.btn-filtro {
    background-color: transparent;
    border: 2px solid #2c4c3b; /* O teu verde */
    color: #2c4c3b;
    padding: 10px 25px;
    border-radius: 25px;
    margin: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-filtro:hover {
    background-color: #2c4c3b;
    color: white;
}

.btn-filtro.active {
    background-color: #2c4c3b;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --- Lógica de Esconder/Mostrar Cards --- */
.filtrar {
    display: none; /* Esconde todos por padrão */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.filtrar.show {
    display: block; /* Mostra o card */
    opacity: 1;    /* Fade-in */
}

/* - - - - - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - */

.seccao-contacto {
    background-color: #1b5e20;
    color: white;
    margin-top: auto !important;
    padding: 30px 0 40px 0;
    display: block;
    width: 100%;
}


.coluna-form h2 {
    font-size: 1.5rem;
    margin-bottom: 4px;
    margin-top: 0px;
    font-family: 'roboto', sans-serif;
}
/* Container que mete tudo lado a lado */
.container-flex-contacto {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Espaço entre o formulário e o livro */
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.coluna-form {
    flex: 1; /* Ocupa o espaço disponível */
    text-align: left;
}

.coluna-legal {
    flex: 0 0 200px; /* Largura fixa para a zona do livro */
    text-align: center;
    border-left: 1px solid #ddd; /* Linha divisória subtil */
    padding-left: 30px;
}

.coluna-legal h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-family: 'roboto', sans-serif;
}

/* Ajustes finos no formulário para ser compacto */
.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-contacto input, .form-contacto textarea {
    padding: 8px;
    font-size: 0.9rem;
    resize: none; /* Impede que o utilizador redimensione os campos */
}   

.form-contacto textarea {
    height: 60px; /* Bem curto para poupar altura */
}

.botao-enviar {
    background-color: #276dc3;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

/* Container que mete os dois livros lado a lado */
.container-livros {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;    /* Alinha verticalmente pelo centro */
    gap: 15px;              /* Espaço entre as duas imagens */
    margin-bottom: 15px;    /* Espaço para o texto do copyright */
}

/* Mantem o tamanho igual */
.img-portal {
    /* Define uma largura fixa para ambas. Ajusta este valor (ex: 100px a 140px) conforme preferires */
    width: 120px; 
    height: auto; /* Mantém a proporção da imagem para não distorcer */
    transition: transform 0.3s ease; /* Efeito suave ao passar o rato */
}

/* Efeito de hover discreto para as duas imagens */
.img-portal:hover {
    transform: scale(1.05); /* Aumenta 5% ao passar o rato */
}

/* Ajuste na coluna legal se necessário */
.coluna-legal {
    flex: 0 0 auto; /* Deixa o Flexbox decidir a largura baseada no conteúdo */
    text-align: center;
    border-left: 1px solid #ddd;
    padding-left: 20px;
}

.txt-legal {
    font-size: 0.8rem;
    color: white;
    font-family: 'roboto', sans-serif;
}


/* Responsivo: Se o ecrã for pequeno, volta a ficar um em cima do outro */
@media (max-width: 768px) {
    .container-flex-contacto {
        flex-direction: column;
        gap: 30px;
    }
    .coluna-legal {
        border-left: none;
        border-top: 1px solid #e61010;
        padding-left: 0;
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    /* Faz com que a linha de Adultos e Crianças se divida em duas */
    .form-reserva div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Ajusta cada bloco para ocupar a largura total */
    .form-reserva div[style*="flex: 1"] {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Texto à esquerda, botão à direita */
        align-items: center;
    }

    /* Garante que os menus de seleção tenham um tamanho confortável */
    .form-reserva select {
        width: 60%; /* Ajusta a largura do botão de seleção */
        max-width: 200px;
    }
}