/* ---- arte.css — par do arte.js (30/set/2026) ----
   O S 3D da landing dentro do app + resposta de toque com mola. Tudo aqui é
   aditivo: nenhuma regra muda layout de tela existente. */

/* Anton tem acento alto: com line-height ~1 o Ó e o É de "NEGÓCIOS"/"É
   TROCAR" invadiam a linha de cima e liam como "FUTURQ". */
.poster h1{line-height:1.13}

/* porta — celular: o S ocupa o vão à direita do título */
.poster{position:relative}
.arte-s{position:absolute;z-index:0}
.arte-s.poster{right:-14px;top:-18px;width:52%;height:calc(100% + 36px);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.poster > .brandline,.poster > h1{position:relative;z-index:1;pointer-events:none}
/* porta — desktop: centro da coluna do palco, por cima da malha */
.arte-s.palco{inset:12% 8%;cursor:pointer;z-index:2;pointer-events:auto}

/* Swapou! — o S no lugar do disco ⇄: cresce girando no swap, sai no lock */
.cv-stage > .arte-cel{position:absolute;z-index:6;pointer-events:none;transform:scale(.4);opacity:1;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.cv-cel.swap .cv-stage > .arte-cel{transform:scale(1)}
.cv-cel.lock .cv-stage > .arte-cel{transform:scale(.55);opacity:0;transition-duration:.45s}
.cv-cel.arte-on .cv-arrow{opacity:0}

/* toque com mola — só transform em botão (nunca contém position:fixed) */
.btn{transition:opacity .15s,background .15s,border-color .15s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.btn:active:not([disabled]){transform:scale(.965);transition-duration:.08s}
#tabbar button .g{display:inline-block}
#tabbar button .g.arte-pula{animation:artePula .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes artePula{0%{transform:scale(1)}35%{transform:scale(.82) translateY(1px)}70%{transform:scale(1.14) translateY(-2px)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .btn:active:not([disabled]){transform:none}
  #tabbar button .g.arte-pula{animation:none}
}
html.no-anim .btn:active:not([disabled]){transform:none}
html.no-anim #tabbar button .g.arte-pula{animation:none}

/* =========================================================================
   Porta e cadastro com a linguagem da landing (30/set, 2ª rodada)
   ========================================================================= */

/* Geist: a mesma fonte de texto da landing. Mais aberta que a do sistema em
   14px (o "1", o "l" e o "I" não se confundem em valor e CNPJ) e igual em
   todo aparelho: antes o Android lia Roboto e o Windows lia Segoe. */
@font-face{font-family:"Geist";src:url(/v22/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- campos: 52px, raio do papel "md", anel de foco suave ----
   O :focus-visible global aplicava `border-radius:inherit` também no campo, e o
   campo herdava o raio 0 do pai: ao focar, o campo virava quadrado e o
   contorno rosa aparecia como uma caixa dupla (arredondada dentro, quadrada
   fora). No campo o foco agora é borda + halo, sem outline. */
.input{min-height:52px;border-radius:var(--r-md);padding:14px 16px;font-size:16px;
  transition:border-color .2s,box-shadow .25s,background .2s}
textarea.input{min-height:96px}
.input:hover{border-color:rgba(255,255,255,.2)}
.input:focus,.input:focus-visible{outline:none;border-radius:var(--r-md);border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(255,45,143,.16);background:var(--ink-2)}
html[data-tema="claro"] .input:hover{border-color:rgba(0,0,0,.22)}

/* rótulo de formulário: frase normal, legível, em vez de caixa alta de 10,5px
   com espaçamento largo (lia como carimbo e cansava em formulário longo) */
.field > .lbl,.field > label.lbl,#signup .sg-f .lbl{font-size:13.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--mute);margin-bottom:8px}
#signup .sg-f{margin-bottom:16px}
#signup .sg-f .hint{font-size:12.5px;margin-top:7px}
#signup .sg-ver{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600}
#signup .sg-senha .input{padding-right:88px}

/* ---- porta ---- */
.porta-acoes .btn,#signup .sg-foot .btn.solid{min-height:52px;font-size:15.5px;border-radius:var(--r-md)}
#login .porta-acoes{gap:10px}
#forgotBtn{font-size:13px}
#login .hint{font-size:13px;color:var(--mute)}
/* olho de mostrar senha no login (o cadastro já tinha; a porta não) */
.arte-pw{position:relative}
.arte-pw .input{padding-right:52px}
.arte-olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:grid;place-items:center;border-radius:12px;color:var(--mute-2);background:none;border:0;cursor:pointer}
.arte-olho:hover,.arte-olho[aria-pressed="true"]{color:var(--pink)}
.arte-olho svg{width:20px;height:20px}

/* ---- cadastro ----
   Os dez pontos do céu caíam atrás de rótulo e placeholder e liam como
   mancha (o próprio QA de 27/ago já tinha apagado metade deles no celular).
   Fica a aura rosa do alto, um pouco mais presente, como no topo da landing. */
#signup .sg-ceu{display:none}
#signup .sg-aura{background:radial-gradient(52% 62% at 50% 38%,rgba(255,45,143,.16),rgba(139,61,255,.06) 55%,transparent 78%)}
html[data-tema="claro"] #signup .sg-aura{background:radial-gradient(52% 62% at 50% 38%,rgba(255,45,143,.08),transparent 78%)}
#signup .sg-h{font-size:clamp(32px,9vw,40px);line-height:1.1}
#signup .sg-sub{font-size:15px;color:var(--mute);line-height:1.5;max-width:40ch}
#signup .sg-top .back{width:44px;height:44px}
#signup .sg-chip{height:40px;font-size:13.5px}
#signup .sg-tipo{height:44px;font-size:14px}
#signup .sg-terms{font-size:12.5px}
/* desktop: o S da marca flutua à direita da coluna do formulário */
.arte-s.signup{position:absolute;top:90px;left:calc(50% + 250px);width:280px;height:320px;z-index:0;pointer-events:auto;cursor:pointer}

/* =========================================================================
   Revisão do app por dentro (30/set) — correções da auditoria de telas.
   Os módulos injetam o CSS deles DEPOIS deste arquivo, então as regras que
   brigam com um módulo levam `html` na frente para vencer por especificidade.
   ========================================================================= */

/* rótulo em caixa alta nunca abaixo de 11px (havia 9,5 e 10px em texto que importa) */
:root{--fs-k:11px}
html .cv-ch3 .parecer .pk,html .pf-stats span,html .hpill .k{font-size:11px}

/* ---- pill "Oportunidade" do Otto ----
   Cobria o título do card no deck e a caixa "Peça ao Otto" em Permutas, e o
   branco literal sumia no tema claro. Vira uma linha só, some onde a tela já
   tem barra de ação no mesmo lugar, e usa o token de texto. */
html .bf-pill{color:var(--white);padding:8px 12px 8px 9px;bottom:calc(var(--tabh) + var(--safe-b, 0px) + 12px)}
html .bf-pill .t small{display:none}
html .bf-head .lbl b{color:var(--white)}
body[data-view="dossie"] .bf-pill,body[data-view="swaps"] .bf-pill,body[data-view="chat"] .bf-pill{display:none}
/* folha da oportunidade: valor não quebra longe do R$; a etiqueta medido/estimado era jargão */
html .bf-kv .r .v{white-space:nowrap}
html .bf-kv .r .s{display:none}

/* ---- Permutas: a caixa "Peça ao Otto" fica opaca (o contador lia por cima do texto rolado) ---- */
html .ot-askfix{background:var(--ink);box-shadow:0 -1px 0 var(--hair-2),0 -18px 24px -6px var(--ink)}
/* caminhos em três pontas: 1 aberto, o resto dobrado (ver chainsHtml) */
.cv-ch3mais{margin:4px 0 14px}
.cv-ch3mais > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  min-height:44px;border:1px dashed var(--hair);border-radius:var(--r-md);font-size:13.5px;font-weight:600;color:var(--mute)}
.cv-ch3mais > summary::-webkit-details-marker{display:none}
.cv-ch3mais[open] > summary{margin-bottom:12px}
.cv-ch3mais .como{display:none}
html .cv-ch3 .leg .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* "Parecer do Otto": o summary também tem .pk, e o display:block do .pk vencia o flex */
html .cv-ch3 details.parecer summary.pk{display:flex;font-size:11px;margin:0}
html[data-tema="claro"] .cv-path .no .cv-av{background:var(--ink-3);color:var(--mute)}

/* ---- Comunidade: as abas fixas grudam ABAIXO do header e são opacas ---- */
html .cm-top{top:var(--hdrh,57px);background:var(--ink);box-shadow:0 10px 14px -8px var(--ink)}
html .cm-tab.on{color:var(--white)}

/* ---- folhas: dois botões no rodapé dividem a largura ---- */
.mdl-foot:has(> .btn + .btn){display:flex;gap:10px}
.mdl-foot:has(> .btn + .btn) > .btn{flex:1;min-width:0}
/* toast do Otto não pousa em cima do título de uma folha aberta */
#modalRoot.on ~ .toasts .toast.ai{display:none}

/* ---- Radar: "de você" em toda linha era ruído; o nome ganha a largura ---- */
html .rd-row .r .k{display:none}

/* ---- Perfil: os botões do topo em uma linha ---- */
html .pf-acts .btn{white-space:nowrap;font-size:13.5px}
html .pf-acts .btn .ic{display:none}
html .pf-acts .gear .ic{display:inline-block}

/* ---- header: o ⚡0 repetia a cota da tela; saldo vira atalho da Carteira ---- */
#supPill{display:none}
#balPill{cursor:pointer}