en to unknown language translation catalogue (25 entries)

en: <div class="timeline_mb">
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2010</div>
          <p>Il progetto UBGEN®<br /> prende forma</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2013</div>
          <p>Fondazione di UBGEN®</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2016</div>
          <p>Ottenuta la prima certificazione<br /> CE con RE-BONE®</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2017</div>
          <p>Inizio delle vendite sul<br /> mercato nazionale</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2018</div>
          <p>Inizio delle vendite sul<br /> mercato estero</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2023</div>
          <p>Ampliamento e creazione di<br /> un nuovo asset produttivo</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2024</div>
          <div class="milestone-distributor">
            <p>Ingresso nel<br /> Gruppo Ziacom<br /> Medical SL</p>
            <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
        </div>
        </div>
      </div>
    </div>
    
    <style>
      .timeline_mb {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        position: relative;
        margin: 3rem auto;
        padding: 20px 0;
        width: 100%;
        max-width: 767px;
      }
    
      .timeline_mb::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 16px;
        border-radius: 8px;
        background-color: var( --e-global-color-primary );
        transform: translateX(-50%);
      }
    
      .timeline-item_mb {
        width: 50%;
        position: relative;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
      }
    
      .timeline-item_mb:nth-child(even) {
        text-align: left;
      }
    
      .timeline-item_mb:nth-child(odd) {
        text-align: right;
        left: auto;
        right: -50%;
      }
      
      .timeline-item_mb::after {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        left: auto;
        right: auto;
        width: 50%;
        height: 2px;
        background-color: #d3d3d3;
        z-index: 0;
      }
      
      .timeline-item_mb:nth-child(even)::after {
          right: 8px;
      }
      
      .timeline-item_mb:nth-child(odd)::after {
          left: 8px;
      }
      
      .timeline-item_mb.hidden_mb {
        opacity: 0;
        transform: translateY(50px);
      }
    
      .timeline-item_mb.visible_mb {
        opacity: 1;
        transform: translateY(0);
      }
    
      .timeline-item_mb .content_mb {
        position: relative;
        background-color: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: inline-block;
        max-width: 80%;
        z-index: 1;
      }
      
      .timeline-item_mb .content_mb::before {
        content: '';
        position: absolute;
        top: calc(50% - 4px);
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        z-index: 2;
      }
    
      .timeline-item_mb:nth-child(even) .content_mb::before {
        right: -8px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::before {
        left: -8px;
      }
      
      .timeline-item_mb .content_mb::after {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
      
      .timeline-item_mb:nth-child(even) .content_mb::after {
        margin-left: 10px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::after {
        margin-right: 10px;
      }
      
      .timeline-item_mb .content_mb .date_mb {
        font-size: 1.25rem;
      }
      
      .timeline-item_mb .content_mb p {
        font-size: 0.75rem;
        margin-bottom: 0;
      }
    
      .timeline-item_mb .date_mb {
        font-weight: bold;
        margin-bottom: 5px;
        color: var( --e-global-color-primary );
      }
      @media(max-width:767px) {
        .e-con.e-flex > .e-con-inner {
          flex-wrap: initial;
        }
      }
    </style>
    
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Función para detectar el dispositivo
        function showCorrectBlock() {
          const isMobileOrTablet = window.matchMedia("(max-width: 1024px)").matches;
          const timelineMb = document.querySelector(".timeline_mb");
          const timelinePC = document.querySelector("#timeline-block");
    
          if (isMobileOrTablet) {
            // Mostrar bloque mobile/tablet
            timelineMb.style.display = "block";
            timelinePC.style.display = "none";
          } else {
            // Mostrar bloque PC
            timelineMb.style.display = "none";
            timelinePC.style.display = "block";
          }
        }
    
        // Llamar a la función al cargar la página
        showCorrectBlock();
    
        // Escuchar cambios en el tamaño de la ventana (opcional, para mayor interactividad)
        window.addEventListener("resize", showCorrectBlock);
    
        // Código para la funcionalidad de scroll de timeline_mb (bloque mobile/tablet)
        const items = document.querySelectorAll(".timeline-item_mb");
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible_mb");
              entry.target.classList.remove("hidden_mb");
            }
          });
        }, { threshold: 0.1 });
    
        items.forEach((item) => {
          observer.observe(item);
        });
      });
    </script>
