/* Definições Globais e Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #d81b60; /* Rosa mais sofisticado */
    --secondary-color: #8e24aa; /* Roxo complementar */
    --accent-color: #D81B60; /* Laranja para CTAs */
    --text-dark: #333;
    --text-light: #fff;
    --bg-light: #f9f9f9;
    --border-radius: 8px;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: #fff;
}

/* REGRA DE SEGURANÇA UNIVERSAL PARA IMAGENS */
img {
    max-width: 100%;
    height: auto;
    display: block; 
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}

h2, h3, h4 {
    font-weight: 600;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem; 
}

.section-title h2 {
    font-size: 2rem; 
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.section-title p {
    font-size: 1.125rem; 
    color: #666;
}

/* Header */
header {
    background: var(--text-light);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; 
    flex-wrap: nowrap; 
}

/* Estilo para Logotipo em PNG */
.logo-img {
    height: 45px;
    width: auto;
    margin: 0 auto; 
}

header .logo p {
    font-size: 0.75rem; 
    color: #777;
    margin-top: 0;
    text-align: center; 
}

/* ÍCONE HAMBURGER - ESCONDIDO POR PADRÃO NO DESKTOP (CORREÇÃO DE BUG) */
.hamburger-icon {
    display: none; 
}

header nav {
    flex-grow: 1;
    text-align: right; 
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; 
    gap: 0.5rem;
}

header nav ul li a {
    color: var(--text-dark);
    text-decoration: none;
    padding: 10px 15px;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
    white-space: nowrap; 
}

header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width 0.3s;
}

header nav ul li a:hover,
header nav ul li a.active {
    color: var(--primary-color);
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: calc(100% - 30px);
}

.cta-button {
    background: var(--accent-color);
    color: var(--text-light);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap;
    margin-left: 1rem; 
}

.cta-button:hover {
    background-color: #D81B60#;
    transform: translateY(-2px);
}

/* Hero Section */
#hero {
    /* URL TEMPORÁRIO DE BANCO DE IMAGENS */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('home.jpg') 
                no-repeat center center/cover;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
}

#hero .hero-content {
    max-width: 800px;
}

#hero h2 {
    font-size: 3rem; 
    margin-bottom: 1.25rem;
    font-weight: 700;
}

#hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

#hero .cta-button.large {
    padding: 1rem 2.2rem;
    font-size: 1.125rem;
}

/* Seção Diferenciais */
#diferenciais {
    padding: 5rem 0;
    background-color: var(--bg-light);
}

.pilares {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    margin-top: 2rem;
    text-align: center;
}

.pilares article {
    background: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    flex: 1 1 300px; 
    transition: transform 0.3s, box-shadow 0.3s;
}

.pilares article:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.pilares .icon {
    font-size: 3rem; 
    color: var(--primary-color);
    margin-bottom: 1.25rem;
}

.pilares h4 {
    font-size: 1.375rem; 
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

/* Seção Sobre Nós */
#sobre-nos {
    padding: 5rem 0;
}

.sobre-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap; 
}

.sobre-image, .sobre-texto {
    flex: 1 1 45%; 
    min-width: 300px; 
}

.sobre-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.sobre-texto h2 {
    color: var(--primary-color);
    font-size: 1.75rem;
}
.sobre-texto h3 {
    color: var(--secondary-color);
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
}

.cta-button-outline {
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    margin-top: 1.25rem;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button-outline:hover {
    background-color: var(--accent-color);
    color: var(--text-light);
}


/* Galeria */
#galeria {
    padding: 5rem 0;
    background-color: var(--bg-light);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.25rem;
}

.gallery-grid img {
    width: 100%; 
    height: 250px; 
    object-fit: cover; 
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s, opacity 0.3s;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}


/* CTA Section */
#checkup-cta {
    background: var(--secondary-color);
    color: var(--text-light);
    padding: 4rem 0;
    text-align: center;
}

#checkup-cta h2 {
    color: var(--text-light);
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

#checkup-cta p {
    margin-bottom: 1.875rem;
    font-size: 1.125rem;
}

/* Footer */
footer {
    background: var(--text-dark);
    color: #ccc;
    padding: 3rem 0 1.25rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
    margin-bottom: 1.875rem;
}

