{"id":276,"date":"2024-11-06T22:31:45","date_gmt":"2024-11-06T22:31:45","guid":{"rendered":"https:\/\/coecocreative.com\/?page_id=276"},"modified":"2025-02-01T16:30:54","modified_gmt":"2025-02-01T16:30:54","slug":"clientes","status":"publish","type":"page","link":"https:\/\/coecocreative.com\/?page_id=276","title":{"rendered":"Clientes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"276\" class=\"elementor elementor-276\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79e73b2 e-flex e-con-boxed e-con e-parent\" data-id=\"79e73b2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3c95f5 elementor-widget elementor-widget-html\" data-id=\"e3c95f5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n.entry-title{\r\n    display:none !important;\r\n}\r\n\r\n#title_clientes {\r\n    font-family: \"Open Sans\";\r\n    text-align: center;\r\n    color: #42230F;\r\n    font-weight: 400;\r\n    font-size: 94px;\r\n    margin: 0;\r\n    line-height: 0.9; \r\n}\r\n\r\n#title_clientes svg {\r\n    width: 70px; \r\n    height: 70px;\r\n    vertical-align: middle; \r\n    margin-left: 150px;\r\n}\r\n\r\n\r\n\r\n@media (max-width: 768px) {\r\n    #title_clientes {\r\n        font-size: 64px;\r\n    }\r\n\r\n #title_clientes svg {\r\n        width: 50px; \r\n        height: 50px;\r\n        margin-left: 50px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    #title_clientes {\r\n        font-size: 34px;\r\n    }\r\n\r\n    #title_clientes svg {\r\n        width: 30px; \r\n        height: 30px;\r\n        margin-right:25px;  \r\n    }\r\n}\r\n<\/style>\r\n\r\n<h2 id=\"title_clientes\">\r\n    CLIENTES\r\n<svg version=\"1.1\" viewBox=\"0 0 1991 2048\" width=\"531\" height=\"546\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path transform=\"translate(1721)\" d=\"m0 0 5 1 13 12 44 44 8 7 50 50 8 7 53 53 6 5 7 8 17 17 8 7 11 11 3 2v2l4 2 22 22v2l4 2 7 7-6 7-18 18-5 6-53 53-1 2h-2l-2 4-34 34-9 10h-2l-2 4h-2v2l-58 58-7 8-46 46-7 8-47 47-7 8-47 47-7 8-48 48-7 8-46 46-7 8-47 47-7 8-46 46-7 8-48 48-7 8-46 46-7 8-47 47-7 8-46 46-7 8-49 49-7 8-44 44-7 8-49 49-7 8-48 48-7 8-49 49-3 4h-2l-1 3-5 4-3 4h-2l-2 4h-2v2l-6 5-3 4h-2l-2 4-19 19-1 2h-2l-2 4-9 9h-2v2h-2v2h-2l-2 4-5 5h-2v2h-2v2h-2l-2 4-20 20-3 4h-2l-2 4-48 48-2 3h-2l-1 3-7 6-1 2h-2l-2 4-6 5-5 6h-2l-2 4-7 7h-2l-2 4-46 46-3 4h-2l-2 4-52 52-14 16h1248l1 1v374h-1662l-25-3-22-5-18-6-20-9-17-10-11-8-16-13-15-15-8-10-10-14-9-15-10-21-7-21-7-30v-1736h324l22 1 1 1v1266h3v-2h2l2-4 74-74 5-6h2l2-4 49-49 7-8 46-46 1-2h2l2-4 48-48 7-8 50-50 7-8 45-45 7-8 47-47 7-8 47-47 7-8 47-47 7-8 48-48 7-8 45-45 7-8 47-47 7-8 48-48 7-8 46-46 7-8 46-46 7-8 49-49 2-3h2l2-4 46-46 7-8 48-48 2-3h2l2-4 45-45 7-8 53-53 2-3h2l1-3 4-4h2l2-4h2l2-4 5-4 6-7h2l2-4 7-7h2l2-4 15-15 7-8 3-3h2l2-4 11-11h2l2-4 24-24 8-9 8-7 6-7 8-7 5-6h2l2-4 8-8 7-8 6-6h2l2-4 11-11h2l2-4 66-66z\" fill=\"#DF9135\"\/>\r\n<\/svg>\r\n\r\n    \r\n<\/h2>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-83080ea e-flex e-con-boxed e-con e-parent\" data-id=\"83080ea\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8caafd7 elementor-widget elementor-widget-html\" data-id=\"8caafd7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n  <style>\r\n    #contenedor {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr); \r\n      grid-template-rows: repeat(3, 150px); \r\n      gap: 15px; \r\n      padding: 20px;\r\n    }\r\n\r\n    #contenedor > div {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      color: white;\r\n      font-size: 16px;\r\n      font-weight: bold;\r\n      text-align: center;\r\n      border-radius: 10px;\r\n      cursor: pointer;\r\n      position: relative;\r\n      background-color: #42230F; \r\n      background-size: cover;\r\n      background-position: center;\r\n      transition: transform 0.1s ease, filter 0.3s ease; \r\n    }\r\n\r\n    #cliente1, #cliente5 {\r\n      background-color: transparent; \r\n      background-size: cover;\r\n      background-position: center;\r\n    }\r\n\r\n    #cliente1 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/Secuencia-01.00_01_58_03.Imagen-fija003-rotated.jpg');\r\n    }\r\n\r\n    #cliente6 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/4E6A5093__44-scaled.jpg');\r\n    }\r\n\r\n    #cliente2 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/159A0078-scaled.jpg');\r\n    }\r\n\r\n    #cliente4 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/4E6A4959-scaled.jpg');\r\n    }\r\n\r\n    #cliente5 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/4E6A8897-scaled.jpg');\r\n    }\r\n\r\n    #cliente3 {\r\n      background-image: url('https:\/\/coecocreative.com\/wp-content\/uploads\/2024\/12\/retoc_-2-scaled.jpg');\r\n      background-position: bottom center;\r\n      background-size: -50% !important; \r\n    }\r\n\r\n    #contenedor > div:hover {\r\n      z-index: 10;\r\n      transform: scale(1.05); \r\n    }\r\n\r\n    #contenedor > div {\r\n      filter: blur(3px);\r\n      transition: filter 0.3s ease;\r\n    }\r\n\r\n    #contenedor > div:hover {\r\n      filter: blur(0); \r\n    }\r\n\r\n    #cliente1 {\r\n      grid-column: 1 \/ 2;\r\n      grid-row: 1 \/ 2;\r\n    }\r\n\r\n    #cliente2 {\r\n      grid-column: 1 \/ 2;\r\n      grid-row: 2 \/ 4;\r\n    }\r\n\r\n    #cliente3 {\r\n      grid-column: 2 \/ 4;\r\n      grid-row: 1 \/ 2;\r\n    }\r\n\r\n    #cliente4 {\r\n      grid-column: 2 \/ 3;\r\n      grid-row: 2 \/ 4;\r\n    }\r\n\r\n    #cliente5 {\r\n      grid-column: 3 \/ 4;\r\n      grid-row: 2 \/ 3;\r\n    }\r\n\r\n    #cliente6 {\r\n      grid-column: 3 \/ 4;\r\n      grid-row: 3 \/ 4;\r\n    }\r\n\r\n    #cliente7 {\r\n      grid-column: 1 \/ 3;\r\n      grid-row: 4 \/ 5;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      #contenedor {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        grid-template-rows: auto; \r\n        margin-bottom: 550px;\r\n      }\r\n\r\n      #contenedor > div {\r\n        width: 100%; \r\n        height: 0;\r\n        padding-bottom: 100%;\r\n      }\r\n\r\n      #cliente1 {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 1 \/ 2;\r\n      }\r\n\r\n      #cliente2 {\r\n        grid-column: 2 \/ 3;\r\n        grid-row: 1 \/ 2;\r\n      }\r\n\r\n      #cliente3 {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 2 \/ 3;\r\n      }\r\n\r\n      #cliente4 {\r\n        grid-column: 2 \/ 3;\r\n        grid-row: 2 \/ 3;\r\n      }\r\n\r\n      #cliente5 {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 3 \/ 4;\r\n      }\r\n\r\n      #cliente6 {\r\n        grid-column: 2 \/ 3;\r\n        grid-row: 3 \/ 4;\r\n      }\r\n\r\n      #cliente7 {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 4 \/ 5;\r\n      }\r\n\r\n      #contenedor > div {\r\n        display: flex;\r\n        font-size: 0px;\r\n        justify-content: center; \r\n        align-items: center;\r\n        text-align: center; \r\n      }\r\n    }\r\n\r\n    \/* Estilos para el modal *\/\r\n    #modal {\r\n      display: none;\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: rgba(0, 0, 0, 0.8);\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n    }\r\n\r\n    #cerrar {\r\n      position: absolute;\r\n      top: 20px;\r\n      right: 20px;\r\n      color: white;\r\n      font-size: 30px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    #imagenModal {\r\n      max-width: 90%;\r\n      max-height: 90%;\r\n      border-radius: 10px;\r\n    }\r\n  <\/style>\r\n\r\n  <div id=\"contenedor\">\r\n    <div id=\"cliente1\"><\/div>\r\n    <div id=\"cliente2\"><\/div>\r\n    <div id=\"cliente3\"><\/div>\r\n    <div id=\"cliente4\"><\/div>\r\n    <div id=\"cliente5\"><\/div>\r\n    <div id=\"cliente6\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Modal -->\r\n  <div id=\"modal\">\r\n    <span id=\"cerrar\">&times;<\/span>\r\n    <img decoding=\"async\" id=\"imagenModal\" src=\"\" alt=\"Imagen ampliada\">\r\n  <\/div>\r\n\r\n  <script>\r\n    const imagenes = document.querySelectorAll(\"#contenedor > div\");\r\n    const modal = document.getElementById(\"modal\");\r\n    const imagenModal = document.getElementById(\"imagenModal\");\r\n    const cerrar = document.getElementById(\"cerrar\");\r\n\r\n    imagenes.forEach(img => {\r\n      img.addEventListener(\"click\", function () {\r\n        const bgImage = window.getComputedStyle(this).backgroundImage;\r\n        const url = bgImage.slice(5, -2); \/\/ Extraer la URL de la imagen\r\n        imagenModal.src = url;\r\n        modal.style.display = \"flex\"; \/\/ Mostrar el modal\r\n      });\r\n    });\r\n\r\n    cerrar.addEventListener(\"click\", () => {\r\n      modal.style.display = \"none\";\r\n    });\r\n\r\n    modal.addEventListener(\"click\", (e) => {\r\n      if (e.target === modal) {\r\n        modal.style.display = \"none\";\r\n      }\r\n    });\r\n  <\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-df33cbf e-flex e-con-boxed e-con e-parent\" data-id=\"df33cbf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74b75f1 elementor-widget elementor-widget-html\" data-id=\"74b75f1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n#title_teunes {\r\n    font-family: \"Open Sans\";\r\n    text-align: right !important;\r\n    text-decoration: none !important;\r\n    color: #42230F;\r\n    font-weight: 400;\r\n    font-size: 64px;\r\n    margin: 0;\r\n    line-height: 0.9; \r\n}\r\n\r\n#title_teunes:hover {\r\n    color: #5F3920;\r\n    transition: color 0.4s ease;\r\n}\r\n#title_teunes svg {\r\n    width: 50px; \r\n    height: 50px;\r\n    vertical-align: middle; \r\n  \r\n}\r\n\r\n\r\n\r\n@media (max-width: 768px) {\r\n    #title_teunes {\r\n        font-size: 44px;\r\n    }\r\n\r\n #title_teunes svg {\r\n   width: 50px; \r\n    height: 50px;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    #title_teunes {\r\n        font-size: 34px;\r\n    }\r\n\r\n    #title_teunes svg {\r\n        width: 30px; \r\n        height: 30px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<a href=\"https:\/\/coecocreative.com\/?page_id=257\" target=\"_blank\" id=\"title_teunes\">\r\n   \u00bfTE UNES?\r\n   <svg version=\"1.1\" viewBox=\"0 0 1991 2048\"  xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path transform=\"translate(153,1)\" d=\"m0 0h1629l28 2 23 4 21 6 21 9 17 9 15 10 16 13 18 18 13 17 12 19 11 23 8 25 5 23 1 7v1731l-3 1h-342l-2-1-1-1267-10 9-25 25-7 8-46 46-7 8-47 47-7 8-46 46-7 8-47 47-7 8-47 47-7 8-49 49-7 8-45 45-7 8-48 48-7 8-47 47-7 8-49 49-5 6-7 6-5 6-8 7-8 9h-2l-2 4h-2l-2 4-15 15-1 2h-2l-2 4-12 11-1 2h-2v2l-8 7-11 12-12 12-5 6-13 13h-2v2l-5 5h-2l-2 4-41 41-5 6-8 7-4 5h-2l-1 3-6 5-7 8-45 45-1 2h-2l-2 4-49 49-7 8-42 42-5 6h-2l-2 4-50 50-7 8-49 49-7 8-45 45-7 8-47 47-7 8-48 48-7 8-46 46-7 8-46 46-7 8-47 47-4 5-4-1-15-14-52-52-8-7-3-3v-2h-2l-13-13v-2h-2l-66-66-8-7-48-48-8-7-40-40 6-7 31-31 7-8 49-49 7-8 45-45 7-8 48-48 7-8 45-45 7-8 48-48 6-7 4-4h2l2-4 11-11h2l2-4 27-27 7-8 47-47 7-8h2l2-4 3-3h2l2-4h2l2-4h2l2-4 3-3h2l2-4h2l2-4 12-12 1-2h2l2-4 61-61 5-6 7-6 15-15 5-6 4-4h2l2-4 46-46 7-8 48-48 7-8 21-21 6-7 8-7 5-5 6-7h2l2-4 53-53 7-8 46-46 7-8 47-47 7-8 45-45 7-8 49-49 7-8 47-47 7-8 45-45 7-8 48-48 7-8 48-48 7-8 46-46 7-8 46-46 7-8 47-47 7-8 2-3-2 1h-1246l-1-1-1-19v-296l1-59z\" fill=\"#42230F\"\/>\r\n<\/svg>\r\n\r\n<\/a>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CLIENTES &times; \u00bfTE UNES?<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-276","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/pages\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coecocreative.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=276"}],"version-history":[{"count":46,"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/pages\/276\/revisions"}],"predecessor-version":[{"id":1688,"href":"https:\/\/coecocreative.com\/index.php?rest_route=\/wp\/v2\/pages\/276\/revisions\/1688"}],"wp:attachment":[{"href":"https:\/\/coecocreative.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}