@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

html {
    background-color: rgb(15, 15, 15);
}

body {
    display: flex; /* 1. Ativa o Flexbox no contêiner principal */
    justify-content: center; /* 2. Centraliza os itens horizontalmente */
    align-items: center; /* 3. Centraliza os itens verticalmente */
/*    background-color: #1a1a1a; /* Cor de fundo da tela (ex: preto) */
}

/* Estilo Base para TODAS as barras diagonais */
.diagonal-bar {
    position: fixed; /* Fixa na viewport para cobrir a tela */
    width: 350vw; /* Largura total da tela */
    height: 2%; /* Altura da barra (Você pode ajustar) */
    background-color: #00FFFF; /* Cor Azul Neon */
    /* Z-INDEX BAIXO: Garante que as barras fiquem atrás de TUDO */
    z-index: -1; 
    
    /* Efeito de brilho neon (Opcional, mas recomendado) */
    box-shadow: 0 0 5px #00FFFF, 0 0 15px rgba(0, 255, 255, 0.5);
    
    /* Garante que o ponto de rotação seja o canto superior esquerdo */
    transform-origin: top left;
}

/* BARRA 1: Canto Superior Esquerdo */
.top-left {
    top: 20%; /* 15% da altura da tela */
    left: 0;
    transform: rotate(-25deg); /* Rotação suave diagonal (Ajuste o grau) */
}

/* BARRA 2: Centro da Tela */
.center-area {
    top: 90%; /* 50% da altura da tela (meio) */
    left: 0;
    transform: rotate(-25deg); /* Rotação mais acentuada (Ajuste o grau) */
}

/* BARRA 3: Canto Inferior Direito */
.bottom-right {
    top: 170%; /* 85% da altura da tela */
    left: 0;
    transform: rotate(-25deg); /* Rotação suave (Ajuste o grau) */
}

.botao-camuflado {
    outline: none !important; 
    border: none !important;
    width: 105px;   /* Ajuste o tamanho conforme sua necessidade */
    height: 30px;
    justify-content: center;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    
    /* 4. Zera o preenchimento interno, se necessário (deixa o botão mais justo ao texto) */
    padding: 10px !important;
    justify-content: center;
    align-items: center;
    /* Muda apenas a cor do texto no hover */
    color: rgb(0, 0, 0); 
    display: flex;
    background-color: #0870e0;
}

/* 2. EFEITO HOVER: MUDANÇA APENAS NA LETRA */
.botao-camuflado:hover {
    color: rgb(0, 0, 0); 
    background-color: #0562c6 !important;
    box-shadow: #494064;
    transform: translateY(2px); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset;
}

.botao-camuflado:active{
    transition: all 0.1s ease-out;
    box-shadow: none;
}

.area-trabalho {
    position: relative; 
    background-color: #383737;
    color: #383737;
    padding: 100px 40px 40px 40px; 
    flex-wrap: wrap; 
    gap: 1rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    
    max-width: 800px;
    width: 90%; /* Continua com 90% para ser responsivo */
    opacity: 0.92;

    /* --- AJUSTE CRÍTICO AQUI PARA CENTRALIZAR O BLOCO --- */
    margin: 40px auto; /* Adiciona margem superior/inferior e centraliza HORIZONTALMENTE */
                      /* 'auto' faz a mágica de centralizar um bloco com largura definida */
    box-sizing: border-box; /* Garante que padding e bordas não adicionem largura total */
}

nav {
    display: flex;
    justify-content: center; /* Centraliza no desktop (como já estava) */
    align-items: center;
    width: 100%;
    position: relative; /* Importante para o dropdown */
}

/* 2. Estilo do Botão Hambúrguer (Escondido no Desktop) */
.menu-toggle-btn {
    display: none; /* ESCONDIDO no desktop */
    background: none;
    border: none;
    color: #00BFFF; /* Sua cor neon */
    font-size: 28px; /* Tamanho do ícone */
    cursor: pointer;
    padding: 10px;
}

.menu-toggle-btn:hover {
    color: #FFFFFF;
}

.lista-paginas{
    /* (1) Ativa o Flexbox para alinhar os <li> lado a lado */
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: monospace;
    font-weight: 1000;
    
    /* (2) Remove os marcadores de lista padrão */
    list-style: none; 
    
    /* (3) Remove a margem e o preenchimento padrão do <ul> */
    padding: 0;
    margin-top: -10%;
    margin-bottom: 10%; 
}

