/* Celular do topo: protótipo do app GoGreen (tema escuro do app). Tamanhos em em: a tela escala com a largura. */
.fone-area{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(280px,86vw)}
.fone{width:100%;aspect-ratio:300/620;container-type:inline-size;background:#050605;border-radius:13%/6.3%;padding:3.2%;box-shadow:0 30px 60px -28px rgba(10,40,18,.55),inset 0 0 0 1.5px #2a2f2a;position:relative}
.ft{--bg:#111411;--on:#E1E4DD;--mut:#C2C9BD;--pri:#81C784;--onpri:#00390A;--prc:#1B5E20;--onprc:#C8E6C9;--c1:#191D19;--c2:#1D211D;--c3:#272B27;--c4:#323632;--ol:#424940;--ama:#F9A825;--ver:#E53935;--verde:#2E7D32;
  font-size:4.25cqw;line-height:1.35;font-family:Roboto,"Nunito",system-ui,sans-serif;color:var(--on);background:var(--bg);width:100%;height:100%;border-radius:10%/4.9%;overflow:hidden;position:relative;display:flex;flex-direction:column;text-align:left}
.ft *{box-sizing:border-box}
.ft-status{display:flex;justify-content:space-between;align-items:center;padding:.7em 1.4em .3em;font-size:.82em;color:var(--on);font-variant-numeric:tabular-nums}
.ft-status i{font-style:normal;letter-spacing:.05em;opacity:.9}
.ft-cam{position:absolute;top:.75em;left:50%;width:.75em;height:.75em;margin-left:-.375em;border-radius:50%;background:#000;box-shadow:0 0 0 .12em #1b1f1b}
.ft-top{display:flex;align-items:center;gap:.6em;padding:.55em .9em .55em 1.05em;min-height:3.4em}
.ft-top svg.folha{width:2.1em;height:2.1em;flex:none}
.ft-top b{font-size:1.18em;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-eng{all:unset;cursor:pointer;width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.ft-eng svg{width:1.55em;height:1.55em;fill:currentColor}
.ft-eng.on{background:var(--prc);color:var(--onprc)}
.ft-corpo{flex:1;overflow:hidden;position:relative}
.ft-pag{position:absolute;inset:0;padding:.2em .95em 4.6em;overflow:hidden;opacity:0;transform:translateX(6%);transition:opacity .35s,transform .35s;pointer-events:none}
.ft-pag.on{opacity:1;transform:none;pointer-events:auto}
.ft-rola{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.ft h4{margin:.35em 0 .15em;font-size:1.15em;font-weight:700;font-family:inherit;letter-spacing:0}
.ft .sub{color:var(--mut);font-size:.86em;margin:0 0 .6em}
.ft .cd{background:var(--c2);border-radius:.9em;padding:.75em .85em;margin-bottom:.6em}
.ft .cd small{display:block;color:var(--mut);font-size:.78em;margin-bottom:.15em}
.ft .cd p{margin:0;font-size:.9em}
.ft .cd.pri{background:var(--prc);color:var(--onprc)}
.ft .tit{font-weight:700;font-size:.95em;margin:.7em 0 .4em}
.ft .item{display:flex;gap:.6em;align-items:center;background:var(--c1);border-radius:.8em;padding:.6em .7em;margin-bottom:.45em}
.ft .item .ic{width:2.1em;height:2.1em;border-radius:50%;background:var(--c4);display:grid;place-items:center;flex:none;font-size:.95em}
.ft .item .tx{flex:1;min-width:0}
.ft .item .tx b{display:block;font-size:.9em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft .item .tx span{display:block;color:var(--mut);font-size:.74em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft .item .vl{font-weight:700;font-size:.9em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ft .novo{animation:ft-novo 1.6s ease both}
@keyframes ft-novo{0%{opacity:0;transform:translateY(-.8em);background:var(--prc)}30%{opacity:1;transform:none;background:var(--prc)}100%{background:var(--c1)}}
.ft .pulsa{animation:ft-pulsa 1.1s ease 2}
@keyframes ft-pulsa{50%{box-shadow:0 0 0 .22em var(--pri);transform:scale(1.03)}}
.ft .barra{height:.5em;border-radius:1em;background:var(--c4);overflow:hidden;margin-top:.35em}
.ft .barra i{display:block;height:100%;width:0;border-radius:1em;background:var(--verde);transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
.ft .barra i.am{background:var(--ama)}.ft .barra i.vm{background:var(--ver)}
.ft .cat{background:var(--c1);border-radius:.8em;padding:.55em .75em;margin-bottom:.45em}
.ft .cat .l{display:flex;justify-content:space-between;gap:.5em;font-size:.84em}
.ft .cat .l b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft .cat .l span{color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.ft .grade{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ft .fer{background:var(--c2);border-radius:.85em;padding:.65em .7em;min-height:5.6em}
.ft .fer em{font-style:normal;font-size:1.35em;display:block}
.ft .fer b{display:block;font-size:.82em;font-weight:700;margin-top:.15em}
.ft .fer span{display:block;font-size:.72em;color:var(--mut)}
.ft .volta{color:var(--pri);font-size:.85em;font-weight:600;margin:.2em 0 .3em}
.ft .op{display:flex;justify-content:space-between;align-items:center;background:var(--c1);border-radius:.8em;padding:.6em .75em;margin-bottom:.45em;border:.12em solid transparent;transition:border-color .4s,background .4s}
.ft .op b{font-size:.88em;display:block}.ft .op span{font-size:.74em;color:var(--mut)}
.ft .op .pr{text-align:right;font-variant-numeric:tabular-nums}
.ft .op.ganha{border-color:var(--pri);background:#183a1c}
.ft .gelo{background:linear-gradient(135deg,#1d3440,#20302f);border-radius:.9em;padding:.75em .85em;border:.1em solid #3b6475}
.ft .gelo b{display:block}.ft .gelo span{font-size:.8em;color:#b9d8e3}
.ft .med{display:flex;gap:.45em;flex-wrap:wrap;margin:.2em 0 .5em}
.ft .med span{background:var(--c3);border-radius:2em;padding:.3em .6em;font-size:.76em}
.ft .med span.off{opacity:.4}
/* barra de abas */
.ft-nav{position:absolute;left:0;right:0;bottom:0;background:var(--c2);display:grid;grid-template-columns:repeat(4,1fr);padding:.55em .2em .8em;z-index:3}
.ft-nav button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:.74em;color:var(--mut);position:relative}
.ft-nav button .pill{width:4.6em;height:2.3em;border-radius:2em;display:grid;place-items:center;transition:background .3s}
.ft-nav svg{width:1.75em;height:1.75em;fill:currentColor}
.ft-nav button.on{color:var(--on);font-weight:700}
.ft-nav button.on .pill{background:var(--prc);color:var(--onprc)}
.ft-nav .ponto{position:absolute;top:.15em;right:1.25em;width:.7em;height:.7em;border-radius:50%;background:var(--ama);transform:scale(0);transition:transform .3s}
.ft-nav .ponto.on{transform:scale(1)}
.ft-nav button:focus-visible,.ft-eng:focus-visible{outline:.15em solid var(--pri);outline-offset:.1em}
.ft-fab{position:absolute;right:.9em;bottom:5.3em;width:3.6em;height:3.6em;border-radius:1.1em;background:var(--prc);color:var(--onprc);display:grid;place-items:center;z-index:2;box-shadow:0 .3em .8em rgba(0,0,0,.4)}
.ft-fab svg{width:1.6em;height:1.6em;fill:currentColor}
/* aviso que desce do topo (heads-up) */
.ft-hu{position:absolute;left:.55em;right:.55em;top:.45em;z-index:5;background:#2b302b;border-radius:1.2em;padding:.7em .8em;box-shadow:0 .5em 1.4em rgba(0,0,0,.55);transform:translateY(-130%);transition:transform .5s cubic-bezier(.3,.8,.25,1)}
.ft-hu.on{transform:none}
.ft-hu .cab{display:flex;align-items:center;gap:.45em;font-size:.74em;color:var(--mut)}
.ft-hu .cab .ap{width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;font-size:.95em;flex:none}
.ft-hu b{display:block;font-size:.9em;margin-top:.35em}
.ft-hu p{margin:.15em 0 0;font-size:.82em;color:#d6dbd2}
/* mensagem de rodapé (snackbar) */
.ft-snack{position:absolute;left:.7em;right:.7em;bottom:5.3em;z-index:4;background:#E1E4DD;color:#1A1C19;border-radius:.5em;padding:.75em .9em;font-size:.84em;display:flex;justify-content:space-between;gap:.6em;transform:translateY(40%);opacity:0;transition:.35s}
.ft-snack.on{transform:none;opacity:1}
.ft-snack em{font-style:normal;color:#2E7D32;font-weight:700}
.ft-toque{position:absolute;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(255,255,255,.35);z-index:6;pointer-events:none;opacity:0}
.ft-toque.on{animation:ft-toque .7s ease}
@keyframes ft-toque{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
/* abaixo do celular */
.fone-leg{min-height:4.8em;margin:0;text-align:center;font-size:var(--s1);color:var(--muted);max-width:30ch;transition:opacity .3s}
.fone-ctl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fone-ctl button{font:inherit;font-size:var(--s1);cursor:pointer;border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 14px}
.fone-ctl button[aria-pressed="true"]{background:var(--leaf);border-color:var(--leaf);color:var(--bg)}
@media (prefers-reduced-motion: reduce){.ft *{transition:none!important;animation:none!important}}
.ft-hu .ap svg{width:100%;height:100%}
.ft .op>span{font-size:1em}
/* superfícies derivadas do fundo: servem a todas as paletas */
.ft{--c1:color-mix(in srgb,var(--bg),var(--on) 4%);--c2:color-mix(in srgb,var(--bg),var(--on) 7%);--c3:color-mix(in srgb,var(--bg),var(--on) 12%);--c4:color-mix(in srgb,var(--bg),var(--on) 17%);--ol:color-mix(in srgb,var(--bg),var(--on) 25%)}
.ft,.ft .cd,.ft .item,.ft .cat,.ft .fer,.ft-nav,.ft .chip,.ft .btn-ft,.ft-nav .pill,.ft-fab{transition:background-color .6s,color .6s,border-color .6s}
.ft[data-tema="oceano"]{--bg:#101418;--on:#E1E2E8;--mut:#C1C7D0;--pri:#A3C9FF;--onpri:#00315D;--prc:#0F4C8A;--onprc:#D3E4FF;--verde:#2E7D32}
.ft[data-tema="lavanda"]{--bg:#141218;--on:#E6E0E9;--mut:#CAC4D0;--pri:#D0BCFF;--onpri:#381E72;--prc:#4F378B;--onprc:#EADDFF}
.ft[data-tema="sol"]{--bg:#1A1110;--on:#F1DFDA;--mut:#D8C2BC;--pri:#FFB59E;--onpri:#5D1900;--prc:#7F2E14;--onprc:#FFDBCF}
.ft[data-tema="dourado"]{--bg:#16130B;--on:#EAE1D4;--mut:#D0C5B4;--pri:#F2C04B;--onpri:#3F2E00;--prc:#5B4300;--onprc:#FFDF99}
.ft[data-tema="claro"]{--bg:#FAFDF7;--on:#1A1C19;--mut:#424940;--pri:#2E7D32;--onpri:#FFFFFF;--prc:#C8E6C9;--onprc:#0B3D0F;--c1:#F4F8F1;--c2:#EEF3EB;--c3:#E8EDE5;--c4:#DEE5D9}
.ft .op.ganha{background:color-mix(in srgb,var(--prc) 60%,var(--bg))}
.ft .chips{display:flex;flex-wrap:wrap;gap:.4em}
.ft .chips.col{flex-direction:column;align-items:flex-start}
.ft .chip{border:.08em solid var(--ol);border-radius:.6em;padding:.35em .6em;font-size:.76em;display:inline-flex;gap:.4em;align-items:center;color:var(--on)}
.ft .chip.on{background:var(--prc);color:var(--onprc);border-color:var(--prc)}
.ft .chip i{width:.85em;height:.85em;border-radius:50%;flex:none}
.ft .btn-ft{display:block;background:var(--pri);color:var(--onpri);border-radius:2em;padding:.55em .9em;text-align:center;font-weight:700;font-size:.82em;margin:.6em 0 .3em}
.ft .lin-bt{margin-bottom:0}
.ft .passo{font-size:.76em;color:var(--pri);font-weight:700;margin:0 0 .4em}
.ft .lin{display:flex;gap:.45em;align-items:baseline;font-size:.74em;padding:.42em .15em;border-bottom:.06em solid var(--c4)}
.ft .lin b{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft .lin span{color:var(--mut);white-space:nowrap}
.ft .lin .chk{color:var(--pri)}
.ft .gira{display:inline-block;width:.9em;height:.9em;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.1em;animation:ft-gira .8s linear infinite}
@keyframes ft-gira{to{transform:rotate(360deg)}}