/*
 * style.css
 * Estilos personalizados baseados no design do site Render
 */
/* Variáveis para cores */


/* Aplica a fonte Roboto Mono a todos os títulos e subtítulos de seção */
h1, h2, h3, .render-title, .render-subtitle {
    font-family: 'Roboto Mono', monospace;
}
:root {
    --primary-color: #7B35F9; /* Roxo vibrante */
    --hover-color: #FFFFFF;  /* Branco para o hover */
    --text-hover-color: #0d0d0d; /* Texto preto no hover */
}
/* Cor de Fundo Principal */
body {
    background-color: #0d0d0d !important; /* Um preto muito escuro similar ao Render */
    color: #f0f0f0; /* Branco suave para o texto principal */
}

/* Estilo do Título Principal (H1) */
.render-title {
    color: #ffffff; /* Branco puro para o título de destaque */
    font-size: 3.5rem; /* Tamanho grande */
    line-height: 1.1;
}

/* Estilo do Subtítulo (P lead) */
.render-subtitle {
    color: #bdbdbd; /* Um cinza claro para o subtítulo */
    font-weight: 400;
}

/* Estilo do Texto de Descrição */
.render-description {
    color: #9c9c9c; /* Cinza mais escuro para o texto de detalhes */
    font-size: 1.1rem;
}

/* Imagem de Perfil Redonda (Redimensionável) */
.profile-pic-container {
    width: 200px; /* Largura da foto */
    height: 200px; /* Altura da foto */
    overflow: hidden;
    border: 4px solid #4a148c; /* Borda sutil de destaque roxo */
    
    /* ****************************************************** */
    /* *** AJUSTE PRINCIPAL: Use 50% para borda redonda *** */
    /* ****************************************************** */
    border-radius: 50%; 
    
    box-shadow: 0 0 15px rgba(100, 0, 255, 0.5); /* Sombra roxa para dar profundidade */
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o container sem distorcer */
}

/* Botão Primário (Similar ao 'Get Started for Free' do Render - Roxo de Destaque) */
.render-btn-primary {
    /* Define o contexto para o pseudo-elemento */
    position: relative;
    overflow: hidden; 
    z-index: 1; /* Garante que o texto fique acima do pseudo-elemento */

    /* Estilos fixos do botão */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--hover-color); /* Cor do texto inicial: Branco */
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out; /* Transição apenas para a cor do texto */
}

/* Pseudo-elemento para o Efeito de Preenchimento */
.render-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hover-color); /* Cor de preenchimento: Branco */
    
    /* Inicialmente, o elemento tem largura zero na horizontal (scaleX(0)) */
    transform: scaleX(0); 
    transform-origin: left; /* Garante que o crescimento comece pela esquerda */
    transition: transform 0.4s ease-in-out; 
    z-index: -1; /* Coloca o pseudo-elemento atrás do texto do botão */
}

/* Estado de Hover (Mouse Over) */
.render-btn-primary:hover {
    /* Cor do texto muda para preto */
    color: var(--text-hover-color); 
    
    /* Remove a cor de fundo original para não competir com o pseudo-elemento */
    background-color: transparent; 
    border-color: var(--primary-color); /* Mantém a borda original (opcional) */
}

/* Animação de Entrada: Ao passar o mouse, o pseudo-elemento preenche (scaleX(1)) */
.render-btn-primary:hover::before {
    transform: scaleX(1); /* Expande para cobrir 100% da largura */
}

/* Animação de Saída: O pseudo-elemento volta a ter largura zero
   (Isso é tratado automaticamente pelo `transition` e a remoção do `:hover`) */
/* Botão Secundário (Similar ao 'Contact Sales' do Render - Borda e Fundo Transparente) */
.render-btn-secondary {
    /* Define o contexto para o pseudo-elemento */
    position: relative;
    overflow: hidden; 
    z-index: 1; /* Garante que o texto fique acima do pseudo-elemento */

    /* Estilos fixos do botão */
    background-color: white;
    border-color: var(--primary-color);
    color: var(--text-hover-color); /* Cor do texto inicial: Branco */
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out; /* Transição apenas para a cor do texto */
}


