/* Declaração da Garet (Família Unificada) */
@font-face {
    font-family: 'Garet';
    src: url('fonts/Garet-Book.woff2') format('woff2'); /* Removi o ../ para bater com seu HTML */
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Garet';
    src: url('fonts/Garet-Heavy.woff2') format('woff2'); 
    font-weight: 700; /* Bold/Heavy */
    font-style: normal;
    font-display: swap;
}

/* =========================================
   Variáveis e Reset Baseados no Print
   ========================================= */
:root {
    --gold-accent: #B89768; 
    --gold-hover: #D4AF7A;
    --text-white: #FFFFFF;
    --bg-dark: #563528; /* O marrom premium que você definiu */
    
    /* Variáveis para aplicação de fonte */
    --font-heading: 'Garet', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

/* Exemplo de aplicação correta */
h1 {
    font-family: var(--font-heading);
    font-weight: 700; /* O navegador vai buscar automaticamente o arquivo Heavy */
}

p {
    font-family: var(--font-body);
    font-weight: 400;
}

.subtitulo-elegante {
    font-family: var(--font-heading);
    font-weight: 400; /* O navegador vai buscar automaticamente o arquivo Book */
}

/*aditivos especiais*/
h3.especial {
    font-size: 2.0rem  !important;
	-webkit-text-stroke: 0.7px white;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: #333; /* Cor do texto padrão */
    line-height: 1.6;
}

/* Aplicando Garet nos Títulos */
h1, h2, h3, .logo-text, .overline-text, .btn-gold-filled {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em; /* Garet fica linda com um pouco menos de espaçamento entre letras nos títulos */
}

p.cor-cinza {
    color: #563528 !important;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Isso mata a barra lateral e o scroll horizontal */
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-white);
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}

/* =========================================
   Header Transparente & Menu
   ========================================= */
@media (max-width: 768px) {
    .header-content {
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .logo-text {
        font-size: 0.75rem !important; /* Diminui para caber em uma linha ou duas compactas */
        max-width: 180px;
    }

    .nav-toggle-label {
        margin-right: 0; /* Garante que o ícone fique na borda direita */
    }
}


.header-transparent {
    position: fixed; /* Mudei de absolute para fixed para ele acompanhar a tela */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Z-index alto para garantir que fique acima de todas as seções */
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent; /* Começa transparente */
    transition: all 0.4s ease-in-out; /* Esta é a mágica que faz o escurecimento ser suave */
}

.header-transparent.scrolled {
    background-color: #563528 !important; 
    padding: 15px 0 !important; 
    border-bottom: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.main-nav a {
    text-decoration: none;
    color: var(--text-white);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--gold-accent);
}

.social-icon {
    display: flex;
    align-items: center;
}

/* --- Ajustes Globais do Header --- */
.logo-text {
    color: var(--text-white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.2;
    display: block;
	-webkit-text-stroke: 0.7px white;
}

/* Esconder o checkbox e o botão no Desktop */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }


/* Forçar fontes e ajustar tamanhos no Mobile */
@media (max-width: 768px) {
    
    /* Garante que o corpo do site use Open Sans */
    body, p, span, li {
        font-family: var(--font-body) !important;
        font-weight: 400;
        line-height: 1.5;
    }

    /* Garante que Títulos e Logo usem a Garet */
    h1, h2, h3, .logo-text, .overline-text, .btn-gold-filled {
        font-family: var(--font-heading) !important;
        font-weight: 200;
    }

    /* --- Ajuste Visual da Seção Hero (da sua print) --- */
    
    .hero-title {
        font-size: 1.8rem !important; /* Diminui para não cobrir o rosto da Dra. */
        line-height: 1.1;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Melhora leitura sobre a foto */
		-webkit-text-stroke: 0.7px white;
    }

    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.4;
        max-width: 90%;
        margin: 0 auto 25px auto;
    }


/* --- Menu Mobile (Abaixo de 992px) --- */
@media (max-width: 992px) {
    .nav-toggle-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        z-index: 1001;
    }

    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background: var(--text-white);
        height: 2px;
        width: 25px;
        position: relative;
        transition: 0.3s;
    }

    .nav-toggle-label span::before,
    .nav-toggle-label span::after { content: ''; position: absolute; }
    .nav-toggle-label span::before { bottom: 8px; }
    .nav-toggle-label span::after { top: 8px; }

    /* Transformar o menu numa lista vertical escondida */
    .main-nav {
        position: absolute;
        text-align: center;
        top: 0;
        right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(1, 0); /* Começa com altura zero */
        transform-origin: top;
        transition: transform 0.4s ease-in-out;
        z-index: 1000;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 40px;
    }

    .main-nav a { font-size: 1.2rem; }

    /* Mostrar o menu quando o checkbox estiver marcado */
    .nav-toggle:checked ~ .main-nav {
        transform: scale(1, 1);
    }

    /* Transformar o ícone em "X" ao abrir */
    .nav-toggle:checked + .nav-toggle-label span { background: transparent; }
    .nav-toggle:checked + .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
    .nav-toggle:checked + .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }
}

