/* =========================
RESET GENERAL
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial;
background:black;
color:white;
overflow-x:hidden;
cursor:none;
padding:0;
}

.cursor{

position:fixed;
top:0;
left:0;

width:12px;
height:12px;

background:#00ff9d;

border-radius:50%;

pointer-events:none;

z-index:10000;

transform:translate(-50%,-50%);

box-shadow:
0 0 10px #00ff9d,
0 0 20px #00ff9d,
0 0 40px #00ff9d;

}

/*LOADER HACKER AL INICIAR LA WEB - CSS*/

#loader{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:black;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

z-index:9999;

color:#00ff9d;

font-family:monospace;

}

.loading-bar{

width:250px;
height:6px;
background:#111;
margin-top:20px;
border-radius:4px;
overflow:hidden;

}

.progress{

width:0%;
height:100%;
background:#00ff9d;

animation:loading 3s linear forwards;

}

@keyframes loading{

0%{width:0}
100%{width:100%}

}

img{
max-width:100%;
height:auto;
}

p{
line-height:1.6;
}

/* =========================
FONDO MATRIX
========================= */

canvas{

position:fixed;
top:0;
left:0;

z-index:-1;

}
/* =========================
NAVBAR
========================= */

nav{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#000;
z-index:1000;
box-sizing:border-box;
animation: slideDown 0.6s ease;
}