/* Pseudo-elemento para o Efeito de Preenchimento */
.render-btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color); /* Cor de preenchimento: Branco */
    
    /* Inicialmente, o elemento tem largura zero na horizontal (scaleX(0)) */
    transform: scaleX(0); 
    transform-origin: left; /* Garante que o crescimento comece pela esquerda */
    transition: transform 0.4s ease-in-out; 
    z-index: -1; /* Coloca o pseudo-elemento atrás do texto do botão */
}


.render-btn-secondary:hover {
    /* Cor do texto muda para preto */
    color: var(--hover-color); 
    
    /* Remove a cor de fundo original para não competir com o pseudo-elemento */
    background-color: transparent; 
    border-color: var(--primary-color); /* Mantém a borda original (opcional) */
}


/* Animação de Entrada: Ao passar o mouse, o pseudo-elemento preenche (scaleX(1)) */
.render-btn-secondary:hover::before {
    transform: scaleX(1); /* Expande para cobrir 100% da largura */
}

/* Responsividade do Título */
@media (max-width: 992px) {
    .render-title {
        font-size: 2.5rem;
    }
}
@media (max-width: 767px) {
    .render-title {
        text-align: center;
        margin-top: 1rem;
    }
    .profile-pic-container {
        width: 150px;
        height: 150px;
    }
    .render-subtitle, .render-description {
        text-align: center;
    }
    .d-flex {
        justify-content: center !important;
    }
}






/*
 * Estilos para as Tags/Badges de Habilidades
 */

/* Tags de Hard Skills (Fundo escuro, borda discreta) */
.render-skill-tag {
    display: inline-block;
    background-color: #212121; /* Fundo cinza escuro */
    color: #bdbdbd; /* Texto cinza claro */
    border: 1px solid #4a148c; /* Borda roxa sutil (a cor de destaque) */
    padding: 0.4rem 0.8rem;
    margin: 0 0.5rem 0.5rem 0;
    border-radius: 4px; /* Cantos levemente arredondados */
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.render-skill-tag:hover {
    background-color: #7B35F9; /* Fundo roxo vibrante no hover */
    color: #ffffff;
    cursor: default;
}

/* Tags de Soft Skills (Mais discreto, sem borda de destaque) */
.render-softskill-tag {
    display: inline-block;
    background-color: #333333; /* Fundo mais escuro */
    color: #ffffff; 
    padding: 0.4rem 0.8rem;
    margin: 0 0.5rem 0.5rem 0;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s;
}

.render-softskill-tag:hover {
    background-color: #555555; /* Escurece um pouco no hover */
    cursor: default;
}

/* Garante que o título da seção mantenha o estilo Render */
.about-section h2 {
    border-bottom: 2px solid #7B35F9; /* Linha de destaque roxa sob o título */
    padding-bottom: 0.5rem;
    display: inline-block; /* Ajusta a largura da linha à palavra */
}





/* * Estilos para a Seção de Experiências Profissionais
 */

/* Container da Linha do Tempo (Eixo Central) */
.timeline-container {
    position: relative;
    padding-left: 20px; /* Espaço para a linha vertical */
}

/* Linha Vertical da Timeline */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 2px;
    height: 100%;
    background-color: #333; /* Cor da linha discreta */
    z-index: 0;
}

/* Item Individual da Timeline */
.timeline-item {
    position: relative;
    padding-left: 20px;
}

/* Ponto de Destaque na Linha (O Círculo) */
.timeline-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #7B35F9; /* Roxo de Destaque */
    border-radius: 50%;
    border: 3px solid #0d0d0d; /* Borda escura para destacá-lo do fundo */
    z-index: 1;
}

/* Estilo do Card de Conteúdo */
.render-card {
    background-color: #1a1a1a; /* Fundo do card mais claro que o body */
    border: 1px solid #333;
    border-radius: 8px;
    transition: all 0.3s;
}

.render-card:hover {
    border-color: #7B35F9; /* Borda roxa no hover */
    box-shadow: 0 0 15px rgba(123, 53, 249, 0.2); /* Sombra suave de destaque */
}

/* Estilo da Logo da Empresa */
.company-logo {
    max-width: 100px; /* Tamanho máximo da logo */
    height: auto;
    border-radius: 4px;
    opacity: 0.8;
}

/* Subtítulos e Datas */
.render-subtitle {
    color: #ffffff; /* Título do cargo em branco */
}

.render-date-location {
    color: #bdbdbd; /* Data e local em cinza claro */
    font-size: 0.9rem;
}

.render-description-sm {
    color: #9c9c9c;
    font-size: 0.95rem;
}