/* =========================================
   Animações de Entrada (Load)
   ========================================= */

/* Define a animação: vem da esquerda (-50px) e fica visível */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Estaciona na posição original */
    }
}

/* Esconde os elementos inicialmente para que eles não "pisquem" antes da animação */
.overline-text.animate-1,
.hero-content-left h1.animate-2,
.hero-content-left p.animate-3 {
    opacity: 0; /* Começa invisível */
}

@media (max-width: 768px) {
    .hero-fullscreen {
        background-position: 75% center !important; /* Move a foto da doutora um pouco para a direita para dar espaço ao texto */
        background-size: cover !important;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center; /* Centraliza o texto no mobile para melhor leitura */
    }

    .hero-content-left {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important; /* Remove os 8% que estão empurrando o layout na imagem */
        padding: 0 20px;
        margin-top: 50px; /* Dá espaço para o header não cobrir o título */
    }

    .hero-content-left h1 {
        font-size: 2.2rem !important; /* Tamanho ideal para celular */
        line-height: 1.2;
    }

    .hero-content-left p {
        font-size: 0.95rem !important;
    }
}

/* Quando a animação deve começar (classe adicionada no body pelo JS) */
body.start-animation .overline-text.animate-1,
body.start-animation .hero-content-left h1.animate-2,
body.start-animation .hero-content-left p.animate-3 {
    animation-name: slideInLeft;
    animation-duration: 0.8s; /* Duração do movimento de cada um */
    animation-timing-function: ease-out; /* Movimento suave no final */
    animation-fill-mode: forwards; /* Garante que fiquem visíveis no final */
}

/* --- Lógica Sequencial (Staggered) --- */

/* Bloco 1: Começa quase imediatamente */
body.start-animation .animate-1 {
    animation-delay: 0.2s;
}

/* Bloco 2: Começa 0.3s depois do primeiro */
body.start-animation .animate-2 {
    animation-delay: 0.5s;
}

/* Bloco 3: Começa 0.3s depois do segundo */
body.start-animation .animate-3 {
    animation-delay: 0.8s;
}
}

/* =========================================
   Hero Section (A Dobra Principal)
   ========================================= */
.hero-fullscreen {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa 100% da altura da tela */
    min-height: 700px;
    display: flex;
    align-items: center;
    /* IMPORTANTE: Substitua o URL abaixo pela foto da sua cliente */
    background-image: url('img/Capa-Dra-VAnessa.jpg'); 
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}


/* =========================================
   Seção Dividida (Missão / Sobre)
   ========================================= */
.split-section {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar a linha no celular */
    background-color: var(--text-white);
    width: 100%;
}

/* Configuração da metade da imagem */
.split-image {
    flex: 1 1 50%; /* Ocupa exatamente 50% da tela no PC */
    position: relative;
    min-height: 600px; /* Garante uma altura mínima para a foto não sumir */
}

/* O segredo para a imagem cobrir todo o espaço sem distorcer */
.split-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Configuração da metade do texto */
.split-text {
    flex: 1 1 50%;
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente */
    padding: 80px 8%; /* Cria o espaço em branco ao redor do texto */
}

.text-content {
    max-width: 550px; /* Impede que o texto fique muito largo em telas gigantes */
}

/* O subtítulo dourado adaptado para o fundo branco */
.overline-text-dark {
    display: block;
    font-family: var(--font-heading);
    color: var(--gold-accent);
    font-size: 0.85rem;
    font-weight: 200;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
	-webkit-text-stroke: 0.7px #B89768;	
}

/* O título grande e fino igual ao do modelo */
.text-content h2 {
    font-family: var(--font-heading);
    font-size: 3rem; 
    font-weight: 300;
    line-height: 1.15;
    color: #222222; /* Cinza quase preto para não cansar a vista */
    margin-bottom: 30px;
}

/* Textos dos parágrafos */
.text-content p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: #f9f9f9;
    margin-bottom: 20px;
}


/* =========================================
   Seção de Conversão / Dor (Cta Dark)
   ========================================= */
