:root{
    --primary-color: #6d68ca;
    --dark-bg: #121212;
    --light-text: #fff8f8;
    --gray-text: #aaaaaa;
    --card-bg: #1e1e1e;
    --border-color: #2d2d2d;
    --transition: all .3s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-bg);
    color: var(--light-text);
    line-height: 1.6;
    min-height: 100vh;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; height:auto; display:block; }

/* NAVBAR */
header{
    position:fixed;
    top:0; left:0;
    width:100%;
    background-color:rgba(18,18,18,0.95);
    backdrop-filter:blur(10px);
    z-index:100;
    border-bottom:1px solid var(--border-color);
    padding:1rem 0;
}
#navbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:0 3%;
    max-width:1400px; margin:0 auto;
}
.logo{ font-size:1.5rem; font-weight:700; }
.logo span{ color:var(--primary-color); }
.nav-links{ display:flex; gap:3rem; }
.nav-links a{ transition:var(--transition); }
.nav-links a:hover{ color:var(--primary-color); }

/* 3 COLUMNAS */
.main-container{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-top:80px;
    padding:20px;
}
.column{
    background:var(--card-bg);
    padding:1.5rem;
    border:1px solid var(--border-color);
    border-radius:10px;
}

/* PERFIL */
.hero-section{ text-align:center; margin-bottom:2rem; }
.profile-image{
    width:150px; height:150px;
    border-radius:50%; margin:0 auto 1rem;
    border:4px solid var(--primary-color);
    box-shadow:0 0 20px rgba(108,99,255,0.4);
    object-fit:cover;
}
.hero-section h1{ font-size:1.8rem; margin-bottom:0.5rem; }
.hero-section h2{ font-size:1.2rem; color:var(--primary-color); margin-bottom:1rem; }
.hero-section p{ color:var(--gray-text); margin-bottom:1rem; }
.social-links{ display:flex; justify-content:center; margin-bottom:1rem; }
.social-links a{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--border-color);
    border-radius:50%; font-size:1.2rem;
    transition:var(--transition);
}
.social-links a:hover{ border-color:var(--primary-color); color:var(--primary-color); }
.btn{
    display:inline-block;
    background:var(--primary-color);
    padding:0.6rem 1.5rem;
    border-radius:20px; font-weight:600;
}
.btn:hover{ background:#5651d8; }

/* SECCIONES */
h2{
    font-size:1.3rem;
    margin-bottom:1rem;
    border-bottom:2px solid var(--primary-color);
    display:inline-block;
    padding-bottom:0.3rem;
}
.info-list li, .timeline-content p, .project-info p{ color:var(--gray-text); font-size:0.9rem; margin-bottom:0.5rem; }
.info-list strong{ color:var(--light-text); }

/* PROYECTOS */
.project-card{
    background:var(--dark-bg);
    border:1px solid var(--border-color);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:1.5rem;
}
.project-img{
    height:100px;
    background:linear-gradient(135deg,#1e40af,#3b82f6);
    display:flex; align-items:center; justify-content:center;
}
.python-logo{
    width:60px; height:60px; background:#3776ab;
    border-radius:8px; position:relative;
}
.python-logo::before{
    content:''; width:20px; height:20px;
    background:#ffd43b; border-radius:50%;
    position:absolute; top:5px; left:5px;
}
.python-logo::after{
    content:''; width:20px; height:20px;
    background:#3776ab; border-radius:50%;
    position:absolute; bottom:5px; right:5px;
    border:2px solid #ffd43b;
}
.project-info{ padding:1rem; }
.project-info h3{ font-size:1rem; margin-bottom:0.5rem; }
.project-link{ font-size:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.project-link:hover{ color:var(--primary-color); }

/* RESPONSIVE */
@media(max-width:1024px){
    .main-container{ grid-template-columns:1fr; }
}
.presentation {
  background-color:rgba(18,18,18,0.95); 
  border-radius: 16px;  
  width: 100%; 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 20px; 
  background-color:rgba(18,18,18,0.95); 
  border-radius: 16px;  
  margin-bottom: 20px;
}


.video- video {
  object-fit: cover; 
  width: 100%; 
  border-radius: 8px;
}