{"id":52,"date":"2026-09-21T11:43:07","date_gmt":"2026-09-21T14:43:07","guid":{"rendered":"https:\/\/conectacreative.com.br\/?page_id=52"},"modified":"2026-09-21T11:44:12","modified_gmt":"2026-09-21T14:44:12","slug":"home","status":"publish","type":"page","link":"https:\/\/conectacreative.com.br\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"52\" class=\"elementor elementor-52\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8768ed e-con-full e-flex e-con e-parent\" data-id=\"b8768ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5dfa2e elementor-widget elementor-widget-html\" data-id=\"c5dfa2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     CONECTA CREATIVE \u2014 Hero (GSAP scroll morph) + CTA WhatsApp\n     Cole tudo isto num widget \"HTML\" do Elementor.\n     Container: largura total, padding 0, gap 0.\n============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n#cc-site{\n  --ink:#1B1D23;       \/* grafite da marca, escurecido *\/\n  --ink-2:#2B2D33;     \/* grafite do logotipo *\/\n  --paper:#F2F3F6;\n  --mute:#A4A8B3;\n  --pink:#FF1F63;\n  --yellow:#FFC61A;\n  --blue:#12B5F2;\n  --wa:#25D366;\n  --sym:min(64vw, 46svh, 460px);\n  font-family:'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  -webkit-font-smoothing:antialiased;\n  color:#F2F3F5;\n  width:100%;\n}\n#cc-site *,#cc-site *::before,#cc-site *::after{box-sizing:border-box;margin:0;padding:0}\n\n\/* ---------------- HERO ---------------- *\/\n#cc-site .cc-hero{\n  position:relative;\n  height:100vh; height:100svh;\n  background:var(--ink);\n  overflow:hidden;\n}\n#cc-site .cc-symbol{\n  position:absolute;\n  width:var(--sym); height:var(--sym);\n  left:calc(50% - var(--sym) \/ 2);\n  top:calc(42% - var(--sym) \/ 2);\n}\n#cc-site .cc-layer{position:absolute; inset:0; will-change:transform,opacity}\n#cc-site .cc-layer svg{display:block; width:100%; height:100%; overflow:visible}\n\n#cc-site .cc-intro{\n  position:absolute; left:0; right:0;\n  top:calc(42% + var(--sym) \/ 2 + clamp(1rem, 3svh, 2rem));\n  text-align:center; padding:0 6vw;\n}\n#cc-site .cc-brand{\n  font-size:clamp(1.9rem, 4.2vw, 3.4rem);\n  line-height:1; letter-spacing:-.025em; font-weight:400;\n}\n#cc-site .cc-brand b{font-weight:800}\n#cc-site .cc-tag{\n  margin:.9rem auto 0; max-width:34ch;\n  font-size:clamp(1rem, 1.3vw, 1.2rem); line-height:1.45;\n  color:var(--mute); font-weight:500;\n}\n#cc-site .cc-cue{\n  position:absolute; left:0; right:0; bottom:clamp(1.2rem, 4svh, 2.4rem);\n  display:flex; flex-direction:column; align-items:center; gap:.7rem;\n  font-size:.9rem; color:var(--mute); font-weight:500;\n}\n#cc-site .cc-cue i{\n  display:block; width:2px; height:38px; border-radius:2px;\n  background:linear-gradient(var(--pink), var(--blue));\n  transform-origin:top; animation:cc-cue 1.8s cubic-bezier(.65,0,.35,1) infinite;\n}\n@keyframes cc-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}\n\n\/* Palavras (estado final do hero) *\/\n#cc-site .cc-words{\n  position:absolute; inset:0;\n  display:flex; flex-direction:column; justify-content:center; align-items:center;\n  text-align:center; padding:0 5vw; list-style:none; pointer-events:none;\n}\n#cc-site .cc-label{\n  font-size:clamp(.95rem, 1.2vw, 1.1rem); font-weight:500; color:var(--mute);\n  margin-bottom:clamp(.8rem, 2.4svh, 1.6rem); opacity:0;\n}\n#cc-site .cc-words li{display:block}\n#cc-site .cc-word{\n  display:inline-block;\n  font-size:clamp(2.05rem, min(6.3vw, 8.4svh), 6.2rem);\n  line-height:1.04; font-weight:800; letter-spacing:-.03em;\n  padding:.02em .04em;\n  clip-path:inset(50% -6% 50% -6%);\n}\n#cc-site .cc-w0{color:var(--pink)}\n#cc-site .cc-w1{color:#F2F3F5}\n#cc-site .cc-w2{color:var(--yellow)}\n#cc-site .cc-w3{color:var(--blue)}\n#cc-site .cc-w4{\n  background:linear-gradient(90deg, var(--pink), #8A2F9E 50%, var(--blue));\n  -webkit-background-clip:text; background-clip:text; color:transparent;\n}\n\n\/* ---------------- CTA ---------------- *\/\n#cc-site .cc-cta{\n  position:relative; overflow:hidden;\n  background:var(--paper); color:var(--ink);\n  min-height:92vh; min-height:92svh;\n  display:grid; place-items:center;\n  padding:clamp(5rem, 14svh, 9rem) 6vw;\n  text-align:center;\n}\n#cc-site .cc-ring-wrap{\n  position:absolute; left:50%; top:50%;\n  width:clamp(560px, 62vw, 820px); aspect-ratio:1;\n  transform:translate(-50%,-50%); pointer-events:none;\n}\n#cc-site .cc-ring-wrap svg{width:100%; height:100%; display:block; overflow:visible}\n#cc-site .cc-cta-in{position:relative; max-width:560px}\n#cc-site .cc-cta h2{\n  font-size:clamp(2.3rem, 4.8vw, 4.3rem);\n  line-height:1; letter-spacing:-.03em; font-weight:800;\n  max-width:12ch; margin:0 auto;\n}\n#cc-site .cc-cta p{\n  margin:1.3rem auto 0; max-width:36ch;\n  font-size:clamp(1.05rem, 1.3vw, 1.2rem); line-height:1.5; color:#4A4E5A; font-weight:500;\n}\n#cc-site .cc-btn{\n  display:inline-flex; align-items:center; gap:.75rem;\n  margin-top:2.2rem; padding:1.1rem 1.9rem 1.1rem 1.5rem;\n  border-radius:999px; background:var(--pink); color:#fff;\n  font:700 clamp(1.05rem, 1.25vw, 1.2rem)\/1 'Urbanist', system-ui, sans-serif;\n  text-decoration:none;\n  box-shadow:0 14px 34px -12px rgba(255,31,99,.6);\n  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;\n}\n#cc-site .cc-btn svg{width:24px; height:24px; flex:none}\n#cc-site .cc-btn:hover{background:var(--ink); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(27,29,35,.7)}\n#cc-site .cc-btn:focus-visible,\n#cc-site .cc-float:focus-visible,\n#cc-site .cc-tel:focus-visible{outline:3px solid var(--blue); outline-offset:4px}\n#cc-site .cc-tel{\n  display:inline-block; margin-top:1.1rem;\n  font-size:.95rem; font-weight:600; color:#5B5F6B; text-decoration:none;\n}\n#cc-site .cc-tel:hover{color:var(--ink); text-decoration:underline}\n\n\/* ---------------- WhatsApp flutuante ---------------- *\/\n#cc-site .cc-float{\n  position:fixed; z-index:9999;\n  right:calc(20px + env(safe-area-inset-right, 0px));\n  bottom:calc(20px + env(safe-area-inset-bottom, 0px));\n  width:62px; height:62px; border-radius:50%;\n  display:grid; place-items:center;\n  background:var(--wa); color:#fff; text-decoration:none;\n  box-shadow:0 12px 30px -8px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.25);\n  transition:transform .25s ease;\n}\n#cc-site .cc-float svg{width:32px; height:32px; position:relative}\n#cc-site .cc-float::before{\n  content:\"\"; position:absolute; inset:0; border-radius:50%;\n  background:var(--wa); animation:cc-pulse 2.6s ease-out infinite;\n}\n#cc-site .cc-float:hover{transform:scale(1.07)}\n#cc-site .cc-tip{\n  position:absolute; right:calc(100% + 12px); top:50%;\n  transform:translate(6px,-50%); white-space:nowrap;\n  background:var(--ink); color:#fff; font-weight:700; font-size:.92rem;\n  padding:.55rem .85rem; border-radius:10px;\n  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;\n}\n@media (hover:hover){\n  #cc-site .cc-float:hover .cc-tip,\n  #cc-site .cc-float:focus-visible .cc-tip{opacity:1; transform:translate(0,-50%)}\n}\n@keyframes cc-pulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.65);opacity:0}}\n\n@media (max-width:640px){\n  #cc-site{--sym:min(74vw, 42svh, 360px)}\n  #cc-site .cc-ring-wrap{width:150vw; opacity:.55}\n  #cc-site .cc-float{width:56px; height:56px}\n}\n\n\/* Celular deitado \/ telas baixas *\/\n@media (max-height:520px) and (orientation:landscape){\n  #cc-site{--sym:min(38svh, 220px)}\n  #cc-site .cc-symbol{top:calc(38% - var(--sym) \/ 2)}\n  #cc-site .cc-intro{top:calc(38% + var(--sym) \/ 2 + .6rem)}\n  #cc-site .cc-tag{display:none}\n  #cc-site .cc-cue{bottom:.8rem}\n  #cc-site .cc-cue i{height:22px}\n  #cc-site .cc-word{font-size:clamp(1.3rem, 11svh, 3rem)}\n  #cc-site .cc-label{margin-bottom:.4rem}\n  #cc-site .cc-cta{min-height:auto}\n}\n\n\/* Reduzir movimento: sem pin, mostra direto o que a Conecta entrega *\/\n#cc-site.cc-reduce .cc-symbol,\n#cc-site.cc-reduce .cc-intro,\n#cc-site.cc-reduce .cc-cue{display:none}\n#cc-site.cc-reduce .cc-word{clip-path:none}\n#cc-site.cc-reduce .cc-label{opacity:1}\n@media (prefers-reduced-motion:reduce){\n  #cc-site .cc-cue i,#cc-site .cc-float::before{animation:none}\n}\n\n\/* Lenis *\/\nhtml.lenis,html.lenis body{height:auto}\n.lenis.lenis-smooth{scroll-behavior:auto !important}\n.lenis.lenis-stopped{overflow:hidden}\n<\/style>\n\n<div id=\"cc-site\">\n\n  <!-- HERO -->\n  <section class=\"cc-hero\" aria-label=\"Conecta Creative\">\n    <div class=\"cc-symbol\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"cc-intro\">\n      <h1 class=\"cc-brand\"><b>Conecta<\/b> Creative<\/h1>\n      <p class=\"cc-tag\">Design, web e WEB3.0 pra marca que precisa ser vista e lembrada.<\/p>\n    <\/div>\n\n    <div class=\"cc-cue\" aria-hidden=\"true\"><span>Role para ver o que a Conecta entrega<\/span><i><\/i><\/div>\n\n    <ul class=\"cc-words\">\n      <li class=\"cc-label\">O que a Conecta entrega<\/li>\n      <li><span class=\"cc-word cc-w0\">Designer<\/span><\/li>\n      <li><span class=\"cc-word cc-w1\">Web Designer<\/span><\/li>\n      <li><span class=\"cc-word cc-w2\">Conte\u00fado Gr\u00e1fico Digital<\/span><\/li>\n      <li><span class=\"cc-word cc-w3\">WEB3.0<\/span><\/li>\n      <li><span class=\"cc-word cc-w4\">Tr\u00e1fego Pago<\/span><\/li>\n    <\/ul>\n  <\/section>\n\n  <!-- CTA -->\n  <section class=\"cc-cta\" aria-labelledby=\"cc-cta-title\">\n    <div class=\"cc-ring-wrap\" aria-hidden=\"true\"><\/div>\n    <div class=\"cc-cta-in\">\n      <h2 id=\"cc-cta-title\">Tudo isso conectado na sua marca.<\/h2>\n      <p>Me chama no WhatsApp, conta o projeto e a gente acha o melhor caminho, do layout ao lan\u00e7amento.<\/p>\n      <a class=\"cc-btn\" href=\"https:\/\/wa.me\/5543984128814?text=Ol%C3%A1!%20Vim%20pelo%20site%20da%20Conecta%20Creative%20e%20quero%20conversar%20sobre%20um%20projeto.\" target=\"_blank\" rel=\"noopener\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89a11.82 11.82 0 0 0-3.48-8.41Z\"\/><\/svg>\n        Chamar no WhatsApp\n      <\/a>\n      <br>\n      <a class=\"cc-tel\" href=\"tel:+5543984128814\">+55 43 98412-8814<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- WhatsApp flutuante -->\n  <a class=\"cc-float\" href=\"https:\/\/wa.me\/5543984128814?text=Ol%C3%A1!%20Vim%20pelo%20site%20da%20Conecta%20Creative%20e%20quero%20conversar%20sobre%20um%20projeto.\" target=\"_blank\" rel=\"noopener\" aria-label=\"Conversar no WhatsApp\">\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89a11.82 11.82 0 0 0-3.48-8.41Z\"\/><\/svg>\n    <span class=\"cc-tip\">Fala comigo<\/span>\n  <\/a>\n<\/div>\n\n<script>\n(function () {\n  var USE_LENIS = true; \/\/ false se o tema\/outro plugin j\u00e1 tiver scroll suave\n\n  var root = document.getElementById('cc-site');\n  if (!root || root.dataset.ccReady) return;\n  root.dataset.ccReady = '1';\n\n  var SRC = {\n    gsap: 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.13.0\/gsap.min.js',\n    st:   'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.13.0\/ScrollTrigger.min.js',\n    lenis:'https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.1.14\/dist\/lenis.min.js'\n  };\n  function load(src) {\n    return new Promise(function (res, rej) {\n      var s = document.createElement('script');\n      s.src = src; s.onload = res; s.onerror = rej;\n      document.head.appendChild(s);\n    });\n  }\n\n  \/* ---------- Geometria do s\u00edmbolo (viewBox 400x400) ---------- *\/\n  var NS = 'http:\/\/www.w3.org\/2000\/svg';\n  var BIG   = { cx: 165.5, cy: 176.3, ro: 112, ri: 54 };  \/\/ C rosa\n  var SMALL = { cx: 244.4, cy: 237,   ro: 101, ri: 65 };  \/\/ C amarelo\/azul\n  var RING  = { cx: 200,   cy: 200,   r: 170 };\n  var COL = { pink:'#FF1F63', yellow:'#FFC61A', blue:'#12B5F2', light:'#E6E7EC', ink:'#2B2D33' };\n\n  function rad(a) { return a * Math.PI \/ 180; }\n  function pt(cx, cy, r, a) { return [cx + r * Math.cos(rad(a)), cy + r * Math.sin(rad(a))]; }\n  function f(n) { return n.toFixed(2); }\n\n  function sectorD(o, a0, a1) {\n    var L = (a1 - a0) > 180 ? 1 : 0;\n    var p0 = pt(o.cx, o.cy, o.ro, a0), p1 = pt(o.cx, o.cy, o.ro, a1),\n        p2 = pt(o.cx, o.cy, o.ri, a1), p3 = pt(o.cx, o.cy, o.ri, a0);\n    return 'M' + f(p0[0]) + ' ' + f(p0[1]) +\n      ' A' + o.ro + ' ' + o.ro + ' 0 ' + L + ' 1 ' + f(p1[0]) + ' ' + f(p1[1]) +\n      ' L' + f(p2[0]) + ' ' + f(p2[1]) +\n      ' A' + o.ri + ' ' + o.ri + ' 0 ' + L + ' 0 ' + f(p3[0]) + ' ' + f(p3[1]) + ' Z';\n  }\n  function el(tag, attrs) {\n    var e = document.createElementNS(NS, tag);\n    for (var k in attrs) e.setAttribute(k, attrs[k]);\n    return e;\n  }\n  function sector(o, a0, a1, fill) { return [el('path', { d: sectorD(o, a0, a1), fill: fill })]; }\n  function ringArc(a0, a1, color) {\n    var p0 = pt(RING.cx, RING.cy, RING.r, a0), p1 = pt(RING.cx, RING.cy, RING.r, a1);\n    return [\n      el('path', {\n        d: 'M' + f(p0[0]) + ' ' + f(p0[1]) + ' A' + RING.r + ' ' + RING.r + ' 0 0 1 ' + f(p1[0]) + ' ' + f(p1[1]),\n        fill: 'none', stroke: color, 'stroke-width': 6, 'stroke-linecap': 'round',\n        pathLength: 1, 'stroke-dasharray': 1, 'class': 'cc-arc'\n      }),\n      el('circle', { cx: f(p0[0]), cy: f(p0[1]), r: 4.6, fill: color }),\n      el('circle', { cx: f(p1[0]), cy: f(p1[1]), r: 4.6, fill: color })\n    ];\n  }\n  function dot(a, color) {\n    var p = pt(RING.cx, RING.cy, RING.r, a);\n    return [el('circle', { cx: f(p[0]), cy: f(p[1]), r: 11, fill: color })];\n  }\n  function grad(id, type, attrs, stops) {\n    var g = el(type, Object.assign({ id: id, gradientUnits: 'userSpaceOnUse' }, attrs));\n    stops.forEach(function (s) { g.appendChild(el('stop', { offset: s[0], 'stop-color': s[1] })); });\n    return g;\n  }\n\n  function newSvg(key, gradients) {\n    var svg = el('svg', { viewBox: '0 0 400 400', 'aria-hidden': 'true', focusable: 'false' });\n    var defs = el('defs', {});\n    gradients.forEach(function (g) { defs.appendChild(g); });\n    svg.appendChild(defs);\n    return svg;\n  }\n\n  \/* Camadas: cada uma vira uma palavra (word = \u00edndice na lista) *\/\n  function layerDefs(dark) {\n    \/\/ dark = vers\u00e3o sobre fundo escuro (pe\u00e7as grafite viram claras)\n    var neutral = dark ? 'url(#cc-g-light)' : COL.ink;\n    var neutralArc = dark ? COL.light : COL.ink;\n    return [\n      { key: 'web3', word: 3,\n        grads: [grad('cc-g-blue', 'linearGradient', { x1: 170, y1: 330, x2: 345, y2: 270 }, [[0, '#0567B5'], [1, '#19BFF7']])],\n        parts: [].concat(sector(SMALL, 31.5, 150, 'url(#cc-g-blue)'), ringArc(99, 143, COL.blue), dot(90, COL.blue)) },\n      { key: 'web', word: 1,\n        grads: [grad('cc-g-light', 'linearGradient', { x1: 150, y1: 170, x2: 230, y2: 260 }, [[0, '#8E929D'], [1, '#EEEFF3']])],\n        parts: [].concat(sector(SMALL, 150, 245, neutral), ringArc(-84, -49, neutralArc), ringArc(41, 82, neutralArc),\n                         ringArc(147, 173, neutralArc), ringArc(187, 207, neutralArc), dot(180, neutralArc)) },\n      { key: 'conteudo', word: 2,\n        grads: [grad('cc-g-yellow', 'linearGradient', { x1: 250, y1: 160, x2: 340, y2: 200 }, [[0, '#FF9A0F'], [1, '#FFD84A']])],\n        parts: [].concat(sector(SMALL, 245, 333.4, 'url(#cc-g-yellow)'), ringArc(-43, -8, COL.yellow), ringArc(7, 29, COL.yellow), dot(0, COL.yellow)) },\n      { key: 'designer', word: 0,\n        grads: [grad('cc-g-pink', 'radialGradient', { cx: BIG.cx, cy: BIG.cy, r: BIG.ro }, [[0.45, '#8E0052'], [0.72, '#E3005C'], [1, '#FF2D6D']])],\n        parts: [].concat(sector(BIG, 130, 318, 'url(#cc-g-pink)'), ringArc(-145, -96, COL.pink), dot(-90, COL.pink)) },\n      { key: 'trafego', word: 4,\n        grads: [grad('cc-g-traf', 'linearGradient', { x1: 105, y1: 240, x2: 225, y2: 245 }, [[0, '#FF1F63'], [0.5, '#8A2F9E'], [1, '#12B5F2']])],\n        parts: sector(BIG, 53, 130, 'url(#cc-g-traf)') }\n    ];\n  }\n\n  function buildSymbol() {\n    var box = root.querySelector('.cc-symbol');\n    return layerDefs(true).map(function (L) {\n      var div = document.createElement('div');\n      div.className = 'cc-layer cc-l-' + L.key;\n      var svg = newSvg(L.key, L.grads);\n      var g = el('g', {});\n      L.parts.forEach(function (p) { g.appendChild(p); });\n      svg.appendChild(g);\n      div.appendChild(svg);\n      box.appendChild(div);\n      L.el = div; L.svg = svg; L.g = g;\n      return L;\n    });\n  }\n\n  function buildCtaRing() {\n    var wrap = root.querySelector('.cc-ring-wrap');\n    var svg = el('svg', { viewBox: '0 0 400 400', 'aria-hidden': 'true', focusable: 'false' });\n    var g = el('g', {});\n    [].concat(\n      ringArc(-145, -96, COL.pink), ringArc(-84, -49, COL.ink), ringArc(-43, -8, COL.yellow), ringArc(7, 29, COL.yellow),\n      ringArc(41, 82, COL.ink), ringArc(99, 143, COL.blue), ringArc(147, 173, COL.ink), ringArc(187, 207, COL.ink),\n      dot(-90, COL.pink), dot(0, COL.yellow), dot(90, COL.blue), dot(180, COL.ink)\n    ).forEach(function (p) { g.appendChild(p); });\n    svg.appendChild(g);\n    wrap.appendChild(svg);\n    return svg;\n  }\n\n  function offsetIn(node, ancestor) {\n    var x = 0, y = 0, n = node;\n    while (n && n !== ancestor) { x += n.offsetLeft; y += n.offsetTop; n = n.offsetParent; }\n    return { x: x, y: y };\n  }\n\n  \/* ---------- Init ---------- *\/\n  function init() {\n    var gsap = window.gsap, ScrollTrigger = window.ScrollTrigger;\n    gsap.registerPlugin(ScrollTrigger);\n    ScrollTrigger.config({ ignoreMobileResize: true });\n\n    var hero  = root.querySelector('.cc-hero');\n    var sym   = root.querySelector('.cc-symbol');\n    var intro = root.querySelector('.cc-intro');\n    var cue   = root.querySelector('.cc-cue');\n    var label = root.querySelector('.cc-label');\n    var words = root.querySelectorAll('.cc-word');\n    var layers = buildSymbol();\n    var ctaRing = buildCtaRing();\n    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    if (reduce) {\n      root.classList.add('cc-reduce');\n      gsap.set(root.querySelectorAll('.cc-arc'), { strokeDashoffset: 0 });\n      return;\n    }\n\n    if (USE_LENIS && window.Lenis && !window.__ccLenis) {\n      var lenis = new window.Lenis({ lerp: 0.09, smoothWheel: true });\n      window.__ccLenis = lenis;\n      lenis.on('scroll', ScrollTrigger.update);\n      gsap.ticker.add(function (t) { lenis.raf(t * 1000); });\n      gsap.ticker.lagSmoothing(0);\n    }\n\n    \/* mede onde cada pe\u00e7a est\u00e1 e onde cada palavra vai ficar *\/\n    function measure() {\n      var S = sym.offsetWidth, k = S \/ 400, sp = offsetIn(sym, hero);\n      layers.forEach(function (L) {\n        var bb = L.g.getBBox();\n        var cx = (bb.x + bb.width \/ 2) * k, cy = (bb.y + bb.height \/ 2) * k;\n        var w = words[L.word], wp = offsetIn(w, hero);\n        var ww = w.offsetWidth, wh = w.offsetHeight;\n        var dx = cx - S \/ 2, dy = cy - S \/ 2, len = Math.hypot(dx, dy) || 1;\n        L.geo = {\n          ex: dx \/ len * S * 0.1, ey: dy \/ len * S * 0.1,            \/\/ explos\u00e3o\n          tx: (wp.x + ww \/ 2) - (sp.x + cx),                          \/\/ destino X\n          ty: (wp.y + wh \/ 2) - (sp.y + cy),                          \/\/ destino Y\n          sx: ww \/ Math.max(bb.width * k, 1),                         \/\/ estica na largura da palavra\n          sy: Math.max(wh * 0.09, 4) \/ Math.max(bb.height * k, 1)     \/\/ achata numa barra\n        };\n        gsap.set(L.el, { transformOrigin: cx + 'px ' + cy + 'px' });\n      });\n    }\n    measure();\n    ScrollTrigger.addEventListener('refreshInit', measure);\n\n    \/* entrada (load) *\/\n    var arcsHero = sym.querySelectorAll('.cc-arc');\n    gsap.fromTo(arcsHero, { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 1.5, ease: 'power3.out', stagger: 0.05, delay: 0.15 });\n    gsap.from(layers.map(function (L) { return L.svg; }), {\n      opacity: 0, scale: 0.65, rotation: -35, transformOrigin: '50% 50%',\n      duration: 1.3, ease: 'expo.out', stagger: 0.07\n    });\n    gsap.from(intro.children, { y: 24, opacity: 0, duration: 1, ease: 'power3.out', stagger: 0.1, delay: 0.35 });\n    gsap.from(cue, { opacity: 0, duration: 0.8, delay: 0.9 });\n\n    \/* scroll: s\u00edmbolo -> palavras *\/\n    var tl = gsap.timeline({\n      defaults: { ease: 'none' },\n      scrollTrigger: {\n        trigger: hero, start: 'top top',\n        end: function () { return '+=' + Math.round(window.innerHeight * 3.4); },\n        pin: true, scrub: 0.8, anticipatePin: 1, invalidateOnRefresh: true\n      }\n    });\n\n    tl.to(intro, { y: -60, opacity: 0, duration: 1, ease: 'power2.in' }, 0)\n      .to(cue, { opacity: 0, duration: 0.4 }, 0);\n\n    layers.forEach(function (L, i) {\n      tl.to(L.el, {\n        x: function () { return L.geo.ex; }, y: function () { return L.geo.ey; },\n        rotation: (i % 2 ? 1 : -1) * 16, duration: 1.4, ease: 'power2.out'\n      }, 0.4);\n    });\n\n    tl.fromTo(label, { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.8 }, 2.2);\n\n    layers.slice().sort(function (a, b) { return a.word - b.word; }).forEach(function (L, i) {\n      var s = 2.4 + i * 1.25, w = words[L.word];\n      tl.to(L.el, {\n        x: function () { return L.geo.tx; }, y: function () { return L.geo.ty; },\n        scaleX: function () { return L.geo.sx; }, scaleY: function () { return L.geo.sy; },\n        rotation: 0, duration: 1.3, ease: 'power3.inOut'\n      }, s)\n      .fromTo(w, { clipPath: 'inset(50% -6% 50% -6%)' }, { clipPath: 'inset(-25% -6% -25% -6%)', duration: 0.7, ease: 'power2.out' }, s + 1.15)\n      .to(L.el, { opacity: 0, duration: 0.35 }, s + 1.2);\n    });\n    tl.to({}, { duration: 0.8 }); \/\/ respiro no final\n\n    \/* CTA: anel desenha ao entrar e gira com o scroll *\/\n    var ctaArcs = ctaRing.querySelectorAll('.cc-arc');\n    gsap.set(ctaArcs, { strokeDashoffset: 1 });\n    ScrollTrigger.create({\n      trigger: root.querySelector('.cc-cta'), start: 'top 70%', once: true,\n      onEnter: function () {\n        gsap.to(ctaArcs, { strokeDashoffset: 0, duration: 1.6, ease: 'power3.out', stagger: 0.06 });\n      }\n    });\n    gsap.fromTo(ctaRing, { rotation: -40 }, {\n      rotation: 40, ease: 'none', transformOrigin: '50% 50%',\n      scrollTrigger: { trigger: root.querySelector('.cc-cta'), start: 'top bottom', end: 'bottom top', scrub: true }\n    });\n\n    if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { ScrollTrigger.refresh(); });\n    window.addEventListener('load', function () { ScrollTrigger.refresh(); });\n  }\n\n  (async function boot() {\n    try {\n      if (!window.gsap) await load(SRC.gsap);\n      if (!window.ScrollTrigger) await load(SRC.st);\n      if (USE_LENIS && !window.Lenis) { try { await load(SRC.lenis); } catch (e) {} }\n      init();\n    } catch (e) {\n      root.classList.add('cc-reduce'); \/\/ sem GSAP: mostra a vers\u00e3o est\u00e1tica\n    }\n  })();\n})();\n<\/script>\n\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>Conecta Creative Design, web e WEB3.0 pra marca que precisa ser vista e lembrada. Role para ver o que a Conecta entrega O que a Conecta entrega Designer Web Designer Conte\u00fado Gr\u00e1fico Digital WEB3.0 Tr\u00e1fego Pago Tudo isso conectado na sua marca. Me chama no WhatsApp, conta o projeto e a gente acha o melhor [&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-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":7,"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/conectacreative.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}