/* ==========================================
   VARIÁVEIS DE CORES (Baseadas no seu Logo)
   ========================================== */
   :root {
    --primary-color: #1a2a4a;   /* Azul Marinho Escuro */
    --secondary-color: #00a884; /* Verde Esmeralda */
    --text-color: #333333;      /* Cinza Escuro para leitura */
    --light-bg: #f8fafc;        /* Fundo claro premium */
    --white: #ffffff;
}

/* Configurações Gerais */
html {
    scroll-behavior: smooth; /* Faz o navegador deslizar suavemente ao clicar nos links */
}
* {
    margin: 0;
    padding: 0;
    box-shadow: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
}

/* 1. MENU DE NAVEGAÇÃO */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;              /* Removemos o padding vertical (top/bottom) */
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 100px;             /* Definimos uma altura fixa e confortável para a barra */
}

.logo img {
    height: 1000px;         /* Aumentamos consideravelmente a altura */
    width: auto;          /* Mantém a proporção do logo */
    max-width: 250px;     /* Garante que ele não ocupe o menu inteiro no celular */
    display: block;
    padding: 20px 0;      /* Dá um respiro em cima e embaixo do logo */
    object-fit: contain}

    nav a {
        margin-left: 25px;
        text-decoration: none;
        color: var(--primary-color);
        font-weight: 600;
        position: relative;
        padding-bottom: 5px;
        transition: color 0.3s ease;
    }
    nav a:hover {
        color: var(--secondary-color);
    }
    nav a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--secondary-color);
        transition: width 0.3s ease;
    }
    
    nav a:hover::after {
        width: 100%; /* A linha expande até cobrir o texto */
    }
/* 2. SEÇÃO PRINCIPAL (HERO) */
.hero {
    padding: 80px 8%;
    background: linear-gradient(135deg, #f4f7f6 0%, #e9eff1 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 60vh;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero h1 {
    font-size: 44px;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hero p {
    font-size: 18px;
    color: #555;
    margin-bottom: 30px;
}

/* Elemento visual do lado direito da Hero */
.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.medical-graphic {
    width: 340px;               /* Ajustamos ligeiramente o tamanho */
    height: 340px;
    background: var(--primary-color);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--white);
    box-shadow: 0 20px 40px rgba(26, 42, 74, 0.15);
    
    /* A animação agora roda APENAS no fundo (background/bordas), sem mexer a estrutura inteira */
    animation: morph 6s ease-in-out infinite alternate;
    
    padding: 35px; 
    box-sizing: border-box; 
    position: relative; 
    overflow: hidden;           /* Garante que nada saia da área da bolha */
}

.medical-graphic i {
    font-size: 45px;            /* Reduzido um pouco para dar mais destaque ao texto */
    color: var(--secondary-color);
    margin-bottom: 20px;
    z-index: 2;
}

/* 🎯 CORRIGIDO: Letra Moderna, Premium e TOTALMENTE ESTÁTICA */
.medical-graphic span {
    /* Fonte moderna, limpa e de alta legibilidade (padrão Apple/Vercel) */
    font-family: 'Inter', 'Montserrat', -apple-system, sans-serif; 
    
    font-weight: 700;           /* Letra mais marcante */
    font-size: 20px;            /* Tamanho ideal para leitura */
    text-align: center;         
    max-width: 250px;           
    line-height: 1.4;           
    color: #FFFFFF;
    
    /* Caixa alta sutil com bom espaçamento traz o ar "Premium Minimalista" */
    text-transform: uppercase;  
    letter-spacing: 0.5px;     
    
    /* Força o texto a ignorar qualquer balanço ou rotação do elemento pai */
    transform: none !important; 
    display: block;
    z-index: 2;                 /* Fica firmemente acima do fundo */
}

/* 🔄 CORRIGIDO: Apenas as bordas mudam de forma, o bloco NÃO se desloca mais na tela */
@keyframes morph {
    0% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    }
    50% {
        border-radius: 45% 55% 60% 40% / 40% 45% 55% 60%;
    }
    100% { 
        border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%; 
    }
}

/* Botão com ícone do WhatsApp */