/* Badge de Tecnologia (Para a lista de tecnologias-chave) */
.render-tech-badge {
    background-color: #333; /* Fundo cinza escuro */
    color: #bdbdbd;
    font-weight: 400;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #4a148c;
}

/* Garante que o título da seção mantenha o estilo Render */
.experience-section h2 {
    border-bottom: 2px solid #7B35F9; /* Linha de destaque roxa sob o título */
    padding-bottom: 0.5rem;
    display: inline-block; /* Ajusta a largura da linha à palavra */
}

/* Responsividade: Em telas pequenas, remove a linha do tempo (opcional) */
@media (max-width: 767px) {
    .timeline-container::before, .timeline-dot {
        display: none;
    }
    .timeline-item {
        padding-left: 0;
    }
    .company-logo {
        max-width: 80px; /* Reduz o tamanho da logo em mobile */
    }
}







/*
 * Estilos para a Seção de Projetos
 */

/* Card de Projeto (Similar ao card de experiência, mas com foco maior) */
.render-project-card {
    background-color: #1a1a1a; 
    border: 1px solid #333;
    border-radius: 8px;
    height: 100%; /* Garante que os cards na mesma linha tenham a mesma altura */
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.render-project-card:hover {
    border-color: #7B35F9; /* Roxo de Destaque no hover */
    box-shadow: 0 0 20px rgba(123, 53, 249, 0.3); /* Sombra mais intensa */
    transform: translateY(-5px); /* Efeito sutil de levantar */
}

/* Container da Imagem do Projeto */
.project-image-placeholder {
    max-height: 250px; /* Altura máxima para a imagem */
    overflow: hidden;
    border-radius: 4px;
    background-color: #0d0d0d; /* Fundo escuro para a área da imagem */
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.render-project-card:hover .project-image {
    opacity: 1; /* Imagem fica totalmente visível no hover */
}

/* Botão de Ação do Projeto (Principal - Código) */
.render-btn-project {
    color: #bdbdbd;
    border-color: #555;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.render-btn-project:hover {
    color: #ffffff;
    background-color: #555;
    border-color: #555;
}

/* Botão de Ação do Projeto (Secundário - Demo/Detalhes) */
.render-btn-project-secondary {
    background-color: #7B35F9; /* Roxo vibrante */
    border-color: #7B35F9;
    color: #ffffff;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
}

.render-btn-project-secondary:hover {
    background-color: #6a1fd4;
    border-color: #6a1fd4;
}

/* Garante que o título da seção mantenha o estilo Render */
.projects-section h2 {
    border-bottom: 2px solid #7B35F9; /* Linha de destaque roxa sob o título */
    padding-bottom: 0.5rem;
    display: inline-block; /* Ajusta a largura da linha à palavra */
}






/*
 * Estilos para o Formulário de Contato
 */

.render-input {
    background-color: #0d0d0d; /* Fundo do campo igual ao background do body */
    border: 1px solid #333;
    color: #ffffff; /* Cor do texto digitado */
    padding: 10px 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.render-input:focus {
    background-color: #0d0d0d;
    border-color: #7B35F9; /* Borda roxa no foco */
    box-shadow: 0 0 0 0.25rem rgba(123, 53, 249, 0.5); /* Efeito de foco suave */
    color: #ffffff;
}

/* Garante que o placeholder (texto de dica) fique visível */
.render-input::placeholder {
    color: #555;
}


/* Garante que o título da seção mantenha o estilo Render */
.contact-section h2 {
    border-bottom: 2px solid #7B35F9; /* Linha de destaque roxa sob o título */
    padding-bottom: 0.5rem;
    display: inline-block; /* Ajusta a largura da linha à palavra */
}






/*
 * Estilos para o Footer
 */

.render-footer {
    background-color: #111; /* Fundo do footer um pouco mais claro que o body */
    border-top: 2px solid #333; /* Linha de separação sutil */
    color: #f0f0f0;
}

/* Links de Navegação */
.render-footer-link {
    color: #bdbdbd; /* Cinza claro */
    text-decoration: none;
    transition: color 0.3s;
}

.render-footer-link:hover {
    color: #7B35F9; /* Roxo de destaque no hover */
}

/* Ícones Sociais */
.render-social-icon {
    color: #bdbdbd;
    transition: color 0.3s;
}

.render-social-icon:hover {
    color: #7B35F9; /* Roxo de destaque no hover */
}






/*
 * Animação On Scroll (Fade-In e Slide-Up)
 */

/* Estado inicial: invisível e ligeiramente deslocado */
.animate-hidden {
    opacity: 0;
    transform: translateY(30px); 
    /* Transição base que será acionada pelo JS */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; 
}

/* Estado final: visível e na posição correta */
.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Regra de excessão: Garante que os elementos na primeira seção (Hero) 
   mantenham a animação de carregamento original e não sejam observados pelo scroll */
.hero-section .animate-hidden,
.hero-section .animate-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}










/*
 * ESTILOS PARA BOTÕES FLUTUANTES (FIXED BUTTONS)
 */

/* Container de posicionamento fixo */
.floating-buttons-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000; /* Garante que fique acima de tudo */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os botões */
}

/* Estilo Base do Botão Flutuante */
.float-btn {
    /* Mantém o display flex para a animação de expansão, mas o ícone será absoluto */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinha o conteúdo à esquerda para a expansão */
    position: relative; /* Necessário para posicionamento absoluto do ícone */

    /* Estado inicial: redondo */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    background-color: var(--primary-color); /* Roxo */
    color: var(--hover-color); /* Branco */
    border: none;
    text-decoration: none;
    overflow: hidden; /* Oculta o texto inicialmente */
    
    /* Transições */
    transition: all 0.4s ease-in-out; 
    
    /* Sombra para destaque flutuante */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(123, 53, 249, 0.4);
}

.float-btn:hover {
    /* Estado Hover: expande a largura */
    width: 160px; /* Largura expandida para caber o texto */
    border-radius: 30px; /* Altera para um formato "pílula" */
    
    /* Efeito de brilho e cor de hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(123, 53, 249, 0.4);
    background-color: #6a1fd4; /* Roxo ligeiramente mais escuro */
    color: var(--hover-color);
}

/* Ícone dentro do botão - Estado Inicial (Centralizado) */
.float-btn .icon {
    font-size: 1.2rem;
    
    /* FORÇA A CENTRALIZAÇÃO ABSOLUTA NO ESTADO REDONDO */
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Transições de fallback para a posição do hover */
    transition: all 0.4s ease-in-out; 
}

/* Texto de descrição (expansão) */
.float-btn .btn-text {
    opacity: 0;
    white-space: nowrap;
    position: right;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.3s ease-in-out;
}

/* Move o ícone e mostra o texto no hover */
.float-btn:hover .icon {
    /* Desfaz a centralização absoluta para voltar ao fluxo flexbox */
    position: static; 
    transform: none;
    
    /* Move o ícone para a esquerda para dar espaço ao texto */
    margin-left: 10px; /* Adiciona margem da borda */
    margin-right: 10px; /* Adiciona margem entre ícone e texto */
}

.float-btn:hover .btn-text {
    opacity: 1;
}

/* Estilo específico para o Botão Voltar ao Topo (mais discreto, cinza escuro) */
.float-top {
    background-color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.2);
    
    /* Transição inicial controlada por JS (opacidade e posição) */
    opacity: 0; 
    transform: translateY(30px);
    transition: all 0.5s ease-in-out;
}

.float-top:hover {
    background-color: #555;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Classe para mostrar o botão pelo JavaScript */
.float-top.show {
    opacity: 1;
    transform: translateY(0);
}








/*
 * Estilos para Botões de Ícones Sociais na Seção Hero
 */

.social-icon-btn {
    /* Estilo base para um botão apenas com ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px; 
    height: 48px;
    padding: 0;
    border-radius: 50%; /* Deixa o botão redondo */
    
    /* Transições suaves */
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    border: 2px solid transparent;
}

.social-icon-btn i {
    color: white; /* Cor do ícone */
    font-size: 1.25rem;
}

/* Estilos Específicos do GitHub */
.btn-github {
    background-color: #333; /* Cor do GitHub */
    border-color: #333;
}
.btn-github:hover {
    background-color: #000;
    border-color: var(--primary-color); /* Borda Roxo (primary-color) no hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Estilos Específicos do LinkedIn */
.btn-linkedin {
    background-color: #0A66C2; /* Azul do LinkedIn */
    border-color: #0A66C2;
}
.btn-linkedin:hover {
    background-color: #07407A;
    border-color: var(--primary-color); /* Borda Roxo (primary-color) no hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}