target: <div class="timeline_mb">
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2010</div>
          <p>O projeto UBGEN® ganha forma</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2013</div>
          <p>Fundação do UBGEN®</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2016</div>
          <p>Obtém a primeira certificação CE com o RE-BONE®.</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2017</div>
          <p>Início das vendas no mercado nacional</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2018</div>
          <p>Início das vendas no mercado externo</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2023</div>
          <p>Expansão e criação de um novo ativo de produção</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2024</div>
          <div class="milestone-distributor">
            <p>Entrada no Ziacom Group Medical SL</p>
            <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
        </div>
        </div>
      </div>
    </div>
    
    <style>
      .timeline_mb {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        position: relative;
        margin: 3rem auto;
        padding: 20px 0;
        width: 100%;
        max-width: 767px;
      }
    
      .timeline_mb::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 16px;
        border-radius: 8px;
        background-color: var( --e-global-color-primary );
        transform: translateX(-50%);
      }
    
      .timeline-item_mb {
        width: 50%;
        position: relative;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
      }
    
      .timeline-item_mb:nth-child(even) {
        text-align: left;
      }
    
      .timeline-item_mb:nth-child(odd) {
        text-align: right;
        left: auto;
        right: -50%;
      }
      
      .timeline-item_mb::after {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        left: auto;
        right: auto;
        width: 50%;
        height: 2px;
        background-color: #d3d3d3;
        z-index: 0;
      }
      
      .timeline-item_mb:nth-child(even)::after {
          right: 8px;
      }
      
      .timeline-item_mb:nth-child(odd)::after {
          left: 8px;
      }
      
      .timeline-item_mb.hidden_mb {
        opacity: 0;
        transform: translateY(50px);
      }
    
      .timeline-item_mb.visible_mb {
        opacity: 1;
        transform: translateY(0);
      }
    
      .timeline-item_mb .content_mb {
        position: relative;
        background-color: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: inline-block;
        max-width: 80%;
        z-index: 1;
      }
      
      .timeline-item_mb .content_mb::before {
        content: '';
        position: absolute;
        top: calc(50% - 4px);
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        z-index: 2;
      }
    
      .timeline-item_mb:nth-child(even) .content_mb::before {
        right: -8px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::before {
        left: -8px;
      }
      
      .timeline-item_mb .content_mb::after {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
      
      .timeline-item_mb:nth-child(even) .content_mb::after {
        margin-left: 10px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::after {
        margin-right: 10px;
      }
      
      .timeline-item_mb .content_mb .date_mb {
        font-size: 1.25rem;
      }
      
      .timeline-item_mb .content_mb p {
        font-size: 0.75rem;
        margin-bottom: 0;
      }
    
      .timeline-item_mb .date_mb {
        font-weight: bold;
        margin-bottom: 5px;
        color: var( --e-global-color-primary );
      }
      @media(max-width:767px) {
        .e-con.e-flex > .e-con-inner {
          flex-wrap: initial;
        }
      }
    </style>
    
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Función para detectar el dispositivo
        function showCorrectBlock() {
          const isMobileOrTablet = window.matchMedia("(max-width: 1024px)").matches;
          const timelineMb = document.querySelector(".timeline_mb");
          const timelinePC = document.querySelector("#timeline-block");
    
          if (isMobileOrTablet) {
            // Mostrar bloque mobile/tablet
            timelineMb.style.display = "block";
            timelinePC.style.display = "none";
          } else {
            // Mostrar bloque PC
            timelineMb.style.display = "none";
            timelinePC.style.display = "block";
          }
        }
    
        // Llamar a la función al cargar la página
        showCorrectBlock();
    
        // Escuchar cambios en el tamaño de la ventana (opcional, para mayor interactividad)
        window.addEventListener("resize", showCorrectBlock);
    
        // Código para la funcionalidad de scroll de timeline_mb (bloque mobile/tablet)
        const items = document.querySelectorAll(".timeline-item_mb");
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible_mb");
              entry.target.classList.remove("hidden_mb");
            }
          });
        }, { threshold: 0.1 });
    
        items.forEach((item) => {
          observer.observe(item);
        });
      });
    </script>