.cta-dark-section {
    background-color: #563528; /* Tom escuro quase preto, igual ao Hero original do print de referência */
    padding: 100px 0;
    width: 100%;
}

.cta-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
    max-width: 1000px; /* Impede que o texto fique muito largo em telas gigantes */
}

/* Subtítulo Dourado Centralizado */
.overline-text-darker {
    display: block;
    font-family: var(--font-heading);
    color: var(--gold-accent);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
	-webkit-text-stroke: 0.7px #B89768;	
}

/* Título Branco Fino Centralizado */
.text-center h2 {
    font-family: var(--font-heading);
    font-size: 2.8rem; /* Peso fino e tamanho elegante */
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-white);
    margin-bottom: 40px;
	-webkit-text-stroke: 0.7px white;	
}


/* =========================================
   Seção de Serviços (Carrossel)
   ========================================= */
.services-section {
    background-color: #F8F9FA; /* Fundo cinza bem claro igual ao print */
    padding: 100px 0 80px 0;
    width: 100%;
}

/* Títulos do Carrossel usam as mesmas classes da seção Missão, 
   só adicionamos margens para espaçamento */
.services-section .text-center {
    margin-bottom: 60px;
}

.services-section h2 {
    color: #222222;
    margin-bottom: 30px;
}

/* Botão Escuro (como no print) */
.btn-dark-filled {
    display: inline-block;
    background-color: #563528; /* Tom de chumbo/verde escuro elegante original: #2C3E45; */
    color: var(--gold-accent); /*Tnalidade original: --text-white*/
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-dark-filled:hover {
    background-color: var(--primary-color);
}

/* --- Estrutura do Carrossel --- */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px; /* Espaço para as setas não cobrirem os cards */
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
    padding: 20px 0; /* Espaço para a sombra do card não ser cortada */
}

.carousel-track {
    list-style: none;
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 0;
    padding: 0;
}

/* Em telas de PC, mostra 3 cards por vez. A largura é 33.333% menos a margem */
.carousel-slide {
    flex: 0 0 calc(33.333% - 30px);
    margin: 0 15px;
    box-sizing: border-box;
}

/* --- Estilo dos Cards --- */
.card {
    background: var(--text-white);
    border-radius: 4px; /* Bordas levemente arredondadas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.card-image {
    width: 100%;
    height: 300px; /* Altura padronizada para as fotos */
    object-fit: cover;
}

.card-content {
    padding: 25px;
    flex-grow: 1;
}

.card-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: #222222;
    margin-bottom: 15px;
}

.card-content p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
	font-family: var(--font-texting);
}

/* --- Botões de Navegação (Setas) --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: #CCCCCC;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
}

.carousel-btn:hover {
    color: var(--gold-accent);
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* --- Paginação (Bolinhas) --- */
.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.carousel-indicator {
    border: none;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #D1D1D1;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-indicator.current-indicator {
    background: #555555; /* Bolinha ativa mais escura */
}

/* --- Responsividade Carrossel --- */
@media (max-width: 992px) {
    .carousel-slide {
        flex: 0 0 calc(50% - 20px); /* 2 cards por vez no tablet */
        margin: 0 10px;
    }
}

@media (max-width: 768px) {
    .carousel-slide {
        flex: 0 0 calc(100% - 20px); /* 1 card por vez no celular */
        margin: 0 10px;
    }
    .carousel-wrapper {
        padding: 0 25px; /* Reduz espaço das setas no celular */
    }
}


/* =========================================
   Seção Sobre o Profissional (Dark Split)
   ========================================= */
.split-section-dark {
    display: flex;
    flex-wrap: wrap;
    background-color: #070707; /* Fundo super escuro, quase preto */
    position: relative; /* Necessário para a faixa dourada ancorar na base */
    width: 100%;
}

.split-image-dark {
    flex: 1 1 50%;
    position: relative;
    min-height: 600px;
}

.split-image-dark img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Foca no rosto da profissional */
}

.split-text-dark {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 80px 8%;
}

.split-text-dark .text-content {
    max-width: 600px;
}

.split-text-dark h2 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-white);
    margin-bottom: 25px;
	-webkit-text-stroke: 0.7px white;
}

/* Nome da Doutora */
.doctor-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-white);
    margin-bottom: 20px;
}

