:root{
      --bg:#ffffff;
      --fg:#1b1b1b;
      --muted:#6b6b6b;
      --light:#9aa0a6;
      --accent:#555555; /* gris base */
       --accent-hover:#1e90ff; /* celeste al pasar el ratón */
      --accent-ink:#2a2a2a;
      --ring: rgba(0,0,0,.06);
      --card:#ffffff;
      --radius: 16px;
      --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
    }
    @media (prefers-color-scheme: dark){
      :root{ --bg:#0f1115; --fg:#eaeef3; --muted:#c3c7cf; --light:#a0a6af; --card:#12161c; --ring:rgba(255,255,255,.08); --accent-ink:#e0e0e0; --accent:#bbbbbb; }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
   a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease; /* transición suave */
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

    .nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--ring)}
    @media (prefers-color-scheme: dark){.nav{background:rgba(18,22,28,.6)}}
    .nav-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
    .brand{font-weight:800;letter-spacing:.2px}
    .nav a{margin-left:14px;font-weight:600}

    .hero{position:relative;isolation:isolate}
    .hero-bg{position:absolute;inset:0;background:linear-gradient(135deg, rgba(150,150,150,.12), rgba(150,150,150,.04));z-index:-1}
    .hero-inner{max-width:1000px;margin:0 auto;padding:48px 16px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
    .head{display:flex;gap:16px;align-items:flex-start}
  .avatar {
  width: 160px;
  height: 160px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
}
    h1{margin:0;font-size:clamp(1.6rem, 1.1rem + 2.5vw, 2.8rem);line-height:1.15}
    .tag{margin:.25rem 0 0;color:var(--muted);font-size:.98rem}

/* Más compacto entre filas */
.studies{
  margin:.6rem 0 0;
  display:flex;
  flex-direction:column;
  gap:.20rem;                 /* antes .45rem */
}

/* Título del grado: un poquito más grande y un gris apenas más fuerte */
.degree{
  font-size:.85rem;           /* antes .95rem (más sutil sobre .school) */
  line-height:1.18;           /* reduce separación vertical */
  /* Gris ligeramente más oscuro que --light, con fallback si no hay color-mix */
  color: var(--degree-color, #8f96a2);
}

/* Universidad: un poco menor y con línea compacta */
.school{
  display:block;
  font-size:.82rem;           /* ya lo tenías así: mantiene jerarquía */
  color: var(--light);
  line-height:1.12;           /* más compacto */
  margin-top:.08rem;          /* pegadito al grado */
}

/* Variable opcional para degradado de color dinámico (oscuro/claro) */
:root{
  /* Si el navegador soporta color-mix, esta línea “define” --degree-color */
  --degree-color: color-mix(in srgb, var(--light) 78%, var(--fg) 22%);
}
@supports not (color: color-mix(in srgb, white, black)){
  :root{ --degree-color:#8f96a2; } /* fallback sólido */
}
    main{max-width:1000px;margin:0 auto;padding:16px}
    section{padding:22px 0;border-top:1px solid var(--ring)}
    section:first-of-type{border-top:none}
    h2{font-size:1.1rem;margin:0 0 10px;letter-spacing:.2px}

    .card{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
    .stack{display:grid;gap:12px}

    .btn{display:inline-block;padding:10px 14px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700}
    .btn:hover{filter:brightness(.9)}

    footer{max-width:1000px;margin:10px auto 28px;padding:14px 16px;border-top:1px solid var(--ring);color:var(--muted);font-size:.95rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

    :target{scroll-margin-top:64px}