/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;margin:0;letter-spacing:-.02em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px)}
.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:10px;z-index:100;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.ico{width:1.25em;height:1.25em;flex:none}
.ico-wa{width:1.35em;height:1.35em}

/* ===== Header ===== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--border)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:3px;text-decoration:none;font-family:var(--f-display);font-weight:700;letter-spacing:.22em;font-size:1.15rem}
.logo-word{color:var(--text)}
.logo-dot{width:7px;height:7px;border-radius:2px;background:var(--accent);box-shadow:0 0 14px var(--accent);transform:translateY(4px) rotate(45deg);margin-left:4px}
.logo{gap:12px;letter-spacing:0}
.logo-mark{height:30px;width:auto;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.35))}
.logo-wordimg{height:15px;width:auto}
.site-footer .logo-mark{height:34px}
.site-footer .logo-wordimg{height:16px}
.bar-end{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:999px;text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.lang:hover{color:var(--text);border-color:var(--accent-deep);background:rgba(var(--accent-rgb),.08)}
.burger{width:42px;height:42px;border:1px solid var(--border);background:transparent;border-radius:12px;display:grid;place-content:center;gap:6px;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav{position:fixed;inset:68px 0 auto 0;background:rgba(var(--bg-rgb),.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:12px 20px 24px;display:flex;flex-direction:column;gap:2px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.nav.open{opacity:1;transform:none;visibility:visible}
.nav a{padding:14px 4px;text-decoration:none;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);transition:color .2s}
.nav a:hover,.nav a.active{color:var(--text)}
.nav .nav-cta{margin-top:16px;border:0;text-align:center;color:var(--on-accent)}

/* ===== Buttons ===== */
.btn{--glow:rgba(var(--accent-rgb),.35);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:14px;border:0;font:600 1rem var(--f-body);text-decoration:none;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-strong),var(--accent) 55%,var(--accent-deep));box-shadow:0 8px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ico{transition:transform .25s}
.btn:hover .ico{transform:translateX(3px)}
.btn-sm{min-height:42px;padding:0 20px;font-size:.92rem}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn-ghost::after{display:none}
.btn-ghost:hover{border-color:var(--accent-deep);background:rgba(var(--accent-rgb),.08);box-shadow:none}
.btn-wa{--glow:rgba(37,211,102,.35);background:linear-gradient(135deg,#3ee27d,#25d366 55%,#17a34a);color:#03170b}

/* ===== Tipografia utilitária ===== */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.grad{background:linear-gradient(120deg,var(--accent-strong),var(--accent) 50%,var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.08rem;max-width:62ch}
.badge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;padding:3px 10px;border-radius:999px;font:600 .68rem var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--warm);border:1px solid rgba(var(--warm-rgb),.4);background:rgba(var(--warm-rgb),.1)}
.badge-lg{font-size:.78rem;padding:5px 14px;margin-left:10px;transform:translateY(-4px)}

/* ===== Hero ===== */
.hero{position:relative;padding:120px 0 72px;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;height:2px;width:min(48vw,560px);pointer-events:none;animation:slash 7s ease-in-out infinite}
.hero::before{left:-100px;top:70px;width:260px;transform:rotate(-45deg);background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.85))}
.hero::after{right:-140px;bottom:180px;transform:rotate(-45deg);background:linear-gradient(90deg,rgba(var(--accent-rgb),.85),transparent);animation-delay:-3.5s}
@keyframes slash{50%{opacity:.35}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.85}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:-2;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.hero-glow.g1{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(var(--accent-rgb),.35),transparent 65%)}
.hero-glow.g2{width:460px;height:460px;right:-140px;bottom:-60px;background:radial-gradient(circle,rgba(var(--warm-rgb),.16),transparent 65%);animation-delay:-8s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
.hero-grid{display:grid;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,6vw,3.5rem);margin:18px 0 22px}
.hero h1 .grad{display:block}
.hero-sub{color:var(--muted);font-size:clamp(1.02rem,2.2vw,1.18rem);max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--muted);background:rgba(var(--surface-rgb),.6)}
.chips .ico{color:var(--accent);width:1em;height:1em}
.hero-visual{position:relative}
.hero-ui{position:relative;perspective:1200px;padding:10px 0 30px}
.hero-mock{transform:rotateY(-8deg) rotateX(4deg);transform-style:preserve-3d;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(var(--accent-rgb),.12),0 0 80px -20px rgba(var(--accent-rgb),.25);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:rotateY(-8deg) rotateX(4deg) translateY(-12px)}}
.hero-body{display:flex;min-height:330px}
.hu-side{width:46px;border-right:1px solid var(--border);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.hu-side b,.m-side b{width:18px;height:18px;border-radius:6px;background:var(--surface2)}
.hu-side b.on,.m-side b.on{background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.6)}
.hu-main{flex:1;padding:14px;display:grid;gap:12px;align-content:start}
.hu-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hu-card{border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:10px;display:grid;gap:6px}
.hu-k{width:16px;height:16px;border-radius:5px;background:var(--accent)}
.hu-b .hu-k{background:var(--warm)}.hu-c .hu-k{background:#7aa8ff}
.hu-l{height:7px;border-radius:4px;background:var(--border);width:70%}
.hu-s{height:5px;border-radius:4px;background:var(--border);width:45%;opacity:.6}
.hu-chart{position:relative;height:150px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);padding:10px;overflow:hidden}
.hu-bars{position:absolute;inset:10px;display:flex;align-items:flex-end;gap:10px}
.hu-bars i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(var(--accent),var(--accent-deep));opacity:.85;transform-origin:bottom;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms + .5s)}
@keyframes grow{from{transform:scaleY(0)}}
.hu-line{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);overflow:visible}
.hu-line path{fill:none;stroke:var(--warm);stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.2s .9s ease forwards;vector-effect:non-scaling-stroke}
@keyframes draw{to{stroke-dashoffset:0}}
.hu-list{display:grid;gap:7px}
.hu-list i{height:9px;border-radius:5px;background:var(--surface2);border:1px solid var(--border)}
.hu-list i:nth-child(2){width:82%}.hu-list i:nth-child(3){width:64%}
.float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-size:.8rem;font-weight:500;color:var(--text);background:rgba(var(--surface-rgb),.9);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 34px -12px rgba(0,0,0,.7);animation:floaty2 6s ease-in-out infinite}
.float .ico{color:var(--accent);width:1.1em;height:1.1em}
.float.f1{left:-14px;top:-18px}
.float.f2{right:-4px;top:48%;animation-delay:-2s}
.float.f3{left:10%;bottom:-4px;animation-delay:-4s}
@keyframes floaty2{50%{transform:translateY(-8px)}}

/* ===== Seções ===== */
.sec{padding:84px 0;position:relative}
.sec-alt{background:linear-gradient(180deg,var(--bg-alt),var(--bg));border-block:1px solid rgba(var(--border-rgb),.5)}
.sec-head{display:grid;gap:14px;margin-bottom:46px}
.sec h2{font-size:clamp(1.7rem,4.6vw,2.7rem);max-width:22ch}
.grid-3{display:grid;gap:16px}
.card{position:relative;display:block;padding:28px;border-radius:20px;background:linear-gradient(160deg,var(--surface),var(--bg-alt));border:1px solid var(--border);text-decoration:none;transition:border-color .3s,transform .3s}
.card h3{font-size:1.2rem;margin:18px 0 10px}
.card p{color:var(--muted);font-size:.97rem}
.card-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.25);color:var(--accent-strong)}
.card-ico .ico{width:24px;height:24px}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.14),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.glow:hover{border-color:rgba(var(--accent-rgb),.45)}
.glow:hover::before{opacity:1}
.card-soft{border-style:dashed}

/* nichos */
.niches{margin-top:44px;padding:28px 0 0;border-top:1px solid var(--border)}
.niches-head{display:grid;gap:6px;margin-bottom:22px}
.niches-head h3{font-size:1.15rem}
.niches-head p{color:var(--muted);font-size:.95rem}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex:none;gap:12px;padding-right:12px;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{white-space:nowrap;padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.92rem}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ===== Projetos ===== */
.disclaimer{display:flex;gap:10px;align-items:flex-start;max-width:70ch;margin:-14px 0 40px;padding:14px 18px;border-radius:14px;border:1px solid rgba(var(--warm-rgb),.3);background:rgba(var(--warm-rgb),.07);color:#e9d2b2;font-size:.92rem}
.disclaimer .ico{color:var(--warm);margin-top:2px}
.proj-list{display:grid;gap:56px}
.proj{display:grid;gap:26px;align-items:center}
.proj-visual{position:relative}
.mock-note{margin-top:10px;font-size:.78rem;color:var(--muted);text-align:center;opacity:.8}
.tag{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:10px}
.proj h3{font-size:clamp(1.4rem,3.4vw,1.9rem);margin-bottom:14px}
.proj-copy>p:not(.tag):not(.mod-title){color:var(--muted)}
.mod-title{margin:22px 0 10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);font-weight:600}
.mods{display:flex;flex-wrap:wrap;gap:8px}
.mods li{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.84rem;color:var(--muted);transition:border-color .2s,color .2s}
.mods li:hover{border-color:var(--accent-deep);color:var(--text)}

