/* INÍCIO DO ARQUIVO style.css */

/* ==================== CONFIGURAÇÕES GLOBAIS ==================== */
:root {
  --header-height: 4.5rem;
  /* Paleta de cores - Dourado, Marfim e Cinza-Quente */
  --hue: 38; 
  --primary-color: hsl(var(--hue), 60%, 55%);
  --primary-color-alt: hsl(var(--hue), 60%, 50%);
  --background-color: #F9F6F1;
  --secondary-color: #F1EDE5;
  --title-color: #2C2A26;
  --text-color: #5C5851;
  --white-color: #FFF;
  --divider-color: #EAE4D9;
  /* Fontes */
  --title-font: 'Lora', serif;
  --body-font: 'Poppins', sans-serif;
}

/* ==================== BASE ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font: 400 1rem var(--body-font);
    color: var(--text-color);
    background: var(--background-color);
    -webkit-font-smoothing: antialiased;
    /* Failsafe para garantir que nenhum elemento cause scroll horizontal */
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 { color: var(--title-color); font-family: var(--title-font); font-weight: 600; }
ul { list-style: none; }
a { text-decoration: none; }
img { width: 100%; height: auto; object-fit: cover; display: block; }

/* ... (Layout e Header permanecem corretos) ... */
.container { margin-left: 1.5rem; margin-right: 1.5rem; }
.grid { display: grid; gap: 2rem; }
.section { padding: 5rem 0; }
.section .title { margin-bottom: 1rem; font-size: 2.25rem; text-align: center; }
.section .subtitle { text-align: center; margin-bottom: 3rem; font-size: 1.1rem; color: var(--text-color); }
.section header { margin-bottom: 4rem; }
.divider-1, .divider-2 { height: 1px; background: var(--divider-color); opacity: 0.7; }
#header { border-bottom: 1px solid var(--divider-color); display: flex; position: fixed; top: 0; left: 0; z-index: 100; background-color: var(--background-color); width: 100%; transition: all 0.3s ease-in-out; }
#header.scroll { box-shadow: 0 2px 15px rgba(44, 42, 38, 0.07); }
nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; width: 100%; }
nav .logo { font: 700 1.5rem var(--title-font); color: var(--title-color); }
nav .logo strong { color: var(--primary-color); }
nav .menu { opacity: 0; visibility: hidden; top: -20rem; transition: 0.2s; }
nav .menu ul { display: none; }
nav.show .menu { opacity: 1; visibility: visible; background: var(--background-color); height: 100vh; width: 100%; position: fixed; top: 0; left: 0; display: grid; place-content: center; }
nav.show .menu ul { display: grid; }
nav.show ul.grid { gap: 4rem; }
nav .menu ul li a.title { font-size: 1.2rem; font-weight: 500; color: var(--title-color); transition: color 0.3s; }
nav .menu ul li a.title:hover { color: var(--primary-color); }
nav .menu ul li a.active { color: var(--primary-color); font-weight: 600; }
nav .toggle { color: var(--primary-color); font-size: 1.5rem; cursor: pointer; }
nav .icon-close { display: none; }
nav.show .icon-close { display: block; position: fixed; top: 1.5rem; right: 1.5rem; z-index: 110; }
nav.show .icon-menu { display: none; }

/* ==================== HERO ==================== */
#home { padding: 0; min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: var(--header-height); box-sizing: border-box; }

/* CORREÇÃO 1: Conter as partículas dentro do Hero */
#particles-js {
    position: absolute; /* Mudado de 'fixed' para 'absolute' */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Fica acima do fundo, mas abaixo do texto */
}

.hero-background { background: url('./images/hero-background.jpg') no-repeat center center/cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(44, 42, 38, 0.6) 0%, rgba(44, 42, 38, 0.8) 100%); z-index: -1; }
#home .text { text-align: center; max-width: 650px; padding: 2rem 1.5rem; position: relative; z-index: 1; }
#home h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--white-color); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
#home p { margin-bottom: 2rem; color: var(--white-color); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

/* ==================== CONTEÚDO PRINCIPAL E RODAPÉ ==================== */
/* CORREÇÃO 2: Liberar o main e o footer do contexto de empilhamento que prendia o header */
main, footer {
    /* position e z-index removidos */
    background-color: var(--background-color);
}

footer {
    background-color: var(--title-color);
}

