/* =========================================
   1. VARIABLES GLOBALES
   ========================================= */
:root {
    /* Paleta de Fondo */
    --bg-color: #00041f; 
    --deg-uno: #06305a;
    --deg-dos: #00041f;
    
    /* Tipografía y Textos */
    --text-primary: #ffffff;
    --text-secondary: #B0C4DE;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================
   2. RESET Y ESTILOS BASE
   ========================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: var(--font-main);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    
    /* Fondo Degradado Elipsoidal Responsive */
    background-color: var(--bg-color);
    background-image: radial-gradient(ellipse at center, var(--deg-uno) 0%, var(--deg-dos) 85%);
    background-attachment: fixed;
}

a { 
    text-decoration: none; 
    color: inherit; 
    -webkit-tap-highlight-color: transparent; 
}

/* =========================================
   3. FONDOS ANIMADOS (WAVES)
   ========================================= */
.bg-waves {
    position: fixed;
    width: 600px;
    height: 600px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    animation: waveFloat 10s infinite alternate ease-in-out;
}

.top-left-wave { 
    top: -150px; 
    left: -150px; 
    transform-origin: center; 
}

.bottom-right-wave { 
    bottom: -150px; 
    right: -150px; 
    transform-origin: center; 
    animation-delay: -5s; 
}

/* Ondas superiores (Azules) */
.bg-waves .st0 {
    fill: none;
    stroke: #2ea8ff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px #2ea8ff);
}

/* Ondas inferiores (Verde/Cian) */
.bg-waves .st1 {
    fill: none;
    stroke: #00e6b8;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px #00e6b8);
}

@keyframes waveFloat {
    0% { transform: scale(1) rotate(0deg); opacity: 0.4; }
    100% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
}

/* =========================================
   4. ESTRUCTURA PRINCIPAL
   ========================================= */
.container {
    width: 100%;
    max-width: 500px; 
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeIn { 
    to { opacity: 1; transform: translateY(0); } 
}

/* =========================================
   5. PERFIL Y CABECERA
   ========================================= */
.profile-header {
    text-align: center;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-container {
    position: relative;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0051ff, #00e1ff);
    box-shadow: 0 0 25px rgba(0, 81, 255, 0.5);
    margin-bottom: 15px;
    animation: avatarGlow 3s infinite alternate;
}

.avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #020308;
    display: block;
}

@keyframes avatarGlow {
    0% { box-shadow: 0 0 15px rgba(0, 81, 255, 0.3); }
    100% { box-shadow: 0 0 35px rgba(0, 225, 255, 0.7), inset 0 0 10px rgba(0, 81, 255, 0.5); }
}

.username {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
}

/* Línea brillante animada bajo el nombre */
.glow-line {
    position: relative;
    width: 60px;
    height: 3px;
    margin: 18px auto;
    border-radius: 999px;
    background: linear-gradient(90deg, #005cff 0%, #009dff 30%, #8efbff 50%, #00bfff 70%, #005cff 100%);
    box-shadow: 0 0 8px rgba(0,92,255,.7), 0 0 16px rgba(0,183,255,.45), 0 0 24px rgba(0,240,255,.25);
    animation: glowPulse 3s ease-in-out infinite;
}

.glow-line::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: linear-gradient(90deg, #005cff 0%, #009dff 30%, #8efbff 50%, #00bfff 70%, #005cff 100%);
    filter: blur(10px);
    opacity: .55;
    z-index: -1;
}

@keyframes glowPulse {
    0%, 100% { transform: scaleX(.9); opacity: .8; filter: brightness(.95); }
    50% { transform: scaleX(1.15); opacity: 1; filter: brightness(1.25); }
}

.bio {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* =========================================
   6. BOTONES (ENLACES PRINCIPALES)
   ========================================= */
.links-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.glass-btn {
    position: relative;
    width: 100%;
    padding: 14px 20px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--deg-dos) 0%, var(--deg-dos) 100%); 
    border: none; /* Reemplazado por sombra interna fina */
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Borde ultra fino usando inset shadow */
    box-shadow: inset 0 0 0 0.3px var(--neon-color), 
                0 0 2px var(--neon-color);
}

/* Luz interna radial desde la izquierda */
.glass-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 0% 50%, var(--neon-color), transparent 60%);
    opacity: 0.15; 
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.glass-btn:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 0.3px var(--neon-color),
                0 0 8px var(--neon-color);
}

.glass-btn:hover::before {
    opacity: 0.35; 
}