/* ===== Mockups genéricos ===== */
.mock{border-radius:16px;background:var(--surface);border:1px solid var(--border);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--surface2)}
.mock-bar i:nth-child(1){background:#ff6b6b}.mock-bar i:nth-child(2){background:#f2b36b}.mock-bar i:nth-child(3){background:#3ddc97}
.mock-bar span{margin-left:10px;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.mock-body{display:flex;min-height:300px;font-size:.7rem}
.m-side{width:44px;border-right:1px solid var(--border);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
.m-main{flex:1;min-width:0;padding:14px}
.m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.m-head strong{font:600 .85rem var(--f-display);color:var(--text)}
.m-pill{width:54px;height:16px;border-radius:999px;background:var(--surface2);border:1px solid var(--border)}

/* cada sistema tem o acento do seu próprio visual */
.mock-salon{--ma:#d6568f}
.mock-auto{--ma:#2f8bff}
.mock-pharmacy{--ma:#3dbb63}
.mock-crm{--ma:#14b886}
.mock .m-side b.on{background:var(--ma,var(--accent));box-shadow:0 0 14px color-mix(in srgb,var(--ma,var(--accent)) 60%,transparent)}

/* salão: agenda por profissional */
.m-cal{display:grid;grid-template-columns:34px 1fr;gap:6px}
.m-hours{display:flex;flex-direction:column;justify-content:space-between;padding:32px 0 6px;height:262px;font-size:.58rem;color:var(--muted)}
.m-week{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-week::after{content:"";position:absolute;left:0;right:0;top:139px;height:2px;background:#ff5d73;box-shadow:0 0 10px rgba(255,93,115,.7);border-radius:2px;pointer-events:none}
.m-day{display:flex;align-items:center;justify-content:center;gap:5px;height:24px;margin-bottom:6px;color:var(--text);font-size:.6rem;white-space:nowrap}
.av{width:12px;height:12px;border-radius:50%;flex:none}
.av.a0{background:#7ddc9a}.av.a1{background:#7aa8ff}.av.a2{background:#d6568f}
.m-track{position:relative;height:232px;border-radius:8px;background:repeating-linear-gradient(180deg,transparent 0 57px,rgba(var(--border-rgb),.55) 57px 58px),var(--bg-alt);border:1px solid var(--border)}
.blk{position:absolute;left:3px;right:3px;top:var(--t);height:var(--h);border-radius:6px;padding:5px 6px;display:flex;flex-direction:column;overflow:hidden;line-height:1.25;font-size:.6rem;border-left:3px solid;opacity:0;transform:scale(.85)}
.blk b{font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.blk em{font-style:normal;opacity:.75;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.blk.c1{background:rgba(214,86,143,.2);border-color:#d6568f;color:#f8cbdd}
.blk.c2{background:rgba(var(--warm-rgb),.17);border-color:var(--warm);color:#f8dcb8}
.blk.c3{background:rgba(122,168,255,.17);border-color:#7aa8ff;color:#cddcff}
.in .blk{animation:pop .55s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(var(--i)*80ms + .2s)}
@keyframes pop{to{opacity:1;transform:none}}
.in .blk.drag{animation:pop .55s cubic-bezier(.2,.9,.3,1.2) forwards,dragmove 5.5s 1.8s ease-in-out infinite;animation-delay:calc(var(--i)*80ms + .2s),1.8s;z-index:2;box-shadow:0 10px 24px -6px rgba(0,0,0,.7)}
@keyframes dragmove{0%,100%{transform:translate(0,0);top:var(--t)}35%,60%{transform:translateX(calc(100% + 6px)) rotate(1.5deg);top:75%}}

/* blocos de números (auto e farmácia) */
.a-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.a-tile{display:grid;gap:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:.58rem;color:var(--muted);line-height:1.2;opacity:0;transform:translateY(8px)}
.a-tile i{display:block;height:15px;width:36%;border-radius:5px;background:linear-gradient(90deg,var(--ma),transparent)}
.in .a-tile{animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .2s)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fillw{to{width:var(--w)}}
@keyframes slidein{to{opacity:1;transform:none}}

/* auto: ordens por etapa */
.a-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:10px}
.a-stages{display:grid;gap:7px;align-content:start;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--bg-alt)}
.a-row{display:grid;grid-template-columns:76px 1fr 14px;gap:8px;align-items:center;opacity:0;transform:translateX(-8px)}
.a-chip{padding:3px 8px;border-radius:999px;font-size:.56rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-chip.s0{background:rgba(255,255,255,.09);color:#cbd5df}
.a-chip.s1{background:rgba(47,139,255,.2);color:#8ec0ff}
.a-chip.s2{background:rgba(var(--warm-rgb),.18);color:var(--warm)}
.a-chip.s3{background:rgba(61,220,151,.16);color:#6ff0b4}
.a-chip.s4{background:rgba(61,220,151,.09);color:#7be3b3}
.a-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.a-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ma)}
.a-row b{font-size:.62rem;text-align:right}
.a-ready{display:grid;gap:7px;align-content:start}
.a-plate{padding:7px 8px;border-top:3px solid #2f6fe0;border-radius:4px;background:#f1f4f8;color:#14202c;font:600 .62rem ui-monospace,Menlo,monospace;text-align:center;opacity:0;transform:translateX(8px)}
.in .a-row{animation:slidein .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .2s)}
.in .a-bar i{animation:fillw 1.2s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .5s)}
.in .a-plate{animation:slidein .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .2s)}

/* farmácia: estoque e lotes */
.p-table{display:grid;gap:6px}
.p-row{display:grid;grid-template-columns:1.4fr 1fr 1.2fr .8fr;gap:8px;align-items:center;padding:11px 10px;border-radius:8px;background:var(--bg-alt);border:1px solid var(--border);opacity:0;transform:translateX(-10px)}
.p-th{background:transparent;border-color:transparent;color:var(--muted);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;opacity:1;transform:none;padding-block:4px}
.p-mono{font-family:ui-monospace,Menlo,monospace;color:var(--muted)}
.p-bar{height:6px;border-radius:4px;background:var(--border);overflow:hidden}
.p-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--ma)}
.p-row:nth-child(3) .p-bar i{background:var(--warm)}
.p-chip{justify-self:start;padding:2px 9px;border-radius:999px;font-size:.6rem;font-weight:600;background:rgba(61,220,151,.14);color:#6ff0b4}
.p-chip.warn{background:rgba(var(--warm-rgb),.16);color:var(--warm)}
.in .p-row:not(.p-th){animation:slidein .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .2s)}
.in .p-bar i{animation:fillw 1.3s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*100ms + .5s)}

/* CRM: quadro de negócios */
.k-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k-col{display:grid;gap:8px;align-content:start;min-height:244px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--bg-alt)}
.k-head{display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-dot{width:7px;height:7px;border-radius:50%;flex:none}
.k-dot.d0{background:#4f8cff}.k-dot.d1{background:#8b6cf0}.k-dot.d2{background:var(--warm)}
.k-card{display:grid;gap:9px;padding:9px;border-radius:8px;border:1px solid var(--border);border-left:3px solid;background:var(--surface2);opacity:0;transform:translateY(10px)}
.k-card.c0{border-left-color:#4f8cff}.k-card.c1{border-left-color:#8b6cf0}.k-card.c2{border-left-color:var(--warm)}
.k-lines{display:grid;gap:5px}
.k-lines i{height:6px;border-radius:3px;background:var(--border)}
.k-lines i+i{width:55%;opacity:.6}
.k-foot{display:flex;justify-content:space-between;align-items:center}
.k-pill{width:36px;height:8px;border-radius:4px;background:rgba(20,184,134,.5)}
.f-av{width:14px;height:14px;border-radius:50%}
.f-av.a0{background:var(--accent)}.f-av.a1{background:var(--warm)}.f-av.a2{background:#7aa8ff}
.in .k-card{animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*110ms + .2s)}

.badge-live{margin-left:8px;color:#6ff0b4;border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.1);vertical-align:1px}
.proj-more{display:grid;gap:20px;align-items:center;margin-top:56px;padding:30px;border-radius:22px;border:1px dashed rgba(var(--accent-rgb),.4);background:radial-gradient(500px circle at 0% 0%,rgba(var(--accent-rgb),.1),transparent 60%),var(--surface)}
.proj-more h3{font-size:1.35rem;margin-bottom:8px}
.proj-more p{color:var(--muted);max-width:56ch}
@media (min-width:700px){.proj-more{grid-template-columns:1fr auto;padding:34px 38px}}

/* ===== Modelo / posicionamento ===== */
.model{margin-top:40px;display:grid;gap:28px;padding:30px;border-radius:24px;border:1px solid var(--border);background:radial-gradient(600px circle at 0% 0%,rgba(var(--accent-rgb),.1),transparent 60%),var(--surface)}
.model h3{font-size:1.4rem;margin-bottom:10px}
.model-copy p{color:var(--muted);max-width:52ch}
.position{display:grid;gap:10px;align-content:center}
.pos{display:grid;gap:3px;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:var(--bg-alt)}
.pos b{font:600 .98rem var(--f-display)}
.pos span{color:var(--muted);font-size:.85rem}
.pos-side{opacity:.7}
.pos-mid{border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));box-shadow:0 0 40px -12px rgba(var(--accent-rgb),.45);opacity:1}
.pos-mid b{color:var(--accent-strong)}

/* ===== Passos ===== */
.steps{display:grid;gap:14px;counter-reset:s}
.step{position:relative;padding:24px 24px 24px 24px;border-radius:18px;border:1px solid var(--border);background:var(--surface)}
.step-n{display:inline-block;font:700 .85rem var(--f-display);color:var(--accent-strong);letter-spacing:.14em;margin-bottom:12px}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.94rem}

/* ===== Jogos ===== */
.games{display:grid;gap:34px;padding:34px;border-radius:28px;border:1px dashed rgba(var(--warm-rgb),.35);background:radial-gradient(520px circle at 100% 0%,rgba(var(--warm-rgb),.1),transparent 60%),var(--surface);align-items:center;overflow:hidden}
.games h2{margin:14px 0 16px;max-width:none}
.teaser{position:relative;aspect-ratio:16/10;border-radius:18px;background:#05080c;border:1px solid var(--border);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 60px rgba(var(--accent-rgb),.08)}
.teaser::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px);pointer-events:none}
.teaser-grid{position:absolute;inset:14px 14px 56px;display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.teaser-grid i{border-radius:4px;background:var(--surface2);animation:blink 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
.teaser-grid i:nth-child(3n){animation-duration:4.4s}
@keyframes blink{0%,100%{background:var(--surface2);opacity:.5}50%{background:var(--accent);opacity:.9;box-shadow:0 0 14px rgba(var(--accent-rgb),.55)}}
.teaser-bar{position:absolute;left:14px;right:14px;bottom:30px;height:6px;border-radius:4px;background:var(--surface2);overflow:hidden}
.teaser-bar i{display:block;height:100%;width:38%;border-radius:4px;background:linear-gradient(90deg,var(--warm),var(--accent));animation:load 3.6s ease-in-out infinite}
@keyframes load{0%{width:8%}60%{width:72%}100%{width:8%}}
.teaser-text{position:absolute;left:16px;bottom:8px;font:500 .72rem ui-monospace,Menlo,monospace;color:var(--muted);letter-spacing:.1em}

/* ===== Contato ===== */
.sec-contact{padding-top:0;padding-bottom:96px}
#jogos{padding-bottom:56px}
.contact{position:relative;text-align:center;padding:56px 24px;border-radius:32px;border:1px solid rgba(var(--accent-rgb),.3);background:radial-gradient(700px circle at 50% -10%,rgba(var(--accent-rgb),.2),transparent 60%),var(--surface);overflow:hidden;display:grid;justify-items:center;gap:18px}
.contact .eyebrow::before{display:none}
.contact h2{max-width:20ch}
.contact .lead{max-width:48ch}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.contact-note{color:var(--muted);font-size:.86rem;margin-top:6px}

/* ===== Rodapé ===== */
.site-footer{border-top:1px solid var(--border);padding:38px 0 46px;background:var(--bg-alt)}
.foot{display:grid;gap:18px}
.foot-brand{display:grid;gap:10px}
.foot-brand p,.foot-note{color:var(--muted);font-size:.85rem}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-size:.9rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent-strong)}

/* ===== Página legal ===== */
.legal{padding:120px 0 64px}
.legal h1{font-size:clamp(2rem,5vw,2.8rem);margin:18px 0 8px}
.legal h2{font-size:1.2rem;margin:34px 0 10px}
.legal p{color:var(--muted);margin-bottom:12px}
.legal-meta{font-size:.88rem}
.draft{margin:18px 0 0;padding:12px 16px;border-radius:12px;border:1px solid rgba(var(--warm-rgb),.3);background:rgba(var(--warm-rgb),.07);color:#e9d2b2 !important;font-size:.9rem}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--accent-strong);text-decoration:none;font-weight:500;font-size:.92rem}
.back .ico{transform:rotate(180deg)}

/* ===== Revelar ao rolar ===== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
.hero .mock-bar span{letter-spacing:.2em;text-transform:uppercase}

/* ===== Tablet ===== */
@media (min-width:700px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .model{grid-template-columns:1fr 1fr;padding:38px}
  .games{grid-template-columns:1.1fr .9fr;padding:44px}
  .foot{grid-template-columns:1fr auto;align-items:start}
  .foot-note{grid-column:1/-1}
}

/* ===== Desktop ===== */
@media (min-width:980px){
  .burger{display:none}
  .nav{position:static;inset:auto;flex-direction:row;align-items:center;gap:6px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;visibility:visible;transform:none;transition:none}
  .nav a{padding:8px 14px;border:0;border-radius:10px;font-size:.92rem}
  .nav a.active{background:rgba(var(--accent-rgb),.1);color:var(--accent-strong)}
  .nav .nav-cta{margin:0 0 0 8px;padding:0 20px;color:var(--on-accent)}
  .nav .nav-cta:hover{color:var(--on-accent)}
  .nav a{white-space:nowrap}
  .hero{padding:150px 0 100px}
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .sec{padding:116px 0}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-3.grid-4{grid-template-columns:repeat(2,1fr)}
  .proj{grid-template-columns:1.15fr 1fr;gap:56px}
  .proj:nth-child(even) .proj-visual{order:2}
  .steps{grid-template-columns:repeat(5,1fr);gap:0;position:relative}
  .steps::before{content:"";position:absolute;left:24px;right:24px;top:42px;height:1px;background:linear-gradient(90deg,var(--accent-deep),var(--border))}
  .step{background:transparent;border:0;padding:0 20px 0 24px}
  .step-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--accent-deep);color:var(--accent-strong);margin:0 0 22px -12px;position:relative;font-size:.72rem;letter-spacing:.04em;box-shadow:0 0 0 6px var(--bg-alt)}
  .step{padding-top:24px}
  .model{grid-template-columns:1fr 1.1fr}
  .position{grid-template-columns:1fr 1.15fr 1fr;align-items:stretch}
  .pos-mid{transform:scale(1.04)}
  .contact{padding:76px 40px}
}
@media (max-width:979px){
  .hero::before{display:none}
  .float.f1{left:0}.float.f2{right:0}
  .hero-mock{transform:none;animation:none}
}
@media (max-width:520px){
  .wrap{width:min(1180px,100% - 32px)}
  .mock-body{min-height:270px}
  .m-track{height:200px}
  .m-hours{height:230px}
  .m-week::after{top:124px}
  .k-col{min-height:210px}
  .float{font-size:.72rem;padding:7px 10px}
  .hu-row{gap:6px}
  .btn{width:100%}
  .hero-actions .btn,.contact-actions .btn{width:100%}
}

/* ===== Animações leves extras ===== */
.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent-deep),var(--accent-strong));pointer-events:none;opacity:0;transition:opacity .3s}
.progress.on{opacity:1}
.hero h1 .grad{background-size:220% 100%;animation:shine 10s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-glow{translate:0 calc(var(--py,0) * -.12px)}
.float{translate:0 calc(var(--py,0) * -.05px)}
.in .mods li{animation:chip .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--ci,0) * 35ms + .25s)}
@keyframes chip{from{opacity:0;transform:translateY(8px) scale(.96)}}
.step.in .step-n{animation:ping 1.3s ease-out .35s 1}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}100%{box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}}
.sec-head.in .eyebrow::before{animation:grow-line .8s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes grow-line{from{width:0}}
.foot-links > a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .3s,color .2s}
.foot-links > a:hover,.foot-links > a:focus-visible{background-size:100% 1px}

/* linha dos passos se desenhando (só com JS e movimento liberado) */
@media (min-width:1024px){
  .js-anim .steps::before{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
  .js-anim .steps.drawn::before{transform:none}
}
/* inclinação 3D leve nas telas de demonstração */
.proj-visual{perspective:1200px}
.proj-visual .mock{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform}
.proj-visual:hover .mock{box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(var(--accent-rgb),.14),0 0 60px -25px rgba(var(--accent-rgb),.35)}
/* ícones dos cartões reagem ao hover */
.card-ico{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s}
.card:hover .card-ico{transform:translateY(-3px) rotate(-6deg);background:rgba(var(--accent-rgb),.16);box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.6)}
/* pulso suave no botão do WhatsApp do contato */
.contact .btn-wa{animation:wa-pulse 2.8s ease-out 1.5s infinite}
@keyframes wa-pulse{0%{box-shadow:0 8px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 8px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 14px rgba(37,211,102,0)}}

/* ícones oficiais das redes no rodapé */
.foot-social{display:flex;gap:10px;margin-right:4px}
.foot-links .soc{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:color .25s,background .25s,border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.foot-links .soc:hover,.foot-links .soc:focus-visible{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-3px);box-shadow:0 10px 22px -10px var(--brand)}
.foot-links .soc-instagram:hover,.foot-links .soc-instagram:focus-visible{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:transparent;box-shadow:0 10px 22px -10px #dc2743}
.soc-ico{width:19px;height:19px}
@media (max-width:699px){.foot-social{flex-basis:100%;margin-right:0}}
/* botão flutuante do WhatsApp */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:55;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#3ee27d,#25d366 55%,#17a34a);color:#fff;box-shadow:0 12px 28px -8px rgba(37,211,102,.55),inset 0 1px 0 rgba(255,255,255,.35);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}
.wa-float .ico{width:28px;height:28px}
@media (min-width:1024px){.wa-float{right:28px;bottom:28px;width:58px;height:58px}}

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;animation-delay:0ms !important;transition-delay:0ms !important}
  [data-reveal]{opacity:1;transform:none}
  .blk,.k-card,.p-row,.a-tile,.a-row,.a-plate{opacity:1 !important;transform:none !important}
  .a-bar i,.p-bar i{width:var(--w) !important}
  .hu-line path{stroke-dashoffset:0}
  .marquee{overflow:visible;mask-image:none;-webkit-mask-image:none}
  .marquee-track{flex-wrap:wrap}
  .marquee-track[aria-hidden]{display:none}
}

@media (min-width:1100px){.grid-3.grid-4{grid-template-columns:repeat(4,1fr)}.grid-4 .card{padding:24px}}
@media (min-width:980px) and (max-width:1279px){.site-header .logo-wordimg{display:none}.nav{gap:2px}.nav a{padding:8px 9px;font-size:.86rem}.nav .nav-cta{margin-left:4px;padding:0 14px}}

/* ===== Ganho estimado nos cases ===== */
.gains{margin:4px 0 2px;padding:14px 16px;border-radius:14px;border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06)}
.gains-title{font:600 .72rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.gains ul{display:grid;gap:6px}
.gains li{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;color:var(--text)}
.gains li .ico{flex:none;width:16px;height:16px;margin-top:3px;color:var(--accent)}

/* ===== Formulário de contato ===== */
.cform{width:100%;max-width:600px;display:grid;gap:14px;text-align:left;margin-top:6px}
.cform-row{display:grid;gap:14px}
@media (min-width:640px){.cform-row{grid-template-columns:1fr 1fr}}
.cf{display:grid;gap:6px}
.cf>span{font-size:.86rem;font-weight:600;color:var(--text)}
.cf em{font-style:normal;font-weight:400;color:var(--muted);font-size:.8rem;margin-left:4px}
.cf input,.cf select,.cf textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.cf textarea{resize:vertical;min-height:110px}
.cf select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.cf select option{background:var(--surface);color:var(--text)}
.cf input::placeholder,.cf textarea::placeholder{color:#6f6f75}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.cf.bad input,.cf.bad select{border-color:#ff6b6b}
.cform-err{color:#ff8a8a;font-size:.9rem}
.cform .contact-actions{justify-content:flex-start;margin-top:2px}
.cform button.btn{border:0;cursor:pointer}
.cform-hint{color:var(--muted);font-size:.82rem}
.cform-hint a{color:var(--accent)}
@media (max-width:520px){.cform .contact-actions .btn{width:100%}}
/* "O que você precisa": opções em pílulas, no lugar de um select nativo */
.cf-need{border:0;padding:0;margin:0;min-width:0}
.cf-need legend{font-size:.86rem;font-weight:600;color:var(--text);padding:0;margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-size:.92rem;transition:border-color .2s,color .2s,background .2s,box-shadow .2s;user-select:none}
.pill:hover span{border-color:var(--accent-deep);color:var(--text)}
.pill input:checked+span{border-color:var(--accent);color:var(--on-accent);background:linear-gradient(135deg,var(--accent-strong),var(--accent) 55%,var(--accent-deep));font-weight:600;box-shadow:0 6px 20px -8px rgba(var(--accent-rgb),.6)}
.pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
.cf-need.bad .pill span{border-color:#ff6b6b}