.doctor-bio {
    font-size: 1.05rem;
    color: #CCCCCC;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- Lista de Currículo --- */
.curriculum-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.curriculum-list li {
    font-size: 0.85rem;
    color: #AAAAAA; /* Texto do currículo um pouco mais sutil */
    line-height: 1.5;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.check-icon {
    color: var(--gold-accent);
    font-size: 0.9rem;
    margin-top: 2px; /* Alinha o check perfeitamente com a primeira linha do texto */
}

/* Ícone do Instagram */
.social-link-icon {
    color: var(--text-white);
    transition: color 0.3s ease;
    display: inline-block;
}

.social-link-icon:hover {
    color: var(--gold-accent);
}

/* =========================================
   Responsividade (Sobre)
   ========================================= */
@media (max-width: 992px) {
    .split-image-dark, .split-text-dark {
        flex: 1 1 100%;
    }
    
    .split-image-dark {
        min-height: 500px;
    }
    
    .split-text-dark h2 {
        font-size: 2.2rem;
    }
}

/* =========================================
   Introdução aos Sintomas (Fundo Claro)
   ========================================= */
.symptoms-intro-section {
    background-color: #F8F9FA; /* Fundo cinza bem claro, relaxante para leitura */
    padding: 120px 0 80px 0; /* Espaço generoso em cima para respirar */
    width: 100%;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Container que trava a largura do texto para leitura confortável */
.text-center-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* O título grande e fino, mas agora com cor escura */
.dark-heading {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.2;
    color: #222222;
    margin-bottom: 25px;
	-webkit-text-stroke: 0.7px #222222;
}

/* O parágrafo descritivo */
.gray-paragraph {
    font-size: 1.05rem;
    color: #666666;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 90%; /* Garante que o parágrafo não fique mais largo que o título */
	font-family: var(--font-texting);
}

/* =========================================
   Responsividade (Sintomas)
   ========================================= */
@media (max-width: 768px) {
    .symptoms-intro-section {
        padding: 80px 0 50px 0;
    }
    
    .dark-heading {
        font-size: 2.2rem;
    }
    
    .gray-paragraph {
        font-size: 1rem;
        max-width: 100%;
    }
}


/* =========================================
   Blocos de Sintomas Assimétricos
   ========================================= */
.symptom-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 480px; /* Garante uma altura mínima elegante */
}

/* Coluna 1: Caixa Dourada com Ícone */
.symptom-icon-box {
    flex: 1 1 17%; /* Ocupa 20% do espaço no PC */
    background-color: var(--gold-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

/* Para criar aquele círculo fino em volta do ícone que aparece no print */
.symptom-icon-box svg {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    padding: 15px;
    width: 80px;
    height: 80px;
}

/* Coluna 2: Caixa Preta com Texto */
.symptom-text-box {
    flex: 1 1 30%; /* Ocupa 30% do espaço no PC */
    /* background-color: #050505;  Preto absoluto original */
    color: var(--text-white);
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.symptom-text-box h3 {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center; /* Título centralizado como no print */
    margin-bottom: 25px;
}

.symptom-text-box p {
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 30px;
	font-family: var(--font-body) !important;
}

/* Ajustes finos na lista reaproveitada para este bloco escuro */
.symptom-list li {
    font-size: 0.9rem;
    color: #CCCCCC;
}

/* Coluna 3: Imagem (Metade da Tela) */
.symptom-image-box {
    flex: 1 1 50%; /* Ocupa os 50% restantes no PC */
    position: relative;
    min-height: 350px;
}

.symptom-image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   Responsividade (Para Tablets e Celulares)
   ========================================= */
@media (max-width: 1024px) {
    /* No tablet, o ícone some ou fica no topo, e divide o resto 50/50 */
    .symptom-icon-box {
        flex: 1 1 100%;
        min-height: 120px;
    }
    .symptom-text-box, .symptom-image-box {
        flex: 1 1 50%;
    }
}

@media (max-width: 768px) {
    /* No celular, empilha tudo e esconde o ícone dourado para economizar espaço e focar na conversão */
    .symptom-row {
        flex-direction: column;
    }
    .symptom-icon-box {
        display: none; /* Remove o ícone no mobile para a leitura ficar mais fluida */
    }
    .symptom-text-box, .symptom-image-box {
        flex: 1 1 100%;
        width: 100%;
    }
    .symptom-image-box {
        min-height: 250px;
    }
}


/* =========================================
   Letreiro Infinito (Marquee Section)
   ========================================= */
.marquee-section {
    background-color: #343434; /* Cor original: Verde escuro / Chumbo elegante igual ao print #2A3C38; */
    padding: 30px 0; /* Faixa mais estreita, como um banner */
    width: 100%;
    overflow: hidden; /* Esconde o que sai da tela */
    display: flex;
    align-items: center;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
}

/* O container que vai se mover */
.marquee-content {
    display: flex;
    width: max-content; /* Garante que a div tenha o tamanho exato dos textos juntos */
    animation: scrollMarquee 25s linear infinite; /* 25s define a velocidade. Linear = constante */
}

/* O estilo do texto grande e fino */
.marquee-content span {
    font-family: var(--font-heading);
    font-size: 4rem; /* Letra bem grande */
    font-weight: 300; /* Fina e elegante */
    color: var(--text-white);
    padding-right: 20px; /* Espaço antes de recomeçar a frase */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* A mágica do Loop infinito */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exatamente 50% do seu próprio tamanho (ou seja, o tamanho de um dos spans) */
        transform: translateX(-50%);
    }
}

/* =========================================
   Responsividade (Letreiro)
   ========================================= */
@media (max-width: 768px) {
    .marquee-content span {
        font-size: 2.5rem; /* Diminui a letra no celular para não ficar ilegível */
    }
    .marquee-section {
        padding: 20px 0;
    }
}


/* =========================================
   Seção com Sanfona (Accordion)
   ========================================= */
.split-accordion-section {
    display: flex;
    flex-wrap: wrap;
    background-color: #030303; /* Fundo preto quase absoluto */
    width: 100%;
}

.split-image-half {
    flex: 1 1 50%;
    position: relative;
    min-height: 650px;
}

.split-image-half img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-text-half {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 80px 8%;
}

.text-content-accordion {
    max-width: 550px;
    width: 100%;
}

.text-content-accordion h2 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-white);
    margin-bottom: 25px;
}

.gray-paragraph-light {
    font-size: 1rem;
    color: #AAAAAA;
    line-height: 1.6;
    margin-bottom: 40px;
	font-family: var(--font-texting) !important;
}

/* Espaçamento do botão */
.mt-30 {
    margin-top: 30px;
}

/* --- Estilos da Sanfona (Accordion) --- */
.accordion-container {
    margin-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Linha superior fina */
}

/* O botão que o usuário clica */
.accordion-header {
    background: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 22px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Linha divisória fina */
    text-align: left;
    outline: none;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between; /* Empurra a seta para a direita */
    align-items: center;
    transition: color 0.3s ease;
}

/* Efeito ao passar o mouse ou quando a sanfona está aberta */
.accordion-header:hover, .accordion-header.active {
    color: var(--gold-accent);
}

/* A setinha */
.accordion-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease; /* Anima o giro */
    color: #777777;
}

/* Gira a setinha para baixo quando ativo */
.accordion-header.active .accordion-icon {
    transform: rotate(90deg);
    color: var(--gold-accent);
}

/* A caixa onde o texto fica escondido */
.accordion-content {
    max-height: 0; /* Começa com tamanho zero (fechada) */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Deslizamento suave */
    background-color: transparent;
}

.accordion-content p {
    padding: 15px 0 25px 0; /* Espaço para o texto respirar quando abrir */
    color: #999999;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
	font-family: var(--font-texting) !important;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .split-image-half, .split-text-half {
        flex: 1 1 100%; /* Empilha as metades */
    }
    .split-image-half {
        min-height: 400px;
    }
    .text-content-accordion h2 {
        font-size: 2.2rem;
    }
}

/* Pequeno detalhe decorativo para a seção de longevidade (opcional) */
.split-text-dark {
    position: relative;
}

/* Faixa dourada na base apenas da metade do texto (como no print) */
.split-text-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--gold-accent);
}


