/*
 * Arquivo: style.css
 * Estilos customizados para o layout do Dr. Anderson Dietrich
 */

 /* 1. RESET/NORMALIZE BÁSICO */
* {
    margin: 0;           /* Remove a margem padrão de todos os elementos */
    padding: 0;          /* Remove o padding padrão de todos os elementos */
    box-sizing: border-box; /* Define o modelo de caixa para incluir padding e borda na largura/altura (muito importante!) */
}

/* 2. REMOÇÃO DA ROLAGEM LATERAL (E GARANTIA DE ALTURA MÍNIMA) */
html, body {
    width: 100%;         /* Garante que ocupe 100% da largura da viewport */
    height: 100%;        /* Garante que ocupe 100% da altura da viewport */
    overflow-x: hidden;  /* **ESTE É O MAIS IMPORTANTE**: Esconde qualquer conteúdo que tente causar rolagem horizontal */
}

/* Opcional: Garante que o BODY comece sem espaços ao redor */
body {
    line-height: 1.5; /* Boa prática para tipografia */
    -webkit-font-smoothing: antialiased; /* Para melhor renderização de fontes */
}

/* Opcional: Remove estilos padrão de listas */
ul, ol {
    list-style: none;
}

/* Variáveis de Cores (para facilitar a manutenção) */
:root {
    --primary-blue: #004d99; /* Azul Principal da Marca (similar ao layout) */
    --secondary-green: #38b000; /* Verde de Destaque para Botões */
    --light-gray: #f8f9fa; /* Fundo do Footer/Navbar */
    --text-color: #333333;
}

/* Base e Tipografia */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: #ffffff; /* Fundo branco para as seções sem cor */
}

.custom-container {
    /* Define uma largura máxima para o conteúdo central, mantendo as margens do Bootstrap */
    max-width: 1200px;
}

.py-5{
    padding-top: 4rem!important;padding-bottom: 4rem!important;
}

.section-title {
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
    color: inherit; /* Herdará a cor do container pai (azul ou preto) */
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    font-weight: 800;
    margin: 0px 0 30px 0;
}

/* 1. Navbar */
.custom-navbar {
    border-bottom: 3px solid var(--secondary-green); /* Linha verde no rodapé da navbar */
}

.logo-img {
    max-height: 95px; /* Tamanho da logo */
}

.nav-link {
    font-weight: 800;
    color: #035e9a !important;
    margin-left: 15px;
}

.nav-link:hover {
    color: var(--primary-blue) !important;
}

.btn-outline-primary {
    color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

/* 2. Seção Sobre (Azul) */
.bg-primary-blue {
    background-color: #464f98;
}

.profile-img {
    /* Garante que a imagem se pareça com a do design (sem o fundo da foto) */
    border-radius: 5px;
    object-fit: cover;
    height: 100%; /* Para garantir que ocupe o espaço vertical */
    max-width: 100%;
}

/* 3. Seção Experiência Digital (Lista de Passos) */
.digital-experience-list {
    list-style: none;
    padding-left: 0;
}

.digital-experience-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.step-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #666;
    margin-right: 15px;
    line-height: 1;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #666;
    margin-bottom: 20px;
    text-transform: uppercase;
    width: 320px;
}

.step-content p {
    font-size: 1rem;
    color: #666;
    margin-top: -10px;
}

.digital-device-img {
    /* Pode ser necessário ajustar a altura ou largura para o alinhamento da imagem */
    max-width: 90%;
}

.cta-box {
    background-color: #464f98;
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 16px;
}

/* 4. Seção Telemedicina */
.telemedicine-img {
    border-radius: 5px;
    max-width: 90%;
}

.btn-success {
    background-color: #00bf63 !important;
    border-color: #00bf63;
    font-weight: 700;
    padding: 12px 75px;
    font-size: 1.1rem;
    border-radius: 50px; /* Botão arredondado */
    letter-spacing: 0.1rem;
}

.btn-success:hover {
    background-color: #3bd58b !important;
    border-color: #3bd58b !important;
}

/* 5. Seção Consulta Online (Passos Detalhados) */
.sub-title-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.step-item {
    display: flex;
    align-items: flex-start;
}

.step-number-lg {
    font-size: 3rem;
    font-weight: 700;
    color: #009b9c;
    margin-right: 20px;
    line-height: 1;
    min-width: 60px; /* Garante que os números 01 a 05 fiquem alinhados */
    text-align: right;
}

.step-title-lg {
    font-size: 1.3rem;
    font-weight: 700;
    color: #009b9c;
    margin-bottom: 5px;
}

