:root {
      --bg:        #0a0a0a;
      --surface:   #111111;
      --surface-2: #161616;
      --border:    #222222;
      --border-hi: #2e2e2e;
      --text:      #e0e0e0;
      --text-dim:  #888888;
      --text-faint:#444444;
      --crimson:   #8b1a1a;
      --crimson-hi:#c0392b;
      --violet:    #4a1a6b;
      --violet-hi: #7b2fa8;
      --accent:    var(--crimson-hi);
      --glow:      rgba(192, 57, 43, 0.18);
      --font-display: 'UnifrakturMaguntia', serif;
      --font-mono:    'DM Mono', monospace;
      --font-body:    'Outfit', sans-serif;
    }

    /* ─── RESET ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.6;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* ─── GRAIN OVERLAY ─────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 1000;
      opacity: 0.6;
    }

    /* ─── THIN HORIZONTAL RULE ───────────────────────────────── */
    .rule {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0;
    }
    .rule--accent { border-top-color: var(--crimson); }

    /* ─── HEADER / NAV 2 ─────────────────────────────────────── */
    header {
      position: sticky;
      top: 0;
      z-index: 900;
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
      gap: 1rem;
    }

    .header-logo {
      font-family: var(--font-display);
      font-size: 2.6rem;
      color: var(--text);
      letter-spacing: 0.02em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .header-logo span { color: var(--accent); }

    nav.nav-primary {
      display: flex;
      gap: 0;
      list-style: none;
    }

    nav.nav-primary a {
      display: block;
      padding: 0.35rem 0.9rem;
      font-family: var(--font-mono);
      font-size: 1.0rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      text-decoration: none;
      border: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    nav.nav-primary a:hover {
      color: var(--text);
      border-color: var(--border-hi);
      background: var(--surface);
    }

    nav.nav-primary a.active {
      color: var(--accent);
      border-color: var(--crimson);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 22px;
      height: 1px;
      background: var(--text-dim);
      transition: transform 0.3s, opacity 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ─── HERO / PROFILE ─────────────────────────────────────── */
    .profile-hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3.5rem 2rem 2.5rem;
      display: flex;
      align-items: flex-end;
      gap: 2.5rem;
    }

/* ─── AVATAR COMPLETO CON EFECTO HOVER (CORREGIDO) ─── */
    .avatar {
      width: 150px; /* Tamaño más grande y llamativo */
      height: 150px;
      background: var(--surface-2);
      border: 1px solid var(--border-hi);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative; /* Base para las capas internas */
      cursor: pointer;
      clip-path: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);
      transition: clip-path 0.4s ease;
    }

    /* La foto (Piso 1) */
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      z-index: 1;
      /* Animamos el filtro de la foto para que pase de normal a blur */
      transition: filter 0.3s ease; 
    }

    /* Capa oscura para el texto (Piso 2) */
    .avatar-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5); /* Cortina negra semitransparente ligera */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0; /* Oculta por defecto absoluta */
      transition: opacity 0.3s ease;
      z-index: 2;
    }

    .avatar-overlay span {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      color: var(--text);
      font-weight: 500;
      text-transform: uppercase;
    }

    /* Borde rojo de estética retro (Piso 3) */
    .avatar::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid var(--crimson);
      clip-path: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 3;
    }

    /* ── ACCIONES HOVER ── */
    .avatar:hover { 
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    /* Al pasar el mouse, aplicamos el blur directo a la IMAGEN */
    .avatar:hover img {
      filter: blur(3px) brightness(0.7);
    }

    /* Al pasar el mouse, se muestra el texto */
    .avatar:hover .avatar-overlay {
      opacity: 1;
    }

    .avatar:hover::after { 
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    /* glitch corner tag */
    .avatar-tag {
      position: absolute;
      bottom: -1px;
      right: -1px;
      font-family: var(--font-mono);
      font-size: 1.5rem;
      letter-spacing: 0.1em;
      color: var(--accent);
      background: var(--bg);
      padding: 1px 5px;
      border-top: 1px solid var(--crimson);
      border-left: 1px solid var(--crimson);
    }

    .profile-info { flex: 1; min-width: 0; }

    .profile-tag {
      font-family: var(--font-mono);
      font-size: 1.00rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.4rem;
    }

    .profile-name {
      font-family: var(--font-display);
      font-size: clamp(5rem, 4.5vw, 3.6rem);
      line-height: 1.05;
      color: var(--text);
      letter-spacing: 0.02em;
    }

    .profile-name .surname { color: var(--accent); }

    .profile-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1.6rem;
      margin-top: 0.8rem;
    }

    .profile-meta span {
      font-family: var(--font-mono);
      font-size: 1.5rem;
      color: var(--text-dim);
      letter-spacing: 0.06em;
    }

    .profile-meta span b {
      color: var(--text);
      font-weight: 400;
    }

    /* ─── MAIN BODY ──────────────────────────────────────────── */
    .main-grid {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem 3rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5px;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 2rem;
    }

    .panel + .panel { border-left: none; }

    .panel-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--text);
      letter-spacing: 0.04em;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .panel-title::before {
      content: '';
      display: block;
      width: 3px;
      height: 1em;
      background: var(--crimson-hi);
      flex-shrink: 0;
    }

    /* ─── FOJA ACADÉMICA ─────────────────────────────────────── */
    .subject-list { list-style: none; }

    .subject-list li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
      gap: 1rem;
      transition: background 0.15s;
    }

    .subject-list li:last-child { border-bottom: none; }
    .subject-list li:hover { background: rgba(255,255,255,0.02); }

    .subject-name {
      font-size: 1.5rem;
      color: var(--text);
      font-weight: 300;
      min-width: 0;
    }

    .subject-badge {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      padding: 2px 8px;
      border: 1px solid currentColor;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .badge--aprobada { color: #4caf50; border-color: #1e3a1e; background: rgba(76,175,80,0.06); }
    .badge--curso    { color: #9c7b2e; border-color: #3a2e0a; background: rgba(156,123,46,0.06); }
    .badge--recursa  { color: var(--violet-hi); border-color: var(--violet); background: rgba(123,47,168,0.08); }

    .subject-nota {
      font-family: var(--font-mono);
      font-size: 1.0rem;
      color: var(--text-dim);
      margin-left: auto;
      margin-right: 0.6rem;
    }

    .section-label {
      font-family: var(--font-mono);
      font-size: 1.0rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 1rem 0 0.4rem;
      display: block;
    }

    /* ─── EQUIPO / NAV 1 ─────────────────────────────────────── */
    .team-nav { list-style: none; }

    .team-nav li {
      border-bottom: 1px solid var(--border);
    }

    .team-nav li:last-child { border-bottom: none; }

    .team-nav a {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 0.5rem;
      text-decoration: none;
      color: var(--text-dim);
      font-size: 0.8rem;
      transition: color 0.2s, padding-left 0.2s;
      position: relative;
    }

    .team-nav a:hover {
      color: var(--text);
      padding-left: 1rem;
    }

    .team-nav a::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 1px;
      background: var(--crimson-hi);
      transition: width 0.3s;
    }

    .team-nav a:hover::before { width: 0.5rem; }

    .member-avatar {
      width: 36px;
      height: 36px;
      background: var(--surface-2);
      border: 1px solid var(--border-hi);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--text-faint);
      clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
    }

    .member-info { min-width: 0; }
    .member-name { font-size: 1.3rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .member-role { font-family: var(--font-mono); font-size: 1.0rem; color: var(--text-faint); letter-spacing: 0.08em; }

    .member-index {
      font-family: var(--font-mono);
      font-size: 1.8rem;
      color: var(--text-faint);
      margin-left: auto;
    }

    /* ─── INSTITUCIONAL ──────────────────────────────────────── */
    .institucional {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem 3rem;
    }

    .inst-title {
      font-family: var(--font-display);
      font-size: 2.2rem;
      color: var(--text-dim);
      letter-spacing: 0.06em;
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .inst-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .inst-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1px;
      background: var(--border);
    }

    .inst-cell {
      background: var(--surface);
      padding: 1.2rem 1.5rem;
    }

    .inst-cell-label {
      font-family: var(--font-mono);
      font-size: 1.5rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-bottom: 0.35rem;
    }

    .inst-cell-value {
      font-size: 1.5rem;
      color: var(--text);
      font-weight: 300;
      line-height: 1.4;
    }

    .inst-cell-value.accent { color: var(--accent); }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      border-top: 1px solid var(--border);
      padding: 1.5rem 2rem;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .footer-text {
      font-family: var(--font-mono);
      font-size: 1.0rem;
      color: var(--text-faint);
      letter-spacing: 0.08em;
      line-height: 1.7;
    }

    .footer-text a { color: var(--text-faint); text-decoration: none; }
    .footer-text a:hover { color: var(--text-dim); }

    .footer-brand {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--text-faint);
    }
    .footer-brand span { color: var(--crimson); }

    /* ─── GLITCH EFFECT ──────────────────────────────────────── */
    @keyframes glitch-1 {
      0%,94%,100% { clip-path: none; transform: none; }
      95% { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translate(-2px, 0); }
      97% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translate(2px, 0); }
    }

    .glitch-hover:hover { animation: glitch-1 4s steps(1) infinite; }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 768px) {
      .header-inner { padding: 0 1rem; }

      nav.nav-primary {
        display: none;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        background: rgba(10,10,10,0.97);
        flex-direction: column;
        border-bottom: 1px solid var(--border);
        z-index: 800;
      }

      nav.nav-primary.open { display: flex; }

      nav.nav-primary a {
        padding: 0.9rem 1.5rem;
        border: none;
        border-bottom: 1px solid var(--border);
      }

      .hamburger { display: flex; }

      .profile-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1rem 1.5rem;
        gap: 1.5rem;
      }

      .main-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem 2rem;
      }

      .panel + .panel { border-left: 1px solid var(--border); border-top: none; }

      .institucional { padding: 0 1rem 2rem; }

      footer { padding: 1.2rem 1rem; }

      .footer-inner { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 480px) {
      .profile-name { font-size: 4rem; }
      .inst-grid { grid-template-columns: 1fr 1fr; }
    }