/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS (Afeta o site todo)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #fcfcfc;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Componentes reutilizáveis */
.container-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 20px;
}

.coluna-imagem, .coluna-texto {
    flex: 1;
}

.botao-agenda {
    display: inline-block;
    background-color: #27ae60;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
    transition: transform 0.2s, background-color 0.2s;
}

.botao-agenda:hover {
    background-color: #219653;
    transform: translateY(-2px);
}


/* ==========================================================================
   2. ESTRUTURA FIXA: MENU PRINCIPAL & RODAPÉ (Injetados via PHP)
   ========================================================================== */

/* Menu */
.menu-principal {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container-menu {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo a {
    font-size: 24px;
    font-weight: bold;
    color: #2c5e43;
    text-decoration: none;
}

.navegacao ul {
    display: flex;
    list-style: none;
}

.navegacao ul li {
    margin-left: 20px;
}

.navegacao ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s;
}

.navegacao ul li a:hover {
    color: #2c5e43;
}

/* Rodapé */
.rodape {
    background-color: #1a3325;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

.container-rodape p {
    margin: 5px 0;
    opacity: 0.8;
}

.creditos {
    margin-top: 15px !important;
    font-size: 13px;
    opacity: 0.7;
}

.creditos strong {
    color: #fff;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   3. ESTILOS DA PÁGINA: HOME (index.php) - BANNER RESPONSIVO SEM CORTES
   ========================================================================== */

.banner-slider {
    width: 100%;
    /* O SEGREDO: Em vez de travar 500px de altura, usamos a proporção real do seu banner (1920x500) */
    aspect-ratio: 1920 / 500; 
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
}

.slider-container {
    display: grid;
    grid-template-areas: "sobrepor";
    width: 100%;
    height: 100%;
}

.slide {
    grid-area: sobrepor;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeSlider 15s infinite ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
    /* Mudamos para contain: a imagem NUNCA mais será cortada pelo navegador */
    object-fit: contain; 
    display: block;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }

@keyframes fadeSlider {
    0%, 33.33% { opacity: 1; z-index: 2; }
    36.66%, 100% { opacity: 0; z-index: 1; }
}

/* Perfil Biografia */
.registro {
    display: inline-block;
    background: #e2ede7;
    color: #2c5e43;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.destaque {
    font-size: 18px;
    font-weight: 500;
    color: #444;
}

/* Cards de Atuação */
.bloco-atuacao {
    background-color: #f9f9f9;
    padding: 60px 20px;
}

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

.titulo-secao {
    text-align: center;
    margin-bottom: 40px;
}

.titulo-secao h2 {
    color: #2c5e43;
    font-size: 30px;
}

.grid-tres-colunas {
    display: flex;
    gap: 30px;
}

/* --- Cards de Atuação: visual elevado, ícone em selo circular e faixa superior --- */
.card-atuacao {
    flex: 1;
    background: #ffffff;
    padding: 40px 30px;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26, 51, 37, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-atuacao::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1a3325, #c5a880);
}

.card-atuacao:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(26, 51, 37, 0.12);
}

.card-atuacao .icone {
    font-size: 40px;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f2f7f4, #e2ede7);
    border-radius: 50%;
}

.card-atuacao h3 {
    color: #1a3325;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

/* Currículo e Especializações */
.bloco-curriculo {
    background: #fff;
    padding: 20px 0;
}

.alinhamento-topo {
    align-items: flex-start !important;
}

.metade-coluna {
    flex: 1;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Faixa verde de cabeçalho, texto dourado em caixa alta */
.metade-coluna h3 {
    background: linear-gradient(135deg, #1a3325 0%, #2c5e43 100%);
    color: #e6a94e;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 20px 30px;
    border-left: none;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(26, 51, 37, 0.15);
}

/* Corpo do card em grafite escuro */
.lista-curriculo {
    list-style: none;
    background: #1e1e1e;
    border-radius: 10px;
    padding: 28px 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.lista-curriculo li {
    position: relative;
    padding: 10px 0 10px 36px;
    margin-bottom: 0;
    color: #f5f5f5;
    font-size: 16px;
    border-bottom: none;
}

.lista-curriculo li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #e6a94e;
    border-bottom: 2px solid #e6a94e;
    transform: rotate(-45deg);
}

.bloco-agendamento {
    background-color: #f2f7f4; 
}


/* ==========================================================================
   4. ESTILOS DA PÁGINA: EDUCAÇÃO NUTRICIONAL (educacao-nutricional.html)
   ========================================================================== */
/* Escreva aqui as regras exclusivas da página de cursos e e-books */


/* ==========================================================================
   5. ESTILOS DA PÁGINA: VÍDEOS (videos.html)
   ========================================================================== */
/* Escreva aqui as regras exclusivas da galeria de vídeos */


/* ==========================================================================
   6. ESTILOS DA PÁGINA: CONTATO (contato.html)
   ========================================================================== */
/* Escreva aqui as regras exclusivas da tela de informações de contato */


/* ==========================================================================
   7. REGRAS DE RESPONSIVIDADE (Media Queries para Celular) - VERSÃO SÊNIOR
   ========================================================================== */
@media (max-width: 768px) {

    /* OPÇÃO 2: Esconde o banner completamente no celular para evitar acúmulo de imagens */
    .banner-slider {
        display: none !important;
    }

    /* Mantém o menu mobile organizado */
    .container-menu {
        flex-direction: column;
        gap: 10px;
        padding: 12px 10px;
    }
    .navegacao ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .navegacao ul li a {
        font-size: 13px;
        padding: 6px 10px;
        background-color: #f5f9f6;
        border-radius: 6px;
        color: #2c5e43;
    }
    
    /* ---- AJUSTE DAS ÁREAS DE ATUAÇÃO NO MOBILE ---- */
    .grid-tres-colunas {
        flex-direction: column !important; /* Força os cards a ficarem um embaixo do outro */
        gap: 20px !important;              /* Cria um espaçamento elegante entre cada card */
    }

    .card-atuacao {
        width: 100%; /* Faz cada card ocupar a largura total disponível na tela do celular */
    }

    /* Ajuste da Biografia no Mobile (Sobe para o topo do celular) */
    .container-conteudo {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 30px 15px;
    }
    
    .coluna-imagem img {
        max-width: 260px;
        margin: 0 auto;
    }

    /* Ajuste dos blocos de currículo no mobile: menos padding interno */
    .metade-coluna h3 {
        padding: 20px 22px;
        font-size: 20px;
    }

    .lista-curriculo {
        padding: 15px 22px 20px 22px;
    }
}