/* O APP · casca e telas. Tokens, botões, campos, listas, avisos e a folha moram em ds.css; aqui fica o que é do app.
   Casca: no celular, barra no alto e cinco abas no pé; no computador, menu à esquerda, coluna de leitura no meio e,
   em tela larga, o trilho da direita. A coluna do meio tem sempre a mesma largura: o olho não precisa se acostumar. */

/* ---------- 1. casca ---------- */
#casca { min-height: 100vh; min-height: 100dvh; }
#lateral, #trilho { display: none; }
#app { max-width: var(--col); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(var(--abas) + env(safe-area-inset-bottom) + 1.5rem); }
body.sem-abas #app { padding-bottom: 1.5rem; }
body.solta #app { max-width: none; padding-bottom: 0; }
#tela { outline: none; }
.pagina { padding: 1rem var(--margem) .5rem; }
.pagina.colada { padding: 0 0 .5rem; }

/* barras do alto */
.topo, .cabeca { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .125rem; min-height: var(--topo); padding: env(safe-area-inset-top) .375rem 0; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.topo { padding-left: var(--margem); padding-right: .5rem; }
.topo h1 { flex: 1; min-width: 0; font-size: 1.25rem; font-stretch: 110%; letter-spacing: -.022em; }
.topo .logo { flex: 1; min-height: 2.75rem; }
/* no celular, o início mostra a marca e o título fica só para o leitor de tela; no computador a marca já está no menu */
.topo .titulo-do-inicio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topo-acoes { display: flex; align-items: center; gap: .125rem; margin-left: auto; }
.topo-acoes .botao { margin-right: .5rem; }
.cabeca h1 { flex: 1; min-width: 0; overflow: hidden; font-size: 1.0625rem; font-weight: 650; font-stretch: 105%; letter-spacing: -.012em; text-overflow: ellipsis; white-space: nowrap; }
.topo .acao, .cabeca .acao, .cabeca .voltar { position: relative; display: grid; place-items: center; flex-shrink: 0; min-width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: var(--tinta); text-decoration: none; transition: background-color var(--t-rapido); }
.topo .acao:hover, .cabeca .acao:hover, .cabeca .voltar:hover { background: var(--sup); }
.cabeca .acao.texto { padding: 0 .75rem; border-radius: var(--r-m); font-size: .9375rem; font-weight: 500; }
.bolinha { position: absolute; top: .3125rem; right: .25rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: 1rem; background: var(--acento); color: #fff; font: 600 .6875rem/1.125rem var(--f); text-align: center; box-shadow: 0 0 0 2px var(--fundo); }
.simbolo { display: block; flex-shrink: 0; }
.simbolo-ve .azulejo { fill: var(--tinta); }
.simbolo-ve .lente { fill: var(--fundo); }
.simbolo-ve .pupila { fill: var(--tinta); }
.furo { stroke: var(--fundo); }

/* abas do celular */
#abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--linha); background: var(--fundo); }
body.sem-abas #abas { display: none; }
#abas .dentro { display: grid; grid-template-columns: repeat(5, 1fr); max-width: var(--col); height: var(--abas); margin: 0 auto; }
#abas a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; color: var(--cinza); font-size: .6875rem; font-weight: 500; line-height: 1; text-decoration: none; }
#abas a[aria-current="page"] { color: var(--tinta); font-weight: 650; }
#abas a[aria-current="page"] svg { stroke-width: 2.2; }
#abas .bolinha { top: .375rem; right: 50%; margin-right: -1.5rem; }
/* cinco nomes numa linha: em tela estreita ou com a letra aumentada, a própria letra estreita (ela tem esse eixo) */
@media (max-width: 22.5rem) { #abas a { font-stretch: 86%; } }
:root[data-letra="1"] #abas a { font-size: .625rem; font-stretch: 88%; }
:root[data-letra="2"] #abas a { font-size: .5625rem; font-stretch: 84%; }

@media (min-width: 60rem) {
  #abas { display: none; }
  #casca { display: grid; grid-template-columns: var(--lateral) minmax(0, var(--col)); justify-content: center; }
  body.larga #casca { grid-template-columns: var(--lateral) minmax(0, 61rem); }
  #app { max-width: none; width: 100%; margin: 0; padding-bottom: 4rem; border-inline: 1px solid var(--linha); }
  body.sem-abas #app { padding-bottom: 4rem; }
  .topo-acoes { display: none; }
  .topo { min-height: 3.5rem; }
  .topo .logo { display: none; }
  .topo .titulo-do-inicio { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  #aviso { bottom: 1.5rem; }
  /* menu da esquerda */
  #lateral { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1.25rem; height: 100vh; height: 100dvh; padding: 0 .75rem 1rem 0; overflow-y: auto; scrollbar-width: none; }
  #lateral::-webkit-scrollbar { display: none; }
  .lateral-topo { display: flex; align-items: center; min-height: 3.5rem; padding: 0 .75rem; }
  .lateral-grupo { display: grid; gap: 1px; }
  .lateral-rotulo { padding: .25rem .75rem .5rem; }
  .lateral-rotulo .logo-nome { font-size: .8125rem; font-weight: 600; font-stretch: 105%; letter-spacing: -.005em; color: var(--cinza); }
  .lateral-rotulo .logo svg { width: 1.125rem; height: 1.125rem; }
  .lateral-item { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--r-m); color: var(--tinta); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color var(--t-rapido); }
  .lateral-item svg { color: var(--cinza); }
  .lateral-item:hover { background: var(--sup); }
  .lateral-item[aria-current="page"] { background: var(--sup); font-weight: 650; }
  .lateral-item[aria-current="page"] svg { color: var(--tinta); stroke-width: 2.1; }
  .lateral-item > span:first-of-type { flex: 1; min-width: 0; }
  .lateral-item .bolinha { position: static; box-shadow: none; }
  .lateral-publicar { margin-top: .25rem; }
  .lateral-pe { display: grid; gap: .5rem; margin-top: auto; padding-top: 1rem; }
  .lateral-conta { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: var(--r-m); color: inherit; text-decoration: none; }
  .lateral-conta:hover, .lateral-conta[aria-current="page"] { background: var(--sup); }
  .lateral-conta .meio { min-width: 0; }
  .lateral-conta b { display: block; overflow: hidden; font-size: .875rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .lateral-conta small { display: block; font-size: .8125rem; line-height: 1.3; color: var(--cinza); }
  /* telas soltas (boas-vindas, entrar, link do cliente) não têm menu */
  body.solta #casca { display: block; }
  body.solta #lateral { display: none; }
  body.solta #app { border: 0; padding-bottom: 0; }
}
@media (min-width: 80rem) {
  #casca { grid-template-columns: var(--lateral) minmax(0, var(--col)) var(--trilho); }
  body.larga #casca { grid-template-columns: var(--lateral) minmax(0, 61rem); }
  #trilho { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1.5rem; height: 100vh; height: 100dvh; padding: .5rem 0 1rem 1.5rem; overflow-y: auto; scrollbar-width: none; }
  #trilho::-webkit-scrollbar { display: none; }
  body.larga #trilho, body.solta #trilho { display: none; }
  #trilho .busca-campo { min-height: 2.5rem; border-color: transparent; background: var(--sup); }
  #trilho .busca-campo input { min-height: 2.375rem; font-size: .9375rem; }
  .trilho-bloco h2 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .25rem; font-size: .9375rem; font-weight: 650; font-stretch: 105%; }
  .trilho-bloco h2 a { color: var(--cinza); font-size: .8125rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; text-decoration: none; }
  .trilho-bloco h2 a:hover { color: var(--tinta); text-decoration: underline; }
  .trilho-linha, .trilho-pessoa { display: block; padding: .625rem 0; color: inherit; text-decoration: none; }
  .trilho-linha + .trilho-linha, .trilho-pessoa + .trilho-pessoa { border-top: 1px solid var(--linha); }
  .trilho-linha b, .trilho-pessoa b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; }
  .trilho-linha:hover b, .trilho-pessoa:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .trilho-linha small, .trilho-pessoa small { display: block; font-size: .8125rem; line-height: 1.4; color: var(--cinza); }
  .trilho-linha .urgente:not(:empty)::after { content: " · "; color: var(--cinza-claro); font-weight: 400; }
  .trilho-linha .valor { color: var(--tinta); }
  .trilho-pessoa { display: flex; align-items: center; gap: .625rem; }
  .trilho-pessoa .meio { min-width: 0; }
  .trilho-pe { margin-top: auto; font-size: .75rem; line-height: 1.5; color: var(--cinza); }
  .trilho-pe p { margin: 0 0 .375rem; }
  .trilho-pe a { display: inline-block; margin-right: .75rem; padding: .25rem 0; color: var(--cinza); }
}

/* ---------- 2. pessoas ---------- */
.avatar { --tam: 2.5rem; position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--tam); height: var(--tam); border-radius: 50%; background: var(--sup-2); color: #fff; font: 600 calc(var(--tam) * .38)/1 var(--f); text-decoration: none; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar.quadrado { border-radius: 24%; }
.avatar.disponivel::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: .625rem; min-height: .625rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--fundo); }
.pessoa { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem var(--margem); border: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.pagina .pessoa { padding-inline: 0; }
.cartao > .pessoa, .em-caixa .pessoa { padding: .75rem 1rem; }
.pessoa .meio { display: block; flex: 1; min-width: 0; }
.pessoa .nome, .nome { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.pessoa .sub { display: block; font-size: .875rem; line-height: 1.4; color: var(--cinza); }
.pessoa .extra { display: flex; align-items: center; flex-wrap: wrap; gap: .125rem .625rem; margin-top: .125rem; font-size: .8125rem; line-height: 1.4; color: var(--cinza); }
a.pessoa:hover .nome, button.pessoa:hover .nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.verificado { display: inline-flex; flex-shrink: 0; color: var(--azul); }
.estrelas { display: inline-flex; align-items: center; gap: .1875rem; color: var(--tinta); font-weight: 600; }
.estrelas svg { color: var(--estrela); }
.estrelas .quantas { font-weight: 400; color: var(--cinza); }
.dado { display: inline-flex; align-items: center; gap: .25rem; }
.sinal { display: inline-flex; align-items: center; gap: .3125rem; color: var(--verde); font-weight: 500; }
.sinal::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
/* grupo de linhas dentro de um contorno (lista de pessoas de exemplo, quem publicou a vaga) */
.em-caixa { border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; }
.em-caixa > * + * { border-top: 1px solid var(--linha); }
.linha.em-caixa { padding: .75rem 1rem; }
.em-caixa > .linha { padding: .625rem 1rem; }

/* ---------- 3. filtros: fichas e guias ---------- */
.filtros { display: flex; align-items: center; gap: .5rem; padding: .625rem var(--margem); overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.ficha { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; min-height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--contorno); border-radius: var(--r-m); background: var(--fundo); color: var(--tinta); font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color var(--t-rapido), background-color var(--t-rapido); }
.ficha svg { color: var(--cinza); }
.ficha:hover { border-color: var(--borda-campo); }
.ficha[aria-pressed="true"], .ficha[aria-current="true"] { border-color: var(--tinta); background: var(--tinta); color: var(--fundo); }
.ficha[aria-pressed="true"] svg, .ficha[aria-current="true"] svg { color: inherit; }
select.ficha { max-width: 13rem; }
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
/* guias: o mesmo filtro, em forma de abas de texto com um traço embaixo da escolhida (mural, planos, painel) */
.filtros.guias { gap: 0; padding: 0 calc(var(--margem) - .75rem); }
.filtros.guias .ficha { position: relative; min-height: 2.875rem; padding: 0 .75rem; border: 0; border-radius: 0; background: none; color: var(--cinza); }
.filtros.guias .ficha:hover { color: var(--tinta); }
.filtros.guias .ficha[aria-pressed="true"], .filtros.guias .ficha[aria-current="true"] { background: none; color: var(--tinta); font-weight: 650; }
.filtros.guias .ficha[aria-pressed="true"]::after, .filtros.guias .ficha[aria-current="true"]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--tinta); }
/* controle segmentado: duas ou três opções, uma só marcada */
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--r-m); background: var(--sup-2); }
.segmentos button { min-height: 2.25rem; padding: 0 .75rem; border: 0; border-radius: 8px; background: none; color: var(--cinza); font-size: .875rem; font-weight: 500; transition: background-color var(--t-rapido), color var(--t-rapido); }
.segmentos button[aria-pressed="true"] { background: var(--fundo); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 18, 20, .12); }