en: <div id="timeline-block">
      <div id="timeline-container">
        <div id="timeline">
          <div id="timeline-fill"></div>
          <div id="slider">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
          </div>
        </div>
        <div class="milestone top first" data-year="2010">
          <div class="milestone-content">
            <span class="milestone-date">2010</span>
            <p>Il progetto UBGEN®<br /> prende forma</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2013">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2013</span>
            <p>Fondazione di UBGEN®</p>
          </div>
        </div>
        <div class="milestone top large" data-year="2015">
          <div class="milestone-content">
            <span class="milestone-date">2016</span>
            <p>Ottenuta la prima certificazione<br /> CE con RE-BONE®</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2017">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2017</span>
            <p>Inizio delle vendite sul<br /> mercato nazionale</p>
          </div>
        </div>
        <div class="milestone top" data-year="2020">
          <div class="milestone-content">
            <span class="milestone-date">2018</span>
            <p>Inizio delle vendite sul<br /> mercato estero</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2022">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2023</span>
            <p>Ampliamento e creazione di<br /> un nuovo asset produttivo</p>
          </div>
        </div>
        <div class="milestone top super large" data-year="2024">
          <div class="milestone-content">
            <span class="milestone-date">2024</span>
            <div class="milestone-distributor">
              <p>Ingresso nel<br /> Gruppo Ziacom<br /> Medical SL</p>
              <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
            </div>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
      </div>
    </div>
    
    <style>
      /* General timeline styles */
      #timeline-block {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        padding: 20px;
        position: relative;
        margin-top: 7rem;
      }
    
      #timeline-container {
        position: relative;
        width: 100%;
        height: 12rem;
      }
    
      #timeline {
        position: relative;
        width: 100%;
        height: 16px;
        background: #e0e0e0;
        border-radius: 8px;
        margin-top: 150px;
      }
    
      /* Timeline fill */
      #timeline-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 5%;
        background: var( --e-global-color-primary );
        border-radius: 8px 0 0 8px;
        z-index: 1;
        transition: width 0.1s ease-out;
      }
    
      /* Slider styles */
      #slider {
        position: absolute;
        top: -7px;
        left: 3.3%;
        width: 30px;
        height: 30px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
    
      .slider-arrow {
        fill: white;
      }
    
      /* Milestone styles */
      .milestone {
        position: absolute;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      }
    
      .milestone.first {
        opacity: 1;
      }
    
      .milestone.top {
        top: -120px; /* Aparecen encima de la línea */
      }
      
      .milestone.top.large {
        top: -190px;
      }
      
      .milestone.top.super.large {
        top: -209px;
      }
    
      .milestone.bottom {
        top: 18px; /* Aparecen debajo de la línea */
      }
    
      .milestone[data-year="2010"] { left: 5%; }
      .milestone[data-year="2013"] { left: 15%; }
      .milestone[data-year="2015"] { left: 28%; }
      .milestone[data-year="2017"] { left: 40%; }
      .milestone[data-year="2020"] { left: 55%; }
      .milestone[data-year="2022"] { left: 65%; }
      .milestone[data-year="2024"] { left: 80%; }
    
      .milestone.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
      }
    
      /* Milestone line */
      .milestone-line {
        width: 2px;
        height: 40px;
        background: #d3d3d3;
        margin: 0 auto;
        position: relative;
      }
      
      .milestone.large .milestone-line {
        height: 105px;
      }
      
      .milestone.super.large .milestone-line {
        height: 110px;
      }
    
      .milestone-circle {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
    
      /* Milestone content */
      .milestone-content {
        background: #fafafa;
        border-radius: 8px;
        padding: 8px 12px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 4;
        left: 25%;
      }
      
      .milestone-distributor {
        display: flex;
      }
      
      .milestone-distributor img {
        margin-left: 0.5rem;
      }
    
      .milestone-content::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 25%;
        clear: both;
      }
    
      .milestone.top .milestone-content {
        margin-bottom: 15px; /* Espaciado adicional entre el círculo rosa y el triángulo gris */
      }
      
      .milestone.bottom .milestone-content {
        margin-top: 15px;
      }
    
      .milestone.bottom .milestone-content::after {
        top: auto;
        bottom: 100%;
        border-top: none;
        border-bottom: 10px solid #fafafa;
      }
    
      .milestone-date {
        font-size: 1.2rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
    
      .milestone p {
        font-size: 0.75rem;
        margin: 0;
        color: #555;
        text-align: left;
      }
    </style>
    
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const slider = document.getElementById("slider");
      const timeline = document.getElementById("timeline");
      const timelineFill = document.getElementById("timeline-fill");
      const milestones = document.querySelectorAll(".milestone");
      const timelineWidth = timeline.offsetWidth;
      const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
    
      let isDragging = false;
    
      // Seleccionar todos los elementos <p>
      const paragraphs = document.querySelectorAll('p[lang]');
      paragraphs.forEach(paragraph => {
          // Mostrar solo el párrafo cuyo lang coincida con el de la página
          if (paragraph.lang === pageLang) {
              paragraph.style.display = 'block';
          } else {
              paragraph.style.display = 'none';
          }
      });
    
      slider.addEventListener("mousedown", function () {
        isDragging = true;
      });
    
      document.addEventListener("mousemove", function (e) {
        if (isDragging) {
          const timelineRect = timeline.getBoundingClientRect();
          let newLeft = e.clientX - timelineRect.left;
    
          // Limitar el slider dentro de los bordes de la línea de tiempo
          newLeft = Math.max(0, Math.min(newLeft, timelineWidth - slider.offsetWidth / 2));
    
          // Mover el slider
          slider.style.left = `${newLeft}px`;
    
          // Actualizar la línea de relleno
          const fillPercentage = (newLeft / timelineWidth) * 100;
          timelineFill.style.width = `${fillPercentage}%`;
    
          // Controlar la visibilidad de los hitos
          milestones.forEach((milestone) => {
            const milestonePosition = parseFloat(milestone.getAttribute("data-year"));
            const milestoneLeft = (milestonePosition - 2010) / (2028 - 2010) * timelineWidth;
    
            if (newLeft >= milestoneLeft) {
              milestone.classList.add("visible");
            } else {
              milestone.classList.remove("visible");
            }
          });
        }
      });
    
      document.addEventListener("mouseup", function () {
        isDragging = false;
      });
    });
    </script>