@keyframes slideDown{
from{
transform:translateY(-100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

nav ul{
display:flex;
gap:15px;
list-style:none;
flex-wrap:wrap;
}

nav a{
color:rgb(117,248,1);
text-decoration:none;
position:relative;
transition:0.3s;
display:inline-block;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#00ff9d;
transition:0.3s;
}

nav a:hover{
color:#00ff9d;
text-shadow:0 0 5px #00ff9d,0 0 10px #00ff9d,0 0 20px #00ff9d;
transform:scale(1.1);
}

nav a:hover::after{
width:100%;
}

.menu-btn{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
}

.menu-btn .bar{
width:25px;
height:3px;
background:#00ff9d;
transition:0.3s;
}

.menu-btn.active .bar:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-btn.active .bar:nth-child(2){
opacity:0;
}

.menu-btn.active .bar:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* =========================
HEADER / HERO
========================= */

header{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.perfil{
width:200px;
border-radius:80%;
border:4px solid #00ff9d;
margin-top:120px;
}

.perfil-ftech{
width:45px;
border-radius:50%;
border:2px solid #00ff9d;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo-text h2{
margin:0;
font-size:18px;
color:#00ff9d;
}

.logo-text p{
margin:0;
font-size:12px;
color:#ccc;
}

.neon{

color:#00ff9d;

text-shadow:
0 0 5px #00ff9d,
0 0 10px #00ff9d,
0 0 20px #00ff9d,
0 0 40px #00ff9d,
0 0 80px #00ff9d;

animation: neonGlow 2s infinite alternate;

}

@keyframes neonGlow{

from{

text-shadow:
0 0 5px #00ff9d,
0 0 10px #00ff9d,
0 0 20px #00ff9d;

}

to{

text-shadow:
0 0 10px #00ff9d,
0 0 20px #00ff9d,
0 0 40px #00ff9d,
0 0 80px #00ff9d;

}

}

.logo-text::after{

content:"";

display:block;

width:100%;
height:2px;

background:#00ff9d;

margin-top:4px;

box-shadow:
0 0 10px #00ff9d,
0 0 20px #00ff9d;

}

.hero{
text-align:center;
padding:10px 20px;
}

.hero h1{
font-size:40px;
}

.hero h2{
color:#4fa3ff;
margin:10px 0;
}

/* =========================
BOTONES
========================= */

.btn{
display:inline-block;
padding:12px 25px;
background:#000;
color:rgb(51,255,0);
text-decoration:none;
border-radius:8px;
font-weight:bold;
transition:0.3s;
}

.btn:hover{
transform:scale(1.05);
}


.project-buttons{
margin-top:15px;
display:flex;
gap:10px;
}

.btn-demo{
background:#00ff9d;
color:black;
padding:8px 15px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

.btn-code{
border:1px solid #00ff9d;
color:#00ff9d;
padding:8px 15px;
border-radius:6px;
text-decoration:none;
}

/* BOTON HAMBURGUESA */

.menu-btn{

display:none;
flex-direction:column;
cursor:pointer;

}



/*TODAS LAS HABILIDADES*/
.soporte{ width:90%; }
.redes{ width:75%; }
.programacion{ width:70%; }
.hardware{ width:80%; }

.skill-bar{
height:10px;
background:#1e293b;
width:100%;
}

.skill-bar div{
height:100%;
background:#00ff9d;
}


.bar{

width:25px;
height:3px;
background:white;
margin:4px 0;

}


/* =========================
SECCIONES
========================= */

section{
max-width:900px;
margin:auto;
padding:100px 20px;
min-height:100vh;
scroll-margin-top:80px;
animation:aparecer 1s ease;
}

@keyframes aparecer{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.clientes{

max-width:700px;
margin:auto;
margin-top:30px;

}

.cliente{

margin-bottom:15px;

}

.cliente-btn{

width:100%;
padding:15px;

background:#0a0a0a;

color:#00ff9d;

border:1px solid #00ff9d;

font-size:16px;

text-align:left;

cursor:pointer;

border-radius:6px;

transition:0.3s;

}

.cliente-btn:hover{

background:#00ff9d;
color:black;

}

.cliente-info{

display:none;

padding:15px;

background:#111;

border-left:3px solid #00ff9d;

border-radius:6px;

margin-top:5px;

}

/* =========================
TIMELINE
========================= */

.timeline{
border-left:3px solid #00ff9d;
padding-left:20px;
}

/* =========================
SKILLS
========================= */

.skills{
max-width:600px;
}

.bar{
height:10px;
background:#1e293b;
}

.bar div{
height:10px;
background:#00ff9d;
}

/* =========================
CARDS - PROYECTOS
========================= */

.projects-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;

}

.card{

background:rgba(0,0,0,0.7);
padding:20px;
border-radius:10px;

border:1px solid #00ff9d;

transition:0.3s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:
0 0 10px #00ff9d,
0 0 20px #00ff9d;

}

/* =========================
TECNOLOGIAS
========================= */

.tech{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.tech div{
background:#1f1f1f;
padding:10px 20px;
border-radius:8px;
}

/* =========================
ANIMACIONES SCROLL
========================= */

.typing{
height:50px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}

.reveal{
opacity:0;
transform:translateY(60px);
transition:0.8s;
color:rgb(13,255,0);
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* =========================
REDES SOCIALES
========================= */

.redes {
    position: fixed !important; /* Fuerza la posición fija */
    bottom: 20px !important;    /* Distancia desde abajo */
    right: 20px !important;     /* ¡Esto lo manda a la derecha sí o sí! */
    left: auto !important;      /* Anula cualquier orden de ir a la izquierda */
    
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 99999;             /* Lo pone por encima de todo */
    width: auto;                /* Evita que ocupe todo el ancho de la pantalla */
}

.redes a{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
border-radius:50%;
color:white;
text-decoration:none;
transition:0.3s;
}

.redes a:hover{
transform:scale(1.2);
}

.whatsapp{background:#25D366;}
.linkedin{background:#0077B5;}
.github{background:#333;}
.instagram{
background:linear-gradient(
45deg,
#f58529,
#dd2a7b,
#8134af,
#515bd4
);
}

.facebook{
background:linear-gradient(
45deg,
#0c00f5,
#3500f5,
#1000f7,
#0014ed
);
}

/* =========================
FOOTER
========================= */

.footer{
position:fixed;
bottom:10px;
color:rgb(53,246,0);
font-size:15px;
padding:15px;
}


/* =========================
BOTON HAMBURGUESA QUE SOLO APAREZCA EN MI CELULAR
========================= */
/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

nav ul{

display:none;
flex-direction:column;

position:absolute;
top:70px;
right:0;

background:#000;

width:220px;

padding:20px;

border:1px solid #00ff9d;

}

nav ul li{

padding:10px 0;

}

.menu-btn{

display:flex;

}

.hero{
padding-top:120px;
}

.hero h1{
font-size:28px;
}

.hero h2{
font-size:18px;
}

.hero p{
font-size:14px;
}

.perfil{
width:140px;
}

.cards{
flex-direction:column;
}

.card{
width:100%;
}

.redes{
right:10px;
bottom:10px;
}

.redes a{
width:45px;
height:45px;
font-size:20px;
}

}