:root{
  --accent: #0d6efd; /* cambia por tu color favorito */
  --dark-900: #0f1115;
  --dark-800: #1a1d22;
  --muted: #99a0aa;
}

/* Global ----------------------------------------------------------------- */
html{ scroll-behavior: smooth; }
body{
  background: linear-gradient(180deg, var(--dark-900), var(--dark-800));
  color: #e9eef6;
  -webkit-font-smoothing:antialiased;
}

/* Accent helpers -------------------------------------------------------- */
.text-accent{ color: var(--accent) !important; }
.border-accent{ border-color: var(--accent) !important; }
.bg-accent{ background-color: var(--accent) !important; color: #fff; }

/* Cards & depth --------------------------------------------------------- */
.card{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform: translateY(-8px); box-shadow: 0 10px 30px rgba(2,6,23,0.6); }

.img-profile{ max-width:250px; border-radius:12px; border:4px solid rgba(255,255,255,0.04); }

/* Section spacing ------------------------------------------------------ */
section{ padding: 6rem 0; }
@media (min-width:992px){ section{ padding: 8rem 0; } }

/* Divider ---------------------------------------------------------------- */
.section-divider{ width:72px; height:6px; background: linear-gradient(90deg,var(--accent),#6ea8ff); border-radius:6px; margin: 0.5rem 0 1.25rem; }

/* Small utilities ------------------------------------------------------- */
.muted{ color: var(--muted); }

/* Animations ------------------------------------------------------------ */
.fade-in{ animation: fadeInUp .6s ease both; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Stats boxes ----------------------------------------------------------- */
.stat-box{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); padding:1.25rem; border-radius:12px; }

/* Footer ----------------------------------------------------------------- */
footer{ border-top: 1px solid rgba(255,255,255,0.04); }

/* Accessibility focus ----------------------------------------------- */
a:focus{ outline: 3px solid rgba(13,110,253,0.15); outline-offset: 2px; }