@charset "UTF-8";

/* A classe que comanda o alinhamento da tela inteira */
.page-index { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    min-height: 100vh;
}

/* Camada de fundo 1: Natureza desfocada */
.page-index::before { 
    content: ''; 
    position: fixed; 
    top: -5%; 
    left: -5%; 
    width: 110%; 
    height: 110%; 
    z-index: -3; 
    background-image: url('../imagem/natureza.jpg'); 
    background-size: cover; 
    background-position: center; 
    filter: blur(15px) brightness(0.6); 
}

/* Camada de fundo 2: Vinheta escura */
.page-index::after { 
    content: ''; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -2; 
    background-image: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.8) 100%), url('../imagem/fundo.png'); 
    background-size: cover, contain; 
    background-position: center, center; 
    background-repeat: no-repeat, no-repeat; 
}

/* ==========================================
  ALTERAÇÕES DE TAMANHO COMEÇAM AQUI 
  ========================================== 
*/

/* O Quadro (Container) - Agora com margens seguras e centralização forçada */
.container { 
    position: relative; 
    z-index: 1; 
    width: 90%; /* Ajuste para 90% garantindo que NUNCA cole nas bordas laterais do celular */
    max-width: 550px;
    padding: 3rem 2rem;
    margin: 60px auto 20px auto; /* O margin 'auto' força o alinhamento perfeitamente no centro */
    text-align: center; 
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 20px; 
    backdrop-filter: blur(5px); 
}

.profile-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; }
.profile-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-accent); box-shadow: 0 8px 20px rgba(0,0,0,0.4); animation: float 6s ease-in-out infinite; }

/* Título Responsivo - Resolve o corte na lateral direita */
.username { 
    font-size: clamp(1.2rem, 5vw, 1.8rem); /* A fonte agora é elástica: encolhe e cresce conforme a tela */
    font-weight: 800; 
    margin-bottom: 0.5rem; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
    word-wrap: break-word; /* Força a quebra de linha caso a tela do celular seja minúscula */
}

.bio { 
    font-size: 1.1rem;
    opacity: 0.9; 
    margin-bottom: 2.5rem; 
    line-height: 1.6; 
    text-shadow: 1px 1px 4px black; 
}

.links-list { display: flex; flex-direction: column; gap: 1rem; }

/* Botões - Padding assimétrico protege o ícone */
.link-btn { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 1.3rem 1rem 1.3rem 3.5rem; /* O 3.5rem cria um espaço vazio reservado só pro ícone à esquerda */
    background: var(--glass-bg); 
    backdrop-filter: blur(var(--glass-blur)); 
    border: 1px solid var(--glass-border); 
    border-radius: 50px; 
    color: var(--color-text); 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 600; 
    font-size: 1.15rem;
    text-align: center;
    line-height: 1.2;
    overflow: hidden; 
    transition: var(--transition-smooth); 
    opacity: 0; 
    transform: translateY(20px); 
    animation: slideInUp 0.6s forwards; 
}

/* Ícones dos botões ajustados */
.link-btn i { 
    font-size: 1.6rem;
    position: absolute; 
    left: 20px; 
}

.link-btn:hover { transform: scale(1.02) translateY(-2px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.btn-destaque { background: var(--color-primary); border: none; box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4); }
.btn-destaque:hover { background: #1b5e20; }
.btn-premium { background: linear-gradient(135deg, #2b2b2b, #444444); border: 1px solid rgba(255, 215, 0, 0.3); color: var(--color-premium); font-weight: 800; animation: slideInUp 0.6s forwards, pulse-gold 2s infinite 1s; }
.btn-premium i { color: var(--color-premium); }

/* Rodapé */
footer {
    margin-top: 2rem;
    font-size: 0.85rem;
    opacity: 0.8;
    text-shadow: 1px 1px 2px black;
}

.link-btn:nth-child(1) { animation-delay: 0.1s; } 
.link-btn:nth-child(2) { animation-delay: 0.2s; } 
.link-btn:nth-child(3) { animation-delay: 0.3s; } 
.link-btn:nth-child(4) { animation-delay: 0.4s; } 
.link-btn:nth-child(5) { animation-delay: 0.5s; }

/* ==========================================
   MEDIA QUERIES - RESPONSIVIDADE CELULAR
   ========================================== */
@media (max-width: 600px) {
    .container {
        padding: 2rem 1.2rem; /* Reduz o espaço interno lateral para os botões e os textos terem mais área de respiro */
        margin-top: 40px;
        width: 92%; 
    }
    .profile-img {
        width: 100px;
        height: 100px;
    }
    .bio { 
        font-size: 1rem; 
        margin-bottom: 1.5rem; 
    }
    
    .link-btn {
        font-size: 0.95rem; /* Diminui a fonte no celular garantindo que textos como "Equipamentos que Usamos" caibam */
        padding: 1.2rem 1rem 1.2rem 3.2rem; /* Mantém a defesa do espaço do ícone */
    }
    .link-btn i {
        font-size: 1.3rem; 
        left: 15px; /* Empurra o ícone mais pra borda em telas pequenas */
    }
}