{"id":20,"date":"2026-06-26T21:54:32","date_gmt":"2026-06-26T21:54:32","guid":{"rendered":"https:\/\/nitateamo.xyz\/?page_id=20"},"modified":"2026-06-26T21:54:33","modified_gmt":"2026-06-26T21:54:33","slug":"20-2","status":"publish","type":"page","link":"http:\/\/nitateamo.xyz\/?page_id=20","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>El Mundito de Nosotros \u00b7 7 Pecados<\/title>\n  <meta name=\"description\" content=\"Una experiencia web \u00fanica con 7 cartas de amor inspiradas en los 7 pecados capitales y m\u00e1s de 60 features interactivas.\" \/>\n\n  <!-- Fonts -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700;800&#038;family=Playfair+Display:ital,wght@0,700;1,400&#038;family=Caveat:wght@400;700&#038;family=Delius&#038;family=Share+Tech+Mono&#038;display=swap\" rel=\"stylesheet\" \/>\n\n  <!-- AOS -->\n  <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.css\" rel=\"stylesheet\" \/>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.js\" defer><\/script>\n\n  <!-- GSAP -->\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\" defer><\/script>\n\n  <link rel=\"stylesheet\" href=\"style.css\" \/>\n<\/head>\n<body data-vibe=\"emerald\" data-font=\"caveat\" data-cursor=\"default\" data-clean-mode=\"false\">\n\n  <!-- \u2550\u2550\u2550 ACHIEVEMENT NOTIFIER \u2550\u2550\u2550 -->\n  <div class=\"achievement-toast\" id=\"achievementToast\">\n    <div class=\"achievement-toast__icon\">\ud83c\udfc6<\/div>\n    <div class=\"achievement-toast__content\">\n      <span class=\"achievement-toast__title\">\u00a1Logro Desbloqueado!<\/span>\n      <span class=\"achievement-toast__desc\" id=\"achievementDesc\">Has completado una acci\u00f3n.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 LOGIN SECURITY LOCK \u2550\u2550\u2550 -->\n  <div class=\"login-lock\" id=\"loginLock\">\n    <div class=\"login-lock__box\">\n      <h2>\ud83d\udd10 Acceso a Nuestro Mundito<\/h2>\n      <p>Introduce la contrase\u00f1a de amor para entrar:<\/p>\n      <div class=\"login-lock__input-wrapper\">\n        <input type=\"password\" id=\"loginPassword\" placeholder=\"\u00bfC\u00f3mo me dices cari\u00f1osamente?\" autofocus \/>\n        <button id=\"btnLoginSubmit\">Entrar<\/button>\n      <\/div>\n      <p class=\"login-lock__error\" id=\"loginError\">Contrase\u00f1a incorrecta, int\u00e9ntalo de nuevo \ud83e\udd7a<\/p>\n      <p class=\"login-lock__hint\">(Pista: Empieza por N&#8230; y es lo que m\u00e1s me vuelve loco de ti en las cartas)<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 WELCOME PORTAL (OVERLAY) \u2550\u2550\u2550 -->\n  <div class=\"welcome-portal welcome-portal--hidden\" id=\"welcomePortal\">\n    <div class=\"portal-envelope\" id=\"portalEnvelope\">\n      <div class=\"portal-envelope__flap\"><\/div>\n      <div class=\"portal-envelope__paper\">\n        <h2 class=\"portal-envelope__title\">De: M\u00ed <br> Para: Nita \ud83d\udc9a<\/h2>\n        <p class=\"portal-envelope__text\">He preparado sorpresas infinitas. \u00bfQuieres entrar a nuestro mundito?<\/p>\n        <div class=\"portal-envelope__buttons\">\n          <button class=\"portal-btn portal-btn--music\" id=\"btnEnterMusic\">S\u00ed, con m\u00fasica \ud83c\udfb5<\/button>\n          <button class=\"portal-btn portal-btn--silent\" id=\"btnEnterSilent\">Entrar en silencio \ud83e\udd2b<\/button>\n        <\/div>\n      <\/div>\n      <div class=\"portal-envelope__seal\">\n        <div class=\"portal-envelope__seal-heart\">\u2764<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 EASTER EGG GOLDEN HEARTS (5 hidden across page) \u2550\u2550\u2550 -->\n  <div class=\"golden-heart-egg\" style=\"top: 15vh; left: 5vw;\" id=\"eggHeart1\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n\n  <!-- \u2550\u2550\u2550 PRELOADER \u2550\u2550\u2550 -->\n  <div class=\"preloader\" id=\"preloader\">\n    <div class=\"preloader__ring\"><\/div>\n    <span class=\"preloader__text\">Creando magia&#8230;<\/span>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 CUSTOM CURSOR \u2550\u2550\u2550 -->\n  <div class=\"cursor\" id=\"cursor\"><\/div>\n  <div class=\"cursor-trail\" id=\"cursorTrail\"><\/div>\n\n  <!-- \u2550\u2550\u2550 PARTICLE CANVAS \u2550\u2550\u2550 -->\n  <canvas id=\"particles\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- \u2550\u2550\u2550 SCROLL PROGRESS \u2550\u2550\u2550 -->\n  <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n\n  <!-- \u2550\u2550\u2550 FLOATING MUSIC PLAYER \u2550\u2550\u2550 -->\n  <div class=\"music-widget\" id=\"musicWidget\">\n    <button class=\"music-widget__toggle\" id=\"musicWidgetToggle\" aria-label=\"Abrir reproductor\">\n      <div class=\"music-widget__vinyl\" id=\"musicVinyl\">\ud83c\udfb5<\/div>\n    <\/button>\n    <div class=\"music-widget__panel\" id=\"musicPanel\">\n      <span class=\"music-widget__song\" id=\"musicSongName\">Banda Sonora Rom\u00e1ntica<\/span>\n      <span class=\"music-widget__artist\">Piano Instrumental<\/span>\n      <div class=\"music-widget__controls\">\n        <button id=\"btnPrevSong\" title=\"Anterior\">\u23ee<\/button>\n        <button id=\"btnPlayPause\" class=\"play\" title=\"Play\/Pausa\">\u23f8<\/button>\n        <button id=\"btnNextSong\" title=\"Siguiente\">\u23ed<\/button>\n        <button id=\"btnToggleSynth\" title=\"Sintetizador Lofi (Chimes)\">\ud83c\udfb9<\/button>\n      <\/div>\n      <div class=\"music-widget__volume\">\n        <span>\ud83d\udd08<\/span>\n        <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.5\" title=\"Volumen\" \/>\n        <span>\ud83d\udd0a<\/span>\n      <\/div>\n      <div class=\"music-widget__visualizer\" id=\"musicVisualizer\">\n        <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n      <\/div>\n      <audio id=\"bgAudio\" loop>\n        <source src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-8.mp3\" type=\"audio\/mpeg\">\n      <\/audio>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 FLOATING INTERACTIVE SETTINGS SWITCHER \u2550\u2550\u2550 -->\n  <div class=\"vibe-switcher\" id=\"vibeSwitcher\">\n    <button class=\"vibe-switcher__active-btn\" id=\"vibeBtn\" title=\"Ajustes de ambiente\">\u2699 Ajustes<\/button>\n    <div class=\"vibe-switcher__options\" id=\"vibeOptions\">\n      <span class=\"vibe-switcher__section-title\">Color de Vibe<\/span>\n      <button data-vibe=\"emerald\" class=\"active\">Emerald Cyber \ud83d\udc9a<\/button>\n      <button data-vibe=\"red-velvet\">Red Velvet \u2764<\/button>\n      <button data-vibe=\"midnight-violet\">Midnight Violet \ud83d\udc9c<\/button>\n      \n      <span class=\"vibe-switcher__section-title\">Tipograf\u00eda<\/span>\n      <button data-font-opt=\"caveat\" class=\"active\">Manuscrito \u270d<\/button>\n      <button data-font-opt=\"delius\">Delius Limpia \ud83d\udd8b<\/button>\n      <button data-font-opt=\"monospace\">Retro M\u00e1quina \ud83d\udcdf<\/button>\n      \n      <span class=\"vibe-switcher__section-title\">Cursor<\/span>\n      <button data-cursor-opt=\"default\" class=\"active\">Puntero Brillante \u2728<\/button>\n      <button data-cursor-opt=\"heart\">Coraz\u00f3n Rosa \ud83d\udc95<\/button>\n      <button data-cursor-opt=\"lostvayne\">Espada Lostvayne \ud83d\udde1<\/button>\n\n      <span class=\"vibe-switcher__section-title\">Extras<\/span>\n      <button id=\"btnCleanModeToggle\">Lectura Limpia (Sin Part\u00edculas): Off<\/button>\n      <button id=\"btnPowerSavingToggle\">Ahorro Energ\u00eda Canvas: Off<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 HEADER \u2550\u2550\u2550 -->\n  <header class=\"header\" id=\"siteHeader\">\n    <a href=\"#hero\" class=\"header__logo\">7<span>Pecados<\/span><\/a>\n    <nav class=\"header__nav\">\n      <a href=\"#hero\">Inicio<\/a>\n      <a href=\"#timeline\">Historia<\/a>\n      <a href=\"#polaroids\">Recuerdos<\/a>\n      <a href=\"#cards\">Cartas<\/a>\n      <a href=\"#songs\">Canciones<\/a>\n      <a href=\"#interactive-features\">Especial<\/a>\n      <a href=\"#question\">Final<\/a>\n    <\/nav>\n  <\/header>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 1 \u2014 HERO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"hero\" id=\"hero\">\n    <div class=\"hero__bg\">\n      <img decoding=\"async\" src=\"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg\" alt=\"\" class=\"hero__img\" \/>\n      <div class=\"hero__overlay\"><\/div>\n    <\/div>\n    <div class=\"hero__content\">\n      <span class=\"hero__badge\">Los 7 Pecados Capitales<\/span>\n      <h1 class=\"hero__title\">Cartas<br\/>de Amor<\/h1>\n      <p class=\"hero__sub\" id=\"typewriter\"><\/p>\n      <a href=\"#cards\" class=\"hero__cta\">\n        <span>Comenzar<\/span>\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7 17L17 7M17 7H7M17 7v10\"\/><\/svg>\n      <\/a>\n    <\/div>\n    <div class=\"hero__scroll\">\n      <span>scroll<\/span>\n      <div class=\"hero__scroll-line\"><\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 2 \u2014 TIMELINE \"Nuestra Historia\"\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"timeline\" id=\"timeline\">\n    <div class=\"golden-heart-egg\" style=\"top: 50%; right: 4vw;\" id=\"eggHeart2\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n    <div class=\"section-header\" data-aos=\"fade-up\">\n      <span class=\"section-label\">Nuestra Historia<\/span>\n      <h2 class=\"section-title\">C\u00f3mo empez\u00f3 todo<\/h2>\n      <div class=\"section-divider\"><\/div>\n    <\/div>\n\n    <div class=\"timeline__track\">\n      <div class=\"timeline__line\"><\/div>\n\n      <div class=\"timeline__item timeline__item--left\" data-aos=\"fade-right\">\n        <div class=\"timeline__dot\"><\/div>\n        <div class=\"timeline__card\">\n          <span class=\"timeline__date\">El comienzo<\/span>\n          <h3>La primera vez que hablamos<\/h3>\n          <p>Desde el primer segundo sent\u00ed una conexi\u00f3n demasiado cabrona, algo que no me hab\u00eda pasado con nadie m\u00e1s en la vida.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"timeline__item timeline__item--right\" data-aos=\"fade-left\">\n        <div class=\"timeline__dot\"><\/div>\n        <div class=\"timeline__card\">\n          <span class=\"timeline__date\">Nuestro mundito<\/span>\n          <h3>Anime, risas y madrugadas<\/h3>\n          <p>Oshi no Ko, School Days, Billie Eilish de fondo&#8230; armamos un mundito propio donde solo entramos t\u00fa y yo.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"timeline__item timeline__item--left\" data-aos=\"fade-right\">\n        <div class=\"timeline__dot\"><\/div>\n        <div class=\"timeline__card\">\n          <span class=\"timeline__date\">El &#8220;casi algo&#8221;<\/span>\n          <h3>Cuando ya no alcanz\u00f3<\/h3>\n          <p>Me cans\u00e9 de esa palabra. Ya no me conformo con vernos a medias. Quiero hacer las cosas bien contigo.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"timeline__item timeline__item--right\" data-aos=\"fade-left\">\n        <div class=\"timeline__dot timeline__dot--gold\"><\/div>\n        <div class=\"timeline__card timeline__card--gold\">\n          <span class=\"timeline__date\">Hoy<\/span>\n          <h3>La pregunta que cambia todo<\/h3>\n          <p>7 cartas, 7 pecados, 1 sentimiento. Esto no es un juego \u2014 va en serio.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 2.5 \u2014 POLAROID WALL\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"polaroids\" id=\"polaroids\">\n    <div class=\"section-header\" data-aos=\"fade-up\">\n      <span class=\"section-label\">Galer\u00eda T\u00e1ctil<\/span>\n      <h2 class=\"section-title\">Instantes Contigo<\/h2>\n      <div class=\"section-divider\"><\/div>\n      <p class=\"section-desc\">\u00a1Arrastra los recuerdos de la mesa! Doble clic en una foto para verla en grande.<\/p>\n    <\/div>\n\n    <div class=\"polaroids__board\" id=\"polaroidBoard\">\n      <!-- Polaroid 1 -->\n      <div class=\"polaroid\" style=\"--rotation: -5deg; --x: -20px; --y: 10px;\" data-id=\"1\">\n        <div class=\"polaroid__photo\">\n          <svg class=\"polaroid__svg\" viewBox=\"0 0 100 100\" fill=\"none\">\n            <rect width=\"100\" height=\"100\" fill=\"#151722\"\/>\n            <path d=\"M50 35 C40 20, 20 30, 50 65 C80 30, 60 20, 50 35 Z\" fill=\"var(--primary)\" opacity=\"0.3\"\/>\n            <circle cx=\"50\" cy=\"42\" r=\"8\" fill=\"var(--primary)\"\/>\n          <\/svg>\n        <\/div>\n        <p class=\"polaroid__caption\">Aquella llamada hasta la madrugada&#8230; \ud83d\udcde<\/p>\n      <\/div>\n\n      <!-- Polaroid 2 -->\n      <div class=\"polaroid\" style=\"--rotation: 4deg; --x: 30px; --y: -20px;\" data-id=\"2\">\n        <div class=\"polaroid__photo\">\n          <svg class=\"polaroid__svg\" viewBox=\"0 0 100 100\" fill=\"none\">\n            <rect width=\"100\" height=\"100\" fill=\"#151722\"\/>\n            <polygon points=\"30,70 50,30 70,70\" fill=\"var(--secondary)\" opacity=\"0.2\"\/>\n            <circle cx=\"50\" cy=\"50\" r=\"12\" fill=\"var(--secondary)\" opacity=\"0.3\"\/>\n          <\/svg>\n        <\/div>\n        <p class=\"polaroid__caption\">Viendo anime y ri\u00e9ndonos de todo \ud83c\udfac<\/p>\n      <\/div>\n\n      <!-- Polaroid 3 -->\n      <div class=\"polaroid\" style=\"--rotation: -2deg; --x: -60px; --y: -30px;\" data-id=\"3\">\n        <div class=\"polaroid__photo\">\n          <svg class=\"polaroid__svg\" viewBox=\"0 0 100 100\" fill=\"none\">\n            <rect width=\"100\" height=\"100\" fill=\"#151722\"\/>\n            <path d=\"M20,50 Q50,20 80,50 T20,50\" fill=\"var(--gold)\" opacity=\"0.25\"\/>\n            <circle cx=\"35\" cy=\"40\" r=\"6\" fill=\"#fff\" opacity=\"0.4\"\/>\n            <circle cx=\"65\" cy=\"40\" r=\"6\" fill=\"#fff\" opacity=\"0.4\"\/>\n          <\/svg>\n        <\/div>\n        <p class=\"polaroid__caption\">Escuchando Billie Eilish en bucle \ud83c\udfa7<\/p>\n      <\/div>\n\n      <!-- Polaroid 4 -->\n      <div class=\"polaroid\" style=\"--rotation: 6deg; --x: 80px; --y: 40px;\" data-id=\"4\">\n        <div class=\"polaroid__photo\">\n          <svg class=\"polaroid__svg\" viewBox=\"0 0 100 100\" fill=\"none\">\n            <rect width=\"100\" height=\"100\" fill=\"#151722\"\/>\n            <path d=\"M10,80 L90,80 L50,20 Z\" fill=\"var(--rose)\" opacity=\"0.2\"\/>\n            <path d=\"M50,40 C45,30 35,35 50,55 C65,35 55,30 50,40 Z\" fill=\"var(--rose)\" opacity=\"0.5\"\/>\n          <\/svg>\n        <\/div>\n        <p class=\"polaroid__caption\">T\u00fa, la due\u00f1a de mi cabeza \ud83d\udc9a<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Polaroid Zoom Modal -->\n  <div class=\"polaroid-modal\" id=\"polaroidModal\">\n    <div class=\"polaroid-modal__content\">\n      <div class=\"polaroid-modal__photo\" id=\"modalPhoto\"><\/div>\n      <p class=\"polaroid-modal__caption\" id=\"modalCaption\"><\/p>\n      <button class=\"polaroid-modal__close\" id=\"btnModalClose\">Cerrar<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 3 \u2014 CARDS (7 Cartas)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"cards\" id=\"cards\">\n    <div class=\"golden-heart-egg\" style=\"bottom: 10%; left: 3vw;\" id=\"eggHeart3\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n    <div class=\"section-header\" data-aos=\"fade-up\">\n      <span class=\"section-label\">Las Cartas<\/span>\n      <h2 class=\"section-title\">7 pecados, 1 sentimiento<\/h2>\n      <div class=\"section-divider\"><\/div>\n      <div class=\"cards-exporter\">\n        <button id=\"btnExportPDF\" class=\"export-btn\">\ud83d\udce5 Descargar todas en PDF<\/button>\n        <button id=\"btnToggleAllLetters\" class=\"export-btn\">Ver todas en lectura limpia<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Card 01 \u2014 Ira -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-1\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Dragon Mark of Wrath -->\n        <div class=\"wax-seal\" data-target-id=\"1\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M50 20 C25 20, 20 45, 45 55 C65 65, 75 40, 50 40 C35 40, 35 60, 50 65 C65 70, 75 80, 50 80\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n            <circle cx=\"45\" cy=\"35\" r=\"3\" fill=\"#fff\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">01<\/span>\n              <span class=\"card__sin\">Pecado de la Ira \ud83d\udc09<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"1\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">La conexi\u00f3n que no me saco de la cabeza<\/h3>\n            \n            <!-- SIMULATED VOICE NOTE (NEW FEATURE) -->\n            <div class=\"voice-note\" data-vn-id=\"1\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-1\">\n              <p class=\"dropcap\">Nita mi vida&#8230;<\/p>\n              <p>La verdad llevo d\u00edas pensando en c\u00f3mo decirte todo esto, porque por mensaje siento que no me cabe todo lo que tengo ac\u00e1 guardado.<\/p>\n              <p>Me puse a acordarme de cuando empezamos a hablar, de las primeras veces, y te juro que desde el primer segundo sent\u00ed una conexi\u00f3n demasiado cabrona, algo que no me hab\u00eda pasado con nadie m\u00e1s en la vida.<\/p>\n              <p>No fue solo plan de &#8220;uy qu\u00e9 ni\u00f1a tan linda&#8221;, fue ver c\u00f3mo eras, tu vibra, no s\u00e9&#8230;<\/p>\n              <p>Hubo algo en ti que me cambi\u00f3 todo por completo.<\/p>\n              <p>De verdad que desde ese d\u00eda no hay un maldito momento en el que no te me pases por la cabeza, me cambiaste por completo y por eso quer\u00eda empezar esto dici\u00e9ndote que lo nuestro no fue casualidad.<\/p>\n              <p>Yo sab\u00eda desde el principio que t\u00fa ibas a ser alguien demasiado importante para m\u00ed.<\/p>\n              <button class=\"card__close\" data-close-id=\"1\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- Card 02 \u2014 Soberbia -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-2\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Lion Mark of Pride -->\n        <div class=\"wax-seal\" data-target-id=\"2\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M35 60 C35 30, 65 30, 65 50 C65 65, 45 70, 50 80\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n            <circle cx=\"65\" cy=\"45\" r=\"5\" fill=\"#fff\"\/>\n            <path d=\"M30 45 L42 50 L38 35\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">02<\/span>\n              <span class=\"card__sin\">Pecado de la Soberbia \ud83e\udd81<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"2\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">Me vuelve loco c\u00f3mo eres<\/h3>\n            \n            <div class=\"voice-note\" data-vn-id=\"2\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-2\">\n              <p class=\"dropcap\">Te tengo que confesar una vaina&#8230;<\/p>\n              <p>S\u00e9 que seguro ya lo sabes, pero ajajaj me vuelve loco tu forma de ser.<\/p>\n              <p>Me fascina que no te dejas de absolutamente nadie, tienes ese car\u00e1cter fuerte y esa chispa medio peleona que me da risa, pero a la vez me encanta demasiado.<\/p>\n              <p>O sea, de verdad me engancha un mont\u00f3n.<\/p>\n              <p>En un mundo donde todo el mundo finge ser perfecto o tierno para caer bien, t\u00fa eres t\u00fa misma sin pedirle permiso a nadie.<\/p>\n              <p>Hablas claro, defiendes lo tuyo y cuando te r\u00edes de la nada, literal me alegras el d\u00eda.<\/p>\n              <p>Eres demasiado divertida y aut\u00e9ntica nita, conmigo no tienes que fingir nada y te juro que me quitas cualquier aburrimiento de encima con solo existir.<\/p>\n              <p>Nunca vayas a cambiar esa actitud, porque esa esencia tuya es lo que m\u00e1s me atrae loco de ti.<\/p>\n              <button class=\"card__close\" data-close-id=\"2\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n\n    <!-- Card 03 \u2014 Pereza -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-3\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Grizzly Bear Mark of Sloth -->\n        <div class=\"wax-seal\" data-target-id=\"3\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M30 45 C30 70, 70 70, 70 45\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n            <path d=\"M40 35 L45 42 L35 40 M60 35 L55 42 L65 40\" stroke=\"#fff\" stroke-width=\"3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">03<\/span>\n              <span class=\"card__sin\">Pecado de la Pereza \ud83d\udc3b<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"3\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">La paz que me das en medio de todo<\/h3>\n\n            <div class=\"voice-note\" data-vn-id=\"3\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-3\">\n              <p class=\"dropcap\">Lo m\u00e1s loco de todo esto&#8230;<\/p>\n              <p>Es que cualquiera que te vea de afuera pensar\u00eda que con ese car\u00e1cter tuyo tan fuerte y esa energ\u00eda, estar contigo debe ser un caos total&#8230;<\/p>\n              <p>Pero para m\u00ed es todo lo contrario.<\/p>\n              <p>No te imaginas la tranquilidad tan hpta que me das, literal puedo tener el peor d\u00eda del mundo, estar estresado por mil pendejadas, pero es hablar contigo o verte y siento una paz incre\u00edble.<\/p>\n              <p>Como que todo el ruido de afuera deja de importar y me desconecto de todo.<\/p>\n              <p>Es un sentimiento muy lindo que yo no sab\u00eda que exist\u00eda hasta que apareciste t\u00fa.<\/p>\n              <p>Contigo me siento seguro, siento que puedo ser yo mismo sin miedo a nada.<\/p>\n              <p>Eres como mi lugar seguro en el mundo y eso lo valoro m\u00e1s que a nada.<\/p>\n              <button class=\"card__close\" data-close-id=\"3\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n\n    <!-- Card 04 \u2014 Envidia -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-4\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Serpent Mark of Envy -->\n        <div class=\"wax-seal\" data-target-id=\"4\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M50 20 C60 20, 65 35, 50 45 C35 55, 35 70, 50 80 C65 70, 65 55, 50 50\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">04<\/span>\n              <span class=\"card__sin\">Pecado de la Envidia \ud83d\udc0d<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"4\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">Nuestro mundito y los pecados<\/h3>\n\n            <div class=\"voice-note\" data-vn-id=\"4\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-4\">\n              <p class=\"dropcap\">Si te preguntas por qu\u00e9&#8230;<\/p>\n              <p>Por qu\u00e9 son exactamente 7 cartas, pues ya deber\u00edas saber: por los 7 pecados capitales.<\/p>\n              <p>Quer\u00eda que esto tuviera algo muy de nosotros, porque s\u00e9 lo mucho que te gusta.<\/p>\n              <p>Amo demasiado que podamos pasar de estar hablando de cualquier bobada a quedarnos horas pegados viendo Oshi no Ko, hablando de anime o viendo lo turbio de School Days, que de verdad, qu\u00e9 hpta serie tan loca ajajaj.<\/p>\n              <p>Pero me encanta compartir eso contigo.<\/p>\n              <p>Con estar acostado contigo viendo lo que sea, ri\u00e9ndonos de cualquier pendejada, ya me siento completo.<\/p>\n              <p>Armamos como un mundito propio donde solo entramos t\u00fa y yo, y no lo cambiar\u00eda por nada del mundo.<\/p>\n              <button class=\"card__close\" data-close-id=\"4\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n\n    <!-- Card 05 \u2014 Avaricia -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-5\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Fox Mark of Greed -->\n        <div class=\"wax-seal\" data-target-id=\"5\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M35 35 L65 35 L50 65 Z M35 35 C35 55, 50 75, 50 75 C50 75, 65 55, 65 35\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">05<\/span>\n              <span class=\"card__sin\">Pecado de la Avaricia \ud83e\udd8a<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"5\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">Lo que me cuesta decirte cara a cara<\/h3>\n\n            <div class=\"voice-note\" data-vn-id=\"5\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-5\">\n              <p class=\"dropcap\">Ya sabes que a veces&#8230;<\/p>\n              <p>Soy medio malo para expresar lo que siento, como que me enredo, me da pena o simplemente las palabras no me salen como quiero.<\/p>\n              <p>Y me da rabia no poder decirte todo lo que causas en m\u00ed.<\/p>\n              <p>Cuando escucho Lovers Rock o JVKE, o cuando me pongo a escuchar a Billie Eilish, que s\u00e9 que te encanta demasiado, me quedo pegado escuchando Ocean Eyes o I Love You, y literal mi mente vuela directo a ti.<\/p>\n              <p>Siento que esas canciones explican perfectamente lo bonito que se siente caer por alguien as\u00ed de duro.<\/p>\n              <p>Te convertiste como en esa canci\u00f3n favorita que uno pone en bucle todo el d\u00eda y que nunca te cansa. As\u00ed te siento yo a ti en mi vida.<\/p>\n              <button class=\"card__close\" data-close-id=\"5\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n\n    <!-- Card 06 \u2014 Gula -->\n    <article class=\"card card-envelope locked-state\" id=\"card-envelope-6\" data-aos=\"fade-up\">\n      <div class=\"card__accent\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Boar Mark of Gluttony -->\n        <div class=\"wax-seal\" data-target-id=\"6\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M40 30 C30 50, 45 75, 60 70 C75 65, 75 45, 55 40\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\"\/>\n            <circle cx=\"50\" cy=\"55\" r=\"4\" fill=\"#fff\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number\">06<\/span>\n              <span class=\"card__sin\">Pecado de la Gula \ud83d\udc17<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"6\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title\">Ya me cans\u00e9 de ser un casi algo<\/h3>\n\n            <div class=\"voice-note\" data-vn-id=\"6\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-6\">\n              <p class=\"dropcap\">Bueno, mi vida&#8230;<\/p>\n              <p>T\u00fa y yo sabemos que estamos en lo de &#8220;casi algo&#8221; y no te voy a mentir, he disfrutado cada maldito segundo a tu lado.<\/p>\n              <p>Cada risa, cada momento que hemos compartido ha sido brutal.<\/p>\n              <p>But siendo 100% sincero conmigo y contigo, ya me cans\u00e9 de esa palabra.<\/p>\n              <p>Ya no me conformo con vernos a medias o con que la gente pregunte y no sepamos ni qu\u00e9 decir.<\/p>\n              <p>Ese t\u00edtulo de casi algo ya me queda demasiado chiquito para todo lo que yo siento por ti.<\/p>\n              <p>Yo no te quiero para un rato, ni para pasar el tiempo mientras sale algo m\u00e1s.<\/p>\n              <p>Yo te quiero de verdad en mi vida y quiero hacer las cosas bien contigo.<\/p>\n              <button class=\"card__close\" data-close-id=\"6\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n\n    <!-- Card 07 \u2014 Lujuria \u2014 FINAL -->\n    <article class=\"card card-envelope card--final locked-state\" id=\"card-envelope-7\" data-aos=\"fade-up\">\n      <div class=\"card__accent card__accent--gold\"><\/div>\n      <div class=\"envelope-outer\">\n        <div class=\"envelope-flap\"><\/div>\n        \n        <!-- Wax Seal with SVG Goat Mark of Lust -->\n        <div class=\"wax-seal wax-seal--gold\" data-target-id=\"7\">\n          <svg class=\"sin-icon\" viewBox=\"0 0 100 100\">\n            <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>\n            <path d=\"M30 40 C30 15, 70 15, 70 40 C70 60, 50 65, 50 80\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n            <path d=\"M42 50 L50 42 L58 50\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"envelope-paper\">\n          <div class=\"card__inner\">\n            <div class=\"card__meta\">\n              <span class=\"card__number card__number--gold\">07<\/span>\n              <span class=\"card__sin card__sin--gold\">Pecado de la Lujuria \ud83d\udc10<\/span>\n              <button class=\"letter-favorite-btn\" data-letter-id=\"7\" title=\"A\u00f1adir a favoritas\">\ud83e\udd0d<\/button>\n            <\/div>\n            <h3 class=\"card__title card__title--gold\">La pregunta, ya de una<\/h3>\n\n            <div class=\"voice-note\" data-vn-id=\"7\">\n              <button class=\"vn-play-btn\">\u25b6 Escuchar Nota de Voz (M\u00fasica)<\/button>\n              <canvas class=\"vn-canvas\" width=\"200\" height=\"30\"><\/canvas>\n            <\/div>\n\n            <div class=\"card__body\" id=\"card-body-7\">\n              <p class=\"dropcap\">Y bueno mi vida&#8230;<\/p>\n              <p>Llegaste a la \u00faltima carta.<\/p>\n              <p>Quer\u00eda hacer todo esto, escribirte todo esto as\u00ed de real porque quer\u00eda demostrarte que no estoy jugando, que voy en serio contigo y que me importas m\u00e1s de lo que crees.<\/p>\n              <p>Eres la ni\u00f1a que me da paz, la que me hace re\u00edr como idiota, la que me encanta completica con todo y tu car\u00e1cter pele\u00f3n que me vuelve loco.<\/p>\n              <p>Nita, mi vida, me gustas demasiado, como no tienes una idea&#8230;<\/p>\n              <p class=\"card__highlight\">Y ya no quiero que seamos un casi nada.<\/p>\n              <button class=\"card__close card__close--gold\" data-close-id=\"7\">Doblar carta \u21a9<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lock-overlay\"><span>\ud83d\udd12 Abre las cartas anteriores<\/span><\/div>\n    <\/article>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 4 \u2014 SONG DEDICATIONS\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"songs\" id=\"songs\">\n    <div class=\"section-header\" data-aos=\"fade-up\">\n      <span class=\"section-label\">Banda Sonora<\/span>\n      <h2 class=\"section-title\">Las canciones que me recuerdan a ti<\/h2>\n      <div class=\"section-divider\"><\/div>\n      <p class=\"section-desc\">Presiona \ud83c\udfa7 para reproducir en el widget y escuchar juntos, o pulsa \u2764 para votar tu favorita.<\/p>\n    <\/div>\n\n    <div class=\"songs__grid\">\n      <div class=\"song\" data-aos=\"fade-up\" data-aos-delay=\"0\" data-audio-src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-1.mp3\" data-song-name=\"Ocean Eyes\" data-artist=\"Billie Eilish\">\n        <div class=\"song__disc\">\n          <div class=\"song__cassette\">\n            <div class=\"song__cassette-label\">Ocean Eyes<\/div>\n            <div class=\"song__cassette-reel left\"><\/div>\n            <div class=\"song__cassette-reel right\"><\/div>\n          <\/div>\n        <\/div>\n        <h4 class=\"song__title\">Ocean Eyes <span class=\"song-vote-count\" data-song-id=\"ocean\">0<\/span><\/h4>\n        <p class=\"song__artist\">Billie Eilish<\/p>\n        <p class=\"song__note\">&#8220;literal mi mente vuela directo a ti&#8221;<\/p>\n        <div class=\"song__actions\">\n          <button class=\"song__play-btn\">Escuchar \ud83c\udfa7<\/button>\n          <button class=\"song__like-btn\" data-song-id=\"ocean\">\u2764<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"song\" data-aos=\"fade-up\" data-aos-delay=\"100\" data-audio-src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-2.mp3\" data-song-name=\"i love you\" data-artist=\"Billie Eilish\">\n        <div class=\"song__disc\">\n          <div class=\"song__cassette\">\n            <div class=\"song__cassette-label\">i love you<\/div>\n            <div class=\"song__cassette-reel left\"><\/div>\n            <div class=\"song__cassette-reel right\"><\/div>\n          <\/div>\n        <\/div>\n        <h4 class=\"song__title\">i love you <span class=\"song-vote-count\" data-song-id=\"iloveyou\">0<\/span><\/h4>\n        <p class=\"song__artist\">Billie Eilish<\/p>\n        <p class=\"song__note\">&#8220;explica perfectamente lo bonito q se siente&#8221;<\/p>\n        <div class=\"song__actions\">\n          <button class=\"song__play-btn\">Escuchar \ud83c\udfa7<\/button>\n          <button class=\"song__like-btn\" data-song-id=\"iloveyou\">\u2764<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"song\" data-aos=\"fade-up\" data-aos-delay=\"200\" data-audio-src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-3.mp3\" data-song-name=\"golden hour\" data-artist=\"JVKE\">\n        <div class=\"song__disc\">\n          <div class=\"song__cassette\">\n            <div class=\"song__cassette-label\">golden hour<\/div>\n            <div class=\"song__cassette-reel left\"><\/div>\n            <div class=\"song__cassette-reel right\"><\/div>\n          <\/div>\n        <\/div>\n        <h4 class=\"song__title\">golden hour <span class=\"song-vote-count\" data-song-id=\"golden\">0<\/span><\/h4>\n        <p class=\"song__artist\">JVKE<\/p>\n        <p class=\"song__note\">&#8220;esa cancion favorita q uno pone en bucle&#8221;<\/p>\n        <div class=\"song__actions\">\n          <button class=\"song__play-btn\">Escuchar \ud83c\udfa7<\/button>\n          <button class=\"song__like-btn\" data-song-id=\"golden\">\u2764<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"song\" data-aos=\"fade-up\" data-aos-delay=\"300\" data-audio-src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-4.mp3\" data-song-name=\"Lovers Rock\" data-artist=\"TV Girl\">\n        <div class=\"song__disc\">\n          <div class=\"song__cassette\">\n            <div class=\"song__cassette-label\">Lovers Rock<\/div>\n            <div class=\"song__cassette-reel left\"><\/div>\n            <div class=\"song__cassette-reel right\"><\/div>\n          <\/div>\n        <\/div>\n        <h4 class=\"song__title\">Lovers Rock <span class=\"song-vote-count\" data-song-id=\"lovers\">0<\/span><\/h4>\n        <p class=\"song__artist\">TV Girl<\/p>\n        <p class=\"song__note\">&#8220;caer por alguien asi d duro&#8221;<\/p>\n        <div class=\"song__actions\">\n          <button class=\"song__play-btn\">Escuchar \ud83c\udfa7<\/button>\n          <button class=\"song__like-btn\" data-song-id=\"lovers\">\u2764<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 5 \u2014 INTERACTIVE FEATURES (THE HUB MODIFIED)\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"interactive-features\" id=\"interactive-features\">\n    <div class=\"golden-heart-egg\" style=\"top: 2%; right: 8vw;\" id=\"eggHeart4\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n    <div class=\"section-header\" data-aos=\"fade-up\">\n      <span class=\"section-label\">Zona Especial<\/span>\n      <h2 class=\"section-title\">El Cuartito de Juegos<\/h2>\n      <div class=\"section-divider\"><\/div>\n    <\/div>\n\n    <!-- HUB TAB NAVIGATION -->\n    <div class=\"hub-nav\">\n      <button class=\"hub-tab active\" data-tab=\"juegos\">\ud83d\udd79\ufe0f Mini-Juegos<\/button>\n      <button class=\"hub-tab\" data-tab=\"amor\">\ud83d\udd2e Detalles Amor<\/button>\n      <button class=\"hub-tab\" data-tab=\"organizador\">\ud83d\udcc5 Agenda y Notas<\/button>\n      <button class=\"hub-tab\" data-tab=\"stats\">\ud83d\udc09 Estad\u00edsticas (Ojo)<\/button>\n    <\/div>\n\n    <!-- TAB PANELS -->\n    <div class=\"hub-content\">\n      \n      <!-- ================= PANEL 1: JUEGOS ================= -->\n      <div class=\"hub-panel active\" id=\"panel-juegos\">\n        \n        <!-- Game 1: Slide Puzzle -->\n        <div class=\"feature-card inline-game\">\n          <h3>\ud83e\udde9 Rompecabezas del Coraz\u00f3n<\/h3>\n          <p class=\"feature-card__desc\">Haz clic en los bloques adyacentes al espacio vac\u00edo para ordenar la imagen del coraz\u00f3n.<\/p>\n          <div class=\"puzzle-wrapper\">\n            <div class=\"puzzle-board\" id=\"puzzleBoard\"><\/div>\n            <button class=\"game-action-btn\" id=\"btnResetPuzzle\">Reiniciar Puzzle<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Game 2: Memory Game -->\n        <div class=\"feature-card inline-game\">\n          <h3>\ud83c\udfb4 Memory Match<\/h3>\n          <p class=\"feature-card__desc\">Encuentra los pares de cartas representativos en el menor tiempo.<\/p>\n          <div class=\"memory-wrapper\">\n            <div class=\"memory-grid\" id=\"memoryGrid\"><\/div>\n            <button class=\"game-action-btn\" id=\"btnResetMemory\">Reiniciar Parejas<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Game 3: Destructor de Tristeza (Clicker) -->\n        <div class=\"feature-card inline-game\">\n          <h3>\ud83d\udca5 Destructor de Tristeza<\/h3>\n          <p class=\"feature-card__desc\">Haz clic r\u00e1pido en los globos negativos antes de que salgan de la caja para destruirlos.<\/p>\n          <div class=\"clicker-wrapper\">\n            <div class=\"clicker-box\" id=\"clickerBox\">\n              <span class=\"clicker-score\" id=\"clickScore\">Destruidos: 0<\/span>\n              <button class=\"clicker-start\" id=\"btnStartClicker\">Iniciar Partida<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Game 4: Flecha de Cupido -->\n        <div class=\"feature-card inline-game\">\n          <h3>\ud83c\udff9 Flecha de Cupido<\/h3>\n          <p class=\"feature-card__desc\">Arrastra y suelta el arco para lanzar la flecha hacia el coraz\u00f3n m\u00f3vil.<\/p>\n          <div class=\"cupid-wrapper\">\n            <div class=\"cupid-canvas-area\">\n              <canvas id=\"cupidCanvas\" width=\"300\" height=\"150\"><\/canvas>\n            <\/div>\n            <p id=\"cupidScore\">Aciertos: 0<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ================= PANEL 2: DETALLES AMOR ================= -->\n      <div class=\"hub-panel\" id=\"panel-amor\">\n        \n        <!-- Love Tester (Compatibilidad) -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\udc96 Test de Compatibilidad<\/h3>\n          <p class=\"feature-card__desc\">Escribe nuestros nombres para calcular nuestra afinidad m\u00e1gica.<\/p>\n          <div class=\"love-tester\">\n            <input type=\"text\" id=\"loveName1\" placeholder=\"Nombre de \u00e9l\" value=\"M\u00ed\" \/>\n            <span class=\"love-tester__plus\">+<\/span>\n            <input type=\"text\" id=\"loveName2\" placeholder=\"Nombre de ella\" value=\"Nita\" \/>\n            <button class=\"love-tester__btn\" id=\"btnCalculateLove\">Calcular Amor<\/button>\n            <div class=\"love-tester__result\" id=\"loveTesterResult\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Drawing Board (Love Canvas) -->\n        <div class=\"feature-card\">\n          <h3>\ud83c\udfa8 Pizarra de Amor<\/h3>\n          <p class=\"feature-card__desc\">Dibuja algo lindo para m\u00ed en esta pizarra. \u00a1Puedes borrar o limpiar el lienzo!<\/p>\n          <div class=\"paint-board\">\n            <canvas id=\"paintCanvas\" width=\"280\" height=\"150\"><\/canvas>\n            <div class=\"paint-controls\">\n              <button id=\"btnPaintClear\">Limpiar<\/button>\n              <input type=\"color\" id=\"paintColor\" value=\"#ff4d6d\" \/>\n              <button id=\"btnPaintSave\">Guardar Trazo<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Oracle (Or\u00e1culo del Amor) -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\udd2e Or\u00e1culo M\u00e1gico<\/h3>\n          <p class=\"feature-card__desc\">Haz una pregunta mental sobre nosotros y presiona el cristal.<\/p>\n          <div class=\"oracle-wrapper\">\n            <div class=\"oracle-ball\" id=\"oracleBall\">\n              <span id=\"oracleResponse\">Preg\u00fantame&#8230;<\/span>\n            <\/div>\n            <button class=\"oracle-btn\" id=\"btnOracleAsk\">Consultar Or\u00e1culo<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Compliment Box (Regalo Diario) -->\n        <div class=\"feature-card\">\n          <h3>\ud83c\udf81 Regalo Rom\u00e1ntico Diario<\/h3>\n          <p class=\"feature-card__desc\">Haz clic en la caja de regalo para abrir tu tarjetita diaria.<\/p>\n          <div class=\"compliment-wrapper\">\n            <div class=\"gift-box-daily\" id=\"giftBoxDaily\">\ud83c\udf81<\/div>\n            <p class=\"compliment-text\" id=\"dailyComplimentText\">\u00c1brelo para recibir un detalle&#8230;<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Message Jar (Tarro de Promesas) -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\uddf3\ufe0f Tarro de Promesas<\/h3>\n          <p class=\"feature-card__desc\">Haz clic en el frasco para sacar una cartita con una frase del coraz\u00f3n.<\/p>\n          <div class=\"jar-container\">\n            <div class=\"love-jar\" id=\"loveJar\">\n              <div class=\"love-jar__lid\"><\/div>\n              <div class=\"love-jar__body\">\n                <div class=\"love-jar__heart\">\u2764<\/div>\n              <\/div>\n            <\/div>\n            <div class=\"love-paper\" id=\"lovePaper\">\n              <div class=\"love-paper__content\" id=\"lovePaperText\">Saca una frase del tarro&#8230;<\/div>\n              <button class=\"love-paper__close\" id=\"btnMinimizarPapel\">Aceptar<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Trivia del Amor -->\n        <div class=\"feature-card trivia-card\">\n          <h3>\ud83e\udde0 Trivia del Amor<\/h3>\n          <p class=\"feature-card__desc\">Responde correctamente para desbloquear una tarjeta de raspar secreta.<\/p>\n          \n          <div class=\"trivia-container\" id=\"triviaContainer\">\n            <!-- Question 1 -->\n            <div class=\"trivia-question active\" data-step=\"1\">\n              <p class=\"trivia-question__title\">1. \u00bfQu\u00e9 serie anime vimos que te pareci\u00f3 s\u00faper loca o turbia?<\/p>\n              <div class=\"trivia-options\">\n                <button class=\"trivia-opt\" data-correct=\"false\">Oshi no Ko<\/button>\n                <button class=\"trivia-opt\" data-correct=\"true\">School Days \ud83e\ude78<\/button>\n                <button class=\"trivia-opt\" data-correct=\"false\">Demon Slayer<\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Question 2 -->\n            <div class=\"trivia-question\" data-step=\"2\">\n              <p class=\"trivia-question__title\">2. \u00bfQu\u00e9 canci\u00f3n de Billie Eilish me hace volar directamente a ti?<\/p>\n              <div class=\"trivia-options\">\n                <button class=\"trivia-opt\" data-correct=\"false\">Bad Guy<\/button>\n                <button class=\"trivia-opt\" data-correct=\"false\">i love you<\/button>\n                <button class=\"trivia-opt\" data-correct=\"true\">Ocean Eyes \ud83d\udc40<\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Question 3 -->\n            <div class=\"trivia-question\" data-step=\"3\">\n              <p class=\"trivia-question__title\">3. \u00bfQu\u00e9 parte de tu car\u00e1cter me vuelve locamente atra\u00eddo?<\/p>\n              <div class=\"trivia-options\">\n                <button class=\"trivia-opt\" data-correct=\"true\">Tu car\u00e1cter pele\u00f3n \u26a1<\/button>\n                <button class=\"trivia-opt\" data-correct=\"false\">Que seas aburrida<\/button>\n                <button class=\"trivia-opt\" data-correct=\"false\">Que me des la raz\u00f3n siempre<\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Success State \/ Scratch card -->\n            <div class=\"trivia-success\" id=\"triviaSuccess\">\n              <p class=\"trivia-success__msg\">\u00a1Incre\u00edble, acertaste todo! \u2764\ufe0f<\/p>\n              \n              <div class=\"scratch-card\" id=\"scratchCard\">\n                <div class=\"scratch-card__secret\">\n                  <h4>\ud83d\udc8c Mi Compromiso<\/h4>\n                  <p>&#8220;Prometo estar contigo en las buenas, en las malas y en tus momentos m\u00e1s peleones. Me encantas nita.&#8221;<\/p>\n                <\/div>\n                <canvas class=\"scratch-card__canvas\" id=\"scratchCanvas\"><\/canvas>\n              <\/div>\n              <p class=\"scratch-card__hint\">\u00a1Arrastra el mouse sobre la tarjeta gris para raspar y leer!<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Chat Simulador -->\n        <div class=\"feature-card chat-card\">\n          <h3>\ud83d\udcac Chat de Reacciones Anime<\/h3>\n          <p class=\"feature-card__desc\">Env\u00eda una reacci\u00f3n y observa las respuestas animadas en la pantalla.<\/p>\n          <div class=\"sim-chat\" id=\"simChat\">\n            <div class=\"sim-chat__history\" id=\"chatHistory\">\n              <div class=\"chat-bubble left\"><span>\u00a1Hola Nita! Bienvenido a nuestro chat de reacciones. \ud83d\udc09<\/span><\/div>\n            <\/div>\n            <div class=\"sim-chat__input\">\n              <button class=\"chat-send-btn\" data-chat-msg=\"\u00bfVemos anime?\">\ud83c\udfac \u00bfAnime?<\/button>\n              <button class=\"chat-send-btn\" data-chat-msg=\"Te quiero pele\u00f3n\">\u2764 Te quiero<\/button>\n              <button class=\"chat-send-btn\" data-chat-msg=\"\u00a1Peleemos!\">\u26a1 \u00a1Pelear!<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ================= PANEL 3: ORGANIZADOR ================= -->\n      <div class=\"hub-panel\" id=\"panel-organizador\">\n        \n        <!-- Bucket List -->\n        <div class=\"feature-card\">\n          <h3>\u2705 Nuestra Lista de Deseos<\/h3>\n          <p class=\"feature-card__desc\">Cosas hermosas pendientes de cumplir juntos.<\/p>\n          <div class=\"bucket-list\">\n            <ul id=\"bucketListItems\">\n              <li>\n                <label>\n                  <input type=\"checkbox\" data-index=\"0\">\n                  <span>Ver un amanecer juntos de la mano \ud83c\udf05<\/span>\n                <\/label>\n              <\/li>\n              <li>\n                <label>\n                  <input type=\"checkbox\" data-index=\"1\">\n                  <span>Escuchar Lovers Rock acostados y abrazados \ud83c\udfa7<\/span>\n                <\/label>\n              <\/li>\n              <li>\n                <label>\n                  <input type=\"checkbox\" data-index=\"2\">\n                  <span>Ir juntos a un concierto de Billie Eilish \ud83c\udfa4<\/span>\n                <\/label>\n              <\/li>\n              <li>\n                <label>\n                  <input type=\"checkbox\" data-index=\"3\">\n                  <span>Hacer una marat\u00f3n de anime toda la noche \ud83c\udf7f<\/span>\n                <\/label>\n              <\/li>\n              <li>\n                <label>\n                  <input type=\"checkbox\" data-index=\"4\">\n                  <span>Cocinar algo rico (y que no se nos queme la cocina) \ud83c\udf55<\/span>\n                <\/label>\n              <\/li>\n            <\/ul>\n            <div class=\"bucket-list__add\">\n              <input type=\"text\" id=\"bucketInput\" placeholder=\"A\u00f1adir algo por hacer...\" maxlength=\"45\">\n              <button id=\"btnBucketAdd\">+<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Shared Notes (Diario) -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\udcd6 Diario de Notas<\/h3>\n          <p class=\"feature-card__desc\">Mensajes cortos que desees plasmar (se guardan de forma permanente en el navegador).<\/p>\n          <div class=\"diary-wrapper\">\n            <textarea id=\"diaryInput\" placeholder=\"Escribe algo lindo hoy...\"><\/textarea>\n            <button id=\"btnSaveDiary\">Guardar Nota Diario<\/button>\n            <div class=\"diary-entries\" id=\"diaryEntries\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Citas Pendientes & Cuenta Regresiva -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\udcc5 Pr\u00f3ximos Encuentros<\/h3>\n          <p class=\"feature-card__desc\">Establece la fecha de nuestra siguiente cita para activar la cuenta regresiva.<\/p>\n          <div class=\"countdown-editor\">\n            <input type=\"datetime-local\" id=\"countdownDate\" \/>\n            <button id=\"btnSetCountdown\">Establecer Cita<\/button>\n          <\/div>\n          <div class=\"countdown-display\" id=\"countdownDisplay\">\n            <div class=\"cd-unit\"><span id=\"cd-days\">00<\/span><span>d\u00edas<\/span><\/div>\n            <div class=\"cd-unit\"><span id=\"cd-hours\">00<\/span><span>horas<\/span><\/div>\n            <div class=\"cd-unit\"><span id=\"cd-mins\">00<\/span><span>min<\/span><\/div>\n            <div class=\"cd-unit\"><span id=\"cd-secs\">00<\/span><span>seg<\/span><\/div>\n          <\/div>\n          <p class=\"countdown-label\" id=\"countdownLabel\">Sin citas programadas.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- ================= PANEL 4: ESTADISTICAS ================= -->\n      <div class=\"hub-panel\" id=\"panel-stats\">\n        \n        <!-- Ojo de Balor Stats -->\n        <div class=\"feature-card\">\n          <h3>\ud83d\udd2e Ojo de Balor (Niveles de Poder)<\/h3>\n          <p class=\"feature-card__desc\">Haz clic en los stats para ver detalles graciosos.<\/p>\n          <div class=\"balor-stats\">\n            <div class=\"stat-row\" data-stat-desc=\"Nivel de cari\u00f1o infinito e incalculable.\">\n              <span>Nivel de Afecto<\/span>\n              <div class=\"stat-bar\"><div class=\"stat-fill\" style=\"width: 100%;\"><\/div><\/div>\n              <span>99999+<\/span>\n            <\/div>\n            <div class=\"stat-row\" data-stat-desc=\"\u00a1Cuidado! Tu chispa y car\u00e1cter peleador son legendarios.\">\n              <span>Car\u00e1cter Pele\u00f3n<\/span>\n              <div class=\"stat-bar\"><div class=\"stat-fill\" style=\"width: 95%;\"><\/div><\/div>\n              <span>95%<\/span>\n            <\/div>\n            <div class=\"stat-row\" data-stat-desc=\"Nuestra capacidad de resistir horas viendo series turbias.\">\n              <span>Resistencia School Days<\/span>\n              <div class=\"stat-bar\"><div class=\"stat-fill\" style=\"width: 80%;\"><\/div><\/div>\n              <span>80%<\/span>\n            <\/div>\n            <div class=\"stat-row\" data-stat-desc=\"Tu capacidad para hacerme re\u00edr como un bobo con tus ocurrencias.\">\n              <span>Poder de Risas<\/span>\n              <div class=\"stat-bar\"><div class=\"stat-fill\" style=\"width: 100%;\"><\/div><\/div>\n              <span>MAX<\/span>\n            <\/div>\n          <\/div>\n          <p class=\"balor-explanation\" id=\"balorDesc\">Haz clic en una barra para analizar&#8230;<\/p>\n        <\/div>\n\n        <!-- Achievements Board -->\n        <div class=\"feature-card\">\n          <h3>\ud83c\udfc6 Registro de Logros de Amor<\/h3>\n          <p class=\"feature-card__desc\">Completa acciones en la p\u00e1gina para desbloquear todos los hitos y medallas.<\/p>\n          <div class=\"achievements-board\" id=\"achievementsBoard\">\n            <div class=\"badge-item locked\" id=\"badge-entry\" title=\"Desbloqueado al introducir la contrase\u00f1a de amor.\">\n              <span class=\"badge-icon\">\ud83d\udd11<\/span>\n              <span class=\"badge-name\">Acceso Concedido<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-letters\" title=\"Desbloqueado al abrir todas las 7 cartas.\">\n              <span class=\"badge-icon\">\ud83d\udc8c<\/span>\n              <span class=\"badge-name\">Lector Voraz<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-songs\" title=\"Desbloqueado al votar en la secci\u00f3n de canciones.\">\n              <span class=\"badge-icon\">\ud83c\udfb5<\/span>\n              <span class=\"badge-name\">Mel\u00f3mano<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-trivia\" title=\"Desbloqueado al acertar la trivia de amor.\">\n              <span class=\"badge-icon\">\ud83e\udde0<\/span>\n              <span class=\"badge-name\">Cerebrito<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-puzzle\" title=\"Desbloqueado al ordenar el puzzle de coraz\u00f3n.\">\n              <span class=\"badge-icon\">\ud83e\udde9<\/span>\n              <span class=\"badge-name\">Ingenioso<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-scratch\" title=\"Desbloqueado al raspar la tarjeta secreta.\">\n              <span class=\"badge-icon\">\ud83e\ude99<\/span>\n              <span class=\"badge-name\">Buscador de Secretos<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-hugs\" title=\"Desbloqueado al enviar 10 abrazos virtuales.\">\n              <span class=\"badge-icon\">\ud83e\udec2<\/span>\n              <span class=\"badge-name\">Abrazador Master<\/span>\n            <\/div>\n            <div class=\"badge-item locked\" id=\"badge-eggs\" title=\"Desbloqueado al recolectar los 5 corazones ocultos.\">\n              <span class=\"badge-icon\">\u2b50<\/span>\n              <span class=\"badge-name\">Cazador de Huevos<\/span>\n            <\/div>\n          <\/div>\n          <!-- Easter Egg Board status -->\n          <div class=\"easter-egg-status\" id=\"eggStatus\">\n            Estrellas\/Corazones de Oro Encontrados: <span id=\"eggCount\">0<\/span> \/ 5\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Interactive Hug widget placed below the hub panels directly -->\n    <div class=\"feature-card hug-card\" style=\"margin-top: 2rem;\">\n      <h3>\ud83e\udec2 Medidor de Abrazos<\/h3>\n      <p class=\"feature-card__desc\">\u00bfFalta de cari\u00f1o? Haz clic en el bot\u00f3n para enviarme un abrazo virtual.<\/p>\n      <div class=\"hug-meter\">\n        <div class=\"hug-meter__bar\">\n          <div class=\"hug-meter__fill\" id=\"hugFill\"><\/div>\n          <span class=\"hug-meter__label\" id=\"hugProgressText\">0% Abrazos<\/span>\n        <\/div>\n        <button class=\"hug-meter__btn\" id=\"btnSendHug\">Enviar abrazo virtual \ud83e\udec2<\/button>\n        <span class=\"hug-meter__count\" id=\"hugCountText\">Abrazos acumulados: 0<\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 MORE EASTER EGGS \u2550\u2550\u2550 -->\n  <div class=\"golden-heart-egg\" style=\"bottom: 25vh; right: 6vw;\" id=\"eggHeart5\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION 6 \u2014 THE FINAL QUESTION\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"question\" id=\"question\">\n    <canvas id=\"confettiCanvas\" aria-hidden=\"true\"><\/canvas>\n    \n    <div class=\"question__content\" data-aos=\"zoom-in\">\n      <span class=\"question__pre\">nita, despu\u00e9s de todo esto&#8230;<\/span>\n      <h2 class=\"question__title\">\u00bfQuieres ser mi novia?<\/h2>\n      \n      <!-- Gift Box \/ Cupones -->\n      <div class=\"gift-box-wrapper\">\n        <p class=\"gift-box-hint\">\ud83c\udf81 \u00a1Hay un regalo esper\u00e1ndote aqu\u00ed abajo!<\/p>\n        <div class=\"gift-box\" id=\"giftBox\">\n          <div class=\"gift-box__lid\"><\/div>\n          <div class=\"gift-box__body\">\n            <div class=\"gift-box__ribbon\"><\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- Coupons Container -->\n        <div class=\"coupons\" id=\"couponsContainer\">\n          <h4>\ud83c\udf9f\ufe0f Tus Cupones de Amor Canjeables<\/h4>\n          <div class=\"coupons__grid\">\n            <div class=\"coupon\">\n              <h5>Abrazo Infinito<\/h5>\n              <p>Canjeable por un abrazo de 5 minutos que te quite todo el estr\u00e9s.<\/p>\n              <button class=\"coupon__btn\" data-coupon=\"Abrazo\">Canjear Cup\u00f3n<\/button>\n            <\/div>\n            <div class=\"coupon\">\n              <h5>Noche de Pelis\/Anime<\/h5>\n              <p>T\u00fa eliges qu\u00e9 ver y yo pongo las palomitas y los mimos.<\/p>\n              <button class=\"coupon__btn\" data-coupon=\"Anime\">Canjear Cup\u00f3n<\/button>\n            <\/div>\n            <div class=\"coupon\">\n              <h5>Dar la Raz\u00f3n \u26a1<\/h5>\n              <p>Vale para tener la raz\u00f3n autom\u00e1ticamente en nuestra siguiente pelea.<\/p>\n              <button class=\"coupon__btn\" data-coupon=\"Pelea\">Canjear Cup\u00f3n<\/button>\n            <\/div>\n          <\/div>\n          <!-- Custom Coupon Generator (NEW FEATURE) -->\n          <div class=\"custom-coupon-gen\">\n            <input type=\"text\" id=\"customCouponName\" placeholder=\"Escribe un cup\u00f3n a tu gusto...\" maxlength=\"30\" \/>\n            <button id=\"btnGenerateCustomCoupon\">Crear mi cup\u00f3n<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"question__buttons\">\n        <button class=\"question__btn question__btn--yes\" id=\"btnYes\">\n          <span>S\u00ed, quiero \u2764\ufe0f<\/span>\n        <\/button>\n        <button class=\"question__btn question__btn--no\" id=\"btnNo\">\n          <span>No \ud83d\ude22<\/span>\n        <\/button>\n      <\/div>\n      \n      <p class=\"question__response\" id=\"questionResponse\"><\/p>\n\n      <!-- Reply Box -->\n      <div class=\"reply-section\" id=\"replySection\">\n        <p>Escr\u00edbeme un mensaje o respuesta. Se enviar\u00e1 de forma especial:<\/p>\n        <textarea id=\"replyTextarea\" placeholder=\"Ej: \u00a1S\u00ed quiero pele\u00f3n! \/ Te quiero...\" maxlength=\"300\"><\/textarea>\n        <div class=\"reply-actions\">\n          <button class=\"reply-btn\" id=\"btnSendReply\">Enviar Avioncito \u2708<\/button>\n          <button class=\"reply-btn btn-capture\" id=\"btnCaptureScreen\">Descargar postal \ud83d\udcf8<\/button>\n        <\/div>\n        <div class=\"paper-plane\" id=\"paperPlane\">\u2708<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 FOOTER \u2550\u2550\u2550 -->\n  <footer class=\"footer\" id=\"footer\">\n    <div class=\"golden-heart-egg\" style=\"bottom: 2rem; left: 10vw;\" id=\"eggHeart6\" title=\"\u00bfQu\u00e9 es esto?\">\u2b50<\/div>\n    <p class=\"footer__text\">Hecho con todo el coraz\u00f3n por tu novio \u00b7 2026<\/p>\n    <button class=\"footer__top\" id=\"scrollTop\" aria-label=\"Volver arriba\">\n      <!-- Meliodas Sword Lostvayne styled scroll-top (NEW FEATURE) -->\n      <span class=\"lostvayne-arrow\">\ud83d\udde1\ufe0f<\/span>\n    <\/button>\n  <\/footer>\n\n  <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>El Mundito de Nosotros \u00b7 7 Pecados \ud83c\udfc6 \u00a1Logro Desbloqueado! Has completado una acci\u00f3n. \ud83d\udd10 Acceso a Nuestro Mundito Introduce la contrase\u00f1a de amor para entrar: Entrar Contrase\u00f1a incorrecta, int\u00e9ntalo de nuevo \ud83e\udd7a (Pista: Empieza por N&#8230; y es lo que m\u00e1s me vuelve loco de ti en las cartas) De: M\u00ed Para: Nita \ud83d\udc9a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>- nita<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/nitateamo.xyz\/?page_id=20\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"- nita\" \/>\n<meta property=\"og:description\" content=\"El Mundito de Nosotros \u00b7 7 Pecados \ud83c\udfc6 \u00a1Logro Desbloqueado! Has completado una acci\u00f3n. \ud83d\udd10 Acceso a Nuestro Mundito Introduce la contrase\u00f1a de amor para entrar: Entrar Contrase\u00f1a incorrecta, int\u00e9ntalo de nuevo \ud83e\udd7a (Pista: Empieza por N&#8230; y es lo que m\u00e1s me vuelve loco de ti en las cartas) De: M\u00ed Para: Nita \ud83d\udc9a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/nitateamo.xyz\/?page_id=20\" \/>\n<meta property=\"og:site_name\" content=\"nita\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-26T21:54:33+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20\",\"url\":\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20\",\"name\":\"- nita\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/nitateamo.xyz\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/hero_bg_1782450616471.jpg\",\"datePublished\":\"2026-06-26T21:54:32+00:00\",\"dateModified\":\"2026-06-26T21:54:33+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/?page_id=20#primaryimage\",\"url\":\"http:\\\/\\\/nitateamo.xyz\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/hero_bg_1782450616471.jpg\",\"contentUrl\":\"http:\\\/\\\/nitateamo.xyz\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/hero_bg_1782450616471.jpg\"},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/nitateamo.xyz\\\/#website\",\"url\":\"http:\\\/\\\/nitateamo.xyz\\\/\",\"name\":\"nita\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/nitateamo.xyz\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"- nita","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/nitateamo.xyz\/?page_id=20","og_locale":"en_US","og_type":"article","og_title":"- nita","og_description":"El Mundito de Nosotros \u00b7 7 Pecados \ud83c\udfc6 \u00a1Logro Desbloqueado! Has completado una acci\u00f3n. \ud83d\udd10 Acceso a Nuestro Mundito Introduce la contrase\u00f1a de amor para entrar: Entrar Contrase\u00f1a incorrecta, int\u00e9ntalo de nuevo \ud83e\udd7a (Pista: Empieza por N&#8230; y es lo que m\u00e1s me vuelve loco de ti en las cartas) De: M\u00ed Para: Nita \ud83d\udc9a [&hellip;]","og_url":"http:\/\/nitateamo.xyz\/?page_id=20","og_site_name":"nita","article_modified_time":"2026-06-26T21:54:33+00:00","og_image":[{"url":"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/nitateamo.xyz\/?page_id=20","url":"http:\/\/nitateamo.xyz\/?page_id=20","name":"- nita","isPartOf":{"@id":"http:\/\/nitateamo.xyz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/nitateamo.xyz\/?page_id=20#primaryimage"},"image":{"@id":"http:\/\/nitateamo.xyz\/?page_id=20#primaryimage"},"thumbnailUrl":"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg","datePublished":"2026-06-26T21:54:32+00:00","dateModified":"2026-06-26T21:54:33+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/nitateamo.xyz\/?page_id=20"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/nitateamo.xyz\/?page_id=20#primaryimage","url":"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg","contentUrl":"http:\/\/nitateamo.xyz\/wp-content\/uploads\/2026\/06\/hero_bg_1782450616471.jpg"},{"@type":"WebSite","@id":"http:\/\/nitateamo.xyz\/#website","url":"http:\/\/nitateamo.xyz\/","name":"nita","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/nitateamo.xyz\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"brizy_media":[],"_links":{"self":[{"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":1,"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/21"}],"wp:attachment":[{"href":"http:\/\/nitateamo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}