{"id":11861,"date":"2026-02-18T11:35:34","date_gmt":"2026-02-18T11:35:34","guid":{"rendered":"https:\/\/bodas.duarteviews.com\/?page_id=11861"},"modified":"2026-03-30T16:49:26","modified_gmt":"2026-03-30T16:49:26","slug":"diario","status":"publish","type":"page","link":"https:\/\/duarteviews.com\/bodas\/diario\/","title":{"rendered":"Blog"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\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 Diario | Duarte Views | Fotograf\u00eda de Bodas Cinematogr\u00e1fica<\/title>\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@200;300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- FontAwesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n <!-- AOS Animation -->\r\n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'stone-50': '#faf9f6', \/* Off-white luxury paper color *\/\r\n 'black-rich': '#111111',\r\n 'gold-muted': '#c5a059',\r\n },\r\n fontFamily: {\r\n sans: ['Montserrat', 'sans-serif'],\r\n serif: ['Cormorant Garamond', 'serif'],\r\n },\r\n animation: {\r\n 'spin-slow': 'spin 12s linear infinite',\r\n 'fade-in': 'fadeIn 1.5s ease-out forwards',\r\n 'zoom-fade': 'zoomFade 8s ease-out infinite alternate',\r\n 'marquee': 'marquee 40s linear infinite', \r\n },\r\n keyframes: {\r\n fadeIn: {\r\n '0%': { opacity: '0', transform: 'translateY(20px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n },\r\n zoomFade: {\r\n '0%': { transform: 'scale(1)' },\r\n '100%': { transform: 'scale(1.1)' },\r\n },\r\n marquee: { \r\n '0%': { transform: 'translate3d(0, 0, 0)' },\r\n '100%': { transform: 'translate3d(-50%, 0, 0)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* --- LUXURY TWEAKS --- *\/\r\n body {\r\n background-color: #faf9f6;\r\n cursor: none; \/* Hide default cursor *\/\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Custom Cursor - EXTREME PERFORMANCE (GPU Accelerated) *\/\r\n .cursor-dot,\r\n .cursor-outline {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n z-index: 9999;\r\n pointer-events: none;\r\n will-change: transform;\r\n transform: translateZ(0); \/* Force isolated GPU layer *\/\r\n }\r\n\r\n .cursor-dot {\r\n width: 8px;\r\n height: 8px;\r\n background-color: #111;\r\n }\r\n\r\n .cursor-outline {\r\n width: 40px;\r\n height: 40px;\r\n border: 1px solid rgba(17, 17, 17, 0.5);\r\n transition: width 0.2s, height 0.2s, background-color 0.2s;\r\n }\r\n\r\n \/* Hover state for cursor *\/\r\n body.hovering .cursor-outline {\r\n width: 70px;\r\n height: 70px;\r\n background-color: rgba(197, 160, 89, 0.3); \/* Transparent gold instead of CPU-heavy invert *\/\r\n border-color: transparent;\r\n }\r\n\r\n \/* Film Grain Overlay - OPTIMIZED FOR PERFORMANCE *\/\r\n .grain-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 9000;\r\n opacity: 0.04;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='1' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n background-repeat: repeat;\r\n background-size: 200px 200px;\r\n transform: translateZ(0);\r\n }\r\n\r\n \/* Typography Utilities *\/\r\n .text-outline {\r\n -webkit-text-stroke: 1px rgba(255,255,255,0.3);\r\n color: transparent;\r\n }\r\n\r\n \/* Smooth Scroll Setup (Lenis) *\/\r\n html.lenis {\r\n height: auto;\r\n }\r\n .lenis.lenis-smooth {\r\n scroll-behavior: auto;\r\n }\r\n .lenis.lenis-smooth [data-lenis-prevent] {\r\n overscroll-behavior: contain;\r\n }\r\n .lenis.lenis-stopped {\r\n overflow: hidden;\r\n }\r\n\r\n \/* Button Hover Effect *\/\r\n .btn-link {\r\n position: relative;\r\n }\r\n .btn-link::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 1px;\r\n bottom: -4px;\r\n left: 0;\r\n background-color: currentColor;\r\n transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n .btn-link:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* Selection Color *\/\r\n ::selection {\r\n background: #111;\r\n color: #fff;\r\n }\r\n\r\n \/* WhatsApp Pulsing Effect when idle *\/\r\n @keyframes subtlePulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4); }\r\n 70% { box-shadow: 0 0 0 10px rgba(197, 160, 89, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }\r\n }\r\n .wa-pulse {\r\n animation: subtlePulse 2s infinite;\r\n }\r\n\r\n \/* Aspect Ratio Containers for Grid *\/\r\n .bp-grid-container {\r\n position: relative !important;\r\n width: 100% !important;\r\n overflow: hidden !important;\r\n display: block !important;\r\n }\r\n .bp-portrait {\r\n padding-bottom: 133.33% !important; \/* Aspecto 3:4 *\/\r\n }\r\n .bp-landscape {\r\n padding-bottom: 75% !important; \/* Aspecto 4:3 *\/\r\n }\r\n .bp-square {\r\n padding-bottom: 100% !important; \/* Aspecto 1:1 *\/\r\n }\r\n .bp-grid-container img {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n max-width: none !important;\r\n object-fit: cover !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: none !important;\r\n }\r\n \r\n \/* Spinner de Carga *\/\r\n .loader-spinner {\r\n border: 3px solid rgba(197, 160, 89, 0.2);\r\n border-top: 3px solid #c5a059;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-stone-50\">\r\n\r\n <!-- Custom Cursor Elements -->\r\n <div class=\"cursor-dot hidden md:block\"><\/div>\r\n <div class=\"cursor-outline hidden md:block\"><\/div>\r\n\r\n <!-- Film Grain -->\r\n <div class=\"grain-overlay\"><\/div>\r\n\r\n <!-- Navigation -->\r\n <nav class=\"fixed w-full z-50 py-10 px-6 md:px-12 transition-all duration-500 text-white drop-shadow-md\" id=\"navbar\">\r\n <div class=\"flex justify-between items-center relative w-full h-[40px] md:h-auto\">\r\n \r\n <!-- Left Desktop Menu (Home, Blog) -->\r\n <div class=\"hidden md:flex space-x-12 text-xs tracking-[0.2em] font-medium flex-1 justify-start\">\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/\" class=\"hoverable btn-link\">HOME<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/diario\/\" class=\"hoverable btn-link text-gold-muted border-b border-gold-muted pb-1\">BLOG<\/a>\r\n <\/div>\r\n\r\n <!-- Logo Image -->\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/\" class=\"hoverable z-50 absolute left-0 md:left-1\/2 top-1\/2 -translate-y-1\/2 translate-x-0 md:-translate-x-1\/2 w-32 md:w-44 block\" id=\"nav-logo\">\r\n <img decoding=\"async\" id=\"logo-img\" src=\"https:\/\/duarteviews.com\/bodas\/wp-content\/uploads\/2026\/02\/logo-letras-blanco.png\" alt=\"Duarte Views\" class=\"w-full h-auto object-contain transition-all duration-300\" style=\"max-height: 45px !important;\">\r\n <\/a>\r\n\r\n <!-- Right Desktop Menu (Bodas, Sobre nosotros, Contacto) -->\r\n <div class=\"hidden md:flex space-x-12 text-xs tracking-[0.2em] font-medium flex-1 justify-end\">\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/galeriadebodas\/\" class=\"hoverable btn-link\">BODAS<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/nosotros\/\" class=\"hoverable btn-link\">SOBRE NOSOTROS<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/contactanos\/\" class=\"hoverable btn-link\">CONTACTO<\/a>\r\n <\/div>\r\n\r\n <!-- Mobile Menu Toggle -->\r\n <button class=\"md:hidden text-white hoverable z-50 text-xs uppercase tracking-widest absolute right-0\" id=\"mobile-toggle\" style=\"background: transparent; border: none; padding: 0;\">\r\n Men\u00fa\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Mobile Overlay Menu -->\r\n <div id=\"mobile-menu\" class=\"fixed inset-0 bg-[#111] z-40 transform translate-x-full transition-transform duration-700 cubic-bezier(0.7,0,0.3,1) flex flex-col justify-center items-center text-white\">\r\n <div class=\"flex flex-col space-y-8 text-center\">\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/\" class=\"text-4xl font-serif italic hover:text-gray-400 transition-colors mobile-link\">Home<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/diario\/\" class=\"text-4xl font-serif italic text-gold-muted hover:text-gray-400 transition-colors mobile-link\">Blog<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/galeriadebodas\/\" class=\"text-4xl font-serif italic hover:text-gray-400 transition-colors mobile-link\">Bodas<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/nosotros\/\" class=\"text-4xl font-serif italic hover:text-gray-400 transition-colors mobile-link\">Sobre nosotros<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/contactanos\/\" class=\"text-4xl font-serif italic hover:text-gray-400 transition-colors mobile-link\">Contacto<\/a>\r\n <\/div>\r\n <div class=\"absolute bottom-10 text-xs tracking-widest text-gray-500\">\r\n © 2026 DUARTE VIEWS\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BLOG HERO SECTION -->\r\n <header class=\"relative h-[65vh] md:h-[75vh] w-full overflow-hidden flex items-center justify-center\">\r\n <!-- Static Background for Blog -->\r\n <div class=\"absolute inset-0 bg-cover bg-center bg-fixed transform scale-105\" style=\"background-image: url('https:\/\/duarteviews.com\/bodas\/wp-content\/uploads\/2025\/11\/DUARTEVIEWS-NEREADIEGO-4OCT25-BODA-759.jpg');\"><\/div>\r\n \r\n <!-- Darker overlay -->\r\n <div class=\"absolute inset-0 bg-black\/50 z-10\"><\/div>\r\n\r\n <!-- Hero Content -->\r\n <div class=\"relative z-20 text-center text-white px-4 mt-16\">\r\n <h1 class=\"text-6xl md:text-8xl lg:text-9xl font-serif italic leading-none drop-shadow-lg !text-white\" data-aos=\"fade-up\">\r\n El Diario\r\n <\/h1>\r\n <p class=\"text-xs md:text-sm tracking-[0.4em] mt-6 uppercase drop-shadow-md !text-white opacity-80\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n Historias, Inspiraci\u00f3n y Detalles\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- BLOG CONTENT SECTION -->\r\n <section class=\"py-20 px-6 md:px-12 bg-stone-50 min-h-screen\">\r\n <div class=\"max-w-[1400px] mx-auto\">\r\n \r\n <!-- Dynamic Category Filter -->\r\n <div id=\"category-filters\" class=\"flex flex-wrap justify-center gap-8 md:gap-16 mb-24 text-xs uppercase tracking-widest text-gray-400 border-b border-gray-200 pb-8\" data-aos=\"fade-up\">\r\n <!-- Se llenar\u00e1 autom\u00e1ticamente con las categor\u00edas del WP -->\r\n <a href=\"#\" data-filter=\"todas\" class=\"filter-btn text-black-rich border-b border-black pb-1 hoverable\">Todas<\/a>\r\n <\/div>\r\n\r\n <!-- CONTENEDOR ART\u00cdCULO DESTACADO (Din\u00e1mico) -->\r\n <div id=\"featured-post-container\">\r\n <div class=\"text-center py-20 text-gray-400 font-serif italic flex flex-col items-center gap-4\">\r\n <div class=\"loader-spinner\"><\/div>\r\n Revelando historias...\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CONTENEDOR EDITORIAL GRID (Din\u00e1mico) -->\r\n <div id=\"articles-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-y-24 gap-x-16\">\r\n <!-- Los posts cargar\u00e1n aqu\u00ed -->\r\n <\/div>\r\n\r\n <!-- Pagination \/ Load More -->\r\n <div class=\"text-center mt-32 border-t border-gray-200 pt-16\">\r\n <a href=\"#\" id=\"load-more-btn\" class=\"hidden inline-block text-sm uppercase tracking-[0.3em] border border-black px-12 py-4 hover:bg-black hover:text-white transition-all duration-500 hoverable\" style=\"border: 1px solid #111111 !important;\">\r\n Cargar M\u00e1s Historias\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER (Minimalist) -->\r\n <footer id=\"contact\" class=\"bg-black text-white pt-32 pb-12 px-6\">\r\n <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-stretch\">\r\n \r\n <div class=\"mb-16 md:mb-0 flex flex-col justify-end items-start\">\r\n <h2 class=\"text-6xl md:text-8xl font-serif italic mb-8 text-white\">Creemos<br>Magia Juntos<\/h2>\r\n <div class=\"flex flex-col gap-4 mb-8\">\r\n <a href=\"mailto:info@duarteviews.com\" class=\"text-xl md:text-2xl border-b border-gray-700 text-white hover:border-white hover:text-gray-300 transition-all pb-2 hoverable w-fit\">info@duarteviews.com<\/a>\r\n <a href=\"https:\/\/wa.me\/34679180318\" target=\"_blank\" class=\"text-xl md:text-2xl border-b border-gray-700 text-white hover:border-white hover:text-gray-300 transition-all pb-2 hoverable w-fit\">+34 679 18 03 18<\/a>\r\n <span class=\"text-sm md:text-base text-gray-400 tracking-widest uppercase mt-2\">Torrej\u00f3n de Ardoz (Madrid)<\/span>\r\n <\/div>\r\n \r\n <!-- Men\u00fa del Footer -->\r\n <div class=\"flex flex-wrap gap-x-8 gap-y-4 mt-4 text-xs tracking-[0.2em] font-medium text-white opacity-90\">\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/\" class=\"hoverable btn-link\">HOME<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/diario\/\" class=\"hoverable btn-link\">BLOG<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/galeriadebodas\/\" class=\"hoverable btn-link\">BODAS<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/nosotros\/\" class=\"hoverable btn-link\">SOBRE NOSOTROS<\/a>\r\n <a href=\"https:\/\/duarteviews.com\/bodas\/contactanos\/\" class=\"hoverable btn-link\">CONTACTO<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col justify-between items-start md:items-end\">\r\n <img decoding=\"async\" src=\"https:\/\/duarteviews.com\/bodas\/wp-content\/uploads\/2026\/02\/logo.png\" alt=\"Duarte Views\" class=\"w-32 md:w-48 h-auto object-contain mb-16 md:mb-0 hoverable block\" style=\"max-height: 120px !important;\">\r\n \r\n <div class=\"flex flex-col justify-end items-start md:items-end space-y-6 mt-auto\">\r\n <div class=\"flex flex-wrap gap-6\">\r\n <a href=\"https:\/\/www.facebook.com\/duarteviews\" target=\"_blank\" class=\"hoverable flex items-center gap-2 text-sm uppercase tracking-widest text-white hover:text-gray-400\">\r\n <i class=\"fab fa-facebook-f text-base\"><\/i> Facebook\r\n <\/a>\r\n <a href=\"https:\/\/x.com\/duarteviews\" target=\"_blank\" class=\"hoverable flex items-center gap-2 text-sm uppercase tracking-widest text-white hover:text-gray-400\">\r\n <i class=\"fab fa-x-twitter text-base\"><\/i> X\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/duarteviews\" target=\"_blank\" class=\"hoverable flex items-center gap-2 text-sm uppercase tracking-widest text-white hover:text-gray-400\">\r\n <i class=\"fab fa-instagram text-base\"><\/i> Instagram\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-white opacity-70 text-[10px] uppercase tracking-widest text-right\">\r\n <p>© 2026 Duarte Views Fotograf\u00eda<\/p>\r\n <p class=\"mt-1\">Todos los derechos reservados.<\/p>\r\n <p class=\"mt-2\">Dise\u00f1ado con Pasi\u00f3n<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- STYLED FLOATING WHATSAPP BUTTON -->\r\n <a href=\"https:\/\/wa.me\/34679180318\" target=\"_blank\" class=\"fixed bottom-8 right-8 z-[90] group hoverable\">\r\n <span class=\"absolute right-full mr-4 top-1\/2 -translate-y-1\/2 text-black-rich font-serif italic text-lg bg-stone-50 px-4 py-1 rounded-sm opacity-0 group-hover:opacity-100 transition-all duration-500 translate-x-4 group-hover:translate-x-0 pointer-events-none whitespace-nowrap shadow-lg border border-black\/5\">\r\n Consultar Fecha\r\n <\/span>\r\n <div class=\"w-14 h-14 md:w-16 md:h-16 bg-black-rich text-stone-50 rounded-full flex items-center justify-center shadow-2xl transition-all duration-500 group-hover:bg-gold-muted group-hover:scale-110 border border-white\/10 wa-pulse\">\r\n <i class=\"fab fa-whatsapp text-2xl md:text-3xl group-hover:rotate-12 transition-transform duration-500\"><\/i>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- SCRIPTS -->\r\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@1.0.29\/bundled\/lenis.min.js\"><\/script> \r\n\r\n <script>\r\n \/\/ 1. AOS INITIALIZATION\r\n window.addEventListener('load', () => {\r\n AOS.init({\r\n once: true,\r\n duration: 1000,\r\n offset: 50,\r\n easing: 'ease-out-cubic'\r\n });\r\n });\r\n\r\n \/\/ 2. SMOOTH SCROLL (Lenis)\r\n const lenis = new Lenis({\r\n duration: 1.2,\r\n easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), \r\n direction: 'vertical',\r\n gestureDirection: 'vertical',\r\n smooth: true,\r\n mouseMultiplier: 1,\r\n smoothTouch: false,\r\n touchMultiplier: 2,\r\n });\r\n\r\n \/\/ 3. CUSTOM CURSOR LOGIC (FULLY OPTIMIZED FOR 60FPS)\r\n const cursorDot = document.querySelector('.cursor-dot');\r\n const cursorOutline = document.querySelector('.cursor-outline');\r\n \r\n let mouseX = -100;\r\n let mouseY = -100;\r\n let outlineX = -100;\r\n let outlineY = -100;\r\n\r\n window.addEventListener('mousemove', (e) => {\r\n mouseX = e.clientX;\r\n mouseY = e.clientY;\r\n });\r\n\r\n const updateHoverables = () => {\r\n const hoverables = document.querySelectorAll('.hoverable');\r\n hoverables.forEach(el => {\r\n \/\/ Eliminar listeners viejos si existen para evitar duplicados\r\n el.removeEventListener('mouseenter', addHoverState);\r\n el.removeEventListener('mouseleave', removeHoverState);\r\n \r\n el.addEventListener('mouseenter', addHoverState);\r\n el.addEventListener('mouseleave', removeHoverState);\r\n });\r\n };\r\n const addHoverState = () => document.body.classList.add('hovering');\r\n const removeHoverState = () => document.body.classList.remove('hovering');\r\n updateHoverables();\r\n\r\n \/\/ MERGED RAF LOOP: Lenis Scroll + Smooth Cursor\r\n function raf(time) {\r\n lenis.raf(time);\r\n \r\n \/\/ Cursor Interpolation Logic\r\n outlineX += (mouseX - outlineX) * 0.25;\r\n outlineY += (mouseY - outlineY) * 0.25;\r\n\r\n \/\/ GPU Accelerated Transforms instead of Top\/Left recalculations\r\n cursorDot.style.transform = `translate3d(calc(${mouseX}px - 50%), calc(${mouseY}px - 50%), 0)`;\r\n cursorOutline.style.transform = `translate3d(calc(${outlineX}px - 50%), calc(${outlineY}px - 50%), 0)`;\r\n\r\n requestAnimationFrame(raf);\r\n }\r\n requestAnimationFrame(raf);\r\n\r\n \/\/ 4. MOBILE MENU\r\n const mobileToggle = document.getElementById('mobile-toggle');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n const mobileLinks = document.querySelectorAll('.mobile-link');\r\n let isMenuOpen = false;\r\n\r\n mobileToggle.addEventListener('click', () => {\r\n isMenuOpen = !isMenuOpen;\r\n if (isMenuOpen) {\r\n mobileMenu.classList.remove('translate-x-full');\r\n mobileToggle.textContent = 'Cerrar';\r\n lenis.stop();\r\n } else {\r\n mobileMenu.classList.add('translate-x-full');\r\n mobileToggle.textContent = 'Men\u00fa';\r\n lenis.start();\r\n }\r\n });\r\n\r\n mobileLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n isMenuOpen = false;\r\n mobileMenu.classList.add('translate-x-full');\r\n mobileToggle.textContent = 'Men\u00fa';\r\n lenis.start();\r\n });\r\n });\r\n\r\n \/\/ 5. NAVBAR SCROLL EFFECT (OPTIMIZED)\r\n const navbar = document.getElementById('navbar');\r\n const logoText = document.getElementById('nav-logo');\r\n const logoImg = document.getElementById('logo-img');\r\n const menuButton = document.getElementById('mobile-toggle');\r\n let isScrolled = false;\r\n\r\n window.addEventListener('scroll', () => {\r\n const currentScrolled = window.scrollY > 50;\r\n if (currentScrolled !== isScrolled) {\r\n isScrolled = currentScrolled;\r\n if (isScrolled) {\r\n navbar.classList.remove('text-white', 'py-10', 'drop-shadow-md');\r\n navbar.classList.add('bg-stone-50', 'text-black-rich', 'shadow-sm', 'py-6');\r\n logoText.classList.remove('text-white');\r\n logoText.classList.add('text-black-rich');\r\n menuButton.classList.remove('text-white');\r\n menuButton.classList.add('text-black-rich');\r\n logoImg.src = 'https:\/\/duarteviews.com\/bodas\/wp-content\/uploads\/2026\/02\/logo-lettras.png';\r\n } else {\r\n navbar.classList.add('text-white', 'py-10', 'drop-shadow-md');\r\n navbar.classList.remove('bg-stone-50', 'text-black-rich', 'shadow-sm', 'py-6');\r\n logoText.classList.add('text-white');\r\n logoText.classList.remove('text-black-rich');\r\n menuButton.classList.add('text-white');\r\n menuButton.classList.remove('text-black-rich');\r\n logoImg.src = 'https:\/\/duarteviews.com\/bodas\/wp-content\/uploads\/2026\/02\/logo-letras-blanco.png';\r\n }\r\n }\r\n });\r\n\r\n \/\/ ==========================================\r\n \/\/ 6. WORDPRESS REST API INTEGRATION\r\n \/\/ ==========================================\r\n const API_BASE_URL = 'https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2';\r\n const POSTS_PER_PAGE = 5; \/\/ 1 destacado + 4 en grid por defecto\r\n let currentPage = 1;\r\n let currentFilter = 'todas';\r\n let totalPages = 1;\r\n\r\n const loadMoreBtn = document.getElementById('load-more-btn');\r\n const articlesGrid = document.getElementById('articles-grid');\r\n const filtersContainer = document.getElementById('category-filters');\r\n const featuredContainer = document.getElementById('featured-post-container');\r\n\r\n \/\/ Helper para extraer texto limpio del extracto de WP\r\n function stripHtml(html) {\r\n let tmp = document.createElement(\"DIV\");\r\n tmp.innerHTML = html;\r\n return tmp.textContent || tmp.innerText || \"\";\r\n }\r\n\r\n \/\/ Extraer categor\u00edas din\u00e1micamente de los posts cargados\r\n function extractCategories(posts) {\r\n const categoriesMap = new Map();\r\n posts.forEach(post => {\r\n const terms = post._embedded?.['wp:term']?.[0];\r\n if (terms) {\r\n terms.forEach(cat => {\r\n if(cat.slug !== 'uncategorized') {\r\n categoriesMap.set(cat.slug, cat.name);\r\n }\r\n });\r\n }\r\n });\r\n return categoriesMap;\r\n }\r\n\r\n \/\/ Construir la botonera de filtros basada en las categor\u00edas reales de WordPress\r\n function renderFilters(categoriesMap) {\r\n let html = `<a href=\"#\" data-filter=\"todas\" class=\"filter-btn text-black-rich border-b border-black pb-1 hoverable\">Todas<\/a>`;\r\n categoriesMap.forEach((name, slug) => {\r\n html += `<a href=\"#\" data-filter=\"${slug}\" class=\"filter-btn hover:text-black-rich transition-colors hoverable\">${name}<\/a>`;\r\n });\r\n filtersContainer.innerHTML = html;\r\n attachFilterEvents();\r\n updateHoverables(); \/\/ Actualizar cursores para nuevos botones\r\n }\r\n\r\n \/\/ Carga inicial\r\n async function loadWPPosts() {\r\n try {\r\n const response = await fetch(`${API_BASE_URL}\/posts?_embed&per_page=${POSTS_PER_PAGE}&page=1`);\r\n if (!response.ok) throw new Error('Error en la conexi\u00f3n con WordPress');\r\n \r\n totalPages = parseInt(response.headers.get('X-WP-TotalPages')) || 1;\r\n const posts = await response.json();\r\n\r\n if(posts.length === 0) {\r\n featuredContainer.innerHTML = '<p class=\"text-center font-serif text-2xl\">A\u00fan no hay historias publicadas.<\/p>';\r\n return;\r\n }\r\n\r\n \/\/ Generar filtros basados en las categor\u00edas obtenidas\r\n const categories = extractCategories(posts);\r\n renderFilters(categories);\r\n\r\n \/\/ El primer post es el destacado\r\n renderFeaturedPost(posts[0]);\r\n \r\n \/\/ Los siguientes van al Grid\r\n renderGridPosts(posts.slice(1), false);\r\n\r\n \/\/ Mostrar bot\u00f3n cargar m\u00e1s si hay m\u00e1s p\u00e1ginas\r\n if (currentPage < totalPages) {\r\n loadMoreBtn.classList.remove('hidden');\r\n }\r\n\r\n \/\/ Recargar animaciones\r\n setTimeout(() => AOS.refresh(), 100);\r\n\r\n } catch (error) {\r\n console.error(\"Error obteniendo art\u00edculos:\", error);\r\n featuredContainer.innerHTML = '<p class=\"text-center font-serif text-2xl text-red-900\">Hubo un problema cargando el diario. Por favor recarga la p\u00e1gina.<\/p>';\r\n }\r\n }\r\n\r\n \/\/ HTML del post Destacado (el \u00faltimo publicado)\r\n function renderFeaturedPost(post) {\r\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/via.placeholder.com\/1200x800?text=Duarte+Views';\r\n const title = post.title.rendered;\r\n const link = post.link;\r\n const excerpt = stripHtml(post.excerpt.rendered);\r\n const date = new Date(post.date).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });\r\n \r\n let categoryName = 'Diario';\r\n let categorySlug = 'general';\r\n if (post._embedded?.['wp:term']?.[0]?.[0] && post._embedded['wp:term'][0][0].slug !== 'uncategorized') {\r\n categoryName = post._embedded['wp:term'][0][0].name;\r\n categorySlug = post._embedded['wp:term'][0][0].slug;\r\n }\r\n\r\n featuredContainer.innerHTML = `\r\n <article class=\"group cursor-none hoverable grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-20 items-center mb-32 filterable-article\" data-category=\"${categorySlug}\" data-aos=\"fade-up\">\r\n <div class=\"md:col-span-7\">\r\n <a href=\"${link}\" class=\"block\">\r\n <div class=\"bp-grid-container bp-landscape overflow-hidden\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"${imageUrl}\" class=\"transition-transform duration-[2s] ease-in-out group-hover:scale-105\">\r\n <div class=\"absolute inset-0 bg-black\/0 group-hover:bg-black\/10 transition-colors duration-500 pointer-events-none\"><\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <div class=\"md:col-span-5 flex flex-col justify-center\">\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <span class=\"text-[10px] md:text-xs uppercase tracking-widest text-gray-500 border border-gray-300 rounded-full px-3 py-1\">${categoryName}<\/span>\r\n <span class=\"text-[10px] md:text-xs text-gray-400 uppercase tracking-widest\">${date}<\/span>\r\n <\/div>\r\n <a href=\"${link}\" class=\"block\">\r\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-serif text-black-rich leading-[1.1] mb-6 group-hover:italic transition-all duration-500\">\r\n ${title}\r\n <\/h2>\r\n <\/a>\r\n <p class=\"font-sans font-light text-gray-600 leading-relaxed text-sm md:text-base mb-8 line-clamp-3\">\r\n ${excerpt}\r\n <\/p>\r\n <a href=\"${link}\" class=\"inline-flex items-center gap-3 text-xs uppercase tracking-[0.2em] font-medium border-b border-black pb-1 w-fit group-hover:text-gold-muted group-hover:border-gold-muted transition-colors hoverable\">\r\n Leer Art\u00edculo <i class=\"fas fa-arrow-right -rotate-45 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n `;\r\n updateHoverables();\r\n }\r\n\r\n \/\/ HTML para los Posts del Grid\r\n function renderGridPosts(posts, append = false) {\r\n let html = '';\r\n \r\n \/\/ Patrones asim\u00e9tricos para mantener el look \"Editorial\"\r\n const aspectRatios = ['bp-portrait', 'bp-square', 'bp-landscape', 'bp-portrait'];\r\n const offsets = ['', 'md:mt-32', '', 'md:mt-16'];\r\n\r\n \/\/ Saber en qu\u00e9 index empezamos para no romper el patr\u00f3n al cargar m\u00e1s\r\n const startIndex = append ? articlesGrid.children.length : 0;\r\n\r\n posts.forEach((post, i) => {\r\n const index = startIndex + i;\r\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/via.placeholder.com\/800x800?text=Duarte+Views';\r\n const title = post.title.rendered;\r\n const link = post.link;\r\n const excerpt = stripHtml(post.excerpt.rendered);\r\n const date = new Date(post.date).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });\r\n \r\n let categoryName = 'Diario';\r\n let categorySlug = 'general';\r\n if (post._embedded?.['wp:term']?.[0]?.[0] && post._embedded['wp:term'][0][0].slug !== 'uncategorized') {\r\n categoryName = post._embedded['wp:term'][0][0].name;\r\n categorySlug = post._embedded['wp:term'][0][0].slug;\r\n }\r\n\r\n const aspect = aspectRatios[index % aspectRatios.length];\r\n const offset = offsets[index % offsets.length];\r\n const delay = (index % 2 !== 0) ? 'data-aos-delay=\"100\"' : '';\r\n\r\n \/\/ Agregamos efecto blanco y negro solo a los retratos (como en el original)\r\n const filterClass = aspect === 'bp-portrait' ? 'grayscale group-hover:grayscale-0' : '';\r\n\r\n html += `\r\n <article class=\"group cursor-none hoverable filterable-article ${offset}\" data-category=\"${categorySlug}\" data-aos=\"fade-up\" ${delay} style=\"display: ${currentFilter === 'todas' || currentFilter === categorySlug ? 'block' : 'none'}\">\r\n <a href=\"${link}\" class=\"block\">\r\n <div class=\"bp-grid-container ${aspect} mb-8 overflow-hidden\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"${imageUrl}\" class=\"transition-transform duration-[2s] ease-in-out group-hover:scale-105 ${filterClass}\">\r\n <\/div>\r\n <\/a>\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <span class=\"text-[10px] uppercase tracking-widest text-gray-500\">${categoryName}<\/span>\r\n <span class=\"text-[10px] text-gray-400 uppercase tracking-widest\">${date}<\/span>\r\n <\/div>\r\n <a href=\"${link}\" class=\"block\">\r\n <h3 class=\"text-3xl font-serif text-black-rich mb-4 group-hover:italic transition-all duration-500\">${title}<\/h3>\r\n <\/a>\r\n <p class=\"font-sans font-light text-gray-600 text-sm mb-6 line-clamp-2\">${excerpt}<\/p>\r\n <a href=\"${link}\" class=\"text-xs uppercase tracking-widest font-medium group-hover:text-gold-muted transition-colors flex items-center gap-2 hoverable\">\r\n Leer art\u00edculo <i class=\"fas fa-arrow-right -rotate-45\"><\/i>\r\n <\/a>\r\n <\/article>\r\n `;\r\n });\r\n\r\n if (append) {\r\n articlesGrid.insertAdjacentHTML('beforeend', html);\r\n } else {\r\n articlesGrid.innerHTML = html;\r\n }\r\n \r\n updateHoverables();\r\n }\r\n\r\n \/\/ Manejar Filtrado por Categor\u00edas\r\n function attachFilterEvents() {\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n \r\n filterBtns.forEach(b => {\r\n b.classList.remove('text-black-rich', 'border-b', 'border-black', 'pb-1');\r\n b.classList.add('hover:text-black-rich');\r\n });\r\n btn.classList.remove('hover:text-black-rich');\r\n btn.classList.add('text-black-rich', 'border-b', 'border-black', 'pb-1');\r\n\r\n currentFilter = btn.getAttribute('data-filter');\r\n \r\n const allArticles = document.querySelectorAll('.filterable-article');\r\n allArticles.forEach(article => {\r\n if (currentFilter === 'todas' || article.getAttribute('data-category') === currentFilter) {\r\n article.style.display = '';\r\n setTimeout(() => AOS.refresh(), 50);\r\n } else {\r\n article.style.display = 'none';\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n \/\/ Cargar m\u00e1s posts reales desde la API\r\n loadMoreBtn.addEventListener('click', async (e) => {\r\n e.preventDefault();\r\n \r\n if(currentPage >= totalPages) return;\r\n\r\n currentPage++;\r\n const originalText = loadMoreBtn.innerText;\r\n loadMoreBtn.innerText = \"Cargando...\";\r\n loadMoreBtn.style.pointerEvents = \"none\";\r\n \r\n try {\r\n const response = await fetch(`${API_BASE_URL}\/posts?_embed&per_page=${POSTS_PER_PAGE}&page=${currentPage}`);\r\n if (!response.ok) throw new Error('Error de red');\r\n const newPosts = await response.json();\r\n \r\n \/\/ Actualizar categor\u00edas del filtro si hay nuevas\r\n const newCategories = extractCategories(newPosts);\r\n \/\/ Aqu\u00ed podr\u00edamos a\u00f1adir las categor\u00edas nuevas si quisieramos... \r\n\r\n renderGridPosts(newPosts, true);\r\n \r\n setTimeout(() => AOS.refresh(), 100);\r\n\r\n if (currentPage >= totalPages) {\r\n loadMoreBtn.innerText = \"Fin de las historias\";\r\n loadMoreBtn.classList.add('opacity-50', 'bg-black', 'text-white');\r\n } else {\r\n loadMoreBtn.innerText = \"Cargar M\u00e1s Historias\";\r\n loadMoreBtn.style.pointerEvents = \"auto\";\r\n }\r\n\r\n } catch(error) {\r\n console.error(\"Error cargando m\u00e1s posts\", error);\r\n loadMoreBtn.innerText = \"Error - Reintentar\";\r\n loadMoreBtn.style.pointerEvents = \"auto\";\r\n }\r\n });\r\n\r\n \/\/ Iniciar todo al cargar\r\n window.addEventListener('DOMContentLoaded', loadWPPosts);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>El Diario | Duarte Views | Fotograf\u00eda de Bodas Cinematogr\u00e1fica HOME BLOG BODAS SOBRE NOSOTROS CONTACTO Men\u00fa Home Blog Bodas Sobre nosotros Contacto © 2026 DUARTE VIEWS El Diario Historias, Inspiraci\u00f3n y Detalles Todas Revelando historias… Cargar M\u00e1s Historias CreemosMagia Juntos info@duarteviews.com +34 679 18 03 18 Torrej\u00f3n de Ardoz (Madrid) HOME BLOG BODAS SOBRE NOSOTROS CONTACTO Facebook X Instagram © 2026 Duarte Views Fotograf\u00eda Todos los derechos reservados. Dise\u00f1ado con Pasi\u00f3n Consultar Fecha<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11861","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/pages\/11861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/comments?post=11861"}],"version-history":[{"count":32,"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/pages\/11861\/revisions"}],"predecessor-version":[{"id":12671,"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/pages\/11861\/revisions\/12671"}],"wp:attachment":[{"href":"https:\/\/duarteviews.com\/bodas\/wp-json\/wp\/v2\/media?parent=11861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}