::selection {
      background: #00F0FF;
      color: #0B1B3D;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
      background: #1E4B82;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #0B1B3D;
    }

    /* Animaciones de entrada garantizadas */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-up {
      opacity: 0;
      animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Observador de animaciones (Resto de la página) */
    .observe-fade {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .observe-fade.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Patrones de fondo */
    .hero-grid {
      background-image:
        linear-gradient(rgba(30, 75, 130, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 75, 130, 0.1) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
      -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    }

    /* Texto Gradiente Animado */
    .text-gradient-animate {
      background-size: 200% 200%;
      animation: gradient-shift 4s ease infinite;
    }

    /* Navegación Scrolled */
    .nav-scrolled {
      background: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 25px -5px rgba(11, 27, 61, 0.08);
      border-bottom: 1px solid rgba(30, 75, 130, 0.1);
    }

    /* Modal Transitions */
    .modal-overlay {
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-out;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-content-box {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-overlay.active .modal-content-box {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Typing cursor */
    .typing-cursor {
      border-right: 3px solid #00F0FF;
      animation: blink 0.8s step-end infinite;
      padding-right: 4px;
    }

    @keyframes blink {
      from,
      to {
        border-color: transparent;
      }
      50% {
        border-color: #00F0FF;
      }
    }

    /* Filtro para el logo en el footer oscuro */
    .logo-white-filter {
      filter: brightness(0) invert(1);
    }

    /* Efecto galería imagen */
    .gallery-img-hover::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(11, 27, 61, 0.9) 0%, rgba(11, 27, 61, 0.2) 50%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .gallery-item:hover .gallery-img-hover::after {
      opacity: 1;
    }