#preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.8s ease-out;
        }

        /* Loader bicolor */
        .loader {
            position: relative;
            width: 40px;
            height: 40px;
        }

        .loader div {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            animation: spin 1.2s linear infinite;
        }

        /* Primer color - Rosa (#ff69b4) */
        .loader div:nth-child(1) {
            border-top-color: #ff69b4;
        }

        /* Segundo color - Índigo (#4f46e5) */
        .loader div:nth-child(2) {
            border-top-color: #4f46e5;
            animation-delay: -0.6s;
        }

        /* Animación de rotación */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

           @media (max-width: 768px) { /* Se aplica en móviles */
    .mi-clase {
        display: none;
    }
}
.fixed{
    position: fixed;
}

    .active {
        color: #1D4ED8; /* Azul oscuro de Tailwind */
        font-weight: bold;
        border-bottom: 2px solid #1D4ED8;
    }

     /* Efecto de subrayado animado */
     .nav-link {
            position: relative;
            transition: color 0.3s ease-in-out;
        }
        .nav-link::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: -3px;
            left: 50%;
            background-color: #1D4ED8;
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        }
        .nav-link:hover {
            color: #1D4ED8; /* Azul */
        }
        .nav-link:hover::after {
            width: 100%;
            left: 0%;
        }
        #scrollTopBtn {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease;
            background: transparent;
        }
        #scrollTopBtn.show {
            opacity: 1;
            transform: scale(1);
        }
        .progress-ring {
            stroke-dasharray: 138;
            stroke-dashoffset: 138;
            transition: stroke-dashoffset 0.2s ease;
        }

        /* Estado inicial: invisibles y desplazados */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Cuando entran en el viewport, se vuelven visibles */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}