/* JV Essential Beauty - Style v6.0 
    Foco: Cintura, Animações AOS e Modelagem Premium
*/

:root {
    --primary: #c9a07c;
    --primary-light: #f4ece6;
    --secondary: #2d2d2d;
    --bg: #fffafa;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-soft: 0 4px 15px rgba(0,0,0,0.05);
    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* 1. RESET E CONFIGURAÇÕES GLOBAIS */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

body { 
    font-family: 'Poppins', sans-serif; 
    background: var(--bg); 
    color: var(--secondary); 
    line-height: 1.6; 
    overflow-x: hidden; 
}

h1, h2, h3, .logo { 
    font-family: 'Playfair Display', serif; 
}

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

.section-padding { 
    padding: 100px 0; 
}

.section-title { 
    text-align: center; 
    font-size: 2.8rem; 
    margin-bottom: 60px; 
    color: var(--secondary); 
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary);
    margin: 15px auto 0;
}

/* 2. HEADER & NAVEGAÇÃO */
header { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); 
}

nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px 0; 
}

.logo { 
    font-size: 1.6rem; 
    font-weight: bold; 
    letter-spacing: 1px;
}

.logo span { 
    color: var(--primary); 
    font-weight: 400; 
}

.nav-links { 
    display: flex; 
    list-style: none; 
    gap: 30px; 
    align-items: center; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--secondary); 
    font-weight: 500; 
    font-size: 0.95rem; 
    transition: var(--transition-fast); 
}

.nav-links a:hover { 
    color: var(--primary); 
}

.btn-agendar { 
    background: var(--primary); 
    color: white !important; 
    padding: 12px 25px; 
    border-radius: 50px; 
    box-shadow: 0 4px 10px rgba(201, 160, 124, 0.3);
    transition: 0.3s;
}

.btn-agendar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(201, 160, 124, 0.4);
}

/* 3. HERO SECTION */
.hero { 
    height: 90vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), 
                url('../assets/images/fotoClinica.jpeg') center/cover no-repeat;
    display: flex; 
    align-items: center; 
    justify-content: flex-start;
}

.hero-content { 
    max-width: 700px; 
    color: white; 
    padding-left: 5%; 
}

.hero-content h1 { 
    font-size: clamp(2.8rem, 7vw, 5rem); 
    line-height: 1.1; 
    margin-bottom: 25px; 
    text-shadow: 3px 3px 15px rgba(0,0,0,0.4); 
}

.hero-content p { 
    font-size: 1.3rem; 
    margin-bottom: 35px; 
    text-shadow: 1px 1px 8px rgba(0,0,0,0.5); 
    font-weight: 300;
}

.cta-button { 
    padding: 18px 45px; 
    background: var(--primary); 
    color: white; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 600; 
    display: inline-block; 
    transition: var(--transition-fast); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover { 
    background: #b38d6a; 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 4. SERVIÇOS (CARDS DINÂMICOS) */
.grid-servicos { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
}

.card { 
    background: white; 
    padding: 40px; 
    border-radius: 20px; 
    box-shadow: var(--shadow-soft); 
    border-top: 5px solid var(--primary); 
    transition: var(--transition-slow); 
}

.card:hover { 
    transform: translateY(-12px); 
    box-shadow: var(--shadow); 
}

.card h3 { 
    color: var(--primary); 
    margin-bottom: 25px; 
    text-align: center; 
    font-size: 1.6rem;
}

.service-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px 0; 
    border-bottom: 1px dashed #eee; 
    transition: 0.2s; 
}

.service-item:hover { 
    background: #fffcf8; 
    padding-left: 5px;
}

.service-item strong {
    color: var(--primary);
}

/* 5. RESULTADOS - FOCO MÁXIMO NA CINTURA */
.results-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
    gap: 35px; 
}

.result-image-container { 
    position: relative; 
    background: white; 
    padding: 15px; 
    border-radius: 20px; 
    box-shadow: var(--shadow-soft); 
    overflow: hidden; 
}

.result-image { 
    width: 100%; 
    height: 720px; 
    object-fit: cover; 
    object-position: center 35%; /* FOCO NA CINTURA */
    border-radius: 12px; 
    display: block;
    transition: transform 0.8s ease;
}

.result-image-container:hover .result-image { 
    transform: scale(1.08); 
}

.label-result { 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    background: rgba(0,0,0,0.7); 
    color: white; 
    padding: 8px 22px; 
    border-radius: 30px; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    z-index: 10; 
}

/* 6. SOBRE - MODELAGEM PREMIUM DA FOTO */
.sobre-mim { 
    background: white; 
}

.sobre-grid { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
}

.sobre-img-container { 
    flex: 1; 
    min-width: 450px; 
    padding: 50px;
    position: relative;
}

