body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    background-color: #f3e8da; 
    color: #333;
    line-height: 1.6;
    padding: 0; 
    overflow-x: hidden;
}

main {
    width: 100%;
    max-width: 450px; /* Contêiner principal, define a largura máxima para todo o conteúdo */
    margin: 0 auto;
    padding-top: 20px; 
}

/* NOVO: Estilo para o link que envolve o card */
.card-link {
    text-decoration: none; 
    display: block; 
}

/* --- SEÇÃO PRINCIPAL (CABEÇALHO AGORA É FULL-WIDTH) --- */
.hero-section {
    /* Ocupa 100% da largura da tela */
    width: 100vw; 
    position: relative; 
    left: 50%; 
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw; 
    
    background-color: #f3e8da; /* Cor de fundo igual ao body para transição suave */
    margin-bottom: 25px;
    padding: 0; 
}

.hero-image-container {
    /* Agora este contêiner alinha a imagem principal com os cards */
    width: 90%; /* Ajuste para ter margem lateral igual aos cards */
    max-width: 400px; /* Limita a largura da imagem igual aos cards */
    margin: 0 auto;
    position: relative;
}

.hero-image {
    width: 100%; /* A imagem preenche o contêiner interno */
    height: auto;
    border-radius: 15px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: block;
}

.logo-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%); 
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
}

.logo-image {
    height: 80px; 
    width: auto;
    display: block;
}

/* --- CARDS GERAIS (IGUALDADE DE TAMANHO E RETANGULAR) --- */
.card {
    margin: 30px auto;
    padding: 0; 
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    width: 90%; /* Manteve 90% para alinhar com o hero-image-container */
    max-width: 400px; /* Manteve 400px para alinhar com o hero-image-container */
    height: 180px; 
    
    position: relative;
    overflow: hidden;
    
    background-size: cover; 
    background-position: center bottom;
    background-repeat: no-repeat;
    
    display: block; 
    transition: transform 0.2s ease-in-out; 
}

.card:hover {
    transform: scale(1.02); 
}

/* O card-content agora tem 100% da área do card */
.card-content {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Wrapper para agrupar o texto e centralizar o conjunto */
.content-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px; 
}

.text-group {
    text-align: left;
    padding-left: 0; 
}

.card h2 {
    font-family: 'Playfair Display', serif; 
    font-size: 1.6em;
    font-weight: 700; 
    line-height: 1.2;
    z-index: 3;
    margin: 0; 
}

/* --- 2. SEÇÃO AGENDAMENTO (CARD 1) --- */
.appointment-section {
    background-color: #d1c0b1; 
}

/* CONFIGURAÇÃO DA IMAGEM DE FUNDO DO CARD 1 (AGENDAMENTO) */
.card-image-1 {
    /* Gradiente para simular a divisão lateral do fundo */
    background-image: linear-gradient(to right, rgba(209, 192, 177, 0.9) 0%, rgba(209, 192, 177, 0.9) 55%, rgba(209, 192, 177, 0.5) 75%, transparent 100%), url('foto01.jpg');
    background-position: center;
    background-size: cover; 
}

.appointment-section h2 {
    color: #fff;
    max-width: 250px; 
}

/* Logo "AP CLÍNICA" grande e transparente (Mantido como texto) */
.ap-logo-large {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 8em; 
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    line-height: 0.8;
    z-index: 1;
    white-space: nowrap;
}

.ap-logo-large .clinic-text {
    display: block;
    font-size: 0.18em;
    font-weight: 400;
    letter-spacing: 5px;
    margin-top: -15px;
}


/* --- 3. SEÇÃO SITE (CARD 2) --- */
.website-section {
    background-color: #f7f1e7; 
}

/* CONFIGURAÇÃO DA IMAGEM DE FUNDO DO CARD 2 (SITE) */
.card-image-2 {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4)), url('foto02.jpg');
    background-position: center;
    background-size: cover; 
}

/* Ajustes específicos do Site */
.website-section h2 {
    color: #5a4b41; 
    max-width: 250px; 
}

/* --- RODAPÉ --- */
.site-footer {
    width: 100%;
    max-width: 450px;
    margin: 40px auto 20px; 
    padding: 20px 0;
    text-align: center;
    color: #ae8b6e; 
    font-size: 0.8em;
    border-top: 1px solid rgba(174, 139, 110, 0.2); 
}

.copyright-text {
    margin: 0 0 5px 0;
    font-weight: 600;
}

.developer-text {
    margin: 0;
    font-weight: 400;
    color: #8c735d; 
}