* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
body {
      margin: 0;
      background: radial-gradient(circle at center, #020241 0%, #000013 100%);
      font-family: 'Segoe UI', sans-serif;
      color: white;
      position: relative;
      height: 100dvh;
      overflow-x: hidden;
}

:root {
      --azul-fondo: #000025;
      --dorado: #DAA520;
      --texto: white;
    }


    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      color: var(--texto);
      display: flex;
      flex-direction: column;
    }

     h1 {
  font-family: 'Michroma', sans-serif;
  }


  p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
  }

    #root {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100svh;
      display: flex;
      flex-direction: column;
    }

    header {
      height: 10%;
      background-color: var(--azul-fondo);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid var(--dorado);
      z-index: 2;
      padding-inline: 20px;
    }

    .logo {
      height: 100%;
      display: flex;
      align-items: center;
      margin-inline: 10px;
    }

    .logo img {
      max-height: 100%;
      object-fit: contain;
    }

    nav {
      display: flex;
      align-items: center;
      background: #000025;
    }

    nav a {
      color: var(--texto);
      text-decoration: none;
      font-weight: bold;
      position: relative;
      transition: color 0.3s ease;
      margin-inline: 15px;
      cursor: pointer;
    }

    nav a:hover {
      color: var(--dorado);
      transform: translateY(-2px);
    }

    nav a::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0%;
      height: 4px;
      background-color: var(--dorado);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    nav a:hover::after {
      width: 100%;
    }

    .menu-toggle {
      display: none;
      background-color: transparent;
      border: none;
      color: var(--dorado);
      font-size: 28px;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      nav {
        flex-direction: column;
        position: fixed;
        top: 10%;
        left: -9999px; /* Move off-screen */
        width: 100%;
        height: 90%;
        z-index: 1;
        opacity: 0; /* Make it transparent */
        pointer-events: none; /* Disable interaction when hidden */
        transition: opacity 0.3s ease, left 0.3s ease; /* Smooth transition */
        background: #000025; /* Ensure background is set for the menu */
        display: flex; /* Keep it as a flex container even when hidden */
      }

      nav.visible {
        left: 0; /* Bring back on-screen */
        opacity: 1; /* Make it visible */
        pointer-events: auto; /* Enable interaction */
      }

      nav a {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid var(--dorado);
        transition: background-color 0.3s ease;
      }

      nav a:hover {
        background-color: #111122;
        color: var(--dorado);
      }

      .menu-toggle {
        display: block;
      }
    }

    #contenido {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
    }
    ::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a; /* fondo oscuro institucional */
}

::-webkit-scrollbar-thumb {
  background: #DAA520; /* dorado con profundidad */
  border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: #DAA520;
}


nav a.active {
  color: var(--dorado);
}

nav a.active::after {
  width: 100%;
}

    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      pointer-events: none;
      z-index: 0;
    }