/* =========================================
   Seção de Diferenciais (Grid 3x2)
   ========================================= */
.differentials-section {
    background-color: #F8F9FA; /* Fundo cinza super claro */
    padding: 100px 0;
    width: 100%;
}

.differentials-section .text-center-block {
    margin-bottom: 70px; /* Dá espaço antes de começar os ícones */
}

/* O container do Grid */
.differentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    column-gap: 50px;
    row-gap: 60px;
}

/* Estilo individual de cada item */
.diff-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* O círculo com o ícone dourado */
.diff-icon {
    width: 90px;
    height: 90px;
    border: 1px solid var(--gold-accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    background-color: var(--white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); /* Sombra super sutil */
    transition: transform 0.3s ease;
}

.diff-item:hover .diff-icon {
    transform: translateY(-5px); /* Efeito flutuante suave ao passar o mouse */
}

/* Título de cada diferencial */
.diff-item h4 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 3px; /* As letras espaçadas do print */
    color: #222222;
    margin-bottom: 15px;
}

/* Texto de cada diferencial */
.diff-item p {
    font-size: 0.95rem;
    color: #777777;
    line-height: 1.6;
    max-width: 90%;
}

/* =========================================
   Responsividade (Grid Diferenciais)
   ========================================= */
@media (max-width: 992px) {
    .differentials-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .differentials-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        row-gap: 50px;
    }
    .differentials-section {
        padding: 70px 0;
    }
}

