Se\u00e7\u00e3o 1 \u2014 Hero<\/title>\n<\/head>\n<body>\n\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Asap:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n .fj-hero{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429; --fj-paper:#f4f4f4;\n font-family:'Asap',sans-serif; background:transparent; color:#fff;\n padding: clamp(24px,5vw,40px) clamp(16px,3vw,24px) 0; box-sizing:border-box;\n display:flex; align-items:center; justify-content:center; }\n .fj-hero *{ box-sizing:border-box; }\n .fj-hero__panel{ position:relative; overflow:hidden; border-radius:32px; background:var(--fj-ink);\n box-shadow:0 30px 64px -30px rgba(31,36,41,.28), 0 8px 24px -14px rgba(31,36,41,.14);\n width:100%; max-width:1200px; }\n .fj-hero__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-hero__glow--orange-bl{ bottom:-15%; left:-10%; width:55vw; max-width:700px; height:55vw; max-height:700px;\n background:radial-gradient(circle, rgba(240,96,0,0.28) 0%, transparent 65%); }\n .fj-hero__glow--pink-bottom{ bottom:-8%; left:35%; width:40vw; max-width:500px; height:40vw; max-height:500px;\n background:radial-gradient(circle, rgba(231,13,100,0.18) 0%, transparent 70%); }\n .fj-hero__glow--orange-tr{ top:-8%; right:-8%; width:25vw; max-width:320px; height:25vw; max-height:320px;\n background:radial-gradient(circle, rgba(240,96,0,0.12) 0%, transparent 70%); }\n\n .fj-hero__grid{ position:relative; z-index:1; padding: clamp(40px,7vw,80px) clamp(20px,5vw,48px);\n display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(32px,5vw,40px); text-align:center; }\n\n .fj-hero__copy{ display:flex; flex-direction:column; align-items:center; min-width:0; }\n .fj-hero__logo{ height:clamp(32px,4vw,48px); width:auto; display:block; margin-bottom:24px; }\n .fj-hero__title{ font-family: 'Asap', sans-serif; font-weight:900; font-size:clamp(44px,9vw,108px);\n text-transform:uppercase; line-height:0.9; letter-spacing:-.01em; color:#fff; margin:0 0 28px; text-wrap:balance; }\n .fj-hero__subhead{ font-family:'Asap',sans-serif; font-size:clamp(16px,2vw,20px); font-weight:400;\n color:rgba(255,255,255,.7); line-height:1.6; max-width:46ch; margin:0 0 36px; text-wrap:pretty; }\n .fj-hero__cta{ display:inline-flex; align-items:center; gap:10px; background:var(--fj-pink); color:#fff;\n font-family:'Asap',sans-serif; font-size:17px; font-weight:700; padding:17px 36px; border-radius:999px;\n box-shadow:0 8px 32px rgba(231,13,100,0.35); letter-spacing:.01em; text-decoration:none; transition:transform .15s; }\n .fj-hero__cta:active{ transform:scale(.98); }\n\n .fj-hero__media{ position:relative; width:100%; max-width:460px; }\n .fj-hero__photo{ position:relative; z-index:2; }\n .fj-hero__photo img{ width:100%; display:block; border-radius:24px; box-shadow:0 32px 72px -20px rgba(0,0,0,.75); }\n\n @media (min-width:900px){\n .fj-hero__grid{ flex-direction:row; text-align:left; align-items:center; }\n .fj-hero__copy{ align-items:flex-start; flex:1.1; }\n .fj-hero__media{ flex:.9; margin-left:auto; }\n }\n \n\n .fj-hero [data-fj-float]{ animation:fj-floaty 8s ease-in-out infinite; }\n @keyframes fj-floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }\n .fj-hero [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-hero [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-hero [data-fj-float]{ animation:none; }\n .fj-hero [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-hero{ width:100%; overflow-x:clip; }\n .fj-hero *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-hero img){ max-width:100%; height:auto; }\n :where(.fj-hero svg, .fj-hero iframe){ max-width:100%; }\n .fj-hero h1, .fj-hero h2, .fj-hero h3, .fj-hero p, .fj-hero li{ overflow-wrap:break-word; text-wrap:pretty; }\n\n @media (max-width:820px){\n .fj-hero__photo{ max-width:400px; margin:0 auto; }\n }\n @media (max-width:560px){\n .fj-hero__grid{ padding:32px 18px; gap:26px; }\n .fj-hero__cta{ width:100%; justify-content:center; padding:15px 24px; }\n }\n @media (max-width:380px){\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-hero a:hover, .fj-hero a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-hero a[class*=\"cta\"]:hover, .fj-hero a[class*=\"cta\"]:focus, .fj-hero a[class*=\"button\"]:hover, .fj-hero a[class*=\"button\"]:focus, .fj-hero a[class*=\"btn\"]:hover, .fj-hero a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n\n<section class=\"fj-hero\" aria-label=\"Introdu\u00e7\u00e3o da webs\u00e9rie\">\n <div class=\"fj-hero__panel\">\n <div class=\"fj-hero__glow fj-hero__glow--orange-bl\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-hero__glow fj-hero__glow--pink-bottom\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-hero__glow fj-hero__glow--orange-tr\" aria-hidden=\"true\"><\/div>\n\n <div class=\"fj-hero__grid\">\n <div class=\"fj-hero__copy\" data-fj-reveal>\n <img loading=\"lazy\" class=\"fj-hero__logo\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/01%20-%20Webs%C3%A9rie%20Freela%20PJ\/staage-2010b94d.png\" alt=\"Staage\" width=\"796\" height=\"146\" loading=\"lazy\" decoding=\"async\">\n <h1 class=\"fj-hero__title\">Webs\u00e9rie<br><span style=\"color:#F06000;\">Freela<\/span><span style=\"color:#e70d64;\"> PJ<\/span><\/h1>\n <p class=\"fj-hero__subhead\">S\u00e9rie <strong>gratuita<\/strong> no YouTube para organizar sua vida de freelancer PJ sem complica\u00e7\u00e3o, do CNPJ aos impostos.<\/p>\n <a class=\"fj-hero__cta\" href=\"#form\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n Acessar curso\n <\/a>\n <\/div>\n\n <div class=\"fj-hero__media\" data-fj-reveal>\n <div class=\"fj-hero__photo\" data-fj-float>\n <img loading=\"lazy\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/Assets\/imagem-lp-curso-freela.png\" alt=\"Instrutores Freela PJ\" width=\"1057\" height=\"865\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\" type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebPage\",\n \"name\": \"Webs\u00e9rie Freela PJ\",\n \"description\": \"S\u00e9rie gratuita no YouTube para organizar a vida de freelancer PJ sem complica\u00e7\u00e3o, do CNPJ aos impostos.\",\n \"publisher\": { \"@type\": \"Organization\", \"name\": \"Staage\" }\n}\n<\/script>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-hero [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d23ee6 e-flex e-con-boxed e-con e-parent\" data-id=\"2d23ee6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61f5012 elementor-widget elementor-widget-shortcode\" data-id=\"61f5012\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Se\u00e7\u00e3o 2 \u2014 Formul\u00e1rio<\/title>\n<\/head>\n<body>\n\n\n\n\n<style>\n .fj-form{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429; --fj-paper:#f4f4f4;\n font-family:'Asap',sans-serif; background:transparent;\n padding: clamp(32px,6vw,48px) clamp(16px,3vw,24px); display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n .fj-form *{ box-sizing:border-box; }\n .fj-form__card{ width:100%; max-width:1300px; border-radius:28px; overflow:hidden;\n box-shadow:0 30px 70px -30px rgba(31,36,41,.28), 0 8px 24px -12px rgba(31,36,41,.14);\n display:flex; flex-direction:column; }\n\n .fj-form__panel{ background:var(--fj-ink); padding: clamp(36px,6vw,56px) clamp(24px,5vw,52px);\n position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }\n .fj-form__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-form__glow--orange{ bottom:-20%; left:-15%; width:60vw; max-width:400px; height:60vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.22) 0%, transparent 65%); }\n .fj-form__glow--pink{ top:-15%; right:-15%; width:45vw; max-width:300px; height:45vw; max-height:300px;\n background:radial-gradient(circle, rgba(231,13,100,0.14) 0%, transparent 70%); }\n\n .fj-form__heading{ position:relative; z-index:1; font-family: 'Asap', sans-serif; font-size:clamp(28px,4vw,42px);\n color:rgba(255,255,255,.85); line-height:1.3; margin:0 0 24px; font-weight:800; text-transform:uppercase; max-width:26ch; }\n .fj-form__questions{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }\n .fj-form__q{ background:rgba(255,255,255,0.06); border-radius:12px; padding:14px 18px; border-left:3px solid var(--fj-orange); }\n .fj-form__q--pink{ border-left-color:var(--fj-pink); }\n .fj-form__q span{ font-family:'Asap',sans-serif; font-size:17px; font-weight:700; color:#fff; }\n .fj-form__note{ position:relative; z-index:1; font-family:'Asap',sans-serif; font-size:16px;\n color:rgba(255,255,255,0.65); line-height:1.7; margin:0; }\n\n .fj-form__iframe-wrap{ background:#ffffff; position:relative; padding: clamp(28px,5vw,44px) clamp(22px,4vw,40px); display:flex; flex-direction:column; justify-content:center; }\n\n @media (min-width:900px){\n .fj-form__card{ flex-direction:row; }\n .fj-form__panel{ flex:5; }\n .fj-form__iframe-wrap{ flex:7; }\n }\n \n\n .fj-form [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-form [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-form [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-form{ width:100%; overflow-x:clip; }\n .fj-form *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-form img){ max-width:100%; height:auto; }\n :where(.fj-form svg, .fj-form iframe){ max-width:100%; }\n .fj-form h1, .fj-form h2, .fj-form h3, .fj-form p, .fj-form li{ overflow-wrap:break-word; text-wrap:pretty; }\n @media (max-width:900px){ .fj-form__card{ border-radius:20px; } }\n\n @media (max-width:560px){\n .fj-form{ padding-left:12px; padding-right:12px; }\n .fj-form__panel{ padding:32px 22px; }\n }\n @media (max-width:400px){\n .fj-form{ padding-left:8px; padding-right:8px; }\n .fj-form__panel{ padding:28px 18px; }\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-form a:hover, .fj-form a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-form a[class*=\"cta\"]:hover, .fj-form a[class*=\"cta\"]:focus, .fj-form a[class*=\"button\"]:hover, .fj-form a[class*=\"button\"]:focus, .fj-form a[class*=\"btn\"]:hover, .fj-form a[class*=\"btn\"]:focus{ color:#fff !important; }\n\n \/* Embed do HubSpot: largura cheia; altura fica por conta do conte\u00fado.\n O bug do espa\u00e7o em branco no mobile era o colapso de largura da\n se\u00e7\u00e3o (j\u00e1 corrigido): o HubSpot media o form a ~0px e gravava\n milhares de px de altura. Com a largura correta, mede certo. *\/\n #hs-freela-pj{ width:100%; }\n #hs-freela-pj iframe{ max-width:100%; }\n<\/style>\n\n\n<section class=\"fj-form\" id=\"form\">\n <div class=\"fj-form__card\">\n <div class=\"fj-form__panel\" data-fj-reveal>\n <div class=\"fj-form__glow fj-form__glow--orange\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-form__glow fj-form__glow--pink\" aria-hidden=\"true\"><\/div>\n <h2 class=\"fj-form__heading\">Quem come\u00e7a a pr\u00f3pria empresa se pergunta:<\/h2>\n <div class=\"fj-form__questions\">\n <div class=\"fj-form__q\"><span>Preciso de CNPJ?<\/span><\/div>\n <div class=\"fj-form__q fj-form__q--pink\"><span>MEI ou ME?<\/span><\/div>\n <div class=\"fj-form__q\"><span>Vou pagar mais imposto?<\/span><\/div>\n <\/div>\n <p class=\"fj-form__note\">A Company Hero junto com a Staage mostram o caminho completo, com exemplos reais e passo a passo, da escolha do CNPJ \u00e0 organiza\u00e7\u00e3o financeira e \u00e0 prote\u00e7\u00e3o que antes s\u00f3 o CLT tinha.<\/p>\n <\/div>\n\n <div class=\"fj-form__iframe-wrap\" data-fj-reveal>\n \n <div id=\"hs-freela-pj\"><\/div>\n <script data-jetpack-boost=\"ignore\" charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script>\n <script data-jetpack-boost=\"ignore\">\n hbspt.forms.create({\n portalId: \"20005532\",\n formId: \"470c8111-70e9-4a11-8405-eae2a73ca1d3\",\n region: \"na1\",\n target: \"#hs-freela-pj\"\n });\n <\/script>\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-form [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ecbbca elementor-widget elementor-widget-shortcode\" data-id=\"7ecbbca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Se\u00e7\u00e3o 3 \u2014 CTA Final<\/title>\n<\/head>\n<body>\n\n\n\n\n<style>\n .fj-cta{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429;\n font-family:'Asap',sans-serif; background:var(--fj-ink); position:relative; overflow:hidden;\n padding: clamp(64px,10vw,112px) clamp(20px,4vw,48px); text-align:center;\n display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n .fj-cta *{ box-sizing:border-box; }\n .fj-cta__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-cta__glow--pink{ bottom:-15%; left:50%; transform:translateX(-50%); width:70vw; max-width:800px; height:44vw; max-height:500px;\n background:radial-gradient(ellipse, rgba(231,13,100,0.28) 0%, transparent 65%); }\n .fj-cta__glow--orange-l{ top:-10%; left:-10%; width:35vw; max-width:400px; height:35vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.18) 0%, transparent 70%); }\n .fj-cta__glow--orange-r{ top:-10%; right:-10%; width:35vw; max-width:400px; height:35vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.12) 0%, transparent 70%); }\n\n .fj-cta__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }\n .fj-cta__badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(240,96,0,0.15);\n border:1px solid rgba(240,96,0,0.3); border-radius:999px; padding:6px 16px; margin-bottom:28px; }\n .fj-cta__badge span{ font-family:'Asap',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase;\n letter-spacing:0.08em; color:var(--fj-orange); }\n .fj-cta__heading{ font-family: 'Asap', sans-serif; font-size:clamp(36px,7vw,76px); font-weight:900;\n text-transform:uppercase; color:#fff; margin:0 0 24px; line-height:0.92; letter-spacing:-.01em; text-wrap:balance; }\n .fj-cta__button{ display:inline-flex; align-items:center; gap:12px; background:var(--fj-pink); color:#fff;\n font-family:'Asap',sans-serif; font-size:18px; font-weight:700; padding:20px 48px; border-radius:999px;\n box-shadow:0 12px 40px rgba(231,13,100,0.4); letter-spacing:0.01em; text-decoration:none; transition:transform .15s; }\n .fj-cta__button:active{ transform:scale(.98); }\n .fj-cta__footer{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:60px;\n padding-top:44px; border-top:1px solid rgba(255,255,255,0.08); }\n .fj-cta__footer img{ height:clamp(36px,5vw,53px); width:auto; display:block; opacity:0.75; }\n\n .fj-cta [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-cta [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-cta [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-cta{ width:100%; overflow-x:clip; }\n .fj-cta *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-cta img){ max-width:100%; height:auto; }\n :where(.fj-cta svg, .fj-cta iframe){ max-width:100%; }\n .fj-cta h1, .fj-cta h2, .fj-cta h3, .fj-cta p, .fj-cta li{ overflow-wrap:break-word; text-wrap:pretty; }\n @media (max-width:520px){ .fj-cta__button{ width:100%; justify-content:center; } }\n\n \/* Cantos arredondados tamb\u00e9m nesta se\u00e7\u00e3o (o hero e o formul\u00e1rio j\u00e1 v\u00eam\n em card). A margem lateral \u00e9 o que deixa o raio vis\u00edvel. *\/\n .fj-cta{ border-radius:clamp(20px,3vw,32px); margin:0 clamp(12px,3vw,24px) clamp(16px,3vw,24px); }\n @media (max-width:480px){\n .fj-cta{ border-radius:20px; margin:0 10px 12px; }\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-cta a:hover, .fj-cta a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-cta a[class*=\"cta\"]:hover, .fj-cta a[class*=\"cta\"]:focus, .fj-cta a[class*=\"button\"]:hover, .fj-cta a[class*=\"button\"]:focus, .fj-cta a[class*=\"btn\"]:hover, .fj-cta a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n\n<section class=\"fj-cta\" aria-label=\"Chamada final para a\u00e7\u00e3o\" id=\"cta\">\n <div class=\"fj-cta__glow fj-cta__glow--pink\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-cta__glow fj-cta__glow--orange-l\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-cta__glow fj-cta__glow--orange-r\" aria-hidden=\"true\"><\/div>\n\n <div class=\"fj-cta__inner\" data-fj-reveal>\n <div class=\"fj-cta__badge\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"#F06000\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n <span>\u00c9 gratuito<\/span>\n <\/div>\n\n <h2 class=\"fj-cta__heading\">D\u00e1 o play e descomplique<br><span style=\"color:#F06000;\">sua vida<\/span> PJ!<\/h2>\n\n <a class=\"fj-cta__button\" href=\"#form\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n Acessar a webs\u00e9rie\n <\/a>\n\n <div class=\"fj-cta__footer\">\n <img loading=\"lazy\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/01%20-%20Webs%C3%A9rie%20Freela%20PJ\/staage-2010b94d.png\" alt=\"Staage\" width=\"796\" height=\"146\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-cta [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"author":3,"featured_media":6486,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"content-type":""},"categories":[],"tags":[],"publico":[262],"categoria":[247],"class_list":["post-6123","materiais","type-materiais","status-publish","format-standard","has-post-thumbnail","hentry","publico-pj","categoria-curso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais"}],"about":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/types\/materiais"}],"author":[{"embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":43,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123\/revisions"}],"predecessor-version":[{"id":6965,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123\/revisions\/6965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media\/6486"}],"wp:attachment":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media?parent=6123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categories?post=6123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6123"},{"taxonomy":"publico","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/publico?post=6123"},{"taxonomy":"categoria","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categoria?post=6123"},{"taxonomy":"tags","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\n\n\nSe\u00e7\u00e3o 1 \u2014 Hero<\/title>\n<\/head>\n<body>\n\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Asap:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n .fj-hero{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429; --fj-paper:#f4f4f4;\n font-family:'Asap',sans-serif; background:transparent; color:#fff;\n padding: clamp(24px,5vw,40px) clamp(16px,3vw,24px) 0; box-sizing:border-box;\n display:flex; align-items:center; justify-content:center; }\n .fj-hero *{ box-sizing:border-box; }\n .fj-hero__panel{ position:relative; overflow:hidden; border-radius:32px; background:var(--fj-ink);\n box-shadow:0 30px 64px -30px rgba(31,36,41,.28), 0 8px 24px -14px rgba(31,36,41,.14);\n width:100%; max-width:1200px; }\n .fj-hero__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-hero__glow--orange-bl{ bottom:-15%; left:-10%; width:55vw; max-width:700px; height:55vw; max-height:700px;\n background:radial-gradient(circle, rgba(240,96,0,0.28) 0%, transparent 65%); }\n .fj-hero__glow--pink-bottom{ bottom:-8%; left:35%; width:40vw; max-width:500px; height:40vw; max-height:500px;\n background:radial-gradient(circle, rgba(231,13,100,0.18) 0%, transparent 70%); }\n .fj-hero__glow--orange-tr{ top:-8%; right:-8%; width:25vw; max-width:320px; height:25vw; max-height:320px;\n background:radial-gradient(circle, rgba(240,96,0,0.12) 0%, transparent 70%); }\n\n .fj-hero__grid{ position:relative; z-index:1; padding: clamp(40px,7vw,80px) clamp(20px,5vw,48px);\n display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(32px,5vw,40px); text-align:center; }\n\n .fj-hero__copy{ display:flex; flex-direction:column; align-items:center; min-width:0; }\n .fj-hero__logo{ height:clamp(32px,4vw,48px); width:auto; display:block; margin-bottom:24px; }\n .fj-hero__title{ font-family: 'Asap', sans-serif; font-weight:900; font-size:clamp(44px,9vw,108px);\n text-transform:uppercase; line-height:0.9; letter-spacing:-.01em; color:#fff; margin:0 0 28px; text-wrap:balance; }\n .fj-hero__subhead{ font-family:'Asap',sans-serif; font-size:clamp(16px,2vw,20px); font-weight:400;\n color:rgba(255,255,255,.7); line-height:1.6; max-width:46ch; margin:0 0 36px; text-wrap:pretty; }\n .fj-hero__cta{ display:inline-flex; align-items:center; gap:10px; background:var(--fj-pink); color:#fff;\n font-family:'Asap',sans-serif; font-size:17px; font-weight:700; padding:17px 36px; border-radius:999px;\n box-shadow:0 8px 32px rgba(231,13,100,0.35); letter-spacing:.01em; text-decoration:none; transition:transform .15s; }\n .fj-hero__cta:active{ transform:scale(.98); }\n\n .fj-hero__media{ position:relative; width:100%; max-width:460px; }\n .fj-hero__photo{ position:relative; z-index:2; }\n .fj-hero__photo img{ width:100%; display:block; border-radius:24px; box-shadow:0 32px 72px -20px rgba(0,0,0,.75); }\n\n @media (min-width:900px){\n .fj-hero__grid{ flex-direction:row; text-align:left; align-items:center; }\n .fj-hero__copy{ align-items:flex-start; flex:1.1; }\n .fj-hero__media{ flex:.9; margin-left:auto; }\n }\n \n\n .fj-hero [data-fj-float]{ animation:fj-floaty 8s ease-in-out infinite; }\n @keyframes fj-floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }\n .fj-hero [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-hero [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-hero [data-fj-float]{ animation:none; }\n .fj-hero [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-hero{ width:100%; overflow-x:clip; }\n .fj-hero *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-hero img){ max-width:100%; height:auto; }\n :where(.fj-hero svg, .fj-hero iframe){ max-width:100%; }\n .fj-hero h1, .fj-hero h2, .fj-hero h3, .fj-hero p, .fj-hero li{ overflow-wrap:break-word; text-wrap:pretty; }\n\n @media (max-width:820px){\n .fj-hero__photo{ max-width:400px; margin:0 auto; }\n }\n @media (max-width:560px){\n .fj-hero__grid{ padding:32px 18px; gap:26px; }\n .fj-hero__cta{ width:100%; justify-content:center; padding:15px 24px; }\n }\n @media (max-width:380px){\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-hero a:hover, .fj-hero a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-hero a[class*=\"cta\"]:hover, .fj-hero a[class*=\"cta\"]:focus, .fj-hero a[class*=\"button\"]:hover, .fj-hero a[class*=\"button\"]:focus, .fj-hero a[class*=\"btn\"]:hover, .fj-hero a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n\n<section class=\"fj-hero\" aria-label=\"Introdu\u00e7\u00e3o da webs\u00e9rie\">\n <div class=\"fj-hero__panel\">\n <div class=\"fj-hero__glow fj-hero__glow--orange-bl\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-hero__glow fj-hero__glow--pink-bottom\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-hero__glow fj-hero__glow--orange-tr\" aria-hidden=\"true\"><\/div>\n\n <div class=\"fj-hero__grid\">\n <div class=\"fj-hero__copy\" data-fj-reveal>\n <img loading=\"lazy\" class=\"fj-hero__logo\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/01%20-%20Webs%C3%A9rie%20Freela%20PJ\/staage-2010b94d.png\" alt=\"Staage\" width=\"796\" height=\"146\" loading=\"lazy\" decoding=\"async\">\n <h1 class=\"fj-hero__title\">Webs\u00e9rie<br><span style=\"color:#F06000;\">Freela<\/span><span style=\"color:#e70d64;\"> PJ<\/span><\/h1>\n <p class=\"fj-hero__subhead\">S\u00e9rie <strong>gratuita<\/strong> no YouTube para organizar sua vida de freelancer PJ sem complica\u00e7\u00e3o, do CNPJ aos impostos.<\/p>\n <a class=\"fj-hero__cta\" href=\"#form\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n Acessar curso\n <\/a>\n <\/div>\n\n <div class=\"fj-hero__media\" data-fj-reveal>\n <div class=\"fj-hero__photo\" data-fj-float>\n <img loading=\"lazy\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/Assets\/imagem-lp-curso-freela.png\" alt=\"Instrutores Freela PJ\" width=\"1057\" height=\"865\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\" type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebPage\",\n \"name\": \"Webs\u00e9rie Freela PJ\",\n \"description\": \"S\u00e9rie gratuita no YouTube para organizar a vida de freelancer PJ sem complica\u00e7\u00e3o, do CNPJ aos impostos.\",\n \"publisher\": { \"@type\": \"Organization\", \"name\": \"Staage\" }\n}\n<\/script>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-hero [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d23ee6 e-flex e-con-boxed e-con e-parent\" data-id=\"2d23ee6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61f5012 elementor-widget elementor-widget-shortcode\" data-id=\"61f5012\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Se\u00e7\u00e3o 2 \u2014 Formul\u00e1rio<\/title>\n<\/head>\n<body>\n\n\n\n\n<style>\n .fj-form{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429; --fj-paper:#f4f4f4;\n font-family:'Asap',sans-serif; background:transparent;\n padding: clamp(32px,6vw,48px) clamp(16px,3vw,24px); display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n .fj-form *{ box-sizing:border-box; }\n .fj-form__card{ width:100%; max-width:1300px; border-radius:28px; overflow:hidden;\n box-shadow:0 30px 70px -30px rgba(31,36,41,.28), 0 8px 24px -12px rgba(31,36,41,.14);\n display:flex; flex-direction:column; }\n\n .fj-form__panel{ background:var(--fj-ink); padding: clamp(36px,6vw,56px) clamp(24px,5vw,52px);\n position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }\n .fj-form__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-form__glow--orange{ bottom:-20%; left:-15%; width:60vw; max-width:400px; height:60vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.22) 0%, transparent 65%); }\n .fj-form__glow--pink{ top:-15%; right:-15%; width:45vw; max-width:300px; height:45vw; max-height:300px;\n background:radial-gradient(circle, rgba(231,13,100,0.14) 0%, transparent 70%); }\n\n .fj-form__heading{ position:relative; z-index:1; font-family: 'Asap', sans-serif; font-size:clamp(28px,4vw,42px);\n color:rgba(255,255,255,.85); line-height:1.3; margin:0 0 24px; font-weight:800; text-transform:uppercase; max-width:26ch; }\n .fj-form__questions{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }\n .fj-form__q{ background:rgba(255,255,255,0.06); border-radius:12px; padding:14px 18px; border-left:3px solid var(--fj-orange); }\n .fj-form__q--pink{ border-left-color:var(--fj-pink); }\n .fj-form__q span{ font-family:'Asap',sans-serif; font-size:17px; font-weight:700; color:#fff; }\n .fj-form__note{ position:relative; z-index:1; font-family:'Asap',sans-serif; font-size:16px;\n color:rgba(255,255,255,0.65); line-height:1.7; margin:0; }\n\n .fj-form__iframe-wrap{ background:#ffffff; position:relative; padding: clamp(28px,5vw,44px) clamp(22px,4vw,40px); display:flex; flex-direction:column; justify-content:center; }\n\n @media (min-width:900px){\n .fj-form__card{ flex-direction:row; }\n .fj-form__panel{ flex:5; }\n .fj-form__iframe-wrap{ flex:7; }\n }\n \n\n .fj-form [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-form [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-form [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-form{ width:100%; overflow-x:clip; }\n .fj-form *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-form img){ max-width:100%; height:auto; }\n :where(.fj-form svg, .fj-form iframe){ max-width:100%; }\n .fj-form h1, .fj-form h2, .fj-form h3, .fj-form p, .fj-form li{ overflow-wrap:break-word; text-wrap:pretty; }\n @media (max-width:900px){ .fj-form__card{ border-radius:20px; } }\n\n @media (max-width:560px){\n .fj-form{ padding-left:12px; padding-right:12px; }\n .fj-form__panel{ padding:32px 22px; }\n }\n @media (max-width:400px){\n .fj-form{ padding-left:8px; padding-right:8px; }\n .fj-form__panel{ padding:28px 18px; }\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-form a:hover, .fj-form a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-form a[class*=\"cta\"]:hover, .fj-form a[class*=\"cta\"]:focus, .fj-form a[class*=\"button\"]:hover, .fj-form a[class*=\"button\"]:focus, .fj-form a[class*=\"btn\"]:hover, .fj-form a[class*=\"btn\"]:focus{ color:#fff !important; }\n\n \/* Embed do HubSpot: largura cheia; altura fica por conta do conte\u00fado.\n O bug do espa\u00e7o em branco no mobile era o colapso de largura da\n se\u00e7\u00e3o (j\u00e1 corrigido): o HubSpot media o form a ~0px e gravava\n milhares de px de altura. Com a largura correta, mede certo. *\/\n #hs-freela-pj{ width:100%; }\n #hs-freela-pj iframe{ max-width:100%; }\n<\/style>\n\n\n<section class=\"fj-form\" id=\"form\">\n <div class=\"fj-form__card\">\n <div class=\"fj-form__panel\" data-fj-reveal>\n <div class=\"fj-form__glow fj-form__glow--orange\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-form__glow fj-form__glow--pink\" aria-hidden=\"true\"><\/div>\n <h2 class=\"fj-form__heading\">Quem come\u00e7a a pr\u00f3pria empresa se pergunta:<\/h2>\n <div class=\"fj-form__questions\">\n <div class=\"fj-form__q\"><span>Preciso de CNPJ?<\/span><\/div>\n <div class=\"fj-form__q fj-form__q--pink\"><span>MEI ou ME?<\/span><\/div>\n <div class=\"fj-form__q\"><span>Vou pagar mais imposto?<\/span><\/div>\n <\/div>\n <p class=\"fj-form__note\">A Company Hero junto com a Staage mostram o caminho completo, com exemplos reais e passo a passo, da escolha do CNPJ \u00e0 organiza\u00e7\u00e3o financeira e \u00e0 prote\u00e7\u00e3o que antes s\u00f3 o CLT tinha.<\/p>\n <\/div>\n\n <div class=\"fj-form__iframe-wrap\" data-fj-reveal>\n \n <div id=\"hs-freela-pj\"><\/div>\n <script data-jetpack-boost=\"ignore\" charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script>\n <script data-jetpack-boost=\"ignore\">\n hbspt.forms.create({\n portalId: \"20005532\",\n formId: \"470c8111-70e9-4a11-8405-eae2a73ca1d3\",\n region: \"na1\",\n target: \"#hs-freela-pj\"\n });\n <\/script>\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-form [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ecbbca elementor-widget elementor-widget-shortcode\" data-id=\"7ecbbca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Se\u00e7\u00e3o 3 \u2014 CTA Final<\/title>\n<\/head>\n<body>\n\n\n\n\n<style>\n .fj-cta{ --fj-orange:#F06000; --fj-pink:#e70d64; --fj-ink:#1f2429;\n font-family:'Asap',sans-serif; background:var(--fj-ink); position:relative; overflow:hidden;\n padding: clamp(64px,10vw,112px) clamp(20px,4vw,48px); text-align:center;\n display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n .fj-cta *{ box-sizing:border-box; }\n .fj-cta__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n .fj-cta__glow--pink{ bottom:-15%; left:50%; transform:translateX(-50%); width:70vw; max-width:800px; height:44vw; max-height:500px;\n background:radial-gradient(ellipse, rgba(231,13,100,0.28) 0%, transparent 65%); }\n .fj-cta__glow--orange-l{ top:-10%; left:-10%; width:35vw; max-width:400px; height:35vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.18) 0%, transparent 70%); }\n .fj-cta__glow--orange-r{ top:-10%; right:-10%; width:35vw; max-width:400px; height:35vw; max-height:400px;\n background:radial-gradient(circle, rgba(240,96,0,0.12) 0%, transparent 70%); }\n\n .fj-cta__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }\n .fj-cta__badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(240,96,0,0.15);\n border:1px solid rgba(240,96,0,0.3); border-radius:999px; padding:6px 16px; margin-bottom:28px; }\n .fj-cta__badge span{ font-family:'Asap',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase;\n letter-spacing:0.08em; color:var(--fj-orange); }\n .fj-cta__heading{ font-family: 'Asap', sans-serif; font-size:clamp(36px,7vw,76px); font-weight:900;\n text-transform:uppercase; color:#fff; margin:0 0 24px; line-height:0.92; letter-spacing:-.01em; text-wrap:balance; }\n .fj-cta__button{ display:inline-flex; align-items:center; gap:12px; background:var(--fj-pink); color:#fff;\n font-family:'Asap',sans-serif; font-size:18px; font-weight:700; padding:20px 48px; border-radius:999px;\n box-shadow:0 12px 40px rgba(231,13,100,0.4); letter-spacing:0.01em; text-decoration:none; transition:transform .15s; }\n .fj-cta__button:active{ transform:scale(.98); }\n .fj-cta__footer{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:60px;\n padding-top:44px; border-top:1px solid rgba(255,255,255,0.08); }\n .fj-cta__footer img{ height:clamp(36px,5vw,53px); width:auto; display:block; opacity:0.75; }\n\n .fj-cta [data-fj-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n .fj-cta [data-fj-reveal].fj-is-visible{ opacity:1; transform:translateY(0); }\n\n @media (prefers-reduced-motion: reduce){\n .fj-cta [data-fj-reveal]{ opacity:1; transform:none; transition:none; }\n }\n\n \/* === Responsivo por @media (mesma t\u00e9cnica das p\u00e1ginas da pasta\n wordpress, que funcionam). Container queries removidas: com\n container-type:inline-size a se\u00e7\u00e3o vira um item flex \"sem conte\u00fado\"\n para o c\u00e1lculo de largura nos containers flex do Elementor e\n colapsa no mobile. width:100% garante a largura no flex. === *\/\n .fj-cta{ width:100%; overflow-x:clip; }\n .fj-cta *{ min-width:0; }\n \/* :where() = especificidade zero: nunca sobrep\u00f5e height\/width que as\n classes da pr\u00f3pria se\u00e7\u00e3o definem (logos, \u00edcones). *\/\n :where(.fj-cta img){ max-width:100%; height:auto; }\n :where(.fj-cta svg, .fj-cta iframe){ max-width:100%; }\n .fj-cta h1, .fj-cta h2, .fj-cta h3, .fj-cta p, .fj-cta li{ overflow-wrap:break-word; text-wrap:pretty; }\n @media (max-width:520px){ .fj-cta__button{ width:100%; justify-content:center; } }\n\n \/* Cantos arredondados tamb\u00e9m nesta se\u00e7\u00e3o (o hero e o formul\u00e1rio j\u00e1 v\u00eam\n em card). A margem lateral \u00e9 o que deixa o raio vis\u00edvel. *\/\n .fj-cta{ border-radius:clamp(20px,3vw,32px); margin:0 clamp(12px,3vw,24px) clamp(16px,3vw,24px); }\n @media (max-width:480px){\n .fj-cta{ border-radius:20px; margin:0 10px 12px; }\n }\n\n \/* Neutraliza o a:hover azul do tema WordPress dentro desta se\u00e7\u00e3o:\n links mant\u00eam a pr\u00f3pria cor; bot\u00f5es continuam com texto branco. *\/\n .fj-cta a:hover, .fj-cta a:focus{ color:inherit !important; text-decoration:none !important; }\n .fj-cta a[class*=\"cta\"]:hover, .fj-cta a[class*=\"cta\"]:focus, .fj-cta a[class*=\"button\"]:hover, .fj-cta a[class*=\"button\"]:focus, .fj-cta a[class*=\"btn\"]:hover, .fj-cta a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n\n<section class=\"fj-cta\" aria-label=\"Chamada final para a\u00e7\u00e3o\" id=\"cta\">\n <div class=\"fj-cta__glow fj-cta__glow--pink\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-cta__glow fj-cta__glow--orange-l\" aria-hidden=\"true\"><\/div>\n <div class=\"fj-cta__glow fj-cta__glow--orange-r\" aria-hidden=\"true\"><\/div>\n\n <div class=\"fj-cta__inner\" data-fj-reveal>\n <div class=\"fj-cta__badge\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"#F06000\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n <span>\u00c9 gratuito<\/span>\n <\/div>\n\n <h2 class=\"fj-cta__heading\">D\u00e1 o play e descomplique<br><span style=\"color:#F06000;\">sua vida<\/span> PJ!<\/h2>\n\n <a class=\"fj-cta__button\" href=\"#form\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n Acessar a webs\u00e9rie\n <\/a>\n\n <div class=\"fj-cta__footer\">\n <img loading=\"lazy\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/01%20-%20Webs%C3%A9rie%20Freela%20PJ\/staage-2010b94d.png\" alt=\"Staage\" width=\"796\" height=\"146\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <\/div>\n<\/section>\n\n\n<script data-jetpack-boost=\"ignore\">\n(function(){\n var els = document.querySelectorAll('.fj-cta [data-fj-reveal]');\n if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n els.forEach(function(el){ el.classList.add('fj-is-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if(entry.isIntersecting){ entry.target.classList.add('fj-is-visible'); io.unobserve(entry.target); }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n \/\/ safety fallback: force reveal if IO never fires (e.g. sandboxed\/edge environments)\n setTimeout(function(){ els.forEach(function(el){ el.classList.add('fj-is-visible'); }); }, 1200);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"author":3,"featured_media":6486,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"content-type":""},"categories":[],"tags":[],"publico":[262],"categoria":[247],"class_list":["post-6123","materiais","type-materiais","status-publish","format-standard","has-post-thumbnail","hentry","publico-pj","categoria-curso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais"}],"about":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/types\/materiais"}],"author":[{"embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":43,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123\/revisions"}],"predecessor-version":[{"id":6965,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6123\/revisions\/6965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media\/6486"}],"wp:attachment":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media?parent=6123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categories?post=6123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6123"},{"taxonomy":"publico","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/publico?post=6123"},{"taxonomy":"categoria","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categoria?post=6123"},{"taxonomy":"tags","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}