.step-content-lg p {
    color: #666;
    width: 90%;
    text-align: justify;
}

/* 6. Seção História de Vida */
/* Já usa o bg-primary-blue e text-white */

/* 7. Footer */
.logo-img-footer {
    max-height: 50px;
}

.footer-text {
    font-size: 0.8rem;
}

#sobre p{
    font-size: 16px;
    text-align: justify;
}

#sobre p.crm{
    font-size: 14px;
    text-align: justify;
}

.color-deep-aquamarine{
    color: #009b9c!important;
}

.color-vivid-blue{
    color: #005c9a!important;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: justify;
}

.linha-gradiente {
    /* Define o elemento como uma linha de 3px de altura */
    height: 3px;
    width: 100%; /* Ocupa a largura total do contêiner */
    
    /* Aplica o gradiente horizontal (esquerda para direita) */
    background: linear-gradient(
        to right,
        /* 1. Teal/Ciano (esquerda) */
        #00a89d 0%, 
        /* 2. Azul Escuro/Royal (centro) */
        #004d9c 50%, 
        /* 3. Roxo/Magenta (direita) */
        #c8509c 100%
    );
    
    /* Para incluir a variação de luminosidade sutil de cima para baixo, você pode 
       combinar dois gradientes, sendo o superior mais sutilmente esmaecido. */
    /* Exemplo com dois gradientes (opcional, para maior fidelidade): */
    /* background: 
        linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%),
        linear-gradient(to right, #00a89d 0%, #004d9c 50%, #c8509c 100%); */
}

.elemento-com-borda-gradiente {
    /* 1. Removido o padding-bottom daqui (será adicionado abaixo) */
    
    /* Garante que o gradiente ocupe a largura total do elemento */
    width: 100%; 
    
    /* 💥 ESSENCIAL: Zera o padding lateral para que o background 100% vá de ponta a ponta. */
    padding-left: 0;
    padding-right: 0;
    
    /* Recomenda-se adicionar o espaçamento interno (padding-bottom) aqui */
    padding-bottom: 5px; 

    /* Define o background (gradiente) */
    background: 
        linear-gradient(
            to right,
            #00a89d 0%, 
            #004d9c 50%, 
            #c8509c 100%
        ) 
        bottom left 
        no-repeat; 
    
    /* Ajustei a altura de 5px (seu código original) para 3px, conforme o pedido inicial */
    background-size: 100% 7px;
}

.cta-box p{text-align: center;}

        .btn-lattes {
            background-color: #0e707e; /* Código Hex aproximado da imagem */
            border-color: #0e707e;
            color: white;
        }
        .btn-lattes:hover {
            background-color: #0a5762; /* Um pouco mais escuro ao passar o mouse */
            color: white;
            border-color: #0a5762;
        }

        /* Cor dos botões LinkedIn e Europass (Azul) */
        .btn-custom-blue {
            background-color: #0b5ed7; /* Azul padrão/vibrante */
            border-color: #0b5ed7;
            color: white;
        }
        .btn-custom-blue:hover {
            background-color: #0a58ca;
            color: white;
            border-color: #0a58ca;
        }

        /* Ajuste fino para garantir que fiquem iguais à imagem */
        .btn-custom {
            font-size: 0.95rem;     /* Tamanho da fonte */
            padding: 10px 24px;     /* Espaçamento interno (Cima/Baixo Esq/Dir) */
            font-weight: 500;       /* Peso da fonte */
            text-decoration: none;  /* Remove sublinhado se for link */
        }

/* Estilização e Posicionamento */
#btnVoltarAoTopo {
    display: none; /* Esconde o botão por padrão (será exibido pelo JavaScript) */
    position: fixed; /* Fixa o botão na tela, ele não rola com o conteúdo */
    bottom: 20px; /* 20px de distância da parte inferior */
    right: 30px; /* 30px de distância da lateral direita */
    z-index: 99; /* Garante que fique acima de outros elementos */
    border: none;
    outline: none;
    background-color: #555; /* Cor de fundo */
    color: white; /* Cor do texto/ícone */
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
    transition: background-color 0.3s; /* Adiciona uma transição suave para o hover */
}

#btnVoltarAoTopo:hover {
    background-color: #333;
}


/* Responsividade (para telas menores) */
@media (max-width: 991.98px) {
    .profile-img {
        max-height: 400px; /* Ajusta a altura da imagem em telas menores */
    }

    .step-number-lg {
        font-size: 2.5rem;
    }

    .btn-success {
        padding: 12px 65px;
    }

    .step-title {
        width: 300px;
    }


}