* {
            font-family: 'Inter', sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #0a0a0a;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* Custom Button Styles */
        .btn-cta {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.5), 0 10px 40px rgba(34, 197, 94, 0.3);
            animation: pulse-glow 2s infinite;
            position: relative;
            overflow: hidden;
        }

        .btn-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shine 3s infinite;
        }

        .btn-cta:hover {
            transform: scale(1.05);
            box-shadow: 0 0 50px rgba(34, 197, 94, 0.7), 0 15px 60px rgba(34, 197, 94, 0.5);
        }

        /* Card Glow Effect */
        .card-glow {
            position: relative;
            transition: all 0.3s ease;
        }

        .card-glow:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(34, 197, 94, 0.2);
        }

        /* Bonus Box */
        .bonus-box {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
            border: 2px dashed rgba(251, 191, 36, 0.4);
        }

        /* Risk Zero Box */
        .risk-zero-box {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 2px solid rgba(34, 197, 94, 0.3);
        }

        /* Scarcity Bar */
        .scarcity-bar {
            background: linear-gradient(90deg, #22c55e 0%, #fbbf24 50%, #ef4444 100%);
        }

        /* Chat Bubble */
        .chat-bubble {
            /* Usamos una curva cubic-bezier para darle ese "rebote" natural de WhatsApp */
            animation: bubbleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            opacity: 0;
            transform: scale(0.8) translateY(10px);
        }

        /* Si el mensaje es nuestro (enviado), el rebote sale desde la derecha */
        .chat-bubble.justify-end {
            transform-origin: bottom right;
        }

        /* Si el mensaje es del cliente (recibido), el rebote sale desde la izquierda */
        .chat-bubble.justify-start {
            transform-origin: bottom left;
        }

        /* La magia que los hace aparecer */
        @keyframes bubbleIn {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(10px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Fade In Up */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Background Pattern */
        .bg-pattern {
            background-image:
                radial-gradient(rgba(34, 197, 94, 0.1) 1px, transparent 1px),
                radial-gradient(rgba(34, 197, 94, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
        }

        /* Sticky CTA */
        .sticky-cta {
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

        .sticky-cta.visible {
            transform: translateY(0);
        }

        /* Checkmark */
        .checkmark-elite {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #22c55e;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .checkmark-elite::after {
            content: '✓';
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        /* X Mark */
        .xmark-elite {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #dc2626;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .xmark-elite::after {
            content: '✕';
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        /* Save Badge */
        .save-badge {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Testimonial Card */
        .testimonial-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(34, 197, 94, 0.2);
        }

        /* Price Strike */
        .price-strike {
            text-decoration: line-through;
            color: #6b7280;
        }

        /* Guarantee Badge */
        .guarantee-badge {
            background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
            box-shadow: 0 10px 40px rgba(251, 191, 36, 0.3);
        }

        /* Urgency Timer */
        .urgency-timer {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            animation: pulse-red 1s infinite;
        }

        @keyframes pulse-red {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        /* Sales Notification */
        .sales-notification {
            animation: slideIn 0.5s ease-out;
        }

        /* Gradient Classes */
        .gradient-green {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        }

        .gradient-gold {
            background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        }

        .gradient-orange {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        }

        .gradient-red {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }

        /* Phone Mockup Styles */
        .phone-mockup {
            background: linear-gradient(180deg, #1a1f2e 0%, #0d1117 100%);
            border: 3px solid #2d3748;
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.7),
                inset 0 0 30px rgba(0, 0, 0, 0.5);
        }

        .phone-notch {
            background: #0d1117;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        .chat-bubble-sent {
            background: linear-gradient(135deg, #005c4b 0%, #00a884 100%);
            border-radius: 0 12px 12px 12px;
        }

        .chat-bubble-received {
            background: #202c33;
            border-radius: 12px 12px 12px 0;
        }

        /* Floating Badge */
        .floating-badge {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(34, 197, 94, 0.3);
            box-shadow: 0 10px 40px rgba(34, 197, 94, 0.2);
        }