/* Elementos internos del botón */
.btn-icon, .btn-text-group, .btn-arrow { 
    z-index: 2; 
    position: relative; 
}

.btn-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 15px; 
    border: none; 
    box-shadow: 0 0 0 0.2px var(--neon-color), 
                0 0 6px var(--neon-color);
    background-color: transparent;
}

.btn-text-group { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: center; 
}

.btn-title { 
    font-size: 1.05rem; 
    font-weight: 600; 
    color: #ffffff; 
    margin-bottom: 2px; 
}

.btn-subtitle { 
    font-size: 0.8rem; 
    color: #8a8d98; 
    font-weight: 400; 
}

.btn-arrow { 
    width: 20px; 
    height: 20px; 
    color: var(--text-secondary); 
    transition: transform 0.3s ease; 
}

.glass-btn:hover .btn-arrow { 
    transform: translateX(4px); 
    color: #ffffff; 
}

/* =========================================
   7. MARCAS DE AGUA TEÑIDAS (IMÁGENES DE FONDO)
   ========================================= */
.watermark-bg {
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 180px; 
    opacity: 0.45; 
    z-index: 1; 
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, black 70%); 
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 70%);
    border-radius: 0 16px 16px 0; 
    overflow: hidden;
}

/* Capa de luz neón ambiental (Overlay) */
.watermark-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--neon-color);
    mix-blend-mode: overlay; 
    opacity: 0.2; 
    z-index: 1;
}

.watermark-bg img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center left; 
    filter: saturate(100%) contrast(0.5); 
    position: relative;
    z-index: 0;
}

/* =========================================
   8. CYBER DIVIDER (SEPARADOR INFERIOR)
   ========================================= */
.cyber-divider {
    width: 85%;
    height: 18px; 
    margin: 10px auto 5px;
    position: relative;
}

.cyber-divider svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Halo sutil general */
.cyber-divider::before {
    content: "";
    position: absolute;
    inset: -2px; 
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(0,92,255,.12), rgba(0,150,255,.18), rgba(159,252,255,.25), rgba(0,150,255,.18), rgba(0,92,255,.12));
    filter: blur(30px); 
    opacity: .55;
    z-index: -1;
    animation: dividerPulse 3s ease-in-out infinite;
}

/* Trazos del SVG interno */
.footer-base {
    fill: url(#dividerGradient);
    stroke: url(#dividerGradient);
    stroke-width: 0.1; 
    filter: drop-shadow(0 0 2px rgba(0,140,255,.7)) drop-shadow(0 0 5px rgba(0,220,255,.35));
}

.footer-energy {
    fill: none;
    stroke: url(#energyFlow);
    stroke-width: 0.9; 
    opacity: .9;
    filter: drop-shadow(0 0 3px rgba(159,252,255,.7)) drop-shadow(0 0 7px rgba(0,217,255,.35));
}

@keyframes dividerPulse {
    0%, 100% { opacity: .45; transform: scaleX(.995); }
    50% { opacity: .75; transform: scaleX(1.005); }
}

/* =========================================
   9. FOOTER (CIRCUITO DE REDES SOCIALES)
   ========================================= */
.tech-footer {
    margin-top: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
}

/* Cables sutiles conectando los botones */
.circuit-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.circuit-line.left { 
    flex-grow: 1; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)); 
}

.circuit-line.right { 
    flex-grow: 1; 
    background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, 0.3)); 
}

.circuit-line.center { 
    width: 30px; 
}

/* Nodos (Cajas de redes sociales) */
.social-box { 
    color: #a1a1aa; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.8);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.social-box:hover { 
    transform: translateY(-4px);
    color: #ffffff;
    border-color: var(--neon-color);
    box-shadow: 0 0 15px var(--neon-color), inset 0 0 8px var(--neon-color);
}

/* =========================================
   10. RESPONSIVE DESIGN (MÓVILES)
   ========================================= */
@media (max-width: 480px) {
    .container { padding: 20px 15px; }
    .avatar { width: 100px; height: 100px; }
    
    .glass-btn { padding: 5px 15px; }
    .btn-icon { width: 65px; height: 65px; margin-right: 12px; } /* Ajustado proporcionalmente al original de 90px */
    .btn-title { font-size: 1rem; }
    .btn-subtitle { font-size: 0.75rem; }
    
    .bg-waves { width: 400px; height: 400px; }
    .top-left-wave { top: -100px; left: -100px; }
    .bottom-right-wave { bottom: -100px; right: -100px; }
    
    .circuit-line.center { width: 15px; }
}