/* ========= Variables ========= */
:root{
  --primary:#0d6efd;
  --secondary:#6c63ff;
  --accent:#ffcc00;
  --bg:#0a0b10;
  --bg-soft:#0d1020;
  --paper:#ffffff;
  --text:#e9ecf1;
  --muted:#a8b0c2;
  --glass:rgba(255,255,255,.08);
  --blur:14px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --t:.3s ease;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,#0a0b10 0%, #121527 60%, #0a0b10 100%);
  overflow-x:hidden;
}

/* ========= Utilidades ========= */
.container{width:min(1200px,92%);margin-inline:auto}
.reveal{opacity:0;transform:translateY(40px);transition:all .6s ease}
.reveal.active{opacity:1;transform:none}

h2{
  font-size:2.2rem; text-align:center; margin:0 0 1.5rem;
  color:#fff; position:relative;
}
h2::after{
  content:""; display:block; width:64px; height:4px;
  background:var(--accent); margin:.7rem auto 0; border-radius:2px;
}

/* ========= Header ========= */
#header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  background:transparent; transition:background .4s ease, box-shadow .4s ease;
}
#header.scrolled{
  background:rgba(13,110,253,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{font-weight:700;font-size:1.4rem;color:#fff;text-decoration:none}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links a{color:#eaf1ff;text-decoration:none;font-weight:500;transition:color var(--t)}
.nav-links a:hover{color:var(--accent)}
.btn-header{
  background:linear-gradient(135deg,var(--accent),#ffd84d);
  padding:.55rem 1rem;border-radius:12px;color:#1a1a1a !important;font-weight:700
}

.menu-toggle{
  display:none; font-size:1.8rem; color:#fff; background:none; border:0; cursor:pointer
}

/* ========= Hero ========= */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; padding-top:76px}
.hero-bg{
  position:absolute; inset:0; background:url('images/fondo.jpg') center/cover no-repeat; filter:contrast(1.1) saturate(1.05);
  transform:scale(1.02);
}
#particles{position:absolute; inset:0; width:100%; height:100%}
.hero-overlay{
  position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%,rgba(108,99,255,.25),transparent 40%),
                              radial-gradient(ellipse at 80% 70%,rgba(13,110,253,.25),transparent 40%),
                              rgba(0,0,0,.45);
}

.hero-content{position:relative; display:flex; align-items:center; gap:3rem; flex-wrap:wrap}
.hero-text{flex:1; min-width:280px}
.hero-text h1{font-size:clamp(2.2rem,4vw,3.2rem); margin:.2rem 0 .6rem}
.hero-text h1 span{color:var(--accent)}
.type-wrap{min-height:2.2rem; color:var(--muted); font-size:1.05rem}
.hero-cta{margin:1.2rem 0 1.6rem; display:flex; gap:.8rem; flex-wrap:wrap}

.btn{
  display:inline-block; border-radius:14px; text-decoration:none; font-weight:700;
  padding:.85rem 1.15rem; transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t)
}
.btn-primary{
  color:#10121a; background:linear-gradient(135deg,var(--accent),#ffe073); box-shadow:0 8px 20px rgba(255,204,0,.25)
}
.btn-primary:hover{transform:translateY(-3px)}
.btn-secondary{
  color:#fff; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); backdrop-filter: blur(8px)
}
.btn-secondary:hover{background:rgba(255,255,255,.12); transform:translateY(-3px)}

.kpis{display:flex; gap:1.2rem; flex-wrap:wrap}
.kpi{background:var(--glass); backdrop-filter:blur(var(--blur)); border:1px solid rgba(255,255,255,.12);
     border-radius:12px; padding:.9rem 1rem; min-width:120px; text-align:center; box-shadow:var(--shadow)}
.kpi-num{display:block; font-size:1.6rem; font-weight:800; color:#fff}
.kpi-label{font-size:.9rem; color:var(--muted)}

.hero-image{flex:1; min-width:280px; position:relative; display:grid; place-items:center}
.dev-photo{
  width:min(320px,40vw); aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  animation:float 4.2s ease-in-out infinite;
}
.glow{
  position:absolute; width:70%; height:70%; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(108,99,255,.55), transparent 60%);
  filter: blur(22px); z-index:-1;
}

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

/* ========= Secciones ========= */
section{padding:clamp(64px,8vw,96px) 0}

