{"id":837,"date":"2026-10-14T22:05:31","date_gmt":"2026-10-14T22:05:31","guid":{"rendered":"https:\/\/bipolar.mx\/?page_id=837"},"modified":"2026-10-14T23:06:56","modified_gmt":"2026-10-14T23:06:56","slug":"cambia-el-mood","status":"publish","type":"page","link":"https:\/\/bipolar.mx\/es\/cambia-el-mood\/","title":{"rendered":"cambia el mood"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"837\" class=\"elementor elementor-837\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57b7d7bb e-con-full case-hero e-flex e-con e-parent\" data-id=\"57b7d7bb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-404757e9 e-con-full bplr-global-header e-flex e-con e-child\" data-id=\"404757e9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;fixed&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-65b7255a bplr-header-left e-flex e-con-boxed e-con e-child\" data-id=\"65b7255a\" 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-1a4cbd59 elementor-widget__width-auto elementor-widget elementor-widget-image\" data-id=\"1a4cbd59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"227\" src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-768x227.png\" class=\"attachment-medium_large size-medium_large wp-image-820\" alt=\"\" srcset=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-768x227.png 768w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-300x89.png 300w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-1024x302.png 1024w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-1536x453.png 1536w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-18x5.png 18w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1-600x177.png 600w, https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/BPLR_05-copy-1.png 1583w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\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-55754e3b e-con-full elementor-hidden-mobile bplr-header-center e-flex e-con e-child\" data-id=\"55754e3b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6359bcd elementor-widget elementor-widget-heading\" data-id=\"6359bcd\" 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\"><a href=\"\/about\/\">ABOUT<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ef1e422 elementor-widget elementor-widget-heading\" data-id=\"6ef1e422\" 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\"><a href=\"\/work\/\">WORK<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13e192c0 elementor-widget elementor-widget-heading\" data-id=\"13e192c0\" 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\"><a href=\"\/join\/\">JOIN US<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-816d34b elementor-hidden-desktop bplr-header-right e-flex e-con-boxed e-con e-child\" data-id=\"816d34b\" 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-6f85d8b5 bplr-header-menu elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"6f85d8b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"ion ion-ios-menu\"><\/i>\t\t\t<\/div>\n\t\t<\/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\t\t<div class=\"elementor-element elementor-element-12120285 elementor-widget elementor-widget-html\" data-id=\"12120285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\/* =========================================================\n   HEADER GLOBAL \u2014 BASE ESTABLE\n========================================================= *\/\n\n.bplr-global-header {\n\n  position: fixed !important;\n\n  top: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n\n  display: flex !important;\n\n  width: 100vw !important;\n  max-width: 100vw !important;\n\n  min-height: 82px !important;\n\n  margin: 0 !important;\n\n  box-sizing: border-box !important;\n\n  background: #000 !important;\n\n  opacity: 1 !important;\n  visibility: visible !important;\n\n  transform:\n    translate3d(0,0,0) !important;\n\n  pointer-events: auto !important;\n\n  overflow: visible !important;\n\n  z-index: 999999 !important;\n\n  transition:\n    transform .46s cubic-bezier(.22,.7,.25,1) !important;\n\n}\n\n\n\/* =========================================================\n   FORCE CHILDREN VISIBLE\n========================================================= *\/\n\n.bplr-global-header\n.bplr-header-left,\n\n.bplr-global-header\n.bplr-header-center,\n\n.bplr-global-header\n.bplr-header-right {\n\n  opacity: 1 !important;\n  visibility: visible !important;\n\n}\n\n\n\n\/* =========================================================\n   DESKTOP\n========================================================= *\/\n\n@media (min-width:1181px) {\n\n  .bplr-global-header {\n\n    min-height:\n      84px !important;\n\n    padding:\n      0 13.5vw !important;\n\n    display:\n      grid !important;\n\n    grid-template-columns:\n      1fr auto 1fr !important;\n\n    align-items:\n      center !important;\n\n    column-gap:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left {\n\n    grid-column:\n      1 !important;\n\n    justify-self:\n      start !important;\n\n    align-self:\n      center !important;\n\n    display:\n      flex !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    min-width:\n      0 !important;\n\n    flex:\n      0 0 auto !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left\n  .elementor-widget-image {\n\n    display:\n      block !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left img {\n\n    display:\n      block !important;\n\n    width:\n      clamp(\n        108px,\n        7.2vw,\n        128px\n      ) !important;\n\n    max-width:\n      none !important;\n\n    height:\n      auto !important;\n\n    opacity:\n      1 !important;\n\n    visibility:\n      visible !important;\n\n    object-fit:\n      contain !important;\n\n  }\n\n\n  .bplr-header-center {\n\n    grid-column:\n      2 !important;\n\n    justify-self:\n      center !important;\n\n    align-self:\n      center !important;\n\n    display:\n      flex !important;\n\n    flex-direction:\n      row !important;\n\n    align-items:\n      center !important;\n\n    justify-content:\n      center !important;\n\n    flex-wrap:\n      nowrap !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    height:\n      auto !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n    gap:\n      clamp(\n        24px,\n        2vw,\n        36px\n      ) !important;\n\n  }\n\n\n  .bplr-header-center >\n  .elementor-element {\n\n    display:\n      block !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    flex:\n      0 0 auto !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n  }\n\n\n  .bplr-header-center\n  .elementor-heading-title {\n\n    display:\n      block !important;\n\n    margin:\n      0 !important;\n\n    opacity:\n      1 !important;\n\n    visibility:\n      visible !important;\n\n    white-space:\n      nowrap !important;\n\n  }\n\n\n  .bplr-header-right {\n\n    display:\n      none !important;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   TABLET + MOBILE\n========================================================= *\/\n\n@media (max-width:1180px) {\n\n  .bplr-global-header {\n\n    min-height:\n      82px !important;\n\n    padding:\n      0 7vw !important;\n\n    display:\n      flex !important;\n\n    flex-direction:\n      row !important;\n\n    align-items:\n      center !important;\n\n    justify-content:\n      space-between !important;\n\n    gap:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left {\n\n    display:\n      flex !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    height:\n      auto !important;\n\n    flex:\n      0 0 auto !important;\n\n    align-items:\n      center !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left\n  .elementor-widget-image {\n\n    display:\n      block !important;\n\n    width:\n      auto !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n  }\n\n\n  .bplr-header-left img {\n\n    display:\n      block !important;\n\n    width:\n      clamp(\n        96px,\n        11vw,\n        112px\n      ) !important;\n\n    max-width:\n      none !important;\n\n    height:\n      auto !important;\n\n    opacity:\n      1 !important;\n\n    visibility:\n      visible !important;\n\n    object-fit:\n      contain !important;\n\n  }\n\n\n  .bplr-header-center {\n\n    display:\n      none !important;\n\n    width:\n      0 !important;\n\n    max-width:\n      0 !important;\n\n    height:\n      0 !important;\n\n    min-height:\n      0 !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n    overflow:\n      hidden !important;\n\n    pointer-events:\n      none !important;\n\n  }\n\n\n  .bplr-header-right {\n\n    position:\n      relative !important;\n\n    display:\n      flex !important;\n\n    width:\n      auto !important;\n\n    max-width:\n      none !important;\n\n    height:\n      auto !important;\n\n    flex:\n      0 0 auto !important;\n\n    align-items:\n      center !important;\n\n    justify-content:\n      flex-end !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n    opacity:\n      1 !important;\n\n    visibility:\n      visible !important;\n\n    z-index:\n      1000001 !important;\n\n  }\n\n\n  .bplr-header-right\n  .elementor-widget-icon,\n\n  .bplr-header-right\n  .elementor-icon {\n\n    display:\n      flex !important;\n\n    opacity:\n      1 !important;\n\n    visibility:\n      visible !important;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   HTML WIDGET OUT OF LAYOUT\n========================================================= *\/\n\n.bplr-global-header >\n.elementor-widget-html {\n\n  position:\n    absolute !important;\n\n  left:\n    0 !important;\n\n  bottom:\n    0 !important;\n\n  width:\n    1px !important;\n\n  height:\n    1px !important;\n\n  min-width:\n    1px !important;\n\n  min-height:\n    1px !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  overflow:\n    visible !important;\n\n  pointer-events:\n    none !important;\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  function recoverBPLRHeader() {\n\n    const left =\n      document.querySelector(\n        '.bplr-header-left'\n      );\n\n\n    if (!left) return;\n\n\n    let candidate =\n      left.parentElement;\n\n\n    let header =\n      null;\n\n\n    while (\n      candidate &&\n      candidate !==\n      document.body\n    ) {\n\n      const hasLeft =\n        candidate.querySelector(\n          '.bplr-header-left'\n        );\n\n\n      const hasRight =\n        candidate.querySelector(\n          '.bplr-header-right'\n        );\n\n\n      if (\n        hasLeft &&\n        hasRight\n      ) {\n\n        header =\n          candidate;\n\n        break;\n\n      }\n\n\n      candidate =\n        candidate.parentElement;\n\n    }\n\n\n    if (!header) return;\n\n\n    header.classList.add(\n      'bplr-global-header'\n    );\n\n\n    header.classList.remove(\n      'header-hidden',\n      'header-visible',\n      'header-intro-hidden',\n      'header-scroll-hidden'\n    );\n\n\n    header.style.removeProperty(\n      'display'\n    );\n\n    header.style.removeProperty(\n      'opacity'\n    );\n\n    header.style.removeProperty(\n      'visibility'\n    );\n\n    header.style.removeProperty(\n      'transform'\n    );\n\n    header.style.removeProperty(\n      'position'\n    );\n\n    header.style.removeProperty(\n      'top'\n    );\n\n  }\n\n\n  function start() {\n\n    recoverBPLRHeader();\n\n\n    setTimeout(\n      recoverBPLRHeader,\n      250\n    );\n\n\n    setTimeout(\n      recoverBPLRHeader,\n      700\n    );\n\n  }\n\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      start\n    );\n\n  }\n\n  else {\n\n    start();\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69cbe4f0 elementor-widget elementor-widget-html\" data-id=\"69cbe4f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\/* =========================================================\n   HEADER SCROLL STATE\n\n   IMPORTANTE:\n   NO ALTERA OPACITY.\n   NO ALTERA DISPLAY.\n   SOLO MUEVE EL HEADER HACIA ARRIBA.\n========================================================= *\/\n\n.bplr-global-header.header-scroll-hidden {\n\n  transform:\n    translate3d(0,-110%,0) !important;\n\n  opacity:\n    1 !important;\n\n  visibility:\n    visible !important;\n\n}\n\n\n\/* =========================================================\n   CUANDO EST\u00c1 VISIBLE\n========================================================= *\/\n\n.bplr-global-header:not(.header-scroll-hidden) {\n\n  transform:\n    translate3d(0,0,0) !important;\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  function initBPLRHeaderScroll() {\n\n    const header =\n      document.querySelector(\n        '.bplr-global-header'\n      );\n\n\n    if (!header) {\n\n      return;\n\n    }\n\n\n    \/* =====================================================\n       LIMPIAR LISTENER ANTERIOR\n       SI ELEMENTOR REEJECUTA EL WIDGET\n    ===================================================== *\/\n\n    if (\n      window.__bplrHeaderScrollHandler\n    ) {\n\n      window.removeEventListener(\n        'scroll',\n        window.__bplrHeaderScrollHandler\n      );\n\n    }\n\n\n    \/* =====================================================\n       ESTADO INICIAL\n    ===================================================== *\/\n\n    header.classList.remove(\n      'header-scroll-hidden'\n    );\n\n\n    let lastY =\n      window.scrollY;\n\n\n    let accumulator =\n      0;\n\n\n    let lastDirection =\n      null;\n\n\n    let ticking =\n      false;\n\n\n\n    \/* =====================================================\n       UPDATE\n    ===================================================== *\/\n\n    function update() {\n\n      const y =\n        window.scrollY;\n\n\n      const delta =\n        y - lastY;\n\n\n\n      \/* =================================================\n         CERCA DEL TOP = SIEMPRE VISIBLE\n      ================================================= *\/\n\n      if (\n        y <= 80\n      ) {\n\n        header.classList.remove(\n          'header-scroll-hidden'\n        );\n\n\n        accumulator =\n          0;\n\n\n        lastDirection =\n          null;\n\n\n        lastY =\n          y;\n\n\n        ticking =\n          false;\n\n\n        return;\n\n      }\n\n\n\n      \/* =================================================\n         MENU ABIERTO = SIEMPRE VISIBLE\n      ================================================= *\/\n\n      if (\n        document.body.classList\n          .contains(\n            'mobile-menu-open'\n          )\n      ) {\n\n        header.classList.remove(\n          'header-scroll-hidden'\n        );\n\n\n        accumulator =\n          0;\n\n\n        lastY =\n          y;\n\n\n        ticking =\n          false;\n\n\n        return;\n\n      }\n\n\n\n      \/* =================================================\n         DOWN\n      ================================================= *\/\n\n      if (\n        delta > 0\n      ) {\n\n        if (\n          lastDirection !==\n          'down'\n        ) {\n\n          accumulator =\n            0;\n\n        }\n\n\n        lastDirection =\n          'down';\n\n\n        accumulator +=\n          delta;\n\n\n        \/*\n          NO OCULTAMOS CON MICRO MOVIMIENTOS.\n          EL USUARIO DEBE BAJAR ~24PX.\n        *\/\n\n        if (\n          accumulator >= 24 &&\n          y > 130\n        ) {\n\n          header.classList.add(\n            'header-scroll-hidden'\n          );\n\n\n          accumulator =\n            0;\n\n        }\n\n      }\n\n\n\n      \/* =================================================\n         UP\n      ================================================= *\/\n\n      else if (\n        delta < 0\n      ) {\n\n        if (\n          lastDirection !==\n          'up'\n        ) {\n\n          accumulator =\n            0;\n\n        }\n\n\n        lastDirection =\n          'up';\n\n\n        accumulator +=\n          Math.abs(\n            delta\n          );\n\n\n        \/*\n          AL SUBIR RESPONDE M\u00c1S R\u00c1PIDO.\n        *\/\n\n        if (\n          accumulator >= 10\n        ) {\n\n          header.classList.remove(\n            'header-scroll-hidden'\n          );\n\n\n          accumulator =\n            0;\n\n        }\n\n      }\n\n\n      lastY =\n        y;\n\n\n      ticking =\n        false;\n\n    }\n\n\n\n    \/* =====================================================\n       HANDLER GLOBAL\n    ===================================================== *\/\n\n    window.__bplrHeaderScrollHandler =\n      function () {\n\n        if (!ticking) {\n\n          ticking =\n            true;\n\n\n          requestAnimationFrame(\n            update\n          );\n\n        }\n\n      };\n\n\n    window.addEventListener(\n\n      'scroll',\n\n      window.__bplrHeaderScrollHandler,\n\n      {\n        passive:\n          true\n      }\n\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     ESPERAMOS A QUE EL SCRIPT DE RECOVERY\n     TERMINE DE IDENTIFICAR EL HEADER.\n  ===================================================== *\/\n\n  function start() {\n\n    setTimeout(\n      initBPLRHeaderScroll,\n      850\n    );\n\n  }\n\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      start\n    );\n\n  }\n\n  else {\n\n    start();\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d448588 elementor-widget elementor-widget-html\" data-id=\"3d448588\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     BPLR MOBILE \/ TABLET MENU\n========================================================= -->\n\n<div\n  id=\"bplr-case-mobile-menu\"\n  class=\"bplr-mobile-menu\"\n  aria-hidden=\"true\"\n>\n\n  <div class=\"bplr-menu-nav\">\n\n    <a\n      href=\"#\"\n      data-home-anchor=\"about\"\n    >\n      ABOUT\n    <\/a>\n\n    <a\n      href=\"#\"\n      data-home-anchor=\"work\"\n    >\n      WORK\n    <\/a>\n\n    <a\n      href=\"#\"\n      data-home-anchor=\"join\"\n    >\n      JOIN US\n    <\/a>\n\n  <\/div>\n\n\n  <div class=\"bplr-menu-bottom\">\n\n\n    <!-- SOCIAL -->\n\n    <div class=\"bplr-menu-social\">\n\n\n      <a\n        href=\"#\"\n        aria-label=\"Instagram\"\n        class=\"social-box\"\n      >\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <rect\n            x=\"3\"\n            y=\"3\"\n            width=\"18\"\n            height=\"18\"\n            rx=\"5\"\n            ry=\"5\"\n          ><\/rect>\n\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"4\"\n          ><\/circle>\n\n          <circle\n            cx=\"17.5\"\n            cy=\"6.5\"\n            r=\"1\"\n          ><\/circle>\n        <\/svg>\n\n      <\/a>\n\n\n      <a\n        href=\"#\"\n        aria-label=\"LinkedIn\"\n        class=\"social-box\"\n      >\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n\n          <rect\n            x=\"3\"\n            y=\"9\"\n            width=\"4\"\n            height=\"12\"\n          ><\/rect>\n\n          <circle\n            cx=\"5\"\n            cy=\"5\"\n            r=\"2\"\n          ><\/circle>\n\n          <path\n            d=\"M10 9h4v2c1-1.5 2.5-2.5 4.5-2.5 3.5 0 5.5 2.3 5.5 6.5V21h-4v-5.3c0-2-.7-3.4-2.6-3.4-1.4 0-2.3.9-2.7 1.9-.1.4-.2 1-.2 1.5V21h-4z\"\n          ><\/path>\n\n        <\/svg>\n\n      <\/a>\n\n\n      <a\n        href=\"#\"\n        aria-label=\"Vimeo\"\n        class=\"social-box\"\n      >\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n\n          <path\n            d=\"M3 8.5c2-2.3 4.7-4.9 7-4.9 2.1 0 2.6 1.3 3 4 .5 3.5.8 6 1.8 6 1.1 0 3-2.1 4.3-4.2.7-1.1.4-1.7-.6-1.7-.5 0-1.2.2-1.8.5.6-3 2.6-4.5 5.8-4.4 2.4.1 3.4 1.4 2.8 3.8-1 4.2-6.8 11.7-10.9 14-2.3 1.3-4.3.5-5.3-1.7C7.8 17.1 7 13.4 6.2 10.7c-.5-1.7-.9-2.3-1.7-2.3-.5 0-1 .4-1.5.9z\"\n          ><\/path>\n\n        <\/svg>\n\n      <\/a>\n\n\n    <\/div>\n\n\n    <!-- ADDRESS -->\n\n    <div class=\"bplr-menu-address\">\n\n      <div class=\"address-title\">\n        Headquarters\n      <\/div>\n\n      <div class=\"address-copy\">\n\n        L\u00e1zaro C\u00e1rdenas 2424,<br>\n        Loma Larga Oriente<br>\n        San Pedro Garza Garc\u00eda<br>\n        Nuevo Le\u00f3n, M\u00e9xico<br>\n        C.P. 66266\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   FORCE VISIBLE HAMBURGER \u2014 TABLET \/ MOBILE\n========================================================= *\/\n\n@media (max-width:1180px) {\n\n  .bplr-header-right {\n\n    position:\n      relative !important;\n\n    min-width:\n      32px;\n\n    min-height:\n      32px;\n\n  }\n\n\n  \/* Hide Elementor's original icon.\n     We draw our own hamburger instead. *\/\n\n  .bplr-header-right\n  .elementor-icon {\n\n    opacity:\n      0 !important;\n\n  }\n\n\n  \/* HAMBURGER *\/\n\n  .bplr-header-right::before {\n\n    content:\n      \"\";\n\n    position:\n      absolute;\n\n    right:\n      0;\n\n    top:\n      50%;\n\n    width:\n      30px;\n\n    height:\n      2px;\n\n    background:\n      #ffffff;\n\n    box-shadow:\n      0 -8px 0 #ffffff,\n      0 8px 0 #ffffff;\n\n    transform:\n      translateY(-50%);\n\n    opacity:\n      1;\n\n    pointer-events:\n      none;\n\n    transition:\n      opacity .2s ease;\n\n  }\n\n\n  \/* Hide hamburger when menu is open.\n     Existing ::after X takes its place. *\/\n\n  body.mobile-menu-open\n  .bplr-header-right::before {\n\n    opacity:\n      0;\n\n  }\n\n}\n\n\/* =========================================================\n   MOBILE MENU\n========================================================= *\/\n\n.bplr-mobile-menu {\n\n  position:\n    fixed;\n\n  inset:\n    0;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    105px 20px 24px;\n\n  box-sizing:\n    border-box;\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  justify-content:\n    space-between;\n\n  overflow:\n    hidden;\n\n  background:\n    #F5F5F5;\n\n  color:\n    #0B0B0D;\n\n  opacity:\n    0;\n\n  visibility:\n    hidden;\n\n  pointer-events:\n    none;\n\n  transform:\n    translate3d(0,-20px,0);\n\n  transition:\n    opacity .3s ease,\n    transform .45s cubic-bezier(.65,0,.35,1),\n    visibility .3s;\n\n  z-index:\n    999990;\n\n}\n\n\n\/* =========================================================\n   OPEN\n========================================================= *\/\n\nbody.mobile-menu-open\n.bplr-mobile-menu {\n\n  opacity:\n    1;\n\n  visibility:\n    visible;\n\n  pointer-events:\n    auto;\n\n  transform:\n    translate3d(0,0,0);\n\n}\n\n\n\/* =========================================================\n   NAV\n========================================================= *\/\n\n.bplr-menu-nav {\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  align-items:\n    flex-start;\n\n  justify-content:\n    flex-start;\n\n  gap:\n    0;\n\n  text-align:\n    left;\n\n}\n\n\n.bplr-menu-nav a,\n.bplr-menu-nav a:link,\n.bplr-menu-nav a:visited,\n.bplr-menu-nav a:hover,\n.bplr-menu-nav a:focus,\n.bplr-menu-nav a:active {\n\n  display:\n    block;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(68px,18vw,110px);\n\n  font-weight:\n    800 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    .83;\n\n  letter-spacing:\n    -2px;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #0B0B0D !important;\n\n  text-decoration:\n    none !important;\n\n  border:\n    0 !important;\n\n  box-shadow:\n    none !important;\n\n  background:\n    transparent !important;\n\n  transform:\n    skewX(0deg);\n\n  transform-origin:\n    left center;\n\n  transition:\n    transform .28s cubic-bezier(.65,0,.35,1);\n\n}\n\n\n.bplr-menu-nav a::before,\n.bplr-menu-nav a::after {\n\n  content:\n    none !important;\n\n  display:\n    none !important;\n\n}\n\n\n@media (hover:hover) {\n\n  .bplr-menu-nav a:hover {\n\n    transform:\n      skewX(-10deg);\n\n  }\n\n}\n\n\n\/* =========================================================\n   BOTTOM\n========================================================= *\/\n\n.bplr-menu-bottom {\n\n  width:\n    100%;\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  gap:\n    28px;\n\n}\n\n\n\/* =========================================================\n   SOCIAL\n========================================================= *\/\n\n.bplr-menu-social {\n\n  display:\n    flex;\n\n  gap:\n    18px;\n\n}\n\n\n.social-box,\n.social-box:hover,\n.social-box:focus,\n.social-box:active,\n.social-box:visited {\n\n  width:\n    auto;\n\n  height:\n    auto;\n\n  margin:\n    0;\n\n  padding:\n    0 !important;\n\n  border:\n    0 !important;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  color:\n    #0B0B0D !important;\n\n  text-decoration:\n    none !important;\n\n  box-shadow:\n    none !important;\n\n  background:\n    transparent !important;\n\n}\n\n\n.social-box svg {\n\n  width:\n    30px;\n\n  height:\n    30px;\n\n  fill:\n    none;\n\n  stroke:\n    currentColor;\n\n  stroke-width:\n    1.8;\n\n  stroke-linecap:\n    round;\n\n  stroke-linejoin:\n    round;\n\n}\n\n\n.social-box[aria-label=\"Vimeo\"] svg {\n\n  fill:\n    currentColor;\n\n  stroke:\n    none;\n\n}\n\n\n\/* =========================================================\n   ADDRESS\n========================================================= *\/\n\n.bplr-menu-address {\n\n  border-top:\n    1px solid #d5d5d5;\n\n  padding-top:\n    20px;\n\n  font-family:\n    \"Barlow\",\n    Arial,\n    sans-serif;\n\n  color:\n    #0B0B0D;\n\n}\n\n\n.bplr-menu-address\n.address-title {\n\n  margin-bottom:\n    8px;\n\n  font-size:\n    20px;\n\n  font-weight:\n    600;\n\n  line-height:\n    1.15;\n\n}\n\n\n.bplr-menu-address\n.address-copy {\n\n  font-size:\n    20px;\n\n  font-weight:\n    400;\n\n  line-height:\n    1.2;\n\n}\n\n\n\/* =========================================================\n   HEADER WHILE MENU IS OPEN\n========================================================= *\/\n\n@media (max-width:1180px) {\n\n  body.mobile-menu-open\n  .bplr-global-header {\n\n    transform:\n      translate3d(0,0,0) !important;\n\n    background:\n      #F5F5F5 !important;\n\n  }\n\n\n  \/* LOGO TO BLACK *\/\n\n  body.mobile-menu-open\n  .bplr-header-left img {\n\n    filter:\n      brightness(0)\n      saturate(100%) !important;\n\n  }\n\n\n  \/* HIDE ORIGINAL HAMBURGER *\/\n\n  body.mobile-menu-open\n  .bplr-header-right\n  .elementor-icon {\n\n    opacity:\n      0 !important;\n\n  }\n\n\n  \/* X *\/\n\n  .bplr-header-right::after {\n\n    content:\n      \"\u00d7\";\n\n    position:\n      absolute;\n\n    right:\n      0;\n\n    top:\n      50%;\n\n    transform:\n      translateY(-53%);\n\n    color:\n      #0B0B0D;\n\n    font-family:\n      Arial,\n      sans-serif;\n\n    font-size:\n      42px;\n\n    font-weight:\n      300;\n\n    line-height:\n      1;\n\n    opacity:\n      0;\n\n    pointer-events:\n      none;\n\n    transition:\n      opacity .2s ease;\n\n  }\n\n\n  body.mobile-menu-open\n  .bplr-header-right::after {\n\n    opacity:\n      1;\n\n  }\n\n}\n\n\n\/* =========================================================\n   BLOCK PAGE SCROLL\n========================================================= *\/\n\nbody.mobile-menu-open {\n\n  overflow:\n    hidden !important;\n\n}\n\n\n\/* =========================================================\n   DESKTOP\n========================================================= *\/\n\n@media (min-width:1181px) {\n\n  .bplr-mobile-menu {\n\n    display:\n      none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n  function initBPLRMobileMenu() {\n\n\n    \/* =====================================================\n       MENU\n    ===================================================== *\/\n\n    const menus =\n      Array.from(\n        document.querySelectorAll(\n          '#bplr-case-mobile-menu'\n        )\n      );\n\n\n    \/* REMOVE CONTACT FROM ALL MOBILE MENU INSTANCES *\/\n\n    menus.forEach(\n      function (menuInstance) {\n\n        menuInstance\n          .querySelectorAll(\n            '[data-home-anchor=\"contact\"]'\n          )\n          .forEach(\n            function (contactLink) {\n\n              contactLink.remove();\n\n            }\n          );\n\n      }\n    );\n\n\n    if (!menus.length) return;\n\n\n    const menu =\n      menus[\n        menus.length - 1\n      ];\n\n\n    \/* Remove accidental Elementor duplicates *\/\n\n    menus\n      .slice(\n        0,\n        -1\n      )\n      .forEach(\n        function (oldMenu) {\n\n          oldMenu.remove();\n\n        }\n      );\n\n\n    \/* =====================================================\n       MOVE MENU TO BODY\n    ===================================================== *\/\n\n    if (\n      menu.parentElement !==\n      document.body\n    ) {\n\n      document.body.appendChild(\n        menu\n      );\n\n    }\n\n\n    \/* =====================================================\n       HEADER + TRIGGER\n    ===================================================== *\/\n\n    const header =\n      document.querySelector(\n        '.bplr-global-header'\n      );\n\n\n    if (!header) return;\n\n\n    const trigger =\n      header.querySelector(\n        '.bplr-header-right'\n      );\n\n\n    if (!trigger) return;\n\n\n    \/* =====================================================\n       PAGE LINKS\n\n       MOBILE \/ TABLET MIRRORS THE LINKS\n       ALREADY ASSIGNED TO DESKTOP HEADER.\n\n       THIS MEANS:\n       - STAGING WORKS NOW\n       - PRODUCTION WILL WORK LATER\n       - NO DUPLICATE URL MAINTENANCE\n    ===================================================== *\/\n\n    const headerLinks =\n      Array.from(\n        header.querySelectorAll(\n          'a[href]'\n        )\n      );\n\n\n    function getHeaderHref(label) {\n\n      const match =\n        headerLinks.find(\n          function (link) {\n\n            return (\n              link.textContent ||\n              ''\n            )\n              .trim()\n              .toUpperCase() ===\n              label;\n\n          }\n        );\n\n\n      return match\n        ? match.href\n        : '';\n\n    }\n\n\n    const pageLinks = {\n\n      about:\n        getHeaderHref(\n          'ABOUT'\n        ),\n\n      work:\n        getHeaderHref(\n          'WORK'\n        ),\n\n      join:\n        getHeaderHref(\n          'JOIN US'\n        )\n\n    };\n\n\n    menu\n      .querySelectorAll(\n        '[data-home-anchor]'\n      )\n      .forEach(\n        function (link) {\n\n          const key =\n            link.dataset.homeAnchor;\n\n\n          if (\n            pageLinks[key]\n          ) {\n\n            link.href =\n              pageLinks[key];\n\n          }\n\n        }\n      );\n\n\n    \/* =====================================================\n       STATE\n    ===================================================== *\/\n\n    function isOpen() {\n\n      return document.body\n        .classList\n        .contains(\n          'mobile-menu-open'\n        );\n\n    }\n\n\n    function openMenu() {\n\n      if (\n        window.innerWidth >\n        1180\n      ) {\n\n        return;\n\n      }\n\n\n      document.body.classList.add(\n        'mobile-menu-open'\n      );\n\n\n      header.classList.remove(\n        'header-scroll-hidden'\n      );\n\n\n      menu.setAttribute(\n        'aria-hidden',\n        'false'\n      );\n\n    }\n\n\n    function closeMenu() {\n\n      document.body.classList.remove(\n        'mobile-menu-open'\n      );\n\n\n      menu.setAttribute(\n        'aria-hidden',\n        'true'\n      );\n\n    }\n\n\n    function toggleMenu() {\n\n      if (isOpen()) {\n\n        closeMenu();\n\n      }\n\n      else {\n\n        openMenu();\n\n      }\n\n    }\n\n\n    \/* =====================================================\n       RESET\n    ===================================================== *\/\n\n    closeMenu();\n\n\n    \/* =====================================================\n       TRIGGER\n\n       Clean replacement prevents duplicate clicks\n       caused by Elementor re-rendering.\n    ===================================================== *\/\n\n    if (\n      trigger.__bplrMenuHandler\n    ) {\n\n      trigger.removeEventListener(\n        'click',\n        trigger.__bplrMenuHandler\n      );\n\n    }\n\n\n    trigger.__bplrMenuHandler =\n      function (event) {\n\n        if (\n          window.innerWidth >\n          1180\n        ) {\n\n          return;\n\n        }\n\n\n        event.preventDefault();\n\n        event.stopPropagation();\n\n\n        toggleMenu();\n\n      };\n\n\n    trigger.addEventListener(\n      'click',\n      trigger.__bplrMenuHandler\n    );\n\n\n    \/* =====================================================\n       LINKS CLOSE MENU\n    ===================================================== *\/\n\n    menu\n      .querySelectorAll(\n        '.bplr-menu-nav a'\n      )\n      .forEach(\n        function (link) {\n\n          link.addEventListener(\n            'click',\n            closeMenu\n          );\n\n        }\n      );\n\n\n    \/* =====================================================\n       ESC\n    ===================================================== *\/\n\n    document.addEventListener(\n      'keydown',\n      function (event) {\n\n        if (\n          event.key ===\n          'Escape' &&\n          isOpen()\n        ) {\n\n          closeMenu();\n\n        }\n\n      }\n    );\n\n\n    \/* =====================================================\n       DESKTOP RESIZE\n    ===================================================== *\/\n\n    window.addEventListener(\n      'resize',\n      function () {\n\n        if (\n          window.innerWidth >\n          1180 &&\n          isOpen()\n        ) {\n\n          closeMenu();\n\n        }\n\n      },\n      {\n        passive:\n          true\n      }\n    );\n\n  }\n\n\n  function start() {\n\n    \/*\n      Esperamos a que los otros dos widgets\n      terminen de recuperar el header\n      y activar el scroll.\n    *\/\n\n    setTimeout(\n      initBPLRMobileMenu,\n      950\n    );\n\n  }\n\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      start\n    );\n\n  }\n\n  else {\n\n    start();\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62064965 elementor-widget elementor-widget-html\" data-id=\"62064965\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     BPLR \u2014 GLOBAL PAGE TRANSITION V3.1\n     RED \u2192 BLUE \u2192 TRANSPARENT REVEAL\n\n     PERFORMANCE:\n     1. Immediate prefetch of primary header destinations\n     2. Prerender on user intent when supported\n     3. Prefetch fallback\n========================================================= -->\n\n\n<!-- =========================================================\n     EARLY INCOMING DETECTION\n========================================================= -->\n\n<script>\n\n(function () {\n\n  try {\n\n    const target =\n      sessionStorage.getItem(\n        'bplr-transition-target'\n      );\n\n    const timestamp =\n      Number(\n        sessionStorage.getItem(\n          'bplr-transition-time'\n        )\n      );\n\n\n    const isRecent =\n      timestamp &&\n      (\n        Date.now() - timestamp\n      ) < 10000;\n\n\n    if (\n      target &&\n      isRecent\n    ) {\n\n      const current =\n        new URL(\n          window.location.href\n        );\n\n\n      const expected =\n        new URL(\n          target,\n          window.location.origin\n        );\n\n\n      if (\n        current.pathname ===\n          expected.pathname &&\n        current.search ===\n          expected.search\n      ) {\n\n        document.documentElement\n          .classList\n          .add(\n            'bplr-transition-in'\n          );\n\n      }\n\n    }\n\n\n    sessionStorage.removeItem(\n      'bplr-transition-target'\n    );\n\n\n    sessionStorage.removeItem(\n      'bplr-transition-time'\n    );\n\n  }\n\n  catch (error) {}\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n     TRANSITION STAGE\n========================================================= -->\n\n<div\n  id=\"bplr-page-transition\"\n  aria-hidden=\"true\"\n>\n\n\n  <!-- =====================================================\n       OUTGOING\n  ====================================================== -->\n\n  <svg\n    id=\"bplr-transition-outgoing\"\n    class=\"bplr-transition-svg\"\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n    preserveAspectRatio=\"none\"\n  >\n\n    <circle\n      id=\"bplr-transition-red\"\n      fill=\"#F01F46\"\n    ><\/circle>\n\n\n    <circle\n      id=\"bplr-transition-blue\"\n      fill=\"#4278D3\"\n    ><\/circle>\n\n  <\/svg>\n\n\n\n  <!-- =====================================================\n       INCOMING\n  ====================================================== -->\n\n  <svg\n    id=\"bplr-transition-incoming\"\n    class=\"bplr-transition-svg\"\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n    preserveAspectRatio=\"none\"\n  >\n\n    <defs>\n\n      <mask\n        id=\"bplr-transition-mask\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n\n        <rect\n          id=\"bplr-mask-background\"\n          x=\"0\"\n          y=\"0\"\n          fill=\"white\"\n        ><\/rect>\n\n\n        <circle\n          id=\"bplr-transition-hole\"\n          fill=\"black\"\n        ><\/circle>\n\n      <\/mask>\n\n    <\/defs>\n\n\n    <rect\n      id=\"bplr-transition-blue-screen\"\n      x=\"0\"\n      y=\"0\"\n      fill=\"#4278D3\"\n      mask=\"url(#bplr-transition-mask)\"\n    ><\/rect>\n\n  <\/svg>\n\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n#bplr-page-transition {\n\n  position:\n    fixed;\n\n  inset:\n    0;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n  pointer-events:\n    none;\n\n  visibility:\n    hidden;\n\n  z-index:\n    2147483646;\n\n}\n\n\n\/* =========================================================\n   SVG\n========================================================= *\/\n\n#bplr-page-transition\n.bplr-transition-svg {\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  display:\n    none;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n}\n\n\n\/* =========================================================\n   OUTGOING\n========================================================= *\/\n\nhtml.bplr-transition-out\n#bplr-page-transition {\n\n  visibility:\n    visible;\n\n  pointer-events:\n    all;\n\n}\n\n\nhtml.bplr-transition-out\n#bplr-transition-outgoing {\n\n  display:\n    block;\n\n}\n\n\n\/* =========================================================\n   INCOMING\n========================================================= *\/\n\nhtml.bplr-transition-in\n#bplr-page-transition {\n\n  visibility:\n    visible;\n\n  pointer-events:\n    all;\n\n}\n\n\nhtml.bplr-transition-in\n#bplr-transition-incoming {\n\n  display:\n    block;\n\n}\n\n\n\/* =========================================================\n   TEMPORARY SCROLL LOCK\n========================================================= *\/\n\nhtml.bplr-transition-out,\nhtml.bplr-transition-in {\n\n  overflow:\n    hidden !important;\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media\n(prefers-reduced-motion: reduce) {\n\n  #bplr-page-transition {\n\n    display:\n      none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n\n  \/* =====================================================\n     SETTINGS\n  ===================================================== *\/\n\n  const RED =\n    '#F01F46';\n\n\n  const BLUE =\n    '#4278D3';\n\n\n  const RED_DURATION =\n    500;\n\n\n  const BLUE_DELAY =\n    145;\n\n\n  const BLUE_DURATION =\n    500;\n\n\n  const REVEAL_DELAY =\n    60;\n\n\n  const REVEAL_DURATION =\n    650;\n\n\n\n  \/* =====================================================\n     ELEMENTS\n  ===================================================== *\/\n\n  const stage =\n    document.getElementById(\n      'bplr-page-transition'\n    );\n\n\n  const outgoing =\n    document.getElementById(\n      'bplr-transition-outgoing'\n    );\n\n\n  const incoming =\n    document.getElementById(\n      'bplr-transition-incoming'\n    );\n\n\n  const redCircle =\n    document.getElementById(\n      'bplr-transition-red'\n    );\n\n\n  const blueCircle =\n    document.getElementById(\n      'bplr-transition-blue'\n    );\n\n\n  const holeCircle =\n    document.getElementById(\n      'bplr-transition-hole'\n    );\n\n\n  const maskBackground =\n    document.getElementById(\n      'bplr-mask-background'\n    );\n\n\n  const blueScreen =\n    document.getElementById(\n      'bplr-transition-blue-screen'\n    );\n\n\n  if (\n    !stage ||\n    !outgoing ||\n    !incoming ||\n    !redCircle ||\n    !blueCircle ||\n    !holeCircle ||\n    !maskBackground ||\n    !blueScreen\n  ) {\n\n    return;\n\n  }\n\n\n\n  \/* =====================================================\n     GEOMETRY\n  ===================================================== *\/\n\n  let viewportWidth =\n    0;\n\n\n  let viewportHeight =\n    0;\n\n\n  let centerX =\n    0;\n\n\n  let centerY =\n    0;\n\n\n  let maximumRadius =\n    0;\n\n\n\n  function setupGeometry() {\n\n    viewportWidth =\n      Math.max(\n        window.innerWidth,\n        1\n      );\n\n\n    viewportHeight =\n      Math.max(\n        window.innerHeight,\n        1\n      );\n\n\n    centerX =\n      viewportWidth \/ 2;\n\n\n    centerY =\n      viewportHeight \/ 2;\n\n\n    maximumRadius =\n      (\n        Math.hypot(\n          viewportWidth,\n          viewportHeight\n        ) \/ 2\n      ) + 12;\n\n\n\n    outgoing.setAttribute(\n      'viewBox',\n      '0 0 ' +\n      viewportWidth +\n      ' ' +\n      viewportHeight\n    );\n\n\n    incoming.setAttribute(\n      'viewBox',\n      '0 0 ' +\n      viewportWidth +\n      ' ' +\n      viewportHeight\n    );\n\n\n\n    redCircle.setAttribute(\n      'cx',\n      centerX\n    );\n\n\n    redCircle.setAttribute(\n      'cy',\n      centerY\n    );\n\n\n    redCircle.setAttribute(\n      'r',\n      2\n    );\n\n\n    redCircle.setAttribute(\n      'fill',\n      RED\n    );\n\n\n\n    blueCircle.setAttribute(\n      'cx',\n      centerX\n    );\n\n\n    blueCircle.setAttribute(\n      'cy',\n      centerY\n    );\n\n\n    blueCircle.setAttribute(\n      'r',\n      2\n    );\n\n\n    blueCircle.setAttribute(\n      'fill',\n      BLUE\n    );\n\n\n\n    holeCircle.setAttribute(\n      'cx',\n      centerX\n    );\n\n\n    holeCircle.setAttribute(\n      'cy',\n      centerY\n    );\n\n\n    holeCircle.setAttribute(\n      'r',\n      0\n    );\n\n\n\n    maskBackground.setAttribute(\n      'width',\n      viewportWidth\n    );\n\n\n    maskBackground.setAttribute(\n      'height',\n      viewportHeight\n    );\n\n\n\n    blueScreen.setAttribute(\n      'width',\n      viewportWidth\n    );\n\n\n    blueScreen.setAttribute(\n      'height',\n      viewportHeight\n    );\n\n\n    blueScreen.setAttribute(\n      'fill',\n      BLUE\n    );\n\n  }\n\n\n\n  setupGeometry();\n\n\n\n  \/* =====================================================\n     EASING\n  ===================================================== *\/\n\n  function easeInOutCubic(t) {\n\n    if (\n      t < 0.5\n    ) {\n\n      return (\n        4 *\n        t *\n        t *\n        t\n      );\n\n    }\n\n\n    return (\n      1 -\n      Math.pow(\n        -2 * t + 2,\n        3\n      ) \/ 2\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     RADIUS ANIMATION\n  ===================================================== *\/\n\n  function animateRadius(\n    element,\n    from,\n    to,\n    duration,\n    delay,\n    callback\n  ) {\n\n    const start =\n      performance.now() +\n      delay;\n\n\n    function frame(now) {\n\n      if (\n        now < start\n      ) {\n\n        requestAnimationFrame(\n          frame\n        );\n\n        return;\n\n      }\n\n\n      const rawProgress =\n        Math.min(\n          (\n            now - start\n          ) \/ duration,\n          1\n        );\n\n\n      const progress =\n        easeInOutCubic(\n          rawProgress\n        );\n\n\n      const radius =\n        from +\n        (\n          to - from\n        ) *\n        progress;\n\n\n      element.setAttribute(\n        'r',\n        radius\n      );\n\n\n      if (\n        rawProgress < 1\n      ) {\n\n        requestAnimationFrame(\n          frame\n        );\n\n      }\n\n      else if (\n        typeof callback ===\n        'function'\n      ) {\n\n        callback();\n\n      }\n\n    }\n\n\n    requestAnimationFrame(\n      frame\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     INCOMING REVEAL\n  ===================================================== *\/\n\n  function runIncomingTransition() {\n\n    setupGeometry();\n\n\n    holeCircle.setAttribute(\n      'r',\n      2\n    );\n\n\n    requestAnimationFrame(\n      function () {\n\n        requestAnimationFrame(\n          function () {\n\n            animateRadius(\n\n              holeCircle,\n\n              2,\n\n              maximumRadius,\n\n              REVEAL_DURATION,\n\n              REVEAL_DELAY,\n\n              function () {\n\n                document.documentElement\n                  .classList\n                  .remove(\n                    'bplr-transition-in'\n                  );\n\n\n                stage.setAttribute(\n                  'aria-hidden',\n                  'true'\n                );\n\n              }\n\n            );\n\n          }\n        );\n\n      }\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     RUN INCOMING\n  ===================================================== *\/\n\n  if (\n    document.documentElement\n      .classList\n      .contains(\n        'bplr-transition-in'\n      )\n  ) {\n\n    stage.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n\n    runIncomingTransition();\n\n  }\n\n\n\n  \/* =====================================================\n     INTERNAL URL VALIDATION\n  ===================================================== *\/\n\n  function getInternalURL(link) {\n\n    if (!link) {\n\n      return null;\n\n    }\n\n\n    const href =\n      link.getAttribute(\n        'href'\n      );\n\n\n    if (\n      !href ||\n      href === '#' ||\n      href.startsWith('#') ||\n      href.startsWith('mailto:') ||\n      href.startsWith('tel:') ||\n      href.startsWith('javascript:')\n    ) {\n\n      return null;\n\n    }\n\n\n    let url;\n\n\n    try {\n\n      url =\n        new URL(\n          link.href,\n          window.location.href\n        );\n\n    }\n\n    catch (error) {\n\n      return null;\n\n    }\n\n\n    if (\n      url.origin !==\n      window.location.origin\n    ) {\n\n      return null;\n\n    }\n\n\n    if (\n      url.pathname.includes(\n        '\/wp-admin\/'\n      ) ||\n      url.pathname.includes(\n        '\/wp-login.php'\n      )\n    ) {\n\n      return null;\n\n    }\n\n\n    if (\n      url.pathname ===\n        window.location.pathname &&\n      url.search ===\n        window.location.search\n    ) {\n\n      return null;\n\n    }\n\n\n    return url;\n\n  }\n\n\n\n  \/* =====================================================\n     PERFORMANCE STATE\n  ===================================================== *\/\n\n  const prefetched =\n    new Set();\n\n\n  const prerendered =\n    new Set();\n\n\n\n  \/* =====================================================\n     SPECULATION RULE SUPPORT\n  ===================================================== *\/\n\n  function supportsSpeculationRules() {\n\n    try {\n\n      return (\n        window.HTMLScriptElement &&\n        typeof HTMLScriptElement.supports ===\n          'function' &&\n        HTMLScriptElement.supports(\n          'speculationrules'\n        )\n      );\n\n    }\n\n    catch (error) {\n\n      return false;\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     ADD SPECULATION RULE\n  ===================================================== *\/\n\n  function addSpeculationRule(\n    type,\n    url,\n    eagerness\n  ) {\n\n    if (\n      !supportsSpeculationRules()\n    ) {\n\n      return false;\n\n    }\n\n\n    try {\n\n      const script =\n        document.createElement(\n          'script'\n        );\n\n\n      script.type =\n        'speculationrules';\n\n\n      const rule = {};\n\n\n      rule[type] = [\n\n        {\n\n          source:\n            'list',\n\n          urls:\n            [\n              url\n            ],\n\n          eagerness:\n            eagerness || 'moderate'\n\n        }\n\n      ];\n\n\n      script.textContent =\n        JSON.stringify(\n          rule\n        );\n\n\n      document.head.appendChild(\n        script\n      );\n\n\n      return true;\n\n    }\n\n    catch (error) {\n\n      return false;\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     PREFETCH\n  ===================================================== *\/\n\n  function prefetchURL(url) {\n\n    if (!url) {\n\n      return;\n\n    }\n\n\n    const key =\n      url.href;\n\n\n    if (\n      prefetched.has(\n        key\n      )\n    ) {\n\n      return;\n\n    }\n\n\n    prefetched.add(\n      key\n    );\n\n\n\n    \/* -----------------------------------------------\n       SPECULATION RULE PREFETCH\n    ------------------------------------------------ *\/\n\n    const speculationAdded =\n      addSpeculationRule(\n        'prefetch',\n        key,\n        'immediate'\n      );\n\n\n    if (\n      speculationAdded\n    ) {\n\n      return;\n\n    }\n\n\n\n    \/* -----------------------------------------------\n       STANDARD PREFETCH FALLBACK\n    ------------------------------------------------ *\/\n\n    try {\n\n      const prefetch =\n        document.createElement(\n          'link'\n        );\n\n\n      prefetch.rel =\n        'prefetch';\n\n\n      prefetch.href =\n        key;\n\n\n      prefetch.as =\n        'document';\n\n\n      document.head.appendChild(\n        prefetch\n      );\n\n    }\n\n    catch (error) {}\n\n  }\n\n\n\n  \/* =====================================================\n     PRERENDER\n  ===================================================== *\/\n\n  function prerenderURL(url) {\n\n    if (!url) {\n\n      return;\n\n    }\n\n\n    const key =\n      url.href;\n\n\n    if (\n      prerendered.has(\n        key\n      )\n    ) {\n\n      return;\n\n    }\n\n\n    prerendered.add(\n      key\n    );\n\n\n\n    \/* -----------------------------------------------\n       ALWAYS PREFETCH AS SAFETY NET\n    ------------------------------------------------ *\/\n\n    prefetchURL(\n      url\n    );\n\n\n\n    \/* -----------------------------------------------\n       PRERENDER IF SUPPORTED\n    ------------------------------------------------ *\/\n\n    addSpeculationRule(\n      'prerender',\n      key,\n      'immediate'\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     PRIMARY HEADER PREFETCH\n\n     HOME \/ ABOUT \/ WORK \/ JOIN\n     are prepared immediately.\n  ===================================================== *\/\n\n  function prefetchPrimaryNavigation() {\n\n    const selectors = [\n\n      '.bplr-global-header a[href]',\n\n      '#bplr-case-mobile-menu a[href]'\n\n    ];\n\n\n    const links =\n      Array.from(\n        document.querySelectorAll(\n          selectors.join(',')\n        )\n      );\n\n\n    let count =\n      0;\n\n\n    links.forEach(\n      function (link) {\n\n        if (\n          count >= 8\n        ) {\n\n          return;\n\n        }\n\n\n        const url =\n          getInternalURL(\n            link\n          );\n\n\n        if (!url) {\n\n          return;\n\n        }\n\n\n        prefetchURL(\n          url\n        );\n\n\n        count++;\n\n      }\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     RUN PRIMARY PREFETCH ASAP\n\n     Multiple passes because Elementor can finish\n     rendering header links slightly later.\n  ===================================================== *\/\n\n  prefetchPrimaryNavigation();\n\n\n  requestAnimationFrame(\n    function () {\n\n      prefetchPrimaryNavigation();\n\n    }\n  );\n\n\n  setTimeout(\n    prefetchPrimaryNavigation,\n    250\n  );\n\n\n  setTimeout(\n    prefetchPrimaryNavigation,\n    800\n  );\n\n\n  setTimeout(\n    prefetchPrimaryNavigation,\n    1600\n  );\n\n\n\n  \/* =====================================================\n     USER INTENT \u2192 PRERENDER\n  ===================================================== *\/\n\n  function prerenderFromEvent(\n    event\n  ) {\n\n    const link =\n      event.target.closest(\n        'a[href]'\n      );\n\n\n    const url =\n      getInternalURL(\n        link\n      );\n\n\n    if (\n      url\n    ) {\n\n      prerenderURL(\n        url\n      );\n\n    }\n\n  }\n\n\n\n  document.addEventListener(\n\n    'mouseover',\n\n    prerenderFromEvent,\n\n    true\n\n  );\n\n\n  document.addEventListener(\n\n    'focusin',\n\n    prerenderFromEvent,\n\n    true\n\n  );\n\n\n  document.addEventListener(\n\n    'pointerdown',\n\n    prerenderFromEvent,\n\n    true\n\n  );\n\n\n  document.addEventListener(\n\n    'touchstart',\n\n    prerenderFromEvent,\n\n    {\n      capture:\n        true,\n\n      passive:\n        true\n    }\n\n  );\n\n\n\n  \/* =====================================================\n     SECONDARY LINKS\n     PREFETCH WHEN BROWSER HAS FREE TIME\n  ===================================================== *\/\n\n  function prefetchSecondaryLinks() {\n\n    const links =\n      Array.from(\n        document.querySelectorAll(\n          'a[href]'\n        )\n      );\n\n\n    let count =\n      0;\n\n\n    links.forEach(\n      function (link) {\n\n        if (\n          count >= 8\n        ) {\n\n          return;\n\n        }\n\n\n        const url =\n          getInternalURL(\n            link\n          );\n\n\n        if (!url) {\n\n          return;\n\n        }\n\n\n        if (\n          prefetched.has(\n            url.href\n          )\n        ) {\n\n          return;\n\n        }\n\n\n        prefetchURL(\n          url\n        );\n\n\n        count++;\n\n      }\n    );\n\n  }\n\n\n\n  if (\n    'requestIdleCallback'\n    in window\n  ) {\n\n    requestIdleCallback(\n\n      prefetchSecondaryLinks,\n\n      {\n        timeout:\n          2500\n      }\n\n    );\n\n  }\n\n  else {\n\n    setTimeout(\n      prefetchSecondaryLinks,\n      1800\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     SHOULD TRANSITION?\n  ===================================================== *\/\n\n  function shouldTransition(\n    link,\n    event\n  ) {\n\n    if (!link) {\n\n      return false;\n\n    }\n\n\n    if (\n      event.button !== 0\n    ) {\n\n      return false;\n\n    }\n\n\n    if (\n      event.metaKey ||\n      event.ctrlKey ||\n      event.shiftKey ||\n      event.altKey\n    ) {\n\n      return false;\n\n    }\n\n\n    if (\n      link.hasAttribute(\n        'download'\n      )\n    ) {\n\n      return false;\n\n    }\n\n\n    if (\n      link.getAttribute(\n        'target'\n      ) === '_blank'\n    ) {\n\n      return false;\n\n    }\n\n\n    if (\n      link.hasAttribute(\n        'data-no-transition'\n      )\n    ) {\n\n      return false;\n\n    }\n\n\n    if (\n      link.closest(\n        '#wpadminbar'\n      )\n    ) {\n\n      return false;\n\n    }\n\n\n    return !!getInternalURL(\n      link\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     CLICK\n  ===================================================== *\/\n\n  document.addEventListener(\n\n    'click',\n\n    function (event) {\n\n\n      const link =\n        event.target.closest(\n          'a[href]'\n        );\n\n\n      if (\n        !shouldTransition(\n          link,\n          event\n        )\n      ) {\n\n        return;\n\n      }\n\n\n\n      if (\n        document.documentElement\n          .classList\n          .contains(\n            'bplr-transition-out'\n          )\n      ) {\n\n        event.preventDefault();\n\n        return;\n\n      }\n\n\n\n      event.preventDefault();\n\n\n\n      const destination =\n        link.href;\n\n\n      const destinationURL =\n        getInternalURL(\n          link\n        );\n\n\n\n      \/* =================================================\n         LAST CHANCE PRERENDER\n      ================================================= *\/\n\n      if (\n        destinationURL\n      ) {\n\n        prerenderURL(\n          destinationURL\n        );\n\n      }\n\n\n\n      \/* =================================================\n         PREPARE TRANSITION\n      ================================================= *\/\n\n      setupGeometry();\n\n\n      redCircle.setAttribute(\n        'r',\n        2\n      );\n\n\n      blueCircle.setAttribute(\n        'r',\n        2\n      );\n\n\n      stage.setAttribute(\n        'aria-hidden',\n        'false'\n      );\n\n\n      document.documentElement\n        .classList\n        .add(\n          'bplr-transition-out'\n        );\n\n\n\n      \/* =================================================\n         SAVE DESTINATION\n      ================================================= *\/\n\n      try {\n\n        sessionStorage.setItem(\n          'bplr-transition-target',\n          destination\n        );\n\n\n        sessionStorage.setItem(\n          'bplr-transition-time',\n          String(\n            Date.now()\n          )\n        );\n\n      }\n\n      catch (error) {}\n\n\n\n      \/* =================================================\n         RED\n      ================================================= *\/\n\n      animateRadius(\n\n        redCircle,\n\n        2,\n\n        maximumRadius,\n\n        RED_DURATION,\n\n        0\n\n      );\n\n\n\n      \/* =================================================\n         BLUE\n      ================================================= *\/\n\n      animateRadius(\n\n        blueCircle,\n\n        2,\n\n        maximumRadius,\n\n        BLUE_DURATION,\n\n        BLUE_DELAY,\n\n        function () {\n\n\n          window.location.href =\n            destination;\n\n        }\n\n      );\n\n    },\n\n    true\n  );\n\n\n\n  \/* =====================================================\n     BACK \/ FORWARD CACHE\n  ===================================================== *\/\n\n  window.addEventListener(\n\n    'pageshow',\n\n    function (event) {\n\n      if (\n        event.persisted\n      ) {\n\n        document.documentElement\n          .classList\n          .remove(\n            'bplr-transition-out',\n            'bplr-transition-in'\n          );\n\n\n        stage.setAttribute(\n          'aria-hidden',\n          'true'\n        );\n\n      }\n\n    }\n\n  );\n\n\n\n  \/* =====================================================\n     RESIZE\n  ===================================================== *\/\n\n  let resizeTimer;\n\n\n  window.addEventListener(\n\n    'resize',\n\n    function () {\n\n      clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        setTimeout(\n\n          function () {\n\n            if (\n              !document.documentElement\n                .classList\n                .contains(\n                  'bplr-transition-out'\n                ) &&\n              !document.documentElement\n                .classList\n                .contains(\n                  'bplr-transition-in'\n                )\n            ) {\n\n              setupGeometry();\n\n            }\n\n          },\n\n          120\n\n        );\n\n    },\n\n    {\n      passive:\n        true\n    }\n\n  );\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5529479d e-con-full case-hero-content e-flex e-con e-child\" data-id=\"5529479d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f9d6d05 elementor-widget elementor-widget-html\" data-id=\"3f9d6d05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"case-hero-sequence\">\n\n  <!-- =====================================================\n       HERO\n  ====================================================== -->\n\n  <section class=\"case-hero-stage\">\n\n    <div class=\"case-hero-brand\">\n      TIM HORTONS\n    <\/div>\n\n\n    <!-- DESKTOP + TABLET -->\n    <div class=\"case-hero-title-wrap case-hero-title-desktop-wrap\">\n\n      <h1 class=\"case-hero-title\">\n        <span>CAMBIA EL<\/span>\n        <span>MOOD<\/span>\n      <\/h1>\n\n    <\/div>\n\n\n    <!-- MOBILE -->\n    <div class=\"case-hero-title-mobile\">\n\n      <span class=\"case-mobile-line\">CAMBIA<\/span>\n      <span class=\"case-mobile-line\">EL<\/span>\n      <span class=\"case-mobile-line\">MOOD<\/span>\n\n    <\/div>\n\n\n    <!-- DESKTOP + TABLET CIRCLE -->\n    <div class=\"case-hero-circle\">\n\n      <video\n        class=\"case-hero-circle-media\"\n        autoplay\n        muted\n        loop\n        playsinline\n        preload=\"auto\"\n      >\n        <source\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1.mp4\"\n          type=\"video\/mp4\"\n        >\n      <\/video>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =====================================================\n       REAL FINAL VIDEO\n  ====================================================== -->\n\n  <div class=\"case-hero-final-media\">\n\n    <video\n      class=\"case-hero-final-video\"\n      autoplay\n      muted\n      loop\n      playsinline\n      preload=\"auto\"\n    >\n      <source\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1.mp4\"\n        type=\"video\/mp4\"\n      >\n    <\/video>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,800;1,900&display=swap');\n\n\n\/* =========================================================\n   GLOBAL SEQUENCE\n========================================================= *\/\n\n.case-hero-sequence {\n\n  position: relative;\n\n  width: 100vw;\n  max-width: 100vw;\n\n  height: 200vh;\n\n  margin:\n    0 0 0 calc(50% - 50vw);\n\n  padding: 0;\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n\n  background: #F5F5F5;\n\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.case-hero-stage {\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  width: 100vw;\n  max-width: 100vw;\n\n  height: 100vh;\n  min-height: 100vh;\n\n  margin: 0;\n  padding: 0;\n\n  box-sizing: border-box;\n\n  overflow: hidden;\n\n  background: #F5F5F5;\n\n  color: #0B0B0D;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n\n}\n\n\n\/* =========================================================\n   BRAND\n========================================================= *\/\n\n.case-hero-brand {\n\n  position: absolute;\n\n  left:\n    clamp(28px, 3vw, 56px);\n\n  top:\n    clamp(110px, 11vh, 150px);\n\n  min-height: 36px;\n\n  padding:\n    0 14px;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  box-sizing:\n    border-box;\n\n  border:\n    1px solid rgba(11,11,13,.28);\n\n  background:\n    transparent;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(14px,1vw,18px);\n\n  font-weight:\n    800 !important;\n\n  line-height: 1;\n\n  text-transform:\n    uppercase;\n\n  white-space:\n    nowrap;\n\n  color:\n    #0B0B0D;\n\n  z-index:\n    5;\n\n}\n\n\n\/* =========================================================\n   DESKTOP + TABLET TITLE\n========================================================= *\/\n\n.case-hero-title-wrap {\n\n  position: absolute;\n\n  left:\n    clamp(28px,3vw,56px);\n\n  bottom:\n    clamp(42px,5vh,72px);\n\n  width:\n    min(70vw,980px);\n\n  margin: 0;\n  padding: 0;\n\n  z-index: 4;\n\n}\n\n\n.case-hero-title {\n\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n\n  flex-direction:\n    column;\n\n  gap: 0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(120px,13vw,230px);\n\n  font-weight:\n    800 !important;\n\n  line-height:\n    .72;\n\n  letter-spacing:\n    -.025em;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #0B0B0D;\n\n}\n\n\n.case-hero-title span {\n\n  display: block;\n\n  white-space: nowrap;\n\n}\n\n\n\/* =========================================================\n   MOBILE TITLE\n========================================================= *\/\n\n.case-hero-title-mobile {\n\n  display: none;\n\n}\n\n\n\/* =========================================================\n   CIRCLE\n========================================================= *\/\n\n.case-hero-circle {\n\n  position: absolute;\n\n  right:\n    clamp(44px,5vw,90px);\n\n  bottom:\n    clamp(52px,7vh,110px);\n\n  width:\n    clamp(150px,15vw,260px);\n\n  aspect-ratio:\n    1 \/ 1;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  border-radius: 50%;\n\n  background: #111;\n\n  z-index: 20;\n\n}\n\n\n.case-hero-circle-media {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position:\n    center center;\n\n  pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   REAL FINAL VIDEO\n========================================================= *\/\n\n.case-hero-final-media {\n\n  position: absolute;\n\n  left: 0;\n  bottom: 0;\n\n  width: 100vw;\n  max-width: 100vw;\n\n  height: 100vh;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  background: #111;\n\n}\n\n\n.case-hero-final-video {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  object-fit: cover;\n\n  object-position:\n    center center;\n\n  pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   DESKTOP \/ TABLET FIXED OVERLAY\n========================================================= *\/\n\n.case-hero-fixed-overlay {\n\n  position:\n    fixed !important;\n\n  inset:\n    0 !important;\n\n  width:\n    100vw !important;\n\n  height:\n    100vh !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  overflow:\n    hidden !important;\n\n  pointer-events:\n    none !important;\n\n  background:\n    #F5F5F5;\n\n  z-index:\n    90000;\n\n}\n\n\n.case-hero-fixed-overlay\n.case-hero-stage {\n\n  position:\n    absolute !important;\n\n  inset:\n    0 !important;\n\n  width:\n    100vw !important;\n\n  height:\n    100vh !important;\n\n  min-height:\n    100vh !important;\n\n}\n\n\n\/* =========================================================\n   NEW MOBILE FIXED HERO\n========================================================= *\/\n\n.case-mobile-hero-overlay {\n\n  position:\n    fixed !important;\n\n  inset:\n    0 !important;\n\n  width:\n    100vw !important;\n\n  height:\n    100svh !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  overflow:\n    hidden !important;\n\n  pointer-events:\n    none !important;\n\n  background:\n    #F5F5F5;\n\n  z-index:\n    80000;\n\n}\n\n\n.case-mobile-hero-overlay\n.case-hero-stage {\n\n  position:\n    absolute !important;\n\n  inset:\n    0 !important;\n\n  width:\n    100vw !important;\n\n  height:\n    100svh !important;\n\n  min-height:\n    100svh !important;\n\n}\n\n\n\/* =========================================================\n   NEW MOBILE VIDEO OVERLAY\n\n   ESTA ES LA CAPA QUE SUBE\n   POR DELANTE DEL HERO.\n========================================================= *\/\n\n.case-mobile-video-overlay {\n\n  position:\n    fixed !important;\n\n  inset:\n    0 !important;\n\n  width:\n    100vw !important;\n\n  height:\n    100svh !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  overflow:\n    hidden !important;\n\n  pointer-events:\n    none !important;\n\n  background:\n    #111;\n\n  transform:\n    translate3d(0,100%,0);\n\n  will-change:\n    transform;\n\n  z-index:\n    80001;\n\n}\n\n\n.case-mobile-video-overlay video {\n\n  display:\n    block !important;\n\n  width:\n    100% !important;\n\n  height:\n    100% !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  object-fit:\n    cover !important;\n\n  object-position:\n    center center !important;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media\n(min-width:768px)\nand\n(max-width:1180px) {\n\n  .case-hero-brand {\n\n    left: 32px;\n    top: 120px;\n\n    min-height: 38px;\n\n    font-size: 18px;\n\n  }\n\n\n  .case-hero-title-wrap {\n\n    left: 32px;\n    bottom: 54px;\n\n    width: 75vw;\n\n  }\n\n\n  .case-hero-title {\n\n    font-size:\n      clamp(104px,14.5vw,165px);\n\n    line-height:\n      .72;\n\n  }\n\n\n  .case-hero-circle {\n\n    right: 38px;\n    bottom: 64px;\n\n    width:\n      clamp(130px,17vw,190px);\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media\n(max-width:767px) {\n\n\n  \/* TWO VIEWPORT SEQUENCE *\/\n\n  .case-hero-sequence {\n\n    position:\n      relative !important;\n\n    width:\n      100vw !important;\n\n    max-width:\n      100vw !important;\n\n    height:\n      200svh !important;\n\n    margin:\n      0 0 0 calc(50% - 50vw) !important;\n\n    padding:\n      0 !important;\n\n    overflow:\n      hidden !important;\n\n    background:\n      #F5F5F5;\n\n  }\n\n\n  \/* ORIGINAL HERO PLACEHOLDER *\/\n\n  .case-hero-stage {\n\n    position:\n      absolute !important;\n\n    top:\n      0 !important;\n\n    left:\n      0 !important;\n\n    width:\n      100vw !important;\n\n    height:\n      100svh !important;\n\n    min-height:\n      100svh !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n    overflow:\n      hidden !important;\n\n  }\n\n\n  \/* BRAND *\/\n\n  .case-hero-brand {\n\n    left:\n      18px;\n\n    top:\n      72px;\n\n    min-height:\n      32px;\n\n    padding:\n      0 11px;\n\n    font-size:\n      14px;\n\n  }\n\n\n  \/* DESKTOP TITLE OFF *\/\n\n  .case-hero-title-desktop-wrap {\n\n    display:\n      none !important;\n\n  }\n\n\n  \/* MOBILE TITLE *\/\n\n  .case-hero-title-mobile {\n\n    position:\n      absolute;\n\n    left:\n      18px;\n\n    bottom:\n      48px;\n\n    width:\n      calc(100% - 36px);\n\n    margin:\n      0;\n\n    padding:\n      0;\n\n    display:\n      flex !important;\n\n    flex-direction:\n      column;\n\n    align-items:\n      flex-start;\n\n    gap:\n      0;\n\n    font-family:\n      \"Barlow Condensed\",\n      Arial,\n      sans-serif !important;\n\n    font-size:\n      clamp(84px,24vw,118px);\n\n    font-weight:\n      800 !important;\n\n    line-height:\n      1;\n\n    letter-spacing:\n      -.025em;\n\n    text-transform:\n      uppercase;\n\n    color:\n      #0B0B0D;\n\n    z-index:\n      5;\n\n  }\n\n\n  .case-mobile-line {\n\n    display:\n      block;\n\n    width:\n      max-content;\n\n    height:\n      .75em;\n\n    margin:\n      0;\n\n    padding:\n      0;\n\n    line-height:\n      1;\n\n    white-space:\n      nowrap;\n\n  }\n\n\n  \/* NO CIRCLE *\/\n\n  .case-hero-circle {\n\n    display:\n      none !important;\n\n  }\n\n\n  \/* REAL VIDEO SITS IN SECOND VIEWPORT *\/\n\n  .case-hero-final-media {\n\n    position:\n      absolute !important;\n\n    top:\n      100svh !important;\n\n    left:\n      0 !important;\n\n    bottom:\n      auto !important;\n\n    width:\n      100vw !important;\n\n    height:\n      100svh !important;\n\n    min-height:\n      100svh !important;\n\n    margin:\n      0 !important;\n\n    padding:\n      0 !important;\n\n    overflow:\n      hidden !important;\n\n  }\n\n\n  .case-hero-final-video {\n\n    width:\n      100% !important;\n\n    height:\n      100% !important;\n\n    object-fit:\n      cover !important;\n\n    object-position:\n      center center !important;\n\n  }\n\n\n  .case-hero-fixed-overlay {\n\n    display:\n      none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const sequence =\n    document.querySelector(\n      '.case-hero-sequence'\n    );\n\n  const originalStage =\n    document.querySelector(\n      '.case-hero-stage'\n    );\n\n  const originalCircle =\n    originalStage\n      ? originalStage.querySelector(\n          '.case-hero-circle'\n        )\n      : null;\n\n  const originalVideo =\n    originalCircle\n      ? originalCircle.querySelector(\n          'video'\n        )\n      : null;\n\n  const finalVideo =\n    document.querySelector(\n      '.case-hero-final-video'\n    );\n\n\n  if (\n    !sequence ||\n    !originalStage\n  ) {\n\n    return;\n\n  }\n\n\n  \/* =========================================================\n     VIDEO\n  ========================================================= *\/\n\n  function prepareVideo(video) {\n\n    if (!video) return;\n\n\n    video.muted =\n      true;\n\n    video.defaultMuted =\n      true;\n\n    video.loop =\n      true;\n\n    video.autoplay =\n      true;\n\n    video.playsInline =\n      true;\n\n\n    video.setAttribute(\n      'muted',\n      ''\n    );\n\n\n    video.setAttribute(\n      'playsinline',\n      ''\n    );\n\n\n    video.play().catch(\n      function () {}\n    );\n\n  }\n\n\n  prepareVideo(\n    originalVideo\n  );\n\n  prepareVideo(\n    finalVideo\n  );\n\n\n  \/* =========================================================\n     ELEMENTOR FULL BLEED\n  ========================================================= *\/\n\n  function normalizeHeroWrappers() {\n\n    const widget =\n      sequence.closest(\n        '.elementor-widget-html'\n      );\n\n\n    if (!widget) return;\n\n\n    widget.style.width =\n      '100%';\n\n    widget.style.maxWidth =\n      '100%';\n\n    widget.style.margin =\n      '0';\n\n    widget.style.padding =\n      '0';\n\n\n    let parent =\n      widget.parentElement;\n\n\n    let level =\n      0;\n\n\n    while (\n      parent &&\n      level < 3\n    ) {\n\n      parent.style.paddingLeft =\n        '0';\n\n      parent.style.paddingRight =\n        '0';\n\n      parent.style.marginLeft =\n        '0';\n\n      parent.style.marginRight =\n        '0';\n\n      parent.style.maxWidth =\n        'none';\n\n      parent.style.width =\n        '100%';\n\n      parent.style.gap =\n        '0';\n\n\n      level++;\n\n\n      parent =\n        parent.parentElement;\n\n    }\n\n  }\n\n\n  normalizeHeroWrappers();\n\n\n  \/* =========================================================\n     HELPERS\n  ========================================================= *\/\n\n  function isMobile() {\n\n    return (\n      window.innerWidth <= 767\n    );\n\n  }\n\n\n  function clamp(\n    value,\n    min,\n    max\n  ) {\n\n    return Math.min(\n      Math.max(\n        value,\n        min\n      ),\n      max\n    );\n\n  }\n\n\n  function syncVideo(\n    from,\n    to\n  ) {\n\n    if (!from || !to) return;\n\n\n    if (\n      Number.isFinite(\n        from.currentTime\n      )\n    ) {\n\n      try {\n\n        to.currentTime =\n          from.currentTime;\n\n      }\n\n      catch(error) {}\n\n    }\n\n\n    prepareVideo(\n      to\n    );\n\n  }\n\n\n  \/* =========================================================\n     REMOVE OLD OVERLAYS\n  ========================================================= *\/\n\n  document\n    .querySelectorAll(\n      '.case-hero-fixed-overlay,' +\n      '.case-mobile-hero-overlay,' +\n      '.case-mobile-video-overlay'\n    )\n    .forEach(\n      function(el) {\n\n        el.remove();\n\n      }\n    );\n\n\n  \/* =========================================================\n     MOBILE EXPERIENCE\n  ========================================================= *\/\n\n  if (isMobile()) {\n\n\n    \/* -------------------------------------------------------\n       FIXED HERO CLONE\n    ------------------------------------------------------- *\/\n\n    const heroOverlay =\n      document.createElement(\n        'div'\n      );\n\n\n    heroOverlay.className =\n      'case-mobile-hero-overlay';\n\n\n    const mobileHero =\n      originalStage.cloneNode(\n        true\n      );\n\n\n    \/*\n      Circle must never exist visually\n      in the mobile clone.\n    *\/\n\n    const mobileCircle =\n      mobileHero.querySelector(\n        '.case-hero-circle'\n      );\n\n\n    if (mobileCircle) {\n\n      mobileCircle.remove();\n\n    }\n\n\n    heroOverlay.appendChild(\n      mobileHero\n    );\n\n\n    document.body.appendChild(\n      heroOverlay\n    );\n\n\n    \/* -------------------------------------------------------\n       VIDEO OVERLAY\n    ------------------------------------------------------- *\/\n\n    const videoOverlay =\n      document.createElement(\n        'div'\n      );\n\n\n    videoOverlay.className =\n      'case-mobile-video-overlay';\n\n\n    const mobileVideo =\n      finalVideo.cloneNode(\n        true\n      );\n\n\n    videoOverlay.appendChild(\n      mobileVideo\n    );\n\n\n    document.body.appendChild(\n      videoOverlay\n    );\n\n\n    prepareVideo(\n      mobileVideo\n    );\n\n\n    heroOverlay.style.display =\n      'none';\n\n\n    videoOverlay.style.display =\n      'none';\n\n\n    let ticking =\n      false;\n\n\n    \/* -------------------------------------------------------\n       MOBILE UPDATE\n    ------------------------------------------------------- *\/\n\n    function updateMobile() {\n\n      const rect =\n        sequence.getBoundingClientRect();\n\n\n      const viewportH =\n        window.innerHeight;\n\n\n      const scrollInside =\n        -rect.top;\n\n\n      const end =\n        sequence.offsetHeight -\n        viewportH;\n\n\n      \/* BEFORE HERO *\/\n\n      if (\n        scrollInside <= 0\n      ) {\n\n        heroOverlay.style.display =\n          'none';\n\n\n        videoOverlay.style.display =\n          'none';\n\n\n        originalStage.style.visibility =\n          'visible';\n\n\n        ticking =\n          false;\n\n\n        return;\n\n      }\n\n\n      \/* AFTER TRANSITION *\/\n\n      if (\n        scrollInside >= end\n      ) {\n\n        if (\n          videoOverlay.style.display !==\n          'none'\n        ) {\n\n          syncVideo(\n            mobileVideo,\n            finalVideo\n          );\n\n        }\n\n\n        heroOverlay.style.display =\n          'none';\n\n\n        videoOverlay.style.display =\n          'none';\n\n\n        originalStage.style.visibility =\n          'visible';\n\n\n        ticking =\n          false;\n\n\n        return;\n\n      }\n\n\n      \/* DURING TRANSITION *\/\n\n      originalStage.style.visibility =\n        'hidden';\n\n\n      heroOverlay.style.display =\n        'block';\n\n\n      videoOverlay.style.display =\n        'block';\n\n\n      const progress =\n        clamp(\n          scrollInside \/\n          viewportH,\n          0,\n          1\n        );\n\n\n      \/*\n        0 = video completely below screen\n        1 = video completely covers hero\n      *\/\n\n      const translate =\n        (1 - progress) * 100;\n\n\n      videoOverlay.style.transform =\n        'translate3d(0,' +\n        translate +\n        '%,0)';\n\n\n      ticking =\n        false;\n\n    }\n\n\n    function requestMobileUpdate() {\n\n      if (ticking) return;\n\n\n      ticking =\n        true;\n\n\n      window.requestAnimationFrame(\n        updateMobile\n      );\n\n    }\n\n\n    window.addEventListener(\n      'scroll',\n      requestMobileUpdate,\n      {\n        passive:\n          true\n      }\n    );\n\n\n    requestAnimationFrame(\n      updateMobile\n    );\n\n\n    return;\n\n  }\n\n\n  \/* =========================================================\n     DESKTOP + TABLET\n     EXISTING APPROVED CIRCLE EXPANSION\n  ========================================================= *\/\n\n  if (!originalCircle) {\n\n    return;\n\n  }\n\n\n  const overlay =\n    document.createElement(\n      'div'\n    );\n\n\n  overlay.className =\n    'case-hero-fixed-overlay';\n\n\n  const fixedStage =\n    originalStage.cloneNode(\n      true\n    );\n\n\n  overlay.appendChild(\n    fixedStage\n  );\n\n\n  document.body.appendChild(\n    overlay\n  );\n\n\n  const fixedCircle =\n    fixedStage.querySelector(\n      '.case-hero-circle'\n    );\n\n\n  const fixedVideo =\n    fixedCircle\n      ? fixedCircle.querySelector(\n          'video'\n        )\n      : null;\n\n\n  prepareVideo(\n    fixedVideo\n  );\n\n\n  overlay.style.display =\n    'none';\n\n\n  let viewportW =\n    window.innerWidth;\n\n\n  let viewportH =\n    window.innerHeight;\n\n\n  let startCircle = {\n\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0\n\n  };\n\n\n  let ticking =\n    false;\n\n\n  let pinned =\n    false;\n\n\n  function lerp(\n    start,\n    end,\n    amount\n  ) {\n\n    return (\n      start +\n      (\n        end -\n        start\n      ) *\n      amount\n    );\n\n  }\n\n\n  function measure() {\n\n    viewportW =\n      window.innerWidth;\n\n\n    viewportH =\n      window.innerHeight;\n\n\n    startCircle = {\n\n      left:\n        originalCircle.offsetLeft,\n\n      top:\n        originalCircle.offsetTop,\n\n      width:\n        originalCircle.offsetWidth,\n\n      height:\n        originalCircle.offsetHeight\n\n    };\n\n\n    requestUpdate();\n\n  }\n\n\n  function showOriginal() {\n\n    overlay.style.display =\n      'none';\n\n\n    originalStage.style.visibility =\n      'visible';\n\n\n    pinned =\n      false;\n\n  }\n\n\n  function showFixed() {\n\n    if (!pinned) {\n\n      syncVideo(\n        originalVideo,\n        fixedVideo\n      );\n\n\n      pinned =\n        true;\n\n    }\n\n\n    overlay.style.display =\n      'block';\n\n\n    originalStage.style.visibility =\n      'hidden';\n\n  }\n\n\n  function animateCircle(\n    progress\n  ) {\n\n    const left =\n      lerp(\n        startCircle.left,\n        0,\n        progress\n      );\n\n\n    const top =\n      lerp(\n        startCircle.top,\n        0,\n        progress\n      );\n\n\n    const width =\n      lerp(\n        startCircle.width,\n        viewportW,\n        progress\n      );\n\n\n    const height =\n      lerp(\n        startCircle.height,\n        viewportH,\n        progress\n      );\n\n\n    const radius =\n      lerp(\n        50,\n        0,\n        progress\n      );\n\n\n    fixedCircle.style.left =\n      left + 'px';\n\n\n    fixedCircle.style.top =\n      top + 'px';\n\n\n    fixedCircle.style.right =\n      'auto';\n\n\n    fixedCircle.style.bottom =\n      'auto';\n\n\n    fixedCircle.style.width =\n      width + 'px';\n\n\n    fixedCircle.style.height =\n      height + 'px';\n\n\n    fixedCircle.style.aspectRatio =\n      'auto';\n\n\n    fixedCircle.style.borderRadius =\n      radius + '%';\n\n  }\n\n\n  function update() {\n\n    const rect =\n      sequence.getBoundingClientRect();\n\n\n    const scrollInside =\n      -rect.top;\n\n\n    const sequenceEnd =\n      sequence.offsetHeight -\n      viewportH;\n\n\n    if (\n      scrollInside <= 0\n    ) {\n\n      showOriginal();\n\n\n      animateCircle(\n        0\n      );\n\n\n      ticking =\n        false;\n\n\n      return;\n\n    }\n\n\n    if (\n      scrollInside >=\n      sequenceEnd\n    ) {\n\n      if (\n        overlay.style.display !==\n        'none'\n      ) {\n\n        syncVideo(\n          fixedVideo,\n          finalVideo\n        );\n\n      }\n\n\n      overlay.style.display =\n        'none';\n\n\n      originalStage.style.visibility =\n        'visible';\n\n\n      pinned =\n        false;\n\n\n      ticking =\n        false;\n\n\n      return;\n\n    }\n\n\n    showFixed();\n\n\n    const progress =\n      clamp(\n        scrollInside \/\n        viewportH,\n        0,\n        1\n      );\n\n\n    animateCircle(\n      progress\n    );\n\n\n    ticking =\n      false;\n\n  }\n\n\n  function requestUpdate() {\n\n    if (ticking) return;\n\n\n    ticking =\n      true;\n\n\n    window.requestAnimationFrame(\n      update\n    );\n\n  }\n\n\n  window.addEventListener(\n    'scroll',\n    requestUpdate,\n    {\n      passive:\n        true\n    }\n  );\n\n\n  let resizeTimer;\n\n\n  window.addEventListener(\n    'resize',\n    function () {\n\n      clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        setTimeout(\n          measure,\n          120\n        );\n\n    }\n  );\n\n\n  requestAnimationFrame(\n    measure\n  );\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78e45718 e-con-full case-description-section e-flex e-con e-child\" data-id=\"78e45718\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70ae3ae2 elementor-widget elementor-widget-html\" data-id=\"70ae3ae2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"case-description-stage\">\n\n  <div class=\"case-description-inner\">\n\n    <h2 class=\"case-description-title\">\n      <span>A BURST OF COLOR,<\/span>\n      <span>FLAVOR AND REFRESHMENT<\/span>\n      <span>MADE TO SHIFT<\/span>\n      <span>THE MOOD.<\/span>\n    <\/h2>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   CASE DESCRIPTION\n========================================================= *\/\n\n.case-description-stage {\n\n  position: relative;\n\n  width: 100%;\n  min-height: 100vh;\n\n  margin: 0;\n  padding: 0;\n\n  box-sizing: border-box;\n\n  display: flex;\n\n  align-items: center;\n\n  overflow: hidden;\n\n  background: #0B0B0D;\n\n  color: #F5F5F5;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.case-description-inner {\n\n  width: 100%;\n\n  margin: 0;\n\n  padding:\n    clamp(70px, 7vw, 130px)\n    clamp(30px, 4vw, 72px);\n\n  box-sizing: border-box;\n\n}\n\n\n\/* =========================================================\n   LARGE STATEMENT\n========================================================= *\/\n\n.case-description-title {\n\n  width:\n    min(95%, 1700px);\n\n  margin: 0;\n\n  padding: 0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(\n      92px,\n      9.4vw,\n      180px\n    );\n\n  font-weight:\n    800 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    .80;\n\n  letter-spacing:\n    -.028em;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #F5F5F5;\n\n}\n\n\n.case-description-title span {\n\n  display: block;\n\n  margin: 0;\n\n  padding: 0;\n\n  white-space: nowrap;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media\n(min-width: 768px)\nand\n(max-width: 1180px) {\n\n  .case-description-stage {\n\n    min-height:\n      100svh;\n\n  }\n\n\n  .case-description-inner {\n\n    padding:\n      70px\n      32px;\n\n  }\n\n\n  .case-description-title {\n\n    width:\n      100%;\n\n    font-size:\n      clamp(\n        74px,\n        10.2vw,\n        118px\n      );\n\n    line-height:\n      .80;\n\n  }\n\n\n  .case-description-title span {\n\n    white-space:\n      normal;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media\n(max-width: 767px) {\n\n  .case-description-stage {\n\n    min-height:\n      100svh;\n\n    align-items:\n      center;\n\n  }\n\n\n  .case-description-inner {\n\n    padding:\n      64px\n      18px;\n\n  }\n\n\n  .case-description-title {\n\n    width:\n      100%;\n\n    font-size:\n      clamp(\n        54px,\n        16vw,\n        82px\n      );\n\n    line-height:\n      .82;\n\n    letter-spacing:\n      -.025em;\n\n  }\n\n\n  .case-description-title span {\n\n    white-space:\n      normal;\n\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67568ec9 e-con-full case-story-section e-flex e-con e-child\" data-id=\"67568ec9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45d717d6 elementor-widget elementor-widget-html\" data-id=\"45d717d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"case-story\">\n\n  <div class=\"case-story-inner\">\n\n    <!-- LEFT VISUAL -->\n    <div class=\"case-story-media\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/stanging\/wp-content\/uploads\/2026\/10\/Untitled-4.jpg\"\n        alt=\"Cambia el Mood\"\n        class=\"case-story-image\"\n      >\n\n    <\/div>\n\n\n    <!-- RIGHT COPY -->\n    <div class=\"case-story-copy\">\n\n      <div class=\"case-story-label\">\n        IDEA\n      <\/div>\n\n      <div class=\"case-story-text\">\n\n        <p>\n          Summer heat doesn\u2019t just change the temperature.\n          It changes the way every moment feels.\n        <\/p>\n\n        <p>\n          For Tim Hortons\u2019 2026 cold beverage collection,\n          we built a campaign around a simple thought:\n          great flavor and the perfect temperature have\n          the power to shift the mood of any situation.\n        <\/p>\n\n        <p>\n          From the office to the gym, traffic or a hot\n          afternoon, every moment became an opportunity\n          to change the mood with Tim Hortons.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400&family=Barlow+Condensed:wght@700&display=swap');\n\n\n\/* =========================================================\n   CASE STORY\n   FULL BLEED\n========================================================= *\/\n\n.case-story {\n\n  position:\n    relative;\n\n  width:\n    100vw;\n\n  max-width:\n    100vw;\n\n  margin-top:\n    0;\n\n  margin-right:\n    0;\n\n  margin-bottom:\n    0;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  padding:\n    0;\n\n  box-sizing:\n    border-box;\n\n  overflow:\n    hidden;\n\n  background:\n    #0B0B0D;\n\n  color:\n    #F5F5F5;\n\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.case-story-inner {\n\n  width:\n    100%;\n\n  min-height:\n    72vh;\n\n  margin:\n    0;\n\n  padding:\n    clamp(70px, 7vw, 130px)\n    clamp(32px, 5vw, 92px);\n\n  box-sizing:\n    border-box;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    minmax(220px, 28%)\n    minmax(0, 1fr);\n\n  column-gap:\n    clamp(80px, 10vw, 190px);\n\n  align-items:\n    start;\n\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.case-story-media {\n\n  width:\n    min(100%, 360px);\n\n  aspect-ratio:\n    4 \/ 3;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n  background:\n    #1A1A1A;\n\n}\n\n\n.case-story-image {\n\n  display:\n    block;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  object-fit:\n    cover;\n\n  object-position:\n    center center;\n\n}\n\n\n\/* =========================================================\n   COPY COLUMN\n========================================================= *\/\n\n.case-story-copy {\n\n  width:\n    min(100%, 820px);\n\n  margin-left:\n    auto;\n\n  margin-right:\n    0;\n\n}\n\n\n\/* =========================================================\n   IDEA\n\n   BARLOW CONDENSED 700\n========================================================= *\/\n\n.case-story-label {\n\n  margin:\n    0 0 34px;\n\n  padding:\n    0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(\n      30px,\n      2.3vw,\n      44px\n    );\n\n  font-weight:\n    700 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    -.01em;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #F5F5F5;\n\n}\n\n\n\/* =========================================================\n   LONG COPY\n\n   BARLOW REGULAR 400\n========================================================= *\/\n\n.case-story-text {\n\n  width:\n    100%;\n\n  max-width:\n    760px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n}\n\n\n.case-story-text p {\n\n  margin:\n    0 0 26px;\n\n  padding:\n    0;\n\n  font-family:\n    \"Barlow\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(\n      20px,\n      1.45vw,\n      27px\n    );\n\n  font-weight:\n    400 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    1.38;\n\n  letter-spacing:\n    0;\n\n  color:\n    #F5F5F5;\n\n}\n\n\n.case-story-text p:last-child {\n\n  margin-bottom:\n    0;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media\n(min-width: 768px)\nand\n(max-width: 1180px) {\n\n  .case-story-inner {\n\n    min-height:\n      0;\n\n    padding:\n      72px\n      32px\n      90px;\n\n    grid-template-columns:\n      minmax(180px, 30%)\n      minmax(0, 1fr);\n\n    column-gap:\n      54px;\n\n  }\n\n\n  .case-story-media {\n\n    width:\n      100%;\n\n    max-width:\n      290px;\n\n  }\n\n\n  .case-story-label {\n\n    margin-bottom:\n      28px;\n\n    font-size:\n      clamp(\n        28px,\n        3.8vw,\n        38px\n      );\n\n  }\n\n\n  .case-story-text p {\n\n    font-size:\n      clamp(\n        19px,\n        2.2vw,\n        24px\n      );\n\n    line-height:\n      1.4;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media\n(max-width: 767px) {\n\n  .case-story-inner {\n\n    min-height:\n      0;\n\n    padding:\n      54px\n      18px\n      72px;\n\n    display:\n      flex;\n\n    flex-direction:\n      column;\n\n    gap:\n      42px;\n\n  }\n\n\n  .case-story-media {\n\n    width:\n      100%;\n\n    max-width:\n      none;\n\n    aspect-ratio:\n      4 \/ 3;\n\n  }\n\n\n  .case-story-copy {\n\n    width:\n      100%;\n\n    margin:\n      0;\n\n  }\n\n\n  .case-story-label {\n\n    margin-bottom:\n      24px;\n\n    font-size:\n      30px;\n\n  }\n\n\n  .case-story-text {\n\n    width:\n      100%;\n\n    max-width:\n      none;\n\n  }\n\n\n  .case-story-text p {\n\n    margin-bottom:\n      22px;\n\n    font-size:\n      19px;\n\n    line-height:\n      1.42;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const story =\n    document.querySelector(\n      '.case-story'\n    );\n\n  if (!story) return;\n\n\n  const widget =\n    story.closest(\n      '.elementor-widget-html'\n    );\n\n\n  if (widget) {\n\n    widget.style.width =\n      '100%';\n\n    widget.style.maxWidth =\n      '100%';\n\n    widget.style.margin =\n      '0';\n\n    widget.style.padding =\n      '0';\n\n  }\n\n\n  let parent =\n    widget\n      ? widget.parentElement\n      : null;\n\n\n  let level =\n    0;\n\n\n  while (\n    parent &&\n    level < 3\n  ) {\n\n    parent.style.paddingLeft =\n      '0';\n\n    parent.style.paddingRight =\n      '0';\n\n    parent.style.marginLeft =\n      '0';\n\n    parent.style.marginRight =\n      '0';\n\n    parent.style.maxWidth =\n      'none';\n\n    parent.style.width =\n      '100%';\n\n    parent.style.gap =\n      '0';\n\n    level++;\n\n    parent =\n      parent.parentElement;\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e96b4d3 e-con-full case-gallery-section e-flex e-con e-child\" data-id=\"7e96b4d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2de76fd1 elementor-widget elementor-widget-html\" data-id=\"2de76fd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     CASE GALLERY \u2014 VISIBLE\n========================================================= -->\n\n<section class=\"case-gallery\">\n\n  <div class=\"case-gallery-grid\">\n\n\n    <!-- ITEM 01 \u00b7 FULL VIDEO -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"0\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n\n      <video\n        class=\"case-gallery-media\"\n        autoplay\n        muted\n        loop\n        playsinline\n        preload=\"auto\"\n      >\n        <source\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1.mp4\"\n          type=\"video\/mp4\"\n        >\n      <\/video>\n\n    <\/div>\n\n\n    <!-- ITEM 02 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"1\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_007.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 02\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 03 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"2\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_008.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 03\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 04 \u00b7 FULL VIDEO -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"3\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n\n      <video\n        class=\"case-gallery-media\"\n        autoplay\n        muted\n        loop\n        playsinline\n        preload=\"auto\"\n      >\n        <source\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1_1.mp4\"\n          type=\"video\/mp4\"\n        >\n      <\/video>\n\n    <\/div>\n\n\n    <!-- ITEM 05 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"4\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_006.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 05\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 06 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"5\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_005.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 06\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 07 \u00b7 FULL -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"6\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_012.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 07\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 08 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"7\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_003.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 08\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 09 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"8\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_002.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 09\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 10 \u00b7 FULL -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"9\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_011.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 10\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 11 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"10\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_004.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 11\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 12 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"11\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_001.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 12\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 13 \u00b7 FULL -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"12\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_013.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 13\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 14 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"13\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_010.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 14\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 15 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"14\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_015.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 15\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 16 \u00b7 FULL -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"15\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-3.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 16\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 18 \u00b7 LEFT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"17\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-2.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 18\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 17 \u00b7 RIGHT -->\n    <div\n      class=\"case-gallery-item case-gallery-half\"\n      data-gallery-index=\"16\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-1.png\"\n        alt=\"Cambia el Mood \u2014 Gallery 17\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n    <!-- ITEM 19 \u00b7 FULL -->\n    <div\n      class=\"case-gallery-item case-gallery-full\"\n      data-gallery-index=\"18\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_016.jpg\"\n        alt=\"Cambia el Mood \u2014 Gallery 19\"\n        class=\"case-gallery-media\"\n      >\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     FREE DRAG INFINITE STRIP\n========================================================= -->\n\n<div\n  class=\"case-strip-modal\"\n  aria-hidden=\"true\"\n>\n\n  <div class=\"case-strip-track\">\n\n    <div class=\"case-strip-set\">\n\n\n      <!-- 01 \u00b7 VIDEO -->\n      <div\n        class=\"case-strip-item case-strip-full case-strip-video-item\"\n        data-strip-index=\"0\"\n      >\n\n        <video\n          class=\"case-strip-media case-strip-preview-video\"\n          muted\n          playsinline\n          preload=\"auto\"\n        >\n          <source\n            src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1.mp4\"\n            type=\"video\/mp4\"\n          >\n        <\/video>\n\n        <button\n          class=\"case-strip-play\"\n          type=\"button\"\n          aria-label=\"Play video\"\n        >\u25b6<\/button>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"1\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_007.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 03 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"2\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_008.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 04 \u00b7 VIDEO -->\n      <div\n        class=\"case-strip-item case-strip-full case-strip-video-item\"\n        data-strip-index=\"3\"\n      >\n\n        <video\n          class=\"case-strip-media case-strip-preview-video\"\n          muted\n          playsinline\n          preload=\"auto\"\n        >\n          <source\n            src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Tim-Hortons_Cambia-el-mood_Oficina-y-transporte_Master_1_1.mp4\"\n            type=\"video\/mp4\"\n          >\n        <\/video>\n\n        <button\n          class=\"case-strip-play\"\n          type=\"button\"\n          aria-label=\"Play video\"\n        >\u25b6<\/button>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"4\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_006.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 06 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"5\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_005.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 07 -->\n      <div\n        class=\"case-strip-item case-strip-full\"\n        data-strip-index=\"6\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_012.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 08 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"7\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_003.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 09 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"8\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_002.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 10 -->\n      <div\n        class=\"case-strip-item case-strip-full\"\n        data-strip-index=\"9\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_011.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 11 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"10\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_004.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 12 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"11\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_001.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 13 -->\n      <div\n        class=\"case-strip-item case-strip-full\"\n        data-strip-index=\"12\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_013.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 14 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"13\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_010.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 15 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"14\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_015.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 16 -->\n      <div\n        class=\"case-strip-item case-strip-full\"\n        data-strip-index=\"15\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-3.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 17 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"16\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-1.png\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 18 -->\n      <div\n        class=\"case-strip-item case-strip-half\"\n        data-strip-index=\"17\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/Untitled-2.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n      <!-- 19 -->\n      <div\n        class=\"case-strip-item case-strip-full\"\n        data-strip-index=\"18\"\n      >\n        <img decoding=\"async\"\n          src=\"https:\/\/bipolar.mx\/wp-content\/uploads\/2026\/10\/MOOD_016.jpg\"\n          alt=\"\"\n          class=\"case-strip-media\"\n          draggable=\"false\"\n        >\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <button\n    class=\"case-strip-close\"\n    type=\"button\"\n    aria-label=\"Close gallery\"\n  >\u00d7<\/button>\n\n<\/div>\n\n\n\n<!-- =========================================================\n     DEDICATED VIDEO PLAYER\n========================================================= -->\n\n<div\n  class=\"case-video-modal\"\n  aria-hidden=\"true\"\n>\n\n  <div class=\"case-video-stage\">\n\n    <video\n      class=\"case-video-player\"\n      playsinline\n      preload=\"auto\"\n      controls\n    ><\/video>\n\n  <\/div>\n\n\n  <button\n    class=\"case-video-close\"\n    type=\"button\"\n    aria-label=\"Close video\"\n  >\u00d7<\/button>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   NORMAL GALLERY\n========================================================= *\/\n\n.case-gallery {\n\n  position: relative;\n\n  width: 100vw;\n  max-width: 100vw;\n\n  margin:\n    0 0 0 calc(50% - 50vw) !important;\n\n  padding:\n    0 !important;\n\n  box-sizing:\n    border-box;\n\n  overflow:\n    hidden;\n\n  background:\n    #0B0B0D;\n\n}\n\n\n.case-gallery-grid {\n\n  display:\n    grid !important;\n\n  width:\n    100% !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  grid-template-columns:\n    repeat(2,minmax(0,1fr));\n\n  gap:\n    0 !important;\n\n  row-gap:\n    0 !important;\n\n  column-gap:\n    0 !important;\n\n  font-size:\n    0 !important;\n\n  line-height:\n    0 !important;\n\n}\n\n\n.case-gallery-item {\n\n  position:\n    relative;\n\n  display:\n    block !important;\n\n  width:\n    100% !important;\n\n  min-width:\n    0 !important;\n\n  min-height:\n    0 !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  overflow:\n    hidden;\n\n  background:\n    #0B0B0D;\n\n  cursor:\n    pointer;\n\n}\n\n\n.case-gallery-half {\n\n  grid-column:\n    span 1;\n\n  aspect-ratio:\n    1 \/ 1;\n\n}\n\n\n.case-gallery-full {\n\n  grid-column:\n    1 \/ -1;\n\n  aspect-ratio:\n    16 \/ 8;\n\n}\n\n\n.case-gallery-media {\n\n  position:\n    absolute !important;\n\n  inset:\n    0 !important;\n\n  display:\n    block !important;\n\n  width:\n    100% !important;\n\n  height:\n    100% !important;\n\n  max-width:\n    none !important;\n\n  max-height:\n    none !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    0 !important;\n\n  object-fit:\n    cover !important;\n\n  object-position:\n    center center !important;\n\n  transform:\n    scale(1);\n\n  transition:\n    transform .6s cubic-bezier(.22,.8,.3,1);\n\n}\n\n\n.case-gallery video,\n.case-gallery img {\n\n  display:\n    block !important;\n\n  width:\n    100% !important;\n\n  height:\n    100% !important;\n\n  object-fit:\n    cover !important;\n\n}\n\n\n@media (hover:hover) {\n\n  .case-gallery-item:hover\n  .case-gallery-media {\n\n    transform:\n      scale(1.018);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   TABLET \u2014 NORMAL PAGE GALLERY\n========================================================= *\/\n\n@media\n(min-width:768px)\nand\n(max-width:1180px) {\n\n  .case-gallery-half {\n\n    aspect-ratio:\n      4 \/ 5;\n\n  }\n\n\n  .case-gallery-full {\n\n    aspect-ratio:\n      16 \/ 9;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE \u2014 NORMAL PAGE GALLERY\n========================================================= *\/\n\n@media\n(max-width:767px) {\n\n  .case-gallery-half {\n\n    aspect-ratio:\n      1 \/ 1.12;\n\n  }\n\n\n  .case-gallery-full {\n\n    aspect-ratio:\n      4 \/ 3;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   SLIDESHOW MODAL\n========================================================= *\/\n\n.case-strip-modal {\n\n  position:\n    fixed;\n\n  inset:\n    0;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n  background:\n    #000;\n\n  opacity:\n    0;\n\n  visibility:\n    hidden;\n\n  pointer-events:\n    none;\n\n  cursor:\n    grab;\n\n  touch-action:\n    none;\n\n  user-select:\n    none;\n\n  -webkit-user-select:\n    none;\n\n  z-index:\n    2147483000;\n\n}\n\n\n.case-strip-modal.is-open {\n\n  opacity:\n    1;\n\n  visibility:\n    visible;\n\n  pointer-events:\n    auto;\n\n}\n\n\n.case-strip-modal.is-dragging {\n\n  cursor:\n    grabbing;\n\n}\n\n\n\n\/* =========================================================\n   TRACK\n========================================================= *\/\n\n.case-strip-track {\n\n  position:\n    absolute;\n\n  top:\n    0;\n\n  left:\n    0;\n\n  display:\n    flex;\n\n  flex-direction:\n    row;\n\n  align-items:\n    stretch;\n\n  width:\n    max-content;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  gap:\n    0;\n\n  transform:\n    translate3d(0,0,0);\n\n  will-change:\n    transform;\n\n}\n\n\n\n\/* =========================================================\n   REPEATED SET\n========================================================= *\/\n\n.case-strip-set {\n\n  display:\n    flex;\n\n  flex-direction:\n    row;\n\n  flex:\n    none;\n\n  width:\n    max-content;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  gap:\n    0;\n\n}\n\n\n\n\/* =========================================================\n   SLIDESHOW ITEMS \u2014 DESKTOP DEFAULT\n========================================================= *\/\n\n.case-strip-item {\n\n  position:\n    relative;\n\n  flex:\n    none;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n  background:\n    #111;\n\n}\n\n\n.case-strip-half {\n\n  width:\n    50vw;\n\n}\n\n\n.case-strip-full {\n\n  width:\n    100vw;\n\n}\n\n\n\n\/* =========================================================\n   SLIDESHOW MEDIA\n========================================================= *\/\n\n.case-strip-media {\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  display:\n    block;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  border:\n    0;\n\n  object-fit:\n    cover;\n\n  object-position:\n    center center;\n\n  user-select:\n    none;\n\n  -webkit-user-drag:\n    none;\n\n}\n\n\n\n\/* =========================================================\n   PLAY BUTTON\n========================================================= *\/\n\n.case-strip-play {\n\n  position:\n    absolute;\n\n  left:\n    50%;\n\n  top:\n    50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  width:\n    84px;\n\n  height:\n    84px;\n\n  margin:\n    0;\n\n  padding:\n    0 0 0 4px;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border:\n    1px solid rgba(255,255,255,.9);\n\n  border-radius:\n    50%;\n\n  background:\n    rgba(0,0,0,.22);\n\n  color:\n    #fff;\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:\n    24px;\n\n  line-height:\n    1;\n\n  cursor:\n    pointer;\n\n  z-index:\n    20;\n\n}\n\n\n@media (hover:hover) {\n\n  .case-strip-play:hover {\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.06);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   CLOSE SLIDESHOW\n========================================================= *\/\n\n.case-strip-close {\n\n  position:\n    fixed;\n\n  top:\n    26px;\n\n  right:\n    26px;\n\n  width:\n    58px;\n\n  height:\n    58px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border:\n    0;\n\n  border-radius:\n    0;\n\n  background:\n    #F5F5F5;\n\n  color:\n    #0B0B0D;\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:\n    27px;\n\n  line-height:\n    1;\n\n  cursor:\n    pointer;\n\n  z-index:\n    100;\n\n}\n\n\n\n\/* =========================================================\n   VIDEO PLAYER MODAL\n========================================================= *\/\n\n.case-video-modal {\n\n  position:\n    fixed;\n\n  inset:\n    0;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  overflow:\n    hidden;\n\n  background:\n    #000;\n\n  opacity:\n    0;\n\n  visibility:\n    hidden;\n\n  pointer-events:\n    none;\n\n  z-index:\n    2147483600;\n\n}\n\n\n.case-video-modal.is-open {\n\n  opacity:\n    1;\n\n  visibility:\n    visible;\n\n  pointer-events:\n    auto;\n\n}\n\n\n.case-video-stage {\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  background:\n    #000;\n\n  overflow:\n    hidden;\n\n}\n\n\n.case-video-player {\n\n  display:\n    block;\n\n  width:\n    100vw;\n\n  height:\n    100vh;\n\n  height:\n    100dvh;\n\n  max-width:\n    100vw;\n\n  max-height:\n    100dvh;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  object-fit:\n    contain;\n\n  object-position:\n    center center;\n\n  background:\n    #000;\n\n}\n\n\n\n\/* =========================================================\n   CLOSE VIDEO\n========================================================= *\/\n\n.case-video-close {\n\n  position:\n    fixed;\n\n  top:\n    26px;\n\n  right:\n    26px;\n\n  width:\n    58px;\n\n  height:\n    58px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border:\n    0;\n\n  border-radius:\n    0;\n\n  background:\n    #F5F5F5;\n\n  color:\n    #0B0B0D;\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:\n    27px;\n\n  line-height:\n    1;\n\n  cursor:\n    pointer;\n\n  z-index:\n    200;\n\n}\n\n\n\n\/* =========================================================\n   TABLET + MOBILE \u2014 SLIDESHOW\n\n   IMPORTANTE:\n   EL ANCHO DE CADA ASSET SE CALCULA POR JS\n   SEG\u00daN SU PROPORCI\u00d3N NATIVA.\n\n   NO 58VW\n   NO 82VW\n   NO 100VW FORZADO.\n========================================================= *\/\n\n@media\n(max-width:1180px) {\n\n  .case-strip-item,\n  .case-strip-half,\n  .case-strip-full {\n\n    width:\n      auto;\n\n    max-width:\n      none;\n\n    height:\n      100vh;\n\n    height:\n      100dvh;\n\n    flex:\n      0 0 auto;\n\n  }\n\n\n  .case-strip-media {\n\n    width:\n      100%;\n\n    height:\n      100%;\n\n    object-fit:\n      cover;\n\n    object-position:\n      center center;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE CONTROLS\n========================================================= *\/\n\n@media\n(max-width:767px) {\n\n  .case-strip-close,\n  .case-video-close {\n\n    top:\n      16px;\n\n    right:\n      16px;\n\n    width:\n      50px;\n\n    height:\n      50px;\n\n    font-size:\n      24px;\n\n  }\n\n\n  .case-strip-play {\n\n    width:\n      68px;\n\n    height:\n      68px;\n\n    font-size:\n      20px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n  const gallery =\n    document.querySelector(\n      '.case-gallery'\n    );\n\n\n  const stripModal =\n    document.querySelector(\n      '.case-strip-modal'\n    );\n\n\n  const videoModal =\n    document.querySelector(\n      '.case-video-modal'\n    );\n\n\n  if (\n    !gallery ||\n    !stripModal ||\n    !videoModal\n  ) {\n\n    return;\n\n  }\n\n\n  \/* =========================================================\n     MOVE OVERLAYS TO BODY\n  ========================================================= *\/\n\n  document.body.appendChild(\n    stripModal\n  );\n\n\n  document.body.appendChild(\n    videoModal\n  );\n\n\n  const track =\n    stripModal.querySelector(\n      '.case-strip-track'\n    );\n\n\n  const originalSet =\n    track.querySelector(\n      '.case-strip-set'\n    );\n\n\n  const stripClose =\n    stripModal.querySelector(\n      '.case-strip-close'\n    );\n\n\n  const videoClose =\n    videoModal.querySelector(\n      '.case-video-close'\n    );\n\n\n  const videoPlayer =\n    videoModal.querySelector(\n      '.case-video-player'\n    );\n\n\n  const galleryItems =\n    Array.from(\n      gallery.querySelectorAll(\n        '.case-gallery-item'\n      )\n    );\n\n\n  \/* =========================================================\n     GRID VIDEOS\n  ========================================================= *\/\n\n  gallery\n    .querySelectorAll(\n      'video'\n    )\n    .forEach(\n      function (video) {\n\n        video.muted =\n          true;\n\n        video.defaultMuted =\n          true;\n\n        video.loop =\n          true;\n\n        video.autoplay =\n          true;\n\n        video.playsInline =\n          true;\n\n        video.setAttribute(\n          'muted',\n          ''\n        );\n\n        video.setAttribute(\n          'playsinline',\n          ''\n        );\n\n        video.play().catch(\n          function () {}\n        );\n\n      }\n    );\n\n\n  \/* =========================================================\n     FULL BLEED\n  ========================================================= *\/\n\n  const widget =\n    gallery.closest(\n      '.elementor-widget-html'\n    );\n\n\n  if (widget) {\n\n    widget.style.width =\n      '100%';\n\n    widget.style.maxWidth =\n      '100%';\n\n    widget.style.margin =\n      '0';\n\n    widget.style.padding =\n      '0';\n\n  }\n\n\n  let parent =\n    widget\n      ? widget.parentElement\n      : null;\n\n\n  let level =\n    0;\n\n\n  while (\n    parent &&\n    level < 3\n  ) {\n\n    parent.style.paddingLeft =\n      '0';\n\n    parent.style.paddingRight =\n      '0';\n\n    parent.style.paddingTop =\n      '0';\n\n    parent.style.paddingBottom =\n      '0';\n\n    parent.style.marginLeft =\n      '0';\n\n    parent.style.marginRight =\n      '0';\n\n    parent.style.marginTop =\n      '0';\n\n    parent.style.marginBottom =\n      '0';\n\n    parent.style.maxWidth =\n      'none';\n\n    parent.style.width =\n      '100%';\n\n    parent.style.gap =\n      '0';\n\n    parent.style.rowGap =\n      '0';\n\n    parent.style.columnGap =\n      '0';\n\n\n    level++;\n\n\n    parent =\n      parent.parentElement;\n\n  }\n\n\n  \/* =========================================================\n     BUILD TRUE INFINITE STRIP\n\n     PREVIOUS SET\n     ORIGINAL SET\n     NEXT SET\n  ========================================================= *\/\n\n  track\n    .querySelectorAll(\n      '.case-strip-set-clone'\n    )\n    .forEach(\n      function (clone) {\n\n        clone.remove();\n\n      }\n    );\n\n\n  const previousSet =\n    originalSet.cloneNode(\n      true\n    );\n\n\n  previousSet.classList.add(\n    'case-strip-set-clone'\n  );\n\n\n  const nextSet =\n    originalSet.cloneNode(\n      true\n    );\n\n\n  nextSet.classList.add(\n    'case-strip-set-clone'\n  );\n\n\n  track.insertBefore(\n    previousSet,\n    originalSet\n  );\n\n\n  track.appendChild(\n    nextSet\n  );\n\n\n  \/* =========================================================\n     RESPONSIVE ORIGINAL-ASPECT-RATIO SYSTEM\n\n     DESKTOP > 1180:\n     conserva 50vw \/ 100vw.\n\n     TABLET + MOBILE <= 1180:\n     cada asset mantiene su proporci\u00f3n NATIVA.\n\n     ancho = altura viewport \u00d7 relaci\u00f3n original\n  ========================================================= *\/\n\n  function viewportHeight() {\n\n    if (\n      window.visualViewport &&\n      window.visualViewport.height\n    ) {\n\n      return window.visualViewport.height;\n\n    }\n\n\n    return window.innerHeight;\n\n  }\n\n\n  function mediaRatio(\n    media\n  ) {\n\n    if (!media) return 0;\n\n\n    if (\n      media.tagName ===\n      'IMG'\n    ) {\n\n      if (\n        media.naturalWidth &&\n        media.naturalHeight\n      ) {\n\n        return (\n          media.naturalWidth \/\n          media.naturalHeight\n        );\n\n      }\n\n    }\n\n\n    if (\n      media.tagName ===\n      'VIDEO'\n    ) {\n\n      if (\n        media.videoWidth &&\n        media.videoHeight\n      ) {\n\n        return (\n          media.videoWidth \/\n          media.videoHeight\n        );\n\n      }\n\n    }\n\n\n    return 0;\n\n  }\n\n\n  function sizeStripItem(\n    item\n  ) {\n\n    if (!item) return;\n\n\n    \/*\n      DESKTOP:\n      VOLVEMOS A LAS REGLAS CSS\n      .half = 50vw\n      .full = 100vw\n    *\/\n\n    if (\n      window.innerWidth >\n      1180\n    ) {\n\n      item.style.removeProperty(\n        'width'\n      );\n\n\n      return;\n\n    }\n\n\n    \/*\n      TABLET + MOBILE:\n      ANCHO REAL BASADO EN\n      PROPORCI\u00d3N DEL ARCHIVO.\n    *\/\n\n    const media =\n      item.querySelector(\n        '.case-strip-media'\n      );\n\n\n    const ratio =\n      mediaRatio(\n        media\n      );\n\n\n    if (!ratio) return;\n\n\n    const height =\n      viewportHeight();\n\n\n    const calculatedWidth =\n      height *\n      ratio;\n\n\n    item.style.width =\n      calculatedWidth +\n      'px';\n\n  }\n\n\n  function syncStripItemSizes() {\n\n    const allItems =\n      Array.from(\n        stripModal.querySelectorAll(\n          '.case-strip-item'\n        )\n      );\n\n\n    allItems.forEach(\n      sizeStripItem\n    );\n\n  }\n\n\n  \/* =========================================================\n     RE-SYNC WHEN IMAGE \/ VIDEO DIMENSIONS BECOME AVAILABLE\n  ========================================================= *\/\n\n  let stripOpen =\n    false;\n\n\n  let videoOpen =\n    false;\n\n\n  let dragging =\n    false;\n\n\n  let activePointer =\n    null;\n\n\n  let previousPointerX =\n    0;\n\n\n  let movedDistance =\n    0;\n\n\n  let currentX =\n    0;\n\n\n  let setWidth =\n    0;\n\n\n  let savedScrollY =\n    0;\n\n\n  let openedIndex =\n    0;\n\n\n  let userHasDragged =\n    false;\n\n\n  function refreshAfterMediaReady() {\n\n    syncStripItemSizes();\n\n\n    if (!stripOpen) return;\n\n\n    measureSets();\n\n\n    if (!userHasDragged) {\n\n      centerClickedItem(\n        openedIndex\n      );\n\n    }\n\n    else {\n\n      normalizeLoop();\n\n      paintTrack();\n\n    }\n\n  }\n\n\n  Array.from(\n    stripModal.querySelectorAll(\n      '.case-strip-media'\n    )\n  ).forEach(\n    function (media) {\n\n      if (\n        media.tagName ===\n        'IMG'\n      ) {\n\n        if (\n          media.complete &&\n          media.naturalWidth\n        ) {\n\n          sizeStripItem(\n            media.closest(\n              '.case-strip-item'\n            )\n          );\n\n        }\n\n        else {\n\n          media.addEventListener(\n            'load',\n            refreshAfterMediaReady\n          );\n\n        }\n\n      }\n\n\n      else if (\n        media.tagName ===\n        'VIDEO'\n      ) {\n\n        if (\n          media.videoWidth &&\n          media.videoHeight\n        ) {\n\n          sizeStripItem(\n            media.closest(\n              '.case-strip-item'\n            )\n          );\n\n        }\n\n        else {\n\n          media.addEventListener(\n            'loadedmetadata',\n            refreshAfterMediaReady\n          );\n\n        }\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     PRIME ALL VIDEO PREVIEWS\n  ========================================================= *\/\n\n  const previewVideos =\n    Array.from(\n      stripModal.querySelectorAll(\n        '.case-strip-preview-video'\n      )\n    );\n\n\n  function primePreview(\n    video\n  ) {\n\n    video.muted =\n      true;\n\n\n    video.defaultMuted =\n      true;\n\n\n    video.playsInline =\n      true;\n\n\n    video.setAttribute(\n      'muted',\n      ''\n    );\n\n\n    video.setAttribute(\n      'playsinline',\n      ''\n    );\n\n\n    video.load();\n\n\n    const startPrime =\n      function () {\n\n        video\n          .play()\n          .then(\n            function () {\n\n              setTimeout(\n                function () {\n\n                  video.pause();\n\n\n                  try {\n\n                    video.currentTime =\n                      .05;\n\n                  }\n\n                  catch(error) {}\n\n\n                  refreshAfterMediaReady();\n\n                },\n                140\n              );\n\n            }\n          )\n          .catch(\n            function () {}\n          );\n\n      };\n\n\n    if (\n      video.readyState >= 2\n    ) {\n\n      startPrime();\n\n    }\n\n    else {\n\n      video.addEventListener(\n        'loadeddata',\n        startPrime,\n        {\n          once:\n            true\n        }\n      );\n\n    }\n\n  }\n\n\n  previewVideos.forEach(\n    primePreview\n  );\n\n\n  \/* =========================================================\n     MEASURE LOOP\n  ========================================================= *\/\n\n  function measureSets() {\n\n    syncStripItemSizes();\n\n\n    setWidth =\n      originalSet.offsetWidth;\n\n  }\n\n\n  \/* =========================================================\n     PAINT TRACK\n  ========================================================= *\/\n\n  function paintTrack() {\n\n    track.style.transform =\n      'translate3d(' +\n      currentX +\n      'px,0,0)';\n\n  }\n\n\n  \/* =========================================================\n     INFINITE NORMALIZATION\n  ========================================================= *\/\n\n  function normalizeLoop() {\n\n    if (!setWidth) return;\n\n\n    while (\n      currentX > 0\n    ) {\n\n      currentX -=\n        setWidth;\n\n    }\n\n\n    while (\n      currentX <\n      -2 * setWidth\n    ) {\n\n      currentX +=\n        setWidth;\n\n    }\n\n  }\n\n\n  \/* =========================================================\n     CENTER CLICKED ITEM\n     ONLY WHEN OPENING\n  ========================================================= *\/\n\n  function centerClickedItem(\n    index\n  ) {\n\n    syncStripItemSizes();\n\n\n    measureSets();\n\n\n    const item =\n      originalSet.querySelector(\n        '[data-strip-index=\"' +\n        index +\n        '\"]'\n      );\n\n\n    if (!item) return;\n\n\n    const itemCenter =\n      setWidth +\n      item.offsetLeft +\n      item.offsetWidth \/ 2;\n\n\n    currentX =\n      window.innerWidth \/ 2 -\n      itemCenter;\n\n\n    normalizeLoop();\n\n\n    paintTrack();\n\n  }\n\n\n  \/* =========================================================\n     OPEN STRIP\n  ========================================================= *\/\n\n  function openStrip(\n    index\n  ) {\n\n    if (stripOpen) return;\n\n\n    stripOpen =\n      true;\n\n\n    openedIndex =\n      index;\n\n\n    userHasDragged =\n      false;\n\n\n    savedScrollY =\n      window.scrollY;\n\n\n    document.body.style.position =\n      'fixed';\n\n\n    document.body.style.top =\n      '-' +\n      savedScrollY +\n      'px';\n\n\n    document.body.style.left =\n      '0';\n\n\n    document.body.style.right =\n      '0';\n\n\n    document.body.style.width =\n      '100%';\n\n\n    document.body.style.overflow =\n      'hidden';\n\n\n    stripModal.classList.add(\n      'is-open'\n    );\n\n\n    stripModal.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n\n    requestAnimationFrame(\n      function () {\n\n        requestAnimationFrame(\n          function () {\n\n            syncStripItemSizes();\n\n\n            centerClickedItem(\n              index\n            );\n\n          }\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================================================\n     CLOSE STRIP\n  ========================================================= *\/\n\n  function closeStrip() {\n\n    if (!stripOpen) return;\n\n\n    if (videoOpen) {\n\n      closeVideo();\n\n    }\n\n\n    stripOpen =\n      false;\n\n\n    dragging =\n      false;\n\n\n    activePointer =\n      null;\n\n\n    stripModal.classList.remove(\n      'is-open',\n      'is-dragging'\n    );\n\n\n    stripModal.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n\n    document.body.style.position =\n      '';\n\n\n    document.body.style.top =\n      '';\n\n\n    document.body.style.left =\n      '';\n\n\n    document.body.style.right =\n      '';\n\n\n    document.body.style.width =\n      '';\n\n\n    document.body.style.overflow =\n      '';\n\n\n    window.scrollTo(\n      0,\n      savedScrollY\n    );\n\n  }\n\n\n  \/* =========================================================\n     OPEN VIDEO\n  ========================================================= *\/\n\n  function openVideo(\n    source\n  ) {\n\n    if (!source) return;\n\n\n    videoOpen =\n      true;\n\n\n    videoPlayer.pause();\n\n\n    videoPlayer.removeAttribute(\n      'src'\n    );\n\n\n    videoPlayer.load();\n\n\n    videoPlayer.src =\n      source;\n\n\n    videoPlayer.muted =\n      false;\n\n\n    videoPlayer.defaultMuted =\n      false;\n\n\n    videoPlayer.volume =\n      1;\n\n\n    videoPlayer.playsInline =\n      true;\n\n\n    videoPlayer.setAttribute(\n      'playsinline',\n      ''\n    );\n\n\n    videoPlayer.load();\n\n\n    videoModal.classList.add(\n      'is-open'\n    );\n\n\n    videoModal.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n\n    videoPlayer\n      .play()\n      .catch(\n        function () {}\n      );\n\n  }\n\n\n  \/* =========================================================\n     CLOSE VIDEO\n  ========================================================= *\/\n\n  function closeVideo() {\n\n    if (!videoOpen) return;\n\n\n    videoOpen =\n      false;\n\n\n    videoPlayer.pause();\n\n\n    try {\n\n      videoPlayer.currentTime =\n        0;\n\n    }\n\n    catch(error) {}\n\n\n    videoModal.classList.remove(\n      'is-open'\n    );\n\n\n    videoModal.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n\n    videoPlayer.removeAttribute(\n      'src'\n    );\n\n\n    videoPlayer.load();\n\n  }\n\n\n  \/* =========================================================\n     OPEN FROM GRID\n  ========================================================= *\/\n\n  galleryItems.forEach(\n    function (item) {\n\n      const galleryIndex =\n        Number(\n          item.dataset.galleryIndex\n        );\n\n\n      item.addEventListener(\n        'click',\n        function () {\n\n          openStrip(\n            galleryIndex\n          );\n\n        }\n      );\n\n\n      item.addEventListener(\n        'keydown',\n        function (event) {\n\n          if (\n            event.key ===\n            'Enter' ||\n            event.key ===\n            ' '\n          ) {\n\n            event.preventDefault();\n\n\n            openStrip(\n              galleryIndex\n            );\n\n          }\n\n        }\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     PLAY BUTTON\n     EVENT DELEGATION\n  ========================================================= *\/\n\n  track.addEventListener(\n    'pointerdown',\n    function (event) {\n\n      if (\n        event.target.closest(\n          '.case-strip-play'\n        )\n      ) {\n\n        event.stopPropagation();\n\n      }\n\n    }\n  );\n\n\n  track.addEventListener(\n    'click',\n    function (event) {\n\n      const play =\n        event.target.closest(\n          '.case-strip-play'\n        );\n\n\n      if (!play) return;\n\n\n      event.stopPropagation();\n\n\n      const item =\n        play.closest(\n          '.case-strip-video-item'\n        );\n\n\n      if (!item) return;\n\n\n      const video =\n        item.querySelector(\n          '.case-strip-preview-video'\n        );\n\n\n      if (!video) return;\n\n\n      const source =\n        video.querySelector(\n          'source'\n        );\n\n\n      const src =\n        source\n          ? source.src\n          : video.currentSrc;\n\n\n      openVideo(\n        src\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     FREE DRAG\n  ========================================================= *\/\n\n  stripModal.addEventListener(\n    'pointerdown',\n    function (event) {\n\n      if (\n        !stripOpen ||\n        videoOpen\n      ) {\n\n        return;\n\n      }\n\n\n      if (\n        event.target.closest(\n          '.case-strip-close,' +\n          '.case-strip-play'\n        )\n      ) {\n\n        return;\n\n      }\n\n\n      dragging =\n        true;\n\n\n      activePointer =\n        event.pointerId;\n\n\n      previousPointerX =\n        event.clientX;\n\n\n      movedDistance =\n        0;\n\n\n      stripModal.classList.add(\n        'is-dragging'\n      );\n\n\n      try {\n\n        stripModal.setPointerCapture(\n          event.pointerId\n        );\n\n      }\n\n      catch(error) {}\n\n    }\n  );\n\n\n  \/* =========================================================\n     MOVE 1:1 + LOOP\n  ========================================================= *\/\n\n  stripModal.addEventListener(\n    'pointermove',\n    function (event) {\n\n      if (\n        !dragging ||\n        event.pointerId !==\n        activePointer\n      ) {\n\n        return;\n\n      }\n\n\n      const movement =\n        event.clientX -\n        previousPointerX;\n\n\n      previousPointerX =\n        event.clientX;\n\n\n      movedDistance +=\n        Math.abs(\n          movement\n        );\n\n\n      if (\n        movedDistance >\n        2\n      ) {\n\n        userHasDragged =\n          true;\n\n      }\n\n\n      currentX +=\n        movement;\n\n\n      normalizeLoop();\n\n\n      paintTrack();\n\n    }\n  );\n\n\n  \/* =========================================================\n     RELEASE\n\n     ZERO SNAP.\n     ZERO MOMENTUM.\n  ========================================================= *\/\n\n  function releaseDrag(\n    event\n  ) {\n\n    if (\n      !dragging ||\n      event.pointerId !==\n      activePointer\n    ) {\n\n      return;\n\n    }\n\n\n    dragging =\n      false;\n\n\n    activePointer =\n      null;\n\n\n    stripModal.classList.remove(\n      'is-dragging'\n    );\n\n\n    try {\n\n      stripModal.releasePointerCapture(\n        event.pointerId\n      );\n\n    }\n\n    catch(error) {}\n\n  }\n\n\n  stripModal.addEventListener(\n    'pointerup',\n    releaseDrag\n  );\n\n\n  stripModal.addEventListener(\n    'pointercancel',\n    releaseDrag\n  );\n\n\n  \/* =========================================================\n     CLOSE BUTTONS\n  ========================================================= *\/\n\n  stripClose.addEventListener(\n    'pointerdown',\n    function (event) {\n\n      event.stopPropagation();\n\n    }\n  );\n\n\n  stripClose.addEventListener(\n    'click',\n    function (event) {\n\n      event.stopPropagation();\n\n\n      closeStrip();\n\n    }\n  );\n\n\n  videoClose.addEventListener(\n    'pointerdown',\n    function (event) {\n\n      event.stopPropagation();\n\n    }\n  );\n\n\n  videoClose.addEventListener(\n    'click',\n    function (event) {\n\n      event.stopPropagation();\n\n\n      closeVideo();\n\n    }\n  );\n\n\n  \/* =========================================================\n     ESC\n  ========================================================= *\/\n\n  document.addEventListener(\n    'keydown',\n    function (event) {\n\n      if (\n        event.key !==\n        'Escape'\n      ) {\n\n        return;\n\n      }\n\n\n      if (videoOpen) {\n\n        closeVideo();\n\n        return;\n\n      }\n\n\n      if (stripOpen) {\n\n        closeStrip();\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     RESIZE \/ ORIENTATION CHANGE\n  ========================================================= *\/\n\n  function refreshViewportSizing() {\n\n    if (!stripOpen) {\n\n      syncStripItemSizes();\n\n      return;\n\n    }\n\n\n    const oldWidth =\n      setWidth;\n\n\n    syncStripItemSizes();\n\n\n    measureSets();\n\n\n    if (\n      oldWidth > 0 &&\n      setWidth > 0 &&\n      userHasDragged\n    ) {\n\n      currentX =\n        currentX *\n        (\n          setWidth \/\n          oldWidth\n        );\n\n\n      normalizeLoop();\n\n\n      paintTrack();\n\n    }\n\n    else {\n\n      centerClickedItem(\n        openedIndex\n      );\n\n    }\n\n  }\n\n\n  window.addEventListener(\n    'resize',\n    refreshViewportSizing\n  );\n\n\n  window.addEventListener(\n    'orientationchange',\n    function () {\n\n      setTimeout(\n        refreshViewportSizing,\n        120\n      );\n\n    }\n  );\n\n\n  if (\n    window.visualViewport\n  ) {\n\n    window.visualViewport.addEventListener(\n      'resize',\n      refreshViewportSizing\n    );\n\n  }\n\n\n  \/* =========================================================\n     INITIAL SIZE PASS\n  ========================================================= *\/\n\n  syncStripItemSizes();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f65df48 e-con-full next-case-section e-flex e-con e-child\" data-id=\"f65df48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50f1edbd elementor-widget elementor-widget-html\" data-id=\"50f1edbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"next-story\">\n\n  <div class=\"next-story-layout\">\n\n\n    <!-- LEFT \/ COPY -->\n    <div class=\"next-story-copy\">\n\n      <div class=\"next-story-content\">\n\n        <h2 class=\"next-story-title\">\n          <span>JUNTOS EN<\/span>\n          <span>EL VIAJE<\/span>\n        <\/h2>\n\n\n        <!-- \u00daNICO LINK DE LA SECCI\u00d3N -->\n        <a\n          href=\"#\"\n          class=\"next-story-button\"\n        >\n          <span>NEXT STORIE<\/span>\n          <span class=\"next-story-button-arrow\">\u2192<\/span>\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- RIGHT \/ IMAGE -->\n    <div class=\"next-story-media\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/stanging\/wp-content\/uploads\/2024\/09\/Uber_cuadrado_21.png\"\n        alt=\"Juntos en el viaje\"\n        class=\"next-story-image\"\n      >\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   NEXT STORY\n   FULL BLEED\n========================================================= *\/\n\n.next-story {\n\n  position:\n    relative;\n\n  display:\n    block;\n\n  width:\n    100vw;\n\n  max-width:\n    100vw;\n\n  margin:\n    0 0 0 calc(50% - 50vw);\n\n  padding:\n    0;\n\n  box-sizing:\n    border-box;\n\n  overflow:\n    hidden;\n\n  background:\n    #0B0B0D;\n\n  color:\n    #F5F5F5;\n\n  isolation:\n    isolate;\n\n}\n\n\n\/* =========================================================\n   LAYOUT\n\n   IMPORTANTE:\n   DESKTOP + TABLET TIENEN ALTURA REAL.\n\n   100vw \/ 2 = 50vw\n   Por lo tanto cada mitad es un cuadrado real.\n========================================================= *\/\n\n.next-story-layout {\n\n  position:\n    relative;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    50% 50%;\n\n  width:\n    100%;\n\n  height:\n    50vw;\n\n  min-height:\n    50vw;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  gap:\n    0;\n\n  box-sizing:\n    border-box;\n\n  overflow:\n    hidden;\n\n}\n\n\n\/* =========================================================\n   LEFT \/ COPY\n========================================================= *\/\n\n.next-story-copy {\n\n  position:\n    relative;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  min-height:\n    0;\n\n  margin:\n    0;\n\n  padding:\n    clamp(32px, 3.5vw, 64px);\n\n  box-sizing:\n    border-box;\n\n  display:\n    flex;\n\n  align-items:\n    stretch;\n\n  background:\n    #0B0B0D;\n\n  color:\n    #F5F5F5;\n\n  overflow:\n    hidden;\n\n}\n\n\n.next-story-content {\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  justify-content:\n    flex-end;\n\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.next-story-title {\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(90px, 8.8vw, 175px);\n\n  font-weight:\n    800 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    .79;\n\n  letter-spacing:\n    -.03em;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #F5F5F5;\n\n}\n\n\n.next-story-title span {\n\n  display:\n    block;\n\n  white-space:\n    nowrap;\n\n}\n\n\n\/* =========================================================\n   BUTTON\n========================================================= *\/\n\n.next-story-button {\n\n  width:\n    clamp(210px, 15vw, 240px);\n\n  height:\n    58px;\n\n  margin-top:\n    clamp(28px, 2.4vw, 42px);\n\n  padding:\n    0 18px;\n\n  box-sizing:\n    border-box;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  border:\n    1px solid #F5F5F5;\n\n  border-radius:\n    0;\n\n  background:\n    transparent;\n\n  text-decoration:\n    none !important;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    18px;\n\n  font-weight:\n    700 !important;\n\n  font-style:\n    normal;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0;\n\n  text-transform:\n    uppercase;\n\n  color:\n    #F5F5F5 !important;\n\n}\n\n\n.next-story-button span {\n\n  transition:\n    transform .25s ease,\n    font-style .25s ease;\n\n}\n\n\n.next-story-button-arrow {\n\n  font-family:\n    \"Barlow\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    22px;\n\n  font-weight:\n    400;\n\n}\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n@media (hover:hover) {\n\n  .next-story-button:hover {\n\n    background:\n      transparent;\n\n    color:\n      #F5F5F5 !important;\n\n  }\n\n\n  .next-story-button:hover\n  span:first-child {\n\n    font-style:\n      oblique;\n\n  }\n\n\n  .next-story-button:hover\n  .next-story-button-arrow {\n\n    transform:\n      translateX(4px);\n\n  }\n\n}\n\n\n\/* =========================================================\n   RIGHT \/ IMAGE\n========================================================= *\/\n\n.next-story-media {\n\n  position:\n    relative;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  min-height:\n    0;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  overflow:\n    hidden;\n\n  background:\n    #151515;\n\n  box-sizing:\n    border-box;\n\n}\n\n\n.next-story-image {\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  display:\n    block;\n\n  width:\n    100%;\n\n  height:\n    100%;\n\n  max-width:\n    none;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  object-fit:\n    cover;\n\n  object-position:\n    center center;\n\n}\n\n\n\/* =========================================================\n   CONTACT\n   FULL BLEED STRUCTURAL FIX\n\n   NO CAMBIA SU DISE\u00d1O.\n   S\u00d3LO LO SACA DEL WRAPPER ESTRECHO DE ELEMENTOR.\n========================================================= *\/\n\nbody .bplr-contact {\n\n  position:\n    relative !important;\n\n  left:\n    auto !important;\n\n  right:\n    auto !important;\n\n  width:\n    100vw !important;\n\n  min-width:\n    100vw !important;\n\n  max-width:\n    100vw !important;\n\n  margin-top:\n    0 !important;\n\n  margin-right:\n    0 !important;\n\n  margin-bottom:\n    0 !important;\n\n  margin-left:\n    calc(50% - 50vw) !important;\n\n  box-sizing:\n    border-box !important;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media\n(min-width:768px)\nand\n(max-width:1180px) {\n\n  .next-story-layout {\n\n    \/*\n      Contin\u00faa siendo 50\/50.\n      La altura de la secci\u00f3n sigue siendo exactamente\n      la mitad del viewport horizontal.\n    *\/\n\n    height:\n      50vw;\n\n    min-height:\n      50vw;\n\n  }\n\n\n  .next-story-copy {\n\n    padding:\n      32px;\n\n  }\n\n\n  .next-story-title {\n\n    font-size:\n      clamp(72px, 9.6vw, 112px);\n\n    line-height:\n      .80;\n\n  }\n\n\n  .next-story-button {\n\n    width:\n      210px;\n\n    height:\n      56px;\n\n    margin-top:\n      28px;\n\n    font-size:\n      17px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media\n(max-width:767px) {\n\n  .next-story-layout {\n\n    display:\n      flex;\n\n    flex-direction:\n      column;\n\n    width:\n      100%;\n\n    height:\n      auto;\n\n    min-height:\n      0;\n\n    overflow:\n      visible;\n\n  }\n\n\n  .next-story-copy {\n\n    width:\n      100%;\n\n    height:\n      auto;\n\n    min-height:\n      52svh;\n\n    padding:\n      42px 18px;\n\n  }\n\n\n  .next-story-content {\n\n    min-height:\n      calc(52svh - 84px);\n\n  }\n\n\n  .next-story-title {\n\n    font-size:\n      clamp(74px, 22vw, 108px);\n\n    line-height:\n      .80;\n\n  }\n\n\n  .next-story-title span {\n\n    white-space:\n      normal;\n\n  }\n\n\n  .next-story-button {\n\n    width:\n      200px;\n\n    height:\n      54px;\n\n    margin-top:\n      26px;\n\n    padding:\n      0 16px;\n\n    font-size:\n      16px;\n\n  }\n\n\n  .next-story-media {\n\n    width:\n      100%;\n\n    height:\n      auto;\n\n    min-height:\n      0;\n\n    aspect-ratio:\n      1 \/ 1;\n\n  }\n\n}\n\/* =========================================================\n   TABLET \u2014 HIDE HEADQUARTERS IMAGE\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1180px) {\n\n  .bplr-contact-photo,\n  .contact-image {\n\n    display: none !important;\n\n    visibility: hidden !important;\n\n    opacity: 0 !important;\n\n    width: 0 !important;\n    min-width: 0 !important;\n    max-width: 0 !important;\n\n    height: 0 !important;\n    min-height: 0 !important;\n    max-height: 0 !important;\n\n    flex: 0 0 0 !important;\n\n    margin: 0 !important;\n    padding: 0 !important;\n\n    overflow: hidden !important;\n\n    pointer-events: none !important;\n\n  }\n\n}\n<\/style>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3566d2d5 e-con-full bplr-contact e-flex e-con e-child\" data-id=\"3566d2d5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;bottom&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;],&quot;sticky_parent&quot;:&quot;yes&quot;,&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6381ed9 elementor-widget elementor-widget-html\" data-id=\"6381ed9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     BPLR HOME CONTACT \u2014 MASTER V4\n     RESPONSIVE \/ STANDALONE \/ CLONABLE\n     TITLE ALWAYS CENTERED\n========================================================= -->\n\n<section class=\"bplr-home-contact\">\n\n  <!-- TITLE -->\n  <div class=\"bplr-home-contact__header\">\n\n    <h2 class=\"bplr-home-contact__title\">\n\n      <span class=\"bplr-home-contact__title-fit\">\n\n        <span class=\"bplr-home-contact__title-line\">\n          <span class=\"bplr-home-contact__word\">GET<\/span>\n          <span class=\"bplr-home-contact__word\">IN<\/span>\n        <\/span>\n\n        <span class=\"bplr-home-contact__title-line\">\n          <span class=\"bplr-home-contact__word\">TOUCH<\/span>\n        <\/span>\n\n      <\/span>\n\n    <\/h2>\n\n  <\/div>\n\n\n  <!-- DIVIDER -->\n  <div class=\"bplr-home-contact__divider\"><\/div>\n\n\n  <!-- CONTENT -->\n  <div class=\"bplr-home-contact__body\">\n\n\n    <!-- MAIN -->\n    <div class=\"\n      bplr-home-contact__column\n      bplr-home-contact__column--main\n    \">\n\n      <div class=\"bplr-home-contact__pitch\">\n        GOT SOMETHING IN MIND? LET'S MAKE IT HAPPEN.\n      <\/div>\n\n\n      <!-- EMAIL -->\n      <a\n        href=\"mailto:hello@bipolar.mx\"\n        class=\"bplr-home-contact__email\"\n      >\n\n        <span class=\"bplr-home-contact__email-text\">\n          SEND E-MAIL\n        <\/span>\n\n        <span class=\"bplr-home-contact__arrow\">\n          \u2192\n        <\/span>\n\n      <\/a>\n\n\n      <!-- FOLLOW -->\n      <div class=\"bplr-home-contact__follow\">\n\n        <div class=\"bplr-home-contact__follow-title\">\n          FOLLOW US\n        <\/div>\n\n\n        <div class=\"bplr-home-contact__socials\">\n\n\n          <!-- INSTAGRAM -->\n          <a\n            href=\"https:\/\/www.instagram.com\/bipolar.mx\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"bplr-home-contact__social\"\n            aria-label=\"Instagram\"\n          >\n\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"\n                M12 2.163\n                c3.204 0 3.584.012 4.85.07\n                3.252.148 4.771 1.691 4.919 4.919\n                .058 1.265.069 1.645.069 4.849\n                s-.012 3.584-.069 4.849\n                c-.149 3.225-1.664 4.771-4.919 4.919\n                -1.266.058-1.644.069-4.85.069\n                s-3.584-.012-4.849-.069\n                c-3.26-.149-4.771-1.699-4.919-4.92\n                -.058-1.265-.07-1.644-.07-4.849\n                s.013-3.583.07-4.849\n                C2.381 3.924 3.896 2.38 7.151 2.232\n                8.417 2.175 8.796 2.163 12 2.163z\n\n                M12 0\n                C8.741 0 8.332.014 7.052.072\n                2.695.272.273 2.69.073 7.052\n                .014 8.333 0 8.741 0 12\n                c0 3.259.014 3.668.072 4.948\n                .2 4.358 2.618 6.78 6.98 6.98\n                C8.333 23.986 8.741 24 12 24\n                c3.259 0 3.668-.014 4.948-.072\n                4.354-.2 6.782-2.618 6.979-6.98\n                .059-1.28.073-1.689.073-4.948\n                0-3.259-.014-3.667-.072-4.947\n                -.196-4.354-2.617-6.78-6.979-6.98\n                C15.668.014 15.259 0 12 0z\n\n                M12 5.838\n                A6.162 6.162 0 1 0 12 18.162\n                6.162 6.162 0 0 0 12 5.838z\n\n                M12 16\n                a4 4 0 1 1 0-8\n                4 4 0 0 1 0 8z\n\n                M18.406 4.155\n                a1.44 1.44 0 1 0 0 2.881\n                1.44 1.44 0 0 0 0-2.881z\n              \"><\/path>\n            <\/svg>\n\n          <\/a>\n\n\n          <!-- LINKEDIN -->\n          <a\n            href=\"https:\/\/www.linkedin.com\/company\/bipolarmx\/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"bplr-home-contact__social\"\n            aria-label=\"LinkedIn\"\n          >\n\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"\n                M20.447 20.452\n                h-3.554\n                v-5.569\n                c0-1.328-.027-3.037-1.852-3.037\n                -1.853 0-2.136 1.445-2.136 2.939\n                v5.667\n                H9.351V9\n                h3.414\n                v1.561\n                h.046\n                c.477-.9 1.637-1.85 3.37-1.85\n                3.601 0 4.267 2.37 4.267 5.455\n                v6.286z\n\n                M5.337 7.433\n                a2.062 2.062 0 1 1 0-4.124\n                2.062 2.062 0 0 1 0 4.124z\n\n                M7.119 20.452\n                H3.555V9H7.12\n                v11.452z\n              \"><\/path>\n            <\/svg>\n\n          <\/a>\n\n\n          <!-- VIMEO -->\n          <a\n            href=\"https:\/\/vimeo.com\/user101049977\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"bplr-home-contact__social\"\n            aria-label=\"Vimeo\"\n          >\n\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"\n                M23.977 6.416\n                c-.105 2.338-1.739 5.542-4.894 9.608\n                -3.265 4.268-6.027 6.403-8.286 6.403\n                -1.402 0-2.586-1.29-3.553-3.873\n                l-1.934-7.093\n                c-.72-2.584-1.493-3.875-2.321-3.875\n                -.18 0-.806.378-1.878 1.132\n                L0 7.261\n                a52.861 52.861 0 0 1 3.501-3.125\n                c1.579-1.364 2.765-2.08 3.553-2.152\n                1.864-.18 3.011 1.096 3.442 3.827\n                .467 2.947.791 4.779.971 5.493\n                .539 2.444 1.13 3.665 1.777 3.665\n                .503 0 1.258-.795 2.266-2.386\n                1.006-1.591 1.545-2.803 1.617-3.635\n                .144-1.376-.395-2.064-1.617-2.064\n                -.575 0-1.168.132-1.777.394\n                1.18-3.867 3.434-5.745 6.761-5.636\n                2.466.072 3.627 1.664 3.483 4.774z\n              \"><\/path>\n            <\/svg>\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- VISIT -->\n    <div class=\"\n      bplr-home-contact__column\n      bplr-home-contact__column--visit\n    \">\n\n      <div class=\"bplr-home-contact__visit-title\">\n        VISIT US\n      <\/div>\n\n\n      <div class=\"bplr-home-contact__address\">\n\n        <strong>\n          Headquarters\n        <\/strong>\n\n        <span>\n          L\u00e1zaro C\u00e1rdenas 2424,<br>\n          Loma Larga Oriente<br>\n          San Pedro Garza Garc\u00eda<br>\n          Nuevo Le\u00f3n, M\u00e9xico<br>\n          C.P. 66266\n        <\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- IMAGE \u2014 DESKTOP ONLY -->\n    <div class=\"\n      bplr-home-contact__column\n      bplr-home-contact__column--media\n    \">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/bipolar.mx\/stanging\/wp-content\/uploads\/2026\/10\/Trebol.jpg\"\n        alt=\"Bipolar headquarters\"\n        class=\"bplr-home-contact__image\"\n      >\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n.bplr-home-contact,\n.bplr-home-contact *,\n.bplr-home-contact *::before,\n.bplr-home-contact *::after {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n.bplr-home-contact {\n  position: relative;\n\n  width: 100% !important;\n  max-width: none !important;\n\n  margin: 0 !important;\n\n  padding:\n    clamp(44px, 5vh, 72px)\n    clamp(28px, 3.2vw, 60px)\n    clamp(54px, 6vh, 86px);\n\n  overflow: hidden;\n\n  background: #f4f4f4;\n\n  color: #0b0b0d;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.bplr-home-contact__header {\n  width: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: visible;\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.bplr-home-contact__title {\n  width: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n\n  align-items: baseline;\n  justify-content: center;\n\n  text-align: center;\n\n  color: #0b0b0d;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n\n  font-size: 200px;\n\n  font-weight: 800;\n\n  line-height: .76;\n\n  letter-spacing: -.035em;\n\n  font-kerning: none;\n\n  font-feature-settings:\n    \"kern\" 0;\n\n  text-transform: uppercase;\n}\n\n\n.bplr-home-contact__title-fit {\n  display: inline-flex;\n\n  width: max-content;\n\n  align-items: baseline;\n  justify-content: center;\n\n  gap: .105em;\n\n  margin: 0 auto;\n\n  white-space: nowrap;\n}\n\n\n\/* Desktop + Tablet = one line *\/\n.bplr-home-contact__title-line {\n  display: contents;\n}\n\n\n\/* =========================================================\n   TITLE ANIMATION\n========================================================= *\/\n\n.bplr-home-contact__word {\n  display: inline-block;\n\n  margin: 0;\n  padding: 0;\n\n  opacity: 0;\n\n  transform:\n    translateY(.16em);\n\n  transition:\n    opacity .34s ease,\n    transform .5s cubic-bezier(.22,.8,.3,1);\n\n  will-change:\n    opacity,\n    transform;\n}\n\n\n.bplr-home-contact__word.is-visible {\n  opacity: 1;\n\n  transform:\n    translateY(0);\n}\n\n\n\/* =========================================================\n   DIVIDER\n========================================================= *\/\n\n.bplr-home-contact__divider {\n  width: 100%;\n  height: 1px;\n\n  margin:\n    clamp(34px, 4vh, 54px)\n    0\n    0;\n\n  background:\n    rgba(11,11,13,.82);\n\n  transform:\n    scaleX(0);\n\n  transform-origin:\n    left center;\n\n  transition:\n    transform .7s cubic-bezier(.22,.8,.3,1);\n}\n\n\n.bplr-home-contact__divider.is-visible {\n  transform:\n    scaleX(1);\n}\n\n\n\/* =========================================================\n   BODY\n========================================================= *\/\n\n.bplr-home-contact__body {\n  width: 100%;\n\n  margin:\n    clamp(40px, 4.5vh, 64px)\n    0\n    0;\n\n  padding: 0;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, 1.55fr)\n    minmax(230px, .62fr)\n    minmax(280px, .68fr);\n\n  column-gap:\n    clamp(38px, 4vw, 76px);\n\n  align-items: start;\n\n  opacity: 0;\n\n  transform:\n    translateY(20px);\n\n  transition:\n    opacity .52s ease,\n    transform .62s cubic-bezier(.22,.8,.3,1);\n}\n\n\n.bplr-home-contact__body.is-visible {\n  opacity: 1;\n\n  transform:\n    translateY(0);\n}\n\n\n.bplr-home-contact__column {\n  min-width: 0;\n}\n\n\n\/* =========================================================\n   PITCH\n========================================================= *\/\n\n.bplr-home-contact__pitch {\n  max-width: 760px;\n\n  margin: 0;\n  padding: 0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(26px, 2vw, 38px);\n\n  font-weight: 800;\n\n  line-height: .98;\n\n  letter-spacing: -.018em;\n\n  text-transform: uppercase;\n\n  color: #0b0b0d;\n}\n\n\n\/* =========================================================\n   EMAIL\n========================================================= *\/\n\n.bplr-home-contact__email,\n.bplr-home-contact__email:link,\n.bplr-home-contact__email:visited,\n.bplr-home-contact__email:hover,\n.bplr-home-contact__email:focus,\n.bplr-home-contact__email:active {\n\n  width:\n    min(360px, 100%) !important;\n\n  min-height:\n    58px !important;\n\n  margin-top:\n    22px !important;\n\n  padding:\n    0 20px !important;\n\n  display:\n    flex !important;\n\n  align-items:\n    center !important;\n\n  justify-content:\n    space-between !important;\n\n  gap:\n    20px !important;\n\n  background:\n    transparent !important;\n\n  border:\n    1px solid rgba(11,11,13,.72) !important;\n\n  border-radius:\n    0 !important;\n\n  color:\n    #0b0b0d !important;\n\n  box-shadow:\n    none !important;\n\n  outline:\n    none !important;\n\n  text-decoration:\n    none !important;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(17px, 1.2vw, 21px) !important;\n\n  font-weight:\n    800 !important;\n\n  line-height:\n    1 !important;\n\n  text-transform:\n    uppercase !important;\n\n  transition:\n    background-color .25s ease,\n    color .25s ease;\n}\n\n\n.bplr-home-contact__email-text {\n  display: inline-block;\n\n  transform:\n    skewX(0deg);\n\n  transition:\n    transform .25s ease;\n}\n\n\n.bplr-home-contact__arrow {\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:\n    1.45em;\n\n  font-weight:\n    400;\n\n  line-height:\n    1;\n}\n\n\n@media\n(hover: hover)\nand\n(pointer: fine) {\n\n  .bplr-home-contact__email:hover {\n    background:\n      #0b0b0d !important;\n\n    color:\n      #fff !important;\n  }\n\n\n  .bplr-home-contact__email:hover\n  .bplr-home-contact__email-text {\n    transform:\n      skewX(-10deg);\n  }\n\n}\n\n\n\/* =========================================================\n   FOLLOW \/ VISIT TITLES\n========================================================= *\/\n\n.bplr-home-contact__follow {\n  margin-top:\n    clamp(38px, 4vh, 54px);\n}\n\n\n.bplr-home-contact__follow-title,\n.bplr-home-contact__visit-title {\n  margin: 0;\n  padding: 0;\n\n  font-family:\n    \"Barlow Condensed\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(28px, 2vw, 38px);\n\n  font-weight:\n    800;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    -.02em;\n\n  text-transform: uppercase;\n\n  color: #0b0b0d;\n}\n\n\n\/* =========================================================\n   SOCIAL\n========================================================= *\/\n\n.bplr-home-contact__socials {\n  margin-top:\n    14px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: flex-start;\n\n  gap: 10px;\n}\n\n\n.bplr-home-contact__social,\n.bplr-home-contact__social:link,\n.bplr-home-contact__social:visited,\n.bplr-home-contact__social:hover,\n.bplr-home-contact__social:focus,\n.bplr-home-contact__social:active {\n\n  width: 46px;\n  height: 46px;\n\n  flex:\n    0 0 46px;\n\n  margin: 0;\n\n  padding: 11px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  background:\n    #303030 !important;\n\n  border:\n    0 !important;\n\n  border-radius:\n    50% !important;\n\n  color:\n    #fff !important;\n\n  box-shadow:\n    none !important;\n\n  outline:\n    none !important;\n\n  text-decoration:\n    none !important;\n\n  transition:\n    transform .22s ease,\n    background-color .22s ease;\n}\n\n\n.bplr-home-contact__social svg {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: visible;\n\n  fill:\n    currentColor !important;\n\n  stroke:\n    none !important;\n\n  color: #fff;\n}\n\n\n.bplr-home-contact__social svg path {\n  fill:\n    currentColor !important;\n\n  stroke:\n    none !important;\n}\n\n\n@media\n(hover: hover)\nand\n(pointer: fine) {\n\n  .bplr-home-contact__social:hover {\n    transform:\n      translateY(-3px);\n\n    background:\n      #0b0b0d !important;\n  }\n\n}\n\n\n\/* =========================================================\n   VISIT\n========================================================= *\/\n\n.bplr-home-contact__column--visit {\n  padding-top: 2px;\n}\n\n\n.bplr-home-contact__address {\n  margin-top:\n    16px;\n\n  color:\n    #272729;\n\n  font-family:\n    \"Barlow\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 22px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.32;\n}\n\n\n.bplr-home-contact__address strong {\n  display: block;\n\n  margin-bottom:\n    4px;\n\n  color:\n    #0b0b0d;\n\n  font-weight:\n    700;\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.bplr-home-contact__column--media {\n  width: 100%;\n}\n\n\n.bplr-home-contact__image {\n  display: block;\n\n  width: 100%;\n\n  aspect-ratio:\n    1 \/ 1;\n\n  margin: 0;\n  padding: 0;\n\n  object-fit:\n    cover;\n\n  object-position:\n    center center;\n}\n\n\n\/* =========================================================\n   TABLET\n   768 \u2014 1180\n========================================================= *\/\n\n@media\n(min-width: 768px)\nand\n(max-width: 1180px) {\n\n  .bplr-home-contact {\n    padding:\n      50px\n      40px\n      58px;\n  }\n\n\n  \/* TITLE = ONE LINE \/ CENTERED *\/\n\n  .bplr-home-contact__title-fit {\n    display: inline-flex;\n\n    flex-direction: row;\n\n    align-items: baseline;\n    justify-content: center;\n\n    gap: .105em;\n\n    margin: 0 auto;\n\n    white-space: nowrap;\n  }\n\n\n  .bplr-home-contact__title-line {\n    display: contents;\n  }\n\n\n  \/* BODY *\/\n\n  .bplr-home-contact__body {\n    grid-template-columns:\n      minmax(0, 1.35fr)\n      minmax(250px, .65fr);\n\n    column-gap:\n      54px;\n\n    margin-top:\n      46px;\n  }\n\n\n  \/* IMAGE OFF *\/\n\n  .bplr-home-contact__column--media {\n    display:\n      none;\n  }\n\n\n  .bplr-home-contact__pitch {\n    font-size:\n      clamp(28px, 3.5vw, 38px);\n  }\n\n\n  .bplr-home-contact__email,\n  .bplr-home-contact__email:link,\n  .bplr-home-contact__email:visited,\n  .bplr-home-contact__email:hover,\n  .bplr-home-contact__email:focus,\n  .bplr-home-contact__email:active {\n\n    width:\n      340px !important;\n\n    min-height:\n      60px !important;\n\n    font-size:\n      19px !important;\n  }\n\n\n  .bplr-home-contact__follow-title,\n  .bplr-home-contact__visit-title {\n    font-size:\n      32px;\n  }\n\n\n  .bplr-home-contact__address {\n    font-size:\n      19px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   0 \u2014 767\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .bplr-home-contact {\n    padding:\n      40px\n      24px\n      50px;\n  }\n\n\n  \/* =====================================================\n     TITLE\n     CENTERED \/ EXACTLY TWO LINES\n     GET IN\n     TOUCH\n  ===================================================== *\/\n\n  .bplr-home-contact__title {\n    align-items:\n      center;\n\n    justify-content:\n      center;\n\n    line-height:\n      .78;\n\n    text-align:\n      center;\n  }\n\n\n  .bplr-home-contact__title-fit {\n    display:\n      flex;\n\n    flex-direction:\n      column;\n\n    align-items:\n      center;\n\n    justify-content:\n      flex-start;\n\n    gap:\n      0;\n\n    width:\n      max-content;\n\n    margin:\n      0 auto;\n\n    white-space:\n      normal;\n  }\n\n\n  .bplr-home-contact__title-line {\n    display:\n      flex;\n\n    align-items:\n      baseline;\n\n    justify-content:\n      center;\n\n    width:\n      max-content;\n\n    gap:\n      .105em;\n\n    white-space:\n      nowrap;\n\n    text-align:\n      center;\n  }\n\n\n  \/* DIVIDER *\/\n\n  .bplr-home-contact__divider {\n    margin-top:\n      28px;\n  }\n\n\n  \/* BODY *\/\n\n  .bplr-home-contact__body {\n    display:\n      block;\n\n    margin-top:\n      34px;\n  }\n\n\n  \/* HIDE VISIT + IMAGE *\/\n\n  .bplr-home-contact__column--visit,\n  .bplr-home-contact__column--media {\n    display:\n      none;\n  }\n\n\n  \/* PITCH *\/\n\n  .bplr-home-contact__pitch {\n    max-width:\n      100%;\n\n    font-size:\n      clamp(28px, 8vw, 38px);\n\n    line-height:\n      .98;\n  }\n\n\n  \/* EMAIL *\/\n\n  .bplr-home-contact__email,\n  .bplr-home-contact__email:link,\n  .bplr-home-contact__email:visited,\n  .bplr-home-contact__email:hover,\n  .bplr-home-contact__email:focus,\n  .bplr-home-contact__email:active {\n\n    width:\n      100% !important;\n\n    min-height:\n      60px !important;\n\n    margin-top:\n      22px !important;\n\n    font-size:\n      18px !important;\n  }\n\n\n  \/* FOLLOW *\/\n\n  .bplr-home-contact__follow {\n    margin-top:\n      40px;\n  }\n\n\n  .bplr-home-contact__follow-title {\n    font-size:\n      32px;\n  }\n\n\n  .bplr-home-contact__socials {\n    margin-top:\n      14px;\n  }\n\n\n  .bplr-home-contact__social {\n    width:\n      46px;\n\n    height:\n      46px;\n\n    flex-basis:\n      46px;\n\n    padding:\n      11px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const contact =\n    document.querySelector(\n      '.bplr-home-contact'\n    );\n\n\n  if (!contact) return;\n\n\n  const title =\n    contact.querySelector(\n      '.bplr-home-contact__title'\n    );\n\n\n  const titleFit =\n    contact.querySelector(\n      '.bplr-home-contact__title-fit'\n    );\n\n\n  const titleLines =\n    Array.from(\n      contact.querySelectorAll(\n        '.bplr-home-contact__title-line'\n      )\n    );\n\n\n  const words =\n    Array.from(\n      contact.querySelectorAll(\n        '.bplr-home-contact__word'\n      )\n    );\n\n\n  const divider =\n    contact.querySelector(\n      '.bplr-home-contact__divider'\n    );\n\n\n  const body =\n    contact.querySelector(\n      '.bplr-home-contact__body'\n    );\n\n\n\n  \/* =====================================================\n     NORMALIZE ELEMENTOR\n  ===================================================== *\/\n\n  function normalizeHomeContact() {\n\n    const widget =\n      contact.closest(\n        '.elementor-widget-html'\n      );\n\n\n    if (widget) {\n\n      widget.style.width =\n        '100%';\n\n      widget.style.maxWidth =\n        'none';\n\n      widget.style.flex =\n        '0 0 100%';\n\n      widget.style.flexBasis =\n        '100%';\n\n      widget.style.alignSelf =\n        'stretch';\n\n      widget.style.margin =\n        '0';\n\n      widget.style.padding =\n        '0';\n\n      widget.style.minWidth =\n        '0';\n\n    }\n\n\n    const container =\n      widget\n        ? widget.closest('.e-con')\n        : null;\n\n\n    if (container) {\n\n      container.style.width =\n        '100%';\n\n      container.style.maxWidth =\n        'none';\n\n      container.style.flex =\n        '0 0 100%';\n\n      container.style.flexBasis =\n        '100%';\n\n      container.style.alignSelf =\n        'stretch';\n\n      container.style.margin =\n        '0';\n\n      container.style.padding =\n        '0';\n\n      container.style.gap =\n        '0';\n\n      container.style.minWidth =\n        '0';\n\n    }\n\n\n    if (\n      widget &&\n      widget.parentElement &&\n      widget.parentElement !== container\n    ) {\n\n      const parent =\n        widget.parentElement;\n\n\n      parent.style.width =\n        '100%';\n\n      parent.style.maxWidth =\n        'none';\n\n      parent.style.flex =\n        '0 0 100%';\n\n      parent.style.flexBasis =\n        '100%';\n\n      parent.style.alignSelf =\n        'stretch';\n\n      parent.style.margin =\n        '0';\n\n      parent.style.padding =\n        '0';\n\n      parent.style.gap =\n        '0';\n\n      parent.style.minWidth =\n        '0';\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     TITLE AUTO-FIT\n\n     DESKTOP\/TABLET:\n     GET IN TOUCH = ONE LINE \/ CENTERED\n\n     MOBILE:\n     GET IN\n     TOUCH\n\n     Siempre centrado.\n  ===================================================== *\/\n\n  function fitContactTitle() {\n\n    if (\n      !title ||\n      !titleFit\n    ) {\n\n      return;\n\n    }\n\n\n    const available =\n      title.clientWidth;\n\n\n    if (\n      !available\n    ) {\n\n      return;\n\n    }\n\n\n    \/* Base de medici\u00f3n *\/\n\n    title.style.fontSize =\n      '100px';\n\n\n    let naturalWidth =\n      0;\n\n\n    if (\n      window.innerWidth <= 767\n    ) {\n\n      titleLines.forEach(\n        function (line) {\n\n          naturalWidth =\n            Math.max(\n              naturalWidth,\n              line.scrollWidth\n            );\n\n        }\n      );\n\n    } else {\n\n      naturalWidth =\n        titleFit.scrollWidth;\n\n    }\n\n\n    if (\n      !naturalWidth\n    ) {\n\n      return;\n\n    }\n\n\n    const targetWidth =\n      available * .985;\n\n\n    let calculatedSize =\n      100 *\n      (\n        targetWidth \/\n        naturalWidth\n      );\n\n\n    \/* Safety caps *\/\n\n    if (\n      window.innerWidth > 1180\n    ) {\n\n      calculatedSize =\n        Math.min(\n          calculatedSize,\n          320\n        );\n\n    } else if (\n      window.innerWidth >= 768\n    ) {\n\n      calculatedSize =\n        Math.min(\n          calculatedSize,\n          210\n        );\n\n    } else {\n\n      calculatedSize =\n        Math.min(\n          calculatedSize,\n          150\n        );\n\n    }\n\n\n    calculatedSize =\n      Math.max(\n        calculatedSize,\n        68\n      );\n\n\n    title.style.fontSize =\n      calculatedSize +\n      'px';\n\n  }\n\n\n\n  \/* =====================================================\n     CONTACT ANIMATION\n  ===================================================== *\/\n\n  let hasPlayed =\n    false;\n\n\n  function playContact() {\n\n    if (\n      hasPlayed\n    ) {\n\n      return;\n\n    }\n\n\n    hasPlayed =\n      true;\n\n\n    const initialDelay =\n      100;\n\n\n    const wordStep =\n      180;\n\n\n    words.forEach(\n      function (\n        word,\n        index\n      ) {\n\n        setTimeout(\n          function () {\n\n            word.classList.add(\n              'is-visible'\n            );\n\n          },\n\n          initialDelay +\n          (\n            index *\n            wordStep\n          )\n\n        );\n\n      }\n    );\n\n\n    const contentMoment =\n      initialDelay +\n      (\n        words.length *\n        wordStep\n      )\n      +\n      160;\n\n\n    setTimeout(\n      function () {\n\n        if (\n          divider\n        ) {\n\n          divider.classList.add(\n            'is-visible'\n          );\n\n        }\n\n      },\n\n      contentMoment\n    );\n\n\n    setTimeout(\n      function () {\n\n        if (\n          body\n        ) {\n\n          body.classList.add(\n            'is-visible'\n          );\n\n        }\n\n      },\n\n      contentMoment +\n      180\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     OBSERVER\n  ===================================================== *\/\n\n  const observer =\n    new IntersectionObserver(\n\n      function (entries) {\n\n        entries.forEach(\n          function (entry) {\n\n            if (\n              entry.isIntersecting &&\n              entry.intersectionRatio >=\n              .16\n            ) {\n\n              playContact();\n\n              observer.disconnect();\n\n            }\n\n          }\n        );\n\n      },\n\n      {\n        threshold:\n          [\n            .06,\n            .12,\n            .16,\n            .24\n          ]\n      }\n\n    );\n\n\n  observer.observe(\n    contact\n  );\n\n\n\n  \/* =====================================================\n     INIT\n  ===================================================== *\/\n\n  normalizeHomeContact();\n\n  fitContactTitle();\n\n\n  requestAnimationFrame(\n    function () {\n\n      normalizeHomeContact();\n\n      fitContactTitle();\n\n    }\n  );\n\n\n  setTimeout(\n    function () {\n\n      normalizeHomeContact();\n\n      fitContactTitle();\n\n    },\n\n    250\n  );\n\n\n  setTimeout(\n    function () {\n\n      normalizeHomeContact();\n\n      fitContactTitle();\n\n    },\n\n    700\n  );\n\n\n\n  \/* =====================================================\n     FONT READY\n  ===================================================== *\/\n\n  if (\n    document.fonts &&\n    document.fonts.ready\n  ) {\n\n    document.fonts.ready.then(\n      function () {\n\n        fitContactTitle();\n\n      }\n    );\n\n  }\n\n\n\n  \/* =====================================================\n     RESIZE\n  ===================================================== *\/\n\n  let resizeTimer;\n\n\n  window.addEventListener(\n    'resize',\n\n    function () {\n\n      clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        setTimeout(\n          function () {\n\n            normalizeHomeContact();\n\n            fitContactTitle();\n\n          },\n\n          120\n        );\n\n    }\n  );\n\n})();\n\n<\/script>\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-58428b52 e-con-full e-flex e-con e-child\" data-id=\"58428b52\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31ee7b21 elementor-widget elementor-widget-heading\" data-id=\"31ee7b21\" 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\">\u00a9 BIPOLAR 2026 <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b2e0ded elementor-widget elementor-widget-heading\" data-id=\"7b2e0ded\" 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\">PRIVACY \/ LEGAL<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ABOUT WORK JOIN US ABOUT WORK JOIN US Headquarters L\u00e1zaro C\u00e1rdenas 2424, Loma Larga Oriente San Pedro Garza Garc\u00eda Nuevo Le\u00f3n, M\u00e9xico C.P. 66266 TIM HORTONS CAMBIA EL MOOD CAMBIA EL MOOD A BURST OF COLOR, FLAVOR AND REFRESHMENT MADE TO SHIFT THE MOOD. IDEA Summer heat doesn\u2019t just change the temperature. It changes the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-837","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/pages\/837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":10,"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/pages\/837\/revisions"}],"predecessor-version":[{"id":902,"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/pages\/837\/revisions\/902"}],"wp:attachment":[{"href":"https:\/\/bipolar.mx\/es\/wp-json\/wp\/v2\/media?parent=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}