/* DelimitA, prévia 5: site de portfólio de serviços. Claro e sóbrio, com a abertura escura em partículas. */
:root{
  --bg:#ffffff; --alt:#f4f6f5; --ink:#15181a; --mut:#566066; --line:#dfe4e2;
  --acc:#0b7a53; --acc-h:#08603f; --on-acc:#ffffff;
  --hbg:#0c0f10; --hfg:#f1ece1; --hmut:#a9aea9; --hacc:#3ddc97; --hline:rgba(241,236,225,.18); --hcard:rgba(241,236,225,.06);
  --tint:#e6f3ed;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:min(1160px,100% - 48px);margin:0 auto}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
.hero :focus-visible{outline-color:var(--hacc)}

/* menu */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{width:min(1160px,100% - 48px);margin:0 auto;height:64px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 1.1rem/1 var(--sans)}
.brand .core{fill:var(--acc)}
.links{display:flex;gap:24px;margin-right:auto;font-size:15px}
.links a{text-decoration:none;color:var(--mut)}
.links a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--acc);color:var(--on-acc);text-decoration:none;font:600 16px/1 var(--sans);padding:15px 26px;border-radius:8px;border:0;cursor:pointer;transition:background-color .2s}
.btn:hover{background:var(--acc-h)}
.btn-sm{padding:11px 18px;font-size:14.5px}
.btn-d{background:var(--hacc);color:#04120c}
.btn-d:hover{background:#6ae9b3}
.lnk{font-weight:600;color:var(--acc);text-decoration:none;border-bottom:2px solid transparent}
.lnk:hover{border-bottom-color:currentColor}

/* abertura escura */
.hero{background:var(--hbg);color:var(--hfg);overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;min-height:min(640px,calc(100vh - 64px));padding:48px 0}
h1{margin:0 0 18px;font:600 clamp(2.2rem,4.2vw,3.5rem)/1.1 var(--sans);letter-spacing:-.02em}
.lead{margin:0 0 28px;font-size:1.2rem;color:var(--hmut);max-width:32em}
.acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero .lnk{color:var(--hacc)}
.hero-vis{display:flex;flex-direction:column;gap:14px;align-items:center}
.gl-box{position:relative;width:100%;height:min(360px,40vh);min-height:250px}
#hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.no-gl #hero-gl{display:none}
.hv-cap{position:absolute;left:0;right:0;top:6px;text-align:center;font-size:14px;color:var(--hmut);transition:opacity .4s}
.fp{width:min(360px,100%);border:1px solid var(--hline);border-radius:16px;background:rgba(12,15,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 16px}
.fp-h{font-size:12.5px;color:var(--hmut);margin-bottom:14px}
.fp-n{display:flex;justify-content:space-between;position:relative;margin-bottom:12px}
.fp-n::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--hline)}
.fp-n li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10.5px;color:var(--hmut);transition:color .3s}
.fp-n li::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--hbg);border:1.5px solid var(--hline);transition:background-color .3s,border-color .3s}
.fp-n li.on{color:var(--hfg)}
.fp-n li.on::before{background:var(--hacc);border-color:var(--hacc)}
.fp-n li.done::before{border-color:var(--hacc)}
.fp-l{font:12px/1.7 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--hmut);min-height:5.2em}
.fp-l div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-l div:last-child{color:var(--hacc)}

