:root {
      --sky: #5ecfff;
      --yellow: #ffd700;
      --pink: #ff6eb4;
      --green: #39ff14;
      --dark: #1a0a2e;
      --card: #ffffff10;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      min-height: 100vh;
      background: var(--dark);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
      position: relative;
    }


    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(94,207,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94,207,255,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      z-index: 0;
    }


    .taca {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.18;
      pointer-events: none;
      animation: drift 12s ease-in-out infinite alternate;
      z-index: 0;
    }
    .taca-1 { width: 400px; height: 400px; background: var(--sky);   top: -100px; left: -100px; animation-duration: 14s; }
    .taca-2 { width: 300px; height: 300px; background: var(--pink);  bottom: -80px; right: -80px; animation-duration: 10s; }
    .taca-3 { width: 250px; height: 250px; background: var(--yellow); top: 40%; left: 50%; animation-duration: 16s; }

    @keyframes drift {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(30px, 40px) scale(1.08); }
    }


    main {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      gap: 40px;
    }


    .capcalera {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      text-align: center;
    }

    .marc-avatar {
      position: relative;
      width: 160px;
      height: 160px;
    }

    .marc-avatar::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--yellow), var(--pink), var(--sky));
      animation: spin-border 4s linear infinite;
      z-index: -1;
    }

    @keyframes spin-border {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }

    .marc-avatar img {
      width: 160px;
      height: 160px;
      border-radius: 14px;
      display: block;
      image-rendering: pixelated;
    }

    .nom {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(14px, 3vw, 22px);
      color: #fff;
      line-height: 1.6;
      text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(255,110,180,0.3);
      animation: flicker 6s ease-in-out infinite;
    }

    @keyframes flicker {
      0%, 96%, 100% { opacity: 1; }
      97%            { opacity: 0.85; }
      98%            { opacity: 1; }
      99%            { opacity: 0.9; }
    }

    .etiqueta-assignatura {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 10px 22px;
      backdrop-filter: blur(8px);
    }

    .etiqueta-assignatura .punt {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%       { transform: scale(1.5); opacity: 0.7; }
    }

    .etiqueta-assignatura span {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: rgba(255,255,255,0.75);
      letter-spacing: 0.04em;
    }

  
    .targetes {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 600px;
    }

    .targeta {
      flex: 1;
      min-width: 220px;
      max-width: 280px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 28px 24px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      backdrop-filter: blur(12px);
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }

    .targeta::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.3s;
      border-radius: 20px;
    }

    .targeta-figma::before    { background: linear-gradient(135deg, rgba(255,110,180,0.15), rgba(94,207,255,0.1)); }
    .targeta-codi::before     { background: linear-gradient(135deg, rgba(57,255,20,0.12), rgba(94,207,255,0.1)); }
    .targeta-carnaval::before { background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,110,180,0.1)); }

    .targeta:hover::before { opacity: 1; }

    .targeta:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }

    .targeta-figma:hover    { border-color: var(--pink);   box-shadow: 0 20px 60px rgba(255,110,180,0.25); }
    .targeta-codi:hover     { border-color: var(--green);  box-shadow: 0 20px 60px rgba(57,255,20,0.2); }
    .targeta-carnaval:hover { border-color: var(--yellow); box-shadow: 0 20px 60px rgba(255,215,0,0.25); }

    .targeta-icona {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
    }

    .targeta-figma    .targeta-icona { background: rgba(255,110,180,0.18); }
    .targeta-codi     .targeta-icona { background: rgba(57,255,20,0.15); }
    .targeta-carnaval .targeta-icona { background: rgba(255,215,0,0.18); }

    .targeta-etiqueta {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .targeta-titol {
      font-family: 'Press Start 2P', monospace;
      font-size: 11px;
      color: #fff;
      text-align: center;
      line-height: 1.7;
    }

    .targeta-fletxa {
      margin-top: 4px;
      font-size: 18px;
      transition: transform 0.2s;
    }

    .targeta:hover .targeta-fletxa { transform: translateX(4px); }

    .targeta-figma    .targeta-fletxa { color: var(--pink); }
    .targeta-codi     .targeta-fletxa { color: var(--green); }
    .targeta-carnaval .targeta-fletxa { color: var(--yellow); }

  
    footer {
      position: relative; z-index: 1;
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: rgba(255,255,255,0.2);
      text-align: center;
      padding-bottom: 24px;
      letter-spacing: 0.06em;
    }

   
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }