1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[42885],{18207:function(a,o,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/marca-voitto",function(){return e(59776)}])},59776:function(a,o,e){"use strict";e.r(o),e.d(o,{default:function(){return v}});var t=e(7297),r=e(85893);e(67294);var i=e(9008),n=e.n(i),s=e(186),d=e(11367),c=e(22953),l=e(64827);function p(){var a=(0,t.Z)(["",""]);return p=function(){return a},a}var m=(0,s.vJ)(p(),'\n[data-doc="marca-voitto"]{\n --red:#B71C13;\n --red-deep:#921610;\n --red-soft:rgba(183,28,19,.12);\n --red-line:rgba(183,28,19,.32);\n --black:#0A0A0A;\n --ink:#111111;\n --graphite:#161616;\n --graphite-2:#1E1E1E;\n --elev:#232323;\n --line:rgba(255,255,255,.10);\n --line-2:rgba(255,255,255,.06);\n --g900:#1F1F1F;--g800:#333333;--g600:#595959;--g500:#808080;--g400:#8C8C8C;--g300:#B8B8B8;--g200:#D9D9D9;--g100:#F2F2F2;\n --white:#FFFFFF;\n --paper:#F6F4F1;\n --display:"Archivo",sans-serif;\n --text:"Hanken Grotesk",sans-serif;\n --mono:"JetBrains Mono",monospace;\n --maxw:1180px;\n}\n[data-doc="marca-voitto"] *{margin:0;padding:0;box-sizing:border-box}\n[data-doc="marca-voitto"]{scroll-behavior:smooth;scroll-padding-top:84px}\n[data-doc="marca-voitto"]{\n background:var(--black);\n color:var(--g200);\n font-family:var(--text) !important;\n font-size:17px;line-height:1.7;\n -webkit-font-smoothing:antialiased;\n overflow-x:hidden;\n}\n[data-doc="marca-voitto"] ::selection{background:var(--red);color:#fff}\n[data-doc="marca-voitto"] a{color:inherit;text-decoration:none}\n[data-doc="marca-voitto"] img{max-width:100%;display:block}\n[data-doc="marca-voitto"] em{font-style:italic;color:#fff}\n\n/* ---------- NAV ---------- */\n[data-doc="marca-voitto"] .nav{\n position:sticky;top:0;z-index:100;\n background:rgba(10,10,10,.82);backdrop-filter:blur(14px);\n border-bottom:1px solid var(--line);\n}\n[data-doc="marca-voitto"] .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}\n[data-doc="marca-voitto"] .nav-logo img{height:24px;width:auto}\n[data-doc="marca-voitto"] .nav-links{display:flex;gap:26px;align-items:center;font-family:var(--mono) !important;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--g400)}\n[data-doc="marca-voitto"] .nav-links a{transition:color .2s;white-space:nowrap}\n[data-doc="marca-voitto"] .nav-links a:hover{color:#fff}\n[data-doc="marca-voitto"] .nav-tag{font-family:var(--mono) !important;font-size:11px;color:var(--red);letter-spacing:.08em;text-transform:uppercase}\n@media(max-width:920px){[data-doc="marca-voitto"] .nav-links{display:none}}\n\n/* ---------- LAYOUT ---------- */\n[data-doc="marca-voitto"] .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}\n[data-doc="marca-voitto"] .section{padding:118px 0;border-top:1px solid var(--line-2);position:relative}\n[data-doc="marca-voitto"] .section:first-of-type{border-top:none}\n[data-doc="marca-voitto"] .kicker{\n display:inline-flex;align-items:center;gap:10px;\n font-family:var(--mono) !important;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);\n margin-bottom:26px;\n}\n[data-doc="marca-voitto"] .kicker::before{content:"";width:26px;height:1px;background:var(--red)}\n[data-doc="marca-voitto"] .sec-head{display:flex;align-items:flex-start;gap:30px;margin-bottom:54px}\n[data-doc="marca-voitto"] .sec-num{\n font-family:var(--display) !important;font-weight:900;font-size:clamp(46px,7vw,84px);line-height:.8;\n color:transparent;-webkit-text-stroke:1.4px var(--red-line);letter-spacing:-.02em;flex-shrink:0;\n}\n[data-doc="marca-voitto"] h2{font-family:var(--display) !important;font-weight:800;font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.025em;color:#fff}\n[data-doc="marca-voitto"] h2 em{color:var(--red);font-style:italic}\n[data-doc="marca-voitto"] .lead{font-size:clamp(18px,2.4vw,21px);color:var(--g300);max-width:60ch;margin-top:18px;line-height:1.55}\n[data-doc="marca-voitto"] h3{font-family:var(--display) !important;font-weight:700;font-size:22px;color:#fff;letter-spacing:-.01em;margin-bottom:12px}\n[data-doc="marca-voitto"] h4{font-family:var(--display) !important;font-weight:700;font-size:15px;color:#fff;letter-spacing:.01em;margin-bottom:8px}\n[data-doc="marca-voitto"] p+p{margin-top:14px}\n[data-doc="marca-voitto"] strong{color:#fff;font-weight:600}\n\n/* reveal */\n[data-doc="marca-voitto"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}\n[data-doc="marca-voitto"] .reveal.in{opacity:1;transform:none}\n\n/* ---------- COVER ---------- */\n[data-doc="marca-voitto"] .cover{\n min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;\n padding:48px 0 44px;position:relative;overflow:hidden;\n background:\n radial-gradient(900px 540px at 78% 12%,rgba(183,28,19,.20),transparent 60%),\n radial-gradient(700px 700px at 8% 96%,rgba(183,28,19,.07),transparent 60%),\n var(--black);\n}\n[data-doc="marca-voitto"] .cover::after{\n content:"";position:absolute;inset:0;pointer-events:none;\n background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);\n background-size:64px 64px;mask-image:radial-gradient(1000px 700px at 70% 30%,#000,transparent 75%);opacity:.5;\n}\n[data-doc="marca-voitto"] .cover-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}\n[data-doc="marca-voitto"] .cover-top img{height:30px}\n[data-doc="marca-voitto"] .cover-top span{font-family:var(--mono) !important;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g500);color:var(--g400)}\n[data-doc="marca-voitto"] .cover-mid{position:relative;z-index:2}\n[data-doc="marca-voitto"] .cover-kick{font-family:var(--mono) !important;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin-bottom:26px}\n[data-doc="marca-voitto"] .cover-title{font-family:var(--display) !important;font-weight:900;font-size:clamp(52px,11vw,138px);line-height:.86;letter-spacing:-.035em;color:#fff;text-transform:uppercase}\n[data-doc="marca-voitto"] .cover-title em{display:block;color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.55);font-style:normal}\n[data-doc="marca-voitto"] .cover-sub{margin-top:34px;font-size:clamp(19px,2.6vw,26px);color:var(--g300);max-width:34ch;line-height:1.4}\n[data-doc="marca-voitto"] .cover-sub b{color:#fff;font-weight:600}\n[data-doc="marca-voitto"] .cover-bot{display:flex;justify-content:space-between;align-items:flex-end;
1gap:24px;position:relative;z-index:2;flex-wrap:wrap}\n[data-doc="marca-voitto"] .cover-meta{font-family:var(--mono) !important;font-size:12px;color:var(--g400);letter-spacing:.04em;line-height:1.9}\n[data-doc="marca-voitto"] .cover-meta b{color:#fff}\n[data-doc="marca-voitto"] .scroll-hint{font-family:var(--mono) !important;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g500);color:var(--g400);display:flex;align-items:center;gap:10px}\n[data-doc="marca-voitto"] .scroll-hint .ln{width:1px;height:30px;background:linear-gradient(var(--red),transparent);animation:drop 2s infinite}\n@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}\n\n/* ---------- INDEX ---------- */\n[data-doc="marca-voitto"] .index{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:8px}\n[data-doc="marca-voitto"] .index a{background:var(--black);padding:24px 26px;display:flex;align-items:baseline;gap:18px;transition:background .25s}\n[data-doc="marca-voitto"] .index a:hover{background:var(--graphite)}\n[data-doc="marca-voitto"] .index .ix-n{font-family:var(--mono) !important;font-size:12px;color:var(--red);min-width:26px}\n[data-doc="marca-voitto"] .index .ix-t{font-family:var(--display) !important;font-weight:600;font-size:17px;color:#fff}\n[data-doc="marca-voitto"] .index .ix-d{color:var(--g500);color:var(--g400);font-size:13.5px;margin-top:2px}\n@media(max-width:720px){[data-doc="marca-voitto"] .index{grid-template-columns:1fr}}\n\n/* ---------- GENERIC GRID/CARD ---------- */\n[data-doc="marca-voitto"] .grid{display:grid;gap:20px}\n[data-doc="marca-voitto"] .g2{grid-template-columns:repeat(2,1fr)}\n[data-doc="marca-voitto"] .g3{grid-template-columns:repeat(3,1fr)}\n[data-doc="marca-voitto"] .g4{grid-template-columns:repeat(4,1fr)}\n@media(max-width:860px){[data-doc="marca-voitto"] .g3, [data-doc="marca-voitto"] .g4{grid-template-columns:repeat(2,1fr)}[data-doc="marca-voitto"] .g2{grid-template-columns:1fr}}\n@media(max-width:560px){[data-doc="marca-voitto"] .g3, [data-doc="marca-voitto"] .g4, [data-doc="marca-voitto"] .g2{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .card{background:var(--graphite);border:1px solid var(--line);border-radius:14px;padding:28px}\n[data-doc="marca-voitto"] .card.soft{background:linear-gradient(180deg,var(--graphite),var(--ink))}\n[data-doc="marca-voitto"] .card h4{margin-bottom:6px}\n[data-doc="marca-voitto"] .card p{font-size:15px;color:var(--g300)}\n[data-doc="marca-voitto"] .card .num-big{font-family:var(--display) !important;font-weight:900;font-size:46px;color:#fff;line-height:1;letter-spacing:-.03em}\n[data-doc="marca-voitto"] .card .num-big span{color:var(--red)}\n[data-doc="marca-voitto"] .card .num-lab{font-family:var(--mono) !important;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);margin-top:10px}\n\n[data-doc="marca-voitto"] .attr{display:inline-block;font-family:var(--display) !important;font-weight:700;font-size:14px;color:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;margin:0 8px 10px 0;background:var(--graphite)}\n[data-doc="marca-voitto"] .attr.red{border-color:var(--red-line);color:var(--red)}\n\n/* callout */\n[data-doc="marca-voitto"] .callout{border:1px solid var(--red-line);background:linear-gradient(180deg,var(--red-soft),transparent);border-radius:14px;padding:26px 28px;display:flex;gap:18px;align-items:flex-start}\n[data-doc="marca-voitto"] .callout .bang{font-family:var(--display) !important;font-weight:900;font-size:26px;color:var(--red);line-height:1;flex-shrink:0}\n[data-doc="marca-voitto"] .callout h4{margin-bottom:6px}\n[data-doc="marca-voitto"] .callout p{font-size:15px;color:var(--g300)}\n[data-doc="marca-voitto"] .callout.gold{border-color:rgba(183,28,19,.5)}\n\n/* ---------- COLOR ---------- */\n[data-doc="marca-voitto"] .swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}\n@media(max-width:760px){[data-doc="marca-voitto"] .swatches{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .sw{border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:transform .2s,border-color .2s}\n[data-doc="marca-voitto"] .sw:hover{transform:translateY(-3px);border-color:var(--red-line)}\n[data-doc="marca-voitto"] .sw-chip{height:128px;display:flex;align-items:flex-end;padding:14px;position:relative}\n[data-doc="marca-voitto"] .sw-chip .copy{position:absolute;top:12px;right:14px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}\n[data-doc="marca-voitto"] .sw-name{font-family:var(--display) !important;font-weight:800;font-size:16px}\n[data-doc="marca-voitto"] .sw-body{background:var(--graphite);padding:16px 18px}\n[data-doc="marca-voitto"] .sw-row{display:flex;justify-content:space-between;font-family:var(--mono) !important;font-size:12px;color:var(--g300);padding:5px 0;border-bottom:1px solid var(--line-2)}\n[data-doc="marca-voitto"] .sw-row:last-child{border-bottom:none}\n[data-doc="marca-voitto"] .sw-row span:first-child{color:var(--g500);color:var(--g400)}\n[data-doc="marca-voitto"] .sw-row span:last-child{color:#fff}\n[data-doc="marca-voitto"] .scale{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:18px}\n[data-doc="marca-voitto"] .scale div{height:78px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.04em}\n@media(max-width:620px){[data-doc="marca-voitto"] .scale{grid-template-columns:repeat(4,1fr)}[data-doc="marca-voitto"] .scale div{height:64px}}\n[data-doc="marca-voitto"] .ratio{display:flex;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:14px;font-family:var(--mono) !important;font-size:11px;letter-spacing:.06em}\n[data-doc="marca-voitto"] .ratio div{display:flex;align-items:center;justify-content:center}\n\n/* ---------- TYPE ---------- */\n[data-doc="marca-voitto"] .type-spec{background:var(--graphite);border:1px solid var(--line);border-radius:16px;overflow:hidden}\n[data-doc="marca-voitto"] .type-row{padding:30px 32px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:flex-end;
1gap:24px;flex-wrap:wrap}\n[data-doc="marca-voitto"] .type-row:last-child{border-bottom:none}\n[data-doc="marca-voitto"] .type-meta{font-family:var(--mono) !important;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);text-align:right;min-width:140px}\n[data-doc="marca-voitto"] .t-display{font-family:var(--display) !important;font-weight:900;font-size:clamp(40px,6vw,72px);color:#fff;letter-spacing:-.03em;line-height:.95}\n[data-doc="marca-voitto"] .t-h2{font-family:var(--display) !important;font-weight:800;font-size:34px;color:#fff;letter-spacing:-.02em}\n[data-doc="marca-voitto"] .t-h3{font-family:var(--display) !important;font-weight:700;font-size:24px;color:#fff}\n[data-doc="marca-voitto"] .t-body{font-family:var(--text) !important;font-weight:400;font-size:18px;color:var(--g200);max-width:48ch}\n[data-doc="marca-voitto"] .t-label{font-family:var(--mono) !important;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--red)}\n[data-doc="marca-voitto"] .t-em{font-family:var(--display) !important;font-weight:800;font-size:28px;color:#fff}\n\n/* ---------- LOGO ---------- */\n[data-doc="marca-voitto"] .logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}\n@media(max-width:680px){[data-doc="marca-voitto"] .logo-grid{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .logo-box{border-radius:14px;border:1px solid var(--line);height:170px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}\n[data-doc="marca-voitto"] .logo-box img{height:36px}\n[data-doc="marca-voitto"] .logo-tag{position:absolute;bottom:12px;left:14px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase}\n[data-doc="marca-voitto"] .ok{color:#7CE38B}[data-doc="marca-voitto"] .bad{color:#FF6B5E}\n[data-doc="marca-voitto"] .mark{position:absolute;top:12px;right:14px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;font-family:var(--display) !important}\n[data-doc="marca-voitto"] .mark.y{background:rgba(124,227,139,.16);color:#7CE38B;border:1px solid rgba(124,227,139,.4)}\n[data-doc="marca-voitto"] .mark.n{background:rgba(255,107,94,.16);color:#FF6B5E;border:1px solid rgba(255,107,94,.4)}\n[data-doc="marca-voitto"] .clear-demo{border:1px dashed var(--red-line);border-radius:14px;padding:36px;display:flex;align-items:center;justify-content:center;background:var(--ink);position:relative}\n[data-doc="marca-voitto"] .clear-demo .pad{border:1px dashed var(--line);padding:30px}\n[data-doc="marca-voitto"] .clear-demo img{height:40px}\n\n/* ---------- DO / DONT ---------- */\n[data-doc="marca-voitto"] .dd{display:grid;grid-template-columns:1fr 1fr;gap:20px}\n@media(max-width:760px){[data-doc="marca-voitto"] .dd{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .dd-col h4{display:flex;align-items:center;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono) !important;margin-bottom:16px}\n[data-doc="marca-voitto"] .dd-col ul{list-style:none}\n[data-doc="marca-voitto"] .dd-col li{padding:11px 0 11px 28px;position:relative;font-size:15px;color:var(--g300);border-bottom:1px solid var(--line-2)}\n[data-doc="marca-voitto"] .dd-col li::before{position:absolute;left:0;top:11px;font-family:var(--display) !important;font-weight:900;font-size:13px}\n[data-doc="marca-voitto"] .do li::before{content:"+";color:#7CE38B}\n[data-doc="marca-voitto"] .dont li::before{content:"â";color:#FF6B5E}\n\n/* ---------- AI / PROMPTS ---------- */\n[data-doc="marca-voitto"] .ai-band{background:linear-gradient(180deg,rgba(183,28,19,.10),transparent 40%)}\n[data-doc="marca-voitto"] .princ{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;margin-top:8px}\n@media(max-width:760px){[data-doc="marca-voitto"] .princ{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .princ .pr{background:var(--black);padding:28px}\n[data-doc="marca-voitto"] .princ .pr .n{font-family:var(--mono) !important;font-size:12px;color:var(--red);margin-bottom:12px}\n[data-doc="marca-voitto"] .princ .pr h4{margin-bottom:8px}\n[data-doc="marca-voitto"] .princ .pr p{font-size:14.5px;color:var(--g300)}\n\n[data-doc="marca-voitto"] .kw-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:4px}\n@media(max-width:760px){[data-doc="marca-voitto"] .kw-wrap{grid-template-columns:1fr}}\n[data-doc="marca-voitto"] .kw{background:var(--graphite);border:1px solid var(--line);border-radius:14px;padding:22px 24px}\n[data-doc="marca-voitto"] .kw .kw-h{font-family:var(--mono) !important;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--red);margin-bottom:14px}\n[data-doc="marca-voitto"] .tag{display:inline-block;font-family:var(--mono) !important;font-size:12px;color:var(--g200);background:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 11px;margin:0 7px 8px 0}\n\n[data-doc="marca-voitto"] .prompt{background:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:20px}\n[data-doc="marca-voitto"] .prompt-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--graphite)}\n[data-doc="marca-voitto"] .prompt-head .ph-l{display:flex;align-items:center;gap:14px}\n[data-doc="marca-voitto"] .prompt-head .fmt{font-family:var(--mono) !important;font-size:11px;color:var(--red);border:1px solid var(--red-line);border-radius:6px;padding:5px 9px;letter-spacing:.06em;white-space:nowrap}\n[data-doc="marca-voitto"] .prompt-head h4{margin:0;font-size:17px}\n[data-doc="marca-voitto"] .prompt-obj{padding:16px 24px;font-size:14px;color:var(--g300);border-bottom:1px solid var(--line-2)}\n[data-doc="marca-voitto"] .prompt-obj b{color:#fff}\n[data-doc="marca-voitto"] .pblock{padding:18px 24px}\n[data-doc="marca-voitto"] .pblock .lbl{font-family:var(--mono) !important;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--g400);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}\n[data-doc="marca-voitto"] .pblock pre{font-family:var(--mono) !important;font-size:13px;line-height:1.65;color:var(--g200);white-space:pre-wrap;word-break:break-word;background:var(--black);border:1px solid var(--line-2);border-radius:10px;padding:16px}\n[data-doc="marca-voitto"] .pblock pre.neg{color:#FFB3AC;border-color:rgba(255,107,94,.18)}\n[data-doc="marca-voitto"] .copy-btn{font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g300);background:var(--graphite-2);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;transition:all .2s}\n[data-doc="marca-voitto"] .copy-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}\n[data-doc="marca-voitto"] .copy-btn.done{background:#1c3d22;color:#7CE38B;border-color:#2c5a34}\n[data-doc="marca-voitto"] .prompt-post{padding:14px 24px;background:var(--graphite);border-top:1px solid var(--line-2);font-size:13.5px;color:var(--g300);display:flex;gap:10px;align-items:flex-start}\n[data-doc="marca-voitto"] .prompt-post .st{color:var(--red);font-family:var(--display) !important;font-weight:900;flex-shrink:0}\n\n/* checklist */\n[data-doc="marca-voitto"] .checklist{background:var(--graphite);border:1px solid var(--line);border-radius:16px;padding:12px 28px}\n[data-doc="marca-voitto"] .checklist .ci{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2)}\n[data-doc="marca-voitto"] .checklist .ci:last-child{border-bottom:none}\n[data-doc="marca-voitto"] .checklist .box{width:22px;height:22px;border:1.6px solid var(--red-line);border-radius:6px;flex-shrink:0;margin-top:2px}\n[data-doc="marca-voitto"] .checklist .ci b{color:#fff;font-weight:600}\n[data-doc="marca-voitto"] .checklist .ci p{font-size:14px;color:var(--g400);margin-top:3px}\n\n/* footer */\n[data-doc="marca-voitto"] .footer{background:var(--ink);border-top:1px solid var(--line);padding:70px 0 50px;margin-top:40px}\n[data-doc="marca-voitto"] .footer-in{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}\n[data-doc="marca-voitto"] .footer img{height:30px;margin-bottom:18px}\n[data-doc="marca-voitto"] .footer .fcorp{font-size:13px;color:var(--g500);color:var(--g400);max-width:42ch;line-height:1.8}\n[data-doc="marca-voitto"] .footer .fcorp b{color:var(--g200)}\n[data-doc="marca-voitto"] .footer-meta{font-family:var(--mono) !important;font-size:11px;color:var(--g500);color:var(--g400);text-align:right;line-height:2}\n[data-doc="marca-voitto"] .footer-meta b{color:#fff}\n\n/* print btn */\n[data-doc="marca-voitto"] .printbar{position:fixed;bottom:26px;right:26px;z-index:90}\n[data-doc="marca-voitto"] .printbar button{font-family:var(--mono) !important;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff;border:none;border-radius:999px;padding:13px 22px;
1cursor:pointer;box-shadow:0 10px 30px rgba(183,28,19,.35);transition:transform .2s}\n[data-doc="marca-voitto"] .printbar button:hover{transform:translateY(-2px)}\n\n/* ---------- READING PROGRESS + SCROLLSPY + MOBILE NAV ---------- */\n[data-doc="marca-voitto"] .progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--red),#E0473C);z-index:200;transition:width .12s linear}\n[data-doc="marca-voitto"] .nav-links a.active{color:#fff;position:relative}\n[data-doc="marca-voitto"] .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--red)}\n[data-doc="marca-voitto"] .menu-fab{display:none}\n@media(max-width:920px){\n [data-doc="marca-voitto"] .menu-fab{display:flex;flex-direction:column;gap:3px;position:fixed;left:18px;bottom:24px;z-index:120;width:52px;height:52px;border-radius:14px;background:var(--graphite-2);border:1px solid var(--line);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.55)}\n [data-doc="marca-voitto"] .menu-fab i{width:18px;height:2px;background:var(--g200);border-radius:2px;display:block}\n [data-doc="marca-voitto"] .menu-fab i:nth-child(2){width:13px;background:var(--red)}\n}\n[data-doc="marca-voitto"] .sheet{position:fixed;inset:0;z-index:300;background:rgba(4,4,4,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}\n[data-doc="marca-voitto"] .sheet.open{opacity:1;visibility:visible}\n[data-doc="marca-voitto"] .sheet-in{position:absolute;right:0;top:0;bottom:0;width:min(84vw,360px);background:var(--ink);border-left:1px solid var(--line);padding:24px 20px 40px;overflow-y:auto;transform:translateX(24px);transition:transform .28s cubic-bezier(.2,.7,.2,1)}\n[data-doc="marca-voitto"] .sheet.open .sheet-in{transform:none}\n[data-doc="marca-voitto"] .sheet-h{font-family:var(--mono) !important;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:4px 0 14px}\n[data-doc="marca-voitto"] .sheet a{display:flex;gap:14px;align-items:baseline;padding:13px 6px;border-bottom:1px solid var(--line-2)}\n[data-doc="marca-voitto"] .sheet a .sn{font-family:var(--mono) !important;font-size:12px;color:var(--red);min-width:24px}\n[data-doc="marca-voitto"] .sheet a .st{font-family:var(--display) !important;font-weight:600;font-size:16px;color:#fff}\n[data-doc="marca-voitto"] .sheet-x{position:absolute;top:14px;right:16px;font-family:var(--mono) !important;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g300);background:var(--graphite);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer}\n[data-doc="marca-voitto"] .sheet-x:hover{color:#fff;border-color:var(--red-line)}\n\n/* ---------- PRINT ---------- */\n@media print{\n @page{margin:10mm}\n [data-doc="marca-voitto"], [data-doc="marca-voitto"]{background:#0A0A0A!important;color:var(--g200)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}\n [data-doc="marca-voitto"] *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}\n [data-doc="marca-voitto"] .nav, [data-doc="marca-voitto"] .printbar, [data-doc="marca-voitto"] .scroll-hint, [data-doc="marca-voitto"] .menu-fab, [data-doc="marca-voitto"] .sheet, [data-doc="marca-voitto"] .progress{display:none!important}\n [data-doc="marca-voitto"] .reveal{opacity:1!important;transform:none!important}\n [data-doc="marca-voitto"] .section{padding:34px 0;break-inside:avoid}\n [data-doc="marca-voitto"] .cover{min-height:auto;page-break-after:always}\n [data-doc="marca-voitto"] .prompt, [data-doc="marca-voitto"] .card, [data-doc="marca-voitto"] .kw, [data-doc="marca-voitto"] .checklist, [data-doc="marca-voitto"] .princ, [data-doc="marca-voitto"] .type-spec, [data-doc="marca-voitto"] figure, [data-doc="marca-voitto"] .sw, [data-doc="marca-voitto"] .logo-box{break-inside:avoid}\n [data-doc="marca-voitto"] a[href]{text-decoration:none}\n}\n@media(max-width:560px){[data-doc="marca-voitto"] .wrap{padding:0 20px}[data-doc="marca-voitto"] .nav-in{padding:0 20px}[data-doc="marca-voitto"] .section{padding:80px 0}[data-doc="marca-voitto"] .sec-head{gap:16px}}\n\n/* alinhamento da nav (.nav-in centralizada) */\n[data-doc="marca-voitto"] .nav-in{max-width:1180px;margin:0 auto;padding-left:32px;padding-right:32px}\n@media(max-width:560px){[data-doc="marca-voitto"] .nav-in{padding-left:20px;padding-right:20px}}\n');function v(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d.Z,{title:"Manual de Marca & Identidade Visual \xb7 Voitto",de
1scription:"Manual de Marca e Identidade Visual da Voitto: paleta, logo, tipografia, fotografia e o guia definitivo para gerar artes fi\xe9is \xe0 marca por IA. Documento interno e confidencial.",url:"https://www.voitto.com.br/marca-voitto",image:"https://files.voitto.com.br/assets/marca-voitto/og.png",noindex:!0}),(0,r.jsxs)(n(),{children:[(0,r.jsx)("meta",{name:"theme-color",content:"#0A0A0A"}),(0,r.jsx)("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),(0,r.jsx)("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),(0,r.jsx)("link",{href:"https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap",rel:"stylesheet"})]}),(0,r.jsx)(c.Z,{slug:"marca-voitto",StyleEl:m,html:'\n<div class="progress" id="progress" aria-hidden="true"></div>\n\n<!-- NAV -->\n<nav class="nav">\n <div class="nav-in">\n <a class="nav-logo" href="#topo"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"></a>\n <div class="nav-links">\n <a href="#marca">01 Marca</a>\n <a href="#logo">02 Logo</a>\n <a href="#cores">03 Cores</a>\n <a href="#tipografia">04 Tipografia</a>\n <a href="#fotografia">05 Foto</a>\n <a href="#grafismos">06 Grafismos</a>\n <a href="#layout">07 Layout</a>\n <a href="#ia">08 IA â
</a>\n <a href="#checklist">09 Checklist</a>\n </div>\n \n </div>\n</nav>\n\n<!-- COVER -->\n<header class="cover wrap" id="topo">\n <div class="cover-top">\n <img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto">\n \n </div>\n <div class="cover-mid">\n <div class="cover-kick">Brand Book \xb7 Edi\xe7\xe3o IA</div>\n <h1 class="cover-title">Manual de<br>Marca <em>&</em><br>Identidade</h1>\n <p class="cover-sub">O padr\xe3o visual da Voitto e o guia definitivo para <b>padronizar a cria\xe7\xe3o de artes por Intelig\xeancia Artificial</b>.</p>\n </div>\n <div class="cover-bot">\n \n <div class="scroll-hint"><span class="ln"></span>Role para come\xe7ar</div>\n </div>\n</header>\n\n<!-- INDEX -->\n<section class="section wrap reveal" style="padding-top:90px">\n <span class="kicker">Sum\xe1rio</span>\n <h2>O que voc\xea vai <em>encontrar</em></h2>\n <p class="lead">Da ess\xeancia da marca \xe0s regras pr\xe1ticas de prompt. As se\xe7\xf5es 01â07 definem o padr\xe3o; a se\xe7\xe3o <strong>08</strong> traduz tudo para a gera\xe7\xe3o por IA.</p>\n <div class="index" style="margin-top:40px">\n <a href="#marca"><span class="ix-n">01</span><span><span class="ix-t">A Marca</span><div class="ix-d">Prop\xf3sito, posicionamento, personalidade e tom de voz</div></span></a>\n <a href="#logo"><span class="ix-n">02</span><span><span class="ix-t">Logotipo</span><div class="ix-d">Vers\xf5es, \xe1rea de prote\xe7\xe3o, usos corretos e proibidos</div></span></a>\n <a href="#cores"><span class="ix-n">03</span><span><span class="ix-t">Paleta de Cores</span><div class="ix-d">Vermelho, preto, branco, escala de cinzas e propor\xe7\xf5es</div></span></a>\n <a href="#tipografia"><span class="ix-n">04</span><span><span class="ix-t">Tipografia</span><div class="ix-d">Fam\xedlias, hierarquia e a regra do it\xe1lico de \xeanfase</div></span></a>\n <a href="#fotografia"><span class="ix-n">05</span><span><span class="ix-t">Estilo Fotogr\xe1fico</span><div class="ix-d">Fotos reais da Voitto primeiro; IA s\xf3 quando faltar</div></span></a>\n <a href="#grafismos"><span class="ix-n">06</span><span><span class="ix-t">\xcdcones & Grafismos</span><div class="ix-d">Estilo de \xedcones, formas de apoio e selos</div></span></a>\n <a href="#layout"><span class="ix-n">07</span><span><span class="ix-t">Composi\xe7\xe3o</span><div class="ix-d">Grid, respiro, hierarquia e uso das estat\xedsticas</div></span></a>\n <a href="#ia" style="background:linear-gradient(90deg,rgba(183,28,19,.10),var(--black))"><span class="ix-n">08</span><span><span class="ix-t" style="color:var(--red)">Diretrizes para IA â
</span><div class="ix-d">Princ\xedpios, descritores, prompts prontos e fluxo</div></span></a>\n <a href="#checklist"><span class="ix-n">09</span><span><span class="ix-t">Checklist de Aprova\xe7\xe3o</span><div class="ix-d">A verifica\xe7\xe3o final antes de publicar qualquer arte</div></span></a>\n <a href="#naofaca"><span class="ix-n">10</span><span><span class="ix-t">Nunca Fa\xe7a</span><div class="ix-d">As proibi\xe7\xf5es absolutas, em uma s\xf3 lista</div></span></a>\n </div>\n</section>\n\n<!-- 01 MARCA -->\n<section class="section wrap" id="marca">\n <div class="sec-head reveal">\n <div class="sec-num">01</div>\n <div>
1\n <span class="kicker">A Marca</span>\n <h2>Conhecimento que<br>vira <em>resultado</em></h2>\n <p class="lead">Antes de qualquer cor ou fonte, a arte precisa carregar a ess\xeancia: m\xe9todo pr\xe1tico, direto ao ponto, de quem \xe9 refer\xeancia nacional em Lean Seis Sigma. Toda imagem deve <strong>parecer Voitto</strong> mesmo sem o logo.</p>\n </div>\n </div>\n\n <figure class="reveal" style="border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink);margin:4px 0 26px">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-03.jpg" alt="O time Voitto na sede" loading="lazy" style="width:100%;height:clamp(260px,42vw,460px);object-fit:cover;object-position:center 40%;display:block;background:var(--graphite)">\n <figcaption style="padding:14px 18px;font-family:var(--mono) !important;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);border-top:1px solid var(--line-2)">O time Voitto na sede â <span style="color:var(--g200)">a arte parece Voitto mesmo sem o logo</span></figcaption>\n </figure>\n\n <div class="grid g2 reveal" style="margin-bottom:20px">\n <div class="card soft">\n <h4>Prop\xf3sito</h4>\n <p>Ser a escola de habilidades para o mercado de trabalho â transformar conhecimento em resultado real na carreira e nas empresas, com m\xe9todo autoral e aplica\xe7\xe3o pr\xe1tica.</p>\n </div>\n <div class="card soft">\n <h4>Posicionamento</h4>\n <p>A refer\xeancia nacional em Lean Seis Sigma. Do primeiro curso ao Black Belt, com metodologia autoral de Thiago Coutinho â Master Black Belt e autor do <em>Guia Pr\xe1tico Lean Seis Sigma</em> (Grupo GEN).</p>\n </div>\n </div>\n\n <div class="card reveal" style="margin-bottom:20px">\n <h4 style="margin-bottom:18px">Personalidade da marca</h4>\n <span class="attr red">Pr\xe1tica</span><span class="attr red">Direta ao ponto</span><span class="attr">Confi\xe1vel</span><span class="attr">Confiante</span><span class="attr">Orientada a resultado</span><span class="attr">Acess\xedvel</span><span class="attr">Profissional</span>\n <p style="margin-top:16px">A arte \xe9 confiante, mas nunca arrogante. Premium, mas nunca distante. Limpa e objetiva â reflexo da metodologia que ensinamos.</p>\n </div>\n\n <div class="grid g2 reveal" style="margin-bottom:30px">\n <div class="card">\n <h4>Tom de voz (e como ele aparece na arte)</h4>\n <p>Direto, encorajador e sem jarg\xe3o vazio. O texto destaca <strong>1 a 3 palavras-chave em it\xe1lico</strong> por frase â esse \xe9 um tra\xe7o verbal e visual da marca. Frases curtas, verbos de a\xe7\xe3o, foco em aplica\xe7\xe3o e resultado.</p>\n </div>\n <div class="card">\n <h4>Promessa central</h4>\n <p style="font-family:var(--display) !important;font-weight:800;font-size:26px;color:#fff;letter-spacing:-.02em;line-height:1.1">"Conhecimento que <span style="color:var(--red)">vira resultado</span>."</p>\n <p style="margin-top:12px">Do treinamento ao certificado. Certifica\xe7\xe3o inclusa, sem cobran\xe7as extras, garantia de 30 dias.</p>\n </div>\n </div>\n\n <span class="kicker reveal">Provas sociais \xb7 valores travados</span>\n <p class="reveal" style="color:var(--g400);font-size:15px;margin-bottom:22px;max-width:62ch">Estes n\xfameros s\xe3o <strong style="color:#fff">fixos</strong> em toda comunica\xe7\xe3o. Quando aparecerem em uma arte, use exatamente esta grafia â nunca arredonde para baixo nem invente novos n\xfameros.</p>\n <div class="grid g4 reveal">\n <div class="card"><div class="num-big">18</div><div class="num-lab">anos de hist\xf3ria</div></div>\n <div class="card"><div class="num-big"><span>+</span>700<span style="font-size:26px"> mil</span></div><div class="num-lab">alunos formados</div></div>\n <div class="card"><div class="num-big"><span>+</span>4<span style="font-size:21px"> milh\xf5es</span></div><div class="num-lab">certificados emitidos</div></div>\n <div class="card"><div class="num-big"><span>+</span>500</div><div class="num-lab">empresas atendidas</div></div>\n </div>\n <div class="reveal" style="margin-top:18px;font-family:var(--mono) !important;font-size:12.5px;color:var(--g400);letter-spacing:.02em;line-height:1.7">Grafia oficial travada â use sempre assim: <span style="color:#fff">18 anos \xb7 +700 mil alunos \xb7 +4 milh\xf5es de certificados \xb7 +500 empresas</span>.</div>\n</section>\n\n<!-- 02 LOGO -->\n<section class="section wrap" id="logo">\n <div class="sec-head reveal">\n <div class="sec-num">02</div>\n <div>
1\n <span class="kicker">Logotipo</span>\n <h2>Uma marca, <em>sempre clara</em></h2>\n <p class="lead">O logotipo \xe9 a assinatura â nunca deve ser recriado, redesenhado ou gerado por IA. Use sempre o arquivo oficial. A vers\xe3o principal \xe9 o wordmark branco sobre fundos escuros.</p>\n </div>\n </div>\n\n <div class="logo-grid reveal" style="margin-bottom:20px">\n <div class="logo-box" style="background:var(--black)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"><span class="logo-tag ok">Preferencial \xb7 branco sobre preto</span><span class="mark y">â</span></div>\n <div class="logo-box" style="background:var(--red)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"><span class="logo-tag ok" style="color:#fff">Branco sobre vermelho</span><span class="mark y">â</span></div>\n <div class="logo-box" style="background:var(--graphite)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"><span class="logo-tag ok">Branco sobre grafite</span><span class="mark y">â</span></div>\n <div class="logo-box" style="background:#0d0d0d;background-image:radial-gradient(circle at 30% 40%,#333,#0a0a0a)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"><span class="logo-tag ok">Sobre fundo escuro texturizado</span><span class="mark y">â</span></div>\n </div>\n\n <div class="callout reveal" style="margin-bottom:30px">\n <div class="bang">!</div>\n <div>\n <h4>Fundos claros</h4>\n <p>O logo branco <strong>nunca</strong> vai sobre fundo claro. Em pe\xe7as de fundo branco/claro, utilize a vers\xe3o em <strong>preto</strong> do logotipo, mostrada abaixo. Na d\xfavida, prefira o fundo escuro â \xe9 o territ\xf3rio natural da marca.</p>\n </div>\n </div>\n\n <div class="logo-grid reveal" style="margin:0 0 30px">\n <div class="logo-box" style="background:#ffffff"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-black.png" alt="Vers\xe3o preta do logo Voitto sobre fundo branco (uso correto)"><span class="logo-tag ok">Preto sobre branco</span><span class="mark y">â</span></div>\n <div class="logo-box" style="background:#EDEDED"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-black.png" alt="Vers\xe3o preta do logo Voitto sobre cinza claro (uso correto)"><span class="logo-tag ok">Preto sobre cinza claro</span><span class="mark y">â</span></div>\n </div>\n\n <div class="grid g2 reveal" style="margin-bottom:20px">\n <div>\n <h3>\xc1rea de prote\xe7\xe3o</h3>\n <p style="font-size:15px;color:var(--g300);margin-bottom:16px">Mantenha ao redor do logo uma margem livre equivalente \xe0 <strong>altura da letra "V"</strong>. Nada â texto, foto, borda ou outro elemento â invade essa zona.</p>\n <div class="clear-demo"><div class="pad"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto"></div></div>\n </div>\n <div>\n <h3>Tamanho m\xednimo & arquivo</h3>\n <p style="font-size:15px;color:var(--g300);margin-bottom:16px">Para garantir legibilidade: <strong>⥠24 px</strong> de altura em telas e <strong>⥠10 mm</strong> em impressos. Abaixo disso, a marca perde nitidez.</p>\n <div class="card" style="background:var(--ink)">\n <div class="pblock" style="padding:0">\n <div class="lbl" style="margin-bottom:8px">Arquivo oficial (branco)</div>\n <pre style="font-size:12px">https://files.voitto.com.br/assets/voitto-white-full.png</pre>\n </div>\n <p style="font-size:13px;color:var(--g400);margin-top:12px">PNG transparente, em duas vers\xf5es â <strong>branca</strong> para fundos escuros (padr\xe3o) e <strong>preta</strong> para fundos claros. \xc9 o \xfanico logo que entra nas artes. Em gera\xe7\xe3o por IA, ele \xe9 aplicado <strong>depois</strong>, na edi\xe7\xe3o â nunca dentro do prompt.</p>\n </div>\n </div>\n </div>\n\n <h3 class="reveal" style="margin-top:14px">Usos incorretos</h3>\n <div class="logo-grid reveal" style="margin-top:16px">\n <div class="logo-box" style="background:var(--black)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Exemplo incorreto: logo esticado/distorcido" style="transform:scale
1X(1.5)"><span class="logo-tag bad">N\xe3o distorcer / esticar</span><span class="mark n">â</span></div>\n <div class="logo-box" style="background:var(--black)"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Exemplo incorreto: logo rotacionado" style="transform:rotate(-8deg);opacity:.85"><span class="logo-tag bad">N\xe3o rotacionar</span><span class="mark n">â</span></div>\n <div class="logo-box" style="background:#EDEDED"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Exemplo incorreto: logo branco em fundo claro"><span class="logo-tag bad" style="color:#b00">N\xe3o usar branco em fundo claro</span><span class="mark n">â</span></div>\n <div class="logo-box" style="background-image:url(\'data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2220%22 height=%2220%22 fill=%22%23444%22/><rect x=%2220%22 y=%2220%22 width=%2220%22 height=%2220%22 fill=%22%23444%22/></svg>\');background-color:#777"><img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Exemplo incorreto: logo sobre fundo polu\xeddo"><span class="logo-tag bad">N\xe3o aplicar sobre fundo polu\xeddo</span><span class="mark n">â</span></div>\n </div>\n <p class="reveal" style="font-size:14px;color:var(--g400);margin-top:18px;max-width:64ch">Tamb\xe9m \xe9 proibido: recolorir o logo (fora de branco/preto), aplicar sombras, contornos, gradientes ou brilhos, recriar o wordmark com outra fonte, ou reduzi-lo abaixo do tamanho m\xednimo.</p>\n</section>\n\n<!-- 03 CORES -->\n<section class="section wrap" id="cores">\n <div class="sec-head reveal">\n <div class="sec-num">03</div>\n <div>
1\n <span class="kicker">Paleta de Cores</span>\n <h2>Preto, branco e<br>uma <em>fagulha</em> vermelha</h2>\n <p class="lead">A paleta \xe9 enxuta de prop\xf3sito: quanto mais restrita, mais consistente fica a sa\xedda da IA. O vermelho \xe9 tempero, n\xe3o prato principal â usado como acento de impacto sobre uma base neutra.</p>\n </div>\n </div>\n\n <span class="kicker reveal">Cor prim\xe1ria \xb7 novo padr\xe3o</span>\n <p class="reveal" style="font-size:14.5px;color:var(--g300);margin:0 0 20px;max-width:66ch">O <strong>vermelho profundo</strong> passa a ser o padr\xe3o oficial da marca â mais s\xf3brio, premium e de alto contraste sobre fundos escuros. <span class="deprec-note">Substitui a vers\xe3o mais clara usada anteriormente no site â o antigo <b style="color:#fff">#E1251B</b> fica descontinuado e deve ser migrado para este tom.</span></p>\n <div class="swatches reveal" style="margin-bottom:34px">\n <div class="sw" data-hex="#B71C13">\n <div class="sw-chip" style="background:#B71C13;color:#fff"><span class="copy">clique p/ copiar</span><span class="sw-name">Vermelho Voitto</span></div>\n <div class="sw-body">\n <div class="sw-row"><span>HEX</span><span>#B71C13</span></div>\n <div class="sw-row"><span>RGB</span><span>183 \xb7 28 \xb7 19</span></div>\n <div class="sw-row"><span>CMYK</span><span>0 \xb7 85 \xb7 90 \xb7 28</span></div>\n <div class="sw-row"><span>Pantone â</span><span>1805 C</span></div>\n </div>\n </div>\n <div class="sw" data-hex="#921610">\n <div class="sw-chip" style="background:#921610;color:#fff"><span class="copy">clique p/ copiar</span><span class="sw-name">Vermelho Escuro</span></div>\n <div class="sw-body">\n <div class="sw-row"><span>HEX</span><span>#921610</span></div>\n <div class="sw-row"><span>RGB</span><span>146 \xb7 22 \xb7 16</span></div>\n <div class="sw-row"><span>USO</span><span>sombra \xb7 hover \xb7 profundidade</span></div>\n <div class="sw-row"><span>NOTA</span><span>apoio do prim\xe1rio</span></div>\n </div>\n </div>\n </div>\n\n <span class="kicker reveal">Cores de base</span>\n <div class="swatches reveal" style="margin-bottom:28px">\n <div class="sw" data-hex="#111111">\n <div class="sw-chip" style="background:#111111;color:#fff;border-bottom:1px solid var(--line)"><span class="copy">clique p/ copiar</span><span class="sw-name">Preto Voitto</span></div>\n <div class="sw-body">\n <div class="sw-row"><span>HEX</span><span>#111111</span></div>\n <div class="sw-row"><span>RGB</span><span>17 \xb7 17 \xb7 17</span></div>\n <div class="sw-row"><span>USO</span><span>fundos \xb7 textos \xb7 territ\xf3rio da marca</span></div>\n </div>\n </div>\n <div class="sw" data-hex="#FFFFFF">\n <div class="sw-chip" style="background:#FFFFFF;color:#111"><span class="copy" style="color:#999">clique p/ copiar</span><span class="sw-name">Branco</span></div>\n <div class="sw-body">\n <div class="sw-row"><span>HEX</span><span>#FFFFFF</span></div>\n <div class="sw-row"><span>RGB</span><span>255 \xb7 255 \xb7 255</span></div>\n <div class="sw-row"><span>USO</span><span>respiro \xb7 textos sobre escuro \xb7 logo</span></div>\n </div>\n </div>\n </div>\n\n <span class="kicker reveal">Escala de cinzas (neutros de apoio)</span>\n <div class="scale reveal">\n <div style="background:#1F1F1F;color:#fff">#1F1F1F</div>\n <div style="background:#333333;color:#fff">#333333</div>\n <div style="background:#595959;color:#fff">#595959</div>\n <div style="background:#8C8C8C;color:#111">#8C8C8C</div>\n <div style="background:#B8B8B8;color:#111">#B8B8B8</div>\n <div style="background:#D9D9D9;color:#111">#D9D9D9</div>\n <div style="background:#F2F2F2;color:#111">#F2F2F2</div>\n </div>\n <p class="reveal" style="font-size:14px;color:var(--g400);margin-top:14px;max-width:64ch">Os cinzas estruturam textos secund\xe1rios, linhas, fundos e profundidade. <strong>Nunca</strong> introduza azul, verde, roxo, amarelo ou gradientes coloridos â eles quebram a identidade na hora.</p>\n\n <h3 class="reveal" style="margin-top:46px">Propor\xe7\xe3o de uso \xb7 regra 70/25/5</h3>\n <div class="ratio reveal">\n <div style="background:#111;color:#fff;flex:70">70% \xb7 Preto / Branco</div>\n <div style="background:#595959;color:#fff;flex:25">25% \xb7 Cinzas</div>\n <div style="background:var(--red);color:#fff;flex:5">5%</div>\n </div>\n <p class="reveal" style="font-size:14px;color:var(--g400);margin-top:14px;max-width:64ch">Base neutra dominante (preto/branco), cinzas para estrutura e respiro, e o vermelho concentrado em <strong>~5%</strong> da pe\xe7a â no ponto focal, num grafismo ou num n\xfamero de impacto. Se o vermelho domina, a pe\xe7a parou de ser Voitto.</p>\n</section>\n\n<!-- 04 TIPOGRAFIA -->\n<section class="section wrap" id="tipografia">\n <div class="sec-head reveal">\n <div class="sec-num">04</div>\n <div>
1\n <span class="kicker">Tipografia</span>\n <h2>Estrutura, for\xe7a e <em>\xeanfase</em></h2>\n <p class="lead">Uma sans-serif geom\xe9trica e confiante para t\xedtulos e n\xfameros; uma sans-serif humanista e limpa para leitura. A combina\xe7\xe3o transmite precis\xe3o (Lean) com acessibilidade.</p>\n </div>\n </div>\n\n <div class="grid g2 reveal" style="margin-bottom:24px">\n <div class="card soft">\n <span class="t-label">Tipo de exibi\xe7\xe3o \xb7 T\xedtulos & n\xfameros</span>\n <div style="font-family:var(--display) !important;font-weight:900;font-size:54px;color:#fff;letter-spacing:-.03em;line-height:1;margin:14px 0 6px">Archivo</div>\n <p>Pesos 700â900. Estruturada e industrial â usada em t\xedtulos, chamadas e nas estat\xedsticas de impacto. Tracking negativo nos grandes tamanhos.</p>\n </div>\n <div class="card soft">\n <span class="t-label">Tipo de texto \xb7 Corpo & interface</span>\n <div style="font-family:var(--text) !important;font-weight:600;font-size:54px;color:#fff;letter-spacing:-.01em;line-height:1;margin:14px 0 6px">Hanken Grotesk</div>\n <p>Pesos 400â600. Humanista, neutra e altamente leg\xedvel para textos, legendas e descri\xe7\xf5es. O par de leitura da marca.</p>\n </div>\n </div>\n\n <div class="type-spec reveal" style="margin-bottom:24px">\n <div class="type-row"><div class="t-display">Aa Bb 0123</div><div class="type-meta">Archivo Black 900<br>Display / Hero</div></div>\n <div class="type-row"><div class="t-h2">T\xedtulo de se\xe7\xe3o</div><div class="type-meta">Archivo 800<br>H2</div></div>\n <div class="type-row"><div class="t-h3">Subt\xedtulo de bloco</div><div class="type-meta">Archivo 700<br>H3</div></div>\n <div class="type-row"><div class="t-body">Texto de leitura confort\xe1vel, com boa altura de linha e contraste â direto ao ponto, sem ru\xeddo.</div><div class="type-meta">Hanken 400<br>Corpo</div></div>\n <div class="type-row"><div class="t-label">R\xd3TULO T\xc9CNICO / KICKER</div><div class="type-meta">Mono \xb7 mai\xfasculas<br>tracking +0.14em</div></div>\n </div>\n\n <div class="callout reveal gold">\n <div class="bang">i</div>\n <div>\n <h4>A regra do it\xe1lico de \xeanfase</h4>\n <p>Tra\xe7o de marca: em cada frase de destaque, <strong>1 a 3 palavras-chave</strong> ganham <em>it\xe1lico</em> â frequentemente em vermelho quando sobre fundo escuro. Ex.: "Escolha o caminho certo para a <em>sua carreira</em>". Use com parcim\xf4nia: it\xe1lico em tudo anula o efeito.</p>\n </div>\n </div>\n\n <div class="grid g2 reveal" style="margin-top:24px">\n <div class="card">\n <h4>Hierarquia em uma arte</h4>\n <p>1 t\xedtulo forte (Archivo) â 1 apoio curto (Hanken) â 1 chamada de a\xe7\xe3o. Nunca mais de um n\xedvel de destaque competindo pela aten\xe7\xe3o.</p>\n </div>\n <div class="card">\n <h4>Fallback & substitutas</h4>\n <p>Onde Archivo/Hanken n\xe3o estiverem dispon\xedveis (ex.: documentos internos): <strong>Arial</strong> como substituta universal. Para web/social, sempre as oficiais.</p>\n </div>\n </div>\n</section>\n\n<!-- 05 FOTOGRAFIA -->\n<section class="section wrap" id="fotografia">\n <div class="sec-head reveal">\n <div class="sec-num">05</div>\n <div>
1\n <span class="kicker">Estilo Fotogr\xe1fico</span>\n <h2>Pessoas reais,<br>resultados <em>reais</em></h2>\n <p class="lead">A fotografia Voitto mostra profissionais brasileiros de verdade â diversos, confiantes e em contexto de trabalho. Nada de banco de imagens gen\xe9rico, sorriso for\xe7ado ou clich\xea corporativo.</p>\n </div>\n </div>\n\n <div class="grid g3 reveal" style="margin-bottom:24px">\n <div class="card"><h4>Quem</h4><p>Profissionais brasileiros, diversidade real de g\xeanero, etnia e idade â de estagi\xe1rios a diretores. Aspiracionais e cr\xedveis, nunca modelos artificiais.</p></div>\n <div class="card"><h4>Onde</h4><p>Escrit\xf3rios modernos, ch\xe3o de f\xe1brica, ambientes industriais e corporativos. O contexto Lean Seis Sigma (processo, ind\xfastria, dados) \xe9 bem-vindo.</p></div>\n <div class="card"><h4>Express\xe3o</h4><p>Foco, confian\xe7a e a\xe7\xe3o. Olhar de quem aplica o que aprendeu â jamais a alegria encenada de stock photo.</p></div>\n </div>\n\n <div class="dd reveal" style="margin-bottom:24px">\n <div class="dd-col do card">\n <h4 class="ok">Buscar</h4>\n <ul>\n <li>Ilumina\xe7\xe3o natural, suave e <strong>direcional</strong>; sombras controladas</li>\n <li>Alto contraste com base de cor neutra (preto/branco/cinza)</li>\n <li>Um elemento <strong>vermelho</strong> no quadro quando poss\xedvel (EPI, detalhe, objeto)</li>\n <li>Espa\xe7o negativo generoso para entrar texto depois</li>\n <li>Profundidade de campo (foco no sujeito, fundo suave)</li>\n <li>Enquadramento editorial, ponto focal claro</li>\n </ul>\n </div>\n <div class="dd-col dont card">\n <h4 class="bad">Evitar</h4>\n <ul>\n <li>Cara de banco de imagens, sorriso falso, "aperto de m\xe3os" clich\xea</li>\n <li>O <strong>azul corporativo</strong> clich\xea e a superexposi\xe7\xe3o saturada</li>\n <li>Cenas polu\xeddas, excesso de elementos competindo</li>\n <li>Pessoas olhando para gr\xe1ficos flutuantes / HUDs futuristas falsos</li>\n <li>Filtros pesados, HDR exagerado, vinhetas dram\xe1ticas</li>\n <li>M\xe3os e rostos distorcidos (aten\xe7\xe3o redobrada em IA)</li>\n </ul>\n </div>\n </div>\n\n <div class="card reveal">\n <h4>Tratamento de cor (color grading)</h4>\n <p>Base levemente dessaturada e contrastada, pretos densos, pele natural. A pe\xe7a vive em preto e branco com <strong>pontua\xe7\xf5es de vermelho</strong>. Evite virar para azul/verde. O objetivo \xe9 parecer premium e real â n\xe3o "stock corporativo".</p>\n </div>\n\n <!-- BANCO DE REFERENCIAS FOTOGRAFICAS -->\n <div style="margin-top:60px" class="reveal">\n <span class="kicker">Banco de imagens da marca</span>\n <h3 style="font-family:var(--display) !important;font-weight:800;font-size:clamp(24px,3.4vw,34px);color:#fff;letter-spacing:-.02em;margin-bottom:12px">Primeiro as fotos <em style="color:var(--red)">reais</em>. IA s\xf3 quando faltar.</h3>\n <p style="font-size:16px;color:var(--g300);max-width:68ch;line-height:1.55">A Voitto tem um acervo pr\xf3prio de fotos oficiais â comece sempre por ele. Quando nenhuma foto real servir, recorra \xe0s cenas-modelo de IA como dire\xe7\xe3o para gerar uma imagem no mesmo padr\xe3o da marca.</p>\n </div>\n\n <!-- ====== BIBLIOTECA DE FOTOS OFICIAIS DA VOITTO ====== -->\n <span class="kicker reveal">Biblioteca de fotos oficiais</span>\n <h3 class="reveal" style="font-family:var(--display) !important;font-weight:800;font-size:clamp(24px,3.4vw,34px);color:#fff;letter-spacing:-.02em;margin-bottom:12px">O acervo <em style="color:var(--red)">real</em> da Voitto</h3>\n <p class="reveal" style="font-size:16px;color:var(--g300);max-width:68ch;line-height:1.55">Estas s\xe3o fotos oficiais da pr\xf3pria Voitto â fundador, time, sede e produto. Sempre que um material pedir imagem de pessoas, <strong style="color:#fff">comece por estas fotos reais</strong>. A gera\xe7\xe3o por IA \xe9 o \xfaltimo recurso, s\xf3 quando nenhuma foto real servir.</p>\n\n <div class="callout reveal" style="margin:22px 0 6px;border-color:var(--red-line)">\n <div class="bang" style="background:var(--red);color:#fff">â
</div>\n <div>\n <h4>Regra de ouro</h4>\n <p>Toda foto de pessoa numa pe\xe7a Voitto precisa ser uma <strong>foto real da Voitto</strong>. Nunca use banco de imagens, rostos gen\xe9ricos ou pessoas que n\xe3o sejam da Voitto.</p>\n </div>\n </div>\n <div class="reveal" style="margin-top:50px;margin-bottom:18px">\n <span class="kicker">
1Fundador & autoridade</span>\n <h4 style="font-family:var(--display) !important;font-weight:800;font-size:clamp(19px,2.4vw,24px);color:#fff;letter-spacing:-.01em;margin-top:6px">Thiago Coutinho e a refer\xeancia da marca</h4>\n </div>\n <div class="grid g3 reveal">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-15.jpg" alt="Thiago Coutinho no UP Summit" loading="lazy" style="width:100%;height:360px;object-fit:cover;object-position:center 20%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Thiago Coutinho \xb7 UP Summit</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-16.jpg" alt="Thiago com o Guia Lean Seis Sigma" loading="lazy" style="width:100%;height:360px;object-fit:cover;object-position:center 16%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Autoridade \xb7 Guia Lean Seis Sigma</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-17.jpg" alt="Fundador na sede Voitto" loading="lazy" style="width:100%;height:360px;object-fit:cover;object-position:center 18%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">O fundador na sede Voitto</figcaption>\n </figure>\n </div>\n <div class="grid g2 reveal" style="margin-top:16px">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-18.jpg" alt="Thiago estudando na sede" loading="lazy" style="width:100%;height:320px;object-fit:cover;object-position:center 26%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Bastidores \xb7 m\xe9todo autoral</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-19.jpg" alt="Thiago lendo o livro" loading="lazy" style="width:100%;height:320px;object-fit:cover;object-position:center 20%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Estudo \xb7 conte\xfado direto ao ponto</figcaption>\n </figure>\n </div>\n <div style="margin-top:16px">\n <figure class="reveal" style="border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink);margin:0 0 16px">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-20.jpg" alt="Grava\xe7\xe3o de conte\xfado Voitto" loading="lazy" style="width:100%;height:clamp(240px,30vw,300px);object-fit:cover;object-position:center 34%;display:block;background:var(--graphite)">\n <figcaption style="padding:14px 18px;font-family:var(--mono) !important;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);border-top:1px solid var(--line-2)">Produ\xe7\xe3o de conte\xfado \xb7 grava\xe7\xe3o na sede</figcaption>\n </figure>\n </div>\n <div class="reveal" style="margin-top:50px;margin-bottom:18px">\n <span class="kicker">Time & cultura</span>\n <h4 style="font-family:var(--display) !important;font-weight:800;font-size:clamp(19px,2.4vw,24px);color:#fff;letter-spacing:-.01em;margin-top:6px">Pessoas reais, energia real</h4>\n </div>\n <figure class="reveal" style="border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink);margin:0 0 16px">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-21.jpg" alt="O time Voitto" loading="lazy" style="width:100%;height:clamp(260px,42vw,400px);object-fit:cover;object-position:center 42%;display:block;background:var(--graphite)">\n <figcaption style="padding:14px 18px;font-family:var(--mono) !important;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);border-top:1px solid var(--line-2)">O time Voitto</figcaption>\n </figure>\n <div class="grid g3 reveal">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-22.jpg" alt="Time comemora o lan\xe7amento do livro" loading="lazy" style="width:100%;height:240px;object-fit:cover;object-position:center 44%;display:block;background:var(--graphite)">
1\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Cultura \xb7 celebra\xe7\xe3o do time</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-23.jpg" alt="Time Voitto no lan\xe7amento" loading="lazy" style="width:100%;height:240px;object-fit:cover;object-position:center 40%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Time \xb7 lan\xe7amento do livro</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-24.jpg" alt="Rotina de trabalho na Voitto" loading="lazy" style="width:100%;height:240px;object-fit:cover;object-position:center 46%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Rotina \xb7 foco e energia</figcaption>\n </figure>\n </div>\n <div class="grid g2 reveal" style="margin-top:16px">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-25.jpg" alt="Thiago em mentoria com o time" loading="lazy" style="width:100%;height:330px;object-fit:cover;object-position:center 26%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Mentoria \xb7 do m\xe9todo \xe0 pr\xe1tica</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-26.jpg" alt="Colaboradores estudando" loading="lazy" style="width:100%;height:330px;object-fit:cover;object-position:center 28%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Conhecimento aplicado</figcaption>\n </figure>\n </div>\n <div class="reveal" style="margin-top:50px;margin-bottom:18px">\n <span class="kicker">Produto, m\xe9todo & detalhes</span>\n <h4 style="font-family:var(--display) !important;font-weight:800;font-size:clamp(19px,2.4vw,24px);color:#fff;letter-spacing:-.01em;margin-top:6px">O m\xe9todo que vira resultado</h4>\n </div>\n <div class="grid g3 reveal">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-27.jpg" alt="Caneca Voitto: a execu\xe7\xe3o transforma" loading="lazy" style="width:100%;height:340px;object-fit:cover;object-position:center 58%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">A execu\xe7\xe3o transforma o sonho em realidade</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-28.jpg" alt="Excel aplicado a neg\xf3cios" loading="lazy" style="width:100%;height:340px;object-fit:cover;object-position:center 45%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Excel aplicado \xb7 dados que viram decis\xe3o</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-29.jpg" alt="MBAs Voitto no celular" loading="lazy" style="width:100%;height:340px;object-fit:cover;object-position:center 42%;display:block;background:var(--graphite)">
1\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">MBAs Voitto \xb7 experi\xeancia mobile</figcaption>\n </figure>\n </div>\n <div class="reveal" style="margin-top:50px;margin-bottom:18px">\n <span class="kicker">Ambiente & sede</span>\n <h4 style="font-family:var(--display) !important;font-weight:800;font-size:clamp(19px,2.4vw,24px);color:#fff;letter-spacing:-.01em;margin-top:6px">O territ\xf3rio da marca</h4>\n </div>\n <div class="grid g2 reveal" style="margin-bottom:40px">\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-30.jpg" alt="Est\xfadio de grava\xe7\xe3o na sede Voitto" loading="lazy" style="width:100%;height:280px;object-fit:cover;object-position:center 50%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Sede \xb7 est\xfadio de grava\xe7\xe3o</figcaption>\n </figure>\n <figure style="border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink);margin:0">\n <img src="https://files.voitto.com.br/assets/marca-voitto/foto-31.jpg" alt="Fachada da sede Voitto" loading="lazy" style="width:100%;height:280px;object-fit:cover;object-position:center 50%;display:block;background:var(--graphite)">\n <figcaption style="padding:13px 15px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)">Sede Voitto \xb7 Matias Barbosa/MG</figcaption>\n </figure>\n </div>\n\n <!-- grid de cenas IA (fallback) -->\n <div class="callout reveal" style="margin:50px 0 22px">\n <div class="bang">i</div>\n <div>\n <h4>Como usar as cenas-modelo de IA</h4>\n <p>Use apenas quando n\xe3o houver foto real que sirva. Cada cena traz <strong>o que observar</strong> e um <strong>prompt pronto</strong> que se conecta ao fluxo da Se\xe7\xe3o 08. Aplique sempre o <strong>negative prompt padr\xe3o</strong>, finalize com o tratamento e a paleta da marca e trave o vermelho em <strong>#B71C13</strong>.</p>\n </div>\n </div>\n <span class="kicker reveal">Cenas-modelo para IA â o \xfaltimo recurso</span>\n <div class="grid g3 reveal" style="margin-top:18px">\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#1a1a1a,#0c0c0c);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.55),transparent 70%);right:-30px;top:-30px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">ind\xfastria \xb7 processo</span></div>\n <h4>01 \xb7 Ind\xfastria & Processo</h4>\n <p style="font-size:13.5px;color:var(--g300)">Engenheiro em foco no ch\xe3o de f\xe1brica, inspecionando um processo. O territ\xf3rio Lean Seis Sigma.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Luz industrial direcional \xb7 EPI/contexto real \xb7 1 acento vermelho no quadro \xb7 respiro para texto.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Editorial photo of a focused Brazilian engineer inspecting a process on a modern factory floor, subtle safety gear, soft directional industrial light, neutral palette with one deep red (#B71C13) accent in frame, shallow depth of field, photorealistic, sharp, generous negative space, premium documentary style --ar 4:5 --style raw</pre>\n </div>\n </div>\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#1c1c1c,#0c0c0c);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.5),transparent 70%);left:30%;top:-20px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">retrato \xb7 foco</span></div>\n <h4>02 \xb7 Profissional em Foco</h4>\n <p style="font-size:13.5px;color:var(--g300)">Retrato confiante e aspiracional de um profissional diverso em ambiente moderno.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Luz de janela suave \xb7 rim light vermelho sutil \xb7 fundo escuro neutro \xb7 espa\xe7o lateral para texto.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Editorial portrait of a confident, naturally diverse Brazilian professional in a modern office, focused aspirational expression, soft window light with a subtle deep red (#B71C13) rim accent, dark neutral background, shallow depth of field, shot on 85mm, photorealistic, empty space on one side --ar 4:5 --style raw</pre>\n </div>\n </div>\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#191919,#0c0c0c);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.45),transparent 70%);right:20%;bottom:-40px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">time \xb7 colabora\xe7\xe3o</span></div>\n <h4>03 \xb7 Time & Colabora\xe7\xe3o</h4>\n <p style="font-size:13.5px;color:var(--g300)">Equipe diversa em intera\xe7\xe3o genu\xedna de trabalho â nada de sorriso encenado.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Intera\xe7\xe3o real e focada \xb7 luz natural \xb7 um detalhe vermelho \xb7 enquadramento documental.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Editorial photo of a diverse Brazilian business team collaborating in a modern office, genuine focused interaction (not posed smiles), soft natural light, neutral palette with a deep red (#B71C13) detail, candid documentary framing, shallow depth, premium, negative space --ar 16:9 --style raw</pre>\n </div>\n </div>\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#171717,#0a0a0a);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.55),transparent 70%);left:-20px;bottom:-30px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">dados \xb7 tecnologia</span></div>\n <h4>04 \xb7 Dados & Tecnologia</h4>\n <p style="font-size:13.5px;color:var(--g300)">Profissional analisando dados em telas, ambiente escuro e cinematogr\xe1fico.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Brilho dos monitores \xb7 pretos densos \xb7 1 acento vermelho \xb7 profundidade cinematogr\xe1fica.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Editorial photo of a professional analyzing data on screens in a dim modern workspace, glow from monitors, deep blacks, neutral tones with a single deep red (#B71C13) accent, focused expression, cinematic shallow depth, photorealistic, sharp, space for text --ar 16:9 --style raw</pre>\n </div>\n </div>\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#1b1b1b,#0c0c0c);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:95px;height:95px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.45),transparent 70%);right:25%;top:-30px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">treinamento \xb7 sala</span></div>\n <h4>05 \xb7 Treinamento & Sala</h4>\n <p style="font-size:13.5px;color:var(--g300)">Apresentador conduzindo um treinamento para adultos engajados.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Postura confiante \xb7 audi\xeancia atenta \xb7 luz suave \xb7 acentos vermelhos \xb7 estilo documental.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Editorial photo of a confident presenter leading a professional training session to engaged adults in a modern room, soft directional light, neutral palette with deep red (#B71C13) accents, candid documentary style, depth of field, premium, negative space --ar 16:9 --style raw</pre>\n </div>\n </div>\n\n <div class="card">\n <div style="height:84px;border-radius:10px;margin-bottom:16px;background:linear-gradient(125deg,#161616,#080808);position:relative;overflow:hidden;border:1px solid var(--line-2)"><div style="position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(183,28,19,.6),transparent 70%);right:-40px;bottom:-40px"></div><span style="position:absolute;bottom:10px;left:12px;font-family:var(--mono) !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g300)">detalhe \xb7 conceito</span></div>\n <h4>06 \xb7 Detalhe & Conceito</h4>\n <p style="font-size:13.5px;color:var(--g300)">Close de m\xe3os em um processo/ferramenta â abstra\xe7\xe3o para temas t\xe9cnicos.</p>\n <div style="font-family:var(--mono) !important;font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:14px 0 6px">Observe</div>\n <p style="font-size:13px;color:var(--g400)">Macro \xb7 profundidade rasa \xb7 fundo preto \xb7 1 realce vermelho \xb7 muito respiro.</p>\n <div class="pblock" style="padding:14px 0 0">\n <div class="lbl">Prompt (EN)<button class="copy-btn">Copiar</button></div>\n <pre>Macro editorial close-up of hands working with a tool or process detail (gauge, notes, equipment), shallow depth of field, dramatic soft light, deep black background, one deep red (#B71C13) highlight, photorealistic, premium minimal, lots of negative space --ar 1:1 --style raw</pre>\n </div>\n </div>\n\n </div>\n <p class="reveal" style="font-size:13.5px;color:var(--g400);margin-top:20px;max-width:70ch">Em todas as cenas, combine com o <strong>negative prompt padr\xe3o</strong> da Se\xe7\xe3o 08 e lembre das regras de ouro: <strong>texto e logo nunca s\xe3o gerados</strong> â entram na edi\xe7\xe3o. Trave o vermelho em <strong>#B71C13</strong> na p\xf3s-produ\xe7\xe3o.</p>\n</section>\n\n<!-- 06 GRAFISMOS -->\n<section class="section wrap" id="grafismos">\n <div class="sec-head reveal">\n <div class="sec-num">06</div>\n <div>
1\n <span class="kicker">\xcdcones & Grafismos</span>\n <h2>Geometria a servi\xe7o<br>do <em>m\xe9todo</em></h2>\n <p class="lead">Elementos gr\xe1ficos discretos e geom\xe9tricos que remetem a processo, fluxo e precis\xe3o. Nunca decorativos por decorar â sempre refor\xe7ando a ideia de m\xe9todo e resultado.</p>\n </div>\n </div>\n\n <div class="grid g3 reveal" style="margin-bottom:24px">\n <div class="card">\n <h4>\xcdcones</h4>\n <p>Estilo <strong>flat / linha</strong>, geom\xe9trico, tra\xe7o de espessura consistente. Monocrom\xe1ticos (branco ou preto) com acento vermelho pontual. Cantos levemente arredondados, sem volume 3D realista.</p>\n </div>\n <div class="card">\n <h4>Grafismos de apoio</h4>\n <p>Linhas de processo e fluxo (alus\xe3o ao DMAIC), n\xf3s e conex\xf5es, grids t\xe9cnicos sutis, setas direcionais. Sempre finos e secund\xe1rios ao conte\xfado.</p>\n </div>\n <div class="card">\n <h4>Selos & badges</h4>\n <p>Para certifica\xe7\xf5es e pr\xeamios (acredita\xe7\xe3o <strong>CSSC</strong>, Jabuti, garantia de 30 dias). Formato circular ou escudo, tra\xe7o fino, em branco/vermelho sobre escuro.</p>\n </div>\n </div>\n\n <div class="grid g2 reveal">\n <div class="card soft">\n <h4>Padr\xf5es & texturas</h4>\n <p>Grid t\xe9cnico discreto (como uma folha de engenharia), linhas finas de baixa opacidade e leves brilhos radiais vermelhos para criar profundidade em fundos escuros â exatamente o clima desta capa.</p>\n </div>\n <div class="card soft">\n <h4>Formas-chave</h4>\n <p>Geometria limpa: ret\xe2ngulos, c\xedrculos, linhas e barras. A "barra/acento vermelho" \xe9 o recurso gr\xe1fico assinatura â uma faixa ou bloco vermelho marcando o ponto focal.</p>\n </div>\n </div>\n</section>\n\n<!-- 07 LAYOUT -->\n<section class="section wrap" id="layout">\n <div class="sec-head reveal">\n <div class="sec-num">07</div>\n <div>
1\n <span class="kicker">Composi\xe7\xe3o & Layout</span>\n <h2>Menos ru\xeddo,<br>mais <em>dire\xe7\xe3o</em></h2>\n <p class="lead">A organiza\xe7\xe3o espacial \xe9 t\xe3o importante quanto cor e fonte. Hierarquia forte, respiro generoso e alinhamento disciplinado â direto ao ponto, como a metodologia.</p>\n </div>\n </div>\n\n <div class="grid g2 reveal" style="margin-bottom:20px">\n <div class="card"><h4>Hierarquia</h4><p>Um ponto focal claro por pe\xe7a. O olho entra pelo t\xedtulo (Archivo), passa pelo apoio (Hanken) e termina na a\xe7\xe3o. Nunca dois "her\xf3is" disputando.</p></div>\n <div class="card"><h4>Respiro</h4><p>Espa\xe7o negativo \xe9 recurso, n\xe3o desperd\xedcio. Margens largas, conte\xfado agrupado, nada encostado nas bordas. "Direto ao ponto" tamb\xe9m \xe9 visual.</p></div>\n <div class="card"><h4>Alinhamento</h4><p>Predomin\xe2ncia de alinhamento \xe0 esquerda e estrutura em grid. R\xf3tulos t\xe9cnicos (mono, mai\xfasculo) ancoram blocos, como numa folha de especifica\xe7\xe3o.</p></div>\n <div class="card"><h4>Estat\xedsticas como recurso</h4><p>Os grandes n\xfameros (18 \xb7 +700 mil \xb7 +4 milh\xf5es \xb7 +500) s\xe3o protagonistas visuais. Archivo Black, grandes, com o "+" ou a unidade em vermelho.</p></div>\n </div>\n\n <div class="callout reveal">\n <div class="bang">â
</div>\n <div>\n <h4>O teste dos 3 segundos</h4>\n <p>Toda arte precisa comunicar a mensagem principal em at\xe9 3 segundos. Se exige esfor\xe7o para entender, h\xe1 ru\xeddo demais. Simplifique at\xe9 sobrar s\xf3 o essencial.</p>\n </div>\n </div>\n</section>\n\n<!-- 08 IA -->\n<div class="ai-band">\n<section class="section wrap" id="ia">\n <div class="sec-head reveal">\n <div class="sec-num" style="-webkit-text-stroke-color:var(--red)">08</div>\n <div>
1\n <span class="kicker">Diretrizes para IA Generativa \xb7 â
Se\xe7\xe3o principal</span>\n <h2>Como gerar artes<br><em>fi\xe9is \xe0 marca</em> com IA</h2>\n <p class="lead">Tudo das se\xe7\xf5es anteriores, traduzido em regras pr\xe1ticas para Midjourney, DALL\xb7E / GPT Image, Firefly, Leonardo, Ideogram e similares. Siga o fluxo e use os prompts prontos.</p>\n </div>\n </div>\n\n <!-- regra de ouro -->\n <div class="callout reveal gold" style="margin-bottom:38px">\n <div class="bang">!</div>\n <div>\n <h4>As duas regras de ouro</h4>\n <p style="margin-bottom:6px"><strong>1. Texto nunca \xe9 gerado pela IA.</strong> Modelos erram letras e acentos. Toda palavra \xe9 inserida <strong>depois</strong>, na edi\xe7\xe3o (Canva / Figma / Photoshop), na tipografia oficial.</p>\n <p><strong>2. Logo nunca \xe9 gerado pela IA.</strong> O wordmark \xe9 sempre o PNG oficial, aplicado na p\xf3s-produ\xe7\xe3o. Jamais pe\xe7a \xe0 IA para "escrever Voitto" ou criar um logo.</p>\n </div>\n </div>\n\n <!-- principios -->\n <span class="kicker reveal">Princ\xedpios inegoci\xe1veis</span>\n <div class="princ reveal" style="margin-bottom:40px">\n <div class="pr"><div class="n">01</div><h4>Paleta travada</h4><p>Sempre vermelho #B71C13 + preto + branco + cinzas. No prompt, declare as cores e pro\xedba as outras no negative prompt.</p></div>\n <div class="pr"><div class="n">02</div><h4>Vermelho como acento</h4><p>~5% da imagem. Pe\xe7a "single bold red accent", n\xe3o "red background". A base \xe9 neutra e escura.</p></div>\n <div class="pr"><div class="n">03</div><h4>Pessoas reais</h4><p>Profissionais brasileiros, diversos, em contexto. Estilo "editorial photography", nunca "stock photo / 3D render of people".</p></div>\n <div class="pr"><div class="n">04</div><h4>Espa\xe7o para texto</h4><p>Pe\xe7a sempre "negative space" / "empty area" no lado onde o t\xedtulo entrar\xe1 depois.</p></div>\n <div class="pr"><div class="n">05</div><h4>Limpeza premium</h4><p>"minimalist, clean, premium, high contrast". Pro\xedba polui\xe7\xe3o, clip art, neon e gradiente arco-\xedris.</p></div>\n <div class="pr"><div class="n">06</div><h4>Sem texto, sem logo</h4><p>Inclua "no text, no logo, no watermark" em todo negative prompt. Eles entram s\xf3 na edi\xe7\xe3o.</p></div>\n </div>\n\n <!-- fluxo -->\n <span class="kicker reveal">O fluxo de trabalho (5 passos)</span>\n <div class="grid g3 reveal" style="margin-bottom:14px">\n <div class="card"><div class="num-lab" style="color:var(--red)">Passo 1</div><h4 style="margin-top:6px">Gerar a base</h4><p>Crie o fundo/cena na IA â sem texto, sem logo. Use o template do formato certo.</p></div>\n <div class="card"><div class="num-lab" style="color:var(--red)">Passo 2</div><h4 style="margin-top:6px">Selecionar</h4><p>Escolha a varia\xe7\xe3o com melhor composi\xe7\xe3o e mais espa\xe7o para texto.</p></div>\n <div class="card"><div class="num-lab" style="color:var(--red)">Passo 3</div><h4 style="margin-top:6px">Travar a cor</h4><p>
1No editor, ajuste para que o vermelho seja exatamente #B71C13 e a base fique neutra.</p></div>\n </div>\n <div class="grid g2 reveal" style="margin-bottom:40px">\n <div class="card"><div class="num-lab" style="color:var(--red)">Passo 4</div><h4 style="margin-top:6px">Aplicar marca + texto</h4><p>Insira o logo oficial (branco) e o texto na tipografia da marca, com a regra do it\xe1lico de \xeanfase.</p></div>\n <div class="card"><div class="num-lab" style="color:var(--red)">Passo 5</div><h4 style="margin-top:6px">Checklist</h4><p>Rode o checklist da se\xe7\xe3o 09 antes de exportar e publicar. S\xf3 ent\xe3o a arte est\xe1 pronta.</p></div>\n </div>\n\n <!-- biblioteca de descritores -->\n <span class="kicker reveal">Biblioteca de descritores \xb7 cole nos seus prompts</span>\n <p class="reveal" style="font-size:14px;color:var(--g400);margin:0 0 20px;max-width:64ch">Muitas ferramentas respondem melhor em ingl\xeas â por isso os descritores est\xe3o em EN. Combine os blocos conforme a pe\xe7a.</p>\n <div class="kw-wrap reveal" style="margin-bottom:18px">\n <div class="kw"><div class="kw-h">Clima / Mood</div><span class="tag">professional</span><span class="tag">confident</span><span class="tag">modern</span><span class="tag">premium</span><span class="tag">results-driven</span><span class="tag">clean corporate</span><span class="tag">aspirational</span></div>\n <div class="kw"><div class="kw-h">Cor</div><span class="tag">monochrome black & white base</span><span class="tag">bold red accent #B71C13</span><span class="tag">high contrast</span><span class="tag">deep blacks</span><span class="tag">desaturated neutral</span></div>\n <div class="kw"><div class="kw-h">Sujeito / Pessoas</div><span class="tag">Brazilian professionals</span><span class="tag">diverse</span><span class="tag">engineer / manager</span><span class="tag">industrial or office context</span><span class="tag">focused expression</span></div>\n <div class="kw"><div class="kw-h">Luz</div><span class="tag">soft directional light</span><span class="tag">controlled studio light</span><span class="tag">subtle red rim light</span><span class="tag">natural window light</span></div>\n <div class="kw"><div class="kw-h">Composi\xe7\xe3o</div><span class="tag">minimalist</span><span class="tag">generous negative space</span><span class="tag">rule of thirds</span><span class="tag">strong focal point</span><span class="tag">editorial layout</span></div>\n <div class="kw"><div class="kw-h">Acabamento / C\xe2mera</div><span class="tag">photorealistic editorial</span><span class="tag">shot on 50mm</span><span class="tag">shallow depth of field</span><span class="tag">ultra sharp</span><span class="tag">8k</span></div>\n </div>\n <div class="kw reveal" style="border-color:rgba(255,107,94,.3);margin-bottom:42px">\n <div class="kw-h" style="color:#FF6B5E">Negative prompt padr\xe3o \xb7 use em toda gera\xe7\xe3o</div>\n <pre style="font-family:var(--mono) !important;font-size:12.5px;color:#FFB3AC;white-space:pre-wrap;line-height:1.6;background:var(--black);border:1px solid rgba(255,107,94,.18);border-radius:10px;padding:14px;margin-top:6px">text, words, letters, typography, logo, watermark, signature, blue, green, purple, orange, yellow, rainbow gradient, neon, oversaturated, cluttered, busy background, cheesy stock photo, fake smile, generic corporate clich\xe9, clip art, cartoonish, low quality, blurry, distorted hands, distorted face, extra fingers, deformed</pre>\n </div>\n\n <!-- TEMPLATES -->\n <span class="kicker reveal">Prompts prontos por formato</span>\n <p class="reveal" style="font-size:14px;color:var(--g400);margin:0 0 26px;max-width:66ch">Copie, ajuste o tema entre [colchetes] e gere. Lembre: a sa\xedda \xe9 s\xf3 a base â texto e logo entram na edi\xe7\xe3o.</p>\n\n <!-- A -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">1:1 \xb7 4:5</span><h4>Post de feed â conceitual (processo / dados)</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b>
1 posts tem\xe1ticos sobre Lean, gest\xe3o, dados, produtividade â sem foto de pessoa.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>Minimalist abstract 3D render representing process optimization and data flow, clean geometric shapes, flowing lines and connecting nodes, deep black background, one bold red accent (#B71C13), subtle depth and soft shadows, premium corporate aesthetic, high contrast, lots of negative space on the right for text, studio lighting, ultra sharp, 8k --ar 4:5 --style raw</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">text, logo, watermark, blue, green, purple, rainbow, neon, clutter, low quality</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> travar o vermelho em #B71C13 \xb7 adicionar t\xedtulo (Archivo) \xe0 direita \xb7 logo branco no canto inferior.</span></div>\n </div>\n\n <!-- B -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">4:5 \xb7 1:1</span><h4>Post de feed â foto de profissional</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b> depoimentos, cases, posts de carreira com presen\xe7a humana.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>Editorial photograph of a confident Brazilian professional (engineer or manager) in a modern industrial or office environment, naturally diverse appearance, focused and aspirational expression, soft directional lighting with a subtle warm key, neutral palette with one strong red element in frame, shallow depth of field, shot on 50mm, photorealistic, sharp focus, generous negative space on one side, premium corporate editorial style --ar 4:5 --style raw</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">fake cheesy smile, generic stock look, blue corporate clich\xe9, oversaturated, clutter, text, logo, watermark, distorted hands, distorted face, extra fingers</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> grading neutro com pretos densos \xb7 texto sobre o espa\xe7o negativo \xb7 logo branco.</span></div>\n </div>\n\n <!-- C -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">16:9</span><h4>Thumbnail de curso / capa de aula</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b> capas de cursos, forma\xe7\xf5es, YouTube, miniaturas de aula.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>Clean modern thumbnail background, dark graphite gradient from #111111 to #1A1A1A, a single bold geometric red (#B71C13) shape or diagonal accent on the right side, subtle technical grid texture, premium and minimal, large empty space on the left for a title, high contrast, vector-clean, soft depth --ar 16:9</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">text, logo, people, clutter, blue, green, purple, neon, rainbow, low quality, busy</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> t\xedtulo grande (Archivo) \xe0 esquerda, 1 palavra em it\xe1lico vermelho \xb7 logo branco no canto.</span></div>\n </div>\n\n <!-- D -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">9:16</span><h4>Story / Reels cover</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b> stories, capas de reels, formatos verticais.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>Vertical premium background for a social story, deep black, dynamic diagonal red (#B71C13) accent stripe, minimal geometric elements, subtle soft glow, large vertical negative space for stacked text, cohesive corporate branding mood, high contrast --ar 9:16</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">text, logo, watermark, clutter, blue, green, purple, rainbow, neon, low quality</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> texto empilhado no centro/topo \xb7 CTA na base \xb7 logo branco no topo.</span></div>\n </div>\n\n <!-- E -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">16:9 \xb7 1.91:1</span><h4>Capa de blog / artigo (ilustra\xe7\xe3o)</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b> capas de artigos t\xe9cnicos do blog, quando a foto n\xe3o cabe.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>Flat geometric vector illustration on the theme of [tema do artigo], clean isometric or 2D shapes, limited palette of black, white and grey with bold red (#B71C13) highlights, thin consistent line work, minimal and editorial, plenty of empty space, premium tech-education style, no gradients of other colors --ar 16:9</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">text, logo, photorealistic, 3D, blue, green, purple, rainbow, neon, cluttered, childish clip art, low quality</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> t\xedtulo do artigo (Archivo) sobre \xe1rea limpa \xb7 logo branco discreto.</span></div>\n </div>\n\n <!-- F -->\n <div class="prompt reveal">\n <div class="prompt-head"><div class="ph-l"><span class="fmt">1:1 \xb7 4:5</span><h4>An\xfancio (tr\xe1fego pago)</h4></div></div>\n <div class="prompt-obj"><b>Quando usar:</b> criativos de performance no Meta/Google â alto contraste e foco.</div>\n <div class="pblock"><div class="lbl">Prompt base (EN)<button class="copy-btn">Copiar</button></div><pre>High-impact advertising background, bold and minimal, deep black with a strong red (#B71C13) geometric block on one third of the frame, dramatic high contrast, premium and direct, clear empty zone for a short headline and a button, clean studio look, sharp --ar 4:5</pre></div>\n <div class="pblock"><div class="lbl">Negative<button class="copy-btn">Copiar</button></div><pre class="neg">text, logo, watermark, clutter, blue, green, purple, rainbow, neon, busy, low quality</pre></div>\n <div class="prompt-post"><span class="st">â</span><span><b>P\xf3s:</b> headline curto (Archivo) + bot\xe3o \xb7 provas sociais se couber \xb7 logo branco.</span></div>\n </div>\n\n <!-- garantia de cor -->\n <div class="grid g2 reveal" style="margin-top:18px">\n <div class="card soft">\n <h4>Como garantir o vermelho exato</h4>\n <p>A IA raramente acerta o #B71C13 de primeira. Gere com "red accent", escolha a melhor base e, no editor, fa\xe7a a <strong>corre\xe7\xe3o de cor</strong> (matiz/seletiva) para fixar o vermelho oficial. Quando a ferramenta permitir, use uma <strong>imagem de refer\xeancia</strong> de estilo para manter a paleta entre pe\xe7as.</p>\n </div>\n <div class="card soft">\n <h4>Dica por ferramenta</h4>\n <p><strong>Ideogram</strong> lida melhor com texto (ainda assim, revise sempre). <strong>Midjourney</strong> entende bem "--style raw" e refer\xeancias (--sref) para consist\xeancia. <strong>Firefly</strong> \xe9 seguro para uso comercial. Em qualquer uma, a regra de n\xe3o gerar texto/logo continua valendo.</p>\n </div>\n </div>\n</section>\n</div>\n\n<!-- 09 CHECKLIST -->\n<section class="section wrap" id="checklist">\n <div class="sec-head reveal">\n <div class="sec-num">09</div>\n <div>
1\n <span class="kicker">Checklist de Aprova\xe7\xe3o</span>\n <h2>Antes de <em>publicar</em></h2>\n <p class="lead">A verifica\xe7\xe3o final. Se qualquer item falhar, a arte volta para ajuste. Vale para pe\xe7as de IA, design manual ou ag\xeancia.</p>\n </div>\n </div>\n <div class="checklist reveal">\n <div class="ci"><div class="box"></div><div><b>Paleta dentro do padr\xe3o?</b><p>Apenas vermelho #B71C13 + preto + branco + cinzas. Nenhuma cor estranha, nenhum gradiente colorido.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Vermelho como acento (~5%)?</b><p>A base \xe9 neutra e escura; o vermelho marca s\xf3 o ponto focal â n\xe3o domina a pe\xe7a.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Logo oficial, correto?</b><p>Wordmark branco (PNG oficial), em fundo escuro ou vermelho, com \xe1rea de prote\xe7\xe3o respeitada. Nunca recriado.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Texto na tipografia da marca, sem erros?</b><p>Archivo/Hanken, sem letras tortas de IA, com a regra do it\xe1lico de \xeanfase em 1â3 palavras.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Pessoas e contexto coerentes?</b><p>Profissionais reais, diversos, aspiracionais e em contexto â sem cara de stock, m\xe3os/rostos corretos.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Hierarquia e respiro?</b><p>Um ponto focal, mensagem clara em 3 segundos, espa\xe7o negativo, nada encostado nas bordas.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Provas sociais corretas?</b><p>Se usadas: 18 anos \xb7 +700 mil \xb7 +4 milh\xf5es \xb7 +500 â grafia exata, sem inventar n\xfameros.</p></div></div>\n <div class="ci"><div class="box"></div><div><b>Formato e dimens\xe3o certos?</b><p>Propor\xe7\xe3o e resolu\xe7\xe3o adequadas ao canal (feed, story, thumb, an\xfancio, blog).</p></div></div>\n </div>\n</section>\n\n<!-- 10 NAO FACA -->\n<section class="section wrap" id="naofaca">\n <div class="sec-head reveal">\n <div class="sec-num" style="-webkit-text-stroke-color:#FF6B5E">10</div>\n <div>
1\n <span class="kicker" style="color:#FF6B5E"><span></span>Nunca Fa\xe7a</span>\n <h2>As proibi\xe7\xf5es <em>absolutas</em></h2>\n <p class="lead">Em uma s\xf3 lista, o que quebra a marca na hora â especialmente em gera\xe7\xe3o por IA.</p>\n </div>\n </div>\n <div class="dd reveal">\n <div class="dd-col dont card">\n <h4 class="bad">Marca & cor</h4>\n <ul>\n <li>Gerar ou recriar o logo por IA / outra fonte</li>\n <li>Logo branco em fundo claro, distorcido ou colorido</li>\n <li>Introduzir azul, verde, roxo, amarelo ou arco-\xedris</li>\n <li>Deixar o vermelho dominar a pe\xe7a</li>\n <li>Gradientes coloridos e efeitos neon</li>\n </ul>\n </div>\n <div class="dd-col dont card">\n <h4 class="bad">Conte\xfado & estilo</h4>\n <ul>\n <li>Deixar a IA escrever o texto / "escrever Voitto"</li>\n <li>Foto com cara de banco de imagens e sorriso falso</li>\n <li>Usar pessoas ou fotos que n\xe3o sejam da Voitto</li>\n <li>M\xe3os/rostos distorcidos passando sem revis\xe3o</li>\n <li>Polui\xe7\xe3o visual, clip art, estilo cartoon</li>\n <li>Inventar ou arredondar as provas sociais</li>\n </ul>\n </div>\n </div>\n</section>\n\n<!-- FOOTER -->\n<footer class="footer">\n <div class="wrap footer-in">\n <div>\n <img src="https://files.voitto.com.br/assets/marca-voitto/logo-white.png" alt="Voitto">\n <p class="fcorp"><b>VOITTO TREINAMENTO, DESENVOLVIMENTO E EDITORA LTDA</b><br>Escola de habilidades para o mercado de trabalho.</p>\n </div>\n <div class="footer-meta">\n <b>Manual de Marca & Identidade Visual</b><br>
1\n <span style="color:var(--red)">Conhecimento que vira resultado</span>\n </div>\n </div>\n</footer>\n\n<!-- MOBILE SECTION MENU -->\n<button class="menu-fab" id="menuFab" aria-label="Abrir \xedndice de se\xe7\xf5es"><i></i><i></i><i></i></button>\n<div class="sheet" id="sheet" role="dialog" aria-modal="true" aria-label="\xcdndice de se\xe7\xf5es">\n <div class="sheet-in">\n <button class="sheet-x" data-close aria-label="Fechar">Fechar â</button>\n <div class="sheet-h">Manual de Marca \xb7 v1.2</div>\n <a href="#topo" data-close><span class="sn">â²</span><span class="st">Topo</span></a>\n <a href="#marca" data-close><span class="sn">01</span><span class="st">A Marca</span></a>\n <a href="#logo" data-close><span class="sn">02</span><span class="st">Logotipo</span></a>\n <a href="#cores" data-close><span class="sn">03</span><span class="st">Cores</span></a>\n <a href="#tipografia" data-close><span class="sn">04</span><span class="st">Tipografia</span></a>\n <a href="#fotografia" data-close><span class="sn">05</span><span class="st">Fotografia</span></a>\n <a href="#grafismos" data-close><span class="sn">06</span><span class="st">Grafismos</span></a>\n <a href="#layout" data-close><span class="sn">07</span><span class="st">Layout</span></a>\n <a href="#ia" data-close><span class="sn">08</span><span class="st" style="color:var(--red)">Diretrizes IA â
</span></a>\n <a href="#checklist" data-close><span class="sn">09</span><span class="st">Checklist</span></a>\n <a href="#naofaca" data-close><span class="sn">10</span><span class="st">Nunca Fa\xe7a</span></a>\n </div>\n</div>\n\n\n\n\n',behavior:l.Ei})]})}}},function(a){a.O(0,[23513,49774,92888,40179],function(){return a(a.s=18207)}),_N_E=a.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.