Renan Caio Cabral \u2014 Portf\u00f3lio<\/title>\r\n<meta name=\"description\" content=\"Portf\u00f3lio profissional de Renan Caio Cabral \u2014 Gestor de Tr\u00e1fego Pago e Estudante de Com\u00e9rcio Exterior em Joinville, SC.\">\r\n<meta name=\"author\" content=\"Renan Caio Cabral\">\r\n<meta property=\"og:title\" content=\"Renan Caio Cabral \u2014 Portf\u00f3lio\">\r\n<meta property=\"og:description\" content=\"Gestor de Tr\u00e1fego Pago e Estudante de Com\u00e9rcio Exterior. Joinville, SC.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap&font-display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml{scroll-behavior:smooth;cursor:none}\r\n:root{\r\n --bg:#F5F2EE;\r\n --bg2:#EDEAE5;\r\n --bg3:#E5E1DB;\r\n --b:rgba(0,0,0,0.09);\r\n --b2:rgba(0,0,0,0.18);\r\n --t:#0D0D0D;\r\n --t2:rgba(13,13,13,0.78);\r\n --t3:rgba(13,13,13,0.58);\r\n --t4:rgba(13,13,13,0.42);\r\n --gold:#2A6AC9;\r\n --gold2:#4A8AE8;\r\n --gold3:rgba(42,106,201,0.10);\r\n --gold4:rgba(42,106,201,0.04);\r\n --blue:#2A6AC9;\r\n --blue2:#4A8AE8;\r\n --blue3:rgba(42,106,201,0.10);\r\n --ease:cubic-bezier(0.16,1,0.3,1);\r\n --ease2:cubic-bezier(0.34,1.56,0.64,1);\r\n --ease3:cubic-bezier(0.76,0,0.24,1);\r\n}\r\nbody{\r\n font-family:'DM Sans',sans-serif;\r\n background:var(--bg);color:var(--t);\r\n overflow-x:hidden;-webkit-font-smoothing:antialiased;\r\n cursor:none;\r\n}\r\n\r\n\/* \u2500\u2500 CURSOR \u2500\u2500 *\/\r\n#cursor{\r\n position:fixed;z-index:99999;\r\n pointer-events:none;\r\n mix-blend-mode:difference;\r\n}\r\n#cursor-dot{\r\n position:fixed;\r\n width:8px;height:8px;\r\n background:var(--t);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n transition:width .2s var(--ease),height .2s var(--ease),opacity .2s;\r\n pointer-events:none;z-index:99999;\r\n}\r\n#cursor-ring{\r\n position:fixed;\r\n width:36px;height:36px;\r\n border:1px solid rgba(240,235,227,0.3);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n transition:width .4s var(--ease),height .4s var(--ease),border-color .3s,background .3s,transform .08s linear;\r\n pointer-events:none;z-index:99998;\r\n}\r\nbody:has(a:hover) #cursor-ring,\r\nbody:has(button:hover) #cursor-ring{\r\n width:56px;height:56px;\r\n border-color:rgba(20,20,20,0.5);\r\n background:rgba(20,20,20,0.05);\r\n}\r\nbody:has(a:hover) #cursor-dot,\r\nbody:has(button:hover) #cursor-dot{\r\n width:4px;height:4px;\r\n}\r\n\r\n\/* \u2500\u2500 GRAIN \u2500\u2500 *\/\r\n.grain{\r\n position:fixed;inset:0;z-index:9990;pointer-events:none;\r\n opacity:.032;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n background-size:160px;\r\n animation:grain .5s steps(1) infinite;\r\n}\r\n@keyframes grain{\r\n 0%{background-position:0 0}15%{background-position:-8% -12%}30%{background-position:6% 8%}\r\n 45%{background-position:-14% 18%}60%{background-position:12% -6%}75%{background-position:-4% 22%}\r\n 90%{background-position:18% -14%}100%{background-position:-10% 6%}\r\n}\r\n\r\n\/* \u2500\u2500 LOADER \u2500\u2500 *\/\r\n#loader{\r\n position:fixed;inset:0;z-index:9999;background:var(--bg);\r\n display:flex;align-items:center;justify-content:center;flex-direction:column;\r\n transition:opacity 1.2s var(--ease),visibility 1.2s;\r\n}\r\n#loader.out{opacity:0;visibility:hidden;pointer-events:none}\r\n.ld-logo{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(32px,5vw,48px);\r\n letter-spacing:-0.04em;color:var(--t);\r\n overflow:hidden;text-align:center;line-height:1;\r\n}\r\n.ld-logo-inner{\r\n display:block;\r\n transform:translateY(110%);\r\n animation:up .9s var(--ease) .2s forwards;\r\n}\r\n.ld-sub{\r\n font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;\r\n color:var(--t3);margin-top:14px;\r\n opacity:0;animation:fade .8s var(--ease) .8s forwards;\r\n}\r\n.ld-progress{\r\n width:140px;height:1px;background:var(--b);margin-top:32px;overflow:hidden;\r\n}\r\n.ld-progress-fill{\r\n height:100%;width:0;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2));\r\n animation:progFill 1.8s var(--ease) .4s forwards;\r\n}\r\n@keyframes progFill{to{width:100%}}\r\n@keyframes up{to{transform:translateY(0)}}\r\n@keyframes fade{to{opacity:1}}\r\n\r\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\r\nnav{\r\n position:fixed;inset:0 0 auto;z-index:500;\r\n height:64px;padding:0 52px;\r\n display:flex;align-items:center;justify-content:space-between;\r\n transition:background .5s,border-color .5s;\r\n border-bottom:1px solid transparent;\r\n}\r\nnav.s{background:rgba(245,242,238,.92);backdrop-filter:blur(40px) saturate(180%);border-color:var(--b)}\r\n.nav-logo{\r\n font-family:'DM Serif Display',serif;\r\n font-size:18px;letter-spacing:-.03em;\r\n color:var(--t);text-decoration:none;\r\n position:relative;display:inline-flex;align-items:center;gap:8px;\r\n}\r\n.nav-logo-dot{\r\n width:5px;height:5px;border-radius:50%;background:var(--gold);\r\n animation:dotPulse 2.8s ease-in-out infinite;\r\n}\r\n@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(20,20,20,.25)}50%{opacity:.3;box-shadow:0 0 0 7px rgba(20,20,20,0)}}\r\n.nav-links{display:flex;gap:40px;list-style:none}\r\n.nav-links a{\r\n font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;\r\n color:var(--t3);text-decoration:none;position:relative;transition:color .2s;\r\n}\r\n.nav-links a::after{\r\n content:'';position:absolute;bottom:-5px;left:0;right:0;\r\n height:1px;background:var(--gold);\r\n transform:scaleX(0);transform-origin:left;\r\n transition:transform .5s var(--ease);\r\n}\r\n.nav-links a:hover,\r\n.nav-links a.act{color:var(--t)}\r\n.nav-links a:hover::after,\r\n.nav-links a.act::after{transform:scaleX(1)}\r\n.nav-r{display:flex;align-items:center;gap:12px}\r\n.nav-cta{\r\n font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--bg);background:var(--t);padding:10px 22px;\r\n text-decoration:none;position:relative;overflow:hidden;\r\n transition:color .3s;display:inline-flex;align-items:center;\r\n}\r\n.nav-cta::before{\r\n content:'';position:absolute;inset:0;\r\n background:var(--gold);\r\n transform:translateY(101%);\r\n transition:transform .5s var(--ease);\r\n}\r\n.nav-cta span{position:relative;z-index:1}\r\n.nav-cta:hover::before{transform:translateY(0)}\r\n.nav-pdf{\r\n font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--t3);border:1px solid var(--b2);padding:9px 16px;\r\n text-decoration:none;display:flex;align-items:center;gap:7px;\r\n transition:color .2s,border-color .2s;\r\n}\r\n.nav-pdf:hover{color:var(--t)}\r\n.nav-pdf svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}\r\n.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}\r\n.nav-burger span{display:block;width:22px;height:1px;background:var(--t3);transition:transform .35s var(--ease),opacity .2s}\r\n.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}\r\n.nav-burger.open span:nth-child(2){opacity:0}\r\n.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}\r\n.mob-menu{\r\n position:fixed;inset:0;z-index:400;background:rgba(245,242,238,.97);backdrop-filter:blur(28px);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;\r\n opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;\r\n}\r\n.mob-menu.open{opacity:1;visibility:visible}\r\n.mob-link{\r\n font-family:'DM Serif Display',serif;font-size:clamp(36px,9vw,52px);\r\n color:var(--t2);text-decoration:none;letter-spacing:-.03em;padding:8px 0;\r\n transition:color .2s,transform .3s var(--ease);\r\n}\r\n.mob-link:hover{color:var(--t);transform:translateX(12px)}\r\n.mob-pdf{\r\n margin-top:32px;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;\r\n color:var(--t3);text-decoration:none;border:1px solid var(--b2);padding:12px 28px;\r\n transition:color .2s;\r\n}\r\n\r\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n.hero{\r\n position:relative;min-height:100svh;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Aurora nebula layers *\/\r\n.hero-aurora{\r\n position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;\r\n}\r\n.aurora-blob{\r\n position:absolute;border-radius:50%;\r\n filter:blur(90px);\r\n animation-timing-function:ease-in-out;\r\n animation-iteration-count:infinite;\r\n animation-direction:alternate;\r\n}\r\n.aurora-blob-1{\r\n width:80vw;height:80vw;max-width:900px;max-height:900px;\r\n top:-20%;left:-15%;\r\n background:radial-gradient(circle,rgba(20,20,20,0.04) 0%,transparent 70%);\r\n animation:a1 14s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-2{\r\n width:70vw;height:70vw;max-width:800px;max-height:800px;\r\n bottom:-20%;right:-10%;\r\n background:radial-gradient(circle,rgba(160,120,60,0.09) 0%,transparent 70%);\r\n animation:a2 18s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-3{\r\n width:50vw;height:50vw;max-width:600px;max-height:600px;\r\n top:30%;left:30%;\r\n background:radial-gradient(circle,rgba(232,204,150,0.07) 0%,transparent 65%);\r\n animation:a3 11s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-4{\r\n width:40vw;height:40vw;max-width:500px;max-height:500px;\r\n top:10%;right:15%;\r\n background:radial-gradient(circle,rgba(180,140,80,0.06) 0%,transparent 65%);\r\n animation:a4 16s ease-in-out infinite alternate;\r\n}\r\n@keyframes a1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8%,6%) scale(1.12)}}\r\n@keyframes a2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7%,-8%) scale(1.08)}}\r\n@keyframes a3{0%{transform:translate(-3%,2%) scale(.9)}100%{transform:translate(4%,-4%) scale(1.15)}}\r\n@keyframes a4{0%{transform:translate(2%,-2%) scale(1)}100%{transform:translate(-5%,6%) scale(1.1)}}\r\n\r\n\/* Noise mesh *\/\r\n.hero-mesh{\r\n position:absolute;inset:0;z-index:1;pointer-events:none;\r\n opacity:.018;\r\n background-image:linear-gradient(rgba(20,20,20,.4) 1px,transparent 1px),\r\n linear-gradient(90deg,rgba(20,20,20,.4) 1px,transparent 1px);\r\n background-size:72px 72px;\r\n mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent);\r\n}\r\n\r\n#hero-canvas{\r\n position:absolute;inset:0;z-index:2;\r\n width:100%;height:100%;\r\n pointer-events:none;\r\n}\r\n\r\n.hero-fade-bottom{\r\n position:absolute;bottom:0;left:0;right:0;height:45%;\r\n background:linear-gradient(to bottom,transparent,var(--bg));\r\n z-index:3;pointer-events:none;\r\n}\r\n.hero-fade-top{\r\n position:absolute;top:0;left:0;right:0;height:20%;\r\n background:linear-gradient(to top,transparent,var(--bg));\r\n z-index:3;pointer-events:none;\r\n}\r\n\r\n\/* \u2500\u2500 FLOATING STAT CARDS \u2500\u2500 *\/\r\n.hero-stat{\r\n position:absolute;z-index:5;\r\n background:rgba(245,242,238,0.88);\r\n border:1px solid rgba(20,20,20,0.12);\r\n backdrop-filter:blur(20px);\r\n padding:16px 22px 16px 20px;\r\n pointer-events:none;\r\n opacity:0;\r\n min-width:148px;\r\n border-left:3px solid var(--gold);\r\n animation:statFloat 1s var(--ease) forwards, floatY 6s ease-in-out infinite;\r\n}\r\n.hero-stat-1{top:25%;left:4%;animation-delay:2.4s,3.5s}\r\n.hero-stat-2{top:25%;right:4%;animation-delay:2.7s,4.2s}\r\n.hero-stat-3{bottom:25%;left:4%;animation-delay:3s,4s}\r\n.hero-stat-4{bottom:25%;right:4%;animation-delay:2.9s,4.5s}\r\n@keyframes statFloat{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}\r\n.hero-stat-val{\r\n font-family:'DM Serif Display',serif;\r\n font-size:24px;font-weight:400;\r\n letter-spacing:-.03em;line-height:1;\r\n color:var(--t);\r\n margin-bottom:5px;\r\n}\r\n.hero-stat-val span{color:var(--gold);font-style:italic}\r\n.hero-stat-key{\r\n font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\r\n color:var(--t3);\r\n}\r\n.hero-stat-accent{display:none}\r\n\r\n.hero-body{\r\n position:relative;z-index:4;\r\n text-align:center;padding:0 40px;width:100%;max-width:1040px;\r\n}\r\n\r\n\/* Eyebrow pill *\/\r\n.hero-eyebrow{\r\n display:inline-flex;align-items:center;gap:10px;\r\n font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--t3);\r\n background:rgba(20,20,20,0.05);\r\n border:1px solid rgba(20,20,20,0.12);\r\n padding:8px 18px;\r\n margin-bottom:40px;\r\n opacity:0;animation:fade 1s var(--ease) 2s forwards;\r\n}\r\n.hero-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotPulse 2.5s ease-in-out infinite}\r\n\r\n\/* Name \u2014 scramble effect via JS *\/\r\n.hero-name{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(68px,12vw,172px);\r\n font-weight:400;line-height:.87;letter-spacing:-.045em;\r\n color:var(--t);margin-bottom:0;\r\n}\r\n.hero-name .ln{overflow:hidden;display:block}\r\n.hero-name .wd{\r\n display:inline-block;\r\n transform:translateY(115%);\r\n animation:up 1.2s var(--ease) forwards;\r\n}\r\n.hero-name .ln:nth-child(1) .wd{animation-delay:1.4s}\r\n.hero-name .ln:nth-child(2) .wd{animation-delay:1.55s;font-style:italic;color:var(--t2)}\r\n.hero-name .ln:nth-child(3) .wd{animation-delay:1.7s}\r\n\r\n.hero-name .underlined{position:relative;display:inline-block}\r\n.hero-name .underlined::after{\r\n content:'';position:absolute;left:0;bottom:.06em;right:0;height:3px;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2) 60%,transparent);\r\n transform:scaleX(0);transform-origin:left;\r\n animation:lineReveal 1.4s var(--ease) 2.9s forwards;\r\n}\r\n@keyframes lineReveal{to{transform:scaleX(1)}}\r\n\r\n\/* Typewriter role *\/\r\n.hero-role-wrap{\r\n margin-top:20px;margin-bottom:36px;\r\n height:28px;overflow:hidden;\r\n opacity:0;animation:fade 1s var(--ease) 2.2s forwards;\r\n}\r\n.hero-role{\r\n font-size:clamp(13px,1.5vw,17px);font-weight:300;\r\n color:var(--t2);letter-spacing:.08em;\r\n display:block;\r\n}\r\n.hero-cursor-blink{\r\n display:inline-block;width:2px;height:1em;\r\n background:var(--gold);margin-left:3px;vertical-align:middle;\r\n animation:blink 1s step-end infinite;\r\n}\r\n@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}\r\n\r\n.hero-tagline{\r\n font-size:clamp(12px,1.2vw,14px);font-weight:300;\r\n color:var(--t3);letter-spacing:.04em;\r\n opacity:0;animation:fade 1s var(--ease) 2.5s forwards;\r\n margin-bottom:44px;\r\n}\r\n@media(min-width:769px){.hero-tagline{display:none}}\r\n\r\n.hero-actions{\r\n display:flex;align-items:center;justify-content:center;gap:14px;\r\n opacity:0;animation:fade 1s var(--ease) 2.8s forwards;\r\n}\r\n.h-btn{\r\n font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;\r\n padding:13px 34px;text-decoration:none;position:relative;overflow:hidden;\r\n display:inline-flex;align-items:center;gap:8px;transition:color .3s;\r\n}\r\n.h-btn-solid{\r\n color:var(--bg);\r\n background:var(--t);\r\n}\r\n.h-btn-solid::before{\r\n content:'';position:absolute;inset:0;\r\n background:#2a2a2a;\r\n transform:translateX(-101%);transition:transform .6s var(--ease);\r\n}\r\n.h-btn-solid:hover::before{transform:translateX(0)}\r\n.h-btn-solid span{position:relative;z-index:1;color:var(--bg)}\r\n.h-btn-ghost{color:var(--t3);border:1px solid var(--b2);transition:color .2s,border-color .3s}\r\n.h-btn-ghost:hover{color:var(--t);border-color:rgba(79,127,255,.4)}\r\n\r\n\/* scroll pip *\/\r\n.hero-scroll{\r\n position:absolute;bottom:36px;left:50%;transform:translateX(-50%);\r\n display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;\r\n opacity:0;animation:fade 1s var(--ease) 3.4s forwards;\r\n}\r\n.hero-scroll-word{font-size:8px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--t4)}\r\n.hero-scroll-track{width:1px;height:52px;background:var(--b);overflow:hidden;position:relative}\r\n.hero-scroll-pip{\r\n position:absolute;width:100%;height:40%;\r\n background:linear-gradient(to bottom,transparent,var(--t),transparent);\r\n animation:scrollPip 2.4s ease-in-out infinite 4s;\r\n}\r\n@keyframes scrollPip{0%{top:-50%}100%{top:150%}}\r\n\r\n\/* corners *\/\r\n.hc{position:absolute;width:28px;height:28px;opacity:0;animation:fade .8s var(--ease) 2.8s forwards;z-index:5}\r\n.hc.tl{top:88px;left:52px;border-top:1px solid var(--b2);border-left:1px solid var(--b2)}\r\n.hc.tr{top:88px;right:52px;border-top:1px solid var(--b2);border-right:1px solid var(--b2)}\r\n.hc.bl{bottom:68px;left:52px;border-bottom:1px solid var(--b2);border-left:1px solid var(--b2)}\r\n.hc.br{bottom:68px;right:52px;border-bottom:1px solid var(--b2);border-right:1px solid var(--b2)}\r\n\r\n.hero-loc{\r\n position:absolute;bottom:50px;left:52px;z-index:5;\r\n font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);\r\n display:flex;align-items:center;gap:10px;\r\n opacity:0;animation:fade .8s var(--ease) 3.1s forwards;\r\n}\r\n.hero-loc::before{content:'';width:18px;height:1px;background:var(--t4)}\r\n\r\n\/* \u2500\u2500 TICKER \u2500\u2500 *\/\r\n.ticker{\r\n overflow:hidden;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2);\r\n background:var(--bg3);padding:14px 0;position:relative;z-index:2;\r\n}\r\n.ticker-track{display:flex;width:max-content;animation:tickR 38s linear infinite;will-change:transform}\r\n.ticker-track:hover{animation-play-state:paused}\r\n.ti{\r\n font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;\r\n color:var(--t3);white-space:nowrap;padding:0 32px;\r\n display:flex;align-items:center;gap:32px;transition:color .2s;\r\n}\r\n.ti::after{content:'\u2726';font-size:6px;color:var(--gold);opacity:.7}\r\n.ticker:hover .ti{color:var(--t2)}\r\n@keyframes tickR{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\r\n.w{max-width:1000px;margin:0 auto;padding:0 52px}\r\n.sec{padding:130px 0;border-top:1px solid var(--b);scroll-margin-top:64px}\r\n\r\n\/* Section header *\/\r\n.sh{\r\n display:flex;justify-content:space-between;align-items:flex-end;\r\n padding-bottom:44px;border-bottom:1px solid var(--b);margin-bottom:80px;\r\n}\r\n.sh-n{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:10px}\r\n.sh-title{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(40px,5.5vw,64px);font-weight:400;\r\n letter-spacing:-.035em;line-height:.93;color:var(--t);\r\n}\r\n.sh-title em{font-style:italic;color:var(--t2)}\r\n.sh-hint{font-size:11px;font-weight:300;color:var(--t3);padding-bottom:4px}\r\n\r\n\/* reveal *\/\r\n.reveal{\r\n opacity:0;transform:translateY(32px);\r\n transition:opacity 1s var(--ease),transform 1s var(--ease);\r\n}\r\n.reveal.visible{opacity:1;transform:none}\r\n\r\n\/* \u2500\u2500 SOBRE \u2500\u2500 *\/\r\n.about-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}\r\n\r\n\/* 3D tilt card *\/\r\n.tilt-card{\r\n background:var(--bg2);border:1px solid var(--b);padding:48px 44px;\r\n position:relative;overflow:hidden;\r\n transform-style:preserve-3d;perspective:800px;\r\n transition:border-color .4s,transform .1s;\r\n will-change:transform;\r\n}\r\n.tilt-card::before{\r\n content:'';position:absolute;top:0;left:0;right:0;height:2px;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2) 50%,transparent);\r\n}\r\n.tilt-card::after{\r\n content:'';position:absolute;\r\n inset:-1px;\r\n background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(20,20,20,0.06), transparent 60%);\r\n pointer-events:none;\r\n opacity:0;transition:opacity .3s;\r\n}\r\n.tilt-card:hover::after{opacity:1}\r\n.tilt-card:hover{border-color:rgba(20,20,20,0.2)}\r\n\r\n.ac-tag{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:20px}\r\n.ac-name{\r\n font-family:'DM Serif Display',serif;font-size:30px;font-weight:400;\r\n color:var(--t);letter-spacing:-.03em;line-height:1.1;margin-bottom:6px;\r\n}\r\n.ac-role{font-size:13px;font-weight:300;color:var(--t2);line-height:1.8;margin-bottom:40px}\r\n.ac-badge{\r\n display:inline-flex;align-items:center;gap:9px;\r\n font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;\r\n color:var(--gold);\r\n}\r\n.badge-dot{\r\n width:6px;height:6px;border-radius:50%;background:var(--gold);\r\n animation:dotPulse 2.8s ease-in-out infinite;\r\n}\r\n\r\n.facts{}\r\n.fact{\r\n display:flex;justify-content:space-between;align-items:baseline;\r\n padding:16px 0;border-bottom:1px solid var(--b);\r\n position:relative;overflow:hidden;\r\n}\r\n.fact:first-child{border-top:1px solid var(--b)}\r\n.fact-underline{\r\n position:absolute;bottom:0;left:0;right:0;height:1px;\r\n background:linear-gradient(90deg,var(--gold),transparent);\r\n transform:scaleX(0);transform-origin:left;\r\n transition:transform .7s var(--ease);\r\n}\r\n.fact:hover .fact-underline{transform:scaleX(1)}\r\n.fact-k{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}\r\n.fact-v{font-size:13px;font-weight:300;color:var(--t2);text-align:right;max-width:250px}\r\n.fact-v.live{color:var(--gold)}\r\n\r\n\/* \u2500\u2500 EXPERI\u00caNCIA \u2500\u2500 *\/\r\n.exp-item{\r\n border-bottom:1px solid var(--b);position:relative;overflow:hidden;\r\n}\r\n.exp-item:first-child{border-top:1px solid var(--b)}\r\n.exp-track{\r\n position:absolute;left:0;top:0;bottom:0;width:2px;\r\n background:linear-gradient(to bottom,var(--gold),var(--gold2),transparent);\r\n transform:scaleY(0);transform-origin:top;\r\n transition:transform .7s var(--ease);\r\n}\r\n.exp-item.open .exp-track,.exp-item:hover .exp-track{transform:scaleY(1)}\r\n.exp-head{\r\n display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:center;\r\n padding:34px 0 34px 20px;cursor:pointer;user-select:none;\r\n}\r\n.exp-num{display:none}\r\n.exp-item.open .exp-head{padding-bottom:0}\r\n.exp-num{\r\n font-family:'DM Serif Display',serif;font-style:italic;\r\n font-size:12px;color:var(--t4);letter-spacing:.05em;\r\n}\r\n.exp-co{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}\r\n.exp-role{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(21px,2.8vw,30px);font-weight:400;\r\n color:var(--t);letter-spacing:-.025em;line-height:1.05;\r\n}\r\n.exp-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px}\r\n.exp-period{font-size:11px;font-weight:300;color:var(--t3);white-space:nowrap;letter-spacing:.04em}\r\n.exp-tog{\r\n width:30px;height:30px;border:1px solid var(--b);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n transition:border-color .3s;\r\n}\r\n.exp-item.open .exp-tog{border-color:rgba(20,20,20,.3)}\r\n.exp-tog-cross{\r\n position:relative;width:12px;height:12px;\r\n}\r\n.exp-tog-cross::before,.exp-tog-cross::after{\r\n content:'';position:absolute;background:var(--t3);\r\n transition:transform .45s var(--ease),background .2s;\r\n}\r\n.exp-tog-cross::before{width:12px;height:1px;top:50%;left:0;margin-top:-.5px}\r\n.exp-tog-cross::after{width:1px;height:12px;left:50%;top:0;margin-left:-.5px}\r\n.exp-item.open .exp-tog-cross::after{transform:rotate(90deg);opacity:0}\r\n.exp-item.open .exp-tog-cross::before,.exp-item.open .exp-tog-cross::after{background:var(--gold)}\r\n\r\n.exp-body{overflow:hidden;max-height:0;transition:max-height .75s var(--ease);padding-left:0}\r\n.exp-item.open .exp-body{max-height:400px}\r\n.exp-inner{padding:18px 0 38px 20px}\r\n.exp-desc{font-size:14px;font-weight:300;color:var(--t2);line-height:1.95;max-width:560px;margin-bottom:22px}\r\n.exp-tags{display:flex;flex-wrap:wrap;gap:7px}\r\n.tag{\r\n font-size:10px;font-weight:400;letter-spacing:.06em;\r\n color:var(--t3);border:1px solid var(--b);padding:5px 13px;\r\n transition:color .2s,border-color .2s,background .2s;\r\n}\r\n.exp-item.open .tag:hover{color:var(--t2);border-color:var(--b2);background:var(--bg3)}\r\n.tag-live{\r\n font-size:10px;font-weight:500;letter-spacing:.06em;\r\n color:var(--t);border:1px solid rgba(20,20,20,.2);\r\n padding:5px 13px;background:var(--gold4);\r\n}\r\n\r\n\/* \u2500\u2500 FORMA\u00c7\u00c3O \u2500\u2500 *\/\r\n.edu-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}\r\n.edu-deg{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(26px,3.5vw,38px);font-weight:400;\r\n color:var(--t);letter-spacing:-.025em;line-height:1.15;margin-bottom:8px;\r\n}\r\n.edu-deg em{font-style:italic;color:var(--t2)}\r\n.edu-inst{font-size:12px;font-weight:300;color:var(--t3);letter-spacing:.05em;margin-bottom:36px}\r\n.edu-cells{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b)}\r\n.edu-cell{background:var(--bg);padding:18px 20px}\r\n.edu-ck{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:6px}\r\n.edu-cv{font-size:15px;font-weight:300;color:var(--t2)}\r\n.edu-cv.live{color:var(--gold);display:flex;align-items:center;gap:7px}\r\n.edu-cv.live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotPulse 2.5s ease-in-out infinite;flex-shrink:0}\r\n\r\n.edu-prog{padding-top:4px}\r\n.edu-pct-num{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(60px,9vw,92px);font-weight:400;\r\n color:var(--t);letter-spacing:-.055em;line-height:1;margin-bottom:4px;\r\n}\r\n.edu-pct-sub{font-size:12px;font-weight:300;color:var(--t3);letter-spacing:.04em;margin-bottom:36px}\r\n.edu-bar{height:2px;background:var(--b);position:relative;margin-bottom:22px;overflow:hidden}\r\n.edu-fill{\r\n position:absolute;top:0;left:0;height:100%;width:0;\r\n background:linear-gradient(90deg,var(--t),var(--t2),rgba(20,20,20,.1));\r\n box-shadow:none;\r\n transition:width 2.6s var(--ease) .4s;\r\n}\r\n.edu-fill.v{width:30%}\r\n.edu-sems{display:grid;grid-template-columns:repeat(10,1fr);margin-bottom:18px}\r\n.edu-sem{display:flex;flex-direction:column;align-items:center;gap:5px}\r\n.edu-sem-b{width:1px;height:8px;background:var(--b)}\r\n.edu-sem.done .edu-sem-b{background:var(--gold)}\r\n.edu-sem.now .edu-sem-b{background:var(--gold2);box-shadow:0 0 8px var(--gold)}\r\n.edu-sem-n{font-size:9px;font-weight:300;color:var(--t4)}\r\n.edu-sem.done .edu-sem-n{color:var(--t3)}\r\n.edu-sem.now .edu-sem-n{color:var(--gold)}\r\n.edu-yrs{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--b)}\r\n.edu-yr{font-size:9px;font-weight:400;color:var(--t4)}\r\n.edu-yr.now{color:var(--t2)}\r\n\r\n\/* \u2500\u2500 SKILLS \u2014 expandable list \u2500\u2500 *\/\r\n.sk-outer{border:1px solid var(--b);overflow:hidden}\r\n\r\n\/* category row *\/\r\n.sk-row{\r\n border-bottom:1px solid var(--b);\r\n position:relative;overflow:hidden;\r\n}\r\n.sk-row:first-child{border-top:1px solid var(--b)}\r\n\r\n.sk-row-head{\r\n display:grid;\r\n grid-template-columns:56px 1fr auto auto;\r\n gap:0 24px;align-items:center;\r\n padding:28px 0;cursor:pointer;user-select:none;\r\n transition:background .25s;\r\n}\r\n.sk-row-head:hover{background:rgba(0,0,0,.02)}\r\n.sk-row.open .sk-row-head{background:rgba(0,0,0,.02)}\r\n\r\n\/* left accent bar *\/\r\n.sk-row-accent{\r\n position:absolute;left:0;top:0;bottom:0;width:2px;\r\n background:linear-gradient(to bottom,var(--gold),var(--gold2),transparent);\r\n transform:scaleY(0);transform-origin:top;\r\n transition:transform .6s var(--ease);\r\n}\r\n.sk-row.open .sk-row-accent,.sk-row-head:hover .sk-row-accent{transform:scaleY(1)}\r\n\r\n.sk-row-num{\r\n font-family:'DM Serif Display',serif;font-style:italic;\r\n font-size:13px;color:var(--t4);letter-spacing:.04em;\r\n text-align:center;padding-left:24px;\r\n}\r\n.sk-row-meta{}\r\n.sk-row-cat{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:4px}\r\n.sk-row-name{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(19px,2.2vw,26px);font-weight:400;\r\n color:var(--t);letter-spacing:-.02em;line-height:1.1;\r\n}\r\n.sk-row-count{\r\n font-size:11px;font-weight:400;color:var(--t4);\r\n background:var(--bg2);border:1px solid var(--b);\r\n padding:4px 10px;white-space:nowrap;\r\n}\r\n.sk-row.open .sk-row-count{color:var(--gold);border-color:var(--gold3);background:rgba(42,106,201,.06)}\r\n.sk-row-tog{\r\n width:28px;height:28px;border:1px solid var(--b);\r\n display:flex;align-items:center;justify-content:center;\r\n margin-right:24px;flex-shrink:0;\r\n transition:border-color .3s,background .3s;\r\n}\r\n.sk-row-tog-cross{position:relative;width:10px;height:10px}\r\n.sk-row-tog-cross::before,.sk-row-tog-cross::after{\r\n content:'';position:absolute;background:var(--t3);\r\n transition:transform .4s var(--ease),background .2s;\r\n}\r\n.sk-row-tog-cross::before{width:10px;height:1px;top:50%;left:0;margin-top:-.5px}\r\n.sk-row-tog-cross::after{width:1px;height:10px;left:50%;top:0;margin-left:-.5px}\r\n.sk-row.open .sk-row-tog{border-color:var(--gold);background:rgba(42,106,201,.06)}\r\n.sk-row.open .sk-row-tog-cross::after{transform:rotate(90deg);opacity:0}\r\n.sk-row.open .sk-row-tog-cross::before,.sk-row.open .sk-row-tog-cross::after{background:var(--gold)}\r\n\r\n\/* expandable body *\/\r\n.sk-row-body{\r\n overflow:hidden;max-height:0;\r\n transition:max-height .65s var(--ease);\r\n}\r\n.sk-row.open .sk-row-body{max-height:340px}\r\n.sk-row-inner{\r\n padding:32px 36px 40px 80px;\r\n display:flex;gap:48px;align-items:flex-start;\r\n border-top:1px solid var(--b);\r\n}\r\n\r\n.sk-pills-col{flex:1}\r\n.sk-inner-label{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:14px}\r\n.sk-pills{display:flex;flex-wrap:wrap;gap:7px}\r\n.sk-pill{\r\n font-size:11px;font-weight:400;letter-spacing:.03em;\r\n color:var(--t2);border:1px solid var(--b);padding:7px 14px;\r\n position:relative;overflow:hidden;cursor:default;\r\n transition:color .2s,border-color .2s,transform .25s var(--ease2);\r\n}\r\n.sk-pill::before{\r\n content:'';position:absolute;inset:0;\r\n background:var(--gold3);\r\n transform:translateX(-101%);transition:transform .38s var(--ease);\r\n}\r\n.sk-pill:hover{color:var(--t);border-color:rgba(42,106,201,.3);transform:translateY(-2px)}\r\n.sk-pill:hover::before{transform:translateX(0)}\r\n.sk-pill-inner{position:relative;z-index:1}\r\n\r\n.sk-context-col{\r\n width:220px;flex-shrink:0;\r\n border-left:1px solid var(--b);\r\n padding-left:32px;\r\n}\r\n.sk-context-label{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:10px}\r\n.sk-context-text{font-size:12px;font-weight:300;color:var(--t3);line-height:1.75}\r\n.sk-context-note{\r\n display:inline-block;margin-top:12px;\r\n font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--gold);\r\n}\r\n\r\n\/* \u2500\u2500 CONTATO \u2500\u2500 *\/\r\n.contact-wrap{padding:130px 0 150px;border-top:1px solid var(--b)}\r\n.contact-big{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(64px,11vw,140px);\r\n font-weight:400;line-height:.87;letter-spacing:-.05em;\r\n color:var(--t);margin-bottom:80px;\r\n}\r\n.contact-big em{font-style:italic;color:var(--t2)}\r\n\r\n.clink{\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:28px 0;border-bottom:1px solid var(--b);\r\n text-decoration:none;position:relative;overflow:hidden;\r\n transition:padding-left .45s var(--ease);\r\n}\r\n.clink:first-child{border-top:1px solid var(--b)}\r\n.clink-sweep{\r\n position:absolute;inset:0;\r\n background:linear-gradient(90deg,var(--gold3),transparent);\r\n transform:translateX(-101%);\r\n transition:transform .65s var(--ease);\r\n}\r\n.clink:hover .clink-sweep{transform:translateX(0)}\r\n.clink:hover{padding-left:14px}\r\n.clink-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%}\r\n.clink-l{display:flex;align-items:baseline;gap:28px}\r\n.clink-type{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);width:76px;flex-shrink:0}\r\n.clink-val{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(19px,2.8vw,30px);font-weight:400;\r\n color:var(--t);letter-spacing:-.015em;transition:color .2s;\r\n}\r\n.clink-arr{\r\n font-size:22px;color:var(--t3);\r\n transition:color .2s,transform .45s var(--ease);z-index:1;\r\n}\r\n.clink:hover .clink-arr{color:var(--gold);transform:translate(7px,-7px)}\r\n\r\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\nfooter{\r\n border-top:1px solid var(--b);padding:26px 52px;\r\n display:flex;justify-content:space-between;align-items:center;\r\n}\r\n.ft-l{font-family:'DM Serif Display',serif;font-size:16px;font-weight:400;color:var(--t3);letter-spacing:-.02em}\r\n.ft-l em{font-style:italic}\r\n.ft-r{display:flex;align-items:center;gap:18px}\r\n.ft-note{font-size:10px;font-weight:300;color:var(--t4);letter-spacing:.08em}\r\n.btn-dl{\r\n display:inline-flex;align-items:center;gap:7px;\r\n font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;\r\n color:var(--bg);background:var(--t);padding:10px 20px;\r\n text-decoration:none;transition:opacity .2s;position:relative;overflow:hidden;\r\n}\r\n.btn-dl::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .5s var(--ease)}\r\n.btn-dl span{position:relative;z-index:1}\r\n.btn-dl:hover::before{transform:translateX(0)}\r\n.btn-dl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;position:relative;z-index:1}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE \u2014 all breakpoints\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 4K \/ ultra-wide (>1600px) \u2500\u2500 *\/\r\n@media(min-width:1600px){\r\n .w{max-width:1200px}\r\n .hero-body{max-width:1240px}\r\n .hero-name{font-size:clamp(140px,11vw,200px)}\r\n .sh-title{font-size:clamp(48px,4vw,72px)}\r\n .sec{padding:160px 0}\r\n nav{height:72px}\r\n .sk-tab{padding:28px 22px}\r\n .sk-left,.sk-right{padding:60px 52px}\r\n .contact-big{font-size:clamp(80px,10vw,160px)}\r\n}\r\n\r\n\/* \u2500\u2500 Large desktop (1200\u20131600px) \u2014 baseline, handled above \u2500\u2500 *\/\r\n\r\n\/* \u2500\u2500 Tablet landscape (900\u20131199px) \u2500\u2500 *\/\r\n@media(max-width:1199px){\r\n .w{padding:0 40px}\r\n nav{padding:0 40px}\r\n .hero-body{padding:0 40px}\r\n .hero-name{font-size:clamp(80px,11vw,140px)}\r\n .about-grid{grid-template-columns:1fr 1.1fr;gap:48px}\r\n .edu-grid{grid-template-columns:1fr 1fr;gap:48px}\r\n .sk-left{padding:40px 36px}\r\n .sk-right{padding:40px 36px}\r\n .contact-big{font-size:clamp(64px,9vw,110px)}\r\n .sec{padding:110px 0}\r\n .hc.tl{left:40px}.hc.tr{right:40px}\r\n .hc.bl{left:40px;bottom:52px}.hc.br{right:40px;bottom:52px}\r\n .hero-stat-1{left:2%}.hero-stat-2{right:2%}\r\n .hero-stat-3{left:2%}.hero-stat-4{right:2%}\r\n}\r\n\r\n\/* \u2500\u2500 Tablet portrait (768\u2013899px) \u2500\u2500 *\/\r\n@media(max-width:899px){\r\n html,body{cursor:auto}\r\n #cursor-dot,#cursor-ring{display:none}\r\n nav{padding:0 28px;height:58px}\r\n .nav-links{display:none}\r\n .nav-burger{display:flex}\r\n .nav-cta{font-size:10px;padding:8px 16px}\r\n .nav-pdf{padding:7px 12px;font-size:10px}\r\n\r\n .w{padding:0 28px}\r\n .hero-body{padding:0 28px}\r\n .hero-name{font-size:clamp(68px,13vw,110px)}\r\n .hero-stat{display:none}\r\n .hc{display:none}\r\n .hero-loc{left:28px}\r\n .hero-actions{flex-direction:column;align-items:center;gap:10px}\r\n .h-btn{width:100%;max-width:280px;justify-content:center}\r\n\r\n .sec{padding:88px 0}\r\n .sh{flex-direction:column;align-items:flex-start;gap:6px}\r\n .sh-hint{display:none}\r\n .sh-title{font-size:clamp(36px,6vw,52px)}\r\n\r\n .about-grid{grid-template-columns:1fr;gap:32px}\r\n .tilt-card{padding:32px 28px}\r\n\r\n .edu-grid{grid-template-columns:1fr;gap:44px}\r\n .edu-pct-num{font-size:clamp(52px,10vw,80px)}\r\n\r\n \/* skills accordion tablet *\/\r\n .sk-row-head{padding:24px 20px 24px 20px;grid-template-columns:1fr auto}\r\n .sk-row-num{display:none}\r\n .sk-row-inner{padding:28px 20px 32px 20px;flex-direction:column;gap:24px}\r\n .sk-context-col{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--b);padding-top:20px}\r\n .sk-row.open .sk-row-body{max-height:560px}\r\n .sk-row-tog{margin-right:0}\r\n\r\n .contact-big{font-size:clamp(52px,10vw,88px);margin-bottom:52px}\r\n .clink{padding:22px 0}\r\n .clink-l{gap:16px}\r\n .clink-val{font-size:clamp(17px,3vw,24px)}\r\n\r\n footer{padding:20px 28px;flex-direction:column;gap:12px;text-align:center}\r\n .ft-r{flex-direction:column;align-items:center;gap:8px}\r\n}\r\n\r\n\/* \u2500\u2500 Mobile large (480\u2013767px) \u2500\u2500 *\/\r\n@media(max-width:767px){\r\n nav{padding:0 16px;height:54px}\r\n .nav-cta{display:none}\r\n .nav-pdf span{display:none}\r\n .nav-pdf{padding:7px 10px}\r\n\r\n .w{padding:0 16px}\r\n .hero-body{padding:0 16px}\r\n .hero-name{font-size:clamp(56px,16vw,92px)}\r\n .hero-eyebrow{font-size:9px;padding:5px 12px;margin-bottom:24px}\r\n .hero-role-wrap{margin-top:12px;margin-bottom:24px}\r\n .hero-role{font-size:clamp(12px,3.5vw,15px)}\r\n .hero-actions{gap:8px}\r\n .h-btn{padding:11px 22px;font-size:10px}\r\n .hero-scroll{bottom:20px}\r\n .hero-loc{display:none}\r\n\r\n .sec{padding:64px 0}\r\n .sh{padding-bottom:20px;margin-bottom:40px}\r\n .sh-title{font-size:clamp(32px,8vw,46px)}\r\n .sh-n{font-size:9px}\r\n\r\n .ac-name{font-size:24px}\r\n .ac-role{font-size:12px;margin-bottom:24px}\r\n .tilt-card{padding:24px 20px}\r\n\r\n \/* exp \u2014 sem n\u00famero, padding lateral consistente *\/\r\n .exp-head{\r\n grid-template-columns:1fr auto;\r\n gap:0 12px;\r\n padding:22px 16px;\r\n }\r\n .exp-item.open .exp-head{padding-bottom:0}\r\n .exp-inner{padding:16px 16px 28px 16px}\r\n .exp-role{font-size:clamp(17px,4.5vw,22px)}\r\n .exp-co{font-size:9px}\r\n .exp-tags{gap:5px}\r\n .etag,.etag-live{font-size:9px;padding:4px 9px}\r\n .exp-tog{width:22px;height:22px;font-size:12px}\r\n\r\n \/* forma\u00e7\u00e3o *\/\r\n .edu-cells{grid-template-columns:1fr 1fr}\r\n .edu-cell{padding:12px 14px}\r\n .edu-pct-num{font-size:clamp(48px,13vw,68px)}\r\n\r\n \/* skills *\/\r\n .sk-outer{border-left:none;border-right:none}\r\n .sk-row-head{\r\n grid-template-columns:1fr auto;\r\n padding:20px 16px;\r\n gap:0 12px;\r\n }\r\n .sk-row-num{display:none}\r\n .sk-row-tog{margin-right:0;width:24px;height:24px}\r\n .sk-row-count{display:none}\r\n .sk-row-inner{padding:20px 16px 28px 16px;flex-direction:column;gap:18px}\r\n .sk-inner-label{font-size:8px}\r\n .sk-pills{gap:6px}\r\n .sk-pill{font-size:10px;padding:6px 11px}\r\n .sk-context-col{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--b);padding-top:16px}\r\n .sk-context-text{font-size:11px}\r\n .sk-row.open .sk-row-body{max-height:600px}\r\n\r\n \/* contato *\/\r\n .contact-big{font-size:clamp(40px,13vw,64px);margin-bottom:36px;line-height:.9}\r\n .clink{padding:18px 0}\r\n .clink-l{flex-direction:column;align-items:flex-start;gap:3px}\r\n .clink-type{width:auto;font-size:9px}\r\n .clink-val{font-size:clamp(15px,4.5vw,20px)}\r\n .clink-arr{font-size:16px}\r\n\r\n footer{padding:16px;flex-direction:column;gap:10px;text-align:center}\r\n .ft-r{flex-direction:column;align-items:center;gap:8px}\r\n .ft-note{display:none}\r\n}\r\n\r\n\/* \u2500\u2500 Mobile small (<479px) \u2500\u2500 *\/\r\n@media(max-width:479px){\r\n .w{padding:0 14px}\r\n .hero-body{padding:0 14px}\r\n .hero-name{font-size:clamp(48px,18vw,72px);line-height:.9}\r\n .hero-eyebrow{display:none}\r\n .hero-loc{left:14px}\r\n .hero-actions .h-btn-ghost{display:none}\r\n\r\n .sec{padding:56px 0}\r\n .sh-title{font-size:clamp(28px,9vw,40px)}\r\n\r\n .tilt-card{padding:20px 16px}\r\n .ac-name{font-size:22px}\r\n .ac-status{font-size:9px}\r\n\r\n .fact{flex-direction:column;gap:3px;align-items:flex-start;padding:12px 0}\r\n .fact-v{text-align:left;max-width:100%;font-size:12px}\r\n .fact-k{font-size:9px}\r\n\r\n .exp-head{padding:18px 14px;gap:0 10px}\r\n .exp-inner{padding:14px 14px 24px 14px}\r\n .exp-role{font-size:clamp(16px,5vw,20px)}\r\n\r\n .edu-cells{grid-template-columns:1fr}\r\n .edu-pct-num{font-size:clamp(44px,16vw,64px)}\r\n .edu-pct-sub{font-size:10px}\r\n\r\n .sk-row-head{padding:18px 14px}\r\n .sk-row-name{font-size:16px}\r\n .sk-row-inner{padding:16px 14px 24px 14px}\r\n\r\n .contact-big{font-size:clamp(36px,15vw,52px);margin-bottom:28px}\r\n .clink-val{font-size:clamp(13px,5vw,17px)}\r\n .clink{padding:16px 0}\r\n\r\n footer{padding:14px}\r\n}\r\n\r\n\/* \u2500\u2500 Touch: disable hover effects that don't make sense \u2500\u2500 *\/\r\n@media(hover:none){\r\n .fact:hover .fact-underline{transform:scaleX(0)}\r\n .nav-links a::after{display:none}\r\n .clink:hover{padding-left:0}\r\n .clink:hover::after{display:none}\r\n .sk-pill:hover::before{display:none}\r\n .tilt-card{transform:none!important}\r\n}\r\n\r\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\r\n@media(prefers-reduced-motion:reduce){\r\n *,*::before,*::after{\r\n animation-duration:.01ms!important;\r\n animation-iteration-count:1!important;\r\n transition-duration:.01ms!important;\r\n }\r\n #loader{display:none}\r\n .hero-name .wd,.hero-eyebrow,.hero-role-wrap,.hero-tagline,.hero-actions,.hero-scroll,.hero-stat,.hc,.hero-loc{opacity:1;transform:none}\r\n .reveal{opacity:1;transform:none}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"grain\"><\/div>\r\n<div id=\"cursor-dot\"><\/div>\r\n<div id=\"cursor-ring\"><\/div>\r\n\r\n\r\n<div id=\"loader\">\r\n <div class=\"ld-logo\"><span class=\"ld-logo-inner\">Renan Caio Cabral<\/span><\/div>\r\n <div class=\"ld-sub\">Portf\u00f3lio \u00b7 2026<\/div>\r\n <div class=\"ld-progress\"><div class=\"ld-progress-fill\"><\/div><\/div>\r\n<\/div>\r\n\r\n\r\n<nav id=\"nav\">\r\n <a class=\"nav-logo\" href=\"#\"><span class=\"nav-logo-dot\"><\/span>Renan Cabral<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#sobre\">Sobre<\/a><\/li>\r\n <li><a href=\"#experiencia\">Experi\u00eancia<\/a><\/li>\r\n <li><a href=\"#formacao\">Forma\u00e7\u00e3o<\/a><\/li>\r\n <li><a href=\"#habilidades\">Habilidades<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-r\">\r\n <a class=\"nav-pdf\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\r\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\r\n PDF\r\n <\/a>\r\n <a class=\"nav-cta\" href=\"#contato\"><span>Contato<\/span><\/a>\r\n <button class=\"nav-burger\" id=\"burger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n<\/nav>\r\n\r\n<div class=\"mob-menu\" id=\"mob-menu\">\r\n <a href=\"#sobre\" class=\"mob-link\">Sobre<\/a>\r\n <a href=\"#experiencia\" class=\"mob-link\">Experi\u00eancia<\/a>\r\n <a href=\"#formacao\" class=\"mob-link\">Forma\u00e7\u00e3o<\/a>\r\n <a href=\"#habilidades\" class=\"mob-link\">Habilidades<\/a>\r\n <a href=\"#contato\" class=\"mob-link\">Contato<\/a>\r\n <a class=\"mob-pdf\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\u2193 Baixar Curr\u00edculo PDF<\/a>\r\n<\/div>\r\n\r\n\r\n<section class=\"hero\">\r\n \r\n <div class=\"hero-aurora\">\r\n <div class=\"aurora-blob aurora-blob-1\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-2\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-3\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-4\"><\/div>\r\n <\/div>\r\n <div class=\"hero-mesh\"><\/div>\r\n <canvas id=\"hero-canvas\"><\/canvas>\r\n <div class=\"hero-fade-top\"><\/div>\r\n <div class=\"hero-fade-bottom\"><\/div>\r\n\r\n \r\n <div class=\"hero-stat hero-stat-1\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">Comex<\/div>\r\n <div class=\"hero-stat-key\">Univille \u00b7 3\u00ba sem.<\/div>\r\n <\/div>\r\n <div class=\"hero-stat hero-stat-2\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">20<span>anos<\/span><\/div>\r\n <div class=\"hero-stat-key\">Santa Catarina \u00b7 BR<\/div>\r\n <\/div>\r\n <div class=\"hero-stat hero-stat-4\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">N8N<span>+<\/span><\/div>\r\n <div class=\"hero-stat-key\">Automa\u00e7\u00e3o & IA<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n \r\n\r\n <div class=\"hero-body\">\r\n <div class=\"hero-eyebrow\">\r\n <span class=\"hero-eyebrow-dot\"><\/span>\r\n Portf\u00f3lio Profissional \u00b7 2026\r\n <\/div>\r\n <h1 class=\"hero-name\">\r\n <span class=\"ln\"><span class=\"wd\">Renan<\/span><\/span>\r\n <span class=\"ln\"><span class=\"wd\">Caio<\/span><\/span>\r\n <span class=\"ln\"><span class=\"wd\"><span class=\"underlined\">Cabral<\/span><\/span><\/span>\r\n <\/h1>\r\n <div class=\"hero-role-wrap\">\r\n <span class=\"hero-role\" id=\"hero-role\">Gestor de Tr\u00e1fego Pago<span class=\"hero-cursor-blink\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"hero-actions\">\r\n <a class=\"h-btn h-btn-solid\" href=\"#experiencia\"><span>Ver trajet\u00f3ria<\/span><\/a>\r\n <a class=\"h-btn h-btn-ghost\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\u2193 Baixar CV<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-scroll\">\r\n <div class=\"hero-scroll-word\">scroll<\/div>\r\n <div class=\"hero-scroll-track\"><div class=\"hero-scroll-pip\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"hero-loc\">Joinville \u00b7 SC \u00b7 Brasil<\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"ticker\" aria-hidden=\"true\">\r\n <div class=\"ticker-track\">\r\n <span class=\"ti\">Tr\u00e1fego Pago<\/span><span class=\"ti\">Google ADS<\/span><span class=\"ti\">Meta ADS<\/span><span class=\"ti\">Rastreamento<\/span><span class=\"ti\">GTM<\/span><span class=\"ti\">Stape<\/span><span class=\"ti\">Automa\u00e7\u00e3o<\/span><span class=\"ti\">N8N<\/span><span class=\"ti\">Power Automate<\/span><span class=\"ti\">IA Generativa<\/span><span class=\"ti\">WordPress<\/span><span class=\"ti\">VPS<\/span><span class=\"ti\">Com\u00e9rcio Exterior<\/span><span class=\"ti\">Supply Chain<\/span>\r\n <span class=\"ti\">Tr\u00e1fego Pago<\/span><span class=\"ti\">Google ADS<\/span><span class=\"ti\">Meta ADS<\/span><span class=\"ti\">Rastreamento<\/span><span class=\"ti\">GTM<\/span><span class=\"ti\">Stape<\/span><span class=\"ti\">Automa\u00e7\u00e3o<\/span><span class=\"ti\">N8N<\/span><span class=\"ti\">Power Automate<\/span><span class=\"ti\">IA Generativa<\/span><span class=\"ti\">WordPress<\/span><span class=\"ti\">VPS<\/span><span class=\"ti\">Com\u00e9rcio Exterior<\/span><span class=\"ti\">Supply Chain<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"sobre\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">00 \u2014 Sobre<\/p><h2 class=\"sh-title\">Quem <em>sou<\/em><\/h2><\/div>\r\n\r\n <\/div>\r\n <div class=\"about-grid\">\r\n <div class=\"tilt-card reveal\" id=\"about-card\">\r\n <p class=\"ac-tag\">Profissional<\/p>\r\n <p class=\"ac-name\">Renan Caio Cabral<\/p>\r\n <p class=\"ac-role\">Estudante de Com\u00e9rcio Exterior & Gestor de Tr\u00e1fego Pago com foco em resultados mensur\u00e1veis e crescimento estrat\u00e9gico.<\/p>\r\n <div class=\"ac-badge\"><span class=\"badge-dot\"><\/span>Aberto a oportunidades<\/div>\r\n <\/div>\r\n <div class=\"facts\">\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Idade<\/span><span class=\"fact-v\">20 anos<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Localiza\u00e7\u00e3o<\/span><span class=\"fact-v\">Joinville, SC<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Forma\u00e7\u00e3o<\/span><span class=\"fact-v\">Com\u00e9rcio Exterior \u00b7 Univille<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Semestre<\/span><span class=\"fact-v\">3\u00ba semestre<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Ingl\u00eas<\/span><span class=\"fact-v\">Intermedi\u00e1rio (em estudo)<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Foco<\/span><span class=\"fact-v\">Com\u00e9rcio Exterior \u00b7 Supply Chain<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">E-mail<\/span><span class=\"fact-v\">renancaiocabral6@gmail.com<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"experiencia\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">01 \u2014 Experi\u00eancia<\/p><h2 class=\"sh-title\">Onde <em>trabalhei<\/em><\/h2><\/div>\r\n <span class=\"sh-hint\">4 posi\u00e7\u00f5es \u00b7 2021\u2013hoje<\/span>\r\n <\/div>\r\n <div class=\"exp-list\">\r\n\r\n <div class=\"exp-item reveal open\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">01<\/span>\r\n <div><p class=\"exp-co\">Aut\u00f4nomo \u00b7 MEI<\/p><p class=\"exp-role\">Gestor de Tr\u00e1fego Pago<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Dez 2023 \u2014 Atual<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Gest\u00e3o de campanhas no Google ADS e Meta ADS para clientes do segmento \u00f3ptico. Foco em gera\u00e7\u00e3o de leads qualificados, otimiza\u00e7\u00e3o de or\u00e7amento e an\u00e1lise de resultados.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag-live\">\u25cf Atual<\/span><span class=\"tag\">Google ADS<\/span><span class=\"tag\">Meta ADS<\/span><span class=\"tag\">Performance<\/span><span class=\"tag\">Analytics<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">02<\/span>\r\n <div><p class=\"exp-co\">Unique Consultoria Aduaneira<\/p><p class=\"exp-role\">Estagi\u00e1rio de Importa\u00e7\u00e3o<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Set \u2014 Dez 2025<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Acompanhamento de processos de importa\u00e7\u00e3o e follow-up aduaneiro. Primeiro contato com o fluxo operacional do com\u00e9rcio exterior e legisla\u00e7\u00e3o aduaneira.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Importa\u00e7\u00e3o<\/span><span class=\"tag\">Processos aduaneiros<\/span><span class=\"tag\">Follow-up<\/span><span class=\"tag\">Log\u00edstica<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">03<\/span>\r\n <div><p class=\"exp-co\">Beckhauser Advogados<\/p><p class=\"exp-role\">Est\u00e1gio em Marketing Digital<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Out 2022 \u2014 Dez 2023<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">SEO org\u00e2nico, Google ADS, edi\u00e7\u00e3o de v\u00eddeos e automa\u00e7\u00f5es com Power Automate. Atua\u00e7\u00e3o 360\u00b0 no marketing de um escrit\u00f3rio de advocacia.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Google SEO<\/span><span class=\"tag\">Google ADS<\/span><span class=\"tag\">Power Automate<\/span><span class=\"tag\">Edi\u00e7\u00e3o de v\u00eddeo<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">04<\/span>\r\n <div><p class=\"exp-co\">Labormaxx<\/p><p class=\"exp-role\">T\u00e9cnico de Laborat\u00f3rio \u00d3ptico<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Nov 2021 \u2014 Out 2022<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Colora\u00e7\u00e3o de lentes solares, limpeza de arma\u00e7\u00f5es e suporte \u00e0s opera\u00e7\u00f5es laboratoriais. Primeira experi\u00eancia formal no mercado.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Laborat\u00f3rio \u00f3ptico<\/span><span class=\"tag\">Colora\u00e7\u00e3o de lentes<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"formacao\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">02 \u2014 Forma\u00e7\u00e3o<\/p><h2 class=\"sh-title\">Educa\u00e7\u00e3o<\/h2><\/div>\r\n <span class=\"sh-hint\">Em andamento<\/span>\r\n <\/div>\r\n <div class=\"edu-grid\">\r\n <div class=\"reveal\">\r\n <p class=\"edu-deg\">Bacharelado em<br><em>Com\u00e9rcio Exterior<\/em><\/p>\r\n <p class=\"edu-inst\">Univille \u2014 Universidade da Regi\u00e3o de Joinville<\/p>\r\n <div class=\"edu-cells\">\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">In\u00edcio<\/p><p class=\"edu-cv\">2025<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Conclus\u00e3o<\/p><p class=\"edu-cv\">2029<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Semestre<\/p><p class=\"edu-cv\">3\u00ba<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Status<\/p><p class=\"edu-cv live\">Em andamento<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"edu-prog\" class=\"edu-prog reveal\">\r\n <div class=\"edu-pct-num\" id=\"edu-pct\">0%<\/div>\r\n <p class=\"edu-pct-sub\">do curso conclu\u00eddo \u00b7 3 de 10 semestres<\/p>\r\n <div class=\"edu-bar\"><div class=\"edu-fill\" id=\"edu-fill\"><\/div><\/div>\r\n <div class=\"edu-sems\">\r\n <div class=\"edu-sem done\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">1<\/span><\/div>\r\n <div class=\"edu-sem done\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">2<\/span><\/div>\r\n <div class=\"edu-sem now\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">3<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">4<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">5<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">6<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">7<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">8<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">9<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">10<\/span><\/div>\r\n <\/div>\r\n <div class=\"edu-yrs\">\r\n <span class=\"edu-yr\">2025<\/span><span class=\"edu-yr now\">2026<\/span>\r\n <span class=\"edu-yr\">2027<\/span><span class=\"edu-yr\">2028<\/span><span class=\"edu-yr\">2029<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"habilidades\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">03 \u2014 Compet\u00eancias<\/p><h2 class=\"sh-title\">Habilidades <em>& idiomas<\/em><\/h2><\/div>\r\n <\/div>\r\n <div class=\"sk-outer reveal\">\r\n <div class=\"sk-row open\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">01<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">M\u00eddia Paga<\/p><p class=\"sk-row-name\">Tr\u00e1fego & Marketing<\/p><\/div>\r\n <span class=\"sk-row-count\">5 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Meta ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Facebook ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google SEO<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Edi\u00e7\u00e3o de v\u00eddeo<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Gest\u00e3o de campanhas pagas para clientes do segmento \u00f3ptico \u2014 gera\u00e7\u00e3o de leads, otimiza\u00e7\u00e3o de or\u00e7amento e an\u00e1lise de ROI.<\/p>\r\n <span class=\"sk-context-note\">\u2192 3+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">02<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Mensura\u00e7\u00e3o<\/p><p class=\"sk-row-name\">Rastreamento & Analytics<\/p><\/div>\r\n <span class=\"sk-row-count\">5 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google Tag Manager<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Stape<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google Analytics<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Meta Pixel<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Server-side tracking<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Implementa\u00e7\u00e3o de rastreamento avan\u00e7ado e server-side para garantir dados precisos de convers\u00e3o e comportamento.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">03<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Automa\u00e7\u00e3o & IA<\/p><p class=\"sk-row-name\">IA, Automa\u00e7\u00e3o & Integra\u00e7\u00f5es<\/p><\/div>\r\n <span class=\"sk-row-count\">9 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">N8N<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Power Automate<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">APIs REST<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Automa\u00e7\u00e3o de e-mail<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Webhooks<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">IA Generativa<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Vibe Coding<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Automa\u00e7\u00e3o de processos repetitivos<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Otimiza\u00e7\u00e3o de processos<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Cria\u00e7\u00e3o de fluxos autom\u00e1ticos, integra\u00e7\u00e3o entre sistemas via APIs e uso de IA generativa para eliminar tarefas manuais.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">04<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Web & Infraestrutura<\/p><p class=\"sk-row-name\">Web & Infraestrutura<\/p><\/div>\r\n <span class=\"sk-row-count\">4 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">WordPress<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Elementor<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">VPS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Pacote Office<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Cria\u00e7\u00e3o de sites em WordPress com Elementor, gest\u00e3o de servidores VPS e configura\u00e7\u00e3o de hospedagem para clientes.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">05<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Com\u00e9rcio Internacional<\/p><p class=\"sk-row-name\">Com\u00e9rcio Exterior<\/p><\/div>\r\n <span class=\"sk-row-count\">3 \u00e1reas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">\u00c1reas de atua\u00e7\u00e3o<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Processos de importa\u00e7\u00e3o<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Acompanhamento aduaneiro<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Log\u00edstica internacional<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Bacharelado em Com\u00e9rcio Exterior (Univille, 2025\u20132029) e est\u00e1gio na Unique Consultoria Aduaneira.<\/p>\r\n <span class=\"sk-context-note\">\u2192 Em forma\u00e7\u00e3o<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">06<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Comunica\u00e7\u00e3o<\/p><p class=\"sk-row-name\">Idiomas<\/p><\/div>\r\n <span class=\"sk-row-count\">2 idiomas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Idiomas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Portugu\u00eas \u2014 Nativo<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Ingl\u00eas \u2014 Intermedi\u00e1rio<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Portugu\u00eas nativo. Ingl\u00eas intermedi\u00e1rio com leitura t\u00e9cnica fluente \u2014 em desenvolvimento ativo para o mercado internacional.<\/p>\r\n <span class=\"sk-context-note\">\u2192 Em estudo<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"contato\"><div class=\"w\">\r\n <div class=\"contact-wrap\">\r\n <h2 class=\"contact-big reveal\">Vamos<br><em>conversar.<\/em><\/h2>\r\n <div class=\"clinks\">\r\n <a class=\"clink reveal\" href=\"mailto:renancaiocabral6@gmail.com\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">E-mail<\/span><span class=\"clink-val\">renancaiocabral6@gmail.com<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"clink reveal\" href=\"https:\/\/wa.me\/5547991042941\" target=\"_blank\" rel=\"noopener\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">WhatsApp<\/span><span class=\"clink-val\">(47) 9 9104-2941<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"clink reveal\" href=\"https:\/\/linkedin.com\/in\/renancaiocabral\" target=\"_blank\" rel=\"noopener\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">LinkedIn<\/span><span class=\"clink-val\">linkedin.com\/in\/renancaiocabral<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div>\r\n\r\n<footer>\r\n <span class=\"ft-l\"><em>Renan<\/em> Caio Cabral<\/span>\r\n <div class=\"ft-r\">\r\n <span class=\"ft-note\">2026<\/span>\r\n <a class=\"btn-dl\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\r\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\r\n <span>Baixar PDF<\/span>\r\n <\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500\r\n(function(){\r\n const dot = document.getElementById('cursor-dot');\r\n const ring = document.getElementById('cursor-ring');\r\n if (!dot || !ring) return;\r\n let mx=0,my=0,rx=0,ry=0;\r\n document.addEventListener('mousemove', e => { mx=e.clientX; my=e.clientY; });\r\n function animate(){\r\n dot.style.left = mx+'px';\r\n dot.style.top = my+'px';\r\n rx += (mx-rx) * 0.12;\r\n ry += (my-ry) * 0.12;\r\n ring.style.left = rx+'px';\r\n ring.style.top = ry+'px';\r\n requestAnimationFrame(animate);\r\n }\r\n animate();\r\n document.addEventListener('mouseleave', () => { dot.style.opacity='0'; ring.style.opacity='0'; });\r\n document.addEventListener('mouseenter', () => { dot.style.opacity='1'; ring.style.opacity='1'; });\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 HERO CANVAS \u2014 GLOBE DE PART\u00cdCULAS 3D \u2500\u2500\u2500\r\n(function(){\r\n const canvas = document.getElementById('hero-canvas');\r\n if (!canvas) return;\r\n if (window.innerWidth < 768) { canvas.style.display='none'; return; }\r\n const ctx = canvas.getContext('2d');\r\n\r\n let W, H;\r\n function resize(){\r\n W = canvas.width = canvas.offsetWidth;\r\n H = canvas.height = canvas.offsetHeight;\r\n }\r\n resize();\r\n window.addEventListener('resize', resize);\r\n\r\n \/\/ Globe parameters\r\n const RADIUS = Math.min(W, H) * 0.38;\r\n const N = 360; \/\/ number of particles\r\n let rotY = 0; \/\/ auto-rotation angle\r\n let rotX = 0.18; \/\/ slight tilt\r\n let mouseVY = 0; \/\/ mouse-driven velocity\r\n let dragRotY = 0;\r\n let isDrag = false;\r\n let lastMX = 0;\r\n\r\n \/\/ Build points on sphere surface (Fibonacci lattice for even distribution)\r\n const pts = [];\r\n const golden = Math.PI * (3 - Math.sqrt(5));\r\n for(let i = 0; i < N; i++){\r\n const y = 1 - (i \/ (N - 1)) * 2; \/\/ -1 to 1\r\n const r = Math.sqrt(1 - y * y);\r\n const phi = i * golden;\r\n pts.push({\r\n ox: Math.cos(phi) * r, \/\/ normalised sphere coords\r\n oy: y,\r\n oz: Math.sin(phi) * r,\r\n size: Math.random() < 0.08 ? 3.2 : Math.random() < 0.25 ? 2.2 : 1.3,\r\n accent: Math.random() < 0.14 \/\/ few accent-colour dots\r\n });\r\n }\r\n\r\n \/\/ Lat\/lon lines \u2014 arcs stored as arrays of sphere points\r\n const lines = [];\r\n \/\/ meridians (longitude)\r\n for(let m = 0; m < 8; m++){\r\n const phi = (m \/ 8) * Math.PI * 2;\r\n const seg = [];\r\n for(let t = 0; t <= 48; t++){\r\n const theta = (t \/ 48) * Math.PI - Math.PI\/2;\r\n seg.push({\r\n ox: Math.cos(theta) * Math.cos(phi),\r\n oy: Math.sin(theta),\r\n oz: Math.cos(theta) * Math.sin(phi)\r\n });\r\n }\r\n lines.push(seg);\r\n }\r\n \/\/ parallels (latitude)\r\n for(let p = 1; p <= 5; p++){\r\n const lat = (p \/ 6) * Math.PI - Math.PI\/2;\r\n const seg = [];\r\n for(let t = 0; t <= 60; t++){\r\n const phi = (t \/ 60) * Math.PI * 2;\r\n seg.push({\r\n ox: Math.cos(lat) * Math.cos(phi),\r\n oy: Math.sin(lat),\r\n oz: Math.cos(lat) * Math.sin(phi)\r\n });\r\n }\r\n lines.push(seg);\r\n }\r\n\r\n \/\/ Project 3D \u2192 2D with combined rotY + rotX\r\n function project(ox, oy, oz, ry, rx){\r\n \/\/ rotate Y\r\n const x1 = ox * Math.cos(ry) + oz * Math.sin(ry);\r\n const z1 = -ox * Math.sin(ry) + oz * Math.cos(ry);\r\n const y1 = oy;\r\n \/\/ rotate X\r\n const y2 = y1 * Math.cos(rx) - z1 * Math.sin(rx);\r\n const z2 = y1 * Math.sin(rx) + z1 * Math.cos(rx);\r\n const scale = RADIUS;\r\n return { sx: W\/2 + x1 * scale, sy: H\/2 + y2 * scale, z: z2 };\r\n }\r\n\r\n \/\/ Interaction\r\n const hero = canvas.parentElement;\r\n hero.addEventListener('mousedown', e => { isDrag=true; lastMX=e.clientX; mouseVY=0; });\r\n window.addEventListener('mouseup', () => { isDrag=false; });\r\n hero.addEventListener('mousemove', e => {\r\n if(!isDrag) return;\r\n const dx = e.clientX - lastMX;\r\n mouseVY = dx * 0.006;\r\n dragRotY += mouseVY;\r\n lastMX = e.clientX;\r\n });\r\n hero.style.cursor = 'grab';\r\n hero.addEventListener('mousedown', () => hero.style.cursor = 'grabbing');\r\n window.addEventListener('mouseup', () => hero.style.cursor = 'grab');\r\n\r\n \/\/ accent colour = --gold CSS var\r\n const accent = getComputedStyle(document.documentElement).getPropertyValue('--gold').trim() || '#2A6AC9';\r\n\r\n function loop(){\r\n ctx.clearRect(0, 0, W, H);\r\n\r\n if(!isDrag){\r\n mouseVY *= 0.92;\r\n rotY += 0.0032 + mouseVY;\r\n } else {\r\n rotY += mouseVY;\r\n }\r\n\r\n const ry = rotY + dragRotY;\r\n\r\n \/\/ draw lat\/lon grid lines (back-face first, then front)\r\n lines.forEach(seg => {\r\n ctx.beginPath();\r\n let first = true;\r\n seg.forEach(p => {\r\n const { sx, sy, z } = project(p.ox, p.oy, p.oz, ry, rotX);\r\n const visible = z > -0.05;\r\n const alpha = visible ? Math.max(0, z * 0.12) : 0;\r\n if(alpha < 0.005){ first = true; return; }\r\n if(first){ ctx.moveTo(sx, sy); first=false; }\r\n else ctx.lineTo(sx, sy);\r\n });\r\n ctx.strokeStyle = `rgba(20,20,20,0.13)`;\r\n ctx.lineWidth = 0.8;\r\n ctx.stroke();\r\n });\r\n\r\n \/\/ sort particles by depth (painter's algorithm)\r\n const projected = pts.map(p => {\r\n const r = project(p.ox, p.oy, p.oz, ry, rotX);\r\n return { ...p, ...r };\r\n }).sort((a,b) => a.z - b.z);\r\n\r\n projected.forEach(p => {\r\n const visible = p.z > -0.2;\r\n if(!visible) return;\r\n const depthFactor = (p.z + 1) \/ 2; \/\/ 0 (back) \u2192 1 (front)\r\n const alpha = 0.28 + depthFactor * 0.72;\r\n const size = p.size * (0.4 + depthFactor * 0.8);\r\n\r\n ctx.beginPath();\r\n ctx.arc(p.sx, p.sy, size, 0, Math.PI * 2);\r\n\r\n if(p.accent){\r\n ctx.fillStyle = accent.startsWith('#')\r\n ? hexToRgba(accent, alpha * 0.9)\r\n : `rgba(42,106,201,${alpha * 0.9})`;\r\n \/\/ glow\r\n const g = ctx.createRadialGradient(p.sx,p.sy,0,p.sx,p.sy,size*3.5);\r\n g.addColorStop(0, hexToRgba(accent, alpha*0.55));\r\n g.addColorStop(1, 'transparent');\r\n ctx.fill();\r\n ctx.beginPath(); ctx.arc(p.sx,p.sy,size*3.5,0,Math.PI*2);\r\n ctx.fillStyle=g; ctx.fill();\r\n } else {\r\n ctx.fillStyle = `rgba(20,20,20,${alpha * (p.size > 1.5 ? 0.72 : 0.52)})`;\r\n ctx.fill();\r\n }\r\n });\r\n\r\n requestAnimationFrame(loop);\r\n }\r\n loop();\r\n\r\n function hexToRgba(hex, a){\r\n const r=parseInt(hex.slice(1,3),16);\r\n const g=parseInt(hex.slice(3,5),16);\r\n const b=parseInt(hex.slice(5,7),16);\r\n return `rgba(${r},${g},${b},${a})`;\r\n }\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 TYPEWRITER ROLE \u2500\u2500\u2500\r\n(function(){\r\n const el = document.getElementById('hero-role');\r\n if(!el) return;\r\n const roles = [\r\n 'Graduando em Com\u00e9rcio Exterior',\r\n 'Ingl\u00eas Intermedi\u00e1rio \u00b7 Em desenvolvimento',\r\n 'Automa\u00e7\u00e3o de Processos \u00b7 N8N & Power Automate',\r\n 'IA Generativa aplicada a neg\u00f3cios',\r\n 'Rastreamento & Analytics \u00b7 GTM & Stape',\r\n 'Est\u00e1gio em Importa\u00e7\u00e3o \u00b7 Unique Consultoria',\r\n ];\r\n let ri=0, ci=0, deleting=false, paused=false;\r\n const SPEED_TYPE=60, SPEED_DEL=35, PAUSE=2000;\r\n const cursor='<span class=\"hero-cursor-blink\"><\/span>';\r\n\r\n function tick(){\r\n if(paused){ setTimeout(tick, PAUSE); paused=false; return; }\r\n const word = roles[ri];\r\n if(!deleting){\r\n ci++;\r\n el.innerHTML = word.slice(0,ci) + cursor;\r\n if(ci===word.length){ paused=true; deleting=true; setTimeout(tick,SPEED_TYPE); return; }\r\n setTimeout(tick, SPEED_TYPE);\r\n } else {\r\n ci--;\r\n el.innerHTML = word.slice(0,ci) + cursor;\r\n if(ci===0){ deleting=false; ri=(ri+1)%roles.length; setTimeout(tick, 300); return; }\r\n setTimeout(tick, SPEED_DEL);\r\n }\r\n }\r\n \/\/ Start after loader\r\n setTimeout(tick, 2600);\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 LOADER \u2500\u2500\u2500\r\nwindow.addEventListener('load', () => {\r\n setTimeout(() => document.getElementById('loader').classList.add('out'), 2400);\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 NAV \u2500\u2500\u2500\r\nconst nav = document.getElementById('nav');\r\nconst navLinks = document.querySelectorAll('.nav-links a');\r\nwindow.addEventListener('scroll', () => {\r\n nav.classList.toggle('s', scrollY > 60);\r\n let cur='';\r\n document.querySelectorAll('[id]').forEach(s => { if(scrollY>=s.offsetTop-100) cur=s.id; });\r\n navLinks.forEach(a => a.classList.toggle('act', a.getAttribute('href')==='#'+cur));\r\n}, {passive:true});\r\n\r\n\/\/ \u2500\u2500\u2500 BURGER \u2500\u2500\u2500\r\nconst burger = document.getElementById('burger');\r\nconst mob = document.getElementById('mob-menu');\r\nburger.addEventListener('click', () => {\r\n const o = burger.classList.toggle('open');\r\n mob.classList.toggle('open', o);\r\n document.body.style.overflow = o ? 'hidden' : '';\r\n});\r\ndocument.querySelectorAll('.mob-link, .mob-pdf').forEach(l => {\r\n l.addEventListener('click', () => {\r\n burger.classList.remove('open'); mob.classList.remove('open');\r\n document.body.style.overflow='';\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 ACCORDION \u2500\u2500\u2500\r\ndocument.querySelectorAll('.exp-head').forEach(h => {\r\n h.addEventListener('click', () => {\r\n const item = h.closest('.exp-item');\r\n const was = item.classList.contains('open');\r\n document.querySelectorAll('.exp-item').forEach(i => i.classList.remove('open'));\r\n if (!was) item.classList.add('open');\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 SKILLS ACCORDION \u2500\u2500\u2500\r\ndocument.querySelectorAll('.sk-row-head').forEach(head => {\r\n head.addEventListener('click', () => {\r\n const row = head.closest('.sk-row');\r\n const was = row.classList.contains('open');\r\n document.querySelectorAll('.sk-row').forEach(r => r.classList.remove('open'));\r\n if (!was) row.classList.add('open');\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 3D TILT CARD \u2500\u2500\u2500\r\nconst card = document.getElementById('about-card');\r\nif (card) {\r\n card.addEventListener('mousemove', e => {\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width;\r\n const y = (e.clientY - r.top) \/ r.height;\r\n const rotX = (y - .5) * -10;\r\n const rotY = (x - .5) * 12;\r\n card.style.transform = `perspective(700px) rotateX(${rotX}deg) rotateY(${rotY}deg) scale3d(1.015,1.015,1.015)`;\r\n card.style.setProperty('--mouse-x', (x*100)+'%');\r\n card.style.setProperty('--mouse-y', (y*100)+'%');\r\n });\r\n card.addEventListener('mouseleave', () => {\r\n card.style.transform = '';\r\n card.style.transition = 'transform .7s var(--ease)';\r\n setTimeout(() => card.style.transition = '', 700);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 REVEAL \u2500\u2500\u2500\r\nconst revIO = new IntersectionObserver(entries => {\r\n entries.forEach((e, idx) => {\r\n if (e.isIntersecting) {\r\n setTimeout(() => e.target.classList.add('visible'), idx * 60);\r\n }\r\n });\r\n}, {threshold: 0.07});\r\ndocument.querySelectorAll('.reveal').forEach(el => revIO.observe(el));\r\n\r\n\/\/ \u2500\u2500\u2500 EDUCATION COUNTER \u2500\u2500\u2500\r\nconst eduIO = new IntersectionObserver(entries => {\r\n entries.forEach(e => {\r\n if (!e.isIntersecting) return;\r\n eduIO.disconnect();\r\n document.getElementById('edu-fill').classList.add('v');\r\n const el = document.getElementById('edu-pct'), t0 = performance.now();\r\n (function tick(now){\r\n const p = Math.min((now-t0)\/2200, 1);\r\n const ease = 1 - Math.pow(1-p, 4);\r\n el.textContent = Math.round(ease*30) + '%';\r\n if (p<1) requestAnimationFrame(tick);\r\n })(performance.now());\r\n });\r\n}, {threshold: 0.3});\r\nconst ep = document.getElementById('edu-prog');\r\nif (ep) eduIO.observe(ep);\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Renan Caio Cabral \u2014 Portf\u00f3lio Renan Caio Cabral Portf\u00f3lio \u00b7 2026 Renan Cabral Sobre Experi\u00eancia Forma\u00e7\u00e3o Habilidades PDF Contato Sobre Experi\u00eancia Forma\u00e7\u00e3o Habilidades Contato \u2193 Baixar Curr\u00edculo PDF Comex Univille \u00b7 3\u00ba sem. 20anos Santa Catarina \u00b7 BR N8N+ Automa\u00e7\u00e3o & IA Portf\u00f3lio Profissional \u00b7 2026 Renan Caio Cabral Gestor de Tr\u00e1fego Pago Ver trajet\u00f3ria […]<\/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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/renancabral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":43,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nRenan Caio Cabral \u2014 Portf\u00f3lio<\/title>\r\n<meta name=\"description\" content=\"Portf\u00f3lio profissional de Renan Caio Cabral \u2014 Gestor de Tr\u00e1fego Pago e Estudante de Com\u00e9rcio Exterior em Joinville, SC.\">\r\n<meta name=\"author\" content=\"Renan Caio Cabral\">\r\n<meta property=\"og:title\" content=\"Renan Caio Cabral \u2014 Portf\u00f3lio\">\r\n<meta property=\"og:description\" content=\"Gestor de Tr\u00e1fego Pago e Estudante de Com\u00e9rcio Exterior. Joinville, SC.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap&font-display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml{scroll-behavior:smooth;cursor:none}\r\n:root{\r\n --bg:#F5F2EE;\r\n --bg2:#EDEAE5;\r\n --bg3:#E5E1DB;\r\n --b:rgba(0,0,0,0.09);\r\n --b2:rgba(0,0,0,0.18);\r\n --t:#0D0D0D;\r\n --t2:rgba(13,13,13,0.78);\r\n --t3:rgba(13,13,13,0.58);\r\n --t4:rgba(13,13,13,0.42);\r\n --gold:#2A6AC9;\r\n --gold2:#4A8AE8;\r\n --gold3:rgba(42,106,201,0.10);\r\n --gold4:rgba(42,106,201,0.04);\r\n --blue:#2A6AC9;\r\n --blue2:#4A8AE8;\r\n --blue3:rgba(42,106,201,0.10);\r\n --ease:cubic-bezier(0.16,1,0.3,1);\r\n --ease2:cubic-bezier(0.34,1.56,0.64,1);\r\n --ease3:cubic-bezier(0.76,0,0.24,1);\r\n}\r\nbody{\r\n font-family:'DM Sans',sans-serif;\r\n background:var(--bg);color:var(--t);\r\n overflow-x:hidden;-webkit-font-smoothing:antialiased;\r\n cursor:none;\r\n}\r\n\r\n\/* \u2500\u2500 CURSOR \u2500\u2500 *\/\r\n#cursor{\r\n position:fixed;z-index:99999;\r\n pointer-events:none;\r\n mix-blend-mode:difference;\r\n}\r\n#cursor-dot{\r\n position:fixed;\r\n width:8px;height:8px;\r\n background:var(--t);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n transition:width .2s var(--ease),height .2s var(--ease),opacity .2s;\r\n pointer-events:none;z-index:99999;\r\n}\r\n#cursor-ring{\r\n position:fixed;\r\n width:36px;height:36px;\r\n border:1px solid rgba(240,235,227,0.3);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n transition:width .4s var(--ease),height .4s var(--ease),border-color .3s,background .3s,transform .08s linear;\r\n pointer-events:none;z-index:99998;\r\n}\r\nbody:has(a:hover) #cursor-ring,\r\nbody:has(button:hover) #cursor-ring{\r\n width:56px;height:56px;\r\n border-color:rgba(20,20,20,0.5);\r\n background:rgba(20,20,20,0.05);\r\n}\r\nbody:has(a:hover) #cursor-dot,\r\nbody:has(button:hover) #cursor-dot{\r\n width:4px;height:4px;\r\n}\r\n\r\n\/* \u2500\u2500 GRAIN \u2500\u2500 *\/\r\n.grain{\r\n position:fixed;inset:0;z-index:9990;pointer-events:none;\r\n opacity:.032;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n background-size:160px;\r\n animation:grain .5s steps(1) infinite;\r\n}\r\n@keyframes grain{\r\n 0%{background-position:0 0}15%{background-position:-8% -12%}30%{background-position:6% 8%}\r\n 45%{background-position:-14% 18%}60%{background-position:12% -6%}75%{background-position:-4% 22%}\r\n 90%{background-position:18% -14%}100%{background-position:-10% 6%}\r\n}\r\n\r\n\/* \u2500\u2500 LOADER \u2500\u2500 *\/\r\n#loader{\r\n position:fixed;inset:0;z-index:9999;background:var(--bg);\r\n display:flex;align-items:center;justify-content:center;flex-direction:column;\r\n transition:opacity 1.2s var(--ease),visibility 1.2s;\r\n}\r\n#loader.out{opacity:0;visibility:hidden;pointer-events:none}\r\n.ld-logo{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(32px,5vw,48px);\r\n letter-spacing:-0.04em;color:var(--t);\r\n overflow:hidden;text-align:center;line-height:1;\r\n}\r\n.ld-logo-inner{\r\n display:block;\r\n transform:translateY(110%);\r\n animation:up .9s var(--ease) .2s forwards;\r\n}\r\n.ld-sub{\r\n font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;\r\n color:var(--t3);margin-top:14px;\r\n opacity:0;animation:fade .8s var(--ease) .8s forwards;\r\n}\r\n.ld-progress{\r\n width:140px;height:1px;background:var(--b);margin-top:32px;overflow:hidden;\r\n}\r\n.ld-progress-fill{\r\n height:100%;width:0;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2));\r\n animation:progFill 1.8s var(--ease) .4s forwards;\r\n}\r\n@keyframes progFill{to{width:100%}}\r\n@keyframes up{to{transform:translateY(0)}}\r\n@keyframes fade{to{opacity:1}}\r\n\r\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\r\nnav{\r\n position:fixed;inset:0 0 auto;z-index:500;\r\n height:64px;padding:0 52px;\r\n display:flex;align-items:center;justify-content:space-between;\r\n transition:background .5s,border-color .5s;\r\n border-bottom:1px solid transparent;\r\n}\r\nnav.s{background:rgba(245,242,238,.92);backdrop-filter:blur(40px) saturate(180%);border-color:var(--b)}\r\n.nav-logo{\r\n font-family:'DM Serif Display',serif;\r\n font-size:18px;letter-spacing:-.03em;\r\n color:var(--t);text-decoration:none;\r\n position:relative;display:inline-flex;align-items:center;gap:8px;\r\n}\r\n.nav-logo-dot{\r\n width:5px;height:5px;border-radius:50%;background:var(--gold);\r\n animation:dotPulse 2.8s ease-in-out infinite;\r\n}\r\n@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(20,20,20,.25)}50%{opacity:.3;box-shadow:0 0 0 7px rgba(20,20,20,0)}}\r\n.nav-links{display:flex;gap:40px;list-style:none}\r\n.nav-links a{\r\n font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;\r\n color:var(--t3);text-decoration:none;position:relative;transition:color .2s;\r\n}\r\n.nav-links a::after{\r\n content:'';position:absolute;bottom:-5px;left:0;right:0;\r\n height:1px;background:var(--gold);\r\n transform:scaleX(0);transform-origin:left;\r\n transition:transform .5s var(--ease);\r\n}\r\n.nav-links a:hover,\r\n.nav-links a.act{color:var(--t)}\r\n.nav-links a:hover::after,\r\n.nav-links a.act::after{transform:scaleX(1)}\r\n.nav-r{display:flex;align-items:center;gap:12px}\r\n.nav-cta{\r\n font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--bg);background:var(--t);padding:10px 22px;\r\n text-decoration:none;position:relative;overflow:hidden;\r\n transition:color .3s;display:inline-flex;align-items:center;\r\n}\r\n.nav-cta::before{\r\n content:'';position:absolute;inset:0;\r\n background:var(--gold);\r\n transform:translateY(101%);\r\n transition:transform .5s var(--ease);\r\n}\r\n.nav-cta span{position:relative;z-index:1}\r\n.nav-cta:hover::before{transform:translateY(0)}\r\n.nav-pdf{\r\n font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--t3);border:1px solid var(--b2);padding:9px 16px;\r\n text-decoration:none;display:flex;align-items:center;gap:7px;\r\n transition:color .2s,border-color .2s;\r\n}\r\n.nav-pdf:hover{color:var(--t)}\r\n.nav-pdf svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}\r\n.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}\r\n.nav-burger span{display:block;width:22px;height:1px;background:var(--t3);transition:transform .35s var(--ease),opacity .2s}\r\n.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}\r\n.nav-burger.open span:nth-child(2){opacity:0}\r\n.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}\r\n.mob-menu{\r\n position:fixed;inset:0;z-index:400;background:rgba(245,242,238,.97);backdrop-filter:blur(28px);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;\r\n opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;\r\n}\r\n.mob-menu.open{opacity:1;visibility:visible}\r\n.mob-link{\r\n font-family:'DM Serif Display',serif;font-size:clamp(36px,9vw,52px);\r\n color:var(--t2);text-decoration:none;letter-spacing:-.03em;padding:8px 0;\r\n transition:color .2s,transform .3s var(--ease);\r\n}\r\n.mob-link:hover{color:var(--t);transform:translateX(12px)}\r\n.mob-pdf{\r\n margin-top:32px;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;\r\n color:var(--t3);text-decoration:none;border:1px solid var(--b2);padding:12px 28px;\r\n transition:color .2s;\r\n}\r\n\r\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n.hero{\r\n position:relative;min-height:100svh;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Aurora nebula layers *\/\r\n.hero-aurora{\r\n position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;\r\n}\r\n.aurora-blob{\r\n position:absolute;border-radius:50%;\r\n filter:blur(90px);\r\n animation-timing-function:ease-in-out;\r\n animation-iteration-count:infinite;\r\n animation-direction:alternate;\r\n}\r\n.aurora-blob-1{\r\n width:80vw;height:80vw;max-width:900px;max-height:900px;\r\n top:-20%;left:-15%;\r\n background:radial-gradient(circle,rgba(20,20,20,0.04) 0%,transparent 70%);\r\n animation:a1 14s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-2{\r\n width:70vw;height:70vw;max-width:800px;max-height:800px;\r\n bottom:-20%;right:-10%;\r\n background:radial-gradient(circle,rgba(160,120,60,0.09) 0%,transparent 70%);\r\n animation:a2 18s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-3{\r\n width:50vw;height:50vw;max-width:600px;max-height:600px;\r\n top:30%;left:30%;\r\n background:radial-gradient(circle,rgba(232,204,150,0.07) 0%,transparent 65%);\r\n animation:a3 11s ease-in-out infinite alternate;\r\n}\r\n.aurora-blob-4{\r\n width:40vw;height:40vw;max-width:500px;max-height:500px;\r\n top:10%;right:15%;\r\n background:radial-gradient(circle,rgba(180,140,80,0.06) 0%,transparent 65%);\r\n animation:a4 16s ease-in-out infinite alternate;\r\n}\r\n@keyframes a1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8%,6%) scale(1.12)}}\r\n@keyframes a2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7%,-8%) scale(1.08)}}\r\n@keyframes a3{0%{transform:translate(-3%,2%) scale(.9)}100%{transform:translate(4%,-4%) scale(1.15)}}\r\n@keyframes a4{0%{transform:translate(2%,-2%) scale(1)}100%{transform:translate(-5%,6%) scale(1.1)}}\r\n\r\n\/* Noise mesh *\/\r\n.hero-mesh{\r\n position:absolute;inset:0;z-index:1;pointer-events:none;\r\n opacity:.018;\r\n background-image:linear-gradient(rgba(20,20,20,.4) 1px,transparent 1px),\r\n linear-gradient(90deg,rgba(20,20,20,.4) 1px,transparent 1px);\r\n background-size:72px 72px;\r\n mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent);\r\n}\r\n\r\n#hero-canvas{\r\n position:absolute;inset:0;z-index:2;\r\n width:100%;height:100%;\r\n pointer-events:none;\r\n}\r\n\r\n.hero-fade-bottom{\r\n position:absolute;bottom:0;left:0;right:0;height:45%;\r\n background:linear-gradient(to bottom,transparent,var(--bg));\r\n z-index:3;pointer-events:none;\r\n}\r\n.hero-fade-top{\r\n position:absolute;top:0;left:0;right:0;height:20%;\r\n background:linear-gradient(to top,transparent,var(--bg));\r\n z-index:3;pointer-events:none;\r\n}\r\n\r\n\/* \u2500\u2500 FLOATING STAT CARDS \u2500\u2500 *\/\r\n.hero-stat{\r\n position:absolute;z-index:5;\r\n background:rgba(245,242,238,0.88);\r\n border:1px solid rgba(20,20,20,0.12);\r\n backdrop-filter:blur(20px);\r\n padding:16px 22px 16px 20px;\r\n pointer-events:none;\r\n opacity:0;\r\n min-width:148px;\r\n border-left:3px solid var(--gold);\r\n animation:statFloat 1s var(--ease) forwards, floatY 6s ease-in-out infinite;\r\n}\r\n.hero-stat-1{top:25%;left:4%;animation-delay:2.4s,3.5s}\r\n.hero-stat-2{top:25%;right:4%;animation-delay:2.7s,4.2s}\r\n.hero-stat-3{bottom:25%;left:4%;animation-delay:3s,4s}\r\n.hero-stat-4{bottom:25%;right:4%;animation-delay:2.9s,4.5s}\r\n@keyframes statFloat{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}\r\n.hero-stat-val{\r\n font-family:'DM Serif Display',serif;\r\n font-size:24px;font-weight:400;\r\n letter-spacing:-.03em;line-height:1;\r\n color:var(--t);\r\n margin-bottom:5px;\r\n}\r\n.hero-stat-val span{color:var(--gold);font-style:italic}\r\n.hero-stat-key{\r\n font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\r\n color:var(--t3);\r\n}\r\n.hero-stat-accent{display:none}\r\n\r\n.hero-body{\r\n position:relative;z-index:4;\r\n text-align:center;padding:0 40px;width:100%;max-width:1040px;\r\n}\r\n\r\n\/* Eyebrow pill *\/\r\n.hero-eyebrow{\r\n display:inline-flex;align-items:center;gap:10px;\r\n font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--t3);\r\n background:rgba(20,20,20,0.05);\r\n border:1px solid rgba(20,20,20,0.12);\r\n padding:8px 18px;\r\n margin-bottom:40px;\r\n opacity:0;animation:fade 1s var(--ease) 2s forwards;\r\n}\r\n.hero-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotPulse 2.5s ease-in-out infinite}\r\n\r\n\/* Name \u2014 scramble effect via JS *\/\r\n.hero-name{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(68px,12vw,172px);\r\n font-weight:400;line-height:.87;letter-spacing:-.045em;\r\n color:var(--t);margin-bottom:0;\r\n}\r\n.hero-name .ln{overflow:hidden;display:block}\r\n.hero-name .wd{\r\n display:inline-block;\r\n transform:translateY(115%);\r\n animation:up 1.2s var(--ease) forwards;\r\n}\r\n.hero-name .ln:nth-child(1) .wd{animation-delay:1.4s}\r\n.hero-name .ln:nth-child(2) .wd{animation-delay:1.55s;font-style:italic;color:var(--t2)}\r\n.hero-name .ln:nth-child(3) .wd{animation-delay:1.7s}\r\n\r\n.hero-name .underlined{position:relative;display:inline-block}\r\n.hero-name .underlined::after{\r\n content:'';position:absolute;left:0;bottom:.06em;right:0;height:3px;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2) 60%,transparent);\r\n transform:scaleX(0);transform-origin:left;\r\n animation:lineReveal 1.4s var(--ease) 2.9s forwards;\r\n}\r\n@keyframes lineReveal{to{transform:scaleX(1)}}\r\n\r\n\/* Typewriter role *\/\r\n.hero-role-wrap{\r\n margin-top:20px;margin-bottom:36px;\r\n height:28px;overflow:hidden;\r\n opacity:0;animation:fade 1s var(--ease) 2.2s forwards;\r\n}\r\n.hero-role{\r\n font-size:clamp(13px,1.5vw,17px);font-weight:300;\r\n color:var(--t2);letter-spacing:.08em;\r\n display:block;\r\n}\r\n.hero-cursor-blink{\r\n display:inline-block;width:2px;height:1em;\r\n background:var(--gold);margin-left:3px;vertical-align:middle;\r\n animation:blink 1s step-end infinite;\r\n}\r\n@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}\r\n\r\n.hero-tagline{\r\n font-size:clamp(12px,1.2vw,14px);font-weight:300;\r\n color:var(--t3);letter-spacing:.04em;\r\n opacity:0;animation:fade 1s var(--ease) 2.5s forwards;\r\n margin-bottom:44px;\r\n}\r\n@media(min-width:769px){.hero-tagline{display:none}}\r\n\r\n.hero-actions{\r\n display:flex;align-items:center;justify-content:center;gap:14px;\r\n opacity:0;animation:fade 1s var(--ease) 2.8s forwards;\r\n}\r\n.h-btn{\r\n font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;\r\n padding:13px 34px;text-decoration:none;position:relative;overflow:hidden;\r\n display:inline-flex;align-items:center;gap:8px;transition:color .3s;\r\n}\r\n.h-btn-solid{\r\n color:var(--bg);\r\n background:var(--t);\r\n}\r\n.h-btn-solid::before{\r\n content:'';position:absolute;inset:0;\r\n background:#2a2a2a;\r\n transform:translateX(-101%);transition:transform .6s var(--ease);\r\n}\r\n.h-btn-solid:hover::before{transform:translateX(0)}\r\n.h-btn-solid span{position:relative;z-index:1;color:var(--bg)}\r\n.h-btn-ghost{color:var(--t3);border:1px solid var(--b2);transition:color .2s,border-color .3s}\r\n.h-btn-ghost:hover{color:var(--t);border-color:rgba(79,127,255,.4)}\r\n\r\n\/* scroll pip *\/\r\n.hero-scroll{\r\n position:absolute;bottom:36px;left:50%;transform:translateX(-50%);\r\n display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;\r\n opacity:0;animation:fade 1s var(--ease) 3.4s forwards;\r\n}\r\n.hero-scroll-word{font-size:8px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--t4)}\r\n.hero-scroll-track{width:1px;height:52px;background:var(--b);overflow:hidden;position:relative}\r\n.hero-scroll-pip{\r\n position:absolute;width:100%;height:40%;\r\n background:linear-gradient(to bottom,transparent,var(--t),transparent);\r\n animation:scrollPip 2.4s ease-in-out infinite 4s;\r\n}\r\n@keyframes scrollPip{0%{top:-50%}100%{top:150%}}\r\n\r\n\/* corners *\/\r\n.hc{position:absolute;width:28px;height:28px;opacity:0;animation:fade .8s var(--ease) 2.8s forwards;z-index:5}\r\n.hc.tl{top:88px;left:52px;border-top:1px solid var(--b2);border-left:1px solid var(--b2)}\r\n.hc.tr{top:88px;right:52px;border-top:1px solid var(--b2);border-right:1px solid var(--b2)}\r\n.hc.bl{bottom:68px;left:52px;border-bottom:1px solid var(--b2);border-left:1px solid var(--b2)}\r\n.hc.br{bottom:68px;right:52px;border-bottom:1px solid var(--b2);border-right:1px solid var(--b2)}\r\n\r\n.hero-loc{\r\n position:absolute;bottom:50px;left:52px;z-index:5;\r\n font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);\r\n display:flex;align-items:center;gap:10px;\r\n opacity:0;animation:fade .8s var(--ease) 3.1s forwards;\r\n}\r\n.hero-loc::before{content:'';width:18px;height:1px;background:var(--t4)}\r\n\r\n\/* \u2500\u2500 TICKER \u2500\u2500 *\/\r\n.ticker{\r\n overflow:hidden;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2);\r\n background:var(--bg3);padding:14px 0;position:relative;z-index:2;\r\n}\r\n.ticker-track{display:flex;width:max-content;animation:tickR 38s linear infinite;will-change:transform}\r\n.ticker-track:hover{animation-play-state:paused}\r\n.ti{\r\n font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;\r\n color:var(--t3);white-space:nowrap;padding:0 32px;\r\n display:flex;align-items:center;gap:32px;transition:color .2s;\r\n}\r\n.ti::after{content:'\u2726';font-size:6px;color:var(--gold);opacity:.7}\r\n.ticker:hover .ti{color:var(--t2)}\r\n@keyframes tickR{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\r\n.w{max-width:1000px;margin:0 auto;padding:0 52px}\r\n.sec{padding:130px 0;border-top:1px solid var(--b);scroll-margin-top:64px}\r\n\r\n\/* Section header *\/\r\n.sh{\r\n display:flex;justify-content:space-between;align-items:flex-end;\r\n padding-bottom:44px;border-bottom:1px solid var(--b);margin-bottom:80px;\r\n}\r\n.sh-n{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:10px}\r\n.sh-title{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(40px,5.5vw,64px);font-weight:400;\r\n letter-spacing:-.035em;line-height:.93;color:var(--t);\r\n}\r\n.sh-title em{font-style:italic;color:var(--t2)}\r\n.sh-hint{font-size:11px;font-weight:300;color:var(--t3);padding-bottom:4px}\r\n\r\n\/* reveal *\/\r\n.reveal{\r\n opacity:0;transform:translateY(32px);\r\n transition:opacity 1s var(--ease),transform 1s var(--ease);\r\n}\r\n.reveal.visible{opacity:1;transform:none}\r\n\r\n\/* \u2500\u2500 SOBRE \u2500\u2500 *\/\r\n.about-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}\r\n\r\n\/* 3D tilt card *\/\r\n.tilt-card{\r\n background:var(--bg2);border:1px solid var(--b);padding:48px 44px;\r\n position:relative;overflow:hidden;\r\n transform-style:preserve-3d;perspective:800px;\r\n transition:border-color .4s,transform .1s;\r\n will-change:transform;\r\n}\r\n.tilt-card::before{\r\n content:'';position:absolute;top:0;left:0;right:0;height:2px;\r\n background:linear-gradient(90deg,var(--gold),var(--gold2) 50%,transparent);\r\n}\r\n.tilt-card::after{\r\n content:'';position:absolute;\r\n inset:-1px;\r\n background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(20,20,20,0.06), transparent 60%);\r\n pointer-events:none;\r\n opacity:0;transition:opacity .3s;\r\n}\r\n.tilt-card:hover::after{opacity:1}\r\n.tilt-card:hover{border-color:rgba(20,20,20,0.2)}\r\n\r\n.ac-tag{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:20px}\r\n.ac-name{\r\n font-family:'DM Serif Display',serif;font-size:30px;font-weight:400;\r\n color:var(--t);letter-spacing:-.03em;line-height:1.1;margin-bottom:6px;\r\n}\r\n.ac-role{font-size:13px;font-weight:300;color:var(--t2);line-height:1.8;margin-bottom:40px}\r\n.ac-badge{\r\n display:inline-flex;align-items:center;gap:9px;\r\n font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;\r\n color:var(--gold);\r\n}\r\n.badge-dot{\r\n width:6px;height:6px;border-radius:50%;background:var(--gold);\r\n animation:dotPulse 2.8s ease-in-out infinite;\r\n}\r\n\r\n.facts{}\r\n.fact{\r\n display:flex;justify-content:space-between;align-items:baseline;\r\n padding:16px 0;border-bottom:1px solid var(--b);\r\n position:relative;overflow:hidden;\r\n}\r\n.fact:first-child{border-top:1px solid var(--b)}\r\n.fact-underline{\r\n position:absolute;bottom:0;left:0;right:0;height:1px;\r\n background:linear-gradient(90deg,var(--gold),transparent);\r\n transform:scaleX(0);transform-origin:left;\r\n transition:transform .7s var(--ease);\r\n}\r\n.fact:hover .fact-underline{transform:scaleX(1)}\r\n.fact-k{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}\r\n.fact-v{font-size:13px;font-weight:300;color:var(--t2);text-align:right;max-width:250px}\r\n.fact-v.live{color:var(--gold)}\r\n\r\n\/* \u2500\u2500 EXPERI\u00caNCIA \u2500\u2500 *\/\r\n.exp-item{\r\n border-bottom:1px solid var(--b);position:relative;overflow:hidden;\r\n}\r\n.exp-item:first-child{border-top:1px solid var(--b)}\r\n.exp-track{\r\n position:absolute;left:0;top:0;bottom:0;width:2px;\r\n background:linear-gradient(to bottom,var(--gold),var(--gold2),transparent);\r\n transform:scaleY(0);transform-origin:top;\r\n transition:transform .7s var(--ease);\r\n}\r\n.exp-item.open .exp-track,.exp-item:hover .exp-track{transform:scaleY(1)}\r\n.exp-head{\r\n display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:center;\r\n padding:34px 0 34px 20px;cursor:pointer;user-select:none;\r\n}\r\n.exp-num{display:none}\r\n.exp-item.open .exp-head{padding-bottom:0}\r\n.exp-num{\r\n font-family:'DM Serif Display',serif;font-style:italic;\r\n font-size:12px;color:var(--t4);letter-spacing:.05em;\r\n}\r\n.exp-co{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}\r\n.exp-role{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(21px,2.8vw,30px);font-weight:400;\r\n color:var(--t);letter-spacing:-.025em;line-height:1.05;\r\n}\r\n.exp-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px}\r\n.exp-period{font-size:11px;font-weight:300;color:var(--t3);white-space:nowrap;letter-spacing:.04em}\r\n.exp-tog{\r\n width:30px;height:30px;border:1px solid var(--b);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n transition:border-color .3s;\r\n}\r\n.exp-item.open .exp-tog{border-color:rgba(20,20,20,.3)}\r\n.exp-tog-cross{\r\n position:relative;width:12px;height:12px;\r\n}\r\n.exp-tog-cross::before,.exp-tog-cross::after{\r\n content:'';position:absolute;background:var(--t3);\r\n transition:transform .45s var(--ease),background .2s;\r\n}\r\n.exp-tog-cross::before{width:12px;height:1px;top:50%;left:0;margin-top:-.5px}\r\n.exp-tog-cross::after{width:1px;height:12px;left:50%;top:0;margin-left:-.5px}\r\n.exp-item.open .exp-tog-cross::after{transform:rotate(90deg);opacity:0}\r\n.exp-item.open .exp-tog-cross::before,.exp-item.open .exp-tog-cross::after{background:var(--gold)}\r\n\r\n.exp-body{overflow:hidden;max-height:0;transition:max-height .75s var(--ease);padding-left:0}\r\n.exp-item.open .exp-body{max-height:400px}\r\n.exp-inner{padding:18px 0 38px 20px}\r\n.exp-desc{font-size:14px;font-weight:300;color:var(--t2);line-height:1.95;max-width:560px;margin-bottom:22px}\r\n.exp-tags{display:flex;flex-wrap:wrap;gap:7px}\r\n.tag{\r\n font-size:10px;font-weight:400;letter-spacing:.06em;\r\n color:var(--t3);border:1px solid var(--b);padding:5px 13px;\r\n transition:color .2s,border-color .2s,background .2s;\r\n}\r\n.exp-item.open .tag:hover{color:var(--t2);border-color:var(--b2);background:var(--bg3)}\r\n.tag-live{\r\n font-size:10px;font-weight:500;letter-spacing:.06em;\r\n color:var(--t);border:1px solid rgba(20,20,20,.2);\r\n padding:5px 13px;background:var(--gold4);\r\n}\r\n\r\n\/* \u2500\u2500 FORMA\u00c7\u00c3O \u2500\u2500 *\/\r\n.edu-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}\r\n.edu-deg{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(26px,3.5vw,38px);font-weight:400;\r\n color:var(--t);letter-spacing:-.025em;line-height:1.15;margin-bottom:8px;\r\n}\r\n.edu-deg em{font-style:italic;color:var(--t2)}\r\n.edu-inst{font-size:12px;font-weight:300;color:var(--t3);letter-spacing:.05em;margin-bottom:36px}\r\n.edu-cells{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b)}\r\n.edu-cell{background:var(--bg);padding:18px 20px}\r\n.edu-ck{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:6px}\r\n.edu-cv{font-size:15px;font-weight:300;color:var(--t2)}\r\n.edu-cv.live{color:var(--gold);display:flex;align-items:center;gap:7px}\r\n.edu-cv.live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotPulse 2.5s ease-in-out infinite;flex-shrink:0}\r\n\r\n.edu-prog{padding-top:4px}\r\n.edu-pct-num{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(60px,9vw,92px);font-weight:400;\r\n color:var(--t);letter-spacing:-.055em;line-height:1;margin-bottom:4px;\r\n}\r\n.edu-pct-sub{font-size:12px;font-weight:300;color:var(--t3);letter-spacing:.04em;margin-bottom:36px}\r\n.edu-bar{height:2px;background:var(--b);position:relative;margin-bottom:22px;overflow:hidden}\r\n.edu-fill{\r\n position:absolute;top:0;left:0;height:100%;width:0;\r\n background:linear-gradient(90deg,var(--t),var(--t2),rgba(20,20,20,.1));\r\n box-shadow:none;\r\n transition:width 2.6s var(--ease) .4s;\r\n}\r\n.edu-fill.v{width:30%}\r\n.edu-sems{display:grid;grid-template-columns:repeat(10,1fr);margin-bottom:18px}\r\n.edu-sem{display:flex;flex-direction:column;align-items:center;gap:5px}\r\n.edu-sem-b{width:1px;height:8px;background:var(--b)}\r\n.edu-sem.done .edu-sem-b{background:var(--gold)}\r\n.edu-sem.now .edu-sem-b{background:var(--gold2);box-shadow:0 0 8px var(--gold)}\r\n.edu-sem-n{font-size:9px;font-weight:300;color:var(--t4)}\r\n.edu-sem.done .edu-sem-n{color:var(--t3)}\r\n.edu-sem.now .edu-sem-n{color:var(--gold)}\r\n.edu-yrs{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--b)}\r\n.edu-yr{font-size:9px;font-weight:400;color:var(--t4)}\r\n.edu-yr.now{color:var(--t2)}\r\n\r\n\/* \u2500\u2500 SKILLS \u2014 expandable list \u2500\u2500 *\/\r\n.sk-outer{border:1px solid var(--b);overflow:hidden}\r\n\r\n\/* category row *\/\r\n.sk-row{\r\n border-bottom:1px solid var(--b);\r\n position:relative;overflow:hidden;\r\n}\r\n.sk-row:first-child{border-top:1px solid var(--b)}\r\n\r\n.sk-row-head{\r\n display:grid;\r\n grid-template-columns:56px 1fr auto auto;\r\n gap:0 24px;align-items:center;\r\n padding:28px 0;cursor:pointer;user-select:none;\r\n transition:background .25s;\r\n}\r\n.sk-row-head:hover{background:rgba(0,0,0,.02)}\r\n.sk-row.open .sk-row-head{background:rgba(0,0,0,.02)}\r\n\r\n\/* left accent bar *\/\r\n.sk-row-accent{\r\n position:absolute;left:0;top:0;bottom:0;width:2px;\r\n background:linear-gradient(to bottom,var(--gold),var(--gold2),transparent);\r\n transform:scaleY(0);transform-origin:top;\r\n transition:transform .6s var(--ease);\r\n}\r\n.sk-row.open .sk-row-accent,.sk-row-head:hover .sk-row-accent{transform:scaleY(1)}\r\n\r\n.sk-row-num{\r\n font-family:'DM Serif Display',serif;font-style:italic;\r\n font-size:13px;color:var(--t4);letter-spacing:.04em;\r\n text-align:center;padding-left:24px;\r\n}\r\n.sk-row-meta{}\r\n.sk-row-cat{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:4px}\r\n.sk-row-name{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(19px,2.2vw,26px);font-weight:400;\r\n color:var(--t);letter-spacing:-.02em;line-height:1.1;\r\n}\r\n.sk-row-count{\r\n font-size:11px;font-weight:400;color:var(--t4);\r\n background:var(--bg2);border:1px solid var(--b);\r\n padding:4px 10px;white-space:nowrap;\r\n}\r\n.sk-row.open .sk-row-count{color:var(--gold);border-color:var(--gold3);background:rgba(42,106,201,.06)}\r\n.sk-row-tog{\r\n width:28px;height:28px;border:1px solid var(--b);\r\n display:flex;align-items:center;justify-content:center;\r\n margin-right:24px;flex-shrink:0;\r\n transition:border-color .3s,background .3s;\r\n}\r\n.sk-row-tog-cross{position:relative;width:10px;height:10px}\r\n.sk-row-tog-cross::before,.sk-row-tog-cross::after{\r\n content:'';position:absolute;background:var(--t3);\r\n transition:transform .4s var(--ease),background .2s;\r\n}\r\n.sk-row-tog-cross::before{width:10px;height:1px;top:50%;left:0;margin-top:-.5px}\r\n.sk-row-tog-cross::after{width:1px;height:10px;left:50%;top:0;margin-left:-.5px}\r\n.sk-row.open .sk-row-tog{border-color:var(--gold);background:rgba(42,106,201,.06)}\r\n.sk-row.open .sk-row-tog-cross::after{transform:rotate(90deg);opacity:0}\r\n.sk-row.open .sk-row-tog-cross::before,.sk-row.open .sk-row-tog-cross::after{background:var(--gold)}\r\n\r\n\/* expandable body *\/\r\n.sk-row-body{\r\n overflow:hidden;max-height:0;\r\n transition:max-height .65s var(--ease);\r\n}\r\n.sk-row.open .sk-row-body{max-height:340px}\r\n.sk-row-inner{\r\n padding:32px 36px 40px 80px;\r\n display:flex;gap:48px;align-items:flex-start;\r\n border-top:1px solid var(--b);\r\n}\r\n\r\n.sk-pills-col{flex:1}\r\n.sk-inner-label{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:14px}\r\n.sk-pills{display:flex;flex-wrap:wrap;gap:7px}\r\n.sk-pill{\r\n font-size:11px;font-weight:400;letter-spacing:.03em;\r\n color:var(--t2);border:1px solid var(--b);padding:7px 14px;\r\n position:relative;overflow:hidden;cursor:default;\r\n transition:color .2s,border-color .2s,transform .25s var(--ease2);\r\n}\r\n.sk-pill::before{\r\n content:'';position:absolute;inset:0;\r\n background:var(--gold3);\r\n transform:translateX(-101%);transition:transform .38s var(--ease);\r\n}\r\n.sk-pill:hover{color:var(--t);border-color:rgba(42,106,201,.3);transform:translateY(-2px)}\r\n.sk-pill:hover::before{transform:translateX(0)}\r\n.sk-pill-inner{position:relative;z-index:1}\r\n\r\n.sk-context-col{\r\n width:220px;flex-shrink:0;\r\n border-left:1px solid var(--b);\r\n padding-left:32px;\r\n}\r\n.sk-context-label{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:10px}\r\n.sk-context-text{font-size:12px;font-weight:300;color:var(--t3);line-height:1.75}\r\n.sk-context-note{\r\n display:inline-block;margin-top:12px;\r\n font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;\r\n color:var(--gold);\r\n}\r\n\r\n\/* \u2500\u2500 CONTATO \u2500\u2500 *\/\r\n.contact-wrap{padding:130px 0 150px;border-top:1px solid var(--b)}\r\n.contact-big{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(64px,11vw,140px);\r\n font-weight:400;line-height:.87;letter-spacing:-.05em;\r\n color:var(--t);margin-bottom:80px;\r\n}\r\n.contact-big em{font-style:italic;color:var(--t2)}\r\n\r\n.clink{\r\n display:flex;align-items:center;justify-content:space-between;\r\n padding:28px 0;border-bottom:1px solid var(--b);\r\n text-decoration:none;position:relative;overflow:hidden;\r\n transition:padding-left .45s var(--ease);\r\n}\r\n.clink:first-child{border-top:1px solid var(--b)}\r\n.clink-sweep{\r\n position:absolute;inset:0;\r\n background:linear-gradient(90deg,var(--gold3),transparent);\r\n transform:translateX(-101%);\r\n transition:transform .65s var(--ease);\r\n}\r\n.clink:hover .clink-sweep{transform:translateX(0)}\r\n.clink:hover{padding-left:14px}\r\n.clink-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%}\r\n.clink-l{display:flex;align-items:baseline;gap:28px}\r\n.clink-type{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);width:76px;flex-shrink:0}\r\n.clink-val{\r\n font-family:'DM Serif Display',serif;\r\n font-size:clamp(19px,2.8vw,30px);font-weight:400;\r\n color:var(--t);letter-spacing:-.015em;transition:color .2s;\r\n}\r\n.clink-arr{\r\n font-size:22px;color:var(--t3);\r\n transition:color .2s,transform .45s var(--ease);z-index:1;\r\n}\r\n.clink:hover .clink-arr{color:var(--gold);transform:translate(7px,-7px)}\r\n\r\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\nfooter{\r\n border-top:1px solid var(--b);padding:26px 52px;\r\n display:flex;justify-content:space-between;align-items:center;\r\n}\r\n.ft-l{font-family:'DM Serif Display',serif;font-size:16px;font-weight:400;color:var(--t3);letter-spacing:-.02em}\r\n.ft-l em{font-style:italic}\r\n.ft-r{display:flex;align-items:center;gap:18px}\r\n.ft-note{font-size:10px;font-weight:300;color:var(--t4);letter-spacing:.08em}\r\n.btn-dl{\r\n display:inline-flex;align-items:center;gap:7px;\r\n font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;\r\n color:var(--bg);background:var(--t);padding:10px 20px;\r\n text-decoration:none;transition:opacity .2s;position:relative;overflow:hidden;\r\n}\r\n.btn-dl::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .5s var(--ease)}\r\n.btn-dl span{position:relative;z-index:1}\r\n.btn-dl:hover::before{transform:translateX(0)}\r\n.btn-dl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;position:relative;z-index:1}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE \u2014 all breakpoints\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 4K \/ ultra-wide (>1600px) \u2500\u2500 *\/\r\n@media(min-width:1600px){\r\n .w{max-width:1200px}\r\n .hero-body{max-width:1240px}\r\n .hero-name{font-size:clamp(140px,11vw,200px)}\r\n .sh-title{font-size:clamp(48px,4vw,72px)}\r\n .sec{padding:160px 0}\r\n nav{height:72px}\r\n .sk-tab{padding:28px 22px}\r\n .sk-left,.sk-right{padding:60px 52px}\r\n .contact-big{font-size:clamp(80px,10vw,160px)}\r\n}\r\n\r\n\/* \u2500\u2500 Large desktop (1200\u20131600px) \u2014 baseline, handled above \u2500\u2500 *\/\r\n\r\n\/* \u2500\u2500 Tablet landscape (900\u20131199px) \u2500\u2500 *\/\r\n@media(max-width:1199px){\r\n .w{padding:0 40px}\r\n nav{padding:0 40px}\r\n .hero-body{padding:0 40px}\r\n .hero-name{font-size:clamp(80px,11vw,140px)}\r\n .about-grid{grid-template-columns:1fr 1.1fr;gap:48px}\r\n .edu-grid{grid-template-columns:1fr 1fr;gap:48px}\r\n .sk-left{padding:40px 36px}\r\n .sk-right{padding:40px 36px}\r\n .contact-big{font-size:clamp(64px,9vw,110px)}\r\n .sec{padding:110px 0}\r\n .hc.tl{left:40px}.hc.tr{right:40px}\r\n .hc.bl{left:40px;bottom:52px}.hc.br{right:40px;bottom:52px}\r\n .hero-stat-1{left:2%}.hero-stat-2{right:2%}\r\n .hero-stat-3{left:2%}.hero-stat-4{right:2%}\r\n}\r\n\r\n\/* \u2500\u2500 Tablet portrait (768\u2013899px) \u2500\u2500 *\/\r\n@media(max-width:899px){\r\n html,body{cursor:auto}\r\n #cursor-dot,#cursor-ring{display:none}\r\n nav{padding:0 28px;height:58px}\r\n .nav-links{display:none}\r\n .nav-burger{display:flex}\r\n .nav-cta{font-size:10px;padding:8px 16px}\r\n .nav-pdf{padding:7px 12px;font-size:10px}\r\n\r\n .w{padding:0 28px}\r\n .hero-body{padding:0 28px}\r\n .hero-name{font-size:clamp(68px,13vw,110px)}\r\n .hero-stat{display:none}\r\n .hc{display:none}\r\n .hero-loc{left:28px}\r\n .hero-actions{flex-direction:column;align-items:center;gap:10px}\r\n .h-btn{width:100%;max-width:280px;justify-content:center}\r\n\r\n .sec{padding:88px 0}\r\n .sh{flex-direction:column;align-items:flex-start;gap:6px}\r\n .sh-hint{display:none}\r\n .sh-title{font-size:clamp(36px,6vw,52px)}\r\n\r\n .about-grid{grid-template-columns:1fr;gap:32px}\r\n .tilt-card{padding:32px 28px}\r\n\r\n .edu-grid{grid-template-columns:1fr;gap:44px}\r\n .edu-pct-num{font-size:clamp(52px,10vw,80px)}\r\n\r\n \/* skills accordion tablet *\/\r\n .sk-row-head{padding:24px 20px 24px 20px;grid-template-columns:1fr auto}\r\n .sk-row-num{display:none}\r\n .sk-row-inner{padding:28px 20px 32px 20px;flex-direction:column;gap:24px}\r\n .sk-context-col{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--b);padding-top:20px}\r\n .sk-row.open .sk-row-body{max-height:560px}\r\n .sk-row-tog{margin-right:0}\r\n\r\n .contact-big{font-size:clamp(52px,10vw,88px);margin-bottom:52px}\r\n .clink{padding:22px 0}\r\n .clink-l{gap:16px}\r\n .clink-val{font-size:clamp(17px,3vw,24px)}\r\n\r\n footer{padding:20px 28px;flex-direction:column;gap:12px;text-align:center}\r\n .ft-r{flex-direction:column;align-items:center;gap:8px}\r\n}\r\n\r\n\/* \u2500\u2500 Mobile large (480\u2013767px) \u2500\u2500 *\/\r\n@media(max-width:767px){\r\n nav{padding:0 16px;height:54px}\r\n .nav-cta{display:none}\r\n .nav-pdf span{display:none}\r\n .nav-pdf{padding:7px 10px}\r\n\r\n .w{padding:0 16px}\r\n .hero-body{padding:0 16px}\r\n .hero-name{font-size:clamp(56px,16vw,92px)}\r\n .hero-eyebrow{font-size:9px;padding:5px 12px;margin-bottom:24px}\r\n .hero-role-wrap{margin-top:12px;margin-bottom:24px}\r\n .hero-role{font-size:clamp(12px,3.5vw,15px)}\r\n .hero-actions{gap:8px}\r\n .h-btn{padding:11px 22px;font-size:10px}\r\n .hero-scroll{bottom:20px}\r\n .hero-loc{display:none}\r\n\r\n .sec{padding:64px 0}\r\n .sh{padding-bottom:20px;margin-bottom:40px}\r\n .sh-title{font-size:clamp(32px,8vw,46px)}\r\n .sh-n{font-size:9px}\r\n\r\n .ac-name{font-size:24px}\r\n .ac-role{font-size:12px;margin-bottom:24px}\r\n .tilt-card{padding:24px 20px}\r\n\r\n \/* exp \u2014 sem n\u00famero, padding lateral consistente *\/\r\n .exp-head{\r\n grid-template-columns:1fr auto;\r\n gap:0 12px;\r\n padding:22px 16px;\r\n }\r\n .exp-item.open .exp-head{padding-bottom:0}\r\n .exp-inner{padding:16px 16px 28px 16px}\r\n .exp-role{font-size:clamp(17px,4.5vw,22px)}\r\n .exp-co{font-size:9px}\r\n .exp-tags{gap:5px}\r\n .etag,.etag-live{font-size:9px;padding:4px 9px}\r\n .exp-tog{width:22px;height:22px;font-size:12px}\r\n\r\n \/* forma\u00e7\u00e3o *\/\r\n .edu-cells{grid-template-columns:1fr 1fr}\r\n .edu-cell{padding:12px 14px}\r\n .edu-pct-num{font-size:clamp(48px,13vw,68px)}\r\n\r\n \/* skills *\/\r\n .sk-outer{border-left:none;border-right:none}\r\n .sk-row-head{\r\n grid-template-columns:1fr auto;\r\n padding:20px 16px;\r\n gap:0 12px;\r\n }\r\n .sk-row-num{display:none}\r\n .sk-row-tog{margin-right:0;width:24px;height:24px}\r\n .sk-row-count{display:none}\r\n .sk-row-inner{padding:20px 16px 28px 16px;flex-direction:column;gap:18px}\r\n .sk-inner-label{font-size:8px}\r\n .sk-pills{gap:6px}\r\n .sk-pill{font-size:10px;padding:6px 11px}\r\n .sk-context-col{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--b);padding-top:16px}\r\n .sk-context-text{font-size:11px}\r\n .sk-row.open .sk-row-body{max-height:600px}\r\n\r\n \/* contato *\/\r\n .contact-big{font-size:clamp(40px,13vw,64px);margin-bottom:36px;line-height:.9}\r\n .clink{padding:18px 0}\r\n .clink-l{flex-direction:column;align-items:flex-start;gap:3px}\r\n .clink-type{width:auto;font-size:9px}\r\n .clink-val{font-size:clamp(15px,4.5vw,20px)}\r\n .clink-arr{font-size:16px}\r\n\r\n footer{padding:16px;flex-direction:column;gap:10px;text-align:center}\r\n .ft-r{flex-direction:column;align-items:center;gap:8px}\r\n .ft-note{display:none}\r\n}\r\n\r\n\/* \u2500\u2500 Mobile small (<479px) \u2500\u2500 *\/\r\n@media(max-width:479px){\r\n .w{padding:0 14px}\r\n .hero-body{padding:0 14px}\r\n .hero-name{font-size:clamp(48px,18vw,72px);line-height:.9}\r\n .hero-eyebrow{display:none}\r\n .hero-loc{left:14px}\r\n .hero-actions .h-btn-ghost{display:none}\r\n\r\n .sec{padding:56px 0}\r\n .sh-title{font-size:clamp(28px,9vw,40px)}\r\n\r\n .tilt-card{padding:20px 16px}\r\n .ac-name{font-size:22px}\r\n .ac-status{font-size:9px}\r\n\r\n .fact{flex-direction:column;gap:3px;align-items:flex-start;padding:12px 0}\r\n .fact-v{text-align:left;max-width:100%;font-size:12px}\r\n .fact-k{font-size:9px}\r\n\r\n .exp-head{padding:18px 14px;gap:0 10px}\r\n .exp-inner{padding:14px 14px 24px 14px}\r\n .exp-role{font-size:clamp(16px,5vw,20px)}\r\n\r\n .edu-cells{grid-template-columns:1fr}\r\n .edu-pct-num{font-size:clamp(44px,16vw,64px)}\r\n .edu-pct-sub{font-size:10px}\r\n\r\n .sk-row-head{padding:18px 14px}\r\n .sk-row-name{font-size:16px}\r\n .sk-row-inner{padding:16px 14px 24px 14px}\r\n\r\n .contact-big{font-size:clamp(36px,15vw,52px);margin-bottom:28px}\r\n .clink-val{font-size:clamp(13px,5vw,17px)}\r\n .clink{padding:16px 0}\r\n\r\n footer{padding:14px}\r\n}\r\n\r\n\/* \u2500\u2500 Touch: disable hover effects that don't make sense \u2500\u2500 *\/\r\n@media(hover:none){\r\n .fact:hover .fact-underline{transform:scaleX(0)}\r\n .nav-links a::after{display:none}\r\n .clink:hover{padding-left:0}\r\n .clink:hover::after{display:none}\r\n .sk-pill:hover::before{display:none}\r\n .tilt-card{transform:none!important}\r\n}\r\n\r\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\r\n@media(prefers-reduced-motion:reduce){\r\n *,*::before,*::after{\r\n animation-duration:.01ms!important;\r\n animation-iteration-count:1!important;\r\n transition-duration:.01ms!important;\r\n }\r\n #loader{display:none}\r\n .hero-name .wd,.hero-eyebrow,.hero-role-wrap,.hero-tagline,.hero-actions,.hero-scroll,.hero-stat,.hc,.hero-loc{opacity:1;transform:none}\r\n .reveal{opacity:1;transform:none}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"grain\"><\/div>\r\n<div id=\"cursor-dot\"><\/div>\r\n<div id=\"cursor-ring\"><\/div>\r\n\r\n\r\n<div id=\"loader\">\r\n <div class=\"ld-logo\"><span class=\"ld-logo-inner\">Renan Caio Cabral<\/span><\/div>\r\n <div class=\"ld-sub\">Portf\u00f3lio \u00b7 2026<\/div>\r\n <div class=\"ld-progress\"><div class=\"ld-progress-fill\"><\/div><\/div>\r\n<\/div>\r\n\r\n\r\n<nav id=\"nav\">\r\n <a class=\"nav-logo\" href=\"#\"><span class=\"nav-logo-dot\"><\/span>Renan Cabral<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#sobre\">Sobre<\/a><\/li>\r\n <li><a href=\"#experiencia\">Experi\u00eancia<\/a><\/li>\r\n <li><a href=\"#formacao\">Forma\u00e7\u00e3o<\/a><\/li>\r\n <li><a href=\"#habilidades\">Habilidades<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-r\">\r\n <a class=\"nav-pdf\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\r\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\r\n PDF\r\n <\/a>\r\n <a class=\"nav-cta\" href=\"#contato\"><span>Contato<\/span><\/a>\r\n <button class=\"nav-burger\" id=\"burger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n<\/nav>\r\n\r\n<div class=\"mob-menu\" id=\"mob-menu\">\r\n <a href=\"#sobre\" class=\"mob-link\">Sobre<\/a>\r\n <a href=\"#experiencia\" class=\"mob-link\">Experi\u00eancia<\/a>\r\n <a href=\"#formacao\" class=\"mob-link\">Forma\u00e7\u00e3o<\/a>\r\n <a href=\"#habilidades\" class=\"mob-link\">Habilidades<\/a>\r\n <a href=\"#contato\" class=\"mob-link\">Contato<\/a>\r\n <a class=\"mob-pdf\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\u2193 Baixar Curr\u00edculo PDF<\/a>\r\n<\/div>\r\n\r\n\r\n<section class=\"hero\">\r\n \r\n <div class=\"hero-aurora\">\r\n <div class=\"aurora-blob aurora-blob-1\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-2\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-3\"><\/div>\r\n <div class=\"aurora-blob aurora-blob-4\"><\/div>\r\n <\/div>\r\n <div class=\"hero-mesh\"><\/div>\r\n <canvas id=\"hero-canvas\"><\/canvas>\r\n <div class=\"hero-fade-top\"><\/div>\r\n <div class=\"hero-fade-bottom\"><\/div>\r\n\r\n \r\n <div class=\"hero-stat hero-stat-1\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">Comex<\/div>\r\n <div class=\"hero-stat-key\">Univille \u00b7 3\u00ba sem.<\/div>\r\n <\/div>\r\n <div class=\"hero-stat hero-stat-2\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">20<span>anos<\/span><\/div>\r\n <div class=\"hero-stat-key\">Santa Catarina \u00b7 BR<\/div>\r\n <\/div>\r\n <div class=\"hero-stat hero-stat-4\">\r\n <div class=\"hero-stat-accent\"><\/div>\r\n <div class=\"hero-stat-val\">N8N<span>+<\/span><\/div>\r\n <div class=\"hero-stat-key\">Automa\u00e7\u00e3o & IA<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n \r\n\r\n <div class=\"hero-body\">\r\n <div class=\"hero-eyebrow\">\r\n <span class=\"hero-eyebrow-dot\"><\/span>\r\n Portf\u00f3lio Profissional \u00b7 2026\r\n <\/div>\r\n <h1 class=\"hero-name\">\r\n <span class=\"ln\"><span class=\"wd\">Renan<\/span><\/span>\r\n <span class=\"ln\"><span class=\"wd\">Caio<\/span><\/span>\r\n <span class=\"ln\"><span class=\"wd\"><span class=\"underlined\">Cabral<\/span><\/span><\/span>\r\n <\/h1>\r\n <div class=\"hero-role-wrap\">\r\n <span class=\"hero-role\" id=\"hero-role\">Gestor de Tr\u00e1fego Pago<span class=\"hero-cursor-blink\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"hero-actions\">\r\n <a class=\"h-btn h-btn-solid\" href=\"#experiencia\"><span>Ver trajet\u00f3ria<\/span><\/a>\r\n <a class=\"h-btn h-btn-ghost\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\u2193 Baixar CV<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-scroll\">\r\n <div class=\"hero-scroll-word\">scroll<\/div>\r\n <div class=\"hero-scroll-track\"><div class=\"hero-scroll-pip\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"hero-loc\">Joinville \u00b7 SC \u00b7 Brasil<\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"ticker\" aria-hidden=\"true\">\r\n <div class=\"ticker-track\">\r\n <span class=\"ti\">Tr\u00e1fego Pago<\/span><span class=\"ti\">Google ADS<\/span><span class=\"ti\">Meta ADS<\/span><span class=\"ti\">Rastreamento<\/span><span class=\"ti\">GTM<\/span><span class=\"ti\">Stape<\/span><span class=\"ti\">Automa\u00e7\u00e3o<\/span><span class=\"ti\">N8N<\/span><span class=\"ti\">Power Automate<\/span><span class=\"ti\">IA Generativa<\/span><span class=\"ti\">WordPress<\/span><span class=\"ti\">VPS<\/span><span class=\"ti\">Com\u00e9rcio Exterior<\/span><span class=\"ti\">Supply Chain<\/span>\r\n <span class=\"ti\">Tr\u00e1fego Pago<\/span><span class=\"ti\">Google ADS<\/span><span class=\"ti\">Meta ADS<\/span><span class=\"ti\">Rastreamento<\/span><span class=\"ti\">GTM<\/span><span class=\"ti\">Stape<\/span><span class=\"ti\">Automa\u00e7\u00e3o<\/span><span class=\"ti\">N8N<\/span><span class=\"ti\">Power Automate<\/span><span class=\"ti\">IA Generativa<\/span><span class=\"ti\">WordPress<\/span><span class=\"ti\">VPS<\/span><span class=\"ti\">Com\u00e9rcio Exterior<\/span><span class=\"ti\">Supply Chain<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"sobre\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">00 \u2014 Sobre<\/p><h2 class=\"sh-title\">Quem <em>sou<\/em><\/h2><\/div>\r\n\r\n <\/div>\r\n <div class=\"about-grid\">\r\n <div class=\"tilt-card reveal\" id=\"about-card\">\r\n <p class=\"ac-tag\">Profissional<\/p>\r\n <p class=\"ac-name\">Renan Caio Cabral<\/p>\r\n <p class=\"ac-role\">Estudante de Com\u00e9rcio Exterior & Gestor de Tr\u00e1fego Pago com foco em resultados mensur\u00e1veis e crescimento estrat\u00e9gico.<\/p>\r\n <div class=\"ac-badge\"><span class=\"badge-dot\"><\/span>Aberto a oportunidades<\/div>\r\n <\/div>\r\n <div class=\"facts\">\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Idade<\/span><span class=\"fact-v\">20 anos<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Localiza\u00e7\u00e3o<\/span><span class=\"fact-v\">Joinville, SC<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Forma\u00e7\u00e3o<\/span><span class=\"fact-v\">Com\u00e9rcio Exterior \u00b7 Univille<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Semestre<\/span><span class=\"fact-v\">3\u00ba semestre<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Ingl\u00eas<\/span><span class=\"fact-v\">Intermedi\u00e1rio (em estudo)<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">Foco<\/span><span class=\"fact-v\">Com\u00e9rcio Exterior \u00b7 Supply Chain<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <div class=\"fact reveal\"><span class=\"fact-k\">E-mail<\/span><span class=\"fact-v\">renancaiocabral6@gmail.com<\/span><div class=\"fact-underline\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"experiencia\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">01 \u2014 Experi\u00eancia<\/p><h2 class=\"sh-title\">Onde <em>trabalhei<\/em><\/h2><\/div>\r\n <span class=\"sh-hint\">4 posi\u00e7\u00f5es \u00b7 2021\u2013hoje<\/span>\r\n <\/div>\r\n <div class=\"exp-list\">\r\n\r\n <div class=\"exp-item reveal open\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">01<\/span>\r\n <div><p class=\"exp-co\">Aut\u00f4nomo \u00b7 MEI<\/p><p class=\"exp-role\">Gestor de Tr\u00e1fego Pago<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Dez 2023 \u2014 Atual<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Gest\u00e3o de campanhas no Google ADS e Meta ADS para clientes do segmento \u00f3ptico. Foco em gera\u00e7\u00e3o de leads qualificados, otimiza\u00e7\u00e3o de or\u00e7amento e an\u00e1lise de resultados.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag-live\">\u25cf Atual<\/span><span class=\"tag\">Google ADS<\/span><span class=\"tag\">Meta ADS<\/span><span class=\"tag\">Performance<\/span><span class=\"tag\">Analytics<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">02<\/span>\r\n <div><p class=\"exp-co\">Unique Consultoria Aduaneira<\/p><p class=\"exp-role\">Estagi\u00e1rio de Importa\u00e7\u00e3o<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Set \u2014 Dez 2025<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Acompanhamento de processos de importa\u00e7\u00e3o e follow-up aduaneiro. Primeiro contato com o fluxo operacional do com\u00e9rcio exterior e legisla\u00e7\u00e3o aduaneira.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Importa\u00e7\u00e3o<\/span><span class=\"tag\">Processos aduaneiros<\/span><span class=\"tag\">Follow-up<\/span><span class=\"tag\">Log\u00edstica<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">03<\/span>\r\n <div><p class=\"exp-co\">Beckhauser Advogados<\/p><p class=\"exp-role\">Est\u00e1gio em Marketing Digital<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Out 2022 \u2014 Dez 2023<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">SEO org\u00e2nico, Google ADS, edi\u00e7\u00e3o de v\u00eddeos e automa\u00e7\u00f5es com Power Automate. Atua\u00e7\u00e3o 360\u00b0 no marketing de um escrit\u00f3rio de advocacia.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Google SEO<\/span><span class=\"tag\">Google ADS<\/span><span class=\"tag\">Power Automate<\/span><span class=\"tag\">Edi\u00e7\u00e3o de v\u00eddeo<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"exp-item reveal\">\r\n <div class=\"exp-track\"><\/div>\r\n <div class=\"exp-head\">\r\n <span class=\"exp-num\">04<\/span>\r\n <div><p class=\"exp-co\">Labormaxx<\/p><p class=\"exp-role\">T\u00e9cnico de Laborat\u00f3rio \u00d3ptico<\/p><\/div>\r\n <div class=\"exp-r\">\r\n <span class=\"exp-period\">Nov 2021 \u2014 Out 2022<\/span>\r\n <span class=\"exp-tog\"><span class=\"exp-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"exp-body\"><div class=\"exp-inner\">\r\n <p class=\"exp-desc\">Colora\u00e7\u00e3o de lentes solares, limpeza de arma\u00e7\u00f5es e suporte \u00e0s opera\u00e7\u00f5es laboratoriais. Primeira experi\u00eancia formal no mercado.<\/p>\r\n <div class=\"exp-tags\"><span class=\"tag\">Laborat\u00f3rio \u00f3ptico<\/span><span class=\"tag\">Colora\u00e7\u00e3o de lentes<\/span><\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"formacao\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">02 \u2014 Forma\u00e7\u00e3o<\/p><h2 class=\"sh-title\">Educa\u00e7\u00e3o<\/h2><\/div>\r\n <span class=\"sh-hint\">Em andamento<\/span>\r\n <\/div>\r\n <div class=\"edu-grid\">\r\n <div class=\"reveal\">\r\n <p class=\"edu-deg\">Bacharelado em<br><em>Com\u00e9rcio Exterior<\/em><\/p>\r\n <p class=\"edu-inst\">Univille \u2014 Universidade da Regi\u00e3o de Joinville<\/p>\r\n <div class=\"edu-cells\">\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">In\u00edcio<\/p><p class=\"edu-cv\">2025<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Conclus\u00e3o<\/p><p class=\"edu-cv\">2029<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Semestre<\/p><p class=\"edu-cv\">3\u00ba<\/p><\/div>\r\n <div class=\"edu-cell\"><p class=\"edu-ck\">Status<\/p><p class=\"edu-cv live\">Em andamento<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"edu-prog\" class=\"edu-prog reveal\">\r\n <div class=\"edu-pct-num\" id=\"edu-pct\">0%<\/div>\r\n <p class=\"edu-pct-sub\">do curso conclu\u00eddo \u00b7 3 de 10 semestres<\/p>\r\n <div class=\"edu-bar\"><div class=\"edu-fill\" id=\"edu-fill\"><\/div><\/div>\r\n <div class=\"edu-sems\">\r\n <div class=\"edu-sem done\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">1<\/span><\/div>\r\n <div class=\"edu-sem done\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">2<\/span><\/div>\r\n <div class=\"edu-sem now\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">3<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">4<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">5<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">6<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">7<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">8<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">9<\/span><\/div>\r\n <div class=\"edu-sem\"><div class=\"edu-sem-b\"><\/div><span class=\"edu-sem-n\">10<\/span><\/div>\r\n <\/div>\r\n <div class=\"edu-yrs\">\r\n <span class=\"edu-yr\">2025<\/span><span class=\"edu-yr now\">2026<\/span>\r\n <span class=\"edu-yr\">2027<\/span><span class=\"edu-yr\">2028<\/span><span class=\"edu-yr\">2029<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"habilidades\"><div class=\"w\"><div class=\"sec\">\r\n <div class=\"sh reveal\">\r\n <div><p class=\"sh-n\">03 \u2014 Compet\u00eancias<\/p><h2 class=\"sh-title\">Habilidades <em>& idiomas<\/em><\/h2><\/div>\r\n <\/div>\r\n <div class=\"sk-outer reveal\">\r\n <div class=\"sk-row open\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">01<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">M\u00eddia Paga<\/p><p class=\"sk-row-name\">Tr\u00e1fego & Marketing<\/p><\/div>\r\n <span class=\"sk-row-count\">5 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Meta ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Facebook ADS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google SEO<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Edi\u00e7\u00e3o de v\u00eddeo<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Gest\u00e3o de campanhas pagas para clientes do segmento \u00f3ptico \u2014 gera\u00e7\u00e3o de leads, otimiza\u00e7\u00e3o de or\u00e7amento e an\u00e1lise de ROI.<\/p>\r\n <span class=\"sk-context-note\">\u2192 3+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">02<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Mensura\u00e7\u00e3o<\/p><p class=\"sk-row-name\">Rastreamento & Analytics<\/p><\/div>\r\n <span class=\"sk-row-count\">5 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google Tag Manager<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Stape<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Google Analytics<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Meta Pixel<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Server-side tracking<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Implementa\u00e7\u00e3o de rastreamento avan\u00e7ado e server-side para garantir dados precisos de convers\u00e3o e comportamento.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">03<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Automa\u00e7\u00e3o & IA<\/p><p class=\"sk-row-name\">IA, Automa\u00e7\u00e3o & Integra\u00e7\u00f5es<\/p><\/div>\r\n <span class=\"sk-row-count\">9 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">N8N<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Power Automate<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">APIs REST<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Automa\u00e7\u00e3o de e-mail<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Webhooks<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">IA Generativa<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Vibe Coding<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Automa\u00e7\u00e3o de processos repetitivos<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Otimiza\u00e7\u00e3o de processos<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Cria\u00e7\u00e3o de fluxos autom\u00e1ticos, integra\u00e7\u00e3o entre sistemas via APIs e uso de IA generativa para eliminar tarefas manuais.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">04<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Web & Infraestrutura<\/p><p class=\"sk-row-name\">Web & Infraestrutura<\/p><\/div>\r\n <span class=\"sk-row-count\">4 ferramentas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Ferramentas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">WordPress<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Elementor<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">VPS<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Pacote Office<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Cria\u00e7\u00e3o de sites em WordPress com Elementor, gest\u00e3o de servidores VPS e configura\u00e7\u00e3o de hospedagem para clientes.<\/p>\r\n <span class=\"sk-context-note\">\u2192 2+ anos<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">05<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Com\u00e9rcio Internacional<\/p><p class=\"sk-row-name\">Com\u00e9rcio Exterior<\/p><\/div>\r\n <span class=\"sk-row-count\">3 \u00e1reas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">\u00c1reas de atua\u00e7\u00e3o<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Processos de importa\u00e7\u00e3o<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Acompanhamento aduaneiro<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Log\u00edstica internacional<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Bacharelado em Com\u00e9rcio Exterior (Univille, 2025\u20132029) e est\u00e1gio na Unique Consultoria Aduaneira.<\/p>\r\n <span class=\"sk-context-note\">\u2192 Em forma\u00e7\u00e3o<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"sk-row\">\r\n <div class=\"sk-row-accent\"><\/div>\r\n <div class=\"sk-row-head\">\r\n <span class=\"sk-row-num\">06<\/span>\r\n <div class=\"sk-row-meta\"><p class=\"sk-row-cat\">Comunica\u00e7\u00e3o<\/p><p class=\"sk-row-name\">Idiomas<\/p><\/div>\r\n <span class=\"sk-row-count\">2 idiomas<\/span>\r\n <span class=\"sk-row-tog\"><span class=\"sk-row-tog-cross\"><\/span><\/span>\r\n <\/div>\r\n <div class=\"sk-row-body\"><div class=\"sk-row-inner\">\r\n <div class=\"sk-pills-col\">\r\n <p class=\"sk-inner-label\">Idiomas<\/p>\r\n <div class=\"sk-pills\">\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Portugu\u00eas \u2014 Nativo<\/span><\/span>\r\n <span class=\"sk-pill\"><span class=\"sk-pill-inner\">Ingl\u00eas \u2014 Intermedi\u00e1rio<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sk-context-col\">\r\n <p class=\"sk-context-label\">Contexto<\/p>\r\n <p class=\"sk-context-text\">Portugu\u00eas nativo. Ingl\u00eas intermedi\u00e1rio com leitura t\u00e9cnica fluente \u2014 em desenvolvimento ativo para o mercado internacional.<\/p>\r\n <span class=\"sk-context-note\">\u2192 Em estudo<\/span>\r\n <\/div>\r\n <\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div><\/div><\/div>\r\n\r\n\r\n<div id=\"contato\"><div class=\"w\">\r\n <div class=\"contact-wrap\">\r\n <h2 class=\"contact-big reveal\">Vamos<br><em>conversar.<\/em><\/h2>\r\n <div class=\"clinks\">\r\n <a class=\"clink reveal\" href=\"mailto:renancaiocabral6@gmail.com\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">E-mail<\/span><span class=\"clink-val\">renancaiocabral6@gmail.com<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"clink reveal\" href=\"https:\/\/wa.me\/5547991042941\" target=\"_blank\" rel=\"noopener\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">WhatsApp<\/span><span class=\"clink-val\">(47) 9 9104-2941<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"clink reveal\" href=\"https:\/\/linkedin.com\/in\/renancaiocabral\" target=\"_blank\" rel=\"noopener\">\r\n <div class=\"clink-sweep\"><\/div>\r\n <div class=\"clink-inner\">\r\n <div class=\"clink-l\"><span class=\"clink-type\">LinkedIn<\/span><span class=\"clink-val\">linkedin.com\/in\/renancaiocabral<\/span><\/div>\r\n <span class=\"clink-arr\">\u2197<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/div>\r\n\r\n<footer>\r\n <span class=\"ft-l\"><em>Renan<\/em> Caio Cabral<\/span>\r\n <div class=\"ft-r\">\r\n <span class=\"ft-note\">2026<\/span>\r\n <a class=\"btn-dl\" href=\"https:\/\/renancabral.com\/wp-content\/uploads\/2026\/05\/Renan-Caio-Cabral-2026.pdf\" download>\r\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\r\n <span>Baixar PDF<\/span>\r\n <\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500\r\n(function(){\r\n const dot = document.getElementById('cursor-dot');\r\n const ring = document.getElementById('cursor-ring');\r\n if (!dot || !ring) return;\r\n let mx=0,my=0,rx=0,ry=0;\r\n document.addEventListener('mousemove', e => { mx=e.clientX; my=e.clientY; });\r\n function animate(){\r\n dot.style.left = mx+'px';\r\n dot.style.top = my+'px';\r\n rx += (mx-rx) * 0.12;\r\n ry += (my-ry) * 0.12;\r\n ring.style.left = rx+'px';\r\n ring.style.top = ry+'px';\r\n requestAnimationFrame(animate);\r\n }\r\n animate();\r\n document.addEventListener('mouseleave', () => { dot.style.opacity='0'; ring.style.opacity='0'; });\r\n document.addEventListener('mouseenter', () => { dot.style.opacity='1'; ring.style.opacity='1'; });\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 HERO CANVAS \u2014 GLOBE DE PART\u00cdCULAS 3D \u2500\u2500\u2500\r\n(function(){\r\n const canvas = document.getElementById('hero-canvas');\r\n if (!canvas) return;\r\n if (window.innerWidth < 768) { canvas.style.display='none'; return; }\r\n const ctx = canvas.getContext('2d');\r\n\r\n let W, H;\r\n function resize(){\r\n W = canvas.width = canvas.offsetWidth;\r\n H = canvas.height = canvas.offsetHeight;\r\n }\r\n resize();\r\n window.addEventListener('resize', resize);\r\n\r\n \/\/ Globe parameters\r\n const RADIUS = Math.min(W, H) * 0.38;\r\n const N = 360; \/\/ number of particles\r\n let rotY = 0; \/\/ auto-rotation angle\r\n let rotX = 0.18; \/\/ slight tilt\r\n let mouseVY = 0; \/\/ mouse-driven velocity\r\n let dragRotY = 0;\r\n let isDrag = false;\r\n let lastMX = 0;\r\n\r\n \/\/ Build points on sphere surface (Fibonacci lattice for even distribution)\r\n const pts = [];\r\n const golden = Math.PI * (3 - Math.sqrt(5));\r\n for(let i = 0; i < N; i++){\r\n const y = 1 - (i \/ (N - 1)) * 2; \/\/ -1 to 1\r\n const r = Math.sqrt(1 - y * y);\r\n const phi = i * golden;\r\n pts.push({\r\n ox: Math.cos(phi) * r, \/\/ normalised sphere coords\r\n oy: y,\r\n oz: Math.sin(phi) * r,\r\n size: Math.random() < 0.08 ? 3.2 : Math.random() < 0.25 ? 2.2 : 1.3,\r\n accent: Math.random() < 0.14 \/\/ few accent-colour dots\r\n });\r\n }\r\n\r\n \/\/ Lat\/lon lines \u2014 arcs stored as arrays of sphere points\r\n const lines = [];\r\n \/\/ meridians (longitude)\r\n for(let m = 0; m < 8; m++){\r\n const phi = (m \/ 8) * Math.PI * 2;\r\n const seg = [];\r\n for(let t = 0; t <= 48; t++){\r\n const theta = (t \/ 48) * Math.PI - Math.PI\/2;\r\n seg.push({\r\n ox: Math.cos(theta) * Math.cos(phi),\r\n oy: Math.sin(theta),\r\n oz: Math.cos(theta) * Math.sin(phi)\r\n });\r\n }\r\n lines.push(seg);\r\n }\r\n \/\/ parallels (latitude)\r\n for(let p = 1; p <= 5; p++){\r\n const lat = (p \/ 6) * Math.PI - Math.PI\/2;\r\n const seg = [];\r\n for(let t = 0; t <= 60; t++){\r\n const phi = (t \/ 60) * Math.PI * 2;\r\n seg.push({\r\n ox: Math.cos(lat) * Math.cos(phi),\r\n oy: Math.sin(lat),\r\n oz: Math.cos(lat) * Math.sin(phi)\r\n });\r\n }\r\n lines.push(seg);\r\n }\r\n\r\n \/\/ Project 3D \u2192 2D with combined rotY + rotX\r\n function project(ox, oy, oz, ry, rx){\r\n \/\/ rotate Y\r\n const x1 = ox * Math.cos(ry) + oz * Math.sin(ry);\r\n const z1 = -ox * Math.sin(ry) + oz * Math.cos(ry);\r\n const y1 = oy;\r\n \/\/ rotate X\r\n const y2 = y1 * Math.cos(rx) - z1 * Math.sin(rx);\r\n const z2 = y1 * Math.sin(rx) + z1 * Math.cos(rx);\r\n const scale = RADIUS;\r\n return { sx: W\/2 + x1 * scale, sy: H\/2 + y2 * scale, z: z2 };\r\n }\r\n\r\n \/\/ Interaction\r\n const hero = canvas.parentElement;\r\n hero.addEventListener('mousedown', e => { isDrag=true; lastMX=e.clientX; mouseVY=0; });\r\n window.addEventListener('mouseup', () => { isDrag=false; });\r\n hero.addEventListener('mousemove', e => {\r\n if(!isDrag) return;\r\n const dx = e.clientX - lastMX;\r\n mouseVY = dx * 0.006;\r\n dragRotY += mouseVY;\r\n lastMX = e.clientX;\r\n });\r\n hero.style.cursor = 'grab';\r\n hero.addEventListener('mousedown', () => hero.style.cursor = 'grabbing');\r\n window.addEventListener('mouseup', () => hero.style.cursor = 'grab');\r\n\r\n \/\/ accent colour = --gold CSS var\r\n const accent = getComputedStyle(document.documentElement).getPropertyValue('--gold').trim() || '#2A6AC9';\r\n\r\n function loop(){\r\n ctx.clearRect(0, 0, W, H);\r\n\r\n if(!isDrag){\r\n mouseVY *= 0.92;\r\n rotY += 0.0032 + mouseVY;\r\n } else {\r\n rotY += mouseVY;\r\n }\r\n\r\n const ry = rotY + dragRotY;\r\n\r\n \/\/ draw lat\/lon grid lines (back-face first, then front)\r\n lines.forEach(seg => {\r\n ctx.beginPath();\r\n let first = true;\r\n seg.forEach(p => {\r\n const { sx, sy, z } = project(p.ox, p.oy, p.oz, ry, rotX);\r\n const visible = z > -0.05;\r\n const alpha = visible ? Math.max(0, z * 0.12) : 0;\r\n if(alpha < 0.005){ first = true; return; }\r\n if(first){ ctx.moveTo(sx, sy); first=false; }\r\n else ctx.lineTo(sx, sy);\r\n });\r\n ctx.strokeStyle = `rgba(20,20,20,0.13)`;\r\n ctx.lineWidth = 0.8;\r\n ctx.stroke();\r\n });\r\n\r\n \/\/ sort particles by depth (painter's algorithm)\r\n const projected = pts.map(p => {\r\n const r = project(p.ox, p.oy, p.oz, ry, rotX);\r\n return { ...p, ...r };\r\n }).sort((a,b) => a.z - b.z);\r\n\r\n projected.forEach(p => {\r\n const visible = p.z > -0.2;\r\n if(!visible) return;\r\n const depthFactor = (p.z + 1) \/ 2; \/\/ 0 (back) \u2192 1 (front)\r\n const alpha = 0.28 + depthFactor * 0.72;\r\n const size = p.size * (0.4 + depthFactor * 0.8);\r\n\r\n ctx.beginPath();\r\n ctx.arc(p.sx, p.sy, size, 0, Math.PI * 2);\r\n\r\n if(p.accent){\r\n ctx.fillStyle = accent.startsWith('#')\r\n ? hexToRgba(accent, alpha * 0.9)\r\n : `rgba(42,106,201,${alpha * 0.9})`;\r\n \/\/ glow\r\n const g = ctx.createRadialGradient(p.sx,p.sy,0,p.sx,p.sy,size*3.5);\r\n g.addColorStop(0, hexToRgba(accent, alpha*0.55));\r\n g.addColorStop(1, 'transparent');\r\n ctx.fill();\r\n ctx.beginPath(); ctx.arc(p.sx,p.sy,size*3.5,0,Math.PI*2);\r\n ctx.fillStyle=g; ctx.fill();\r\n } else {\r\n ctx.fillStyle = `rgba(20,20,20,${alpha * (p.size > 1.5 ? 0.72 : 0.52)})`;\r\n ctx.fill();\r\n }\r\n });\r\n\r\n requestAnimationFrame(loop);\r\n }\r\n loop();\r\n\r\n function hexToRgba(hex, a){\r\n const r=parseInt(hex.slice(1,3),16);\r\n const g=parseInt(hex.slice(3,5),16);\r\n const b=parseInt(hex.slice(5,7),16);\r\n return `rgba(${r},${g},${b},${a})`;\r\n }\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 TYPEWRITER ROLE \u2500\u2500\u2500\r\n(function(){\r\n const el = document.getElementById('hero-role');\r\n if(!el) return;\r\n const roles = [\r\n 'Graduando em Com\u00e9rcio Exterior',\r\n 'Ingl\u00eas Intermedi\u00e1rio \u00b7 Em desenvolvimento',\r\n 'Automa\u00e7\u00e3o de Processos \u00b7 N8N & Power Automate',\r\n 'IA Generativa aplicada a neg\u00f3cios',\r\n 'Rastreamento & Analytics \u00b7 GTM & Stape',\r\n 'Est\u00e1gio em Importa\u00e7\u00e3o \u00b7 Unique Consultoria',\r\n ];\r\n let ri=0, ci=0, deleting=false, paused=false;\r\n const SPEED_TYPE=60, SPEED_DEL=35, PAUSE=2000;\r\n const cursor='<span class=\"hero-cursor-blink\"><\/span>';\r\n\r\n function tick(){\r\n if(paused){ setTimeout(tick, PAUSE); paused=false; return; }\r\n const word = roles[ri];\r\n if(!deleting){\r\n ci++;\r\n el.innerHTML = word.slice(0,ci) + cursor;\r\n if(ci===word.length){ paused=true; deleting=true; setTimeout(tick,SPEED_TYPE); return; }\r\n setTimeout(tick, SPEED_TYPE);\r\n } else {\r\n ci--;\r\n el.innerHTML = word.slice(0,ci) + cursor;\r\n if(ci===0){ deleting=false; ri=(ri+1)%roles.length; setTimeout(tick, 300); return; }\r\n setTimeout(tick, SPEED_DEL);\r\n }\r\n }\r\n \/\/ Start after loader\r\n setTimeout(tick, 2600);\r\n})();\r\n\r\n\/\/ \u2500\u2500\u2500 LOADER \u2500\u2500\u2500\r\nwindow.addEventListener('load', () => {\r\n setTimeout(() => document.getElementById('loader').classList.add('out'), 2400);\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 NAV \u2500\u2500\u2500\r\nconst nav = document.getElementById('nav');\r\nconst navLinks = document.querySelectorAll('.nav-links a');\r\nwindow.addEventListener('scroll', () => {\r\n nav.classList.toggle('s', scrollY > 60);\r\n let cur='';\r\n document.querySelectorAll('[id]').forEach(s => { if(scrollY>=s.offsetTop-100) cur=s.id; });\r\n navLinks.forEach(a => a.classList.toggle('act', a.getAttribute('href')==='#'+cur));\r\n}, {passive:true});\r\n\r\n\/\/ \u2500\u2500\u2500 BURGER \u2500\u2500\u2500\r\nconst burger = document.getElementById('burger');\r\nconst mob = document.getElementById('mob-menu');\r\nburger.addEventListener('click', () => {\r\n const o = burger.classList.toggle('open');\r\n mob.classList.toggle('open', o);\r\n document.body.style.overflow = o ? 'hidden' : '';\r\n});\r\ndocument.querySelectorAll('.mob-link, .mob-pdf').forEach(l => {\r\n l.addEventListener('click', () => {\r\n burger.classList.remove('open'); mob.classList.remove('open');\r\n document.body.style.overflow='';\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 ACCORDION \u2500\u2500\u2500\r\ndocument.querySelectorAll('.exp-head').forEach(h => {\r\n h.addEventListener('click', () => {\r\n const item = h.closest('.exp-item');\r\n const was = item.classList.contains('open');\r\n document.querySelectorAll('.exp-item').forEach(i => i.classList.remove('open'));\r\n if (!was) item.classList.add('open');\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 SKILLS ACCORDION \u2500\u2500\u2500\r\ndocument.querySelectorAll('.sk-row-head').forEach(head => {\r\n head.addEventListener('click', () => {\r\n const row = head.closest('.sk-row');\r\n const was = row.classList.contains('open');\r\n document.querySelectorAll('.sk-row').forEach(r => r.classList.remove('open'));\r\n if (!was) row.classList.add('open');\r\n });\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 3D TILT CARD \u2500\u2500\u2500\r\nconst card = document.getElementById('about-card');\r\nif (card) {\r\n card.addEventListener('mousemove', e => {\r\n const r = card.getBoundingClientRect();\r\n const x = (e.clientX - r.left) \/ r.width;\r\n const y = (e.clientY - r.top) \/ r.height;\r\n const rotX = (y - .5) * -10;\r\n const rotY = (x - .5) * 12;\r\n card.style.transform = `perspective(700px) rotateX(${rotX}deg) rotateY(${rotY}deg) scale3d(1.015,1.015,1.015)`;\r\n card.style.setProperty('--mouse-x', (x*100)+'%');\r\n card.style.setProperty('--mouse-y', (y*100)+'%');\r\n });\r\n card.addEventListener('mouseleave', () => {\r\n card.style.transform = '';\r\n card.style.transition = 'transform .7s var(--ease)';\r\n setTimeout(() => card.style.transition = '', 700);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 REVEAL \u2500\u2500\u2500\r\nconst revIO = new IntersectionObserver(entries => {\r\n entries.forEach((e, idx) => {\r\n if (e.isIntersecting) {\r\n setTimeout(() => e.target.classList.add('visible'), idx * 60);\r\n }\r\n });\r\n}, {threshold: 0.07});\r\ndocument.querySelectorAll('.reveal').forEach(el => revIO.observe(el));\r\n\r\n\/\/ \u2500\u2500\u2500 EDUCATION COUNTER \u2500\u2500\u2500\r\nconst eduIO = new IntersectionObserver(entries => {\r\n entries.forEach(e => {\r\n if (!e.isIntersecting) return;\r\n eduIO.disconnect();\r\n document.getElementById('edu-fill').classList.add('v');\r\n const el = document.getElementById('edu-pct'), t0 = performance.now();\r\n (function tick(now){\r\n const p = Math.min((now-t0)\/2200, 1);\r\n const ease = 1 - Math.pow(1-p, 4);\r\n el.textContent = Math.round(ease*30) + '%';\r\n if (p<1) requestAnimationFrame(tick);\r\n })(performance.now());\r\n });\r\n}, {threshold: 0.3});\r\nconst ep = document.getElementById('edu-prog');\r\nif (ep) eduIO.observe(ep);\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Renan Caio Cabral \u2014 Portf\u00f3lio Renan Caio Cabral Portf\u00f3lio \u00b7 2026 Renan Cabral Sobre Experi\u00eancia Forma\u00e7\u00e3o Habilidades PDF Contato Sobre Experi\u00eancia Forma\u00e7\u00e3o Habilidades Contato \u2193 Baixar Curr\u00edculo PDF Comex Univille \u00b7 3\u00ba sem. 20anos Santa Catarina \u00b7 BR N8N+ Automa\u00e7\u00e3o & IA Portf\u00f3lio Profissional \u00b7 2026 Renan Caio Cabral Gestor de Tr\u00e1fego Pago Ver trajet\u00f3ria […]<\/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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/renancabral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":43,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/renancabral.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/renancabral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}