{"id":6184,"date":"2026-06-16T19:25:54","date_gmt":"2026-06-16T19:25:54","guid":{"rendered":"https:\/\/www.companyhero.com\/blog\/?post_type=materiais&#038;p=6184"},"modified":"2026-07-28T22:17:27","modified_gmt":"2026-07-28T22:17:27","slug":"diagnostico-de-maturidade-operacional-pj","status":"publish","type":"materiais","link":"https:\/\/www.companyhero.com\/blog\/materiais\/diagnostico-de-maturidade-operacional-pj","title":{"rendered":"Diagn\u00f3stico da Maturidade Operacional PJ"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6184\" class=\"elementor elementor-6184\" data-elementor-post-type=\"materiais\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c060d7e e-flex e-con-boxed e-con e-parent\" data-id=\"c060d7e\" 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-7c93190 elementor-widget elementor-widget-shortcode\" data-id=\"7c93190\" 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 1 \u2014 Hero<\/title>\n<\/head>\n<body>\n\n<!-- ============================================================\n     SE\u00c7\u00c3O 1 \u2014 HERO\n     Cole em um widget \"HTML\" do Elementor. \u00danico bloco com <h1>\n     e \u00fanico que carrega a fonte Asap via <link> (https:\/\/fonts.google.com\/specimen\/Asap)\n     \u2014 se j\u00e1 carregada globalmente no site, remova o <link> abaixo.\n     ============================================================ -->\n\n<!-- CSS -->\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:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n  .dm-hero{ --dm-pink:#e70d64; --dm-pink-600:#ae0642; --dm-wine:#3a0a1e; --dm-paper:#f4f4f4;\n    font-family:'Asap',sans-serif; background:transparent;\n    padding: clamp(20px,4vw,32px) clamp(16px,3vw,24px) clamp(16px,3vw,24px); box-sizing:border-box;\n    display:flex; align-items:center; justify-content:center; }\n  .dm-hero *{ box-sizing:border-box; }\n  .dm-hero__panel{ position:relative; overflow:hidden; border-radius:clamp(18px,3vw,32px); background:var(--dm-wine);\n    box-shadow:0 30px 64px -30px rgba(31,36,41,.32), 0 8px 24px -14px rgba(31,36,41,.18);\n    width:100%; max-width:1140px; display:flex; align-items:center; justify-content:center; }\n  .dm-hero__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n  .dm-hero__glow--right{ right:-10%; top:35%; width:50vw; max-width:560px; height:50vw; max-height:560px;\n    background:radial-gradient(closest-side,rgba(231,13,100,.42),transparent 70%); }\n  .dm-hero__glow--left{ left:-10%; bottom:-10%; width:36vw; max-width:420px; height:36vw; max-height:420px;\n    background:radial-gradient(closest-side,rgba(231,13,100,.24),transparent 70%); }\n  .dm-hero__glow--top{ left:28%; top:-8%; width:42vw; max-width:500px; height:25vw; max-height:300px;\n    background:radial-gradient(closest-side,rgba(231,13,100,.16),transparent 70%); }\n  .dm-hero__glow--center{ position:absolute; inset:0; pointer-events:none;\n    background:radial-gradient(ellipse at 55% 50%, rgba(231,13,100,.28) 0%, transparent 65%); }\n\n  .dm-hero__grid{ position:relative; z-index:1; width:100%; padding:clamp(40px,7vw,88px) clamp(24px,5vw,48px);\n    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(32px,5vw,64px); text-align:center; }\n\n  .dm-hero__copy{ display:flex; flex-direction:column; align-items:center; min-width:0; }\n  \/* Logo com tamanho travado (!important): temas WordPress costumam\n     for\u00e7ar height:auto\/max-width em img, e este PNG tem 8000px de\n     largura natural \u2014 sem o travamento ele estoura. *\/\n  .dm-hero__logo{ height:22px !important; width:auto !important; max-width:120px !important; display:block; margin-bottom:28px; object-fit:contain; }\n  .dm-hero__title{ font-family:'Asap',sans-serif; font-weight:600; font-size:clamp(32px,6vw,54px); line-height:1.05;\n    letter-spacing:-.03em; margin:0 0 24px; color:#fff; max-width:16ch; }\n  .dm-hero__title em{ font-style:normal; color:var(--dm-pink); }\n  .dm-hero__desc{ color:#fff; font-size:clamp(16px,2vw,18px); line-height:1.7; margin:0 0 40px; max-width:50ch; }\n  .dm-hero__cta{ display:inline-flex; align-items:center; gap:10px; background:var(--dm-pink); color:#fff;\n    font-size:16px; font-weight:700; padding:16px 32px; border-radius:999px; box-shadow:0 14px 36px -12px rgba(231,13,100,.55);\n    transition:background .2s, transform .15s; text-decoration:none; }\n  .dm-hero__cta:hover{ background:var(--dm-pink-600); }\n  .dm-hero__cta:active{ transform:scale(.98); }\n\n  .dm-hero__media{ position:relative; width:100%; max-width:460px; height:clamp(360px,50vw,480px); display:flex; align-items:center; justify-content:center; }\n\n  .dm-hero__score{ position:relative; z-index:2; background:#fff; border-radius:24px; padding:32px 36px 28px;\n    box-shadow:0 28px 64px -16px rgba(0,0,0,.55); text-align:center; width:min(220px, 66%); }\n  .dm-hero__score svg{ display:block; margin:0 auto 14px; width:100%; height:auto; overflow:visible; }\n  .dm-hero__score-label{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dm-pink); }\n\n  .dm-hero__card{ position:absolute; z-index:3; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:0 14px 36px -8px rgba(0,0,0,.45); }\n  .dm-hero__card--cost{ top:4%; right:-2%; }\n  .dm-hero__card--categories{ bottom:2%; left:-4%; width:min(174px, 42%); }\n  .dm-hero__card-label{ font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9a9fa5; margin-bottom:4px; }\n  .dm-hero__card-value{ font-family:'Asap',sans-serif; font-size:21px; font-weight:900; letter-spacing:-.02em; color:#1f2429; white-space:nowrap; }\n  .dm-hero__card-value span{ font-size:12px; font-weight:600; color:#9a9fa5; margin-left:2px; }\n\n  .dm-hero__badge{ position:absolute; z-index:3; bottom:22%; right:-4%; background:#fde7f0; border-radius:999px; padding:10px 16px;\n    box-shadow:0 10px 28px -6px rgba(231,13,100,.35); display:flex; align-items:center; gap:8px; white-space:nowrap; }\n  .dm-hero__badge-text{ font-size:12px; font-weight:800; color:var(--dm-pink-600); }\n\n  .dm-hero__bars{ display:flex; flex-direction:column; gap:7px; }\n  .dm-hero__bar-track{ height:5px; background:#f0f0f0; border-radius:999px; overflow:hidden; }\n  .dm-hero__bar-fill{ height:100%; background:var(--dm-pink); border-radius:999px; }\n\n  @media (min-width:900px){\n    .dm-hero__grid{ flex-direction:row; text-align:left; }\n    .dm-hero__copy{ align-items:flex-start; flex:1.1; }\n    .dm-hero__media{ flex:.9; }\n  }\n  \n\n  .dm-hero [data-dm-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n  .dm-hero [data-dm-reveal].dm-is-visible{ opacity:1; transform:translateY(0); }\n  .dm-hero [data-dm-float]{ animation:dm-floaty 7s ease-in-out infinite; }\n  @keyframes dm-floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }\n  @keyframes dm-drawRing{ from{ stroke-dasharray:0 352; } to{ stroke-dasharray:218 352; } }\n  .dm-hero__ring{ stroke-dasharray:218 365; animation:dm-drawRing 1.6s cubic-bezier(.4,0,.2,1) .3s both; }\n\n  @media (prefers-reduced-motion: reduce){\n    .dm-hero [data-dm-reveal]{ opacity:1; transform:none; transition:none; }\n    .dm-hero [data-dm-float]{ animation:none; }\n    .dm-hero__ring{ animation:none; stroke-dasharray:218 365; }\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  .dm-hero{ width:100%; overflow-x:clip; }\n  .dm-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(.dm-hero img){ max-width:100%; height:auto; }\n  :where(.dm-hero svg, .dm-hero iframe){ max-width:100%; }\n  .dm-hero h1, .dm-hero h2, .dm-hero h3, .dm-hero p, .dm-hero li{ overflow-wrap:break-word; text-wrap:pretty; }\n\n  @media (max-width:820px){\n    .dm-hero__media{ height:auto; min-height:clamp(320px,92vw,440px); max-width:420px; }\n  }\n  @media (max-width:560px){\n    .dm-hero__grid{ padding:34px 18px; gap:26px; }\n    .dm-hero__cta{ width:100%; justify-content:center; padding:15px 24px; }\n    .dm-hero__score{ width:min(200px,62%); padding:26px 24px 22px; }\n    .dm-hero__card{ padding:11px 13px; }\n    .dm-hero__card--cost{ top:0; right:0; }\n    .dm-hero__card--categories{ bottom:0; left:0; width:min(152px,46%); }\n    .dm-hero__card-value{ font-size:18px; }\n    .dm-hero__badge{ bottom:26%; right:0; padding:9px 13px; }\n    .dm-hero__badge-text{ font-size:11px; }\n  }\n  @media (max-width:380px){\n    .dm-hero__score{ width:min(176px,60%); }\n    .dm-hero__card--categories{ width:min(132px,44%); }\n    .dm-hero__card{ padding:9px 11px; }\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  .dm-hero a:hover, .dm-hero a:focus{ color:inherit !important; text-decoration:none !important; }\n  .dm-hero a[class*=\"cta\"]:hover, .dm-hero a[class*=\"cta\"]:focus, .dm-hero a[class*=\"button\"]:hover, .dm-hero a[class*=\"button\"]:focus, .dm-hero a[class*=\"btn\"]:hover, .dm-hero a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n<!-- HTML -->\n<section class=\"dm-hero\" aria-label=\"Introdu\u00e7\u00e3o do diagn\u00f3stico\">\n  <div class=\"dm-hero__panel\">\n    <div class=\"dm-hero__glow dm-hero__glow--right\" aria-hidden=\"true\"><\/div>\n    <div class=\"dm-hero__glow dm-hero__glow--left\" aria-hidden=\"true\"><\/div>\n    <div class=\"dm-hero__glow dm-hero__glow--top\" aria-hidden=\"true\"><\/div>\n    <div class=\"dm-hero__glow--center\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"dm-hero__grid\">\n      <div class=\"dm-hero__copy\" data-dm-reveal>\n        <img loading=\"lazy\" class=\"dm-hero__logo\" src=\"https:\/\/20005532.fs1.hubspotusercontent-na1.net\/hubfs\/20005532\/Hub%20de%20Materiais\/Gest%C3%A3o%20PJ\/logo-gestaopj-white.png\" alt=\"Gest\u00e3o PJ\" width=\"120\" height=\"30\" loading=\"lazy\" decoding=\"async\">\n        <h1 class=\"dm-hero__title\">Diagn\u00f3stico de <em>maturidade<\/em> operacional PJ<\/h1>\n        <p class=\"dm-hero__desc\">Planilha compartilhada, nota fiscal chegando por WhatsApp, confer\u00eancia manual: a opera\u00e7\u00e3o PJ parece funcionar, at\u00e9 o m\u00eas em que n\u00e3o funciona.<\/p>\n        <a class=\"dm-hero__cta\" href=\"#form\">\n          Iniciar diagn\u00f3stico\n          <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\n        <\/a>\n      <\/div>\n\n      <div class=\"dm-hero__media\" data-dm-reveal>\n        <div class=\"dm-hero__score\" data-dm-float>\n          <svg viewBox=\"0 0 148 148\">\n            <circle cx=\"74\" cy=\"74\" r=\"58\" fill=\"none\" stroke=\"#f0f0f0\" stroke-width=\"10\"><\/circle>\n            <circle class=\"dm-hero__ring\" cx=\"74\" cy=\"74\" r=\"58\" fill=\"none\" stroke=\"#e70d64\" stroke-width=\"10\" stroke-linecap=\"round\" transform=\"rotate(-90 74 74)\"><\/circle>\n            <text x=\"74\" y=\"79\" text-anchor=\"middle\" font-family=\"Asap,sans-serif\" font-size=\"38\" font-weight=\"900\" fill=\"#1f2429\">62<\/text>\n            <text x=\"74\" y=\"96\" text-anchor=\"middle\" font-family=\"Asap,sans-serif\" font-size=\"12\" font-weight=\"500\" fill=\"#9a9fa5\">de 100<\/text>\n          <\/svg>\n          <div class=\"dm-hero__score-label\">Em desenvolvimento<\/div>\n        <\/div>\n\n        <div class=\"dm-hero__card dm-hero__card--cost\" data-dm-float>\n          <div class=\"dm-hero__card-label\">Custo oculto<\/div>\n          <div class=\"dm-hero__card-value\">R$ 4.200<span>\/m\u00eas<\/span><\/div>\n        <\/div>\n\n        <div class=\"dm-hero__badge\" data-dm-float>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e70d64\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg>\n          <span class=\"dm-hero__badge-text\">2 riscos cr\u00edticos<\/span>\n        <\/div>\n\n        <div class=\"dm-hero__card dm-hero__card--categories\" data-dm-float>\n          <div class=\"dm-hero__card-label\">Por categoria<\/div>\n          <div class=\"dm-hero__bars\">\n            <div class=\"dm-hero__bar-track\"><div class=\"dm-hero__bar-fill\" style=\"width:25%;\"><\/div><\/div>\n            <div class=\"dm-hero__bar-track\"><div class=\"dm-hero__bar-fill\" style=\"width:69%;\"><\/div><\/div>\n            <div class=\"dm-hero__bar-track\"><div class=\"dm-hero__bar-fill\" style=\"width:92%; background:#1a9c6e;\"><\/div><\/div>\n            <div class=\"dm-hero__bar-track\"><div class=\"dm-hero__bar-fill\" style=\"width:13%;\"><\/div><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- JSON-LD \u2014 dados estruturados aditivos, sem alterar conte\u00fado vis\u00edvel -->\n<script data-jetpack-boost=\"ignore\" type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"name\": \"Diagn\u00f3stico de maturidade operacional PJ\",\n  \"description\": \"Avalie a maturidade da sua opera\u00e7\u00e3o PJ: planilhas, nota fiscal manual e confer\u00eancia que parecem funcionar at\u00e9 deixarem de funcionar.\",\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"Gest\u00e3o PJ\" }\n}\n<\/script>\n\n<!-- JS -->\n<script data-jetpack-boost=\"ignore\">\n(function(){\n  var els = document.querySelectorAll('.dm-hero [data-dm-reveal]');\n  function revealAll(){ els.forEach(function(el){ el.classList.add('dm-is-visible'); }); }\n  if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    revealAll(); return;\n  }\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(entry){\n      if(entry.isIntersecting){ entry.target.classList.add('dm-is-visible'); io.unobserve(entry.target); }\n    });\n  }, { threshold: 0.15 });\n  els.forEach(function(el){ io.observe(el); });\n  setTimeout(revealAll, 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<div class=\"elementor-element elementor-element-9e62871 e-flex e-con-boxed e-con e-parent\" data-id=\"9e62871\" 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-19cd91e elementor-widget elementor-widget-shortcode\" data-id=\"19cd91e\" 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     SE\u00c7\u00c3O 2 \u2014 DESCUBRA A MATURIDADE + FORMUL\u00c1RIO\n     Cole em um novo widget \"HTML\" do Elementor.\n     ============================================================ -->\n\n<!-- CSS -->\n<style>\n  .dm-form{ --dm-pink:#e70d64; --dm-pink-600:#ae0642; --dm-paper:#f4f4f4;\n    font-family:'Asap',sans-serif; background:transparent;\n    padding: clamp(48px,8vw,72px) clamp(16px,3vw,24px); display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n  .dm-form *{ box-sizing:border-box; }\n  .dm-form__card{ width:100%; max-width:1140px; display:flex; flex-direction:column; border-radius:24px; overflow:hidden;\n    box-shadow:0 20px 56px -24px rgba(31,36,41,.18); }\n\n  .dm-form__panel{ position:relative; background:linear-gradient(150deg,#e70d64 0%,#ae0642 55%,#570526 100%);\n    padding: clamp(36px,6vw,56px) clamp(24px,5vw,44px); overflow:hidden; display:flex; flex-direction:column; justify-content:center; }\n  .dm-form__heading{ font-family:'Asap',sans-serif; font-weight:800; font-size:clamp(24px,4vw,32px); line-height:1.1;\n    letter-spacing:-.025em; color:#fff; margin:0 0 18px; }\n  .dm-form__intro{ font-size:16px; line-height:1.65; color:rgba(255,255,255,.8); margin:0 0 36px; }\n  .dm-form__list{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }\n  .dm-form__item{ display:flex; align-items:center; gap:12px; }\n  .dm-form__icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px;\n    background:rgba(255,255,255,.15); flex:none; }\n  .dm-form__item-label{ font-size:15px; font-weight:600; color:#fff; }\n\n  .dm-form__right{ background:#fff; padding: clamp(32px,6vw,52px) clamp(24px,5vw,48px); display:flex; flex-direction:column; justify-content:center; }\n  .dm-form__right-heading{ font-family:'Asap',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; margin:0 0 6px; color:#1f2429; }\n  .dm-form__right-sub{ font-size:15px; color:#6b7178; margin:0 0 28px; line-height:1.5; }\n\n  @media (min-width:900px){\n    .dm-form__card{ flex-direction:row; }\n    .dm-form__panel{ flex:.85; }\n    .dm-form__right{ flex:1.15; }\n  }\n  \n\n  .dm-form [data-dm-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n  .dm-form [data-dm-reveal].dm-is-visible{ opacity:1; transform:translateY(0); }\n\n  @media (prefers-reduced-motion: reduce){\n    .dm-form [data-dm-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  .dm-form{ width:100%; overflow-x:clip; }\n  .dm-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(.dm-form img){ max-width:100%; height:auto; }\n  :where(.dm-form svg, .dm-form iframe){ max-width:100%; }\n  .dm-form h1, .dm-form h2, .dm-form h3, .dm-form p, .dm-form li{ overflow-wrap:break-word; text-wrap:pretty; }\n\n  @media (max-width:900px){ .dm-form__card{ border-radius:20px; } }\n\n  @media (max-width:560px){\n    .dm-form{ padding-left:12px; padding-right:12px; }\n    .dm-form__panel{ padding:32px 22px; }\n    .dm-form__right{ padding:30px 20px 34px; }\n  }\n  @media (max-width:400px){\n    .dm-form{ padding-left:8px; padding-right:8px; }\n    .dm-form__panel{ padding:28px 18px; }\n    .dm-form__right{ padding:26px 16px 30px; }\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  .dm-form a:hover, .dm-form a:focus{ color:inherit !important; text-decoration:none !important; }\n  .dm-form a[class*=\"cta\"]:hover, .dm-form a[class*=\"cta\"]:focus, .dm-form a[class*=\"button\"]:hover, .dm-form a[class*=\"button\"]:focus, .dm-form a[class*=\"btn\"]:hover, .dm-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-maturidade-pj{ width:100%; }\n  #hs-maturidade-pj iframe{ max-width:100%; }\n<\/style>\n\n<!-- HTML -->\n<section class=\"dm-form\" id=\"form\">\n  <div class=\"dm-form__card\">\n    <div class=\"dm-form__panel\" data-dm-reveal>\n      <h2 class=\"dm-form__heading\">Descubra a real maturidade da sua opera\u00e7\u00e3o PJ<\/h2>\n      <p class=\"dm-form__intro\">Em 11 perguntas, voc\u00ea recebe um score de 0 a 100, o custo operacional escondido e os pontos cr\u00edticos que mais exp\u00f5em sua empresa.<\/p>\n      <ul class=\"dm-form__list\">\n        <li class=\"dm-form__item\">\n          <span class=\"dm-form__icon\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 8v4l3 3\"><\/path><\/svg>\n          <\/span>\n          <span class=\"dm-form__item-label\">Score de 0 a 100<\/span>\n        <\/li>\n        <li class=\"dm-form__item\">\n          <span class=\"dm-form__icon\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2v20\"><\/path><path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path><\/svg>\n          <\/span>\n          <span class=\"dm-form__item-label\">Custo operacional escondido<\/span>\n        <\/li>\n        <li class=\"dm-form__item\">\n          <span class=\"dm-form__icon\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 11 3 3L22 4\"><\/path><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"><\/path><\/svg>\n          <\/span>\n          <span class=\"dm-form__item-label\">Pontos cr\u00edticos de risco<\/span>\n        <\/li>\n      <\/ul>\n    <\/div>\n\n    <div class=\"dm-form__right\" data-dm-reveal>\n      <h3 class=\"dm-form__right-heading\">Receba o acesso ao diagn\u00f3stico<\/h3>\n      <p class=\"dm-form__right-sub\">Gratuito. Sem compromisso. Resultado em minutos.<\/p>\n      <!-- \u2193 snippet do HubSpot: s\u00f3 ganhou target para renderizar aqui dentro \u2193 -->\n      <!-- Formul\u00e1rio: snippet oficial do HubSpot com target. Altura\n           acompanha o conte\u00fado \u2014 sem rolagem e sem sobra. -->\n      <div id=\"hs-maturidade-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: \"6942fc05-04dd-4012-a870-d2e1a140b4e1\",\n          region: \"na1\",\n          redirectUrl: \"https:\/\/gestaopj.com\/ferramentas-gpj\/maturidade\",\n          target: \"#hs-maturidade-pj\"\n        });\n      <\/script>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- JS -->\n<script data-jetpack-boost=\"ignore\">\n(function(){\n  var els = document.querySelectorAll('.dm-form [data-dm-reveal]');\n  function revealAll(){ els.forEach(function(el){ el.classList.add('dm-is-visible'); }); }\n  if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    revealAll(); return;\n  }\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(entry){\n      if(entry.isIntersecting){ entry.target.classList.add('dm-is-visible'); io.unobserve(entry.target); }\n    });\n  }, { threshold: 0.15 });\n  els.forEach(function(el){ io.observe(el); });\n  setTimeout(revealAll, 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<div class=\"elementor-element elementor-element-a235e7f e-flex e-con-boxed e-con e-parent\" data-id=\"a235e7f\" 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-d5b00ea elementor-widget elementor-widget-shortcode\" data-id=\"d5b00ea\" 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     SE\u00c7\u00c3O 3 \u2014 CTA FINAL\n     Cole em um novo widget \"HTML\" do Elementor.\n     ============================================================ -->\n\n<!-- CSS -->\n<style>\n  .dm-cta{ --dm-pink:#e70d64; --dm-pink-600:#ae0642; --dm-wine:#3a0a1e;\n    font-family:'Asap',sans-serif; position:relative; background:var(--dm-wine); overflow:hidden;\n    padding: clamp(56px,9vw,80px) clamp(16px,3vw,24px) clamp(64px,10vw,96px); text-align:center;\n    display:flex; align-items:center; justify-content:center; box-sizing:border-box; }\n  .dm-cta *{ box-sizing:border-box; }\n  .dm-cta__glow{ position:absolute; border-radius:50%; pointer-events:none; }\n  .dm-cta__glow--center{ left:50%; top:50%; transform:translate(-50%,-50%); width:55vw; max-width:600px; height:55vw; max-height:600px;\n    background:radial-gradient(closest-side,rgba(231,13,100,.36),transparent 70%); }\n  .dm-cta__glow--left{ left:-8%; bottom:-10%; width:32vw; max-width:340px; height:32vw; max-height:340px;\n    background:radial-gradient(closest-side,rgba(231,13,100,.18),transparent 70%); }\n\n  .dm-cta__inner{ position:relative; z-index:1; max-width:600px; margin:0 auto; }\n  .dm-cta__heading{ font-family:'Asap',sans-serif; font-weight:800; font-size:clamp(26px,4.5vw,36px); line-height:1.1;\n    letter-spacing:-.025em; color:#fff; margin:0 0 16px; }\n  .dm-cta__button{ display:inline-flex; align-items:center; gap:10px; background:var(--dm-pink); color:#fff;\n    font-size:16px; font-weight:700; padding:17px 36px; border-radius:999px; box-shadow:0 14px 36px -12px rgba(231,13,100,.6);\n    transition:background .2s, transform .15s; text-decoration:none; }\n  .dm-cta__button:hover{ background:var(--dm-pink-600); }\n  .dm-cta__button:active{ transform:scale(.98); }\n\n  .dm-cta [data-dm-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }\n  .dm-cta [data-dm-reveal].dm-is-visible{ opacity:1; transform:translateY(0); }\n\n  @media (prefers-reduced-motion: reduce){\n    .dm-cta [data-dm-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  .dm-cta{ width:100%; overflow-x:clip; }\n  .dm-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(.dm-cta img){ max-width:100%; height:auto; }\n  :where(.dm-cta svg, .dm-cta iframe){ max-width:100%; }\n  .dm-cta h1, .dm-cta h2, .dm-cta h3, .dm-cta p, .dm-cta li{ overflow-wrap:break-word; text-wrap:pretty; }\n  @media (max-width:520px){ .dm-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  .dm-cta{ border-radius:clamp(20px,3vw,32px); margin:0 clamp(12px,3vw,24px) clamp(16px,3vw,24px); }\n  @media (max-width:480px){\n    .dm-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  .dm-cta a:hover, .dm-cta a:focus{ color:inherit !important; text-decoration:none !important; }\n  .dm-cta a[class*=\"cta\"]:hover, .dm-cta a[class*=\"cta\"]:focus, .dm-cta a[class*=\"button\"]:hover, .dm-cta a[class*=\"button\"]:focus, .dm-cta a[class*=\"btn\"]:hover, .dm-cta a[class*=\"btn\"]:focus{ color:#fff !important; }\n<\/style>\n\n<!-- HTML -->\n<section class=\"dm-cta\" aria-label=\"Chamada final para a\u00e7\u00e3o\">\n  <div class=\"dm-cta__glow dm-cta__glow--center\" aria-hidden=\"true\"><\/div>\n  <div class=\"dm-cta__glow dm-cta__glow--left\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"dm-cta__inner\" data-dm-reveal>\n    <h2 class=\"dm-cta__heading\">Gest\u00e3o PJ sem<br>dor de cabe\u00e7a<\/h2>\n    <a class=\"dm-cta__button\" href=\"#form\">\n      Iniciar diagn\u00f3stico\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- JS -->\n<script data-jetpack-boost=\"ignore\">\n(function(){\n  var els = document.querySelectorAll('.dm-cta [data-dm-reveal]');\n  function revealAll(){ els.forEach(function(el){ el.classList.add('dm-is-visible'); }); }\n  if(!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    revealAll(); return;\n  }\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(entry){\n      if(entry.isIntersecting){ entry.target.classList.add('dm-is-visible'); io.unobserve(entry.target); }\n    });\n  }, { threshold: 0.15 });\n  els.forEach(function(el){ io.observe(el); });\n  setTimeout(revealAll, 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":6476,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"content-type":""},"categories":[],"tags":[],"publico":[263],"categoria":[246],"class_list":["post-6184","materiais","type-materiais","status-publish","format-standard","has-post-thumbnail","hentry","publico-rh","categoria-ferramenta"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6184","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":30,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6184\/revisions"}],"predecessor-version":[{"id":6974,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/materiais\/6184\/revisions\/6974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media\/6476"}],"wp:attachment":[{"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/media?parent=6184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categories?post=6184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6184"},{"taxonomy":"publico","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/publico?post=6184"},{"taxonomy":"categoria","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/categoria?post=6184"},{"taxonomy":"tags","embeddable":true,"href":"https:\/\/www.companyhero.com\/blog\/wp-json\/wp\/v2\/tags?post=6184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}