target: <div id="timeline-block">
      <div id="timeline-container">
        <div id="timeline">
          <div id="timeline-fill"></div>
          <div id="slider">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
          </div>
        </div>
        <div class="milestone top first" data-year="2010">
          <div class="milestone-content">
            <span class="milestone-date">2010</span>
            <p>O projeto UBGEN® ganha forma</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2013">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2013</span>
            <p>Fundação do UBGEN®</p>
          </div>
        </div>
        <div class="milestone top large" data-year="2015">
          <div class="milestone-content">
            <span class="milestone-date">2016</span>
            <p>Obtém a primeira certificação CE com o RE-BONE®.</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2017">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2017</span>
            <p>Início das vendas no mercado nacional</p>
          </div>
        </div>
        <div class="milestone top" data-year="2020">
          <div class="milestone-content">
            <span class="milestone-date">2018</span>
            <p>Início das vendas no mercado externo</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2022">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2023</span>
            <p>Expansão e criação de um novo ativo de produção</p>
          </div>
        </div>
        <div class="milestone top super large" data-year="2024">
          <div class="milestone-content">
            <span class="milestone-date">2024</span>
            <div class="milestone-distributor">
              <p>Entrada no Ziacom Group Medical SL</p>
              <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
            </div>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
      </div>
    </div>
    
    <style>
      /* General timeline styles */
      #timeline-block {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        padding: 20px;
        position: relative;
        margin-top: 7rem;
      }
    
      #timeline-container {
        position: relative;
        width: 100%;
        height: 12rem;
      }
    
      #timeline {
        position: relative;
        width: 100%;
        height: 16px;
        background: #e0e0e0;
        border-radius: 8px;
        margin-top: 150px;
      }
    
      /* Timeline fill */
      #timeline-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 5%;
        background: var( --e-global-color-primary );
        border-radius: 8px 0 0 8px;
        z-index: 1;
        transition: width 0.1s ease-out;
      }
    
      /* Slider styles */
      #slider {
        position: absolute;
        top: -7px;
        left: 3.3%;
        width: 30px;
        height: 30px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
    
      .slider-arrow {
        fill: white;
      }
    
      /* Milestone styles */
      .milestone {
        position: absolute;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      }
    
      .milestone.first {
        opacity: 1;
      }
    
      .milestone.top {
        top: -120px; /* Aparecen encima de la línea */
      }
      
      .milestone.top.large {
        top: -190px;
      }
      
      .milestone.top.super.large {
        top: -209px;
      }
    
      .milestone.bottom {
        top: 18px; /* Aparecen debajo de la línea */
      }
    
      .milestone[data-year="2010"] { left: 5%; }
      .milestone[data-year="2013"] { left: 15%; }
      .milestone[data-year="2015"] { left: 28%; }
      .milestone[data-year="2017"] { left: 40%; }
      .milestone[data-year="2020"] { left: 55%; }
      .milestone[data-year="2022"] { left: 65%; }
      .milestone[data-year="2024"] { left: 80%; }
    
      .milestone.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
      }
    
      /* Milestone line */
      .milestone-line {
        width: 2px;
        height: 40px;
        background: #d3d3d3;
        margin: 0 auto;
        position: relative;
      }
      
      .milestone.large .milestone-line {
        height: 105px;
      }
      
      .milestone.super.large .milestone-line {
        height: 110px;
      }
    
      .milestone-circle {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
    
      /* Milestone content */
      .milestone-content {
        background: #fafafa;
        border-radius: 8px;
        padding: 8px 12px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 4;
        left: 25%;
      }
      
      .milestone-distributor {
        display: flex;
      }
      
      .milestone-distributor img {
        margin-left: 0.5rem;
      }
    
      .milestone-content::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 25%;
        clear: both;
      }
    
      .milestone.top .milestone-content {
        margin-bottom: 15px; /* Espaciado adicional entre el círculo rosa y el triángulo gris */
      }
      
      .milestone.bottom .milestone-content {
        margin-top: 15px;
      }
    
      .milestone.bottom .milestone-content::after {
        top: auto;
        bottom: 100%;
        border-top: none;
        border-bottom: 10px solid #fafafa;
      }
    
      .milestone-date {
        font-size: 1.2rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
    
      .milestone p {
        font-size: 0.75rem;
        margin: 0;
        color: #555;
        text-align: left;
      }
    </style>
    
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const slider = document.getElementById("slider");
      const timeline = document.getElementById("timeline");
      const timelineFill = document.getElementById("timeline-fill");
      const milestones = document.querySelectorAll(".milestone");
      const timelineWidth = timeline.offsetWidth;
      const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
    
      let isDragging = false;
    
      // Seleccionar todos los elementos <p>
      const paragraphs = document.querySelectorAll('p[lang]');
      paragraphs.forEach(paragraph => {
          // Mostrar solo el párrafo cuyo lang coincida con el de la página
          if (paragraph.lang === pageLang) {
              paragraph.style.display = 'block';
          } else {
              paragraph.style.display = 'none';
          }
      });
    
      slider.addEventListener("mousedown", function () {
        isDragging = true;
      });
    
      document.addEventListener("mousemove", function (e) {
        if (isDragging) {
          const timelineRect = timeline.getBoundingClientRect();
          let newLeft = e.clientX - timelineRect.left;
    
          // Limitar el slider dentro de los bordes de la línea de tiempo
          newLeft = Math.max(0, Math.min(newLeft, timelineWidth - slider.offsetWidth / 2));
    
          // Mover el slider
          slider.style.left = `${newLeft}px`;
    
          // Actualizar la línea de relleno
          const fillPercentage = (newLeft / timelineWidth) * 100;
          timelineFill.style.width = `${fillPercentage}%`;
    
          // Controlar la visibilidad de los hitos
          milestones.forEach((milestone) => {
            const milestonePosition = parseFloat(milestone.getAttribute("data-year"));
            const milestoneLeft = (milestonePosition - 2010) / (2028 - 2010) * timelineWidth;
    
            if (newLeft >= milestoneLeft) {
              milestone.classList.add("visible");
            } else {
              milestone.classList.remove("visible");
            }
          });
        }
      });
    
      document.addEventListener("mouseup", function () {
        isDragging = false;
      });
    });
    </script>

