/* Fondo con gradiente oscuro a brillante con inspiración retro tech */
  body {
    background: radial-gradient(circle, #240b36, #c31432);
    font-family: "Arial", 'Roboto', sans-serif;
    padding-top: 60px;
  }
  header {
    margin-bottom: 2rem;
 
  }
  .navbar {
    padding: 1rem 2rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
  .navbar-brand {
    font-size: 1.8rem;
    letter-spacing: 1px;
  }

.nav-link {
    color: #fff;
    font-weight: bolder;
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  .navbar-nav .nav-item.active .nav-link {
    color: #c31432;
  }

  /* Asegura que el menú se mantenga en horizontal */
  .navbar-nav {
    flex-direction: row !important;
  }
  .navbar-nav .nav-item {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  /* Estilos para títulos y textos con toque vaporwave */
  h1, h2, h3 {
    font-weight: bolder;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  }
  p, li {
    color: #e0e0e0;
  }
  /* Padding y márgenes precisos para secciones */
  section {
    padding: 4rem 2rem;
  }
  /* Estilos para cards y elementos visuales */
  .card {
    background: rgba(20, 20, 20, 0.9);
    border: none;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
  }
  /* Footer */
  footer {
    background: #c31432;
    padding: 1rem;
  }
  footer p {
    margin: 0;
    color: #fff;
  }
  /* Container para el sketch p5.js (animación inicial) */
  #p5-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa la pantalla completa */
    overflow: hidden;
    background-color: #101010;
  }