/* DEMO DIGITALERNE v1 — interface dentro do tablet. Tamanhos em em (a fonte base é ajustada pelo JS ao tamanho do tablet). */
.demo-pag{padding:44px 0 8px;text-align:center}
.demo-pag h1{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,44px);line-height:1.12;color:var(--tinta);margin:10px auto 14px;max-width:20ch}
.demo-pag .lead{max-width:60ch;margin:0 auto 6px}
.demo-fig{margin:22px auto 0;max-width:980px;width:100%;padding:0 12px}
.demo-fig .tablet-fig{max-width:none;margin:0}
.demo-screen{aspect-ratio:4/3}
.demo-ui{position:absolute;inset:0;display:grid;grid-template-columns:12.5em minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:var(--fundo);color:var(--texto);font-size:15px;line-height:1.45;font-family:'Inter',system-ui,sans-serif}
.demo-ui *{box-sizing:border-box}
.faixa{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.55em 1em;background:#fff;border-bottom:1px solid var(--borda)}
.faixa img{height:2.1em;width:auto;display:block}
.fx-t{font-size:.82em;font-weight:700;color:var(--acento-texto);background:var(--amarelo);border-radius:.6em;padding:.25em .7em;text-align:right}
.rail{display:flex;flex-direction:column;gap:.35em;padding:.8em .7em;background:var(--fundo-alt);border-right:1px solid var(--borda);overflow:auto}
.rl{display:flex;align-items:center;gap:.6em;text-align:left;border:0;background:none;border-radius:.7em;padding:.6em .6em;font:inherit;font-size:1em;color:var(--tinta);cursor:pointer}
.rl:hover{background:#fff}
.rl:focus-visible,.bt:focus-visible,.aba:focus-visible,.item-m:focus-visible,.sg:focus-visible,.cin:focus-visible,.ta:focus-visible{outline:.2em solid var(--cor-acento);outline-offset:.1em}
.rn{flex:0 0 1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9em;background:#fff;border:.12em solid var(--tinta)}
.rt{font-weight:700;font-size:.95em;line-height:1.2}
.rl.on{background:var(--cor-marca);color:#fff}
.rl.on .rn{background:var(--aqua);border-color:var(--aqua);color:var(--cor-marca-escura)}
.rl.vista .rn{background:var(--aqua);border-color:var(--aqua)}
.main{overflow:auto;padding:1em 1.2em 1.1em;min-height:0}
.cab{margin-bottom:.8em}
.sup{font-size:.8em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-texto);margin:0 0 .15em}
.tit{font-family:'Playfair Display',serif;font-size:1.65em;line-height:1.15;color:var(--tinta);margin:0 0 .15em}
.nota-c{margin:.2em 0 0;color:var(--tinta-suave);font-size:.95em}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:.9em;align-items:start}
.dois.larg-esq{grid-template-columns:1.5fr 1fr}
.dois.larg-dir{grid-template-columns:.9fr 1.6fr}
.cartao{background:#fff;border:1px solid var(--borda);border-radius:.9em;padding:.9em 1em;box-shadow:0 .2em .8em rgba(0,80,79,.06)}
.cartao.vazio{text-align:center;padding:1.4em}
.rotulo{font-size:.78em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 .4em}
.rotulo:not(:first-child){margin-top:.9em}
.p{margin:0 0 .6em;font-size:1em}
.aviso-s{font-size:.82em;color:var(--tinta-suave);margin:.6em 0 0}
.aviso-s.alerta{color:#7A4A00;font-weight:700}
.peq-t{font-size:.82em;color:var(--tinta-suave)}
.peq-t.trava{font-weight:700;color:var(--tinta)}
.gravacao{margin-top:.7em;aspect-ratio:16/8;border-radius:.8em;background:linear-gradient(160deg,#0b6c6a,#00403F);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em}
.gr-i{width:2.4em;height:2.4em;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.1em}
.gr-t{font-size:.82em;opacity:.9}
.estados{display:flex;flex-wrap:wrap;gap:.4em}
.est{font-size:.8em;font-weight:700;padding:.3em .7em;border-radius:99em;border:.1em solid var(--borda);color:var(--tinta-suave);background:#fff}
.est.on{color:#fff;border-color:transparent}
.est.e-aguardando{background:#5d6a6a}
.est.e-processando{background:#8f4a19}
.est.e-pronta{background:var(--cor-marca)}
.est.e-falha{background:#9B2C20}
.barra{height:.55em;border-radius:99em;background:var(--fundo-alt);margin:.7em 0 .2em;overflow:hidden;visibility:hidden}
.barra.vis{visibility:visible}
.barra i{display:block;height:100%;width:0;background:var(--cor-marca);border-radius:99em}
.barra.indef i{width:40%;animation:indef 1.2s ease-in-out infinite}
@keyframes indef{0%{margin-left:-40%}100%{margin-left:100%}}
.acoes{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.7em}
.bt{font:inherit;font-size:.92em;font-weight:700;border-radius:.7em;padding:.6em 1em;cursor:pointer;border:.12em solid var(--cor-marca);background:#fff;color:var(--cor-marca);line-height:1.2}
.bt.prim{background:var(--cor-marca);color:#fff}
.bt.prim:hover:not(:disabled){background:var(--cor-marca-escura)}
.bt.sec:hover:not(:disabled){background:var(--fundo-alt)}
.bt.peq{font-size:.8em;padding:.4em .7em}
.bt:disabled{opacity:.45;cursor:not-allowed}
.bt.press{transform:scale(.96);box-shadow:0 0 0 .25em rgba(143,227,214,.7)}
.transc{max-height:23em;overflow:auto}
.transc .tp{margin:0 0 .7em;font-size:1em}
.chip{display:inline-block;font-size:.78em;font-weight:700;border-radius:99em;padding:.25em .7em;line-height:1.25}
.c-prop{background:var(--pessego);color:#5A3010}
.c-pend{background:var(--amarelo);color:var(--tinta)}
.c-rep{background:#F6D5D0;color:#7A1F14}
.c-ok{background:var(--cor-marca);color:#fff}
.c-pub{background:var(--aqua);color:var(--cor-marca-escura)}
.abas{display:flex;gap:.4em;margin-bottom:.6em}
.aba{font:inherit;font-weight:700;font-size:.95em;border:.1em solid var(--borda);background:#fff;color:var(--tinta);border-radius:.7em .7em 0 0;padding:.5em 1em;cursor:pointer}
.aba.on{background:var(--cor-marca);color:#fff;border-color:var(--cor-marca)}
.material{max-height:20em;overflow:auto}
.mt-h{font-size:.82em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--acento-texto);margin:.8em 0 .25em}
.mt-p,.mt-ul{margin:0 0 .4em;font-size:.98em}
.mt-ul{padding-left:1.2em}
.mt-ul li{margin:.15em 0}
.lista-m{display:flex;flex-direction:column;gap:.5em}
.item-m{font:inherit;text-align:left;background:#fff;border:.12em solid var(--borda);border-radius:.8em;padding:.7em .8em;cursor:pointer;display:flex;flex-direction:column;gap:.4em;align-items:flex-start;color:var(--texto)}
.item-m.on{border-color:var(--cor-marca);box-shadow:0 0 0 .15em var(--aqua)}
.ed-topo{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-bottom:.5em;flex-wrap:wrap}
.ta{width:100%;font:inherit;font-size:.92em;line-height:1.5;border:.1em solid var(--borda);border-radius:.6em;padding:.6em .7em;background:var(--fundo);color:var(--texto);resize:none;height:11.5em}
.ta[readonly]{background:var(--fundo-alt)}
.tab-pub{display:flex;flex-direction:column;gap:.5em}
.lp{display:grid;grid-template-columns:9em 1fr 11em;gap:.6em;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:.8em;padding:.5em .7em}
.lp-n{font-size:.92em;color:var(--tinta)}
.lp-a{text-align:right}
.pipe{display:flex;gap:.25em}
.pp{flex:1;text-align:center;font-size:.72em;font-weight:700;padding:.35em .2em;border-radius:.5em;background:var(--fundo-alt);color:var(--tinta-suave)}
.pp.on{background:var(--cor-marca);color:#fff}
.pp.pubd{background:var(--aqua);color:var(--cor-marca-escura)}
.pp.bloq{background:repeating-linear-gradient(135deg,#ece9e4,#ece9e4 .4em,#f6f4ef .4em,#f6f4ef .8em);color:#6f6a62}
.chat{display:flex;flex-direction:column;min-height:22em}
.msgs{flex:1;overflow:auto;max-height:19em;display:flex;flex-direction:column;gap:.6em;padding-right:.2em}
.vazio-c{color:var(--tinta-suave);font-size:.95em;margin:.5em 0}
.bal{max-width:92%;border-radius:.9em;padding:.55em .8em}
.bal.al{align-self:flex-end;background:var(--cor-marca);color:#fff}
.bal.al .bal-t{color:#fff}
.bal.as{align-self:flex-start;background:var(--fundo-alt);color:var(--texto)}
.bal.insuf{background:var(--amarelo)}
.bal-q{display:block;font-size:.7em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.bal-t{margin:.15em 0 0;font-size:.95em}
.fonte{margin-top:.5em;font-size:.8em;background:#fff;border-left:.25em solid var(--cor-marca);border-radius:.3em;padding:.35em .6em;color:var(--tinta-suave)}
.fonte strong{display:block;color:var(--tinta)}
.fonte.nenhuma{border-left-color:var(--acento-texto)}
.cform{display:flex;gap:.5em;margin-top:.7em}
.cin{flex:1;min-width:0;font:inherit;font-size:.92em;border:.1em solid var(--borda);border-radius:.7em;padding:.55em .8em;background:#fff}
.sug{display:flex;flex-direction:column;gap:.35em}
.sg{font:inherit;font-size:.8em;text-align:left;background:var(--fundo-alt);border:.1em solid var(--borda);border-radius:.7em;padding:.45em .7em;cursor:pointer;color:var(--tinta);font-weight:600}
.sg:hover{background:#fff;border-color:var(--cor-marca)}
.fontes{margin:.2em 0 0;padding-left:1.1em;font-size:.85em}
.dcur{position:absolute;z-index:30;width:1.9em;height:1.9em;margin:-.2em 0 0 -.2em;pointer-events:none;opacity:0;transition:left .9s cubic-bezier(.4,0,.2,1),top .9s cubic-bezier(.4,0,.2,1),opacity .3s;font-size:15px}
.dcur.vis{opacity:1}
.dcur svg{width:100%;height:100%;filter:drop-shadow(0 .1em .2em rgba(0,0,0,.35))}
.demo-ctrl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:16px auto 0;max-width:980px}
.demo-ctrl .cta{padding:12px 22px;font-size:15px;cursor:pointer;border:0}
.demo-ctrl .cta.sec{border:2px solid var(--cor-marca)}
.demo-lim{max-width:760px;margin:12px auto 0;padding:0 16px;text-align:center;font-size:14px;color:var(--tinta-suave)}
.demo-nota{max-width:760px;margin:14px auto 0;padding:14px 18px;background:#fff;border:1px dashed var(--cor-marca);border-radius:12px;text-align:left}
.demo-nota b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento-texto);margin-bottom:4px}
.demo-nota p{font-size:15.5px;margin:0}
.demo-final{text-align:center;padding:56px 0}
.demo-final h2{max-width:24ch;margin-left:auto;margin-right:auto}
.demo-final .nota{font-size:14px;color:var(--tinta-suave);margin-top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:719px){
  .demo-fig{padding:0 10px}
  .demo-fig .tablet-bezel{padding:0;border-radius:14px}
  .demo-screen{aspect-ratio:auto;border-radius:12px}
  .demo-ui{position:relative;inset:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--borda);padding:.5em}
  .rl{flex:0 0 auto;padding:.4em .6em}
  .rt{display:none}
  .rl.on .rt{display:inline}
  .main{overflow:visible}
  .dois,.dois.larg-esq,.dois.larg-dir{grid-template-columns:1fr}
  .lp{grid-template-columns:1fr}
  .lp-a{text-align:left}
  .transc,.material{max-height:none}
  #demo-play{display:none}
  .fx-t{font-size:.7em}
}
@media (prefers-reduced-motion:reduce){.dcur,.barra.indef i{transition:none;animation:none}}
.demo-fig{overflow-x:clip}
@media (max-width:719px){.demo-fig .tablet-fig::before{display:none}}