en: <h1 style="text-align: left;">UBGEN</h1><p><strong>UN NUOVO CAPITOLO INTERNAZIONALE</strong></p><p>Presente in oltre 40 Paesi, UBGEN® si distingue nel panorama della rigenerazione tissutale grazie a un solido network internazionale.</p><p>La collaborazione con Key Opinion Leader di fama mondiale e prestigiosi centri di ricerca favorisce l’innovazione, supportata da eventi scientifici di alto livello.</p><p>L’impegno costante nella formazione e nello sviluppo di soluzioni all’avanguardia contribuisce a ridefinire gli standard dell’odontoiatria rigenerativa.</p>
target: <h1 style="text-align: left;">UBGEN</h1><p><strong>UM NOVO CAPÍTULO INTERNACIONAL</strong></p><p>Presente em mais de 40 países, a UBGEN® destaca-se na regeneração de tecidos graças a uma forte rede internacional.</p><p>A colaboração com Líderes de Opinião de renome mundial e centros de investigação prestigiados promove a inovação, apoiada por eventos científicos de alto nível.</p><p>Um compromisso contínuo com a formação e o desenvolvimento de soluções de ponta está a ajudar a redefinir os padrões da medicina dentária regenerativa.</p>

en: <h1><span style="color: #e95296;">Chi siamo</span></h1><p>UBGEN® si distingue nel panorama dentale per la rigenerazione tissutale grazie a biomateriali e <strong>soluzioni innovative</strong>, progettate per favorire il <strong>successo chirurgico</strong>.</p><p>Con oltre dieci anni di esperienza nel settore, affonda le sue radici nella visione di una coppia di imprenditori italiani, Marco Manno e Ilenia Geretto.</p><p>Oggi, come parte integrante del <strong>Gruppo Ziacom Medical SL, </strong>l'azienda risponde alle reali esigenze dei professionisti, combinando ricerca avanzata e partnership scientifiche, e ridefinisce gli standard dell’odontoiatria rigenerativa mediante soluzioni d’avanguardia.</p>
target: <h1><span style="color: #e95296;">Sobre nós</span></h1><p>A UBGEN® destaca-se no panorama dentário da regeneração de tecidos graças aos biomateriais e às <strong>soluções inovadoras</strong> concebidas para promover <strong>o sucesso cirúrgico</strong>.</p><p>Com mais de dez anos de experiência no sector, tem as suas raízes na visão de um par de empresários italianos, Marco Manno e Ilenia Geretto.</p><p>Hoje, como parte integrante do <strong>Grupo Ziacom Medical SL, </strong>a empresa responde às necessidades reais dos profissionais, combinando investigação avançada e parcerias científicas, e redefine os padrões da medicina dentária regenerativa através de soluções de vanguarda.</p>

en: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>MISSIONE</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Innovare costantemente, </span><span style="color: #000000;">anticipare le esigenze del </span><span style="color: #000000;">mercato e supportare dentisti </span><span style="color: #000000;">e partner con soluzioni </span><span style="color: #000000;">rigenerative innovative e </span><span style="color: #000000;">integrate, per trattamenti più </span><span style="color: #000000;">prevedibili e sicuri.</span></p>
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>MISSÃO</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Inovar constantemente, </span><span style="color: #000000;">antecipar as necessidades do</span> <span style="color: #000000;">mercado e apoiar os dentistas</span> <span style="color: #000000;">e parceiros com soluções</span> <span style="color: #000000;">regenerativas inovadoras e</span><span style="color: #000000;"> integradas para tratamentos mais</span><span style="color: #000000;"> previsíveis e seguros.</span></p>

en: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>RISULTATI</strong></span></p><p style="text-align: left;"><span style="color: #000000;">In 10 anni, l’azienda ha </span><span style="color: #000000;">stabilito collaborazioni con </span><span style="color: #000000;">prestigiosi centri di ricerca e </span><span style="color: #000000;">Opinion Leader, supportando </span><span style="color: #000000;">la crescita professionale di </span><span style="color: #000000;">migliaia di odontoiatri in oltre </span><span style="color: #000000;">40 Paesi con soluzioni </span><span style="color: #000000;">innovative e formazione.</span></p>
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>RESULTADOS</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Em 10 anos, a empresa</span><span style="color: #000000;"> estabeleceu parcerias com </span><span style="color: #000000;">prestigiados centros de investigação e</span><span style="color: #000000;"> líderes de opinião, apoiando</span><span style="color: #000000;"> o desenvolvimento profissional de</span><span style="color: #000000;"> milhares de dentistas em mais de</span><span style="color: #000000;"> 40 países com soluções</span><span style="color: #000000;"> e formação inovadoras.</span></p>

en: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>VISIONE</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Diventare punto di riferimento </span><span style="color: #000000;">globale nella chirurgia orale, </span><span style="color: #000000;">costruendo un futuro dove </span><span style="color: #000000;">ogni intervento si traduce in </span><span style="color: #000000;">successo clinico, generando </span><span style="color: #000000;">un impatto positivo su pazienti </span><span style="color: #000000;">e professionisti.</span></p>
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>VISÃO</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Tornar-se a referência</span><span style="color: #000000;"> mundial em cirurgia oral,</span><span style="color: #000000;"> construindo um futuro onde</span><span style="color: #000000;"> cada procedimento se traduza em </span><span style="color: #000000;">sucesso clínico, gerando </span><span style="color: #000000;">um impacto positivo nos pacientes</span><span style="color: #000000;"> e profissionais.</span></p>

