Regalaland - Hero Optimizado V7<\/title>\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=Limelight&family=Montserrat:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V7 --- *\/\r\n #hero-unique-scope {\r\n \/* VARIABLES *\/\r\n --lalaland-dark: #170063;\r\n --lalaland-yellow: #fdff03;\r\n --lalaland-white: #fbfbff;\r\n \r\n --glass-bg: rgba(10, 5, 30, 0.60);\r\n --glass-border: rgba(255, 255, 255, 0.15);\r\n \r\n font-family: 'Montserrat', sans-serif;\r\n margin: 0; padding: 0;\r\n box-sizing: border-box;\r\n line-height: 1.5;\r\n }\r\n\r\n #hero-unique-scope * { box-sizing: border-box; }\r\n #hero-unique-scope a { text-decoration: none; }\r\n\r\n \/* SECCI\u00d3N *\/\r\n #hero-unique-scope .hero-section {\r\n position: relative;\r\n height: 90vh;\r\n min-height: 750px; \/* Un poco m\u00e1s alto para acomodar el nuevo texto *\/\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n background-color: var(--lalaland-dark);\r\n overflow: hidden;\r\n }\r\n\r\n \/* CAPAS FONDO *\/\r\n #hero-unique-scope .layer {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n transition: transform 0.1s ease-out;\r\n }\r\n\r\n #hero-unique-scope .bg-scenery {\r\n background-image: url('https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-hero-bg-5-nocharacter.webp');\r\n background-size: cover;\r\n background-position: center;\r\n z-index: 1;\r\n transform: scale(1.1);\r\n }\r\n\r\n #hero-unique-scope .bg-characters-img {\r\n position: absolute;\r\n bottom: 0; right: 0;\r\n height: 65vh; max-height: 750px; width: auto;\r\n z-index: 2;\r\n filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.6));\r\n pointer-events: none;\r\n }\r\n\r\n \/* CONTENIDO *\/\r\n #hero-unique-scope .content-container {\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n \/* PANEL CRISTAL *\/\r\n #hero-unique-scope .glass-panel {\r\n width: 100%;\r\n max-width: 950px; \/* M\u00e1s ancho para el H1 largo *\/\r\n margin-right: auto;\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr; \/* Texto un poco m\u00e1s ancho ahora *\/\r\n gap: 30px;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 20px;\r\n padding: 50px;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.7);\r\n align-items: center;\r\n }\r\n\r\n \/* TEXTO *\/\r\n #hero-unique-scope .text-col { color: var(--lalaland-white); z-index: 5; }\r\n\r\n \/* BRAND TAG (Estrat\u00e9gico) *\/\r\n #hero-unique-scope .brand-tag {\r\n display: inline-block;\r\n color: var(--lalaland-yellow);\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n border-bottom: 1px solid var(--lalaland-yellow);\r\n padding-bottom: 4px;\r\n }\r\n\r\n \/* H1 (SEO + Descriptivo) *\/\r\n #hero-unique-scope h1 {\r\n font-family: 'Limelight', cursive;\r\n \/* Tama\u00f1o ajustado para frase larga: *\/\r\n font-size: 2.8rem; \r\n line-height: 1.2;\r\n margin: 0 0 25px 0;\r\n color: var(--lalaland-white);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.4);\r\n }\r\n\r\n \/* SUBT\u00cdTULO (Emoci\u00f3n + Funci\u00f3n) *\/\r\n #hero-unique-scope p.subtitle {\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n margin-bottom: 40px;\r\n color: #e0e0e0;\r\n font-weight: 400;\r\n }\r\n \r\n #hero-unique-scope strong { color: #fff; font-weight: 600; }\r\n\r\n \/* BOTONES (Nueva Jerarqu\u00eda) *\/\r\n #hero-unique-scope .buttons-wrapper {\r\n display: flex;\r\n gap: 20px;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* CTA PRINCIPAL (Grande y Llamativo) *\/\r\n #hero-unique-scope .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n \/* Padding aumentado *\/\r\n padding: 18px 38px; \r\n background: var(--lalaland-yellow);\r\n color: #1a0b2e;\r\n font-weight: 800; \/* Extra bold *\/\r\n border-radius: 8px;\r\n \/* Fuente aumentada *\/\r\n font-size: 1.05rem; \r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 20px rgba(253, 255, 3, 0.25);\r\n border: none;\r\n white-space: nowrap; \/* Evita que se rompa en dos l\u00edneas *\/\r\n }\r\n #hero-unique-scope .cta-btn:hover { \r\n transform: translateY(-3px) scale(1.02); \r\n box-shadow: 0 15px 30px rgba(253, 255, 3, 0.4); \r\n background: #fff;\r\n }\r\n\r\n \/* CTA SECUNDARIO (Sutil) *\/\r\n #hero-unique-scope .secondary-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 14px 20px;\r\n color: var(--lalaland-white);\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n border-bottom: 1px solid transparent;\r\n opacity: 0.85; \/* Un poco transparente para dar prioridad al otro *\/\r\n }\r\n #hero-unique-scope .secondary-btn:hover {\r\n color: var(--lalaland-yellow);\r\n border-bottom: 1px solid var(--lalaland-yellow);\r\n opacity: 1;\r\n }\r\n\r\n \/* CARRUSEL *\/\r\n #hero-unique-scope .carousel-col {\r\n position: relative;\r\n height: 450px;\r\n display: flex;\r\n align-items: center; justify-content: center;\r\n }\r\n\r\n #hero-unique-scope .carousel-slide {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n opacity: 0; transform: scale(0.95);\r\n transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);\r\n display: flex; align-items: center; justify-content: center;\r\n pointer-events: none;\r\n }\r\n #hero-unique-scope .carousel-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }\r\n\r\n #hero-unique-scope .img-phone {\r\n width: 45%;\r\n transform: rotate(-4deg) translateX(10px) translateY(20px);\r\n z-index: 20;\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));\r\n transition: transform 0.4s ease;\r\n }\r\n #hero-unique-scope .img-result {\r\n width: 70%;\r\n transform: rotate(3deg) translateX(-10px) translateY(-10px);\r\n z-index: 10;\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n \/* ESTRELLAS *\/\r\n #hero-unique-scope .star {\r\n position: absolute; background: white; border-radius: 50%;\r\n animation: hero-blink 4s infinite;\r\n }\r\n @keyframes hero-blink { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1100px) {\r\n #hero-unique-scope .glass-panel { max-width: 100%; padding: 40px; gap: 20px; }\r\n #hero-unique-scope h1 { font-size: 2.4rem; }\r\n #hero-unique-scope .bg-characters-img { opacity: 0.5; height: 50vh; right: -10%; } \r\n }\r\n\r\n @media (max-width: 900px) {\r\n #hero-unique-scope .hero-section { height: auto; min-height: 100vh; padding: 100px 0 50px 0; align-items: flex-start; }\r\n #hero-unique-scope .content-container { padding: 0 20px; }\r\n #hero-unique-scope .glass-panel { \r\n grid-template-columns: 1fr; text-align: center; padding: 40px 25px;\r\n }\r\n #hero-unique-scope .brand-tag { margin: 0 auto 20px auto; }\r\n #hero-unique-scope .buttons-wrapper { justify-content: center; gap: 15px; }\r\n \r\n \/* CORRECCI\u00d3N: OCULTAR PERSONAJES EN M\u00d3VIL *\/\r\n #hero-unique-scope .bg-characters-img { display: none; }\r\n \r\n #hero-unique-scope .carousel-col { margin-top: 20px; height: 350px; }\r\n #hero-unique-scope .cta-btn { width: 100%; } \/* Bot\u00f3n ancho completo en m\u00f3vil *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"hero-unique-scope\">\r\n \r\n <section class=\"hero-section\" id=\"hero-area-v7\">\r\n \r\n <div class=\"layer bg-scenery\" id=\"bg-layer-v7\"><\/div>\r\n <div id=\"stars-container-v7\" class=\"layer\"><\/div>\r\n <div class=\"layer\" id=\"chars-layer-v7\" style=\"z-index: 2;\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-hero-bg-5-onlycharacter.webp\" alt=\"Personajes\" class=\"bg-characters-img\">\r\n <\/div>\r\n\r\n <div class=\"content-container\">\r\n <div class=\"glass-panel\">\r\n \r\n <div class=\"text-col\">\r\n <span class=\"brand-tag\">\u2728 Regalos personalizados con significado<\/span>\r\n \r\n <h1>Ilustraciones personalizadas a partir de tu foto<\/h1>\r\n \r\n <p class=\"subtitle\">\r\n Convierte una foto especial en una ilustraci\u00f3n \u00fanica hecha para regalar, recordar o decorar.\r\n <br><br>\r\n Recibe tu ilustraci\u00f3n en <strong>archivo digital en alta calidad<\/strong> o impresa en p\u00f3ster, lienzo u otro formato f\u00edsico.\r\n <\/p>\r\n \r\n <div class=\"buttons-wrapper\">\r\n <a href=\"#crear\" class=\"cta-btn\">Encargar ilustraci\u00f3n<\/a>\r\n <a href=\"#ejemplos\" class=\"secondary-btn\">Galer\u00eda de ejemplos \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-col\">\r\n <div class=\"carousel-slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-1a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-1b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-2a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-2b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-3a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-3b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-4a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-4b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-5a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-5b.webp\" class=\"img-result\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ 1. PARALLAX\r\n const heroSection = document.getElementById('hero-area-v7');\r\n const bgLayer = document.getElementById('bg-layer-v7');\r\n const charsLayer = document.getElementById('chars-layer-v7');\r\n\r\n if(heroSection) {\r\n heroSection.addEventListener('mousemove', (e) => {\r\n const x = (window.innerWidth \/ 2 - e.pageX) \/ 30; \r\n const y = (window.innerHeight \/ 2 - e.pageY) \/ 30;\r\n if(bgLayer) bgLayer.style.transform = `scale(1.1) translate(${x * 0.5}px, ${y * 0.5}px)`;\r\n if(charsLayer) charsLayer.style.transform = `translate(${x * 1.5}px, ${y * 1.5}px)`;\r\n });\r\n }\r\n\r\n \/\/ 2. ESTRELLAS\r\n const starsContainer = document.getElementById('stars-container-v7');\r\n if(starsContainer) {\r\n for(let i=0; i<45; i++) {\r\n let star = document.createElement('div');\r\n star.className = 'star';\r\n star.style.left = Math.random() * 100 + '%';\r\n star.style.top = Math.random() * 85 + '%';\r\n star.style.width = Math.random() * 3 + 'px';\r\n star.style.height = star.style.width;\r\n star.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n starsContainer.appendChild(star);\r\n }\r\n }\r\n\r\n \/\/ 3. CARRUSEL\r\n const scope = document.getElementById('hero-unique-scope');\r\n if(scope) {\r\n let idx = 0;\r\n const slides = scope.querySelectorAll('.carousel-slide');\r\n if(slides.length > 0) {\r\n setInterval(() => {\r\n slides[idx].classList.remove('active');\r\n idx = (idx + 1) % slides.length;\r\n slides[idx].classList.add('active');\r\n }, 4000);\r\n }\r\n }\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<div class=\"elementor-element elementor-element-db7c3b2 e-flex e-con-boxed e-con e-parent\" data-id=\"db7c3b2\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49785c7 elementor-widget elementor-widget-html\" data-id=\"49785c7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Regalaland - Magic Slider V7<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Limelight&family=Montserrat:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V7 --- *\/\r\n #magic-v7-scope {\r\n \/* PALETA OFICIAL REGALALAND *\/\r\n --morado-oscuro: #170063;\r\n --morado-medio: #3a1c9c;\r\n --morado-principal: #5f2fbd;\r\n --amarillo-principal: #fdff03;\r\n --blanco: #fbfbff;\r\n \r\n --bg-color: #0f0524;\r\n --phone-border: #121212;\r\n \r\n \/* Medidas fijas *\/\r\n --phone-w: 340px;\r\n --phone-h: 604px; \r\n \r\n font-family: 'Montserrat', sans-serif;\r\n background-color: var(--bg-color);\r\n color: var(--blanco);\r\n padding: 80px 0 120px 0;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #magic-v7-scope * { box-sizing: border-box; }\r\n\r\n #magic-v7-scope h2 {\r\n font-family: 'Limelight', cursive;\r\n font-size: 3.5rem;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n color: var(--blanco);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.5);\r\n }\r\n\r\n #magic-v7-scope .subtitle {\r\n text-align: center;\r\n color: #ccc;\r\n margin-bottom: 60px;\r\n font-size: 1.1rem;\r\n max-width: 600px;\r\n margin-left: auto; margin-right: auto;\r\n }\r\n\r\n \/* --- ESCENARIO 3D --- *\/\r\n .slider-stage {\r\n position: relative;\r\n width: 100%;\r\n height: 720px;\r\n perspective: 1200px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n \/* --- CARTA M\u00d3VIL --- *\/\r\n .phone-card {\r\n position: absolute;\r\n width: var(--phone-w);\r\n height: var(--phone-h);\r\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\r\n opacity: 0;\r\n transform: scale(0.8) translateY(20px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .phone-card.active {\r\n opacity: 1;\r\n transform: translateX(0) scale(1) rotateY(0deg);\r\n z-index: 20;\r\n pointer-events: auto;\r\n filter: brightness(1);\r\n \/* Sombra morada elegante *\/\r\n box-shadow: 0 40px 80px rgba(23, 0, 99, 0.5);\r\n }\r\n\r\n .phone-card.prev {\r\n opacity: 0.5;\r\n transform: translateX(-360px) scale(0.85) rotateY(25deg);\r\n z-index: 10;\r\n filter: brightness(0.4) blur(1px);\r\n cursor: pointer;\r\n }\r\n\r\n .phone-card.next {\r\n opacity: 0.5;\r\n transform: translateX(360px) scale(0.85) rotateY(-25deg);\r\n z-index: 10;\r\n filter: brightness(0.4) blur(1px);\r\n cursor: pointer;\r\n }\r\n\r\n \/* --- MARCO DEL TEL\u00c9FONO --- *\/\r\n .phone-frame {\r\n width: 100%;\r\n height: 100%;\r\n background: #000;\r\n border-radius: 45px;\r\n border: 10px solid var(--phone-border);\r\n box-shadow: inset 0 0 0 2px #333;\r\n overflow: hidden; \r\n position: relative;\r\n \/* Flexbox asegura que el contenido se estire bien *\/\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .phone-notch {\r\n position: absolute;\r\n top: 0; left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px; height: 26px;\r\n background: var(--phone-border);\r\n border-bottom-left-radius: 16px;\r\n border-bottom-right-radius: 16px;\r\n z-index: 50;\r\n }\r\n\r\n \/* --- SLIDER MAGIA (INTERIOR) --- *\/\r\n .ba-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100%; \/* Ocupa todo el marco *\/\r\n background: #000;\r\n \r\n \/* BLOQUEO DE SELECCI\u00d3N AZUL (SOLUCI\u00d3N DEFINITIVA) *\/\r\n -webkit-user-select: none !important;\r\n -moz-user-select: none !important;\r\n -ms-user-select: none !important;\r\n user-select: none !important;\r\n -webkit-user-drag: none !important;\r\n }\r\n\r\n \/* CLASE MAESTRA PARA IM\u00c1GENES \r\n Soluci\u00f3n al \"hueco negro\": height: 101% + top: -1px\r\n *\/\r\n .img-magic-fit {\r\n position: absolute;\r\n width: 100%; \r\n \/* TRUCO: 1px m\u00e1s alto que el contenedor para evitar huecos *\/\r\n height: calc(100% + 2px) !important; \r\n top: -1px; \/* Centramos el exceso *\/\r\n left: 0;\r\n \r\n object-fit: cover !important;\r\n object-position: center !important;\r\n display: block;\r\n \r\n \/* Bloqueo de arrastre fantasma *\/\r\n pointer-events: none;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n\r\n \/* M\u00c1SCARA DE RECORTE (ANTES) *\/\r\n .resize-mask {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-right: 3px solid var(--amarillo-principal);\r\n z-index: 10;\r\n background: #000;\r\n will-change: width;\r\n }\r\n\r\n \/* La imagen de dentro de la m\u00e1scara necesita un ancho fijo *\/\r\n .img-fixed-inner {\r\n width: var(--phone-w); \/* Ancho fijo *\/\r\n max-width: none !important;\r\n }\r\n\r\n \/* TIRADOR (HANDLE) *\/\r\n .handle {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 44px; height: 44px;\r\n background: var(--amarillo-principal);\r\n border-radius: 50%;\r\n z-index: 20;\r\n display: flex;\r\n align-items: center; justify-content: center;\r\n box-shadow: 0 0 20px rgba(253, 255, 3, 0.6);\r\n cursor: col-resize;\r\n \/* Evita parpadeos en m\u00f3viles *\/\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n .handle-icon { width: 20px; height: 20px; pointer-events: none; }\r\n\r\n \/* --- TEXTOS INFERIORES --- *\/\r\n .info-box {\r\n position: absolute;\r\n bottom: -90px; left: 0; width: 100%;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: all 0.4s ease 0.2s;\r\n }\r\n\r\n .phone-card.active .info-box { opacity: 1; transform: translateY(0); }\r\n\r\n .info-title {\r\n color: var(--morado-principal); \/* #5f2fbd *\/\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 0.85rem;\r\n letter-spacing: 2px;\r\n display: block; margin-bottom: 5px;\r\n }\r\n .info-desc {\r\n font-size: 1.2rem;\r\n font-family: 'Limelight', cursive;\r\n color: var(--blanco);\r\n }\r\n\r\n \/* --- BOTONES NAVEGACI\u00d3N (MORADOS) --- *\/\r\n button.nav-btn-v7 {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 60px !important;\r\n height: 60px !important;\r\n border-radius: 50% !important;\r\n \/* Degradado Morado Corporativo *\/\r\n background: linear-gradient(135deg, var(--morado-medio), var(--morado-principal)) !important;\r\n border: 2px solid rgba(255, 255, 255, 0.15) !important;\r\n color: white !important;\r\n font-size: 1.5rem !important;\r\n cursor: pointer !important;\r\n z-index: 100;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n transition: all 0.3s ease !important;\r\n box-shadow: 0 10px 25px rgba(23, 0, 99, 0.4) !important;\r\n outline: none !important;\r\n padding: 0 !important;\r\n }\r\n\r\n button.nav-btn-v7:hover {\r\n background: var(--amarillo-principal) !important;\r\n color: var(--morado-oscuro) !important;\r\n border-color: var(--amarillo-principal) !important;\r\n transform: translateY(-50%) scale(1.1) !important;\r\n box-shadow: 0 0 30px rgba(253, 255, 3, 0.5) !important;\r\n }\r\n\r\n .nav-prev { left: 10%; }\r\n .nav-next { right: 10%; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 900px) {\r\n #magic-v7-scope h2 { font-size: 2.5rem; }\r\n .phone-card { width: 280px; height: 498px; }\r\n .phone-card.prev { transform: translateX(-140px) scale(0.85) rotateY(15deg); opacity: 0.3; }\r\n .phone-card.next { transform: translateX(140px) scale(0.85) rotateY(-15deg); opacity: 0.3; }\r\n .nav-prev { left: 2%; }\r\n .nav-next { right: 2%; }\r\n .slider-stage { height: 620px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"magic-v7-scope\">\r\n \r\n <h2>El Arte de Transformar<\/h2>\r\n <p class=\"subtitle\">Desliza la barra amarilla para revelar la magia.<\/p>\r\n\r\n <div class=\"slider-stage\">\r\n \r\n <button class=\"nav-btn-v7 nav-prev\" onclick=\"moveV7Carousel(-1)\">\u276e<\/button>\r\n <button class=\"nav-btn-v7 nav-next\" onclick=\"moveV7Carousel(1)\">\u276f<\/button>\r\n\r\n <div class=\"phone-card active\" data-index=\"0\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\" alt=\"Ilustraci\u00f3n\">\r\n \r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\" alt=\"Original\">\r\n <\/div>\r\n \r\n <div class=\"handle\">\r\n <svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><polyline points=\"9 18 3 12 9 6\" style=\"display:none\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Regalo de Aniversario<\/span>\r\n <span class=\"info-desc\">Estilo Pastel \u00b7 22 Oct 21<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phone-card next\" data-index=\"1\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\">\r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\">\r\n <\/div>\r\n <div class=\"handle\"><svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Retrato Mascota<\/span>\r\n <span class=\"info-desc\">Estilo \u00d3leo Cl\u00e1sico<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phone-card prev\" data-index=\"2\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\">\r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\">\r\n <\/div>\r\n <div class=\"handle\"><svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Regalo Familiar<\/span>\r\n <span class=\"info-desc\">Estilo Acuarela<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ === 1. L\u00d3GICA COMPARADOR (BEFORE\/AFTER) ===\r\n function initMagicV7() {\r\n const sliders = document.querySelectorAll('.ba-slider');\r\n \r\n sliders.forEach(slider => {\r\n const mask = slider.querySelector('.resize-mask');\r\n const handle = slider.querySelector('.handle');\r\n const innerImg = slider.querySelector('.img-fixed-inner');\r\n const frame = slider.closest('.phone-frame');\r\n\r\n \/\/ Ajuste de ancho exacto para evitar deformaci\u00f3n\r\n const fixW = () => {\r\n const fw = frame.offsetWidth;\r\n innerImg.style.width = fw + 'px';\r\n };\r\n\r\n fixW();\r\n window.addEventListener('resize', fixW);\r\n\r\n let dragging = false;\r\n\r\n const updatePos = (clientX) => {\r\n const rect = slider.getBoundingClientRect();\r\n let x = clientX - rect.left;\r\n \r\n if (x < 0) x = 0;\r\n if (x > rect.width) x = rect.width;\r\n\r\n const pct = (x \/ rect.width) * 100;\r\n\r\n mask.style.width = pct + \"%\";\r\n handle.style.left = pct + \"%\";\r\n };\r\n\r\n \/\/ Mouse Events\r\n slider.addEventListener('mousedown', (e) => {\r\n dragging = true;\r\n e.preventDefault(); \/\/ Evita selecci\u00f3n texto\r\n });\r\n window.addEventListener('mouseup', () => dragging = false);\r\n slider.addEventListener('mousemove', (e) => {\r\n if (!dragging) return;\r\n e.preventDefault(); \/\/ CRUCIAL para evitar el azul\r\n updatePos(e.clientX);\r\n });\r\n\r\n \/\/ Touch Events\r\n slider.addEventListener('touchstart', () => dragging = true, {passive: false});\r\n window.addEventListener('touchend', () => dragging = false);\r\n slider.addEventListener('touchmove', (e) => {\r\n if (!dragging) return;\r\n \/\/ e.preventDefault(); \/\/ En m\u00f3viles a veces bloquea el scroll, cuidado\r\n updatePos(e.touches[0].clientX);\r\n });\r\n });\r\n }\r\n\r\n \/\/ === 2. L\u00d3GICA CARRUSEL 3D ===\r\n const cards = document.querySelectorAll('.phone-card');\r\n let idx = 0;\r\n const count = cards.length;\r\n\r\n window.moveV7Carousel = (d) => {\r\n idx = (idx + d + count) % count;\r\n renderV7();\r\n };\r\n\r\n function renderV7() {\r\n cards.forEach((c, i) => {\r\n c.className = 'phone-card';\r\n if (i === idx) c.classList.add('active');\r\n else if (i === (idx - 1 + count) % count) c.classList.add('prev');\r\n else if (i === (idx + 1) % count) c.classList.add('next');\r\n else c.style.opacity = 0;\r\n });\r\n setTimeout(initMagicV7, 50); \/\/ Recalcular\r\n }\r\n\r\n cards.forEach(c => {\r\n c.addEventListener('click', () => {\r\n if (c.classList.contains('prev')) moveV7Carousel(-1);\r\n if (c.classList.contains('next')) moveV7Carousel(1);\r\n });\r\n });\r\n\r\n initMagicV7();\r\n renderV7();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc0fbc9 e-con-full e-flex e-con e-parent\" data-id=\"bc0fbc9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56108cf elementor-widget elementor-widget-html\" data-id=\"56108cf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Por Qu\u00e9 Regalaland - Final<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Limelight&family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V8 --- *\/\r\n #why-final-scope {\r\n \/* PALETA *\/\r\n --bg-deep: #0f0524;\r\n --purple-glow: #5f2fbd;\r\n --purple-dark: #2a1b5e;\r\n --accent-gold: #fdff03;\r\n --text-white: #fbfbff;\r\n --text-muted: #8f8f9f;\r\n \r\n font-family: 'Montserrat', sans-serif;\r\n background-color: var(--bg-deep);\r\n color: var(--text-white);\r\n padding: 120px 0;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #why-final-scope * { box-sizing: border-box; }\r\n\r\n \/* --- FONDO AMBIENTAL (Sutil) --- *\/\r\n #why-final-scope::before {\r\n content: '';\r\n position: absolute;\r\n top: 20%; left: -10%;\r\n width: 800px; height: 800px;\r\n background: radial-gradient(circle, rgba(95, 47, 189, 0.15) 0%, transparent 70%);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n #why-final-scope .container {\r\n max-width: 1250px;\r\n margin: 0 auto;\r\n padding: 0 25px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* --- CABECERA --- *\/\r\n #why-final-scope .header-block {\r\n text-align: center;\r\n max-width: 850px;\r\n margin: 0 auto 70px auto;\r\n }\r\n\r\n #why-final-scope h2 {\r\n font-family: 'Limelight', cursive;\r\n font-size: 3.2rem;\r\n line-height: 1.1;\r\n margin-bottom: 25px;\r\n color: var(--text-white);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.3);\r\n }\r\n\r\n #why-final-scope .subtitle {\r\n font-size: 1.1rem;\r\n line-height: 1.7;\r\n color: #d0d0e0;\r\n font-weight: 300;\r\n }\r\n \r\n #why-final-scope .highlight-text { \r\n color: var(--accent-gold); \r\n font-weight: 600; \r\n position: relative;\r\n display: inline-block;\r\n }\r\n \r\n \/* Subrayado sutil para el texto destacado *\/\r\n #why-final-scope .highlight-text::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;\r\n background: var(--accent-gold); opacity: 0.5;\r\n }\r\n\r\n \/* --- GRID DE TARJETAS (Regalaland Izq - Otros Der) --- *\/\r\n #why-final-scope .comparison-grid {\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr; \/* Regalaland un poco m\u00e1s ancho *\/\r\n gap: 40px;\r\n align-items: stretch; \/* Misma altura visual *\/\r\n }\r\n\r\n \/* --- 1. TARJETA REGALALAND (H\u00c9ROE - IZQUIERDA) --- *\/\r\n #why-final-scope .card-hero {\r\n \/* Fondo degradado sutil pero rico *\/\r\n background: linear-gradient(145deg, rgba(23, 0, 99, 0.8), rgba(42, 27, 94, 0.9));\r\n border: 1px solid rgba(95, 47, 189, 0.6);\r\n border-radius: 24px;\r\n padding: 50px;\r\n position: relative;\r\n box-shadow: 0 25px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);\r\n \/* Efecto cristal *\/\r\n backdrop-filter: blur(20px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Borde superior brillante dorado *\/\r\n #why-final-scope .card-hero::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; width: 100%; height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);\r\n opacity: 0.8;\r\n }\r\n\r\n #why-final-scope .brand-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 40px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n #why-final-scope .regala-logo {\r\n font-family: 'Limelight', cursive;\r\n font-size: 2rem;\r\n color: var(--text-white);\r\n letter-spacing: 1px;\r\n }\r\n\r\n #why-final-scope .badge-pro {\r\n background: rgba(253, 255, 3, 0.15);\r\n color: var(--accent-gold);\r\n padding: 6px 14px;\r\n border-radius: 50px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n border: 1px solid var(--accent-gold);\r\n box-shadow: 0 0 15px rgba(253, 255, 3, 0.2);\r\n }\r\n\r\n \/* Lista de beneficios *\/\r\n #why-final-scope .benefit-list {\r\n list-style: none; padding: 0; margin: 0;\r\n }\r\n\r\n #why-final-scope .benefit-item {\r\n display: flex; gap: 18px;\r\n margin-bottom: 25px;\r\n align-items: flex-start;\r\n }\r\n\r\n #why-final-scope .icon-check {\r\n background: var(--accent-gold);\r\n color: #000;\r\n width: 26px; height: 26px;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 800; font-size: 0.9rem;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 10px rgba(253, 255, 3, 0.4);\r\n margin-top: 2px;\r\n }\r\n\r\n #why-final-scope .benefit-text {\r\n font-size: 1.05rem;\r\n color: #eee;\r\n font-weight: 400;\r\n }\r\n \r\n #why-final-scope .benefit-text strong {\r\n color: var(--text-white);\r\n font-weight: 600;\r\n \/* Subrayado sutil amarillo *\/\r\n border-bottom: 2px solid rgba(253, 255, 3, 0.4);\r\n }\r\n\r\n \/* Imagen de refuerzo integrada *\/\r\n #why-final-scope .visual-proof {\r\n margin-top: 30px;\r\n width: 100%;\r\n height: 220px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n }\r\n \r\n #why-final-scope .visual-proof img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.6s ease;\r\n filter: saturate(1.1); \/* Un poco m\u00e1s de vida *\/\r\n }\r\n \r\n #why-final-scope .card-hero:hover .visual-proof img { transform: scale(1.05); }\r\n\r\n #why-final-scope .proof-caption {\r\n position: absolute; bottom: 15px; left: 15px;\r\n background: rgba(0,0,0,0.7);\r\n padding: 5px 12px;\r\n border-radius: 8px;\r\n font-size: 0.75rem; color: #fff;\r\n backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n \/* --- 2. TARJETA GENERADORES (VILLANO - DERECHA) --- *\/\r\n #why-final-scope .card-basic {\r\n \/* Fondo plano y apagado *\/\r\n background: rgba(255, 255, 255, 0.02);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 24px;\r\n padding: 50px;\r\n display: flex;\r\n flex-direction: column;\r\n \/* Sin sombra brillante, se siente \"atr\u00e1s\" *\/\r\n }\r\n\r\n #why-final-scope .basic-header {\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n color: var(--text-muted);\r\n margin-bottom: 40px;\r\n font-weight: 700;\r\n display: flex; align-items: center; gap: 10px;\r\n opacity: 0.8;\r\n }\r\n\r\n #why-final-scope .pain-list {\r\n list-style: none; padding: 0; margin: 0;\r\n }\r\n\r\n #why-final-scope .pain-item {\r\n display: flex; gap: 18px;\r\n margin-bottom: 30px;\r\n align-items: flex-start;\r\n \/* Opacidad reducida para restar importancia *\/\r\n opacity: 0.7;\r\n transition: opacity 0.3s;\r\n }\r\n \r\n #why-final-scope .card-basic:hover .pain-item { opacity: 0.9; }\r\n\r\n #why-final-scope .icon-cross {\r\n color: #ff6b6b; \/* Rojo suave *\/\r\n font-size: 1.2rem;\r\n line-height: 1;\r\n margin-top: 2px;\r\n width: 26px; text-align: center;\r\n }\r\n\r\n #why-final-scope .pain-title {\r\n display: block;\r\n color: #ccc;\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n font-size: 1rem;\r\n }\r\n\r\n #why-final-scope .pain-desc {\r\n display: block;\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n line-height: 1.4;\r\n }\r\n\r\n \/* --- ANIMACIONES --- *\/\r\n #why-final-scope .reveal {\r\n opacity: 0; transform: translateY(30px);\r\n transition: all 0.8s ease-out;\r\n }\r\n #why-final-scope .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 950px) {\r\n #why-final-scope .comparison-grid {\r\n grid-template-columns: 1fr; \/* Una columna *\/\r\n gap: 40px;\r\n }\r\n #why-final-scope .card-hero { order: 1; } \/* Regalaland PRIMERO *\/\r\n #why-final-scope .card-basic { order: 2; padding: 35px; }\r\n #why-final-scope h2 { font-size: 2.5rem; }\r\n #why-final-scope .container { padding: 0 20px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"why-final-scope\">\r\n <div class=\"container\">\r\n \r\n <div class=\"header-block reveal\">\r\n <h2>No es solo IA. Es criterio, dise\u00f1o y experiencia.<\/h2>\r\n <p class=\"subtitle\">\r\n Usamos las mejores herramientas de inteligencia artificial, pero el resultado final \r\n <span class=\"highlight-text\">siempre pasa por manos profesionales<\/span> para garantizar una obra \u00fanica y que represente con fidelidad la foto original.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"comparison-grid\">\r\n \r\n <div class=\"card-hero reveal\" style=\"transition-delay: 0.2s;\">\r\n <div>\r\n <div class=\"brand-header\">\r\n <span class=\"regala-logo\">Regalaland<\/span>\r\n <span class=\"badge-pro\">Calidad Certificada<\/span>\r\n <\/div>\r\n\r\n <ul class=\"benefit-list\">\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"<\/span>Ajustes manuales para asegurar el <strong>parecido real<\/strong> al 100%.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"><strong>Criterio art\u00edstico<\/strong>, composici\u00f3n y correcci\u00f3n de color experta.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"><span><strong>Dise\u00f1adores profesionales<\/strong> retocando cada detalle a mano.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\">Resultados \u00fanicos, <strong>no repetibles<\/strong>. Usamos las \u00faltimas y mejores herramientas de pago del mercado.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"visual-proof\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2026\/01\/regalaland-calidad-certificada.webp\" alt=\"Artista Digital Trabajando\">\r\n <div class=\"proof-caption\">El toque humano marca la diferencia<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-basic reveal\" style=\"transition-delay: 0.4s;\">\r\n <div class=\"basic-header\">\r\n Generadores Autom\u00e1ticos\r\n <\/div>\r\n\r\n <ul class=\"pain-list\">\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Resultados gen\u00e9ricos<\/span>\r\n <span class=\"pain-desc\">Im\u00e1genes que se parecen a todas las dem\u00e1s. Sin personalidad.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Sin control de estilo<\/span>\r\n <span class=\"pain-desc\">Fallos en ojos, manos o colores extra\u00f1os que nadie corrige.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Sin revisi\u00f3n humana<\/span>\r\n <span class=\"pain-desc\">Lo que sale es lo que te quedas. \"Una imagen m\u00e1s\" en tu galer\u00eda.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Baja resoluci\u00f3n<\/span>\r\n <span class=\"pain-desc\">Archivos peque\u00f1os que pixelan al intentar imprimirlos en grande.<\/span>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ Script de animaci\u00f3n simple al hacer scroll\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n document.querySelectorAll('#why-final-scope .reveal').forEach(el => obs.observe(el));\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acd0294 e-con-full e-flex e-con e-parent\" data-id=\"acd0294\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Regalaland – Hero Optimizado V7 \u2728 Regalos personalizados con significado Ilustraciones personalizadas a partir de tu foto Convierte una foto especial en una ilustraci\u00f3n \u00fanica hecha para regalar, recordar o decorar. Recibe tu ilustraci\u00f3n en archivo digital en alta calidad o impresa en p\u00f3ster, lienzo u otro formato f\u00edsico. Encargar ilustraci\u00f3n Galer\u00eda de ejemplos \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":160,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/media?parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Regalaland - Hero Optimizado V7<\/title>\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=Limelight&family=Montserrat:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V7 --- *\/\r\n #hero-unique-scope {\r\n \/* VARIABLES *\/\r\n --lalaland-dark: #170063;\r\n --lalaland-yellow: #fdff03;\r\n --lalaland-white: #fbfbff;\r\n \r\n --glass-bg: rgba(10, 5, 30, 0.60);\r\n --glass-border: rgba(255, 255, 255, 0.15);\r\n \r\n font-family: 'Montserrat', sans-serif;\r\n margin: 0; padding: 0;\r\n box-sizing: border-box;\r\n line-height: 1.5;\r\n }\r\n\r\n #hero-unique-scope * { box-sizing: border-box; }\r\n #hero-unique-scope a { text-decoration: none; }\r\n\r\n \/* SECCI\u00d3N *\/\r\n #hero-unique-scope .hero-section {\r\n position: relative;\r\n height: 90vh;\r\n min-height: 750px; \/* Un poco m\u00e1s alto para acomodar el nuevo texto *\/\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n background-color: var(--lalaland-dark);\r\n overflow: hidden;\r\n }\r\n\r\n \/* CAPAS FONDO *\/\r\n #hero-unique-scope .layer {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n transition: transform 0.1s ease-out;\r\n }\r\n\r\n #hero-unique-scope .bg-scenery {\r\n background-image: url('https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-hero-bg-5-nocharacter.webp');\r\n background-size: cover;\r\n background-position: center;\r\n z-index: 1;\r\n transform: scale(1.1);\r\n }\r\n\r\n #hero-unique-scope .bg-characters-img {\r\n position: absolute;\r\n bottom: 0; right: 0;\r\n height: 65vh; max-height: 750px; width: auto;\r\n z-index: 2;\r\n filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.6));\r\n pointer-events: none;\r\n }\r\n\r\n \/* CONTENIDO *\/\r\n #hero-unique-scope .content-container {\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n \/* PANEL CRISTAL *\/\r\n #hero-unique-scope .glass-panel {\r\n width: 100%;\r\n max-width: 950px; \/* M\u00e1s ancho para el H1 largo *\/\r\n margin-right: auto;\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr; \/* Texto un poco m\u00e1s ancho ahora *\/\r\n gap: 30px;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 20px;\r\n padding: 50px;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.7);\r\n align-items: center;\r\n }\r\n\r\n \/* TEXTO *\/\r\n #hero-unique-scope .text-col { color: var(--lalaland-white); z-index: 5; }\r\n\r\n \/* BRAND TAG (Estrat\u00e9gico) *\/\r\n #hero-unique-scope .brand-tag {\r\n display: inline-block;\r\n color: var(--lalaland-yellow);\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n border-bottom: 1px solid var(--lalaland-yellow);\r\n padding-bottom: 4px;\r\n }\r\n\r\n \/* H1 (SEO + Descriptivo) *\/\r\n #hero-unique-scope h1 {\r\n font-family: 'Limelight', cursive;\r\n \/* Tama\u00f1o ajustado para frase larga: *\/\r\n font-size: 2.8rem; \r\n line-height: 1.2;\r\n margin: 0 0 25px 0;\r\n color: var(--lalaland-white);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.4);\r\n }\r\n\r\n \/* SUBT\u00cdTULO (Emoci\u00f3n + Funci\u00f3n) *\/\r\n #hero-unique-scope p.subtitle {\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n margin-bottom: 40px;\r\n color: #e0e0e0;\r\n font-weight: 400;\r\n }\r\n \r\n #hero-unique-scope strong { color: #fff; font-weight: 600; }\r\n\r\n \/* BOTONES (Nueva Jerarqu\u00eda) *\/\r\n #hero-unique-scope .buttons-wrapper {\r\n display: flex;\r\n gap: 20px;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* CTA PRINCIPAL (Grande y Llamativo) *\/\r\n #hero-unique-scope .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n \/* Padding aumentado *\/\r\n padding: 18px 38px; \r\n background: var(--lalaland-yellow);\r\n color: #1a0b2e;\r\n font-weight: 800; \/* Extra bold *\/\r\n border-radius: 8px;\r\n \/* Fuente aumentada *\/\r\n font-size: 1.05rem; \r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 20px rgba(253, 255, 3, 0.25);\r\n border: none;\r\n white-space: nowrap; \/* Evita que se rompa en dos l\u00edneas *\/\r\n }\r\n #hero-unique-scope .cta-btn:hover { \r\n transform: translateY(-3px) scale(1.02); \r\n box-shadow: 0 15px 30px rgba(253, 255, 3, 0.4); \r\n background: #fff;\r\n }\r\n\r\n \/* CTA SECUNDARIO (Sutil) *\/\r\n #hero-unique-scope .secondary-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 14px 20px;\r\n color: var(--lalaland-white);\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n border-bottom: 1px solid transparent;\r\n opacity: 0.85; \/* Un poco transparente para dar prioridad al otro *\/\r\n }\r\n #hero-unique-scope .secondary-btn:hover {\r\n color: var(--lalaland-yellow);\r\n border-bottom: 1px solid var(--lalaland-yellow);\r\n opacity: 1;\r\n }\r\n\r\n \/* CARRUSEL *\/\r\n #hero-unique-scope .carousel-col {\r\n position: relative;\r\n height: 450px;\r\n display: flex;\r\n align-items: center; justify-content: center;\r\n }\r\n\r\n #hero-unique-scope .carousel-slide {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n opacity: 0; transform: scale(0.95);\r\n transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);\r\n display: flex; align-items: center; justify-content: center;\r\n pointer-events: none;\r\n }\r\n #hero-unique-scope .carousel-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }\r\n\r\n #hero-unique-scope .img-phone {\r\n width: 45%;\r\n transform: rotate(-4deg) translateX(10px) translateY(20px);\r\n z-index: 20;\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));\r\n transition: transform 0.4s ease;\r\n }\r\n #hero-unique-scope .img-result {\r\n width: 70%;\r\n transform: rotate(3deg) translateX(-10px) translateY(-10px);\r\n z-index: 10;\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n \/* ESTRELLAS *\/\r\n #hero-unique-scope .star {\r\n position: absolute; background: white; border-radius: 50%;\r\n animation: hero-blink 4s infinite;\r\n }\r\n @keyframes hero-blink { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1100px) {\r\n #hero-unique-scope .glass-panel { max-width: 100%; padding: 40px; gap: 20px; }\r\n #hero-unique-scope h1 { font-size: 2.4rem; }\r\n #hero-unique-scope .bg-characters-img { opacity: 0.5; height: 50vh; right: -10%; } \r\n }\r\n\r\n @media (max-width: 900px) {\r\n #hero-unique-scope .hero-section { height: auto; min-height: 100vh; padding: 100px 0 50px 0; align-items: flex-start; }\r\n #hero-unique-scope .content-container { padding: 0 20px; }\r\n #hero-unique-scope .glass-panel { \r\n grid-template-columns: 1fr; text-align: center; padding: 40px 25px;\r\n }\r\n #hero-unique-scope .brand-tag { margin: 0 auto 20px auto; }\r\n #hero-unique-scope .buttons-wrapper { justify-content: center; gap: 15px; }\r\n \r\n \/* CORRECCI\u00d3N: OCULTAR PERSONAJES EN M\u00d3VIL *\/\r\n #hero-unique-scope .bg-characters-img { display: none; }\r\n \r\n #hero-unique-scope .carousel-col { margin-top: 20px; height: 350px; }\r\n #hero-unique-scope .cta-btn { width: 100%; } \/* Bot\u00f3n ancho completo en m\u00f3vil *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"hero-unique-scope\">\r\n \r\n <section class=\"hero-section\" id=\"hero-area-v7\">\r\n \r\n <div class=\"layer bg-scenery\" id=\"bg-layer-v7\"><\/div>\r\n <div id=\"stars-container-v7\" class=\"layer\"><\/div>\r\n <div class=\"layer\" id=\"chars-layer-v7\" style=\"z-index: 2;\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-hero-bg-5-onlycharacter.webp\" alt=\"Personajes\" class=\"bg-characters-img\">\r\n <\/div>\r\n\r\n <div class=\"content-container\">\r\n <div class=\"glass-panel\">\r\n \r\n <div class=\"text-col\">\r\n <span class=\"brand-tag\">\u2728 Regalos personalizados con significado<\/span>\r\n \r\n <h1>Ilustraciones personalizadas a partir de tu foto<\/h1>\r\n \r\n <p class=\"subtitle\">\r\n Convierte una foto especial en una ilustraci\u00f3n \u00fanica hecha para regalar, recordar o decorar.\r\n <br><br>\r\n Recibe tu ilustraci\u00f3n en <strong>archivo digital en alta calidad<\/strong> o impresa en p\u00f3ster, lienzo u otro formato f\u00edsico.\r\n <\/p>\r\n \r\n <div class=\"buttons-wrapper\">\r\n <a href=\"#crear\" class=\"cta-btn\">Encargar ilustraci\u00f3n<\/a>\r\n <a href=\"#ejemplos\" class=\"secondary-btn\">Galer\u00eda de ejemplos \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-col\">\r\n <div class=\"carousel-slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-1a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-1b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-2a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-2b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-3a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-3b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-4a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-4b.webp\" class=\"img-result\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-5a.webp\" class=\"img-phone\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/regalaland-example-5b.webp\" class=\"img-result\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ 1. PARALLAX\r\n const heroSection = document.getElementById('hero-area-v7');\r\n const bgLayer = document.getElementById('bg-layer-v7');\r\n const charsLayer = document.getElementById('chars-layer-v7');\r\n\r\n if(heroSection) {\r\n heroSection.addEventListener('mousemove', (e) => {\r\n const x = (window.innerWidth \/ 2 - e.pageX) \/ 30; \r\n const y = (window.innerHeight \/ 2 - e.pageY) \/ 30;\r\n if(bgLayer) bgLayer.style.transform = `scale(1.1) translate(${x * 0.5}px, ${y * 0.5}px)`;\r\n if(charsLayer) charsLayer.style.transform = `translate(${x * 1.5}px, ${y * 1.5}px)`;\r\n });\r\n }\r\n\r\n \/\/ 2. ESTRELLAS\r\n const starsContainer = document.getElementById('stars-container-v7');\r\n if(starsContainer) {\r\n for(let i=0; i<45; i++) {\r\n let star = document.createElement('div');\r\n star.className = 'star';\r\n star.style.left = Math.random() * 100 + '%';\r\n star.style.top = Math.random() * 85 + '%';\r\n star.style.width = Math.random() * 3 + 'px';\r\n star.style.height = star.style.width;\r\n star.style.animationDuration = (Math.random() * 3 + 2) + 's';\r\n starsContainer.appendChild(star);\r\n }\r\n }\r\n\r\n \/\/ 3. CARRUSEL\r\n const scope = document.getElementById('hero-unique-scope');\r\n if(scope) {\r\n let idx = 0;\r\n const slides = scope.querySelectorAll('.carousel-slide');\r\n if(slides.length > 0) {\r\n setInterval(() => {\r\n slides[idx].classList.remove('active');\r\n idx = (idx + 1) % slides.length;\r\n slides[idx].classList.add('active');\r\n }, 4000);\r\n }\r\n }\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<div class=\"elementor-element elementor-element-db7c3b2 e-flex e-con-boxed e-con e-parent\" data-id=\"db7c3b2\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49785c7 elementor-widget elementor-widget-html\" data-id=\"49785c7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Regalaland - Magic Slider V7<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Limelight&family=Montserrat:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V7 --- *\/\r\n #magic-v7-scope {\r\n \/* PALETA OFICIAL REGALALAND *\/\r\n --morado-oscuro: #170063;\r\n --morado-medio: #3a1c9c;\r\n --morado-principal: #5f2fbd;\r\n --amarillo-principal: #fdff03;\r\n --blanco: #fbfbff;\r\n \r\n --bg-color: #0f0524;\r\n --phone-border: #121212;\r\n \r\n \/* Medidas fijas *\/\r\n --phone-w: 340px;\r\n --phone-h: 604px; \r\n \r\n font-family: 'Montserrat', sans-serif;\r\n background-color: var(--bg-color);\r\n color: var(--blanco);\r\n padding: 80px 0 120px 0;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #magic-v7-scope * { box-sizing: border-box; }\r\n\r\n #magic-v7-scope h2 {\r\n font-family: 'Limelight', cursive;\r\n font-size: 3.5rem;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n color: var(--blanco);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.5);\r\n }\r\n\r\n #magic-v7-scope .subtitle {\r\n text-align: center;\r\n color: #ccc;\r\n margin-bottom: 60px;\r\n font-size: 1.1rem;\r\n max-width: 600px;\r\n margin-left: auto; margin-right: auto;\r\n }\r\n\r\n \/* --- ESCENARIO 3D --- *\/\r\n .slider-stage {\r\n position: relative;\r\n width: 100%;\r\n height: 720px;\r\n perspective: 1200px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n \/* --- CARTA M\u00d3VIL --- *\/\r\n .phone-card {\r\n position: absolute;\r\n width: var(--phone-w);\r\n height: var(--phone-h);\r\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\r\n opacity: 0;\r\n transform: scale(0.8) translateY(20px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .phone-card.active {\r\n opacity: 1;\r\n transform: translateX(0) scale(1) rotateY(0deg);\r\n z-index: 20;\r\n pointer-events: auto;\r\n filter: brightness(1);\r\n \/* Sombra morada elegante *\/\r\n box-shadow: 0 40px 80px rgba(23, 0, 99, 0.5);\r\n }\r\n\r\n .phone-card.prev {\r\n opacity: 0.5;\r\n transform: translateX(-360px) scale(0.85) rotateY(25deg);\r\n z-index: 10;\r\n filter: brightness(0.4) blur(1px);\r\n cursor: pointer;\r\n }\r\n\r\n .phone-card.next {\r\n opacity: 0.5;\r\n transform: translateX(360px) scale(0.85) rotateY(-25deg);\r\n z-index: 10;\r\n filter: brightness(0.4) blur(1px);\r\n cursor: pointer;\r\n }\r\n\r\n \/* --- MARCO DEL TEL\u00c9FONO --- *\/\r\n .phone-frame {\r\n width: 100%;\r\n height: 100%;\r\n background: #000;\r\n border-radius: 45px;\r\n border: 10px solid var(--phone-border);\r\n box-shadow: inset 0 0 0 2px #333;\r\n overflow: hidden; \r\n position: relative;\r\n \/* Flexbox asegura que el contenido se estire bien *\/\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .phone-notch {\r\n position: absolute;\r\n top: 0; left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px; height: 26px;\r\n background: var(--phone-border);\r\n border-bottom-left-radius: 16px;\r\n border-bottom-right-radius: 16px;\r\n z-index: 50;\r\n }\r\n\r\n \/* --- SLIDER MAGIA (INTERIOR) --- *\/\r\n .ba-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100%; \/* Ocupa todo el marco *\/\r\n background: #000;\r\n \r\n \/* BLOQUEO DE SELECCI\u00d3N AZUL (SOLUCI\u00d3N DEFINITIVA) *\/\r\n -webkit-user-select: none !important;\r\n -moz-user-select: none !important;\r\n -ms-user-select: none !important;\r\n user-select: none !important;\r\n -webkit-user-drag: none !important;\r\n }\r\n\r\n \/* CLASE MAESTRA PARA IM\u00c1GENES \r\n Soluci\u00f3n al \"hueco negro\": height: 101% + top: -1px\r\n *\/\r\n .img-magic-fit {\r\n position: absolute;\r\n width: 100%; \r\n \/* TRUCO: 1px m\u00e1s alto que el contenedor para evitar huecos *\/\r\n height: calc(100% + 2px) !important; \r\n top: -1px; \/* Centramos el exceso *\/\r\n left: 0;\r\n \r\n object-fit: cover !important;\r\n object-position: center !important;\r\n display: block;\r\n \r\n \/* Bloqueo de arrastre fantasma *\/\r\n pointer-events: none;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n }\r\n\r\n \/* M\u00c1SCARA DE RECORTE (ANTES) *\/\r\n .resize-mask {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-right: 3px solid var(--amarillo-principal);\r\n z-index: 10;\r\n background: #000;\r\n will-change: width;\r\n }\r\n\r\n \/* La imagen de dentro de la m\u00e1scara necesita un ancho fijo *\/\r\n .img-fixed-inner {\r\n width: var(--phone-w); \/* Ancho fijo *\/\r\n max-width: none !important;\r\n }\r\n\r\n \/* TIRADOR (HANDLE) *\/\r\n .handle {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 44px; height: 44px;\r\n background: var(--amarillo-principal);\r\n border-radius: 50%;\r\n z-index: 20;\r\n display: flex;\r\n align-items: center; justify-content: center;\r\n box-shadow: 0 0 20px rgba(253, 255, 3, 0.6);\r\n cursor: col-resize;\r\n \/* Evita parpadeos en m\u00f3viles *\/\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n .handle-icon { width: 20px; height: 20px; pointer-events: none; }\r\n\r\n \/* --- TEXTOS INFERIORES --- *\/\r\n .info-box {\r\n position: absolute;\r\n bottom: -90px; left: 0; width: 100%;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: all 0.4s ease 0.2s;\r\n }\r\n\r\n .phone-card.active .info-box { opacity: 1; transform: translateY(0); }\r\n\r\n .info-title {\r\n color: var(--morado-principal); \/* #5f2fbd *\/\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 0.85rem;\r\n letter-spacing: 2px;\r\n display: block; margin-bottom: 5px;\r\n }\r\n .info-desc {\r\n font-size: 1.2rem;\r\n font-family: 'Limelight', cursive;\r\n color: var(--blanco);\r\n }\r\n\r\n \/* --- BOTONES NAVEGACI\u00d3N (MORADOS) --- *\/\r\n button.nav-btn-v7 {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 60px !important;\r\n height: 60px !important;\r\n border-radius: 50% !important;\r\n \/* Degradado Morado Corporativo *\/\r\n background: linear-gradient(135deg, var(--morado-medio), var(--morado-principal)) !important;\r\n border: 2px solid rgba(255, 255, 255, 0.15) !important;\r\n color: white !important;\r\n font-size: 1.5rem !important;\r\n cursor: pointer !important;\r\n z-index: 100;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n transition: all 0.3s ease !important;\r\n box-shadow: 0 10px 25px rgba(23, 0, 99, 0.4) !important;\r\n outline: none !important;\r\n padding: 0 !important;\r\n }\r\n\r\n button.nav-btn-v7:hover {\r\n background: var(--amarillo-principal) !important;\r\n color: var(--morado-oscuro) !important;\r\n border-color: var(--amarillo-principal) !important;\r\n transform: translateY(-50%) scale(1.1) !important;\r\n box-shadow: 0 0 30px rgba(253, 255, 3, 0.5) !important;\r\n }\r\n\r\n .nav-prev { left: 10%; }\r\n .nav-next { right: 10%; }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 900px) {\r\n #magic-v7-scope h2 { font-size: 2.5rem; }\r\n .phone-card { width: 280px; height: 498px; }\r\n .phone-card.prev { transform: translateX(-140px) scale(0.85) rotateY(15deg); opacity: 0.3; }\r\n .phone-card.next { transform: translateX(140px) scale(0.85) rotateY(-15deg); opacity: 0.3; }\r\n .nav-prev { left: 2%; }\r\n .nav-next { right: 2%; }\r\n .slider-stage { height: 620px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"magic-v7-scope\">\r\n \r\n <h2>El Arte de Transformar<\/h2>\r\n <p class=\"subtitle\">Desliza la barra amarilla para revelar la magia.<\/p>\r\n\r\n <div class=\"slider-stage\">\r\n \r\n <button class=\"nav-btn-v7 nav-prev\" onclick=\"moveV7Carousel(-1)\">\u276e<\/button>\r\n <button class=\"nav-btn-v7 nav-next\" onclick=\"moveV7Carousel(1)\">\u276f<\/button>\r\n\r\n <div class=\"phone-card active\" data-index=\"0\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\" alt=\"Ilustraci\u00f3n\">\r\n \r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\" alt=\"Original\">\r\n <\/div>\r\n \r\n <div class=\"handle\">\r\n <svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><polyline points=\"9 18 3 12 9 6\" style=\"display:none\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Regalo de Aniversario<\/span>\r\n <span class=\"info-desc\">Estilo Pastel \u00b7 22 Oct 21<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phone-card next\" data-index=\"1\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\">\r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\">\r\n <\/div>\r\n <div class=\"handle\"><svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Retrato Mascota<\/span>\r\n <span class=\"info-desc\">Estilo \u00d3leo Cl\u00e1sico<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"phone-card prev\" data-index=\"2\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ba-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/poster-selfie-pareja-joven-ilustracion-pastel-regalaland.webp\" class=\"img-magic-fit\">\r\n <div class=\"resize-mask\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2025\/12\/selfie-movil-pareja-joven-regalaland.webp\" class=\"img-magic-fit img-fixed-inner\">\r\n <\/div>\r\n <div class=\"handle\"><svg class=\"handle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#170063\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><path d=\"M17 12h-0\"\/><polyline points=\"9 6 15 12 9 18\" transform=\"rotate(180 12 12)\"\/><\/svg><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-box\">\r\n <span class=\"info-title\">Regalo Familiar<\/span>\r\n <span class=\"info-desc\">Estilo Acuarela<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ === 1. L\u00d3GICA COMPARADOR (BEFORE\/AFTER) ===\r\n function initMagicV7() {\r\n const sliders = document.querySelectorAll('.ba-slider');\r\n \r\n sliders.forEach(slider => {\r\n const mask = slider.querySelector('.resize-mask');\r\n const handle = slider.querySelector('.handle');\r\n const innerImg = slider.querySelector('.img-fixed-inner');\r\n const frame = slider.closest('.phone-frame');\r\n\r\n \/\/ Ajuste de ancho exacto para evitar deformaci\u00f3n\r\n const fixW = () => {\r\n const fw = frame.offsetWidth;\r\n innerImg.style.width = fw + 'px';\r\n };\r\n\r\n fixW();\r\n window.addEventListener('resize', fixW);\r\n\r\n let dragging = false;\r\n\r\n const updatePos = (clientX) => {\r\n const rect = slider.getBoundingClientRect();\r\n let x = clientX - rect.left;\r\n \r\n if (x < 0) x = 0;\r\n if (x > rect.width) x = rect.width;\r\n\r\n const pct = (x \/ rect.width) * 100;\r\n\r\n mask.style.width = pct + \"%\";\r\n handle.style.left = pct + \"%\";\r\n };\r\n\r\n \/\/ Mouse Events\r\n slider.addEventListener('mousedown', (e) => {\r\n dragging = true;\r\n e.preventDefault(); \/\/ Evita selecci\u00f3n texto\r\n });\r\n window.addEventListener('mouseup', () => dragging = false);\r\n slider.addEventListener('mousemove', (e) => {\r\n if (!dragging) return;\r\n e.preventDefault(); \/\/ CRUCIAL para evitar el azul\r\n updatePos(e.clientX);\r\n });\r\n\r\n \/\/ Touch Events\r\n slider.addEventListener('touchstart', () => dragging = true, {passive: false});\r\n window.addEventListener('touchend', () => dragging = false);\r\n slider.addEventListener('touchmove', (e) => {\r\n if (!dragging) return;\r\n \/\/ e.preventDefault(); \/\/ En m\u00f3viles a veces bloquea el scroll, cuidado\r\n updatePos(e.touches[0].clientX);\r\n });\r\n });\r\n }\r\n\r\n \/\/ === 2. L\u00d3GICA CARRUSEL 3D ===\r\n const cards = document.querySelectorAll('.phone-card');\r\n let idx = 0;\r\n const count = cards.length;\r\n\r\n window.moveV7Carousel = (d) => {\r\n idx = (idx + d + count) % count;\r\n renderV7();\r\n };\r\n\r\n function renderV7() {\r\n cards.forEach((c, i) => {\r\n c.className = 'phone-card';\r\n if (i === idx) c.classList.add('active');\r\n else if (i === (idx - 1 + count) % count) c.classList.add('prev');\r\n else if (i === (idx + 1) % count) c.classList.add('next');\r\n else c.style.opacity = 0;\r\n });\r\n setTimeout(initMagicV7, 50); \/\/ Recalcular\r\n }\r\n\r\n cards.forEach(c => {\r\n c.addEventListener('click', () => {\r\n if (c.classList.contains('prev')) moveV7Carousel(-1);\r\n if (c.classList.contains('next')) moveV7Carousel(1);\r\n });\r\n });\r\n\r\n initMagicV7();\r\n renderV7();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc0fbc9 e-con-full e-flex e-con e-parent\" data-id=\"bc0fbc9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56108cf elementor-widget elementor-widget-html\" data-id=\"56108cf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Por Qu\u00e9 Regalaland - Final<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Limelight&family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- SCOPE \u00daNICO V8 --- *\/\r\n #why-final-scope {\r\n \/* PALETA *\/\r\n --bg-deep: #0f0524;\r\n --purple-glow: #5f2fbd;\r\n --purple-dark: #2a1b5e;\r\n --accent-gold: #fdff03;\r\n --text-white: #fbfbff;\r\n --text-muted: #8f8f9f;\r\n \r\n font-family: 'Montserrat', sans-serif;\r\n background-color: var(--bg-deep);\r\n color: var(--text-white);\r\n padding: 120px 0;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #why-final-scope * { box-sizing: border-box; }\r\n\r\n \/* --- FONDO AMBIENTAL (Sutil) --- *\/\r\n #why-final-scope::before {\r\n content: '';\r\n position: absolute;\r\n top: 20%; left: -10%;\r\n width: 800px; height: 800px;\r\n background: radial-gradient(circle, rgba(95, 47, 189, 0.15) 0%, transparent 70%);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n #why-final-scope .container {\r\n max-width: 1250px;\r\n margin: 0 auto;\r\n padding: 0 25px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* --- CABECERA --- *\/\r\n #why-final-scope .header-block {\r\n text-align: center;\r\n max-width: 850px;\r\n margin: 0 auto 70px auto;\r\n }\r\n\r\n #why-final-scope h2 {\r\n font-family: 'Limelight', cursive;\r\n font-size: 3.2rem;\r\n line-height: 1.1;\r\n margin-bottom: 25px;\r\n color: var(--text-white);\r\n text-shadow: 0 0 30px rgba(95, 47, 189, 0.3);\r\n }\r\n\r\n #why-final-scope .subtitle {\r\n font-size: 1.1rem;\r\n line-height: 1.7;\r\n color: #d0d0e0;\r\n font-weight: 300;\r\n }\r\n \r\n #why-final-scope .highlight-text { \r\n color: var(--accent-gold); \r\n font-weight: 600; \r\n position: relative;\r\n display: inline-block;\r\n }\r\n \r\n \/* Subrayado sutil para el texto destacado *\/\r\n #why-final-scope .highlight-text::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;\r\n background: var(--accent-gold); opacity: 0.5;\r\n }\r\n\r\n \/* --- GRID DE TARJETAS (Regalaland Izq - Otros Der) --- *\/\r\n #why-final-scope .comparison-grid {\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr; \/* Regalaland un poco m\u00e1s ancho *\/\r\n gap: 40px;\r\n align-items: stretch; \/* Misma altura visual *\/\r\n }\r\n\r\n \/* --- 1. TARJETA REGALALAND (H\u00c9ROE - IZQUIERDA) --- *\/\r\n #why-final-scope .card-hero {\r\n \/* Fondo degradado sutil pero rico *\/\r\n background: linear-gradient(145deg, rgba(23, 0, 99, 0.8), rgba(42, 27, 94, 0.9));\r\n border: 1px solid rgba(95, 47, 189, 0.6);\r\n border-radius: 24px;\r\n padding: 50px;\r\n position: relative;\r\n box-shadow: 0 25px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);\r\n \/* Efecto cristal *\/\r\n backdrop-filter: blur(20px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Borde superior brillante dorado *\/\r\n #why-final-scope .card-hero::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; width: 100%; height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);\r\n opacity: 0.8;\r\n }\r\n\r\n #why-final-scope .brand-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 40px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n #why-final-scope .regala-logo {\r\n font-family: 'Limelight', cursive;\r\n font-size: 2rem;\r\n color: var(--text-white);\r\n letter-spacing: 1px;\r\n }\r\n\r\n #why-final-scope .badge-pro {\r\n background: rgba(253, 255, 3, 0.15);\r\n color: var(--accent-gold);\r\n padding: 6px 14px;\r\n border-radius: 50px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n border: 1px solid var(--accent-gold);\r\n box-shadow: 0 0 15px rgba(253, 255, 3, 0.2);\r\n }\r\n\r\n \/* Lista de beneficios *\/\r\n #why-final-scope .benefit-list {\r\n list-style: none; padding: 0; margin: 0;\r\n }\r\n\r\n #why-final-scope .benefit-item {\r\n display: flex; gap: 18px;\r\n margin-bottom: 25px;\r\n align-items: flex-start;\r\n }\r\n\r\n #why-final-scope .icon-check {\r\n background: var(--accent-gold);\r\n color: #000;\r\n width: 26px; height: 26px;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 800; font-size: 0.9rem;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 10px rgba(253, 255, 3, 0.4);\r\n margin-top: 2px;\r\n }\r\n\r\n #why-final-scope .benefit-text {\r\n font-size: 1.05rem;\r\n color: #eee;\r\n font-weight: 400;\r\n }\r\n \r\n #why-final-scope .benefit-text strong {\r\n color: var(--text-white);\r\n font-weight: 600;\r\n \/* Subrayado sutil amarillo *\/\r\n border-bottom: 2px solid rgba(253, 255, 3, 0.4);\r\n }\r\n\r\n \/* Imagen de refuerzo integrada *\/\r\n #why-final-scope .visual-proof {\r\n margin-top: 30px;\r\n width: 100%;\r\n height: 220px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n }\r\n \r\n #why-final-scope .visual-proof img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.6s ease;\r\n filter: saturate(1.1); \/* Un poco m\u00e1s de vida *\/\r\n }\r\n \r\n #why-final-scope .card-hero:hover .visual-proof img { transform: scale(1.05); }\r\n\r\n #why-final-scope .proof-caption {\r\n position: absolute; bottom: 15px; left: 15px;\r\n background: rgba(0,0,0,0.7);\r\n padding: 5px 12px;\r\n border-radius: 8px;\r\n font-size: 0.75rem; color: #fff;\r\n backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n \/* --- 2. TARJETA GENERADORES (VILLANO - DERECHA) --- *\/\r\n #why-final-scope .card-basic {\r\n \/* Fondo plano y apagado *\/\r\n background: rgba(255, 255, 255, 0.02);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 24px;\r\n padding: 50px;\r\n display: flex;\r\n flex-direction: column;\r\n \/* Sin sombra brillante, se siente \"atr\u00e1s\" *\/\r\n }\r\n\r\n #why-final-scope .basic-header {\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n color: var(--text-muted);\r\n margin-bottom: 40px;\r\n font-weight: 700;\r\n display: flex; align-items: center; gap: 10px;\r\n opacity: 0.8;\r\n }\r\n\r\n #why-final-scope .pain-list {\r\n list-style: none; padding: 0; margin: 0;\r\n }\r\n\r\n #why-final-scope .pain-item {\r\n display: flex; gap: 18px;\r\n margin-bottom: 30px;\r\n align-items: flex-start;\r\n \/* Opacidad reducida para restar importancia *\/\r\n opacity: 0.7;\r\n transition: opacity 0.3s;\r\n }\r\n \r\n #why-final-scope .card-basic:hover .pain-item { opacity: 0.9; }\r\n\r\n #why-final-scope .icon-cross {\r\n color: #ff6b6b; \/* Rojo suave *\/\r\n font-size: 1.2rem;\r\n line-height: 1;\r\n margin-top: 2px;\r\n width: 26px; text-align: center;\r\n }\r\n\r\n #why-final-scope .pain-title {\r\n display: block;\r\n color: #ccc;\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n font-size: 1rem;\r\n }\r\n\r\n #why-final-scope .pain-desc {\r\n display: block;\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n line-height: 1.4;\r\n }\r\n\r\n \/* --- ANIMACIONES --- *\/\r\n #why-final-scope .reveal {\r\n opacity: 0; transform: translateY(30px);\r\n transition: all 0.8s ease-out;\r\n }\r\n #why-final-scope .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 950px) {\r\n #why-final-scope .comparison-grid {\r\n grid-template-columns: 1fr; \/* Una columna *\/\r\n gap: 40px;\r\n }\r\n #why-final-scope .card-hero { order: 1; } \/* Regalaland PRIMERO *\/\r\n #why-final-scope .card-basic { order: 2; padding: 35px; }\r\n #why-final-scope h2 { font-size: 2.5rem; }\r\n #why-final-scope .container { padding: 0 20px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"why-final-scope\">\r\n <div class=\"container\">\r\n \r\n <div class=\"header-block reveal\">\r\n <h2>No es solo IA. Es criterio, dise\u00f1o y experiencia.<\/h2>\r\n <p class=\"subtitle\">\r\n Usamos las mejores herramientas de inteligencia artificial, pero el resultado final \r\n <span class=\"highlight-text\">siempre pasa por manos profesionales<\/span> para garantizar una obra \u00fanica y que represente con fidelidad la foto original.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"comparison-grid\">\r\n \r\n <div class=\"card-hero reveal\" style=\"transition-delay: 0.2s;\">\r\n <div>\r\n <div class=\"brand-header\">\r\n <span class=\"regala-logo\">Regalaland<\/span>\r\n <span class=\"badge-pro\">Calidad Certificada<\/span>\r\n <\/div>\r\n\r\n <ul class=\"benefit-list\">\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"<\/span>Ajustes manuales para asegurar el <strong>parecido real<\/strong> al 100%.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"><strong>Criterio art\u00edstico<\/strong>, composici\u00f3n y correcci\u00f3n de color experta.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\"><span><strong>Dise\u00f1adores profesionales<\/strong> retocando cada detalle a mano.<\/span>\r\n <\/li>\r\n <li class=\"benefit-item\">\r\n <div class=\"icon-check\">\u2713<\/div>\r\n <span class=\"benefit-text\">Resultados \u00fanicos, <strong>no repetibles<\/strong>. Usamos las \u00faltimas y mejores herramientas de pago del mercado.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"visual-proof\">\r\n <img decoding=\"async\" src=\"https:\/\/regalaland.com\/wp-content\/uploads\/2026\/01\/regalaland-calidad-certificada.webp\" alt=\"Artista Digital Trabajando\">\r\n <div class=\"proof-caption\">El toque humano marca la diferencia<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-basic reveal\" style=\"transition-delay: 0.4s;\">\r\n <div class=\"basic-header\">\r\n Generadores Autom\u00e1ticos\r\n <\/div>\r\n\r\n <ul class=\"pain-list\">\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Resultados gen\u00e9ricos<\/span>\r\n <span class=\"pain-desc\">Im\u00e1genes que se parecen a todas las dem\u00e1s. Sin personalidad.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Sin control de estilo<\/span>\r\n <span class=\"pain-desc\">Fallos en ojos, manos o colores extra\u00f1os que nadie corrige.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Sin revisi\u00f3n humana<\/span>\r\n <span class=\"pain-desc\">Lo que sale es lo que te quedas. \"Una imagen m\u00e1s\" en tu galer\u00eda.<\/span>\r\n <\/div>\r\n <\/li>\r\n <li class=\"pain-item\">\r\n <div class=\"icon-cross\">\u2715<\/div>\r\n <div>\r\n <span class=\"pain-title\">Baja resoluci\u00f3n<\/span>\r\n <span class=\"pain-desc\">Archivos peque\u00f1os que pixelan al intentar imprimirlos en grande.<\/span>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ Script de animaci\u00f3n simple al hacer scroll\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n document.querySelectorAll('#why-final-scope .reveal').forEach(el => obs.observe(el));\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-acd0294 e-con-full e-flex e-con e-parent\" data-id=\"acd0294\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Regalaland – Hero Optimizado V7 \u2728 Regalos personalizados con significado Ilustraciones personalizadas a partir de tu foto Convierte una foto especial en una ilustraci\u00f3n \u00fanica hecha para regalar, recordar o decorar. Recibe tu ilustraci\u00f3n en archivo digital en alta calidad o impresa en p\u00f3ster, lienzo u otro formato f\u00edsico. Encargar ilustraci\u00f3n Galer\u00eda de ejemplos \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":160,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/pages\/53\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/regalaland.com\/index.php\/wp-json\/wp\/v2\/media?parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}