/* Estilos para el menú desplegable */
        .dropdown:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 0.5rem;
            padding: 0.5rem 0;
        }

        .dropdown-menu a {
            display: block;
            padding: 0.5rem 1rem;
            color: #4a5568;
            transition: all 0.2s;
        }

        .dropdown-menu a:hover {
            background-color: #f7fafc;
            color: #e53e3e;
        }

        /* Estilos para móviles */
        .mobile-dropdown {
            display: none;
        }

        .mobile-dropdown.active {
            display: block;
        }

        .dropdown-menu-mobile {
            background-color: white;
            padding-left: 1.5rem;
        }

        .dropdown-menu-mobile a {
            display: block;
            padding: 0.5rem 0;
            color: #4a5568;
        }

        .rotate-180 {
            transform: rotate(180deg);
        }

        .transition-transform {
            transition: transform 0.2s ease;
        }        
        
        /* Animaciones personalizadas */
        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }

        .animate-delay-100 {
            animation-delay: 0.1s;
        }

        .animate-delay-200 {
            animation-delay: 0.2s;
        }

        .animate-delay-300 {
            animation-delay: 0.3s;
        }

        .animate-delay-400 {
            animation-delay: 0.4s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Efectos hover para las cards */
        .plan-card {
            transition: all 0.3s ease;
        }

        .feature-item {
            transition: all 0.2s ease;
        }

        .feature-item:hover {
            transform: translateX(5px);
        }