/* =========================================
   Seção de Depoimentos (Dark Theme)
   ========================================= */
.testimonials-section {
    /* background-color: #2A3C38;  Fundo verde escuro / Chumbo (o mesmo do Letreiro Infinito) original */
    padding: 100px 0 80px 0;
    width: 100%;
}

/* Títulos do Depoimento usam as mesmas classes da seção Missão, 
   só adicionamos margens para espaçamento */
.testimonials-section .text-center {
    margin-bottom: 60px;
}

/* O título grande e fino, mas agora com cor branca */
.light-heading {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-white);
    margin-bottom: 25px;
}

/* Subtítulo Dourado mais claro sobre fundo escuro */
.overline-text-white {
    display: block;
    font-family: var(--font-heading);
    color: var(--gold-accent); /* Usando sua variável dourada */
    font-size: 0.85rem;
    font-weight: 200;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
	-webkit-text-stroke: 0.7px #B89768;	
}

/* --- Estrutura do Carrossel de Depoimentos (Slider) --- */
.testimonials-carousel {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.testimonial-track-container {
    overflow: hidden;
    width: 100%;
}

.testimonial-track {
    list-style: none;
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 0;
    padding: 0;
}

/* Em telas de PC, mostra 3 cartões por vez. A largura é 33.333% menos a margem */
.testimonial-slide {
    flex: 0 0 calc(33.333% - 30px);
    margin: 0 15px;
    box-sizing: border-box;
}

/* --- Estilo dos Cartões de Depoimento (Fundo Branco) --- */
.testimonial-card {
    background: var(--text-white);
    border-radius: 4px; /* Bordas levemente arredondadas, igual ao print */
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Texto no topo, autor na base */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra para destacar no escuro */
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px); /* Efeito flutuante suave ao passar o mouse */
}

/* Texto do Depoimento */
.testimonial-text {
    font-size: 0.95rem;
    color: #444444; /* Cinza escuro para boa leitura */
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Nome do Autor */
.testimonial-author {
    font-size: 0.9rem;
    color: #222222;
    margin: 0;
}

/* Estilos de itálico e negrito do print */
.testimonial-author em strong {
    font-weight: 700;
}

/* --- Paginação (Bolinhas) --- */
.testimonial-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.testimonial-indicator {
    border: none;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4); /* Bolinha inativa mais clara */
    cursor: pointer;
    transition: background 0.3s ease;
}

.testimonial-indicator.current-indicator {
    background: var(--gold-accent); /* Bolinha ativa dourada, igual ao print */
}

/* --- Logotipo do Rodapé --- */
.footer-logo-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    padding-bottom: 20px;
}

/* =========================================
   Responsividade (Para Tablets e Celulares)
   ========================================= */
