/* ===== RESET ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",sans-serif;
background:#020617;
color:#e2e8f0;
line-height:1.6;
}

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

.navbar{
position:fixed;
top:0;
width:100%;
padding:18px 8%;
background:rgba(2,6,23,0.85);
backdrop-filter:blur(12px);
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
}

.logo{
font-weight:800;
font-size:1.3rem;
color:#38bdf8;
}

.nav-links{
display:flex;
gap:25px;
list-style:none;
}

.nav-link{
text-decoration:none;
color:#cbd5f5;
transition:0.3s;
font-weight:500;
}

.nav-link:hover,
.nav-link.active{
color:#38bdf8;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* ===== SECTIONS ===== */

section{
padding:110px 8%;
position:relative;
}

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

.hero{
min-height:100vh;
background:url("img/fondo.png") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding-top:140px;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(2,6,23,0.65);
}

.hero-container{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
position:relative;
z-index:2;
}

.info-card{
max-width:550px;
}

.info-card h1{
font-size:2.8rem;
margin-bottom:15px;
}

.info-card span{
color:#38bdf8;
}

.info-card p{
opacity:0.85;
}

/* ===== AVATAR ===== */

.avatar img{
width:260px;
border-radius:50%;
animation:float 4s ease-in-out infinite;
box-shadow:0 0 40px rgba(56,189,248,0.3);
}

@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-15px);}
}

/* ===== TYPING ===== */

.typing{
margin-top:10px;
font-size:1.4rem;
color:#38bdf8;
font-weight:600;
min-height:32px;
}

.cursor{
animation:blink 1s infinite;
}

@keyframes blink{
50%{opacity:0;}
}

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

.buttons{
margin-top:30px;
display:flex;
flex-wrap:wrap;
gap:15px;
}

.btn{
padding:12px 26px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:0.3s;
display:inline-block;
}

.primary{
background:#38bdf8;
color:#020617;
}

.secondary{
border:2px solid #38bdf8;
color:#38bdf8;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(56,189,248,0.3);
}

/* ===== GLASS CARDS ===== */

.content-card{
background:rgba(30,41,59,0.55);
backdrop-filter:blur(12px);
padding:40px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.08);

box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ===== ABOUT ===== */

.about-container{
max-width:1100px;
margin:auto;
display:grid;
gap:45px;
}

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

.skills-grid{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:12px;
}

.skill-badge{
background:rgba(51,65,85,0.6);
backdrop-filter:blur(8px);
padding:8px 18px;
border-radius:20px;
border:1px solid rgba(255,255,255,0.08);
transition:0.3s;
}

.skill-badge:hover{
background:#38bdf8;
color:#020617;
}

/* ===== PROJECTS ===== */

.projects .content-card{
max-width:1100px;
margin:auto;
}

.projects-grid{
margin-top:35px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

/* ===== PROJECT CARD GLASS + ESPEJO ===== */

.project-card{
position:relative;
overflow:hidden;

background:rgba(30,41,59,0.85);
backdrop-filter:blur(10px);

padding:40px;
border-radius:14px;

border:2px solid rgba(56,189,248,0.3);
box-shadow:0 10px 30px rgba(0,0,0,0.35);

transition:0.4s;
cursor:pointer;
text-decoration:none;
}

.project-card h3{
color:#38bdf8;
margin-bottom:12px;
font-size:1.5rem;
}

.project-card p{
color:#cbd5f5;
opacity:0.9;
}

.project-card::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.18),
transparent 70%
);

opacity:0;
transition:0.6s;
}

.project-card:hover::before{
opacity:1;
}

.project-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:
0 20px 50px rgba(56,189,248,0.3),
inset 0 1px 0 rgba(255,255,255,0.1);
background:rgba(30,41,59,0.95);
border-color:rgba(56,189,248,0.6);
}

/* ===== CONTACT ===== */

.contact .content-card{
max-width:700px;
margin:auto;
text-align:center;
}

/* ===== MODAL ===== */

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
}

.modal-content{
background:#1e293b;
padding:40px;
border-radius:14px;
max-width:500px;
width:90%;
}

.close{
float:right;
cursor:pointer;
font-size:25px;
}

/* ===== SCROLL INDICATOR ===== */

.scroll-indicator{
position:absolute;
bottom:40px;
left:50%;
width:25px;
height:40px;
border:2px solid #38bdf8;
border-radius:20px;
transform:translateX(-50%);
}

.scroll-indicator::after{
content:"";
width:4px;
height:8px;
background:#38bdf8;
position:absolute;
left:50%;
top:8px;
transform:translateX(-50%);
animation:scrollMove 2s infinite;
}

@keyframes scrollMove{
0%{opacity:0;top:8px;}
50%{opacity:1;}
100%{opacity:0;top:22px;}
}

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

footer{
text-align:center;
padding:30px;
background:#020617;
opacity:0.7;
}

/* ===== SCROLL ANIMATION ===== */

.fade{
opacity:0;
transform:translateY(40px);
transition:0.8s ease;
}

.fade.show{
opacity:1;
transform:translateY(0);
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

.hero-container{
flex-direction:column;
text-align:center;
}

}

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-links{
position:absolute;
top:70px;
right:0;
background:#020617;
flex-direction:column;
width:220px;
padding:20px;
transform:translateX(100%);
transition:0.3s;
}

.nav-links.active{
transform:translateX(0);
}

.projects-grid{
grid-template-columns:1fr;
}

section{
padding:90px 6%;
}

.info-card h1{
font-size:2rem;
}

}