{"id":3770,"date":"2026-04-22T14:34:50","date_gmt":"2026-04-22T14:34:50","guid":{"rendered":"https:\/\/noyolbr.com\/?page_id=3770"},"modified":"2026-04-30T22:22:09","modified_gmt":"2026-04-30T22:22:09","slug":"c47","status":"publish","type":"page","link":"https:\/\/noyolbr.com\/index.php\/c47\/","title":{"rendered":"C47"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3770\" class=\"elementor elementor-3770\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48a7b54 e-con-full e-flex e-con e-parent\" data-id=\"48a7b54\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/youtu.be\\\/NW0zvWD1o68&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_privacy_mode&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\" role=\"presentation\"><\/div>\n\t\t\t\t\t\t<\/div>\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-47d1aae e-con-full e-flex e-con e-parent\" data-id=\"47d1aae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16024b6 elementor-widget elementor-widget-html\" data-id=\"16024b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"noyol-c47-section\">\r\n\r\n  <!-- Carga de fuentes StageGrotesk -->\r\n  <style>\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Light.ttf') format('truetype');\r\n      font-weight: 300;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Regular.ttf') format('truetype');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Medium.ttf') format('truetype');\r\n      font-weight: 500;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Bold.ttf') format('truetype');\r\n      font-weight: 700;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n\r\n    \/* ============================================================== *\/\r\n    \/* RESET AGRESIVO \u2014 aisla la secci\u00f3n de WordPress\/Elementor\/tema  *\/\r\n    \/* ============================================================== *\/\r\n    .noyol-c47-section,\r\n    .noyol-c47-section *,\r\n    .noyol-c47-section *::before,\r\n    .noyol-c47-section *::after {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .noyol-c47-section h1,\r\n    .noyol-c47-section h2,\r\n    .noyol-c47-section h3,\r\n    .noyol-c47-section h4,\r\n    .noyol-c47-section h5,\r\n    .noyol-c47-section h6,\r\n    .noyol-c47-section p,\r\n    .noyol-c47-section span,\r\n    .noyol-c47-section div {\r\n      margin: 0;\r\n      padding: 0;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      font-weight: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      text-transform: none;\r\n      text-decoration: none;\r\n      text-align: inherit;\r\n      color: inherit;\r\n      background: transparent;\r\n      border: 0;\r\n      outline: 0;\r\n      box-shadow: none;\r\n      text-shadow: none;\r\n    }\r\n\r\n    \/* ============================================================== *\/\r\n    \/* CONTENEDOR                                                      *\/\r\n    \/* ============================================================== *\/\r\n    .noyol-c47-section {\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      width: 100% !important;\r\n      min-height: 100vh;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      text-align: center !important;\r\n      padding: 80px 24px !important;\r\n      background: #ffffff !important;\r\n      color: #0a0a0a !important;\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n\r\n    .noyol-c47-section .noyol-c47-section__inner {\r\n      max-width: 900px !important;\r\n      width: 100% !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      gap: 80px !important;\r\n      margin: 0 auto !important;\r\n      perspective: 1200px;\r\n    }\r\n\r\n    .noyol-c47-section .noyol-c47-section__brand {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      gap: 8px !important;\r\n      width: 100% !important;\r\n    }\r\n\r\n    \/* ============================================================== *\/\r\n    \/* C-47 \u2014 t\u00edtulo principal                                         *\/\r\n    \/* ============================================================== *\/\r\n    .noyol-c47-section h2.noyol-c47-section__title,\r\n    .noyol-c47-section .noyol-c47-section__title {\r\n      display: inline-flex !important;\r\n      align-items: baseline !important;\r\n      justify-content: center !important;\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(1.75rem, 3vw, 2.25rem) !important;\r\n      font-weight: 400 !important;\r\n      letter-spacing: 0.02em !important;\r\n      line-height: 1.1 !important;\r\n      color: #0a0a0a !important;\r\n      margin: 0 !important;\r\n      padding: 0 !important;\r\n      text-transform: none !important;\r\n      text-align: center !important;\r\n      text-decoration: none !important;\r\n      background: transparent !important;\r\n    }\r\n\r\n    \/* Caracteres individuales del t\u00edtulo (para animaci\u00f3n) *\/\r\n    .noyol-c47-section .noyol-c47-section__char {\r\n      display: inline-block !important;\r\n      position: relative;\r\n      transform-style: preserve-3d;\r\n      will-change: transform, opacity;\r\n    }\r\n    .noyol-c47-section .noyol-c47-section__char--dash {\r\n      margin: 0 0.05em !important;\r\n      transform-origin: center center !important;\r\n    }\r\n    .noyol-c47-section .noyol-c47-section__char--num {\r\n      backface-visibility: hidden;\r\n    }\r\n\r\n    \/* Subt\u00edtulo \"by Noyol\" *\/\r\n    .noyol-c47-section p.noyol-c47-section__subtitle,\r\n    .noyol-c47-section .noyol-c47-section__subtitle {\r\n      display: block !important;\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(1rem, 1.4vw, 1.125rem) !important;\r\n      font-weight: 300 !important;\r\n      letter-spacing: 0.01em !important;\r\n      line-height: 1.3 !important;\r\n      color: #0a0a0a !important;\r\n      margin: 0 !important;\r\n      padding: 0 !important;\r\n      text-align: center !important;\r\n      text-transform: none !important;\r\n      background: transparent !important;\r\n    }\r\n\r\n    \/* Descripci\u00f3n *\/\r\n    .noyol-c47-section p.noyol-c47-section__description,\r\n    .noyol-c47-section .noyol-c47-section__description {\r\n      display: block !important;\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(1.5rem, 3vw, 2.25rem) !important;\r\n      font-weight: 500 !important;\r\n      line-height: 1.35 !important;\r\n      letter-spacing: -0.005em !important;\r\n      color: #0a0a0a !important;\r\n      max-width: 780px !important;\r\n      margin: 0 auto !important;\r\n      padding: 0 !important;\r\n      text-align: center !important;\r\n      background: transparent !important;\r\n    }\r\n\r\n    \/* ============================================================== *\/\r\n    \/* ESTADO INICIAL PARA ANIMACI\u00d3N GSAP                              *\/\r\n    \/* ============================================================== *\/\r\n    .noyol-c47-section[data-gsap-ready=\"true\"] .noyol-c47-section__char,\r\n    .noyol-c47-section[data-gsap-ready=\"true\"] .noyol-c47-section__subtitle,\r\n    .noyol-c47-section[data-gsap-ready=\"true\"] .noyol-c47-section__description {\r\n      opacity: 0;\r\n    }\r\n\r\n    \/* Fallback sin JS *\/\r\n    .noyol-c47-section:not([data-gsap-ready=\"true\"]) .noyol-c47-section__char,\r\n    .noyol-c47-section:not([data-gsap-ready=\"true\"]) .noyol-c47-section__subtitle,\r\n    .noyol-c47-section:not([data-gsap-ready=\"true\"]) .noyol-c47-section__description {\r\n      opacity: 1;\r\n      transform: none;\r\n    }\r\n\r\n    \/* ============================================================== *\/\r\n    \/* RESPONSIVE                                                      *\/\r\n    \/* ============================================================== *\/\r\n\r\n    \/* Tablet *\/\r\n    @media (max-width: 1024px) {\r\n      .noyol-c47-section {\r\n        padding: 72px 32px !important;\r\n        min-height: 90vh;\r\n      }\r\n      .noyol-c47-section .noyol-c47-section__inner {\r\n        gap: 64px !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil grande (+20% en el t\u00edtulo respecto al original) *\/\r\n    @media (max-width: 768px) {\r\n      .noyol-c47-section {\r\n        padding: 64px 24px !important;\r\n        min-height: 80vh;\r\n      }\r\n      .noyol-c47-section .noyol-c47-section__inner {\r\n        gap: 48px !important;\r\n      }\r\n      .noyol-c47-section h2.noyol-c47-section__title,\r\n      .noyol-c47-section .noyol-c47-section__title {\r\n        font-size: 1.95rem !important; \/* 1.625rem * 1.20 *\/\r\n      }\r\n      .noyol-c47-section p.noyol-c47-section__subtitle,\r\n      .noyol-c47-section .noyol-c47-section__subtitle {\r\n        font-size: 1rem !important;\r\n      }\r\n      .noyol-c47-section p.noyol-c47-section__description,\r\n      .noyol-c47-section .noyol-c47-section__description {\r\n        font-size: 1.375rem !important;\r\n        line-height: 1.4 !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil peque\u00f1o (+20% en el t\u00edtulo respecto al original) *\/\r\n    @media (max-width: 480px) {\r\n      .noyol-c47-section {\r\n        padding: 56px 20px !important;\r\n        min-height: 75vh;\r\n      }\r\n      .noyol-c47-section .noyol-c47-section__inner {\r\n        gap: 40px !important;\r\n      }\r\n      .noyol-c47-section h2.noyol-c47-section__title,\r\n      .noyol-c47-section .noyol-c47-section__title {\r\n        font-size: 1.8rem !important; \/* 1.5rem * 1.20 *\/\r\n      }\r\n      .noyol-c47-section p.noyol-c47-section__subtitle,\r\n      .noyol-c47-section .noyol-c47-section__subtitle {\r\n        font-size: 0.9375rem !important;\r\n      }\r\n      .noyol-c47-section p.noyol-c47-section__description,\r\n      .noyol-c47-section .noyol-c47-section__description {\r\n        font-size: 1.1875rem !important;\r\n        line-height: 1.45 !important;\r\n      }\r\n    }\r\n\r\n    \/* Pantallas altas: m\u00e1s aire entre bloques *\/\r\n    @media (min-height: 1000px) and (min-width: 1024px) {\r\n      .noyol-c47-section .noyol-c47-section__inner {\r\n        gap: 100px !important;\r\n      }\r\n    }\r\n\r\n    \/* Landscape m\u00f3vil: menos vh *\/\r\n    @media (max-height: 600px) {\r\n      .noyol-c47-section {\r\n        min-height: auto !important;\r\n        padding: 56px 24px !important;\r\n      }\r\n      .noyol-c47-section .noyol-c47-section__inner {\r\n        gap: 36px !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"noyol-c47-section__inner\">\r\n\r\n    <div class=\"noyol-c47-section__brand\">\r\n      <h2 class=\"noyol-c47-section__title\" aria-label=\"C-47\">\r\n        <span class=\"noyol-c47-section__char noyol-c47-section__char--c\" aria-hidden=\"true\">C<\/span><span class=\"noyol-c47-section__char noyol-c47-section__char--dash\" aria-hidden=\"true\">-<\/span><span class=\"noyol-c47-section__char noyol-c47-section__char--num noyol-c47-section__char--four\" aria-hidden=\"true\">4<\/span><span class=\"noyol-c47-section__char noyol-c47-section__char--num noyol-c47-section__char--seven\" aria-hidden=\"true\">7<\/span>\r\n      <\/h2>\r\n      <p class=\"noyol-c47-section__subtitle\">by Noyol<\/p>\r\n    <\/div>\r\n\r\n    <p class=\"noyol-c47-section__description\">\r\n      Una oportunidad \u00fanica para desarrollo comercial, habitar o invertir en una de las zonas con mayor proyecci\u00f3n de la ciudad.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n  <!-- GSAP + animaciones -->\r\n  <script>\r\n    (function () {\r\n      var section = document.currentScript.closest('.noyol-c47-section');\r\n      if (!section) return;\r\n\r\n      function loadScript(src, cb) {\r\n        if (src.indexOf('ScrollTrigger') !== -1 && window.ScrollTrigger) { cb(); return; }\r\n        if (src.indexOf('gsap.min.js')   !== -1 && window.gsap)          { cb(); return; }\r\n\r\n        var fileSlug = src.split('\/').pop()\r\n                          .replace(\/\\.\/g, '-')\r\n                          .replace(\/[^a-zA-Z0-9\\-]\/g, '');\r\n        var attr = 'data-noyol-' + fileSlug;\r\n\r\n        var existing = document.querySelector('script[' + attr + ']');\r\n        if (existing) {\r\n          if (src.indexOf('ScrollTrigger') !== -1 && window.ScrollTrigger) { cb(); return; }\r\n          if (src.indexOf('gsap.min.js')   !== -1 && window.gsap)          { cb(); return; }\r\n          existing.addEventListener('load', cb);\r\n          return;\r\n        }\r\n\r\n        var s = document.createElement('script');\r\n        s.src = src;\r\n        s.async = true;\r\n        s.setAttribute(attr, '1');\r\n        s.onload = cb;\r\n        s.onerror = function () { console.warn('[Noyol C-47] No se pudo cargar', src); };\r\n        document.head.appendChild(s);\r\n      }\r\n\r\n      function initAnimation() {\r\n        if (!window.gsap) return;\r\n        section.setAttribute('data-gsap-ready', 'true');\r\n\r\n        var charC       = section.querySelector('.noyol-c47-section__char--c');\r\n        var charDash    = section.querySelector('.noyol-c47-section__char--dash');\r\n        var char4       = section.querySelector('.noyol-c47-section__char--four');\r\n        var char7       = section.querySelector('.noyol-c47-section__char--seven');\r\n        var subtitle    = section.querySelector('.noyol-c47-section__subtitle');\r\n        var description = section.querySelector('.noyol-c47-section__description');\r\n        var inner       = section.querySelector('.noyol-c47-section__inner');\r\n\r\n        if (window.ScrollTrigger) {\r\n          gsap.registerPlugin(ScrollTrigger);\r\n        }\r\n\r\n        \/\/ Estado inicial preciso (evita parpadeo antes del trigger)\r\n        gsap.set(charC,    { opacity: 0, x: -18 });\r\n        gsap.set(charDash, { opacity: 0, scaleX: 0, transformOrigin: '50% 50%' });\r\n        gsap.set(char4,    { opacity: 0, yPercent: 120, rotationX: -90, transformOrigin: '50% 50%' });\r\n        gsap.set(char7,    { opacity: 0, yPercent: -120, rotationX: 90, transformOrigin: '50% 50%' });\r\n        gsap.set(subtitle, { opacity: 0, y: 14 });\r\n        gsap.set(description, { opacity: 0, y: 24 });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            \/\/ Solo dispara cuando el centro del bloque de texto cruza el\r\n            \/\/ centro del viewport \u2014 es decir, cuando el usuario est\u00e1\r\n            \/\/ realmente \"encima\" del texto.\r\n            trigger: inner || section,\r\n            start: 'center center',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        \/\/ 1) \"C\" entra desde la izquierda\r\n        tl.to(charC, { opacity: 1, x: 0, duration: 0.5 }, 0);\r\n\r\n        \/\/ 2) \"-\" se expande en horizontal\r\n        tl.to(charDash, { opacity: 1, scaleX: 1, duration: 0.35, ease: 'power2.out' }, 0.35);\r\n\r\n        \/\/ 3) \"4\" gira desde abajo hasta su posici\u00f3n\r\n        tl.to(char4, {\r\n          opacity: 1,\r\n          yPercent: 0,\r\n          rotationX: 0,\r\n          duration: 0.85,\r\n          ease: 'back.out(1.6)'\r\n        }, 0.6);\r\n\r\n        \/\/ 4) \"7\" gira desde arriba hasta su posici\u00f3n\r\n        tl.to(char7, {\r\n          opacity: 1,\r\n          yPercent: 0,\r\n          rotationX: 0,\r\n          duration: 0.85,\r\n          ease: 'back.out(1.6)'\r\n        }, 0.8);\r\n\r\n        \/\/ 5) \"by Noyol\" \u2014 text reveal sutil\r\n        tl.to(subtitle, { opacity: 1, y: 0, duration: 0.7, ease: 'power2.out' }, 1.15);\r\n\r\n        \/\/ 6) Descripci\u00f3n \u2014 text reveal\r\n        tl.to(description, { opacity: 1, y: 0, duration: 0.95, ease: 'power3.out' }, 1.35);\r\n      }\r\n\r\n      \/\/ Cargar GSAP core \u2192 luego ScrollTrigger \u2192 luego animar\r\n      loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js', function () {\r\n        loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js', initAnimation);\r\n      });\r\n    })();\r\n  <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1909987 e-con-full e-flex e-con e-parent\" data-id=\"1909987\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b5209f elementor-widget elementor-widget-html\" data-id=\"1b5209f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"noyol-lots-section\">\r\n  <style>\r\n    \/* ========== FUENTES ========== *\/\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Light.ttf') format('truetype');\r\n      font-weight: 300; font-style: normal; font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Regular.ttf') format('truetype');\r\n      font-weight: 400; font-style: normal; font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Medium.ttf') format('truetype');\r\n      font-weight: 500; font-style: normal; font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Bold.ttf') format('truetype');\r\n      font-weight: 700; font-style: normal; font-display: swap;\r\n    }\r\n\r\n    \/* ========== CONTENEDOR AISLADO ========== *\/\r\n    .noyol-lots-section {\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      width: 100%;\r\n      padding: 100px 32px;\r\n      box-sizing: border-box;\r\n      background: #ffffff;\r\n      color: #0a0a0a;\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n    .noyol-lots-section *,\r\n    .noyol-lots-section *::before,\r\n    .noyol-lots-section *::after {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    \/* ========== RESET AGRESIVO: anula estilos heredados de WP\/Elementor\/tema ========== *\/\r\n    .noyol-lots-section h1,\r\n    .noyol-lots-section h2,\r\n    .noyol-lots-section h3,\r\n    .noyol-lots-section h4,\r\n    .noyol-lots-section h5,\r\n    .noyol-lots-section h6,\r\n    .noyol-lots-section p,\r\n    .noyol-lots-section a,\r\n    .noyol-lots-section button,\r\n    .noyol-lots-section span,\r\n    .noyol-lots-section div {\r\n      margin: 0;\r\n      padding: 0;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      font-weight: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      text-transform: none;\r\n      text-decoration: none;\r\n      text-align: inherit;\r\n      color: inherit;\r\n      background: transparent;\r\n      border: 0;\r\n      outline: 0;\r\n      box-shadow: none;\r\n      text-shadow: none;\r\n    }\r\n    .noyol-lots-section button { font: inherit; cursor: pointer; }\r\n    .noyol-lots-section a { color: inherit; }\r\n    .noyol-lots-section img { max-width: 100%; display: block; }\r\n\r\n    \/* ========== LAYOUT ========== *\/\r\n    .noyol-lots-section__grid {\r\n      max-width: 1240px;\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 1fr;\r\n      gap: 70px;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* ========== MAPA (GIF) ========== *\/\r\n    .noyol-lots-section__map-wrap {\r\n      position: relative;\r\n    }\r\n    .noyol-lots-section__map {\r\n      position: relative;\r\n      border: 1px solid #5a5a5a;\r\n      background: #ffffff;\r\n      aspect-ratio: 1.38 \/ 1;\r\n      overflow: hidden;\r\n      padding: 0;\r\n    }\r\n    .noyol-lots-section__map-img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      object-position: center;\r\n      display: block;\r\n      user-select: none;\r\n      -webkit-user-drag: none;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* ========== CONTENIDO DERECHO ========== *\/\r\n    .noyol-lots-section__content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 26px;\r\n    }\r\n\r\n    \/* T\u00edtulo principal \u2014 blindado contra estilos del tema\/Elementor *\/\r\n    .noyol-lots-section h2.noyol-lots-section__title,\r\n    .noyol-lots-section .noyol-lots-section__title {\r\n      display: block !important;\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(2rem, 3.6vw, 3rem) !important;\r\n      font-weight: 500 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -0.015em !important;\r\n      color: #0a0a0a !important;\r\n      margin: 0 !important;\r\n      padding: 0 !important;\r\n      text-transform: none !important;\r\n      text-align: left !important;\r\n      text-decoration: none !important;\r\n      background: transparent !important;\r\n    }\r\n\r\n    .noyol-lots-section p.noyol-lots-section__text,\r\n    .noyol-lots-section .noyol-lots-section__text {\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(0.9375rem, 1vw, 1rem) !important;\r\n      font-weight: 300 !important;\r\n      line-height: 1.65 !important;\r\n      color: #3a3a3a !important;\r\n      margin: 0 !important;\r\n      max-width: 460px;\r\n    }\r\n\r\n    .noyol-lots-section__divider {\r\n      height: 1px;\r\n      background: #d1d5db;\r\n      width: 100%;\r\n      max-width: 460px;\r\n      margin: 4px 0;\r\n    }\r\n\r\n    .noyol-lots-section p.noyol-lots-section__tagline,\r\n    .noyol-lots-section .noyol-lots-section__tagline {\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: clamp(0.9375rem, 1vw, 1rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.4 !important;\r\n      color: #0a0a0a !important;\r\n      margin: 0 !important;\r\n    }\r\n\r\n    .noyol-lots-section a.noyol-lots-section__cta,\r\n    .noyol-lots-section .noyol-lots-section__cta {\r\n      display: inline-flex !important;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: #0a0a0a !important;\r\n      color: #ffffff !important;\r\n      border: none !important;\r\n      border-radius: 999px !important;\r\n      padding: 14px 28px !important;\r\n      font-family: 'StageGrotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      font-size: 0.9375rem !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1 !important;\r\n      cursor: pointer;\r\n      transition: transform 0.25s ease, background 0.25s ease;\r\n      margin-top: 8px;\r\n      width: fit-content;\r\n      text-decoration: none !important;\r\n      text-transform: none !important;\r\n      letter-spacing: 0 !important;\r\n    }\r\n    .noyol-lots-section a.noyol-lots-section__cta:hover,\r\n    .noyol-lots-section .noyol-lots-section__cta:hover {\r\n      background: #2a2a2a !important;\r\n      color: #ffffff !important;\r\n      transform: translateY(-1px);\r\n      text-decoration: none !important;\r\n    }\r\n\r\n    \/* ========== ESTADOS INICIALES GSAP ========== *\/\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__title,\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__text,\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__divider,\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__tagline,\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__cta {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      will-change: opacity, transform;\r\n    }\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__divider {\r\n      transform: scaleX(0);\r\n      transform-origin: left center;\r\n    }\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__map {\r\n      opacity: 0;\r\n    }\r\n    .noyol-lots-section[data-gsap-ready=\"true\"] .noyol-lots-section__map-img {\r\n      transform: scale(1.04);\r\n      will-change: transform, opacity;\r\n    }\r\n\r\n    \/* ========== RESPONSIVE ========== *\/\r\n    @media (max-width: 960px) {\r\n      .noyol-lots-section { padding: 72px 24px; }\r\n      .noyol-lots-section__grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 48px;\r\n      }\r\n      .noyol-lots-section__content { max-width: 560px; }\r\n      .noyol-lots-section__text,\r\n      .noyol-lots-section__divider { max-width: 100%; }\r\n    }\r\n    @media (max-width: 560px) {\r\n      .noyol-lots-section { padding: 56px 20px; }\r\n      .noyol-lots-section__grid { gap: 40px; }\r\n      .noyol-lots-section__content { gap: 22px; }\r\n    }\r\n\r\n    \/* Fallback sin GSAP *\/\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__title,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__text,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__divider,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__tagline,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__cta,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__map,\r\n    .noyol-lots-section:not([data-gsap-ready=\"true\"]) .noyol-lots-section__map-img {\r\n      opacity: 1;\r\n      transform: none;\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"noyol-lots-section__grid\">\r\n\r\n    <!-- ============== MAPA (GIF) ============== -->\r\n    <div class=\"noyol-lots-section__map-wrap\">\r\n      <div class=\"noyol-lots-section__map\" id=\"noyolMapBox\">\r\n        <img\r\n          class=\"noyol-lots-section__map-img\"\r\n          id=\"noyolMapImg\"\r\n          src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/gifcluster-ezgif.com-video-to-gif-converter-2.gif\"\r\n          alt=\"Plano del Lote C-47 - animaci\u00f3n\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        \/>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ============== CONTENIDO DERECHO ============== -->\r\n    <div class=\"noyol-lots-section__content\">\r\n      <h2 class=\"noyol-lots-section__title\">\r\n        Dos propiedades, una sola<br>\r\n        inversi&oacute;n inteligente\r\n      <\/h2>\r\n      <p class=\"noyol-lots-section__text\">\r\n        Este proyecto re\u00fane dos unidades dentro de un mismo espacio, lo que abre un abanico de posibilidades que pocas propiedades ofrecen EN EL CORAZ\u00d3N DEL CORREDOR GASTRON\u00d3MICO del centro hist\u00f3rico.\r\n      <\/p>\r\n      <p class=\"noyol-lots-section__text\">\r\n       Puedes integrarlas en un solo concepto de giro comercial o habitacional o trabajarlas de forma independiente.\r\n\r\n      <\/p>\r\n      <div class=\"noyol-lots-section__divider\"><\/div>\r\n      <p class=\"noyol-lots-section__tagline\">\r\n        Flexibilidad que otorga valor patrimonial.\r\n      <\/p>\r\n      <a href=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/PLANO-c47.pdf\"\r\n         class=\"noyol-lots-section__cta\"\r\n         id=\"noyolMapCta\"\r\n         target=\"_blank\"\r\n         rel=\"noopener\">Ver plano catastral<\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============== GSAP (animaci\u00f3n de entrada) ============== -->\r\n  <script>\r\n    (function () {\r\n      var section = document.currentScript.closest('.noyol-lots-section');\r\n      if (!section) return;\r\n\r\n      function loadScript(src, cb) {\r\n        \/\/ Reutiliza GSAP\/ScrollTrigger si ya est\u00e1n cargados en la p\u00e1gina\r\n        if (src.indexOf('ScrollTrigger') !== -1 && window.ScrollTrigger) { cb(); return; }\r\n        if (src.indexOf('gsap.min.js')   !== -1 && window.gsap)          { cb(); return; }\r\n\r\n        \/\/ Nombre de atributo seguro (sin puntos)\r\n        var fileSlug = src.split('\/').pop().replace(\/\\.\/g, '-').replace(\/[^a-zA-Z0-9\\-]\/g, '');\r\n        var attr = 'data-noyol-' + fileSlug;\r\n\r\n        var existing = document.querySelector('script[' + attr + ']');\r\n        if (existing) {\r\n          if (src.indexOf('ScrollTrigger') !== -1 && window.ScrollTrigger) { cb(); return; }\r\n          if (src.indexOf('gsap.min.js')   !== -1 && window.gsap)          { cb(); return; }\r\n          existing.addEventListener('load', cb);\r\n          return;\r\n        }\r\n        var s = document.createElement('script');\r\n        s.src = src; s.async = true;\r\n        s.setAttribute(attr, '1');\r\n        s.onload = cb;\r\n        s.onerror = function () { console.warn('[Noyol] No se pudo cargar', src); };\r\n        document.head.appendChild(s);\r\n      }\r\n\r\n      function initAnimation() {\r\n        if (!window.gsap) return;\r\n        section.setAttribute('data-gsap-ready', 'true');\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var map     = section.querySelector('.noyol-lots-section__map');\r\n        var mapImg  = section.querySelector('.noyol-lots-section__map-img');\r\n        var title   = section.querySelector('.noyol-lots-section__title');\r\n        var texts   = section.querySelectorAll('.noyol-lots-section__text');\r\n        var divider = section.querySelector('.noyol-lots-section__divider');\r\n        var tagline = section.querySelector('.noyol-lots-section__tagline');\r\n        var cta     = section.querySelector('.noyol-lots-section__cta');\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power2.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 70%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        tl.to(map, { opacity: 1, duration: 0.7, ease: 'power2.out' });\r\n        if (mapImg) {\r\n          tl.to(mapImg, { scale: 1, duration: 1.4, ease: 'power3.out' }, '-=0.6');\r\n        }\r\n        tl.to(title,   { opacity: 1, y: 0, duration: 0.8 }, '-=1.0');\r\n        tl.to(texts,   { opacity: 1, y: 0, duration: 0.7, stagger: 0.15 }, '-=0.55');\r\n        tl.to(divider, { opacity: 1, scaleX: 1, duration: 0.7, ease: 'power2.inOut' }, '-=0.4');\r\n        tl.to(tagline, { opacity: 1, y: 0, duration: 0.55 }, '-=0.3');\r\n        tl.to(cta,     { opacity: 1, y: 0, duration: 0.55, ease: 'back.out(1.6)' }, '-=0.2');\r\n      }\r\n\r\n      loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js', function () {\r\n        loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js', initAnimation);\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-32a4a0e e-con-full e-flex e-con e-parent\" data-id=\"32a4a0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0f9bbf elementor-widget elementor-widget-html\" data-id=\"b0f9bbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<section class=\"noyol-location-section\" id=\"noyolUbicacion\">\r\n\r\n  <div class=\"noyol-location-section__inner\">\r\n\r\n    <!-- Columna izquierda: texto -->\r\n    <div class=\"noyol-location-section__content\">\r\n      <h2 class=\"noyol-location-section__title\">\r\n        <span class=\"noyol-location-section__title-line\">La verdadera ubicaci\u00f3n<\/span>\r\n        <span class=\"noyol-location-section__title-line\">privilegiada<\/span>\r\n      <\/h2>\r\n\r\n      <div class=\"noyol-location-section__copy\">\r\n        <p class=\"noyol-location-section__paragraph\">\r\n          El Corredor Gastron\u00f3mico de la calle 47 se ha consolidado como una de las zonas m\u00e1s relevantes de M\u00e9rida. \r\n        <\/p>\r\n        <p class=\"noyol-location-section__paragraph\">\r\n          Esta zona concentra flujo, visibilidad y plusval\u00eda en crecimiento constante entre\r\n          gastronom\u00eda, turismo y desarrollo urbano.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <a class=\"noyol-location-section__cta\"\r\n         id=\"noyolLocationCta\"\r\n         href=\"https:\/\/maps.app.goo.gl\/BZf5tZUq4zUErNLc9?g_st=iw\"\r\n         target=\"_blank\"\r\n         rel=\"noopener\"\r\n         aria-label=\"Ver ubicaci\u00f3n en Google Maps (se abre en una nueva pesta\u00f1a)\">\r\n        <span class=\"noyol-location-section__cta-label\">Ver ubicaci\u00f3n<\/span>\r\n        <svg class=\"noyol-location-section__cta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n          <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z\"\r\n                fill=\"currentColor\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Columna derecha: GIF a\u00e9reo -->\r\n    <div class=\"noyol-location-section__media\">\r\n      <figure class=\"noyol-location-section__frame\" aria-label=\"Vista a\u00e9rea del Lote C-47 sobre la calle 47 en M\u00e9rida\">\r\n        <img class=\"noyol-location-section__gif\"\r\n             src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/vision-aerea-c47.gif\"\r\n             alt=\"Vista a\u00e9rea animada del lote C-47 en la calle 47, M\u00e9rida\"\r\n             loading=\"lazy\"\r\n             decoding=\"async\">\r\n        <span class=\"noyol-location-section__frame-glow\" aria-hidden=\"true\"><\/span>\r\n      <\/figure>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS (noyol-location-section)\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- Reset defensivo para ganar especificidad sobre el tema --- *\/\r\n    .noyol-location-section,\r\n    .noyol-location-section *,\r\n    .noyol-location-section *::before,\r\n    .noyol-location-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor principal --- *\/\r\n    section.noyol-location-section {\r\n      display: block !important;\r\n      width: 100% !important;\r\n      padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem) !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-location-section .noyol-location-section__inner {\r\n      max-width: 1280px !important;\r\n      margin: 0 auto !important;\r\n      display: grid !important;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;\r\n      gap: clamp(2rem, 6vw, 5rem) !important;\r\n      align-items: center !important;\r\n    }\r\n\r\n    \/* --- Columna de texto --- *\/\r\n    .noyol-location-section .noyol-location-section__content {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: clamp(1.5rem, 2.5vw, 2.25rem) !important;\r\n      max-width: 460px !important;\r\n    }\r\n\r\n    .noyol-location-section h2.noyol-location-section__title {\r\n      font-size: clamp(2rem, 3.6vw, 2.75rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.1 !important;\r\n      letter-spacing: -0.01em !important;\r\n      color: #111 !important;\r\n      display: block !important;\r\n    }\r\n\r\n    .noyol-location-section .noyol-location-section__title-line {\r\n      display: block !important;\r\n      overflow: hidden !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-location-section .noyol-location-section__copy {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 1rem !important;\r\n    }\r\n\r\n    .noyol-location-section p.noyol-location-section__paragraph {\r\n      font-size: clamp(0.95rem, 1vw, 1.0625rem) !important;\r\n      line-height: 1.6 !important;\r\n      color: #555 !important;\r\n      font-weight: 400 !important;\r\n    }\r\n\r\n    \/* --- CTA --- *\/\r\n    .noyol-location-section a.noyol-location-section__cta {\r\n      align-self: flex-start !important;\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      gap: 0.55rem !important;\r\n      padding: 0.85rem 1.6rem !important;\r\n      background: #111 !important;\r\n      color: #ffffff !important;\r\n      font-size: 0.95rem !important;\r\n      font-weight: 500 !important;\r\n      letter-spacing: 0.01em !important;\r\n      text-decoration: none !important;\r\n      border-radius: 999px !important;\r\n      cursor: pointer !important;\r\n      transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important;\r\n      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;\r\n      margin-top: 0.5rem !important;\r\n    }\r\n\r\n    .noyol-location-section a.noyol-location-section__cta:hover {\r\n      background: #1d1d1d !important;\r\n      transform: translateY(-2px) !important;\r\n      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;\r\n    }\r\n\r\n    .noyol-location-section a.noyol-location-section__cta:active {\r\n      transform: translateY(0) !important;\r\n    }\r\n\r\n    .noyol-location-section .noyol-location-section__cta-icon {\r\n      width: 16px !important;\r\n      height: 16px !important;\r\n      color: currentColor !important;\r\n      display: block !important;\r\n    }\r\n\r\n    \/* --- Columna del GIF --- *\/\r\n    .noyol-location-section .noyol-location-section__media {\r\n      width: 100% !important;\r\n      display: flex !important;\r\n      justify-content: center !important;\r\n    }\r\n\r\n    .noyol-location-section figure.noyol-location-section__frame {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      max-width: 640px !important;\r\n      aspect-ratio: 4 \/ 3 !important;\r\n      border-radius: 24px !important;\r\n      overflow: hidden !important;\r\n      background: #F2F1EB !important;\r\n      border: 1px solid rgba(0, 0, 0, 0.06) !important;\r\n      box-shadow:\r\n        0 30px 60px -30px rgba(0, 0, 0, 0.2),\r\n        0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-location-section img.noyol-location-section__gif {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      display: block !important;\r\n      border-radius: inherit !important;\r\n    }\r\n\r\n    .noyol-location-section .noyol-location-section__frame-glow {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      pointer-events: none !important;\r\n      border-radius: inherit !important;\r\n      background:\r\n        radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.06) 0%, transparent 60%),\r\n        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%) !important;\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    @media (max-width: 900px) {\r\n      .noyol-location-section .noyol-location-section__inner {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 2.5rem !important;\r\n      }\r\n      .noyol-location-section .noyol-location-section__content {\r\n        max-width: none !important;\r\n        text-align: left !important;\r\n      }\r\n      .noyol-location-section figure.noyol-location-section__frame {\r\n        max-width: none !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      section.noyol-location-section {\r\n        padding: 3.5rem 1.25rem !important;\r\n      }\r\n      .noyol-location-section h2.noyol-location-section__title {\r\n        font-size: clamp(1.75rem, 7vw, 2.25rem) !important;\r\n      }\r\n      .noyol-location-section figure.noyol-location-section__frame {\r\n        aspect-ratio: 4 \/ 3.2 !important;\r\n        border-radius: 20px !important;\r\n      }\r\n    }\r\n\r\n    \/* --- Respeto a \"reduce motion\" --- *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-location-section .noyol-location-section__title-line,\r\n      .noyol-location-section .noyol-location-section__paragraph,\r\n      .noyol-location-section a.noyol-location-section__cta,\r\n      .noyol-location-section figure.noyol-location-section__frame {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT DE ANIMACI\u00d3N (GSAP + ScrollTrigger)\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var SECTION_SELECTOR = '.noyol-location-section';\r\n      var section = document.querySelector(SECTION_SELECTOR);\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      \/\/ Carga GSAP + ScrollTrigger si no est\u00e1n presentes\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        var tasks = [];\r\n        if (!window.gsap)          tasks.push(loadScript(base + 'gsap.min.js'));\r\n        return Promise.all(tasks).then(function () {\r\n          if (!window.ScrollTrigger) return loadScript(base + 'ScrollTrigger.min.js');\r\n        });\r\n      }\r\n\r\n      function run() {\r\n        if (prefersReduced || !window.gsap) return;\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var titleLines  = section.querySelectorAll('.noyol-location-section__title-line');\r\n        var paragraphs  = section.querySelectorAll('.noyol-location-section__paragraph');\r\n        var cta         = section.querySelector('.noyol-location-section__cta');\r\n        var frame       = section.querySelector('.noyol-location-section__frame');\r\n\r\n        \/\/ Estado inicial\r\n        gsap.set(titleLines, { yPercent: 110, opacity: 0 });\r\n        gsap.set(paragraphs, { y: 24, opacity: 0 });\r\n        gsap.set(cta,        { y: 16, opacity: 0, scale: 0.96 });\r\n        gsap.set(frame,      { y: 40, opacity: 0, scale: 0.97 });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 75%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        \/\/ T\u00edtulo l\u00ednea por l\u00ednea\r\n        tl.to(titleLines, {\r\n          yPercent: 0,\r\n          opacity: 1,\r\n          duration: 0.9,\r\n          stagger: 0.12\r\n        }, 0);\r\n\r\n        \/\/ P\u00e1rrafos\r\n        tl.to(paragraphs, {\r\n          y: 0,\r\n          opacity: 1,\r\n          duration: 0.8,\r\n          stagger: 0.12\r\n        }, 0.35);\r\n\r\n        \/\/ CTA\r\n        tl.to(cta, {\r\n          y: 0,\r\n          opacity: 1,\r\n          scale: 1,\r\n          duration: 0.7,\r\n          ease: 'back.out(1.4)'\r\n        }, 0.9);\r\n\r\n        \/\/ Frame con el GIF (entra un poquito despu\u00e9s)\r\n        tl.to(frame, {\r\n          y: 0,\r\n          opacity: 1,\r\n          scale: 1,\r\n          duration: 1.1,\r\n          ease: 'power4.out'\r\n        }, 0.15);\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        \/\/ Fallback silencioso: dejamos todo visible\r\n        var nodes = section.querySelectorAll(\r\n          '.noyol-location-section__title-line,' +\r\n          '.noyol-location-section__paragraph,' +\r\n          '.noyol-location-section__cta,' +\r\n          '.noyol-location-section__frame'\r\n        );\r\n        nodes.forEach(function (n) {\r\n          n.style.opacity = '1';\r\n          n.style.transform = 'none';\r\n        });\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3ad313d e-con-full e-flex e-con e-parent\" data-id=\"3ad313d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffb3a5f elementor-widget elementor-widget-html\" data-id=\"ffb3a5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<section class=\"noyol-concept-section\" id=\"noyolConcepto\">\r\n\r\n  <div class=\"noyol-concept-section__inner\">\r\n\r\n    <!-- ------- T\u00edtulo ------- -->\r\n    <header class=\"noyol-concept-section__header\">\r\n      <h2 class=\"noyol-concept-section__title\">\r\n        <span class=\"noyol-concept-section__title-line\">Por su ubicaci\u00f3n y configuraci\u00f3n, esta <\/span><span class=\"noyol-concept-section__title-line\">propiedad es ideal para desarrollar un <\/span><span class=\"noyol-concept-section__title-line\">concepto comercial<\/span>\r\n      <\/h2>\r\n    <\/header>\r\n\r\n    <!-- ------- Frame: galer\u00eda sincronizada ------- -->\r\n    <figure class=\"noyol-concept-section__frame\"\r\n            aria-roledescription=\"carousel\"\r\n            aria-label=\"Conceptos comerciales para el Lote C-47\">\r\n\r\n      <!-- Capa de im\u00e1genes (cambia sincronizada con el texto) -->\r\n      <div class=\"noyol-concept-section__image-track\">\r\n        <img class=\"noyol-concept-section__image is-active\"\r\n             data-noyol-img=\"0\"\r\n             src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/gif-ia.gif\"\r\n             alt=\"Concepto de restaurante o bar boutique\"\r\n             loading=\"eager\"\r\n             decoding=\"async\"\r\n             fetchpriority=\"high\">\r\n        <img class=\"noyol-concept-section__image\"\r\n             data-noyol-img=\"1\"\r\n             src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/pexels-kadernamuslu-29101590-scaled.jpg\"\r\n             alt=\"Concepto de galer\u00eda o showroom\"\r\n             loading=\"lazy\"\r\n             decoding=\"async\">\r\n        <img class=\"noyol-concept-section__image\"\r\n             data-noyol-img=\"2\"\r\n             src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/DSC06530-HDR_11zon-scaled.jpg\"\r\n             alt=\"Concepto de espacio h\u00edbrido de hospitalidad y retail\"\r\n             loading=\"lazy\"\r\n             decoding=\"async\">\r\n      <\/div>\r\n\r\n      <!-- Gradiente de legibilidad -->\r\n      <span class=\"noyol-concept-section__overlay\" aria-hidden=\"true\"><\/span>\r\n\r\n      <!-- Tag est\u00e1tico superior derecho -->\r\n      <span class=\"noyol-concept-section__tag\">Construcci\u00f3n pensada para capitalizar<\/span>\r\n\r\n      <!-- Capa de texto inferior izquierdo (sincronizada) -->\r\n      <div class=\"noyol-concept-section__concept\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        <div class=\"noyol-concept-section__concept-slide is-active\" data-noyol-slide=\"0\">\r\n          <span class=\"noyol-concept-section__concept-line\">Restaurante o<\/span>\r\n          <span class=\"noyol-concept-section__concept-line\">bar boutique<\/span>\r\n        <\/div>\r\n        <div class=\"noyol-concept-section__concept-slide\" data-noyol-slide=\"1\">\r\n          <span class=\"noyol-concept-section__concept-line\">Galer&iacute;a o<\/span>\r\n          <span class=\"noyol-concept-section__concept-line\">showroom<\/span>\r\n        <\/div>\r\n        <div class=\"noyol-concept-section__concept-slide\" data-noyol-slide=\"2\">\r\n          <span class=\"noyol-concept-section__concept-line\">Espacio h&iacute;brido<\/span>\r\n          <span class=\"noyol-concept-section__concept-line\">(hospitalidad y retail)<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Dots de navegaci\u00f3n -->\r\n      <div class=\"noyol-concept-section__dots\" role=\"tablist\" aria-label=\"Conceptos comerciales\">\r\n        <button type=\"button\" class=\"noyol-concept-section__dot is-active\" data-noyol-target=\"0\" role=\"tab\" aria-selected=\"true\" aria-label=\"Restaurante o bar boutique\"><\/button>\r\n        <button type=\"button\" class=\"noyol-concept-section__dot\" data-noyol-target=\"1\" role=\"tab\" aria-selected=\"false\" aria-label=\"Galer\u00eda o showroom\"><\/button>\r\n        <button type=\"button\" class=\"noyol-concept-section__dot\" data-noyol-target=\"2\" role=\"tab\" aria-selected=\"false\" aria-label=\"Espacio h\u00edbrido (hospitalidad y retail)\"><\/button>\r\n      <\/div>\r\n\r\n    <\/figure>\r\n\r\n    <!-- ------- Pie con l\u00ednea + caption ------- -->\r\n    <div class=\"noyol-concept-section__foot\">\r\n      <span class=\"noyol-concept-section__rule\" aria-hidden=\"true\"><\/span>\r\n      <p class=\"noyol-concept-section__caption\">Un activo listo para integrarse al dinamismo de la zona.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- StageGrotesk (self-hosted) --- *\/\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Regular.ttf') format('truetype');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n    @font-face {\r\n      font-family: 'StageGrotesk';\r\n      src: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Medium.ttf') format('truetype');\r\n      font-weight: 500;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n\r\n    \/* --- Reset defensivo --- *\/\r\n    .noyol-concept-section,\r\n    .noyol-concept-section *,\r\n    .noyol-concept-section *::before,\r\n    .noyol-concept-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor: ocupa 100svh --- *\/\r\n    section.noyol-concept-section {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n      min-height: 100svh !important;\r\n      height: 100svh !important;\r\n      padding: clamp(1rem, 3vh, 2.5rem) clamp(1.25rem, 5vw, 5rem) !important;\r\n      margin: 0 !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    \/* --- Contenido interno: m\u00e1x 80svh --- *\/\r\n    .noyol-concept-section .noyol-concept-section__inner {\r\n      width: 100% !important;\r\n      max-width: 1180px !important;\r\n      height: 80svh !important;\r\n      max-height: 80svh !important;\r\n      margin: 0 auto !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      justify-content: center !important;\r\n      gap: clamp(0.75rem, 2.2vh, 1.75rem) !important;\r\n    }\r\n\r\n    \/* --- T\u00edtulo --- *\/\r\n    .noyol-concept-section .noyol-concept-section__header {\r\n      text-align: center !important;\r\n      flex: 0 0 auto !important;\r\n    }\r\n\r\n    .noyol-concept-section h2.noyol-concept-section__title {\r\n      font-family: 'StageGrotesk', sans-serif !important;\r\n      font-size: clamp(1.05rem, 1.8vw, 1.55rem) !important;\r\n      font-weight: 500 !important;\r\n      line-height: 1.3 !important;\r\n      letter-spacing: -0.005em !important;\r\n      color: #111 !important;\r\n      display: inline-block !important;\r\n      max-width: 720px !important;\r\n    }\r\n\r\n    .noyol-concept-section .noyol-concept-section__title-line {\r\n      display: block !important;\r\n      overflow: hidden !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    \/* --- Frame --- *\/\r\n    .noyol-concept-section figure.noyol-concept-section__frame {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      flex: 1 1 0 !important;\r\n      min-height: 0 !important;\r\n      height: 100% !important;\r\n      border-radius: 6px !important;\r\n      overflow: hidden !important;\r\n      background: #1a1a1a !important;\r\n      will-change: transform, opacity !important;\r\n      box-shadow:\r\n        0 30px 60px -30px rgba(0, 0, 0, 0.35),\r\n        0 10px 30px -10px rgba(0, 0, 0, 0.12) !important;\r\n      touch-action: pan-y !important;\r\n      -webkit-user-select: none !important;\r\n      user-select: none !important;\r\n      cursor: grab !important;\r\n    }\r\n\r\n    .noyol-concept-section figure.noyol-concept-section__frame.is-dragging {\r\n      cursor: grabbing !important;\r\n    }\r\n\r\n    \/* --- Track de im\u00e1genes (galer\u00eda sincronizada) --- *\/\r\n    .noyol-concept-section .noyol-concept-section__image-track {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      z-index: 0 !important;\r\n    }\r\n\r\n    .noyol-concept-section img.noyol-concept-section__image {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center !important;\r\n      display: block !important;\r\n      opacity: 0 !important;\r\n      transform: scale(1.015) !important;\r\n      transition: opacity 0.65s ease, transform 1.2s ease !important;\r\n      will-change: opacity, transform !important;\r\n      pointer-events: none !important;\r\n      -webkit-user-drag: none !important;\r\n    }\r\n\r\n    .noyol-concept-section img.noyol-concept-section__image.is-active {\r\n      opacity: 1 !important;\r\n      transform: scale(1) !important;\r\n    }\r\n\r\n    \/* Gradiente de legibilidad *\/\r\n    .noyol-concept-section .noyol-concept-section__overlay {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      pointer-events: none !important;\r\n      z-index: 1 !important;\r\n      background:\r\n        linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 28%),\r\n        linear-gradient(0deg,   rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%) !important;\r\n    }\r\n\r\n    \/* Tag superior derecho *\/\r\n    .noyol-concept-section .noyol-concept-section__tag {\r\n      position: absolute !important;\r\n      top: clamp(0.9rem, 2vw, 1.5rem) !important;\r\n      right: clamp(1rem, 2.2vw, 1.75rem) !important;\r\n      color: #ffffff !important;\r\n      font-family: 'StageGrotesk', sans-serif !important;\r\n      font-size: clamp(0.8rem, 1vw, 0.95rem) !important;\r\n      font-weight: 400 !important;\r\n      letter-spacing: 0.01em !important;\r\n      line-height: 1.2 !important;\r\n      text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important;\r\n      pointer-events: none !important;\r\n      z-index: 2 !important;\r\n      will-change: opacity, transform !important;\r\n    }\r\n\r\n    \/* Capa de texto inferior izquierdo \u2014 rotador sincronizado *\/\r\n    .noyol-concept-section .noyol-concept-section__concept {\r\n      position: absolute !important;\r\n      left: clamp(1rem, 3vw, 2.25rem) !important;\r\n      bottom: clamp(1rem, 3vw, 2.25rem) !important;\r\n      color: #ffffff !important;\r\n      font-family: 'StageGrotesk', sans-serif !important;\r\n      font-size: clamp(1.2rem, 2.1vw, 1.8rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -0.005em !important;\r\n      text-shadow: 0 2px 18px rgba(0,0,0,0.35) !important;\r\n      max-width: 70% !important;\r\n      min-height: 2.4em !important;\r\n      pointer-events: none !important;\r\n      z-index: 2 !important;\r\n    }\r\n\r\n    .noyol-concept-section .noyol-concept-section__concept-slide {\r\n      position: absolute !important;\r\n      left: 0 !important;\r\n      bottom: 0 !important;\r\n      opacity: 0 !important;\r\n      transform: translateY(10px) !important;\r\n      transition: opacity 0.55s ease, transform 0.55s ease !important;\r\n      will-change: opacity, transform !important;\r\n      pointer-events: none !important;\r\n    }\r\n\r\n    .noyol-concept-section .noyol-concept-section__concept-slide.is-active {\r\n      opacity: 1 !important;\r\n      transform: translateY(0) !important;\r\n    }\r\n\r\n    .noyol-concept-section .noyol-concept-section__concept-line {\r\n      display: block !important;\r\n      white-space: nowrap !important;\r\n    }\r\n\r\n    \/* Dots *\/\r\n    .noyol-concept-section .noyol-concept-section__dots {\r\n      position: absolute !important;\r\n      right: clamp(1rem, 2.2vw, 1.75rem) !important;\r\n      bottom: clamp(1rem, 3vw, 2.25rem) !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: 10px !important;\r\n      z-index: 3 !important;\r\n    }\r\n\r\n    .noyol-concept-section button.noyol-concept-section__dot {\r\n      width: 10px !important;\r\n      height: 10px !important;\r\n      min-width: 10px !important;\r\n      border-radius: 50% !important;\r\n      background: rgba(255, 255, 255, 0.45) !important;\r\n      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;\r\n      cursor: pointer !important;\r\n      padding: 0 !important;\r\n      transition: background 0.25s ease, width 0.3s ease, border-radius 0.3s ease !important;\r\n      -webkit-tap-highlight-color: transparent !important;\r\n    }\r\n\r\n    \/* \u00c1rea t\u00e1ctil ampliada en dispositivos touch *\/\r\n    .noyol-concept-section button.noyol-concept-section__dot::before {\r\n      content: '' !important;\r\n      position: absolute !important;\r\n      inset: -10px !important;\r\n      display: block !important;\r\n    }\r\n\r\n    .noyol-concept-section button.noyol-concept-section__dot {\r\n      position: relative !important;\r\n    }\r\n\r\n    .noyol-concept-section button.noyol-concept-section__dot:hover,\r\n    .noyol-concept-section button.noyol-concept-section__dot:focus-visible {\r\n      background: rgba(255, 255, 255, 0.85) !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    .noyol-concept-section button.noyol-concept-section__dot.is-active {\r\n      background: #ffffff !important;\r\n      width: 24px !important;\r\n      border-radius: 6px !important;\r\n    }\r\n\r\n    \/* --- Pie con regla + caption --- *\/\r\n    .noyol-concept-section .noyol-concept-section__foot {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: 1.25rem !important;\r\n      justify-content: flex-end !important;\r\n      padding-top: 0 !important;\r\n      flex: 0 0 auto !important;\r\n    }\r\n\r\n    .noyol-concept-section .noyol-concept-section__rule {\r\n      flex: 1 1 auto !important;\r\n      height: 1px !important;\r\n      background: rgba(0,0,0,0.15) !important;\r\n      display: block !important;\r\n      transform-origin: left center !important;\r\n      will-change: transform !important;\r\n    }\r\n\r\n    .noyol-concept-section p.noyol-concept-section__caption {\r\n      flex: 0 0 auto !important;\r\n      font-family: 'StageGrotesk', sans-serif !important;\r\n      font-size: clamp(0.85rem, 1vw, 1rem) !important;\r\n      color: #3a3a3a !important;\r\n      font-weight: 400 !important;\r\n      letter-spacing: 0.005em !important;\r\n      will-change: opacity, transform !important;\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    @media (max-width: 900px) {\r\n      .noyol-concept-section .noyol-concept-section__concept {\r\n        max-width: 85% !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .noyol-concept-section .noyol-concept-section__title-line {\r\n        display: inline !important;\r\n        overflow: visible !important;\r\n      }\r\n      .noyol-concept-section h2.noyol-concept-section__title {\r\n        max-width: 560px !important;\r\n        text-wrap: balance !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      section.noyol-concept-section {\r\n        padding: clamp(1rem, 3vh, 1.5rem) 1rem !important;\r\n        min-height: 100svh !important;\r\n        height: 100svh !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__inner {\r\n        height: 82svh !important;\r\n        max-height: 82svh !important;\r\n        gap: 1rem !important;\r\n      }\r\n      .noyol-concept-section figure.noyol-concept-section__frame {\r\n        border-radius: 4px !important;\r\n      }\r\n      .noyol-concept-section h2.noyol-concept-section__title {\r\n        font-size: clamp(0.95rem, 4vw, 1.2rem) !important;\r\n        line-height: 1.35 !important;\r\n        max-width: 420px !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__concept {\r\n        font-size: clamp(1rem, 4.6vw, 1.3rem) !important;\r\n        left: 1rem !important;\r\n        bottom: 1rem !important;\r\n        max-width: 88% !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__tag {\r\n        font-size: 0.68rem !important;\r\n        top: 0.75rem !important;\r\n        right: 0.85rem !important;\r\n        max-width: 45% !important;\r\n        text-align: right !important;\r\n        line-height: 1.25 !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__dots {\r\n        right: 1rem !important;\r\n        bottom: 1rem !important;\r\n        gap: 10px !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__foot {\r\n        flex-direction: column !important;\r\n        align-items: flex-end !important;\r\n        gap: 0.4rem !important;\r\n      }\r\n      .noyol-concept-section .noyol-concept-section__rule {\r\n        width: 100% !important;\r\n      }\r\n      .noyol-concept-section p.noyol-concept-section__caption {\r\n        font-size: 0.76rem !important;\r\n        text-align: right !important;\r\n      }\r\n    }\r\n\r\n    \/* --- Reduce motion --- *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-concept-section .noyol-concept-section__title-line,\r\n      .noyol-concept-section figure.noyol-concept-section__frame,\r\n      .noyol-concept-section .noyol-concept-section__tag,\r\n      .noyol-concept-section .noyol-concept-section__concept,\r\n      .noyol-concept-section .noyol-concept-section__concept-slide,\r\n      .noyol-concept-section .noyol-concept-section__concept-line,\r\n      .noyol-concept-section .noyol-concept-section__dot,\r\n      .noyol-concept-section .noyol-concept-section__caption,\r\n      .noyol-concept-section .noyol-concept-section__rule {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n      .noyol-concept-section img.noyol-concept-section__image,\r\n      .noyol-concept-section .noyol-concept-section__concept-slide {\r\n        transition: opacity 0.2s linear !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT: Rotador sincronizado + swipe + GSAP\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var section = document.querySelector('.noyol-concept-section');\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        return Promise.resolve()\r\n          .then(function () { return window.gsap ? null : loadScript(base + 'gsap.min.js'); })\r\n          .then(function () { return window.ScrollTrigger ? null : loadScript(base + 'ScrollTrigger.min.js'); });\r\n      }\r\n\r\n      \/\/ ---- Galer\u00eda sincronizada (imagen + texto) ----\r\n      var images     = Array.prototype.slice.call(section.querySelectorAll('.noyol-concept-section__image'));\r\n      var slides     = Array.prototype.slice.call(section.querySelectorAll('.noyol-concept-section__concept-slide'));\r\n      var dots       = Array.prototype.slice.call(section.querySelectorAll('.noyol-concept-section__dot'));\r\n      var frameEl    = section.querySelector('.noyol-concept-section__frame');\r\n      var total      = slides.length;\r\n      var rotatorIdx = 0;\r\n      var rotatorTimer = null;\r\n      var ROTATE_MS  = 4500;\r\n      var isRotating = false;\r\n\r\n      function setActiveSlide(idx) {\r\n        if (!total) return;\r\n        rotatorIdx = ((idx % total) + total) % total;\r\n\r\n        \/\/ Imagen + texto se actualizan al mismo tiempo\r\n        images.forEach(function (img, i) {\r\n          img.classList.toggle('is-active', i === rotatorIdx);\r\n        });\r\n        slides.forEach(function (s, i) {\r\n          s.classList.toggle('is-active', i === rotatorIdx);\r\n        });\r\n        dots.forEach(function (d, i) {\r\n          var active = i === rotatorIdx;\r\n          d.classList.toggle('is-active', active);\r\n          d.setAttribute('aria-selected', active ? 'true' : 'false');\r\n          d.setAttribute('tabindex', active ? '0' : '-1');\r\n        });\r\n      }\r\n\r\n      function stopRotator() {\r\n        if (rotatorTimer) {\r\n          clearInterval(rotatorTimer);\r\n          rotatorTimer = null;\r\n        }\r\n      }\r\n\r\n      function startRotator() {\r\n        if (prefersReduced) return;\r\n        stopRotator();\r\n        isRotating = true;\r\n        rotatorTimer = setInterval(function () {\r\n          setActiveSlide(rotatorIdx + 1);\r\n        }, ROTATE_MS);\r\n      }\r\n\r\n      \/\/ ---- Swipe t\u00e1ctil + puntero ----\r\n      function wireSwipe() {\r\n        if (!frameEl) return;\r\n\r\n        var startX = 0, startY = 0, deltaX = 0, deltaY = 0;\r\n        var isDown = false, isSwipe = false;\r\n        var SWIPE_THRESHOLD = 40;   \/\/ px para disparar cambio de slide\r\n        var LOCK_THRESHOLD  = 8;    \/\/ px para decidir si es swipe horizontal\r\n\r\n        function onPointerDown(ev) {\r\n          \/\/ ignora clics derechos y botones distintos al principal\r\n          if (ev.button != null && ev.button !== 0) return;\r\n          isDown = true;\r\n          isSwipe = false;\r\n          startX = ev.clientX;\r\n          startY = ev.clientY;\r\n          deltaX = 0;\r\n          deltaY = 0;\r\n          frameEl.classList.add('is-dragging');\r\n          \/\/ pausa la rotaci\u00f3n mientras el usuario interact\u00faa\r\n          stopRotator();\r\n          \/\/ captura el pointer para seguir recibiendo eventos fuera del elemento\r\n          if (ev.pointerId != null && frameEl.setPointerCapture) {\r\n            try { frameEl.setPointerCapture(ev.pointerId); } catch (_) {}\r\n          }\r\n        }\r\n\r\n        function onPointerMove(ev) {\r\n          if (!isDown) return;\r\n          deltaX = ev.clientX - startX;\r\n          deltaY = ev.clientY - startY;\r\n\r\n          \/\/ Decidir si el gesto es swipe horizontal (no scroll vertical)\r\n          if (!isSwipe && (Math.abs(deltaX) > LOCK_THRESHOLD || Math.abs(deltaY) > LOCK_THRESHOLD)) {\r\n            isSwipe = Math.abs(deltaX) > Math.abs(deltaY);\r\n          }\r\n\r\n          \/\/ Si es swipe horizontal, prevenir selecci\u00f3n de texto\r\n          if (isSwipe && ev.cancelable) {\r\n            ev.preventDefault();\r\n          }\r\n        }\r\n\r\n        function onPointerUp(ev) {\r\n          if (!isDown) return;\r\n          isDown = false;\r\n          frameEl.classList.remove('is-dragging');\r\n\r\n          if (ev.pointerId != null && frameEl.releasePointerCapture) {\r\n            try { frameEl.releasePointerCapture(ev.pointerId); } catch (_) {}\r\n          }\r\n\r\n          if (isSwipe && Math.abs(deltaX) > SWIPE_THRESHOLD) {\r\n            if (deltaX < 0) setActiveSlide(rotatorIdx + 1);\r\n            else            setActiveSlide(rotatorIdx - 1);\r\n          }\r\n\r\n          \/\/ Reanudar auto-rotaci\u00f3n\r\n          if (isRotating) startRotator();\r\n          isSwipe = false;\r\n        }\r\n\r\n        function onPointerCancel() {\r\n          isDown = false;\r\n          isSwipe = false;\r\n          frameEl.classList.remove('is-dragging');\r\n          if (isRotating) startRotator();\r\n        }\r\n\r\n        \/\/ Pointer events cubren touch + mouse + pen\r\n        if (window.PointerEvent) {\r\n          frameEl.addEventListener('pointerdown',   onPointerDown);\r\n          frameEl.addEventListener('pointermove',   onPointerMove, { passive: false });\r\n          frameEl.addEventListener('pointerup',     onPointerUp);\r\n          frameEl.addEventListener('pointercancel', onPointerCancel);\r\n          frameEl.addEventListener('pointerleave',  function () { if (isDown) onPointerCancel(); });\r\n        } else {\r\n          \/\/ Fallback: touch events\r\n          frameEl.addEventListener('touchstart', function (e) {\r\n            var t = e.touches[0];\r\n            onPointerDown({ clientX: t.clientX, clientY: t.clientY, button: 0, cancelable: e.cancelable });\r\n          }, { passive: true });\r\n          frameEl.addEventListener('touchmove', function (e) {\r\n            var t = e.touches[0];\r\n            onPointerMove({ clientX: t.clientX, clientY: t.clientY, cancelable: e.cancelable, preventDefault: function () { e.preventDefault(); } });\r\n          }, { passive: false });\r\n          frameEl.addEventListener('touchend', function () { onPointerUp({}); });\r\n          frameEl.addEventListener('touchcancel', onPointerCancel);\r\n        }\r\n\r\n        \/\/ Prevenir arrastre nativo de im\u00e1genes\r\n        images.forEach(function (img) {\r\n          img.addEventListener('dragstart', function (e) { e.preventDefault(); });\r\n        });\r\n      }\r\n\r\n      function wireDots() {\r\n        dots.forEach(function (dot, i) {\r\n          dot.addEventListener('click', function () {\r\n            setActiveSlide(i);\r\n            if (isRotating) startRotator();\r\n          });\r\n          dot.addEventListener('keydown', function (ev) {\r\n            if (ev.key === 'ArrowRight' || ev.key === 'ArrowDown') {\r\n              ev.preventDefault();\r\n              setActiveSlide(rotatorIdx + 1);\r\n              var next = dots[rotatorIdx]; if (next) next.focus();\r\n              if (isRotating) startRotator();\r\n            } else if (ev.key === 'ArrowLeft' || ev.key === 'ArrowUp') {\r\n              ev.preventDefault();\r\n              setActiveSlide(rotatorIdx - 1);\r\n              var prev = dots[rotatorIdx]; if (prev) prev.focus();\r\n              if (isRotating) startRotator();\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      function wireHoverPause() {\r\n        if (!frameEl) return;\r\n        \/\/ En desktop: pausa en hover\/focus\r\n        frameEl.addEventListener('mouseenter', stopRotator);\r\n        frameEl.addEventListener('mouseleave', function () { if (isRotating) startRotator(); });\r\n        frameEl.addEventListener('focusin',    stopRotator);\r\n        frameEl.addEventListener('focusout',   function () { if (isRotating) startRotator(); });\r\n\r\n        \/\/ Pausa cuando la pesta\u00f1a no est\u00e1 visible\r\n        document.addEventListener('visibilitychange', function () {\r\n          if (document.hidden) stopRotator();\r\n          else if (isRotating) startRotator();\r\n        });\r\n      }\r\n\r\n      function wireAll() {\r\n        wireDots();\r\n        wireSwipe();\r\n        wireHoverPause();\r\n      }\r\n\r\n      function run() {\r\n        wireAll();\r\n\r\n        if (prefersReduced || !window.gsap) {\r\n          if (!prefersReduced) startRotator();\r\n          return;\r\n        }\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var isNarrow = window.matchMedia &&\r\n          window.matchMedia('(max-width: 768px)').matches;\r\n\r\n        var title            = section.querySelector('.noyol-concept-section__title');\r\n        var titleLines       = section.querySelectorAll('.noyol-concept-section__title-line');\r\n        var frame            = section.querySelector('.noyol-concept-section__frame');\r\n        var tag              = section.querySelector('.noyol-concept-section__tag');\r\n        var conceptContainer = section.querySelector('.noyol-concept-section__concept');\r\n        var activeLines      = section.querySelectorAll('.noyol-concept-section__concept-slide.is-active .noyol-concept-section__concept-line');\r\n        var dotsEls          = section.querySelectorAll('.noyol-concept-section__dot');\r\n        var rule             = section.querySelector('.noyol-concept-section__rule');\r\n        var caption          = section.querySelector('.noyol-concept-section__caption');\r\n\r\n        if (isNarrow) {\r\n          gsap.set(title, { y: 20, opacity: 0 });\r\n        } else {\r\n          gsap.set(titleLines, { yPercent: 110, opacity: 0 });\r\n        }\r\n        gsap.set(frame,            { y: 40, opacity: 0, scale: 0.98 });\r\n        gsap.set(tag,              { y: -8, opacity: 0 });\r\n        gsap.set(conceptContainer, { opacity: 0 });\r\n        gsap.set(activeLines,      { yPercent: 110, opacity: 0 });\r\n        gsap.set(dotsEls,          { opacity: 0, y: 6 });\r\n        gsap.set(rule,             { scaleX: 0, opacity: 0 });\r\n        gsap.set(caption,          { y: 12, opacity: 0 });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 75%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined,\r\n          onComplete: function () { startRotator(); }\r\n        });\r\n\r\n        if (isNarrow) {\r\n          tl.to(title, { y: 0, opacity: 1, duration: 0.9 }, 0);\r\n        } else {\r\n          tl.to(titleLines, { yPercent: 0, opacity: 1, duration: 0.9, stagger: 0.1 }, 0);\r\n        }\r\n        tl.to(frame,            { y: 0, opacity: 1, scale: 1, duration: 1.1, ease: 'power4.out' }, 0.25);\r\n        tl.to(tag,              { y: 0, opacity: 1, duration: 0.7 }, 0.9);\r\n        tl.to(conceptContainer, { opacity: 1, duration: 0.4 }, 0.95);\r\n        tl.to(activeLines,      { yPercent: 0, opacity: 1, duration: 0.8, stagger: 0.1 }, 1.0);\r\n        tl.to(dotsEls,          { opacity: 1, y: 0, duration: 0.6, stagger: 0.08 }, 1.15);\r\n        tl.to(rule,             { scaleX: 1, opacity: 1, duration: 0.9, ease: 'power2.out' }, 1.1);\r\n        tl.to(caption,          { y: 0, opacity: 1, duration: 0.7 }, 1.25);\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        section.querySelectorAll(\r\n          '.noyol-concept-section__title-line,' +\r\n          '.noyol-concept-section__frame,' +\r\n          '.noyol-concept-section__tag,' +\r\n          '.noyol-concept-section__concept,' +\r\n          '.noyol-concept-section__concept-slide,' +\r\n          '.noyol-concept-section__concept-line,' +\r\n          '.noyol-concept-section__dot,' +\r\n          '.noyol-concept-section__rule,' +\r\n          '.noyol-concept-section__caption'\r\n        ).forEach(function (n) { n.style.opacity = '1'; n.style.transform = 'none'; });\r\n        wireAll();\r\n        if (!prefersReduced) startRotator();\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9a476dd e-con-full e-flex e-con e-parent\" data-id=\"9a476dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e43c60c elementor-widget elementor-widget-html\" data-id=\"e43c60c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<section class=\"noyol-refuge-section\" id=\"noyolRefugio\">\r\n\r\n  <div class=\"noyol-refuge-section__inner\">\r\n\r\n    <!-- ----- Card con borde dibujado ----- -->\r\n    <article class=\"noyol-refuge-section__card\" id=\"noyolRefugeCard\">\r\n\r\n      <!-- Borde SVG dibujado como <path> (se anima stroke-dashoffset) -->\r\n      <svg class=\"noyol-refuge-section__border\"\r\n           aria-hidden=\"true\"\r\n           xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <path class=\"noyol-refuge-section__border-path\"\r\n              fill=\"none\"\r\n              d=\"\"><\/path>\r\n      <\/svg>\r\n\r\n      <div class=\"noyol-refuge-section__content\">\r\n        <h2 class=\"noyol-refuge-section__title\">\r\n          <span class=\"noyol-refuge-section__title-line\">Refugio privado en el <\/span><span class=\"noyol-refuge-section__title-line\">centro de la ciudad<\/span>\r\n        <\/h2>\r\n\r\n        <div class=\"noyol-refuge-section__copy\">\r\n          <p class=\"noyol-refuge-section__paragraph\">\r\n            Tambi\u00e9n puede convertirse en una residencia exclusiva, donde la arquitectura,\r\n            la ubicaci\u00f3n y el estilo de vida convergen.\r\n          <\/p>\r\n          <p class=\"noyol-refuge-section__paragraph\">\r\n            Un espacio para habitar M\u00e9rida desde dentro, no desde la periferia.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- ----- Imagen (poster + GIF) ----- -->\r\n    <figure class=\"noyol-refuge-section__media\" aria-label=\"Residencia privada rodeada de vegetaci\u00f3n en el centro de M\u00e9rida\">\r\n      <!-- Poster: carga instant\u00e1nea mientras se descarga el GIF pesado -->\r\n      <img class=\"noyol-refuge-section__image noyol-refuge-section__image--poster\"\r\n           src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/DSC06530-HDR_11zon-scaled.jpg\"\r\n           alt=\"Vista exterior de residencia privada con jard\u00edn y vegetaci\u00f3n tropical\"\r\n           decoding=\"async\"\r\n           fetchpriority=\"high\" \/>\r\n      <!-- GIF animado: fade-in cuando termina de cargar -->\r\n      <img class=\"noyol-refuge-section__image noyol-refuge-section__image--gif\"\r\n           id=\"noyolRefugeGif\"\r\n           src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/loophabitacional-2.gif\"\r\n           alt=\"\"\r\n           aria-hidden=\"true\"\r\n           decoding=\"async\"\r\n           loading=\"lazy\" \/>\r\n      <!-- Indicador sutil de carga del GIF -->\r\n      <span class=\"noyol-refuge-section__loader\" aria-hidden=\"true\"><\/span>\r\n    <\/figure>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- Reset defensivo --- *\/\r\n    .noyol-refuge-section,\r\n    .noyol-refuge-section *,\r\n    .noyol-refuge-section *::before,\r\n    .noyol-refuge-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor: 100svh en PC y m\u00f3vil --- *\/\r\n    section.noyol-refuge-section {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n      height: 100svh !important;\r\n      max-height: 100svh !important;\r\n      min-height: 560px !important;\r\n      padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 4vw, 3.5rem) !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-refuge-section .noyol-refuge-section__inner {\r\n      width: 100% !important;\r\n      max-width: 1440px !important;\r\n      height: 100% !important;\r\n      display: grid !important;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;\r\n      gap: clamp(1rem, 2.5vw, 2.5rem) !important;\r\n    }\r\n\r\n    \/* --- Card con borde dibujado --- *\/\r\n    .noyol-refuge-section article.noyol-refuge-section__card {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      padding: clamp(1.75rem, 3.5vw, 3rem) !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      justify-content: space-between !important;\r\n      border-radius: 18px !important;\r\n      background: #ffffff !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-refuge-section svg.noyol-refuge-section__border {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      pointer-events: none !important;\r\n      border-radius: inherit !important;\r\n    }\r\n\r\n    .noyol-refuge-section path.noyol-refuge-section__border-path {\r\n      stroke: rgba(17, 17, 17, 0.22) !important;\r\n      stroke-width: 1.4 !important;\r\n      stroke-linecap: round !important;\r\n      stroke-linejoin: round !important;\r\n      vector-effect: non-scaling-stroke !important;\r\n      will-change: stroke-dashoffset !important;\r\n    }\r\n\r\n    .noyol-refuge-section .noyol-refuge-section__content {\r\n      position: relative !important;\r\n      z-index: 1 !important;\r\n      height: 100% !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      justify-content: space-between !important;\r\n      gap: 1.5rem !important;\r\n    }\r\n\r\n    \/* T\u00edtulo *\/\r\n    .noyol-refuge-section h2.noyol-refuge-section__title {\r\n      font-size: clamp(1.5rem, 2.3vw, 2.1rem) !important;\r\n      font-weight: 500 !important;\r\n      line-height: 1.2 !important;\r\n      letter-spacing: -0.01em !important;\r\n      color: #111 !important;\r\n      max-width: 440px !important;\r\n    }\r\n\r\n    .noyol-refuge-section .noyol-refuge-section__title-line {\r\n      display: block !important;\r\n      overflow: hidden !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    \/* P\u00e1rrafos al pie del card *\/\r\n    .noyol-refuge-section .noyol-refuge-section__copy {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 0.75rem !important;\r\n      max-width: 380px !important;\r\n    }\r\n\r\n    .noyol-refuge-section p.noyol-refuge-section__paragraph {\r\n      font-size: clamp(0.82rem, 0.95vw, 0.95rem) !important;\r\n      line-height: 1.55 !important;\r\n      color: #555 !important;\r\n      font-weight: 400 !important;\r\n      will-change: opacity, transform !important;\r\n    }\r\n\r\n    \/* --- Imagen --- *\/\r\n    .noyol-refuge-section figure.noyol-refuge-section__media {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      overflow: hidden !important;\r\n      border-radius: 18px !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-refuge-section img.noyol-refuge-section__image {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center !important;\r\n      display: block !important;\r\n      transform-origin: center !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    \/* Poster est\u00e1tico \u2014 siempre visible debajo del GIF *\/\r\n    .noyol-refuge-section img.noyol-refuge-section__image--poster {\r\n      z-index: 1 !important;\r\n    }\r\n\r\n    \/* GIF animado \u2014 oculto hasta que termina de cargar, luego fade-in *\/\r\n    .noyol-refuge-section img.noyol-refuge-section__image--gif {\r\n      z-index: 2 !important;\r\n      opacity: 0 !important;\r\n      transition: opacity 0.7s ease !important;\r\n    }\r\n\r\n    .noyol-refuge-section img.noyol-refuge-section__image--gif.is-ready {\r\n      opacity: 1 !important;\r\n    }\r\n\r\n    \/* Spinner discreto mientras descarga el GIF *\/\r\n    .noyol-refuge-section .noyol-refuge-section__loader {\r\n      position: absolute !important;\r\n      bottom: 14px !important;\r\n      right: 14px !important;\r\n      z-index: 3 !important;\r\n      width: 22px !important;\r\n      height: 22px !important;\r\n      border-radius: 50% !important;\r\n      border: 2px solid rgba(255, 255, 255, 0.45) !important;\r\n      border-top-color: #ffffff !important;\r\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;\r\n      animation: noyolRefugeSpin 0.9s linear infinite !important;\r\n      opacity: 1 !important;\r\n      transition: opacity 0.3s ease !important;\r\n      pointer-events: none !important;\r\n    }\r\n\r\n    .noyol-refuge-section figure.noyol-refuge-section__media.is-gif-ready .noyol-refuge-section__loader {\r\n      opacity: 0 !important;\r\n    }\r\n\r\n    @keyframes noyolRefugeSpin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    \/* Tablet: proporci\u00f3n m\u00e1s pareja entre card e imagen *\/\r\n    @media (max-width: 1024px) {\r\n      .noyol-refuge-section .noyol-refuge-section__inner {\r\n        grid-template-columns: 1fr 1fr !important;\r\n        gap: 1.25rem !important;\r\n      }\r\n      .noyol-refuge-section h2.noyol-refuge-section__title {\r\n        font-size: clamp(1.25rem, 2.6vw, 1.7rem) !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil grande: pasa a 2 filas (imagen arriba, card abajo) pero sigue dentro de 100svh *\/\r\n    @media (max-width: 768px) {\r\n      section.noyol-refuge-section {\r\n        padding: clamp(0.75rem, 3vw, 1.25rem) !important;\r\n        min-height: 520px !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__inner {\r\n        grid-template-columns: 1fr !important;\r\n        grid-template-rows: minmax(0, 48%) minmax(0, 52%) !important;\r\n        gap: 0.75rem !important;\r\n      }\r\n      \/* Invertir orden: imagen primero, card despu\u00e9s *\/\r\n      .noyol-refuge-section figure.noyol-refuge-section__media {\r\n        order: -1 !important;\r\n        border-radius: 14px !important;\r\n      }\r\n      .noyol-refuge-section article.noyol-refuge-section__card {\r\n        padding: 1.25rem !important;\r\n        border-radius: 14px !important;\r\n        gap: 1rem !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__content {\r\n        gap: 0.9rem !important;\r\n        justify-content: flex-start !important;\r\n      }\r\n      .noyol-refuge-section h2.noyol-refuge-section__title {\r\n        font-size: clamp(1.15rem, 5vw, 1.5rem) !important;\r\n        max-width: 100% !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__title-line {\r\n        display: inline !important;\r\n        overflow: visible !important;\r\n      }\r\n      .noyol-refuge-section p.noyol-refuge-section__paragraph {\r\n        font-size: clamp(0.78rem, 3vw, 0.88rem) !important;\r\n        line-height: 1.5 !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__copy {\r\n        gap: 0.5rem !important;\r\n        max-width: 100% !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 420px) {\r\n      section.noyol-refuge-section {\r\n        min-height: 480px !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__inner {\r\n        grid-template-rows: minmax(0, 42%) minmax(0, 58%) !important;\r\n      }\r\n      .noyol-refuge-section p.noyol-refuge-section__paragraph {\r\n        font-size: 0.8rem !important;\r\n      }\r\n    }\r\n\r\n    \/* Reduce motion *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-refuge-section path.noyol-refuge-section__border-path {\r\n        stroke-dasharray: none !important;\r\n        stroke-dashoffset: 0 !important;\r\n      }\r\n      .noyol-refuge-section .noyol-refuge-section__title-line,\r\n      .noyol-refuge-section p.noyol-refuge-section__paragraph,\r\n      .noyol-refuge-section figure.noyol-refuge-section__media,\r\n      .noyol-refuge-section img.noyol-refuge-section__image {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT: animaciones GSAP + dibujo del borde\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var section = document.querySelector('.noyol-refuge-section');\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        return Promise.resolve()\r\n          .then(function () { return window.gsap ? null : loadScript(base + 'gsap.min.js'); })\r\n          .then(function () { return window.ScrollTrigger ? null : loadScript(base + 'ScrollTrigger.min.js'); });\r\n      }\r\n\r\n      \/\/ Construye el atributo d para un rect\u00e1ngulo redondeado cerrado.\r\n      \/\/ Partimos arriba-izquierda despu\u00e9s del radio y trazamos en sentido horario.\r\n      function roundedRectPath(x, y, w, h, r) {\r\n        r = Math.max(0, Math.min(r, w \/ 2, h \/ 2));\r\n        return (\r\n          'M ' + (x + r) + ' ' + y +\r\n          ' H ' + (x + w - r) +\r\n          ' A ' + r + ' ' + r + ' 0 0 1 ' + (x + w) + ' ' + (y + r) +\r\n          ' V ' + (y + h - r) +\r\n          ' A ' + r + ' ' + r + ' 0 0 1 ' + (x + w - r) + ' ' + (y + h) +\r\n          ' H ' + (x + r) +\r\n          ' A ' + r + ' ' + r + ' 0 0 1 ' + x + ' ' + (y + h - r) +\r\n          ' V ' + (y + r) +\r\n          ' A ' + r + ' ' + r + ' 0 0 1 ' + (x + r) + ' ' + y +\r\n          ' Z'\r\n        );\r\n      }\r\n\r\n      \/\/ Sincroniza el SVG con el tama\u00f1o real del card y recalcula el path.\r\n      \/\/ Retorna la longitud total del path (para la animaci\u00f3n del dash).\r\n      function syncBorderPath(card, svg, path) {\r\n        if (!card || !svg || !path) return 0;\r\n        var rect = card.getBoundingClientRect();\r\n        var w = Math.max(1, Math.round(rect.width));\r\n        var h = Math.max(1, Math.round(rect.height));\r\n\r\n        \/\/ Leemos el border-radius real del card (en px) para que el path coincida.\r\n        var cs = window.getComputedStyle(card);\r\n        var radius = parseFloat(cs.borderTopLeftRadius) || 18;\r\n\r\n        \/\/ SVG con viewBox en px reales \u2192 stroke uniforme y sin deformaciones.\r\n        svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);\r\n        svg.setAttribute('width', w);\r\n        svg.setAttribute('height', h);\r\n        svg.setAttribute('preserveAspectRatio', 'none');\r\n\r\n        \/\/ Inset del stroke para que no se corte en los bordes.\r\n        var sw = 1.4;\r\n        var inset = sw \/ 2;\r\n\r\n        var d = roundedRectPath(inset, inset, w - sw, h - sw, Math.max(0, radius - inset));\r\n        path.setAttribute('d', d);\r\n\r\n        var len = 0;\r\n        try { len = path.getTotalLength(); } catch (e) { len = 2 * (w + h); }\r\n        return len;\r\n      }\r\n\r\n      function run() {\r\n        if (prefersReduced || !window.gsap) return;\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var isNarrow = window.matchMedia &&\r\n          window.matchMedia('(max-width: 768px)').matches;\r\n\r\n        var card         = section.querySelector('.noyol-refuge-section__card');\r\n        var title        = section.querySelector('.noyol-refuge-section__title');\r\n        var titleLines   = section.querySelectorAll('.noyol-refuge-section__title-line');\r\n        var paragraphs   = section.querySelectorAll('.noyol-refuge-section__paragraph');\r\n        var borderSvg    = section.querySelector('.noyol-refuge-section__border');\r\n        var borderPath   = section.querySelector('.noyol-refuge-section__border-path');\r\n        var media        = section.querySelector('.noyol-refuge-section__media');\r\n        var images       = section.querySelectorAll('.noyol-refuge-section__image');\r\n        var gifEl        = section.querySelector('#noyolRefugeGif');\r\n\r\n        \/\/ Fade-in del GIF cuando termine de cargar\r\n        function markGifReady() {\r\n          if (!gifEl) return;\r\n          gifEl.classList.add('is-ready');\r\n          gifEl.removeAttribute('aria-hidden');\r\n          if (media) media.classList.add('is-gif-ready');\r\n        }\r\n        if (gifEl) {\r\n          if (gifEl.complete && gifEl.naturalWidth > 0) {\r\n            markGifReady();\r\n          } else {\r\n            gifEl.addEventListener('load',  markGifReady);\r\n            gifEl.addEventListener('error', function () {\r\n              \/\/ Si el GIF falla, dejamos visible el poster y ocultamos el loader\r\n              if (media) media.classList.add('is-gif-ready');\r\n            });\r\n          }\r\n        }\r\n\r\n        \/\/ Estados iniciales\r\n        if (isNarrow) {\r\n          gsap.set(title, { y: 20, opacity: 0 });\r\n        } else {\r\n          gsap.set(titleLines, { yPercent: 110, opacity: 0 });\r\n        }\r\n        gsap.set(paragraphs, { y: 18, opacity: 0 });\r\n        gsap.set(media,      { opacity: 0, scale: 1.04 });\r\n        gsap.set(images,     { scale: 1.08 });\r\n\r\n        \/\/ Borde: sincronizamos path a las dimensiones reales del card\r\n        var pathLen = syncBorderPath(card, borderSvg, borderPath);\r\n        if (borderPath) {\r\n          gsap.set(borderPath, {\r\n            strokeDasharray: pathLen,\r\n            strokeDashoffset: pathLen\r\n          });\r\n        }\r\n\r\n        \/\/ Recalcula al redimensionar (sin romper la animaci\u00f3n si ya termin\u00f3)\r\n        var borderDone = false;\r\n        function handleResize() {\r\n          var newLen = syncBorderPath(card, borderSvg, borderPath);\r\n          if (!borderPath) return;\r\n          if (borderDone) {\r\n            gsap.set(borderPath, {\r\n              strokeDasharray: newLen,\r\n              strokeDashoffset: 0\r\n            });\r\n          } else {\r\n            gsap.set(borderPath, {\r\n              strokeDasharray: newLen,\r\n              strokeDashoffset: newLen\r\n            });\r\n            pathLen = newLen;\r\n          }\r\n          if (window.ScrollTrigger) ScrollTrigger.refresh();\r\n        }\r\n\r\n        var resizeTimer;\r\n        window.addEventListener('resize', function () {\r\n          clearTimeout(resizeTimer);\r\n          resizeTimer = setTimeout(handleResize, 120);\r\n        });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 70%',       \/\/ Arranca cuando la secci\u00f3n entra al 70% del viewport\r\n            toggleActions: 'play none none none'\r\n          } : undefined,\r\n          onComplete: function () { borderDone = true; }\r\n        });\r\n\r\n        \/\/ 1) Borde dibuj\u00e1ndose\r\n        if (borderPath) {\r\n          tl.to(borderPath, {\r\n            strokeDashoffset: 0,\r\n            duration: 1.8,\r\n            ease: 'power2.inOut'\r\n          }, 0);\r\n        }\r\n\r\n        \/\/ 2) Imagen aparece al mismo tiempo con zoom suave\r\n        tl.to(media, {\r\n          opacity: 1,\r\n          scale: 1,\r\n          duration: 1.2,\r\n          ease: 'power4.out'\r\n        }, 0.1);\r\n\r\n        tl.to(images, {\r\n          scale: 1,\r\n          duration: 2.4,\r\n          ease: 'power3.out'\r\n        }, 0.1);\r\n\r\n        \/\/ 3) T\u00edtulo\r\n        if (isNarrow) {\r\n          tl.to(title, { y: 0, opacity: 1, duration: 0.9 }, 0.5);\r\n        } else {\r\n          tl.to(titleLines, { yPercent: 0, opacity: 1, duration: 0.9, stagger: 0.1 }, 0.5);\r\n        }\r\n\r\n        \/\/ 4) P\u00e1rrafos\r\n        tl.to(paragraphs, {\r\n          y: 0,\r\n          opacity: 1,\r\n          duration: 0.8,\r\n          stagger: 0.12\r\n        }, 1.2);\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        \/\/ Fallback: todo visible + borde est\u00e1tico visible\r\n        section.querySelectorAll(\r\n          '.noyol-refuge-section__title-line,' +\r\n          '.noyol-refuge-section__paragraph,' +\r\n          '.noyol-refuge-section__media,' +\r\n          '.noyol-refuge-section__image'\r\n        ).forEach(function (n) { n.style.opacity = '1'; n.style.transform = 'none'; });\r\n        var card = section.querySelector('.noyol-refuge-section__card');\r\n        var svg  = section.querySelector('.noyol-refuge-section__border');\r\n        var p    = section.querySelector('.noyol-refuge-section__border-path');\r\n        if (card && svg && p) {\r\n          syncBorderPath(card, svg, p);\r\n          p.style.strokeDasharray  = 'none';\r\n          p.style.strokeDashoffset = '0';\r\n        }\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12c49f4 e-flex e-con-boxed e-con e-parent\" data-id=\"12c49f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-994ac57 elementor-widget elementor-widget-html\" data-id=\"994ac57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<section class=\"noyol-space-section\" id=\"noyolSpace\">\r\n\r\n  <div class=\"noyol-space-section__inner\">\r\n\r\n    <header class=\"noyol-space-section__header\">\r\n      <h2 class=\"noyol-space-section__title\">\r\n        <span class=\"noyol-space-section__title-line\">Amplitud, luz y atm&oacute;sfera<\/span>\r\n      <\/h2>\r\n      <p class=\"noyol-space-section__lead\">\r\n        Vegetaci&oacute;n, frescura y espacios abiertos son el mayor lujo de este inmueble.\r\n        La propiedad ofrece una experiencia que combina privacidad con conexi&oacute;n urbana.\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <!-- Galer\u00eda 2x4 -->\r\n    <ul class=\"noyol-space-section__grid\" role=\"list\">\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"0\" aria-label=\"Ver imagen 1 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/1-scaled.jpg\"\r\n               alt=\"Jard\u00edn con vegetaci\u00f3n tropical frente a la propiedad\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"1\" aria-label=\"Ver imagen 2 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/2.png\"\r\n               alt=\"Dormitorio principal amplio e iluminado\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"2\" aria-label=\"Ver imagen 3 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/3.png\"\r\n               alt=\"Sala interior con muro de piedra y techo alto\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"3\" aria-label=\"Ver imagen 4 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/4-scaled.jpg\"\r\n               alt=\"Patio con vegetaci\u00f3n densa y piso de pasta\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"4\" aria-label=\"Ver imagen 5 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/5-scaled.jpg\"\r\n               alt=\"Cocina integrada con gabinetes de madera\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"5\" aria-label=\"Ver imagen 6 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/6-scaled.jpg\"\r\n               alt=\"Pasillo exterior junto a alberca privada\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"6\" aria-label=\"Ver imagen 7 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/7-scaled.jpg\"\r\n               alt=\"Espacio interior luminoso con acceso al exterior\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n      <li class=\"noyol-space-section__item\">\r\n        <button class=\"noyol-space-section__tile\" type=\"button\" data-noyol-index=\"7\" aria-label=\"Ver imagen 8 ampliada\">\r\n          <img decoding=\"async\" class=\"noyol-space-section__img\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/8-scaled.jpg\"\r\n               alt=\"Cocina con gabinetes de madera y barra de trabajo\"\r\n               loading=\"lazy\" \/>\r\n        <\/button>\r\n      <\/li>\r\n    <\/ul>\r\n\r\n  <\/div>\r\n\r\n  <!-- ====== Lightbox ====== -->\r\n  <div class=\"noyol-space-section__lightbox\"\r\n       id=\"noyolSpaceLightbox\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\"\r\n       aria-label=\"Galer\u00eda ampliada\"\r\n       aria-hidden=\"true\">\r\n    <button class=\"noyol-space-section__lb-close\" type=\"button\" aria-label=\"Cerrar galer\u00eda\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M6 6 L18 18 M18 6 L6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n    <button class=\"noyol-space-section__lb-nav noyol-space-section__lb-nav--prev\" type=\"button\" aria-label=\"Imagen anterior\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M15 5 L8 12 L15 19\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n    <button class=\"noyol-space-section__lb-nav noyol-space-section__lb-nav--next\" type=\"button\" aria-label=\"Imagen siguiente\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n    <figure class=\"noyol-space-section__lb-figure\">\r\n      <img decoding=\"async\" class=\"noyol-space-section__lb-img\" src=\"\" alt=\"\" \/>\r\n      <figcaption class=\"noyol-space-section__lb-counter\"><span data-noyol-current>1<\/span> \/ <span data-noyol-total>8<\/span><\/figcaption>\r\n    <\/figure>\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- Reset defensivo --- *\/\r\n    .noyol-space-section,\r\n    .noyol-space-section *,\r\n    .noyol-space-section *::before,\r\n    .noyol-space-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor --- *\/\r\n    section.noyol-space-section {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n      height: 100svh !important;\r\n      max-height: 100svh !important;\r\n      min-height: 560px !important;\r\n      padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 4vw, 4rem) !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-space-section .noyol-space-section__inner {\r\n      width: 100% !important;\r\n      max-width: 1280px !important;\r\n      height: 100% !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: clamp(1rem, 2.5vh, 2rem) !important;\r\n    }\r\n\r\n    \/* --- Header --- *\/\r\n    .noyol-space-section .noyol-space-section__header {\r\n      text-align: center !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      gap: 0.6rem !important;\r\n      flex: 0 0 auto !important;\r\n    }\r\n\r\n    .noyol-space-section h2.noyol-space-section__title {\r\n      font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important;\r\n      font-weight: 500 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -0.015em !important;\r\n      color: #111 !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-space-section .noyol-space-section__title-line {\r\n      display: block !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-space-section p.noyol-space-section__lead {\r\n      font-size: clamp(0.82rem, 1vw, 0.98rem) !important;\r\n      line-height: 1.55 !important;\r\n      color: #555 !important;\r\n      max-width: 620px !important;\r\n      font-weight: 400 !important;\r\n      will-change: opacity, transform !important;\r\n    }\r\n\r\n    \/* --- Grid 2x4 --- *\/\r\n    .noyol-space-section ul.noyol-space-section__grid {\r\n      list-style: none !important;\r\n      display: grid !important;\r\n      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n      grid-auto-rows: 1fr !important;\r\n      gap: clamp(0.5rem, 1vw, 1rem) !important;\r\n      flex: 1 1 auto !important;\r\n      min-height: 0 !important;\r\n    }\r\n\r\n    .noyol-space-section li.noyol-space-section__item {\r\n      list-style: none !important;\r\n      min-height: 0 !important;\r\n      min-width: 0 !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__tile {\r\n      position: relative !important;\r\n      display: block !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      border-radius: 14px !important;\r\n      overflow: hidden !important;\r\n      cursor: pointer !important;\r\n      background: #f2efe9 !important;\r\n      transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__tile::after {\r\n      content: '' !important;\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      border-radius: inherit !important;\r\n      box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.04) !important;\r\n      pointer-events: none !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__tile:hover,\r\n    .noyol-space-section button.noyol-space-section__tile:focus-visible {\r\n      transform: translateY(-2px) !important;\r\n      box-shadow: 0 10px 30px -12px rgba(17, 17, 17, 0.25) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__tile:focus-visible {\r\n      outline: 2px solid #111 !important;\r\n      outline-offset: 3px !important;\r\n    }\r\n\r\n    .noyol-space-section img.noyol-space-section__img {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center !important;\r\n      display: block !important;\r\n      transition: transform 0.9s cubic-bezier(.2,.8,.2,1) !important;\r\n      will-change: transform !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__tile:hover img.noyol-space-section__img {\r\n      transform: scale(1.06) !important;\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    \/* Tablet *\/\r\n    @media (max-width: 1024px) {\r\n      .noyol-space-section ul.noyol-space-section__grid {\r\n        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil: 3 columnas *\/\r\n    @media (max-width: 768px) {\r\n      section.noyol-space-section {\r\n        padding: clamp(0.75rem, 2vh, 1.5rem) clamp(0.75rem, 3vw, 1.5rem) !important;\r\n        min-height: 540px !important;\r\n      }\r\n      .noyol-space-section ul.noyol-space-section__grid {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n        gap: 0.5rem !important;\r\n      }\r\n      .noyol-space-section button.noyol-space-section__tile {\r\n        border-radius: 10px !important;\r\n      }\r\n      .noyol-space-section h2.noyol-space-section__title {\r\n        font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;\r\n      }\r\n      .noyol-space-section p.noyol-space-section__lead {\r\n        font-size: clamp(0.75rem, 3.2vw, 0.88rem) !important;\r\n        padding: 0 0.5rem !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil peque\u00f1o: 2 columnas *\/\r\n    @media (max-width: 420px) {\r\n      .noyol-space-section ul.noyol-space-section__grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n        gap: 0.5rem !important;\r\n      }\r\n      .noyol-space-section .noyol-space-section__inner {\r\n        gap: 0.9rem !important;\r\n      }\r\n    }\r\n\r\n    \/* ============================================================\r\n       LIGHTBOX\r\n       ============================================================ *\/\r\n    .noyol-space-section .noyol-space-section__lightbox {\r\n      position: fixed !important;\r\n      inset: 0 !important;\r\n      z-index: 9999 !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      padding: clamp(1rem, 4vw, 3rem) !important;\r\n      background: rgba(10, 10, 10, 0.92) !important;\r\n      backdrop-filter: blur(6px) !important;\r\n      -webkit-backdrop-filter: blur(6px) !important;\r\n      opacity: 0 !important;\r\n      pointer-events: none !important;\r\n      transition: opacity 0.35s ease !important;\r\n    }\r\n\r\n    .noyol-space-section .noyol-space-section__lightbox.is-open {\r\n      opacity: 1 !important;\r\n      pointer-events: auto !important;\r\n    }\r\n\r\n    .noyol-space-section figure.noyol-space-section__lb-figure {\r\n      position: relative !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      max-width: min(1400px, 94vw) !important;\r\n      max-height: 90svh !important;\r\n      gap: 0.75rem !important;\r\n      transform: scale(0.96) !important;\r\n      transition: transform 0.4s cubic-bezier(.2,.8,.2,1) !important;\r\n    }\r\n\r\n    .noyol-space-section .noyol-space-section__lightbox.is-open figure.noyol-space-section__lb-figure {\r\n      transform: scale(1) !important;\r\n    }\r\n\r\n    .noyol-space-section img.noyol-space-section__lb-img {\r\n      display: block !important;\r\n      max-width: 100% !important;\r\n      max-height: 82svh !important;\r\n      width: auto !important;\r\n      height: auto !important;\r\n      object-fit: contain !important;\r\n      border-radius: 10px !important;\r\n      box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6) !important;\r\n    }\r\n\r\n    .noyol-space-section figcaption.noyol-space-section__lb-counter {\r\n      font-size: 0.82rem !important;\r\n      color: rgba(255, 255, 255, 0.75) !important;\r\n      letter-spacing: 0.05em !important;\r\n      font-variant-numeric: tabular-nums !important;\r\n    }\r\n\r\n    \/* Botones de control *\/\r\n    .noyol-space-section button.noyol-space-section__lb-close,\r\n    .noyol-space-section button.noyol-space-section__lb-nav {\r\n      position: absolute !important;\r\n      z-index: 2 !important;\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 44px !important;\r\n      height: 44px !important;\r\n      border-radius: 999px !important;\r\n      background: rgba(255, 255, 255, 0.12) !important;\r\n      color: #fff !important;\r\n      cursor: pointer !important;\r\n      transition: background 0.25s ease, transform 0.25s ease !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-close svg,\r\n    .noyol-space-section button.noyol-space-section__lb-nav svg {\r\n      width: 22px !important;\r\n      height: 22px !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-close:hover,\r\n    .noyol-space-section button.noyol-space-section__lb-nav:hover,\r\n    .noyol-space-section button.noyol-space-section__lb-close:focus-visible,\r\n    .noyol-space-section button.noyol-space-section__lb-nav:focus-visible {\r\n      background: rgba(255, 255, 255, 0.22) !important;\r\n      transform: scale(1.05) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-close {\r\n      top: clamp(0.75rem, 2vh, 1.25rem) !important;\r\n      right: clamp(0.75rem, 2vw, 1.25rem) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-nav--prev {\r\n      left: clamp(0.5rem, 2vw, 1.5rem) !important;\r\n      top: 50% !important;\r\n      transform: translateY(-50%) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-nav--next {\r\n      right: clamp(0.5rem, 2vw, 1.5rem) !important;\r\n      top: 50% !important;\r\n      transform: translateY(-50%) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-nav--prev:hover,\r\n    .noyol-space-section button.noyol-space-section__lb-nav--prev:focus-visible {\r\n      transform: translateY(-50%) scale(1.05) !important;\r\n    }\r\n\r\n    .noyol-space-section button.noyol-space-section__lb-nav--next:hover,\r\n    .noyol-space-section button.noyol-space-section__lb-nav--next:focus-visible {\r\n      transform: translateY(-50%) scale(1.05) !important;\r\n    }\r\n\r\n    \/* Bloqueo del scroll global mientras el lightbox est\u00e1 abierto *\/\r\n    body.noyol-space-section--locked {\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    \/* Reduce motion *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-space-section .noyol-space-section__title-line,\r\n      .noyol-space-section p.noyol-space-section__lead,\r\n      .noyol-space-section li.noyol-space-section__item {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n      .noyol-space-section button.noyol-space-section__tile,\r\n      .noyol-space-section img.noyol-space-section__img {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT: animaciones + lightbox\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var section = document.querySelector('.noyol-space-section');\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      \/\/ ---------- Lightbox ----------\r\n      var lightbox  = section.querySelector('.noyol-space-section__lightbox');\r\n      var lbImg     = section.querySelector('.noyol-space-section__lb-img');\r\n      var lbCurrent = section.querySelector('[data-noyol-current]');\r\n      var lbTotal   = section.querySelector('[data-noyol-total]');\r\n      var btnClose  = section.querySelector('.noyol-space-section__lb-close');\r\n      var btnPrev   = section.querySelector('.noyol-space-section__lb-nav--prev');\r\n      var btnNext   = section.querySelector('.noyol-space-section__lb-nav--next');\r\n      var tiles     = Array.prototype.slice.call(section.querySelectorAll('.noyol-space-section__tile'));\r\n\r\n      var images = tiles.map(function (btn) {\r\n        var img = btn.querySelector('img');\r\n        return { src: img ? img.src : '', alt: img ? img.alt : '' };\r\n      });\r\n\r\n      if (lbTotal) lbTotal.textContent = images.length;\r\n\r\n      var currentIndex = 0;\r\n      var lastFocused = null;\r\n\r\n      function openLightbox(i) {\r\n        currentIndex = i;\r\n        lastFocused = document.activeElement;\r\n        updateLightbox();\r\n        lightbox.classList.add('is-open');\r\n        lightbox.setAttribute('aria-hidden', 'false');\r\n        document.body.classList.add('noyol-space-section--locked');\r\n        if (btnClose) btnClose.focus();\r\n      }\r\n\r\n      function closeLightbox() {\r\n        lightbox.classList.remove('is-open');\r\n        lightbox.setAttribute('aria-hidden', 'true');\r\n        document.body.classList.remove('noyol-space-section--locked');\r\n        if (lastFocused && typeof lastFocused.focus === 'function') {\r\n          lastFocused.focus();\r\n        }\r\n      }\r\n\r\n      function updateLightbox() {\r\n        if (!images[currentIndex]) return;\r\n        \/\/ Pre-carga para suavizar el cambio\r\n        var preload = new Image();\r\n        preload.onload = function () {\r\n          lbImg.src = images[currentIndex].src;\r\n          lbImg.alt = images[currentIndex].alt;\r\n        };\r\n        preload.src = images[currentIndex].src;\r\n        \/\/ Fallback inmediato\r\n        lbImg.src = images[currentIndex].src;\r\n        lbImg.alt = images[currentIndex].alt;\r\n        if (lbCurrent) lbCurrent.textContent = currentIndex + 1;\r\n      }\r\n\r\n      function showNext() {\r\n        currentIndex = (currentIndex + 1) % images.length;\r\n        updateLightbox();\r\n      }\r\n\r\n      function showPrev() {\r\n        currentIndex = (currentIndex - 1 + images.length) % images.length;\r\n        updateLightbox();\r\n      }\r\n\r\n      tiles.forEach(function (btn, i) {\r\n        btn.addEventListener('click', function () { openLightbox(i); });\r\n      });\r\n\r\n      if (btnClose) btnClose.addEventListener('click', closeLightbox);\r\n      if (btnPrev)  btnPrev.addEventListener('click', showPrev);\r\n      if (btnNext)  btnNext.addEventListener('click', showNext);\r\n\r\n      \/\/ Click en el fondo del lightbox \u2192 cierra (pero no si el click es sobre la figura\/controles)\r\n      if (lightbox) {\r\n        lightbox.addEventListener('click', function (e) {\r\n          if (e.target === lightbox) closeLightbox();\r\n        });\r\n      }\r\n\r\n      \/\/ Teclado\r\n      document.addEventListener('keydown', function (e) {\r\n        if (!lightbox.classList.contains('is-open')) return;\r\n        if (e.key === 'Escape') closeLightbox();\r\n        else if (e.key === 'ArrowRight') showNext();\r\n        else if (e.key === 'ArrowLeft')  showPrev();\r\n      });\r\n\r\n      \/\/ Swipe t\u00e1ctil b\u00e1sico\r\n      var touchStartX = null;\r\n      if (lightbox) {\r\n        lightbox.addEventListener('touchstart', function (e) {\r\n          if (e.touches && e.touches.length === 1) touchStartX = e.touches[0].clientX;\r\n        }, { passive: true });\r\n        lightbox.addEventListener('touchend', function (e) {\r\n          if (touchStartX === null || !e.changedTouches || !e.changedTouches.length) return;\r\n          var dx = e.changedTouches[0].clientX - touchStartX;\r\n          if (Math.abs(dx) > 40) {\r\n            if (dx < 0) showNext(); else showPrev();\r\n          }\r\n          touchStartX = null;\r\n        });\r\n      }\r\n\r\n      \/\/ ---------- GSAP ----------\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        return Promise.resolve()\r\n          .then(function () { return window.gsap ? null : loadScript(base + 'gsap.min.js'); })\r\n          .then(function () { return window.ScrollTrigger ? null : loadScript(base + 'ScrollTrigger.min.js'); });\r\n      }\r\n\r\n      function run() {\r\n        if (prefersReduced || !window.gsap) return;\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var titleLine = section.querySelector('.noyol-space-section__title-line');\r\n        var lead      = section.querySelector('.noyol-space-section__lead');\r\n        var items     = section.querySelectorAll('.noyol-space-section__item');\r\n\r\n        \/\/ Orden aleatorio de aparici\u00f3n (Fisher\u2013Yates)\r\n        var shuffled = Array.prototype.slice.call(items);\r\n        for (var i = shuffled.length - 1; i > 0; i--) {\r\n          var j = Math.floor(Math.random() * (i + 1));\r\n          var tmp = shuffled[i];\r\n          shuffled[i] = shuffled[j];\r\n          shuffled[j] = tmp;\r\n        }\r\n\r\n        \/\/ Estados iniciales\r\n        gsap.set(titleLine, { yPercent: 110, opacity: 0 });\r\n        gsap.set(lead,      { y: 16, opacity: 0 });\r\n        gsap.set(items,     { opacity: 0, scale: 0.9, y: 18 });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 75%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        tl.to(titleLine, { yPercent: 0, opacity: 1, duration: 0.9 }, 0);\r\n        tl.to(lead,      { y: 0, opacity: 1, duration: 0.8 }, 0.2);\r\n\r\n        \/\/ Im\u00e1genes una por una en orden aleatorio\r\n        var perItem     = 0.14;   \/\/ tiempo entre apariciones\r\n        var itemDuration = 0.6;   \/\/ duraci\u00f3n de cada aparici\u00f3n\r\n        var startAt     = 0.5;    \/\/ despu\u00e9s del t\u00edtulo\/lead\r\n\r\n        shuffled.forEach(function (el, idx) {\r\n          tl.to(el, {\r\n            opacity: 1,\r\n            scale: 1,\r\n            y: 0,\r\n            duration: itemDuration,\r\n            ease: 'power3.out'\r\n          }, startAt + idx * perItem);\r\n        });\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        \/\/ Fallback: todo visible\r\n        section.querySelectorAll(\r\n          '.noyol-space-section__title-line,' +\r\n          '.noyol-space-section__lead,' +\r\n          '.noyol-space-section__item'\r\n        ).forEach(function (n) { n.style.opacity = '1'; n.style.transform = 'none'; });\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6bf9b9 e-flex e-con-boxed e-con e-parent\" data-id=\"f6bf9b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5e0d22 elementor-widget elementor-widget-html\" data-id=\"e5e0d22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<section class=\"noyol-spec-section\" id=\"noyolSpec\">\r\n\r\n  <div class=\"noyol-spec-section__inner\">\r\n\r\n    <!-- Columna izquierda: t\u00edtulo -->\r\n    <header class=\"noyol-spec-section__header\">\r\n      <h2 class=\"noyol-spec-section__title\" aria-label=\"C-47\">\r\n        <span class=\"noyol-spec-section__char noyol-spec-section__char--c\" aria-hidden=\"true\">C<\/span><span class=\"noyol-spec-section__char noyol-spec-section__char--dash\" aria-hidden=\"true\">-<\/span><span class=\"noyol-spec-section__char noyol-spec-section__char--num noyol-spec-section__char--four\" aria-hidden=\"true\">4<\/span><span class=\"noyol-spec-section__char noyol-spec-section__char--num noyol-spec-section__char--seven\" aria-hidden=\"true\">7<\/span>\r\n      <\/h2>\r\n      <p class=\"noyol-spec-section__subtitle\">\r\n        <span class=\"noyol-spec-section__title-line\">Ficha t&eacute;cnica<\/span>\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <!-- Columna derecha: lista de especificaciones -->\r\n    <ul class=\"noyol-spec-section__list\" role=\"list\">\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 18v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5\"\/>\r\n            <path d=\"M3 18v2\"\/>\r\n            <path d=\"M21 18v2\"\/>\r\n            <path d=\"M7 11V8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\"><span class=\"noyol-spec-section__count\" data-noyol-count=\"4\" data-noyol-decimals=\"0\">0<\/span> Rec&aacute;maras<\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/2.png\"\r\n               alt=\"Dormitorio principal amplio e iluminado\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"1.5\"\/>\r\n            <circle cx=\"8\" cy=\"8\" r=\"1.2\"\/>\r\n            <circle cx=\"16\" cy=\"8\" r=\"1.2\"\/>\r\n            <circle cx=\"8\" cy=\"16\" r=\"1.2\"\/>\r\n            <circle cx=\"16\" cy=\"16\" r=\"1.2\"\/>\r\n            <path d=\"M9 8h6\"\/>\r\n            <path d=\"M9 16h6\"\/>\r\n            <path d=\"M8 9v6\"\/>\r\n            <path d=\"M16 9v6\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\"><span class=\"noyol-spec-section__count\" data-noyol-count=\"784.2\" data-noyol-decimals=\"1\">0<\/span> m<sup>2<\/sup><\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/1-scaled.jpg\"\r\n               alt=\"Terreno con vegetaci\u00f3n tropical y jard\u00edn\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 12h18\"\/>\r\n            <path d=\"M3 12l3-3\"\/>\r\n            <path d=\"M3 12l3 3\"\/>\r\n            <path d=\"M21 12l-3-3\"\/>\r\n            <path d=\"M21 12l-3 3\"\/>\r\n            <path d=\"M5 6v12\"\/>\r\n            <path d=\"M19 6v12\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\"><span class=\"noyol-spec-section__count\" data-noyol-count=\"12\" data-noyol-decimals=\"0\">0<\/span> m de frente<\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/4-scaled.jpg\"\r\n               alt=\"Vegetaci\u00f3n densa en el frente de la propiedad\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M4 11l8-7 8 7\"\/>\r\n            <path d=\"M6 10v10h12V10\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\">Condici&oacute;n: Bueno<\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/3.png\"\r\n               alt=\"Sala interior bien conservada con muro de piedra\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 12h18v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-4z\"\/>\r\n            <path d=\"M6 12V7a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2\"\/>\r\n            <path d=\"M3 19l-1 2\"\/>\r\n            <path d=\"M21 19l1 2\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\"><span class=\"noyol-spec-section__count\" data-noyol-count=\"6\" data-noyol-decimals=\"0\">0<\/span> ba&ntilde;os<\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/8-scaled.jpg\"\r\n               alt=\"Espacio interior con barra y gabinetes de madera\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <rect x=\"3\" y=\"9\" width=\"18\" height=\"6\" rx=\"1\"\/>\r\n            <path d=\"M7 9v3\"\/>\r\n            <path d=\"M11 9v3\"\/>\r\n            <path d=\"M15 9v3\"\/>\r\n            <path d=\"M19 9v3\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\"><span class=\"noyol-spec-section__count\" data-noyol-count=\"65.35\" data-noyol-decimals=\"2\">0<\/span> m de largo<\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/6-scaled.jpg\"\r\n               alt=\"Pasillo exterior largo junto a alberca\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n      <li class=\"noyol-spec-section__row\">\r\n        <span class=\"noyol-spec-section__icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M12 3l9 4.5L12 12 3 7.5z\"\/>\r\n            <path d=\"M3 12l9 4.5L21 12\"\/>\r\n            <path d=\"M3 16.5L12 21l9-4.5\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <span class=\"noyol-spec-section__label\">Cantidad de pisos en el edificio: <span class=\"noyol-spec-section__count\" data-noyol-count=\"1\" data-noyol-decimals=\"0\">0<\/span><\/span>\r\n        <figure class=\"noyol-spec-section__thumb\">\r\n          <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/7-scaled.jpg\"\r\n               alt=\"Interior luminoso de la planta baja\" loading=\"lazy\" \/>\r\n        <\/figure>\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- Reset defensivo --- *\/\r\n    .noyol-spec-section,\r\n    .noyol-spec-section *,\r\n    .noyol-spec-section *::before,\r\n    .noyol-spec-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor (altura natural, sin pad\/margin superior ni inferior) --- *\/\r\n    section.noyol-spec-section {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n      height: auto !important;\r\n      min-height: 0 !important;\r\n      max-height: none !important;\r\n      margin-top: 0 !important;\r\n      margin-bottom: 0 !important;\r\n      padding-top: 0 !important;\r\n      padding-bottom: 0 !important;\r\n      padding-left: clamp(1rem, 4vw, 4rem) !important;\r\n      padding-right: clamp(1rem, 4vw, 4rem) !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__inner {\r\n      width: 100% !important;\r\n      max-width: 1200px !important;\r\n      height: auto !important;\r\n      display: grid !important;\r\n      grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.2fr) !important;\r\n      gap: clamp(1.5rem, 4vw, 4rem) !important;\r\n      align-items: start !important;\r\n    }\r\n\r\n    \/* --- Header (columna izquierda) --- *\/\r\n    .noyol-spec-section .noyol-spec-section__header {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 0.35rem !important;\r\n      padding-top: clamp(0.5rem, 1vh, 1rem) !important;\r\n    }\r\n\r\n    .noyol-spec-section h2.noyol-spec-section__title {\r\n      display: inline-flex !important;\r\n      align-items: baseline !important;\r\n      justify-content: flex-start !important;\r\n      font-size: clamp(1.75rem, 3.2vw, 2.75rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.1 !important;\r\n      letter-spacing: 0.02em !important;\r\n      color: #111 !important;\r\n      perspective: 1200px !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__char {\r\n      display: inline-block !important;\r\n      position: relative !important;\r\n      transform-style: preserve-3d !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__char--dash {\r\n      margin: 0 0.05em !important;\r\n      transform-origin: center center !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__char--num {\r\n      backface-visibility: hidden !important;\r\n    }\r\n\r\n    .noyol-spec-section p.noyol-spec-section__subtitle {\r\n      font-size: clamp(1rem, 1.3vw, 1.2rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.3 !important;\r\n      color: #444 !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__title-line {\r\n      display: block !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    \/* Contador num\u00e9rico *\/\r\n    .noyol-spec-section .noyol-spec-section__count {\r\n      display: inline-block !important;\r\n      font-variant-numeric: tabular-nums !important;\r\n      will-change: contents !important;\r\n    }\r\n\r\n    \/* --- Lista (columna derecha) --- *\/\r\n    .noyol-spec-section ul.noyol-spec-section__list {\r\n      list-style: none !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: clamp(0.45rem, 0.9vw, 0.75rem) !important;\r\n      width: 100% !important;\r\n      min-height: 0 !important;\r\n    }\r\n\r\n    .noyol-spec-section li.noyol-spec-section__row {\r\n      list-style: none !important;\r\n      display: grid !important;\r\n      grid-template-columns: auto 1fr minmax(140px, 28%) !important;\r\n      align-items: center !important;\r\n      gap: clamp(0.75rem, 1.4vw, 1.25rem) !important;\r\n      padding: clamp(0.65rem, 0.9vw, 0.9rem) clamp(0.75rem, 1.4vw, 1rem) !important;\r\n      border-radius: 14px !important;\r\n      background: #ffffff !important;\r\n      box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08) !important;\r\n      will-change: transform, opacity !important;\r\n      transition: box-shadow 0.35s ease, transform 0.35s ease !important;\r\n    }\r\n\r\n    .noyol-spec-section li.noyol-spec-section__row:hover {\r\n      box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.14), 0 10px 26px -14px rgba(17, 17, 17, 0.18) !important;\r\n      transform: translateY(-1px) !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__icon {\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: clamp(38px, 3vw, 46px) !important;\r\n      height: clamp(38px, 3vw, 46px) !important;\r\n      border-radius: 10px !important;\r\n      background: #111 !important;\r\n      color: #fff !important;\r\n      flex-shrink: 0 !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__icon svg {\r\n      width: 56% !important;\r\n      height: 56% !important;\r\n      display: block !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__label {\r\n      font-size: clamp(0.85rem, 1vw, 1rem) !important;\r\n      font-weight: 400 !important;\r\n      color: #111 !important;\r\n      line-height: 1.3 !important;\r\n    }\r\n\r\n    .noyol-spec-section .noyol-spec-section__label sup {\r\n      font-size: 0.7em !important;\r\n      vertical-align: super !important;\r\n    }\r\n\r\n    .noyol-spec-section figure.noyol-spec-section__thumb {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      height: clamp(48px, 4vw, 64px) !important;\r\n      border-radius: 10px !important;\r\n      overflow: hidden !important;\r\n      background: #f2efe9 !important;\r\n    }\r\n\r\n    .noyol-spec-section figure.noyol-spec-section__thumb img {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center !important;\r\n      display: block !important;\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    \/* Tablet *\/\r\n    @media (max-width: 1024px) {\r\n      .noyol-spec-section .noyol-spec-section__inner {\r\n        grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.4fr) !important;\r\n        gap: 2rem !important;\r\n      }\r\n      .noyol-spec-section li.noyol-spec-section__row {\r\n        grid-template-columns: auto 1fr minmax(110px, 26%) !important;\r\n      }\r\n    }\r\n\r\n    \/* M\u00f3vil: stacked *\/\r\n    @media (max-width: 768px) {\r\n      section.noyol-spec-section {\r\n        height: auto !important;\r\n        max-height: none !important;\r\n        min-height: 0 !important;\r\n        padding-top: 0 !important;\r\n        padding-bottom: 0 !important;\r\n        padding-left: clamp(0.75rem, 3vw, 1.25rem) !important;\r\n        padding-right: clamp(0.75rem, 3vw, 1.25rem) !important;\r\n      }\r\n      .noyol-spec-section .noyol-spec-section__inner {\r\n        grid-template-columns: 1fr !important;\r\n        grid-template-rows: auto auto !important;\r\n        gap: 0.9rem !important;\r\n        align-items: stretch !important;\r\n        height: auto !important;\r\n      }\r\n      .noyol-spec-section .noyol-spec-section__header {\r\n        padding-top: 0 !important;\r\n      }\r\n      .noyol-spec-section h2.noyol-spec-section__title {\r\n        font-size: clamp(1.4rem, 6vw, 2rem) !important;\r\n      }\r\n      .noyol-spec-section p.noyol-spec-section__subtitle {\r\n        font-size: clamp(0.9rem, 3.6vw, 1.05rem) !important;\r\n      }\r\n      .noyol-spec-section ul.noyol-spec-section__list {\r\n        gap: 0.5rem !important;\r\n        overflow: visible !important;\r\n      }\r\n      .noyol-spec-section li.noyol-spec-section__row {\r\n        grid-template-columns: auto 1fr minmax(110px, 32%) !important;\r\n        gap: 0.7rem !important;\r\n        padding: 0.6rem 0.75rem !important;\r\n        border-radius: 10px !important;\r\n      }\r\n      .noyol-spec-section .noyol-spec-section__icon {\r\n        width: 32px !important;\r\n        height: 32px !important;\r\n        border-radius: 8px !important;\r\n      }\r\n      .noyol-spec-section .noyol-spec-section__label {\r\n        font-size: 0.82rem !important;\r\n      }\r\n      .noyol-spec-section figure.noyol-spec-section__thumb {\r\n        height: clamp(48px, 6.5vh, 64px) !important;\r\n        border-radius: 8px !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 420px) {\r\n      .noyol-spec-section li.noyol-spec-section__row {\r\n        grid-template-columns: auto 1fr minmax(92px, 34%) !important;\r\n        gap: 0.5rem !important;\r\n      }\r\n      .noyol-spec-section .noyol-spec-section__label {\r\n        font-size: 0.78rem !important;\r\n      }\r\n      .noyol-spec-section figure.noyol-spec-section__thumb {\r\n        height: clamp(44px, 6vh, 56px) !important;\r\n      }\r\n    }\r\n\r\n    \/* Reduce motion *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-spec-section .noyol-spec-section__char,\r\n      .noyol-spec-section .noyol-spec-section__title-line,\r\n      .noyol-spec-section li.noyol-spec-section__row {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT: animaciones GSAP\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var section = document.querySelector('.noyol-spec-section');\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        return Promise.resolve()\r\n          .then(function () { return window.gsap ? null : loadScript(base + 'gsap.min.js'); })\r\n          .then(function () { return window.ScrollTrigger ? null : loadScript(base + 'ScrollTrigger.min.js'); });\r\n      }\r\n\r\n      \/\/ Formatea un n\u00famero con los decimales indicados (sin locale dependiente)\r\n      function formatCount(value, decimals) {\r\n        if (!isFinite(value)) return '0';\r\n        var fixed = Number(value).toFixed(decimals);\r\n        \/\/ Separador de miles opcional (no lo usamos para no cambiar el estilo)\r\n        return fixed;\r\n      }\r\n\r\n      \/\/ Muestra los valores finales de los contadores sin animar (reduce-motion \/ fallback)\r\n      function fillCountersImmediately() {\r\n        section.querySelectorAll('.noyol-spec-section__count').forEach(function (el) {\r\n          var target   = parseFloat(el.getAttribute('data-noyol-count')) || 0;\r\n          var decimals = parseInt(el.getAttribute('data-noyol-decimals'), 10) || 0;\r\n          el.textContent = formatCount(target, decimals);\r\n        });\r\n      }\r\n\r\n      function run() {\r\n        if (prefersReduced || !window.gsap) {\r\n          fillCountersImmediately();\r\n          return;\r\n        }\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        \/\/ Caracteres del t\u00edtulo C-47\r\n        var charC       = section.querySelector('.noyol-spec-section__char--c');\r\n        var charDash    = section.querySelector('.noyol-spec-section__char--dash');\r\n        var char4       = section.querySelector('.noyol-spec-section__char--four');\r\n        var char7       = section.querySelector('.noyol-spec-section__char--seven');\r\n        var subtitleLine = section.querySelector('.noyol-spec-section__subtitle .noyol-spec-section__title-line');\r\n        var rows        = section.querySelectorAll('.noyol-spec-section__row');\r\n        var counters    = section.querySelectorAll('.noyol-spec-section__count');\r\n\r\n        \/\/ Estado inicial del t\u00edtulo (mismo patr\u00f3n que el hero)\r\n        gsap.set(charC,         { opacity: 0, x: -18 });\r\n        gsap.set(charDash,      { opacity: 0, scaleX: 0, transformOrigin: '50% 50%' });\r\n        gsap.set(char4,         { opacity: 0, yPercent: 120, rotationX: -90, transformOrigin: '50% 50%' });\r\n        gsap.set(char7,         { opacity: 0, yPercent: -120, rotationX: 90, transformOrigin: '50% 50%' });\r\n        gsap.set(subtitleLine,  { yPercent: 110, opacity: 0 });\r\n        gsap.set(rows,          { x: -24, opacity: 0 });\r\n\r\n        \/\/ Estado inicial de los contadores (0 visual)\r\n        counters.forEach(function (el) {\r\n          var decimals = parseInt(el.getAttribute('data-noyol-decimals'), 10) || 0;\r\n          el.textContent = formatCount(0, decimals);\r\n        });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 75%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        \/\/ 1) \"C\" entra desde la izquierda\r\n        tl.to(charC,    { opacity: 1, x: 0, duration: 0.5 }, 0);\r\n        \/\/ 2) \"-\" se expande\r\n        tl.to(charDash, { opacity: 1, scaleX: 1, duration: 0.35, ease: 'power2.out' }, 0.35);\r\n        \/\/ 3) \"4\" gira desde abajo\r\n        tl.to(char4, {\r\n          opacity: 1, yPercent: 0, rotationX: 0,\r\n          duration: 0.85, ease: 'back.out(1.6)'\r\n        }, 0.6);\r\n        \/\/ 4) \"7\" gira desde arriba\r\n        tl.to(char7, {\r\n          opacity: 1, yPercent: 0, rotationX: 0,\r\n          duration: 0.85, ease: 'back.out(1.6)'\r\n        }, 0.8);\r\n        \/\/ 5) Subt\u00edtulo \"Ficha t\u00e9cnica\"\r\n        tl.to(subtitleLine, { yPercent: 0, opacity: 1, duration: 0.7, ease: 'power2.out' }, 1.1);\r\n        \/\/ 6) Filas\r\n        tl.to(rows, {\r\n          x: 0, opacity: 1, duration: 0.65, stagger: 0.08\r\n        }, 1.2);\r\n\r\n        \/\/ 7) Contadores \u2014 cada uno se anima cuando su fila aparece\r\n        counters.forEach(function (el, idx) {\r\n          var target   = parseFloat(el.getAttribute('data-noyol-count')) || 0;\r\n          var decimals = parseInt(el.getAttribute('data-noyol-decimals'), 10) || 0;\r\n          var proxy    = { v: 0 };\r\n          var duration = Math.max(0.9, Math.min(1.6, 0.6 + target \/ 800));\r\n          tl.to(proxy, {\r\n            v: target,\r\n            duration: duration,\r\n            ease: 'power2.out',\r\n            onUpdate: function () {\r\n              el.textContent = formatCount(proxy.v, decimals);\r\n            },\r\n            onComplete: function () {\r\n              el.textContent = formatCount(target, decimals);\r\n            }\r\n          }, 1.25 + idx * 0.08);\r\n        });\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        \/\/ Fallback: muestra los valores finales directamente\r\n        section.querySelectorAll('.noyol-spec-section__count').forEach(function (el) {\r\n          var target   = parseFloat(el.getAttribute('data-noyol-count')) || 0;\r\n          var decimals = parseInt(el.getAttribute('data-noyol-decimals'), 10) || 0;\r\n          el.textContent = formatCount(target, decimals);\r\n        });\r\n        section.querySelectorAll(\r\n          '.noyol-spec-section__char,' +\r\n          '.noyol-spec-section__title-line,' +\r\n          '.noyol-spec-section__row'\r\n        ).forEach(function (n) { n.style.opacity = '1'; n.style.transform = 'none'; });\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f2da63 e-flex e-con-boxed e-con e-parent\" data-id=\"6f2da63\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6c01b3 elementor-widget elementor-widget-html\" data-id=\"f6c01b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"noyol-cta-section\" id=\"noyolCta\">\r\n\r\n  <div class=\"noyol-cta-section__inner\">\r\n\r\n    <div class=\"noyol-cta-section__divider\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"noyol-cta-section__content\">\r\n\r\n      <!-- Texto -->\r\n      <div class=\"noyol-cta-section__text\">\r\n        <p class=\"noyol-cta-section__copy\">\r\n          Las propiedades con esta ubicaci&oacute;n, dimensiones y\r\n          flexibilidad son limitadas. Ser&aacute; un gusto poder ayudarte\r\n          a tomar la mejor decisi&oacute;n de inversi&oacute;n.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- Imagen + CTA -->\r\n      <div class=\"noyol-cta-section__visual\">\r\n        <figure class=\"noyol-cta-section__frame\">\r\n          <!-- Poster: captura est\u00e1tica que se ve al instante mientras descarga el GIF -->\r\n          <img class=\"noyol-cta-section__image noyol-cta-section__image--poster\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/1-scaled.jpg\"\r\n               alt=\"Jard\u00edn exterior de la propiedad C-47 con vegetaci\u00f3n tropical\"\r\n               decoding=\"async\"\r\n               fetchpriority=\"high\" \/>\r\n          <!-- GIF animado: aparece con fade cuando termina de cargar -->\r\n          <img class=\"noyol-cta-section__image noyol-cta-section__image--gif\"\r\n               id=\"noyolCtaGif\"\r\n               src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/loopcomercial-2-1.gif\"\r\n               alt=\"\"\r\n               aria-hidden=\"true\"\r\n               decoding=\"async\"\r\n               loading=\"lazy\" \/>\r\n          <!-- Indicador sutil de carga del GIF -->\r\n          <span class=\"noyol-cta-section__loader\" aria-hidden=\"true\"><\/span>\r\n        <\/figure>\r\n        <div class=\"noyol-cta-section__actions\">\r\n          <button type=\"button\"\r\n                  class=\"noyol-cta-section__btn\"\r\n                  id=\"noyolCtaOpen\"\r\n                  aria-haspopup=\"dialog\"\r\n                  aria-controls=\"noyolCtaForm\">\r\n            Agendar cita privada\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       Formulario (modal)\r\n       ============================================================ -->\r\n  <div class=\"noyol-cta-section__modal\"\r\n       id=\"noyolCtaForm\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\"\r\n       aria-labelledby=\"noyolCtaFormTitle\"\r\n       aria-hidden=\"true\">\r\n    <div class=\"noyol-cta-section__modal-card\" role=\"document\">\r\n      <button type=\"button\"\r\n              class=\"noyol-cta-section__modal-close\"\r\n              id=\"noyolCtaClose\"\r\n              aria-label=\"Cerrar formulario\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M6 6 L18 18 M18 6 L6 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <header class=\"noyol-cta-section__modal-header\">\r\n        <h3 class=\"noyol-cta-section__modal-title\" id=\"noyolCtaFormTitle\">Agendar cita privada<\/h3>\r\n        <p class=\"noyol-cta-section__modal-sub\">\r\n          D&eacute;janos tus datos y te contactamos por WhatsApp.\r\n        <\/p>\r\n      <\/header>\r\n\r\n      <form class=\"noyol-cta-section__form\" id=\"noyolCtaFormEl\" novalidate>\r\n        <label class=\"noyol-cta-section__field\">\r\n          <span class=\"noyol-cta-section__field-label\">Nombre<\/span>\r\n          <input class=\"noyol-cta-section__input\"\r\n                 type=\"text\"\r\n                 name=\"name\"\r\n                 id=\"noyolCtaName\"\r\n                 autocomplete=\"name\"\r\n                 required\r\n                 placeholder=\"Tu nombre completo\" \/>\r\n        <\/label>\r\n\r\n        <label class=\"noyol-cta-section__field\">\r\n          <span class=\"noyol-cta-section__field-label\">Correo electr&oacute;nico<\/span>\r\n          <input class=\"noyol-cta-section__input\"\r\n                 type=\"email\"\r\n                 name=\"email\"\r\n                 id=\"noyolCtaEmail\"\r\n                 autocomplete=\"email\"\r\n                 required\r\n                 placeholder=\"tu@correo.com\" \/>\r\n        <\/label>\r\n\r\n        <p class=\"noyol-cta-section__form-error\" id=\"noyolCtaError\" role=\"alert\" hidden>\r\n          Revisa los campos: ingresa tu nombre y un correo v&aacute;lido.\r\n        <\/p>\r\n\r\n        <button type=\"submit\" class=\"noyol-cta-section__submit\">\r\n          <svg class=\"noyol-cta-section__wa-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path fill=\"currentColor\" d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.402h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.002-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.83 9.83 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.82 11.82 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.891c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.88 11.88 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.48-8.414\"\/>\r\n          <\/svg>\r\n          Enviar por WhatsApp\r\n        <\/button>\r\n\r\n        <p class=\"noyol-cta-section__legal\">\r\n          Al continuar aceptas ser contactado por nuestro equipo comercial.\r\n        <\/p>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ============================================================\r\n       ESTILOS AISLADOS\r\n       ============================================================ -->\r\n  <style>\r\n    \/* --- Reset defensivo --- *\/\r\n    .noyol-cta-section,\r\n    .noyol-cta-section *,\r\n    .noyol-cta-section *::before,\r\n    .noyol-cta-section *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      outline: 0;\r\n      background: transparent;\r\n      font-family: 'StageGrotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* --- Contenedor: 100svh --- *\/\r\n    section.noyol-cta-section {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n      height: 100svh !important;\r\n      max-height: 100svh !important;\r\n      min-height: 560px !important;\r\n      padding: 0 clamp(1rem, 4vw, 4rem) !important;\r\n      margin: 0 !important;\r\n      background: #ffffff !important;\r\n      color: #111 !important;\r\n      position: relative !important;\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    \/* --- Contenido interno: m\u00e1x 80svh --- *\/\r\n    .noyol-cta-section .noyol-cta-section__inner {\r\n      width: 100% !important;\r\n      max-width: 1200px !important;\r\n      max-height: 80svh !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      justify-content: center !important;\r\n      gap: clamp(1.5rem, 4vh, 3rem) !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__divider {\r\n      width: 100% !important;\r\n      height: 1px !important;\r\n      background: rgba(17, 17, 17, 0.2) !important;\r\n      transform-origin: left center !important;\r\n      will-change: transform !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__content {\r\n      display: grid !important;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;\r\n      gap: clamp(1.5rem, 4vw, 4rem) !important;\r\n      align-items: center !important;\r\n    }\r\n\r\n    \/* Texto *\/\r\n    .noyol-cta-section .noyol-cta-section__text {\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-cta-section p.noyol-cta-section__copy {\r\n      font-size: clamp(1.15rem, 2.2vw, 1.9rem) !important;\r\n      font-weight: 400 !important;\r\n      line-height: 1.35 !important;\r\n      letter-spacing: -0.005em !important;\r\n      color: #111 !important;\r\n      max-width: 520px !important;\r\n    }\r\n\r\n    \/* Visual *\/\r\n    .noyol-cta-section .noyol-cta-section__visual {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: flex-end !important;\r\n      gap: clamp(0.75rem, 1.5vh, 1.25rem) !important;\r\n      width: 100% !important;\r\n    }\r\n\r\n    .noyol-cta-section figure.noyol-cta-section__frame {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      aspect-ratio: 16 \/ 10 !important;\r\n      max-height: 60svh !important;\r\n      border-radius: 18px !important;\r\n      overflow: hidden !important;\r\n      background: #f2efe9 !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-cta-section img.noyol-cta-section__image {\r\n      position: absolute !important;\r\n      inset: 0 !important;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center !important;\r\n      display: block !important;\r\n      transform-origin: center !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    \/* Poster est\u00e1tico siempre visible debajo del GIF *\/\r\n    .noyol-cta-section img.noyol-cta-section__image--poster {\r\n      z-index: 1 !important;\r\n    }\r\n\r\n    \/* GIF animado: oculto hasta que termina de cargar, luego fade *\/\r\n    .noyol-cta-section img.noyol-cta-section__image--gif {\r\n      z-index: 2 !important;\r\n      opacity: 0 !important;\r\n      transition: opacity 0.7s ease !important;\r\n    }\r\n\r\n    .noyol-cta-section img.noyol-cta-section__image--gif.is-ready {\r\n      opacity: 1 !important;\r\n    }\r\n\r\n    \/* Peque\u00f1o loader giratorio mientras descarga el GIF *\/\r\n    .noyol-cta-section .noyol-cta-section__loader {\r\n      position: absolute !important;\r\n      bottom: 14px !important;\r\n      right: 14px !important;\r\n      z-index: 3 !important;\r\n      width: 22px !important;\r\n      height: 22px !important;\r\n      border-radius: 50% !important;\r\n      border: 2px solid rgba(255, 255, 255, 0.45) !important;\r\n      border-top-color: #ffffff !important;\r\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;\r\n      animation: noyolCtaSpin 0.9s linear infinite !important;\r\n      opacity: 1 !important;\r\n      transition: opacity 0.3s ease !important;\r\n      pointer-events: none !important;\r\n    }\r\n\r\n    .noyol-cta-section figure.noyol-cta-section__frame.is-gif-ready .noyol-cta-section__loader {\r\n      opacity: 0 !important;\r\n    }\r\n\r\n    @keyframes noyolCtaSpin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__actions {\r\n      display: flex !important;\r\n      justify-content: flex-end !important;\r\n      width: 100% !important;\r\n      will-change: transform, opacity !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__btn {\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      padding: 0.7rem 1.2rem !important;\r\n      background: #111 !important;\r\n      color: #ffffff !important;\r\n      font-size: clamp(0.82rem, 0.95vw, 0.95rem) !important;\r\n      font-weight: 500 !important;\r\n      letter-spacing: 0.01em !important;\r\n      border-radius: 10px !important;\r\n      cursor: pointer !important;\r\n      transition: background 0.25s ease, transform 0.25s ease !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__btn:hover,\r\n    .noyol-cta-section button.noyol-cta-section__btn:focus-visible {\r\n      background: #000 !important;\r\n      transform: translateY(-1px) !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__btn:focus-visible {\r\n      outline: 2px solid #111 !important;\r\n      outline-offset: 3px !important;\r\n    }\r\n\r\n    \/* --- Responsive --- *\/\r\n    @media (max-width: 900px) {\r\n      .noyol-cta-section .noyol-cta-section__content {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 1.25rem !important;\r\n      }\r\n      .noyol-cta-section p.noyol-cta-section__copy {\r\n        max-width: 100% !important;\r\n      }\r\n      .noyol-cta-section .noyol-cta-section__visual {\r\n        align-items: stretch !important;\r\n      }\r\n      .noyol-cta-section .noyol-cta-section__actions {\r\n        justify-content: center !important;\r\n      }\r\n      .noyol-cta-section button.noyol-cta-section__btn {\r\n        width: 100% !important;\r\n        padding: 0.85rem 1rem !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      section.noyol-cta-section {\r\n        padding: 0 clamp(0.75rem, 3vw, 1.5rem) !important;\r\n        min-height: 520px !important;\r\n      }\r\n      .noyol-cta-section p.noyol-cta-section__copy {\r\n        font-size: clamp(1rem, 4.4vw, 1.25rem) !important;\r\n        line-height: 1.4 !important;\r\n      }\r\n      .noyol-cta-section figure.noyol-cta-section__frame {\r\n        aspect-ratio: 4 \/ 3 !important;\r\n        max-height: 44svh !important;\r\n        border-radius: 14px !important;\r\n      }\r\n    }\r\n\r\n    \/* ============================================================\r\n       MODAL \/ FORMULARIO\r\n       ============================================================ *\/\r\n    .noyol-cta-section .noyol-cta-section__modal {\r\n      position: fixed !important;\r\n      inset: 0 !important;\r\n      z-index: 10000 !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      padding: clamp(1rem, 4vw, 2.5rem) !important;\r\n      background: rgba(10, 10, 10, 0.55) !important;\r\n      backdrop-filter: blur(6px) !important;\r\n      -webkit-backdrop-filter: blur(6px) !important;\r\n      opacity: 0 !important;\r\n      pointer-events: none !important;\r\n      transition: opacity 0.3s ease !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__modal.is-open {\r\n      opacity: 1 !important;\r\n      pointer-events: auto !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__modal-card {\r\n      position: relative !important;\r\n      width: 100% !important;\r\n      max-width: 460px !important;\r\n      background: #ffffff !important;\r\n      border-radius: 18px !important;\r\n      padding: clamp(1.5rem, 3vw, 2rem) !important;\r\n      box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.4) !important;\r\n      transform: translateY(18px) scale(0.98) !important;\r\n      transition: transform 0.35s cubic-bezier(.2,.8,.2,1) !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__modal.is-open .noyol-cta-section__modal-card {\r\n      transform: translateY(0) scale(1) !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__modal-close {\r\n      position: absolute !important;\r\n      top: 14px !important;\r\n      right: 14px !important;\r\n      width: 36px !important;\r\n      height: 36px !important;\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      border-radius: 50% !important;\r\n      background: rgba(17, 17, 17, 0.06) !important;\r\n      color: #111 !important;\r\n      cursor: pointer !important;\r\n      transition: background 0.2s ease !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__modal-close svg {\r\n      width: 18px !important;\r\n      height: 18px !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__modal-close:hover,\r\n    .noyol-cta-section button.noyol-cta-section__modal-close:focus-visible {\r\n      background: rgba(17, 17, 17, 0.12) !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__modal-header {\r\n      margin-bottom: 1.25rem !important;\r\n      padding-right: 2.5rem !important;\r\n    }\r\n\r\n    .noyol-cta-section h3.noyol-cta-section__modal-title {\r\n      font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;\r\n      font-weight: 500 !important;\r\n      color: #111 !important;\r\n      line-height: 1.2 !important;\r\n      margin-bottom: 0.35rem !important;\r\n    }\r\n\r\n    .noyol-cta-section p.noyol-cta-section__modal-sub {\r\n      font-size: 0.88rem !important;\r\n      color: #555 !important;\r\n      line-height: 1.45 !important;\r\n    }\r\n\r\n    .noyol-cta-section form.noyol-cta-section__form {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 0.85rem !important;\r\n    }\r\n\r\n    .noyol-cta-section label.noyol-cta-section__field {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 0.35rem !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__field-label {\r\n      font-size: 0.78rem !important;\r\n      font-weight: 500 !important;\r\n      color: #333 !important;\r\n      letter-spacing: 0.01em !important;\r\n    }\r\n\r\n    .noyol-cta-section input.noyol-cta-section__input {\r\n      width: 100% !important;\r\n      padding: 0.7rem 0.85rem !important;\r\n      font-size: 0.95rem !important;\r\n      color: #111 !important;\r\n      background: #f7f5f0 !important;\r\n      border-radius: 10px !important;\r\n      box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.1) !important;\r\n      transition: box-shadow 0.2s ease, background 0.2s ease !important;\r\n      font-family: inherit !important;\r\n    }\r\n\r\n    .noyol-cta-section input.noyol-cta-section__input::placeholder {\r\n      color: rgba(17, 17, 17, 0.4) !important;\r\n    }\r\n\r\n    .noyol-cta-section input.noyol-cta-section__input:focus {\r\n      background: #ffffff !important;\r\n      box-shadow: inset 0 0 0 2px #111 !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    .noyol-cta-section p.noyol-cta-section__form-error {\r\n      font-size: 0.82rem !important;\r\n      color: #b00020 !important;\r\n      line-height: 1.4 !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__submit {\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      gap: 0.5rem !important;\r\n      width: 100% !important;\r\n      padding: 0.9rem 1rem !important;\r\n      margin-top: 0.35rem !important;\r\n      background: #25D366 !important;\r\n      color: #ffffff !important;\r\n      font-size: 0.95rem !important;\r\n      font-weight: 500 !important;\r\n      letter-spacing: 0.01em !important;\r\n      border-radius: 10px !important;\r\n      cursor: pointer !important;\r\n      transition: background 0.2s ease, transform 0.2s ease !important;\r\n    }\r\n\r\n    .noyol-cta-section button.noyol-cta-section__submit:hover,\r\n    .noyol-cta-section button.noyol-cta-section__submit:focus-visible {\r\n      background: #1ebe57 !important;\r\n      transform: translateY(-1px) !important;\r\n    }\r\n\r\n    .noyol-cta-section .noyol-cta-section__wa-icon {\r\n      width: 18px !important;\r\n      height: 18px !important;\r\n    }\r\n\r\n    .noyol-cta-section p.noyol-cta-section__legal {\r\n      font-size: 0.72rem !important;\r\n      color: #777 !important;\r\n      line-height: 1.4 !important;\r\n      text-align: center !important;\r\n      margin-top: 0.25rem !important;\r\n    }\r\n\r\n    body.noyol-cta-section--locked {\r\n      overflow: hidden !important;\r\n    }\r\n\r\n    \/* Reduce motion *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .noyol-cta-section .noyol-cta-section__divider,\r\n      .noyol-cta-section .noyol-cta-section__text,\r\n      .noyol-cta-section figure.noyol-cta-section__frame,\r\n      .noyol-cta-section .noyol-cta-section__actions {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- ============================================================\r\n       SCRIPT: animaciones + modal + WhatsApp\r\n       ============================================================ -->\r\n  <script>\r\n    (function () {\r\n      var section = document.querySelector('.noyol-cta-section');\r\n      if (!section) return;\r\n\r\n      var prefersReduced = window.matchMedia &&\r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      \/\/ ---------- Swap GIF cuando termine de cargar ----------\r\n      var gifEl   = section.querySelector('#noyolCtaGif');\r\n      var frameEl = section.querySelector('.noyol-cta-section__frame');\r\n\r\n      function markGifReady() {\r\n        if (!gifEl) return;\r\n        gifEl.classList.add('is-ready');\r\n        gifEl.removeAttribute('aria-hidden');\r\n        if (frameEl) frameEl.classList.add('is-gif-ready');\r\n      }\r\n\r\n      if (gifEl) {\r\n        \/\/ Si el GIF ya estaba cacheado, el evento load no se dispara.\r\n        if (gifEl.complete && gifEl.naturalWidth > 0) {\r\n          markGifReady();\r\n        } else {\r\n          gifEl.addEventListener('load',  markGifReady);\r\n          gifEl.addEventListener('error', function () {\r\n            \/\/ Si falla, dejamos el poster visible y quitamos el loader.\r\n            if (frameEl) frameEl.classList.add('is-gif-ready');\r\n          });\r\n        }\r\n      }\r\n\r\n      \/\/ ---------- Modal \/ formulario ----------\r\n      var modal     = section.querySelector('#noyolCtaForm');\r\n      var openBtn   = section.querySelector('#noyolCtaOpen');\r\n      var closeBtn  = section.querySelector('#noyolCtaClose');\r\n      var formEl    = section.querySelector('#noyolCtaFormEl');\r\n      var nameInput = section.querySelector('#noyolCtaName');\r\n      var mailInput = section.querySelector('#noyolCtaEmail');\r\n      var errorEl   = section.querySelector('#noyolCtaError');\r\n\r\n      var WHATSAPP_NUMBER = '529991452611'; \/\/ +52 999 145 2611\r\n      var lastFocused = null;\r\n\r\n      function openModal() {\r\n        lastFocused = document.activeElement;\r\n        modal.classList.add('is-open');\r\n        modal.setAttribute('aria-hidden', 'false');\r\n        document.body.classList.add('noyol-cta-section--locked');\r\n        setTimeout(function () { if (nameInput) nameInput.focus(); }, 120);\r\n      }\r\n\r\n      function closeModal() {\r\n        modal.classList.remove('is-open');\r\n        modal.setAttribute('aria-hidden', 'true');\r\n        document.body.classList.remove('noyol-cta-section--locked');\r\n        if (errorEl) errorEl.hidden = true;\r\n        if (lastFocused && typeof lastFocused.focus === 'function') {\r\n          lastFocused.focus();\r\n        }\r\n      }\r\n\r\n      if (openBtn)  openBtn.addEventListener('click', openModal);\r\n      if (closeBtn) closeBtn.addEventListener('click', closeModal);\r\n      if (modal) {\r\n        modal.addEventListener('click', function (e) {\r\n          if (e.target === modal) closeModal();\r\n        });\r\n      }\r\n      document.addEventListener('keydown', function (e) {\r\n        if (modal.classList.contains('is-open') && e.key === 'Escape') closeModal();\r\n      });\r\n\r\n      function isValidEmail(v) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(v);\r\n      }\r\n\r\n      \/\/ Detecta si es un dispositivo m\u00f3vil para elegir el deep link correcto.\r\n      function isMobileDevice() {\r\n        var ua = navigator.userAgent || navigator.vendor || '';\r\n        if (\/android|iphone|ipad|ipod|windows phone|iemobile|mobile\/i.test(ua)) return true;\r\n        \/\/ iPadOS 13+ se reporta como Mac; detecta por touch.\r\n        if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) return true;\r\n        return false;\r\n      }\r\n\r\n      \/\/ Abre WhatsApp sin pasar por la pantalla de verificaci\u00f3n de wa.me.\r\n      \/\/ - M\u00f3vil: whatsapp:\/\/send abre la app nativa directo.\r\n      \/\/ - Desktop: web.whatsapp.com\/send abre WhatsApp Web directo al chat.\r\n      function openWhatsApp(number, message) {\r\n        var encoded = encodeURIComponent(message);\r\n        var mobile  = isMobileDevice();\r\n\r\n        if (mobile) {\r\n          \/\/ Deep link nativo. Si el usuario no tiene la app, el navegador\r\n          \/\/ mostrar\u00e1 un error \u2014 en ese caso hacemos fallback a wa.me.\r\n          var nativeUrl = 'whatsapp:\/\/send?phone=' + number + '&text=' + encoded;\r\n          var fallback  = 'https:\/\/wa.me\/' + number + '?text=' + encoded;\r\n\r\n          \/\/ Intento con location.href para que sea la misma pesta\u00f1a\r\n          \/\/ (evita que el popup blocker cancele la navegaci\u00f3n).\r\n          var didBlur = false;\r\n          var onBlur = function () { didBlur = true; };\r\n          window.addEventListener('blur', onBlur, { once: true });\r\n\r\n          window.location.href = nativeUrl;\r\n\r\n          \/\/ Si en 1.2s el navegador no cambi\u00f3 de foco (no abri\u00f3 la app),\r\n          \/\/ caemos al link universal de WhatsApp.\r\n          setTimeout(function () {\r\n            window.removeEventListener('blur', onBlur);\r\n            if (!didBlur) window.location.href = fallback;\r\n          }, 1200);\r\n        } else {\r\n          \/\/ Desktop: WhatsApp Web abre directo al chat si el usuario est\u00e1 logueado.\r\n          var webUrl = 'https:\/\/web.whatsapp.com\/send?phone=' + number + '&text=' + encoded;\r\n          window.open(webUrl, '_blank', 'noopener,noreferrer');\r\n        }\r\n      }\r\n\r\n      if (formEl) {\r\n        formEl.addEventListener('submit', function (e) {\r\n          e.preventDefault();\r\n          var name  = (nameInput.value || '').trim();\r\n          var email = (mailInput.value || '').trim();\r\n\r\n          if (!name || !isValidEmail(email)) {\r\n            if (errorEl) errorEl.hidden = false;\r\n            if (!name) nameInput.focus();\r\n            else if (!isValidEmail(email)) mailInput.focus();\r\n            return;\r\n          }\r\n          if (errorEl) errorEl.hidden = true;\r\n\r\n          var message =\r\n            'Quiero m\u00e1s informaci\u00f3n de C-47\\n' +\r\n            'Nombre: ' + name + '\\n' +\r\n            'Correo: ' + email;\r\n\r\n          openWhatsApp(WHATSAPP_NUMBER, message);\r\n        });\r\n      }\r\n\r\n      \/\/ ---------- GSAP ----------\r\n      function loadScript(src) {\r\n        return new Promise(function (resolve, reject) {\r\n          if (document.querySelector('script[data-noyol-src=\"' + src + '\"]')) {\r\n            return resolve();\r\n          }\r\n          var s = document.createElement('script');\r\n          s.src = src;\r\n          s.async = true;\r\n          s.setAttribute('data-noyol-src', src);\r\n          s.onload = resolve;\r\n          s.onerror = reject;\r\n          document.head.appendChild(s);\r\n        });\r\n      }\r\n\r\n      function ensureGsap() {\r\n        if (window.gsap && window.ScrollTrigger) return Promise.resolve();\r\n        var base = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/';\r\n        return Promise.resolve()\r\n          .then(function () { return window.gsap ? null : loadScript(base + 'gsap.min.js'); })\r\n          .then(function () { return window.ScrollTrigger ? null : loadScript(base + 'ScrollTrigger.min.js'); });\r\n      }\r\n\r\n      function run() {\r\n        if (prefersReduced || !window.gsap) return;\r\n        if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n        var divider = section.querySelector('.noyol-cta-section__divider');\r\n        var text    = section.querySelector('.noyol-cta-section__text');\r\n        var frame   = section.querySelector('.noyol-cta-section__frame');\r\n        var images  = section.querySelectorAll('.noyol-cta-section__image');\r\n        var actions = section.querySelector('.noyol-cta-section__actions');\r\n\r\n        gsap.set(divider, { scaleX: 0 });\r\n        gsap.set(text,    { y: 24, opacity: 0 });\r\n        gsap.set(frame,   { opacity: 0, scale: 1.04 });\r\n        gsap.set(images,  { scale: 1.08 });\r\n        gsap.set(actions, { y: 16, opacity: 0 });\r\n\r\n        var tl = gsap.timeline({\r\n          defaults: { ease: 'power3.out' },\r\n          scrollTrigger: window.ScrollTrigger ? {\r\n            trigger: section,\r\n            start: 'top 75%',\r\n            toggleActions: 'play none none none'\r\n          } : undefined\r\n        });\r\n\r\n        tl.to(divider, { scaleX: 1, duration: 1.1, ease: 'power2.inOut' }, 0);\r\n        tl.to(text,    { y: 0, opacity: 1, duration: 0.9 }, 0.2);\r\n        tl.to(frame,   { opacity: 1, scale: 1, duration: 1.1, ease: 'power4.out' }, 0.25);\r\n        tl.to(images,  { scale: 1, duration: 2.2, ease: 'power3.out' }, 0.25);\r\n        tl.to(actions, { y: 0, opacity: 1, duration: 0.7 }, 0.9);\r\n      }\r\n\r\n      ensureGsap().then(run).catch(function () {\r\n        section.querySelectorAll(\r\n          '.noyol-cta-section__divider,' +\r\n          '.noyol-cta-section__text,' +\r\n          '.noyol-cta-section__frame,' +\r\n          '.noyol-cta-section__actions'\r\n        ).forEach(function (n) { n.style.opacity = '1'; n.style.transform = 'none'; });\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>\n<p>    @font-face {<br \/>\n      font-family: &#8216;StageGrotesk&#8217;;<br \/>\n      src: url(&#8216;https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Light.ttf&#8217;) format(&#8216;truetype&#8217;);<br \/>\n      font-weight: 300;<br \/>\n      font-style: normal;<br \/>\n      font-display: swap;<br \/>\n    }<br \/>\n    @font-face {<br \/>\n      font-family: &#8216;StageGrotesk&#8217;;<br \/>\n      src: url(&#8216;https:\/\/noyolbr.com\/wp-content\/uploads\/2026\/04\/StageGrotesk-Regular.ttf&#8217;) format(&#8216;truetype&#8217;);<br \/>\n      font-weight: 400;<br \/>\n      font-style: normal;<br \/>\n [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3770","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/comments?post=3770"}],"version-history":[{"count":133,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3770\/revisions"}],"predecessor-version":[{"id":3962,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3770\/revisions\/3962"}],"wp:attachment":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/media?parent=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}