/* ========= About ========= */
.about p{max-width:860px; margin:0 auto; color:#d7dbe7; font-size:1.05rem}

/* ========= Projects ========= */
.projects-grid{
  display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.project-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .25s ease
}
.project-card:hover{transform:translateY(-6px)}
.project-card img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.project-info{padding:1rem 1rem 1.2rem}
.project-info h3{margin:.2rem 0 .5rem}
.card-buttons{display:flex; gap:.6rem; flex-wrap:wrap}
.card-buttons a{
  background:rgba(13,110,253,.2); color:#eaf1ff; text-decoration:none; padding:.55rem .85rem; border-radius:10px;
  border:1px solid rgba(13,110,253,.35)
}
.card-buttons a:hover{background:rgba(13,110,253,.35)}

/* ==== Tecnologías ==== */
.tech-stack {
  margin-top: 2rem;
  text-align: center;
}

.tech-stack h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.tech-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(var(--blur));
  padding: 1rem;
  border-radius: 14px;
  width: 100px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tech img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.tech span {
  color: #eaf1ff;
  font-size: 0.9rem;
  font-weight: 500;
}

.tech:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.tech:hover img {
  transform: scale(1.15);
}

/* Responsive */
@media (max-width: 600px) {
  .tech {
    width: 80px;
    padding: 0.8rem;
  }

  .tech img {
    width: 40px;
    height: 40px;
  }
}


/* ========= Services ========= */
.cards-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:1.6rem; text-align:center; box-shadow:var(--shadow)
}
.service-card img{width:72px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); margin-bottom:.8rem}

/* ========= Education ========= */
.timeline{list-style:none; margin:0; padding:0; max-width:800px; margin-inline:auto}
.timeline li{
  position:relative; padding:.75rem 1rem .75rem 1.4rem; color:#d7dbe7;
  border-left:3px solid rgba(255,255,255,.18);
}
.timeline li span{color:#fff; font-weight:700}

/* ========= Contacto Pro (glassmorphism) ========= */
.contact-section{position:relative; background:
  radial-gradient(1200px 500px at 20% 10%, rgba(108,99,255,.22), transparent 50%),
  radial-gradient(800px 400px at 90% 80%, rgba(13,110,253,.18), transparent 50%),
  linear-gradient(180deg,#0a0b10 0%, #0f1330 60%, #0a0b10 100%);
}
.contact-bg{position:absolute; inset:0; pointer-events:none; opacity:.25}
.contact.grid{display:grid; gap:2rem; grid-template-columns:1.1fr 1fr; align-items:start}
@media (max-width:900px){.contact.grid{grid-template-columns:1fr}}

.contact-info h2{text-align:left}
.contact-sub{color:#c7cfe2; margin:.3rem 0 1.2rem; max-width:520px}
.info-cards{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.info-card{
  display:flex; gap:.8rem; align-items:center; text-decoration:none; color:#e9ecf1;
  padding:1rem; border-radius:14px; background:var(--glass); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(var(--blur));
  transition:transform var(--t)
}
.info-card:hover{transform:translateY(-4px)}
.info-card .icon{font-size:1.3rem}

.contact-form-wrap{
  background:var(--glass); backdrop-filter: blur(var(--blur));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow)
}
.contact-form .field{margin-bottom:1rem}
.contact-form label{display:block; margin-bottom:.35rem; color:#eaf1ff; font-weight:600; font-size:.95rem}
.contact-form input,
.contact-form textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; outline:none; transition:border var(--t), background var(--t)
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.1)}
.error{border-color:#ff6b6b !important; background:rgba(255,107,107,.08)}
.error-msg{display:none; color:#ffaaaa; font-size:.8rem; margin-top:.35rem}
.field.invalid .error-msg{display:block}
.btn-submit{width:100%; margin-top:.4rem}
.form-footnote{color:#9fb0d2; font-size:.85rem; margin:.6rem 0 0}

/* Toast */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(120%);
  background:linear-gradient(135deg,var(--accent),#ffd84d); color:#1a1a1a; font-weight:800;
  padding:.9rem 1.1rem; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:1200;
  opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ========= Footer ========= */
footer{padding:28px 0; text-align:center; color:#aeb7cc}

/* ========= Responsive Nav ========= */
@media (max-width:860px){
  .menu-toggle{display:block}
  .nav-links{
    position:absolute; right:4%; top:64px; background:rgba(13,110,253,.12);
    border:1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px);
    border-radius:14px; padding:.8rem; display:none; flex-direction:column; gap:.6rem
  }
  .nav-links.show{display:flex}
}