/* ---------- 4. mural ---------- */
.inicio-topo { display: grid; gap: .75rem; padding: .875rem var(--margem); border-bottom: 1px solid var(--linha); }
.inicio-topo .fichas { flex-wrap: nowrap; margin: 0 calc(var(--margem) * -1); padding: 0 var(--margem); overflow-x: auto; scrollbar-width: none; }
.inicio-topo .fichas::-webkit-scrollbar { display: none; }
.inicio-topo .linha.contornada { min-height: 0; }
.publicar-chamada { display: flex; align-items: center; gap: .75rem; padding: .625rem var(--margem); border-bottom: 1px solid var(--linha); }
.publicar-chamada button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex: 1; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--cinza-claro); font-size: 1.0625rem; text-align: left; }
.publicar-chamada button svg { color: var(--cinza); }
.post { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; padding: .875rem var(--margem) .25rem; border-bottom: 1px solid var(--linha); }
.post > .avatar { align-self: start; }
.post-corpo { min-width: 0; }
.post-cabeca { display: flex; align-items: flex-start; gap: .5rem; }
.post-cabeca .quem { flex: 1; min-width: 0; }
.post-cabeca .nome a { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.5rem; color: inherit; text-decoration: none; }
.post-cabeca .nome a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-cabeca .sub { display: block; font-size: .8125rem; line-height: 1.4; color: var(--cinza); }
.post-cabeca .botao-icone { margin: -.5rem -.5rem 0 0; }
.post-etiquetas { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }
.post-texto { margin: .375rem 0 0; font-size: .9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-texto.curto { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.post .ver-mais { min-height: 2rem; }
.post .vaga { margin-top: .625rem; padding: .75rem .875rem; border: 1px solid var(--linha); border-radius: var(--r-g); }
.post-acoes { display: flex; justify-content: space-between; max-width: 27rem; margin: .25rem 0 0 -.5rem; }
.post-acoes button { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: 0 .5rem; border: 0; border-radius: var(--r-m); background: none; color: var(--cinza); font-size: .8125rem; font-weight: 500; transition: background-color var(--t-rapido), color var(--t-rapido); }
.post-acoes button:hover { background: var(--sup); color: var(--tinta); }
.post-acoes button[aria-pressed="true"] { color: var(--acento-texto); }
.post-acoes button[aria-pressed="true"] svg { stroke-width: 2.2; }
.post-acoes .qt { font-variant-numeric: tabular-nums; }
.post-acoes button.pulou svg { animation: pulo .28s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pulo { from { transform: scale(.6); } to { transform: none; } }
@media (max-width: 26rem) { .post-acoes .rot.some { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.comentario { display: flex; gap: .625rem; padding: .625rem 0; }
.comentario + .comentario { border-top: 1px solid var(--linha); }
.comentario .balao { flex: 1; min-width: 0; font-size: .9375rem; }
.comentario .balao b { font-weight: 600; }
.comentario .balao p { margin: .125rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario small { font-size: .8125rem; color: var(--cinza); }
.comentario .estrelas { display: flex; margin: .1875rem 0 .125rem; }
.comentario .resposta { margin-top: .5rem; padding: .5rem .75rem; border-radius: var(--r-m); background: var(--sup); }
.comentario .link { min-height: 2rem; font-size: .8125rem; }

/* fotos */
.grade-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.grade-fotos img, .foto-quadrada { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-m); background: var(--sup-2); object-fit: cover; }
.fotos-do-post { display: grid; gap: 2px; margin-top: .625rem; overflow: hidden; border: 1px solid var(--linha); border-radius: var(--r-g); }
.fotos-do-post.n2, .fotos-do-post.n3, .fotos-do-post.n4 { grid-template-columns: 1fr 1fr; }
.fotos-do-post button { position: relative; display: block; overflow: hidden; padding: 0; border: 0; background: var(--sup-2); }
.fotos-do-post img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fotos-do-post.n1 img { aspect-ratio: auto; max-height: 30rem; }
.fotos-do-post.n3 button:first-child { grid-column: 1 / -1; }
.fotos-do-post .mais { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font: 600 1.5rem var(--f); }
.previas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .75rem; }
.previa { position: relative; width: 5.5rem; }
.previa img { display: block; width: 5.5rem; height: 5.5rem; border-radius: var(--r-m); background: var(--sup-2); object-fit: cover; }
.previa .tirar { position: absolute; top: -.4375rem; right: -.4375rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 2px solid var(--fundo); border-radius: 50%; background: var(--tinta); color: var(--fundo); }
.previa select { width: 100%; min-height: 2.25rem; margin-top: .25rem; padding: 0 .25rem; border: 1px solid var(--borda-campo); border-radius: var(--r-p); background: var(--fundo); font-size: .8125rem; }
.visor { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; background: rgba(0, 0, 0, .94); }
.visor img { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.visor .meio { display: grid; place-items: center; overflow: hidden; padding: .5rem; }
.visor .barra-visor { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; color: #fff; font-size: .875rem; }
.visor .legenda { flex: 1; text-align: center; }
.visor button { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.visor button:hover { background: rgba(255, 255, 255, .2); }

/* ---------- 5. vagas ---------- */
.vaga { padding: .875rem 0; }
.vaga + .vaga { border-top: 1px solid var(--linha); }
.vaga-corpo { display: block; color: inherit; text-decoration: none; }
.vaga h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; }
a.vaga-corpo:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vaga-dados { display: flex; flex-wrap: wrap; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--cinza); }
.vaga-dados > span:not(:last-child)::after { content: "·"; margin: 0 .4375rem; color: var(--cinza-claro); font-weight: 400; }
.urgente { color: var(--acento-texto); font-weight: 600; }
.vaga-valor { display: flex; flex-wrap: wrap; margin-top: .1875rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.vaga-valor span { font-weight: 400; color: var(--cinza); }
.vaga-valor span::before { content: "·"; margin: 0 .4375rem; color: var(--cinza-claro); }
.vaga-pe { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.vaga-pe .quem { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; min-height: 1.75rem; font-size: .8125rem; color: var(--cinza); text-decoration: none; }
.vaga-pe .quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga-pe .avatar { --tam: 1.5rem; }
.vagas-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem var(--margem); border-bottom: 1px solid var(--linha); }
.vagas-acoes .link { min-height: 2.25rem; }
/* a vaga aberta */
.vaga-topo h1 { font-size: 1.5rem; }
.vaga-topo .tags { margin-top: .5rem; }
.fatos { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.fatos li { display: flex; align-items: flex-start; gap: .625rem; }
.fatos svg { margin-top: .125rem; color: var(--cinza-claro); }
.fatos .valor { font-weight: 600; }

/* ---------- 6. perfil ---------- */
.perfil-topo { padding: 1.25rem var(--margem) 0; }
.perfil-topo .avatar { --tam: 5.5rem; }
.perfil-topo .avatar.disponivel::after { width: 1.125rem; height: 1.125rem; right: .125rem; bottom: .125rem; box-shadow: 0 0 0 3px var(--fundo); }
.perfil-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.perfil-nome { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; font-size: 1.5rem; overflow-wrap: anywhere; }
.perfil-titulo { margin: .125rem 0 0; font-size: 1rem; }
.perfil-lugar { margin: .25rem 0 0; font-size: .875rem; color: var(--cinza); }
.perfil-selos { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin-top: .625rem; font-size: .875rem; }
.perfil-numeros { display: flex; flex-wrap: wrap; gap: .125rem 1.25rem; margin: .75rem 0 0; font-size: .875rem; color: var(--cinza); }
.perfil-numeros b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.perfil-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.perfil-acoes .botao { flex: 1 1 8rem; }
@media (min-width: 40rem) { .perfil-acoes .botao { flex: 0 0 auto; } }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; border: 1px solid var(--linha); border-radius: var(--r-g); }
.numeros div { padding: .875rem .75rem; }
.numeros div + div { border-left: 1px solid var(--linha); }
.numeros b { display: block; font: 700 1.5rem/1.1 var(--f); font-stretch: 108%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numeros small { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.3; color: var(--cinza); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .75rem; }
@media (min-width: 40rem) { .pagina > .duas-colunas { grid-template-columns: repeat(3, 1fr); } }
.obra-capa { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.obra-capa img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--sup-2); object-fit: cover; }
.obra-capa .legenda { display: block; padding-top: .5rem; }
.obra-capa b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.obra-capa small { display: block; font-size: .8125rem; color: var(--cinza); }
.obra-capa:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fase { position: absolute; top: .5rem; left: .5rem; padding: .1875rem .375rem; border-radius: 5px; background: rgba(16, 18, 20, .78); color: #fff; font: 600 .6875rem/1.2 var(--f); }
.fase.antes { background: rgba(255, 255, 255, .92); color: #101214; }
.qr { display: inline-block; padding: .5rem; border-radius: var(--r-m); background: #fff; line-height: 0; }
.qr svg { display: block; width: 100%; height: auto; }
.estrelas-escolha { display: flex; justify-content: center; gap: .25rem; margin: .75rem 0; }
.estrelas-escolha button { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; background: none; color: var(--contorno); }
.estrelas-escolha button[aria-pressed="true"] { color: var(--estrela); }
/* cartão de visita: o perfil num cartão para mandar e imprimir */
.cartao-de-visita { max-width: 22rem; margin: .5rem auto 0; padding: 1.5rem; border: 1px solid var(--linha); border-radius: var(--r-x); background: #fff; color: #101214; }
.cartao-de-visita .logo { color: #101214; }
.cartao-de-visita .quem { display: flex; align-items: center; gap: .875rem; margin-top: 1.5rem; }
.cartao-de-visita .avatar { --tam: 3.5rem; }
.cartao-de-visita .avatar.disponivel::after { display: none; }
.cartao-de-visita h1 { font-size: 1.25rem; color: #101214; overflow-wrap: anywhere; }
.cartao-de-visita .profissao { margin: .125rem 0 0; font-size: .9375rem; }
.cartao-de-visita .lugar { margin: 0; font-size: .8125rem; color: #565D66; }
.cartao-de-visita .qr { display: block; width: 11rem; margin: 1.5rem auto .75rem; padding: 0; }
.cartao-de-visita .aponte { margin: 0; font-size: .8125rem; text-align: center; color: #565D66; }
.cartao-de-visita .endereco { margin: .25rem 0 0; font-size: .875rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; }

/* ---------- 7. conversas ---------- */
.conversa-linha .hora { align-self: flex-start; flex-shrink: 0; margin-top: .125rem; font-size: .8125rem; color: var(--cinza); }
.conversa-linha .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-linha .fim { display: grid; justify-items: end; gap: .3125rem; }
.conversa-linha.nova .nome { font-weight: 700; }
.conversa-linha.nova .sub:last-child { color: var(--tinta); font-weight: 500; }
.contador { display: inline-block; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 1rem; background: var(--acento); color: #fff; font: 600 .75rem/1.25rem var(--f); text-align: center; }
.conversa-tela { display: flex; flex-direction: column; min-height: calc(100vh - 1.5rem); min-height: calc(100dvh - 1.5rem); }
@media (min-width: 60rem) { .conversa-tela { min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); } }
.conversa-tela .cabeca .avatar { margin-right: .5rem; }
.conversa-tela .cabeca h1 { font-stretch: 100%; }
.conversa-tela .mensagens { flex: 1; }
.sobre-a-vaga { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .375rem var(--margem); border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
.sobre-a-vaga svg { color: var(--cinza); }
.sobre-a-vaga small { display: block; font-size: .75rem; color: var(--cinza); }
.sobre-a-vaga b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.mensagens { display: flex; flex-direction: column; gap: .25rem; padding: 1rem var(--margem); }
.msg { align-self: flex-start; max-width: 80%; padding: .5rem .75rem; border-radius: 1.125rem 1.125rem 1.125rem .375rem; background: var(--sup-2); font-size: .9375rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.minha { align-self: flex-end; border-radius: 1.125rem 1.125rem .375rem 1.125rem; background: var(--acento-suave); }
.msg.aviso { align-self: center; max-width: 90%; padding: .25rem .5rem; background: none; color: var(--cinza); font-size: .8125rem; text-align: center; }
.msg small { display: block; margin-top: .125rem; font-size: .6875rem; text-align: right; color: var(--cinza); }
.msg img { display: block; width: 100%; max-width: 15rem; border-radius: var(--r-m); }
.msg audio { display: block; width: 14rem; max-width: 100%; }
.msg .arquivo { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border: 0; background: none; color: inherit; font-weight: 600; text-align: left; }
.msg .foto-da-msg { padding: 0; border: 0; background: none; }
.dia-divisor { align-self: center; margin: .75rem 0 .375rem; font-size: .75rem; font-weight: 500; color: var(--cinza); }
.barra-conversa { position: sticky; bottom: 0; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: var(--fundo); }
.barra-conversa .botao-icone { color: var(--tinta); }
.barra-conversa .compor textarea { border-radius: 1.375rem; }
.compor { display: flex; align-items: flex-end; gap: .375rem; }
.compor textarea, .compor input[type="text"] { flex: 1; min-width: 0; min-height: 2.75rem; max-height: 9rem; padding: .625rem .875rem; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: var(--fundo); font-size: 1rem; line-height: 1.4; resize: none; }
.compor textarea:focus-visible, .compor input[type="text"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.compor .com-voz { flex: 1; min-width: 0; }
.compor .com-voz textarea { display: block; width: 100%; }
.compor .enviar { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--acento); color: #fff; transition: background-color var(--t-rapido); }
.compor .enviar:hover { background: var(--acento-forte); }
.compor .botao.pequeno { min-height: 2.75rem; }
.gravando { display: flex; align-items: center; gap: .625rem; flex: 1; min-height: 2.75rem; padding: 0 1rem; border-radius: 1.375rem; background: var(--vermelho-suave); color: var(--vermelho); font-size: .9375rem; font-weight: 600; }
.gravando::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .25; } }

/* ---------- 8. Visão de Engenheiro: ferramentas, casa e obra ---------- */
.ve-abre { padding: 1.25rem var(--margem) 1rem; border-bottom: 1px solid var(--linha); }
.ve-abre .logo-ve .logo-nome { font-size: 1.125rem; }
.ve-abre p { max-width: 34rem; margin: .625rem 0 0; font-size: .9375rem; color: var(--cinza); }
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
@media (min-width: 40rem) { .atalhos { grid-template-columns: repeat(3, 1fr); } }
.atalho { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 7.25rem; padding: .875rem; border: 1px solid var(--linha); border-radius: var(--r-g); color: inherit; text-decoration: none; transition: border-color var(--t-rapido), background-color var(--t-rapido); }
.atalho:hover { border-color: var(--contorno); background: var(--sup); }
.atalho .bola { display: inline-flex; color: var(--tinta); }
.atalho.destaque .bola { color: var(--acento-texto); }
.atalho b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.atalho small { display: block; margin-top: .1875rem; font-size: .8125rem; line-height: 1.35; color: var(--cinza); }
.atalho .placa { position: absolute; top: .75rem; right: .75rem; }
/* lista de profissões em duas colunas (buscar) */
.profissoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (min-width: 40rem) { .profissoes { grid-template-columns: repeat(3, 1fr); } }
.profissoes a { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; border-bottom: 1px solid var(--linha); color: inherit; font-size: .9375rem; font-weight: 500; text-decoration: none; }
.profissoes a svg { color: var(--cinza); }
.profissoes a:hover { color: var(--acento-texto); }
/* fiscal de obra, triagens, casa em dia, diário (telas que vieram do Visão de Engenheiro) */
.itens { border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; }
.item + .item { border-top: 1px solid var(--linha); }
.item-topo { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .75rem .875rem; border: 0; background: none; text-align: left; }
.item-topo:hover { background: var(--sup); }
.item-topo .marca-item { display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--borda-campo); border-radius: 50%; color: transparent; }
.item-topo .marca-item svg { width: .875rem; height: .875rem; stroke-width: 2.6; }
.item.ok .marca-item { border-color: var(--verde); background: var(--verde); color: var(--fundo); }
.item.problema .marca-item { border-color: var(--vermelho); background: var(--vermelho); color: var(--fundo); }
.item.na .marca-item { border-color: var(--sup-2); background: var(--sup-2); color: var(--cinza); }
.item.marcou .marca-item { animation: pulo .3s cubic-bezier(.2, .9, .3, 1.25); }
.item-topo .item-t { flex: 1; color: var(--tinta); font: 500 .9375rem/1.35 var(--f); }
.item-topo .ponta { display: flex; flex-shrink: 0; color: var(--cinza-claro); transition: transform var(--t) var(--curva); }
.item-topo .ponta svg { width: 1.125rem; height: 1.125rem; }
.item[data-aberto="1"] .ponta { transform: rotate(180deg); }
.item.travado .item-t { color: var(--cinza); }
.item.travado .marca-item { border-style: dashed; color: var(--cinza-claro); }
.item-corpo { display: grid; gap: .75rem; padding: .25rem .875rem 1rem 3.125rem; font-size: .9375rem; }
.item-corpo h4 { margin-bottom: .1875rem; }
.item-corpo p { margin: 0; }
@media (max-width: 26rem) { .item-corpo { padding-left: .875rem; } }
.marcar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.marcar button { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-height: 3.5rem; padding: .5rem .25rem; border: 1px solid var(--contorno); border-radius: var(--r-m); background: var(--fundo); color: var(--cinza); font: 500 .8125rem/1.2 var(--f); }
.marcar button:hover { border-color: var(--borda-campo); }
.marcar button[aria-pressed="true"].b-ok { border-color: #0B7A3E; background: #0B7A3E; color: #fff; }
.marcar button[aria-pressed="true"].b-problema { border-color: #C42B2B; background: #C42B2B; color: #fff; }
.marcar button[aria-pressed="true"].b-na { border-color: #565D66; background: #565D66; color: #fff; }
details.fontes { font-size: .8125rem; color: var(--cinza); }
details.fontes summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; }
details.fontes ul { margin: .125rem 0 0; padding-left: 1.125rem; }
details.fontes li + li { margin-top: .5rem; }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linha); border-radius: var(--r-g); }
.resumo div { padding: .75rem; }
.resumo div + div { border-left: 1px solid var(--linha); }
.resumo b { display: block; font: 700 1.5rem/1.1 var(--f); font-stretch: 108%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resumo .v b { color: var(--verde); }
.resumo .r b { color: var(--vermelho); }
.resumo small { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--cinza); }
.resultado-calc { margin-top: 1.25rem; }
.resultado-calc .grande { margin: .25rem 0 .125rem; color: var(--tinta); font: 700 2.25rem/1.05 var(--f); font-stretch: 110%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.resultado-calc .grande small { font: 500 1rem var(--f); letter-spacing: 0; color: var(--cinza); }
.resultado-calc ul { display: grid; margin: .75rem 0 0; padding: 0; list-style: none; }
.resultado-calc li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--linha); font-size: .9375rem; color: var(--cinza); }
.resultado-calc li b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progresso { height: 3px; margin-bottom: 1rem; overflow: hidden; border-radius: 2px; background: var(--linha); }
.progresso i { display: block; height: 100%; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .3s var(--curva); }
.passo { margin: 0 0 .5rem; font-size: .8125rem; color: var(--cinza); }
.selo { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .375rem .75rem; border-radius: var(--r-p); color: #fff; font: 600 .9375rem var(--f); }
.selo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.selo.verde { background: #0B7A3E; }
.selo.amarelo { background: #F2B300; color: #101214; }
.selo.vermelho { background: #C42B2B; }
.bloco { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.bloco h3 { margin-bottom: .375rem; }
.bloco p, .bloco ul { margin: 0; }
.bloco ul { padding-left: 1.25rem; }
.bloco li + li { margin-top: .375rem; }
.foto-previa { display: block; width: 100%; max-height: 20rem; margin-top: .75rem; border-radius: var(--r-g); object-fit: cover; }
.tarefa .quando { display: block; margin-top: .125rem; font-size: .8125rem; font-weight: 400; color: var(--cinza); }
.tarefa.atrasada:not(.travado) .marca-item { border-color: var(--vermelho); background: var(--vermelho); color: var(--fundo); }
.tarefa.perto:not(.travado) .marca-item { border-color: #F2B300; background: #F2B300; color: #101214; }
.tarefa.emdia:not(.travado) .marca-item { border-color: var(--verde); background: var(--verde); color: var(--fundo); }
.anotacao { display: flex; align-items: flex-start; gap: .75rem; }
.anotacao .mini { display: grid; place-items: center; flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: var(--r-m); background: var(--sup-2); color: var(--tinta); object-fit: cover; }
.beneficios { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.beneficios li { display: flex; align-items: flex-start; gap: .625rem; }
.beneficios svg { flex-shrink: 0; margin-top: .125rem; color: var(--verde); }
.etapa { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--linha); }
.etapa:first-child { border-top: 0; }
.etapa input[type="checkbox"] { flex-shrink: 0; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--verde); }
.etapa .meio { flex: 1; min-width: 0; }
.etapa.feita b { color: var(--cinza); text-decoration: line-through; }

/* ---------- 9. planos e pagamento ---------- */
.ofertas { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .ofertas { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.oferta { position: relative; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--linha); border-radius: var(--r-g); }
.oferta.destaque { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.oferta .tag { align-self: flex-start; margin-bottom: .625rem; padding: .1875rem .375rem; border: 0; border-radius: 5px; background: var(--acento-suave); color: var(--acento-texto); font: 600 .6875rem/1.2 var(--f); }
.oferta .nome { margin: 0; font-size: .9375rem; font-weight: 600; }
.oferta .preco, .preco-do-resumo { margin: .375rem 0 0; font: 700 2rem/1.1 var(--f); font-stretch: 110%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.oferta .preco small, .preco-do-resumo small { font: 400 .875rem var(--f); letter-spacing: 0; color: var(--cinza); }
.preco-do-resumo s { font-size: 1.125rem; font-weight: 400; letter-spacing: 0; color: var(--cinza); }
.oferta .eq { margin: .1875rem 0 0; font-size: .875rem; color: var(--cinza); }
.oferta .det { flex: 1; margin: .625rem 0 1rem; font-size: .875rem; line-height: 1.45; color: var(--cinza); }
.oferta .botao { width: 100%; }
.avulso { display: flex; align-items: center; gap: 1rem; padding: .875rem 0; }
.avulso + .avulso { border-top: 1px solid var(--linha); }
.avulso .meio { flex: 1; min-width: 0; }
.avulso b { display: block; font-size: .9375rem; font-weight: 600; }
.avulso .nota { display: block; margin: .125rem 0 0; }
.avulso .preco-avulso { display: block; margin-top: .25rem; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.avulso .preco-avulso s { font-weight: 400; color: var(--cinza); }
.contrato { margin: 1rem 0; }
.contrato > div { padding: .625rem 0; border-top: 1px solid var(--linha); }
.contrato > div:last-child { border-bottom: 1px solid var(--linha); }
.contrato dt { font-size: .8125rem; font-weight: 600; color: var(--cinza); }
.contrato dd { margin: .125rem 0 0; font-size: .9375rem; }
.contrato .forte dd { font-weight: 500; color: var(--tinta); }
.pix-caixa { padding: 1.5rem 1rem; border: 1px solid var(--linha); border-radius: var(--r-g); text-align: center; }
.pix-caixa .nome-do-pedido { margin: 0; font-size: .875rem; color: var(--cinza); }
.pix-valor { margin-top: .125rem; font: 700 2.25rem/1.1 var(--f); font-stretch: 110%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pix-caixa .qr { display: block; width: min(15rem, 76%); margin: 1rem auto; padding: .625rem; border: 1px solid #E4E7EA; }
.copia-e-cola { display: block; width: 100%; max-height: 4.75rem; overflow: hidden; padding: .625rem .75rem; border-radius: var(--r-m); background: var(--sup); color: var(--cinza); font: .75rem/1.45 var(--f-mono); text-align: left; overflow-wrap: anywhere; }
.pix-caixa .botao { width: 100%; margin-top: .75rem; }
.esperando { display: flex; align-items: center; gap: .875rem; margin-top: .75rem; padding: .875rem 1rem; border: 1px solid var(--linha); border-radius: var(--r-g); }
.esperando .carregando { padding: 0; }
.esperando .meio { flex: 1; min-width: 0; }
.esperando b { display: block; font-size: .9375rem; font-weight: 600; }
.esperando .prazo { text-align: right; }
.relogio { font: 600 1.125rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.passos-do-pix { display: grid; gap: .25rem; margin: 1rem 0 0; padding-left: 1.25rem; }
.pedido { padding: .875rem 0; }
.pedido + .pedido { border-top: 1px solid var(--linha); }
.pedido-topo { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; font-weight: 600; }
.pedido-topo b:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pedido .nota { margin: .25rem 0 .625rem; }
/* perguntas e respostas */
details.duvida { padding: 0; border: 0; border-radius: 0; background: none; }
details.duvida + details.duvida { margin-top: 0; border-top: 1px solid var(--linha); }
details.duvida summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .625rem 0; font-size: .9375rem; font-weight: 500; cursor: pointer; list-style: none; }
details.duvida summary::-webkit-details-marker { display: none; }
details.duvida summary::after { content: ""; flex-shrink: 0; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 1.75px solid var(--cinza); border-bottom: 1.75px solid var(--cinza); transform: translateY(-2px) rotate(45deg); transition: transform var(--t) var(--curva); }
details.duvida[open] summary::after { transform: translateY(2px) rotate(-135deg); }
details.duvida p { margin: 0 0 1rem; max-width: 36rem; font-size: .9375rem; color: var(--cinza); }

/* ---------- 10. entrar e cadastro ---------- */
.entrar-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topo); padding: .5rem var(--margem); }
.entrar { max-width: 25rem; margin: 0 auto; padding: 1.5rem var(--margem) 3rem; }
.entrar h1 { font-size: 1.75rem; font-stretch: 112%; letter-spacing: -.03em; }
.entrar .abre { margin: .5rem 0 1.5rem; color: var(--cinza); }
.entrar .botao { width: 100%; }
.entrar .ou { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; font-size: .8125rem; color: var(--cinza); }
.entrar .ou::before, .entrar .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.entrar form .campo:first-child { margin-top: 0; }
.entrar form .botao { margin-top: 1rem; }
.entrar .cota { margin-top: 2.5rem; }
.entrar .legal { margin-top: 2rem; }
@media (min-width: 40rem) { .entrar { padding-top: 4rem; } }
.cadastro { max-width: 30rem; margin: 0 auto; padding: 1.5rem var(--margem) 3rem; }
.cadastro h1 { font-size: 1.75rem; font-stretch: 112%; letter-spacing: -.03em; }
.cadastro .abre { margin: .375rem 0 1.25rem; color: var(--cinza); }
.cadastro .escolha { margin-top: .75rem; }
.cadastro .foto-do-cadastro { display: flex; align-items: center; gap: 1rem; margin-top: .625rem; }
@media (min-width: 40rem) { .cadastro { padding-top: 3rem; } }
.folha-texto { margin: .5rem 0 0; color: var(--cinza); }
.folha-acoes { display: grid; gap: .25rem; margin-top: 1.25rem; }
.fila > .botao + .botao, .fila > h2 + .botao { margin-top: .5rem; }
.menu-de-acoes { margin-top: .5rem; }
.menu-de-acoes .linha.perigo { color: var(--vermelho); }
.menu-de-acoes .linha.perigo .bola { color: inherit; }

/* ---------- 11. boas-vindas (quem chega sem conta) ---------- */
.bv { --bv-margem: clamp(1rem, 4vw, 2.5rem); }
.bv-dentro { max-width: 70rem; margin: 0 auto; padding-inline: var(--bv-margem); }
.bv-topo { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.bv-topo .bv-dentro { display: flex; align-items: center; gap: 1.5rem; min-height: 3.75rem; }
.bv-topo nav { display: none; gap: 1.5rem; margin-left: 1rem; }
.bv-topo nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cinza); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.bv-topo nav a:hover { color: var(--tinta); }
.bv-topo .acoes { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.bv-topo .acoes .link { color: var(--tinta); text-decoration: none; padding: 0 .5rem; }
@media (min-width: 52rem) { .bv-topo nav { display: flex; } }
.bv-abre .bv-dentro { display: grid; gap: 2rem; align-items: center; padding-top: clamp(2.5rem, 8vw, 6rem); padding-bottom: clamp(2.5rem, 8vw, 6rem); }
.bv-abre h1 { max-width: 12ch; font-size: clamp(2.5rem, 7vw + .75rem, 5rem); line-height: .98; font-stretch: 114%; letter-spacing: -.045em; }
.bv-abre .sub { max-width: 33rem; margin: 1.5rem 0 0; font-size: clamp(1.0625rem, 1vw + .875rem, 1.25rem); line-height: 1.45; color: var(--cinza); }
.bv-abre .acoes { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2rem; }
.bv-abre .acoes .botao { width: auto; min-height: 3rem; padding-inline: 1.375rem; font-size: 1rem; }
.bv-abre .nota { margin: 1rem 0 0; }
.bv-planta { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto; color: var(--tinta); }
.bv-planta .parede { fill: var(--sup-2); stroke: currentColor; stroke-width: 1.5; }
.bv-planta .arco { fill: none; stroke: var(--cinza-claro); stroke-width: 1.5; stroke-dasharray: 314.2; animation: bv-arco .9s .15s var(--curva) both; }
.bv-planta .folha { stroke: var(--acento); stroke-width: 7; stroke-linecap: round; transform-box: view-box; transform-origin: 140px 380px; animation: bv-folha .9s .15s var(--curva) both; }
.bv-planta .cota-linha { fill: none; stroke: var(--cinza-claro); stroke-width: 1; }
.bv-planta text { fill: var(--cinza); font: 500 15px var(--f); font-variant-numeric: tabular-nums; }
@keyframes bv-folha { from { transform: rotate(90deg); } to { transform: none; } }
@keyframes bv-arco { from { stroke-dashoffset: -314.2; } to { stroke-dashoffset: 0; } }
@media (min-width: 52rem) { .bv-abre .bv-dentro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.bv-secao { border-top: 1px solid var(--linha); }
.bv-secao > .bv-dentro { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.bv-secao h2 { max-width: 22ch; font-size: clamp(1.625rem, 2.5vw + 1rem, 2.5rem); line-height: 1.08; font-weight: 700; font-stretch: 112%; letter-spacing: -.035em; }
.bv-secao .abre { max-width: 36rem; margin: 1rem 0 0; font-size: 1.0625rem; color: var(--cinza); }
.bv-duas { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .bv-duas { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bv-produto .logo .logo-nome { font-size: 1.375rem; }
.bv-produto .logo svg { width: 2rem; height: 2rem; }
.bv-produto .papel { margin: 1rem 0 0; font-size: 1.0625rem; font-weight: 500; }
.bv-lista { display: grid; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.bv-lista li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--linha); font-size: .9375rem; }
.bv-lista li svg { flex-shrink: 0; margin-top: .0625rem; color: var(--cinza); }
.bv-lista b { display: block; font-weight: 600; }
.bv-lista span span { display: block; color: var(--cinza); }
.bv-produto .link { margin-top: .5rem; }
.bv-tres { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .bv-tres { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.bv-tres h3 { font-size: 1.125rem; font-weight: 650; font-stretch: 105%; }
.bv-tres p { margin: .5rem 0 0; font-size: .9375rem; color: var(--cinza); }
.bv-tres .link { margin-top: .25rem; }
.bv-agora { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .bv-agora { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bv-agora h3 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .25rem; font-size: .9375rem; font-weight: 600; }
.bv-agora h3 a { display: inline-flex; align-items: center; min-height: 1.75rem; font-size: .875rem; font-weight: 500; }
.bv-agora .pessoa { padding-inline: 0; }
.bv-agora .pessoa + .pessoa { border-top: 1px solid var(--linha); }
.bv-precos { display: grid; margin-top: 2.5rem; border-top: 1px solid var(--linha); }
.bv-preco { display: grid; gap: .25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linha); }
.bv-preco h3 { font-size: 1.0625rem; font-weight: 650; font-stretch: 105%; }
.bv-preco p { margin: 0; font-size: .9375rem; color: var(--cinza); }
.bv-preco .valor { color: var(--tinta); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) { .bv-preco { grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: baseline; } }
.bv-fecha .bv-dentro { text-align: left; }
.bv-fecha .acoes { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }
.bv-fecha .acoes .botao { width: auto; min-height: 3rem; padding-inline: 1.375rem; font-size: 1rem; }
.bv-pe { border-top: 1px solid var(--linha); }
.bv-pe .bv-dentro { display: grid; gap: 1.5rem; padding-top: 2rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--cinza); }
.bv-pe .logo { justify-self: start; min-height: 1.75rem; }
.bv-pe .linhas { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.bv-pe .linhas a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--cinza); }
.bv-pe p { max-width: 44rem; margin: 0; line-height: 1.5; }
@media (min-width: 52rem) { .bv-pe .bv-dentro { grid-template-columns: auto 1fr; align-items: start; gap: 2rem 4rem; } .bv-pe p { grid-column: 2; } }

/* ---------- 12. miudezas das telas ---------- */
.busca-topo { padding: .75rem var(--margem) 0; }
.busca-topo + .filtros { border-bottom: 0; }
.busca-campo .botao.pequeno { min-height: 2.25rem; }
.lista-de-vagas { padding-top: 0; }
.vaga-acao { margin-top: 1.25rem; }
.vaga-acao .linha-botoes { margin-top: .625rem; }
.candidato { padding: .25rem 0 1rem; }
.candidato + .candidato { border-top: 1px solid var(--linha); }
.candidato-recado { margin: 0 0 .75rem; font-size: .9375rem; white-space: pre-wrap; }
.candidato .lado-a-lado > .botao { flex: 0 0 auto; }
.solta-pagina { max-width: var(--col); margin: 0 auto; padding-bottom: 3rem; }
.etapa .etapa-nome { width: 100%; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: var(--fundo); font-size: 1rem; }
.cartao.destaque { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.conta-topo { padding-block: .25rem; }
.conta-topo > svg { color: var(--cinza-claro); }
.tag .tirar-tag { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: -.125rem -.375rem -.125rem .125rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cinza); }
.tag .tirar-tag:hover { background: var(--sup-2); color: var(--tinta); }
.foto-do-cadastro { display: flex; align-items: center; gap: 1rem; margin-top: .625rem; }
.vazio.confirmado svg.grande { width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 50%; background: var(--verde-suave); color: var(--verde); stroke-width: 2.4; }
.vazio.confirmado h1 { font-size: 1.375rem; }
.rodape-app { margin: 2rem var(--margem) 0; padding-top: 1rem; border-top: 1px solid var(--linha); font-size: .8125rem; color: var(--cinza); }
.rodape-app a { display: inline-block; padding: .375rem 0; color: var(--cinza); }
.codigo-de-convite { margin-top: .25rem; font: 600 1.75rem/1.2 var(--f-mono); letter-spacing: .12em; }
.aviso-novo { position: relative; }
.aviso-novo::before { content: ""; position: absolute; left: -.75rem; top: 50%; width: .375rem; height: .375rem; margin-top: -.1875rem; border-radius: 50%; background: var(--acento); }