Act as an Elite Frontend Architect, UX/UI Expert, and Direct-Response Web Designer. We are going to build a high-converting, extremely sophisticated landing page for a product called "Sueño Hertz" (a scientifically-backed, sleep-based neuro-frequency audio reprogramming tool). This is the MASTER CONTEXT PROMPT. Acknowledge these global rules and set up the base environment. We will build the page section by section (fold by fold) in subsequent prompts. [1. PROJECT VIBE & ATMOSPHERE] - Niche: High-end Wellness, Neuro-science, Quantum Reprogramming, Premium Sleep Tech. - Vibe: "Apple meets Huberman Lab". Clean, highly technological, mysterious but scientifically grounded. - Emotion: Absolute peace, deep relaxation, high perceived value, and scientific precision. [2. GLOBAL DESIGN SYSTEM & TAILWIND TOKENS] - Backgrounds: Dark mode bias. Deep night tones (e.g., bg-slate-950, bg-zinc-950) transitioning to subtle earthly/dawn colors in specific relief sections. - Accents (Bioluminescence/Brainwaves): Electric Cyan, Deep Violet, and glowing Indigo to represent frequencies and neural pathways. - Conversion Colors (CTAs): High-contrast gradients (e.g., vibrant gold, amber, or luminous green/blue) that scream "click me" but remain elegant. Use subtle glowing drop-shadows (ring/glow effects). - Typography: Sans-serif, geometric, highly legible (e.g., Inter, Roboto, or SF Pro aesthetics). Tight tracking for headings, generous line-height (leading-relaxed) for body text to ease reading. - Elements: Use Glassmorphism (backdrop-blur, bg-white/5, subtle borders) for cards to give a modern, floating aesthetic. [3. UI COMPONENTS & TECH STACK] - Use React, Tailwind CSS, and shadcn/ui patterns. - Icons: Use Lucide React icons extensively (minimalist and modern). - Motion: Prepare to use subtle CSS animations (pulse, fade-in, gentle translations). The page should feel "alive" and breathing, just like a deep sleep cycle. [4. COPYWRITING & LANGUAGE RULE] - ALL copy on this page will be in SPANISH (Native, highly persuasive, Direct-Response style). - I will provide the structural copy in Portuguese in future prompts, but YOU MUST TRANSLATE AND GENERATE THE FINAL UI TEXT IN PERFECT, HIGH-CONVERTING SPANISH. Maintain the exact persuasive intent, bold words, and psychological triggers. [5. EXECUTION PROTOCOL] For now, DO NOT generate the full page. Simply generate the base global wrapper (a full-height, dark-themed `main` container) with a sleek, minimalist fixed Navigation Bar (Logo "Sueño Hertz" on the left, a subtle CTA button on the right). Respond in English confirming you have absorbed this Master Prompt and are ready for "FOLD 01: HERO SECTION". IMPLEMENT FOLD 01: HERO SECTION Build the first fold (Hero Section) strictly following this exact DOM chronological order and the design system we established. The UI must look like a multi-million dollar premium tech-wellness product. [ASSETS & BACKGROUND] - Background Image: Use `bg-[url('FUNDO_SECAO_HERO_SECTION.webp')]` covering the entire viewport (`min-h-screen`, `bg-cover`, `bg-center`, `bg-no-repeat`). Add a subtle dark gradient overlay (e.g., `bg-gradient-to-b from-slate-950/80 via-slate-900/50 to-slate-950`) to ensure absolute text readability while letting the bioluminescent waves shine through at the bottom. - Bottom Transition: Ensure the bottom of this section visually emphasizes the sound/vibration waves from the background, fading smoothly into the dark color of the next section. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] Center all content vertically and horizontally within a `max-w-5xl mx-auto` container, with appropriate padding (`pt-12 pb-24 px-4`). Follow this EXACT order: 1. [LOGO TOPO PÁGINA] - Element: `<img src="LOGO.webp" alt="Sueño Hertz" />` - Styling: Centered at the top, max-height of 96px (`h-24`), width auto. Subtle glow effect behind it. 2. [HEADLINE] - Copy: "CON SOLO UN AUDIO DE 33 MINUTOS VAS A BORRAR CREENCIAS DE ESCASEZ, ELIMINAR BLOQUEOS EMOCIONALES Y REPROGRAMAR TU INCONSCIENTE PARA ATRAER RIQUEZA, AMOR Y SALUD — SIN HACER NADA MÁS QUE DORMIR." - Styling: `h1`, ALL CAPS. Font size incredibly impactful (`text-4xl md:text-5xl lg:text-6xl`), tight tracking, centered, `text-balance`. - Highlighting: Make the text white (`text-white`), but highlight the following keywords in a premium vibrant Gold/Yellow gradient (`bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-amber-500`): "AUDIO DE 33 MINUTOS", "CREENCIAS DE ESCASEZ", "RIQUEZA, AMOR Y SALUD". 3. [SUB-HEADLINE] - Copy: "Activa la tecnología de neurofrecuencia que hace el trabajo pesado de reprogramación mientras descansas, transformando tu sueño en una máquina de atracción automática. Solo duerme y despierta en una nueva frecuencia." - Styling: `p` tag beneath the headline. Font size `text-lg md:text-xl`, light gray (`text-slate-300`), max-width of `max-w-3xl mx-auto`, centered, `leading-relaxed`. 4. [MOCKUP DE ALTA FIDELIDADE] - Element: `<img src="Mockup.webp" alt="Sueño Hertz App and Ebooks" />` - Styling: Centered. Width around `w-full max-w-4xl mx-auto`. - Animation: Create a custom arbitrary Tailwind animation for a SUBTLE floating effect. E.g., `animate-[float_6s_ease-in-out_infinite]`. (Add the keyframes in the CSS or arbitrary config so it moves gently up and down by 15px). 5. [BOTÃO CTA] - Element: `<button>` or `<a>` acting as a button. - Copy: "👉 SÍ, QUIERO DESTRABAR MI VIDA MIENTRAS DUERMO" - Styling: Centered below the mockup. Highly vibrant Green gradient (`bg-gradient-to-r from-emerald-500 to-green-500`), white text, extra bold (`font-extrabold`), large padding (`px-8 py-4`), fully rounded (`rounded-full`). - Effects: Must have a glowing drop-shadow (`shadow-[0_0_30px_rgba(16,185,129,0.5)]`). - Animation: Add a subtle pulsing effect `animate-pulse` or a custom scaling heartbeat so it feels "alive". - Interaction: On click, it should simply scroll to the next section (e.g., `href="#dobra-2"`). [RULES FOR V0] - Write clean, production-ready React code. - Ensure the custom float animation is defined either in Tailwind arbitrary values or inline styles so it works immediately. - Do not add any placeholder images from unsplash. Strictly use the filenames provided: "LOGO.webp" and "Mockup.webp". IMPLEMENT FOLD 02: THE SCIENTIFIC MECHANISM (SKEPTICISM BREAKER) Build the second fold directly below the first one. This section is highly clinical, mysterious, and scientific. [BACKGROUND & PARTICLE EFFECTS (CRITICAL)] - The background must be a very deep, dark color (e.g., `bg-slate-950`). - Particle System: Implement a background layer (z-0) containing floating, blinking light points (representing synapses or a deep starry night), exactly as requested by the art director. - Technical execution for particles: Create a set of absolutely positioned small `div` elements (`w-1 h-1` or `w-2 h-2`, `bg-blue-400` or `bg-white`, `rounded-full`) scattered across the section. Apply Tailwind arbitrary animations to them so they fade in and out and float gently (e.g., `animate-pulse`, varying opacities from `opacity-10` to `opacity-60`, and different animation durations so they don't blink in unison). [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] Ensure all content is inside a relative container (z-10) so it sits above the particles. `max-w-5xl mx-auto px-4 py-24`. 1. [HEADLINE & SUB-HEADLINE] - Headline: "LA CIENCIA DEL ESFUERZO CERO: CÓMO SUEÑOHERTZ 'HACKEA' TU BIOLOGÍA Y BURLA EL AUTOBOICOT." - Headline Styling: `h2`, `text-3xl md:text-4xl lg:text-5xl`, highly legible, centered. Highlight "LA CIENCIA DEL ESFUERZO CERO" in a clean cyan/blue gradient. - Sub-headline: "Descubre por qué intentar cambiar tu vida despierto es una batalla perdida — y cómo el uso de neurofrecuencias exactas abre la 'puerta trasera' de tu cerebro, donde ocurren los verdaderos cambios." - Sub-headline Styling: `text-lg text-slate-300`, centered, max-width 3xl, `mt-6`. 2. [THE IRREFUTABLE LOGIC BLOCK] - Create a Glassmorphism card (`bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-8 mt-12`). - Text (Split into beautiful, readable paragraphs with `leading-relaxed text-slate-200 text-lg`): "Tu mente consciente (esa que usas cuando estás despierto) es como un guardia de seguridad implacable. Juzga, duda y bloquea el 95% de tus intentos de cambio. Por eso repetir afirmaciones en el espejo o leer libros de autoayuda rara vez trae resultados duraderos. El 'guardia' no deja pasar el mensaje." <br/><br/> <span className="font-bold text-white text-xl">"Pero cuando duermes, ese guardia se va a descansar."</span> <br/><br/> "La ciencia ya lo comprobó: durante el sueño profundo, tu mente inconsciente —la cual controla absolutamente todo en tu vida— queda 100% receptiva. No juzga. No cuestiona. Solo absorbe." 3. [THE BRAIN FREQUENCY DICHOTOMY (VISUALS)] - Below the logic block, create a 2-column grid (`grid grid-cols-1 md:grid-cols-2 gap-8 mt-16 items-center`). - LEFT COLUMN: - Add text above image: `<h3 class="text-red-500 font-bold text-xl text-center mb-4 uppercase tracking-widest">Emociones Contraídas</h3>` - Element: `<img src="DOBRA 02 - 01.webp" alt="Cerebro Rojo Beta" class="w-full max-w-sm mx-auto mix-blend-screen opacity-90" />` - RIGHT COLUMN: - Add text above image: `<h3 class="text-blue-400 font-bold text-xl text-center mb-4 uppercase tracking-widest">Frecuencias Expandidas</h3>` - Element: `<img src="DOBRA 02 - 02.webp" alt="Cerebro Azul Delta" class="w-full max-w-sm mx-auto mix-blend-screen opacity-90" />` - Underneath this grid, add a centered text: "SueñoHertz no es misticismo, es una ingeniería sonora basada en Frecuencias Hertz. El audio conduce tu cerebro milimétricamente por 4 Estadios Biológicos de Reprogramación durante 33 minutos:" (`text-center mt-12 mb-8 text-xl text-slate-300`). 4. [THE 4 STAGES - CAROUSEL OR 2x2 GRID] - Create a 2x2 Grid (`grid grid-cols-1 md:grid-cols-2 gap-6`). Each card must have a subtle hover effect (slight scale or border glow). - Card 1 (Red/Orange accent): - "🧠 1. ESTADIO BETA (La Barrera):" (Make this title text Red/Orange). - "Tu estado de vigilia. Donde la ansiedad, la tensión y los pensamientos de escasez operan a altas revoluciones. En los primeros minutos, el audio silencia ese ruido mental instantáneamente." - Card 2 (Yellow/Gold accent): - "🌊 2. ESTADIO ALFA (La Llave):" (Make this title text Yellow). - "Relajación ligera. Tu cuerpo se 'suelta' y las defensas del cerebro caen. La puerta hacia tu inconsciente comienza a abrirse pacíficamente, preparando el terreno." - Card 3 (Cyan/Blue accent): - "🌀 3. ESTADIO THETA (La Limpieza):" (Make this title text Cyan). - "Meditación profunda y acceso directo. Aquí es donde el mecanismo actúa como un 'antivirus'. SueñoHertz rastrea y disuelve memorias traumáticas y comandos de escasez enraizados desde tu infancia." - Card 4 (Deep Violet/Purple accent): - "🌌 4. ESTADIO DELTA (La Instalación):" (Make this title Violet). - "El sueño profundo. La cúspide de la regeneración celular y mental. Con la mente completamente abierta y bañada en ondas de 963 Hertz, la nueva identidad vibracional de riqueza, cura y magnetismo es instalada y sellada." 5. [CONCLUSION BLOCK] - Create an emphasized block at the bottom (`mt-16 text-center max-w-3xl mx-auto`). - Copy: "No necesitas meditar por horas. No necesitas tener enfoque o disciplina. Tu único trabajo es cerrar los ojos. El sonido guía los ciclos cerebrales, la biología hace el trabajo pesado y tú simplemente cosechas la nueva realidad al despertar." - Styling: `text-xl md:text-2xl font-medium text-white italic leading-relaxed`. [RULES FOR V0] - Ensure the particle background relies on CSS, not complex external libraries, so it renders perfectly in React. - Use `mix-blend-screen` or `mix-blend-lighten` on the brain images if their backgrounds aren't perfectly transparent, ensuring they blend smoothly into the dark section. - Use exactly the image names provided: "DOBRA 02 - 01.webp" and "DOBRA 02 - 02.webp". IMPLEMENT FOLD 03: THE PAIN AGITATION & AVATAR FILTER Build the third fold directly below the previous one. This section shifts the tone from scientific to deeply empathetic and revealing. The focus here is 100% on the copy, typography, and scroll-triggered pacing. [BACKGROUND & GRID SYSTEM] - Background Color: Transition into a slightly denser, darker tone (e.g., `bg-zinc-950` or a very deep slate). - Geometric Grid Overlay: At the bottom of this section (and acting as a transition element), implement a subtle CSS-based geometric grid. - Grid Execution: Use a div with absolute positioning at the bottom. Apply a repeating linear-gradient to create a grid pattern (e.g., `background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);`). Use a `mask-image: linear-gradient(to bottom, transparent, black)` so it fades in elegantly and doesn't look like a harsh cut. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] Use `framer-motion` for all entrance animations in this section to ensure elements appear only when scrolled into view. 1. [HEADLINE & SUB-HEADLINE] - Copy Headline: "¿Por qué 'trabajar duro' y 'pensar positivo' no te están funcionando?" - Styling: `h2`, centered, `text-3xl md:text-5xl font-bold text-white mb-6`. - Copy Sub-headline: "Probablemente ya te diste cuenta de que intentar cambiar tu realidad a pura fuerza de voluntad es como acelerar un auto con el freno de mano puesto. Mira si reconoces alguno de estos patrones en tu vida hoy:" - Styling: `text-lg text-slate-400 max-w-3xl mx-auto text-center mb-16`. 2. [PAIN FILTER CARDS (SCROLL ANIMATED)] - Layout: A 2x2 grid (`grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto`). - Animation (CRITICAL): Wrap each card in a `motion.div`. Use `initial={{ opacity: 0, y: 50 }}`, `whileInView={{ opacity: 1, y: 0 }}`, `viewport={{ once: true, margin: "-100px" }}`. Add a staggered delay for each card (e.g., delay 0.1, 0.2, 0.3, 0.4) so they appear one by one as the user scrolls. - Card Styling: Minimalist dark cards (`bg-white/5 border border-white/10 rounded-xl p-6`). - Card 1: - Title: "💸 La Prisión de la Escasez Financiera" (`text-xl font-bold text-white mb-3`) - Body: "Trabajas de forma exhaustiva y te esfuerzas más que la mayoría, pero el retorno financiero nunca es proporcional. El dinero llega, pero desaparece rápido, o siempre chocas con un 'techo invisible' de facturación que no logras superar." (`text-slate-300`) - Card 2: - Title: "💔 El Ciclo del Desamor y el Rechazo" - Body: "Atraes repetidamente el mismo perfil de relaciones tóxicas o no disponibles. Aun queriendo una conexión profunda, un bloqueo invisible te hace sabotear a personas buenas o aceptar migajas de atención." - Card 3: - Title: "🔋 La Batalla Mental y el Agotamiento" - Body: "Tu mente no se apaga. Sufres de ansiedad, te despiertas ya cansado y pasas el día cargando un peso en la espalda, con un miedo constante al futuro y la sensación de que 'algo va a salir mal'." - Card 4: - Title: "🚫 La Trampa del Autoboicot" - Body: "Sabes exactamente lo que tienes que hacer para prosperar, pero no lo haces. Procrastinas, abandonas a mitad de camino o destruyes tus propias oportunidades de éxito por un miedo inconsciente a no ser lo suficientemente bueno." 3. [HIGHLIGHTED TRANSITION & CLOSING BLOCKS (TECH-THEMED)] - Context: These blocks replace a traditional yellow alert box with a premium "Tech/Quantum" highlighted container. - Container Styling: Create a large `max-w-4xl mx-auto mt-20 relative`. - Subtle Movement Effect: Give the container a custom subtle breathing animation (e.g., `animate-[pulse_4s_ease-in-out_infinite]`) on its `box-shadow` to make it feel alive and technologically advanced (e.g., a glowing drop shadow of `rgba(56, 189, 248, 0.15)`). - Inner Wrapper: `bg-slate-900/80 backdrop-blur-lg border border-cyan-500/30 rounded-2xl p-8 md:p-12`. - Transition Text (Inside the box, use paragraphs with generous spacing): - "Si marcaste mentalmente un 'sí' a alguna de estas situaciones, presta mucha atención: La culpa no es tuya. Y la culpa no es de tu falta de esfuerzo." (`font-bold text-xl text-white mb-4`) - "El verdadero problema es que estás librando una guerra injusta. Estás intentando cambiar tu vida usando tu mente consciente (que representa solo el 5% de tu fuerza), mientras intentas luchar contra tu Inconsciente (que dirige el otro 95% de tu realidad las 24 horas del día)." (`text-slate-300 text-lg mb-4`)- "Tu inconsciente no analiza y no juzga. Si durante toda tu vida se instalaron 'programas' de escasez, miedo y rechazo en lo más profundo, no importa cuántas horas trabajes o cuántas afirmaciones positivas repitas frente al espejo." (`text-slate-300 text-lg mb-4`) - "Mientras el 95% de tu inconsciente esté programado para el dolor, tu propia mente se encargará de sabotear tu 5% de esfuerzo diario." (`font-semibold text-cyan-400 text-lg mb-8`) - Closing Text (Still inside the box, visually separated by a subtle horizontal line `border-t border-white/10 pt-8`): - "Es exactamente por eso que no necesitas más 'esfuerzo'. Necesitas cambiar el 'chip' que está operando en segundo plano. Y la única forma de acceder a ese 95% sin enfrentar la resistencia de tu mente, es cuando estás durmiendo." (`text-xl md:text-2xl font-bold text-white leading-relaxed text-center`)[RULES FOR V0] - Strictly use `framer-motion` for the viewport scroll triggers on the cards. - The CSS Grid background must be subtle (opacity < 5%) so it doesn't distract from reading. - Ensure the glowing highlight box feels premium, not cheap. Use deep blues/cyans for the border glow to maintain the sleep/science aesthetic. IMPLEMENT FOLD 04: THE TRANSFORMATION TRIAD (SPECIFIC SOLUTION) Build the fourth fold directly below the previous one. This section returns to the highly technological, biological, and premium aesthetic. [BACKGROUND & PARTICLE RE-INTEGRATION] - Background: Use the same deep dark background (`bg-slate-950`). - Particles: RE-IMPLEMENT the exact same floating/blinking particle system from Fold 02 here. Create absolute positioned small `div` elements with `animate-pulse` and varying opacities scattered across the background (z-0) to create a seamless continuation of the "deep sleep/universe" environment. [LAYOUT ARCHITECTURE] - Container: `relative z-10 max-w-6xl mx-auto px-4 py-24`. - Grid: Split the content into a 2-column layout on desktop (`grid grid-cols-1 lg:grid-cols-12 gap-12 items-center`). - Left Column (span 5): Will contain the main 3D neon brain image. - Right Column (span 7): Will contain the headlines and the 3 Pillar Cards. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] 1. [HEADLINES - Right Column Top] - Headline: "CONOCE LA TRÍADA SAGRADA DE SUEÑOHERTZ® - Cómo el Audio Actúa Directamente en los 3 Únicos Pilares Que Importan en Tu Vida." - Headline Styling: `h2`, `text-3xl lg:text-4xl font-bold text-white mb-6`. Highlight "TRÍADA SAGRADA DE SUEÑOHERTZ®" with a premium golden gradient (`bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-amber-600`). - Sub-headline: "SueñoHertz no es un audio de 'relajación genérica'. Fue codificado para aislar y reescribir la programación de las tres áreas donde los humanos más acumulan traumas, miedos y bloqueos silenciosos. Mira exactamente lo que cambia mientras duermes:" - Sub-headline Styling: `text-lg text-slate-300 mb-10 leading-relaxed`. 2. [NEON BRAIN VISUAL - Left Column] - Element: `<img src="DOBRA 04.webp" alt="Tríada SueñoHertz" class="w-full max-w-md mx-auto drop-shadow-[0_0_40px_rgba(168,85,247,0.4)]" />` - Styling: Add a subtle floating animation to this image as well (`animate-[float_6s_ease-in-out_infinite]`). 3. [THE 3 PILLAR CARDS - Right Column Bottom] - Layout: A vertical stack (`flex flex-col gap-6`). - Premium Hover Mechanics (CRITICAL): Each card must be an interactive `group`. Use `relative overflow-hidden bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 transition-all duration-300 hover:scale-[1.02] hover:border-yellow-500/50 hover:shadow-[0_0_30px_rgba(234,179,8,0.15)]`. - Golden Inner Glow: Inside each card, add an absolute div to create a golden backlight on hover: `<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(234,179,8,0.15),transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>` - CARD 1 (Riqueza): - Title: "💰 1. El 'Techo Financiero' Destruido (Pilar de la Riqueza)" (`text-xl font-bold text-white mb-3 relative z-10`) - "Lo que hace el audio:" (Cyan/Blue text) "Emite frecuencias que desinstalan el miedo a la escasez, la culpa por querer más y el sentimiento crónico de 'no merecimiento' grabados en tu memoria celular." (`text-slate-300 mb-2 relative z-10`) - "Tu Resultado Práctico:" (Golden text) "Te despiertas con la mente calibrada para ver oportunidades en lugar de obstáculos. El dinero comienza a fluir con ligereza, porque el autoboicot que alejaba la prosperidad fue eliminado de raíz." (`text-slate-200 relative z-10`) - CARD 2 (Amor):- Title: "❤️ 2. El Magnetismo Inconsciente (Pilar del Amor)" - "Lo que hace el audio:" (Cyan/Blue text) "Las ondas Theta disuelven traumas pasados, el ciclo de rechazo y la dependencia emocional que te hacían aceptar menos de lo que mereces." - "Tu Resultado Práctico:" (Golden text) "Comienzas a irradiar un nuevo nivel de autovaloración y amor propio. Tu campo vibracional cambia, repeliendo naturalmente a personas tóxicas y atrayendo conexiones profundas, seguras y verdaderas." - CARD 3 (Salud): - Title: "🔋 3. La Restauración Celular y Mental (Pilar de la Salud y Energía)" - "Lo que hace el audio:" (Cyan/Blue text) "Sincroniza tu cuerpo con la frecuencia exacta de regeneración (Ondas Delta), silenciando la mente ansiosa y restaurando el equilibrio energético que el estrés diario consume." - "Tu Resultado Práctico:" (Golden text) "Fin del cansancio al despertar. Te levantas de la cama sintiendo una ligereza física inexplicable, con la 'batería' 100% recargada y la mente en paz para dominar tu día." 4. [CLOSING BLOCK] - Placement: Below the 2-column grid (`mt-16 text-center max-w-3xl mx-auto`). - Copy: "No es magia. Es lo que sucede cuando limpias la 'basura emocional' que estaba trabando tu sistema." - Styling: `text-xl md:text-2xl font-medium text-white italic`. [RULES FOR V0] - Ensure the golden radial gradient inside the cards is subtle but clearly visible on hover, creating that "glowing from within" premium feel. - The `z-10` on the text inside the cards is required so the golden background hover effect doesn't cover the text. - Use exactly the image name "DOBRA 04.webp". IMPLEMENT FOLD 05: THE EFFORT PARADOX (LOGICAL EPIPHANY) Build the fifth fold directly below the previous one. This section is a psychological turning point. We will reuse the subtle geometric grid from Fold 03 and implement a high-contrast side-by-side comparison layout. [BACKGROUND & GRID SYSTEM] - Background Color: `bg-zinc-950`. - Geometric Grid Overlay: Re-implement the exact CSS-based geometric grid from Fold 03 (repeating linear-gradient with mask-image) covering the background subtly (`opacity-5` or similar) to maintain the scientific tech vibe. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] Use `framer-motion` to smoothly fade and slide elements in as the user scrolls (`whileInView`). 1. [HEADLINE & SUB-HEADLINE] - Container: `max-w-4xl mx-auto px-4 pt-24 text-center`. - Headline: "EL PARADOJO DEL ESFUERZO: Por Qué 'Intentar Cambiar' Es Exactamente Lo Que Te Mantiene Estancado." - Headline Styling: `h2`, `text-3xl md:text-5xl font-bold text-white mb-6`. Highlight "EL PARADOJO DEL ESFUERZO" in a vibrant gradient (e.g., Red to Orange to signify friction/warning). - Sub-headline: "Entiende por qué años de terapia, cursos de ley de atracción, libros de autoayuda, afirmaciones en el espejo y la pura 'fuerza de voluntad' han fallado hasta hoy — y cómo SueñoHertz esquiva este bloqueo usando el camino de menor resistencia." - Sub-headline Styling: `text-lg text-slate-300 mb-12`. 2. [THE LOGICAL EPIPHANY TEXT] - Layout: A clean, glassmorphism text block (`max-w-3xl mx-auto bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-8 mb-16 text-left`). - Paragraph 1: "El ciclo es siempre el mismo: decides cambiar de vida, lees un libro, ves videos motivacionales y empiezas a repetir frases positivas en el espejo como 'Yo soy próspero' o 'Yo atraigo el amor'." (`text-slate-300 text-lg mb-4`) - Paragraph 2: "Pero, en el fondo, sientes un 'nudo' en el estómago. ¿Por qué?" (`font-bold text-white text-xl mb-4`) - Paragraph 3: "Porque tu mente consciente está programada para el instinto de supervivencia. Cada vez que intentas forzar una nueva realidad estando despierto, tu mente consciente compara la afirmación positiva con tu saldo bancario actual o con tus frustraciones amorosas, e inmediatamente dice: 'Eso es mentira'." (`text-slate-300 text-lg mb-4`) - Paragraph 4: "Esa fricción exige un esfuerzo colosal y genera lo que la neurociencia llama <span class='text-red-400 font-bold'>Emociones Contraídas</span>." (`text-slate-200 text-lg`) 3. [THE VISUAL CONTRAST CARDS (SIDE-BY-SIDE)] - Layout: `grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto px-4 mb-16`. - Animation: Use `framer-motion` to make the Left card slide in from the left (`x: -50, opacity: 0`) and the Right card slide in from the right (`x: 50, opacity: 0`) when in view. - LEFT CARD (The Friction - Red/Dark Theme): - Styling: `bg-gradient-to-b from-red-950/20 to-slate-900 border border-red-900/50 rounded-2xl p-8 relative overflow-hidden`. - Icon: A red 'X' or Lucide `XCircle` icon at the top. - Title: "❌ El Camino Tradicional (La Barrera)" (`text-2xl font-bold text-red-400 mb-4`) - Sub-section 1: "<span class='font-semibold text-white'>El Método:</span> Fuerza de voluntad, repetición consciente, intentar 'controlar' pensamientos." (`text-slate-300 mb-4`) - Sub-section 2: "<span class='font-semibold text-white'>El Resultado Fisiológico:</span> Emociones Contraídas. Al enfocarte en lo que no tienes, el cerebro entra en estado de alerta. Vibras en el Miedo, la Culpa y la Escasez. En este estado contraído, es biológica y cuánticamente imposible atraer abundancia." (`text-slate-300`) - RIGHT CARD (The Bypass - Cyan/Gold Theme): - Styling: `bg-gradient-to-b from-cyan-950/30 to-slate-900 border border-cyan-500/50 rounded-2xl p-8 relative overflow-hidden shadow-[0_0_40px_rgba(6,182,212,0.15)]`. Add a subtle glowing orb effect in the background of this card. - Icon: A green check or Lucide `CheckCircle2` icon. - Title: "✅ El 'Bypass' de SueñoHertz (La Puerta Trasera)" (`text-2xl font-bold text-cyan-400 mb-4`) - Sub-section 1: "<span class='font-semibold text-white'>El Método:</span> Esfuerzo Cero. El sonido actúa cuando la mente defensiva está 'apagada' durmiendo." (`text-slate-300 mb-4`) - Sub-section 2: "<span class='font-semibold text-white'>El Resultado Fisiológico:</span> Frecuencias Expandidas. Sin la resistencia consciente para entorpecer, las frecuencias del audio disuelven la barrera e instalan emociones de Paz, Aceptación e Iluminación directamente en la raíz de tu inconsciente." (`text-slate-300`) 4. [CLOSING TEXT BLOCK] - Container: `max-w-3xl mx-auto text-center px-4 pb-24`. - Paragraph 1: "Es por eso que SueñoHertz no compite con ninguna otra terapia, curso o método de reprogramación del mercado. No te pedimos que tengas 'disciplina' ni que luches contra tu propia mente." (`text-xl text-slate-300 mb-6`) - Paragraph 2: "Simplemente apagamos tu defensa a través del sueño, ignoramos el bloqueo, y plantamos la semilla de la prosperidad en el único lugar donde crece sin resistencia: tu inconsciente." (`text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300`) [RULES FOR V0] - The Left Card must feel dense and restrictive, while the Right Card must feel expansive, premium, and technological. Use colors and drop-shadows to enforce this psychology. - Ensure the geometric grid overlay does not interfere with text readability. IMPLEMENT FOLD 06: TANGIBLE BENEFITS (THE DAWN) Build the sixth fold directly below the previous one. This section represents "The Dawn" or "Relief". We are shifting from a dark, dense, scientific theme to a bright, clean, and highly breathable "Light Mode" aesthetic, exactly like a high-end clinical GPS interface. [BACKGROUND & TRANSITION] - Background Color: Use a soft off-white or very light warm gray (e.g., `bg-[#F8F9FA]` or `bg-slate-50`). - Transition: Ensure there is a clean visual break from the dark section above. Use generous top padding (`pt-24 pb-24 px-4`). [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] 1. [HEADLINE & SUB-HEADLINE] - Container: `max-w-4xl mx-auto text-center mb-16`. - Headline: "¿Qué Sucede en la Práctica Cuando Enciendes SueñoHertz® Todas las Noches?" - Headline Styling: `h2`, `text-3xl md:text-4xl font-bold text-slate-900 mb-4`. (Note the dark text for readability on light background). - Sub-headline: "(La rutina de quien dejó de luchar contra su propia mente y permitió que la neurofrecuencia trabaje en piloto automático)" - Sub-headline Styling: `text-lg text-slate-600 italic`. 2. [THE BENEFITS CARDS (VERTICAL LIST)] - Container: A vertical stack `flex flex-col gap-6 max-w-4xl mx-auto`. - Card Architecture (CRITICAL FOR PREMIUM FEEL): Each card must be a horizontal layout (Icon on the left, text on the right) using `flex flex-col sm:flex-row gap-6`. - Premium Hover Mechanics: Make each card a `group`. Base styling: `relative overflow-hidden bg-white rounded-xl p-6 md:p-8 shadow-sm border border-slate-200 transition-all duration-300 hover:scale-[1.015] hover:shadow-xl hover:border-yellow-400/50`. - Bottom Golden Accent: Add an absolute div to create a permanent thin premium border at the bottom: `<div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-400 to-amber-500"></div>`. - Inner Golden Glow (Light Mode): Add an absolute background element that fades in on hover: `<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(234,179,8,0.04),transparent_80%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>`. - CARD 1:- Icon: Lucide `BatteryCharging` (Color: text-amber-500, placed inside a soft `bg-amber-50` rounded-lg p-3). - Title: "El 'Reset' de Energía Física y Mental" (`text-xl font-bold text-slate-900 mb-2 relative z-10`) - Body: "Fin de la sensación de 'despertar ya cansado'. Al sincronizar tu cerebro con las ondas Delta, experimentas un sueño verdaderamente reparador. Te levantas de la cama sintiendo una ligereza inexplicable, con el humor blindado y una claridad mental absoluta para dominar tu día desde el primer minuto." (`text-slate-600 leading-relaxed relative z-10`) - CARD 2: - Icon: Lucide `TrendingUp` or `LineChart` - Title: "El Fin del 'Techo Invisible' Financiero" - Body: "Al eliminar los comandos inconscientes de escasez durante el sueño, tu relación con el dinero cambia sin que lo fuerces. Ideas lucrativas y soluciones comienzan a surgir espontáneamente. Dejas de sabotearte y pasas a ver y aprovechar oportunidades de prosperidad que antes pasaban desapercibidas." - CARD 3: - Title: "El Magnetismo Personal Automático" - Body: "Tu campo vibracional dicta quién se acerca a ti. Con los traumas y miedos al rechazo limpios de tu mente profunda, pasas a irradiar una autovaloración inquebrantable. Las personas tóxicas se alejan naturalmente, abriendo espacio inmediato para conexiones maduras, seguras y que realmente te valoran." - CARD 4: - Icon: Lucide `Brain` or `Smile` - Title: "Soluciones Intuitivas y Fin de la Ansiedad" - Body: "¿Conoces esa preocupación constante por el mañana? Desaparece. Como tu mente ya no está operando en 'modo de supervivencia' (lucha o huida), ganas una paz mental que blinda tus emociones. Los problemas del día a día comienzan a resolverse con intuición y fluidez, sin ese peso en la espalda." - CARD 5: - Icon: Lucide `Rocket` or `Settings` - Title: "La Evolución en 'Piloto Automático'" - Body: "La mejor parte de todo esto: no necesitas anotar nada en cuadernos de gratitud, no necesitas meditar por horas, ni vigilar tus pensamientos todo el día. Tu evolución ocurre silenciosamente. Simplemente te acuestas, le das play y dejas que la tecnología sonora haga el trabajo pesado mientras descansas." [RULES FOR V0] - Ensure the text contrast is WCAG compliant (dark slate text on white background). - The icons must be aligned to the left of the text on desktop, and can stack above the text on mobile (`flex-col sm:flex-row`). - Make sure the golden hover effect uses a very low opacity (`0.04`) so it doesn't make the text unreadable or look cheap in light mode. IMPLEMENT FOLD 07: SOCIAL PROOF (VALIDATION & BELONGING) Build the seventh fold directly below the previous one. This section continues the "Light Mode" aesthetic from Fold 06 to create a seamless transition. The core feature is a highly performant, horizontal native-CSS carousel displaying WhatsApp testimonial images. [BACKGROUND & TRANSITION] - Background Color: Use the exact same light background as Fold 06 (e.g., `bg-slate-50` or `bg-[#F8F9FA]`) to make the division between sections feel like one continuous breathable space. - Spacing: `py-24 px-4 overflow-hidden`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] 1. [HEADLINE & SUB-HEADLINE] - Container: `max-w-4xl mx-auto text-center mb-16`. - Headline: "¿Qué dicen las personas que ya activaron la tecnología 'SueñoHertz®' antes de dormir?" - Headline Styling: `h2`, `text-3xl md:text-4xl font-bold text-slate-900 mb-6`. - Sub-headline: "MÁS DE 80.000 PERSONAS YA ABANDONARON EL AUTOBOICOT Y ESTÁN REPROGRAMANDO SUS VIDAS SIN ESFUERZO CONSCIENTE." - Sub-headline Styling: `text-sm md:text-base font-bold text-slate-500 tracking-wider uppercase`. Highlight the number "80.000 PERSONAS" with the brand's golden text color (`text-amber-500`). 2. [THE WHATSAPP CAROUSEL (NATIVE CSS SCROLL SNAP)] - Architecture: We will build a highly performant native CSS carousel. NO heavy JS libraries. - Carousel Track (Container): `flex overflow-x-auto snap-x snap-mandatory gap-6 pb-8 pt-4 px-4 md:px-12 hide-scrollbar`. - Scrollbar hiding (Arbitrary Tailwind): Add `[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]` to the track so the scrollbar is invisible, mimicking a native mobile app feel. - Card Wrapper: Each image must be wrapped in a `div` that acts as a snap point: `flex-none w-[85vw] sm:w-[400px] md:w-[450px] snap-center transition-transform duration-300 hover:scale-[1.02]`. 3. [THE 7 TESTIMONIAL IMAGES] Inside the Carousel Track, inject the following 7 images using the exact filenames provided. Give all `<img>` tags a premium styling: `w-full h-auto rounded-2xl drop-shadow-xl border border-slate-200/50`. - Item 1: `<img src="provasocial01.webp" alt="Testimonio Dinero y Escepticismo" />` - Item 2: `<img src="provasocial02.webp" alt="Testimonio Sueño y Agotamiento Mental" />` - Item 3: `<img src="provasocial03.webp" alt="Testimonio Amor y Ruptura de Patrones" />` - Item 4: `<img src="provasocial04.webp" alt="Testimonio Rutina Constante" />` - Item 5: `<img src="provasocial05.webp" alt="Testimonio Sueño Financiero Realizado" />` - Item 6: `<img src="provasocial06.webp" alt="Testimonio Desbloqueo Profesional" />` - Item 7: `<img src="provasocial07.webp" alt="Testimonio Sueño Distante Realizado" />` 4. [OPTIONAL NATIVE CAROUSEL GRADIENTS] - To make it look like a multi-million dollar page, add two absolute positioned divs on the left and right edges of the carousel container (pointer-events-none) to create a subtle fade-out effect on desktop. - Left Fade: `absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-slate-50 to-transparent z-10 hidden md:block`. - Right Fade: `absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-slate-50 to-transparent z-10 hidden md:block`. [RULES FOR V0] - Strictly use the `.webp` filenames provided for the images. Do not use placeholder text for the testimonials in the UI, as the user will provide the actual screenshot images. - Ensure the `hide-scrollbar` implementation works perfectly across all modern browsers using Tailwind arbitrary variants. IMPLEMENT FOLD 08: THE 10X VALUE STACK (IRRESISTIBLE OFFER) Build the eighth fold directly below the previous one. This section maintains the breathable "Light Mode" aesthetic but introduces a highly persuasive "Zig-Zag" layout to present the bonuses, exactly like a high-end clinical layout. [BACKGROUND & SPACING] - Background Color: Use a very soft, warm off-white/light beige (e.g., `bg-[#FAF9F6]` or `bg-stone-50`) to provide a subtle contrast from the pure white elements. - Spacing: `py-24 px-4 overflow-hidden`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] Use `framer-motion` for scroll animations (`whileInView`). 1. [HEADLINE & TRANSITION TEXT] - Container: `max-w-4xl mx-auto text-center mb-20`. - Headline: "La Única Cosa Mejor Que Cambiar de Vida Sin Esfuerzo, Es Hacerlo Más Rápido." - Headline Styling: `h2`, `text-3xl md:text-5xl font-bold text-slate-900 mb-6 text-balance`. - Transition Text: "El audio principal de SueñoHertz® es todo lo que necesitas para reprogramar tu base de Riqueza, Salud y Amor. Ya hace el trabajo pesado por sí solo." (`text-lg text-slate-600 mb-4`) - Transition Text 2: "Pero para garantizar que tu mente no tenga ninguna brecha para el autoboicot, he separado un <span class='font-bold text-slate-900'>Arsenal de Aceleración</span>. Cada herramienta a continuación fue diseñada para actuar como un 'tiro de precisión' en cuellos de botella específicos de tu vida. Vendidos por separado, costarían miles de dólares. Hoy, son tu regalo." (`text-lg text-slate-600`) 2. [THE ZIG-ZAG BONUS BLOCKS] - Architecture: A vertical flex container (`flex flex-col gap-24 max-w-5xl mx-auto`). Each bonus is a CSS Grid (`grid grid-cols-1 md:grid-cols-2 gap-12 items-center`). - Shared Visuals for Text Column: - Tag: `<span class="inline-block bg-slate-800 text-white text-xs font-bold uppercase tracking-wider py-1 px-3 rounded-full mb-4">BONUS X</span>` - Title: `text-2xl font-bold text-slate-900 mb-2` - Subtitle (Parentheses): `text-lg font-medium text-amber-600 mb-4` - Body: `text-slate-600 leading-relaxed mb-6` - Price Tag: `<p class="font-medium text-slate-500">Valor Real: <span class="line-through">US$ XX,00</span> | Hoy: <span class="font-bold text-green-600">INCLUIDO</span></p>` - Shared Visuals for Image Column: The images must have a subtle hover effect (`transition-transform hover:-translate-y-2 duration-300`) and a soft premium shadow (`drop-shadow-2xl`). - BONUS 1 (Image Left, Text Right): - Image: `<img src="bônus01.webp" alt="Manual Científico" class="w-full max-w-md mx-auto" />` - Tag: "BONUS 1" - Title: "El Manual Científico de la Terapia del Sueño" - Subtitle: "(El Blindaje Contra el Escepticismo)" - Body: "Tu mente consciente es lógica y hambrienta de explicaciones. Mientras el audio trabaja en tu inconsciente, esta guía esencial sirve para saciar tu razón.<br/><br/>Revela todo el fundamento neurocientífico, cuántico y vibracional detrás del método SueñoHertz®. Entenderás, con pruebas y datos, exactamente cómo las frecuencias sonoras acceden a las capas profundas del cerebro para borrar patrones limitantes. Es la prueba científica que tu lado racional necesita para relajarse y confiar en el proceso." - Price: "US$ 197,00" - BONUS 2 (Text Left, Image Right): - *Mobile Order Note:* On the text `div`, use `order-last md:order-first` so the image always appears on top on mobile, but on the right on desktop. - Image: `<img src="bônus02.webp" alt="Healing Frequency Money" class="w-full max-w-md mx-auto" />` - Tag: "BONUS 2" - Title: "Healing Frequency Money" - Subtitle: "(5 Audios de Intervención Rápida para Bloqueos Financieros)" - Body: "El audio principal armoniza toda tu vida. Pero si tu desesperación actual es 100% financiera, estos 5 audios extra de 33 minutos son tu 'tratamiento de choque'.<br/><br/>No sustituyen a SueñoHertz; lo aceleran. Usando una combinación agresiva de Sonidos Binaurales, Solfeggio, Códigos Tesla 369 y la Frecuencia del Oro, atacan quirúrgicamente la raíz de la programación de escasez. Es la instalación directa de la frecuencia vibracional del dinero y la suerte directo en tus audífonos." - Price: "US$ 297,00" - BONUS 3 (Image Left, Text Right): - Image: `<img src="bônus03.webp" alt="Frecuencia Hertz Liberación" class="w-full max-w-md mx-auto" />` - Tag: "BONUS 3" - Title: "Frecuencia Hertz® para Liberación Financiera" - Subtitle: "(El Protocolo 'Limpia Deudas')" - Body: "Este es un audio de frecuencia concentrada (entre 100hz y 528hz) diseñado con un único objetivo táctico: limpiar memorias celulares de deuda, culpa y miedo al futuro.<br/><br/>Si sientes que el dinero 'huye' de tus manos en cuanto lo recibes, esta técnica actúa destruyendo ese ciclo de autoboicot nocturno. Activa el merecimiento y el magnetismo financiero, permitiendo que la riqueza llegue (y se quede) con absoluta ligereza." - Price: "US$ 147,00" - BONUS 4 (Text Left, Image Right): - *Mobile Order Note:* Again, use `order-last md:order-first` on the text div. - Image: `<img src="bônus04.webp" alt="Autoterapia del Inconsciente" class="w-full max-w-md mx-auto" />` - Tag: "BONUS 4" - Title: "Autoterapia del Inconsciente" - Subtitle: "(50 Técnicas de Visualización y Holo Cocreación)" - Body: "SueñoHertz actúa en el 'Esfuerzo Cero' mientras duermes. Pero lo que haces los 5 minutos antes de cerrar los ojos dicta la velocidad de tus resultados.<br/><br/>Este cuaderno práctico entrega 50 técnicas simples y poderosas de visualización para que las apliques en los instantes previos al sueño. Sin esfuerzo exhaustivo. Solo diriges tu imaginación con los comandos correctos, 'preparando el terreno' para que las frecuencias del audio penetren con 10x más facilidad en tu cerebro." - Price: "US$ 97,00" 3. [CTA BUTTON (HERO REPLICA)] - Container: `mt-24 text-center`. - Element: `<button>` or `<a>` acting as button linking to `#dobra-9`. - Copy: "👉 SÍ, QUIERO DESTRABAR MI VIDA Y LLEVARME TODOS LOS BONOS" - Styling: Replicate the Hero button exactly. Vibrant Green gradient (`bg-gradient-to-r from-emerald-500 to-green-500`), white text, extra bold (`font-extrabold`), large padding (`px-8 md:px-12 py-4 md:py-5`), fully rounded (`rounded-full`), glowing drop-shadow (`shadow-[0_0_30px_rgba(16,185,129,0.5)]`), and subtle pulse animation (`animate-pulse`). [RULES FOR V0] - Use the exact `.webp` filenames provided. Do not use external placeholders. - Maintain a clean, premium spacing between the zig-zag rows (`gap-24`). - Ensure the strikethrough price looks authentic and the "INCLUIDO" pops out in green. IMPLEMENT FOLD 09: THE CLIMAX (ACCESS, VALUE STACK & GRAND SLAM OFFER) Build the ninth fold directly below the previous one. This section transitions from the "Light Mode" educational content into the final conversion climax. The aesthetic must be extremely clean, trustworthy, and premium. [BACKGROUND & SPACING] - Background Color: Maintain the breathable light background from the previous fold (e.g., `bg-[#FAF9F6]` or `bg-slate-50`). - Spacing: `py-24 px-4`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] ================================================== BLOCK 1: THE ACCESS MECHANISM (CUIDADO CON LA ENTREGA) ==================================================1. Headline: "¿Cómo funciona el acceso a SueñoHertz®?" (`h2`, `text-3xl md:text-4xl font-bold text-center text-slate-900 mb-12`) 2. Access Cards Container: `grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-24`. 3. Cards Styling: Replicate the clinical GPS reference. `bg-white rounded-xl p-8 border border-slate-200 shadow-sm`. - Card 1 (Left): - Icon: Lucide `Headphones` or `AudioWaveform` (inside a soft `bg-slate-100` box, icon color `text-slate-700`). - Title: "Acceso Inmediato. Frecuencia 100% Preservada." (`text-xl font-bold text-slate-900 mb-4`) - Body: "En cuanto se confirme tu pago, recibirás acceso inmediato a nuestra plataforma oficial.<br/><br/>SueñoHertz® no es un archivo común o un audio comprimido. Las compresiones comunes destruyen las ondas Hertz, anulando el efecto de la técnica. Para garantizar la excelencia absoluta y el resultado de tu reprogramación, tu audio está alojado en un reproductor de Alta Fidelidad de Estudio (Lossless) en nuestra aplicación oficial.<br/><br/>Tendrás la frecuencia pura, intacta y quirúrgica, lista para ser activada en tu próxima noche de sueño." (`text-slate-600 leading-relaxed`) - Card 2 (Right): - Icon: Lucide `Infinity` (inside a soft `bg-amber-50` box, icon color `text-amber-600`). - Title: "Pago Único. Tuyo para siempre." (`text-xl font-bold text-slate-900 mb-4`) - Body: "Déjame ser muy clara: SueñoHertz® no es una suscripción mensual ni una aplicación que te cobrará tarifas ocultas después. Es un recurso vitalicio para tu mente.<br/><br/>Tendrás acceso liberado para siempre a la plataforma para escuchar tu audio y consumir los bonos a tu propio ritmo.<br/><br/><span class='block bg-amber-50 border border-amber-200 rounded-lg p-4 font-medium text-amber-900 mt-4'>¡Una vez allí dentro, este arsenal de reprogramación será tuyo para el resto de tu vida!</span><br/>Sin letras pequeñas, sin renovaciones sorpresa. El acceso es tuyo." (`text-slate-600 leading-relaxed`) ================================================== BLOCK 2: THE VALUE STACK (EL RESUMEN DE LA OFERTA) ==================================================1. Headline: "Todo lo que recibes hoy — y el verdadero valor vibracional de cada herramienta:" (`text-3xl font-bold text-center text-slate-900 mb-2`) 2. Sub-headline: "(Cada ítem a continuación resuelve un bloqueo invisible en tu vida. Ninguno es solo un 'bono de relleno'.)" (`text-center text-slate-500 mb-10`) 3. Value Stack Table: `max-w-4xl mx-auto bg-white rounded-2xl overflow-hidden shadow-lg border border-slate-200 mb-24`. - Header: `flex justify-between bg-slate-900 p-4 px-6`. Left text: "LO QUE RECIBES" (`text-white font-bold`). Right text: "VALOR" (`text-white font-bold`). - Rows: Create 5 rows. Use `border-b border-slate-100 last:border-0 p-6 flex flex-col md:flex-row justify-between md:items-center gap-4 hover:bg-slate-50`. - Row 1: Left: `<span class='text-green-500 mr-2'>●</span> <span class='font-bold text-slate-900'>Tecnología SueñoHertz® (Audio Oficial de 33 Minutos)</span><br/><span class='text-sm text-slate-500 ml-5'>El audio de alta fidelidad para investigar y destruir disfunciones inconscientes, reprogramando Riqueza, Amor y Salud en la fase profunda del sueño.</span>`. Right: `text-slate-400 line-through font-medium whitespace-nowrap` -> "US$ 497,00". - Row 2: Same structure. Title: "Manual Científico de la Terapia del Sueño (Bono 1)". Desc: "El blindaje lógico y científico que revela exactamente cómo la neurofrecuencia apaga el autoboicot y hackea tu cerebro." Value: "US$ 197,00". - Row 3: Same structure. Title: "Healing Frequency Money (Bono 2)". Desc: "5 audios agresivos con Códigos Tesla 369 y Frecuencia del Oro para atacar y destruir específicamente la escasez financiera." Value: "US$ 297,00". - Row 4: Same structure. Title: "Frecuencia para Liberación Financiera (Bono 3)". Desc: "La técnica enfocada en limpiar memorias celulares de deuda, culpa y miedo, activando el magnetismo para el dinero." Value: "US$ 147,00". - Row 5: Same structure. Title: "Autoterapia del Inconsciente (Bono 4)". Desc: "50 técnicas simples de visualización para los 5 minutos antes de dormir, preparando tu cerebro para absorber el audio 10x más rápido." Value: "US$ 97,00". ================================================== BLOCK 3: THE CLIMAX (TICKET & JUSTIFICATION) ================================================== 1. The Ticket Container: Create a `max-w-3xl mx-auto relative`. - Ticket CSS Trick: Make the main ticket div `bg-slate-900 text-center py-12 px-8 rounded-2xl relative overflow-hidden border-2 border-amber-500/30 shadow-[0_0_50px_rgba(15,23,42,0.2)]`. - The Cutouts (Ticket holes): Add two absolute divs to the ticket: `absolute top-1/2 -translate-y-1/2 -left-6 w-12 h-12 bg-[#FAF9F6] rounded-full` (Make sure the bg color exactly matches the section background) and `absolute top-1/2 -translate-y-1/2 -right-6 w-12 h-12 bg-[#FAF9F6] rounded-full`. This creates the perfect ticket punch-hole effect natively. 2. Ticket Content: - Top text: "VALOR TOTAL DEL ARSENAL DE REPROGRAMACIÓN:" (`text-amber-500 font-bold tracking-widest uppercase text-sm mb-2`) - Strikethrough price: "<span class='line-through text-slate-400 text-2xl md:text-3xl'>US$ 1.235,00</span>" - Context: "(Valor real sumado de todos los entrenamientos y técnicas)" (`text-slate-500 text-sm mb-8 block`) - The Offer: "TU INVERSIÓN HOY:" (`text-white font-bold text-lg mb-2`) - The Big Price: "US$ 14,90" (`text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-2`) - Payment type: "(Pago Único)" (`text-amber-400 font-medium mb-6 block`) - Savings: "Estás recibiendo US$ 1.220,10 en valor de transformación que no aparecerán en la factura de tu tarjeta de crédito." (`text-emerald-400 bg-emerald-900/30 inline-block px-4 py-2 rounded-full text-sm font-medium border border-emerald-800/50 mb-8`) 3. Logical Justification Box (Inside the Ticket, at the bottom): - Container: `bg-slate-800/80 rounded-xl p-6 text-left border border-slate-700`. - Headline: "¿Por qué solo US$ 14,90?" (`text-amber-400 font-bold text-lg mb-3`) - Body: "Porque esto no es solo una venta; es la creación de un movimiento. Nuestro objetivo es claro: garantizar que ninguna persona siga viviendo en la escasez o en el dolor simplemente por no tener acceso a una tecnología de reprogramación mental de excelencia.<br/><br/>Este precio no refleja el valor del material (que exigió años de investigación científica e ingeniería sonora) — refleja una decisión estratégica de elevar la frecuencia vibracional del mayor número posible de personas en esta ventana de tiempo.<br/><br/><span class='text-white font-medium'>Cuando termine el período de esta campaña, el valor volverá a la normalidad.</span>" (`text-slate-300 text-sm leading-relaxed`) 4. The Checkout CTA Button:- Must be an `<a>` tag placed immediately below the ticket container (`mt-10 max-w-3xl mx-auto block text-center`). - Link (`href`): `https://pay.hotmart.com/B106842637I?checkoutMode=10&_gl=1*wbslj6*_gcl_au*MjA4NTUyMzg1NS4xNzc3NTUxODYwLjE1MzU3NzYxNTguMTc4NDU2MjAxNi4xNzg0NTYyMDIwLjkwNTQ3MDc1Ni4xNzg0NTQyNDA1LjE3ODQ1NjIwMjA.*FPAU*MjA4NTUyMzg1NS4xNzc3NTUxODYw*_ga*Njg1MjUwNjU3LjE3Nzc1NTE4NjE.*_ga_GQH2V1F11Q*czE3ODQ5MDk4MTckbzI4OCRnMCR0MTc4NDkwOTgxNyRqNjAkbDAkaDE5MzcwNjEzODI.&bid=1784909821138&fromExitPopup=true&utm_source=organic&utm_campaign=&utm_medium=&utm_content=&utm_term=&xcod=jLj69f5f327f1cbd9a0aabfe942hQwK21wXxRhQwK21wXxRhQwK21wXxRhQwK21wXxR&sck=jLj69f5f327f1cbd9a0aabfe942hQwK21wXxRhQwK21wXxRhQwK21wXxRhQwK21wXxR` - Copy: "👉 QUIERO GARANTIZAR TODO EL ARSENAL POR SOLO US$ 14,90" - Styling: Massive green gradient button (`bg-gradient-to-r from-emerald-500 to-green-600`), white text, `text-xl md:text-2xl font-extrabold`, `py-6 px-8`, `rounded-full`, `shadow-[0_0_40px_rgba(16,185,129,0.5)]`, `animate-[pulse_3s_ease-in-out_infinite]`, `hover:scale-105 transition-transform w-full`. - Guarantee Subtext (Below the button): "(Acceso Inmediato - Pago Único - Riesgo Cero)" (`text-slate-500 font-medium mt-4 block text-center`) [RULES FOR V0] - Strictly implement the ticket cutout trick using the absolute rounded divs so it looks exactly like the reference image. - Ensure the Hotmart URL is applied perfectly to the CTA button. IMPLEMENT FOLD 10: URGENCY & LOGICAL CLOSING Build the tenth fold directly below the previous one. This section replicates a high-converting 2-column pricing comparison layout (White Card on the left, Dark Highlight Card on the right). [BACKGROUND & SPACING] - Background Color: Maintain the breathable light background (`bg-[#FAF9F6]` or `bg-slate-50`) to provide contrast for the cards. - Spacing: `pb-24 pt-12 px-4`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] 1. [HEADLINE - LOSS AVERSION TRIGGER] - Container: `max-w-4xl mx-auto text-center mb-12`. - Headline: "¡Invierte en tu reprogramación mental ahora, porque seguir pagando el precio de la escasez, el cansancio y el autoboicot diario cuesta infinitamente más caro!" - Headline Styling: `h2`, `text-2xl md:text-4xl font-bold text-slate-900 leading-tight`. 2. [THE 2-COLUMN CLOSING GRID] - Container: `grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto items-stretch`. ========================================= LEFT COLUMN (WHITE CARD - THE CHECKLIST) ========================================= - Styling: `bg-white rounded-2xl p-8 md:p-10 shadow-sm border border-slate-200 flex flex-col justify-center`. - Title: "Lo que te llevas hoy:" (`text-xl font-bold text-slate-900 mb-6`) - List Container: `flex flex-col gap-5`. - List Items (Use Lucide `CheckCircle2` icon in `text-amber-500` for each item, aligned to the top of the text): - Item 1: "<span class='font-bold text-slate-900'>Tecnología SueñoHertz® (Audio Oficial):</span> El audio de 33 minutos en alta fidelidad para investigar y destruir bloqueos inconscientes, reprogramando Riqueza, Amor y Salud en la fase profunda del sueño." - Item 2: "<span class='font-bold text-slate-900'>Bono 1 | Manual Científico de la Terapia del Sueño:</span> La guía completa que revela la neurociencia detrás del método y cómo las frecuencias hackean tu mente." - Item 3: "<span class='font-bold text-slate-900'>Bonos 2 y 3 | Combo Antiescasez Financiera:</span> El Healing Frequency Money (5 audios con Códigos Tesla) + la Frecuencia de Liberación (Protocolo Limpia Deudas) para blindar tu campo contra la pobreza." - Item 4: "<span class='font-bold text-slate-900'>Bono 4 | Autoterapia del Inconsciente:</span> El cuaderno práctico con 50 técnicas de visualización para los 5 minutos antes de dormir, acelerando 10x la absorción del audio principal." - Text Styling for items: `text-slate-600 leading-relaxed text-sm md:text-base flex gap-3`. ========================================= RIGHT COLUMN (DARK HIGHLIGHT CARD - CHECKOUT) ========================================= - Styling: `bg-slate-900 rounded-2xl p-8 md:p-10 text-center relative overflow-hidden shadow-2xl border-2 border-slate-800 flex flex-col justify-center`. - Subtle Background Glow: Add an absolute div `bg-[radial-gradient(ellipse_at_top,rgba(234,179,8,0.15),transparent_70%)] inset-0 pointer-events-none`. - Top Tag: "PRECIO DE LANZAMIENTO (VÁLIDO PARA LAS PRIMERAS 500 LICENCIAS):" (`text-xs font-bold text-amber-500 uppercase tracking-widest mb-4`) - Old Price: "Antes: <span class='line-through'>US$ 1.235,00</span>" (`text-slate-400 text-lg mb-2 font-medium`) - New Price: "US$ 14,90" (`text-5xl md:text-7xl font-black text-white mb-2`) - Payment Info: "(PAGO ÚNICO)" (`text-slate-300 text-sm font-medium mb-8`) - CTA Button: - Tag: `<a>` with href linking to the Hotmart checkout provided earlier. - Copy: "👉 ¡QUIERO GARANTIZAR MI ACCESO Y TODOS LOS BONOS!" - Styling: Replicate the Master CTA. `bg-gradient-to-r from-emerald-500 to-green-600 text-white font-extrabold py-5 px-6 rounded-xl md:rounded-full w-full block shadow-[0_0_30px_rgba(16,185,129,0.3)] animate-pulse hover:scale-105 transition-transform text-lg`. - Sub-text: "(El acceso vitalicio al audio y a los bonos será enviado automáticamente a tu correo electrónico en cuanto hagas clic en el botón de arriba y completes el pedido)." (`text-slate-400 text-xs mt-4 leading-relaxed`) - Trust Badges (Footer of the card): - Container: `flex flex-col sm:flex-row justify-center items-center gap-4 mt-8 pt-6 border-t border-slate-800`. - Badges: Create 3 items using Lucide icons (`Lock`, `Award`, `ShieldCheck`). Color `text-slate-400`. Text size `text-xs font-medium`. - Texts: "Compra 100% Segura", "Satisfacción Garantizada", "Privacidad Protegida". [RULES FOR V0] - Ensure both cards in the CSS Grid stretch to the exact same height (`items-stretch` or `h-full` on cards). - The right card must feel heavily prioritized visually. Ensure the contrast between the green CTA button and the dark slate background is high. IMPLEMENT FOLD 11: AUTHORITY & SCIENTIFIC ENGINEERING Build the eleventh fold directly below the previous one. This section merges the clean, sophisticated layout of a clinical profile with the deep, futuristic, and technological aesthetic of the product. [BACKGROUND & SMOOTH TRANSITION] - Background: We need a seamless transition from the light Fold 10 to a deep, scientific dark mode. Apply a vertical gradient to the main container: `bg-gradient-to-b from-[#FAF9F6] via-slate-900 to-slate-950`. - Particles: RE-IMPLEMENT the exact same floating/blinking particle system (stars/synapses) from Fold 02 and 04. These should be absolute positioned `div` elements with `animate-pulse` scattered across the background, starting from the middle of this section downwards (where the background becomes dark). [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] - Main Container: `relative z-10 max-w-6xl mx-auto px-4 py-24 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center`. ========================================= LEFT COLUMN (THE AVATAR IMAGE & GEOMETRIC FRAME) - span 5 ========================================= - Architecture: Replicate the offset geometric frame from the reference image, but adapted for the dark tech theme. - Container: `relative w-full max-w-sm mx-auto lg:mx-0`. - Geometric Shape 1 (Top Left offset): `<div class="absolute -top-6 -left-6 w-32 h-48 bg-cyan-900 rounded-3xl -z-10 opacity-80"></div>` - Geometric Shape 2 (Bottom Right offset): `<div class="absolute -bottom-6 -right-6 w-40 h-40 bg-amber-600/20 rounded-3xl -z-10 backdrop-blur-md border border-amber-500/30"></div>` - Image: `<img src="avatar.webp" alt="Avatar Digital Sofia Ourives" class="w-full h-auto rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.5)] object-cover relative z-10" />` - *Note for V0:* The subject is a hyper-realistic digital avatar, not a specific human. Maintain a sleek, AI/Tech-driven clinical aesthetic. ========================================= RIGHT COLUMN (THE TEXT & VALIDATION) - span 7 ========================================= - Headline 1: "¿Quién es Sofia Ourives?" (`h3`, `text-amber-500 font-bold uppercase tracking-widest text-sm mb-2`) - Headline 2: "La Ciencia y la Ingeniería Detrás de SueñoHertz®" (`h2`, `text-3xl md:text-5xl font-bold text-white mb-6 leading-tight text-balance`) - Body Paragraph 1: "La inteligencia que codificó SueñoHertz® no se basa en la intuición. Es el resultado de la fusión milimétrica entre Neurociencia, Psicoanálisis y Física Cuántica, estructurada para esquivar el bloqueo consciente del cerebro." (`text-slate-300 text-lg mb-4 leading-relaxed`) - Body Paragraph 2: "La mente creadora de esta tecnología cuenta con certificación internacional del prestigioso HeartMath® Institute y fue entrenada directamente por las mayores autoridades globales en reprogramación humana, como Gregg Braden y Tony Robbins." (`text-slate-300 text-lg mb-8 leading-relaxed`) - Sub-headline: "En la publicidad y en la ciencia, los números son la única prueba irrefutable de eficacia. La metodología que originó este audio posee un rastro de validación global:" (`text-white font-semibold text-lg mb-6`) - Metrics Grid: `grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8` - Metric 1: - Icon/Number: "📚 15 Millones de Copias" (`text-amber-400 font-bold text-xl mb-1`) - Desc: "El hito absoluto de obras vendidas detallando la ciencia de la reprogramación mental." (`text-slate-400 text-sm`) - Metric 2: - Icon/Number: "🌍 300.000 Alumnos Activos" (`text-amber-400 font-bold text-xl mb-1`) - Desc: "Personas comunes aplicando estas exactas frecuencias en 37 países diferentes." (`text-slate-400 text-sm`) - Metric 3: - Icon/Number: "🚀 Validación de Mercado" (`text-amber-400 font-bold text-xl mb-1`) - Desc: "Más de 200 millones facturados en una sola plataforma, validando la eficacia y la demanda de la técnica." (`text-slate-400 text-sm`) - Metric 4: - Icon/Number: "📈 Impacto Masivo" (`text-amber-400 font-bold text-xl mb-1`) - Desc: "Una comunidad sólida con más de 3 millones de seguidores y 400 obras digitales publicadas." (`text-slate-400 text-sm`) - Closing Block (Glassmorphism highlight): - Container: `mt-8 bg-white/5 backdrop-blur-sm border-l-4 border-cyan-500 p-6 rounded-r-xl` - Text: "SueñoHertz® nació con un único objetivo: compilar todo este peso científico, validado por cientos de miles de personas, y transformarlo en una herramienta donde tengas 100% de seguridad clínica, con 0% de esfuerzo." (`text-white font-medium italic text-lg leading-relaxed`) [RULES FOR V0] - Ensure the geometric offset shapes behind the image use z-index correctly so they sit behind the image but above the background. - Make the numbers in the metrics grid pop by using a clear, highly legible font weight and color (amber). IMPLEMENT FOLD 12: TOTAL RISK REVERSAL (THE GUARANTEE) Build the twelfth fold directly below the previous one. This section fuses the dark, glowing aesthetic of the previous fold with a clean, high-trust clinical white card to create a premium guarantee section. [BACKGROUND & FLUID TRANSITION] - Background: Create a smooth, fluid CSS gradient transition from the dark theme of Fold 11 to a clean off-white. Use `bg-gradient-to-b from-slate-950 via-slate-900 to-[#FAF9F6]`. - Spacing: `pt-32 pb-24 px-4`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] 1. [THE GUARANTEE CARD CONTAINER] - Container: `relative max-w-4xl mx-auto bg-white rounded-3xl p-8 md:p-14 shadow-2xl border border-slate-200 text-center mt-12`. 2. [THE OVERLAPPING GLOWING SEAL] - Architecture: The seal must sit perfectly on the top edge of the card, half outside (on the dark background) and half inside (on the white card). - Element: `<img src="garantia.webp" alt="Garantía 30 Días" class="absolute -top-20 left-1/2 -translate-x-1/2 w-40 md:w-48 drop-shadow-[0_0_40px_rgba(234,179,8,0.6)] animate-[pulse_4s_ease-in-out_infinite]" />` - *Note:* Add a `pt-16` or `mt-8` to the first text element inside the card so it doesn't collide with the absolute positioned seal. 3. [HEADLINE & BODY COPY - INSIDE THE CARD] - Headline: "¿La mejor manera de saber si SueñoHertz® funciona para ti? Probándolo con riesgo cero." - Headline Styling: `h2`, `text-3xl md:text-4xl font-bold text-slate-900 mb-8 pt-8 md:pt-12 text-balance`. - Body Paragraph 1: "Tienes 30 días completos para explorar SueñoHertz® y todos los bonos con calma, en tu propia cama, y descubrir en la práctica el impacto de una mente destrabada." (`text-slate-600 text-lg mb-6 leading-relaxed`) - Body Paragraph 2: "Dale play, cierra los ojos y simplemente duerme. Siente en carne propia la diferencia de despertar con la energía restaurada y la vibración calibrada hacia la prosperidad." (`text-slate-600 text-lg mb-6 leading-relaxed`) - Body Paragraph 3: "Pruébalo por 30 días. Si, por cualquier motivo, en ese período sientes que la tecnología no es para ti, solo solicita el reembolso y te devolveremos el 100% de tu inversión." (`text-slate-600 text-lg mb-8 leading-relaxed`) - Impact Statement: "SIN JUSTIFICACIONES. SIN LETRAS PEQUEÑAS. SIN RESENTIMIENTOS." - Impact Styling: `font-black text-xl md:text-2xl text-slate-900 mb-8 tracking-wide`. - Closing Paragraph: "Porque donde hay confianza absoluta en la herramienta, hay transformación real. El riesgo financiero es 100% nuestro. El salto hacia una nueva realidad es tuyo." (`text-slate-600 text-lg font-medium italic mb-10`) 4. [PASTEL SECURITY BOX] - Container: `bg-amber-50/50 border border-amber-200/50 rounded-xl p-4 md:p-6 mb-10 inline-block w-full max-w-2xl mx-auto`. - Text: "🔒 Tu compra es 100% segura. Tu satisfacción es nuestra prioridad." (`text-amber-900 font-semibold text-sm md:text-base`) 5. [GIANT CTA BUTTON] - Element: `<a>` with `href` linking to the Hotmart checkout provided in Fold 09. - Copy: "👉 QUIERO ACCEDER A SUEÑOHERTZ SIN NINGÚN RIESGO" - Styling: Replicate the Master CTA. `bg-gradient-to-r from-emerald-500 to-green-600 text-white font-extrabold py-5 px-6 md:px-12 rounded-full inline-block shadow-[0_0_30px_rgba(16,185,129,0.4)] animate-pulse hover:scale-105 transition-transform text-lg md:text-xl w-full md:w-auto`. [RULES FOR V0] - Z-Index: Ensure the seal image has a high enough z-index (`z-20`) to sit above the card and background flawlessly. - The drop-shadow on the seal must be golden/amber to replicate the glowing effect from the reference. IMPLEMENT FOLD 13: FAQ (ACCORDION) & LEGAL FOOTER Build the thirteenth and final fold directly below the previous one. This section brings closure to the page with a clean, institutional, and highly trustworthy layout, perfectly matching the clinical reference provided. [BACKGROUND & SPACING] - Background Color: Maintain the exact same off-white from the previous fold (`bg-[#FAF9F6]` or `bg-slate-50`) to create a seamless, breathable ending to the page. - Spacing: `pt-24 pb-12 px-4`. [CHRONOLOGICAL DOM STRUCTURE & SPANISH COPY] ================================================== BLOCK 1: FAQ (ACCORDION STYLE) ================================================== 1. Headline: "Preguntas Frecuentes" - Styling: `h2`, `text-3xl md:text-4xl font-bold text-center text-slate-900 mb-12 font-serif or elegant sans`. 2. Accordion Container: - Use the `shadcn/ui` Accordion component (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) to ensure smooth, accessible animations. - Container Styling: `max-w-3xl mx-auto flex flex-col gap-4`. 3. Accordion Items: - General Item Styling: Each item must look like a clean white card. `bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden px-2`. - Trigger Styling: `text-left font-bold text-slate-900 text-base md:text-lg py-4 hover:no-underline hover:text-amber-600 transition-colors`. Include a Chevron down icon that rotates when opened. - Content Styling: `text-slate-600 text-sm md:text-base leading-relaxed pb-6 px-1`. - ITEM 1: - Q: "¿Necesito estar despierto para que funcione?" - A: "Absolutamente no. Ese es el mayor diferencial de SueñoHertz®. La tecnología fue diseñada científicamente para actuar exactamente mientras duermes, eludiendo la resistencia de tu mente consciente (vigilia). Tu único trabajo es darle play, cerrar los ojos y descansar." - ITEM 2: - Q: "¿Puedo usarlo sin audífonos?" - A: "Sí, funciona perfectamente sin audífonos. Puedes dejar el audio reproduciéndose en el ambiente (en el celular o altavoz) a un volumen bajo y cómodo cerca de la cama. Si prefieres una inmersión total para aislar ruidos externos, puedes usar audífonos (si se caen durante la madrugada, no hay problema, tu cerebro ya estará sintonizado en las ondas de reprogramación)." - ITEM 3: - Q: "¿Puedo escucharlo más de una vez por noche?" - A: "Sí. Puedes configurar tu reproductor en modo repetición (loop) y dejar que SueñoHertz® suene durante toda la noche. El audio conducirá tu cerebro de forma continua y segura por los ciclos de relajación, profundizando aún más la instalación de la nueva identidad vibracional." - ITEM 4 - Q: "¿Tiene contraindicaciones?" - A: "No hay contraindicaciones. SueñoHertz® utiliza tecnología de neurofrecuencia y ondas sonoras naturales (Binaurales y Hertz) que solo estimulan la relajación, la regeneración celular y el bienestar mental. Es seguro para cualquier edad. (Recomendación de seguridad: Como el audio induce al sueño profundo, nunca lo escuches mientras conduces u operas maquinaria)." - ITEM 5: - Q: "¿En cuánto tiempo veré resultados?" - A: "La velocidad de absorción varía de persona a persona, pero la abrumadora mayoría de los usuarios reporta una profunda sensación de ligereza, eliminación de la ansiedad y un pico de energía desde la primera mañana. Para la reestructuración completa de bloqueos financieros y amorosos, recomendamos la escucha continua diaria. La tecnología actúa rápido, tu constancia sella el resultado." ================================================== BLOCK 2: THE LEGAL FOOTER & DISCLAIMERS ================================================== - Container: `max-w-4xl mx-auto mt-24 text-center border-t border-slate-200 pt-12`. 1. Footer Navigation: - Content: `SUEÑOHERTZ® | POLÍTICA DE PRIVACIDAD | TÉRMINOS DE USO` - Styling: `flex flex-wrap justify-center gap-4 text-xs md:text-sm font-bold text-slate-500 mb-6`. Make the links hoverable (`hover:text-slate-900 transition-colors`). 2. Copyright: - Content: "© 2026 SueñoHertz® - Tecnología de Reprogramación Vibracional. Todos los derechos reservados." - Styling: `text-xs text-slate-400 mb-8`. 3. Disclaimers: - Content 1: "Aviso Legal: Los resultados presentados en esta página son reales y reflejan la experiencia de alumnos y usuarios dedicados del método. Sin embargo, los resultados pueden variar de persona a persona. Esta tecnología de neurofrecuencia es una herramienta de optimización mental y bienestar, y no sustituye consultas, diagnósticos o tratamientos médicos y psicológicos convencionales." - Content 2: "Este sitio no forma parte del sitio web de Facebook/Meta o Facebook Inc. Además, este sitio NO está respaldado por Facebook de ninguna manera. FACEBOOK es una marca comercial registrada de FACEBOOK, Inc." - Styling: `text-[10px] md:text-xs text-slate-400 leading-relaxed max-w-3xl mx-auto flex flex-col gap-4 mb-8`. 4. Security Badge (Bottom center): - Content: "🔒 Ambiente Seguro. Tus datos están 100% protegidos." - Styling: `inline-flex items-center justify-center gap-2 text-xs font-semibold text-emerald-600 bg-emerald-50 border border-emerald-100 rounded-full px-4 py-2`. [RULES FOR V0] - Ensure the accordion handles state correctly using Radix UI primitives so there are no layout shifts when items open and close. - The footer text must be small and subtle, not competing with the main content of the page, but perfectly legible (WCAG contrast compliant).