{"id":5521,"date":"2026-09-09T13:50:29","date_gmt":"2026-09-09T13:50:29","guid":{"rendered":"https:\/\/parica.agency\/?page_id=5521"},"modified":"2026-09-14T23:33:32","modified_gmt":"2026-09-14T23:33:32","slug":"elementor-5521","status":"publish","type":"page","link":"https:\/\/parica.agency\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5521\" class=\"elementor elementor-5521\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6a540a e-flex e-con-boxed e-con e-parent\" data-id=\"f6a540a\" 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-9a3b334 elementor-widget elementor-widget-site-logo\" data-id=\"9a3b334\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;align&quot;:&quot;left&quot;,&quot;width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:52,&quot;sizes&quot;:[]},&quot;space&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:22,&quot;sizes&quot;:[]},&quot;image_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;4&quot;,&quot;right&quot;:&quot;4&quot;,&quot;bottom&quot;:&quot;4&quot;,&quot;left&quot;:&quot;4&quot;,&quot;isLinked&quot;:true},&quot;space_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;width_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_mobile&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;space_tablet&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_border_radius_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;image_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;caption_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;caption_space_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;caption_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;caption_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"site-logo.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"hfe-site-logo\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a data-elementor-open-lightbox=\"\"  class='elementor-clickable' href=\"https:\/\/parica.agency\/\">\n\t\t\t\t\t\t\t<div class=\"hfe-site-logo-set\">           \n\t\t\t\t<div class=\"hfe-site-logo-container\">\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"hfe-site-logo-img elementor-animation-\"  src=\"https:\/\/parica.agency\/wp-content\/uploads\/2026\/09\/Parica_Full.png\" alt=\"default-logo\"\/>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t<\/div>  \n\t\t\t\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-cf10568 e-con e-atomic-element e-flexbox-base e-7a2b794 \" data-id=\"cf10568\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cf10568\">\n    \t\t<div class=\"elementor-element elementor-element-4c68370 elementor-widget__width-auto elementor-widget elementor-widget-html\" data-id=\"4c68370\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Paric\u00e1\u00ae \u2014 Hero \/ An\u00e9is<\/title>\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=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  --ink:#0B0006;\n  --magenta:#FF00A2;\n  --paper:#FFFFFF;\n  --display:\"Bricolage Grotesque\",sans-serif;\n  --body:\"Hanken Grotesk\",sans-serif;\n  --serif:\"Fraunces\",Georgia,serif;\n}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden}\n::selection{background:var(--magenta);color:#fff}\n\n.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}\n\n\/* canvas layer *\/\n#rings{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}\n\/* keep the text side legible *\/\n.veil{position:absolute;inset:0;z-index:1;pointer-events:none;\n  background:linear-gradient(90deg,var(--ink) 12%,rgba(11,0,6,.72) 42%,rgba(11,0,6,0) 68%)}\n\n.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;\n  padding:0 clamp(22px,5vw,72px);width:100%}\n\n.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;\n  font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;\n  color:rgba(255,255,255,.72);opacity:0;animation:rise .9s .2s ease forwards}\n.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--magenta)}\n\nh1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;\n  font-size:clamp(4rem,4vw,9.5rem);line-height:.9;margin:.26em 0 .3em}\nh1 .l1{display:block;opacity:0;animation:rise 1s .35s ease forwards}\nh1 .l2{display:block;opacity:0;animation:rise 1s .5s ease forwards}\n.hl{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff;\n  background-image:linear-gradient(var(--magenta),var(--magenta));\n  background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px;padding-bottom:.05em}\n\n.sub{max-width:42ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;\n  color:rgba(255,255,255,.8);opacity:0;animation:rise 1s .7s ease forwards}\n\n.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;opacity:0;animation:rise 1s .85s ease forwards}\n.btn{font-weight:600;font-size:1rem;padding:15px 30px;border-radius:100px;cursor:pointer;\n  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;\n  transition:transform .2s,background .2s,color .2s,border-color .2s}\n.btn-primary{background:var(--magenta)}\n.btn-primary:hover{transform:translateY(-2px);background:#e00090}\n.btn-ghost{border:1.5px solid rgba(255,255,255,.4)}\n.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}\n\n@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}\n\n@media(max-width:760px){\n  .veil{background:linear-gradient(180deg,rgba(11,0,6,.35),rgba(11,0,6,.78))}\n  .sub{max-width:none}\n}\n@media(prefers-reduced-motion:reduce){\n  .eyebrow,.hl,h1 .l1,h1 .l2,.sub,.cta{animation:none;opacity:1}\n}\n<\/style>\n<\/head>\n<body>\n\n<section class=\"hero\">\n  <canvas id=\"rings\" aria-hidden=\"true\"><\/canvas>\n  <div class=\"veil\"><\/div>\n\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">\n      <span>Comunica\u00e7\u00e3o<\/span><span class=\"dot\"><\/span>\n      <span>Publicidade<\/span><span class=\"dot\"><\/span>\n      <span>Branding<\/span>\n    <\/div>\n    <h1>\n      <span class=\"l1\">Grandes marcas <br> n\u00e3o acontecem.<\/span>\n      <span class=\"l2\"><span class=\"hl\">Elas s\u00e3o constru\u00eddas.<\/span><\/span>\n    <\/h1>\n    <p class=\"sub\">A Paric\u00e1 \u00e9 uma ag\u00eancia independente focada em estrat\u00e9gia e criatividade que constr\u00f3i marcas e transforma a maneira como elas se apresentam, se comunicam e s\u00e3o percebidas.<\/p>\n    <div class=\"cta\">\n      <a href=\"\/?page_id=5587\" class=\"btn btn-primary\">Ver trabalhos <\/a>\n      <a href=\"https:\/\/parica.agency\/?page_id=5523\" class=\"btn btn-ghost\">Como Trabalhamos<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(() => {\n  const canvas = document.getElementById('rings');\n  const ctx = canvas.getContext('2d');\n  const MAG = '#FF00A2';\n  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  let w, h, dpr, cx, cy, maxR, bgGrad;\n  const N = 30;              \/\/ n\u00famero de an\u00e9is\n  const SAMPLES = 72;        \/\/ suavidade de cada anel\n  const rings = [];\n  const cracks = [];\n  const ANG = new Float32Array(SAMPLES+1);   \/\/ \u00e2ngulos e silhueta pr\u00e9-calculados (fixos)\n  const COS = new Float32Array(SAMPLES+1);\n  const SIN = new Float32Array(SAMPLES+1);\n  const SHP = new Float32Array(SAMPLES+1);\n\n  \/\/ silhueta global (mesma p\/ todos os an\u00e9is -> forma org\u00e2nica coesa)\n  const shape = a => 1\n      + 0.130 * Math.sin(a + 0.6)\n      + 0.070 * Math.sin(2*a + 2.1)\n      + 0.038 * Math.sin(3*a + 4.0)\n      + 0.020 * Math.sin(5*a + 1.2);\n\n  function buildRings(){\n    rings.length = 0;\n    for(let i=0;i<N;i++){\n      const t = i\/(N-1);\n      rings.push({\n        base: Math.pow(t, 1.06),\n        f1: 4 + Math.floor(Math.random()*4),\n        f2: 8 + Math.floor(Math.random()*6),\n        p1: Math.random()*6.28,\n        p2: Math.random()*6.28,\n        amp: 0.012 + Math.random()*0.022,\n        thick: (i%6===0) ? 1.9 : (0.7 + Math.random()*0.5),\n        alpha: (i%6===0) ? 0.85 : 0.34 + Math.random()*0.3\n      });\n    }\n    cracks.length = 0;\n    const nc = 6;\n    for(let i=0;i<nc;i++){\n      cracks.push({ ang: (i\/nc)*6.28 + Math.random()*0.5, wob: 0.06+Math.random()*0.1, seed: Math.random()*6.28 });\n    }\n    for(let s=0;s<=SAMPLES;s++){\n      const a=(s\/SAMPLES)*6.283185; ANG[s]=a; COS[s]=Math.cos(a); SIN[s]=Math.sin(a); SHP[s]=shape(a);\n    }\n  }\n\n  function resize(){\n    dpr = Math.min(devicePixelRatio||1, 1.5);\n    w = canvas.clientWidth; h = canvas.clientHeight;\n    canvas.width = w*dpr; canvas.height = h*dpr;\n    ctx.setTransform(dpr,0,0,dpr,0,0);\n    const mobile = w < 760;\n    cx = mobile ? w*0.5 : w*0.66;\n    cy = mobile ? h*0.46 : h*0.52;\n    const minShape = 0.72;\n    maxR = Math.max(cx, w - cx) \/ minShape * 1.06;\n    bgGrad = ctx.createRadialGradient(cx,cy,0,cx,cy,maxR*0.9);\n    bgGrad.addColorStop(0,'rgba(255,0,162,0.12)');\n    bgGrad.addColorStop(0.5,'rgba(255,0,162,0.04)');\n    bgGrad.addColorStop(1,'rgba(255,0,162,0)');\n  }\n\n  \/\/ parallax (barato; s\u00f3 influencia quando h\u00e1 desenho)\n  let tgX=0,tgY=0,offX=0,offY=0;\n  addEventListener('mousemove', e => {\n    tgX = (e.clientX\/innerWidth - 0.5) * 30;\n    tgY = (e.clientY\/innerHeight - 0.5) * 30;\n  }, {passive:true});\n\n  const clamp01 = x => x<0?0:x>1?1:x;\n  const ss = (e0,e1,x)=>{ const t=clamp01((x-e0)\/(e1-e0)); return t*t*(3-2*t); };\n\n  \/\/ desenha UM quadro (toda a matem\u00e1tica visual, id\u00eantica)\n  let start = null;\n  function draw(now){\n    if(start===null) start = now;\n    const el = (now-start)\/1000;\n\n    const fadeIn  = clamp01(el\/1.4);\n    const flow    = reduce ? 0 : el*0.045;\n    const rot     = reduce ? 0 : el*0.010;\n    const breathe = reduce ? 1 : 1 + 0.015*Math.sin(el*0.5);\n    const morph   = reduce ? 0 : el*0.11;\n    const sweepR  = reduce ? -1 : (el*0.12) % 1.6;\n\n    offX += (tgX-offX)*0.05; offY += (tgY-offY)*0.05;\n\n    ctx.clearRect(0,0,w,h);\n    ctx.fillStyle=bgGrad; ctx.fillRect(0,0,w,h);\n\n    ctx.save();\n    ctx.translate(cx+offX, cy+offY);\n    ctx.rotate(rot);\n    ctx.scale(breathe,breathe);\n    ctx.lineJoin='round'; ctx.lineCap='round';\n\n    ctx.strokeStyle = 'rgba(255,0,162,0.22)';\n    ctx.lineWidth = 1;\n    cracks.forEach(cr=>{\n      ctx.globalAlpha = 0.4*fadeIn;\n      ctx.beginPath();\n      for(let s=0;s<=24;s++){\n        const rr=(s\/24)*maxR;\n        const a=cr.ang + Math.sin(s*0.6+cr.seed+morph)*cr.wob;\n        const x=Math.cos(a)*rr*shape(a), y=Math.sin(a)*rr*shape(a);\n        s?ctx.lineTo(x,y):ctx.moveTo(x,y);\n      }\n      ctx.stroke();\n    });\n\n    for(let i=0;i<N;i++){\n      const r = rings[i];\n      let nr = r.base + flow; nr -= Math.floor(nr);\n      const life = ss(0,0.10,nr) * (1 - ss(0.86,1,nr));\n      if(life<=0.001) continue;\n\n      let boost = 0;\n      if(sweepR>=0 && sweepR<=1){ const d=(nr-sweepR)\/0.11; boost = Math.exp(-d*d); }\n      const base = r.alpha * fadeIn * life;\n      const bright = base + boost*0.9;\n      ctx.strokeStyle = (i%9===0) ? '#ff7ad3' : MAG;\n\n      const rr0 = nr*maxR;\n      ctx.beginPath();\n      for(let s=0;s<=SAMPLES;s++){\n        const a = ANG[s];\n        const jit = 1 + r.amp*(Math.sin(r.f1*a + r.p1 + morph) + 0.6*Math.sin(r.f2*a + r.p2 - morph));\n        const rr = rr0 * SHP[s] * jit;\n        s? ctx.lineTo(COS[s]*rr, SIN[s]*rr) : ctx.moveTo(COS[s]*rr, SIN[s]*rr);\n      }\n      ctx.closePath();\n\n      ctx.globalAlpha = Math.min(bright*0.22 + boost*0.16, 0.6);\n      ctx.lineWidth = r.thick + 4;\n      ctx.stroke();\n      ctx.globalAlpha = Math.min(bright, 1);\n      ctx.lineWidth = r.thick + boost*1.4;\n      ctx.stroke();\n    }\n\n    const pulse = reduce ? 2.4 : 2.4 + 1.6*Math.abs(Math.sin(el*1.1));\n    ctx.globalAlpha = 0.9*fadeIn; ctx.fillStyle='#ffb0e6';\n    ctx.beginPath(); ctx.arc(0,0,pulse,0,6.283); ctx.fill();\n\n    ctx.restore();\n  }\n\n  \/* ---- controle de execu\u00e7\u00e3o: economiza CPU\/GPU\/bateria ----\n     limita ~30fps, e pausa de vez quando o hero sai da tela\n     ou quando a aba fica em segundo plano                     *\/\n  const FRAME_MS = 1000\/30;\n  let rafId = 0, running = false, last = 0;\n  let onScreen = true, visible = true;\n\n  function loop(now){\n    rafId = requestAnimationFrame(loop);\n    if(now - last < FRAME_MS) return;   \/\/ trava a taxa de quadros\n    last = now;\n    draw(now);\n  }\n  function startLoop(){\n    if(running || reduce) return;\n    running = true; last = 0;\n    rafId = requestAnimationFrame(loop);\n  }\n  function stopLoop(){\n    if(!running) return;\n    running = false;\n    cancelAnimationFrame(rafId); rafId = 0;\n  }\n  function evaluate(){ (onScreen && visible) ? startLoop() : stopLoop(); }\n\n  const hero = document.querySelector('.hero');\n  if('IntersectionObserver' in window){\n    new IntersectionObserver(es=>{ onScreen = es[0].isIntersecting; evaluate(); },\n                             {threshold:0}).observe(hero);\n  }\n  document.addEventListener('visibilitychange', ()=>{ visible = !document.hidden; evaluate(); });\n\n  \/\/ resize com debounce (evita recriar o canvas em rajada)\n  let rt;\n  addEventListener('resize', ()=>{\n    clearTimeout(rt);\n    rt = setTimeout(()=>{ resize(); if(reduce || !running) draw(performance.now()); }, 150);\n  }, {passive:true});\n\n  function init(){\n    resize(); buildRings();\n    if(reduce){ draw(performance.now()); }   \/\/ 1 quadro est\u00e1tico e para\n    else { startLoop(); }\n  }\n  init();\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-be619e0 e-con e-atomic-element e-flexbox-base e-22890f8 \" data-id=\"be619e0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"be619e0\">\n    \t\t<div class=\"elementor-element elementor-element-7df7a13 elementor-widget elementor-widget-html\" data-id=\"7df7a13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Paric\u00e1\u00ae \u2014 Faixa<\/title>\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=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  --ink:#0B0006;\n  --magenta:#FF00A2;\n  --display:\"Bricolage Grotesque\",sans-serif;\n}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:var(--ink)}\n\n\/* faixa full-bleed *\/\n.band{position:relative;width:100%;overflow:hidden;background:var(--magenta);\n  padding:clamp(14px,2vw,24px) 0;\n  border-top:1px solid rgba(11,0,6,.35);border-bottom:1px solid rgba(11,0,6,.35)}\n\n.track{display:flex;width:max-content;align-items:center;\n  animation:scroll 26s linear infinite;will-change:transform}\n.band:hover .track{animation-play-state:paused}\n\n.track .w{font-family:var(--display);font-weight:800;letter-spacing:-.02em;\n  color:var(--ink);white-space:nowrap;\n  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1}\n\n\/* ponto centralizado entre as palavras *\/\n.track .dot{flex:none;width:clamp(7px,.8vw,11px);height:clamp(7px,.8vw,11px);\n  border-radius:50%;background:var(--ink);\n  margin:0 clamp(22px,3.2vw,52px)}\n\n@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n\n@media(prefers-reduced-motion:reduce){\n  .track{animation-duration:120s}\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"band\" aria-label=\"Paric\u00e1 \u00b7 Marketing \u00b7 Design \u00b7 Estrat\u00e9gia \u00b7 Seu parceiro de neg\u00f3cios\">\n  <div class=\"track\">\n    <!-- grupo 1 -->\n    <span class=\"w\">Paric\u00e1<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Marketing<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Design<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Estrat\u00e9gia<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Seu parceiro de neg\u00f3cios<\/span><span class=\"dot\"><\/span>\n    <!-- grupo 2 (c\u00f3pia para loop sem emenda) -->\n    <span class=\"w\">Paric\u00e1<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Marketing<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Design<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Estrat\u00e9gia<\/span><span class=\"dot\"><\/span>\n    <span class=\"w\">Seu parceiro de neg\u00f3cios<\/span><span class=\"dot\"><\/span>\n  <\/div>\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0f9b9a2 e-con e-atomic-element e-flexbox-base e-be1f55f \" data-id=\"0f9b9a2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0f9b9a2\">\n    \t\t<div class=\"elementor-element elementor-element-ff63919 elementor-widget elementor-widget-html\" data-id=\"ff63919\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Paric\u00e1\u00ae \u2014 O que fazemos<\/title>\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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  --ink:#0B0006;\n  --surface:#140811;\n  --paper:#FFFFFF;\n  --mute:#9A8A90;\n  --magenta:#FF00A2;\n  --line:rgba(255,255,255,.1);\n  --display:\"Bricolage Grotesque\",sans-serif;\n  --body:\"Hanken Grotesk\",sans-serif;\n  --D:27.5s;              \/* dura\u00e7\u00e3o total do ciclo (5 x 5.5s) *\/\n}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}\n::selection{background:var(--magenta);color:#fff}\n\n.areas{max-width:1200px;margin:0 auto;padding:clamp(80px,12vh,140px) clamp(22px,5vw,72px)}\n.label{display:flex;align-items:center;gap:14px;margin-bottom:clamp(34px,6vh,54px)}\n.label .idx{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--magenta)}\n.label .bar{height:1px;width:46px;background:var(--magenta);opacity:.6}\n.label .eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:.74rem;color:var(--mute)}\n\n.stage{display:grid;grid-template-columns:330px 1fr;gap:clamp(30px,5vw,80px);align-items:center}\n\n\/* \u00edndice *\/\n.index{display:flex;flex-direction:column}\n.ti{position:relative;padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:14px}\n.ti:last-child{border-bottom:1px solid var(--line)}\n.ti .tn{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--magenta);font-variant-numeric:tabular-nums}\n.ti .tt{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.01em;\n  color:var(--mute);animation:ticolor var(--D) linear infinite}\n.ti .pg{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--magenta);\n  transform:scaleX(0);transform-origin:left;opacity:0;animation:tifill var(--D) linear infinite}\n.ti:nth-child(1) .tt,.ti:nth-child(1) .pg{animation-delay:0s}\n.ti:nth-child(2) .tt,.ti:nth-child(2) .pg{animation-delay:calc(var(--D)\/-5*1)}\n.ti:nth-child(3) .tt,.ti:nth-child(3) .pg{animation-delay:calc(var(--D)\/-5*2)}\n.ti:nth-child(4) .tt,.ti:nth-child(4) .pg{animation-delay:calc(var(--D)\/-5*3)}\n.ti:nth-child(5) .tt,.ti:nth-child(5) .pg{animation-delay:calc(var(--D)\/-5*4)}\n@keyframes ticolor{0%{color:var(--mute)}1.5%{color:#fff}18.5%{color:#fff}20%{color:var(--mute)}100%{color:var(--mute)}}\n@keyframes tifill{\n  0%{transform:scaleX(0);opacity:0}\n  0.6%{opacity:1}\n  19%{transform:scaleX(1);opacity:1}\n  20%{opacity:0}\n  100%{transform:scaleX(1);opacity:0}}\n\n\/* palco de pain\u00e9is *\/\n.panels{position:relative;min-height:clamp(300px,42vh,380px);\n  background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden}\n.panels::before{content:\"\";position:absolute;inset:0;pointer-events:none;\n  background:radial-gradient(120% 90% at 100% 0%,rgba(255,0,162,.10),transparent 60%)}\n.panel{position:absolute;inset:0;display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,3vw,44px);\n  align-items:center;padding:clamp(30px,4vw,52px);opacity:0;\n  animation:fade var(--D) linear infinite}\n.panel:nth-child(1){animation-delay:0s}\n.panel:nth-child(2){animation-delay:calc(var(--D)\/-5*1)}\n.panel:nth-child(3){animation-delay:calc(var(--D)\/-5*2)}\n.panel:nth-child(4){animation-delay:calc(var(--D)\/-5*3)}\n.panel:nth-child(5){animation-delay:calc(var(--D)\/-5*4)}\n@keyframes fade{\n  0%{opacity:0;transform:translateY(14px)}\n  1.5%{opacity:1;transform:none}\n  18.5%{opacity:1;transform:none}\n  20%{opacity:0;transform:translateY(-12px)}\n  100%{opacity:0}}\n\n.p-ico{display:grid;place-items:center}\n.p-ico svg{width:100%;height:auto;overflow:visible}\n.p-txt h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;\n  font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;margin-bottom:14px}\n.p-txt p{font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;color:rgba(255,255,255,.78);max-width:46ch}\n.p-txt p .m{color:var(--magenta);font-weight:600}\n\n\/* \u00edcones \u2014 anima\u00e7\u00f5es em loop *\/\n.spin{transform-box:fill-box;transform-origin:center;animation:spin 22s linear infinite}\n.spin.rev{animation-duration:16s;animation-direction:reverse}\n@keyframes spin{to{transform:rotate(360deg)}}\n.wv{opacity:0;animation:wv 2.4s ease-in-out infinite}\n.wv.w2{animation-delay:.5s}.wv.w3{animation-delay:1s}\n@keyframes wv{0%{opacity:0}30%{opacity:.85}70%{opacity:.2}100%{opacity:0}}\n.pring{transform-box:fill-box;transform-origin:center;animation:pring 2.6s ease-out infinite;opacity:0}\n@keyframes pring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.15);opacity:0}}\n.blink{animation:blink 1.8s ease-in-out infinite}\n.blink.b2{animation-delay:.3s}.blink.b3{animation-delay:.6s}.blink.b4{animation-delay:.9s}\n@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}\n.eqb{transform-box:fill-box;transform-origin:center bottom;fill:var(--magenta);animation:eq 1.1s ease-in-out infinite}\n@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}\n\n@media(max-width:860px){\n  .stage{grid-template-columns:1fr;gap:26px}\n  .panel{grid-template-columns:96px 1fr;gap:20px}\n}\n@media(max-width:520px){\n  .panel{grid-template-columns:1fr;justify-items:start}\n  .p-ico{width:90px}\n}\n@media(prefers-reduced-motion:reduce){\n  .panel,.ti .tt,.ti .pg{animation:none}\n  .panel:nth-child(1){opacity:1}          \/* mostra o primeiro parado *\/\n  .ti:nth-child(1) .tt{color:#fff}.ti:nth-child(1) .pg{opacity:1;transform:scaleX(1)}\n  .spin,.wv,.pring,.blink,.eqb{animation:none;opacity:1}\n}\n<\/style>\n<\/head>\n<body>\n\n<section class=\"areas\" id=\"o-que-fazemos\">\n  <div class=\"label\">\n    <span class=\"idx\">\u25c7<\/span><span class=\"bar\"><\/span>\n    <span class=\"eyebrow\">O que fazemos<\/span>\n  <\/div>\n\n  <div class=\"stage\">\n    <!-- \u00edndice -->\n    <div class=\"index\">\n      <div class=\"ti\"><span class=\"tn\">01<\/span><span class=\"tt\">Branding<\/span><span class=\"pg\"><\/span><\/div>\n      <div class=\"ti\"><span class=\"tn\">02<\/span><span class=\"tt\">Comunica\u00e7\u00e3o<\/span><span class=\"pg\"><\/span><\/div>\n      <div class=\"ti\"><span class=\"tn\">03<\/span><span class=\"tt\">Publicidade<\/span><span class=\"pg\"><\/span><\/div>\n      <div class=\"ti\"><span class=\"tn\">04<\/span><span class=\"tt\">Audiovisual<\/span><span class=\"pg\"><\/span><\/div>\n      <div class=\"ti\"><span class=\"tn\">05<\/span><span class=\"tt\">Digital<\/span><span class=\"pg\"><\/span><\/div>\n    <\/div>\n\n    <!-- pain\u00e9is -->\n    <div class=\"panels\">\n\n      <!-- 01 Branding: an\u00e9is girando -->\n      <div class=\"panel\">\n        <div class=\"p-ico\">\n          <svg viewBox=\"0 0 110 110\" fill=\"none\" stroke=\"#FF00A2\" stroke-width=\"1.6\" aria-hidden=\"true\">\n            <g class=\"spin\">\n              <circle cx=\"55\" cy=\"55\" r=\"13\"\/><circle cx=\"55\" cy=\"55\" r=\"25\"\/>\n              <circle cx=\"55\" cy=\"55\" r=\"37\"\/><circle cx=\"55\" cy=\"55\" r=\"49\"\/>\n            <\/g>\n            <circle cx=\"55\" cy=\"55\" r=\"3.5\" fill=\"#FF00A2\" stroke=\"none\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"p-txt\">\n          <h3>Branding<\/h3>\n          <p>Constru\u00edmos marcas <span class=\"m\">consistentes e relevantes<\/span>, capazes de sustentar valor ao longo do tempo \u2014 posicionamento, identidade visual e verbal, naming e arquitetura de marca.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 02 Comunica\u00e7\u00e3o: broadcast -->\n      <div class=\"panel\">\n        <div class=\"p-ico\">\n          <svg viewBox=\"0 0 110 110\" fill=\"none\" stroke=\"#FF00A2\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\">\n            <circle cx=\"38\" cy=\"55\" r=\"4.5\" fill=\"#FF00A2\" stroke=\"none\"\/>\n            <path class=\"wv\"    d=\"M52 40 Q66 55 52 70\"\/>\n            <path class=\"wv w2\" d=\"M62 30 Q84 55 62 80\"\/>\n            <path class=\"wv w3\" d=\"M72 22 Q100 55 72 88\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"p-txt\">\n          <h3>Comunica\u00e7\u00e3o<\/h3>\n          <p>Planejamos como a marca <span class=\"m\">se apresenta e se relaciona<\/span> em cada ponto de contato \u2014 conte\u00fado, presen\u00e7a digital, redes sociais e comunica\u00e7\u00e3o institucional.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 03 Publicidade: burst girando + pulso -->\n      <div class=\"panel\">\n        <div class=\"p-ico\">\n          <svg viewBox=\"0 0 110 110\" fill=\"none\" stroke=\"#FF00A2\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\">\n            <g class=\"spin\">\n              <path d=\"M55 14 V34 M55 96 V76 M14 55 H34 M96 55 H76\n                       M26 26 L40 40 M84 84 L70 70 M84 26 L70 40 M26 84 L40 70\"\/>\n            <\/g>\n            <circle class=\"pring\" cx=\"55\" cy=\"55\" r=\"30\"\/>\n            <circle cx=\"55\" cy=\"55\" r=\"7\" fill=\"#FF00A2\" stroke=\"none\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"p-txt\">\n          <h3>Publicidade<\/h3>\n          <p>Criamos campanhas e movimentos que conectam <span class=\"m\">marca, p\u00fablico e neg\u00f3cio<\/span> \u2014 conceito criativo, lan\u00e7amentos, pe\u00e7as on e offline e dire\u00e7\u00e3o criativa.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 04 Audiovisual: play + pulso -->\n      <div class=\"panel\">\n        <div class=\"p-ico\">\n          <svg viewBox=\"0 0 110 110\" fill=\"none\" stroke=\"#FF00A2\" stroke-width=\"1.6\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <rect x=\"20\" y=\"20\" width=\"70\" height=\"70\" rx=\"16\"\/>\n            <path d=\"M47 40 L70 55 L47 70 Z\" fill=\"#FF00A2\" stroke=\"none\"\/>\n            <circle class=\"pring\" cx=\"55\" cy=\"55\" r=\"40\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"p-txt\">\n          <h3>Audiovisual<\/h3>\n          <p>Damos forma \u00e0 ideia com <span class=\"m\">v\u00eddeo, motion e produ\u00e7\u00e3o<\/span> \u2014 capta\u00e7\u00e3o, edi\u00e7\u00e3o, motion design, 3D e document\u00e1rios institucionais.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 05 Digital: rede de n\u00f3s piscando -->\n      <div class=\"panel\">\n        <div class=\"p-ico\">\n          <svg viewBox=\"0 0 110 110\" fill=\"none\" stroke=\"#FF00A2\" stroke-width=\"1.4\" aria-hidden=\"true\">\n            <path d=\"M30 34 L80 30 M30 34 L38 78 M80 30 L84 66 M38 78 L84 66 M30 34 L84 66 M80 30 L38 78\"\n                  stroke=\"rgba(255,0,162,.4)\"\/>\n            <circle class=\"blink\"    cx=\"30\" cy=\"34\" r=\"6\" fill=\"#FF00A2\" stroke=\"none\"\/>\n            <circle class=\"blink b2\" cx=\"80\" cy=\"30\" r=\"6\" fill=\"#FF00A2\" stroke=\"none\"\/>\n            <circle class=\"blink b3\" cx=\"38\" cy=\"78\" r=\"6\" fill=\"#FF00A2\" stroke=\"none\"\/>\n            <circle class=\"blink b4\" cx=\"84\" cy=\"66\" r=\"6\" fill=\"#FF00A2\" stroke=\"none\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"p-txt\">\n          <h3>Digital<\/h3>\n          <p>Constru\u00edmos os <span class=\"m\">ambientes onde a marca vive<\/span> \u2014 sites, landing pages e plataformas digitais.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a00e870 e-con e-atomic-element e-flexbox-base e-f2e6c8a \" data-id=\"a00e870\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a00e870\">\n    \t\t<div class=\"elementor-element elementor-element-52eae43 elementor-widget elementor-widget-heading\" data-id=\"52eae43\" 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 2026 Paric\u00e1. All rights reserved.<\/h2>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Paric\u00e1\u00ae \u2014 Hero \/ An\u00e9is Comunica\u00e7\u00e3o Publicidade Branding Grandes marcas n\u00e3o acontecem. Elas s\u00e3o constru\u00eddas. A Paric\u00e1 \u00e9 uma ag\u00eancia independente focada em estrat\u00e9gia e criatividade que constr\u00f3i marcas e transforma a maneira como elas se apresentam, se comunicam e s\u00e3o percebidas. Ver trabalhos Como Trabalhamos Paric\u00e1\u00ae \u2014 Faixa Paric\u00e1 Marketing Design Estrat\u00e9gia Seu parceiro [&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-5521","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/pages\/5521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/parica.agency\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5521"}],"version-history":[{"count":84,"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/pages\/5521\/revisions"}],"predecessor-version":[{"id":5671,"href":"https:\/\/parica.agency\/index.php?rest_route=\/wp\/v2\/pages\/5521\/revisions\/5671"}],"wp:attachment":[{"href":"https:\/\/parica.agency\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}