{"id":3549,"date":"2026-10-01T06:45:08","date_gmt":"2026-10-01T06:45:08","guid":{"rendered":"https:\/\/sun-stop.es\/?page_id=3549"},"modified":"2026-11-06T06:39:12","modified_gmt":"2026-11-06T06:39:12","slug":"marsella","status":"publish","type":"page","link":"https:\/\/sun-stop.es\/?page_id=3549","title":{"rendered":"Marsella | P\u00e9rgola Tensada"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3549\" class=\"elementor elementor-3549\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0aedb03 e-flex e-con-boxed e-con e-parent\" data-id=\"0aedb03\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b4d1d48 e-con-full e-flex e-con e-child\" data-id=\"b4d1d48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-661baa1 e-con-full e-flex e-con e-child\" data-id=\"661baa1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc68a53 elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"bc68a53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"marsella-interactiva\">\n  <div class=\"mi-escena\">\n\n    <img decoding=\"async\"\n      id=\"mi-imagen-principal\"\n      class=\"mi-imagen-principal\"\n      src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-21-sept-2026-08_39_41.png\"\n      alt=\"P\u00e9rgola tensada Marsella autoportante\"\n    >\n\n    <!-- PUNTO 1 \u00b7 SISTEMA RETR\u00c1CTIL -->\n    <button\n      type=\"button\"\n      class=\"mi-punto mi-punto-1\"\n      data-detalle=\"1\"\n      aria-label=\"Ver sistema retr\u00e1ctil de paliller\u00eda\"\n    >\n      <span class=\"mi-pulso\"><\/span>\n      <span class=\"mi-numero\">1<\/span>\n    <\/button>\n\n    <!-- PUNTO 2 \u00b7 INCLINACI\u00d3N -->\n    <button\n      type=\"button\"\n      class=\"mi-punto mi-punto-2\"\n      data-detalle=\"2\"\n      aria-label=\"Ver inclinaci\u00f3n del 10%\"\n    >\n      <span class=\"mi-pulso\"><\/span>\n      <span class=\"mi-numero\">2<\/span>\n    <\/button>\n\n    <!-- PUNTO 3 \u00b7 LONA OPAK -->\n    <button\n      type=\"button\"\n      class=\"mi-punto mi-punto-3\"\n      data-detalle=\"3\"\n      aria-label=\"Ver detalle de la lona OPAK\"\n    >\n      <span class=\"mi-pulso\"><\/span>\n      <span class=\"mi-numero\">3<\/span>\n    <\/button>\n\n  <\/div>\n\n\n  <div\n    class=\"mi-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Detalle de la p\u00e9rgola Marsella\"\n    hidden\n  >\n\n    <div\n      class=\"mi-modal-fondo\"\n      data-cerrar\n    ><\/div>\n\n\n    <div class=\"mi-modal-contenido\">\n\n      <button\n        type=\"button\"\n        class=\"mi-cerrar\"\n        data-cerrar\n        aria-label=\"Cerrar detalle\"\n      >\n        \u00d7\n      <\/button>\n\n\n      <div class=\"mi-modal-imagen-wrap\">\n\n        <!-- IMAGEN SIMPLE -->\n        <div class=\"mi-vista-simple\">\n\n          <img decoding=\"async\"\n            class=\"mi-modal-imagen\"\n            src=\"\"\n            alt=\"\"\n          >\n\n          <button\n            type=\"button\"\n            class=\"mi-ampliar\"\n            aria-label=\"Ampliar imagen\"\n            title=\"Ampliar imagen\"\n          >\n            \u26f6\n          <\/button>\n\n        <\/div>\n\n\n        <!-- COLLAGE PUNTO 1 -->\n        <div\n          class=\"mi-vista-collage\"\n          hidden\n        >\n\n          <div class=\"mi-collage-grid\">\n\n            <div class=\"mi-collage-item\">\n\n              <div class=\"mi-collage-label\">\n                LONA CERRADA\n              <\/div>\n\n              <img decoding=\"async\"\n                class=\"mi-collage-imagen\"\n                id=\"mi-collage-img-1\"\n                src=\"\"\n                alt=\"\"\n              >\n\n            <\/div>\n\n\n            <div class=\"mi-collage-item\">\n\n              <div class=\"mi-collage-label\">\n                LONA ABIERTA\n              <\/div>\n\n              <img decoding=\"async\"\n                class=\"mi-collage-imagen\"\n                id=\"mi-collage-img-2\"\n                src=\"\"\n                alt=\"\"\n              >\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mi-modal-informacion\">\n\n        <div class=\"mi-modal-etiqueta\">\n          DETALLE MARSELLA\n        <\/div>\n\n        <div class=\"mi-modal-titulo\"><\/div>\n\n        <div class=\"mi-modal-texto\"><\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n#marsella-interactiva {\n  width: 100%;\n  max-width: 980px;\n  margin: 0 auto;\n  padding: 0;\n  background: #ffffff;\n  color: #222222;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n}\n\n#marsella-interactiva,\n#marsella-interactiva * {\n  box-sizing: border-box;\n}\n\n#marsella-interactiva .mi-escena {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 600 \/ 665;\n  overflow: hidden;\n  background: #f2f0eb;\n  border-radius: 4px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);\n}\n\n#marsella-interactiva .mi-imagen-principal {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  object-fit: cover;\n  object-position: top center;\n  background: #f2f0eb;\n  margin: 0;\n}\n\n#marsella-interactiva .mi-punto {\n  position: absolute;\n  z-index: 5;\n  width: 34px;\n  height: 34px;\n  margin: 0;\n  padding: 0;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  background: #f3972d;\n  color: #ffffff;\n  cursor: pointer;\n  box-shadow:\n    0 4px 12px rgba(0, 0, 0, 0.32),\n    0 0 0 5px rgba(243, 151, 45, 0.20);\n  transform: translate(-50%, -50%);\n  transition:\n    transform 0.2s ease,\n    background 0.2s ease;\n}\n\n#marsella-interactiva .mi-punto:hover,\n#marsella-interactiva .mi-punto:focus {\n  background: #dc7e17;\n  transform: translate(-50%, -50%) scale(1.12);\n  outline: none;\n}\n\n#marsella-interactiva .mi-numero {\n  position: relative;\n  z-index: 3;\n  display: grid;\n  width: 100%;\n  height: 100%;\n  place-items: center;\n  color: #ffffff;\n  font-size: 13px !important;\n  line-height: 1 !important;\n  font-weight: 700;\n}\n\n#marsella-interactiva .mi-pulso {\n  position: absolute;\n  inset: -7px;\n  z-index: 1;\n  border: 2px solid rgba(243, 151, 45, 0.7);\n  border-radius: 50%;\n  animation: mi-pulso 1.8s infinite;\n}\n\n@keyframes mi-pulso {\n  0% {\n    opacity: 0.9;\n    transform: scale(0.75);\n  }\n\n  70% {\n    opacity: 0;\n    transform: scale(1.45);\n  }\n\n  100% {\n    opacity: 0;\n    transform: scale(1.45);\n  }\n}\n\n\n\/* POSICIONES *\/\n\n\/* Punto 1 se mantiene *\/\n#marsella-interactiva .mi-punto-1 {\n  top: 31%;\n  left: 72%;\n}\n\n\/* Punto 2 ocupa ahora la posici\u00f3n antigua del 3 *\/\n#marsella-interactiva .mi-punto-2 {\n  top: 42%;\n  left: 33%;\n}\n\n\/* Punto 3 ocupa ahora la posici\u00f3n antigua del 2 *\/\n#marsella-interactiva .mi-punto-3 {\n  top: 29%;\n  left: 53%;\n}\n\n\n\/* MODAL *\/\n#marsella-interactiva .mi-modal[hidden] {\n  display: none !important;\n}\n\n#marsella-interactiva .mi-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n}\n\n#marsella-interactiva .mi-modal-fondo {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.78);\n  backdrop-filter: blur(4px);\n}\n\n#marsella-interactiva .mi-modal-contenido {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);\n  width: min(1080px, 96vw);\n  max-height: 90vh;\n  overflow: hidden;\n  background: #ffffff;\n  border-radius: 5px;\n  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);\n}\n\n#marsella-interactiva .mi-modal-imagen-wrap {\n  position: relative;\n  display: grid;\n  min-height: 420px;\n  overflow: hidden;\n  place-items: center;\n  background: #eeeeee;\n}\n\n#marsella-interactiva .mi-vista-simple,\n#marsella-interactiva .mi-vista-collage {\n  width: 100%;\n  height: 100%;\n}\n\n#marsella-interactiva .mi-modal-imagen {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-height: 90vh;\n  object-fit: contain;\n  background: #eeeeee;\n  transition: transform 0.25s ease;\n  cursor: zoom-in;\n}\n\n#marsella-interactiva .mi-modal-imagen.mi-ampliada {\n  transform: scale(1.65);\n  cursor: zoom-out;\n}\n\n#marsella-interactiva .mi-ampliar {\n  position: absolute;\n  right: 13px;\n  bottom: 13px;\n  z-index: 3;\n  width: 39px;\n  height: 39px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: rgba(20, 20, 20, 0.78);\n  color: #ffffff;\n  font-size: 20px !important;\n  line-height: 1 !important;\n  cursor: pointer;\n}\n\n\n\/* COLLAGE *\/\n#marsella-interactiva .mi-collage-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  width: 100%;\n  height: 100%;\n  gap: 0;\n}\n\n#marsella-interactiva .mi-collage-item {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f0f0f0;\n  border-right: 1px solid #dddddd;\n}\n\n#marsella-interactiva .mi-collage-item:last-child {\n  border-right: 0;\n}\n\n#marsella-interactiva .mi-collage-label {\n  padding: 14px 16px 12px;\n  background: #ffffff;\n  color: #e78b27;\n  font-size: 10px !important;\n  line-height: 1.2 !important;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-align: center;\n}\n\n#marsella-interactiva .mi-collage-imagen {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  object-fit: contain;\n  background: #eeeeee;\n}\n\n\n\/* INFORMACI\u00d3N *\/\n#marsella-interactiva .mi-modal-informacion {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 38px 32px;\n  background: #ffffff;\n}\n\n#marsella-interactiva .mi-modal-etiqueta {\n  margin: 0 0 7px;\n  color: #e78b27;\n  font-size: 9px !important;\n  line-height: 1.2 !important;\n  font-weight: 700;\n  letter-spacing: 0.13em;\n}\n\n#marsella-interactiva .mi-modal-titulo {\n  margin: 0 0 13px;\n  color: #222222;\n  font-size: 21px !important;\n  line-height: 1.2 !important;\n  font-weight: 700;\n}\n\n#marsella-interactiva .mi-modal-texto {\n  margin: 0;\n  color: #606060;\n  font-size: 12px !important;\n  line-height: 1.55 !important;\n  font-weight: 400;\n}\n\n#marsella-interactiva .mi-cerrar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 8;\n  display: grid;\n  width: 38px;\n  height: 38px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  place-items: center;\n  background: rgba(20, 20, 20, 0.84);\n  color: #ffffff;\n  font-size: 25px !important;\n  line-height: 1 !important;\n  cursor: pointer;\n}\n\n\n\/* M\u00d3VIL *\/\n@media (max-width: 760px) {\n\n  #marsella-interactiva .mi-imagen-principal {\n    min-height: 0;\n  }\n\n  #marsella-interactiva .mi-punto {\n    width: 30px;\n    height: 30px;\n  }\n\n  #marsella-interactiva .mi-numero {\n    font-size: 11px !important;\n  }\n\n  #marsella-interactiva .mi-modal {\n    padding: 10px;\n  }\n\n  #marsella-interactiva .mi-modal-contenido {\n    grid-template-columns: 1fr;\n    width: 96vw;\n    max-height: 94vh;\n    overflow-y: auto;\n  }\n\n  #marsella-interactiva .mi-modal-imagen-wrap {\n    min-height: 280px;\n    height: auto;\n  }\n\n  #marsella-interactiva .mi-vista-simple {\n    height: 55vh;\n  }\n\n  #marsella-interactiva .mi-vista-collage {\n    height: auto;\n  }\n\n  #marsella-interactiva .mi-collage-grid {\n    grid-template-columns: 1fr;\n  }\n\n  #marsella-interactiva .mi-collage-item {\n    min-height: 250px;\n    border-right: 0;\n    border-bottom: 1px solid #dddddd;\n  }\n\n  #marsella-interactiva .mi-collage-item:last-child {\n    border-bottom: 0;\n  }\n\n  #marsella-interactiva .mi-modal-informacion {\n    padding: 22px 20px;\n  }\n\n  #marsella-interactiva .mi-modal-titulo {\n    font-size: 18px !important;\n  }\n\n  #marsella-interactiva .mi-modal-texto {\n    font-size: 11px !important;\n  }\n\n}\n<\/style>\n\n\n<script>\n(function () {\n\n  const raiz =\n    document.getElementById('marsella-interactiva');\n\n  if (\n    !raiz ||\n    raiz.dataset.iniciado === 'si'\n  ) {\n    return;\n  }\n\n  raiz.dataset.iniciado = 'si';\n\n\n  const IMAGEN_PRINCIPAL =\n    'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-21-sept-2026-08_39_41.png';\n\n  const IMAGEN_LONA_CERRADA =\n    'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/07\/Marsella_Autoportante_DETAIL_01.jpg';\n\n  const IMAGEN_LONA_ABIERTA =\n    'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/07\/Marsella_Autoportante_DETAIL_02.jpg';\n\n  const IMAGEN_INCLINACION_10 =\n    'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/marsella.png';\n\n  const IMAGEN_OPAK =\n    'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/opak.png';\n\n\n  const detalles = {\n\n    1: {\n      tipo: 'collage',\n\n      titulo:\n        'Sistema retr\u00e1ctil de paliller\u00eda',\n\n      texto:\n        'El sistema retr\u00e1ctil de paliller\u00eda permite la apertura y cierre de la lona de forma fluida, adaptando la cubierta a cada necesidad. Con la lona extendida, la p\u00e9rgola protege el espacio exterior; al recogerla, permite una mayor entrada de luz y una sensaci\u00f3n de apertura.',\n\n      imagen1:\n        IMAGEN_LONA_CERRADA,\n\n      alt1:\n        'Lona cerrada de la p\u00e9rgola tensada Marsella',\n\n      imagen2:\n        IMAGEN_LONA_ABIERTA,\n\n      alt2:\n        'Lona abierta de la p\u00e9rgola tensada Marsella'\n    },\n\n\n    2: {\n      tipo: 'simple',\n\n      titulo:\n        'Inclinaci\u00f3n del 10% personalizable',\n\n      texto:\n        'El grado de inclinaci\u00f3n del 10%, personalizable seg\u00fan las necesidades del proyecto, asegura un flujo \u00f3ptimo del agua y un rendimiento perfecto del sistema retr\u00e1ctil.',\n\n      imagen:\n        IMAGEN_INCLINACION_10,\n\n      alt:\n        'Inclinaci\u00f3n de la p\u00e9rgola tensada Marsella'\n    },\n\n\n    3: {\n      tipo: 'simple',\n\n      titulo:\n        'Lona OPAK',\n\n      texto:\n        'Marsella incorpora lona OPAK, disponible en una amplia gama de tejidos de alta calidad. Esta variedad permite adaptar el acabado de la cubierta al proyecto, aportando valor tanto en est\u00e9tica como en comodidad y funcionalidad.',\n\n      imagen:\n        IMAGEN_OPAK,\n\n      alt:\n        'Tejido OPAK para p\u00e9rgola tensada Marsella'\n    }\n\n  };\n\n\n  const imagenPrincipal =\n    raiz.querySelector('#mi-imagen-principal');\n\n  const modal =\n    raiz.querySelector('.mi-modal');\n\n  const imagenModal =\n    raiz.querySelector('.mi-modal-imagen');\n\n  const tituloModal =\n    raiz.querySelector('.mi-modal-titulo');\n\n  const textoModal =\n    raiz.querySelector('.mi-modal-texto');\n\n  const botonAmpliar =\n    raiz.querySelector('.mi-ampliar');\n\n  const vistaSimple =\n    raiz.querySelector('.mi-vista-simple');\n\n  const vistaCollage =\n    raiz.querySelector('.mi-vista-collage');\n\n  const collageImg1 =\n    raiz.querySelector('#mi-collage-img-1');\n\n  const collageImg2 =\n    raiz.querySelector('#mi-collage-img-2');\n\n\n  imagenPrincipal.src =\n    IMAGEN_PRINCIPAL;\n\n\n  function abrirDetalle(numero) {\n\n    const detalle =\n      detalles[numero];\n\n    if (!detalle) {\n      return;\n    }\n\n    imagenModal.classList.remove(\n      'mi-ampliada'\n    );\n\n    tituloModal.textContent =\n      detalle.titulo;\n\n    textoModal.textContent =\n      detalle.texto;\n\n\n    if (\n      detalle.tipo === 'collage'\n    ) {\n\n      vistaSimple.hidden =\n        true;\n\n      vistaCollage.hidden =\n        false;\n\n      collageImg1.src =\n        detalle.imagen1;\n\n      collageImg1.alt =\n        detalle.alt1;\n\n      collageImg2.src =\n        detalle.imagen2;\n\n      collageImg2.alt =\n        detalle.alt2;\n\n      imagenModal.removeAttribute(\n        'src'\n      );\n\n      imagenModal.removeAttribute(\n        'alt'\n      );\n\n    } else {\n\n      vistaSimple.hidden =\n        false;\n\n      vistaCollage.hidden =\n        true;\n\n      imagenModal.src =\n        detalle.imagen;\n\n      imagenModal.alt =\n        detalle.alt;\n\n      collageImg1.removeAttribute(\n        'src'\n      );\n\n      collageImg2.removeAttribute(\n        'src'\n      );\n\n    }\n\n\n    modal.hidden =\n      false;\n\n    document.documentElement.style.overflow =\n      'hidden';\n\n  }\n\n\n  function cerrarDetalle() {\n\n    modal.hidden =\n      true;\n\n    imagenModal.classList.remove(\n      'mi-ampliada'\n    );\n\n    imagenModal.removeAttribute(\n      'src'\n    );\n\n    imagenModal.removeAttribute(\n      'alt'\n    );\n\n    collageImg1.removeAttribute(\n      'src'\n    );\n\n    collageImg1.removeAttribute(\n      'alt'\n    );\n\n    collageImg2.removeAttribute(\n      'src'\n    );\n\n    collageImg2.removeAttribute(\n      'alt'\n    );\n\n    vistaSimple.hidden =\n      false;\n\n    vistaCollage.hidden =\n      true;\n\n    document.documentElement.style.overflow =\n      '';\n\n  }\n\n\n  function cambiarZoom() {\n\n    if (\n      vistaSimple.hidden\n    ) {\n      return;\n    }\n\n    imagenModal.classList.toggle(\n      'mi-ampliada'\n    );\n\n  }\n\n\n  raiz\n    .querySelectorAll('[data-detalle]')\n    .forEach(function (punto) {\n\n      punto.addEventListener(\n        'click',\n        function () {\n\n          abrirDetalle(\n            punto.dataset.detalle\n          );\n\n        }\n      );\n\n    });\n\n\n  raiz\n    .querySelectorAll('[data-cerrar]')\n    .forEach(function (elemento) {\n\n      elemento.addEventListener(\n        'click',\n        cerrarDetalle\n      );\n\n    });\n\n\n  botonAmpliar.addEventListener(\n    'click',\n    cambiarZoom\n  );\n\n\n  imagenModal.addEventListener(\n    'click',\n    cambiarZoom\n  );\n\n\n  document.addEventListener(\n    'keydown',\n    function (evento) {\n\n      if (\n        evento.key === 'Escape' &&\n        !modal.hidden\n      ) {\n\n        cerrarDetalle();\n\n      }\n\n    }\n  );\n\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8ab558 elementor-widget__width-initial elementor-widget elementor-widget-gallery\" data-id=\"c8ab558\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;lazyload&quot;:&quot;yes&quot;,&quot;gallery_layout&quot;:&quot;grid&quot;,&quot;columns&quot;:4,&quot;columns_tablet&quot;:2,&quot;columns_mobile&quot;:1,&quot;gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;link_to&quot;:&quot;file&quot;,&quot;aspect_ratio&quot;:&quot;3:2&quot;,&quot;overlay_background&quot;:&quot;yes&quot;,&quot;content_hover_animation&quot;:&quot;fade-in&quot;}\" data-widget_type=\"gallery.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-gallery__container\">\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/00_ambiente_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"00_ambiente_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0NCwidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDBfYW1iaWVudGVfbWFyc2VsbGEud2VicCIsInNsaWRlc2hvdyI6ImM4YWI1NTgifQ%3D%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/00_ambiente_marsella-300x200.webp\" data-width=\"300\" data-height=\"200\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/04_ambiente_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"04_ambiente_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0NSwidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDRfYW1iaWVudGVfbWFyc2VsbGEud2VicCIsInNsaWRlc2hvdyI6ImM4YWI1NTgifQ%3D%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/04_ambiente_marsella-225x300.webp\" data-width=\"225\" data-height=\"300\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/05_detalle_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"05_detalle_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0NiwidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDVfZGV0YWxsZV9tYXJzZWxsYS53ZWJwIiwic2xpZGVzaG93IjoiYzhhYjU1OCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/05_detalle_marsella-225x300.webp\" data-width=\"225\" data-height=\"300\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/01_ambiente_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"01_ambiente_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0OCwidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDFfYW1iaWVudGVfbWFyc2VsbGEud2VicCIsInNsaWRlc2hvdyI6ImM4YWI1NTgifQ%3D%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/01_ambiente_marsella-225x300.webp\" data-width=\"225\" data-height=\"300\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/06_detalle_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"06_detalle_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0NywidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDZfZGV0YWxsZV9tYXJzZWxsYS53ZWJwIiwic2xpZGVzaG93IjoiYzhhYjU1OCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/06_detalle_marsella-225x300.webp\" data-width=\"225\" data-height=\"300\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/02_ambiente_marsella.webp\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"c8ab558\" data-elementor-lightbox-title=\"02_ambiente_marsella\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM0OSwidXJsIjoiaHR0cHM6XC9cL3N1bi1zdG9wLmVzXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI2XC8xMFwvMDJfYW1iaWVudGVfbWFyc2VsbGEud2VicCIsInNsaWRlc2hvdyI6ImM4YWI1NTgifQ%3D%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/02_ambiente_marsella-225x300.webp\" data-width=\"225\" data-height=\"300\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0598a7b e-con-full e-flex e-con e-child\" data-id=\"0598a7b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bd8785b e-con-full e-flex e-con e-child\" data-id=\"bd8785b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc3f7b5 elementor-widget elementor-widget-heading\" data-id=\"cc3f7b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">P\u00c9RGOLA TENSADA<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7898c8 elementor-widget elementor-widget-heading\" data-id=\"d7898c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">MARSELLA<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c05088 elementor-widget elementor-widget-text-editor\" data-id=\"5c05088\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Dise\u00f1ada para crear espacios exteriores c\u00f3modos, protegidos y elegantes, la <strong>p\u00e9rgola tensada Marsella<\/strong> combina una estructura de aluminio con un sistema de lona retr\u00e1ctil\u00a0 de paliller\u00eda motorizada que permite regular f\u00e1cilmente la entrada de luz y sombra.<\/p><p>Su dise\u00f1o vers\u00e1til permite adaptarla a diferentes espacios gracias a sus configuraciones: <strong>autoportante, adosada y multim\u00f3dulo<\/strong>. Adem\u00e1s, puede incorporar <strong>iluminaci\u00f3n LED opcional<\/strong> para disfrutar del espacio tambi\u00e9n durante la noche.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0805de elementor-widget elementor-widget-shortcode\" data-id=\"c0805de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n#marsella-portada-info,\n#marsella-portada-info * {\n  box-sizing: border-box;\n}\n\n#marsella-portada-info {\n  --orange: #FF9E18;\n  --orange-hover: #e78a0d;\n  --text: #252525;\n  --muted: #777777;\n  --border: #dddddd;\n\n  width: 100%;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n\/* =========================\n   CARACTER\u00cdSTICAS\n========================= *\/\n\n#marsella-portada-info .marsella-caracteristicas {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 10px;\n  width: 100%;\n  margin: 0 0 20px;\n}\n\n#marsella-portada-info .marsella-caracteristica {\n  display: flex;\n  align-items: center;\n  min-height: 38px;\n  padding: 9px 13px;\n  border: 1px solid var(--border);\n  border-radius: 11px;\n  background: #ffffff;\n  color: var(--text);\n  font-size: 13px;\n  line-height: 1.25;\n  font-weight: 700;\n}\n\n#marsella-portada-info .marsella-numero {\n  margin-right: 4px;\n  color: var(--orange);\n  font-weight: 800;\n}\n\n\/* =========================\n   BOTONES\n========================= *\/\n\n#marsella-portada-info .marsella-botones {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n#marsella-portada-info .marsella-configurar,\n#marsella-portada-info .marsella-funcionamiento-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-height: 40px;\n  padding: 11px 18px;\n\n  border-radius: 10px;\n\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 13px;\n  line-height: 1;\n  font-weight: 700;\n\n  text-decoration: none;\n  cursor: pointer;\n\n  transition:\n    background .2s ease,\n    color .2s ease,\n    border-color .2s ease,\n    transform .2s ease;\n}\n\n\/* Bot\u00f3n configurar *\/\n#marsella-portada-info .marsella-configurar {\n  border: 1px solid var(--orange);\n  background: var(--orange);\n  color: #ffffff;\n}\n\n#marsella-portada-info .marsella-configurar:hover {\n  background: var(--orange-hover);\n  border-color: var(--orange-hover);\n  color: #ffffff;\n  transform: translateY(-1px);\n}\n\n\/* Bot\u00f3n funcionamiento *\/\n#marsella-portada-info .marsella-funcionamiento-btn {\n  appearance: none;\n  border: 1px solid #d2d2d2;\n  background: #ffffff;\n  color: #222222;\n}\n\n#marsella-portada-info .marsella-funcionamiento-btn:hover {\n  border-color: var(--orange);\n  color: var(--orange);\n  transform: translateY(-1px);\n}\n\n\n\/* =========================\n   MODAL FUNCIONAMIENTO\n========================= *\/\n\n#marsella-modal,\n#marsella-modal * {\n  box-sizing: border-box;\n}\n\n#marsella-modal {\n  --orange: #FF9E18;\n\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n\n  display: none;\n  place-items: center;\n\n  padding: 18px;\n\n  background: rgba(0, 0, 0, .58);\n  backdrop-filter: blur(3px);\n\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n#marsella-modal.activo {\n  display: grid;\n}\n\n\/* CAJA *\/\n#marsella-modal .marsella-box {\n  position: relative;\n\n  width: min(900px, 96vw);\n  max-height: 94vh;\n  overflow-y: auto;\n\n  padding: 36px 48px 34px;\n\n  background: #ffffff;\n  border-radius: 5px;\n\n  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);\n}\n\n\/* CERRAR *\/\n#marsella-modal .marsella-close {\n  position: absolute;\n  top: 20px;\n  right: 22px;\n  z-index: 20;\n\n  display: grid;\n  place-items: center;\n\n  width: 32px;\n  height: 32px;\n\n  padding: 0;\n\n  border: 2px solid #dedede;\n  border-radius: 50%;\n\n  background: #ffffff;\n  color: #cccccc;\n\n  font-size: 22px;\n  line-height: 1;\n\n  cursor: pointer;\n}\n\n#marsella-modal .marsella-close:hover {\n  color: var(--orange);\n  border-color: var(--orange);\n}\n\n\/* CABECERA *\/\n#marsella-modal .marsella-header {\n  padding-right: 45px;\n}\n\n#marsella-modal .marsella-header h2 {\n  margin: 0 0 8px;\n\n  color: #686868;\n\n  font-size: 23px;\n  line-height: 1.15;\n  font-weight: 600;\n}\n\n#marsella-modal .marsella-subtitulo {\n  color: #888888;\n\n  font-size: 14px;\n  line-height: 1.2;\n}\n\n#marsella-modal .marsella-subtitulo span {\n  color: var(--orange);\n}\n\n#marsella-modal .marsella-divider {\n  height: 1px;\n\n  margin: 18px 0 26px;\n\n  background: #e7e7e7;\n}\n\n\/* INDICACI\u00d3N *\/\n#marsella-modal .marsella-help {\n  margin-bottom: 13px;\n\n  text-align: center;\n\n  color: #b8b8b8;\n\n  font-size: 14px;\n  font-weight: 600;\n}\n\n#marsella-modal .marsella-arrow {\n  display: block;\n\n  margin-top: 3px;\n\n  font-size: 21px;\n  line-height: 1;\n}\n\n\/* V\u00cdDEO *\/\n#marsella-modal .marsella-media {\n  position: relative;\n\n  width: min(600px, 100%);\n  margin: 0 auto;\n\n  overflow: hidden;\n\n  background: #ffffff;\n\n  cursor: pointer;\n  user-select: none;\n}\n\n#marsella-modal .marsella-media video {\n  display: block;\n\n  width: 100%;\n  height: auto;\n  max-height: 58vh;\n\n  margin: auto;\n\n  object-fit: contain;\n\n  background: #ffffff;\n}\n\n\/* CARGANDO *\/\n#marsella-modal .marsella-loading {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  color: #aaaaaa;\n  background: #ffffff;\n\n  font-size: 12px;\n\n  transition: opacity .2s ease;\n\n  pointer-events: none;\n}\n\n#marsella-modal .marsella-loading.oculto {\n  opacity: 0;\n  visibility: hidden;\n}\n\n\/* BOT\u00d3N SOBRE V\u00cdDEO *\/\n#marsella-modal .marsella-hint {\n  position: absolute;\n  left: 50%;\n  bottom: 14px;\n  z-index: 4;\n\n  transform: translateX(-50%);\n\n  display: flex;\n  align-items: center;\n  gap: 7px;\n\n  padding: 8px 13px;\n\n  border-radius: 20px;\n\n  background: rgba(255, 255, 255, .94);\n  color: #777777;\n\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: .07em;\n\n  box-shadow: 0 3px 14px rgba(0, 0, 0, .10);\n\n  white-space: nowrap;\n  pointer-events: none;\n\n  transition: opacity .25s ease;\n}\n\n#marsella-modal .marsella-hint strong {\n  color: var(--orange);\n}\n\n\/* PIE *\/\n#marsella-modal .marsella-bottom {\n  margin-top: 20px;\n\n  padding: 18px 22px;\n\n  background: #f6f6f6;\n  color: #666666;\n}\n\n#marsella-modal .marsella-bottom p {\n  margin: 0;\n\n  font-size: 11px;\n  line-height: 1.65;\n}\n\n#marsella-modal .marsella-bottom strong {\n  color: #444444;\n}\n\n\n\/* =========================\n   RESPONSIVE\n========================= *\/\n\n@media (max-width: 700px) {\n\n  #marsella-portada-info .marsella-caracteristicas {\n    grid-template-columns: 1fr;\n    gap: 8px;\n  }\n\n  #marsella-portada-info .marsella-caracteristica {\n    min-height: 36px;\n\n    padding: 9px 12px;\n\n    font-size: 12px;\n  }\n\n  #marsella-portada-info .marsella-botones {\n    gap: 8px;\n  }\n\n  #marsella-portada-info .marsella-configurar,\n  #marsella-portada-info .marsella-funcionamiento-btn {\n    min-height: 39px;\n\n    padding: 11px 15px;\n\n    font-size: 12px;\n  }\n\n  #marsella-modal .marsella-box {\n    padding: 28px 18px 22px;\n  }\n\n  #marsella-modal .marsella-close {\n    top: 13px;\n    right: 13px;\n  }\n\n  #marsella-modal .marsella-header h2 {\n    font-size: 19px;\n  }\n\n  #marsella-modal .marsella-subtitulo {\n    font-size: 12px;\n  }\n\n  #marsella-modal .marsella-help {\n    font-size: 12px;\n  }\n\n  #marsella-modal .marsella-bottom {\n    padding: 15px 17px;\n  }\n\n  #marsella-modal .marsella-bottom p {\n    font-size: 10px;\n  }\n}\n<\/style>\n\n\n<div id=\"marsella-portada-info\">\n\n  <!-- CARACTER\u00cdSTICAS -->\n  <div class=\"marsella-caracteristicas\">\n\n    <div class=\"marsella-caracteristica\">\n      <span class=\"marsella-numero\">01.<\/span>\n      Lona tensada retr\u00e1ctil\n    <\/div>\n\n    <div class=\"marsella-caracteristica\">\n      <span class=\"marsella-numero\">02.<\/span>\n      Medidas est\u00e1ndar 4 \u00d7 3 m\n    <\/div>\n\n    <div class=\"marsella-caracteristica\">\n      <span class=\"marsella-numero\">03.<\/span>\n      Iluminaci\u00f3n LED opcional\n    <\/div>\n\n    <div class=\"marsella-caracteristica\">\n      <span class=\"marsella-numero\">04.<\/span>\n      M\u00faltiples configuraciones\n    <\/div>\n\n  <\/div>\n\n\n  <!-- BOTONES -->\n  <div class=\"marsella-botones\">\n\n    <a\n      class=\"marsella-configurar\"\n      href=\"https:\/\/sun-stop.configuradoramedida.com\/application\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      Configurar Marsella\n    <\/a>\n\n    <button\n      type=\"button\"\n      class=\"marsella-funcionamiento-btn\"\n      id=\"marsellaAbrirModal\"\n    >\n      Ver funcionamiento\n    <\/button>\n\n  <\/div>\n\n<\/div>\n\n\n<!-- MODAL FUNCIONAMIENTO -->\n<div\n  id=\"marsella-modal\"\n  aria-hidden=\"true\"\n>\n\n  <div\n    class=\"marsella-box\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Funcionamiento P\u00e9rgola Marsella\"\n  >\n\n    <button\n      type=\"button\"\n      class=\"marsella-close\"\n      id=\"marsellaCerrarModal\"\n      aria-label=\"Cerrar\"\n    >\n      \u00d7\n    <\/button>\n\n\n    <div class=\"marsella-header\">\n\n      <h2>P\u00c9RGOLA MARSELLA<\/h2>\n\n      <div class=\"marsella-subtitulo\">\n        <span>TENSADA<\/span> MARSELLA\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"marsella-divider\"><\/div>\n\n\n    <div class=\"marsella-help\">\n\n      Haz clic en la p\u00e9rgola para verla en funcionamiento\n\n      <span class=\"marsella-arrow\">\u2304<\/span>\n\n    <\/div>\n\n\n    <div\n      class=\"marsella-media\"\n      id=\"marsellaMedia\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Ver funcionamiento de la P\u00e9rgola Marsella\"\n    >\n\n      <div\n        class=\"marsella-loading\"\n        id=\"marsellaLoading\"\n      >\n        Cargando p\u00e9rgola...\n      <\/div>\n\n\n      <video\n        id=\"marsellaVideo\"\n        muted\n        playsinline\n        preload=\"auto\"\n      >\n\n        <source\n          src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/0921.mp4\"\n          type=\"video\/mp4\"\n        >\n\n      <\/video>\n\n\n      <div\n        class=\"marsella-hint\"\n        id=\"marsellaHint\"\n      >\n\n        <strong>\u2195<\/strong>\n\n        <span>VER MOVIMIENTO<\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"marsella-bottom\">\n\n      <p>\n        Pulsa sobre la <strong>P\u00e9rgola Marsella<\/strong>\n        para ver el movimiento de apertura de su cubierta.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n  const modal =\n    document.getElementById('marsella-modal');\n\n  const abrirModal =\n    document.getElementById('marsellaAbrirModal');\n\n  const cerrarModal =\n    document.getElementById('marsellaCerrarModal');\n\n  const media =\n    document.getElementById('marsellaMedia');\n\n  const video =\n    document.getElementById('marsellaVideo');\n\n  const hint =\n    document.getElementById('marsellaHint');\n\n  const hintTexto =\n    hint.querySelector('span');\n\n  const loading =\n    document.getElementById('marsellaLoading');\n\n  let reproduciendo = false;\n\n\n  \/* PREPARAR V\u00cdDEO *\/\n  function prepararVideo() {\n\n    video.pause();\n\n    reproduciendo = false;\n\n    hintTexto.textContent =\n      'VER MOVIMIENTO';\n\n    hint.style.opacity = '1';\n\n    loading.classList.remove('oculto');\n\n    if (video.readyState >= 2) {\n\n      try {\n        video.currentTime = 0.05;\n      } catch (e) {}\n\n      loading.classList.add('oculto');\n\n    } else {\n\n      video.load();\n\n    }\n\n  }\n\n\n  \/* V\u00cdDEO CARGADO *\/\n  video.addEventListener(\n    'loadeddata',\n    function () {\n\n      try {\n        video.currentTime = 0.05;\n      } catch (e) {}\n\n      loading.classList.add('oculto');\n\n    }\n  );\n\n\n  video.addEventListener(\n    'canplay',\n    function () {\n\n      loading.classList.add('oculto');\n\n    }\n  );\n\n\n  \/* ABRIR MODAL *\/\n  abrirModal.addEventListener(\n    'click',\n    function () {\n\n      modal.classList.add('activo');\n\n      modal.setAttribute(\n        'aria-hidden',\n        'false'\n      );\n\n      document.documentElement.style.overflow =\n        'hidden';\n\n      prepararVideo();\n\n    }\n  );\n\n\n  \/* CERRAR MODAL *\/\n  function cerrar() {\n\n    modal.classList.remove('activo');\n\n    modal.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n    video.pause();\n\n    reproduciendo = false;\n\n    document.documentElement.style.overflow =\n      '';\n\n  }\n\n\n  cerrarModal.addEventListener(\n    'click',\n    cerrar\n  );\n\n\n  \/* REPRODUCIR *\/\n  function reproducir() {\n\n    if (reproduciendo) {\n      return;\n    }\n\n    reproduciendo = true;\n\n    video.pause();\n\n    video.currentTime = 0;\n\n    hint.style.opacity = '.25';\n\n    const playPromise =\n      video.play();\n\n    if (playPromise) {\n\n      playPromise.catch(\n        function (error) {\n\n          console.error(\n            'Error al reproducir:',\n            error\n          );\n\n          reproduciendo = false;\n\n          hint.style.opacity = '1';\n\n        }\n      );\n\n    }\n\n  }\n\n\n  \/* FIN DEL V\u00cdDEO *\/\n  video.addEventListener(\n    'ended',\n    function () {\n\n      reproduciendo = false;\n\n      hint.style.opacity = '1';\n\n      hintTexto.textContent =\n        'VOLVER A VER';\n\n    }\n  );\n\n\n  \/* CLICK EN P\u00c9RGOLA *\/\n  media.addEventListener(\n    'click',\n    reproducir\n  );\n\n\n  \/* TECLADO *\/\n  media.addEventListener(\n    'keydown',\n    function (e) {\n\n      if (\n        e.key === 'Enter' ||\n        e.key === ' '\n      ) {\n\n        e.preventDefault();\n\n        reproducir();\n\n      }\n\n    }\n  );\n\n\n  \/* CERRAR AL HACER CLICK FUERA *\/\n  modal.addEventListener(\n    'click',\n    function (e) {\n\n      if (e.target === modal) {\n        cerrar();\n      }\n\n    }\n  );\n\n\n  \/* CERRAR CON ESC *\/\n  document.addEventListener(\n    'keydown',\n    function (e) {\n\n      if (\n        e.key === 'Escape' &&\n        modal.classList.contains('activo')\n      ) {\n\n        cerrar();\n\n      }\n\n    }\n  );\n\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-99f6cc5 e-con-full e-flex e-con e-child\" data-id=\"99f6cc5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2651a95 elementor-widget elementor-widget-text-editor\" data-id=\"2651a95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Producto desde 4.225,00\u0404<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b62efd elementor-widget elementor-widget-text-editor\" data-id=\"5b62efd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>P\u00e9rgola disponible en Leroy Merlin.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebd3fba elementor-align-center elementor-widget elementor-widget-button\" data-id=\"ebd3fba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/sun-stop.es\/?page_id=4726\">\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\">D\u00f3nde comprar<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\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-4a55384 e-flex e-con-boxed e-con e-parent\" data-id=\"4a55384\" data-element_type=\"container\" data-e-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-14e9b91 elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"14e9b91\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!-- =========================================================\n     MARSELLA \u00b7 CARRUSEL MANUAL DE CONFIGURACIONES\n     FORMATO BASADO EN EL CARRUSEL ADJUNTO\n========================================================= -->\n\n<div\n  id=\"marsella-modelos-manual\"\n  class=\"mmc\"\n  tabindex=\"0\"\n  aria-label=\"Configuraciones de p\u00e9rgola Marsella\"\n>\n\n  <div class=\"mmc__stage\">\n\n\n    <!-- =====================================================\n         01 \u00b7 AUTOPORTANTE \u00b7 CONFIGURACI\u00d3N EST\u00c1NDAR\n    ====================================================== -->\n\n    <article\n      class=\"mmc__slide\"\n      data-index=\"0\"\n      aria-hidden=\"true\"\n    >\n\n      <button\n        class=\"mmc__image-button\"\n        type=\"button\"\n        data-select=\"0\"\n        aria-label=\"Ver Marsella Autoportante\"\n      >\n\n        <img\n          src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/07\/Captura-de-pantalla-2026-07-24-132128.png\"\n          alt=\"Marsella Autoportante configuraci\u00f3n est\u00e1ndar\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n      <\/button>\n\n    <\/article>\n\n\n\n    <!-- =====================================================\n         02 \u00b7 ADOSADA \u00b7 CONFIGURACI\u00d3N EST\u00c1NDAR\n    ====================================================== -->\n\n    <article\n      class=\"mmc__slide\"\n      data-index=\"1\"\n      aria-hidden=\"true\"\n    >\n\n      <button\n        class=\"mmc__image-button\"\n        type=\"button\"\n        data-select=\"1\"\n        aria-label=\"Ver Marsella Adosada\"\n      >\n\n        <img\n          src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/07\/pared-suelo_-scaled.jpg\"\n          alt=\"Marsella Adosada configuraci\u00f3n est\u00e1ndar\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n      <\/button>\n\n    <\/article>\n\n\n\n    <!-- =====================================================\n         03 \u00b7 MULTIM\u00d3DULO \u00b7 CONFIGURACI\u00d3N A MEDIDA\n    ====================================================== -->\n\n    <article\n      class=\"mmc__slide\"\n      data-index=\"2\"\n      aria-hidden=\"true\"\n    >\n\n      <button\n        class=\"mmc__image-button\"\n        type=\"button\"\n        data-select=\"2\"\n        aria-label=\"Ver Marsella Multim\u00f3dulo\"\n      >\n\n        <img\n          src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/11\/Pergola-moderna-en-terraza-al-atardecer.png\"\n          alt=\"Marsella Multim\u00f3dulo configuraci\u00f3n a medida\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n      <\/button>\n\n    <\/article>\n\n\n\n    <!-- FLECHAS -->\n\n    <button\n      class=\"mmc__arrow mmc__arrow--prev\"\n      type=\"button\"\n      data-prev\n      aria-label=\"Configuraci\u00f3n anterior\"\n    >\n      &#10094;\n    <\/button>\n\n\n    <button\n      class=\"mmc__arrow mmc__arrow--next\"\n      type=\"button\"\n      data-next\n      aria-label=\"Configuraci\u00f3n siguiente\"\n    >\n      &#10095;\n    <\/button>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       TEXTOS\n  ====================================================== -->\n\n  <div class=\"mmc__details\">\n\n\n    <!-- 01 -->\n\n    <div\n      class=\"mmc__info\"\n      data-info=\"0\"\n      hidden\n    >\n\n      <div class=\"mmc__type\">\n        CONFIGURACI\u00d3N EST\u00c1NDAR\n      <\/div>\n\n      <h3>\n        MARSELLA AUTOPORTANTE\n      <\/h3>\n\n      <p>\n        Estructura independiente dise\u00f1ada para crear una zona\n        exterior protegida sin necesidad de fijaci\u00f3n a fachada.\n      <\/p>\n\n    <\/div>\n\n\n\n    <!-- 02 -->\n\n    <div\n      class=\"mmc__info\"\n      data-info=\"1\"\n      hidden\n    >\n\n      <div class=\"mmc__type\">\n        CONFIGURACI\u00d3N EST\u00c1NDAR\n      <\/div>\n\n      <h3>\n        MARSELLA ADOSADA\n      <\/h3>\n\n      <p>\n        Soluci\u00f3n integrada junto a la vivienda, fijada a pared y\n        apoyada sobre pilares frontales para proteger terrazas,\n        patios y zonas exteriores.\n      <\/p>\n\n    <\/div>\n\n\n\n    <!-- 03 -->\n\n    <div\n      class=\"mmc__info\"\n      data-info=\"2\"\n      hidden\n    >\n\n      <div class=\"mmc__type\">\n        CONFIGURACI\u00d3N A MEDIDA\n      <\/div>\n\n      <h3>\n        MARSELLA MULTIM\u00d3DULO\n      <\/h3>\n\n      <p>\n        Configuraci\u00f3n ampliable mediante la uni\u00f3n de varios m\u00f3dulos\n        para cubrir superficies de mayores dimensiones. Disponible\n        tanto en versi\u00f3n <strong>autoportante<\/strong> como\n        <strong>adosada<\/strong>.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       FOOTER\n  ====================================================== -->\n\n  <div class=\"mmc__footer\">\n\n    <span class=\"mmc__counter\">\n\n      <strong data-current>\n        01\n      <\/strong>\n\n      <span>\n        \/ 03\n      <\/span>\n\n    <\/span>\n\n\n    <div class=\"mmc__dots\">\n\n      <button\n        type=\"button\"\n        data-dot=\"0\"\n        aria-label=\"Ver Marsella Autoportante\"\n      ><\/button>\n\n      <button\n        type=\"button\"\n        data-dot=\"1\"\n        aria-label=\"Ver Marsella Adosada\"\n      ><\/button>\n\n      <button\n        type=\"button\"\n        data-dot=\"2\"\n        aria-label=\"Ver Marsella Multim\u00f3dulo\"\n      ><\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n#marsella-modelos-manual {\n\n  --mmc-accent: #ff9e18;\n\n  width: 100%;\n  max-width: 1080px;\n\n  margin: 0 auto;\n\n  padding: 8px 0;\n\n  background: #f5f6f7;\n\n  color: #222222;\n\n  font-family: inherit;\n\n  box-sizing: border-box;\n\n}\n\n\n#marsella-modelos-manual *,\n#marsella-modelos-manual *::before,\n#marsella-modelos-manual *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n#marsella-modelos-manual button {\n\n  font: inherit;\n\n}\n\n\n\n\/* =========================================================\n   ESCENARIO\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__stage {\n\n  position: relative;\n\n  width: 100%;\n\n  height: 330px;\n\n  overflow: hidden;\n\n  background: #f5f6f7;\n\n}\n\n\n\n\/* =========================================================\n   SLIDES\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__slide {\n\n  position: absolute;\n\n  top: 50%;\n\n  display: none;\n\n  overflow: hidden;\n\n  background: #f5f5f5;\n\n  border: 1px solid #ececec;\n\n  border-radius: 7px;\n\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.10);\n\n}\n\n\n\n\/* PRINCIPAL *\/\n\n#marsella-modelos-manual .mmc__slide.is-current {\n\n  display: block;\n\n  z-index: 3;\n\n  left: 50%;\n\n  width: 510px;\n  height: 287px;\n\n  transform:\n    translate(-50%,-50%);\n\n}\n\n\n\n\/* LATERALES *\/\n\n#marsella-modelos-manual .mmc__slide.is-prev,\n#marsella-modelos-manual .mmc__slide.is-next {\n\n  display: block;\n\n  z-index: 1;\n\n  width: 225px;\n  height: 127px;\n\n  transform:\n    translateY(-50%);\n\n  opacity: .72;\n\n}\n\n\n#marsella-modelos-manual .mmc__slide.is-prev {\n\n  left: 1.5%;\n\n}\n\n\n#marsella-modelos-manual .mmc__slide.is-next {\n\n  right: 1.5%;\n\n}\n\n\n\n\/* =========================================================\n   IM\u00c1GENES\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__image-button {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  padding: 0;\n\n  border: 0;\n\n  background: #f5f6f7;\n\n  cursor: pointer;\n\n}\n\n\n#marsella-modelos-manual .mmc__slide img {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center center;\n\n  background: #f5f6f7;\n\n}\n\n\n\n\/* AUTOPORTANTE\n   menos c\u00e9sped, m\u00e1s p\u00e9rgola *\/\n\n#marsella-modelos-manual\n.mmc__slide[data-index=\"0\"] img {\n\n  object-position:\n    center 32%;\n\n}\n\n\n\/* ADOSADA *\/\n\n#marsella-modelos-manual\n.mmc__slide[data-index=\"1\"] img {\n\n  object-position:\n    center center;\n\n}\n\n\n\/* MULTIM\u00d3DULO *\/\n\n#marsella-modelos-manual\n.mmc__slide[data-index=\"2\"] img {\n\n  object-position:\n    center center;\n\n}\n\n\n\n\/* =========================================================\n   FLECHAS\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__arrow {\n\n  position: absolute;\n\n  z-index: 7;\n\n  top: 50%;\n\n  width: 34px;\n  height: 34px;\n\n  margin-top: -17px;\n\n  padding: 0;\n\n  display: grid;\n\n  place-items: center;\n\n  border:\n    1px solid rgba(255,255,255,.9);\n\n  border-radius: 50%;\n\n  background:\n    rgba(25,25,25,.55);\n\n  color: #ffffff;\n\n  cursor: pointer;\n\n  font-size: 17px;\n\n}\n\n\n#marsella-modelos-manual .mmc__arrow:hover {\n\n  background:\n    rgba(25,25,25,.80);\n\n}\n\n\n#marsella-modelos-manual\n.mmc__arrow--prev {\n\n  left:\n    calc(50% - 240px);\n\n}\n\n\n#marsella-modelos-manual\n.mmc__arrow--next {\n\n  right:\n    calc(50% - 240px);\n\n}\n\n\n\n\/* =========================================================\n   INFORMACI\u00d3N\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__details {\n\n  width:\n    min(\n      510px,\n      calc(100% - 32px)\n    );\n\n  min-height: 88px;\n\n  margin: 0 auto;\n\n  text-align: center;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__info[hidden] {\n\n  display: none !important;\n\n}\n\n\n\n\/* CONFIGURACI\u00d3N *\/\n\n#marsella-modelos-manual .mmc__type {\n\n  margin:\n    0 0 5px;\n\n  color:\n    var(--mmc-accent);\n\n  font-size: 10px;\n\n  line-height: 1.2;\n\n  font-weight: 800;\n\n  letter-spacing: .09em;\n\n}\n\n\n\n\/* T\u00cdTULO *\/\n\n#marsella-modelos-manual .mmc__info h3 {\n\n  margin:\n    0 0 7px;\n\n  color: #222222;\n\n  font-size: 20px;\n\n  font-weight: 800;\n\n  line-height: 1.1;\n\n}\n\n\n\n\/* TEXTO *\/\n\n#marsella-modelos-manual .mmc__info p {\n\n  margin: 0;\n\n  color: #666666;\n\n  font-size: 12px;\n\n  line-height: 1.5;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__info p strong {\n\n  color: #444444;\n\n  font-weight: 700;\n\n}\n\n\n\n\/* =========================================================\n   FOOTER\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__footer {\n\n  width:\n    min(\n      510px,\n      calc(100% - 32px)\n    );\n\n  min-height: 34px;\n\n  margin:\n    6px auto 0;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content:\n    space-between;\n\n  gap: 14px;\n\n}\n\n\n\n\/* CONTADOR *\/\n\n#marsella-modelos-manual .mmc__counter {\n\n  display:\n    inline-flex;\n\n  align-items:\n    baseline;\n\n  gap: 4px;\n\n  color: #999999;\n\n  font-size: 11px;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__counter strong {\n\n  color: #222222;\n\n  font-size: 15px;\n\n}\n\n\n\n\/* =========================================================\n   PUNTOS\n========================================================= *\/\n\n#marsella-modelos-manual .mmc__dots {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 7px;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__dots button {\n\n  width: 7px;\n  height: 7px;\n\n  padding: 0;\n\n  border: 0;\n\n  border-radius: 99px;\n\n  background: #c9c9c9;\n\n  cursor: pointer;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__dots button.is-active {\n\n  width: 22px;\n\n  background:\n    var(--mmc-accent);\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 760px) {\n\n  #marsella-modelos-manual\n  .mmc__stage {\n\n    height: 225px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-current {\n\n    width: 340px;\n    height: 191px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-prev,\n  #marsella-modelos-manual\n  .mmc__slide.is-next {\n\n    width: 105px;\n    height: 59px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-prev {\n\n    left: 0;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-next {\n\n    right: 0;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__arrow--prev {\n\n    left:\n      calc(50% - 157px);\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__arrow--next {\n\n    right:\n      calc(50% - 157px);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   M\u00d3VIL\n========================================================= *\/\n\n@media (max-width: 510px) {\n\n  #marsella-modelos-manual\n  .mmc__stage {\n\n    height: 190px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-current {\n\n    width: 280px;\n    height: 158px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__slide.is-prev,\n  #marsella-modelos-manual\n  .mmc__slide.is-next {\n\n    width: 72px;\n    height: 41px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__arrow--prev {\n\n    left:\n      calc(50% - 128px);\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__arrow--next {\n\n    right:\n      calc(50% - 128px);\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__info h3 {\n\n    font-size: 17px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__type {\n\n    font-size: 9px;\n\n  }\n\n\n  #marsella-modelos-manual\n  .mmc__info p {\n\n    font-size: 11px;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   LIGHTBOX\n========================================================= *\/\n\n.mmc-fullscreen {\n\n  position: fixed;\n\n  inset: 0;\n\n  z-index: 2147483647;\n\n  background:\n    rgba(0,0,0,.96);\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  padding: 24px;\n\n}\n\n\n.mmc-fullscreen[hidden] {\n\n  display: none !important;\n\n}\n\n\n.mmc-fullscreen img {\n\n  display: block;\n\n  max-width: 100%;\n\n  max-height:\n    calc(100dvh - 48px);\n\n  object-fit: contain;\n\n}\n\n\n.mmc-fullscreen button {\n\n  position: absolute;\n\n  right: 18px;\n  top: 18px;\n\n  width: 44px;\n  height: 44px;\n\n  border:\n    1px solid #ffffff;\n\n  border-radius: 50%;\n\n  background: #222222;\n\n  color: #ffffff;\n\n  font-size: 30px;\n\n  cursor: pointer;\n\n}\n\n\n#marsella-modelos-manual\n.mmc__slide.is-current\n.mmc__image-button {\n\n  cursor: zoom-in;\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n  var root =\n    document.getElementById(\n      'marsella-modelos-manual'\n    );\n\n\n  if (\n    !root ||\n    root.dataset.ready === '1'\n  ) {\n    return;\n  }\n\n\n  root.dataset.ready = '1';\n\n\n  var slides =\n    Array.prototype.slice.call(\n      root.querySelectorAll(\n        '[data-index]'\n      )\n    );\n\n\n  var infos =\n    Array.prototype.slice.call(\n      root.querySelectorAll(\n        '[data-info]'\n      )\n    );\n\n\n  var dots =\n    Array.prototype.slice.call(\n      root.querySelectorAll(\n        '[data-dot]'\n      )\n    );\n\n\n  var currentText =\n    root.querySelector(\n      '[data-current]'\n    );\n\n\n  var index = 0;\n\n\n\n  \/* =====================================================\n     LIGHTBOX\n  ====================================================== *\/\n\n  var lightbox =\n    document.createElement(\n      'div'\n    );\n\n\n  lightbox.className =\n    'mmc-fullscreen';\n\n\n  lightbox.hidden =\n    true;\n\n\n  lightbox.setAttribute(\n    'role',\n    'dialog'\n  );\n\n\n  lightbox.setAttribute(\n    'aria-modal',\n    'true'\n  );\n\n\n  lightbox.setAttribute(\n    'aria-label',\n    'Imagen ampliada de la p\u00e9rgola Marsella'\n  );\n\n\n  lightbox.innerHTML =\n    '<img alt=\"\"><button type=\"button\" aria-label=\"Cerrar imagen ampliada\">\u00d7<\/button>';\n\n\n  document.body.appendChild(\n    lightbox\n  );\n\n\n  var oldOverflow = '';\n\n  var previousFocus;\n\n\n\n  function openImage(button) {\n\n    var image =\n      button.querySelector(\n        'img'\n      );\n\n\n    lightbox\n      .querySelector('img')\n      .src =\n        image.src;\n\n\n    lightbox\n      .querySelector('img')\n      .alt =\n        image.alt;\n\n\n    previousFocus =\n      document.activeElement;\n\n\n    oldOverflow =\n      document.body.style.overflow;\n\n\n    document.body.style.overflow =\n      'hidden';\n\n\n    lightbox.hidden =\n      false;\n\n\n    lightbox\n      .querySelector('button')\n      .focus();\n\n  }\n\n\n\n  function closeImage() {\n\n    if (\n      lightbox.hidden\n    ) {\n      return;\n    }\n\n\n    lightbox.hidden =\n      true;\n\n\n    document.body.style.overflow =\n      oldOverflow;\n\n\n    if (\n      previousFocus\n    ) {\n\n      previousFocus.focus();\n\n    }\n\n  }\n\n\n\n  lightbox.addEventListener(\n    'click',\n    function (event) {\n\n      if (\n        event.target !==\n        lightbox.querySelector('img')\n      ) {\n\n        closeImage();\n\n      }\n\n    }\n  );\n\n\n\n  document.addEventListener(\n    'keydown',\n    function (event) {\n\n      if (\n        lightbox.hidden\n      ) {\n        return;\n      }\n\n\n      if (\n        event.key === 'Escape'\n      ) {\n\n        closeImage();\n\n      }\n\n\n      if (\n        event.key === 'Tab'\n      ) {\n\n        event.preventDefault();\n\n        lightbox\n          .querySelector('button')\n          .focus();\n\n      }\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     CARRUSEL\n  ====================================================== *\/\n\n  function normalise(value) {\n\n    return (\n      value +\n      slides.length\n    ) %\n    slides.length;\n\n  }\n\n\n\n  function render() {\n\n    var previousIndex =\n      normalise(\n        index - 1\n      );\n\n\n    var nextIndex =\n      normalise(\n        index + 1\n      );\n\n\n    slides.forEach(\n      function (\n        slide,\n        slideIndex\n      ) {\n\n        slide.classList.remove(\n          'is-current',\n          'is-prev',\n          'is-next'\n        );\n\n\n        slide.setAttribute(\n          'aria-hidden',\n          'true'\n        );\n\n\n        if (\n          slideIndex ===\n          index\n        ) {\n\n          slide.classList.add(\n            'is-current'\n          );\n\n\n          slide.setAttribute(\n            'aria-hidden',\n            'false'\n          );\n\n        }\n\n\n        else if (\n          slideIndex ===\n          previousIndex\n        ) {\n\n          slide.classList.add(\n            'is-prev'\n          );\n\n        }\n\n\n        else if (\n          slideIndex ===\n          nextIndex\n        ) {\n\n          slide.classList.add(\n            'is-next'\n          );\n\n        }\n\n      }\n    );\n\n\n    infos.forEach(\n      function (\n        info,\n        infoIndex\n      ) {\n\n        info.hidden =\n          infoIndex !== index;\n\n      }\n    );\n\n\n    dots.forEach(\n      function (\n        dot,\n        dotIndex\n      ) {\n\n        dot.classList.toggle(\n          'is-active',\n          dotIndex === index\n        );\n\n      }\n    );\n\n\n    currentText.textContent =\n      String(\n        index + 1\n      ).padStart(\n        2,\n        '0'\n      );\n\n  }\n\n\n\n  function goTo(nextIndex) {\n\n    index =\n      normalise(\n        nextIndex\n      );\n\n\n    render();\n\n  }\n\n\n\n  \/* =====================================================\n     EVENTOS\n  ====================================================== *\/\n\n  root\n    .querySelector(\n      '[data-prev]'\n    )\n    .addEventListener(\n      'click',\n      function () {\n\n        goTo(\n          index - 1\n        );\n\n      }\n    );\n\n\n  root\n    .querySelector(\n      '[data-next]'\n    )\n    .addEventListener(\n      'click',\n      function () {\n\n        goTo(\n          index + 1\n        );\n\n      }\n    );\n\n\n  root\n    .querySelectorAll(\n      '[data-select]'\n    )\n    .forEach(\n      function (button) {\n\n        button.addEventListener(\n          'click',\n          function () {\n\n            var selected =\n              parseInt(\n                button.dataset.select,\n                10\n              );\n\n\n            \/* Si ya es la imagen principal,\n               abrirla ampliada *\/\n\n            if (\n              selected === index\n            ) {\n\n              openImage(\n                button\n              );\n\n            }\n\n            else {\n\n              goTo(\n                selected\n              );\n\n            }\n\n          }\n        );\n\n      }\n    );\n\n\n  dots.forEach(\n    function (dot) {\n\n      dot.addEventListener(\n        'click',\n        function () {\n\n          goTo(\n            parseInt(\n              dot.dataset.dot,\n              10\n            )\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n  root.addEventListener(\n    'keydown',\n    function (event) {\n\n      if (\n        event.key ===\n        'ArrowLeft'\n      ) {\n\n        goTo(\n          index - 1\n        );\n\n        event.preventDefault();\n\n      }\n\n\n      if (\n        event.key ===\n        'ArrowRight'\n      ) {\n\n        goTo(\n          index + 1\n        );\n\n        event.preventDefault();\n\n      }\n\n    }\n  );\n\n\n  render();\n\n})();\n\n<\/script><\/div>\n\t\t\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-68737bc e-flex e-con-boxed e-con e-parent\" data-id=\"68737bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0d4460 elementor-widget elementor-widget-shortcode\" data-id=\"d0d4460\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section id=\"marsella-ficha-tecnica\">\n\n  <div class=\"mft-inner\">\n\n    <div class=\"mft-top\">\n\n      <div class=\"mft-heading\">\n\n        <div class=\"mft-kicker\">\n          FICHA T\u00c9CNICA\n        <\/div>\n\n        <h2>\n          Caracter\u00edsticas principales\n        <\/h2>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"mft-grid\">\n\n      <!-- COLUMNA IZQUIERDA -->\n      <div class=\"mft-column\">\n\n        <div class=\"mft-row\">\n          <span>Producto<\/span>\n          <strong>P\u00e9rgola tensada Marsella<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Estructura<\/span>\n          <strong>Aluminio<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Cubierta<\/span>\n          <strong>Lona tensada retr\u00e1ctil<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Accionamiento<\/span>\n          <strong>Motorizado<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Control<\/span>\n          <strong>Mando a distancia<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- COLUMNA DERECHA -->\n      <div class=\"mft-column\">\n\n        <div class=\"mft-row\">\n          <span>Transmisi\u00f3n<\/span>\n          <strong>Eje con motor<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Evacuaci\u00f3n<\/span>\n          <strong>Canal frontal de desag\u00fce<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Configuraci\u00f3n est\u00e1ndar<\/span>\n          <strong>Adosada \u00b7 Autoportante<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Configuraci\u00f3n a medida<\/span>\n          <strong>Multim\u00f3dulo<\/strong>\n        <\/div>\n\n        <div class=\"mft-row\">\n          <span>Iluminaci\u00f3n<\/span>\n          <strong>LED opcional<\/strong>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n#marsella-ficha-tecnica,\n#marsella-ficha-tecnica * {\n  box-sizing: border-box;\n}\n\n#marsella-ficha-tecnica {\n  width: 100%;\n  padding: 0 20px 42px;\n  background: #ffffff;\n  font-family: inherit;\n  color: #111111;\n}\n\n#marsella-ficha-tecnica .mft-inner {\n  width: min(1200px, 100%);\n  margin: 0 auto;\n  border-top: 1px solid #d8d8d8;\n  padding-top: 26px;\n}\n\n\n\/* CABECERA *\/\n#marsella-ficha-tecnica .mft-top {\n  display: block;\n  margin-bottom: 16px;\n}\n\n#marsella-ficha-tecnica .mft-heading {\n  width: 100%;\n}\n\n#marsella-ficha-tecnica .mft-kicker {\n  margin-bottom: 7px;\n  color: #FF9E18;\n  font-size: 11px;\n  line-height: 1.2;\n  font-weight: 800;\n  letter-spacing: .12em;\n}\n\n#marsella-ficha-tecnica .mft-heading h2 {\n  margin: 0;\n  color: #111111;\n  font-size: 27px;\n  line-height: 1.15;\n  font-weight: 800;\n}\n\n\n\/* GRID *\/\n#marsella-ficha-tecnica .mft-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 32px;\n}\n\n\n\/* FILAS *\/\n#marsella-ficha-tecnica .mft-row {\n  display: grid;\n  grid-template-columns: minmax(155px, 1fr) minmax(180px, 1.2fr);\n  align-items: center;\n  gap: 18px;\n\n  min-height: 37px;\n\n  border-bottom: 1px solid #dddddd;\n}\n\n#marsella-ficha-tecnica .mft-row span {\n  color: #858585;\n  font-size: 13px;\n  line-height: 1.3;\n  font-weight: 400;\n}\n\n#marsella-ficha-tecnica .mft-row strong {\n  text-align: right;\n  color: #111111;\n  font-size: 13px;\n  line-height: 1.3;\n  font-weight: 700;\n}\n\n\n\/* TABLET *\/\n@media (max-width: 900px) {\n\n  #marsella-ficha-tecnica .mft-grid {\n    gap: 22px;\n  }\n\n  #marsella-ficha-tecnica .mft-row {\n    grid-template-columns: minmax(135px, .9fr) minmax(150px, 1.2fr);\n  }\n\n}\n\n\n\/* M\u00d3VIL *\/\n@media (max-width: 700px) {\n\n  #marsella-ficha-tecnica {\n    padding: 0 14px 34px;\n  }\n\n  #marsella-ficha-tecnica .mft-inner {\n    padding-top: 22px;\n  }\n\n  #marsella-ficha-tecnica .mft-top {\n    margin-bottom: 14px;\n  }\n\n  #marsella-ficha-tecnica .mft-heading h2 {\n    font-size: 23px;\n  }\n\n  #marsella-ficha-tecnica .mft-grid {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n\n  #marsella-ficha-tecnica .mft-row {\n    grid-template-columns: minmax(130px, .9fr) minmax(150px, 1.1fr);\n    min-height: 40px;\n    gap: 14px;\n  }\n\n  #marsella-ficha-tecnica .mft-row span,\n  #marsella-ficha-tecnica .mft-row strong {\n    font-size: 12px;\n  }\n\n}\n\n\n\/* M\u00d3VIL PEQUE\u00d1O *\/\n@media (max-width: 430px) {\n\n  #marsella-ficha-tecnica .mft-row {\n    grid-template-columns: 1fr;\n    gap: 3px;\n    padding: 9px 0;\n  }\n\n  #marsella-ficha-tecnica .mft-row strong {\n    text-align: left;\n  }\n\n}\n<\/style><\/div>\n\t\t\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-9eb2f55 e-con e-atomic-element e-flexbox-base e-default-div e-730d133 \" data-id=\"9eb2f55\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9eb2f55\" data-e-type=\"e-flexbox\" data-id=\"9eb2f55\">\n    <div class=\"elementor-element elementor-element-5f3b43f e-flex e-con-boxed e-con e-parent\" data-id=\"5f3b43f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc0fd58 elementor-widget elementor-widget-shortcode\" data-id=\"fc0fd58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section id=\"marsella-roma\">\n\n  <div class=\"mr-inner\">\n\n    <div class=\"mr-grid\">\n\n\n      <!-- TEXTO -->\n      <div class=\"mr-content\">\n\n        <span class=\"mr-eyebrow\">\n          CERRAMIENTOS COMPATIBLES\n        <\/span>\n\n        <h2>\n          Compatible con cerramiento Roma\n        <\/h2>\n\n        <p class=\"mr-intro\">\n          La p\u00e9rgola Marsella puede combinarse con el cerramiento Roma\n          para aumentar la protecci\u00f3n lateral y mejorar el confort del\n          espacio exterior.\n        <\/p>\n\n\n        <div class=\"mr-features\">\n\n          <div class=\"mr-feature\">\n\n            <span class=\"mr-number\">\n              01\n            <\/span>\n\n            <div>\n              <strong>\n                Protecci\u00f3n lateral\n              <\/strong>\n\n              <p>\n                Permite proteger el espacio frente al sol lateral\n                y crear una zona exterior m\u00e1s resguardada.\n              <\/p>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"mr-feature\">\n\n            <span class=\"mr-number\">\n              02\n            <\/span>\n\n            <div>\n              <strong>\n                Integraci\u00f3n en la estructura\n              <\/strong>\n\n              <p>\n                El cerramiento Roma se integra entre los pilares,\n                manteniendo una est\u00e9tica limpia y uniforme.\n              <\/p>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"mr-feature\">\n\n            <span class=\"mr-number\">\n              03\n            <\/span>\n\n            <div>\n              <strong>\n                Mayor versatilidad\n              <\/strong>\n\n              <p>\n                Una soluci\u00f3n pensada para adaptar Marsella a diferentes\n                usos y mejorar el aprovechamiento del espacio exterior.\n              <\/p>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- BOT\u00d3N ROMA -->\n        <a\n          class=\"mr-roma-button\"\n          href=\"https:\/\/sun-stop.es\/?page_id=1559\"\n        >\n          <span class=\"mr-highlight-dot\"><\/span>\n\n          <span>\n            Compatible con cerramiento lateral Roma\n          <\/span>\n\n          <strong aria-hidden=\"true\">\n            \u2192\n          <\/strong>\n        <\/a>\n\n      <\/div>\n\n\n\n      <!-- IMAGEN -->\n      <div class=\"mr-image-wrap\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/Patio-moderno-con-pergola-y-piscina.png\"\n          alt=\"P\u00e9rgola Marsella con cerramiento Roma\"\n        >\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n#marsella-roma,\n#marsella-roma * {\n  box-sizing: border-box;\n}\n\n#marsella-roma {\n  width: 100%;\n  padding: 60px 20px;\n  background: #ffffff;\n  font-family: inherit;\n  color: #222222;\n}\n\n#marsella-roma .mr-inner {\n  width: min(1160px, 100%);\n  margin: 0 auto;\n}\n\n\n\/* GRID *\/\n#marsella-roma .mr-grid {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, .9fr)\n    minmax(0, 1.1fr);\n\n  gap: 54px;\n\n  align-items: center;\n}\n\n\n\/* TEXTO *\/\n#marsella-roma .mr-content {\n  min-width: 0;\n}\n\n#marsella-roma .mr-eyebrow {\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: #FF9E18;\n\n  font-size: 12px;\n  line-height: 1.2;\n\n  font-weight: 700;\n\n  letter-spacing: .08em;\n}\n\n#marsella-roma h2 {\n  margin: 0 0 16px;\n\n  color: #111111;\n\n  font-size: 34px;\n  line-height: 1.08;\n\n  font-weight: 700;\n}\n\n#marsella-roma .mr-intro {\n  margin: 0 0 26px;\n\n  color: #6f6f6f;\n\n  font-size: 14px;\n  line-height: 1.65;\n}\n\n\n\/* FEATURES *\/\n#marsella-roma .mr-features {\n  display: grid;\n  gap: 18px;\n}\n\n#marsella-roma .mr-feature {\n  display: grid;\n\n  grid-template-columns: 34px 1fr;\n\n  gap: 13px;\n\n  align-items: start;\n}\n\n#marsella-roma .mr-number {\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  width: 30px;\n  height: 30px;\n\n  border-radius: 50%;\n\n  background: #fff5e6;\n\n  color: #FF9E18;\n\n  font-size: 10px;\n  font-weight: 800;\n}\n\n#marsella-roma .mr-feature strong {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: #222222;\n\n  font-size: 14px;\n  line-height: 1.3;\n\n  font-weight: 700;\n}\n\n#marsella-roma .mr-feature p {\n  margin: 0;\n\n  color: #777777;\n\n  font-size: 12px;\n  line-height: 1.55;\n}\n\n\n\/* BOT\u00d3N ROMA *\/\n#marsella-roma .mr-roma-button {\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n  margin-top: 26px;\n\n  padding: 11px 15px;\n\n  border: 1px solid #FF9E18;\n\n  border-radius: 999px;\n\n  background: #ffffff;\n\n  color: #d77f00;\n\n  font-size: 11px;\n  line-height: 1.2;\n\n  font-weight: 700;\n\n  text-decoration: none;\n\n  transition:\n    background .2s ease,\n    color .2s ease,\n    transform .2s ease;\n}\n\n#marsella-roma .mr-roma-button:hover {\n  background: #FF9E18;\n\n  color: #ffffff;\n\n  transform: translateY(-1px);\n}\n\n#marsella-roma .mr-highlight-dot {\n  width: 7px;\n  height: 7px;\n\n  flex: 0 0 7px;\n\n  border-radius: 50%;\n\n  background: #FF9E18;\n\n  transition: background .2s ease;\n}\n\n#marsella-roma .mr-roma-button:hover .mr-highlight-dot {\n  background: #ffffff;\n}\n\n#marsella-roma .mr-roma-button strong {\n  margin-left: 3px;\n\n  font-size: 15px;\n  line-height: 1;\n\n  font-weight: 400;\n}\n\n\n\/* IMAGEN *\/\n#marsella-roma .mr-image-wrap {\n  position: relative;\n\n  overflow: hidden;\n\n  border-radius: 18px;\n\n  background: #f3f3f3;\n\n  box-shadow:\n    0 16px 40px rgba(0,0,0,.10);\n}\n\n#marsella-roma .mr-image-wrap img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  aspect-ratio: 4 \/ 3;\n\n  object-fit: cover;\n\n  object-position: center center;\n}\n\n\n\/* TABLET *\/\n@media (max-width: 900px) {\n\n  #marsella-roma .mr-grid {\n    gap: 34px;\n  }\n\n  #marsella-roma h2 {\n    font-size: 29px;\n  }\n\n}\n\n\n\/* M\u00d3VIL *\/\n@media (max-width: 700px) {\n\n  #marsella-roma {\n    padding: 42px 14px;\n  }\n\n  #marsella-roma .mr-grid {\n    grid-template-columns: 1fr;\n\n    gap: 28px;\n  }\n\n  #marsella-roma h2 {\n    font-size: 25px;\n  }\n\n  #marsella-roma .mr-intro {\n    font-size: 13px;\n  }\n\n  #marsella-roma .mr-image-wrap {\n    order: -1;\n  }\n\n  #marsella-roma .mr-image-wrap img {\n    aspect-ratio: 4 \/ 3;\n  }\n\n}\n<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ba154c0 e-flex e-con-boxed e-con e-parent\" data-id=\"ba154c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5892a34 elementor-widget elementor-widget-shortcode\" data-id=\"5892a34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section id=\"marsella-made-spain\">\n\n  <div class=\"mms-card\">\n\n    <div class=\"mms-grid\">\n\n\n      <!-- 01 -->\n      <article class=\"mms-item\">\n\n        <div class=\"mms-number\">\n          01\n        <\/div>\n\n        <h3>\n          Fabricaci\u00f3n en Espa\u00f1a\n        <\/h3>\n\n        <p>\n          Control directo del proceso productivo para supervisar cada etapa,\n          desde la preparaci\u00f3n de los componentes hasta el acabado y el\n          ensamblado final.\n        <\/p>\n\n      <\/article>\n\n\n\n      <!-- 02 -->\n      <article class=\"mms-item\">\n\n        <div class=\"mms-number\">\n          02\n        <\/div>\n\n        <h3>\n          Tecnolog\u00eda CNC\n        <\/h3>\n\n        <p>\n          Mecanizado de componentes con precisi\u00f3n para conseguir uniones y\n          ensamblajes ajustados, cuidando la uniformidad y el acabado de cada\n          pieza.\n        <\/p>\n\n      <\/article>\n\n\n\n      <!-- 03 -->\n      <article class=\"mms-item\">\n\n        <div class=\"mms-number\">\n          03\n        <\/div>\n\n        <h3>\n          Aluminio extrusionado\n        <\/h3>\n\n        <p>\n          Perfiles que combinan ligereza, resistencia y durabilidad, con una\n          geometr\u00eda dise\u00f1ada para cumplir su funci\u00f3n dentro de la estructura.\n        <\/p>\n\n      <\/article>\n\n\n\n      <!-- 04 -->\n      <article class=\"mms-item\">\n\n        <div class=\"mms-number\">\n          04\n        <\/div>\n\n        <h3>\n          Especializaci\u00f3n retail\n        <\/h3>\n\n        <p>\n          Productos concebidos para su comercializaci\u00f3n en grandes superficies,\n          con un enfoque orientado a las necesidades de este canal y de sus\n          clientes.\n        <\/p>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n#marsella-made-spain,\n#marsella-made-spain * {\n  box-sizing: border-box;\n}\n\n#marsella-made-spain {\n  width: 100%;\n  padding: 22px 20px 38px;\n  background: #ffffff;\n  font-family: inherit;\n}\n\n\n\/* BLOQUE PRINCIPAL *\/\n#marsella-made-spain .mms-card {\n  width: min(1120px, 100%);\n  margin: 0 auto;\n\n  padding: 30px 38px 32px;\n\n  background: #f9a100;\n\n  border-radius: 20px;\n}\n\n\n\/* GRID *\/\n#marsella-made-spain .mms-grid {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, minmax(0, 1fr));\n\n  gap: 42px;\n}\n\n\n\/* ITEM *\/\n#marsella-made-spain .mms-item {\n  min-width: 0;\n}\n\n\n\/* N\u00daMERO *\/\n#marsella-made-spain .mms-number {\n  margin-bottom: 12px;\n\n  color: #3a3a24;\n\n  font-size: 12px;\n  line-height: 1;\n  font-weight: 700;\n}\n\n\n\/* T\u00cdTULO *\/\n#marsella-made-spain .mms-item h3 {\n  margin: 0 0 9px;\n\n  color: #111111;\n\n  font-size: 16px;\n  line-height: 1.2;\n  font-weight: 800;\n}\n\n\n\/* TEXTO *\/\n#marsella-made-spain .mms-item p {\n  margin: 0;\n\n  color: #2d2d21;\n\n  font-size: 13px;\n  line-height: 1.55;\n  font-weight: 400;\n}\n\n\n\/* TABLET *\/\n@media (max-width: 950px) {\n\n  #marsella-made-spain .mms-card {\n    padding: 28px 28px 30px;\n  }\n\n  #marsella-made-spain .mms-grid {\n    grid-template-columns:\n      repeat(2, minmax(0, 1fr));\n\n    gap: 30px 34px;\n  }\n\n}\n\n\n\/* M\u00d3VIL *\/\n@media (max-width: 620px) {\n\n  #marsella-made-spain {\n    padding: 18px 14px 32px;\n  }\n\n  #marsella-made-spain .mms-card {\n    padding: 26px 20px 28px;\n\n    border-radius: 16px;\n  }\n\n  #marsella-made-spain .mms-grid {\n    grid-template-columns: 1fr;\n\n    gap: 26px;\n  }\n\n  #marsella-made-spain .mms-number {\n    margin-bottom: 8px;\n  }\n\n  #marsella-made-spain .mms-item h3 {\n    font-size: 16px;\n  }\n\n  #marsella-made-spain .mms-item p {\n    font-size: 12px;\n    line-height: 1.6;\n  }\n\n}\n<\/style><\/div>\n\t\t\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-f2865ac e-con e-atomic-element e-flexbox-base e-default-div e-16f0807 \" data-id=\"f2865ac\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f2865ac\" data-e-type=\"e-flexbox\" data-id=\"f2865ac\">\n    <div class=\"elementor-element elementor-element-182efdc e-flex e-con-boxed e-con e-parent\" data-id=\"182efdc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d379ef elementor-widget elementor-widget-shortcode\" data-id=\"3d379ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section\n  class=\"marsella-configurador\"\n  id=\"marsella-configurador\"\n  data-estructura=\"blanco\"\n  data-lona=\"blanco\"\n>\n\n  <div class=\"marsella-configurador-inner\">\n\n    <header class=\"marsella-configurador-header\">\n\n      <span class=\"marsella-eyebrow\">\n        PERSONALIZA TU P\u00c9RGOLA\n      <\/span>\n\n      <h2>\n        Configura tu Marsella\n      <\/h2>\n\n      <p>\n        Combina el acabado de la estructura con los tres colores de lona\n        disponibles y descubre la configuraci\u00f3n que mejor encaja en tu espacio.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"marsella-configurador-grid\">\n\n      <!-- VISOR -->\n      <div class=\"marsella-configurador-visor\">\n\n        <div class=\"marsella-imagen-wrap\">\n\n          <img decoding=\"async\"\n            id=\"marsellaImagen\"\n            src=\"https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/Marsella_Perfil-Blanco-Tela-Blanca.jpg\"\n            alt=\"Marsella con estructura blanca y lona blanca\"\n          >\n\n          <div\n            class=\"marsella-imagen-etiqueta\"\n            id=\"marsellaEstado\"\n            aria-live=\"polite\"\n          >\n            Estructura blanca \u00b7 Lona blanca\n          <\/div>\n\n        <\/div>\n\n        <p\n          class=\"marsella-preview-nota\"\n          id=\"marsellaError\"\n          hidden\n        >\n          No se ha podido cargar la combinaci\u00f3n seleccionada.\n        <\/p>\n\n      <\/div>\n\n\n\n      <!-- OPCIONES -->\n      <div class=\"marsella-configurador-opciones\">\n\n\n        <!-- 01 \u00b7 ESTRUCTURA -->\n        <div class=\"marsella-config-bloque\">\n\n          <span class=\"marsella-numero\">\n            01\n          <\/span>\n\n          <h3>\n            Elige el acabado de la estructura\n          <\/h3>\n\n          <p class=\"marsella-ayuda\">\n            Selecciona el acabado de la estructura y comb\u00ednalo con el color\n            de lona que prefieras.\n          <\/p>\n\n\n          <div\n            class=\"marsella-acabados\"\n            role=\"group\"\n            aria-label=\"Color de estructura\"\n          >\n\n            <button\n              type=\"button\"\n              class=\"marsella-acabado activo\"\n              data-estructura=\"blanco\"\n              aria-pressed=\"true\"\n            >\n\n              <span class=\"marsella-muestra marsella-blanco\"><\/span>\n\n              <span>\n                <strong>Blanco<\/strong>\n                <small>Estructura blanca<\/small>\n              <\/span>\n\n              <b class=\"marsella-check\">\u2713<\/b>\n\n            <\/button>\n\n\n            <button\n              type=\"button\"\n              class=\"marsella-acabado\"\n              data-estructura=\"gris\"\n              aria-pressed=\"false\"\n            >\n\n              <span class=\"marsella-muestra marsella-gris-estructura\"><\/span>\n\n              <span>\n                <strong>Gris<\/strong>\n                <small>Estructura gris<\/small>\n              <\/span>\n\n              <b class=\"marsella-check\">\u2713<\/b>\n\n            <\/button>\n\n          <\/div>\n\n\n          <button\n            type=\"button\"\n            class=\"marsella-ver-colores\"\n            id=\"marsellaAbrirColores\"\n          >\n\n            <span>\n\n              <strong>\n                Ver gama completa de colores\n              <\/strong>\n\n              <small>\n                Est\u00e1ndar, a medida, texturados y madera\n              <\/small>\n\n            <\/span>\n\n            <b>\u2192<\/b>\n\n          <\/button>\n\n        <\/div>\n\n\n\n        <!-- 02 \u00b7 LONA -->\n        <div class=\"marsella-config-bloque\">\n\n          <span class=\"marsella-numero\">\n            02\n          <\/span>\n\n          <h3>\n            Elige el color de la lona\n          <\/h3>\n\n          <p class=\"marsella-ayuda\">\n            Selecciona uno de los tres acabados disponibles para la cubierta\n            textil de Marsella.\n          <\/p>\n\n\n          <div\n            class=\"marsella-lonas\"\n            role=\"group\"\n            aria-label=\"Color de lona\"\n          >\n\n            <button\n              type=\"button\"\n              class=\"marsella-lona activo\"\n              data-lona=\"blanco\"\n              aria-pressed=\"true\"\n            >\n\n              <span class=\"marsella-muestra marsella-lona-blanca\"><\/span>\n\n              <span>\n                <strong>Blanca<\/strong>\n                <small>Lona blanca<\/small>\n              <\/span>\n\n              <b class=\"marsella-check\">\u2713<\/b>\n\n            <\/button>\n\n\n            <button\n              type=\"button\"\n              class=\"marsella-lona\"\n              data-lona=\"gris\"\n              aria-pressed=\"false\"\n            >\n\n              <span class=\"marsella-muestra marsella-lona-gris\"><\/span>\n\n              <span>\n                <strong>Gris<\/strong>\n                <small>Lona gris<\/small>\n              <\/span>\n\n              <b class=\"marsella-check\">\u2713<\/b>\n\n            <\/button>\n\n\n            <button\n              type=\"button\"\n              class=\"marsella-lona\"\n              data-lona=\"beige\"\n              aria-pressed=\"false\"\n            >\n\n              <span class=\"marsella-muestra marsella-lona-beige\"><\/span>\n\n              <span>\n                <strong>Beige<\/strong>\n                <small>Lona beige<\/small>\n              <\/span>\n\n              <b class=\"marsella-check\">\u2713<\/b>\n\n            <\/button>\n\n          <\/div>\n\n        <\/div>\n\n\n\n        <!-- RESUMEN -->\n        <div class=\"marsella-config-resumen\">\n\n          <span>\n            CONFIGURACI\u00d3N ACTUAL\n          <\/span>\n\n          <strong id=\"marsellaResumen\">\n            Estructura blanca \u00b7 Lona blanca\n          <\/strong>\n\n        <\/div>\n\n\n\n        <!-- CTA -->\n        <a\n          href=\"https:\/\/sun-stop.configuradoramedida.com\/application\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          class=\"marsella-config-cta\"\n        >\n          Configurar mi p\u00e9rgola\n          <b>\u2192<\/b>\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     MODAL \u00b7 GAMA COMPLETA\n========================================================= -->\n\n<div\n  class=\"marsella-colores-modal\"\n  id=\"marsellaColoresModal\"\n  hidden\n>\n\n  <div class=\"marsella-colores-panel\">\n\n    <button\n      type=\"button\"\n      class=\"marsella-colores-cerrar\"\n      id=\"marsellaCerrarColores\"\n      aria-label=\"Cerrar\"\n    >\n      \u00d7\n    <\/button>\n\n\n    <header class=\"marsella-colores-header\">\n\n      <span class=\"marsella-eyebrow\">\n        PERSONALIZACI\u00d3N\n      <\/span>\n\n      <h3>\n        Gama completa de acabados\n      <\/h3>\n\n      <p>\n        Puedes elegir cualquiera de los colores de esta gama para el acabado\n        de tu p\u00e9rgola. El visor muestra \u00fanicamente combinaciones de ejemplo.\n      <\/p>\n\n    <\/header>\n\n\n\n    <!-- =====================================================\n         EST\u00c1NDAR\n    ====================================================== -->\n\n    <section class=\"marsella-gama\">\n\n      <h4>\n        Acabados est\u00e1ndar\n      <\/h4>\n\n      <div class=\"marsella-gama-grid\">\n\n        <article class=\"marsella-swatch\">\n          <span\n            class=\"marsella-chip\"\n            style=\"--chip:#F8F8F7\"\n          ><\/span>\n          <strong>Blanco<\/strong>\n        <\/article>\n\n\n        <article class=\"marsella-swatch\">\n          <span\n            class=\"marsella-chip\"\n            style=\"--chip:#4E5252\"\n          ><\/span>\n          <strong>RAL 7043<\/strong>\n          <small>Gris tr\u00e1fico B<\/small>\n        <\/article>\n\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         A MEDIDA\n    ====================================================== -->\n\n    <section class=\"marsella-gama\">\n\n      <h4>\n        Acabados a medida\n      <\/h4>\n\n      <div class=\"marsella-gama-grid\">\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#BFC0C2\"><\/span>\n          <strong>RAL 9006<\/strong>\n          <small>Aluminio<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#D1D1D5\"><\/span>\n          <strong>L\/Plata<\/strong>\n          <small>Lacado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#60442D\"><\/span>\n          <strong>L\/Bronce<\/strong>\n          <small>Lacado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#D0C7B8\"><\/span>\n          <strong>L\/Inox<\/strong>\n          <small>Lacado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#D7CCB3\"><\/span>\n          <strong>RAL 1013<\/strong>\n          <small>Perla<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#F6F3EB\"><\/span>\n          <strong>RAL 9010<\/strong>\n          <small>Blanco puro<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#962126\"><\/span>\n          <strong>RAL 3005<\/strong>\n          <small>Rojo vino<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#68292D\"><\/span>\n          <strong>RAL 3007<\/strong>\n          <small>Rojo negruzco<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#555B5D\"><\/span>\n          <strong>RAL 7011<\/strong>\n          <small>Gris hierro<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#52595C\"><\/span>\n          <strong>RAL 7016<\/strong>\n          <small>Antracita<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#636158\"><\/span>\n          <strong>RAL 7022<\/strong>\n          <small>Gris sombra<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#7B5438\"><\/span>\n          <strong>RAL 8014<\/strong>\n          <small>Sepia<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#664133\"><\/span>\n          <strong>RAL 8017<\/strong>\n          <small>Chocolate<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#514A48\"><\/span>\n          <strong>RAL 8019<\/strong>\n          <small>Pardo gris<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#006B51\"><\/span>\n          <strong>RAL 6005<\/strong>\n          <small>Verde musgo<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#304E3B\"><\/span>\n          <strong>RAL 6009<\/strong>\n          <small>Verde abeto<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#292D30\"><\/span>\n          <strong>RAL 9011<\/strong>\n          <small>Negro grafito<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip\" style=\"--chip:#111416\"><\/span>\n          <strong>RAL 9005<\/strong>\n          <small>Negro intenso<\/small>\n        <\/article>\n\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         TEXTURADOS\n    ====================================================== -->\n\n    <section class=\"marsella-gama\">\n\n      <h4>\n        Acabados texturados\n      <\/h4>\n\n      <div class=\"marsella-gama-grid\">\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-blanco\"><\/span>\n          <strong>Blanco<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-7016\"><\/span>\n          <strong>RAL 7016<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-8014\"><\/span>\n          <strong>RAL 8014<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-9011\"><\/span>\n          <strong>RAL 9011<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-7043\"><\/span>\n          <strong>RAL 7043<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-textura-1013\"><\/span>\n          <strong>RAL 1013<\/strong>\n          <small>Texturado<\/small>\n        <\/article>\n\n      <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         MADERA\n    ====================================================== -->\n\n    <section class=\"marsella-gama\">\n\n      <h4>\n        Acabados madera\n      <\/h4>\n\n      <div class=\"marsella-gama-grid\">\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-madera-embero\"><\/span>\n          <strong>Embero<\/strong>\n          <small>Rugoso<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-madera-pino\"><\/span>\n          <strong>Pino<\/strong>\n          <small>Medio<\/small>\n        <\/article>\n\n        <article class=\"marsella-swatch\">\n          <span class=\"marsella-chip marsella-madera-clara\"><\/span>\n          <strong>Madera<\/strong>\n          <small>Clara<\/small>\n        <\/article>\n\n      <\/div>\n\n    <\/section>\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n#marsella-configurador,\n#marsella-configurador *,\n.marsella-colores-modal,\n.marsella-colores-modal *{\n  box-sizing:border-box;\n}\n\n.marsella-configurador{\n  width:100%;\n  padding:65px 20px;\n  background:#fff;\n  font-family:inherit;\n  color:#222;\n}\n\n.marsella-configurador-inner{\n  max-width:1180px;\n  margin:auto;\n}\n\n\n\/* CABECERA *\/\n.marsella-configurador-header{\n  max-width:720px;\n  margin-bottom:34px;\n}\n\n.marsella-eyebrow{\n  display:block;\n  margin-bottom:8px;\n  color:#FF9E18;\n  font-size:12px;\n  font-weight:700;\n  letter-spacing:.08em;\n}\n\n#marsella-configurador h2,\n.marsella-colores-header h3{\n  margin:0 0 10px;\n  font-size:25px;\n  line-height:1.15;\n  font-weight:700;\n}\n\n.marsella-configurador-header p,\n.marsella-colores-header p{\n  margin:0;\n  color:#737373;\n  font-size:14px;\n  line-height:1.6;\n}\n\n\n\/* GRID *\/\n.marsella-configurador-grid{\n  display:grid;\n  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);\n  gap:36px;\n  align-items:start;\n}\n\n\n\/* VISOR *\/\n.marsella-configurador-visor{\n  position:sticky;\n  top:30px;\n}\n\n.marsella-imagen-wrap{\n  position:relative;\n  overflow:hidden;\n  border-radius:18px;\n  background:#f2f2f2;\n  box-shadow:0 15px 45px #00000014;\n}\n\n.marsella-imagen-wrap img{\n  display:block;\n  width:100%;\n  aspect-ratio:4 \/ 3;\n  object-fit:contain;\n  object-position:center;\n  background:#f3f3f1;\n  transition:opacity .2s ease;\n}\n\n.marsella-imagen-wrap.cambiando img{\n  opacity:.4;\n}\n\n.marsella-imagen-etiqueta{\n  position:absolute;\n  left:18px;\n  bottom:18px;\n  padding:9px 13px;\n  border-radius:8px;\n  background:#fffffff0;\n  color:#333;\n  font-size:11px;\n  font-weight:700;\n  box-shadow:0 3px 12px #00000014;\n}\n\n\n\/* OPCIONES *\/\n.marsella-configurador-opciones{\n  display:flex;\n  flex-direction:column;\n  gap:26px;\n}\n\n.marsella-numero{\n  display:block;\n  margin-bottom:5px;\n  color:#FF9E18;\n  font-size:11px;\n  font-weight:800;\n}\n\n#marsella-configurador h3{\n  margin:0 0 4px;\n  font-size:16px;\n  font-weight:700;\n}\n\n.marsella-ayuda{\n  margin:0 0 14px;\n  color:#888;\n  font-size:11px;\n  line-height:1.5;\n}\n\n\n\/* BOTONES *\/\n.marsella-acabados,\n.marsella-lonas{\n  display:grid;\n  gap:8px;\n}\n\n.marsella-acabado,\n.marsella-lona,\n.marsella-ver-colores{\n  width:100%;\n  display:flex;\n  align-items:center;\n  gap:12px;\n  padding:12px 13px;\n  border:1px solid #e1e1e1;\n  border-radius:11px;\n  background:#fff;\n  text-align:left;\n  cursor:pointer;\n  color:#222;\n}\n\n.marsella-acabado.activo,\n.marsella-lona.activo{\n  border-color:#FF9E18;\n  background:#fffaf3;\n}\n\n.marsella-acabado>span:nth-child(2),\n.marsella-lona>span:nth-child(2),\n.marsella-ver-colores>span{\n  flex:1;\n}\n\n#marsella-configurador button strong{\n  display:block;\n  font-size:12px;\n}\n\n#marsella-configurador button small{\n  display:block;\n  margin-top:2px;\n  font-size:10px;\n  color:#888;\n}\n\n\n\/* COLORES *\/\n.marsella-muestra{\n  width:30px;\n  height:30px;\n  flex:0 0 30px;\n  border:1px solid #ddd;\n  border-radius:50%;\n}\n\n.marsella-blanco{\n  background:#f7f7f4;\n}\n\n.marsella-gris-estructura{\n  background:#55595b;\n}\n\n.marsella-lona-blanca{\n  background:#f3f3ef;\n}\n\n.marsella-lona-gris{\n  background:#8d9194;\n}\n\n.marsella-lona-beige{\n  background:#d3c1a2;\n}\n\n\n\/* CHECK *\/\n.marsella-check{\n  width:19px;\n  height:19px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  background:#FF9E18;\n  color:#fff;\n  visibility:hidden;\n}\n\n.activo>.marsella-check{\n  visibility:visible;\n}\n\n\n\/* GAMA BOT\u00d3N *\/\n.marsella-ver-colores{\n  margin-top:10px;\n  background:#f7f7f7;\n}\n\n.marsella-ver-colores>b{\n  color:#FF9E18;\n  font-size:18px;\n}\n\n\n\/* RESUMEN *\/\n.marsella-config-resumen{\n  padding-top:17px;\n  border-top:1px solid #ededed;\n}\n\n.marsella-config-resumen span{\n  display:block;\n  margin-bottom:5px;\n  color:#999;\n  font-size:9px;\n  font-weight:700;\n}\n\n.marsella-config-resumen strong{\n  font-size:12px;\n}\n\n\n\/* CTA *\/\n.marsella-config-cta{\n  min-height:44px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  padding:12px 17px;\n  border-radius:9px;\n  background:#FF9E18;\n  color:#fff;\n  font-size:12px;\n  font-weight:700;\n  text-decoration:none;\n}\n\n\n\/* =========================================================\n   MODAL\n========================================================= *\/\n\n.marsella-colores-modal{\n  position:fixed;\n  inset:0;\n  z-index:999999;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  padding:24px;\n  background:#0009;\n}\n\n.marsella-colores-modal[hidden]{\n  display:none !important;\n}\n\n.marsella-colores-panel{\n  position:relative;\n  width:100%;\n  max-width:1000px;\n  max-height:92vh;\n  overflow:auto;\n  padding:30px;\n  border-radius:18px;\n  background:#fff;\n}\n\n.marsella-colores-cerrar{\n  position:absolute;\n  right:15px;\n  top:15px;\n  width:35px;\n  height:35px;\n  border:0;\n  border-radius:50%;\n  background:#f2f2f2;\n  cursor:pointer;\n  font-size:22px;\n}\n\n\n\/* GAMA *\/\n.marsella-gama{\n  margin-top:28px;\n  padding-top:24px;\n  border-top:1px solid #ececec;\n}\n\n.marsella-gama h4{\n  margin:0 0 18px;\n  font-size:16px;\n  font-weight:700;\n}\n\n.marsella-gama-grid{\n  display:grid;\n  grid-template-columns:repeat(5,minmax(0,1fr));\n  gap:16px 14px;\n}\n\n.marsella-swatch{\n  min-width:0;\n}\n\n.marsella-chip{\n  display:block;\n  width:100%;\n  height:38px;\n  border-radius:8px;\n  background:var(--chip,#ddd);\n  border:1px solid rgba(0,0,0,.1);\n}\n\n.marsella-swatch strong{\n  display:block;\n  margin-top:5px;\n  font-size:11px;\n  line-height:1.3;\n}\n\n.marsella-swatch small{\n  display:block;\n  margin-top:2px;\n  color:#888;\n  font-size:9px;\n}\n\n\n\/* TEXTURADOS *\/\n.marsella-textura-blanco{\n  background:\n    linear-gradient(90deg,#fafafa,#f1f1ef,#ffffff);\n}\n\n.marsella-textura-7016{\n  background:\n    linear-gradient(90deg,#353c3f,#434b4e,#2f3538);\n}\n\n.marsella-textura-8014{\n  background:\n    linear-gradient(90deg,#563b2b,#684735,#4d3426);\n}\n\n.marsella-textura-9011{\n  background:\n    linear-gradient(90deg,#232628,#292c2e,#1d2022);\n}\n\n.marsella-textura-7043{\n  background:\n    linear-gradient(90deg,#515657,#5f6465,#4c5152);\n}\n\n.marsella-textura-1013{\n  background:\n    linear-gradient(90deg,#dfc9a5,#eed8b7,#d5ba91);\n}\n\n\n\/* MADERA *\/\n.marsella-madera-embero{\n  background:\n    repeating-linear-gradient(\n      90deg,\n      #704829 0,\n      #8a5a35 8px,\n      #603a23 15px,\n      #9a663b 25px\n    );\n}\n\n.marsella-madera-pino{\n  background:\n    repeating-linear-gradient(\n      90deg,\n      #b27c34 0,\n      #c99142 12px,\n      #9e6a27 22px,\n      #c38739 30px\n    );\n}\n\n.marsella-madera-clara{\n  background:\n    repeating-linear-gradient(\n      90deg,\n      #a85f24 0,\n      #c6772e 12px,\n      #98521f 20px,\n      #bf6b27 30px\n    );\n}\n\n\n\/* RESPONSIVE *\/\n@media(max-width:900px){\n\n  .marsella-configurador-grid{\n    grid-template-columns:1fr;\n  }\n\n  .marsella-configurador-visor{\n    position:relative;\n    top:auto;\n  }\n\n  .marsella-gama-grid{\n    grid-template-columns:repeat(4,1fr);\n  }\n\n}\n\n@media(max-width:600px){\n\n  .marsella-configurador{\n    padding:45px 18px;\n  }\n\n  .marsella-gama-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .marsella-colores-panel{\n    padding:24px 18px;\n  }\n\n}\n<\/style>\n\n\n\n<script>\n(function(){\n\n  const root =\n    document.getElementById('marsella-configurador');\n\n  if(!root || root.dataset.ready === '1'){\n    return;\n  }\n\n  root.dataset.ready = '1';\n\n  const imagen =\n    root.querySelector('#marsellaImagen');\n\n  const visor =\n    root.querySelector('.marsella-imagen-wrap');\n\n  const estado =\n    root.querySelector('#marsellaEstado');\n\n  const resumen =\n    root.querySelector('#marsellaResumen');\n\n  const error =\n    root.querySelector('#marsellaError');\n\n\n  const imagenes = {\n\n    blanco: {\n\n      blanco:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/Marsella_Perfil-Blanco-Tela-Blanca.jpg',\n\n      gris:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/Detalle-de-toldo-enrollable-gris-geschniegelt.png',\n\n      beige:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/Marsella_Perfil-Blanco-Tela-Beig.jpg'\n\n    },\n\n    gris: {\n\n      blanco:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/Marsella_Perfil-gris-Tela-blanca.jpg',\n\n      gris:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/10\/Detalle-de-toldo-gris-moderno.png',\n\n      beige:\n        'https:\/\/sun-stop.es\/wp-content\/uploads\/2026\/09\/Marsella_Perfil-gris-Tela-Beig.jpg'\n\n    }\n\n  };\n\n\n  const nombresEstructura = {\n    blanco:'Blanca',\n    gris:'Gris'\n  };\n\n  const nombresLona = {\n    blanco:'Blanca',\n    gris:'Gris',\n    beige:'Beige'\n  };\n\n\n  let estructura = 'blanco';\n  let lona = 'blanco';\n\n\n  function marcar(botones,seleccion){\n\n    botones.forEach(function(boton){\n\n      const activo =\n        boton === seleccion;\n\n      boton.classList.toggle(\n        'activo',\n        activo\n      );\n\n      boton.setAttribute(\n        'aria-pressed',\n        String(activo)\n      );\n\n    });\n\n  }\n\n\n  function actualizar(){\n\n    const url =\n      imagenes[estructura][lona];\n\n    const texto =\n      'Estructura ' +\n      nombresEstructura[estructura].toLowerCase() +\n      ' \u00b7 Lona ' +\n      nombresLona[lona].toLowerCase();\n\n    estado.textContent =\n      texto;\n\n    resumen.textContent =\n      'Estructura ' +\n      nombresEstructura[estructura] +\n      ' \u00b7 Lona ' +\n      nombresLona[lona];\n\n    visor.classList.add(\n      'cambiando'\n    );\n\n    const nueva =\n      new Image();\n\n    nueva.onload =\n      function(){\n\n        imagen.src =\n          url;\n\n        imagen.alt =\n          'P\u00e9rgola Marsella \u00b7 ' +\n          texto;\n\n        visor.classList.remove(\n          'cambiando'\n        );\n\n        error.hidden =\n          true;\n\n      };\n\n    nueva.onerror =\n      function(){\n\n        visor.classList.remove(\n          'cambiando'\n        );\n\n        error.hidden =\n          false;\n\n      };\n\n    nueva.src =\n      url;\n\n  }\n\n\n  const estructuras =\n    root.querySelectorAll(\n      '[data-estructura]'\n    );\n\n  estructuras.forEach(function(boton){\n\n    boton.addEventListener(\n      'click',\n      function(){\n\n        estructura =\n          boton.dataset.estructura;\n\n        marcar(\n          estructuras,\n          boton\n        );\n\n        actualizar();\n\n      }\n    );\n\n  });\n\n\n  const lonas =\n    root.querySelectorAll(\n      '[data-lona]'\n    );\n\n  lonas.forEach(function(boton){\n\n    boton.addEventListener(\n      'click',\n      function(){\n\n        lona =\n          boton.dataset.lona;\n\n        marcar(\n          lonas,\n          boton\n        );\n\n        actualizar();\n\n      }\n    );\n\n  });\n\n\n  \/* PRECARGA *\/\n  Object.values(imagenes)\n    .forEach(function(grupo){\n\n      Object.values(grupo)\n        .forEach(function(url){\n\n          const precarga =\n            new Image();\n\n          precarga.src =\n            url;\n\n        });\n\n    });\n\n\n\n  \/* MODAL *\/\n  const modal =\n    document.getElementById(\n      'marsellaColoresModal'\n    );\n\n  const abrir =\n    document.getElementById(\n      'marsellaAbrirColores'\n    );\n\n  const cerrar =\n    document.getElementById(\n      'marsellaCerrarColores'\n    );\n\n\n  abrir.addEventListener(\n    'click',\n    function(){\n\n      modal.hidden =\n        false;\n\n      document.body.style.overflow =\n        'hidden';\n\n    }\n  );\n\n\n  cerrar.addEventListener(\n    'click',\n    function(){\n\n      modal.hidden =\n        true;\n\n      document.body.style.overflow =\n        '';\n\n    }\n  );\n\n\n  modal.addEventListener(\n    'click',\n    function(evento){\n\n      if(evento.target === modal){\n\n        modal.hidden =\n          true;\n\n        document.body.style.overflow =\n          '';\n\n      }\n\n    }\n  );\n\n\n  document.addEventListener(\n    'keydown',\n    function(evento){\n\n      if(\n        evento.key === 'Escape' &&\n        !modal.hidden\n      ){\n\n        modal.hidden =\n          true;\n\n        document.body.style.overflow =\n          '';\n\n      }\n\n    }\n  );\n\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1e0d298 e-con e-atomic-element e-flexbox-base e-default-div e-36c90f4 \" data-id=\"1e0d298\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1e0d298\" data-e-type=\"e-flexbox\" data-id=\"1e0d298\">\n    \t\t<div class=\"elementor-element elementor-element-86237a9 elementor-widget elementor-widget-shortcode\" data-id=\"86237a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!-- =========================================================\n     DOCUMENTACI\u00d3N \u00b7 G\u00c9NOVA\n========================================================= -->\n\n<section class=\"genova-documentacion\">\n\n  <div class=\"genova-documentacion-inner\">\n\n    <!-- CABECERA -->\n    <div class=\"genova-documentacion-header\">\n\n      <span class=\"genova-documentacion-eyebrow\">\n        DOCUMENTACI\u00d3N\n      <\/span>\n\n      <h2>\n        Manuales y soporte\n      <\/h2>\n\n      <p>\n        Consulta toda la documentaci\u00f3n t\u00e9cnica, manuales de instalaci\u00f3n,\n        uso y mantenimiento de nuestros productos.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- TARJETA DOCUMENTACI\u00d3N -->\n    <a\n      href=\"https:\/\/manuales.sun-stop.es\/\"\n      class=\"genova-documentacion-card\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n\n      <div class=\"genova-documentacion-icon\">\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M6 2.8h8l4 4V21H6z\"><\/path>\n          <path d=\"M14 2.8V7h4\"><\/path>\n          <path d=\"M9 11h6\"><\/path>\n          <path d=\"M9 14h6\"><\/path>\n          <path d=\"M9 17h4\"><\/path>\n        <\/svg>\n\n      <\/div>\n\n\n      <div class=\"genova-documentacion-content\">\n\n        <div class=\"genova-documentacion-text\">\n\n          <h3>\n            Documentaci\u00f3n Sun Stop\n          <\/h3>\n\n          <p>\n            Accede a nuestra biblioteca de manuales para consultar\n            toda la informaci\u00f3n de instalaci\u00f3n, funcionamiento y mantenimiento.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"genova-documentacion-link\">\n          Ver todos los manuales\n          <span>\u2192<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/a>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   DOCUMENTACI\u00d3N\n========================================================= *\/\n\n.genova-documentacion{\n  width:100%;\n  padding:55px 20px;\n\n  background:#f3f4f5;\n\n  font-family:inherit;\n}\n\n.genova-documentacion-inner{\n  width:100%;\n  max-width:1070px;\n\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   CABECERA\n========================================================= *\/\n\n.genova-documentacion-header{\n  max-width:720px;\n\n  margin-bottom:28px;\n}\n\n.genova-documentacion-eyebrow{\n  display:block;\n\n  margin-bottom:8px;\n\n  color:#FF9E18;\n\n  font-size:12px;\n  font-weight:700;\n  line-height:1.2;\n\n  letter-spacing:.08em;\n\n  text-transform:uppercase;\n}\n\n.genova-documentacion-header h2{\n  margin:0 0 10px;\n\n  color:#111;\n\n  font-family:inherit;\n  font-size:25px;\n  font-weight:700;\n  line-height:1.15;\n\n  letter-spacing:0;\n}\n\n.genova-documentacion-header p{\n  margin:0;\n\n  color:#777;\n\n  font-size:14px;\n  font-weight:400;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   TARJETA\n========================================================= *\/\n\n.genova-documentacion-card{\n  width:100%;\n\n  display:flex;\n  align-items:center;\n\n  gap:22px;\n\n  padding:22px 24px;\n\n  border:1px solid #dedede;\n  border-radius:14px;\n\n  background:#fff;\n\n  text-decoration:none;\n\n  transition:\n    transform .25s ease,\n    box-shadow .25s ease,\n    border-color .25s ease;\n}\n\n.genova-documentacion-card:hover{\n  transform:translateY(-3px);\n\n  border-color:#FF9E18;\n\n  box-shadow:\n    0 12px 30px rgba(0,0,0,.07);\n}\n\n\n\/* =========================================================\n   ICONO\n========================================================= *\/\n\n.genova-documentacion-icon{\n  width:54px;\n  min-width:54px;\n  height:54px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  border-radius:12px;\n\n  background:#fff4e4;\n}\n\n.genova-documentacion-icon svg{\n  width:24px;\n  height:24px;\n\n  fill:none;\n\n  stroke:#FF9E18;\n  stroke-width:1.6;\n  stroke-linecap:round;\n  stroke-linejoin:round;\n}\n\n\n\/* =========================================================\n   CONTENIDO\n========================================================= *\/\n\n.genova-documentacion-content{\n  width:100%;\n\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  gap:30px;\n}\n\n.genova-documentacion-text h3{\n  margin:0 0 5px;\n\n  color:#181818;\n\n  font-family:inherit;\n  font-size:16px;\n  font-weight:700;\n  line-height:1.25;\n}\n\n.genova-documentacion-text p{\n  max-width:650px;\n\n  margin:0;\n\n  color:#777;\n\n  font-size:12px;\n  font-weight:400;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   ENLACE\n========================================================= *\/\n\n.genova-documentacion-link{\n  flex-shrink:0;\n\n  display:flex;\n  align-items:center;\n\n  gap:7px;\n\n  color:#FF9E18;\n\n  font-size:12px;\n  font-weight:700;\n\n  text-transform:uppercase;\n\n  letter-spacing:.02em;\n\n  transition:gap .2s ease;\n}\n\n.genova-documentacion-card:hover\n.genova-documentacion-link{\n  gap:11px;\n}\n\n.genova-documentacion-link span{\n  font-size:17px;\n  line-height:1;\n}\n\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  .genova-documentacion{\n    padding:42px 18px;\n  }\n\n  .genova-documentacion-header{\n    margin-bottom:22px;\n  }\n\n  .genova-documentacion-header h2{\n    font-size:22px;\n  }\n\n  .genova-documentacion-card{\n    align-items:flex-start;\n\n    padding:19px;\n\n    gap:15px;\n  }\n\n  .genova-documentacion-icon{\n    width:46px;\n    min-width:46px;\n    height:46px;\n  }\n\n  .genova-documentacion-content{\n    flex-direction:column;\n    align-items:flex-start;\n\n    gap:14px;\n  }\n\n  .genova-documentacion-text h3{\n    font-size:15px;\n  }\n\n}\n\n<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1 2 3 \u00d7 \u26f6 LONA CERRADA LONA ABIERTA DETALLE MARSELLA P\u00c9RGOLA TENSADA MARSELLA Dise\u00f1ada para crear espacios exteriores c\u00f3modos, protegidos y elegantes, la p\u00e9rgola tensada Marsella combina una estructura de aluminio con un sistema de lona retr\u00e1ctil\u00a0 de paliller\u00eda motorizada que permite regular f\u00e1cilmente la entrada de luz y sombra. Su dise\u00f1o vers\u00e1til permite [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","footnotes":""},"class_list":["post-3549","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/sun-stop.es\/index.php?rest_route=\/wp\/v2\/pages\/3549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sun-stop.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sun-stop.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sun-stop.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sun-stop.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3549"}],"version-history":[{"count":0,"href":"https:\/\/sun-stop.es\/index.php?rest_route=\/wp\/v2\/pages\/3549\/revisions"}],"wp:attachment":[{"href":"https:\/\/sun-stop.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}