en: <p><strong>DELLE PERSONE</strong><br /><strong>PER UNA <span style="color: #e95296;">NUOVA ETICA</span></strong><br /><strong>DEL BENESSERE</strong></p>
target: <p><strong>DE PESSOAS</strong><br><strong>PARA UMA <span style="color: #e95296;">NOVA ÉTICA</span></strong><br><strong>DO BEM-ESTAR</strong></p>

en: <p>CI PRENDIAMO CURA</p>
target: <p>CUIDA DE NÓS</p>

en: La Nostra Storia
target: A nossa história

en: Scorri e scopri la nostra storia
target: Deslize e descubra a nossa história

en: editor-text-editor-037dacd
target: <h1><span style="color: #e95296;">Sobre nós</span></h1><p>A UBGEN® destaca-se no panorama dentário da regeneração de tecidos graças aos biomateriais e às <strong>soluções inovadoras</strong> concebidas para promover <strong>o sucesso cirúrgico</strong>.</p><p>Com mais de dez anos de experiência no sector, tem as suas raízes na visão de um par de empresários italianos, Marco Manno e Ilenia Geretto.</p><p>Hoje, como parte integrante do <strong>Grupo Ziacom Medical SL, </strong>a empresa responde às necessidades reais dos profissionais, combinando investigação avançada e parcerias científicas, e redefine os padrões da medicina dentária regenerativa através de soluções de vanguarda.</p>

en: editor-text-editor-684609e
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>VISÃO</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Tornar-se a referência</span><span style="color: #000000;"> mundial em cirurgia oral,</span><span style="color: #000000;"> construindo um futuro onde</span><span style="color: #000000;"> cada procedimento se traduza em </span><span style="color: #000000;">sucesso clínico, gerando </span><span style="color: #000000;">um impacto positivo nos pacientes</span><span style="color: #000000;"> e profissionais.</span></p>

en: editor-text-editor-755ddf61
target: <h1 style="text-align: left;">UBGEN</h1><p><strong>UM NOVO CAPÍTULO INTERNACIONAL</strong></p><p>Presente em mais de 40 países, a UBGEN® destaca-se na regeneração de tecidos graças a uma forte rede internacional.</p><p>A colaboração com Líderes de Opinião de renome mundial e centros de investigação prestigiados promove a inovação, apoiada por eventos científicos de alto nível.</p><p>Um compromisso contínuo com a formação e o desenvolvimento de soluções de ponta está a ajudar a redefinir os padrões da medicina dentária regenerativa.</p>

en: editor-text-editor-787386f
target: <p><strong>DE PESSOAS</strong><br><strong>PARA UMA <span style="color: #e95296;">NOVA ÉTICA</span></strong><br><strong>DO BEM-ESTAR</strong></p>

en: editor-text-editor-ba0b127
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>MISSÃO</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Inovar constantemente, </span><span style="color: #000000;">antecipar as necessidades do</span> <span style="color: #000000;">mercado e apoiar os dentistas</span> <span style="color: #000000;">e parceiros com soluções</span> <span style="color: #000000;">regenerativas inovadoras e</span><span style="color: #000000;"> integradas para tratamentos mais</span><span style="color: #000000;"> previsíveis e seguros.</span></p>

en: editor-text-editor-bb8e32d
target: <p style="text-align: left;"><span class="text-box-title" style="color: #e95296;"><strong>RESULTADOS</strong></span></p><p style="text-align: left;"><span style="color: #000000;">Em 10 anos, a empresa</span><span style="color: #000000;"> estabeleceu parcerias com </span><span style="color: #000000;">prestigiados centros de investigação e</span><span style="color: #000000;"> líderes de opinião, apoiando</span><span style="color: #000000;"> o desenvolvimento profissional de</span><span style="color: #000000;"> milhares de dentistas em mais de</span><span style="color: #000000;"> 40 países com soluções</span><span style="color: #000000;"> e formação inovadoras.</span></p>

en: editor-text-editor-e7c96a3
target: <p>CUIDA DE NÓS</p>

