{"id":3545,"date":"2025-11-14T21:50:21","date_gmt":"2025-11-14T21:50:21","guid":{"rendered":"https:\/\/noyolbr.com\/?page_id=3545"},"modified":"2025-11-21T20:03:25","modified_gmt":"2025-11-21T20:03:25","slug":"domenca","status":"publish","type":"page","link":"https:\/\/noyolbr.com\/index.php\/domenca\/","title":{"rendered":"Domenca"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3545\" class=\"elementor elementor-3545\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91a7a7e e-con-full e-flex e-con e-parent\" data-id=\"91a7a7e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9993767 elementor-widget elementor-widget-html\" data-id=\"9993767\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"DomenicaHero1\" class=\"DH1-root\">\r\n  <style>\r\n    \/* Fonts *\/\r\n    @font-face {\r\n      font-family: 'Stage Grotesk';\r\n      src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk.woff2') format('woff2');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&display=swap');\r\n\r\n    \/* Reset scoped to component *\/\r\n    #DomenicaHero1,\r\n    #DomenicaHero1 *,\r\n    #DomenicaHero1 *::before,\r\n    #DomenicaHero1 *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    #DomenicaHero1.DH1-root {\r\n      position: relative;\r\n      width: 100%;\r\n      background-color: #f9f1e6; \/* crema inferior *\/\r\n      color: #ffffff;\r\n      font-family: 'Stage Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      overflow: hidden;\r\n\r\n      \/* Default text sizes (overwritten by JS) *\/\r\n      --DH1-header-size: 0.68rem;\r\n      --DH1-title-size: 2.1rem;\r\n      --DH1-subtitle-size: 1.7rem;\r\n      --DH1-description-size: 0.72rem;\r\n      --DH1-cta-size: 0.72rem;\r\n      --DH1-bottom-size: 1.6rem;\r\n    }\r\n\r\n    \/* Top hero (foto de playa) *\/\r\n    #DomenicaHero1 .DH1-top {\r\n      position: relative;\r\n      min-height: 90vh;\r\n      background-image: url('https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/MAIN_HEADER31-1.gif');\r\n      background-size: cover;\r\n      background-position: center bottom;\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-top::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(\r\n        180deg,\r\n        rgba(0, 0, 0, 0.35) 0%,\r\n        rgba(0, 0, 0, 0.10) 35%,\r\n        rgba(0, 0, 0, 0.55) 100%\r\n      );\r\n      z-index: 0;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-top-inner {\r\n      position: relative;\r\n      z-index: 1;\r\n      width: 100%;\r\n      max-width: 1120px;\r\n      margin: 0 auto;\r\n      padding: 20% 1.75rem 5.5rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: flex-start;\r\n      gap: 3.5rem;\r\n    }\r\n\r\n    \/* Header *\/\r\n    #DomenicaHero1 .DH1-header {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      font-size: var(--DH1-header-size, 0.68rem) !important;\r\n      letter-spacing: 0.16em !important;\r\n      text-transform: uppercase !important;\r\n      opacity: 0.92;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-header-side {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-header-left {\r\n      display: none;\r\n      text-align: left;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-header-right {\r\n      display: block;\r\n      text-align: right;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-header-center {\r\n      flex: 0 0 auto;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n    }\r\n\r\n    \/* Logo 20% m\u00e1s peque\u00f1o *\/\r\n    #DomenicaHero1 .DH1-logo {\r\n      height: 32px; \/* mobile default *\/\r\n      width: auto;\r\n      display: block;\r\n    }\r\n\r\n    \/* Main text *\/\r\n    #DomenicaHero1 .DH1-main {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-main-inner {\r\n      width: 100%;\r\n      max-width: 640px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 1.25rem;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-title,\r\n    #DomenicaHero1 .DH1-subtitle,\r\n    #DomenicaHero1 .DH1-bottom-line {\r\n      font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;\r\n      font-weight: 400;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-title {\r\n      font-size: var(--DH1-title-size, 2.1rem) !important;\r\n      letter-spacing: 0.02em;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-subtitle {\r\n      font-size: var(--DH1-subtitle-size, 1.7rem) !important;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-subtitle em,\r\n    #DomenicaHero1 .DH1-bottom-line em {\r\n      font-style: italic;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-description {\r\n      margin-top: 0.25rem;\r\n      font-size: var(--DH1-description-size, 0.72rem) !important;\r\n      letter-spacing: 0.24em !important;\r\n      text-transform: uppercase !important;\r\n      line-height: 1.8;\r\n      opacity: 0.96;\r\n    }\r\n\r\n    \/* CTA sin borde, solo texto *\/\r\n    #DomenicaHero1 .DH1-cta {\r\n      margin-top: 1.6rem;\r\n      padding: 0.25rem 0;\r\n      border-radius: 0;\r\n      border: none;\r\n      background-color: transparent;\r\n      color: #ffffff;\r\n      font-size: var(--DH1-cta-size, 0.72rem) !important;\r\n      letter-spacing: 0.25em !important;\r\n      text-transform: uppercase !important;\r\n      cursor: pointer;\r\n      transition: all 0.25s ease-out;\r\n      font-family: inherit;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-cta:hover {\r\n      transform: translateY(-1px);\r\n      text-decoration: underline;\r\n    }\r\n\r\n    \/* Scroll circle hacia abajo *\/\r\n    #DomenicaHero1 .DH1-scroll-circle {\r\n      margin-top: 1.5rem;\r\n      width: 42px;\r\n      height: 42px;\r\n      border-radius: 999px;\r\n      border: 1px solid rgba(255, 255, 255, 0.85);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n      transition: all 0.25s ease-out;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-scroll-circle:hover {\r\n      background-color: rgba(255, 255, 255, 0.10);\r\n      transform: translateY(2px);\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-scroll-icon {\r\n      font-size: 0.95rem !important;\r\n      line-height: 1;\r\n    }\r\n\r\n    \/* Circle overlap (sello naranja) *\/\r\n    #DomenicaHero1 .DH1-circle-wrap {\r\n      position: relative;\r\n      z-index: 3;\r\n      display: flex;\r\n      justify-content: center;\r\n      margin-top: -2.8rem;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-circle {\r\n      width: 90px;\r\n      aspect-ratio: 1 \/ 1;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-circle img {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: block;\r\n      object-fit: contain;\r\n    }\r\n\r\n    \/* Bottom cream block *\/\r\n    #DomenicaHero1 .DH1-bottom {\r\n      position: relative;\r\n      z-index: 2;\r\n      background-color: #f9f1e6;\r\n      padding: 10% 1.75rem 4rem;\r\n      text-align: center;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-bottom-inner {\r\n      max-width: 720px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-bottom-line {\r\n      font-size: var(--DH1-bottom-size, 1.6rem) !important;\r\n      line-height: 1.3;\r\n      color: #e5412a;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-bottom-line:first-child {\r\n      margin-bottom: 0.15em;\r\n    }\r\n\r\n    \/* Simple fade-up animation *\/\r\n    @keyframes DH1-fadeUp {\r\n      from {\r\n        opacity: 0;\r\n        transform: translateY(26px);\r\n      }\r\n      to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-main-inner > * {\r\n      opacity: 0;\r\n      animation: DH1-fadeUp 0.9s ease-out forwards;\r\n    }\r\n\r\n    #DomenicaHero1 .DH1-title { animation-delay: 0.1s; }\r\n    #DomenicaHero1 .DH1-subtitle { animation-delay: 0.3s; }\r\n    #DomenicaHero1 .DH1-description { animation-delay: 0.5s; }\r\n    #DomenicaHero1 .DH1-cta { animation-delay: 0.7s; }\r\n    #DomenicaHero1 .DH1-scroll-circle { animation-delay: 0.85s; opacity: 0; }\r\n    #DomenicaHero1 .DH1-circle-wrap { opacity: 0; animation: DH1-fadeUp 0.9s ease-out forwards; animation-delay: 1s; }\r\n    #DomenicaHero1 .DH1-bottom-inner { opacity: 0; animation: DH1-fadeUp 0.9s ease-out forwards; animation-delay: 1.15s; }\r\n\r\n    #DomenicaHero1 .DH1-scroll-circle {\r\n      animation-name: DH1-fadeUp;\r\n    }\r\n\r\n    \/* Mobile (ajustes de proporci\u00f3n y altura) *\/\r\n    @media (max-width: 767px) {\r\n      #DomenicaHero1 .DH1-top {\r\n        min-height: 90vh;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-top-inner {\r\n        padding-top: 20%;\r\n      }\r\n    }\r\n\r\n    \/* Tablet & up *\/\r\n    @media (min-width: 768px) {\r\n      #DomenicaHero1 .DH1-top {\r\n        min-height: 72vh;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-top-inner {\r\n        padding: 10% 2.5rem 6rem;\r\n        gap: 4rem;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-logo {\r\n        height: 42px; \/* antes 52px *\/\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-circle {\r\n        width: 110px;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-circle-wrap {\r\n        margin-top: -3.4rem;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-bottom {\r\n        padding: 10% 1.75rem 4.5rem;\r\n      }\r\n    }\r\n\r\n    \/* Desktop ancho *\/\r\n    @media (min-width: 1024px) {\r\n      #DomenicaHero1 .DH1-header-left {\r\n        display: block;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-top-inner {\r\n        padding: 10% 3.25rem 6rem;\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-logo {\r\n        height: 48px; \/* antes 60px *\/\r\n      }\r\n\r\n      #DomenicaHero1 .DH1-circle {\r\n        width: 130px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- Top hero -->\r\n  <section class=\"DH1-top\" aria-label=\"DOMENICA vida tropical\">\r\n    <div class=\"DH1-top-inner\">\r\n      <header class=\"DH1-header\">\r\n        <div class=\"DH1-header-side DH1-header-left\">DOMENCA<br>BY <strong>NOYOL<\/strong><\/div>\r\n        <div class=\"DH1-header-center\">\r\n          <img decoding=\"async\" class=\"DH1-logo\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Logo1.png\" alt=\"DOMENICA by NOYOL\">\r\n        <\/div>\r\n        <div class=\"DH1-header-side DH1-header-right\">UN PARA\u00cdSO<br>INOLVIDABLE<\/div>\r\n      <\/header>\r\n\r\n      <div class=\"DH1-main\">\r\n        <div class=\"DH1-main-inner\">\r\n          <p class=\"DH1-title\">Bienvenido a DOMENCA,<\/p>\r\n          <p class=\"DH1-subtitle\">vida <em>tropical<\/em>...<\/p>\r\n          <p class=\"DH1-description\">\r\n            UN DESARROLLO QUE SIEMPRE TE<br>\r\n            HAR\u00c1 SENTIR EN CALMA, COMO UN<br>\r\n            DOMINGO EN VERANO.\r\n          <\/p>\r\n          <button class=\"DH1-cta\" type=\"button\" aria-label=\"Descubre m\u00e1s en DOMENICA\">DESCUBRE M\u00c1S<\/button>\r\n          <!-- Scroll circle -->\r\n          <div class=\"DH1-scroll-circle\" role=\"button\" aria-label=\"Desplazarse al sello DOMENICA\">\r\n            <span class=\"DH1-scroll-icon\">&#x25BE;<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- Circle overlap (sello naranja) -->\r\n  <div class=\"DH1-circle-wrap\" id=\"DH1-circle-anchor\">\r\n    <div class=\"DH1-circle\">\r\n      <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Pleca1.png\" alt=\"Sello DOMENICA\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Bottom cream block -->\r\n  <section class=\"DH1-bottom\" id=\"DH1-bottom-anchor\">\r\n    <div class=\"DH1-bottom-inner\">\r\n      <p class=\"DH1-bottom-line\">Entre el mar y el cielo,<\/p>\r\n      <p class=\"DH1-bottom-line\">un nuevo <em>para\u00edso<\/em> nace.<\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.getElementById('DomenicaHero1');\r\n      if (!root) return;\r\n\r\n      \/\/ --- TEXT SCALE VIA JS ---\r\n      function updateTextScale() {\r\n        var minW = 360;\r\n        var maxW = 1440;\r\n        var w = root.clientWidth || window.innerWidth || minW;\r\n        w = Math.max(minW, Math.min(maxW, w));\r\n        var t = (w - minW) \/ (maxW - minW); \/\/ 0 a 1\r\n\r\n        function scale(min, max) {\r\n          return min + (max - min) * t;\r\n        }\r\n\r\n        \/\/ Aproximaci\u00f3n a tu tipograf\u00eda original\r\n        var headerSize = scale(0.60, 0.78);   \/\/ rem\r\n        var titleSize = scale(2.10, 3.20);    \/\/ rem (siempre m\u00e1s grande que el subt\u00edtulo)\r\n        var subtitleSize = scale(1.60, 2.90); \/\/ rem\r\n        var descSize = scale(0.70, 0.82);     \/\/ rem\r\n        var ctaSize = scale(0.65, 0.75);      \/\/ rem\r\n        var bottomSize = scale(1.35, 2.15);   \/\/ rem\r\n\r\n        root.style.setProperty('--DH1-header-size', headerSize.toFixed(3) + 'rem');\r\n        root.style.setProperty('--DH1-title-size', titleSize.toFixed(3) + 'rem');\r\n        root.style.setProperty('--DH1-subtitle-size', subtitleSize.toFixed(3) + 'rem');\r\n        root.style.setProperty('--DH1-description-size', descSize.toFixed(3) + 'rem');\r\n        root.style.setProperty('--DH1-cta-size', ctaSize.toFixed(3) + 'rem');\r\n        root.style.setProperty('--DH1-bottom-size', bottomSize.toFixed(3) + 'rem');\r\n      }\r\n\r\n      updateTextScale();\r\n      window.addEventListener('resize', function () {\r\n        \/\/ Peque\u00f1o debounce ligero\r\n        if (window.DH1_resizeRaf) cancelAnimationFrame(window.DH1_resizeRaf);\r\n        window.DH1_resizeRaf = requestAnimationFrame(updateTextScale);\r\n      });\r\n\r\n      \/\/ --- SCROLL CIRCLE ---\r\n      var scrollCircle = root.querySelector('.DH1-scroll-circle');\r\n      var target = root.querySelector('#DH1-circle-anchor');\r\n      if (scrollCircle && target) {\r\n        scrollCircle.addEventListener('click', function () {\r\n          try {\r\n            target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n          } catch (e) {\r\n            target.scrollIntoView();\r\n          }\r\n        });\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-f91c022 e-flex e-con-boxed e-con e-parent\" data-id=\"f91c022\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68dae5d elementor-widget__width-inherit elementor-widget elementor-widget-image\" data-id=\"68dae5d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"426\" height=\"240\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/camioneta_entrando_al_terreno1.gif\" class=\"attachment-1536x1536 size-1536x1536 wp-image-3552\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9120ab elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"c9120ab\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"DomenicaTextBlock1\" class=\"DTB1-root\">\r\n  <style>\r\n    \/* Fonts (mismo set que el hero) *\/\r\n    @font-face {\r\n      font-family: 'Stage Grotesk';\r\n      src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk.woff2') format('woff2');\r\n      font-weight: 400;\r\n      font-style: normal;\r\n      font-display: swap;\r\n    }\r\n\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&display=swap');\r\n\r\n    \/* Reset scoped *\/\r\n    #DomenicaTextBlock1,\r\n    #DomenicaTextBlock1 *,\r\n    #DomenicaTextBlock1 *::before,\r\n    #DomenicaTextBlock1 *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    \/* Wrapper sin fondo ni padding extra *\/\r\n    #DomenicaTextBlock1.DTB1-root {\r\n      width: 100%;\r\n      color: #e5412a !important; \/* naranja DOMENICA *\/\r\n      display: block;\r\n    }\r\n\r\n    #DomenicaTextBlock1 .DTB1-inner {\r\n      max-width: 640px;\r\n      margin: 0 auto;\r\n      text-align: center !important;\r\n    }\r\n\r\n    \/* T\u00edtulo serif con palabra en it\u00e1lica *\/\r\n    #DomenicaTextBlock1 .DTB1-title {\r\n      font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;\r\n      font-weight: 400;\r\n      font-size: clamp(1.7rem, 2vw + 1rem, 2.2rem) !important;\r\n      line-height: 1.2;\r\n      margin-bottom: 1.15rem;\r\n    }\r\n\r\n    #DomenicaTextBlock1 .DTB1-title em {\r\n      font-style: italic !important;\r\n    }\r\n\r\n    \/* Descripci\u00f3n en may\u00fasculas estilo hero *\/\r\n    #DomenicaTextBlock1 .DTB1-description {\r\n      font-family: 'Stage Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n      text-transform: uppercase !important;\r\n      letter-spacing: 0.24em !important;\r\n      font-size: 0.72rem !important;\r\n      line-height: 1.9;\r\n      opacity: 0.96;\r\n    }\r\n\r\n    \/* Peque\u00f1o ajuste para m\u00f3viles muy estrechos *\/\r\n    @media (max-width: 400px) {\r\n      #DomenicaTextBlock1 .DTB1-description {\r\n        letter-spacing: 0.18em !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <section class=\"DTB1-inner\" aria-label=\"Texto descriptivo entorno natural DOMENICA\">\r\n    <h2 class=\"DTB1-title\">El <em>entorno<\/em> natural<\/h2>\r\n    <p class=\"DTB1-description\">\r\n      UN ESPACIO PRIVADO, RODEADO DE VEGETACI\u00d3N, DONDE EL CAMINO SE ABRE\r\n      PASO HACIA TU PROPIO PARA\u00cdSO.\r\n    <\/p>\r\n  <\/section>\r\n<\/div>\r\n\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-8bf669a e-con-full e-flex e-con e-parent\" data-id=\"8bf669a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2337d28 elementor-widget elementor-widget-html\" data-id=\"2337d28\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"DomenicaSection400\" class=\"domenica-400-wrapper\">\r\n    <style>\r\n        \/* -------------------------\r\n           FUENTES\r\n        ------------------------- *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&display=swap');\r\n\r\n        \/* Ajusta las URLs a tus archivos reales de Stage Grotesk *\/\r\n        @font-face {\r\n            font-family: 'Stage Grotesk';\r\n            src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk-regular.woff2') format('woff2');\r\n            font-weight: 400;\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        @font-face {\r\n            font-family: 'Stage Grotesk';\r\n            src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk-medium.woff2') format('woff2');\r\n            font-weight: 500;\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        \/* -------------------------\r\n           BASE \/ WRAPPER\r\n        ------------------------- *\/\r\n        #DomenicaSection400 {\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            margin: 0 auto !important;\r\n            padding: 32px 20px !important;\r\n            \/* FONDO AJUSTADO: Se ha cambiado a transparent para eliminar el color *\/\r\n            background-color: transparent !important;\r\n            font-family: 'Stage Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;\r\n            box-sizing: border-box !important;\r\n            overflow: hidden !important;\r\n        }\r\n\r\n        #DomenicaSection400 *,\r\n        #DomenicaSection400 *::before,\r\n        #DomenicaSection400 *::after {\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        \/* -------------------------\r\n           GRID MOBILE (DEFAULT)\r\n        ------------------------- *\/\r\n        #DomenicaSection400 .ds-grid {\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            gap: 22px !important;\r\n            max-width: 1280px !important;\r\n            margin: 0 auto !important;\r\n        }\r\n\r\n        \/* Orden en mobile para lectura natural *\/\r\n        #DomenicaSection400 .area-img-left    { order: 1 !important; }\r\n        #DomenicaSection400 .area-text-right  { order: 2 !important; }\r\n        #DomenicaSection400 .area-img-center  { order: 3 !important; }\r\n        #DomenicaSection400 .area-text-center { order: 4 !important; }\r\n        #DomenicaSection400 .area-img-right   { order: 5 !important; }\r\n\r\n        \/* -------------------------\r\n           IM\u00c1GENES\r\n        ------------------------- *\/\r\n        #DomenicaSection400 img {\r\n            width: 100% !important;\r\n            height: 100% !important;\r\n            object-fit: cover !important;\r\n            display: block !important;\r\n        }\r\n\r\n        #DomenicaSection400 .img-container {\r\n            position: relative !important;\r\n            overflow: hidden !important;\r\n            margin: 0 !important;\r\n            \/* SIN BORDES REDONDEADOS *\/\r\n            border-radius: 0 !important;\r\n        }\r\n\r\n        \/* Stacking: manos delante de todo *\/\r\n        #DomenicaSection400 .ds-img {\r\n            position: relative !important;\r\n        }\r\n        #DomenicaSection400 .ds-img-1 { z-index: 3 !important; } \/* manos *\/\r\n        #DomenicaSection400 .ds-img-2 { z-index: 2 !important; } \/* ra\u00edces *\/\r\n        #DomenicaSection400 .ds-img-3 { z-index: 1 !important; } \/* playa *\/\r\n\r\n        \/* Proporciones aproximadas al layout Figma *\/\r\n        #DomenicaSection400 .area-img-left {\r\n            aspect-ratio: 3 \/ 5 !important;\r\n        }\r\n        #DomenicaSection400 .area-img-center {\r\n            aspect-ratio: 4 \/ 3 !important;\r\n        }\r\n        #DomenicaSection400 .area-img-right {\r\n            aspect-ratio: 16 \/ 9 !important;\r\n        }\r\n\r\n        \/* -------------------------\r\n           TIPOGRAF\u00cdA CABECERA\r\n        ------------------------- *\/\r\n        #DomenicaSection400 .ds-headline-block {\r\n            color: #E54325 !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            text-align: center !important;\r\n            gap: 10px !important;\r\n        }\r\n\r\n        #DomenicaSection400 .ds-headline-text {\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            gap: 4px !important;\r\n        }\r\n\r\n        #DomenicaSection400 .ds-headline-top,\r\n        #DomenicaSection400 .ds-headline-bottom {\r\n            font-family: 'Instrument Serif', serif !important;\r\n            font-style: italic !important;\r\n            font-size: clamp(1.4rem, 3.4vw, 2.2rem) !important;\r\n            line-height: 1.1 !important;\r\n            white-space: nowrap !important;\r\n        }\r\n\r\n        #DomenicaSection400 .ds-headline-number {\r\n            font-family: 'Instrument Serif', serif !important;\r\n            font-size: clamp(4.6rem, 10vw, 9.5rem) !important;\r\n            line-height: 0.85 !important;\r\n            font-weight: 400 !important;\r\n        }\r\n\r\n        \/* -------------------------\r\n           BLOQUE DESCRIPCI\u00d3N\r\n        ------------------------- *\/\r\n        #DomenicaSection400 .ds-info-block {\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            align-items: flex-start !important;\r\n            justify-content: center !important;\r\n            gap: 16px !important;\r\n            padding-top: 4px !important;\r\n        }\r\n\r\n        #DomenicaSection400 .ds-description {\r\n            font-family: 'Stage Grotesk', system-ui, sans-serif !important;\r\n            color: #E54325 !important;\r\n            font-size: 0.78rem !important;\r\n            letter-spacing: 0.24em !important;\r\n            line-height: 1.7 !important;\r\n            text-transform: uppercase !important;\r\n            max-width: 320px !important;\r\n        }\r\n\r\n        #DomenicaSection400 .ds-btn {\r\n            background-color: #7A3B13 !important;\r\n            color: #FFFFFF !important;\r\n            border-radius: 999px !important;\r\n            padding: 14px 32px !important;\r\n            text-decoration: none !important;\r\n            text-transform: uppercase !important;\r\n            font-size: 0.78rem !important;\r\n            letter-spacing: 0.18em !important;\r\n            \/* Stage Grotesk Medium *\/\r\n            font-family: 'Stage Grotesk', system-ui, sans-serif !important;\r\n            font-weight: 500 !important;\r\n            display: inline-flex !important;\r\n            align-items: center !important;\r\n            justify-content: center !important;\r\n            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;\r\n            box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;\r\n        }\r\n        #DomenicaSection400 .ds-btn:hover {\r\n            opacity: 0.96 !important;\r\n            transform: translateY(-1px) !important;\r\n            box-shadow: 0 10px 26px rgba(0,0,0,0.09) !important;\r\n        }\r\n\r\n        \/* -------------------------\r\n           TABLET (768px - 1199px)\r\n        ------------------------- *\/\r\n        @media screen and (min-width: 768px) and (max-width: 1199px) {\r\n            #DomenicaSection400 {\r\n                padding: 48px 32px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-grid {\r\n                display: grid !important;\r\n                grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;\r\n                grid-template-rows: auto auto auto auto !important;\r\n                gap: 24px 32px !important;\r\n                align-items: start !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-img-left {\r\n                grid-column: 1 \/ 2 !important;\r\n                grid-row: 1 \/ 5 !important;\r\n                min-height: 520px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-text-right {\r\n                grid-column: 2 \/ 3 !important;\r\n                grid-row: 1 \/ 2 !important;\r\n                align-self: center !important;\r\n            }\r\n\r\n            \/* RA\u00cdCES M\u00c1S PEQUE\u00d1A EN TABLET *\/\r\n            #DomenicaSection400 .area-img-center {\r\n                grid-column: 2 \/ 3 !important;\r\n                grid-row: 2 \/ 3 !important;\r\n                align-self: end !important;\r\n                max-width: 260px !important;\r\n                width: 100% !important;\r\n                justify-self: center !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-text-center {\r\n                grid-column: 2 \/ 3 !important;\r\n                grid-row: 3 \/ 4 !important;\r\n                padding-top: 16px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-img-right {\r\n                grid-column: 1 \/ 3 !important;\r\n                grid-row: 4 \/ 5 !important;\r\n                margin-top: 12px !important;\r\n                aspect-ratio: 16 \/ 6 !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-block {\r\n                flex-direction: row !important;\r\n                justify-content: flex-end !important;\r\n                text-align: left !important;\r\n                gap: 16px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-text {\r\n                align-items: flex-start !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-top,\r\n            #DomenicaSection400 .ds-headline-bottom {\r\n                white-space: normal !important;\r\n            }\r\n        }\r\n\r\n        \/* -------------------------\r\n           DESKTOP (\u2265 1200px)\r\n        ------------------------- *\/\r\n        @media screen and (min-width: 1200px) {\r\n            #DomenicaSection400 {\r\n                padding: 60px 40px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-grid {\r\n                display: grid !important;\r\n                grid-template-columns: 28% 34% 32% !important;\r\n                grid-template-rows: auto auto !important;\r\n                gap: 32px !important;\r\n                align-items: start !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-img-left {\r\n                grid-column: 1 \/ 2 !important;\r\n                grid-row: 1 \/ 3 !important;\r\n                min-height: 520px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-img-center {\r\n                grid-column: 2 \/ 3 !important;\r\n                grid-row: 1 \/ 2 !important;\r\n                align-self: end !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-text-right {\r\n                grid-column: 3 \/ 4 !important;\r\n                grid-row: 1 \/ 2 !important;\r\n                align-self: center !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-text-center {\r\n                grid-column: 2 \/ 3 !important;\r\n                grid-row: 2 \/ 3 !important;\r\n                padding-top: 26px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .area-img-right {\r\n                grid-column: 3 \/ 4 !important;\r\n                grid-row: 2 \/ 3 !important;\r\n                align-self: end !important;\r\n                aspect-ratio: 16 \/ 9 !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-block {\r\n                flex-direction: row !important;\r\n                align-items: center !important;\r\n                justify-content: flex-end !important;\r\n                text-align: left !important;\r\n                gap: 18px !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-text {\r\n                align-items: flex-start !important;\r\n            }\r\n\r\n            #DomenicaSection400 .ds-headline-top,\r\n            #DomenicaSection400 .ds-headline-bottom {\r\n                white-space: normal !important;\r\n            }\r\n        }\r\n\r\n        \/* -------------------------\r\n           M\u00d3VIL (\u2264 767px) \u2013 ALTURA M\u00c1X 350px\r\n        ------------------------- *\/\r\n        @media screen and (max-width: 767px) {\r\n            #DomenicaSection400 .img-container {\r\n                height: 350px !important;\r\n                max-height: 350px !important;\r\n                aspect-ratio: auto !important;\r\n            }\r\n            #DomenicaSection400 .img-container img {\r\n                height: 100% !important;\r\n                max-height: 350px !important;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"ds-grid\">\r\n        <!-- Imagen 1: manos en el agua -->\r\n        <figure class=\"img-container area-img-left ds-img ds-img-1\">\r\n            <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/11.png\" alt=\"Manos en el agua\" loading=\"lazy\">\r\n        <\/figure>\r\n\r\n        <!-- Imagen 2: ra\u00edces -->\r\n        <figure class=\"img-container area-img-center ds-img ds-img-2\">\r\n            <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/21.png\" alt=\"Ra\u00edces\" loading=\"lazy\">\r\n        <\/figure>\r\n\r\n        <!-- Bloque titular 400 -->\r\n        <div class=\"ds-headline-block area-text-right\">\r\n            <div class=\"ds-headline-text\">\r\n                <span class=\"ds-headline-top\">A solo<\/span>\r\n                <span class=\"ds-headline-bottom\">metros del mar<\/span>\r\n            <\/div>\r\n            <span class=\"ds-headline-number\">400<\/span>\r\n        <\/div>\r\n\r\n        <!-- Descripci\u00f3n + bot\u00f3n -->\r\n        <div class=\"ds-info-block area-text-center\">\r\n            <p class=\"ds-description\">\r\n                UNA ZONA URBANIZADA QUE UNE PROYECCI\u00d3N, VALOR Y SERENIDAD.\r\n            <\/p>\r\n            <a href=\"#\" class=\"ds-btn\" title=\"Ver ruta\">C\u00d3MO LLEGAR<\/a>\r\n        <\/div>\r\n\r\n        <!-- Imagen 3: playa -->\r\n        <figure class=\"img-container area-img-right ds-img ds-img-3\">\r\n            <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/31.jpg\" alt=\"Playa\" style=\"object-position: center 60% !important;\" loading=\"lazy\">\r\n        <\/figure>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function () {\r\n            var root = document.getElementById('DomenicaSection400');\r\n            if (!root) return;\r\n\r\n            function runTimelineDesktop() {\r\n                if (typeof gsap === 'undefined') return;\r\n\r\n                var imgs = root.querySelectorAll('.ds-img');\r\n                var headlineNumber = root.querySelector('.ds-headline-number');\r\n                var infoBlock = root.querySelector('.ds-info-block');\r\n                if (!headlineNumber || !infoBlock) return;\r\n\r\n                \/\/ Iniciar el n\u00famero en 0\r\n                headlineNumber.textContent = '0';\r\n                var numObj = { value: 0 };\r\n\r\n                var tl = gsap.timeline({ defaults: { ease: 'power2.out' } });\r\n\r\n                tl.from(root, { opacity: 0, y: 30, duration: 0.6 })\r\n                  .from(imgs, { opacity: 0, y: 40, duration: 0.9, stagger: 0.18 }, '-=0.2')\r\n                  .from(headlineNumber, { scale: 0.7, opacity: 0, duration: 0.6 }, '-=0.3')\r\n                  .to(numObj, {\r\n                      value: 400,\r\n                      duration: 1.4,\r\n                      ease: 'power1.out',\r\n                      onUpdate: function () {\r\n                          headlineNumber.textContent = Math.round(numObj.value);\r\n                      }\r\n                  }, '<')\r\n                  .from(infoBlock, { opacity: 0, y: 18, duration: 0.7 }, '-=0.4');\r\n            }\r\n\r\n            function initMobileImageAnimations() {\r\n                if (typeof gsap === 'undefined') return;\r\n\r\n                var imgs = root.querySelectorAll('.ds-img');\r\n                if (!imgs.length) return;\r\n\r\n                \/\/ Estado inicial de las im\u00e1genes en m\u00f3vil\r\n                gsap.set(imgs, { opacity: 0, y: 40 });\r\n\r\n                if ('IntersectionObserver' in window) {\r\n                    var imgObserver = new IntersectionObserver(function (entries) {\r\n                        entries.forEach(function (entry) {\r\n                            if (entry.isIntersecting) {\r\n                                gsap.to(entry.target, {\r\n                                    opacity: 1,\r\n                                    y: 0,\r\n                                    duration: 0.8,\r\n                                    ease: 'power2.out'\r\n                                });\r\n                                imgObserver.unobserve(entry.target);\r\n                            }\r\n                        });\r\n                    }, { threshold: 0.35 });\r\n\r\n                    imgs.forEach(function (img) {\r\n                        imgObserver.observe(img);\r\n                    });\r\n                } else {\r\n                    \/\/ Fallback sin IntersectionObserver\r\n                    gsap.to(imgs, { opacity: 1, y: 0, duration: 0.8, stagger: 0.2 });\r\n                }\r\n            }\r\n\r\n            function runTimelineMobile() {\r\n                if (typeof gsap === 'undefined') return;\r\n\r\n                var headlineNumber = root.querySelector('.ds-headline-number');\r\n                var infoBlock = root.querySelector('.ds-info-block');\r\n                if (!headlineNumber || !infoBlock) return;\r\n\r\n                headlineNumber.textContent = '0';\r\n                var numObj = { value: 0 };\r\n\r\n                var tl = gsap.timeline({ defaults: { ease: 'power2.out' } });\r\n\r\n                tl.from(root, { opacity: 0, y: 20, duration: 0.5 })\r\n                  .from(headlineNumber, { scale: 0.85, opacity: 0, duration: 0.6 }, '-=0.2')\r\n                  .to(numObj, {\r\n                      value: 400,\r\n                      duration: 1.4,\r\n                      ease: 'power1.out',\r\n                      onUpdate: function () {\r\n                          headlineNumber.textContent = Math.round(numObj.value);\r\n                      }\r\n                  }, '<')\r\n                  .from(infoBlock, { opacity: 0, y: 16, duration: 0.6 }, '-=0.4');\r\n            }\r\n\r\n            function initAnimations() {\r\n                if (typeof gsap === 'undefined') return;\r\n\r\n                var isMobile = window.matchMedia('(max-width: 767px)').matches;\r\n\r\n                if (isMobile) {\r\n                    \/\/ Las im\u00e1genes entran conforme se hace scroll\r\n                    initMobileImageAnimations();\r\n                }\r\n\r\n                if ('IntersectionObserver' in window) {\r\n                    var io = new IntersectionObserver(function (entries) {\r\n                        entries.forEach(function (entry) {\r\n                            if (entry.isIntersecting) {\r\n                                if (isMobile) {\r\n                                    runTimelineMobile();\r\n                                } else {\r\n                                    runTimelineDesktop();\r\n                                }\r\n                                io.unobserve(entry.target);\r\n                            }\r\n                        });\r\n                    }, { threshold: 0.25 });\r\n\r\n                    io.observe(root);\r\n                } else {\r\n                    \/\/ Fallback sin IntersectionObserver\r\n                    if (isMobile) {\r\n                        initMobileImageAnimations();\r\n                        runTimelineMobile();\r\n                    } else {\r\n                        runTimelineDesktop();\r\n                    }\r\n                }\r\n            }\r\n\r\n            if (typeof gsap === 'undefined') {\r\n                var script = document.createElement('script');\r\n                script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js';\r\n                script.onload = initAnimations;\r\n                document.head.appendChild(script);\r\n            } else {\r\n                initAnimations();\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-c24f077 e-con-full e-flex e-con e-parent\" data-id=\"c24f077\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-483ef82 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"483ef82\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"dt-component-root\">\r\n    <style>\r\n        \/* Importaci\u00f3n de fuentes *\/\r\n        @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500&display=swap\");\r\n\r\n        \/* Variables locales para el componente *\/\r\n        #dt-component-root {\r\n            --dt-primary-color: #FF3B28;\r\n            --dt-font-main: \"Space Grotesk\", system-ui, sans-serif;\r\n            --dt-font-serif: \"Instrument Serif\", serif;\r\n        }\r\n\r\n        \/* Reset b\u00e1sico solo para el componente *\/\r\n        #dt-component-root * { \r\n            box-sizing: border-box; \r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        #dt-component-root {\r\n            background-color: transparent; \/* Se adapta al fondo de tu web *\/\r\n            font-family: var(--dt-font-main);\r\n            width: 100%;\r\n            position: relative;\r\n            overflow: hidden;\r\n            min-height: 600px; \/* Altura m\u00ednima para asegurar visualizaci\u00f3n *\/\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 60px 5vw;\r\n        }\r\n\r\n        #dt-component-root .dt-container {\r\n            width: 100%;\r\n            height: 100%;\r\n            max-width: 1400px;\r\n            display: grid;\r\n            grid-template-columns: 40% 55%; \r\n            justify-content: space-between;\r\n            align-items: center;\r\n            gap: 5%;\r\n            position: relative;\r\n        }\r\n\r\n        \/* --- Columna Izquierda (Logo + Texto) --- *\/\r\n        #dt-component-root .dt-left-column {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: flex-start;\r\n            position: relative;\r\n            height: auto;\r\n        }\r\n\r\n        #dt-component-root .dt-logo-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            height: auto;\r\n            aspect-ratio: 427\/482;\r\n            max-width: 450px;\r\n            overflow: visible;\r\n        }\r\n\r\n        #dt-component-root .dt-logo-svg {\r\n            width: 100%;\r\n            height: 100%;\r\n            position: absolute;\r\n            top: 0; \r\n            left: 0;\r\n            display: block;\r\n            overflow: visible; \r\n        }\r\n        \r\n        #dt-component-root .dt-logo-base path {\r\n            fill: transparent;\r\n            stroke: var(--dt-primary-color);\r\n            stroke-width: 1.2;\r\n            opacity: 0.3; \r\n        }\r\n\r\n        #dt-component-root .dt-logo-layer path { \r\n            fill: var(--dt-primary-color); \r\n            stroke: none; \r\n        }\r\n        \r\n        \/* Animaciones de m\u00e1scara *\/\r\n        #dt-component-root .layer-1 { clip-path: circle(0% at 20% 20%); opacity: 1; }\r\n        #dt-component-root .layer-2 { clip-path: circle(0% at 85% 85%); opacity: 1; }\r\n        #dt-component-root .layer-3 { clip-path: circle(0% at 50% 50%); opacity: 1; z-index: 5; }\r\n\r\n        #dt-component-root .dt-logo-wrapper.animated .layer-1 { animation: dt-reveal-1 2.5s ease-out forwards; }\r\n        #dt-component-root .dt-logo-wrapper.animated .layer-2 { animation: dt-reveal-2 3s ease-out forwards 0.3s; }\r\n        #dt-component-root .dt-logo-wrapper.animated .layer-3 { animation: dt-reveal-3 2.5s ease-out forwards 0.5s; }\r\n\r\n        @keyframes dt-reveal-1 { to { clip-path: circle(150% at 20% 20%); } }\r\n        @keyframes dt-reveal-2 { to { clip-path: circle(150% at 85% 85%); } }\r\n        @keyframes dt-reveal-3 { to { clip-path: circle(150% at 50% 50%); } }\r\n\r\n        \/* --- DESCRIPCI\u00d3N (ESTILOS ESPEC\u00cdFICOS SOLICITADOS) --- *\/\r\n        #dt-component-root .dt-description {\r\n            position: relative;\r\n            z-index: 10;\r\n            pointer-events: none;\r\n            \r\n            \/* Ajustes PC\/Tablet: Alineado derecha, ancho 25%, superpuesto *\/\r\n            width: 25%;                 \r\n            align-self: flex-end;       \r\n            text-align: right;          \r\n            margin-top: -25%;           \r\n            margin-right: 5%;           \r\n        }\r\n\r\n        #dt-component-root .dt-description p {\r\n            font-family: var(--dt-font-main);\r\n            font-weight: 500;\r\n            font-size: 0.85rem;\r\n            text-transform: uppercase;\r\n            line-height: 1.4;\r\n            letter-spacing: 0.05em;\r\n            color: var(--dt-primary-color);\r\n            margin: 0; \r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n            transition: all 1s ease 1.5s; \r\n            \/* Sombra de texto sutil para mejorar lectura si se superpone al rojo *\/\r\n            text-shadow: 0px 0px 10px rgba(255,255,255,0.8);\r\n        }\r\n        \r\n        #dt-component-root .dt-logo-wrapper.animated + .dt-description p {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* --- Columna Derecha --- *\/\r\n        #dt-component-root .dt-right-column {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center; \r\n            align-items: flex-start;\r\n            height: 100%;\r\n            gap: 30px;\r\n        }\r\n\r\n        #dt-component-root .dt-tags-container {\r\n            width: 100%;\r\n            height: 220px; \r\n            position: relative;\r\n            display: flex;\r\n            justify-content: center; \r\n            align-items: center; \r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n            transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;\r\n        }\r\n        \r\n        #dt-component-root .dt-tags-container.visible {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        #dtTagCloudCanvas {\r\n            width: 100%;\r\n            height: 100%;\r\n            max-width: 450px;\r\n            position: relative; \r\n            margin-left: 0;\r\n        }\r\n\r\n        #dt-component-root .tag-cloud-item {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform-origin: center center; \r\n            font-family: var(--dt-font-serif);\r\n            font-size: clamp(1.4rem, 2.5vw, 2.5rem); \r\n            color: var(--dt-primary-color);\r\n            white-space: nowrap;\r\n            cursor: default;\r\n            line-height: 1;\r\n            user-select: none;\r\n            will-change: transform, opacity;\r\n        }\r\n\r\n        #dt-component-root .dt-image-container {\r\n            width: 100%;\r\n            display: flex;\r\n            justify-content: flex-start;\r\n            align-items: center;\r\n            position: relative;\r\n        }\r\n\r\n        #dt-component-root .dt-image-wrapper {\r\n            width: 100%;\r\n            max-width: 100%;\r\n            aspect-ratio: 16\/9;\r\n            overflow: hidden;\r\n            opacity: 0;\r\n            transform: scale(0.95);\r\n            transition: all 1.2s ease;\r\n            border-radius: 4px;\r\n        }\r\n        \r\n        #dt-component-root .dt-image-wrapper.visible {\r\n            opacity: 1;\r\n            transform: scale(1);\r\n        }\r\n\r\n        #dt-component-root .dt-image-wrapper img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            display: block;\r\n            transition: transform 1.5s ease;\r\n        }\r\n        \r\n        #dt-component-root .dt-image-wrapper:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        \/* --- Responsive --- *\/\r\n        @media (max-width: 1200px) {\r\n            #dt-component-root .dt-container {\r\n                grid-template-columns: 42% 53%;\r\n                gap: 5%;\r\n            }\r\n            #dt-component-root .dt-description {\r\n                width: 35%; \r\n                margin-top: -20%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            #dt-component-root {\r\n                padding: 50px 4vw;\r\n                min-height: auto;\r\n            }\r\n            #dt-component-root .dt-container {\r\n                grid-template-columns: 45% 50%;\r\n            }\r\n            #dt-component-root .dt-logo-wrapper {\r\n                max-width: 380px;\r\n            }\r\n            #dt-component-root .tag-cloud-item {\r\n                font-size: clamp(1.2rem, 2vw, 2rem);\r\n            }\r\n            #dt-component-root .dt-description {\r\n                width: 40%;\r\n                margin-top: -15%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #dt-component-root {\r\n                padding: 40px 20px;\r\n            }\r\n            #dt-component-root .dt-container {\r\n                display: flex;\r\n                flex-direction: column;\r\n                gap: 40px;\r\n            }\r\n            #dt-component-root .dt-left-column {\r\n                width: 100%;\r\n                align-items: center;\r\n            }\r\n            #dt-component-root .dt-logo-wrapper {\r\n                width: 100%;\r\n                max-width: 320px;\r\n                margin: 0 auto;\r\n            }\r\n\r\n            \/* M\u00d3VIL: Reseteamos para que se vea debajo y centrado *\/\r\n            #dt-component-root .dt-description {\r\n                width: 90%;         \r\n                max-width: none; \r\n                margin-top: 30px;   \r\n                margin-right: 0;\r\n                text-align: center; \r\n                align-self: center; \r\n            }\r\n            \r\n            #dt-component-root .dt-right-column {\r\n                width: 100%;\r\n                align-items: center;\r\n                gap: 30px;\r\n            }\r\n            #dt-component-root .dt-tags-container {\r\n                justify-content: center;\r\n                height: 200px;\r\n            }\r\n            #dtTagCloudCanvas {\r\n                margin: 0 auto;\r\n                max-width: 320px;\r\n            }\r\n            #dt-component-root .dt-image-container {\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            #dt-component-root .dt-logo-wrapper {\r\n                max-width: 280px;\r\n            }\r\n            #dt-component-root .tag-cloud-item {\r\n                font-size: 1.3rem;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"dt-container\">\r\n        <!-- LADO IZQUIERDO -->\r\n        <div class=\"dt-left-column\">\r\n            <div class=\"dt-logo-wrapper\" id=\"dtLogoWrapper\">\r\n                <svg class=\"dt-logo-svg dt-logo-base\" viewBox=\"0 0 427.26 482.97\">\r\n                    <path d=\"M246.99 0c7.75 1.14 15.6 1.7 23.12 4.16 24.56 8.01 43.28 22.74 52.54 47.43 10.44 27.85 1.02 57.96-23.59 77.91-34.01 27.55-87.32 24.75-118.25-6.21-30.55-30.58-26.95-77.93 8.05-104.86C202.97 7.57 219 1.7 236.79.63c1.12-.07 2.22-.41 3.33-.63zm-.88 24.89c-23.02.13-41.84 5.41-57.81 19.21-16.34 14.12-19.17 36.65-6.54 53.12a58 58 0 0 0 15.58 13.93c16.66 10.44 35.07 13.65 54.3 12.1 19.35-1.56 36.75-8.06 50.48-22.57 14.35-15.17 14.65-36.99.45-52.31-15.86-17.12-36.29-22.9-56.45-23.47ZM427.26 315.97c-7.15 1.68-13.03 1.45-18.51-5.31-24.24-29.87-49.07-59.27-73.71-88.83-1.63-1.95-3.25-4.29-6.4-3.12-3.17 1.18-3.32 3.91-3.32 6.75q.05 42.71-.04 85.43c0 1.95 1.11 4.87-1.8 5.5-3.44.74-7.17 1.18-10.5-.42-1.58-.76-.94-2.85-.94-4.37-.04-14.6-.02-29.19-.02-43.79v-90.58c0-6.33.03-6.09 6.5-6.42 4.57-.23 7.59 1.27 10.56 4.88 24.82 30.15 49.87 60.1 74.84 90.13 1.39 1.67 2.72 3.57 5.13 3.42 3.45-.21 4.41-2.63 4.4-5.7q-.01-11.59 0-23.18v-63.53c0-5.54.36-5.92 5.77-5.92 2.69 0 5.45-.42 8.04.81zM2.27 243.86v-66.95c0-5.69.34-5.72 6.11-6.09 4.9-.31 8.08 1.21 11.02 5.44 16.06 23.15 32.47 46.05 48.76 69.04q.87 1.23 1.78 2.42c3.15 4.05 6.26 4.08 9.29-.14 6.76-9.41 13.41-18.9 20.11-28.35q15.74-22.24 31.52-44.45c2.5-3.51 10.35-5.37 14.23-3.55 1.06.5 1.48 1.29 1.53 2.35q.09 1.92.08 3.86c0 44.2.02 88.41-.05 132.61 0 2.12 1.22 5.19-1.46 6.16a16 16 0 0 1-10.52-.06c-1.77-.6-1.19-2.73-1.2-4.23q-.04-20.6-.02-41.2v-37.34c0-1.43.02-2.87-.17-4.28-.31-2.28-1.34-4.08-3.78-4.66-2.29-.55-3.78.54-5.05 2.33Q113.66 242 102.83 257.2c-7.46 10.49-14.87 21.01-22.39 31.46-4.2 5.84-7.82 5.76-12.03-.17q-20.34-28.7-40.67-57.42c-.83-1.17-1.69-2.31-2.49-3.49-1.43-2.12-3.04-3.9-5.96-3.08-3.25.92-3.24 3.58-3.24 6.22v3.86c0 25.32.02 50.64-.04 75.96 0 2.02.9 4.91-1.67 5.69-3.53 1.06-7.44 1.31-10.89-.29-1.88-.88-1.16-3.35-1.16-5.15q-.04-33.47-.02-66.95ZM175.77 243.66v-66.54c0-5.99.24-6.22 6.34-6.23h94.42c5.75 0 5.84.12 5.86 5.68.02 4.58-.24 9.17.07 13.73.29 4.29-1.16 5.72-5.55 5.69-23.32-.18-46.64-.09-69.95-.08-3.86 0-7.73.03-11.59 0-3.72-.03-5.62 1.93-5.67 5.51q-.14 11.16-.02 22.32c.04 4.33 2.78 5.44 6.59 5.43 20.74-.05 41.49-.02 62.23-.02 9.47 0 8.38-.39 8.44 8.25.03 3.43 0 6.87 0 10.3-.01 6.48-.01 6.5-6.33 6.5h-61.8c-1.43 0-2.86-.02-4.29.06-3.07.18-4.79 1.91-4.82 4.93-.09 9.16-.12 18.32 0 27.47.05 4.12 2.87 5.1 6.46 5.09 13.02-.05 26.04-.02 39.05-.02 14.02 0 28.04.11 42.06-.06 3.89-.05 5.4 1.21 5.18 5.17-.27 4.85-.3 9.74 0 14.59.26 4.21-1.41 5.42-5.44 5.39-24.32-.13-48.64-.06-72.96-.06q-11.16.01-22.32 0c-5.67-.02-5.97-.32-5.97-6.16q-.01-33.48 0-66.97ZM1.41 73.84V7.75c0-6 .1-6.1 5.9-6.11 17.73-.01 35.47-.09 53.2.01 41.18.25 74.07 34.85 72.37 76.03-1.59 38.31-33.76 69.27-72.03 69.29-18.02.01-36.04-.1-54.06.08-4.1.04-5.47-1.29-5.45-5.41.15-22.6.07-45.2.07-67.8m13.79.28c0 13.87-.04 27.75.02 41.62.02 4.86 1.51 6.79 5.77 6.74 18.14-.23 36.35 1.33 54.42-.75 32.02-3.68 47.18-24.98 43.08-56.21-3.21-24.4-21.14-37.39-45.81-38.65-16.69-.85-33.45-.18-50.18-.17-6.54 0-7.28.75-7.3 7.52-.03 13.3 0 26.6 0 39.9M277.84 481.75c-4.37 1.05-6.75-1.33-8.34-6.04-2.89-8.52-6.5-16.8-9.6-25.26-1.45-3.95-3.97-5.53-8.1-5.52-24.59.08-49.19.1-73.78-.02-4.57-.02-7.12 1.88-8.65 6.06-3.15 8.59-6.72 17.03-9.75 25.66-1.35 3.85-3.36 5.29-7.49 5.21-10.23-.2-8.99-.32-5.87-8.47 16.88-44.06 33.82-88.1 50.6-132.2 1.42-3.72 3.38-5.01 7.27-4.85q10.73.45 21.44 0c4-.18 5.79 1.38 7.17 5.01 14.88 39.16 29.9 78.27 44.89 117.39 2.2 5.74 4.43 11.47 6.58 17.23 2.07 5.54 1.9 5.76-3.96 5.8h-2.42Zm-63.36-61.2h23.56c7.76-.02 9.51-2.53 6.74-9.76q-6.89-18-13.84-35.98c-6.12-15.86-2.94-13.85-21.02-13.97q-.85 0-1.71.06c-2.83.19-4.81 1.51-5.86 4.23-6.07 15.87-12.26 31.69-18.2 47.6-1.88 5.05.17 7.74 5.49 7.79 8.28.08 16.56.02 24.84.03M83.46 359.97c-18.72-.51-36.06 3.96-51.1 15.43-11.69 8.92-19.61 20.19-18.6 35.72.94 14.43 9.08 24.74 20.48 32.63 16.93 11.71 35.95 15.95 56.23 13.89 6.67-.68 11.42.14 14.61 6.62 1.87 3.81 4.73 7.15 7.24 10.62 1.52 2.11 1.1 3.22-1.38 3.99-36.84 11.4-82.27-.81-102.82-37.9-13.2-23.83-10.16-54.71 7.8-75.49 19.97-23.11 45.63-32.4 75.82-30.12 5.02.38 9.91 1.29 14.78 2.46 2.52.61 3.06 1.63 1.58 3.85a954 954 0 0 0-10.53 16.19c-1.04 1.63-2.3 2.27-4.26 2.17-3.28-.17-6.58-.05-9.86-.05Z\"\/>\r\n                <\/svg>\r\n                <svg class=\"dt-logo-svg dt-logo-layer layer-1\" viewBox=\"0 0 427.26 482.97\"><path d=\"M246.99 0c7.75 1.14 15.6 1.7 23.12 4.16 24.56 8.01 43.28 22.74 52.54 47.43 10.44 27.85 1.02 57.96-23.59 77.91-34.01 27.55-87.32 24.75-118.25-6.21-30.55-30.58-26.95-77.93 8.05-104.86C202.97 7.57 219 1.7 236.79.63c1.12-.07 2.22-.41 3.33-.63zm-.88 24.89c-23.02.13-41.84 5.41-57.81 19.21-16.34 14.12-19.17 36.65-6.54 53.12a58 58 0 0 0 15.58 13.93c16.66 10.44 35.07 13.65 54.3 12.1 19.35-1.56 36.75-8.06 50.48-22.57 14.35-15.17 14.65-36.99.45-52.31-15.86-17.12-36.29-22.9-56.45-23.47ZM427.26 315.97c-7.15 1.68-13.03 1.45-18.51-5.31-24.24-29.87-49.07-59.27-73.71-88.83-1.63-1.95-3.25-4.29-6.4-3.12-3.17 1.18-3.32 3.91-3.32 6.75q.05 42.71-.04 85.43c0 1.95 1.11 4.87-1.8 5.5-3.44.74-7.17 1.18-10.5-.42-1.58-.76-.94-2.85-.94-4.37-.04-14.6-.02-29.19-.02-43.79v-90.58c0-6.33.03-6.09 6.5-6.42 4.57-.23 7.59 1.27 10.56 4.88 24.82 30.15 49.87 60.1 74.84 90.13 1.39 1.67 2.72 3.57 5.13 3.42 3.45-.21 4.41-2.63 4.4-5.7q-.01-11.59 0-23.18v-63.53c0-5.54.36-5.92 5.77-5.92 2.69 0 5.45-.42 8.04.81zM2.27 243.86v-66.95c0-5.69.34-5.72 6.11-6.09 4.9-.31 8.08 1.21 11.02 5.44 16.06 23.15 32.47 46.05 48.76 69.04q.87 1.23 1.78 2.42c3.15 4.05 6.26 4.08 9.29-.14 6.76-9.41 13.41-18.9 20.11-28.35q15.74-22.24 31.52-44.45c2.5-3.51 10.35-5.37 14.23-3.55 1.06.5 1.48 1.29 1.53 2.35q.09 1.92.08 3.86c0 44.2.02 88.41-.05 132.61 0 2.12 1.22 5.19-1.46 6.16a16 16 0 0 1-10.52-.06c-1.77-.6-1.19-2.73-1.2-4.23q-.04-20.6-.02-41.2v-37.34c0-1.43.02-2.87-.17-4.28-.31-2.28-1.34-4.08-3.78-4.66-2.29-.55-3.78.54-5.05 2.33Q113.66 242 102.83 257.2c-7.46 10.49-14.87 21.01-22.39 31.46-4.2 5.84-7.82 5.76-12.03-.17q-20.34-28.7-40.67-57.42c-.83-1.17-1.69-2.31-2.49-3.49-1.43-2.12-3.04-3.9-5.96-3.08-3.25.92-3.24 3.58-3.24 6.22v3.86c0 25.32.02 50.64-.04 75.96 0 2.02.9 4.91-1.67 5.69-3.53 1.06-7.44 1.31-10.89-.29-1.88-.88-1.16-3.35-1.16-5.15q-.04-33.47-.02-66.95ZM175.77 243.66v-66.54c0-5.99.24-6.22 6.34-6.23h94.42c5.75 0 5.84.12 5.86 5.68.02 4.58-.24 9.17.07 13.73.29 4.29-1.16 5.72-5.55 5.69-23.32-.18-46.64-.09-69.95-.08-3.86 0-7.73.03-11.59 0-3.72-.03-5.62 1.93-5.67 5.51q-.14 11.16-.02 22.32c.04 4.33 2.78 5.44 6.59 5.43 20.74-.05 41.49-.02 62.23-.02 9.47 0 8.38-.39 8.44 8.25.03 3.43 0 6.87 0 10.3-.01 6.48-.01 6.5-6.33 6.5h-61.8c-1.43 0-2.86-.02-4.29.06-3.07.18-4.79 1.91-4.82 4.93-.09 9.16-.12 18.32 0 27.47.05 4.12 2.87 5.1 6.46 5.09 13.02-.05 26.04-.02 39.05-.02 14.02 0 28.04.11 42.06-.06 3.89-.05 5.4 1.21 5.18 5.17-.27 4.85-.3 9.74 0 14.59.26 4.21-1.41 5.42-5.44 5.39-24.32-.13-48.64-.06-72.96-.06q-11.16.01-22.32 0c-5.67-.02-5.97-.32-5.97-6.16q-.01-33.48 0-66.97ZM1.41 73.84V7.75c0-6 .1-6.1 5.9-6.11 17.73-.01 35.47-.09 53.2.01 41.18.25 74.07 34.85 72.37 76.03-1.59 38.31-33.76 69.27-72.03 69.29-18.02.01-36.04-.1-54.06.08-4.1.04-5.47-1.29-5.45-5.41.15-22.6.07-45.2.07-67.8m13.79.28c0 13.87-.04 27.75.02 41.62.02 4.86 1.51 6.79 5.77 6.74 18.14-.23 36.35 1.33 54.42-.75 32.02-3.68 47.18-24.98 43.08-56.21-3.21-24.4-21.14-37.39-45.81-38.65-16.69-.85-33.45-.18-50.18-.17-6.54 0-7.28.75-7.3 7.52-.03 13.3 0 26.6 0 39.9M277.84 481.75c-4.37 1.05-6.75-1.33-8.34-6.04-2.89-8.52-6.5-16.8-9.6-25.26-1.45-3.95-3.97-5.53-8.1-5.52-24.59.08-49.19.1-73.78-.02-4.57-.02-7.12 1.88-8.65 6.06-3.15 8.59-6.72 17.03-9.75 25.66-1.35 3.85-3.36 5.29-7.49 5.21-10.23-.2-8.99-.32-5.87-8.47 16.88-44.06 33.82-88.1 50.6-132.2 1.42-3.72 3.38-5.01 7.27-4.85q10.73.45 21.44 0c4-.18 5.79 1.38 7.17 5.01 14.88 39.16 29.9 78.27 44.89 117.39 2.2 5.74 4.43 11.47 6.58 17.23 2.07 5.54 1.9 5.76-3.96 5.8h-2.42Zm-63.36-61.2h23.56c7.76-.02 9.51-2.53 6.74-9.76q-6.89-18-13.84-35.98c-6.12-15.86-2.94-13.85-21.02-13.97q-.85 0-1.71.06c-2.83.19-4.81 1.51-5.86 4.23-6.07 15.87-12.26 31.69-18.2 47.6-1.88 5.05.17 7.74 5.49 7.79 8.28.08 16.56.02 24.84.03M83.46 359.97c-18.72-.51-36.06 3.96-51.1 15.43-11.69 8.92-19.61 20.19-18.6 35.72.94 14.43 9.08 24.74 20.48 32.63 16.93 11.71 35.95 15.95 56.23 13.89 6.67-.68 11.42.14 14.61 6.62 1.87 3.81 4.73 7.15 7.24 10.62 1.52 2.11 1.1 3.22-1.38 3.99-36.84 11.4-82.27-.81-102.82-37.9-13.2-23.83-10.16-54.71 7.8-75.49 19.97-23.11 45.63-32.4 75.82-30.12 5.02.38 9.91 1.29 14.78 2.46 2.52.61 3.06 1.63 1.58 3.85a954 954 0 0 0-10.53 16.19c-1.04 1.63-2.3 2.27-4.26 2.17-3.28-.17-6.58-.05-9.86-.05Z\"\/><\/svg>\r\n                <svg class=\"dt-logo-svg dt-logo-layer layer-2\" viewBox=\"0 0 427.26 482.97\"><path d=\"M246.99 0c7.75 1.14 15.6 1.7 23.12 4.16 24.56 8.01 43.28 22.74 52.54 47.43 10.44 27.85 1.02 57.96-23.59 77.91-34.01 27.55-87.32 24.75-118.25-6.21-30.55-30.58-26.95-77.93 8.05-104.86C202.97 7.57 219 1.7 236.79.63c1.12-.07 2.22-.41 3.33-.63zm-.88 24.89c-23.02.13-41.84 5.41-57.81 19.21-16.34 14.12-19.17 36.65-6.54 53.12a58 58 0 0 0 15.58 13.93c16.66 10.44 35.07 13.65 54.3 12.1 19.35-1.56 36.75-8.06 50.48-22.57 14.35-15.17 14.65-36.99.45-52.31-15.86-17.12-36.29-22.9-56.45-23.47ZM427.26 315.97c-7.15 1.68-13.03 1.45-18.51-5.31-24.24-29.87-49.07-59.27-73.71-88.83-1.63-1.95-3.25-4.29-6.4-3.12-3.17 1.18-3.32 3.91-3.32 6.75q.05 42.71-.04 85.43c0 1.95 1.11 4.87-1.8 5.5-3.44.74-7.17 1.18-10.5-.42-1.58-.76-.94-2.85-.94-4.37-.04-14.6-.02-29.19-.02-43.79v-90.58c0-6.33.03-6.09 6.5-6.42 4.57-.23 7.59 1.27 10.56 4.88 24.82 30.15 49.87 60.1 74.84 90.13 1.39 1.67 2.72 3.57 5.13 3.42 3.45-.21 4.41-2.63 4.4-5.7q-.01-11.59 0-23.18v-63.53c0-5.54.36-5.92 5.77-5.92 2.69 0 5.45-.42 8.04.81zM2.27 243.86v-66.95c0-5.69.34-5.72 6.11-6.09 4.9-.31 8.08 1.21 11.02 5.44 16.06 23.15 32.47 46.05 48.76 69.04q.87 1.23 1.78 2.42c3.15 4.05 6.26 4.08 9.29-.14 6.76-9.41 13.41-18.9 20.11-28.35q15.74-22.24 31.52-44.45c2.5-3.51 10.35-5.37 14.23-3.55 1.06.5 1.48 1.29 1.53 2.35q.09 1.92.08 3.86c0 44.2.02 88.41-.05 132.61 0 2.12 1.22 5.19-1.46 6.16a16 16 0 0 1-10.52-.06c-1.77-.6-1.19-2.73-1.2-4.23q-.04-20.6-.02-41.2v-37.34c0-1.43.02-2.87-.17-4.28-.31-2.28-1.34-4.08-3.78-4.66-2.29-.55-3.78.54-5.05 2.33Q113.66 242 102.83 257.2c-7.46 10.49-14.87 21.01-22.39 31.46-4.2 5.84-7.82 5.76-12.03-.17q-20.34-28.7-40.67-57.42c-.83-1.17-1.69-2.31-2.49-3.49-1.43-2.12-3.04-3.9-5.96-3.08-3.25.92-3.24 3.58-3.24 6.22v3.86c0 25.32.02 50.64-.04 75.96 0 2.02.9 4.91-1.67 5.69-3.53 1.06-7.44 1.31-10.89-.29-1.88-.88-1.16-3.35-1.16-5.15q-.04-33.47-.02-66.95ZM175.77 243.66v-66.54c0-5.99.24-6.22 6.34-6.23h94.42c5.75 0 5.84.12 5.86 5.68.02 4.58-.24 9.17.07 13.73.29 4.29-1.16 5.72-5.55 5.69-23.32-.18-46.64-.09-69.95-.08-3.86 0-7.73.03-11.59 0-3.72-.03-5.62 1.93-5.67 5.51q-.14 11.16-.02 22.32c.04 4.33 2.78 5.44 6.59 5.43 20.74-.05 41.49-.02 62.23-.02 9.47 0 8.38-.39 8.44 8.25.03 3.43 0 6.87 0 10.3-.01 6.48-.01 6.5-6.33 6.5h-61.8c-1.43 0-2.86-.02-4.29.06-3.07.18-4.79 1.91-4.82 4.93-.09 9.16-.12 18.32 0 27.47.05 4.12 2.87 5.1 6.46 5.09 13.02-.05 26.04-.02 39.05-.02 14.02 0 28.04.11 42.06-.06 3.89-.05 5.4 1.21 5.18 5.17-.27 4.85-.3 9.74 0 14.59.26 4.21-1.41 5.42-5.44 5.39-24.32-.13-48.64-.06-72.96-.06q-11.16.01-22.32 0c-5.67-.02-5.97-.32-5.97-6.16q-.01-33.48 0-66.97ZM1.41 73.84V7.75c0-6 .1-6.1 5.9-6.11 17.73-.01 35.47-.09 53.2.01 41.18.25 74.07 34.85 72.37 76.03-1.59 38.31-33.76 69.27-72.03 69.29-18.02.01-36.04-.1-54.06.08-4.1.04-5.47-1.29-5.45-5.41.15-22.6.07-45.2.07-67.8m13.79.28c0 13.87-.04 27.75.02 41.62.02 4.86 1.51 6.79 5.77 6.74 18.14-.23 36.35 1.33 54.42-.75 32.02-3.68 47.18-24.98 43.08-56.21-3.21-24.4-21.14-37.39-45.81-38.65-16.69-.85-33.45-.18-50.18-.17-6.54 0-7.28.75-7.3 7.52-.03 13.3 0 26.6 0 39.9M277.84 481.75c-4.37 1.05-6.75-1.33-8.34-6.04-2.89-8.52-6.5-16.8-9.6-25.26-1.45-3.95-3.97-5.53-8.1-5.52-24.59.08-49.19.1-73.78-.02-4.57-.02-7.12 1.88-8.65 6.06-3.15 8.59-6.72 17.03-9.75 25.66-1.35 3.85-3.36 5.29-7.49 5.21-10.23-.2-8.99-.32-5.87-8.47 16.88-44.06 33.82-88.1 50.6-132.2 1.42-3.72 3.38-5.01 7.27-4.85q10.73.45 21.44 0c4-.18 5.79 1.38 7.17 5.01 14.88 39.16 29.9 78.27 44.89 117.39 2.2 5.74 4.43 11.47 6.58 17.23 2.07 5.54 1.9 5.76-3.96 5.8h-2.42Zm-63.36-61.2h23.56c7.76-.02 9.51-2.53 6.74-9.76q-6.89-18-13.84-35.98c-6.12-15.86-2.94-13.85-21.02-13.97q-.85 0-1.71.06c-2.83.19-4.81 1.51-5.86 4.23-6.07 15.87-12.26 31.69-18.2 47.6-1.88 5.05.17 7.74 5.49 7.79 8.28.08 16.56.02 24.84.03M83.46 359.97c-18.72-.51-36.06 3.96-51.1 15.43-11.69 8.92-19.61 20.19-18.6 35.72.94 14.43 9.08 24.74 20.48 32.63 16.93 11.71 35.95 15.95 56.23 13.89 6.67-.68 11.42.14 14.61 6.62 1.87 3.81 4.73 7.15 7.24 10.62 1.52 2.11 1.1 3.22-1.38 3.99-36.84 11.4-82.27-.81-102.82-37.9-13.2-23.83-10.16-54.71 7.8-75.49 19.97-23.11 45.63-32.4 75.82-30.12 5.02.38 9.91 1.29 14.78 2.46 2.52.61 3.06 1.63 1.58 3.85a954 954 0 0 0-10.53 16.19c-1.04 1.63-2.3 2.27-4.26 2.17-3.28-.17-6.58-.05-9.86-.05Z\"\/><\/svg>\r\n                <svg class=\"dt-logo-svg dt-logo-layer layer-3\" viewBox=\"0 0 427.26 482.97\"><path d=\"M246.99 0c7.75 1.14 15.6 1.7 23.12 4.16 24.56 8.01 43.28 22.74 52.54 47.43 10.44 27.85 1.02 57.96-23.59 77.91-34.01 27.55-87.32 24.75-118.25-6.21-30.55-30.58-26.95-77.93 8.05-104.86C202.97 7.57 219 1.7 236.79.63c1.12-.07 2.22-.41 3.33-.63zm-.88 24.89c-23.02.13-41.84 5.41-57.81 19.21-16.34 14.12-19.17 36.65-6.54 53.12a58 58 0 0 0 15.58 13.93c16.66 10.44 35.07 13.65 54.3 12.1 19.35-1.56 36.75-8.06 50.48-22.57 14.35-15.17 14.65-36.99.45-52.31-15.86-17.12-36.29-22.9-56.45-23.47ZM427.26 315.97c-7.15 1.68-13.03 1.45-18.51-5.31-24.24-29.87-49.07-59.27-73.71-88.83-1.63-1.95-3.25-4.29-6.4-3.12-3.17 1.18-3.32 3.91-3.32 6.75q.05 42.71-.04 85.43c0 1.95 1.11 4.87-1.8 5.5-3.44.74-7.17 1.18-10.5-.42-1.58-.76-.94-2.85-.94-4.37-.04-14.6-.02-29.19-.02-43.79v-90.58c0-6.33.03-6.09 6.5-6.42 4.57-.23 7.59 1.27 10.56 4.88 24.82 30.15 49.87 60.1 74.84 90.13 1.39 1.67 2.72 3.57 5.13 3.42 3.45-.21 4.41-2.63 4.4-5.7q-.01-11.59 0-23.18v-63.53c0-5.54.36-5.92 5.77-5.92 2.69 0 5.45-.42 8.04.81zM2.27 243.86v-66.95c0-5.69.34-5.72 6.11-6.09 4.9-.31 8.08 1.21 11.02 5.44 16.06 23.15 32.47 46.05 48.76 69.04q.87 1.23 1.78 2.42c3.15 4.05 6.26 4.08 9.29-.14 6.76-9.41 13.41-18.9 20.11-28.35q15.74-22.24 31.52-44.45c2.5-3.51 10.35-5.37 14.23-3.55 1.06.5 1.48 1.29 1.53 2.35q.09 1.92.08 3.86c0 44.2.02 88.41-.05 132.61 0 2.12 1.22 5.19-1.46 6.16a16 16 0 0 1-10.52-.06c-1.77-.6-1.19-2.73-1.2-4.23q-.04-20.6-.02-41.2v-37.34c0-1.43.02-2.87-.17-4.28-.31-2.28-1.34-4.08-3.78-4.66-2.29-.55-3.78.54-5.05 2.33Q113.66 242 102.83 257.2c-7.46 10.49-14.87 21.01-22.39 31.46-4.2 5.84-7.82 5.76-12.03-.17q-20.34-28.7-40.67-57.42c-.83-1.17-1.69-2.31-2.49-3.49-1.43-2.12-3.04-3.9-5.96-3.08-3.25.92-3.24 3.58-3.24 6.22v3.86c0 25.32.02 50.64-.04 75.96 0 2.02.9 4.91-1.67 5.69-3.53 1.06-7.44 1.31-10.89-.29-1.88-.88-1.16-3.35-1.16-5.15q-.04-33.47-.02-66.95ZM175.77 243.66v-66.54c0-5.99.24-6.22 6.34-6.23h94.42c5.75 0 5.84.12 5.86 5.68.02 4.58-.24 9.17.07 13.73.29 4.29-1.16 5.72-5.55 5.69-23.32-.18-46.64-.09-69.95-.08-3.86 0-7.73.03-11.59 0-3.72-.03-5.62 1.93-5.67 5.51q-.14 11.16-.02 22.32c.04 4.33 2.78 5.44 6.59 5.43 20.74-.05 41.49-.02 62.23-.02 9.47 0 8.38-.39 8.44 8.25.03 3.43 0 6.87 0 10.3-.01 6.48-.01 6.5-6.33 6.5h-61.8c-1.43 0-2.86-.02-4.29.06-3.07.18-4.79 1.91-4.82 4.93-.09 9.16-.12 18.32 0 27.47.05 4.12 2.87 5.1 6.46 5.09 13.02-.05 26.04-.02 39.05-.02 14.02 0 28.04.11 42.06-.06 3.89-.05 5.4 1.21 5.18 5.17-.27 4.85-.3 9.74 0 14.59.26 4.21-1.41 5.42-5.44 5.39-24.32-.13-48.64-.06-72.96-.06q-11.16.01-22.32 0c-5.67-.02-5.97-.32-5.97-6.16q-.01-33.48 0-66.97ZM1.41 73.84V7.75c0-6 .1-6.1 5.9-6.11 17.73-.01 35.47-.09 53.2.01 41.18.25 74.07 34.85 72.37 76.03-1.59 38.31-33.76 69.27-72.03 69.29-18.02.01-36.04-.1-54.06.08-4.1.04-5.47-1.29-5.45-5.41.15-22.6.07-45.2.07-67.8m13.79.28c0 13.87-.04 27.75.02 41.62.02 4.86 1.51 6.79 5.77 6.74 18.14-.23 36.35 1.33 54.42-.75 32.02-3.68 47.18-24.98 43.08-56.21-3.21-24.4-21.14-37.39-45.81-38.65-16.69-.85-33.45-.18-50.18-.17-6.54 0-7.28.75-7.3 7.52-.03 13.3 0 26.6 0 39.9M277.84 481.75c-4.37 1.05-6.75-1.33-8.34-6.04-2.89-8.52-6.5-16.8-9.6-25.26-1.45-3.95-3.97-5.53-8.1-5.52-24.59.08-49.19.1-73.78-.02-4.57-.02-7.12 1.88-8.65 6.06-3.15 8.59-6.72 17.03-9.75 25.66-1.35 3.85-3.36 5.29-7.49 5.21-10.23-.2-8.99-.32-5.87-8.47 16.88-44.06 33.82-88.1 50.6-132.2 1.42-3.72 3.38-5.01 7.27-4.85q10.73.45 21.44 0c4-.18 5.79 1.38 7.17 5.01 14.88 39.16 29.9 78.27 44.89 117.39 2.2 5.74 4.43 11.47 6.58 17.23 2.07 5.54 1.9 5.76-3.96 5.8h-2.42Zm-63.36-61.2h23.56c7.76-.02 9.51-2.53 6.74-9.76q-6.89-18-13.84-35.98c-6.12-15.86-2.94-13.85-21.02-13.97q-.85 0-1.71.06c-2.83.19-4.81 1.51-5.86 4.23-6.07 15.87-12.26 31.69-18.2 47.6-1.88 5.05.17 7.74 5.49 7.79 8.28.08 16.56.02 24.84.03M83.46 359.97c-18.72-.51-36.06 3.96-51.1 15.43-11.69 8.92-19.61 20.19-18.6 35.72.94 14.43 9.08 24.74 20.48 32.63 16.93 11.71 35.95 15.95 56.23 13.89 6.67-.68 11.42.14 14.61 6.62 1.87 3.81 4.73 7.15 7.24 10.62 1.52 2.11 1.1 3.22-1.38 3.99-36.84 11.4-82.27-.81-102.82-37.9-13.2-23.83-10.16-54.71 7.8-75.49 19.97-23.11 45.63-32.4 75.82-30.12 5.02.38 9.91 1.29 14.78 2.46 2.52.61 3.06 1.63 1.58 3.85a954 954 0 0 0-10.53 16.19c-1.04 1.63-2.3 2.27-4.26 2.17-3.28-.17-6.58-.05-9.86-.05Z\"\/><\/svg>\r\n            <\/div>\r\n            \r\n            <!-- DESCRIPCI\u00d3N (Ahora superpuesta con margin negativo) -->\r\n            <div class=\"dt-description\">\r\n                <p>\r\n                    Se compone de cinco lotes de 8 por 20 metros, \r\n                    pensados para crecer en armon\u00eda con su entorno.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- LADO DERECHO -->\r\n        <div class=\"dt-right-column\">\r\n            <div class=\"dt-tags-container\" id=\"dtTagCloudWrapper\">\r\n                <div id=\"dtTagCloudCanvas\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"dt-image-container\">\r\n                <div class=\"dt-image-wrapper\" id=\"dtMainImage\">\r\n                    <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/division.gif\" \r\n                        onerror=\"this.src='https:\/\/via.placeholder.com\/600x338?text=Division+Lotes'\"\r\n                        alt=\"Vista a\u00e9rea lotes Domenica\"\r\n                        loading=\"lazy\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            class TagCloud {\r\n                constructor(containerId, tags, radius = 90) {\r\n                    this.container = document.getElementById(containerId);\r\n                    \/\/ Validaci\u00f3n robusta por si el script se carga antes que el DOM\r\n                    if (!this.container) return;\r\n                    \r\n                    this.tags = tags;\r\n                    this.items = [];\r\n                    this.radius = radius;\r\n                    this.mouseX = 0;\r\n                    this.mouseY = 0;\r\n                    this.baseAngleX = (Math.PI \/ 2000); \r\n                    this.baseAngleY = (Math.PI \/ 2000);\r\n                    \r\n                    this.init();\r\n                    this.animate();\r\n                    \r\n                    document.addEventListener('mousemove', (e) => {\r\n                        if (!this.container.isConnected) return;\r\n                        const rect = this.container.getBoundingClientRect();\r\n                        const centerX = rect.left + rect.width \/ 2;\r\n                        const centerY = rect.top + rect.height \/ 2;\r\n                        let velX = (e.clientX - centerX) * 0.00005;\r\n                        let velY = (e.clientY - centerY) * 0.00005;\r\n                        const maxSpeed = 0.002; \r\n                        this.mouseX = Math.max(-maxSpeed, Math.min(maxSpeed, velX));\r\n                        this.mouseY = Math.max(-maxSpeed, Math.min(maxSpeed, velY));\r\n                    });\r\n                }\r\n\r\n                init() {\r\n                    const phi = Math.PI * (3 - Math.sqrt(5));\r\n                    this.tags.forEach((text, i) => {\r\n                        const el = document.createElement('div');\r\n                        el.className = 'tag-cloud-item';\r\n                        el.textContent = text;\r\n                        this.container.appendChild(el);\r\n\r\n                        const y = 1 - (i \/ (this.tags.length - 1)) * 2;\r\n                        const radiusAtY = Math.sqrt(1 - y * y);\r\n                        const theta = phi * i;\r\n                        const x = Math.cos(theta) * radiusAtY;\r\n                        const z = Math.sin(theta) * radiusAtY;\r\n\r\n                        this.items.push({ el, x, y, z });\r\n                    });\r\n                }\r\n\r\n                animate() {\r\n                    this.baseAngleX += this.mouseY || 0.001; \r\n                    this.baseAngleY += this.mouseX || 0.001;\r\n                    const sinX = Math.sin(this.mouseY * 100 + 0.002);\r\n                    const cosX = Math.cos(this.mouseY * 100 + 0.002);\r\n                    const sinY = Math.sin(this.mouseX * 100 + 0.002);\r\n                    const cosY = Math.cos(this.mouseX * 100 + 0.002);\r\n                    const rotationSpeed = 0.005;\r\n                    const autoRotateX = Math.sin(Date.now() * 0.0005) * 0.002;\r\n\r\n                    this.items.forEach(item => {\r\n                        let rx = item.x * Math.cos(rotationSpeed + this.mouseX * 5) - item.z * Math.sin(rotationSpeed + this.mouseX * 5);\r\n                        let rz = item.z * Math.cos(rotationSpeed + this.mouseX * 5) + item.x * Math.sin(rotationSpeed + this.mouseX * 5);\r\n                        item.x = rx; item.z = rz;\r\n                        let ry = item.y * Math.cos(autoRotateX + this.mouseY * 5) - item.z * Math.sin(autoRotateX + this.mouseY * 5);\r\n                        rz = item.z * Math.cos(autoRotateX + this.mouseY * 5) + item.y * Math.sin(autoRotateX + this.mouseY * 5);\r\n                        item.y = ry; item.z = rz;\r\n\r\n                        const scale = (item.z + 2) \/ 3; \r\n                        const opacity = (item.z + 1.5) \/ 2.5;\r\n                        const transX = item.x * this.radius;\r\n                        const transY = item.y * this.radius; \r\n\r\n                        item.el.style.transform = `translate3d(calc(${transX}px - 50%), calc(${transY}px - 50%), 0) scale(${scale})`;\r\n                        item.el.style.opacity = Math.max(0.1, opacity);\r\n                        item.el.style.zIndex = Math.floor(scale * 100);\r\n                        item.el.style.filter = `blur(${(1-scale) * 2}px)`;\r\n                    });\r\n                    requestAnimationFrame(() => this.animate());\r\n                }\r\n            }\r\n\r\n            const initComponent = () => {\r\n                const root = document.getElementById('dt-component-root');\r\n                if(!root) return;\r\n\r\n                const isMobile = window.innerWidth <= 768;\r\n                const tagsList = [\r\n                    \"Superficie total: 160m\u00b2\", \"Servicios\", \r\n                    \"Financiamiento disponible\", \"Escrituraci\u00f3n inmediata\"\r\n                ];\r\n                \r\n                \/\/ Radio ajustado para esfera m\u00e1s peque\u00f1a\r\n                const cloudRadius = isMobile ? 64 : 96; \r\n\r\n                if(document.getElementById('dtTagCloudCanvas') && !document.querySelector('.tag-cloud-item')) {\r\n                    new TagCloud('dtTagCloudCanvas', tagsList, cloudRadius);\r\n                }\r\n\r\n                const logoWrapper = document.getElementById('dtLogoWrapper');\r\n                if (logoWrapper) {\r\n                    const observer = new IntersectionObserver((entries) => {\r\n                        entries.forEach(entry => {\r\n                            if (entry.isIntersecting) {\r\n                                entry.target.classList.add('animated');\r\n                                const delay = isMobile ? 200 : 2000;\r\n                                setTimeout(() => {\r\n                                    const tagCloud = document.getElementById('dtTagCloudWrapper');\r\n                                    const mainImg = document.getElementById('dtMainImage');\r\n                                    if(tagCloud) tagCloud.classList.add('visible');\r\n                                    if(mainImg) mainImg.classList.add('visible');\r\n                                }, delay);\r\n                                observer.disconnect();\r\n                            }\r\n                        });\r\n                    }, { threshold: 0.1 });\r\n                    observer.observe(logoWrapper);\r\n                }\r\n            };\r\n\r\n            if (document.readyState === 'loading') {\r\n                document.addEventListener('DOMContentLoaded', initComponent);\r\n            } else {\r\n                initComponent();\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-8172c21 e-con-full e-flex e-con e-parent\" data-id=\"8172c21\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c0d6bc elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5c0d6bc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"DomenicaTranquilidad\" class=\"domenica-tranquilidad-wrapper\">\r\n    <style>\r\n        \/* ---------------------------------\r\n           FUENTES & RESET\r\n        --------------------------------- *\/\r\n        \/* 1. Instrument Serif (Google Fonts) *\/\r\n        @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&display=swap\");\r\n\r\n        \/* 2. Stage Grotesk (Custom Fonts) *\/\r\n        @font-face {\r\n            font-family: 'Stage Grotesk';\r\n            src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk-regular.woff2') format('woff2');\r\n            font-weight: 400;\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        @font-face {\r\n            font-family: 'Stage Grotesk';\r\n            src: url('https:\/\/noyolbr.com\/path-to-stage-grotesk-medium.woff2') format('woff2');\r\n            font-weight: 500; \/* Peso Medium para botones y \u00e9nfasis *\/\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        \/* ---------------------------------\r\n           ESTILOS BASE\r\n        --------------------------------- *\/\r\n        #DomenicaTranquilidad {\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            margin: 0 auto !important;\r\n            padding: 60px 20px !important;\r\n            \/* SIN FONDO PROPIO, HEREDA DEL CONTENEDOR PADRE *\/\r\n            background-color: transparent !important;\r\n            font-family: \"Stage Grotesk\", system-ui, -apple-system, sans-serif !important;\r\n            font-weight: 400 !important;\r\n            box-sizing: border-box !important;\r\n            overflow: hidden !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad *,\r\n        #DomenicaTranquilidad *::before,\r\n        #DomenicaTranquilidad *::after {\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        \/* ---------------------------------\r\n           LAYOUT\r\n        --------------------------------- *\/\r\n        #DomenicaTranquilidad .dtq-container {\r\n            max-width: 1200px !important;\r\n            margin: 0 auto !important;\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            gap: 50px !important;\r\n            align-items: center !important;\r\n        }\r\n\r\n        \/* ---------------------------------\r\n           IZQUIERDA: POLAROIDS\r\n        --------------------------------- *\/\r\n        #DomenicaTranquilidad .dtq-left {\r\n            position: relative !important;\r\n            width: 100% !important;\r\n            height: 450px !important;\r\n            display: flex !important;\r\n            justify-content: center !important;\r\n            align-items: center !important;\r\n            min-width: 0 !important; \/* evita overflow lateral *\/\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroids {\r\n            position: relative !important;\r\n            width: 100% !important;\r\n            max-width: 500px !important;\r\n            height: 100% !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroid {\r\n            position: absolute !important;\r\n            background: #ffffff !important;\r\n            padding: 12px 12px 25px !important;\r\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0,0,0,0.05) !important;\r\n            transition: transform 0.5s ease !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroid-inner {\r\n            position: relative !important;\r\n            width: 100% !important;\r\n            aspect-ratio: 1 \/ 1 !important;\r\n            overflow: hidden !important;\r\n            background: #eee !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroid-inner img {\r\n            display: block !important;\r\n            width: 100% !important;\r\n            height: 100% !important;\r\n            object-fit: cover !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroid-footer {\r\n            margin-top: 15px !important;\r\n            display: flex !important;\r\n            justify-content: space-between !important;\r\n            align-items: flex-end !important;\r\n            width: 100% !important;\r\n            padding: 0 5px !important;\r\n        }\r\n\r\n        \/* TIPOGRAF\u00cdA POLAROID CAPTION: Stage Grotesk Medium *\/\r\n        #DomenicaTranquilidad .dtq-polaroid-caption {\r\n            font-family: \"Stage Grotesk\", system-ui, sans-serif !important;\r\n            font-weight: 500 !important; \/* Medium *\/\r\n            font-size: 0.65rem !important;\r\n            letter-spacing: 0.15em !important;\r\n            color: #E54325 !important;\r\n            text-transform: uppercase !important;\r\n            text-align: left !important;\r\n            line-height: 1.4 !important;\r\n            flex-grow: 1 !important;\r\n        }\r\n        \r\n        \/* TIPOGRAF\u00cdA N\u00daMERO: Instrument Serif Italic *\/\r\n        #DomenicaTranquilidad .dtq-number {\r\n            font-family: \"Instrument Serif\", serif !important;\r\n            font-style: italic !important;\r\n            color: #E54325 !important;\r\n            font-size: 1.1rem !important;\r\n            text-align: right !important;\r\n            white-space: nowrap !important;\r\n            line-height: 1 !important;\r\n        }\r\n\r\n        \/* Posiciones espec\u00edficas + orden inicial *\/\r\n        #DomenicaTranquilidad .dtq-polaroid-1 {\r\n            width: 260px !important;\r\n            top: 20px !important;\r\n            left: 50% !important;\r\n            transform: translateX(-90%) rotate(-15deg) !important;\r\n            z-index: 2;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-polaroid-2 {\r\n            width: 280px !important;\r\n            top: 60px !important;\r\n            left: 50% !important;\r\n            transform: translateX(-10%) rotate(8deg) !important;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* En desktop: la foto sobre la que pasas el mouse se va arriba *\/\r\n        @media (hover: hover) and (pointer: fine) {\r\n            #DomenicaTranquilidad .dtq-polaroid-1:hover,\r\n            #DomenicaTranquilidad .dtq-polaroid-2:hover {\r\n                z-index: 3;\r\n            }\r\n        }\r\n\r\n        \/* ---------------------------------\r\n           DERECHA: TEXTO Y BOTONES\r\n        --------------------------------- *\/\r\n        #DomenicaTranquilidad .dtq-right {\r\n            width: 100% !important;\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            gap: 20px !important;\r\n            align-items: center !important;\r\n            text-align: center !important;\r\n            min-width: 0 !important; \/* clave para que el texto no se salga en PC *\/\r\n        }\r\n\r\n        \/* TIPOGRAF\u00cdA T\u00cdTULO: Instrument Serif Italic *\/\r\n        #DomenicaTranquilidad .dtq-title {\r\n            font-family: \"Instrument Serif\", serif !important;\r\n            font-style: italic !important;\r\n            font-weight: 400 !important;\r\n            font-size: clamp(2.8rem, 5vw, 4rem) !important;\r\n            line-height: 1.1 !important;\r\n            color: #E54325 !important;\r\n            margin: 0 !important;\r\n        }\r\n\r\n        \/* TIPOGRAF\u00cdA DESCRIPCI\u00d3N: Stage Grotesk Regular *\/\r\n        #DomenicaTranquilidad .dtq-description {\r\n            font-family: \"Stage Grotesk\", system-ui, sans-serif !important;\r\n            font-weight: 400 !important;\r\n            color: #E54325 !important;\r\n            font-size: 0.85rem !important;\r\n            letter-spacing: 0.15em !important;\r\n            line-height: 1.6 !important;\r\n            text-transform: uppercase !important;\r\n            max-width: 600px !important;\r\n            margin: 0 !important;\r\n            overflow-wrap: break-word !important; \/* fuerza salto si alguna palabra es muy larga *\/\r\n            word-break: break-word !important;\r\n        }\r\n\r\n        \/* Grid de Botones *\/\r\n        #DomenicaTranquilidad .dtq-buttons {\r\n            display: grid !important;\r\n            grid-template-columns: repeat(2, auto) !important;\r\n            justify-content: center !important;\r\n            gap: 12px !important;\r\n            margin-top: 20px !important;\r\n            width: 100% !important;\r\n            max-width: 550px !important;\r\n        }\r\n\r\n        \/* TIPOGRAF\u00cdA BOTONES: Stage Grotesk Medium *\/\r\n        #DomenicaTranquilidad .dtq-btn {\r\n            font-family: \"Stage Grotesk\", system-ui, sans-serif !important;\r\n            font-weight: 500 !important;\r\n            border-radius: 50px !important;\r\n            padding: 14px 24px !important;\r\n            text-decoration: none !important;\r\n            text-transform: uppercase !important;\r\n            font-size: 0.7rem !important;\r\n            letter-spacing: 0.12em !important;\r\n            display: inline-flex !important;\r\n            align-items: center !important;\r\n            justify-content: center !important;\r\n            gap: 10px !important;\r\n            border: none !important;\r\n            cursor: pointer !important;\r\n            color: #ffffff !important;\r\n            transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s !important;\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;\r\n            width: fit-content !important;\r\n            background-color: #F04E23 !important; \/* INACTIVO *\/\r\n            overflow-wrap: break-word !important;\r\n            word-break: break-word !important;\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-btn:hover {\r\n            transform: translateY(-2px) !important;\r\n            box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;\r\n            background-color: #683008 !important; \/* HOVER *\/\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-btn:focus {\r\n            background-color: #683008 !important; \/* FOCUS *\/\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-btn:active {\r\n            background-color: #683008 !important; \/* ACTIVO = HOVER *\/\r\n        }\r\n\r\n        #DomenicaTranquilidad .dtq-btn-icon {\r\n            width: 20px !important;\r\n            height: auto !important;\r\n            filter: brightness(0) invert(1) !important; \r\n        }\r\n\r\n        \/* Bot\u00f3n de financiamiento: solo layout, sin color extra *\/\r\n        #DomenicaTranquilidad .dtq-btn-financiamiento {\r\n            grid-column: 1 \/ -1 !important;\r\n            justify-self: center !important;\r\n            width: fit-content !important;\r\n            min-width: 280px !important;\r\n        }\r\n\r\n        \/* ---------------------------------\r\n           RESPONSIVE\r\n        --------------------------------- *\/\r\n        @media screen and (min-width: 1024px) {\r\n            #DomenicaTranquilidad {\r\n                padding: 80px 40px !important;\r\n            }\r\n            \r\n            #DomenicaTranquilidad .dtq-container {\r\n                flex-direction: row !important;\r\n                align-items: center !important;\r\n                gap: 60px !important;\r\n            }\r\n\r\n            #DomenicaTranquilidad .dtq-left {\r\n                flex: 1 1 0 !important;\r\n            }\r\n\r\n            #DomenicaTranquilidad .dtq-right {\r\n                flex: 1 1 0 !important;\r\n            }\r\n        }\r\n\r\n        @media screen and (max-width: 600px) {\r\n            #DomenicaTranquilidad .dtq-buttons {\r\n                display: flex !important;\r\n                flex-direction: column !important;\r\n            }\r\n            \r\n            #DomenicaTranquilidad .dtq-btn {\r\n                width: 100% !important;\r\n            }\r\n            \r\n            #DomenicaTranquilidad .dtq-polaroid-1 {\r\n                 transform: translateX(-50%) rotate(-10deg) !important;\r\n                 left: 45% !important;\r\n            }\r\n            \r\n            #DomenicaTranquilidad .dtq-polaroid-2 {\r\n                 transform: translateX(-50%) rotate(5deg) !important;\r\n                 left: 55% !important;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"dtq-container\">\r\n        \r\n        <!-- IZQUIERDA: POLAROIDS -->\r\n        <div class=\"dtq-left\">\r\n            <div class=\"dtq-polaroids\">\r\n                <!-- Polaroid 1 -->\r\n                <div class=\"dtq-polaroid dtq-polaroid-1\">\r\n                    <div class=\"dtq-polaroid-inner\">\r\n                        <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/1.jpg\" alt=\"Ceviche\" loading=\"lazy\" \/>\r\n                    <\/div>\r\n                    <div class=\"dtq-polaroid-footer\">\r\n                        <div class=\"dtq-polaroid-caption\">\r\n                            Un delicioso<br>ceviche de camar\u00f3n\r\n                        <\/div>\r\n                        <span class=\"dtq-number\">01<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Polaroid 2 -->\r\n                <div class=\"dtq-polaroid dtq-polaroid-2\">\r\n                    <div class=\"dtq-polaroid-inner\">\r\n                        <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/2.jpg\" alt=\"Vistas\" loading=\"lazy\" \/>\r\n                    <\/div>\r\n                    <div class=\"dtq-polaroid-footer\">\r\n                        <div class=\"dtq-polaroid-caption\">\r\n                            Unas vistas<br>envidiables\r\n                        <\/div>\r\n                        <span class=\"dtq-number\">02<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- DERECHA: TEXTO + BOTONES -->\r\n        <div class=\"dtq-right\">\r\n            <h2 class=\"dtq-title\">Tranquilidad y respaldo<\/h2>\r\n\r\n            <p class=\"dtq-description\">\r\n                Con certeza jur\u00eddica, planes de financiamiento confiables y\r\n                escrituraci\u00f3n inmediata para tu total tranquilidad.\r\n            <\/p>\r\n\r\n            <div class=\"dtq-buttons\">\r\n                <!-- Bot\u00f3n 1 -->\r\n                <a href=\"#\" class=\"dtq-btn dtq-btn-legal\">\r\n                    <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Certeza-legal-scaled.png\" alt=\"\" class=\"dtq-btn-icon\" \/>\r\n                    Certeza Legal\r\n                <\/a>\r\n\r\n                <!-- Bot\u00f3n 2 -->\r\n                <a href=\"#\" class=\"dtq-btn dtq-btn-entorno\">\r\n                    <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Entorno-scaled.png\" alt=\"\" class=\"dtq-btn-icon\" \/>\r\n                    Entorno Urbanizado\r\n                <\/a>\r\n\r\n                <!-- Bot\u00f3n 3 -->\r\n                <a href=\"#\" class=\"dtq-btn dtq-btn-financiamiento\">\r\n                    <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Financiamiento-scaled.png\" alt=\"\" class=\"dtq-btn-icon\" \/>\r\n                    Financiamiento Flexible\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- ANIMACI\u00d3N GSAP + INTERACCI\u00d3N POLAROIDS -->\r\n    <script>\r\n        (function () {\r\n            var root = document.getElementById(\"DomenicaTranquilidad\");\r\n            if (!root) return;\r\n\r\n            function runAnimation() {\r\n                if (typeof gsap === \"undefined\") return;\r\n                \r\n                var tl = gsap.timeline({ defaults: { ease: \"power3.out\", duration: 1 } });\r\n                \r\n                tl.from(root.querySelector(\".dtq-polaroid-1\"), { y: 50, opacity: 0, rotation: -30 })\r\n                  .from(root.querySelector(\".dtq-polaroid-2\"), { y: 50, opacity: 0, rotation: 20 }, \"-=0.8\")\r\n                  .from(root.querySelector(\".dtq-title\"), { y: 30, opacity: 0 }, \"-=0.5\")\r\n                  .from(root.querySelector(\".dtq-description\"), { y: 20, opacity: 0 }, \"-=0.7\")\r\n                  .from(root.querySelectorAll(\".dtq-btn\"), { y: 20, opacity: 0, stagger: 0.1 }, \"-=0.5\");\r\n            }\r\n\r\n            function setupPolaroidSwapOnClick() {\r\n                var p1 = root.querySelector(\".dtq-polaroid-1\");\r\n                var p2 = root.querySelector(\".dtq-polaroid-2\");\r\n                if (!p1 || !p2) return;\r\n\r\n                \/\/ Estado inicial: la 1 est\u00e1 arriba\r\n                var firstOnTop = true;\r\n\r\n                function applyOrder() {\r\n                    if (firstOnTop) {\r\n                        p1.style.zIndex = \"2\";\r\n                        p2.style.zIndex = \"1\";\r\n                    } else {\r\n                        p1.style.zIndex = \"1\";\r\n                        p2.style.zIndex = \"2\";\r\n                    }\r\n                }\r\n\r\n                applyOrder();\r\n\r\n                [p1, p2].forEach(function (el) {\r\n                    el.addEventListener(\"click\", function () {\r\n                        \/\/ Al hacer clic, se invierte qui\u00e9n queda arriba\r\n                        firstOnTop = !firstOnTop;\r\n                        applyOrder();\r\n                    });\r\n                });\r\n            }\r\n\r\n            \/\/ Cargar GSAP si hace falta\r\n            if (typeof gsap === \"undefined\") {\r\n                var s = document.createElement(\"script\");\r\n                s.src = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\";\r\n                s.onload = function () {\r\n                    runAnimation();\r\n                };\r\n                document.head.appendChild(s);\r\n            } else {\r\n                runAnimation();\r\n            }\r\n\r\n            \/\/ Configurar el intercambio por clic (PC y m\u00f3vil)\r\n            setupPolaroidSwapOnClick();\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\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-e2df9d6 e-con-full e-flex e-con e-parent\" data-id=\"e2df9d6\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70c2891 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"70c2891\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"marina-widget-wrapper\">\r\n    <!-- Importar Fuentes -->\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;500;700&display=swap');\r\n\r\n        \/* RESET Y ESTILOS AISLADOS *\/\r\n        #marina-widget-wrapper {\r\n            width: 100%;\r\n            background-color: transparent; \/* Fondo transparente para integrarse con el sitio *\/\r\n            padding: 40px 16px;\r\n            font-family: 'Montserrat', sans-serif;\r\n            box-sizing: border-box;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #marina-widget-wrapper * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        \/* CONTENEDOR LIMITADOR *\/\r\n        #marina-widget-wrapper .mw-inner-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            width: 100%;\r\n        }\r\n\r\n        \/* HEADER DE TEXTO *\/\r\n        #marina-widget-wrapper .mw-header {\r\n            text-align: center;\r\n            margin-bottom: 32px;\r\n            color: #E85038; \/* Naranja Rojizo *\/\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-header h2 {\r\n            font-family: 'Playfair Display', serif !important;\r\n            font-size: clamp(22px, 6vw, 34px) !important;\r\n            line-height: 1.4 !important;\r\n            font-weight: 400 !important;\r\n            margin: 0 auto !important;\r\n            letter-spacing: 0.02em !important;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-header span.italic {\r\n            font-style: italic;\r\n            font-weight: 400;\r\n        }\r\n\r\n        \/* Versiones de heading para m\u00f3vil vs desktop *\/\r\n        #marina-widget-wrapper .mw-heading-mobile {\r\n            display: block;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-heading-desktop {\r\n            display: none;\r\n        }\r\n\r\n        \/* Ajuste fino solo para m\u00f3vil peque\u00f1o *\/\r\n        @media (max-width: 480px) {\r\n            #marina-widget-wrapper {\r\n                padding-inline: 20px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-header {\r\n                margin-bottom: 28px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-header h2 {\r\n                font-size: 18px !important; \/* M\u00e1s controlado en m\u00f3viles chicos *\/\r\n                line-height: 1.5 !important;\r\n            }\r\n        }\r\n\r\n        \/* GRILLA DE IM\u00c1GENES (MOBILE FIRST) *\/\r\n        #marina-widget-wrapper .mw-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr; \/* Una columna en m\u00f3vil *\/\r\n            gap: 0; \/* El bot\u00f3n ocupar\u00e1 el espacio entre tarjetas *\/\r\n            position: relative;\r\n        }\r\n\r\n        \/* TARJETAS *\/\r\n        #marina-widget-wrapper .mw-card {\r\n            position: relative;\r\n            width: 100%;\r\n            aspect-ratio: 4 \/ 3; \/* Proporci\u00f3n paisaje en m\u00f3vil *\/\r\n            overflow: hidden;\r\n            cursor: pointer;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-card:first-child {\r\n            margin-bottom: 80px; \/* Espacio para el bot\u00f3n central en m\u00f3vil *\/\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-image-bg {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover; \/* La imagen cubre todo el espacio sin deformarse *\/\r\n            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-card:hover .mw-image-bg {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        \/* OVERLAYS Y TEXTOS INTERNOS *\/\r\n        #marina-widget-wrapper .mw-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-top-text {\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 0;\r\n            width: 100%;\r\n            text-align: center;\r\n            color: #ffffff;\r\n            font-size: 9px;\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n            font-weight: 600;\r\n            z-index: 2;\r\n            text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-bottom-title {\r\n            position: absolute;\r\n            bottom: 24px;\r\n            left: 0;\r\n            width: 100%;\r\n            text-align: center;\r\n            color: #ffffff;\r\n            z-index: 2;\r\n            padding: 0 10px;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-bottom-title h3 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(22px, 5vw, 28px);\r\n            font-weight: 400;\r\n            text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        \/* BOT\u00d3N CENTRAL FLOTANTE *\/\r\n        #marina-widget-wrapper .mw-center-button {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 100px;\r\n            height: 100px;\r\n            background-color: #E85038;\r\n            border-radius: 50%;\r\n            z-index: 10;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #ffffff;\r\n            text-decoration: none;\r\n            box-shadow: 0 10px 30px rgba(232, 80, 56, 0.4);\r\n            transition: background-color 0.3s ease, box-shadow 0.3s ease;\r\n            cursor: pointer;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-center-button span {\r\n            font-size: 7px !important; \/* M\u00e1s peque\u00f1o en m\u00f3vil para mantener 3 l\u00edneas *\/\r\n            font-weight: 700;\r\n            letter-spacing: 1px;\r\n            line-height: 1.2;\r\n            text-align: center;\r\n            display: block;\r\n        }\r\n\r\n        #marina-widget-wrapper .mw-center-button:hover {\r\n            background-color: #d1402a;\r\n            box-shadow: 0 14px 36px rgba(232, 80, 56, 0.5);\r\n        }\r\n\r\n        \/* TABLET \/ DESKTOP (2 l\u00edneas en el t\u00edtulo) *\/\r\n        @media (min-width: 769px) {\r\n            #marina-widget-wrapper {\r\n                padding: 60px 20px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-header {\r\n                margin-bottom: 50px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-header h2 {\r\n                font-size: clamp(26px, 3.2vw, 40px) !important;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-grid {\r\n                grid-template-columns: 1fr 1fr; \/* Dos columnas en escritorio *\/\r\n                gap: 20px;\r\n                height: 75vh; \/* Altura en escritorio *\/\r\n                min-height: 500px;\r\n                max-height: 80vh; \/* Altura m\u00e1xima reducida a 80vh en desktop\/tablet horizontal *\/\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-card {\r\n                height: 100%;\r\n                aspect-ratio: auto; \/* La tarjeta toma la altura del grid *\/\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-card:first-child {\r\n                margin-bottom: 0; \/* En desktop ya no necesitamos espacio extra *\/\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-bottom-title h3 {\r\n                font-size: clamp(24px, 3vw, 40px);\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-top-text {\r\n                top: 30px;\r\n                font-size: 10px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-center-button {\r\n                width: 130px;\r\n                height: 130px;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-center-button span {\r\n                font-size: 9px !important;\r\n                line-height: 1.3;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-heading-mobile {\r\n                display: none;\r\n            }\r\n\r\n            #marina-widget-wrapper .mw-heading-desktop {\r\n                display: block;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"mw-inner-container\">\r\n        <!-- Texto Superior -->\r\n        <div class=\"mw-header\">\r\n            <h2 class=\"mw-heading-mobile\">\r\n                Cercano a puntos <span class=\"italic\">estrat\u00e9gicos<\/span>,<br>\r\n                bajo el mismo sol que da vida a la<br>\r\n                <span class=\"italic\">costa yucateca.<\/span>\r\n            <\/h2>\r\n            <h2 class=\"mw-heading-desktop\">\r\n                Cercano a puntos <span class=\"italic\">estrat\u00e9gicos<\/span>, bajo el<br>\r\n                mismo sol que da vida a la <span class=\"italic\">costa yucateca.<\/span>\r\n            <\/h2>\r\n        <\/div>\r\n\r\n        <!-- Grilla Visual -->\r\n        <div class=\"mw-grid\">\r\n\r\n            <!-- Tarjeta 1: Puerto de Abrigo -->\r\n            <div class=\"mw-card\" onclick=\"window.location.href='#'\">\r\n                <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Puerto-de-abrigo.jpg\" alt=\"Puerto de Abrigo\" class=\"mw-image-bg\">\r\n                <div class=\"mw-overlay\"><\/div>\r\n                <div class=\"mw-top-text\">VIVE LA EXPERIENCIA<\/div>\r\n                <div class=\"mw-bottom-title\">\r\n                    <h3>Puerto de Abrigo<\/h3>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- BOT\u00d3N CENTRAL -->\r\n            <a href=\"#\" class=\"mw-center-button\" id=\"mwMagneticBtn\" aria-label=\"Explorar en el mapa\">\r\n                <span>EXPLORAR<\/span>\r\n                <span>EN EL<\/span>\r\n                <span>MAPA<\/span>\r\n            <\/a>\r\n\r\n            <!-- Tarjeta 2: Marina Yucalpet\u00e9n -->\r\n            <div class=\"mw-card\" onclick=\"window.location.href='#'\">\r\n                <img decoding=\"async\" src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Marina-Yucalpeten.png\" alt=\"Marina Yucalpet\u00e9n\" class=\"mw-image-bg\">\r\n                <div class=\"mw-overlay\"><\/div>\r\n                <div class=\"mw-top-text\">S\u00c9 PARTE DEL PROYECTO<\/div>\r\n                <div class=\"mw-bottom-title\">\r\n                    <h3>Marina Yucalpet\u00e9n<\/h3>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Script ligero para efecto magn\u00e9tico suave (Solo Desktop) -->\r\n    <script>\r\n        (function() {\r\n            const btn = document.getElementById('mwMagneticBtn');\r\n            const container = document.querySelector('#marina-widget-wrapper .mw-grid');\r\n\r\n            if (!btn || !container) return;\r\n\r\n            \/\/ Solo activar el efecto magn\u00e9tico en pantallas grandes donde hay mouse\r\n            if (window.matchMedia('(min-width: 769px)').matches) {\r\n                container.addEventListener('mousemove', function(e) {\r\n                    const rect = container.getBoundingClientRect();\r\n                    const x = e.clientX - rect.left;\r\n                    const y = e.clientY - rect.top;\r\n\r\n                    const centerX = rect.width \/ 2;\r\n                    const centerY = rect.height \/ 2;\r\n\r\n                    const deltaX = (x - centerX) * 0.15;\r\n                    const deltaY = (y - centerY) * 0.15;\r\n\r\n                    btn.style.transform = `translate(calc(-50% + ${deltaX}px), calc(-50% + ${deltaY}px))`;\r\n                });\r\n\r\n                container.addEventListener('mouseleave', function() {\r\n                    btn.style.transform = 'translate(-50%, -50%)';\r\n                });\r\n            }\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\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-62d6c2d e-con-full e-flex e-con e-parent\" data-id=\"62d6c2d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f24a3f elementor-widget elementor-widget-html\" data-id=\"3f24a3f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"DomenicaHeroClouds1\" class=\"DHC1-root\">\r\n  <div class=\"dh1-section\" data-dh1> \r\n    <!-- Capa de nubes SVG animadas -->\r\n    <div class=\"dh1-cloud-layer\" aria-hidden=\"true\">\r\n      <!-- Nube 1 -->\r\n      <svg class=\"dh1-cloud dh1-cloud--1\" viewBox=\"0 0 260 90\" focusable=\"false\">\r\n        <g>\r\n          <ellipse cx=\"70\" cy=\"55\" rx=\"52\" ry=\"30\" fill=\"#f9f9f9\" fill-opacity=\"0.92\" \/>\r\n          <ellipse cx=\"120\" cy=\"45\" rx=\"60\" ry=\"34\" fill=\"#f9f9f9\" fill-opacity=\"0.9\" \/>\r\n          <ellipse cx=\"170\" cy=\"53\" rx=\"48\" ry=\"28\" fill=\"#f9f9f9\" fill-opacity=\"0.9\" \/>\r\n          <ellipse cx=\"96\" cy=\"38\" rx=\"32\" ry=\"22\" fill=\"#f9f9f9\" fill-opacity=\"0.85\" \/>\r\n          <ellipse cx=\"145\" cy=\"37\" rx=\"30\" ry=\"20\" fill=\"#f9f9f9\" fill-opacity=\"0.8\" \/>\r\n        <\/g>\r\n      <\/svg>\r\n\r\n      <!-- Nube 2 -->\r\n      <svg class=\"dh1-cloud dh1-cloud--2\" viewBox=\"0 0 260 90\" focusable=\"false\">\r\n        <g>\r\n          <ellipse cx=\"80\" cy=\"52\" rx=\"50\" ry=\"30\" fill=\"#f9f9f9\" fill-opacity=\"0.9\" \/>\r\n          <ellipse cx=\"130\" cy=\"44\" rx=\"60\" ry=\"34\" fill=\"#f9f9f9\" fill-opacity=\"0.9\" \/>\r\n          <ellipse cx=\"178\" cy=\"50\" rx=\"46\" ry=\"28\" fill=\"#f9f9f9\" fill-opacity=\"0.88\" \/>\r\n          <ellipse cx=\"110\" cy=\"36\" rx=\"32\" ry=\"22\" fill=\"#f9f9f9\" fill-opacity=\"0.82\" \/>\r\n          <ellipse cx=\"155\" cy=\"36\" rx=\"30\" ry=\"20\" fill=\"#f9f9f9\" fill-opacity=\"0.78\" \/>\r\n        <\/g>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"dh1-inner\">\r\n      <div class=\"dh1-logo-block\">\r\n        <div class=\"dh1-main-row\">\r\n          <div class=\"dh1-logo-wrap\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/Logo-1.png\"\r\n              alt=\"Reserva DOMENCA\"\r\n              class=\"dh1-main-logo\"\r\n              loading=\"lazy\"\r\n            \/>\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/noyolbr.com\/wp-content\/uploads\/2025\/11\/by-NOYOL-1.png\"\r\n              alt=\"by NOYOL\"\r\n              class=\"dh1-noyol-badge\"\r\n              loading=\"lazy\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <p class=\"dh1-tagline\">Donde el mar y la certeza se encuentran.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    \/* Fuentes *\/\r\n    @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&display=swap\");\r\n\r\n    \/* Root wrapper *\/\r\n    [data-dh1].dh1-section {\r\n      position: relative;\r\n      overflow: hidden;\r\n      background: linear-gradient(to bottom, #F9F1E6 0%, #FFFFFF 100%);\r\n      padding: clamp(3rem, 7vh, 5rem) 1.5rem 2.75rem;\r\n      text-align: center;\r\n      color: #f8472c;\r\n    }\r\n\r\n    [data-dh1] .dh1-inner {\r\n      max-width: 900px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 0.75rem; \/* gap vertical reducido *\/\r\n      position: relative;\r\n      z-index: 2; \/* por encima de las nubes *\/\r\n    }\r\n\r\n    \/* Capa de nubes *\/\r\n    [data-dh1] .dh1-cloud-layer {\r\n      position: absolute;\r\n      inset: 0;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    [data-dh1] .dh1-cloud {\r\n      position: absolute;\r\n      width: 40vw;\r\n      max-width: 360px;\r\n      height: auto;\r\n      filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.16));\r\n    }\r\n\r\n    \/* Posiciones y animaciones de cada nube\r\n      Nos aseguramos de que no toquen el borde superior\/inferior (m\u00e1rgenes verticales) *\/\r\n    [data-dh1] .dh1-cloud--1 {\r\n      top: 18%;\r\n      left: -35vw;\r\n      animation: dh1-cloud-move-1 85s linear infinite;\r\n    }\r\n\r\n    [data-dh1] .dh1-cloud--2 {\r\n      top: 42%;\r\n      right: -38vw;\r\n      animation: dh1-cloud-move-2 95s linear infinite;\r\n    }\r\n\r\n    \/* Cada nube cruza por completo la pantalla de lado a lado *\/\r\n    @keyframes dh1-cloud-move-1 {\r\n      0% {\r\n        transform: translateX(0);\r\n      }\r\n      100% {\r\n        transform: translateX(130vw);\r\n      }\r\n    }\r\n\r\n    @keyframes dh1-cloud-move-2 {\r\n      0% {\r\n        transform: translateX(0);\r\n      }\r\n      100% {\r\n        transform: translateX(-140vw);\r\n      }\r\n    }\r\n\r\n    \/* Logo + pegatina *\/\r\n    [data-dh1] .dh1-main-row {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    [data-dh1] .dh1-logo-wrap {\r\n      position: relative;\r\n      display: inline-block;\r\n    }\r\n\r\n    [data-dh1] .dh1-main-logo {\r\n      max-width: clamp(220px, 34vw, 360px);\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    \/* Valor base (desktop est\u00e1ndar) *\/\r\n    [data-dh1] .dh1-noyol-badge {\r\n      position: absolute;\r\n      right: -26%; \/* desktop normal: ligeramente fuera, casi tocando el borde *\/\r\n      top: 32%;\r\n      transform: translateY(-50%) rotate(-3deg);\r\n      max-width: clamp(80px, 9vw, 120px);\r\n      height: auto;\r\n      display: block;\r\n      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));\r\n    }\r\n\r\n    \/* Tagline con tama\u00f1os fijos: 24 (desktop), 18 (tablet), 12 (m\u00f3vil) *\/\r\n    [data-dh1] .dh1-tagline {\r\n      margin: 0.5rem 0 0;\r\n      font-family: \"Instrument Serif\", \"Times New Roman\", serif;\r\n      font-size: 34px;\r\n      font-weight: 400;\r\n      color: #f8472c;\r\n    }\r\n\r\n    \/* Desktop refinements *\/\r\n    @media (min-width: 1024px) {\r\n      [data-dh1].dh1-section {\r\n        padding-top: 5.2rem;\r\n        padding-bottom: 3.35rem;\r\n      }\r\n\r\n      [data-dh1] .dh1-inner {\r\n        gap: 1rem; \/* un poco m\u00e1s de aire en desktop pero sigue compacto *\/\r\n      }\r\n    }\r\n\r\n    \/* Tablet (entre 768px y 1023px): 18px *\/\r\n    @media (min-width: 768px) and (max-width: 1023px) {\r\n      [data-dh1] .dh1-tagline {\r\n        font-size: 28px;\r\n      }\r\n    }\r\n\r\n    \/* Tablet & mobile *\/\r\n    @media (max-width: 767px) {\r\n      [data-dh1].dh1-section {\r\n        padding: 3.25rem 1.5rem 2.5rem;\r\n      }\r\n\r\n      [data-dh1] .dh1-cloud {\r\n        width: 60vw;\r\n        max-width: none;\r\n      }\r\n\r\n      [data-dh1] .dh1-cloud--1 {\r\n        top: 14%;\r\n        left: -60vw;\r\n      }\r\n\r\n      [data-dh1] .dh1-cloud--2 {\r\n        top: 46%;\r\n        right: -60vw;\r\n      }\r\n\r\n      [data-dh1] .dh1-logo-wrap {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n\r\n      [data-dh1] .dh1-noyol-badge {\r\n        position: static;\r\n        transform: rotate(-3deg);\r\n        margin-top: 0.7rem;\r\n      }\r\n\r\n      [data-dh1] .dh1-tagline {\r\n        max-width: 22rem;\r\n        margin-inline: auto;\r\n        font-size: 22px; \/* m\u00f3vil *\/\r\n      }\r\n    }\r\n\r\n    \/* Ajustes extra para pantallas muy peque\u00f1as *\/\r\n    @media (max-width: 480px) {\r\n      [data-dh1].dh1-section {\r\n        padding-inline: 1.25rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/div>\r\n\r\n\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-c41d48f e-flex e-con-boxed e-con e-parent\" data-id=\"c41d48f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a02976 elementor-widget elementor-widget-button\" data-id=\"7a02976\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">AGENDA UNA VISITA<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\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-115ba87 e-con-full e-flex e-con e-parent\" data-id=\"115ba87\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>    \/* Fonts *\/<br \/>\n    @font-face {<br \/>\n      font-family: &#8216;Stage Grotesk&#8217;;<br \/>\n      src: url(&#8216;https:\/\/noyolbr.com\/path-to-stage-grotesk.woff2&#8217;) format(&#8216;woff2&#8217;);<br \/>\n      font-weight: 400;<br \/>\n      font-style: normal;<br \/>\n      font-display: swap;<br \/>\n    }<br \/>\n    @import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&#038;display=swap&#8217;);<br \/>\n    \/* Reset scoped to component *\/<br \/>\n    #DomenicaHero1,<br \/>\n    #DomenicaHero1 *,<br \/>\n    #DomenicaHero1 [&#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-3545","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3545","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=3545"}],"version-history":[{"count":122,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3545\/revisions"}],"predecessor-version":[{"id":3751,"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/pages\/3545\/revisions\/3751"}],"wp:attachment":[{"href":"https:\/\/noyolbr.com\/index.php\/wp-json\/wp\/v2\/media?parent=3545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}