/* 1. CONFIGURAÇÕES GERAIS */
        :root {
            --primary: #417443;
            --secondary: #e2bd85;
            --accent: #5cba3c;
            --white: #ffffff;
            --transition-blend: 2s ease-in-out; /* Velocidade da mistura das fotos */
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Gabriela', serif; color: #4b4f58; line-height: 1.6; overflow-x: hidden; background: var(--white); }
        h1, h2, h3 { font-family: 'Roboto', sans-serif; text-transform: uppercase; }
        a { text-decoration: none; transition: 0.3s; }

        /* 2. HEADER E MENU */
        header {
            position: fixed; top: 0; width: 100%; z-index: 1000;
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
            display: flex; justify-content: space-between; align-items: center; padding: 15px 5%;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .nav-links { display: flex; gap: 25px; list-style: none; align-items: center; }
        .nav-links a { 
            color: var(--primary); font-size: 1rem; position: relative; 
        }
        
        /* Efeito Underline no Menu */
        .nav-links a::after {
            content: ''; position: absolute; width: 0; height: 2px;
            bottom: -4px; left: 0; background: var(--secondary); transition: 0.3s;
        }
        .nav-links a:hover { color: var(--secondary); }
        .nav-links a:hover::after { width: 100%; }

        /* Seletor de Idioma */
        .lang-toggle { display: flex; gap: 5px; background: #eee; padding: 5px; border-radius: 20px; }
        .lang-btn { border: none; background: none; cursor: pointer; padding: 5px 12px; border-radius: 15px; font-weight: 700; font-size: 0.7rem; }
        .lang-btn.active { background: var(--primary); color: white; }

        /* 3. BOTÃO CTA COM EFEITO SHINE */
        .btn-cta { 
            background: var(--accent); color: white !important; padding: 14px 30px; border-radius: 50px; 
            font-family: 'Roboto', sans-serif; font-weight: 700; position: relative;
            overflow: hidden; display: inline-block; box-shadow: 0 5px 15px rgba(92, 186, 60, 0.3);
        }
        .btn-cta::before {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-20deg); transition: 0.6s;
        }
        .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(92, 186, 60, 0.4); }
        .btn-cta:hover::before { left: 150%; }

        /* 4. HERO SLIDER (SISTEMA DE MISTURA) */
        .hero { 
            position: relative; height: 100vh; width: 100%; overflow: hidden; background: #fff; 
        }

        .slide { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            opacity: 0; z-index: 1; pointer-events: none; /* Desabilita mouse no slide invisível */
            transition: opacity var(--transition-blend);
            display: flex; align-items: center; padding: 0 10%; 
        }

        .slide.active { 
            opacity: 1; z-index: 2; pointer-events: auto; /* Habilita mouse no slide visível */
        }

        /* Efeito Zoom (Ken Burns) */
        .slide-bg { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background-size: cover; background-position: center; z-index: -1;
            transform: scale(1); will-change: transform;
        }
        .slide.active .slide-bg { animation: kenburns 12s linear forwards; }
        @keyframes kenburns { to { transform: scale(1.15); } }

        .slide-overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%); 
        }

        /* Animação de Texto Individual */
        .slide-content { position: relative; z-index: 10; color: white; width: 100%; }
        .slide-content h1, .slide-content h2, .slide-content p, .slide-content .anim-item { 
            opacity: 0; transform: translateY(30px); filter: blur(10px); 
        }

        .slide.active h1, .slide.active h2 { animation: textShow 0.8s ease-out forwards 0.4s; }
        .slide.active p { animation: textShow 0.8s ease-out forwards 0.7s; }
        .slide.active .anim-item { animation: textShow 0.8s ease-out forwards 1s; }

        @keyframes textShow {
            to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        /* Caixa de Vidro (Slide 2) */
        .glass-box {
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px); padding: 40px; border-radius: 25px;
            border: 1px solid rgba(255,255,255,0.2); text-align: center;
            max-width: 800px; margin: 0 auto; box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .hero h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 20px; }

        /* 5. MISSÃO */
        .mission { padding: 100px 10%; text-align: center; background: #f9f9f9; }
        .mission h2 { color: var(--primary); margin-bottom: 20px; }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            header { flex-direction: column; gap: 10px; padding: 10px; }
            .nav-links { gap: 10px; }
        }
		/* Efeito Especial para o Título CLÍNICA ROOTS */
.special-title {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    /* Gradiente Ouro/Verde */
    background: linear-gradient(
        to right, 
        #417443 0%, 
        #e2bd85 25%, 
        #fff 50%, 
        #e2bd85 75%, 
        #417443 100%
    );
    background-size: 200% auto;
    /* Faz o gradiente ficar dentro das letras */
    -webkit-background-clip: text;
    background-clip: text;
    /* Cor de fallback caso o navegador seja antigo */
    color: #417443; 
    /* Deixa o fundo (gradiente) aparecer através das letras */
    -webkit-text-fill-color: transparent;
    
    /* Animações */
    animation: shine-gold 4s linear infinite, float-soft 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(226, 189, 133, 0.4));
    display: inline-block;
}

/* Animação do Brilho passando pelas letras */
@keyframes shine-gold {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Animação de flutuação suave */
@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
    .special-title { font-size: 2.5rem; }
}

/* 1. SOLUÇÃO PARA O "PULO" DA BARRA DE ROLAGEM */
html {
    overflow-y: scroll; /* Força a barra de rolagem a existir sempre, mesmo que vazia */
}

/* 2. GARANTIR QUE O BOX-SIZING NÃO MUDE O CÁLCULO DE LARGURA */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

/* 3. PADRONIZAÇÃO DO HEADER (IGUAL EM TODAS AS PÁGINAS) */
header {
    position: fixed; 
    top: 0; 
    left: 0; /* Garante que comece do zero na esquerda */
    width: 100%; 
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 5%; /* Certifique-se de que este valor é IGUAL na home e serviços */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    height: 80px; /* Definir uma altura fixa evita que o menu mude de tamanho */
}

/* Garante que o container de links não varie de largura */
.nav-links {
    display: flex;
    gap: 25px;
    list-style: none;
    align-items: center;
}

/* 4. AJUSTE NO BODY PARA NÃO "TREMER" */
body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw; /* Usa a largura total da janela de visualização */
}
/* --- FIX DE SIMETRIA E PULO DO MENU --- */

html {
    /* 1. Força a reserva do espaço da scrollbar para o menu não "dançar" lateralmente */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

* { 
    /* 2. Garante que paddings não aumentem o tamanho real dos elementos */
    box-sizing: border-box !important; 
}

body {
    /* 3. Troca 100vw (que buga) por 100% (que respeita a borda da tela) */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

header {
    /* 4. Força o alinhamento horizontal fixo e padding idêntico */
    left: 0 !important;
    right: 0 !important;
    padding: 15px 5% !important; 
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Garante que o Logo e os Itens do menu não se movam nem 1px */
header .logo, header .nav-links, header .lang-toggle {
    transform: none !important;
}