/* ==========================================================================
   COTHSYS · página de apresentação
   Ideia: a folha de impressão de uma gráfica. Vários trabalhos de clientes saem lado a lado na mesma folha;
   aqui, o mesmo sistema sai com a marca de várias empresas. A página é um quadro de blocos preenchidos
   (sem contornos, sem sombras, cantos retos como o site da COTH). Os pedaços de tela marcados com data-ui
   são o produto: neles valem os cantos, as cores e as bordas de cada marca.
   ========================================================================== */
:root{
  --bg:#0a0a0a; --t1:#121212; --t2:#191919; --t3:#232323; --paper:#f2f2f0;
  --ink:#f3f3f1; --soft:#a8a8a6; --soft2:#7a7a78;
  --acc:#F26410; --acc-rgb:242,100,16; --acc-hi:#ff7a2b;
  --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --disp:'Archivo Black','Space Grotesk',sans-serif; --mono:var(--font);
  --m:clamp(16px,2.2vw,32px); --g:8px; --head:64px;
  --t-xl:clamp(30px,4.6vw,68px); --t-l:clamp(21px,1.9vw,27px); --t-m:18px; --t-b:16px; --t-s:14px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.33,1,.68,1); --ease-exit:cubic-bezier(.4,0,1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-b)/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
::selection{background:var(--acc);color:#0a0a0a}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html{scrollbar-color:#3a3a3a var(--bg)}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:#0a0a0a;padding:10px 16px;z-index:999;font-weight:700}.skip:focus{left:8px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--m)}
.opt{font-weight:400;opacity:.75}
h1,h2,h3,h4{margin:0;font-weight:400}
h2{font:400 var(--t-xl)/.98 var(--disp);letter-spacing:-.025em;text-wrap:balance}
h4{font:600 var(--t-b)/1.3 var(--font);color:var(--soft);margin:0 0 14px}
.note{font-size:var(--t-s);color:var(--soft)}

/* ---------- botões: retos, uma cor, resposta ao toque ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;font:600 15px/1.1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,transform .14s var(--ease)}
.btn i{font-size:18px;transition:transform .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--acc);color:#0a0a0a}
.btn-g{background:var(--t3);color:var(--ink)}
.btn-ink{background:#0a0a0a;color:var(--ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
@media (hover:hover) and (pointer:fine){
  .btn-p:hover{background:var(--acc-hi)}.btn-g:hover{background:#2e2e2e}.btn-ink:hover{background:#1f1f1f}
  .btn:hover i.ph-arrow-right{transform:translateX(3px)}
}
.lnk-arrow{font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;text-decoration-thickness:.08em;transition:text-decoration-color .18s ease}
.lnk-arrow:hover{text-decoration-color:currentColor}

/* ---------- cabeçalho ---------- */
.top{position:sticky;top:0;z-index:100;height:var(--head);background:var(--bg);transition:background-color .25s ease}
.top.stuck{background:#101010}
.top-in{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:block;flex:0 0 auto}.brand img{height:30px;width:auto;display:block}
.nav{display:flex;gap:24px;margin-left:auto;font-size:16px;font-weight:500}
.nav a{text-decoration:none;color:#cfcfcd;white-space:nowrap;transition:color .18s ease}.nav a:hover{color:#fff}
.top-cta{display:flex;align-items:center;gap:18px}
.link-entrar{font-size:16px;font-weight:600;text-decoration:none;color:#dcdcda}.link-entrar:hover{color:#fff}
.burger{display:none;flex:0 0 44px;width:44px;height:44px;border:0;background:var(--t3);cursor:pointer;position:relative;transition:transform .14s var(--ease)}
.burger:active{transform:scale(.97)}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pai{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;margin-right:-12px;min-height:36px;padding:0 12px 0 10px;background:var(--t3);color:#dcdcda;text-decoration:none;font:600 13px/1 var(--font);letter-spacing:.04em;transition:color .18s,background-color .18s,transform .14s var(--ease)}
.pai i{font-size:16px;transition:transform .25s var(--ease)}
.pai:hover{color:#fff;background:#2e2e2e}.pai:hover i{transform:translateX(-3px)}.pai:active{transform:scale(.97)}
.nav .nav-cta,.nav .nav-pai{display:none}
@media (width > 1180px){.top-in{gap:22px}.nav{gap:22px}}
@media (1180px < width <= 1320px){.pai{padding:0 10px;margin-right:-6px}.pai span{display:none}}
@media (max-width:1180px){
  .nav{position:fixed;left:0;right:0;top:var(--head);bottom:0;background:var(--bg);flex-direction:column;gap:6px;padding:16px var(--m) 32px;margin:0;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .3s var(--ease);overflow-y:auto}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;background:var(--t1);font-size:18px;color:#fff}
  .nav .nav-pai{display:flex;color:#dcdcda;background:var(--t2)}
  .top-cta{margin-left:auto}
  .burger{display:block}
}
@media (max-width:1060px){.link-entrar{display:none}}
@media (max-width:520px){.top-cta .btn{padding:0 12px;font-size:13px}.brand img{height:26px}.top-in{gap:12px}.pai{padding:0 10px;margin-right:-4px}.pai span{display:none}}
@media (max-width:420px){.top-cta{display:none}.burger{margin-left:auto}.nav .nav-cta{display:flex;background:var(--acc);color:#0a0a0a;font-weight:700;justify-content:center}}

/* ---------- seções: separadas por espaço e por um degrau de tom, nunca por linha ---------- */
.sec{padding:clamp(72px,7.2vw,108px) 0;position:relative}
.sec-tone{background:var(--t1)}
.sec-acc{background:var(--acc);color:#0a0a0a}
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.intro h2{grid-column:1/8}
.intro p{grid-column:8/13;font-size:var(--t-m);line-height:1.55;max-width:58ch}
@media (max-width:900px){.intro{grid-template-columns:minmax(0,1fr)}.intro h2,.intro p{grid-column:auto}}
@media (max-width:560px){:root{--t-xl:28px}.intro p{font-size:18px}}

/* ==========================================================================
   Pedaços de tela (o produto): cada um com as cores, o tema e os cantos de uma marca
   ========================================================================== */
.fr{--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--f-bg:#161616;--f-tx:#f2f2f0;--f-mut:#a0a0a0;--f-surf:#202020;
  background:var(--f-bg);color:var(--f-tx);font:500 13.5px/1.35 var(--font);padding:14px;display:grid;gap:10px;border-radius:calc(10px*var(--r,1));text-align:left;min-width:0}
.fr[data-th=light]{--ok:#15803d;--warn:#8a4b06;--bad:#dc2626;--f-bg:#fff;--f-tx:#15181d;--f-mut:#545c69;--f-surf:#f0f2f5}
.fr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.fr-h b{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fr-h span{color:var(--f-mut);font-size:13px;white-space:nowrap}
.fr-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fr-rows li{display:flex;align-items:center;gap:10px;background:var(--f-surf);border-radius:calc(7px*var(--r,1));padding:8px 10px;min-width:0}
.fr-rows li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-rows li b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fr-ag li time{font-weight:700;color:var(--a-ink);font-variant-numeric:tabular-nums}
.fr-tag{font-style:normal;font-weight:700;font-size:13px;line-height:1;padding:4px 8px;border-radius:calc(99px*var(--r,1));white-space:nowrap;background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a-ink)}
.fr-tag.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.fr-tag.esp{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.fr-tag.bai{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.fr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.fr-kpis div{background:var(--f-surf);border-radius:calc(8px*var(--r,1));padding:10px;min-width:0}
.fr-kpis small{display:block;color:var(--f-mut);font-size:13px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-kpis b{display:block;font:400 21px/1.1 var(--disp);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.fr .g{color:var(--ok)}.fr .a{color:var(--a-ink)}.fr .r{color:var(--bad)}
.fr-bars{height:92px;display:flex;align-items:flex-end;gap:6px}
.fr-bars i{flex:1;height:var(--h);background:color-mix(in srgb,var(--a) 34%,transparent);border-radius:calc(4px*var(--r,1)) calc(4px*var(--r,1)) 0 0}
.fr-bars i.on{background:var(--a)}
.fr-foot{color:var(--f-mut);font-size:13px}
.fr-rc-h{display:grid;gap:2px;text-align:center}.fr-rc-h b{font-weight:700;font-size:16px}.fr-rc-h span{color:var(--f-mut);font-size:13px}
.fr-rc{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fr-rc li{display:flex;justify-content:space-between;gap:10px}.fr-rc li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fr-rc-t{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;box-shadow:inset 0 2px 0 var(--f-surf)} /* taste-skill-ignore: recibo do produto (data-ui): barra do total */
.fr-rc-t span{font-weight:700}.fr-rc-t b{font:400 22px/1 var(--disp);color:var(--a-ink);font-variant-numeric:tabular-nums}
.fr-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-slots span{text-align:center;background:var(--f-surf);border-radius:calc(7px*var(--r,1));padding:8px 0;font-weight:600;font-variant-numeric:tabular-nums}
.fr-slots .sel{background:var(--a);color:var(--on)}
.fr-msg-h{display:flex;align-items:center;gap:8px}.fr-msg-h i{font-size:20px;color:#25d366}.fr-msg-h b{font-weight:700}
.fr-bubble{position:relative;background:#144d37;color:#e9fff3;border-radius:calc(10px*var(--r,1));padding:10px 12px 22px;font-size:14px;line-height:1.4}
.fr[data-th=light] .fr-bubble{background:#dcf8c6;color:#0f2a1b}
.fr-bubble time{position:absolute;right:10px;bottom:6px;font-size:13px;opacity:.75}
.fr-brand{padding:2px 4px}.fr-logo{font:400 17px/1.1 var(--disp);letter-spacing:-.02em;color:var(--a-ink)}
.fr-menu{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fr-menu li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:calc(7px*var(--r,1));color:var(--f-mut);font-weight:500}
.fr-menu li i{font-size:18px}.fr-menu li span{flex:1}
.fr-menu li.on{background:color-mix(in srgb,var(--a) 16%,transparent);color:var(--f-tx)}.fr-menu li.on i{color:var(--a-ink)}
.fr-menu em{font-style:normal;font-weight:700;font-size:13px;line-height:1;background:var(--a);color:var(--on);border-radius:calc(99px*var(--r,1));padding:3px 7px}
.fr-kb{display:grid;gap:6px}
.fr-kb>div{background:var(--f-surf);border-radius:calc(8px*var(--r,1));padding:10px;display:grid;gap:4px;justify-items:start}
.fr-kb b{font-weight:700}.fr-kb span{color:var(--f-mut);font-size:13px}
.fr-field{display:flex;align-items:center;gap:8px;background:var(--f-surf);border-radius:calc(8px*var(--r,1));padding:10px;color:var(--f-mut)}
.fr-btn{background:var(--a);color:var(--on);text-align:center;font-weight:700;border-radius:calc(8px*var(--r,1));padding:10px}
.fr-fi-h{display:flex;align-items:center;gap:10px}.fr-fi-h b{display:block;font-weight:700;font-size:16px}.fr-fi-h span{color:var(--f-mut);font-size:13px}
.fr-av{width:38px;height:38px;border-radius:50%;background:var(--a);color:var(--on);display:grid;place-items:center;font:400 17px/1 var(--disp);flex:0 0 auto}
.fr-dl{margin:0;display:grid;gap:6px}.fr-dl div{display:flex;justify-content:space-between;gap:10px;background:var(--f-surf);border-radius:calc(7px*var(--r,1));padding:8px 10px}
.fr-dl dt{color:var(--f-mut)}.fr-dl dd{margin:0;font-weight:600;text-align:right}

/* ==========================================================================
   TOPO: a folha. Seis colunas de pedaços de tela com a etiqueta de cada empresa; no meio, o bloco de texto
   ========================================================================== */
.hero{position:relative;height:clamp(640px,calc(100svh - var(--head)),960px);overflow:hidden;background:var(--bg)}
.sheet{position:absolute;inset:0;padding:0 12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.sh-col{position:relative;overflow:hidden;min-width:0}
.sh-track{display:grid;gap:12px;padding-bottom:12px}
.sh-c2 .sh-track{margin-top:-90px}.sh-c5 .sh-track{margin-top:-20px}.sh-c6 .sh-track{margin-top:-70px}
.sh-mid{grid-column:3/5;display:flex;flex-direction:column;gap:12px;min-width:0}
.sh-top,.sh-bot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:hidden;min-height:0}
.sh-top{flex:0 0 calc(26% - 12px);align-items:end}
.sh-bot{flex:1 1 0;align-items:start}
.fm{margin:0;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.fm .fr{border-radius:0}
.fm .fr-rows li{flex-wrap:wrap;row-gap:4px}.fm .fr-rows li span{flex:1 1 55%}
.fm figcaption{height:28px;display:flex;align-items:center;padding:0 10px;font:600 13px/1 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
.hero-card{flex:0 0 auto;min-height:410px;background:var(--paper);color:#0a0a0a;padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:18px;position:relative;z-index:2}
.hc-logo{height:30px;width:auto;align-self:flex-start}
.hero-card h1{font:600 clamp(24px,1.9vw,27px)/1.15 var(--font);letter-spacing:-.02em;text-wrap:balance;max-width:20ch}
.hero-card p{font-size:var(--t-b);line-height:1.5;color:#26262a;max-width:44ch}.hero-card p b{color:#0a0a0a;white-space:nowrap}
.hc-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hc-act .lnk-arrow{color:#0a0a0a}
.hc-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:var(--t-s);color:#3d3d40}
.hc-foot a{color:#0a0a0a;font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color .18s}.hc-foot a:hover{text-decoration-color:currentColor}
.hc-foot span{flex-basis:100%}
@media (max-width:1180px){.sheet{grid-template-columns:repeat(4,minmax(0,1fr))}.sh-c1,.sh-c6{display:none}.sh-mid{grid-column:2/4}}
@media (max-width:760px){
  .hero{height:auto;overflow:visible}
  .sheet{position:relative;inset:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 300px;gap:8px;padding:8px var(--m) 0;height:auto;overflow:hidden}
  .sh-col{height:300px}
  .sh-mid{display:contents}.sh-top,.sh-bot,.sh-c5,.sh-c6{display:none}
  .sh-c1,.sh-c2{display:block}.sh-c1{order:2}.sh-c2{order:3}.sh-c2 .sh-track{margin-top:-60px}
  .hero-card{order:1;grid-column:1/-1;min-height:0;margin:0 calc(-1 * var(--m) + 8px)}
  .hero-card h1{font-size:25px}
}

/* ==========================================================================
   MÓDULOS: quadro por área (o módulo aberto vira o bloco grande abaixo)
   ========================================================================== */
.mods{display:grid;gap:var(--g)}
.mods-dir{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;background:var(--t1);padding:20px 12px 14px}
.mg{min-width:0}
.mg h3{font:600 var(--t-b)/1.2 var(--font);color:var(--soft);margin:0 10px 10px}
.mg-l{display:grid;gap:2px}
.md{position:relative;z-index:2;display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:6px 10px;border:0;background:none;color:var(--ink);font:500 var(--t-b)/1.2 var(--font);text-align:left;cursor:pointer;transition:color .18s ease}
.md:not(.on){transition:color .18s ease,background-color .18s ease}
.md i{font-size:21px;color:var(--soft);flex:0 0 auto;transition:color .18s ease}
.md.on{background:var(--acc)}
.md.on,.md.on i{color:#0a0a0a}
.mods-dir.moving .md.on{background:transparent}
@media (hover:hover) and (pointer:fine){.md:not(.on):hover{background:var(--t3)}.md:not(.on):hover i{color:var(--ink)}}
.md-ind{position:absolute;left:0;top:0;width:0;height:0;background:var(--acc);z-index:1;pointer-events:none;transform-origin:0 0;opacity:0}
.mods-dir.moving .md-ind{opacity:1}
.mods-view{background:var(--t2);min-width:0}
.mod-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);padding:clamp(24px,3.6vw,52px)}
.mod-panel[hidden]{display:none}
html:not(.js) .mod-panel[hidden]{display:grid}
.mp-txt h3{font:400 clamp(28px,3.4vw,50px)/1 var(--disp);letter-spacing:-.025em;text-wrap:balance}
.mp-sub{font-size:var(--t-l);line-height:1.25;color:var(--soft);margin:14px 0 22px}
.mp-desc{font-size:var(--t-m);line-height:1.55;max-width:60ch;margin-bottom:30px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:24px;font-size:var(--t-b);line-height:1.5}
.ticks li::before{content:'';position:absolute;left:2px;top:.55em;width:8px;height:8px;background:currentColor;opacity:.55}
.mp-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.mp-frag{container-type:inline-size}
.mp-frag .fr{font-size:16px;padding:18px;gap:12px}
.mp-side h4{margin:0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--t3);padding:9px 13px;font-size:var(--t-s);font-weight:500}
@media (max-width:1100px){.mods-dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.mod-panel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .mp-txt h3{font-size:24px}
  .mods-dir{grid-template-columns:minmax(0,1fr)}
  .mg-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md{font-size:16px;gap:9px;padding:6px 8px}.md i{font-size:19px}
  .mod-panel{padding:22px 18px}
}

/* ==========================================================================
   AGENDAMENTO ONLINE: dias à esquerda, a agenda do dia em faixas
   ========================================================================== */
.ag-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ag-head h2 span{display:block}.ag-head .soft{color:var(--soft2)}
.ag-lead{font-size:var(--t-m);max-width:64ch;margin:24px 0 clamp(40px,5vw,56px)}
.ag{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ag-days{display:grid;gap:6px}
.ag-day{display:grid;gap:3px;justify-items:start;width:100%;min-height:64px;padding:10px 14px;border:0;background:var(--t2);color:var(--ink);text-align:left;cursor:pointer;font-family:var(--font);transition:background-color .18s ease,color .18s ease,transform .14s var(--ease)}
.ag-day:active{transform:scale(.97)}
.ag-day b{font-size:var(--t-b);font-weight:700;line-height:1.1}.ag-day span,.ag-day small{font-size:13px;color:var(--soft);line-height:1.2}
.ag-day.on{background:var(--ink);color:#0a0a0a}.ag-day.on span,.ag-day.on small{color:#3a3a3a}
@media (hover:hover) and (pointer:fine){.ag-day:not(.on):hover{background:var(--t3)}}
.ag-bands{min-width:0}
.ag-p{display:grid;gap:4px}
.ag-p[hidden]{display:none}
.band{display:grid;grid-template-columns:76px minmax(0,1fr) 150px 138px;align-items:center;gap:18px;min-height:76px;padding:10px 20px;background:var(--t2)}
.band:nth-child(even){background:var(--t3)}
.b-time{font:700 20px/1 var(--font);font-variant-numeric:tabular-nums}
.b-main{min-width:0}.b-main b{display:block;font-size:var(--t-m);font-weight:600;line-height:1.25}.b-main span{display:block;font-size:var(--t-s);color:var(--soft);margin-top:3px}
.b-pro{display:flex;align-items:center;gap:10px;font-size:16px}
.b-pro i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font);font-style:normal;flex:0 0 auto}
.b-st{font-style:normal;font:700 var(--t-s)/1 var(--font);padding:10px 8px;text-align:center;color:#0a0a0a}
.b-ok{background:#4ade80}.b-link{background:var(--acc)}.b-esp{background:#fbbf24}.b-rem{background:#93c5fd}
.band-off{grid-template-columns:76px minmax(0,1fr);color:var(--soft)}
.rules{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px 36px}
.rules b{display:block;font-size:18px;font-weight:600;margin-bottom:6px}.rules span{display:block;color:var(--soft);font-size:16px;line-height:1.55}
@media (max-width:860px){
  .ag{grid-template-columns:minmax(0,1fr)}
  .ag-days{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;position:sticky;top:var(--head);z-index:5;background:var(--t1);padding:6px 0}
  .ag-day{min-height:56px;padding:8px 6px;justify-items:center;text-align:center}.ag-day small{display:none}
  .band{grid-template-columns:58px minmax(0,1fr);grid-template-areas:'t m' 't p' 't s';gap:6px 14px;padding:14px 16px}
  .b-time{grid-area:t;align-self:start;font-size:18px}.b-main{grid-area:m}.b-pro{grid-area:p}.b-st{grid-area:s;justify-self:start;padding:7px 10px}
  .band-off{grid-template-areas:'t m'}
}

/* ==========================================================================
   SEGMENTOS: o leque de cores (cada segmento é uma amostra; a aberta mostra o sistema dele)
   ========================================================================== */
.fan{display:flex;height:580px;overflow:hidden}
.fan-i{position:relative;display:flex;flex:0 0 46px;min-width:0;background:var(--c);color:var(--on);overflow:hidden;transition:flex-basis .5s var(--ease-io),flex-grow .5s var(--ease-io)}
.fan-i.open{flex:1 1 46px}
.fan-b{flex:0 0 46px;width:46px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 22px;border:0;background:none;color:inherit;cursor:pointer;font-family:var(--font);transition:background-color .2s ease}
.fan-b span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 var(--t-b)/1 var(--font);white-space:nowrap}
.fan-i.open .fan-b{background:color-mix(in srgb,var(--c) 84%,#000);cursor:default}
@media (hover:hover) and (pointer:fine){.fan-i:not(.open) .fan-b:hover{background:color-mix(in srgb,var(--c) 88%,#fff)}}
.fan-p{flex:1 1 auto;min-width:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s}
.fan-i.open .fan-p{visibility:visible;transition-delay:0s}
.fp-in{width:calc(min(100vw,1440px) - 2 * var(--m) - 13 * 46px - 20px);height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,40px)}
.fp-txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.fp-txt h3{font:400 var(--t-l)/1.1 var(--disp);letter-spacing:-.02em}
.fp-frase{font-size:var(--t-m);line-height:1.45}
.fp-txt h4{color:inherit;opacity:.78;margin:8px 0 0}
.fp-txt .ticks li{font-size:16px}
.fp-txt .btn{margin-top:auto}
.fan .btn-p{background:#0a0a0a;color:#fff}
.fp-menu{background:#111;color:#f2f2f0;padding:18px;align-self:stretch;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-width:0}
.fp-mh{font-size:14px;font-weight:600;color:#bdbdbb}
.fp-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;align-content:start}
.fp-menu li{display:flex;flex-direction:column;justify-content:center;min-height:34px;padding:4px 10px;background:#1b1b1b;font-size:14px;line-height:1.25;min-width:0;overflow:hidden}
.fp-menu li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-menu li.ren{background:color-mix(in srgb,var(--c) 26%,#141414)}
.fp-menu li s{font-size:13px;color:#a6a6a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-menu li.ren span{font-weight:700}
@media (max-width:1100px){
  .fan{flex-direction:column;height:auto;gap:4px}
  .fan-i{flex:none;flex-direction:column}
  .fan-i.open{flex:none}
  .fan-b{flex:none;width:100%;min-height:56px;padding:0 18px;justify-content:flex-start;align-items:center}
  .fan-b span{writing-mode:horizontal-tb;transform:none}
  .fan-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease),visibility 0s linear .4s}
  .fan-i.open .fan-p{grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease),visibility 0s}
  .fp-in{width:auto;height:auto;min-height:0;overflow:hidden;padding:0 18px;grid-template-columns:minmax(0,1fr)}
  .fan-i.open .fp-in{padding:18px 18px 22px}
  .fp-txt .btn{margin-top:4px}
}
@media (max-width:560px){.fp-menu ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fp-menu li{font-size:13.5px;padding:4px 8px}}

/* ==========================================================================
   LOGIN ÚNICO: o quadro de empresas (como um painel de embarque)
   ========================================================================== */
.board{display:grid;gap:4px;padding:0 12px;max-width:1720px;margin:0 auto}
.bd-r{background:var(--t2);transition:background-color .35s ease,color .35s ease}
.bd-h{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,2.2fr) minmax(0,1.4fr) 128px;align-items:center;gap:18px;width:100%;min-height:72px;padding:10px 20px;border:0;background:none;color:inherit;font:500 var(--t-b)/1.2 var(--font);text-align:left;cursor:pointer}
.bd-n{display:flex;align-items:center;gap:14px;font:400 var(--t-l)/1.1 var(--disp);letter-spacing:-.02em;min-width:0}
.bd-n i{width:16px;height:16px;background:var(--c);flex:0 0 auto;transition:background-color .35s ease}
.bd-seg,.bd-ini,.bd-mods{color:var(--soft);font-size:var(--t-b);transition:color .35s ease}
.bd-st{font-style:normal;font:700 var(--t-s)/1 var(--font);padding:10px 8px;text-align:center;background:#4ade80;color:#0a0a0a}
.bd-st.t{background:#fbbf24}
.bd-d{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .42s var(--ease),visibility 0s linear .42s}
.bd-d>div{overflow:hidden;min-height:0}
.bd-d p{padding:0 20px 26px 50px;font-size:var(--t-m);line-height:1.5;max-width:76ch}
.bd-r.open{background:var(--c);color:var(--on)}
.bd-r.open .bd-seg,.bd-r.open .bd-ini,.bd-r.open .bd-mods{color:inherit}
.bd-r.open .bd-n i{background:var(--on)}
.bd-r.open .bd-d{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .42s var(--ease),visibility 0s}
@media (hover:hover) and (pointer:fine){.bd-r:not(.open):hover{background:var(--t3)}}
.facts{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.facts b{display:block;font-size:18px;font-weight:600;margin-bottom:5px}.facts span{display:block;color:var(--soft);font-size:16px}
@media (max-width:900px){
  .board{padding:0 8px}
  .bd-h{grid-template-columns:minmax(0,1fr) auto;min-height:64px;padding:10px 14px}
  .bd-seg,.bd-ini,.bd-mods{display:none}
  .bd-n{font-size:19px}
  .bd-d p{padding:0 14px 20px;font-size:16px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}.bd-st{padding:8px 6px}}

/* ==========================================================================
   PERSONALIZAÇÃO: demonstração ao vivo (62/38) e o que mais dá para mudar
   ========================================================================== */
.play{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);background:var(--t1)}
.play-view{padding:clamp(16px,2.6vw,40px);background:var(--t2);container-type:inline-size;display:flex;align-items:center}
.play-view .mk{width:100%}
.play-ctl{padding:clamp(18px,2vw,28px);display:grid;align-content:start;gap:4px;min-width:0}
.pc{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:14px;padding:10px 0;min-width:0}
.pc>label,.pc .lbl{font:600 var(--t-s)/1.2 var(--font);color:var(--ink)}
.pc-c{display:grid;gap:8px;min-width:0}
.pc input[type=text],.pc-row .hex{width:100%;min-width:0;height:44px;padding:0 12px;border:0;background:var(--t3);color:#fff;font:500 16px/1 var(--font);outline:none;transition:box-shadow .18s ease}
.pc-row .hex{text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pc input[type=text]:focus,.pc-row .hex:focus{box-shadow:inset 0 0 0 2px var(--acc)} /* taste-skill-ignore: anel de foco do campo */
.sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sw button{aspect-ratio:1;border:0;cursor:pointer;position:relative;transition:transform .14s var(--ease)}
.sw button:active{transform:scale(.92)}
.sw button.on{outline:2px solid #fff;outline-offset:2px}
.sw button.on::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translate(-50%,-70%) rotate(-45deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))} /* taste-skill-ignore: legibilidade do sinal de marcado sobre qualquer cor */
.sw-par{grid-template-columns:repeat(5,minmax(0,1fr))}.sw-par button{aspect-ratio:auto;height:32px;display:flex;padding:0;overflow:hidden}.sw-par button i{flex:1;height:100%}
.pc-row{display:flex;gap:8px;align-items:center}
.pc-row input[type=color]{appearance:none;-webkit-appearance:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto}
.pc-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.pc-row input[type=color]::-webkit-color-swatch{border:0}.pc-row input[type=color]::-moz-color-swatch{border:0}
.seg2{display:flex;background:var(--t3);padding:3px;gap:3px}
.seg2 button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 6px;border:0;background:transparent;color:var(--soft);font:600 var(--t-s)/1 var(--font);cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .14s var(--ease)}
.seg2 button:active{transform:scale(.97)}
.seg2 button.on{background:var(--acc);color:#0a0a0a}
@media (hover:hover) and (pointer:fine){.seg2 button:not(.on):hover{color:#fff;background:#2e2e2e}}
.drop{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1.5px dashed rgba(var(--acc-rgb),.6);background:transparent;cursor:pointer;color:#dcdcda;font-size:var(--t-s);font-weight:500;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.drop:hover,.drop.over{background:rgba(var(--acc-rgb),.1);border-color:var(--acc);color:#fff}.drop i{font-size:22px;color:var(--acc)}
.lnk{background:none;border:0;color:var(--soft);font:500 var(--t-s)/1 var(--font);text-decoration:underline;cursor:pointer;padding:6px 0;justify-self:start}.lnk:hover{color:#fff}
.pc-end{padding-top:14px}.pc-end .btn{width:100%}
.pz{margin-top:clamp(56px,7vw,96px)}
.pz h3{font:400 var(--t-l)/1.15 var(--disp);letter-spacing:-.02em;margin-bottom:28px}
.pz-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
.pz-list li{display:flex;align-items:flex-start;gap:14px;min-width:0}
.pz-list i{font-size:24px;color:var(--ink);flex:0 0 auto;margin-top:1px}
.pz-list b{display:block;font-size:18px;font-weight:600;line-height:1.3}
.pz-list span{display:block;color:var(--soft);font-size:16px;line-height:1.5;margin-top:3px}
@media (max-width:980px){.play{grid-template-columns:minmax(0,1fr)}.pz-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pz-list{grid-template-columns:minmax(0,1fr)}.pc{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 0}}

/* ---------- miniatura do sistema (personalização ao vivo) ---------- */
.mk{--m-bg:#0d0d0d;--m-side:#121212;--m-surf:#171717;--m-line:rgba(255,255,255,.09);--m-text:#f4f2ee;--m-mut:#9a9a9a;--a:#F26410;--a-rgb:242,100,16;--a-ink:#ff8a3d;--on:#0a0a0a;--r:1;--g:#4ade80;--rd:#f87171;--bl:#60a5fa;--a2:#c026d3;--a2-rgb:192,38,211;
  display:grid;grid-template-columns:30% 1fr;border-radius:calc(16px*var(--r));overflow:hidden;background:var(--m-bg);color:var(--m-text);font-size:clamp(9px,1.95cqw,14px);line-height:1.35;transition:background-color .6s,color .6s;text-align:left}
.mk[data-th=light]{--m-bg:#f1f3f6;--m-side:#fff;--m-surf:#fff;--m-line:rgba(15,23,42,.11);--m-text:#14171c;--m-mut:#586070;--g:#15803d;--rd:#dc2626;--bl:#1d4ed8}
.mk *{transition:background-color .6s,color .6s,border-color .6s,border-radius .4s}
.mk-side{background:var(--m-side);padding:1.1em .8em;min-width:0}
.mk-brand{height:2.9em;display:flex;align-items:center;margin-bottom:.9em;padding:0 .3em}
.mk-logo{max-height:2.6em;max-width:100%;object-fit:contain;display:block}.mk-logo[hidden]{display:none}
.mk-name{font:400 1.45em/1 var(--disp);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mk-nav{list-style:none;margin:0;padding:0;display:grid;gap:.25em}
.mk-nav li{display:flex;align-items:center;gap:.65em;padding:.62em .7em;border-radius:calc(.8em*var(--r));color:var(--m-mut);font-weight:500;min-width:0}
.mk-nav li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.mk-nav li i{font-size:1.5em;flex:0 0 auto}
.mk-nav li.on{background:rgba(var(--a-rgb),.15);color:var(--m-text)}.mk-nav li.on i{color:var(--a)}
.mk-nav em{font-style:normal;background:var(--a);color:var(--on);border-radius:99px;font:600 .85em/1 var(--font);padding:.25em .6em}
.mk-main{padding:1em 1.1em 1.2em;display:grid;gap:.85em;align-content:start;min-width:0}
.mk-top{display:flex;align-items:center;justify-content:space-between;font:500 .85em/1 var(--font);letter-spacing:.06em;color:var(--m-mut)}
.mk-top b{color:var(--a);font-weight:600}
.mk-plus{width:2.5em;height:2.5em;border-radius:calc(.8em*var(--r));background:var(--a);color:var(--on);display:grid;place-items:center}
.mk-hi{font:400 2.1em/1.05 var(--disp);letter-spacing:-.02em}.mk-ac{font-weight:400;color:var(--a)}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.mk-k{background:var(--m-surf);border:1px solid var(--m-line);border-radius:calc(1em*var(--r));padding:.85em .8em;min-width:0}
.mk-k small{display:block;font:500 .82em/1.2 var(--font);color:var(--m-mut);margin-bottom:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-k b{font:400 1.55em/1 var(--disp);letter-spacing:-.02em;white-space:nowrap}.mk-k .g{color:var(--g)}.mk-k .r{color:var(--rd)}.mk-k .b{color:var(--bl)}
.mk-chart{background:var(--m-surf);border:1px solid var(--m-line);border-radius:calc(1em*var(--r));padding:1em 1em .8em}
.mk-bars{height:7.5em;display:flex;align-items:flex-end;gap:.9em;padding:0 .4em}
.mk-bars span{flex:1;display:flex;align-items:flex-end;gap:.25em;height:100%}
.mk-bars span::before,.mk-bars span::after{content:'';flex:1;border-radius:calc(.35em*var(--r)) calc(.35em*var(--r)) 0 0}
.mk-bars span::before{background:var(--g);height:var(--h1);opacity:.85}.mk-bars span::after{background:var(--a);height:var(--h2)}
.mk-rows{display:grid;gap:.5em}
.mk-rows div{display:flex;align-items:center;justify-content:space-between;gap:.6em;background:var(--m-surf);border:1px solid var(--m-line);border-radius:calc(.9em*var(--r));padding:.7em .85em;min-width:0}
.mk-rows span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--m-mut)}.mk-rows span b{color:var(--a);font-weight:700}
.mk-badge{font-style:normal;font-weight:700;font-size:.85em;padding:.3em .8em;border-radius:99px;background:rgba(var(--a-rgb),.16);color:var(--a);white-space:nowrap}.mk-badge.ok{background:rgba(34,197,94,.16);color:var(--g)}
.mk[data-gr] .mk-plus,.mk[data-gr] .mk-nav em{background:linear-gradient(135deg,var(--a),var(--a2));color:var(--on)} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
.mk[data-gr] .mk-nav li.on{background:linear-gradient(135deg,rgba(var(--a-rgb),.2),rgba(var(--a2-rgb),.14))} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
.mk[data-gr] .mk-bars span::after{background:linear-gradient(180deg,var(--a2),var(--a))} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
.mk[data-gr] .mk-ac{background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
.mk[data-gr] .mk-badge{background:linear-gradient(135deg,rgba(var(--a-rgb),.2),rgba(var(--a2-rgb),.16))} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
.mk[data-gr] .mk-side{background:linear-gradient(180deg,rgba(var(--a-rgb),.10),transparent 60%),var(--m-side)} /* taste-skill-ignore: degradê é o recurso do produto mostrado na miniatura (data-ui) */
@media (max-width:520px){.mk{grid-template-columns:27% 1fr}.mk-nav li:nth-child(n+5){display:none}.mk-kpis .mk-k:nth-child(3){display:none}.mk-kpis{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   EM TODAS AS TELAS: detalhes de perto, num quadro de blocos
   ========================================================================== */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:104px;gap:var(--g)}
.ms{position:relative;overflow:hidden;background:var(--t2);min-width:0}
.ms-head{grid-column:span 6;grid-row:span 2;background:var(--acc);color:#0a0a0a;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.ms-head h2{font-size:clamp(28px,3.4vw,50px)}
.ms-head p{font-size:var(--t-b);max-width:44ch}
.ms-a,.ms-b{grid-column:span 3;grid-row:span 2}
.ms-big{grid-column:span 6;grid-row:span 4}
.ms-tall{grid-column:span 3;grid-row:span 4}
.ms-wide{grid-column:span 6;grid-row:span 2}
.ms-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.ms-cap b{display:block;font-size:var(--t-m);font-weight:600;line-height:1.25}
.ms-cap span{display:block;color:var(--soft);font-size:16px;line-height:1.45;margin-top:4px;max-width:46ch}
.ms-cap a{color:var(--ink);font-weight:600}
.ms-ui{position:absolute;inset:0;pointer-events:none}
/* sino */
.bell{position:absolute;right:-14px;top:-18px;font-size:150px;line-height:1;color:#2f2f2f}
.bell em{position:absolute;right:30px;top:34px;font:400 34px/1 var(--disp);font-style:normal;background:var(--acc);color:#0a0a0a;width:62px;height:62px;border-radius:50%;display:grid;place-items:center}
/* código de acesso da proposta */
.code{position:absolute;left:20px;top:22px;display:flex;gap:8px}
.code b{font:400 46px/1 var(--disp);font-style:normal;width:60px;height:72px;display:grid;place-items:center;background:var(--t3);color:var(--ink)}
.code b:nth-child(n+4){color:var(--acc)}
/* teclas */
.keys{position:absolute;left:28px;top:30px;display:flex;gap:16px}
.keys kbd{font:600 clamp(48px,6vw,92px)/1 var(--font);min-width:1.6em;padding:.22em .32em .3em;background:var(--t3);color:var(--ink);text-align:center;box-shadow:inset 0 -.09em 0 #0d0d0d} /* taste-skill-ignore: borda inferior da tecla (pedaço de interface) */
.srch{position:absolute;left:28px;right:-40px;top:calc(30px + clamp(48px,6vw,92px) * 1.6);display:flex;align-items:center;gap:14px;background:#0f0f0f;padding:18px 22px;font:500 clamp(20px,2vw,28px)/1 var(--font);color:var(--ink)}
.srch i{color:var(--soft)}.srch em{width:2px;height:1.1em;background:var(--acc);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* menu inferior do celular */
.bnav{position:absolute;left:-18px;right:-18px;top:44px;display:grid;grid-template-columns:repeat(4,1fr);background:#0f0f0f;padding:16px 8px 22px}
.bnav>span{display:grid;justify-items:center;gap:8px;color:var(--soft);font:600 16px/1 var(--font)}
.bnav b{font-size:34px;font-weight:400}.bnav>span.on{color:var(--acc)}
/* PDF */
.doc{position:absolute;left:22px;right:-30px;top:26px;background:var(--paper);color:#151515;padding:20px 22px;display:grid;gap:12px;font-size:16px}
.doc-h{display:flex;align-items:center;gap:10px}.doc-mk{width:30px;height:30px;background:var(--acc);display:block;flex:0 0 auto}.doc-h b{font-size:18px}
.doc-l{display:flex;justify-content:space-between;gap:12px;background:#e6e6e3;padding:8px 10px}.doc-l b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* pedido do site */
.inbox{position:absolute;left:20px;right:-30px;top:20px;display:flex;align-items:center;gap:16px;background:#0f0f0f;padding:16px 18px}
.inbox>i{font-size:34px;color:var(--acc)}
.inbox span{display:grid;gap:4px;min-width:0}.inbox b{font-size:19px}.inbox small{font-size:16px;color:var(--soft)}
.inbox em{margin-left:auto;font-style:normal;font-weight:700;font-size:16px;background:var(--acc);color:#0a0a0a;padding:10px 14px;white-space:nowrap}
/* níveis de acesso */
.roles{position:absolute;right:-24px;top:18px;display:flex;gap:6px}
.roles b{font:600 18px/1 var(--font);padding:14px 16px;background:var(--t3);color:var(--ink);white-space:nowrap}
.roles b:first-child{background:var(--ink);color:#0a0a0a}
@media (max-width:1100px){.keys kbd{font-size:56px}.srch{top:150px}}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:28vw;gap:6px}
  .ms-head{grid-column:span 2;grid-row:span 2}
  .ms-big{grid-column:span 2;grid-row:span 3}
  .ms-a,.ms-b,.ms-tall,.ms-wide{grid-column:span 1;grid-row:span 2}
  .ms-wide{grid-column:span 2}
  .ms-cap{left:14px;right:14px;bottom:12px}.ms-cap b{font-size:16px}.ms-cap span{font-size:14px}
  .ms-a .ms-cap span,.ms-b .ms-cap span,.ms-tall .ms-cap span{display:none}
  .bell{font-size:110px}.bell em{width:46px;height:46px;font-size:24px;right:22px;top:24px}
  .code b{width:40px;height:52px;font-size:30px}
  .keys kbd{font-size:44px}.srch{top:120px;font-size:18px;padding:12px 14px}
  .bnav b{font-size:26px}.bnav>span{font-size:13px}
  .doc{font-size:13px;padding:14px}.doc-l:nth-child(n+4){display:none}
}
@media (max-width:560px){.mosaic{grid-auto-rows:30vw}.inbox em{display:none}.inbox b{font-size:16px}.inbox small{font-size:13px}}

/* ==========================================================================
   SOB MEDIDA: título preso à esquerda, passos passando à direita com a barra de avanço
   ========================================================================== */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.story-t{position:sticky;top:calc(var(--head) + 48px);display:grid;gap:22px;justify-items:start}
.story-t p{font-size:var(--t-m);max-width:46ch}
.story-t .note{font-size:var(--t-s);margin-top:-8px}
.story-r{position:relative;padding-left:36px}
.story-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t3);overflow:hidden}
.story-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:top;transform:scaleY(var(--p,1))}
.js .story-bar i{transform:scaleY(0)}
.story-s{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,12vh,128px)}
.story-s li b{display:block;font:400 var(--t-l)/1.12 var(--disp);letter-spacing:-.02em;margin-bottom:12px;transition:color .4s ease}
.story-s li span{display:block;font-size:var(--t-m);line-height:1.55;max-width:44ch;transition:color .4s ease}
.js .story-s li:not(.on) b{color:var(--soft2)}.js .story-s li:not(.on) span{color:var(--soft)}
@media (max-width:860px){.story{grid-template-columns:minmax(0,1fr)}.story-t{position:static}.story-s{gap:48px}}

/* ==========================================================================
   PREÇO: o recibo do caixa
   ========================================================================== */
.price{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start}
.price-t{display:grid;gap:22px;justify-items:start;padding-top:clamp(0px,3vw,48px)}
.price-t>p:not(.note){font-size:var(--t-m);max-width:50ch}
.price-p{list-style:none;margin:6px 0;padding:0;display:grid;gap:16px}
.price-p b{display:block;font-size:18px;font-weight:600}.price-p span{display:block;color:var(--soft);font-size:16px}
.slip-wrap{display:flex;justify-content:center;margin-top:calc(-1 * clamp(72px,7.2vw,108px))}
.slip{width:min(420px,100%);background:var(--paper);color:#141414;padding:44px 30px 46px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),97.5% 100%,95% calc(100% - 10px),92.5% 100%,90% calc(100% - 10px),87.5% 100%,85% calc(100% - 10px),82.5% 100%,80% calc(100% - 10px),77.5% 100%,75% calc(100% - 10px),72.5% 100%,70% calc(100% - 10px),67.5% 100%,65% calc(100% - 10px),62.5% 100%,60% calc(100% - 10px),57.5% 100%,55% calc(100% - 10px),52.5% 100%,50% calc(100% - 10px),47.5% 100%,45% calc(100% - 10px),42.5% 100%,40% calc(100% - 10px),37.5% 100%,35% calc(100% - 10px),32.5% 100%,30% calc(100% - 10px),27.5% 100%,25% calc(100% - 10px),22.5% 100%,20% calc(100% - 10px),17.5% 100%,15% calc(100% - 10px),12.5% 100%,10% calc(100% - 10px),7.5% 100%,5% calc(100% - 10px),2.5% 100%,0 calc(100% - 10px))}
.slip-h{display:grid;gap:4px;text-align:center}.slip-h b{font:400 22px/1 var(--disp);letter-spacing:.02em}.slip-h span{font-size:var(--t-s);color:#4a4a4a}
.slip-l{list-style:none;margin:26px 0 20px;padding:0;display:grid;gap:14px}
.slip-l li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:16px;line-height:1.35}
.slip-l b{font-weight:600;white-space:nowrap;color:#3a3a3a}
.slip-t{display:grid;justify-items:end;gap:4px;padding-top:16px;box-shadow:inset 0 4px 0 #141414} /* taste-skill-ignore: recibo do produto (data-ui): barra de 4 px do total */
.slip-t span{font-weight:600;font-size:16px}.slip-t b{font:400 clamp(40px,4vw,54px)/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slip-f{margin-top:16px;text-align:center;font-size:13px;color:#4a4a4a}
@media (max-width:900px){.price{grid-template-columns:minmax(0,1fr)}.slip-wrap{margin-top:0}.slip{width:min(420px,92%)}.price-t{padding-top:0}}

/* ==========================================================================
   LOGIN DE TESTE: campo laranja, formulário em células
   ========================================================================== */
.ts-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px 40px;align-items:end;margin-bottom:clamp(36px,4vw,52px)}
.ts-head p{font-size:var(--t-m);max-width:52ch}
.ts-steps{grid-column:1/-1;list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:p}
.ts-steps li{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.14);padding:10px 14px;font-weight:600;font-size:16px}
.ts-steps li+li::before{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-4px;opacity:.6}
.tst-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.tst-form[hidden]{display:none}
.fg{display:grid;gap:2px;background:rgba(0,0,0,.14);padding:12px 16px 8px;min-width:0;transition:background-color .18s ease}
.fg:focus-within{background:#ffe2cf}
.fg label{font:600 14px/1.3 var(--font);color:#1c0b02}
.fg input,.fg select,.fg textarea{width:100%;min-width:0;background:transparent;border:0;padding:6px 0;color:#0a0a0a;font:500 18px/1.35 var(--font);outline:none;appearance:none;-webkit-appearance:none;border-radius:0}
.fg input::placeholder,.fg textarea::placeholder{color:#3b1a06}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:22px;cursor:pointer}
.fg select option{color:#111;background:#fff}
.fg textarea{resize:vertical;min-height:34px}
.fg.bad{box-shadow:inset 0 0 0 2px #2b0b00;background:#ffd0b5} /* taste-skill-ignore: estado de erro do campo */
.fg input.bad,.fg select.bad{color:#0a0a0a}
.wide{grid-column:1/-1}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} /* taste-skill-ignore: campo-isca anti-robô, invisível */
.brand-sum{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.08);font-size:16px;color:#1c0b02}
.brand-sum a{color:#0a0a0a;font-weight:700}
.bs-dot{width:22px;height:22px;background:var(--acc);flex:0 0 auto;box-shadow:inset 0 0 0 2px #0a0a0a} /* taste-skill-ignore: contorno da amostra de cor */
.bs-logo{height:24px;max-width:90px;object-fit:contain;background:#0a0a0a;padding:2px 6px;flex:0 0 auto}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#1c0b02;cursor:pointer;line-height:1.5;padding:6px 2px}
.chk input{width:22px;height:22px;accent-color:#0a0a0a;flex:0 0 auto;margin-top:1px}
.form-err{padding:12px 16px;background:#0a0a0a;color:#fff;font-size:16px;font-weight:600}
.form-err[hidden]{display:none}
#tBtn{min-height:60px;font-size:16px}#tBtn.loading{opacity:.7;pointer-events:none}
.tst-ok{background:#0a0a0a;color:var(--ink);padding:clamp(28px,4vw,48px);display:grid;gap:16px;justify-items:start}
.tst-ok[hidden]{display:none}
.ok-ic i{font-size:58px;color:#4ade80}
.tst-ok h3{font:400 var(--t-l)/1.1 var(--disp)}.tst-ok p{color:var(--soft)}.tst-ok p b{color:var(--ink)}
.cred{width:min(560px,100%);display:grid;gap:6px}
.cred>div{display:grid;grid-template-columns:1fr auto;grid-template-areas:'l b' 'v b';gap:2px 12px;align-items:center;background:var(--t2);padding:12px 16px}
.cred small{grid-area:l;font:600 13px/1 var(--font);color:var(--soft)}
.cred b{grid-area:v;font:600 19px/1.3 var(--font);letter-spacing:.02em;word-break:break-all;color:#fff;font-variant-numeric:tabular-nums}.cred>div:first-child b{font-size:16px;font-weight:500;color:#dcdcda}
.cred .cp{grid-area:b;background:var(--t3);border:0;color:#fff;padding:10px 14px;font:600 13px/1 var(--font);cursor:pointer;transition:background-color .18s,transform .14s var(--ease)}.cred .cp:hover{background:#333}.cred .cp:active{transform:scale(.97)}
.ok-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:900px){.ts-head{grid-template-columns:minmax(0,1fr)}.tst-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tst-form{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   DÚVIDAS: perguntas à esquerda, a resposta em destaque à direita
   ========================================================================== */
.fq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.fq-l h2{font:600 var(--t-m)/1.3 var(--font);letter-spacing:0;color:var(--soft);margin-bottom:14px}
.fq-list{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:2px}
.fq-q{display:flex;align-items:baseline;gap:14px;width:100%;padding:9px 0;border:0;background:none;color:var(--soft);font:500 var(--t-m)/1.4 var(--font);text-align:left;cursor:pointer;transition:color .15s ease}
.fq-q::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#4a4a48;transform:translateY(-2px);transition:background-color .15s ease}
.fq-q:hover,.fq-i.on .fq-q{color:var(--ink)}
.fq-i.on .fq-q::before{background:var(--acc)}
.fq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .32s var(--ease),visibility 0s linear .32s}
.fq-i.on .fq-a{visibility:visible;transition:grid-template-rows .32s var(--ease),visibility 0s}
.fq-a>div{overflow:hidden;min-height:0}
.fq-a p{padding:2px 0 14px 22px;font-size:18px;line-height:1.6;max-width:62ch}
.fq-pane{position:sticky;top:calc(var(--head) + 56px)}
.fq-pane p{font:400 clamp(21px,1.9vw,27px)/1.35 var(--font);max-width:32ch;transition:opacity .15s ease,filter .15s ease}
.fq-pane.swap p{opacity:0;filter:blur(3px)}
@media (min-width:901px){.js .fq-a{display:none}}
@media (max-width:900px){.fq{grid-template-columns:minmax(0,1fr)}.fq-pane{display:none}.fq-i.on .fq-a{grid-template-rows:1fr}}
html:not(.js) .fq-a{grid-template-rows:1fr;visibility:visible}
html:not(.js) .fq-pane{display:none}

/* ==========================================================================
   RODAPÉ: a marca construída em blocos
   ========================================================================== */
.foot{background:var(--bg);padding:clamp(64px,8vw,120px) 0 28px}
.mark{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:end;height:clamp(180px,32svh,360px)}
.mark span{height:var(--h);background:var(--acc);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;transform-origin:bottom}
.mark span:nth-child(3n+2){background:var(--paper)}
.mark span:nth-child(4){background:#3a3a38}
.mark b{font:400 clamp(52px,12.6vw,220px)/.74 var(--disp);color:var(--bg);transform:translateY(.02em)}
.foot-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px;margin-top:56px}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-col h5{margin:0 0 6px;font:600 var(--t-s)/1.2 var(--font);color:var(--soft)}
.foot-col a{color:#dcdcda;text-decoration:none;font-size:16px;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;transition:color .18s}.foot-col a:hover{color:#fff}
.foot-col a i{color:var(--acc);font-size:18px}
.foot-ct{grid-column:span 2}.foot-ct p{color:var(--soft);font-size:16px;max-width:40ch;margin-top:6px}
.foot-end{margin-top:48px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--t-s);color:var(--soft);padding-right:76px}
.foot-end a:not(.btn){color:#dcdcda}
@media (max-width:760px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-ct{grid-column:1/-1}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);text-decoration:none;transition:transform .2s var(--ease)} /* taste-skill-ignore: botão flutuante (flutua de verdade) */
.wa-float:hover{transform:scale(1.06)}.wa-float:active{transform:scale(.96)}
@media (max-width:420px){.btn{white-space:normal;text-align:center;line-height:1.25}}

/* ==========================================================================
   MOVIMENTO
   Assinatura: a folha do topo abre como um obturador (cada pedaço desce de cima, com a imagem assentando
   da escala 1,12) e depois corre devagar, coluna para cima, coluna para baixo, como a folha passando na
   impressora. O resto entra em ordem de leitura, cada seção do seu jeito, uma vez só.
   Sem script ou com "reduzir movimento", tudo fica visível e parado.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* entrada genérica (texto e blocos): sobe 22 px com opacidade, em sequência pelo --i */
  .js [data-r]{opacity:0;transform:translateY(22px)}
  .js [data-r].in{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(var(--i,0) * 80ms),transform .9s var(--ease) calc(var(--i,0) * 80ms)}
  /* títulos de seção: sobem de trás de uma máscara */
  .js .intro[data-r],.js .ag-head[data-r],.js .ts-head[data-r],.js .story-t[data-r],.js .price-t[data-r]{opacity:1;transform:none}
  .js .intro[data-r] h2,.js .ag-head[data-r] h2,.js .ts-head[data-r] h2,.js .story-t[data-r] h2,.js .price-t[data-r] h2{clip-path:inset(0 0 100% 0);transform:translateY(32%)}
  .js .intro[data-r].in h2,.js .ag-head[data-r].in h2,.js .ts-head[data-r].in h2,.js .story-t[data-r].in h2,.js .price-t[data-r].in h2{clip-path:inset(0 0 -12% 0);transform:none;transition:clip-path .9s var(--ease),transform 1s var(--ease)}
  .js .intro[data-r]>p,.js .ag-head[data-r]>.btn,.js .ts-head[data-r]>p,.js .ts-head[data-r]>ol,.js .story-t[data-r]>*:not(h2),.js .price-t[data-r]>*:not(h2){opacity:0;transform:translateY(16px)}
  .js .intro[data-r].in>p,.js .ag-head[data-r].in>.btn,.js .ts-head[data-r].in>p,.js .ts-head[data-r].in>ol,.js .story-t[data-r].in>*:not(h2),.js .price-t[data-r].in>*:not(h2){opacity:1;transform:none;transition:opacity .7s var(--ease) .16s,transform .8s var(--ease) .16s}
  /* blocos do quadro (módulos e detalhes): abrem como obturador */
  .js .ms[data-r]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
  .js .ms[data-r].in{clip-path:inset(0);transition:clip-path .9s var(--ease-io) calc(var(--i,0) * 70ms)}
  .js .ms[data-r] .ms-ui{transform:scale(1.08)}
  .js .ms[data-r].in .ms-ui{transform:none;transition:transform 1.4s var(--ease-soft) calc(var(--i,0) * 70ms)}
  /* listas: linha por linha */
  .js .bd-r{opacity:0;transform:translateX(-24px)}
  .js .board.in .bd-r{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--k,0) * 55ms),transform .7s var(--ease) calc(var(--k,0) * 55ms),background-color .35s ease,color .35s ease}
  .js .fan[data-r] .fan-i{transform:translateY(40px);opacity:0}
  .js .fan[data-r].in .fan-i{transform:none;opacity:1;transition:transform .8s var(--ease) calc(var(--k,0) * 40ms),opacity .6s var(--ease) calc(var(--k,0) * 40ms),flex-basis .5s var(--ease-io),flex-grow .5s var(--ease-io)}
  .js .fan[data-r]{opacity:1;transform:none}
  /* segmento aberto: o conteúdo entra depois que a amostra abre; nomes trocados rolam para o lugar */
  .fan-i .fp-in{opacity:0;transition:opacity .2s ease}
  .fan-i.open .fp-in{opacity:1;transition:opacity .45s var(--ease) .22s}
  .fan-i.open .fp-menu li.ren span{animation:rename .6s var(--ease) calc(.35s + var(--k,0) * 60ms) both}
  @keyframes rename{from{opacity:0;transform:translateY(80%)}to{opacity:1;transform:none}}
  /* topo: obturador nos pedaços da folha e no bloco de texto */
  .js .sheet .fm{clip-path:inset(0 0 100% 0)}
  .js .sheet .fm .fr{transform:scale(1.12);transform-origin:50% 0}
  .js .sheet.go .fm{clip-path:inset(0);transition:clip-path 1.1s var(--ease-io) var(--fd,0s)}
  .js .sheet.go .fm .fr{transform:none;transition:transform 1.5s var(--ease-soft) var(--fd,0s)}
  .js .hero-card{clip-path:inset(0 0 100% 0)}
  .js .sheet.go .hero-card{clip-path:inset(0);transition:clip-path 1s var(--ease-io) .25s}
  .js .hero-card [data-r]{transform:translateY(18px)}
  .js .sheet.go .hero-card [data-r]{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.7s + var(--i,0) * 90ms),transform .9s var(--ease) calc(.7s + var(--i,0) * 90ms)}
  /* rodapé: a marca se levanta bloco a bloco */
  .js .mark span{transform:scaleY(.08)}
  .js .mark span b{opacity:0;transform:translateY(30%)}
  .js .mark.in span{transform:none;transition:transform 1s var(--ease) calc(var(--i) * 70ms)}
  .js .mark.in span b{opacity:1;transform:translateY(.02em);transition:opacity .6s ease calc(.35s + var(--i) * 70ms),transform .9s var(--ease) calc(.35s + var(--i) * 70ms)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .fan-i,.bd-d,.fq-a,.fan-p{transition:none}
  .js .story-bar i{transform:scaleY(1)}
  .js .story-s li:not(.on) b{color:inherit}.js .story-s li:not(.on) span{color:inherit}
}

/* troca de página (site da COTH ⇄ COTHSYS ⇄ login): a atual sai rápido e a nova sobe no lugar */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .2s var(--ease-exit) both}
::view-transition-new(root){animation:vtIn .42s var(--ease) both}
@keyframes vtOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}