:where([class^="ri-"])::before { content: "\f3c2"; }
        
        body {
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            min-height: 100%;
            background:
                linear-gradient(145deg, rgba(255, 77, 141, 0.16) 0%, rgba(255, 77, 141, 0) 34%),
                linear-gradient(225deg, rgba(0, 191, 166, 0.18) 0%, rgba(0, 191, 166, 0) 38%),
                linear-gradient(180deg, #100719 0%, #1a0a24 42%, #071b1d 100%);
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 88px;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            background:
                radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1.5px 1.5px at 55% 35%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1px 1px at 75% 22%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(2px 2px at 85% 55%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1.5px 1.5px at 48% 78%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 52%),
                radial-gradient(1px 1px at 68% 70%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 52%);
            opacity: 0.65;
            filter: blur(0.1px);
        }

        .bg-white {
            background: linear-gradient(180deg, rgba(255, 247, 226, 0.96), rgba(255, 238, 205, 0.92)) !important;
            border: 1px solid rgba(247, 201, 72, 0.34);
            box-shadow: 0 18px 42px rgba(16, 7, 25, 0.16);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .section-mystic {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(135deg, rgba(255, 77, 141, 0.12) 0%, rgba(255, 77, 141, 0) 42%),
                linear-gradient(225deg, rgba(0, 191, 166, 0.14) 0%, rgba(0, 191, 166, 0) 48%),
                linear-gradient(180deg, rgba(22, 5, 29, 0.98) 0%, rgba(53, 18, 53, 0.96) 52%, rgba(7, 27, 29, 0.98) 100%);
            color: #fff3d9;
        }

        .section-mystic-alt {
            background:
                linear-gradient(135deg, rgba(247, 201, 72, 0.12) 0%, rgba(247, 201, 72, 0) 42%),
                linear-gradient(225deg, rgba(0, 191, 166, 0.12) 0%, rgba(0, 191, 166, 0) 48%),
                linear-gradient(180deg, rgba(19, 8, 28, 0.98) 0%, rgba(39, 14, 46, 0.96) 54%, rgba(13, 39, 41, 0.98) 100%);
        }

        .section-mystic::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 243, 217, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 243, 217, 0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
        }

        .section-mystic > .container {
            position: relative;
            z-index: 1;
        }

        .section-mystic h2,
        .section-mystic > .container > .text-center h2 {
            color: #ffe9a6 !important;
            text-shadow: 0 2px 18px rgba(247, 201, 72, 0.16);
        }

        .section-mystic > .container > .text-center p {
            color: rgba(255, 243, 217, 0.84) !important;
        }

        .section-mystic .w-24.h-1 {
            background: linear-gradient(90deg, #00bfa6, #f7c948, #ff4d8d) !important;
            height: 3px;
            border-radius: 9999px;
            box-shadow: 0 0 20px rgba(247, 201, 72, 0.30);
        }

        .section-mystic h3 {
            color: #ffe9a6 !important;
        }

        .section-mystic .text-gray-500,
        .section-mystic .text-gray-600,
        .section-mystic .text-gray-700 {
            color: rgba(255, 243, 217, 0.74) !important;
        }

        .modern-card .text-primary,
        .bg-white .text-primary {
            color: #351235 !important;
        }

        .modern-card .text-secondary,
        .bg-white .text-secondary {
            color: #b97800 !important;
        }

        .modern-card .text-gray-500,
        .modern-card .text-gray-600,
        .modern-card .text-gray-700,
        .modern-card .text-gray-800,
        .bg-white .text-gray-500,
        .bg-white .text-gray-600,
        .bg-white .text-gray-700,
        .bg-white .text-gray-800 {
            color: #5d4a55 !important;
        }

        .section-mystic input,
        .section-mystic textarea,
        .section-mystic select {
            background: rgba(255, 250, 238, 0.96);
            color: #351235;
            border-color: rgba(247, 201, 72, 0.38);
        }

        .section-mystic input::placeholder,
        .section-mystic textarea::placeholder {
            color: rgba(53, 18, 53, 0.52);
        }

        .bg-white\/50 {
            background: linear-gradient(180deg, rgba(255, 247, 226, 0.90), rgba(255, 238, 205, 0.84)) !important;
            border: 1px solid rgba(247, 201, 72, 0.30) !important;
            box-shadow: 0 14px 34px rgba(16, 7, 25, 0.14);
        }

        .bg-white\/50 .text-primary {
            color: #351235 !important;
        }

        .bg-white\/50 .text-gray-600,
        .bg-white\/50 .text-gray-700 {
            color: #5d4a55 !important;
        }

        #numerology-result {
            background: linear-gradient(180deg, rgba(255, 247, 226, 0.94), rgba(255, 238, 205, 0.88)) !important;
            border: 1px solid rgba(247, 201, 72, 0.30);
        }

        #numerology-result .text-primary,
        #numerology-result .text-gray-700 {
            color: #351235 !important;
        }

        .bg-white[class*="rounded-full"] {
            background: rgba(255, 247, 226, 0.98) !important;
            box-shadow: 0 8px 22px rgba(16, 7, 25, 0.14);
        }

        .section-mystic .bg-gradient-to-br {
            background: linear-gradient(180deg, rgba(255, 247, 226, 0.94), rgba(255, 238, 205, 0.88)) !important;
            border: 1px solid rgba(247, 201, 72, 0.28);
            box-shadow: 0 12px 28px rgba(16, 7, 25, 0.12);
        }

        .section-mystic .bg-gradient-to-br .text-primary {
            color: #351235 !important;
        }

        .section-mystic .bg-gradient-to-br .text-gray-600,
        .section-mystic .bg-gradient-to-br .text-gray-700 {
            color: #5d4a55 !important;
        }

        .bg-gray-300 {
            background-color: rgba(255, 243, 217, 0.42) !important;
        }

        nav.fixed {
            background: linear-gradient(90deg, rgba(22, 5, 29, 0.96), rgba(53, 18, 53, 0.96), rgba(7, 27, 29, 0.94)) !important;
            border-bottom: 1px solid rgba(247, 201, 72, 0.24);
            box-shadow: 0 10px 30px rgba(16, 7, 25, 0.34);
        }
        
        .font-cinzel {
            font-family: 'Cinzel', serif;
        }
        
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }
        
        .particle {
            position: absolute;
            display: block;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: rise linear infinite;
        }
        
        @keyframes rise {
            0% {
                opacity: 0;
                transform: translateY(0) rotate(0deg);
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
                transform: translateY(-100vh) rotate(360deg);
            }
        }
        
        .card-flip {
            perspective: 1000px;
        }
        
        .card-flip-inner {
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .card-flip-front, .card-flip-back {
            backface-visibility: hidden;
        }
        
        .card-flip-back {
            transform: rotateY(180deg);
        }
        
        .card-flip.flipped .card-flip-inner {
            transform: rotateY(180deg);
        }
        
        .gradient-border {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .gradient-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00BFA6, #FF4D8D, #F7C948, #7C3AED);
            z-index: -1;
            border-radius: 10px;
        }
        
        /* New modern gradient classes */
        .gradient-bg-1 {
            background: linear-gradient(135deg, #F7C948 0%, #FF4D8D 100%);
        }
        
        .gradient-bg-2 {
            background: linear-gradient(135deg, #351235 0%, #00BFA6 100%);
        }
        
        .gradient-bg-3 {
            background: linear-gradient(135deg, #7C3AED 0%, #FF4D8D 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #00BFA6, #F7C948, #FF4D8D);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .modern-card {
            background: linear-gradient(180deg, rgba(255, 247, 226, 0.98), rgba(255, 237, 202, 0.94));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(247, 201, 72, 0.34);
            transition: all 0.3s ease;
            box-shadow: 0 16px 36px rgba(16, 7, 25, 0.18);
        }
        
        .modern-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 48px rgba(0, 191, 166, 0.16), 0 0 0 1px rgba(247, 201, 72, 0.20);
        }

        .mesh-hero {
            position: relative;
            isolation: isolate;
        }

        .mesh-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(120deg, rgba(255, 77, 141, 0.28) 0%, rgba(255, 77, 141, 0) 36%),
                linear-gradient(235deg, rgba(0, 191, 166, 0.26) 0%, rgba(0, 191, 166, 0) 42%),
                linear-gradient(180deg, rgba(247, 201, 72, 0.10) 0%, rgba(247, 201, 72, 0) 55%);
            filter: saturate(1.05);
            opacity: 0.95;
            z-index: 0;
        }

        .soft-ring {
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.14) inset,
                0 10px 30px rgba(0, 0, 0, 0.22);
        }

        .pill {
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .sticky-cta {
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .floating { animation: none !important; }
            .particle { animation: none !important; }
            .card-flip-inner { transition: none !important; }
        }
        
        /* Enhanced button animations */
        .btn-gradient {
            background: linear-gradient(135deg, #351235 0%, #7C3AED 42%, #00BFA6 100%);
            background-size: 200% 200%;
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 191, 166, 0.30);
        }
        
        /* Pulse animation for important buttons */
        .pulse-effect {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        /* Glow effect on hover */
        .glow-effect:hover {
            box-shadow: 0 0 20px rgba(0, 191, 166, 0.22), 0 0 40px rgba(247, 201, 72, 0.20);
        }
        
        /* Enhanced service icon animations */
        .service-icon-enhanced {
            transition: all 0.4s ease;
            position: relative;
        }
        
        .service-card:hover .service-icon-enhanced {
            transform: rotate(360deg) scale(1.2);
        }
        
        /* Smooth card reveal animation */
        .reveal-card {
            opacity: 0;
            transform: translateY(20px);
            animation: revealUp 0.6s ease forwards;
        }
        
        @keyframes revealUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Stagger animation for cards */
        .reveal-card:nth-child(1) { animation-delay: 0.1s; }
        .reveal-card:nth-child(2) { animation-delay: 0.2s; }
        .reveal-card:nth-child(3) { animation-delay: 0.3s; }
        .reveal-card:nth-child(4) { animation-delay: 0.4s; }
        
        /* Enhanced navbar animation */
        .navbar-link {
            position: relative;
            overflow: hidden;
        }
        
        .navbar-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
            transition: left 0.5s;
        }
        
        .navbar-link:hover::before {
            left: 100%;
        }
        
        .card-hover {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 191, 166, 0.18);
        }
        
        .star-rating {
            color: #F7C948;
        }
        
        .navbar-link {
            position: relative;
        }
        
        .navbar-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #F7C948;
            transition: width 0.3s;
        }
        
        .navbar-link:hover::after {
            width: 100%;
        }
        
        .active-link::after {
            width: 100%;
        }
        
        .testimonial-card {
            transition: transform 0.3s;
        }
        
        .testimonial-card:hover {
            transform: scale(1.02);
        }
        
        .service-icon {
            transition: transform 0.3s;
        }
        
        .service-card:hover .service-icon {
            transform: rotate(10deg) scale(1.1);
        }
        
        .mystic-shadow {
            box-shadow: 0 4px 20px rgba(0, 191, 166, 0.16);
        }
        
        .gold-glow {
            box-shadow: 0 0 16px rgba(247, 201, 72, 0.45);
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: #00BFA6;
            box-shadow: 0 0 0 2px rgba(0, 191, 166, 0.24);
        }
        
        .social-icon {
            transition: transform 0.3s, color 0.3s;
        }
        
        .social-icon:hover {
            transform: translateY(-3px);
            color: #F7C948;
        }
        
        /* Carrusel de servicios */
        .services-carousel {
            will-change: transform;
            transition: transform 0.5s ease-in-out;
            display: flex;
        }
        
        .service-card {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }
        
        @media (min-width: 768px) {
            .service-card {
                flex: 0 0 33.333%;
                max-width: 33.333%;
                width: 33.333%;
            }
        }
        
        /* Contenedor del carrusel */
        .services-carousel-container {
            overflow: hidden;
            width: 100%;
        }
        
        /* Asegurar que los indicadores sean interactivos */
        .services-dot {
            transition: all 0.3s ease;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .services-dot:hover {
            transform: scale(1.2);
        }
        
        .services-dot.active {
            transform: scale(1.1);
            background-color: #4A1A4A !important;
        }
        
        /* Mejorar la experiencia táctil */
        .services-carousel {
            touch-action: pan-y;
            user-select: none;
        }
        
        /* Carrusel de tipos de consulta */
        .consultation-carousel {
            will-change: transform;
            transition: transform 0.5s ease-in-out;
            display: flex;
        }
        
        .consultation-card {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }
        
        @media (min-width: 640px) {
            .consultation-card {
                flex: 0 0 50%;
                max-width: 50%;
                width: 50%;
            }
        }
        
        @media (min-width: 1024px) {
            .consultation-card {
                flex: 0 0 33.333%;
                max-width: 33.333%;
                width: 33.333%;
            }
        }
        
        /* Contenedor del carrusel de consultas */
        .consultation-carousel-container {
            overflow: hidden;
            width: 100%;
        }
        
        /* Indicadores del carrusel de consultas */
        .consultation-dot {
            transition: all 0.3s ease;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .consultation-dot:hover {
            transform: scale(1.2);
        }
        
        .consultation-dot.active {
            transform: scale(1.1);
            background-color: #4A1A4A !important;
        }
        
        /* Mejorar la experiencia táctil para consultas */
        .consultation-carousel {
            touch-action: pan-y;
            user-select: none;
        }
        
        /* Carrusel de cartas del tarot */
        .tarot-carousel {
            will-change: transform;
            transition: transform 0.5s ease-in-out;
            display: flex;
        }
        
        .tarot-card-item {
            flex: 0 0 50%;
            max-width: 50%;
            width: 50%;
        }
        
        @media (min-width: 640px) {
            .tarot-card-item {
                flex: 0 0 33.333%;
                max-width: 33.333%;
                width: 33.333%;
            }
        }
        
        @media (min-width: 768px) {
            .tarot-card-item {
                flex: 0 0 25%;
                max-width: 25%;
                width: 25%;
            }
        }
        
        @media (min-width: 1024px) {
            .tarot-card-item {
                flex: 0 0 20%;
                max-width: 20%;
                width: 20%;
            }
        }
        
        /* Contenedor del carrusel de tarot */
        .tarot-carousel-container {
            overflow: hidden;
            width: 100%;
        }
        
        /* Indicadores del carrusel  tarot */
        .tarot-dot {
            transition: all 0.3s ease;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .tarot-dot:hover {
            transform: scale(1.2);
        }
        
        .tarot-dot.active {
            transform: scale(1.1);
            background-color: #4A1A4A !important;
        }
        
        /* Mejorar la experiencia táctil para tarot */
        .tarot-carousel {
            touch-action: pan-y;
            user-select: none;
        }
        
        /* Hover effect for tarot cards */
        .tarot-card-item .tarot-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .tarot-card-item .tarot-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(74, 26, 74, 0.3);
        }