{"id":6126,"date":"2025-12-26T07:11:52","date_gmt":"2025-12-26T07:11:52","guid":{"rendered":"https:\/\/www.yalpro.com\/?page_id=6126"},"modified":"2026-03-02T08:52:27","modified_gmt":"2026-03-02T08:52:27","slug":"home-page-demo","status":"publish","type":"page","link":"https:\/\/www.yalpro.com\/es\/","title":{"rendered":"Home page demo"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n YALPRO | Premium Digital Marketing Systems<\/title>\r\n\r\n <!-- Font -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --brand-dark:#0A0E27;\r\n --brand-light:#1A1F3A;\r\n --brand-blue:#00D9FF;\r\n --brand-purple:#8B5CF6;\r\n --brand-success:#10B981;\r\n --white:#fff;\r\n --glass-bg: rgba(255,255,255,.03);\r\n --glass-border: rgba(255,255,255,.08);\r\n --muted: rgba(255,255,255,.65);\r\n --muted2: rgba(255,255,255,.45);\r\n --line: rgba(255,255,255,.10);\r\n --shadow: 0 10px 40px -10px rgba(0,0,0,.55);\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html,body{height:100%; margin:0; padding:0}\r\n body{\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n background: var(--brand-dark);\r\n color: var(--white);\r\n overflow-x:hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar{width:8px}\r\n ::-webkit-scrollbar-track{background:var(--brand-dark)}\r\n ::-webkit-scrollbar-thumb{background:var(--brand-light); border-radius:999px}\r\n ::-webkit-scrollbar-thumb:hover{background:#6366F1}\r\n\r\n \/* Layout helpers *\/\r\n .container{max-width:1120px; margin:0 auto; padding:0 24px}\r\n .section{position:relative}\r\n .py-12{padding:48px 0}\r\n .py-20{padding:80px 0}\r\n .py-24{padding:96px 0}\r\n .py-32{padding:128px 0}\r\n .text-center{text-align:center}\r\n\r\n \/* Background dots *\/\r\n .dots::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n opacity:.10;\r\n background-image: radial-gradient(#6366F1 1px, transparent 1px);\r\n background-size: 32px 32px;\r\n pointer-events:none;\r\n }\r\n\r\n \/* Fixed BG glow *\/\r\n #yalpro-bg{\r\n position:fixed; inset:0; z-index:-9999;\r\n background:\r\n radial-gradient(1200px 600px at 20% 10%, rgba(0,217,255,.10), transparent 60%),\r\n radial-gradient(900px 500px at 80% 20%, rgba(139,92,246,.12), transparent 60%),\r\n var(--brand-dark);\r\n }\r\n\r\n \/* Cursor glow *\/\r\n #cursor-glow{\r\n pointer-events:none;\r\n position:fixed;\r\n width:420px; height:420px;\r\n background: radial-gradient(circle, rgba(99,102,241,.16) 0%, rgba(0,0,0,0) 70%);\r\n transform:translate(-50%,-50%);\r\n z-index:9999;\r\n opacity:1;\r\n transition:opacity .25s ease;\r\n }\r\n @media (max-width:768px){#cursor-glow{display:none}}\r\n\r\n \/* Progress bar *\/\r\n #progress-bar{\r\n position:fixed; top:0; left:0; height:4px; width:0%;\r\n background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));\r\n z-index:9998;\r\n transition: width .1s linear;\r\n }\r\n\r\n \/* HERO VIDEO - SMOOTH + STABLE *\/\r\n .hero-video{\r\n position: relative;\r\n overflow: hidden;\r\n background: #0F1430;\r\n height:50vh;\r\n min-height:360px;\r\n padding-top:80px;\r\n }\r\n @media (min-width:768px){\r\n .hero-video{height:70vh; min-height:520px}\r\n }\r\n\r\n .hero-video-bg{\r\n position:absolute;\r\n inset:0;\r\n z-index:0 !important;\r\n background:#0F1430;\r\n }\r\n .hero-video-bg::after{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background: linear-gradient(45deg, rgba(30,58,138,.12), transparent, rgba(88,28,135,.12));\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .hero-desktop-video,\r\n .hero-mobile-video{\r\n position:absolute !important;\r\n inset:0 !important;\r\n width:100% !important;\r\n height:100% !important;\r\n object-fit:cover !important;\r\n object-position:center !important;\r\n z-index:1 !important;\r\n pointer-events:none !important;\r\n transform: translateZ(0) !important;\r\n backface-visibility:hidden !important;\r\n will-change:transform !important;\r\n }\r\n\r\n \/* Default: show desktop\/tablet video *\/\r\n .hero-desktop-video{ display:block !important; }\r\n .hero-mobile-video{ display:none !important; }\r\n\r\n \/* Mobile portrait: show ONLY portrait video *\/\r\n @media (max-width:767px) and (orientation:portrait){\r\n .hero-desktop-video{ display:none !important; }\r\n .hero-mobile-video{ display:block !important; }\r\n .video-placeholder{ display:none !important; }\r\n }\r\n\r\n \/* Mobile landscape: use desktop 16:9 video *\/\r\n @media (max-width:767px) and (orientation:landscape){\r\n .hero-desktop-video{ display:block !important; }\r\n .hero-mobile-video{ display:none !important; }\r\n .video-placeholder{ display:none !important; }\r\n }\r\n\r\n \/* Tablet: use desktop video *\/\r\n @media (min-width:768px){\r\n .video-placeholder{ display:none !important; }\r\n }\r\n\r\n .hero-overlay{\r\n position:absolute; inset:0;\r\n background: linear-gradient(to bottom, rgba(10,14,39,.65), rgba(10,14,39,.92));\r\n z-index:2;\r\n }\r\n\r\n .video-placeholder{\r\n position:absolute; inset:0;\r\n display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n opacity:.30; z-index:2;\r\n gap:10px;\r\n }\r\n .play-ring{\r\n width:64px; height:64px; border-radius:999px;\r\n border:1px solid rgba(255,255,255,.20);\r\n display:flex; align-items:center; justify-content:center;\r\n animation: pulseGlow 3s cubic-bezier(0.4,0,0.6,1) infinite;\r\n }\r\n\r\n \/* Animations *\/\r\n @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}\r\n @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\r\n @keyframes spinSlow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}\r\n @keyframes pulseGlow{0%,100%{opacity:1; box-shadow:0 0 20px rgba(99,102,241,.25)}50%{opacity:.85; box-shadow:0 0 44px rgba(99,102,241,.55)}}\r\n\r\n .float{animation: float 6s ease-in-out infinite}\r\n .float-delayed{animation: float 6s ease-in-out 3s infinite}\r\n .spin-slow{animation: spinSlow 12s linear infinite}\r\n\r\n \/* Reveal *\/\r\n .reveal, .reveal-left, .reveal-right, .reveal-scale{\r\n opacity:0;\r\n transition: all .8s cubic-bezier(.5,0,0,1);\r\n will-change: transform, opacity;\r\n }\r\n .reveal{transform:translateY(30px)}\r\n .reveal-left{transform:translateX(-30px)}\r\n .reveal-right{transform:translateX(30px)}\r\n .reveal-scale{transform:scale(.95)}\r\n .active{opacity:1; transform:none}\r\n\r\n .delay-100{transition-delay:.1s}\r\n .delay-200{transition-delay:.2s}\r\n .delay-300{transition-delay:.3s}\r\n .delay-400{transition-delay:.4s}\r\n\r\n \/* Typography *\/\r\n h1,h2,h3,h4{margin:0}\r\n .h2{font-size:40px; line-height:1.1; font-weight:600; letter-spacing:-.02em}\r\n .h3{font-size:34px; line-height:1.1; font-weight:600; letter-spacing:-.02em}\r\n .lead{font-size:18px; line-height:1.7; color:rgba(255,255,255,.72); font-weight:300}\r\n @media (min-width:768px){\r\n .h2{font-size:52px}\r\n .h3{font-size:56px}\r\n .lead{font-size:20px}\r\n }\r\n\r\n .gradient-text{\r\n background: linear-gradient(90deg, #6366F1, var(--brand-blue));\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n\r\n \/* Glass panels *\/\r\n .glass{\r\n background: var(--glass-bg);\r\n border: 1px solid var(--glass-border);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow:none;\r\n transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;\r\n }\r\n .glass:hover{\r\n background: rgba(255,255,255,.06);\r\n border-color: rgba(255,255,255,.15);\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n \/* Buttons *\/\r\n .btn-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}\r\n .btn{\r\n display:inline-flex; align-items:center; justify-content:center;\r\n padding:14px 22px;\r\n border-radius:999px;\r\n text-decoration:none;\r\n font-weight:600;\r\n color:#fff;\r\n border:1px solid rgba(255,255,255,.18);\r\n background: transparent;\r\n transition: transform .2s ease, background .2s ease, box-shadow .2s ease;\r\n }\r\n .btn:hover{background: rgba(255,255,255,.05)}\r\n .btn-glow{\r\n position:relative; overflow:hidden; border:none;\r\n background: transparent;\r\n }\r\n .btn-glow::before{\r\n content:\"\"; position:absolute; inset:0;\r\n background: linear-gradient(90deg, #6366F1, var(--brand-purple));\r\n z-index:-1;\r\n transition: transform .3s ease;\r\n }\r\n .btn-glow:hover{\r\n transform: scale(1.05);\r\n box-shadow: 0 0 30px rgba(99,102,241,.40);\r\n }\r\n\r\n \/* Icon cards \/ grids *\/\r\n .grid-3{display:grid; grid-template-columns:1fr; gap:18px}\r\n @media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr); gap:22px}}\r\n .card{\r\n padding:26px;\r\n border-radius:18px;\r\n text-align:center;\r\n }\r\n .iconbox{\r\n width:56px; height:56px; border-radius:14px;\r\n display:inline-flex; align-items:center; justify-content:center;\r\n background: rgba(255,255,255,.04);\r\n margin-bottom:14px;\r\n box-shadow: 0 0 20px rgba(0,217,255,.10);\r\n transition: transform .25s ease;\r\n }\r\n .card:hover .iconbox{transform: scale(1.10)}\r\n\r\n \/* ========================================\r\n FIXED INDUSTRY CAROUSEL - ALL INDUSTRIES\r\n ======================================== *\/\r\n .trust{\r\n background: var(--brand-light);\r\n border-top:1px solid rgba(255,255,255,.05);\r\n border-bottom:1px solid rgba(255,255,255,.05);\r\n overflow:hidden;\r\n position:relative;\r\n }\r\n\r\n .fade-left,.fade-right{\r\n position:absolute; top:0; bottom:0; width:96px; z-index:3;\r\n pointer-events:none;\r\n }\r\n .fade-left{left:0; background: linear-gradient(90deg, var(--brand-light), transparent)}\r\n .fade-right{right:0; background: linear-gradient(270deg, var(--brand-light), transparent)}\r\n\r\n \/* FIXED: Proper infinite carousel *\/\r\n .industry-carousel-container {\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .industry-marquee {\r\n display: flex;\r\n width: fit-content;\r\n animation: scroll 40s linear infinite;\r\n }\r\n\r\n \/* Pause on hover (desktop only) *\/\r\n @media (min-width: 768px) {\r\n .industry-marquee:hover {\r\n animation-play-state: paused;\r\n }\r\n }\r\n\r\n .industry-scroll-wrapper {\r\n display: flex;\r\n gap: 24px;\r\n padding: 0 12px;\r\n }\r\n\r\n .industry-card {\r\n flex: 0 0 auto;\r\n width: 180px;\r\n height: 110px;\r\n border: 1px solid rgba(255,255,255,.12);\r\n border-radius: 14px;\r\n background: rgba(255,255,255,.03);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n transition: all .35s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .industry-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(0,217,255,.08), rgba(139,92,246,.08));\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n }\r\n\r\n .industry-card:hover {\r\n background: rgba(255,255,255,.06);\r\n border-color: rgba(99,102,241,.4);\r\n transform: translateY(-6px) scale(1.03);\r\n box-shadow: 0 8px 24px rgba(0,217,255,.15);\r\n }\r\n\r\n .industry-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .industry-icon {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .industry-icon svg {\r\n width: 36px;\r\n height: 36px;\r\n color: var(--brand-blue);\r\n transition: all .35s ease;\r\n }\r\n\r\n .industry-card:hover .industry-icon svg {\r\n transform: scale(1.2) rotate(5deg);\r\n color: var(--brand-purple);\r\n filter: drop-shadow(0 0 8px rgba(99,102,241,.5));\r\n }\r\n\r\n .industry-name {\r\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\r\n font-size: 11px;\r\n letter-spacing: .14em;\r\n font-weight: 700;\r\n color: rgba(255,255,255,.65);\r\n text-align: center;\r\n position: relative;\r\n z-index: 1;\r\n transition: color .35s ease;\r\n }\r\n\r\n .industry-card:hover .industry-name {\r\n color: rgba(255,255,255,.95);\r\n }\r\n\r\n \/* Mobile responsive *\/\r\n @media (max-width: 768px) {\r\n .industry-marquee {\r\n animation-duration: 35s; \/* Slightly faster on mobile *\/\r\n }\r\n \r\n .industry-card {\r\n width: 160px;\r\n height: 100px;\r\n }\r\n \r\n .industry-icon svg {\r\n width: 30px;\r\n height: 30px;\r\n }\r\n \r\n .industry-name {\r\n font-size: 10px;\r\n }\r\n }\r\n\r\n \/* Core promise split *\/\r\n .grid-2{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}\r\n @media (min-width:1024px){.grid-2{grid-template-columns:1.1fr .9fr; gap:48px}}\r\n .stack{display:flex; flex-direction:column; gap:14px}\r\n .mini{\r\n padding:18px;\r\n border-radius:16px;\r\n display:flex; gap:14px; align-items:flex-start;\r\n border-top:2px solid transparent;\r\n transition: transform .25s ease;\r\n }\r\n .mini:hover{transform: translateY(-6px) rotate(0.6deg)}\r\n .mini .ico{\r\n width:40px; height:40px;\r\n border-radius:12px;\r\n display:flex; align-items:center; justify-content:center;\r\n background: rgba(255,255,255,.04);\r\n flex:0 0 auto;\r\n }\r\n\r\n \/* Subscription benefits sticky *\/\r\n #subscription-benefits{overflow:hidden}\r\n .sub-wrap{\r\n position:relative;\r\n z-index:2;\r\n max-width:1120px;\r\n margin:0 auto;\r\n padding: 96px 24px 72px;\r\n }\r\n .sub-title{margin-bottom:34px}\r\n .benefits-sticky-wrap{\r\n position:sticky;\r\n top:90px;\r\n min-height: auto;\r\n display:flex;\r\n align-items:stretch;\r\n }\r\n .benefits-grid{\r\n width:100%;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n border-top:1px solid var(--line);\r\n }\r\n @media (min-width:768px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}\r\n @media (min-width:1024px){.benefits-grid{grid-template-columns:repeat(4,1fr)}}\r\n\r\n .benefit-col{\r\n position:relative;\r\n padding: 38px 18px;\r\n min-height: 240px;\r\n border-bottom:1px solid var(--line);\r\n transition: background .25s ease, box-shadow .25s ease;\r\n }\r\n @media (min-width:1024px){\r\n .benefit-col{min-height:280px}\r\n }\r\n .benefit-col::before{\r\n content:\"\";\r\n position:absolute;\r\n left:0; top:20px; bottom:20px;\r\n width:1px; background: var(--line);\r\n display:none;\r\n }\r\n @media (min-width:1024px){\r\n .benefit-col::before{display:block}\r\n .benefit-col:first-child::before{display:none}\r\n }\r\n\r\n .benefit-slot{height: var(--slot, 0px)}\r\n @media (max-width:1024px){.benefit-slot{height:0 !important}}\r\n @media (max-width:1024px){\r\n .benefits-sticky-wrap{position:relative; top:auto; min-height:auto}\r\n }\r\n\r\n \/* Benefits smooth animation control *\/\r\n :root{\r\n --benefit-h: 260px;\r\n --benefit-maxh-dur: .55s;\r\n --benefit-fade-dur: .35s;\r\n --benefit-ease: cubic-bezier(.2,.8,.2,1);\r\n }\r\n\r\n \/* MOBILE: slow + smoother *\/\r\n @media (max-width: 767px){\r\n :root{\r\n --benefit-maxh-dur: .95s;\r\n --benefit-fade-dur: .60s;\r\n }\r\n }\r\n\r\n .benefit-details{\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition:\r\n grid-template-rows .65s cubic-bezier(.2,.8,.2,1),\r\n opacity .45s ease,\r\n transform .45s ease;\r\n will-change: grid-template-rows, opacity, transform;\r\n }\r\n\r\n .benefit-details > *{\r\n overflow: hidden;\r\n }\r\n\r\n .benefit-col.active .benefit-details{\r\n grid-template-rows: 1fr;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* MOBILE = more slow *\/\r\n @media (max-width: 767px){\r\n .benefit-details{\r\n transition:\r\n grid-template-rows 1.05s cubic-bezier(.16,.84,.22,1),\r\n opacity .70s ease,\r\n transform .70s ease;\r\n transform: translateY(14px);\r\n }\r\n }\r\n\r\n .benefit-col.active{\r\n background: rgba(255,255,255,.02);\r\n box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);\r\n }\r\n .benefit-col:hover{background: rgba(255,255,255,.02)}\r\n\r\n .sub-scroll{\r\n min-height: auto;\r\n }\r\n\r\n .cta-panel{\r\n margin-top:44px;\r\n max-width:920px;\r\n margin-left:auto;\r\n margin-right:auto;\r\n border-radius:18px;\r\n border:1px solid rgba(255,255,255,.10);\r\n background: rgba(0,0,0,.35);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n padding: 26px 20px;\r\n box-shadow: 0 0 0 1px rgba(139,92,246,.22), 0 0 40px rgba(99,102,241,.12);\r\n text-align:center;\r\n }\r\n\r\n \/* Services grid *\/\r\n .grid-3b{display:grid; grid-template-columns:1fr; gap:16px}\r\n @media (min-width:768px){.grid-3b{grid-template-columns:repeat(2,1fr)}}\r\n @media (min-width:1024px){.grid-3b{grid-template-columns:repeat(3,1fr)}}\r\n .service-card{\r\n padding:26px;\r\n border-radius:18px;\r\n position:relative;\r\n overflow:hidden;\r\n transition: transform .25s ease;\r\n }\r\n .service-card:hover{transform: translateY(-8px)}\r\n .service-topline{\r\n position:absolute; top:0; left:0; right:0; height:4px;\r\n background: linear-gradient(90deg, rgba(59,130,246,.8), transparent);\r\n opacity:0; transition: opacity .25s ease;\r\n }\r\n .service-card:hover .service-topline{opacity:1}\r\n\r\n \/* How it works *\/\r\n .steps{display:grid; grid-template-columns:1fr; gap:18px; position:relative}\r\n @media (min-width:768px){.steps{grid-template-columns:repeat(4,1fr); gap:18px}}\r\n .steps-line{\r\n display:none;\r\n position:absolute; left:0; right:0; top:34px; height:2px;\r\n background: linear-gradient(90deg, var(--brand-blue), rgba(168,85,247,.8), var(--brand-blue));\r\n opacity:.30;\r\n }\r\n @media (min-width:768px){.steps-line{display:block}}\r\n .step-card{padding:18px; border-radius:16px; position:relative; z-index:2}\r\n .step-num{\r\n display:inline-block;\r\n font-size:34px;\r\n font-weight:700;\r\n letter-spacing:-.02em;\r\n margin-bottom:10px;\r\n }\r\n\r\n \/* Results *\/\r\n .results{display:grid; grid-template-columns:1fr; gap:18px}\r\n @media (min-width:768px){.results{grid-template-columns:repeat(3,1fr)}}\r\n .result-card{\r\n padding:28px;\r\n border-radius:18px;\r\n text-align:center;\r\n border:1px solid rgba(255,255,255,.05);\r\n transition: transform .35s ease, border-color .35s ease;\r\n }\r\n .result-card:hover{transform: scale(1.04); border-color: rgba(99,102,241,.28)}\r\n .bubble{\r\n width:64px; height:64px; border-radius:999px;\r\n display:flex; align-items:center; justify-content:center;\r\n margin: 0 auto 14px;\r\n background: rgba(99,102,241,.12);\r\n }\r\n\r\n \/* Final CTA *\/\r\n .final-cta{\r\n display:flex; align-items:center; justify-content:center;\r\n text-align:center;\r\n overflow:hidden;\r\n }\r\n .final-bg1{position:absolute; inset:0; background: var(--brand-dark)}\r\n .final-bg2{position:absolute; inset:0; background: linear-gradient(to top, rgba(139,92,246,.20), transparent)}\r\n .final-glow{\r\n position:absolute; left:50%; top:50%;\r\n width:520px; height:520px;\r\n transform: translate(-50%,-50%);\r\n border-radius:999px;\r\n background: rgba(0,217,255,.10);\r\n filter: blur(100px);\r\n }\r\n .cta-btn-wrap{\r\n position:relative; display:inline-flex;\r\n border-radius:999px;\r\n }\r\n .cta-btn-wrap::before{\r\n content:\"\";\r\n position:absolute; inset:-10px;\r\n border-radius:999px;\r\n background: linear-gradient(90deg, rgba(0,217,255,.35), rgba(139,92,246,.35), rgba(0,217,255,.35));\r\n filter: blur(16px);\r\n opacity:.35;\r\n transition: opacity .25s ease, inset .25s ease;\r\n }\r\n .cta-btn-wrap:hover::before{opacity:1; inset:-14px}\r\n .cta-btn{\r\n position:relative;\r\n display:inline-flex; align-items:center; justify-content:center;\r\n padding:16px 28px;\r\n border-radius:999px;\r\n font-weight:700;\r\n text-decoration:none;\r\n color:#fff;\r\n background: linear-gradient(90deg, #6366F1, var(--brand-purple));\r\n transition: transform .2s ease;\r\n }\r\n .cta-btn:hover{transform: scale(1.05)}\r\n\r\n \/* Small helpers *\/\r\n .muted{color:rgba(255,255,255,.70)}\r\n .muted2{color:rgba(255,255,255,.55)}\r\n .mt-8{margin-top:24px}\r\n .mt-16{margin-top:44px}\r\n .mb-8{margin-bottom:24px}\r\n .mb-16{margin-bottom:44px}\r\n .shadow-soft{box-shadow: 0 0 15px rgba(255,255,255,.08)}\r\n .pill{\r\n display:inline-block;\r\n padding:10px 14px;\r\n border-radius:999px;\r\n border:1px solid rgba(255,255,255,.10);\r\n background: rgba(0,0,0,.20);\r\n }\r\n\r\n \/* Simple inline SVG icons *\/\r\n .svg{width:26px;height:26px;display:block}\r\n .svg-sm{width:20px;height:20px}\r\n .svg-lg{width:34px;height:34px}\r\n .blue{color:var(--brand-blue)}\r\n .purple{color:var(--brand-purple)}\r\n .green{color:var(--brand-success)}\r\n .orange{color:#FDBA74}\r\n .red{color:#F87171}\r\n .indigo{color:#A5B4FC}\r\n .yellow{color:#FACC15}\r\n .pink{color:#F9A8D4}\r\n\r\n \/* IMPORTANT: avoid accidental huge headings *\/\r\n h1,h2,h3,h4,p{max-width:100%}\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"yalpro-bg\"><\/div>\r\n <div id=\"cursor-glow\"><\/div>\r\n <div id=\"progress-bar\"><\/div>\r\n\r\n <!-- HERO VIDEO -->\r\n <section class=\"section hero-video\">\r\n\r\n <!-- Desktop + Tablet (16:9) -->\r\n <video class=\"hero-desktop-video\"\r\n autoplay muted loop playsinline preload=\"auto\"\r\n poster=\"\"\r\n >\r\n <source src=\"https:\/\/www.yalpro.com\/wp-content\/uploads\/2026\/01\/169-adjusted-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n\r\n <!-- Mobile Portrait (9:16) -->\r\n <video class=\"hero-mobile-video\"\r\n autoplay muted loop playsinline preload=\"auto\"\r\n poster=\"\"\r\n >\r\n <source src=\"https:\/\/www.yalpro.com\/wp-content\/uploads\/2026\/01\/11-ratio-1-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n\r\n <div class=\"hero-video-bg\"><\/div>\r\n\r\n <div class=\"video-placeholder\">\r\n <div class=\"play-ring\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\" style=\"color:#fff\">\r\n <path d=\"M8 5v14l11-7z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.22em; font-size:12px; color:rgba(255,255,255,.6)\">\r\n CARGANDO VIDEO...\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- floating blobs -->\r\n <div class=\"float\" style=\"position:absolute; top:22%; left:40px; width:96px; height:96px; border-radius:999px; background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(168,85,247,.20)); filter:blur(18px); z-index:1\"><\/div>\r\n <div class=\"float-delayed\" style=\"position:absolute; bottom:22%; right:40px; width:128px; height:128px; border-radius:28px; transform:rotate(12deg); background:linear-gradient(135deg, rgba(34,211,238,.20), rgba(59,130,246,.18)); filter:blur(18px); z-index:1\"><\/div>\r\n\r\n <\/section>\r\n\r\n <!-- HERO TEXT -->\r\n <section class=\"section py-20\" style=\"background: linear-gradient(to bottom, var(--brand-dark), rgba(26,31,58,.30));\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-16 reveal\">\r\n <h2 class=\"h2\" style=\"margin-bottom:18px\">\r\n <span class=\"gradient-text\">Claridad primero. Sistemas despu\u00e9s. El crecimiento sigue.<\/span>\r\n <\/h2>\r\n <p class=\"lead\" style=\"max-width:840px; margin:0 auto\">\r\n Yalpro construye sistemas de marketing para negocios locales serios. Combinamos\ncontenido premium, distribuci\u00f3n local, fundamentos de SEO y automatizaci\u00f3n para que\nseas visible, confiable y con seguimiento adecuado, sin caos.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid-3 mb-16\">\r\n <div class=\"glass card reveal-left delay-100\">\r\n <div class=\"iconbox\">\r\n <svg class=\"svg blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M6 3h12l4 6-10 12L2 9l4-6z\"><\/path>\r\n <path d=\"M2 9h20\"><\/path>\r\n <path d=\"M7 9l5 12\"><\/path>\r\n <path d=\"M17 9l-5 12\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:600; margin:0 0 6px\">Contenido premium que construye autoridad<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.6\">Dise\u00f1ado para lucir y sentirse de est\u00e1ndar internacional.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass card reveal delay-200\">\r\n <div class=\"iconbox\" style=\"box-shadow:0 0 20px rgba(99,102,241,.12)\">\r\n <svg class=\"svg indigo spin-slow\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z\"><\/path>\r\n <path d=\"M19.4 15a7.8 7.8 0 0 0 .1-1 7.8 7.8 0 0 0-.1-1l2-1.6-2-3.4-2.4 1a8 8 0 0 0-1.7-1l-.3-2.6H9l-.3 2.6a8 8 0 0 0-1.7 1l-2.4-1-2 3.4 2 1.6a7.8 7.8 0 0 0-.1 1 7.8 7.8 0 0 0 .1 1l-2 1.6 2 3.4 2.4-1a8 8 0 0 0 1.7 1l.3 2.6h6l.3-2.6a8 8 0 0 0 1.7-1l2.4 1 2-3.4-2-1.6z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:600; margin:0 0 6px\">Automatizaci\u00f3n que responde y reactiva leads<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.6\">Seguimiento r\u00e1pido, reactivaci\u00f3n de leads, menos ingresos perdidos.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass card reveal-right delay-300\">\r\n <div class=\"iconbox\" style=\"box-shadow:0 0 20px rgba(139,92,246,.12)\">\r\n <svg class=\"svg purple\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 17l6-6 4 4 8-8\"><\/path>\r\n <path d=\"M14 7h7v7\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:600; margin:0 0 6px\">Visibilidad local que se compone con el tiempo<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.6\">Distribuci\u00f3n consistente + fundamentos de SEO.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center reveal\">\r\n <div class=\"btn-row\" style=\"margin-bottom:10px\">\r\n <a href=\"https:\/\/wa.me\/34678753823\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-glow\">\r\n Reservar Llamada Introductoria\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TRUST STRIP WITH FIXED CAROUSEL -->\r\n <section class=\"section trust py-12\">\r\n <div class=\"container text-center mb-8 reveal\">\r\n <div style=\"font-size:18px; font-weight:600; color:rgba(255,255,255,.70)\">\r\n Construido para negocios que se preocupan por la reputaci\u00f3n, calidad y crecimiento\nmedible.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\" style=\"position:relative\">\r\n <div class=\"fade-left\"><\/div>\r\n <div class=\"fade-right\"><\/div>\r\n\r\n <div class=\"industry-carousel-container\">\r\n <div class=\"industry-marquee\">\r\n <!-- First complete set -->\r\n <div class=\"industry-scroll-wrapper\">\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"><\/path>\r\n <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"><\/line>\r\n <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"><\/line>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">CL\u00cdNICAS DENTALES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">INMOBILIARIAS \/ BIENES RA\u00cdCES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"><\/path>\r\n <path d=\"M7 2v20\"><\/path>\r\n <path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">RESTAURANTES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"><\/path>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\r\n <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"><\/path>\r\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">ORGANIZADORES DE BODAS<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" ry=\"2\"><\/rect>\r\n <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"><\/rect>\r\n <line x1=\"9\" y1=\"1\" x2=\"9\" y2=\"4\"><\/line>\r\n <line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"4\"><\/line>\r\n <line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"23\"><\/line>\r\n <line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"23\"><\/line>\r\n <line x1=\"20\" y1=\"9\" x2=\"23\" y2=\"9\"><\/line>\r\n <line x1=\"20\" y1=\"14\" x2=\"23\" y2=\"14\"><\/line>\r\n <line x1=\"1\" y1=\"9\" x2=\"4\" y2=\"9\"><\/line>\r\n <line x1=\"1\" y1=\"14\" x2=\"4\" y2=\"14\"><\/line>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">CONSTRUCCI\u00d3N<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Second complete set (duplicate for seamless loop) -->\r\n <div class=\"industry-scroll-wrapper\">\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"><\/path>\r\n <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"><\/line>\r\n <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"><\/line>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">CL\u00cdNICAS DENTALES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">INMOBILIARIAS \/ BIENES RA\u00cdCES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"><\/path>\r\n <path d=\"M7 2v20\"><\/path>\r\n <path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">RESTAURANTES<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"><\/path>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\r\n <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"><\/path>\r\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">ORGANIZADORES DE BODAS<\/div>\r\n <\/div>\r\n\r\n <div class=\"industry-card\">\r\n <div class=\"industry-icon\">\r\n <svg class=\"svg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" ry=\"2\"><\/rect>\r\n <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"><\/rect>\r\n <line x1=\"9\" y1=\"1\" x2=\"9\" y2=\"4\"><\/line>\r\n <line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"4\"><\/line>\r\n <line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"23\"><\/line>\r\n <line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"23\"><\/line>\r\n <line x1=\"20\" y1=\"9\" x2=\"23\" y2=\"9\"><\/line>\r\n <line x1=\"20\" y1=\"14\" x2=\"23\" y2=\"14\"><\/line>\r\n <line x1=\"1\" y1=\"9\" x2=\"4\" y2=\"9\"><\/line>\r\n <line x1=\"1\" y1=\"14\" x2=\"4\" y2=\"14\"><\/line>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"industry-name\">CONSTRUCCI\u00d3N<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CORE PROMISE -->\r\n <section class=\"section py-24 dots\">\r\n <div class=\"container\">\r\n <div class=\"grid-2\">\r\n <div class=\"reveal-left\">\r\n <h2 class=\"h2\" style=\"margin-bottom:16px\">\r\n Tu marketing, entregado como un <span style=\"color:var(--brand-blue)\">revenue-generating systems<\/span>\r\n <\/h2>\r\n <p class=\"lead\" style=\"margin:0\">\r\n Instead of juggling freelancers, posting inconsistently, and losing leads in the gaps, you get a joined-up delivery model built for performance-driven businesses. Strategy, content, distribution, SEO and automation working together on a predictable rhythm.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"stack\">\r\n <div class=\"glass mini reveal-right delay-100\" style=\"border-top-color: rgba(0,217,255,.35)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n <path d=\"M16 8l-3 8-5-5 8-3z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size:18px; font-weight:600; margin-bottom:4px\">Plan Estrat\u00e9gico<\/div>\r\n <div class=\"muted2\" style=\"font-size:13px; line-height:1.6\">Positioning, messaging pillars, content angles, channel priorities.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass mini reveal-right delay-200\" style=\"border-top-color: rgba(139,92,246,.35)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm purple\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 2l9 5-9 5-9-5 9-5z\"><\/path>\r\n <path d=\"M3 12l9 5 9-5\"><\/path>\r\n <path d=\"M3 17l9 5 9-5\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size:18px; font-weight:600; margin-bottom:4px\">Motor de Contenido<\/div>\r\n <div class=\"muted2\" style=\"font-size:13px; line-height:1.6\">Activos premium dise\u00f1ados para construir confianza y autoridad.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass mini reveal-right delay-300\" style=\"border-top-color: rgba(16,185,129,.35)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm green\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 8V4\"><\/path>\r\n <path d=\"M8 4h8\"><\/path>\r\n <rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" rx=\"3\"><\/rect>\r\n <path d=\"M9 13h.01\"><\/path>\r\n <path d=\"M15 13h.01\"><\/path>\r\n <path d=\"M8 20v2\"><\/path>\r\n <path d=\"M16 20v2\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <div style=\"font-size:18px; font-weight:600; margin-bottom:4px\">Automatizaci\u00f3n y Reactivaci\u00f3n de Leads<\/div>\r\n <div class=\"muted2\" style=\"font-size:13px; line-height:1.6\">Respuesta m\u00e1s r\u00e1pida, reactiva contactos inactivos, menos oportunidades perdidas.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SUBSCRIPTION BENEFITS -->\r\n <section class=\"section dots\" id=\"subscription-benefits\">\r\n <div style=\"position:absolute; left:50%; top:-160px; width:900px; height:900px; transform:translateX(-50%); border-radius:999px; background:rgba(0,217,255,.10); filter: blur(140px); pointer-events:none\"><\/div>\r\n\r\n <div class=\"sub-wrap sub-scroll\">\r\n <div class=\"text-center sub-title reveal\">\r\n <h3 class=\"h2\" style=\"margin:0; line-height:1.05\">\r\n \u00bfPor Qu\u00e9 el Marketing Digital<br>\r\n por Suscripci\u00f3n Funciona Mejor<br>\r\n Que las Agencias Tradicionales?\r\n <\/h3>\r\n <\/div>\r\n\r\n <div class=\"benefits-sticky-wrap\">\r\n <div class=\"benefits-grid\">\r\n <div class=\"benefit-col benefit-item\" data-benefit=\"0\" style=\"--slot:210px\">\r\n <div class=\"benefit-slot\"><\/div>\r\n <h3 style=\"font-size:34px; font-weight:600; margin-bottom:6px\">Cobertura Completa<\/h3>\r\n <div style=\"color:var(--brand-blue); font-weight:600; margin-bottom:18px\">Todos los canales, un solo equipo<\/div>\r\n <div class=\"benefit-details\">\r\n <div style=\"opacity:.55; margin-bottom:10px\">\r\n <svg class=\"svg-sm\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color:rgba(255,255,255,.55)\">\r\n <path d=\"M7 17h4V7H5v6h2z\"><\/path>\r\n <path d=\"M17 17h4V7h-6v6h2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"muted2\" style=\"font-size:14px; line-height:1.75; margin:0\">\r\n En lugar de gestionar agencias separadas para SEO, PPC, contenido y dise\u00f1o,\nobtienes un equipo unificado que colabora internamente. Todos trabajan hacia\nresultados empresariales para que la estrategia, ejecuci\u00f3n y resultados permanezcan\nconectados.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-col benefit-item\" data-benefit=\"1\" style=\"--slot:150px\">\r\n <div class=\"benefit-slot\"><\/div>\r\n <h3 style=\"font-size:34px; font-weight:600; margin-bottom:6px\">Estrategia Unificada<\/h3>\r\n <div style=\"color:var(--brand-purple); font-weight:600; margin-bottom:18px\">No m\u00e1s esfuerzos desconectados.<\/div>\r\n <div class=\"benefit-details\">\r\n <div style=\"opacity:.55; margin-bottom:10px\">\r\n <svg class=\"svg-sm\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color:rgba(255,255,255,.55)\">\r\n <path d=\"M7 17h4V7H5v6h2z\"><\/path>\r\n <path d=\"M17 17h4V7h-6v6h2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"muted2\" style=\"font-size:14px; line-height:1.75; margin:0\">\r\n Un plan cohesivo a trav\u00e9s de todos los canales. Las campa\u00f1as se apoyan entre s\u00ed, la\nmensajer\u00eda permanece consistente y cada movimiento impulsa hacia un resultado\nempresarial.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-col benefit-item\" data-benefit=\"2\" style=\"--slot:90px\">\r\n <div class=\"benefit-slot\"><\/div>\r\n <h3 style=\"font-size:34px; font-weight:600; margin-bottom:6px\">Claridad y Control<\/h3>\r\n <div style=\"color:#F87171; font-weight:600; margin-bottom:18px\">Siempre sabes qu\u00e9 est\u00e1 pasando y por qu\u00e9.<\/div>\r\n <div class=\"benefit-details\">\r\n <div style=\"opacity:.55; margin-bottom:10px\">\r\n <svg class=\"svg-sm\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color:rgba(255,255,255,.55)\">\r\n <path d=\"M7 17h4V7H5v6h2z\"><\/path>\r\n <path d=\"M17 17h4V7h-6v6h2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"muted2\" style=\"font-size:14px; line-height:1.75; margin:0\">\r\n Actualizaciones semanales + seguimiento de tareas + facturaci\u00f3n clara. Visibilidad\ncompleta del progreso y prioridades. Sin horas ocultas, sin informes dispersos.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefit-col benefit-item\" data-benefit=\"3\" style=\"--slot:20px\">\r\n <div class=\"benefit-slot\"><\/div>\r\n <h3 style=\"font-size:34px; font-weight:600; margin-bottom:6px\">Eficiencia de Tiempo<\/h3>\r\n <div style=\"color:#FDBA74; font-weight:600; margin-bottom:18px\">Obtienes un equipo sin gestionarlo.<\/div>\r\n <div class=\"benefit-details\">\r\n <div style=\"opacity:.55; margin-bottom:10px\">\r\n <svg class=\"svg-sm\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color:rgba(255,255,255,.55)\">\r\n <path d=\"M7 17h4V7H5v6h2z\"><\/path>\r\n <path d=\"M17 17h4V7h-6v6h2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"muted2\" style=\"font-size:14px; line-height:1.75; margin:0\">\r\n Sin contrataciones. Sin microgesti\u00f3n. El equipo funciona de manera aut\u00f3noma, alineado\ncon objetivos, comunic\u00e1ndose proactivamente, para que el enfoque permanezca en el\ncrecimiento.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-panel reveal\">\r\n <h4 style=\"font-size:20px; margin:0; font-weight:700\">No necesitas un equipo de marketing a tiempo completo, Necesitas resultados.<\/h4>\r\n <p style=\"margin:10px 0 0; color:var(--brand-blue); font-weight:600\">\r\n Con nuestra suscripci\u00f3n, obtienes un equipo completo enfocado en entregarlos\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SERVICES -->\r\n <section class=\"section py-24\" id=\"services\">\r\n <div class=\"container\">\r\n <div class=\"mb-16 reveal-scale\">\r\n <h2 class=\"h2 gradient-text\" style=\"display:inline-block; margin-bottom:10px\">Servicios<\/h2>\r\n <p class=\"lead\" style=\"margin:0\">Elige lo que necesitas, o d\u00e9janos dise\u00f1ar la combinaci\u00f3n correcta seg\u00fan tus objetivos.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid-3b\">\r\n <div class=\"glass service-card reveal delay-100\">\r\n <div class=\"service-topline\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"blue\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4\"><\/rect>\r\n <path d=\"M8 12c1.2 2 3 3 4 3s2.8-1 4-3\"><\/path>\r\n <path d=\"M8 9h.01\"><\/path><path d=\"M16 9h.01\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">Gesti\u00f3n de Redes Sociales<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n Reels, carruseles y publicaciones premium construidos para posicionarte como la\nopci\u00f3n obvia, no solo otra opci\u00f3n m\u00e1s.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass service-card reveal delay-200\">\r\n <div class=\"service-topline\" style=\"background:linear-gradient(90deg, rgba(168,85,247,.8), transparent)\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"purple\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 21s7-4.5 7-10a7 7 0 1 0-14 0c0 5.5 7 10 7 10z\"><\/path>\r\n <circle cx=\"12\" cy=\"11\" r=\"2\"><\/circle>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">Distribuci\u00f3n Local<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n We make sure your content is actually seen by the right local audiences through consistent distribution.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass service-card reveal delay-300\">\r\n <div class=\"service-topline\" style=\"background:linear-gradient(90deg, rgba(16,185,129,.8), transparent)\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"green\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\r\n <circle cx=\"8.5\" cy=\"7\" r=\"3\"><\/circle>\r\n <path d=\"M20 8v6\"><\/path>\r\n <path d=\"M23 11h-6\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">Reactivaci\u00f3n de Leads<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n Reconnect with past enquiries and customers through smart, timely messaging.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass service-card reveal delay-100\">\r\n <div class=\"service-topline\" style=\"background:linear-gradient(90deg, rgba(99,102,241,.8), transparent)\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"indigo\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M8 6h13\"><\/path><path d=\"M8 12h13\"><\/path><path d=\"M8 18h13\"><\/path>\r\n <path d=\"M3 6h.01\"><\/path><path d=\"M3 12h.01\"><\/path><path d=\"M3 18h.01\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">Automatizaci\u00f3n de Flujos de Trabajo<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n Automatizaciones que reducen la administraci\u00f3n, aceleran el tiempo de respuesta y\nmantienen tu pipeline en movimiento.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass service-card reveal delay-200\">\r\n <div class=\"service-topline\" style=\"background:linear-gradient(90deg, rgba(250,204,21,.8), transparent)\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"yellow\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle>\r\n <path d=\"M21 21l-4.3-4.3\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">SEO y Descubrimiento Local<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n Fundamentos s\u00f3lidos para visibilidad en Google, intenci\u00f3n de b\u00fasqueda local y\ndescubribilidad a largo plazo.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass service-card reveal delay-300\">\r\n <div class=\"service-topline\" style=\"background:linear-gradient(90deg, rgba(249,168,212,.8), transparent)\"><\/div>\r\n <div style=\"margin-bottom:14px\" class=\"pink\">\r\n <svg class=\"svg-lg\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 3h18v6H3z\"><\/path>\r\n <path d=\"M3 15h18v6H3z\"><\/path>\r\n <path d=\"M7 9v6\"><\/path>\r\n <path d=\"M17 9v6\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"font-size:18px; font-weight:700; margin:0 0 8px\">Optimizaci\u00f3n Web<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:14px; line-height:1.7\">\r\n Mejoras simples que aumentan consultas, conversi\u00f3n y confianza, sin complicaciones\nexcesivas.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center mt-8 reveal\">\r\n <p style=\"margin:0; color:var(--brand-blue); font-weight:600; font-size:13px\">\r\n Ongoing growth support. Complex builds quoted based on scope.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- HOW IT WORKS -->\r\n <section class=\"section py-24\" style=\"background:var(--brand-light)\" id=\"how-it-works\">\r\n <div class=\"container\">\r\n <div class=\"text-center mb-16 reveal-scale\">\r\n <h2 class=\"h2\" style=\"margin:0\">C\u00f3mo funciona<\/h2>\r\n <\/div>\r\n\r\n <div class=\"steps\">\r\n <div class=\"steps-line\"><\/div>\r\n\r\n <div class=\"glass step-card reveal delay-100\">\r\n <div class=\"step-num gradient-text\">01<\/div>\r\n <h3 style=\"font-size:16px; font-weight:700; margin:0 0 6px\">Auditor\u00eda y Estrategia<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:13px; line-height:1.7\">\r\n Revisamos tu presencia y mercado. Entregamos una hoja de ruta clara y prioridades.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass step-card reveal delay-200\">\r\n <div class=\"step-num gradient-text\">02<\/div>\r\n <h3 style=\"font-size:16px; font-weight:700; margin:0 0 6px\">Construir Sistemas<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:13px; line-height:1.7\">\r\n Crear plantillas y un motor repetible para establecer est\u00e1ndares visuales.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass step-card reveal delay-300\">\r\n <div class=\"step-num gradient-text\">03<\/div>\r\n <h3 style=\"font-size:16px; font-weight:700; margin:0 0 6px\">Automatizar<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:13px; line-height:1.7\">\r\n Implementar respuesta de leads + reactivaci\u00f3n para que nada se caiga.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass step-card reveal delay-400\">\r\n <div class=\"step-num gradient-text\">04<\/div>\r\n <h3 style=\"font-size:16px; font-weight:700; margin:0 0 6px\">Optimizar<\/h3>\r\n <p class=\"muted2\" style=\"margin:0; font-size:13px; line-height:1.7\">\r\n Mantener un ritmo consistente, rastrear lo que funciona y refinar con el tiempo.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- RESULTS -->\r\n <section class=\"section py-24\" style=\"background: linear-gradient(to bottom, var(--brand-dark), #0f1225)\" id=\"results\">\r\n <div class=\"container text-center\">\r\n <h2 class=\"h2 gradient-text reveal\" style=\"margin:0 0 44px\">Resultados que buscamos<\/h2>\r\n\r\n <div class=\"results\">\r\n <div class=\"glass result-card reveal-scale delay-100\">\r\n <div class=\"bubble\">\r\n <svg class=\"svg blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M7 17l10-10\"><\/path><path d=\"M7 7h10v10\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"margin:0; font-size:18px; font-weight:700\">M\u00e1s consultas calificadas<\/h3>\r\n <\/div>\r\n\r\n <div class=\"glass result-card reveal-scale delay-200\">\r\n <div class=\"bubble\" style=\"background:rgba(139,92,246,.12)\">\r\n <svg class=\"svg purple\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 22s8-4 8-10V6l-8-4-8 4v6c0 6 8 10 8 10z\"><\/path>\r\n <path d=\"M9 12l2 2 4-4\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"margin:0; font-size:18px; font-weight:700\">Mayor confianza antes del contacto<\/h3>\r\n <\/div>\r\n\r\n <div class=\"glass result-card reveal-scale delay-300\">\r\n <div class=\"bubble\" style=\"background:rgba(16,185,129,.12)\">\r\n <svg class=\"svg green\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12 2v6\"><\/path>\r\n <path d=\"M6 6h12\"><\/path>\r\n <path d=\"M4 10h16l-2 12H6L4 10z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3 style=\"margin:0; font-size:18px; font-weight:700\">Tiempo de respuesta m\u00e1s r\u00e1pido<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"muted2 reveal delay-400\" style=\"margin:20px 0 0; font-size:13px; font-style:italic\">\r\n Solicita ejemplos recientes durante tu llamada introductoria.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- WHY YALPRO -->\r\n <section class=\"section py-24\">\r\n <div class=\"container\">\r\n <div class=\"grid-2\">\r\n <div class=\"reveal-left\">\r\n <h2 class=\"h2\" style=\"margin:0 0 12px\">\r\n Construido para <span style=\"color:var(--brand-blue)\">negocios que priorizan<\/span> la calidad\r\n <\/h2>\r\n <p class=\"lead\" style=\"margin:0\">\r\n Si tu reputaci\u00f3n importa, tu marketing necesita lucir y sentirse premium. Mantenemos la\nentrega consistente, la mensajer\u00eda clara y el seguimiento sistem\u00e1tico para que no\ndependas de la suerte.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"stack\">\r\n <div class=\"glass mini reveal-right delay-100\" style=\"border-left:4px solid rgba(0,217,255,.55)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <div style=\"font-weight:600\">Est\u00e1ndares de dise\u00f1o premium, establecidos a nivel de plantilla<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass mini reveal-right delay-200\" style=\"border-left:4px solid rgba(0,217,255,.55)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <div style=\"font-weight:600\">Liderado por estrategia, no publicaciones aleatorias<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass mini reveal-right delay-300\" style=\"border-left:4px solid rgba(0,217,255,.55)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <div style=\"font-weight:600\">Automatizaci\u00f3n que se siente personal y oportuna<\/div>\r\n <\/div>\r\n\r\n <div class=\"glass mini reveal-right delay-400\" style=\"border-left:4px solid rgba(0,217,255,.55)\">\r\n <div class=\"ico\">\r\n <svg class=\"svg-sm blue\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\r\n <\/div>\r\n <div style=\"font-weight:600\">Conocimiento del mercado local para audiencias de Marina Alta<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FINAL CTA -->\r\n <section class=\"section py-32 final-cta\" id=\"contact\">\r\n <div class=\"final-bg1\"><\/div>\r\n <div class=\"final-bg2\"><\/div>\r\n <div class=\"final-glow pulse-glow\"><\/div>\r\n\r\n <div class=\"container reveal-scale\" style=\"position:relative; z-index:2; max-width:900px\">\r\n <h2 class=\"h3\" style=\"margin:0 0 14px\">\r\n \u00bfListo para un sistema <span style=\"color:transparent; background:linear-gradient(90deg,#fff,rgba(255,255,255,.55)); -webkit-background-clip:text; background-clip:text\">de crecimiento serio?<\/span>\r\n <\/h2>\r\n <p class=\"lead\" style=\"margin:0 0 26px; color:rgba(255,255,255,.78)\">\r\n Reserva una breve llamada introductoria. Mapearemos lo que falta, qu\u00e9 priorizar y\nc\u00f3mo se ve un sistema de crecimiento realista para tu negocio.\r\n <\/p>\r\n\r\n <div class=\"cta-btn-wrap\">\r\n <a class=\"cta-btn\" href=\"https:\/\/wa.me\/34678753823\" target=\"_blank\" rel=\"noopener\">Reservar Llamada Introductoria<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"float\" style=\"position:absolute; top:80px; left:80px; width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.28)\"><\/div>\r\n <div class=\"float-delayed\" style=\"position:absolute; bottom:80px; right:80px; width:10px; height:10px; border-radius:999px; background:rgba(0,217,255,.30)\"><\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Reveal observer\r\n const revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if(e.isIntersecting){\r\n e.target.classList.add('active');\r\n obs.unobserve(e.target);\r\n }\r\n });\r\n }, {threshold:0.12, rootMargin:\"0px 0px -60px 0px\"});\r\n revealEls.forEach(el => obs.observe(el));\r\n\r\n \/\/ Cursor glow\r\n const glow = document.getElementById('cursor-glow');\r\n document.addEventListener('mousemove', (e) => {\r\n requestAnimationFrame(() => {\r\n glow.style.left = e.clientX + \"px\";\r\n glow.style.top = e.clientY + \"px\";\r\n });\r\n });\r\n\r\n \/\/ Scroll progress\r\n const bar = document.getElementById('progress-bar');\r\n window.addEventListener('scroll', () => {\r\n const winScroll = document.documentElement.scrollTop || document.body.scrollTop;\r\n const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\r\n const scrolled = height > 0 ? (winScroll \/ height) * 100 : 0;\r\n bar.style.width = scrolled + \"%\";\r\n }, {passive:true});\r\n\r\n \/\/ Benefits: default first open\r\n const cols = Array.from(document.querySelectorAll('.benefit-item'));\r\n function openIdx(idx){\r\n cols.forEach(c => c.classList.remove('active'));\r\n if(cols[idx]) cols[idx].classList.add('active');\r\n }\r\n function openEl(el){\r\n cols.forEach(c => c.classList.remove('active'));\r\n el.classList.add('active');\r\n }\r\n if(cols[0]) cols[0].classList.add('active');\r\n\r\n \/\/ Desktop hover only (avoid touch jitter)\r\n const isTouch = window.matchMedia(\"(hover: none)\").matches;\r\n if(!isTouch){\r\n cols.forEach(col => {\r\n col.addEventListener('mouseenter', () => openEl(col), {passive:true});\r\n });\r\n }\r\n\r\n \/\/ Mobile click\r\n cols.forEach(col => {\r\n col.addEventListener('click', () => openEl(col));\r\n });\r\n\r\n \/\/ Mobile smooth auto-open (IntersectionObserver)\r\n const section = document.getElementById('subscription-benefits');\r\n const isMobile = window.matchMedia(\"(max-width: 767px)\").matches;\r\n\r\n if(section && isMobile){\r\n let lastSwitch = 0;\r\n const COOLDOWN = 600;\r\n\r\n const io = new IntersectionObserver((entries) => {\r\n let best = null;\r\n\r\n entries.forEach(e => {\r\n if(!e.isIntersecting) return;\r\n if(!best || e.intersectionRatio > best.intersectionRatio){\r\n best = e;\r\n }\r\n });\r\n\r\n if(best){\r\n const now = Date.now();\r\n if(now - lastSwitch < COOLDOWN) return;\r\n lastSwitch = now;\r\n openEl(best.target);\r\n }\r\n }, {\r\n root: null,\r\n threshold: [0.3, 0.75, 0.9],\r\n rootMargin: \"-35% 0px -55% 0px\"\r\n });\r\n\r\n cols.forEach(c => io.observe(c));\r\n }\r\n\r\n \/\/ Video autoplay setup\r\n (() => {\r\n const vids = [\r\n document.querySelector('.hero-desktop-video'),\r\n document.querySelector('.hero-mobile-video')\r\n ].filter(Boolean);\r\n\r\n const forceSetup = (v) => {\r\n v.muted = true;\r\n v.playsInline = true;\r\n v.loop = true;\r\n v.setAttribute('playsinline','');\r\n v.setAttribute('webkit-playsinline','');\r\n v.setAttribute('muted','');\r\n v.setAttribute('loop','');\r\n v.setAttribute('preload','auto');\r\n\r\n const tryPlay = () => {\r\n const p = v.play();\r\n if(p && p.catch) p.catch(()=>{});\r\n };\r\n\r\n v.addEventListener('loadedmetadata', tryPlay, {passive:true});\r\n v.addEventListener('canplay', tryPlay, {passive:true});\r\n v.addEventListener('ended', () => { v.currentTime = 0; tryPlay(); }, {passive:true});\r\n\r\n document.addEventListener('visibilitychange', () => {\r\n if(!document.hidden) tryPlay();\r\n }, {passive:true});\r\n\r\n const kick = () => { tryPlay(); };\r\n window.addEventListener('touchstart', kick, {passive:true, once:true});\r\n window.addEventListener('click', kick, {passive:true, once:true});\r\n };\r\n\r\n vids.forEach(forceSetup);\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>YALPRO | Premium Digital Marketing Systems VIDEO LOADING… Clarity first. Systems second. Growth follows. Yalpro builds marketing systems for serious local businesses. We combine premium content, local distribution, SEO foundations and automation so you are visible, trusted, and followed up properly, without chaos. Premium content that builds authority Designed to look and feel international-standard. Automation […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/pages\/6126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/comments?post=6126"}],"version-history":[{"count":296,"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/pages\/6126\/revisions"}],"predecessor-version":[{"id":6515,"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/pages\/6126\/revisions\/6515"}],"wp:attachment":[{"href":"https:\/\/www.yalpro.com\/es\/wp-json\/wp\/v2\/media?parent=6126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}