/* vitrine das soluções (telas inteiras, como blocos de produto) e as provas ao vivo */
.vitrine{padding:0}
.bloco{min-height:96svh;display:grid;grid-template-rows:auto 1fr;justify-items:center;text-align:center;gap:clamp(40px,6vh,72px);padding:clamp(96px,13vh,140px) var(--m) 0;overflow:hidden}
.bloco .txt{display:grid;justify-items:center;gap:18px;max-width:900px}
.bloco h2{font-size:clamp(2.75rem,1.8rem + 4vw,5.75rem);max-width:none;letter-spacing:-.045em}
.bloco .gancho{font:300 clamp(1.5rem,1.15rem + 1.3vw,2.375rem)/1.2 var(--serif);max-width:34ch;text-wrap:balance}
.bloco .acoes{justify-content:center;margin-top:10px}
.bloco .vis{align-self:end;width:min(100%,920px);display:flex;justify-content:center;align-items:flex-end}
.bloco.b0{background:var(--navy);color:var(--paper)}
.bloco.b0 .gancho{color:var(--gold)}
.bloco.b1{background:var(--ivory);color:var(--navy)}
.bloco.b1 .gancho{color:#7E5F26}
.bloco.b1 .btn.vazado{color:var(--navy);border-color:var(--navy)}
.bloco.b1 .btn.vazado:hover{background:rgba(26,39,68,.08)}
.bloco.b2{background:var(--gold);color:var(--night)}
.bloco.b2 .gancho{color:var(--night)}
.bloco.b2 .btn{background:var(--night);color:var(--paper)}
.bloco.b2 .btn:hover{background:var(--navy)}
.bloco.b2 .btn.vazado{background:transparent;color:var(--night);border-color:var(--night)}
.bloco.b2 .btn.vazado:hover{background:rgba(11,18,34,.08)}

/* fragmento 1: a conta escondida */
.conta{background:#F7F5F0;color:var(--navy);border-radius:22px 22px 0 0;padding:clamp(24px,3vw,40px);width:min(100%,640px);display:grid;gap:18px;text-align:left}
.conta .t{display:flex;justify-content:space-between;align-items:baseline;font-weight:500}
.conta .t small{font-weight:400;color:#4A5470;font-size:14px}
.conta .lin{display:grid;grid-template-columns:64px 1fr 120px;gap:16px;align-items:center}
.conta .lin b{font:400 22px/1 var(--serif)}
.conta .lin span{font-weight:500;text-align:right;filter:blur(6px);user-select:none}
.conta .bar{height:12px;background:#E8E1D0;border-radius:6px;overflow:hidden}
.conta .bar i{display:block;height:100%;background:var(--gold);border-radius:6px;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.conta .bar i.n{background:var(--navy)}
.on .conta .bar i,.sem-js .conta .bar i{transform:scaleX(1)}
.conta p{font-size:15px;color:#4A5470}

/* fragmento 2: o painel da empresa */
.tablero{background:#fff;color:var(--navy);border-radius:22px 22px 0 0;padding:clamp(20px,2.6vw,32px);width:100%;display:grid;gap:16px;text-align:left}
.tablero .t{display:flex;justify-content:space-between;align-items:baseline;font-weight:500}
.tablero .t small{font-weight:400;color:#4A5470;font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:#F7F5F0;border-radius:14px;padding:16px;display:grid;gap:6px}
.kpi small{font-size:13.5px;color:#4A5470;order:2}
.kpi b{order:1}.kpi em{order:3}.kpi svg{order:4}
.kpi b{font:400 clamp(1.5rem,1.2rem + .8vw,2rem)/1 var(--serif);letter-spacing:-.02em}
.kpi em{font-style:normal;font-size:13.5px;color:#4A6B3A}
.kpi em.baixa{color:#9A3B2E}
.kpi svg{width:100%;height:36px}
.kpi svg path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.6s var(--ease)}
.on .kpi svg path,.sem-js .kpi svg path{stroke-dashoffset:0}
.alerta{display:flex;gap:12px;align-items:center;background:var(--navy);color:var(--paper);border-radius:14px;padding:14px 16px;font-size:15px}
.alerta i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);animation:pisca 2.4s ease-in-out infinite}
@keyframes pisca{50%{opacity:.25}}

/* fragmento 3: o celular com a Bia */
.cel{width:min(100%,360px);background:var(--night);border-radius:44px 44px 0 0;padding:14px 14px 0}
.cel .tela-cel{background:#E6E4E0;border-radius:32px 32px 0 0;padding:16px 14px 28px;display:grid;gap:8px;text-align:left;min-height:360px;align-content:start}
.cel .quem-cel{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;margin-bottom:2px;color:#1b1b1b}
.cel .quem-cel span{width:34px;height:34px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font:400 17px/1 var(--serif);color:var(--night)}
.cel .quem-cel b{font-weight:500;font-size:15px}
.cel .quem-cel small{display:block;font-size:13px;color:#4A5470}
.cel .m{max-width:84%;padding:9px 12px;border-radius:12px;background:#fff;color:#1b1b1b;font-size:14.5px;line-height:1.4;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cel .m.eu{justify-self:end;background:#D9FDD3}
.cel .m small{display:block;color:#5d6470;font-size:13px;margin-top:3px;text-align:right}
.on .cel .m,.sem-js .cel .m{opacity:1;transform:none}
.cel .m:nth-of-type(2){transition-delay:.5s}.cel .m:nth-of-type(3){transition-delay:1s}.cel .m:nth-of-type(4){transition-delay:1.5s}

/* provas ao vivo nas páginas */
.prova{background:var(--deep)}
.prova .cab{max-width:640px}
.prova-painel{margin-top:48px;display:grid;gap:16px}
.setores{display:flex;flex-wrap:wrap;gap:8px}
.setores button{font:500 var(--s-small)/1 var(--sans);min-height:48px;padding:0 22px;border:0;border-radius:24px;background:var(--navy);color:var(--paper);cursor:pointer;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.setores button:hover{transform:translateY(-2px)}
.setores button[aria-selected=true]{background:var(--gold);color:var(--night)}
.prova-painel .tablero{border-radius:22px;border:0}
.prova-painel [role=tabpanel][hidden]{display:none}
.fluxo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fluxo div{background:#EEF0F4;border-radius:12px;padding:12px 14px;display:grid;gap:4px;position:relative}
.fluxo div small{font-size:13.5px;color:#4A5470;order:2}
.fluxo div b{order:1}
.fluxo div b{font:400 1.375rem/1 var(--serif)}
.fluxo div.trava{background:#F3E6CC}

.prova-bia{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,5vw,80px);align-items:center}
.pedidos{display:grid;gap:10px;align-content:start}
.pedidos p{color:#C9CEDB;margin-bottom:6px}
.pedidos button{justify-self:start;text-align:left;font:400 var(--s-body)/1.3 var(--sans);min-height:52px;padding:12px 22px;border:1px solid var(--gold);border-radius:26px;background:transparent;color:var(--paper);cursor:pointer;transition:background-color .2s,transform .2s var(--ease)}
.pedidos button:hover{background:rgba(196,162,101,.14);transform:translateX(4px)}
.pedidos button:disabled{opacity:.45;cursor:default;transform:none}
.prova-bia .cel{justify-self:end;border-radius:44px;padding-bottom:14px}
.prova-bia .tela-cel{border-radius:32px;min-height:380px;max-height:480px;overflow-y:auto}
.prova-bia .m{opacity:1;transform:none}
.prova-bia .m.nova{animation:chega .45s var(--ease) both}
.digitando{font-size:13.5px;color:#4A5470;padding:4px}
@keyframes chega{from{opacity:0;transform:translateY(10px)}}

/* destaques: uma ideia por linha, em tamanho grande */
.destaques{background:var(--night)}
.destaques .item{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;padding:clamp(40px,6vh,72px) 0}
.destaques .item b{font:300 clamp(2.25rem,1.5rem + 3vw,4.5rem)/1 var(--serif);letter-spacing:-.04em}
.destaques .item:nth-child(2) b{color:var(--gold)}
.destaques .item p{font-size:var(--s-lead);line-height:1.45;color:#DCE1EA;max-width:36ch}

@media (max-width:900px){
  .bloco{min-height:auto}
  .kpis{grid-template-columns:1fr 1fr}
  .fluxo{grid-template-columns:1fr 1fr}
  .conta .lin{grid-template-columns:52px 1fr 84px}
  .prova-bia{grid-template-columns:1fr}
  .prova-bia .cel{justify-self:stretch;width:100%}
  .destaques .item{grid-template-columns:1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .conta .bar i,.kpi svg path,.cel .m{transition:none}
  .alerta i,.prova-bia .m.nova{animation:none}
}