.elementor-8 .elementor-element.elementor-element-b6c6e9e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IJ Funnels | Sistema de Agendamiento para Tatuadores</title>
    <meta name="description"
        content="Deja de ser el secretario de tu propio estudio. Landing Page + Sistema de Agendamiento automatizado exclusivo para tatuadores.">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap"
        rel="stylesheet">
    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400,300&display=swap" rel="stylesheet">

    <!-- GSAP + ScrollTrigger -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

    <style>
        /* ============================================
           IJ FUNNELS — NEON SYSTEM CSS
           Prefix: #ijf-lp (Elementor-safe)
           ============================================ */

        /* --- Reset & Base --- */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #ijf-lp {
            --purple: #8A2BE2;
            --purple-glow: rgba(138, 43, 226, 0.4);
            --purple-dim: rgba(138, 43, 226, 0.15);
            --bg: #0A0A0A;
            --bg-card: rgba(255, 255, 255, 0.03);
            --text: #FFFFFF;
            --text-dim: #6B7280;
            --border: rgba(255, 255, 255, 0.08);
            --serif: 'Playfair Display', Georgia, serif;
            --sans: 'Satoshi', 'Inter', sans-serif;

            background-color: var(--bg) !important;
            color: var(--text) !important;
            font-family: var(--sans) !important;
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        #ijf-lp * {
            font-family: var(--sans) !important;
        }

        #ijf-lp h1,
        #ijf-lp h2 {
            font-family: var(--serif) !important;
        }

        #ijf-lp a {
            text-decoration: none;
            color: inherit;
        }

        #ijf-lp img {
            max-width: 100%;
            display: block;
        }

        /* --- Utility --- */
        #ijf-lp .ijf-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        #ijf-lp .ijf-badge {
            display: inline-block;
            padding: 6px 18px;
            border-radius: 999px;
            background: var(--purple-dim);
            border: 1px solid rgba(138, 43, 226, 0.3);
            color: var(--purple);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        #ijf-lp .ijf-gradient-text {
            background: linear-gradient(135deg, var(--purple), #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        #ijf-lp .ijf-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 20px 48px;
            border-radius: 999px;
            background: var(--purple);
            color: #fff !important;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            box-shadow: 0 0 30px var(--purple-glow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        #ijf-lp .ijf-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 0 50px var(--purple-glow), 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        #ijf-lp .ijf-btn-ghost {
            background: transparent;
            border: 1px solid var(--border);
            box-shadow: none;
        }

        #ijf-lp .ijf-btn-ghost:hover {
            border-color: var(--purple);
            box-shadow: 0 0 20px var(--purple-glow);
        }

        /* --- Glass Card --- */
        #ijf-lp .ijf-card {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 40px;
            transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        #ijf-lp .ijf-card:hover {
            transform: translateY(-8px);
            border-color: rgba(138, 43, 226, 0.4);
            box-shadow: 0 0 30px var(--purple-glow);
        }

        /* --- Section Spacing --- */
        #ijf-lp .ijf-section {
            padding: 120px 0;
            position: relative;
        }

        #ijf-lp .ijf-section-title {
            font-size: clamp(2.2rem, 4vw, 3.5rem);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 20px;
            color: var(--text) !important;
        }

        #ijf-lp .ijf-section-sub {
            font-size: 1.15rem;
            color: var(--text-dim) !important;
            max-width: 600px;
            line-height: 1.7;
        }

        /* ======================
           SECTION 1: HERO
           ====================== */
        #ijf-lp .ijf-hero {
            padding: 180px 0 120px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #ijf-lp .ijf-hero::before {
            content: '';
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        #ijf-lp .ijf-hero-content {
            position: relative;
            z-index: 1;
        }

        #ijf-lp .ijf-hero h1 {
            font-size: clamp(2.8rem, 6vw, 5.5rem);
            font-weight: 900;
            line-height: 1.05;
            margin: 24px 0;
            letter-spacing: -2px;
        }

        #ijf-lp .ijf-hero-sub {
            font-size: 1.25rem;
            color: var(--text-dim) !important;
            max-width: 700px;
            margin: 0 auto 48px;
            line-height: 1.7;
        }

        #ijf-lp .ijf-hero-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 80px;
        }

        /* Hero Mockup */
        #ijf-lp .ijf-mockup-wrapper {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }

        #ijf-lp .ijf-mockup-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, var(--purple-glow) 0%, transparent 70%);
            filter: blur(80px);
            z-index: 0;
        }

        #ijf-lp .ijf-mockup-desktop {
            position: relative;
            z-index: 1;
            background: #141414;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
        }

        #ijf-lp .ijf-mockup-desktop .ijf-browser-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #1a1a1a;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        #ijf-lp .ijf-mockup-desktop .ijf-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        #ijf-lp .ijf-mockup-desktop .ijf-screen {
            aspect-ratio: 16 / 9;
            background: linear-gradient(135deg, #0f0f0f, #1a1a2e);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-dim);
            font-size: 14px;
            position: relative;
            overflow: hidden;
        }

        #ijf-lp .ijf-mockup-desktop .ijf-screen-content {
            text-align: center;
            padding: 40px;
        }

        #ijf-lp .ijf-mockup-phone {
            position: absolute;
            bottom: -30px;
            right: -40px;
            width: 200px;
            z-index: 2;
            background: #141414;
            border-radius: 28px;
            border: 2px solid rgba(255, 255, 255, 0.12);
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
            transform: rotate(3deg);
        }

        #ijf-lp .ijf-mockup-phone .ijf-phone-notch {
            width: 40%;
            height: 20px;
            background: #0a0a0a;
            border-radius: 0 0 12px 12px;
            margin: 0 auto;
        }

        #ijf-lp .ijf-mockup-phone .ijf-phone-screen {
            aspect-ratio: 9 / 19.5;
            background: linear-gradient(180deg, #0f0f0f, #1a1a2e);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            font-size: 10px;
            color: var(--text-dim);
        }

        /* ======================
           SECTION 2: PAIN POINTS
           ====================== */
        #ijf-lp .ijf-pain {
            background: #080808;
        }

        #ijf-lp .ijf-pain-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }

        #ijf-lp .ijf-pain-quotes {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        #ijf-lp .ijf-quote {
            padding: 28px 32px;
            background: rgba(255, 255, 255, 0.02);
            border-left: 3px solid var(--purple);
            border-radius: 0 16px 16px 0;
            font-size: 1.1rem;
            font-style: italic;
            color: var(--text-dim) !important;
            opacity: 0;
            transform: translateY(30px);
        }

        #ijf-lp .ijf-pain-visual {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            aspect-ratio: 4 / 5;
            background: #111;
        }

        #ijf-lp .ijf-pain-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: filter 1.2s ease;
        }

        #ijf-lp .ijf-pain-visual.is-colored img {
            filter: grayscale(0%);
        }

        #ijf-lp .ijf-pain-closer {
            text-align: center;
            margin-top: 60px;
            font-size: 1.2rem;
            color: var(--text-dim);
        }

        #ijf-lp .ijf-pain-closer strong {
            color: var(--purple);
        }

        /* ======================
           SECTION 3: SOLUTION / STEPS
           ====================== */
        #ijf-lp .ijf-steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-top: 60px;
            position: relative;
        }

        #ijf-lp .ijf-steps-grid::before {
            content: '';
            position: absolute;
            top: 48px;
            left: 15%;
            right: 15%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--purple), transparent);
            opacity: 0.3;
        }

        #ijf-lp .ijf-step {
            text-align: center;
            opacity: 0;
            transform: translateY(40px);
        }

        #ijf-lp .ijf-step-num {
            width: 96px;
            height: 96px;
            border-radius: 24px;
            background: var(--purple-dim);
            border: 1px solid rgba(138, 43, 226, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            font-size: 2rem;
            font-weight: 900;
            color: var(--purple);
            transition: all 0.5s ease;
        }

        #ijf-lp .ijf-step:hover .ijf-step-num {
            background: var(--purple);
            color: white;
            box-shadow: 0 0 40px var(--purple-glow);
        }

        #ijf-lp .ijf-step h4 {
            font-size: 1.25rem;
            font-weight: 800;
            margin-bottom: 12px;
            color: var(--text) !important;
        }

        #ijf-lp .ijf-step p {
            color: var(--text-dim) !important;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* ======================
           SECTION 4: BENEFITS
           ====================== */
        #ijf-lp .ijf-benefits {
            background: #080808;
        }

        #ijf-lp .ijf-benefits-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: 60px;
        }

        #ijf-lp .ijf-benefit-card {
            opacity: 0;
            transform: scale(0.92);
        }

        #ijf-lp .ijf-benefit-card .ijf-benefit-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: var(--purple-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-size: 24px;
        }

        #ijf-lp .ijf-benefit-card h3 {
            font-size: 1.35rem;
            font-weight: 800;
            margin-bottom: 12px;
            color: var(--text) !important;
        }

        #ijf-lp .ijf-benefit-card p {
            color: var(--text-dim) !important;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* ======================
           SECTION 5: DEMO
           ====================== */
        #ijf-lp .ijf-demo-visual {
            position: relative;
            max-width: 900px;
            margin: 60px auto 0;
        }

        #ijf-lp .ijf-demo-visual::before {
            content: '';
            position: absolute;
            inset: -40px;
            background: radial-gradient(ellipse at center, var(--purple-glow), transparent 70%);
            filter: blur(60px);
            z-index: 0;
        }

        #ijf-lp .ijf-demo-screens {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        #ijf-lp .ijf-demo-screen {
            background: #111;
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            transition: transform 0.4s ease;
        }

        #ijf-lp .ijf-demo-screen:hover {
            transform: translateY(-10px);
        }

        #ijf-lp .ijf-demo-screen-header {
            padding: 12px 16px;
            background: #1a1a1a;
            border-bottom: 1px solid var(--border);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--purple);
        }

        #ijf-lp .ijf-demo-screen-body {
            padding: 24px;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        #ijf-lp .ijf-demo-line {
            height: 10px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.06);
        }

        #ijf-lp .ijf-demo-line.short {
            width: 60%;
        }

        #ijf-lp .ijf-demo-line.accent {
            background: var(--purple-dim);
            width: 40%;
        }

        #ijf-lp .ijf-demo-btn-placeholder {
            margin-top: auto;
            padding: 10px;
            border-radius: 12px;
            background: var(--purple);
            text-align: center;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ======================
           SECTION 6: CTA / PRICING
           ====================== */
        #ijf-lp .ijf-pricing {
            position: relative;
            overflow: hidden;
        }

        #ijf-lp .ijf-pricing::before {
            content: '';
            position: absolute;
            bottom: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 600px;
            background: radial-gradient(circle, rgba(138, 43, 226, 0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        #ijf-lp .ijf-price-card-wrapper {
            max-width: 560px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        #ijf-lp .ijf-price-card-border {
            padding: 2px;
            border-radius: 32px;
            background: linear-gradient(135deg, var(--purple), #c084fc, var(--purple));
            box-shadow: 0 0 60px var(--purple-glow);
            animation: ijf-glow-pulse 3s ease-in-out infinite alternate;
        }

        @keyframes ijf-glow-pulse {
            0% {
                box-shadow: 0 0 40px var(--purple-glow);
            }

            100% {
                box-shadow: 0 0 80px var(--purple-glow), 0 0 120px rgba(138, 43, 226, 0.1);
            }
        }

        #ijf-lp .ijf-price-card-inner {
            background: var(--bg);
            border-radius: 30px;
            padding: 56px 48px;
            text-align: center;
        }

        #ijf-lp .ijf-price-amount {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;
            margin: 24px 0;
        }

        #ijf-lp .ijf-price-old {
            font-size: 1.5rem;
            color: var(--text-dim);
            text-decoration: line-through;
        }

        #ijf-lp .ijf-price-current {
            font-size: 5rem;
            font-weight: 900;
            color: var(--text);
            line-height: 1;
        }

        #ijf-lp .ijf-price-currency {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--purple);
        }

        #ijf-lp .ijf-price-label {
            color: var(--purple);
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 32px;
        }

        #ijf-lp .ijf-checklist {
            list-style: none;
            text-align: left;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        #ijf-lp .ijf-checklist li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.95rem;
            color: #d1d5db !important;
        }

        #ijf-lp .ijf-checklist li::before {
            content: '✓';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: var(--purple-dim);
            color: var(--purple);
            font-weight: 900;
            font-size: 12px;
            flex-shrink: 0;
        }

        #ijf-lp .ijf-price-urgency {
            margin-top: 24px;
            padding: 14px 20px;
            background: var(--purple-dim);
            border: 1px solid rgba(138, 43, 226, 0.3);
            border-radius: 12px;
            color: var(--purple);
            font-weight: 700;
            font-size: 0.9rem;
        }

        #ijf-lp .ijf-price-note {
            margin-top: 24px;
            color: var(--text-dim);
            font-size: 0.85rem;
        }

        /* ======================
           FOOTER
           ====================== */
        #ijf-lp .ijf-footer {
            border-top: 1px solid var(--border);
            padding: 60px 0;
            text-align: center;
        }

        #ijf-lp .ijf-footer-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 16px;
            font-weight: 800;
            font-size: 1.2rem;
        }

        #ijf-lp .ijf-footer-logo .ijf-logo-mark {
            width: 32px;
            height: 32px;
            background: var(--purple);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 14px;
        }

        #ijf-lp .ijf-footer p {
            color: var(--text-dim) !important;
            font-size: 0.85rem;
        }

        /* ======================
           STICKY CTA (MOBILE)
           ====================== */
        #ijf-lp .ijf-sticky-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 20px;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            z-index: 100;
        }

        #ijf-lp .ijf-sticky-cta .ijf-btn {
            width: 100%;
            justify-content: center;
            padding: 16px;
            font-size: 14px;
        }

        /* ======================
           RESPONSIVE
           ====================== */
        @media (max-width: 768px) {
            #ijf-lp .ijf-hero {
                padding: 140px 0 80px;
            }

            #ijf-lp .ijf-hero h1 {
                letter-spacing: -1px;
            }

            #ijf-lp .ijf-section {
                padding: 80px 0;
            }

            #ijf-lp .ijf-pain-grid {
                grid-template-columns: 1fr;
            }

            #ijf-lp .ijf-pain-visual {
                aspect-ratio: 16 / 9;
                max-height: 300px;
            }

            #ijf-lp .ijf-steps-grid {
                grid-template-columns: 1fr;
                gap: 48px;
            }

            #ijf-lp .ijf-steps-grid::before {
                display: none;
            }

            #ijf-lp .ijf-benefits-grid {
                grid-template-columns: 1fr;
            }

            #ijf-lp .ijf-demo-screens {
                grid-template-columns: 1fr;
            }

            #ijf-lp .ijf-mockup-phone {
                display: none;
            }

            #ijf-lp .ijf-hero-buttons {
                flex-direction: column;
                align-items: stretch;
                padding: 0 20px;
            }

            #ijf-lp .ijf-btn {
                justify-content: center;
            }

            #ijf-lp .ijf-price-card-inner {
                padding: 40px 24px;
            }

            #ijf-lp .ijf-price-current {
                font-size: 3.5rem;
            }

            #ijf-lp .ijf-sticky-cta {
                display: block;
            }
        }
    </style>