@media (max-width: 992px) {
    .testimonial-slide {
        flex: 0 0 calc(50% - 20px); /* 2 cartões por vez no tablet */
        margin: 0 10px;
    }
    .testimonials-section {
        padding: 70px 0 50px 0;
    }
    .light-heading {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .testimonial-slide {
        flex: 0 0 calc(100% - 20px); /* 1 cartão por vez no celular */
        margin: 0 10px;
    }
    .testimonial-card {
        padding: 30px;
    }
}

/* --- Setas do Carrossel de Depoimentos (Atualizado) --- */
.testimonials-carousel {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    padding: 0 50px;
}

.testimonial-btn {
    position: absolute;
    top: 50%; /* Centralizado exatamente no meio dos cartões */
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 2.5rem;
    color: #888888;
    cursor: pointer;
    z-index: 100; /* Z-index altíssimo para nada bloquear o clique */
    padding: 10px 20px; /* Aumenta a "área invisível" para facilitar o clique */
}

.testimonial-btn:hover {
    color: var(--gold-accent);
}

/* Garante que as setas fiquem nas pontas extremas */
.t-prev-btn { left: -10px; }
.t-next-btn { right: -10px; }

@media (max-width: 768px) {
    .testimonials-carousel {
        padding: 0 35px;
    }
    .testimonial-btn {
        font-size: 2rem;
        padding: 10px;
    }
    .t-prev-btn { left: -5px; }
    .t-next-btn { right: -5px; }
}

/* Ajuste no celular para as setas não esmagarem o layout */
@media (max-width: 768px) {
    .testimonials-carousel {
        padding: 0 35px; /* Reduz o espaço no celular */
    }
    .testimonial-btn {
        font-size: 2rem; /* Seta um pouco menor no celular */
    }
}


/* =========================================
   Seção Imagem Tela Cheia (Background Cover)
   ========================================= */
.fullscreen-image-break {
    width: 100%;
    height: 71vh; /* O segredo mágico: 100% da altura da Viewport (tela) */
    
    /* IMPORTANTE: Substitua pela foto em alta resolução da Dra. Vanessa. 
       Dê preferência para uma foto de meio corpo com um fundo neutro/escuro. */
    background-image: url('img/vanessa-fullscreen-bg.jpg'); 
    
    background-size: cover; /* Garante que a foto cubra o espaço sem distorcer */
    background-position: center; /* Foca do centro para cima (onde geralmente está o rosto) */
    background-repeat: no-repeat;
    
    position: relative; /* Para garantir que não se sobreponha a outras coisas indevidamente */
}



/* =========================================
   Responsividade (Imagem Tela Cheia)
   ========================================= */
@media (max-width: 768px) {
    .fullscreen-image-break {
        /* No celular, 100vh pode ficar muito longo dependendo da foto. 
           Se a foto ficar estranha, você pode diminuir para 70vh, por exemplo. */
        height: 80vh; 
        background-position: center center; /* Centraliza melhor em telas finas */
    }
}




/* =========================================
   Novo Estilo de Botão (Filled / Preenchido)
   ========================================= */
.btn-gold-filled {
    display: inline-block;
    background-color: var(--gold-accent); /* Usando sua variável dourada */
    color: var(--text-white);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 200;
	-webkit-text-stroke: 0.7px white;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 40px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efeito Hover: Fica mais claro igual ao menu */
.btn-gold-filled:hover {
    background-color: var(--gold-hover);
    transform: translateY(-2px); /* Efeito clássico de botão */
}

/* =========================================
   Responsividade (Para Celulares)
   ========================================= */
@media (max-width: 768px) {
    .text-center h2 {
        font-size: 1.8rem; /* Título menor no celular */
    }
}


/* =========================================
   Seção de Contato Split (Mapa + Info)
   ========================================= */
.contact-section-split {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
}

.contact-flex-container {
    display: flex;
    min-height: 600px; /* Altura controlada para não ficar gigante */
}

/* Lado do Mapa */
.contact-map-side {
    flex: 1.2; /* O mapa ocupa um pouco mais de espaço */
    background-color: #eee;
    filter: grayscale(100%) contrast(0.8); /* Opcional: deixa o mapa elegante em tons de cinza */
    transition: filter 0.5s ease;
}

.contact-map-side:hover {
    filter: grayscale(0%); /* Volta a cor original ao passar o mouse */
}

/* Lado das Informações */
.contact-info-side {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 80px 10%;
    background-color: #fff;
}

.info-content {
    max-width: 450px;
}

.info-block {
    margin-bottom: 35px;
}

.info-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold-accent);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.info-text {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.contact-actions {
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn-link-map {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 200;
    color: #222;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.btn-link-map:hover {
    color: var(--gold-accent);
}

/* Responsividade: Empilha no Celular */
@media (max-width: 992px) {
    .contact-flex-container {
        flex-direction: column-reverse; /* Informações em cima, mapa embaixo */
        min-height: auto;
    }
    
    .contact-map-side {
        height: 400px; /* Altura fixa para o mapa no mobile */
    }
    
    .contact-info-side {
        padding: 60px 5%;
    }
}



/* =========================================
   Rodapé Completo (Footer Grid)
   ========================================= */
.main-footer {
    background-color: #1a1a1a; /* Tom quase preto para contraste máximo com o dourado */
    color: #ffffff;
    padding: 80px 0 30px 0;
    font-family: var(--font-body);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Colunas com larguras variadas */
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
	-webkit-text-stroke: 0.7px;
    font-weight: 200;
    color: var(--gold-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    position: relative;
}

/* Pequena linha embaixo do título da coluna */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 30px;
    height: 1px;
    background-color: var(--gold-accent);
}

.footer-about p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #999;
    margin-top: 20px;
}

.footer-logo {
    max-width: 160px;
}

/* Estilo das listas de links */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--gold-accent);
    padding-left: 5px;
}