.diagonal-bar{
    background: linear-gradient(90deg, #00FFFF 33%, #F0F0F0 33%, #F0F0F0 66%, #FFFFFF 66%);
}

.lista-paginas li{
    /* Adiciona um espaçamento horizontal de 20 pixels entre os itens */
    margin-right: 20px;
}

.lista-paginas a{
    /* Melhora a legibilidade e remove o sublinhado */
    text-decoration: none; 
    color: #00BFFF; /* Cor do texto */
    padding: 5px 10px; /* Um pequeno espaçamento interno, útil para cliques */
}

.lista-paginas a:hover{
    /* Efeito visual ao passar o mouse */
    border-radius: 50%;
    color: #444444;
    background-color: #00BFFF;
}

.container {
    display: flex;
    flex-wrap: wrap; /* permite quebrar linha */
    gap: 1rem;
    padding: 1rem;
}
  
.coluna {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar para vertical em telas pequenas */
    padding: 1rem;
    border-radius: 8px;
    flex: 1; /* ocupa espaço proporcional */
    min-width: 150px; /* garante que se ajustem */

    /* --- AJUSTES AQUI --- */
    align-items: center; /* Alinha a imagem e o bloco de texto verticalmente */
    gap: 25px; /* Adiciona um espaço entre a imagem e o texto */
}

/* Baseado na sua imagem, a linha horizontal fica abaixo do nome, 
   e não da imagem. Por isso, movi o 'border-bottom' do '.perfil-card' para cá.
*/
.coluna h1 {
    font-family: 'Source Code Pro', sans-serif;
    color: #00BFFF;
    font-size: 15px; /* Tamanho grande */
    text-transform: uppercase; /* Efeito futurista */
    letter-spacing: 1px; /* Espaçamento entre letras */

    /* Efeito de Sombra Neon (para dar o brilho) */
    text-shadow: 0 0 2px #00BFFF, 0 0 0.8px #4e4d4d;

    /* --- AJUSTE AQUI (LINHA MOVIDA) --- */
    border-bottom: 2px solid  /* Linha neon */
    padding-bottom: 10px; /* Espaço entre o nome e a linha */
    margin-bottom: 10px;  /* Espaço entre a linha e o parágrafo */
}

.coluna p {
    font-family: 'Source Code Pro', sans-serif;
    color: #C0C0C0; /* Cinza mais escuro (suave na leitura) */
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.4; /* Aumenta o espaçamento entre linhas para melhor leitura */
    margin-bottom: 15px;
    margin-top: 0; /* Garante que o parágrafo fique colado no h1 */
}

.coluna img {

    /* Adaptado para o novo container, para centralizar a imagem dentro do círculo */

    display: flex;

    width: 100%;

    height: 100%;
    
    max-width: none; /* Remove a limitação anterior, agora ele preenche 100% do .perfil-imagem-container */

    object-fit: cover;

    border-radius: 50%;
    /* As propriedades de borda e sombra da sua .coluna img devem vir para cá */
    border: 3px solid ;
    box-shadow: 0 0 1px 1px;
    animation: girarSombra 6s infinite linear;
    margin-top: 20px;;
} 

.perfil-card {
    display: flex;

    flex-wrap: wrap;

    /* Alinha a imagem e o texto verticalmente ao centro */

    gap: 30px; /* Espaço entre a imagem e o texto */

    padding: 0px;

    
    /* Configuração opcional para a linha azul que aparece na imagem */

    border-bottom: 2px solid;

    border-image: linear-gradient(to right,) 1;

    border-image-slice: 0;

    padding-bottom: 40px; /* Para dar espaço da linha inferior */


    /* Garante que o perfil-card comece no topo da coluna e o conteúdo não quebre */

    column-span: all;


    /* Responsividade: Quebra para vertical em telas pequenas */ 
}

/* Container da Imagem (para o efeito de animação) */
.perfil-imagem-container {
    /* Define o tamanho base do container */
    width: 150px; 
    height: 150px;
    border-radius: 50%;

    

    /* --- AJUSTE AQUI --- */
    flex-shrink: 0; /* Impede que a imagem encolha em telas menores */
}

/* --- NOVA CLASSE ADICIONADA --- */
.perfil-texto {
    display: flex;
    flex-direction: column; /* Garante que h1 e p fiquem um sobre o outro */
    flex: 1; /* Faz este bloco ocupar todo o espaço restante ao lado da imagem */
    min-width: 250px; /* Ajuda na quebra de linha em telas médias */
}

@keyframes girarSombra {
    /* Topo: Raio 5px */
    0% { box-shadow: 0px -5px 0px 0px #00FFFF; } 
    
    /* Nota: Todos os valores de deslocamento (h-offset/v-offset) foram reescalados para um raio máximo de 5px */

    2.5% { box-shadow: 0.78px -4.9px 0px 0px #00FFFF; }
    5% { box-shadow: 1.56px -4.7px 0px 0px #00FFFF; }
    7.5% { box-shadow: 2.34px -4.3px 0px 0px #00FFFF; }
    10% { box-shadow: 3.12px -3.8px 0px 0px #00FFFF; }
    12.5% { box-shadow: 3.53px -3.53px 0px 0px #00FFFF; } /* 45° */
    15% { box-shadow: 4.33px -2.5px 0px 0px #00FFFF; }
    17.5% { box-shadow: 4.74px -1.56px 0px 0px #00FFFF; }
    20% { box-shadow: 4.9px -0.78px 0px 0px #00FFFF; }
    22.5% { box-shadow: 4.9px -0.78px 0px 0px #00FFFF; }

    /* Direita: Raio 5px */
    25% { box-shadow: 5px 0px 0px 0px #00FFFF; } 

    27.5% { box-shadow: 4.9px 0.78px 0px 0px #00FFFF; }
    30% { box-shadow: 4.74px 1.56px 0px 0px #00FFFF; }
    32.5% { box-shadow: 4.33px 2.5px 0px 0px #00FFFF; }
    35% { box-shadow: 3.84px 3.12px 0px 0px #00FFFF; }
    37.5% { box-shadow: 3.53px 3.53px 0px 0px #00FFFF; } /* 135° */
    40% { box-shadow: 3.12px 3.84px 0px 0px #00FFFF; }
    42.5% { box-shadow: 2.34px 4.33px 0px 0px #00FFFF; }
    45% { box-shadow: 1.56px 4.74px 0px 0px #00FFFF; }
    47.5% { box-shadow: 0.78px 4.9px 0px 0px #00FFFF; }

    /* Baixo: Raio 5px */
    50% { box-shadow: 0px 5px 0px 0px #00FFFF; } 

    52.5% { box-shadow: -0.78px 4.9px 0px 0px #00FFFF; }
    55% { box-shadow: -1.56px 4.74px 0px 0px #00FFFF; }
    57.5% { box-shadow: -2.34px 4.33px 0px 0px #00FFFF; }
    60% { box-shadow: -3.12px 3.84px 0px 0px #00FFFF; }
    62.5% { box-shadow: -3.53px 3.53px 0px 0px #00FFFF; } /* 225° */
    65% { box-shadow: -3.84px 3.12px 0px 0px #00FFFF; }
    67.5% { box-shadow: -4.33px 2.5px 0px 0px #00FFFF; }
    70% { box-shadow: -4.74px 1.56px 0px 0px #00FFFF; }
    72.5% { box-shadow: -4.9px 0.78px 0px 0px #00FFFF; }

    /* Esquerda: Raio 5px */
    75% { box-shadow: -5px 0px 0px 0px #00FFFF; } 

    77.5% { box-shadow: -4.9px -0.78px 0px 0px #00FFFF; }
    80% { box-shadow: -4.74px -1.56px 0px 0px #00FFFF; }
    82.5% { box-shadow: -4.33px -2.5px 0px 0px #00FFFF; }
    85% { box-shadow: -3.84px -3.12px 0px 0px #00FFFF; }
    87.5% { box-shadow: -3.53px -3.53px 0px 0px #00FFFF; } /* 315° */
    90% { box-shadow: -3.12px -3.84px 0px 0px #00FFFF; }
    92.5% { box-shadow: -2.34px -4.33px 0px 0px #00FFFF; }
    95% { box-shadow: -1.56px -4.74px 0px 0px #00FFFF; }
    97.5% { box-shadow: -0.78px -4.9px 0px 0px #00FFFF; }
    
    /* 100% (Volta ao Topo) */
    100% { box-shadow: 0px -5px 0px 0px #00FFFF; } 
}

.dashboard-grid {
    display: grid;
    font-family: 'Source Code Pro', sans-serif;
    /* 1. PADRÃO (MOBILE): 
      Começa com 1 coluna. '1fr' faz a coluna ocupar 100% da largura.
    */
    grid-template-columns: 1fr 1fr;
    
    gap: 1.5rem;
    max-width: 1200px; /* Mantém um limite máximo de largura em telas ultra-largas */
    margin: 0 auto; /* Centraliza o grid na tela */
    padding: 0 1rem; /* Adiciona um pequeno padding nas laterais no mobile */
}

/* 2. TELAS GRANDES (TABLET/COMPUTADOR):
   Vamos usar 768px como o ponto de quebra (início do "tablet").
*/

/* --- O Link (Botão principal) --- */
.dash-link {
    /* ★ MUDANÇA PRINCIPAL: Define um tamanho fixo */
    flex: 0 0 300px; /* Não cresce, Não encolhe, Tamanho base de 300px */
    
    display: flex;
    align-items: center;
    padding: 1.25rem; /* 20px */
    border-radius: 16px;
    text-decoration: none;
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s ease;
    
    /* Estado Padrão (Escuro) */
    background-color: #282e38;
}

/* REMOVIDO: Bloco .dash-icon 
*/

/* --- Texto do Botão --- */
.dash-text {
    /* AJUSTE: Removemos o ícone, então removemos a margem esquerda */
    
    transition: color 0.3s ease;
    font-size: 12px;
    /* Para o texto não ficar colado na seta */
    margin-right: 60px; 
    z-index: 2;
    /* Estado Padrão (Escuro) */
    color: #00FFFF;
}

/* --- A "Concha" (Círculo) da Direita --- */
.dash-arrow-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    
    /* Posicionamento: O Segredo do Efeito */
    position: absolute;
    top: 50%;
    right: -30px; /* Joga 30px para fora da borda */
    transform: translateY(-50%); /* Centraliza verticalmente */
    
    /* Alinha a seta dentro dele */
    display: grid;
    place-items: center;
    
    transition: background-color 0.3s ease;

    /* Estado Padrão (Escuro) */
    background-color: #252525;
    z-index: 1;
}

/* --- A Seta --- */
.dash-arrow {
    font-size: 1.75rem;
    font-weight: bold;
    /* Puxa a seta de volta para o centro visível */
    transform: translateX(-12px); 
    transition: color 0.3s ease;

    /* Estado Padrão (Escuro) */
    color: #00FFFF;
}


/* --- ★★★ EFEITO HOVER ★★★ --- */
.dash-link:hover {
    /* Estado Hover (Claro) */
    background-color: #1e1e1e;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.dash-link:hover .dash-text {
    /* Texto fica escuro */
    color: #00FFFF;
}

/* REMOVIDO: Regras de hover para .dash-icon 
*/

.dash-link:hover .dash-arrow-wrapper {
    /* Concha fica cinza claro */
    background-color: #00FFFF;
}

.dash-link:hover .dash-arrow {
    /* Seta fica escura */
    color: #212529;
}

.container-social {
    display: flex;
    justify-content: center; /* Centraliza os ícones horizontalmente */
    margin-top: 30px; /* Espaço entre o conteúdo principal e os ícones */
}

.link-social {
    color: #00FFFF; /* Cor Azul Neon (para que o ícone herde a cor) */
    font-size: 30px; /* Tamanho do ícone, se for Font Awesome */
    margin: 0 10px; /* Espaçamento lateral entre ícones */
    transition: color 0.3s; /* Transição suave para o efeito hover */
    margin: 0 15px; /* Espaçamento entre ícones */
    display: inline-block; /* Essencial para que o 'transform' funcione corretamente */
    transition: transform 0.8s ease-out; /* Transição suave ao sair do hover */
    
    /* Efeito de brilho estático quando não está em hover (se desejar) */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

/* O que acontece quando o mouse está EM CIMA (.link-social:hover) */
.link-social:hover {
    color: #FFFFFF; /* Muda a cor para branco no hover */
    text-shadow: 0 0 10px #00FFFF, 0 0 20px rgba(0, 255, 255, 0.5); /* Brilho mais intenso */
    
    /* APLICA A ANIMAÇÃO QUANDO O MOUSE ESTÁ EM CIMA */
    animation: pingEffect 0.7s infinite ease-in-out; /* 0.7s para velocidade, infinite, vai e volta */
}

@keyframes pingEffect {
    0%, 100% {
        transform: translateY(0); /* Posição normal */
    }
    50% {
        transform: translateY(-8px); /* Sobe 8 pixels */
    }
}

/* Media Query Corrigida e Otimizada */
@media (max-width: 668px) {
    .dashboard-grid {
        /* Muda para 2 colunas, cada uma ocupando 50% do espaço (1fr 1fr) */
        grid-template-columns: 1fr;
        padding: 0; /* Remove o padding lateral em telas maiores */
    }

    /* --- ESTILOS DO MENU RESPONSIVO --- */
    nav {
        justify-content: flex-start; /* Alinha o botão no canto direito */
        padding-left: 0px; /* Espaçamento para o botão */
    }

    /* MOSTRA o botão hambúrguer no mobile */
    .menu-toggle-btn {
        display: block;
        z-index: 1001; /* Garante que o botão fique sobre o menu */
    }

    /* ESCONDE a lista de links no mobile (por padrão) */
    .lista-paginas {
        /* Escondida por padrão */
        display: none; 

        /* Transforma em um menu dropdown vertical */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Posição logo abaixo do <nav> */
        left: 20px; /* Alinhado com o botão */
        width: 250px; /* Largura do menu */
        right: auto;
        /* Estilo do seu tema */
        background-color: #383737;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        
        /* RESETA o CSS do desktop que atrapalha aqui */
        margin-top: 10px; /* Espaço do botão */
        margin-bottom: 0;
        padding: 10px 0;
    }

    /* Classe 'ativo' (adicionada via JS) MOSTRA o menu */
    .lista-paginas.ativo {
        display: flex;
    }

    /* Ajusta os itens da lista no mobile */
    .lista-paginas li {
        margin-right: 0;
        width: 100%;
    }

    .lista-paginas a {
        display: block; /* Faz o link ocupar a largura toda */
        padding: 12px 20px; /* Mais fácil de tocar */
        text-align: left; /* Mais legível no dropdown */
    }

    /* O efeito 'hover' de círculo do desktop fica ruim no dropdown */
    .lista-paginas a:hover {
        border-radius: 0; /* Remove o 'border-radius: 50%' */
    }

    .area-trabalho {
        /* No desktop era 100px. Reduzimos no mobile */
        padding-top: 40px; 
    }

    /* --- AJUSTES DE CENTRALIZAÇÃO E QUEBRA DE PALAVRA --- */
    
    .coluna {
        flex-direction: column; /* 1. Empilha a imagem e o texto */
        align-items: center;   /* 2. Centraliza os itens (imagem e perfil-texto) */
        text-align: center;    /* 3. Centraliza o texto (h1, p) dentro dos itens */
    }
    
    .perfil-texto {
        align-items: center; /* Centraliza o h1 e p (e a linha) dentro dele */
        width: 100%;
    }

    .coluna h1 {
        width: 80%; /* Ajusta a largura da linha abaixo do nome */
    }

    .coluna p {
        width: 90%; /* Limita a largura do parágrafo */

        /* 4. APLICA A QUEBRA DE PALAVRA (como pedido) */
        overflow-wrap: break-word; /* Quebra palavras longas */
        hyphens: auto;             /* Tenta hifenizar */
    }
}

/* --- Media Query para Telas Mobile BEM PEQUENAS (Abaixo de 390px) --- */
/* (Cobre 384px, 375px, 360px, etc.) */
@media (max-width: 390px) {
    .dashboard-grid {
        /* Muda para 2 colunas, cada uma ocupando 50% do espaço (1fr 1fr) */
        grid-template-columns: 1fr;
        padding: 0; /* Remove o padding lateral em telas maiores */
    }
    /* 1. Diminui o padding do container principal para ganhar espaço */
    .area-trabalho {
        width: 95%; /* Ocupa um pouco mais da tela */
        /* Reduz o padding lateral para 15px */
        padding-left: 15px;
        padding-right: 15px;
        /* Reduz o padding inferior */
        padding-bottom: 20px;
    }

    /* 2. Diminui um pouco a foto de perfil */
    .perfil-imagem-container {
        width: 120px;
        height: 120px;
    }

    /* 3. Diminui levemente as fontes */
    .coluna h1 {
        font-size: 14px; /* Um pouco menor que os 15px originais */
        width: 90%; /* Ajusta a linha para 90% */
    }

    .coluna p {
        font-size: 13px; /* Um pouco menor que os 14px originais */
        line-height: 1.5; /* Aumenta o espaço entre linhas para compensar */
        width: 100%; /* Ocupa 100% do espaço */
    }

    /* 4. Diminui os ícones sociais */
    .container-social {
        margin-top: 20px; /* Menos espaço acima */
    }
    
    .link-social {
        font-size: 26px; /* Tamanho do ícone */
        margin: 0 10px;  /* Espaçamento entre ícones */
    }

    /* 5. Ajusta o menu dropdown para caber */
    .lista-paginas {
        width: 200px; /* Deixa o menu um pouco mais estreito */
        right: 15px;
    }

    nav {
        padding-right: 15px; /* Alinha o botão com o menu */
    }
}