.btn-cta {
    /* ... mantenha as suas configurações atuais de cor, fundo e padding daqui ... */

    text-decoration: none !important; /* 🎯 Remove a linha de sublinhado definitivamente */
    display: inline-flex;             /* Alinha o ícone da cartinha com o texto */
    align-items: center;
    gap: 10px;                        /* Dá um espaço elegante entre o ícone e o texto */
}

/* ==========================================
   ESTILIZAÇÃO DA SEÇÃO SOBRE NÓS
   ========================================== */
.about-section {
    padding: 90px 8%;
    background-color: var(--light-bg);
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-text {
    flex: 1.2;
}

.about-text .subtitle {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.about-text h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.about-text p {
    color: #666;
    margin-bottom: 15px;
    font-size: 16px;
}

.about-stats {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-box {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border-left: 5px solid var(--secondary-color);
}

.stat-box h3 {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-box p {
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

/* Responsividade Básica (Para funcionar bem em telas menores) */
@media (max-width: 968px) {
    .hero, .about-container {
        flex-direction: column;
        text-align: center;
    }
    .hero-content, .about-text {
        max-width: 100%;
    }
    .btn-cta {
        align-self: center;
    }
    .about-stats {
        width: 100%;
    }
}
.btn-cta {
    align-self: flex-start;
    padding: 14px 28px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background 0.3s ease;
}

.btn-cta:hover {
    background: var(--secondary-color);
}

/* 3. SEÇÃO DE SERVIÇOS */
.services {
    padding: 80px 8%;
    text-align: center;
    background-color: var(--white);
}

.services h2 {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.services > p {
    color: #666;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* RESET E PADRONIZAÇÃO DE TODOS OS CARDS */
.service-card {
    padding: 40px 30px;
    background: var(--light-bg) !important; 
    border-top: 4px solid var(--primary-color) !important; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    text-align: left;
    
    /* 🚀 NOVO: Ativa a aceleração de hardware do Mac/Navegador para evitar "pontos cegos" nas quinas */
    will-change: transform, box-shadow;
    
    /* MODIFICADO: Transição refinada e separada para dar consistência total ao movimento */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.3s ease !important; 
    
    /* 🚀 NOVO: Estabiliza a física inicial do elemento em telas Retina/Monitores de alta resolução */
    transform: perspective(1px) translateZ(0) translateY(0); 
    backface-visibility: hidden;
}

/* ANIMAÇÃO AO PASSAR O MOUSE - VALE PARA OS 4 IGUAIS */
.services-grid .service-card:hover {
    /* 🎯 AJUSTADO: Reduzimos a subida de -8px para -5px (evita que o card fuja do mouse nas pontas) 
       e adicionamos um leve ganho de escala (1.01) para expandir a área invisível de contato */
    transform: translateY(-5px) scale(1.01) !important; 
    
    border-top-color: var(--secondary-color) !important; 
    
    /* MODIFICADO: Sombra levemente mais projetada para manter o mesmo efeito óptico de profundidade */
    box-shadow: 0 14px 28px rgba(26, 42, 74, 0.1) !important; 
}

.service-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 20px;
}

.service-card p {
    font-size: 15px;
    color: #555;
}
/* 4. CONTATO E RODAPÉ */
.contact {
    padding: 60px 8%;
    background: var(--primary-color);
    color: var(--white);
    text-align: center;
}

.contact h2 {
    margin-bottom: 15px;
    font-size: 30px;
}

.contact p {
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact a {
    color: var(--secondary-color);
    font-weight: bold;
    text-decoration: none;
}

.contact a:hover {
    text-decoration: underline;
}

.footer-credits {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
    opacity: 0.6;
}
section {
    /* Como nosso menu tem 100px de altura, colocamos um recuo de 110px 
       para garantir que o título fique visível e com um respiro elegante */
    scroll-margin-top: 110px; 
}
.nav-link {
    position: relative;
    text-decoration: none;
    color: #333; /* Cor padrão do seu texto */
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Criando a linha invisível embaixo de cada link */
.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* Começa com tamanho zero (invisível) */
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #007bff; /* COR DA LINHA: Coloque a cor principal da VITAY aqui */
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

/* Quando o link estiver ativo, a linha estica e aparece */
.nav-link.active::after {
    transform: scaleX(1); /* Ganha tamanho total */
    transform-origin: bottom left;
}

/* Opcional: Ativa a linha também quando o usuário passa o mouse */
.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}