{"id":18,"date":"2025-10-19T10:07:51","date_gmt":"2025-10-19T10:07:51","guid":{"rendered":"https:\/\/objective-napier.82-165-173-49.plesk.page\/?page_id=18"},"modified":"2025-10-19T11:11:34","modified_gmt":"2025-10-19T11:11:34","slug":"index","status":"publish","type":"page","link":"https:\/\/objective-napier.82-165-173-49.plesk.page\/","title":{"rendered":"Index"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n El Rinc\u00f3n M\u00e1gico de Chloe - Recursos Educativos<\/title>\r\n \r\n <!-- Estilos CSS Embebidos -->\r\n <style>\r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* VARIABLES CSS (Paleta de colores y fuentes) *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n :root {\r\n --color-primario: #C1A99A; \/* Marr\u00f3n suave *\/\r\n --color-primario-oscuro: #8D766A; \/* Marr\u00f3n oscuro para hover *\/\r\n --color-secundario: #A8D8D3; \/* Menta\/Verde agua *\/\r\n --color-acento: #F3D4D4; \/* Rosa p\u00e1lido *\/\r\n --color-fondo: #FDFBF8; \/* Crema muy claro \/ Hueso *\/\r\n --color-texto: #5C524D; \/* Marr\u00f3n oscuro\/grisaceo *\/\r\n --color-blanco: #FFFFFF;\r\n --fuente-principal: 'Comic Sans MS', cursive, sans-serif; \/* Usamos Comic Sans como pediste, con fallback gen\u00e9rico *\/\r\n --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.06);\r\n --sombra-hover: 0 6px 20px rgba(0, 0, 0, 0.12);\r\n --borde-redondeado: 12px;\r\n --sidebar-width: 300px;\r\n --transition-main: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);\r\n }\r\n\r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* ESTILOS GENERALES Y RESET *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n font-size: 16px;\r\n }\r\n\r\n body {\r\n font-family: var(--fuente-principal);\r\n background-color: var(--color-fondo);\r\n color: var(--color-texto);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n \r\n \/* Contenedor principal que se desplaza con el men\u00fa *\/\r\n .page-wrapper {\r\n position: relative;\r\n left: 0;\r\n background-color: var(--color-fondo);\r\n transition: var(--transition-main);\r\n }\r\n\r\n body.sidebar-open .page-wrapper {\r\n left: var(--sidebar-width);\r\n }\r\n\r\n .container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n img {\r\n max-width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n h1, h2, h3 {\r\n font-weight: 700;\r\n margin-bottom: 0.75em;\r\n }\r\n \r\n h1 { font-size: 2.5rem; }\r\n h2 { font-size: 2rem; color: var(--color-primario); text-align: center; }\r\n \r\n section {\r\n padding: 60px 0;\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* MEN\u00da LATERAL Y BOT\u00d3N HAMBURGUESA *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .hamburger-menu {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n z-index: 1002;\r\n cursor: pointer;\r\n background: var(--color-blanco);\r\n border: none;\r\n border-radius: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: var(--sombra-suave);\r\n padding: 0 20px;\r\n gap: 8px;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .hamburger-menu:hover {\r\n box-shadow: var(--sombra-hover);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .hamburger-menu svg {\r\n width: 28px;\r\n height: 28px;\r\n stroke: var(--color-texto);\r\n }\r\n \r\n .hamburger-menu span {\r\n font-family: var(--fuente-principal);\r\n font-weight: 600;\r\n color: var(--color-texto);\r\n font-size: 1rem;\r\n }\r\n\r\n .sidebar-nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: var(--sidebar-width);\r\n height: 100vh;\r\n background-color: var(--color-blanco);\r\n transform: translateX(-100%);\r\n transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);\r\n z-index: 1001;\r\n display: flex;\r\n flex-direction: column;\r\n border-right: 1px solid #f0f0f0;\r\n overflow-y: auto;\r\n }\r\n \r\n body.sidebar-open .sidebar-nav {\r\n transform: translateX(0);\r\n }\r\n\r\n .sidebar-content {\r\n padding: 80px 25px 25px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n }\r\n\r\n .sidebar-search {\r\n position: relative;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .sidebar-search input {\r\n width: 100%;\r\n padding: 10px 40px 10px 15px;\r\n border: 1px solid #eee;\r\n border-radius: 8px;\r\n font-family: var(--fuente-principal);\r\n font-size: 1rem;\r\n }\r\n\r\n .sidebar-search .search-icon {\r\n position: absolute;\r\n right: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 20px;\r\n height: 20px;\r\n stroke: #ccc;\r\n }\r\n\r\n .sidebar-nav ul {\r\n list-style: none;\r\n flex-grow: 1;\r\n }\r\n\r\n .sidebar-nav a {\r\n display: block;\r\n padding: 15px 5px;\r\n text-decoration: none;\r\n color: var(--color-texto);\r\n font-weight: 600;\r\n transition: color 0.3s ease;\r\n font-size: 1rem;\r\n border-bottom: 1px solid #f0f0f0;\r\n }\r\n\r\n .sidebar-nav a:hover {\r\n color: var(--color-primario);\r\n }\r\n \r\n .login-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n padding: 20px 0;\r\n border-bottom: 1px solid #f0f0f0;\r\n }\r\n\r\n .btn-login, .btn-register {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 12px 5px;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n gap: 8px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .btn-login {\r\n background-color: transparent;\r\n color: var(--color-primario);\r\n border: 2px solid var(--color-acento);\r\n }\r\n\r\n .btn-register {\r\n background-color: var(--color-primario);\r\n color: var(--color-blanco);\r\n border: 2px solid var(--color-primario);\r\n }\r\n \r\n .btn-login:hover {\r\n background-color: var(--color-acento);\r\n color: var(--color-texto);\r\n }\r\n\r\n .btn-register:hover {\r\n background-color: var(--color-primario-oscuro);\r\n border-color: var(--color-primario-oscuro);\r\n }\r\n \r\n .sidebar-cta {\r\n padding: 25px 0 15px;\r\n }\r\n\r\n .sidebar-cta .btn-vip-sidebar {\r\n width: 100%;\r\n text-align: center;\r\n background: none;\r\n border: 2px solid var(--color-secundario);\r\n color: var(--color-secundario);\r\n padding: 12px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n .sidebar-cta .btn-vip-sidebar:hover {\r\n background-color: var(--color-secundario);\r\n color: var(--color-blanco);\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* CABECERA *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .main-header {\r\n padding: 20px 0;\r\n text-align: center;\r\n }\r\n\r\n .header-title {\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n color: var(--color-texto);\r\n }\r\n\r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* SECCI\u00d3N H\u00c9ROE *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .hero {\r\n text-align: center;\r\n padding: 80px 20px;\r\n background: linear-gradient(to bottom, #fdf4e8, var(--color-fondo));\r\n }\r\n\r\n .hero h1 {\r\n color: var(--color-texto);\r\n font-size: 3rem;\r\n }\r\n \r\n .hero p {\r\n font-size: 1.2rem;\r\n margin-bottom: 30px;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .btn {\r\n display: inline-block;\r\n padding: 12px 30px;\r\n background-color: var(--color-primario);\r\n color: var(--color-blanco);\r\n font-weight: 600;\r\n text-decoration: none;\r\n border: none;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 10px rgba(193, 169, 154, 0.4);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n \r\n .btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(193, 169, 154, 0.5);\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* SECCI\u00d3N DE RECURSOS *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .recursos-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n }\r\n \r\n .recurso-card {\r\n background-color: var(--color-blanco);\r\n border-radius: var(--borde-redondeado);\r\n box-shadow: var(--sombra-suave);\r\n overflow: hidden;\r\n text-align: center;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .recurso-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: var(--sombra-hover);\r\n }\r\n\r\n .recurso-card img {\r\n width: 100%;\r\n height: 200px;\r\n object-fit: cover;\r\n }\r\n \r\n .recurso-card-content {\r\n padding: 20px;\r\n }\r\n \r\n .recurso-card h3 {\r\n margin-top: 0;\r\n font-size: 1.25rem;\r\n }\r\n \r\n .recurso-card .btn {\r\n margin-top: 15px;\r\n background-color: var(--color-secundario);\r\n box-shadow: 0 4px 10px rgba(168, 216, 211, 0.5);\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* SECCI\u00d3N DE OPINIONES (AHORA EN VISTA DE REJILLA) *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .testimonial-section {\r\n padding-bottom: 80px;\r\n }\r\n\r\n .testimonial-slider-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n \r\n .testimonial-slider-wrapper {\r\n display: flex;\r\n flex-wrap: wrap; \/* Permite que las tarjetas se reorganicen en varias l\u00edneas *\/\r\n justify-content: center;\r\n gap: 25px; \/* Espacio uniforme entre tarjetas *\/\r\n }\r\n\r\n .testimonial-slide {\r\n flex: 1 1 300px; \/* Base flexible para cada tarjeta *\/\r\n max-width: 350px; \/* Ancho m\u00e1ximo para evitar que se estiren demasiado *\/\r\n padding: 0; \/* El espaciado ahora lo controla el 'gap' del contenedor *\/\r\n }\r\n \r\n .testimonial-card {\r\n background-color: var(--color-blanco);\r\n border-radius: var(--borde-redondeado);\r\n box-shadow: var(--sombra-suave);\r\n padding: 25px;\r\n width: 100%;\r\n height: 100%; \/* Asegura que todas las tarjetas en una fila tengan la misma altura *\/\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid #f0f0f0;\r\n }\r\n \r\n .testimonial-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .avatar {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n \r\n .user-info {\r\n text-align: left;\r\n }\r\n \r\n .timestamp {\r\n font-size: 0.8rem;\r\n color: #aaa;\r\n }\r\n\r\n .star-rating {\r\n color: #FFC700;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .testimonial-card p {\r\n font-size: 0.95rem;\r\n flex-grow: 1;\r\n }\r\n \r\n .testimonial-card .author {\r\n font-weight: 700;\r\n color: var(--color-texto);\r\n font-size: 1rem;\r\n }\r\n\r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* ZONA PARA SHORTCODE DE WORDPRESS *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .shortcode-section {\r\n background-color: var(--color-blanco);\r\n text-align: center;\r\n }\r\n\r\n .shortcode-content {\r\n background-color: var(--color-fondo);\r\n padding: 40px;\r\n border-radius: var(--borde-redondeado);\r\n border: 2px dashed var(--color-acento);\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* FOOTER *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .main-footer {\r\n background-color: var(--color-texto);\r\n color: var(--color-blanco);\r\n padding: 40px 0;\r\n text-align: center;\r\n }\r\n \r\n .btn-vip {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: none;\r\n border: 2px solid var(--color-acento);\r\n color: var(--color-acento);\r\n padding: 10px 25px;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n margin-bottom: 30px;\r\n }\r\n .btn-vip:hover {\r\n background-color: var(--color-acento);\r\n color: var(--color-texto);\r\n }\r\n \r\n .btn-vip svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: currentColor;\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* POP-UP VIP *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .popup-wrapper {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 2000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0s 0.3s;\r\n }\r\n \r\n .popup-wrapper.is-visible {\r\n opacity: 1;\r\n visibility: visible;\r\n transition-delay: 0s;\r\n }\r\n \r\n .popup-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0,0,0,0.5);\r\n cursor: pointer;\r\n }\r\n\r\n .popup-content {\r\n position: relative;\r\n background-color: var(--color-secundario);\r\n color: var(--color-blanco);\r\n padding: 40px;\r\n border-radius: var(--borde-redondeado);\r\n max-width: 500px;\r\n width: 90%;\r\n text-align: center;\r\n transform: scale(0.9);\r\n transition: transform 0.3s ease;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n }\r\n \r\n .popup-wrapper.is-visible .popup-content {\r\n transform: scale(1);\r\n }\r\n\r\n .popup-close {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: var(--color-blanco);\r\n font-size: 1.5rem;\r\n line-height: 1;\r\n }\r\n\r\n .popup-form input {\r\n width: 100%;\r\n padding: 12px;\r\n border: 2px solid var(--color-blanco);\r\n background-color: transparent;\r\n border-radius: 8px;\r\n margin-bottom: 15px;\r\n font-family: var(--fuente-principal);\r\n color: var(--color-blanco);\r\n font-size: 1rem;\r\n }\r\n \r\n .popup-form input::placeholder { color: rgba(255, 255, 255, 0.7); }\r\n \r\n .popup-form .btn {\r\n width: 100%;\r\n background-color: var(--color-blanco);\r\n color: var(--color-secundario);\r\n box-shadow: none;\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* ANIMACIONES DE SCROLL *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n .animate-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n }\r\n\r\n .animate-on-scroll.is-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n \/* -------------------------------------------------------------------------- *\/\r\n \/* RESPONSIVE DESIGN (Media Queries) *\/\r\n \/* -------------------------------------------------------------------------- *\/\r\n @media (max-width: 600px) {\r\n h1 { font-size: 2rem; }\r\n .hero h1 { font-size: 2.5rem; }\r\n h2 { font-size: 1.75rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================================================== -->\r\n <!-- MEN\u00da LATERAL (Sidebar) -->\r\n <!-- ========================================================================== -->\r\n <button class=\"hamburger-menu\" id=\"hamburger-menu\" aria-label=\"Abrir men\u00fa\" aria-expanded=\"false\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" \/>\r\n <\/svg>\r\n <span>Men\u00fa<\/span>\r\n <\/button>\r\n\r\n <nav class=\"sidebar-nav\" id=\"sidebar-nav\" aria-hidden=\"true\">\r\n <div class=\"sidebar-content\">\r\n <div class=\"sidebar-search\">\r\n <input type=\"text\" placeholder=\"Buscador\">\r\n <svg class=\"search-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z\" \/><\/svg>\r\n <\/div>\r\n <ul>\r\n <li><a href=\"#hero\">Inicio<\/a><\/li>\r\n <li><a href=\"#recursos\">Recursos<\/a><\/li>\r\n <li><a href=\"#opiniones\">Opiniones<\/a><\/li>\r\n <li><a href=\"#shortcode-area\">Tienda<\/a><\/li>\r\n <li><a href=\"#footer\">Contacto<\/a><\/li>\r\n <\/ul>\r\n <div class=\"login-buttons\">\r\n <!-- Enlace al \"Mi Cuenta\" de WooCommerce para iniciar sesi\u00f3n -->\r\n <a href=\"\/mi-cuenta\/\" class=\"btn-login\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"\/><polyline points=\"10 17 15 12 10 7\"\/><line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"\/><\/svg>\r\n <span>Acceder<\/span>\r\n <\/a>\r\n <!-- Enlace al \"Mi Cuenta\" de WooCommerce para registrarse -->\r\n <a href=\"\/mi-cuenta\/\" class=\"btn-register\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"8.5\" cy=\"7\" r=\"4\"\/><line x1=\"20\" y1=\"8\" x2=\"20\" y2=\"14\"\/><line x1=\"17\" y1=\"11\" x2=\"23\" y2=\"11\"\/><\/svg>\r\n <span>Registrarse<\/span>\r\n <\/a>\r\n <\/div>\r\n <div class=\"sidebar-cta\">\r\n <button class=\"btn-vip-sidebar\" id=\"sidebar-vip-btn\">\u00a1\u00daNETE A MI LISTA VIP!<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Envoltorio principal de la p\u00e1gina -->\r\n <div class=\"page-wrapper\" id=\"page-wrapper\">\r\n <header class=\"main-header\">\r\n <h1 class=\"header-title\">El Rinc\u00f3n M\u00e1gico de Chloe<\/h1>\r\n <\/header>\r\n\r\n <main>\r\n <!-- ========================================================================== -->\r\n <!-- SECCI\u00d3N H\u00c9ROE -->\r\n <!-- ========================================================================== -->\r\n <section id=\"hero\" class=\"hero\">\r\n <div class=\"container animate-on-scroll\">\r\n <h1>Aprender es una Aventura<\/h1>\r\n <p>Descubre recursos did\u00e1cticos creativos para inspirar a los m\u00e1s peque\u00f1os a explorar, crear y divertirse.<\/p>\r\n <a href=\"#recursos\" class=\"btn\">Explorar Recursos<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========================================================================== -->\r\n <!-- SECCI\u00d3N DE RECURSOS -->\r\n <!-- ========================================================================== -->\r\n <section id=\"recursos\">\r\n <div class=\"container\">\r\n <h2 class=\"animate-on-scroll\">Nuestros Recursos Favoritos<\/h2>\r\n <div class=\"recursos-grid\">\r\n <!-- Tarjeta 1 -->\r\n <div class=\"recurso-card animate-on-scroll\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/A8D8D3\/5C524D?text=Abecedario\" alt=\"Imagen del recurso Abecedario Animal\">\r\n <div class=\"recurso-card-content\">\r\n <h3>Abecedario Animal<\/h3>\r\n <p>Un divertido abecedario para aprender las letras con animales.<\/p>\r\n <a href=\"#\" class=\"btn\">Ver m\u00e1s<\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- Tarjeta 2 -->\r\n <div class=\"recurso-card animate-on-scroll\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F3D4D4\/5C524D?text=Formas\" alt=\"Imagen del recurso Formas M\u00e1gicas\">\r\n <div class=\"recurso-card-content\">\r\n <h3>Formas M\u00e1gicas<\/h3>\r\n <p>Juegos para identificar y dibujar formas geom\u00e9tricas.<\/p>\r\n <a href=\"#\" class=\"btn\">Ver m\u00e1s<\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- Tarjeta 3 -->\r\n <div class=\"recurso-card animate-on-scroll\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/C1A99A\/FFFFFF?text=N%C3%BAmeros\" alt=\"Imagen del recurso N\u00fameros Divertidos\">\r\n <div class=\"recurso-card-content\">\r\n <h3>N\u00fameros Divertidos<\/h3>\r\n <p>Actividades para contar, sumar y restar jugando.<\/p>\r\n <a href=\"#\" class=\"btn\">Ver m\u00e1s<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n <!-- ========================================================================== -->\r\n <!-- SECCI\u00d3N DE OPINIONES (TESTIMONIOS) -->\r\n <!-- ========================================================================== -->\r\n <section id=\"opiniones\" class=\"testimonial-section\">\r\n <div class=\"container\">\r\n <h2 class=\"animate-on-scroll\">Lo que dicen de nosotros<\/h2>\r\n <div class=\"testimonial-slider-container animate-on-scroll\">\r\n <div class=\"testimonial-slider\">\r\n <div class=\"testimonial-slider-wrapper\">\r\n <!-- Slide 1 -->\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-header\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/60x60\/A8D8D3\/FFFFFF?text=LG\" alt=\"Avatar de Laura G.\" class=\"avatar\">\r\n <div class=\"user-info\">\r\n <span class=\"author\">Laura G.<\/span>\r\n <span class=\"timestamp\">hace 2 semanas<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"star-rating\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>\"\u00a1Absolutamente maravilloso! A mi hijo le encantan las actividades. Son creativas y muy educativas.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Slide 2 -->\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-header\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/60x60\/F3D4D4\/FFFFFF?text=MP\" alt=\"Avatar de Marcos P.\" class=\"avatar\">\r\n <div class=\"user-info\">\r\n <span class=\"author\">Marcos P.<\/span>\r\n <span class=\"timestamp\">hace 1 mes<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"star-rating\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>\"La calidad de los materiales es fant\u00e1stica. Se nota que est\u00e1n hechos con mucho cari\u00f1o.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Slide 3 -->\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-header\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/60x60\/C1A99A\/FFFFFF?text=SR\" alt=\"Avatar de Sof\u00eda R.\" class=\"avatar\">\r\n <div class=\"user-info\">\r\n <span class=\"author\">Sof\u00eda R.<\/span>\r\n <span class=\"timestamp\">hace 1 mes<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"star-rating\">\u2605\u2605\u2605\u2605\u2606<\/div>\r\n <p>\"\u00a1Un descubrimiento genial! Los dise\u00f1os son preciosos y las ideas s\u00faper originales.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Slide 4 (Extra) -->\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-header\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/60x60\/A8D8D3\/FFFFFF?text=AF\" alt=\"Avatar de Ana F.\" class=\"avatar\">\r\n <div class=\"user-info\">\r\n <span class=\"author\">Ana F.<\/span>\r\n <span class=\"timestamp\">hace 3 meses<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"star-rating\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>\"Me encanta la atenci\u00f3n al detalle. Se nota el trabajo y la dedicaci\u00f3n que hay detr\u00e1s de cada material.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Slide 5 (Extra) -->\r\n <div class=\"testimonial-slide\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-header\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/60x60\/F3D4D4\/FFFFFF?text=CM\" alt=\"Avatar de Carlos M.\" class=\"avatar\">\r\n <div class=\"user-info\">\r\n <span class=\"author\">Carlos M.<\/span>\r\n <span class=\"timestamp\">hace 4 meses<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"star-rating\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>\"Compr\u00e9 el pack de n\u00fameros y ha sido un \u00e9xito total. Mi hija aprende mientras juega y se divierte.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========================================================================== -->\r\n <!-- SECCI\u00d3N PARA SHORTCODE DE WORDPRESS (ej. WooCommerce) -->\r\n <!-- ========================================================================== -->\r\n <section id=\"shortcode-area\" class=\"shortcode-section\">\r\n <div class=\"container\">\r\n <h2 class=\"animate-on-scroll\">Nuestra Tienda<\/h2>\r\n <div class=\"shortcode-content animate-on-scroll\">\r\n <!-- \r\n INSTRUCCI\u00d3N PARA WORDPRESS: \r\n Reemplaza el siguiente p\u00e1rrafo con tu shortcode, \r\n por ejemplo: [products columns=\"3\" limit=\"6\"] \r\n -->\r\n <p><strong>[aqui_va_tu_shortcode_de_wordpress]<\/strong><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <!-- ========================================================================== -->\r\n <!-- PIE DE P\u00c1GINA -->\r\n <!-- ========================================================================== -->\r\n <footer id=\"footer\" class=\"main-footer\">\r\n <div class=\"container footer-content\">\r\n <button class=\"btn-vip\" id=\"open-popup-btn\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19.6 8.3c.2.5.3 1 .3 1.6v.1h-7.7c-.2-2.3-2.1-4.1-4.4-4.2-2-.1-3.8 1.2-4.6 3-.1.2-.2.4-.2.6h16.6zm-16.5 7.5c0 .1.1.2.1.3c.4 1.3 1.5 2.2 2.9 2.2s2.5-.9 2.9-2.2c.1-.3 0-.6-.2-.8-.2-.2-.6-.2-.8 0-.2.2-.4.5-.4.8 0 .4-.4.8-.8.8s-.8-.4-.8-.8c0-.3-.1-.5-.3-.7-.2-.2-.5-.2-.7 0s-.2.5 0 .7c.2.4.4.8.4 1.2 0 .9-.7 1.6-1.6 1.6s-1.6-.7-1.6-1.6c0-.4.2-.8.4-1.2.2-.2.2-.5 0-.7s-.5-.2-.7 0c-.2.2-.3.4-.3.7zm11.5-3.5H3.1c-.2 0-.4.1-.5.3-.2.3-.2.7 0 1 .1.1.2.2.4.2h14.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5zM20 9.9H3.1c-.1 0-.1 0-.2.1c-.4.4-.4 1 0 1.4l.9.9H2.8c-.3 0-.5.2-.5.5v2.5c0 .3.2.5.5.5h1.2c.1 2.3 2 4.1 4.3 4.1s4.2-1.8 4.3-4.1h8.6c.3 0 .5-.2.5-.5v-4.5c0-.6-.2-1.3-.6-1-8z\"\/><\/svg>\r\n <span>\u00a1\u00daNETE A LA LISTA VIP!<\/span>\r\n <\/button>\r\n <p>© 2025 El Rinc\u00f3n M\u00e1gico de Chloe. Todos los derechos reservados.<\/p>\r\n <\/div>\r\n <\/footer>\r\n <\/div> <!-- Fin de .page-wrapper -->\r\n\r\n <!-- ========================================================================== -->\r\n <!-- POP-UP VIP -->\r\n <!-- ========================================================================== -->\r\n <div class=\"popup-wrapper\" id=\"vip-popup\">\r\n <div class=\"popup-overlay\" id=\"popup-overlay\"><\/div>\r\n <div class=\"popup-content\">\r\n <button class=\"popup-close\" id=\"popup-close\" aria-label=\"Cerrar pop-up\">×<\/button>\r\n <h3>\u00a1\u00danete a la Lista VIP!<\/h3>\r\n <p>Recibe productos exclusivos, primicias de nuevas colecciones y consejos originales.<\/p>\r\n <form class=\"popup-form\">\r\n <input type=\"text\" placeholder=\"Tu nombre\" required>\r\n <input type=\"email\" placeholder=\"Tu mejor email ;)\" required>\r\n <button type=\"submit\" class=\"btn\">QUIERO ESTAR EN LA LISTA VIP<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ========================================================================== -->\r\n <!-- JAVASCRIPT EMBEBIDO -->\r\n <!-- ========================================================================== -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n \/\/ L\u00d3GICA DEL MEN\u00da LATERAL (SIDEBAR)\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n const hamburgerBtn = document.getElementById('hamburger-menu');\r\n const sidebar = document.getElementById('sidebar-nav');\r\n const navLinks = sidebar.querySelectorAll('a');\r\n\r\n function toggleSidebar() {\r\n const isOpen = document.body.classList.toggle('sidebar-open');\r\n hamburgerBtn.setAttribute('aria-expanded', isOpen);\r\n sidebar.setAttribute('aria-hidden', !isOpen);\r\n }\r\n\r\n hamburgerBtn.addEventListener('click', toggleSidebar);\r\n \r\n navLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n if (document.body.classList.contains('sidebar-open')) {\r\n toggleSidebar();\r\n }\r\n });\r\n });\r\n\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n \/\/ L\u00d3GICA DEL POP-UP VIP\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n const popup = document.getElementById('vip-popup');\r\n const openPopupButtons = [document.getElementById('open-popup-btn'), document.getElementById('sidebar-vip-btn')];\r\n const closePopupBtn = document.getElementById('popup-close');\r\n const popupOverlay = document.getElementById('popup-overlay');\r\n\r\n const openPopup = () => popup.classList.add('is-visible');\r\n const closePopup = () => popup.classList.remove('is-visible');\r\n\r\n openPopupButtons.forEach(btn => btn.addEventListener('click', openPopup));\r\n closePopupBtn.addEventListener('click', closePopup);\r\n popupOverlay.addEventListener('click', closePopup);\r\n \r\n \/\/ Opcional: Abrir el pop-up despu\u00e9s de 5 segundos\r\n setTimeout(openPopup, 5000);\r\n\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n \/\/ L\u00d3GICA PARA ANIMACIONES AL HACER SCROLL\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n const animatedElements = document.querySelectorAll('.animate-on-scroll');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n animatedElements.forEach(el => observer.observe(el));\r\n\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n \/\/ (SE HA ELIMINADO LA L\u00d3GICA DEL SLIDER DE OPINIONES)\r\n \/\/ -------------------------------------------------------------------------- \/\/\r\n \r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>El Rinc\u00f3n M\u00e1gico de Chloe – Recursos Educativos Men\u00fa Inicio Recursos Opiniones Tienda Contacto Acceder Registrarse \u00a1\u00daNETE A MI LISTA VIP! El Rinc\u00f3n M\u00e1gico de Chloe Aprender es una Aventura Descubre recursos did\u00e1cticos creativos para inspirar a los m\u00e1s peque\u00f1os a explorar, crear y divertirse. Explorar Recursos Nuestros Recursos Favoritos Abecedario Animal Un divertido abecedario […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":16,"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/94"}],"wp:attachment":[{"href":"https:\/\/objective-napier.82-165-173-49.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}