.janaina-foto { 
    width: 100%; 
    height: 100%; 
    min-height: 650px; 
    object-fit: cover; 
    object-position: top; 
    display: block; 
    
    /* MODELAGEM DA FOTO: Curvas orgânicas */
    border-radius: 60% 40% 70% 30% / 30% 65% 35% 70%;
    box-shadow: 0 20px 50px rgba(201, 160, 124, 0.2);
    border: 4px solid rgba(201, 160, 124, 0.2);
    transition: 0.5s ease-in-out;
}

.janaina-foto:hover {
    border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1.03);
    border-color: var(--primary);
}

.sobre-text-container { 
    flex: 1; 
    min-width: 450px; 
    padding: 80px 8%; 
}

.subtitle { 
    color: var(--primary); 
    font-size: 0.9rem; 
    letter-spacing: 3px; 
    font-weight: 600; 
    text-transform: uppercase; 
}

.sobre-text-container h2 { 
    font-size: 3.8rem; 
    margin: 20px 0 30px; 
    line-height: 1.1; 
}

.sobre-text-container p { 
    color: #555; 
    margin-bottom: 25px; 
    font-size: 1.1rem; 
}

.cta-button-light { 
    display: inline-block; 
    padding: 18px 45px; 
    border: 2px solid var(--primary); 
    color: var(--primary); 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 600; 
    transition: var(--transition-fast); 
    text-align: center; 
}

.cta-button-light:hover { 
    background: var(--primary); 
    color: white; 
    transform: translateY(-3px); 
}

/* 7. AVALIAÇÕES GOOGLE */
.reviews-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 30px; 
}

.review-card { 
    background: white; 
    padding: 40px; 
    border-radius: 20px; 
    box-shadow: var(--shadow-soft); 
    text-align: center; 
    border: 1px solid #f9f9f9;
}

.stars { 
    color: #f1c40f; 
    margin-bottom: 20px; 
    font-size: 1.3rem;
}

.review-card p {
    font-style: italic;
    color: #444;
}

.client-name { 
    display: block; 
    margin-top: 20px; 
    font-weight: 600; 
    color: var(--primary); 
}

.google-link-container { 
    text-align: center; 
    margin-top: 50px; 
}

.btn-google { 
    color: var(--secondary); 
    text-decoration: none; 
    font-weight: 600; 
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary); 
    transition: 0.3s; 
}

.btn-google:hover { 
    color: var(--primary); 
    padding-left: 10px;
}

/* 8. FAQ ESTILIZADO */
.faq-container { 
    max-width: 900px; 
    margin: 0 auto; 
}

.faq-item { 
    background: white; 
    margin-bottom: 15px; 
    border-radius: 15px; 
    box-shadow: var(--shadow-soft); 
    overflow: hidden; 
    transition: 0.3s; 
}

.faq-item:hover { 
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); 
}

.faq-question { 
    width: 100%; 
    padding: 28px; 
    border: none; 
    background: none; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    font-family: 'Poppins'; 
    font-weight: 600; 
    font-size: 1.1rem; 
    color: var(--secondary); 
    text-align: left; 
}

.faq-question i { 
    color: var(--primary); 
    transition: 0.4s; 
    font-size: 0.9rem; 
}

.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); 
    padding: 0 28px; 
    background: white; 
}

.faq-answer p { 
    padding-bottom: 28px; 
    color: #666; 
}

.faq-item.active { 
    border: 1px solid rgba(201, 160, 124, 0.3); 
}

.faq-item.active .faq-answer { 
    max-height: 500px; 
    transition: max-height 0.4s ease-in;
}

.faq-item.active .faq-question i { 
    transform: rotate(180deg); 
}

/* 9. FOOTER & WHATSAPP */
footer { 
    text-align: center; 
    padding: 50px 0; 
    background: white; 
    border-top: 1px solid #eee; 
    color: #999; 
    font-size: 0.95rem; 
}

.bot-trigger { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    width: 65px; 
    height: 65px; 
    background: #25d366; 
    color: white; 
    border-radius: 50%; 
    border: none; 
    font-size: 32px; 
    cursor: pointer; 
    z-index: 1000; 
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4); 
    transition: 0.3s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    animation: pulseWpp 2s infinite; 
}

.bot-trigger:hover { 
    transform: scale(1.15) rotate(10deg); 
}

@keyframes pulseWpp {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 10. RESPONSIVIDADE */
@media (max-width: 1024px) {
    .sobre-img-container, .sobre-text-container { flex: 100%; text-align: center; }
    .sobre-img-container { padding: 20px; }
    .janaina-foto { min-height: 500px; border-radius: 30px; }
    .sobre-text-container h2 { font-size: 3rem; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-content { padding-left: 0; text-align: center; }
    .hero-content h1 { font-size: 3.2rem; }
    .section-title { font-size: 2.2rem; }
    .results-grid { grid-template-columns: 1fr; }
    .result-image { height: 500px; }
}