</head>

<body>

    <div id="ijf-lp">

        <!-- ====================== -->
        <!-- SECTION 1: HERO        -->
        <!-- ====================== -->
        <section class="ijf-hero">
            <div class="ijf-wrap ijf-hero-content">
                <span class="ijf-badge">Sistema exclusivo para tatuadores</span>

                <h1 class="ijf-reveal-text">
                    Dejá de ser el secretario<br>
                    <span class="ijf-gradient-text">de tu propio estudio.</span>
                </h1>

                <p class="ijf-hero-sub">
                    Un sistema que filtra curiosos, agenda sesiones y te devuelve las horas que hoy perdés respondiendo
                    DMs.
                </p>

                <div class="ijf-hero-buttons">
                    <a href="#precios" class="ijf-btn">Quiero mi sistema →</a>
                    <a href="#como-funciona" class="ijf-btn ijf-btn-ghost">¿Cómo funciona?</a>
                </div>

                <!-- Mockup -->
                <div class="ijf-mockup-wrapper">
                    <div class="ijf-mockup-desktop">
                        <div class="ijf-browser-bar">
                            <span class="ijf-dot" style="background:#ff5f57"></span>
                            <span class="ijf-dot" style="background:#febc2e"></span>
                            <span class="ijf-dot" style="background:#28c840"></span>
                        </div>
                        <div class="ijf-screen">
                            <div class="ijf-screen-content">
                                <div
                                    style="font-family: var(--serif) !important; font-size: 28px; font-weight: 900; margin-bottom: 12px; color: white;">
                                    Tu Landing de Autor</div>
                                <p
                                    style="color: var(--text-dim); max-width: 400px; margin: 0 auto 24px; font-size: 13px;">
                                    Portafolio premium · Calendario integrado · Filtro de clientes
                                </p>
                                <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
                                    <span
                                        style="padding: 6px 16px; background: var(--purple); border-radius: 999px; font-size: 11px; font-weight: 700;">AGENDAR
                                        TURNO</span>
                                    <span
                                        style="padding: 6px 16px; background: rgba(255,255,255,0.08); border-radius: 999px; font-size: 11px;">VER
                                        PORTAFOLIO</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ijf-mockup-phone">
                        <div class="ijf-phone-notch"></div>
                        <div class="ijf-phone-screen">
                            <div style="font-weight: 900; font-size: 14px; margin-bottom: 8px; color: white;">Tu Estudio
                            </div>
                            <div style="font-size: 9px; margin-bottom: 12px;">Agenda tu sesión ↓</div>
                            <div
                                style="width: 100%; padding: 8px; background: var(--purple); border-radius: 999px; font-size: 9px; font-weight: 800; text-align: center;">
                                RESERVAR</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ====================== -->
        <!-- SECTION 2: PAIN POINTS -->
        <!-- ====================== -->
        <section class="ijf-section ijf-pain" id="problema">
            <div class="ijf-wrap">
                <div style="text-align: center; margin-bottom: 60px;">
                    <h2 class="ijf-section-title ijf-reveal-text">¿Te suena familiar?</h2>
                </div>

                <div class="ijf-pain-grid">
                    <div class="ijf-pain-quotes">
                        <div class="ijf-quote">
                            "Paso 3 horas al día respondiendo lo mismo por DM. Precio, disponibilidad, cuidados...
                            siempre lo mismo."
                        </div>
                        <div class="ijf-quote">
                            "Me cancelan turnos a último momento sin haber pagado nada. Pierdo tiempo y dinero."
                        </div>
                        <div class="ijf-quote">
                            "Mis mejores piezas están enterradas en un feed de Instagram que nadie scrollea hasta el
                            final."
                        </div>
                        <div class="ijf-quote">
                            "A veces tengo 20 mensajes sin leer y no sé cuáles son clientes reales y cuáles solo
                            curiosos."
                        </div>
                    </div>

                    <div class="ijf-pain-visual ijf-bw-image">
                        <!-- REEMPLAZAR con tu imagen de tatuador -->
                        <img src="https://images.unsplash.com/photo-1598371839696-5c5bb00bdc28?w=800&q=80"
                            alt="Tatuador trabajando en su estudio" loading="lazy">
                    </div>
                </div>

                <p class="ijf-pain-closer">
                    Si te identificás con al menos una... <strong>este sistema es para vos.</strong>
                </p>
            </div>
        </section>

        <!-- ====================== -->
        <!-- SECTION 3: SOLUTION    -->
        <!-- ====================== -->
        <section class="ijf-section" id="como-funciona">
            <div class="ijf-wrap">
                <div style="text-align: center;">
                    <span class="ijf-badge" style="margin-bottom: 20px;">Metodología</span>
                    <h2 class="ijf-section-title ijf-reveal-text">Así funciona tu nuevo flujo de trabajo</h2>
                    <p class="ijf-section-sub" style="margin: 0 auto;">
                        En 3 pasos simples, pasás del caos de los DMs a un sistema que trabaja por vos.
                    </p>
                </div>

                <div class="ijf-steps-grid">
                    <div class="ijf-step">
                        <div class="ijf-step-num">01</div>
                        <h4>Descubrimiento</h4>
                        <p>Tu cliente entra a tu Web de Autor. Ve tu portafolio, tus precios base y tu disponibilidad
                            real. Sin preguntar nada por DM.</p>
                    </div>
                    <div class="ijf-step">
                        <div class="ijf-step-num">02</div>
                        <h4>Reserva Automática</h4>
                        <p>Elige fecha y hora desde tu calendario integrado. Recibe confirmación instantánea sin que vos
                            muevas un dedo.</p>
                    </div>
                    <div class="ijf-step">
                        <div class="ijf-step-num">03</div>
                        <h4>Post-Sesión</h4>
                        <p>Al finalizar el tatuaje, el sistema envía automáticamente la guía de cuidados personalizada
                            vía Make.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ====================== -->
        <!-- SECTION 4: BENEFITS    -->
        <!-- ====================== -->
        <section class="ijf-section ijf-benefits" id="servicios">
            <div class="ijf-wrap">
                <div style="text-align: center;">
                    <span class="ijf-badge" style="margin-bottom: 20px;">Ecosistema completo</span>
                    <h2 class="ijf-section-title ijf-reveal-text">Todo lo que incluye tu sistema</h2>
                    <p class="ijf-section-sub" style="margin: 0 auto;">
                        Cada pieza está diseñada para maximizar tu tiempo y tus ingresos.
                    </p>
                </div>

                <div class="ijf-benefits-grid">
                    <div class="ijf-benefit-card ijf-card">
                        <div class="ijf-benefit-icon">🌐</div>
                        <h3>Portafolio 24/7</h3>
                        <p>Una web premium que exhibe tu mejor trabajo sin depender del algoritmo de Instagram. Tu arte,
                            siempre visible.</p>
                    </div>
                    <div class="ijf-benefit-card ijf-card">
                        <div class="ijf-benefit-icon">🛡️</div>
                        <h3>Filtro Anti-Curiosos</h3>
                        <p>Solo llegan clientes que ya vieron tus precios y están listos para agendar. Cero pérdida de
                            tiempo con "¿cuánto sale?".</p>
                    </div>
                    <div class="ijf-benefit-card ijf-card">
                        <div class="ijf-benefit-icon">📅</div>
                        <h3>Agenda Google Calendar</h3>
                        <p>Sincronizada con tu celular. Bloqueá días y horarios en un segundo. Sin WhatsApp de por
                            medio.</p>
                    </div>
                    <div class="ijf-benefit-card ijf-card">
                        <div class="ijf-benefit-icon">📍</div>
                        <h3>SEO Local en Google</h3>
                        <p>Que tu estudio aparezca primero cuando busquen "tatuador cerca de mí". Más clientes
                            orgánicos, menos dependencia de redes.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ====================== -->
        <!-- SECTION 5: DEMO        -->
        <!-- ====================== -->
        <section class="ijf-section" id="demo">
            <div class="ijf-wrap">
                <div style="text-align: center;">
                    <span class="ijf-badge" style="margin-bottom: 20px;">Vista previa</span>
                    <h2 class="ijf-section-title ijf-reveal-text">Mirá cómo se ve en acción</h2>
                    <p class="ijf-section-sub" style="margin: 0 auto;">
                        Del descubrimiento al turno confirmado. Tres pantallas, cero esfuerzo manual.
                    </p>
                </div>

                <div class="ijf-demo-visual">
                    <div class="ijf-demo-screens">
                        <!-- Screen 1: Landing -->
                        <div class="ijf-demo-screen">
                            <div class="ijf-demo-screen-header">01 — Tu Landing</div>
                            <div class="ijf-demo-screen-body">
                                <div class="ijf-demo-line" style="width: 50%;"></div>
                                <div class="ijf-demo-line"></div>
                                <div class="ijf-demo-line short"></div>
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0;">
                                    <div
                                        style="aspect-ratio: 1; background: rgba(255,255,255,0.04); border-radius: 8px;">
                                    </div>
                                    <div
                                        style="aspect-ratio: 1; background: rgba(255,255,255,0.04); border-radius: 8px;">
                                    </div>
                                </div>
                                <div class="ijf-demo-btn-placeholder">Ver Portafolio</div>
                            </div>
                        </div>

                        <!-- Screen 2: Calendario -->
                        <div class="ijf-demo-screen">
                            <div class="ijf-demo-screen-header">02 — Calendario</div>
                            <div class="ijf-demo-screen-body">
                                <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;">
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">L</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">M</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">M</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">J</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">V</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">S</span>
                                    <span style="font-size:8px; text-align:center; color:var(--text-dim);">D</span>
                                </div>
                                <div
                                    style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px;">
                                    <div
                                        style="aspect-ratio:1; background: rgba(255,255,255,0.04); border-radius: 6px;">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: rgba(255,255,255,0.04); border-radius: 6px;">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: var(--purple-dim); border-radius: 6px; border: 1px solid var(--purple);">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: rgba(255,255,255,0.04); border-radius: 6px;">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: var(--purple-dim); border-radius: 6px; border: 1px solid var(--purple);">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: rgba(255,255,255,0.04); border-radius: 6px;">
                                    </div>
                                    <div
                                        style="aspect-ratio:1; background: rgba(255,255,255,0.06); border-radius: 6px;">
                                    </div>
                                </div>
                                <div class="ijf-demo-line accent" style="margin-top: 8px;"></div>
                                <div class="ijf-demo-btn-placeholder">Confirmar Turno</div>
                            </div>
                        </div>

                        <!-- Screen 3: Confirmación -->
                        <div class="ijf-demo-screen">
                            <div class="ijf-demo-screen-header">03 — Confirmado ✓</div>
                            <div class="ijf-demo-screen-body"
                                style="align-items: center; justify-content: center; text-align: center;">
                                <div
                                    style="width: 64px; height: 64px; border-radius: 50%; background: var(--purple-dim); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px;">
                                    ✓</div>
                                <div style="font-weight: 800; font-size: 14px; color: white;">¡Turno Reservado!</div>
                                <div style="font-size: 11px; color: var(--text-dim); margin-top: 6px;">Martes 15 ·
                                    14:00hs</div>
                                <div style="font-size: 10px; color: var(--text-dim); margin-top: 4px;">Recordatorio
                                    enviado 📩</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ====================== -->
        <!-- SECTION 6: PRICING     -->
        <!-- ====================== -->
        <section class="ijf-section ijf-pricing" id="precios">
            <div class="ijf-wrap">
                <div style="text-align: center; margin-bottom: 48px;">
                    <h2 class="ijf-section-title ijf-reveal-text">Todo tu ecosistema digital por</h2>
                </div>

                <div class="ijf-price-card-wrapper">
                    <div class="ijf-price-card-border">
                        <div class="ijf-price-card-inner">
                            <span class="ijf-badge">Oferta de Lanzamiento — Cupos Limitados</span>

                            <div class="ijf-price-amount">
                                <span class="ijf-price-old">$497</span>
                                <span class="ijf-price-current" id="ijf-price-counter">$147</span>
                                <span class="ijf-price-currency">USD</span>
                            </div>

                            <div class="ijf-price-label">Pago Único</div>

                            <ul class="ijf-checklist">
                                <li>Landing Page personalizada con tu estilo</li>
                                <li>Calendario integrado (Google Calendar)</li>
                                <li>Automatización post-tatuaje (Make)</li>
                                <li>Optimización Google Maps</li>
                                <li>Soporte 7 días post-lanzamiento</li>
                            </ul>

                            <a href="https://wa.me/TUNUMERO?text=Hola!%20Quiero%20reservar%20mi%20sistema%20IJ%20Funnels"
                                class="ijf-btn" style="width: 100%; justify-content: center;">
                                ¡Reservar mi cupo!
                            </a>

                            <div class="ijf-price-urgency">
                                ⚡ "Recuperás tu inversión con solo 1 o 2 tatuajes."
                            </div>

                            <p class="ijf-price-note">
                                Cupos limitados para garantizar la calidad de cada implementación.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ====================== -->
        <!-- FOOTER                 -->
        <!-- ====================== -->
        <footer class="ijf-footer">
            <div class="ijf-wrap">
                <div class="ijf-footer-logo">
                    <span class="ijf-logo-mark">J</span>
                    <span>IJ FUNNELS</span>
                </div>
                <p>Elevando el estándar del negocio del tatuaje a través de la automatización. © 2024</p>
            </div>
        </footer>

        <!-- ====================== -->
        <!-- STICKY CTA (Mobile)    -->
        <!-- ====================== -->
        <div class="ijf-sticky-cta">
            <a href="#precios" class="ijf-btn">Reservar Sistema →</a>
        </div>

    </div>
    <!-- END #ijf-lp -->


    <!-- ====================== -->
    <!-- GSAP ANIMATIONS        -->
    <!-- ====================== -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Safety check: only run if GSAP loaded
            if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;

            gsap.registerPlugin(ScrollTrigger);

            // --- 1. TEXT REVEAL (gray → white on scroll) ---
            document.querySelectorAll('#ijf-lp .ijf-reveal-text').forEach(function (el) {
                // Split text into words manually (no external dependency)
                var text = el.innerHTML;
                var words = text.split(/(\s+|<br\s*\/?>)/);
                el.innerHTML = '';
                words.forEach(function (word) {
                    if (word.match(/^<br\s*\/?>$/)) {
                        el.innerHTML += '<br>';
                    } else if (word.match(/^\s+$/)) {
                        el.innerHTML += word;
                    } else {
                        // Check if word contains a span with gradient
                        if (word.includes('ijf-gradient-text')) {
                            el.innerHTML += word;
                        } else {
                            el.innerHTML += '<span class="ijf-word" style="display:inline-block; color:#2a2a2a; transition: color 0.1s;">' + word + '</span>';
                        }
                    }
                });

                var wordSpans = el.querySelectorAll('.ijf-word');
                if (wordSpans.length > 0) {
                    gsap.to(wordSpans, {
                        color: '#ffffff',
                        stagger: 0.05,
                        scrollTrigger: {
                            trigger: el,
                            start: 'top 85%',
                            end: 'top 30%',
                            scrub: 1
                        }
                    });
                }
            });

            // --- 2. QUOTES FADE-IN (Pain Points) ---
            gsap.utils.toArray('#ijf-lp .ijf-quote').forEach(function (q, i) {
                gsap.to(q, {
                    opacity: 1,
                    y: 0,
                    duration: 0.8,
                    delay: i * 0.15,
                    scrollTrigger: {
                        trigger: q,
                        start: 'top 85%',
                        toggleActions: 'play none none none'
                    }
                });
            });

            // --- 3. IMAGE B&W → COLOR ---
            document.querySelectorAll('#ijf-lp .ijf-bw-image').forEach(function (el) {
                ScrollTrigger.create({
                    trigger: el,
                    start: 'top 70%',
                    onEnter: function () { el.classList.add('is-colored'); },
                    onLeaveBack: function () { el.classList.remove('is-colored'); }
                });
            });

            // --- 4. STEPS REVEAL ---
            gsap.utils.toArray('#ijf-lp .ijf-step').forEach(function (step, i) {
                gsap.to(step, {
                    opacity: 1,
                    y: 0,
                    duration: 0.8,
                    delay: i * 0.2,
                    scrollTrigger: {
                        trigger: step,
                        start: 'top 85%',
                        toggleActions: 'play none none none'
                    }
                });
            });

            // --- 5. BENEFIT CARDS SCALE-UP ---
            gsap.utils.toArray('#ijf-lp .ijf-benefit-card').forEach(function (card, i) {
                gsap.to(card, {
                    opacity: 1,
                    scale: 1,
                    duration: 0.6,
                    delay: i * 0.12,
                    ease: 'back.out(1.4)',
                    scrollTrigger: {
                        trigger: card,
                        start: 'top 85%',
                        toggleActions: 'play none none none'
                    }
                });
            });

            // --- 6. DEMO PARALLAX ---
            gsap.to('#ijf-lp .ijf-demo-visual', {
                y: -40,
                scrollTrigger: {
                    trigger: '#ijf-lp .ijf-demo-visual',
                    start: 'top bottom',
                    end: 'bottom top',
                    scrub: 2
                }
            });

            // --- 7. PRICE GLOW ENTRANCE ---
            gsap.from('#ijf-lp .ijf-price-card-border', {
                scale: 0.9,
                opacity: 0,
                duration: 1.2,
                ease: 'power3.out',
                scrollTrigger: {
                    trigger: '#ijf-lp .ijf-price-card-border',
                    start: 'top 80%',
                    toggleActions: 'play none none none'
                }
            });
        });
    </script>

</body>

</html>/* End custom CSS */