/* Redes Sociais */
.footer-social {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.footer-social a {
    color: #836147;
    background: rgba(255,255,255,0.05);
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: var(--gold-accent);
    color: #1a1a1a;
    transform: translateY(-3px);
}

/* Contato */
.footer-contact p {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact i {
    color: var(--gold-accent);
    margin-top: 3px;
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    text-align: center;
    font-size: 0.75rem;
    color: #666;
}

.footer-bottom strong {
    color: #999;
}

/* Responsividade */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2 colunas no tablet */
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
        text-align: center;
    }
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-social {
        justify-content: center;
    }
    .footer-contact p {
        justify-content: center;
    }
}


/* =========================================
   Responsividade (Para Celulares e Tablets)
   ========================================= */
@media (max-width: 992px) {
    .split-image, .split-text {
        flex: 1 1 100%; /* Faz cada metade ocupar 100% da tela (empilha) */
    }
    
    .split-image {
        min-height: 400px; /* Reduz a altura da imagem no celular */
    }

    .split-text {
        padding: 60px 20px;
    }

    .text-content h2 {
        font-size: 2.2rem;
    }
}



/* Gradiente escuro focado na esquerda para o texto branco não sumir na foto */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 12, 10, 0.85) 0%, rgba(15, 12, 10, 0.3) 50%, rgba(15, 12, 10, 0.1) 100%);
    z-index: 1;
}

.hero-content-left {
    position: relative;
    z-index: 2; /* Fica acima do overlay */
    max-width: 600px; /* Mantém o texto contido na esquerda */
    margin-left: 10%; /* Empurra um pouco da borda esquerda */
}

.overline-text {
    display: block;
    font-family: var(--font-heading);
    color: var(--gold-accent);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
	-webkit-text-stroke: 0.7px #B89768;	
}

.hero-content-left h1 {
    font-size: 3.5rem;
    font-weight: 300; /* Peso fino e elegante igual ao do print */
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-content-left p {
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.5;
	letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-texting) !important;
}

/* A faixa dourada na base da tela */
.gold-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--gold-accent);
    z-index: 10;
}

/* =========================================
   WhatsApp Flutuante
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* =========================================
   Sistema Universal de Parallax
   ========================================= */
.parallax-element {
    transition: transform 0.1s ease-out; /* Mantém a fluidez e evita trepidação */
    will-change: transform; /* Avisa o navegador para otimizar o movimento */
}

.lit-logo {
	color: #b89768;
}



/* =========================================
   RECUPERAÇÃO TOTAL - DESKTOP (PC)
   ========================================= */
@media (min-width: 992px) {

    /* 1. HERO: Coloca o texto na esquerda e deixa a foto dela aparecer */
    .hero-fullscreen {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 10% !important;
    }
    .hero-content-left {
        max-width: 600px !important;
        margin: 0 !important;
    }
    .hero-title { font-size: 3.5rem !important;
	font-family: var(--font-heading);
    font-weight: 400; /* Começamos com a fina */
    
    /* Este truque adiciona 0.3px de espessura "fantasma" ao redor da letra */
    text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
    
    /* Alternativa para navegadores modernos (engrossa a linha) */
    -webkit-text-stroke: 1.8px white; 
    
    font-size: 3.5rem;
    line-height: 1.1;
	}

    /* 2. SEÇÕES DIVIDIDAS: Força Lado a Lado (Missão e Sobre) */
    .split-section, .split-section-dark {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-height: 600px !important;
    }
    .split-image, .split-image-dark,
    .split-text, .split-text-dark {
        flex: 1 1 50% !important;
        width: 50% !important;
    }

    /* 3. SINTOMAS: Organiza em 3 Colunas (Ícone | Texto | Imagem) */
    .symptom-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .symptom-icon-box { flex: 0 0 15% !important; display: flex !important; }
    .symptom-text-box { flex: 0 0 35% !important; text-align: left !important; }
    .symptom-image-box { flex: 0 0 50% !important; }

    /* 4. FOOTER: Volta para colunas */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important;
    }
}

/* =========================================
   PROTEÇÃO MOBILE (Garante que nada mude no celular)
   ========================================= */
@media (max-width: 991px) {
    .split-section, .split-section-dark, .symptom-row {
        flex-direction: column !important;
    }
    .split-image, .split-image-dark, .split-text, .split-text-dark,
    .symptom-icon-box, .symptom-text-box, .symptom-image-box {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

.leve-bold {
	-webkit-text-stroke: 0.7px white;
	font-weight: 400;
	
}

.leve-bold-black {
	-webkit-text-stroke: 0.7px #222222;	
}

.leve-bold-gold {
	-webkit-text-stroke: 0.7px #B89768;	
}

.leve-bold-gray {
	-webkit-text-stroke: 0.7px #666666;
	font-weight: 100;
	
}

#666666