.hidden {
      opacity: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    .visible {
      opacity: 1;
      height: auto;
      pointer-events: auto;
      transition: opacity 0.5s ease;
    }

    #nav-bar.fixed {
      position: fixed;
      top: 128px;
      /* altura fija del header */
      left: 0;
      right: 0;
      z-index: 40;
      /* menos que el header */
      background-color: #f7f7f7;
      /* o el color que uses */
      width: 100%;
      /* puedes añadir shadow o borde si quieres destacar */
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    }
/* style para los iconos de las redes sociales en el footer */
    .social-icons-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 32px 0;
}
.social-icon {
  font-size: 2.1rem;
  color: #7a7a7a; /* gris por defecto para TODOS */
  transition: color 0.3s;
  cursor: pointer;
}
/* Cambia a color corporativo en hover */
.social-icon.facebook:hover { color: #1877f2; }
.social-icon.instagram:hover { color: #d6249f; }
.social-icon.linkedin:hover { color: #0a66c2; }
.social-icon.tiktok:hover { color: #000; }
.social-icon.x:hover { color: #000; }
.social-icon.youtube:hover { color: #ff0000; }

 #modalOverlay {
      display: none; /* oculto por defecto */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5); /* fondo traslúcido */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    #modalContent {
      background: white;
      padding: 20px;
      max-width: 80vw;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    #modalClose {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
    }