/* ... O restante do CSS está correto e permanece o mesmo ... */
#about .container { text-align: center; }
#about .image { max-width: 300px; margin: 0 auto 2rem auto; }
#about .image img { border-radius: 50%; border: 3px solid var(--white-color); box-shadow: 0 10px 25px rgba(44, 42, 38, 0.1); }
#about h2 { margin-bottom: 1.5rem; }
#services { background-color: var(--secondary-color); }
#services .card { padding: 3rem 2rem; background: var(--background-color); box-shadow: 0 4px 15px rgba(44, 42, 38, 0.06); border: 1px solid var(--divider-color); border-radius: .5rem; text-align: center; transition: all 0.3s ease-in-out; }
#services .card:hover { transform: translateY(-10px); box-shadow: 0 8px 25px rgba(44, 42, 38, 0.1); border-color: var(--primary-color); }
#services .card i { font-size: 3.5rem; color: var(--primary-color); margin-bottom: 1.5rem; }
#services .card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
#clinic .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
#clinic .gallery .item { overflow: hidden; border-radius: 0.5rem; }
#clinic .gallery .item img { transition: transform 0.4s ease-out; }
#clinic .gallery .item:hover img { transform: scale(1.1); }
#testimonials { background: var(--secondary-color); }
.testimonial-card { padding: 2rem; background: var(--background-color); border-radius: .5rem; border: 1px solid var(--divider-color); box-shadow: 0 4px 15px rgba(44, 42, 38, 0.06); }
.testimonial-card blockquote p { position: relative; text-indent: 1.875rem; margin-bottom: 1.5rem; }
.testimonial-card blockquote p span { font: 700 2.5rem var(--title-font); color: var(--primary-color); position: absolute; opacity: 0.8; }
.testimonial-card blockquote p span:first-child { top: -0.8rem; left: -1.875rem; }
.testimonial-card .author { display: flex; align-items: center; gap: 1rem; }
.testimonial-card .author img { width: 3rem; height: 3rem; border-radius: 50%; }
.swiper-pagination-bullet-active { background: var(--primary-color); }
.results-gallery .result-card { position: relative; cursor: pointer; overflow: hidden; border-radius: .5rem; box-shadow: 0 4px 12px rgba(44, 42, 38, 0.08); }
.result-card .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease-in-out; }
.result-card:hover .after { opacity: 1; }
.result-card .before span, .result-card .after span { position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,0.6); color: white; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.8rem; }
.result-card .after span { background: var(--primary-color); }
#cta { background-color: var(--secondary-color); }
#cta .container { max-width: 700px; margin: 0 auto; text-align: center; }
#cta .title { font-size: 2rem; margin-bottom: 1.5rem; }
#cta p { margin-bottom: 2rem; }
#contact .title { text-align: center; } 
#contact p { text-align: center; margin-bottom: 2rem; }
#contact form { display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin: 0 auto; }
#contact form input, #contact form textarea { width: 100%; padding: 1rem; border: 1px solid var(--divider-color); border-radius: .5rem; font-family: var(--body-font); background-color: var(--background-color); }
#contact form input:focus, #contact form textarea:focus { outline: 2px solid var(--primary-color); }
#contact form button { width: 100%; }
#contact .map { margin-top: 4rem; }
#contact .map iframe { border-radius: .5rem; }
footer { padding: 4rem 0 3rem 0; text-align: center; }
footer .logo { font: 700 1.5rem var(--title-font); color: var(--white-color); margin-bottom: 1.5rem; display: inline-block; }
footer p { color: #ccc; font-size: 0.9rem; margin-bottom: 0.5rem; }
footer .social { display: flex; justify-content: center; gap: 2rem; font-size: 1.5rem; margin: 2rem 0; }
footer .social a { color: var(--white-color); transition: color 0.3s; }
footer .social a:hover { color: var(--primary-color); }
.button { background-color: var(--primary-color); color: var(--white-color); padding: 1rem 2rem; border-radius: .5rem; border: none; display: inline-block; font-weight: 600; transition: background 0.3s; cursor: pointer; }
.button:hover { background-color: var(--primary-color-alt); }
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; background: var(--primary-color); color: white; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; visibility: hidden; opacity: 0; transition: 0.3s; transform: translateY(100%); z-index: 10; }
.back-to-top.show { visibility: visible; opacity: 1; transform: translateY(0); }
@media (min-width: 992px) { :root { --header-height: 5.5rem; } .container { max-width: 1120px; margin-left: auto; margin-right: auto; } .section { padding: 8rem 0; } nav .menu { opacity: 1; visibility: visible; top: 0; } nav .menu ul { display: flex; gap: 2rem; } nav .menu ul li a.title { font: 400 1rem var(--body-font); font-weight: 500; position: relative; color: var(--title-color); } nav .menu ul li a.title::after { content: ''; width: 0%; height: 2px; background: var(--primary-color); position: absolute; left: 0; bottom: -1.5rem; transition: width 0.2s; } nav .menu ul li a.title:hover::after, nav .menu ul li a.active::after { width: 100%; } nav .menu ul li a.title:hover, nav .menu ul li a.active { color: var(--primary-color); } nav .toggle { display: none; } #home h1 { font-size: 3.5rem; } #about .container { max-width: 800px; } #services .cards { grid-template-columns: repeat(3, 1fr); } #clinic .gallery { grid-template-columns: repeat(4, 1fr); } .results-gallery { grid-template-columns: repeat(3, 1fr); } #contact .grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: flex-start; } #contact .text, #contact .map { margin: 0; } #contact .text p { text-align: left; } #contact .title, #contact p { text-align: left; } #contact form { margin: 0; max-width: none; } footer { text-align: left; } footer .grid { grid-template-columns: 1fr auto 1fr; align-items: center; } footer .social { justify-content: center; margin: 0; } footer .legal { text-align: right; } }
/* FIM DO ARQUIVO style.css */