:root {
      color-scheme: dark;
      --bg: #050505;
      --surface: rgba(15, 15, 15, 0.7);
      --line: rgba(255, 255, 255, 0.08);
      --line-soft: rgba(255, 255, 255, 0.04);
      --line-strong: rgba(255, 255, 255, 0.2);
      --text: #ffffff;
      --muted: #888888;
      --faint: #555555;
      --accent: #ffffff; /* El único acento es el blanco puro */
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    html, body {
      width: 100%; min-height: 100vh;
      background: var(--bg); color: var(--text);
      font-family: 'Space Grotesk', sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body {
      display: flex; justify-content: center; align-items: center;
      padding: 3rem 1.5rem;
    }

    /* GIF DE FONDO EN BLANCO Y NEGRO PURO */
    .bg-gif {
      position: fixed; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: -2; pointer-events: none;
      filter: grayscale(100%) brightness(0.4) contrast(1.2);
    }

    body::after {
      content: ""; position: fixed; inset: 0; z-index: -1;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.85) 100%);
    }

    ::selection { background: var(--accent); color: #000; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

    .container {
      width: 100%; max-width: 42rem; 
      background: var(--surface); backdrop-filter: blur(20px);
      border: 1px solid var(--line); border-radius: 8px; /* Bordes menos redondeados, estilo limpio */
      padding: 3rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      text-align: center; position: relative;
    }

    .header { margin-bottom: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
    .eyebrow { 
      font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--text); 
      text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1rem; 
      display: flex; align-items: center; justify-content: center; gap: .5rem; 
    }
    .eyebrow::before { 
      content: ""; width: 8px; height: 8px; border-radius: 50%; 
      background: var(--accent); box-shadow: 0 0 8px rgba(255,255,255,0.4); 
    }
    h1 { 
      font-size: 2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 0.5rem; 
      color: var(--text);
    }

    .cert-image-wrapper {
      padding: 1rem; border: 2px dashed var(--line-strong); border-radius: 8px; margin-bottom: 2rem;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .cert-image-wrapper:hover { 
      border-color: var(--accent); 
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }

    /* AQUÍ SE LLAMA A LA IMAGEN SIN LA EXTENSIÓN */
    .cert-img {
      max-width: 100%; height: auto; border-radius: 4px;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    }

    .back-btn { 
      display: inline-flex; align-items: center; gap: 1.5rem; 
      padding: 0.9rem 1.5rem; border: 1px solid var(--line-strong); border-radius: 4px; 
      color: var(--text); text-decoration: none; font-family: 'JetBrains Mono', monospace; 
      font-size: .75rem; text-transform: uppercase; transition: all .25s var(--ease); 
    }
    .back-btn:hover { 
      border-color: var(--accent); background: var(--accent); color: #000; 
    }

    @media (max-width: 600px) {
      body { padding: 1rem; }
      .container { padding: 2rem 1.5rem; border-radius: 8px; }
    }