/* seções */
.sec{padding:84px 0}
.sec.alt{background:var(--alt)}
h2{margin:0 0 14px;font:600 clamp(1.8rem,3.2vw,2.5rem)/1.15 var(--sans);letter-spacing:-.015em}
h2.h3{font-size:1.35rem;margin-bottom:16px}
.sub{margin:56px 0 6px;font:600 1.5rem/1.2 var(--sans)}
.lead2{margin:0 0 34px;color:var(--mut);max-width:44em}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid2.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.svc:hover{border-color:var(--acc);box-shadow:0 10px 30px -18px rgba(11,122,83,.5)}
.svc>a{display:block;padding:26px 24px;text-decoration:none;height:100%}
.svc.plain{padding:26px 24px}
.svc.plain:hover{border-color:var(--line);box-shadow:none}
.svc p{margin:8px 0 0;color:var(--mut);font-size:15.5px}
.svc b{font-size:1.15rem}
.svc .ic{margin-bottom:14px}
.svc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.more{display:inline-block;margin-top:14px;font-weight:600;color:var(--acc)}
.svc:hover .more{text-decoration:underline}
.ic{width:32px;height:32px;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.tag{font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.t-on{background:var(--tint);border-color:#bfe3d1;color:#0a5c3e}
.biz{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.biz b{font-size:1.1rem}
.biz p{margin:8px 0 14px;color:var(--mut);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-size:13.5px;padding:6px 12px;border-radius:999px;background:var(--alt);text-decoration:none;color:var(--ink)}
.chips a:hover{background:var(--tint);color:#0a5c3e}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{background:var(--alt);border-radius:var(--r);padding:28px 26px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:600}
.step h3{margin:14px 0 8px;font:600 1.25rem/1.25 var(--sans)}
.step p{margin:0;color:var(--mut)}
.live{max-width:none}
.band{background:linear-gradient(135deg,#dcefe6 0%,#e7ecf6 60%,#f3e8ef 100%);border-radius:20px;padding:56px clamp(24px,5vw,64px)}
.band p{max-width:38em;margin:0 0 26px;font-size:1.1rem}
.band .small{font-size:14.5px;color:var(--mut);margin:20px 0 0}

/* página de serviço */
.shero{padding:44px 0 56px;background:linear-gradient(135deg,#eef6f2 0%,#f3f4f8 100%)}
.crumb{margin:0 0 22px;font-size:14.5px;color:var(--mut)}
.crumb a{color:var(--acc);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.svc-h.big{justify-content:flex-start;flex-wrap:nowrap;gap:18px;align-items:flex-start;margin-bottom:18px}
.svc-h.big .ic{width:44px;height:44px;margin-top:6px;flex:none}
.shero h1{margin:0;max-width:20em}
.shero .lead{color:#3a4248;max-width:40em}
.callout{margin:24px 0 0;padding:14px 18px;border-left:4px solid var(--acc);background:#fff;border-radius:0 10px 10px 0;max-width:44em;font-size:15.5px;color:#3a4248}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ticks li{position:relative;padding:0 0 12px 28px;color:#33393e}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(-45deg)}
.ticks a{text-decoration:none;border-bottom:1px solid var(--line)}
.ticks a:hover{border-bottom-color:var(--acc)}

.foot{background:var(--alt);border-top:1px solid var(--line);padding:46px 0 26px;font-size:14.5px;color:var(--mut)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:30px}
.foot b{display:block;color:var(--ink);margin-bottom:10px}
.foot p{margin:0;max-width:26em}
.foot li{margin-bottom:6px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-end{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font-size:13.5px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--ink);color:#fff;font:500 14px/1.3 var(--sans);padding:12px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center;z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}

.anim .rv{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.anim .rv.in{opacity:1;transform:none}

@media (max-width:1000px){ .grid2.four{grid-template-columns:repeat(2,minmax(0,1fr))} .cols3{grid-template-columns:minmax(0,1fr);gap:28px} }
@media (max-width:900px){
  .nav-in{flex-wrap:wrap;height:auto;padding:10px 0 4px;gap:8px 12px}
  .links{order:3;width:100%;overflow-x:auto;gap:22px;margin:0;padding:6px 0 8px;white-space:nowrap;font-size:14.5px}
  .brand{margin-right:auto}
  html{scroll-padding-top:112px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0 40px;min-height:0}
  .hero-vis{order:-1}
  .gl-box{height:270px;min-height:0}
  .fp{display:none}
  .grid3,.grid2,.steps{grid-template-columns:minmax(0,1fr)}
  .sec{padding:56px 0}
  .band{border-radius:16px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

.player{--acc:#3DDC97}

/* ===== demo ao vivo (player.js) ===== */
.player { --pbg: #0B0F14; background: linear-gradient(180deg, #11161C, #0B0F14); border: 1px solid rgba(244,239,230,.12); border-radius: 22px; padding: 14px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03), 0 0 80px -30px color-mix(in srgb, var(--acc) 40%, transparent); color: #E9EDEF; text-align: left; }
.p-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.p-tab { font: 600 13px/1 var(--sans); color: #9AA5AE; background: transparent; border: 1px solid rgba(244,239,230,.14); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.p-tab.on { color: #15171B; background: var(--acc); border-color: transparent; }
.p-stage { display: grid; gap: 12px; }
@media (min-width: 760px) { .p-stage { grid-template-columns: 250px 1fr; } }
.p-phone { background: #0B141A; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; min-height: 340px; }
.p-phone-bar { display: flex; align-items: center; gap: 10px; background: #1F2C34; padding: 9px 12px; font-size: 13px; line-height: 1.2; }
.p-phone-bar small { display: block; color: #3DDC97; font-size: 11px; }
.p-av { width: 30px; height: 30px; border-radius: 50%; background: #2A3942; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #AEBAC1; }
.p-chat { flex: 1; padding: 12px 9px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; max-height: 340px; font: 13px/1.35 system-ui, sans-serif; }
.p-msg { position: relative; max-width: 92%; padding: 6px 8px 17px; border-radius: 9px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.p-msg.on { opacity: 1; transform: none; }
.p-msg.in { background: #202C33; align-self: flex-start; border-top-left-radius: 2px; }
.p-msg.out { background: #005C4B; align-self: flex-end; border-top-right-radius: 2px; }
.p-msg small { opacity: .75; }
.p-who { display: block; font-size: 11px; font-weight: 700; color: #53BDEB; margin-bottom: 3px; }
.p-who.bot { color: #7AE3C3; }
.p-t { position: absolute; right: 7px; bottom: 2px; font-size: 10px; color: #8696A0; }
.p-card { display: grid; gap: 1px; background: #F2F4F5; color: #1C1E21; border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; }
.p-card small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #667781; opacity: 1; }
.p-card b { font-size: 17px; }
.p-card span { font-size: 11px; color: #54656F; }
.p-react { position: absolute; left: 8px; bottom: -11px; background: #202C33; border: 2px solid #0B141A; border-radius: 999px; padding: 0 5px; font-size: 12px; line-height: 19px; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.p-react.on { transform: scale(1); }
.p-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.p-term { background: #05080B; border: 1px solid rgba(244,239,230,.10); border-radius: 12px; overflow: hidden; }
.p-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(244,239,230,.08); font: 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #7B8791; }
.p-term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #2B343C; }
.p-term-bar i:first-child { background: #C27C3A; }
.p-term-bar span { margin-left: 6px; }
.p-log { padding: 10px 12px; min-height: 150px; font: 12px/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #A8F0CF; }
.p-ln { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ln.on { opacity: 1; transform: none; }
.p-p { color: var(--acc); }
.p-sheet { background: #fff; color: #1F2328; border-radius: 12px; overflow: hidden; font: 12px/1.3 system-ui, sans-serif; }
.p-sheet-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F3F5F7; font-weight: 600; border-bottom: 1px solid #E3E6EA; }
.p-sheet-bar i { width: 10px; height: 10px; border-radius: 3px; background: #1E8E3E; }
.p-sheet table { width: 100%; border-collapse: collapse; }
.p-sheet th, .p-sheet td { padding: 6px 9px; text-align: left; border-bottom: 1px solid #EEF0F2; white-space: nowrap; }
.p-sheet th { color: #667085; font-weight: 600; }
.p-sheet tr.new td { animation: rowIn 1.6s ease-out; }
.p-sheet tr.found td { background: #FFF4CF; }
.st-ok, .st-compensado { color: #1E8E3E; font-weight: 700; }
.st-duplicado, .st-outro, .st-devolvido { color: #C2410C; font-weight: 700; }
@keyframes rowIn { 0% { background: #bff0d8; } 100% { background: transparent; } }
.p-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: #7B8791; }
.p-bar em { font-style: normal; margin-left: auto; white-space: nowrap; }
.p-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(244,239,230,.2); background: transparent; color: #E9EDEF; font-size: 10px; cursor: pointer; flex: none; }
.p-prog { flex: 1; height: 3px; background: rgba(244,239,230,.12); border-radius: 3px; overflow: hidden; }
.p-prog span { display: block; height: 100%; width: 0; background: var(--acc); transition: width .6s; }
@media (max-width: 560px) { .p-bar em { display: none; } }


.p-tabs{flex-wrap:wrap}.p-tab{white-space:nowrap;font-size:12.5px;padding:8px 12px}

.brand .la{color:var(--acc);font-weight:700}

.mkimg{display:block;height:33px;width:auto}
.brand .bt{display:grid;gap:3px;line-height:1}
.brand .bt small{font:500 .68rem/1 var(--sans);color:var(--mut,#566066);letter-spacing:0}

.mods{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}.mods li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}.small2{margin:22px 0 0;font-weight:600}

.big-q{margin:0 0 14px;font-size:clamp(1.8rem,4.6vw,3rem);line-height:1.1;font-weight:700;letter-spacing:-.02em;max-width:18em}

.hero h1 .h1d{display:block;margin-top:.35em;font-size:.42em;font-weight:600;opacity:.8;letter-spacing:-.01em}

.p-ex{margin-left:auto;font:600 10.5px/1 var(--sans,system-ui);padding:3px 8px;border:1px solid currentColor;border-radius:99px;opacity:.7;white-space:nowrap}

.skip{position:absolute;left:-999px;top:0;background:#fff;color:#0F1F1B;padding:10px 14px;z-index:100;border-radius:0 0 8px 0}.skip:focus{left:0}
.p-ex{font-size:12px}
@media (max-width:760px){.nav-in a,.btn-sm{min-height:44px;display:inline-flex;align-items:center}.p-tab{min-height:44px}}

.prose{max-width:46em}.prose p{margin:0 0 1.1em;line-height:1.65}