/*Limpa os estilos default do site*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*largura inclui border e o padding*/
}

body{
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #3e2a20;          /* castanho escuro (cor do cabelo no logo) */
    background-color: #fbede3; /* creme pêssego (fundo do logo) */
}

/*Cabeçalho + menu*/
header{
    background-color: #db6b3a; 
    padding: 15px;
}

nav{
    display: flex;
    justify-content: center; 
    gap: 25px;
}
nav a{
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover{
    text-decoration: underline; 
}

/* Conteudo principal do site*/
main{
    max-width: 900px; 
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

/* Titulos das paginas (h1 e h2) na cor da marca */
h1, h2{
    color: #b5552a;          /* terracota mais escuro, boa legibilidade */
    margin-bottom: 20px; /*Leve espaço debaixo do titulo*/
}

/* BOTAO: classe propria, para nao afetar todos os links das seccoes */
.btn{
    display: inline-block;
    margin-top: 25px;
    padding: 12px 28px; /*espaçamento interno fiz com que o botão fique maior*/
    background-color: #db6b3a; /* terracota da marca */
    color:white;
    text-decoration: none;
    border-radius: 6px; /*cantos arredondados*/
}

/* Botao fica mais escuro ao passar o rato (feedback ao utilizador) */
.btn:hover{
    background-color: #c25a2c;
}

/* Links normais de conteudo (ex.: contactos) na cor da marca */
main a{
    color: #b5552a;
}

/* A tag <address> aparece em italico por defeito; deixamos normal */
address{
    font-style: normal;
    line-height: 2;
}

footer{
    background-color: #3e2a20; /* castanho escuro da marca */
    color:white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;

}

/* As imagens nunca ultrapassam a largura do contentor (importante p/ responsivo) */
img{
    max-width: 100%;
    height: auto;
}

/* Foto de perfil da pagina Sobre: redonda, centrada e com tamanho controlado */
.foto-perfil{
    width: 200px;
    height: 200px;
    object-fit: cover;   /* recorta a imagem para preencher o circulo sem distorcer */
    border-radius: 50%;  /* deixa a foto redonda */
    display: block;
    margin: 0 auto 10px; /* centra e dá espaço por baixo */
}

.logo-hero{
    max-width: 180px;
    margin: 0 auto 20px;
}

#pesquisa{
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #db6b3a;
    border-radius: 6px;
    font-size: 16px;
}

.mosaico{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card{
    flex: 1 1 250px;
    max-width: 330px;
    background-color: white;
    border: 1px solid #e0c9b8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /*Sombra*/
    text-align: center;
}

/* Monograma: inicial da terapia num circulo (substitui o emoji) */
.card .inicial{
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;     /* centra o circulo */
    background-color: #db6b3a;
    color: white;
    border-radius: 50%;      /* circulo */
    font-size: 26px;
    font-weight: bold;
    display: flex;           /* para centrar a letra dentro do circulo */
    align-items: center;     /* centra na vertical */
    justify-content: center; /* centra na horizontal */
}
.card h3{ 
    color: #b5552a; 
    margin-bottom: 10px; 
}
.card .meta{
    margin-top: 12px;
    font-weight: bold;
    color: #3e2a20;
}

/* ===== FORMULARIO DE CONTACTOS ===== */
form{
    display: flex;
    flex-direction: column; /* campos empilhados, um por linha */
    max-width: 500px;
    margin: 20px auto;      /* centra o formulario */
    text-align: left;
}
form label{
    margin-top: 12px;
    font-weight: bold;
}
form input, form textarea{
    padding: 10px;
    border: 1px solid #db6b3a;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;   /* usa a mesma fonte do site */
}
form button{
    margin-top: 16px;
    padding: 12px;
    background-color: #db6b3a;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;        /* mãozinha ao passar por cima */
}
form button:hover{
    background-color: #c25a2c;
}

/* Mensagem "Mensagem enviada" / erro, por baixo do formulario */
.form-resultado{
    max-width: 500px;
    margin: 14px auto 0;
    text-align: center;
    font-weight: bold;
    color: #3e2a20;
}

/* Tablet/ ecrãs até 768px de largura */
@media (max-width: 768px){
    main{
        padding: 15px;
    }
    h1{
        font-size: 1.6rem; /*Reduz o tamanho do titulo*/
    }
}

@media (max-width: 480px){
    nav{
        flex-direction: column; /*Menu fica a vertical*/
        gap: 10px;
    }
    .card{
        flex: 1 1 100%; /* Cada card ocupa a largura toda */
    }
    .logo-hero{
        max-width: 140px; /*Logo mais pequeno*/
    }
}