footer h3, footer h4 {
    color: var(--text-light);
    margin-bottom: 1rem;
}

footer p {
    margin-bottom: 0.6rem;
}

footer i {
    color: var(--primary-color);
    margin-right: 0.6rem;
}

.footer-social a {
    color: #ccc;
    text-decoration: none;
    font-size: 1.5rem;
    margin-right: 1rem;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: var(--primary-color);
}

.copyright {
    text-align: center;
    padding-top: 1.25rem;
    border-top: 1px solid #444;
    font-size: 0.875rem;
}

/* ======================================= */
/* RESPONSIVIDADE (MEDIA QUERIES)          */
/* ======================================= */

/* Telas Médias (Tablets e Laptops menores: até 992px) */
@media(max-width: 992px) {
    
    .container {
        padding: 1rem 0;
    }
    
    /* 1. MOSTRAR O ÍCONE HAMBURGER NO MOBILE */
    .hamburger-icon {
        display: block; 
        font-size: 1.8rem; 
        color: var(--text-dark);
        cursor: pointer; 
        transition: transform 0.3s;
    }

    /* Opcional: Animar o ícone */
    .hamburger-icon.active {
        transform: rotate(90deg); /* Faz o X girar */
    }
    
    /* 2. CONFIGURAÇÃO BASE DO MENU MOBILE (ESCONDIDO) */
    header nav {
        position: absolute; 
        top: 65px; /* Altura aproximada do seu header */
        left: 0;
        width: 100%;
        height: 0; /* ESCONDIDO POR PADRÃO */
        overflow: hidden; 
        background: var(--text-light);
        box-shadow: var(--shadow);
        transition: height 0.3s ease-in-out; 
        z-index: 90; 
    }
    
    /* 3. ESTILOS DOS ITENS DE MENU MOBILE */
    header nav ul {
        flex-direction: column; 
        align-items: center; 
        padding: 20px 0;
        gap: 0;
    }

    header nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--bg-light); 
    }

    header nav ul li a {
        display: block; 
        padding: 15px 0;
    }

    /* 4. ESTADO ATIVO: QUANDO O HAMBURGER É CLICADO (CLASSE ADICIONADA PELO JS) */
    header nav.active {
        /* Altura que permite ver todos os 5 links + o botão CTA (se movido) */
        height: 350px; 
    }

    /* OCULTAÇÃO DO CTA e Navegação Padrão*/
    .cta-button {
        display: none; 
    }
    
    header .container {
        justify-content: space-between; 
        align-items: center;
        flex-wrap: nowrap;
        padding: 15px 0;
    }

    /* Otimização de Layout Geral */
    .pilares {
        gap: 1.5rem;
    }

    .sobre-container {
        gap: 2rem;
    }
    
    #diferenciais, #sobre-nos, #galeria, #checkup-cta {
        padding: 4rem 0;
    }
}

/* Telas Pequenas (Telemóveis: até 768px) */
@media(max-width: 768px) {
    
    /* Títulos */
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    /* Hero */
    #hero {
        height: 60vh;
    }
    #hero h2 {
        font-size: 2.2rem;
    }
    #hero p {
        font-size: 1rem;
    }
    
    /* Diferenciais em Coluna */
    .pilares {
        flex-direction: column;
        gap: 2rem;
    }
    .pilares article {
        flex-basis: auto;
    }

    /* Sobre Nós em Coluna */
    .sobre-container { 
        flex-direction: column; 
        text-align: center;
    }
    .sobre-texto {
        text-align: center;
    }

    /* Galeria em Coluna Única */
    .gallery-grid {
        grid-template-columns: 1fr; 
    }
    .gallery-grid img {
        height: 300px; 
    }
    
    /* Rodapé em Coluna Única */
    .footer-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    .footer-grid div { 
        margin-bottom: 1.25rem; 
    }
}

/* Telas de Mobile Ultra-Pequenas (até 480px) */
@media(max-width: 480px) {
    
    /* Botão Hero */
    #hero .cta-button.large {
        padding: 12px 25px;
        font-size: 1rem;
    }
}