/* Estilos personalizados complementarios a Tailwind CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root{
  --c-navy:#519DA6;
  --c-blue:#031926;
  --c-sky:#7EBFD9;
  --c-orange:#D98032;
  --c-red:#D93814;
  --c-bg:#031926;
  --c-text:#519DA6;
  --c-muted:#6B7280;
  --c-white:#FBF1F1;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

html,body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:'Inter',sans-serif;
}

a{color:var(--c-blue);}
a:hover{color:var(--c-navy);}

/* Navbar */
.navbar{background-color: #000; border-bottom:1px solid rgba(0,0,0,.06);}
.navbar a{color:var(--c-text);}
.navbar a:hover,.navbar .active{color:var(--c-blue);}
.brand-badge{ border-radius:50%;}

/* Hero */
.hero{padding:6rem 1rem;}
.hero-card{
  background:var(--c-navy);
  color:var(--c-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero small{color:var(--c-sky);}

/* Botones */
.btn-primario{
  background:var(--c-blue);
  color:var(--c-white);
  border:none;
  border-radius:12px;
  padding:.9rem 1.4rem;
  font-weight:600;
}
.btn-primario:hover{background:var(--c-navy);}

.btn-acento{
  background:var(--c-red);
  color:var(--c-white);
  border:none;
  border-radius:12px;
  padding:.9rem 1.4rem;
  font-weight:600;
}
.btn-acento:hover{background:#b82c10;}

.btn-secundario{
  background:var(--c-orange);
  color:var(--c-white);
  border:none;
  border-radius:12px;
  padding:.9rem 1.4rem;
  font-weight:600;
}
.btn-secundario:hover{filter:brightness(.92);}

/* Secciones */
section h2{color:var(--c-navy);}
.section-muted{background:linear-gradient(0deg,#ffffff, #eef6fb);}

/* Habilidades */
.habilidad{
  background:var(--c-sky);
  color:var(--c-navy);
  border-radius:12px;
  padding:1rem 1.2rem;
  box-shadow:var(--shadow);
  transition:background 0.3s ease,transform 0.3s ease;
  text-align:center;
}
.habilidad:hover{transform:translateY(-2px); background:var(--c-blue); color:var(--c-white);}

/* Animación skills */
.skill{
  position:relative;border-radius:16px;
  background:linear-gradient(180deg,#79b8d933,transparent);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.skill:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  background:linear-gradient(180deg,#79b8d955,#ffffff22);
}
.skill::after{
  content:"";position:absolute;inset:-1px;border-radius:18px;
  background:radial-gradient(120px 60px at 50% 0%,rgba(219, 134, 55, 0.5),transparent);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.skill:hover::after{opacity:.8;}
.skill-icon{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .25s;
  will-change:transform;
}
.skill:hover .skill-icon{
  transform:translateZ(12px) scale(1.08) rotate(-2deg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
/* Entrada suave */
@keyframes float-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.skill{animation:float-in .5s both}
.skill:nth-child(1){animation-delay:.0s}.skill:nth-child(2){animation-delay:.06s}
.skill:nth-child(3){animation-delay:.12s}.skill:nth-child(4){animation-delay:.18s}
.skill:nth-child(5){animation-delay:.24s}.skill:nth-child(6){animation-delay:.30s}
.skill:nth-child(7){animation-delay:.36s}.skill:nth-child(8){animation-delay:.42s}
@media (prefers-reduced-motion:reduce){.skill,.skill-icon{transition:none!important;animation:none!important}}

/* Portafolio */
.proyecto{
  background:var(--c-white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1rem;
  text-align:center;
}
.proyecto h3{color:var(--c-navy);}
.proyecto a{
  background:var(--c-blue);
  color:var(--c-white);
  border-radius:10px;
  padding:.6rem 1rem;
  display:inline-block;
}
.proyecto a:hover{background:var(--c-navy);}

/* Formulario de contacto */
#contacto{background:var(--c-white);}
#contacto h2{color:var(--c-navy);}
form input,form textarea{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:0.9rem 1rem;
  background:#fff;
}
form input:focus,form textarea:focus{
  outline:2px solid var(--c-sky);
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(41,118,166,.15);
}
form button{
  background:var(--c-red);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0.9rem 1rem;
  font-weight:600;
}
form button:hover{background:#b82c10;}

/* Footer */
footer{background:var(--c-navy); color:var(--c-white);}
footer a{color:var(--c-sky);}
footer a:hover{color:var(--c-white);}

/* Animaciones */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.show{
  opacity:1;
  transform:translateY(0);
}