:root{
  --bg:#0f1724; --card:#0b1220; --accent:#6ee7b7; --muted:#94a3b8; --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.03);
  --radius:14px; --glass-border: rgba(255,255,255,0.06);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071025 0%, #071728 60%);color:#e6eef6}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:28px}


header{backdrop-filter: blur(6px);position:sticky;top:12px;z-index:40;padding:10px;border-radius:12px;background:linear-gradient(180deg, rgba(10,14,20,0.5), rgba(8,12,18,0.35));border:1px solid var(--glass-border);}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#60a5fa);display:flex;align-items:center;justify-content:center;color:#042024}
nav ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
nav li a{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600}
nav li a.active, nav li a:hover{background:var(--glass);color:var(--accent)}
.cta{display:flex;gap:8px}
.btn{padding:8px 12px;border-radius:10px;font-weight:700;border:1px solid rgba(255,255,255,0.06);background:transparent}
.btn.primary{background:linear-gradient(90deg,var(--accent),#60a5fa);color:#042024}


.hero{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;padding:48px 0}
.intro h1{font-size:34px;margin:0 0 12px 0;line-height:1.05}
.intro p{color:var(--muted);margin:0 0 18px}
.hero .avatar{width:320px;height:320px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border)}
.avatar img{width:100%;height:100%;object-fit:cover}
.actions{display:flex;gap:10px}


section{padding:40px 0}
.card{background:var(--card);padding:18px;border-radius:14px;border:1px solid var(--glass-border)}


.about{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}


.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.proj{position:relative;overflow:hidden;border-radius:12px;cursor:pointer;transform-style:preserve-3d;transition:transform .18s ease, box-shadow .18s ease;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02))}
.proj img{width:100%;height:150px;object-fit:cover;display:block}
.proj .meta{padding:12px}
.proj h4{margin:0 0 6px}
.proj p{margin:0;color:var(--muted);font-size:14px}
.proj .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--glass-2);padding:6px 8px;border-radius:8px;font-size:12px;color:var(--muted)}
.proj:hover{transform:translateY(-6px) rotateX(2deg) rotateY(2deg);box-shadow:0 10px 30px rgba(2,6,23,0.6)}


.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.skill{display:flex;flex-direction:column;gap:8px}
.skill .bar{height:12px;background:var(--glass);border-radius:999px;overflow:hidden}
.skill .fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width 900ms cubic-bezier(.2,.9,.2,1)}


.timeline{position:relative;padding-left:18px}
.timeline:before{content:'';position:absolute;left:8px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),#60a5fa);border-radius:3px}
.event{position:relative;padding:12px 12px 12px 28px;margin-bottom:14px;border-radius:10px;background:var(--glass-2)}
.event .year{font-weight:700;color:var(--accent)}


form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form input, form textarea{padding:10px;border-radius:8px;border:1px solid var(--glass-border);background:transparent;color:inherit}
form textarea{grid-column:1/3;min-height:120px}
.send{grid-column:auto/span 2;display:flex;justify-content:flex-end}

footer{padding:20px 0;color:var(--muted);text-align:center}


@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
}


/* CONTACTO */
#contacto {
  position: relative;
  padding: 60px 40px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(20,25,40,0.95), rgba(10,15,30,0.9));
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Detalle de fondo con ondas */
#contacto::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.2;
  filter: blur(80px);
  z-index: 0;
}
#contacto::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
  opacity: 0.2;
  filter: blur(80px);
  z-index: 0;
}

#contacto h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 28px;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
#contacto .desc {
  text-align: center;
  color: var(--muted);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

/* Formulario */
#contactForm {
  display: grid;
  gap: 18px;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.field {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 14px;
  gap: 10px;
  transition: border 0.3s, box-shadow 0.3s;
}
.field i {
  color: var(--accent);
}
.field input,
.field textarea {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  flex: 1;
  font-size: 14px;
}
.field textarea { min-height: 100px; resize: none; }
.field:focus-within {
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(110,231,183,0.4);
}

.send {
  text-align: center;
}
#contactForm .btn.primary {
  background: linear-gradient(90deg,var(--accent),#60a5fa);
  color: #042024;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: bold;
  transition: transform 0.3s, box-shadow 0.3s;
}
#contactForm .btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Alternativas de contacto */
.alt-contact {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.alt-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  padding: 10px 16px;
  border-radius: 10px;
  transition: background 0.3s, transform 0.3s;
}
.alt-contact a:hover {
  background: var(--glass);
  transform: scale(1.05);
  color: var(--accent);
}
.alt-contact i {
  font-size: 18px;
  color: var(--accent);
}


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

.proj {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

.proj img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.proj:hover img {
  transform: scale(1.05);
}

.proj .meta {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.proj h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.proj p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}

.proj .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.proj .actions {
  display: flex;
  gap: 10px;
}

.btn.demo {
  background: var(--accent);
  color: #042024;
}

.btn.github {
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Sobre mí */
.about-section {
  padding: 40px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15,23,36,0.95), rgba(20,30,50,0.85));
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.about-text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.about-text .highlight {
  color: var(--accent);
  font-weight: 600;
}

.about-list {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}

.about-list li {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-list i {
  color: var(--accent);
}

/* Columna extra */
.about-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.about-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-tools {
  background: rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--glass-border);
}

.tools-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.about-note {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
  }
}