en: html-html-364d405
target: <div id="timeline-block">
      <div id="timeline-container">
        <div id="timeline">
          <div id="timeline-fill"></div>
          <div id="slider">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
          </div>
        </div>
        <div class="milestone top first" data-year="2010">
          <div class="milestone-content">
            <span class="milestone-date">2010</span>
            <p>O projeto UBGEN® ganha forma</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2013">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2013</span>
            <p>Fundação do UBGEN®</p>
          </div>
        </div>
        <div class="milestone top large" data-year="2015">
          <div class="milestone-content">
            <span class="milestone-date">2016</span>
            <p>Obtém a primeira certificação CE com o RE-BONE®.</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2017">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2017</span>
            <p>Início das vendas no mercado nacional</p>
          </div>
        </div>
        <div class="milestone top" data-year="2020">
          <div class="milestone-content">
            <span class="milestone-date">2018</span>
            <p>Início das vendas no mercado externo</p>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
        <div class="milestone bottom" data-year="2022">
          <div class="milestone-line"></div>
          <div class="milestone-circle"></div>
          <div class="milestone-content">
            <span class="milestone-date">2023</span>
            <p>Expansão e criação de um novo ativo de produção</p>
          </div>
        </div>
        <div class="milestone top super large" data-year="2024">
          <div class="milestone-content">
            <span class="milestone-date">2024</span>
            <div class="milestone-distributor">
              <p>Entrada no Ziacom Group Medical SL</p>
              <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
            </div>
          </div>
          <div class="milestone-circle"></div>
          <div class="milestone-line"></div>
        </div>
      </div>
    </div>
    
    <style>
      /* General timeline styles */
      #timeline-block {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        padding: 20px;
        position: relative;
        margin-top: 7rem;
      }
    
      #timeline-container {
        position: relative;
        width: 100%;
        height: 12rem;
      }
    
      #timeline {
        position: relative;
        width: 100%;
        height: 16px;
        background: #e0e0e0;
        border-radius: 8px;
        margin-top: 150px;
      }
    
      /* Timeline fill */
      #timeline-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 5%;
        background: var( --e-global-color-primary );
        border-radius: 8px 0 0 8px;
        z-index: 1;
        transition: width 0.1s ease-out;
      }
    
      /* Slider styles */
      #slider {
        position: absolute;
        top: -7px;
        left: 3.3%;
        width: 30px;
        height: 30px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
    
      .slider-arrow {
        fill: white;
      }
    
      /* Milestone styles */
      .milestone {
        position: absolute;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      }
    
      .milestone.first {
        opacity: 1;
      }
    
      .milestone.top {
        top: -120px; /* Aparecen encima de la línea */
      }
      
      .milestone.top.large {
        top: -190px;
      }
      
      .milestone.top.super.large {
        top: -209px;
      }
    
      .milestone.bottom {
        top: 18px; /* Aparecen debajo de la línea */
      }
    
      .milestone[data-year="2010"] { left: 5%; }
      .milestone[data-year="2013"] { left: 15%; }
      .milestone[data-year="2015"] { left: 28%; }
      .milestone[data-year="2017"] { left: 40%; }
      .milestone[data-year="2020"] { left: 55%; }
      .milestone[data-year="2022"] { left: 65%; }
      .milestone[data-year="2024"] { left: 80%; }
    
      .milestone.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
      }
    
      /* Milestone line */
      .milestone-line {
        width: 2px;
        height: 40px;
        background: #d3d3d3;
        margin: 0 auto;
        position: relative;
      }
      
      .milestone.large .milestone-line {
        height: 105px;
      }
      
      .milestone.super.large .milestone-line {
        height: 110px;
      }
    
      .milestone-circle {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
    
      /* Milestone content */
      .milestone-content {
        background: #fafafa;
        border-radius: 8px;
        padding: 8px 12px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 4;
        left: 25%;
      }
      
      .milestone-distributor {
        display: flex;
      }
      
      .milestone-distributor img {
        margin-left: 0.5rem;
      }
    
      .milestone-content::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 25%;
        clear: both;
      }
    
      .milestone.top .milestone-content {
        margin-bottom: 15px; /* Espaciado adicional entre el círculo rosa y el triángulo gris */
      }
      
      .milestone.bottom .milestone-content {
        margin-top: 15px;
      }
    
      .milestone.bottom .milestone-content::after {
        top: auto;
        bottom: 100%;
        border-top: none;
        border-bottom: 10px solid #fafafa;
      }
    
      .milestone-date {
        font-size: 1.2rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
    
      .milestone p {
        font-size: 0.75rem;
        margin: 0;
        color: #555;
        text-align: left;
      }
    </style>
    
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const slider = document.getElementById("slider");
      const timeline = document.getElementById("timeline");
      const timelineFill = document.getElementById("timeline-fill");
      const milestones = document.querySelectorAll(".milestone");
      const timelineWidth = timeline.offsetWidth;
      const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
    
      let isDragging = false;
    
      // Seleccionar todos los elementos <p>
      const paragraphs = document.querySelectorAll('p[lang]');
      paragraphs.forEach(paragraph => {
          // Mostrar solo el párrafo cuyo lang coincida con el de la página
          if (paragraph.lang === pageLang) {
              paragraph.style.display = 'block';
          } else {
              paragraph.style.display = 'none';
          }
      });
    
      slider.addEventListener("mousedown", function () {
        isDragging = true;
      });
    
      document.addEventListener("mousemove", function (e) {
        if (isDragging) {
          const timelineRect = timeline.getBoundingClientRect();
          let newLeft = e.clientX - timelineRect.left;
    
          // Limitar el slider dentro de los bordes de la línea de tiempo
          newLeft = Math.max(0, Math.min(newLeft, timelineWidth - slider.offsetWidth / 2));
    
          // Mover el slider
          slider.style.left = `${newLeft}px`;
    
          // Actualizar la línea de relleno
          const fillPercentage = (newLeft / timelineWidth) * 100;
          timelineFill.style.width = `${fillPercentage}%`;
    
          // Controlar la visibilidad de los hitos
          milestones.forEach((milestone) => {
            const milestonePosition = parseFloat(milestone.getAttribute("data-year"));
            const milestoneLeft = (milestonePosition - 2010) / (2028 - 2010) * timelineWidth;
    
            if (newLeft >= milestoneLeft) {
              milestone.classList.add("visible");
            } else {
              milestone.classList.remove("visible");
            }
          });
        }
      });
    
      document.addEventListener("mouseup", function () {
        isDragging = false;
      });
    });
    </script>

en: html-html-3854583
target: <div class="timeline_mb">
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2010</div>
          <p>O projeto UBGEN® ganha forma</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2013</div>
          <p>Fundação do UBGEN®</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2016</div>
          <p>Obtém a primeira certificação CE com o RE-BONE®.</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2017</div>
          <p>Início das vendas no mercado nacional</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2018</div>
          <p>Início das vendas no mercado externo</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2023</div>
          <p>Expansão e criação de um novo ativo de produção</p>
        </div>
      </div>
      <div class="timeline-item_mb hidden_mb">
        <div class="content_mb">
          <div class="date_mb">2024</div>
          <div class="milestone-distributor">
            <p>Entrada no Ziacom Group Medical SL</p>
            <div><img src="/wp-content/uploads/2025/01/logo_ziacom_storia.jpg" alt="Logo Ziacom"></div>
        </div>
        </div>
      </div>
    </div>
    
    <style>
      .timeline_mb {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        position: relative;
        margin: 3rem auto;
        padding: 20px 0;
        width: 100%;
        max-width: 767px;
      }
    
      .timeline_mb::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 16px;
        border-radius: 8px;
        background-color: var( --e-global-color-primary );
        transform: translateX(-50%);
      }
    
      .timeline-item_mb {
        width: 50%;
        position: relative;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
      }
    
      .timeline-item_mb:nth-child(even) {
        text-align: left;
      }
    
      .timeline-item_mb:nth-child(odd) {
        text-align: right;
        left: auto;
        right: -50%;
      }
      
      .timeline-item_mb::after {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        left: auto;
        right: auto;
        width: 50%;
        height: 2px;
        background-color: #d3d3d3;
        z-index: 0;
      }
      
      .timeline-item_mb:nth-child(even)::after {
          right: 8px;
      }
      
      .timeline-item_mb:nth-child(odd)::after {
          left: 8px;
      }
      
      .timeline-item_mb.hidden_mb {
        opacity: 0;
        transform: translateY(50px);
      }
    
      .timeline-item_mb.visible_mb {
        opacity: 1;
        transform: translateY(0);
      }
    
      .timeline-item_mb .content_mb {
        position: relative;
        background-color: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: inline-block;
        max-width: 80%;
        z-index: 1;
      }
      
      .timeline-item_mb .content_mb::before {
        content: '';
        position: absolute;
        top: calc(50% - 4px);
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        z-index: 2;
      }
    
      .timeline-item_mb:nth-child(even) .content_mb::before {
        right: -8px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::before {
        left: -8px;
      }
      
      .timeline-item_mb .content_mb::after {
        width: 8px;
        height: 8px;
        background: var( --e-global-color-primary );
        border-radius: 50%;
        margin: 0px auto;
        position: relative;
        z-index: 2;
      }
      
      .timeline-item_mb:nth-child(even) .content_mb::after {
        margin-left: 10px;
      }
    
      .timeline-item_mb:nth-child(odd) .content_mb::after {
        margin-right: 10px;
      }
      
      .timeline-item_mb .content_mb .date_mb {
        font-size: 1.25rem;
      }
      
      .timeline-item_mb .content_mb p {
        font-size: 0.75rem;
        margin-bottom: 0;
      }
    
      .timeline-item_mb .date_mb {
        font-weight: bold;
        margin-bottom: 5px;
        color: var( --e-global-color-primary );
      }
      @media(max-width:767px) {
        .e-con.e-flex > .e-con-inner {
          flex-wrap: initial;
        }
      }
    </style>
    
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Función para detectar el dispositivo
        function showCorrectBlock() {
          const isMobileOrTablet = window.matchMedia("(max-width: 1024px)").matches;
          const timelineMb = document.querySelector(".timeline_mb");
          const timelinePC = document.querySelector("#timeline-block");
    
          if (isMobileOrTablet) {
            // Mostrar bloque mobile/tablet
            timelineMb.style.display = "block";
            timelinePC.style.display = "none";
          } else {
            // Mostrar bloque PC
            timelineMb.style.display = "none";
            timelinePC.style.display = "block";
          }
        }
    
        // Llamar a la función al cargar la página
        showCorrectBlock();
    
        // Escuchar cambios en el tamaño de la ventana (opcional, para mayor interactividad)
        window.addEventListener("resize", showCorrectBlock);
    
        // Código para la funcionalidad de scroll de timeline_mb (bloque mobile/tablet)
        const items = document.querySelectorAll(".timeline-item_mb");
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible_mb");
              entry.target.classList.remove("hidden_mb");
            }
          });
        }, { threshold: 0.1 });
    
        items.forEach((item) => {
          observer.observe(item);
        });
      });
    </script>

en: text-divider-401be175
target: Separador

en: text-divider-5e2b2bf8
target: Separador

en: text-divider-add0adc
target: Separador

en: title-heading-0cbbf2a
target: Deslize e descubra a nossa história

en: title-heading-17035ec
target: A nossa história
