/* ==========================================================
   HBM Construtora — shell comum às três áreas logadas
   (Área do Cliente, Área do Corretor Parceiro, Painel Administrativo)
   ========================================================== */

:root{
  --preto:#0B0F12;
  --preto-2:#121619;
  --preto-3:#05090C;
  --ouro:#C0904B;
  --ouro-claro:#DDB77A;
  --ouro-escuro:#8E6B33;
  --fundo:#F4F5F7;
  --branco:#FFFFFF;
  --tinta:#1B1E22;
  --tinta-2:#646B73;
  --tinta-3:#8C939B;
  --linha:#E6E8EB;
  --verde:#3E9A50;
  --verde-bg:#EAF6EC;
  --azul:#3B6FD4;
  --azul-bg:#EBF1FC;
  --roxo:#7A54C4;
  --roxo-bg:#F1ECFB;
  --amarelo:#B98209;
  --amarelo-bg:#FDF3E0;
  --vermelho:#C63A2E;
  --vermelho-bg:#FCEDEB;
  --side-w:246px;
  --topo-h:84px;
  --raio:12px;
  --sombra:0 1px 2px rgba(11,15,18,.04), 0 6px 18px rgba(11,15,18,.06);
  --fonte:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--fonte); background:var(--fundo); color:var(--tinta);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.2; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
svg{ width:1em; height:1em; fill:currentColor; fill-rule:evenodd; flex:0 0 auto; }
figure{ margin:0; }
:focus-visible{ outline:2px solid var(--ouro); outline-offset:2px; }

/* ---------- marca ---------- */
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.marca__mark{ width:36px; height:31px; }
.marca__txt{ display:flex; flex-direction:column; line-height:1; }
.marca__txt b{ font-size:24px; font-weight:900; color:#fff; }
.marca__txt i{
  font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.28em;
  color:#fff; margin-top:3px; padding-left:2px;
}

/* ==========================================================
   LOGIN
   ========================================================== */
.acesso-pg{
  min-height:100%; display:grid; grid-template-columns:1.05fr 1fr; background:var(--preto-2);
}
.acesso-lado{
  background:var(--preto-3); color:#fff; padding:clamp(28px,5vw,64px);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  background-image:linear-gradient(180deg, rgba(5,9,12,.86), rgba(5,9,12,.97)), url("../img/hero-casa.jpg");
  background-size:cover; background-position:center;
}
.acesso-lado__h{
  font-size:clamp(26px,3.4vw,40px); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.05; margin-top:auto;
}
.acesso-lado__h em{ font-style:normal; color:var(--ouro); display:block; }
.acesso-lado__p{ color:#B4B9BF; margin-top:16px; max-width:34ch; font-size:15px; }
.acesso-lado__volta{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#B4B9BF;
  font-size:13px; font-weight:600; margin-top:26px;
}
.acesso-lado__volta:hover{ color:#fff; }

.acesso-form{
  background:var(--branco); padding:clamp(26px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.acesso-form__in{ width:100%; max-width:400px; margin:0 auto; }
.acesso-form__olho{
  color:var(--ouro-escuro); font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase;
}
.acesso-form__h{ font-size:27px; font-weight:800; margin:8px 0 6px; }
.acesso-form__p{ color:var(--tinta-2); font-size:14.5px; margin-bottom:26px; }
.acesso-form form{ display:grid; gap:15px; }
.acesso-form .campo input{ padding:13px 14px; }
.acesso-form__extra{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; margin-top:-4px;
}
.acesso-form__extra label{ display:flex; align-items:center; gap:7px; color:var(--tinta-2); }
.acesso-form__extra a{ color:var(--ouro-escuro); font-weight:600; text-decoration:none; }
.acesso-form__demo{
  margin-top:26px; border:1px dashed #D6C3A2; background:#FCF8F1; border-radius:10px;
  padding:14px 16px; font-size:13px; color:#6B5B41;
}
.acesso-form__demo > b:first-child{ display:block; color:#4A3E2B; margin-bottom:6px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; }
.acesso-form__demo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#F1E7D6;
  padding:1px 6px; border-radius:5px; font-size:12.5px;
}

/* ==========================================================
   SHELL
   ========================================================== */
.pn{ min-height:100%; display:flex; flex-direction:column; }

.pn__topo{
  background:var(--preto-3); color:#fff; min-height:var(--topo-h);
  display:flex; align-items:center; gap:18px; padding-right:clamp(14px,2vw,26px);
  position:sticky; top:0; z-index:60;
}
.pn__logo{
  text-decoration:none;
  width:var(--side-w); flex:0 0 auto; padding-left:clamp(14px,2vw,24px);
  border-right:1px solid rgba(255,255,255,.09); align-self:stretch;
  display:flex; align-items:center;
}
.pn__tit{ min-width:0; margin-right:auto; }
.pn__tit b{
  display:block; color:var(--ouro); font-size:clamp(14px,1.6vw,18px); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.2;
}
.pn__tit span{ display:block; color:#9AA0A6; font-size:13px; }
.pn__tit b em{ font-style:normal; color:#fff; }

.pn__busca{
  position:relative; flex:0 1 300px; display:flex; align-items:center;
}
.pn__busca svg{ position:absolute; left:12px; color:#7B828A; width:17px; height:17px; }
.pn__busca input{
  width:100%; padding:10px 12px 10px 36px; border-radius:9px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff;
  font-size:14px;
}
.pn__busca input::placeholder{ color:#7B828A; }
.pn__busca input:focus{ outline:0; border-color:var(--ouro); background:rgba(255,255,255,.1); }

.pn__sino{
  position:relative; width:42px; height:42px; border-radius:10px; border:0;
  background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center;
  cursor:pointer;
}
.pn__sino svg{ width:20px; height:20px; }
.pn__sino b{
  position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--vermelho); color:#fff; font-size:10.5px;
  font-weight:800; display:grid; place-items:center;
}
.pn__user{ display:flex; align-items:center; gap:11px; padding-left:6px; }
.pn__ava{
  width:40px; height:40px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; flex:0 0 auto;
}
.pn__user-nm{ display:flex; flex-direction:column; line-height:1.25; }
.pn__user-nm b{ font-size:14.5px; }
.pn__user-nm span{ font-size:12px; color:#9AA0A6; }
.pn__sair{
  display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  color:#C7CBD0; font-size:13.5px; padding:8px 4px 8px 16px; margin-left:6px;
  border-left:1px solid rgba(255,255,255,.12);
}
.pn__sair:hover{ color:#fff; }
.pn__sair svg{ width:19px; height:19px; }

.pn__demo{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:#E8C98A;
  border:1px solid rgba(232,201,138,.4); background:rgba(232,201,138,.1);
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}

.pn__hamb{
  display:none; width:42px; height:38px; border:0; border-radius:9px; margin-left:auto;
  background:rgba(255,255,255,.08); cursor:pointer; padding:10px 9px;
  flex-direction:column; justify-content:space-between;
}
.pn__hamb span{ display:block; height:2px; background:#fff; border-radius:2px; }

.pn__corpo{ display:flex; flex:1; min-height:0; }

/* ---------- sidebar ---------- */
.pn__side{
  width:var(--side-w); flex:0 0 auto; background:var(--preto); color:#C7CBD0;
  padding:14px 12px 20px; display:flex; flex-direction:column; gap:16px;
  position:sticky; top:var(--topo-h); align-self:flex-start;
  max-height:calc(100vh - var(--topo-h)); overflow-y:auto;
}
.pn__menu{ display:grid; gap:2px; }
.pn__grupo{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro); padding:18px 12px 8px; border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:6px;
}
.pn__item{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:9px;
  text-decoration:none; color:#C7CBD0; font-size:14px; line-height:1.25;
  background:none; border:0; width:100%; text-align:left; cursor:pointer;
}
.pn__item svg{ width:19px; height:19px; opacity:.9; }
.pn__item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.pn__item.is-ativo{ background:var(--ouro); color:#fff; font-weight:700; }
.pn__item.is-ativo svg{ opacity:1; }

.pn__ajuda{
  margin-top:auto; border:1px solid rgba(255,255,255,.13); border-radius:12px;
  padding:15px 14px; display:grid; gap:11px;
}
.pn__ajuda-h{ display:flex; align-items:flex-start; gap:10px; }
.pn__ajuda-h svg{ width:24px; height:24px; color:var(--ouro); margin-top:2px; }
.pn__ajuda-h div{ font-size:12.5px; color:#9AA0A6; line-height:1.35; }
.pn__ajuda-h b{ display:block; color:#fff; font-size:13.5px; }
.pn__ajuda-cont{ display:grid; gap:7px; font-size:12px; color:#9AA0A6; }
.pn__ajuda-cont a{ display:flex; align-items:center; gap:8px; text-decoration:none; word-break:break-all; }
.pn__ajuda-cont a:hover{ color:#fff; }
.pn__ajuda-cont svg{ width:14px; height:14px; color:var(--ouro); }

/* ---------- conteúdo ---------- */
.pn__main{
  flex:1; min-width:0; padding:clamp(14px,2vw,22px);
  display:grid; gap:clamp(14px,1.6vw,18px); align-content:start;
}
.pn__cabeca{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pn__cabeca h2{ font-size:clamp(21px,2.6vw,28px); font-weight:800; letter-spacing:-.01em; }
.pn__cabeca p{ color:var(--tinta-2); font-size:14.5px; }
/* só o botão de AÇÃO (último filho) vai para a direita — senão um 'Voltar' no início
   da barra também era empurrado e ficava centralizado. */
.pn__cabeca > .bt:last-child{ margin-left:auto; }

/* ==========================================================
   COMPONENTES
   ========================================================== */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:9px; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 16px; transition:filter .15s, background .15s;
}
.bt svg{ width:1.15em; height:1.15em; }
.bt--ouro{ background:var(--ouro); color:#fff; }
.bt--ouro:hover{ filter:brightness(1.08); }
.bt--escuro{ background:var(--preto); color:#fff; }
.bt--escuro:hover{ filter:brightness(1.7); }
.bt--linha{ background:var(--branco); color:var(--tinta); border:1px solid var(--linha); }
.bt--linha:hover{ background:#F7F8F9; }
.bt--ouro-linha{ background:var(--branco); color:var(--ouro-escuro); border:1px solid #E2CFAE; }
.bt--ouro-linha:hover{ background:#FDF9F2; }
.bt--wpp{ background:#1FA855; color:#fff; }
.bt--wpp:hover{ filter:brightness(1.08); }
.bt--full{ width:100%; padding:14px 18px; font-size:13px; }
.bt--sm{ padding:7px 11px; font-size:11px; }
/* ação destrutiva — hoje só a exclusão de projeto do catálogo */
.bt--verm{ background:var(--vermelho); color:#fff; }
.bt--verm:hover{ filter:brightness(1.08); }

/* estado vazio de uma lista que o próprio cliente alimenta */
.vazio-pn{
  text-align:center; padding:34px 20px; border:1px dashed var(--linha); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.vazio-pn svg{ width:34px; height:34px; color:var(--ouro); opacity:.8; }
.vazio-pn b{ font-size:16px; }
.vazio-pn span{ font-size:13.5px; color:var(--tinta-2); max-width:52ch; }
.vazio-pn .bt{ margin-top:10px; }

/* Cada imagem de um projeto do catálogo: miniatura, estado do envio e botões.
   O upload acontece na hora da escolha (via /api/catalogo-img), por isso existe um
   lugar fixo para a mensagem de "Enviando..." / "Enviada." / erro. */
.img-slot{
  display:flex; align-items:center; gap:14px; margin-bottom:10px; padding:10px 12px;
  background:var(--cinza); border:1px solid transparent; border-radius:10px;
}
.img-slot__pv{
  width:96px; height:66px; border-radius:7px; overflow:hidden; flex:0 0 auto;
  background:var(--branco); display:grid; place-items:center;
}
.img-slot__pv img{ width:100%; height:100%; object-fit:cover; }
.img-slot__pv.is-vazio{ border:1px dashed #C9CDD2; }
.img-slot__pv.is-vazio svg{ width:22px; height:22px; color:#A7ADB4; }
.img-slot__tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.img-slot__tx b{ font-size:14px; }
.img-slot__tx span{ font-size:12px; color:var(--tinta-2); line-height:1.4; }
.img-slot__st{ font-size:12px; }
.img-slot__st.is-ok{ color:var(--verde); font-weight:600; }
.img-slot__st.is-err{ color:var(--vermelho); font-weight:600; }
.img-slot__bt{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex:0 0 auto;
  background:var(--branco); border:1px solid var(--linha); border-radius:9px;
  padding:9px 13px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em;
}
.img-slot__bt:hover{ background:#F7F8F9; }
.img-slot__bt svg{ width:15px; height:15px; color:var(--ouro); }
.img-slot__x{
  width:36px; height:36px; flex:0 0 auto; border:1px solid var(--linha); border-radius:9px;
  background:var(--branco); cursor:pointer; color:var(--vermelho);
  display:grid; place-items:center;
}
.img-slot__x svg{ width:16px; height:16px; }
.img-slot__x:hover{ background:var(--vermelho-bg); }
.img-slot__x[hidden]{ display:none; }

/* explicação curta dentro de um grupo de campos */
.fs__p{ font-size:12.5px; color:var(--tinta-2); line-height:1.5; margin:-4px 0 14px; }

@media (max-width:640px){
  .img-slot{ flex-wrap:wrap; }
  .img-slot__tx{ flex:1 1 100%; order:3; }
}
.bt[disabled]{ opacity:.5; cursor:not-allowed; }

.card{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:18px; min-width:0;
}
.card--escuro{ background:var(--preto); border-color:var(--preto); color:#fff; }
.card--pad0{ padding:0; overflow:hidden; }
.card__h{
  display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.card__h h3{
  font-size:13.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.card--escuro .card__h h3{ color:var(--ouro); }
.card__h .bt{ margin-left:auto; }
.card__vazio{ color:var(--tinta-3); font-size:14px; padding:22px 0; text-align:center; }

.grade{ display:grid; gap:clamp(14px,1.6vw,18px); align-items:start; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.g-2-1{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.g-1-2{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.g-3-2{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.g-7-4{ grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
.g-topo{ grid-template-columns:minmax(190px,.85fr) minmax(0,3fr); }

/* stat */
.stat{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:16px; display:flex; align-items:center; gap:14px; min-width:0;
}
.stat--destaque{ background:var(--preto); border-color:var(--preto); color:#fff; }
.stat__ic{
  width:46px; height:46px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
}
.stat__ic svg{ width:23px; height:23px; }
.stat__ic--verde{ background:var(--verde); }
.stat__ic--vermelho{ background:var(--vermelho); }
.stat__tx{ min-width:0; }
.stat__tx b{ display:block; font-size:clamp(18px,1.55vw,26px); font-weight:900; line-height:1.1; white-space:nowrap; }
.stat__tx span{ display:block; font-size:12.5px; color:var(--tinta-2); line-height:1.25; }
.stat--destaque .stat__tx span{ color:#A9AEB4; }
.stat__tx em{
  font-style:normal; display:block; font-size:11.5px; margin-top:4px; color:var(--verde);
  font-weight:600;
}
.stat__tx em.ouro{ color:var(--ouro-escuro); }
.stat--destaque .stat__tx em{ color:#7FC98D; }

/* tabela */
.tab-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab{ min-width:520px; font-size:13.8px; }
.tab th{
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3); padding:0 9px 10px;
  border-bottom:1px solid var(--linha); white-space:nowrap;
}
.tab td{ padding:12px 9px; border-bottom:1px solid #F0F1F3; vertical-align:middle; }
.tab tr:last-child td{ border-bottom:0; }
.tab tbody tr:hover{ background:#FAFAFB; }
.tab .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tab__pessoa{ display:flex; align-items:center; gap:10px; }
.tab__seta{ color:var(--tinta-3); text-align:right; }
.tab__seta svg{ width:17px; height:17px; }

.ava{
  width:32px; height:32px; border-radius:50%; background:#EEE4D3; color:var(--ouro-escuro);
  display:grid; place-items:center; font-size:11.5px; font-weight:800; flex:0 0 auto;
}
.ava--g{ width:44px; height:44px; font-size:14px; }

/* badge */
.bd{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px;
  font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1.4;
}
.bd--ouro{ background:var(--amarelo-bg); color:var(--amarelo); border:1px solid #EFDCB6; }
.bd--verde{ background:var(--verde-bg); color:#2E7A3E; border:1px solid #C6E5CD; }
.bd--azul{ background:var(--azul-bg); color:#2A55AA; border:1px solid #C8D9F5; }
.bd--roxo{ background:var(--roxo-bg); color:#5E3EA6; border:1px solid #DDD0F3; }
.bd--verm{ background:var(--vermelho-bg); color:var(--vermelho); border:1px solid #F3CFCA; }
.bd--cinza{ background:#F1F2F4; color:var(--tinta-2); border:1px solid #E3E5E8; }

/* progresso */
.prog{ display:flex; align-items:center; gap:9px; min-width:120px; }
.prog__tr{ flex:1; height:6px; border-radius:4px; background:#EDEEF0; overflow:hidden; }
.prog__br{ display:block; height:100%; border-radius:4px; background:var(--ouro); }
.prog__br--verde{ background:var(--verde); }
.prog span{ font-size:12.5px; font-weight:700; color:var(--tinta-2); min-width:34px; text-align:right; }

/* linha de itens (docs, atividades) */
.itens{ display:grid; }
.item{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid #F0F1F3;
}
.item:last-child{ border-bottom:0; }
.item__ic{
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  background:#F3F4F6; color:var(--tinta-2); flex:0 0 auto;
}
.item__ic svg{ width:18px; height:18px; }
.item__ic--pdf{ background:var(--vermelho-bg); color:var(--vermelho); font-size:9px; font-weight:900; }
.item__ic--verde{ background:var(--verde-bg); color:var(--verde); }
.item__ic--ouro{ background:#F7EFE1; color:var(--ouro-escuro); }
.item__ic--azul{ background:var(--azul-bg); color:var(--azul); }
.item__ic--roxo{ background:var(--roxo-bg); color:var(--roxo); }
.item__ic--verm{ background:var(--vermelho-bg); color:var(--vermelho); }
.item__tx{ min-width:0; flex:1; }
.item__tx b{ display:block; font-size:14px; font-weight:600; }
.item__tx span{ display:block; font-size:12.5px; color:var(--tinta-3); }
.item__fim{ margin-left:auto; font-size:12px; color:var(--tinta-3); white-space:nowrap; }

/* atalhos (cards de acesso rápido) */
.atalhos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.atalho{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:18px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; text-decoration:none;
}
.atalho:hover{ border-color:#D8CDB8; box-shadow:0 8px 22px rgba(11,15,18,.09); }
.atalho__ic{
  flex:0 0 auto; width:44px; min-width:44px; height:44px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; margin-bottom:4px;
}
.atalho__ic svg{ width:22px; height:22px; }
.atalho b{ font-size:15px; font-weight:700; }
.atalho__p{ font-size:13px; color:var(--tinta-2); flex:1; }
.atalho em{ font-style:normal; color:var(--ouro-escuro); font-size:18px; line-height:1; }

/* faixa de ações rápidas (escura) */
.acoes{
  background:var(--preto); border-radius:var(--raio); padding:16px 18px 18px; color:#fff;
}
.acoes__h{
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:14px;
}
.acoes__lista{ display:grid; grid-template-columns:repeat(5,1fr); }
.acoes__lista button{
  display:flex; align-items:center; gap:12px; background:none; border:0; cursor:pointer;
  color:#fff; text-align:left; padding:6px 16px; font-size:13.5px; line-height:1.25;
  border-left:1px solid rgba(255,255,255,.12);
}
.acoes__lista button:first-child{ border-left:0; padding-left:0; }
.acoes__lista button:hover{ color:var(--ouro-claro); }
.acoes__lista i{
  font-style:normal; width:44px; height:44px; border-radius:50%; background:var(--ouro);
  color:#fff; display:grid; place-items:center; flex:0 0 auto;
}
.acoes__lista i svg{ width:21px; height:21px; }

/* boas-vindas */
.bv{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:0; overflow:hidden; display:grid;
  grid-template-columns:minmax(0,1fr) 300px; align-items:center;
}
.bv__tx{ padding:26px 24px; display:flex; align-items:center; gap:20px; }
.bv__ava{
  width:86px; height:86px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
}
.bv__ava svg{ width:46px; height:46px; }
.bv h2{ font-size:clamp(20px,2.6vw,28px); font-weight:800; }
.bv p{ color:var(--tinta-2); margin-top:6px; font-size:15px; }
.bv p em{ font-style:normal; color:var(--ouro-escuro); display:block; }
.bv__img{ height:100%; min-height:150px; }
.bv__img img{ width:100%; height:100%; object-fit:cover; }

/* timeline de etapas */
.etapas{ display:grid; gap:14px; }
.etapas__tr{ display:flex; align-items:flex-start; overflow-x:auto; padding-bottom:4px; }
.etapa{
  flex:1 0 92px; text-align:center; position:relative; padding-top:6px;
}
.etapa::after{
  content:""; position:absolute; top:27px; left:50%; width:100%; height:3px;
  background:#E6E8EB; z-index:0;
}
.etapa:last-child::after{ display:none; }
.etapa.is-ok::after{ background:var(--verde); }
.etapa__b{
  position:relative; z-index:1; width:42px; height:42px; border-radius:50%; margin:0 auto 9px;
  display:grid; place-items:center; background:var(--branco); border:2px solid #E0E2E5;
  color:var(--tinta-3);
}
.etapa__b svg{ width:21px; height:21px; }
.etapa.is-ok .etapa__b{ background:var(--verde); border-color:var(--verde); color:#fff; }
.etapa.is-agora .etapa__b{ border-color:var(--ouro); color:var(--ouro); background:#FDF8F0; }
.etapa b{ display:block; font-size:12.5px; font-weight:700; }
.etapa span{ display:block; font-size:11px; color:var(--tinta-3); }
.etapa.is-ok span{ color:var(--verde); }
.etapa.is-agora span{ color:var(--ouro-escuro); }
.etapa em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-3); margin-top:2px; }
.barra{ height:8px; border-radius:5px; background:#EDEEF0; overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--verde); border-radius:5px; }

/* galeria de fotos */
.fotos{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.foto{
  border:1px solid var(--linha); border-radius:10px; overflow:hidden; background:#fff;
}
.foto img{ width:100%; aspect-ratio:155/112; object-fit:cover; cursor:zoom-in; }
.foto__leg{
  display:flex; align-items:center; gap:6px; padding:9px 10px; font-size:12px;
  color:var(--tinta-3); min-width:0;
}
.foto__leg > span{ min-width:0; overflow:hidden; }
.foto__leg > span b, .foto__leg > span{ white-space:nowrap; text-overflow:ellipsis; }
.foto__leg b{ display:block; font-size:13px; color:var(--tinta); }
.foto__leg button{
  flex:0 0 auto; margin-left:auto; background:none; border:0; cursor:pointer; color:var(--tinta-3);
  padding:4px;
}
.foto__leg button:hover{ color:var(--ouro-escuro); }
.foto__leg svg{ width:17px; height:17px; }

/* dados da obra */
.dados{ display:grid; gap:15px; }
.dado{ display:flex; gap:11px; align-items:flex-start; font-size:14px; }
.dado__ic{
  width:30px; height:30px; border-radius:50%; background:#F3F4F6; color:var(--tinta-2);
  display:grid; place-items:center; flex:0 0 auto;
}
.dado__ic svg{ width:16px; height:16px; }
.dado b{ display:block; font-size:13px; }
.dado span{ display:block; color:var(--tinta-2); font-size:13.5px; }

/* donut (visão geral) */
.donut{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.donut__g{ position:relative; width:180px; height:180px; flex:0 0 auto; }
.donut__g svg{ width:100%; height:100%; transform:rotate(-90deg); fill:none; }
.donut__c{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.donut__c span{ font-size:12px; color:var(--tinta-3); }
.donut__c b{ font-size:30px; font-weight:900; line-height:1; }
.donut__leg{ flex:1; min-width:180px; display:grid; gap:11px; }
.donut__leg li{ display:flex; align-items:center; gap:10px; font-size:14px; }
.donut__leg i{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.donut__leg b{ margin-left:auto; font-weight:600; color:var(--tinta-2); font-size:13.5px; }

/* formulários */
.fs{ border:0; padding:0; margin:0 0 22px; }
.fs__h{
  font-size:15px; font-weight:800; padding:0; margin-bottom:14px;
}
.linha{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.linha--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.linha--1{ grid-template-columns:1fr; }
.linha--2-1-1{ grid-template-columns:2fr 1fr 1fr; }
.linha--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.campo{ display:grid; gap:6px; min-width:0; }
/* `hidden` é promessa semântica e tem que vencer: qualquer `display` declarado pelo
   autor derruba o `display:none` que o navegador dá ao [hidden]. Foi o que aconteceu
   com o campo condicional de registro profissional (.campo{display:grid}) — ele ficou
   visível mesmo marcado como hidden. */
[hidden]{ display:none !important; }

.campo label{ font-size:12.5px; font-weight:700; color:#3A4046; }
.campo label i{ font-style:normal; color:var(--vermelho); }
.campo input,.campo select,.campo textarea{
  width:100%; padding:11px 13px; border-radius:9px; border:1px solid #D8DADE;
  background:var(--branco); color:var(--tinta); font-size:14.5px;
}
.campo textarea{ resize:vertical; min-height:88px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(192,144,75,.16);
}
.campo input.erro,.campo select.erro,.campo textarea.erro{
  border-color:var(--vermelho); box-shadow:0 0 0 3px rgba(198,58,46,.12);
}
.campo__dica{ font-size:11.5px; color:var(--tinta-3); }
.campo--in{ display:flex; gap:10px; align-items:flex-end; }
.campo--in .campo{ flex:1; }

.upload{
  border:1.5px dashed #CFD3D8; border-radius:11px; padding:18px; text-align:center;
  background:#FAFAFB; cursor:pointer; display:grid; gap:6px; justify-items:center;
}
.upload:hover{ border-color:var(--ouro); background:#FDF9F2; }
.upload svg{ width:26px; height:26px; color:var(--ouro-escuro); }
.upload b{ font-size:13.5px; }
.upload span{ font-size:12px; color:var(--tinta-3); }
.upload input{ display:none; }
.upload.tem{ border-style:solid; border-color:#BFE0C8; background:var(--verde-bg); }
.upload.tem svg{ color:var(--verde); }

.abas{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.aba{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:9px;
  border:1px solid var(--linha); background:var(--branco); cursor:pointer;
  font-size:14px; font-weight:600; color:var(--tinta-2);
}
.aba svg{ width:18px; height:18px; }
.aba.is-ativa{ background:var(--ouro); border-color:var(--ouro); color:#fff; }

.acoes-form{
  display:flex; justify-content:flex-end; gap:10px; padding-top:6px; flex-wrap:wrap;
}

/* painel lateral informativo */
.info{ display:grid; gap:14px; align-content:start; }
.info__b{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:17px;
}
.info__b h4{ font-size:14.5px; font-weight:800; margin-bottom:8px; }
.info__b p{ font-size:13px; color:var(--tinta-2); }
.info__l{ display:grid; gap:12px; margin-top:12px; }
.info__l li{ display:flex; gap:10px; font-size:12.8px; color:var(--tinta-2); line-height:1.4; }
.info__l svg{ width:18px; height:18px; color:var(--ouro-escuro); margin-top:1px; }
.info__l b{ display:block; color:var(--tinta); font-size:13.2px; }

/* lista simples com contagem */
.contagem{ display:grid; }
.contagem li{
  display:flex; align-items:center; gap:11px; padding:11px 0;
  border-bottom:1px solid #F0F1F3; font-size:14px;
}
.contagem li:last-child{ border-bottom:0; }
.contagem svg{ width:19px; height:19px; color:var(--tinta-3); }
.contagem b{ margin-left:auto; font-size:16px; font-weight:800; }

/* aviso / demonstração */
.aviso{
  display:flex; gap:12px; align-items:flex-start; border-radius:var(--raio);
  padding:14px 16px; font-size:13.5px; line-height:1.45;
  background:#FCF8F1; border:1px solid #E8D8B8; color:#6B5B41;
}
.aviso svg{ width:20px; height:20px; color:var(--ouro-escuro); margin-top:1px; }
.aviso b{ color:#4A3E2B; }

/* modal */
.modal{
  position:fixed; inset:0; z-index:120; background:rgba(5,9,12,.55);
  display:grid; place-items:center; padding:18px; overflow:auto;
}
.modal[hidden]{ display:none; }
.modal__cx{
  background:var(--branco); border-radius:16px; width:min(620px,100%);
  box-shadow:0 24px 60px rgba(0,0,0,.3); max-height:92vh; display:flex; flex-direction:column;
}
/* formulário comprido (cadastro de projeto do catálogo) */
.modal__cx--largo{ width:min(880px,100%); }
.modal__topo{
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  border-bottom:1px solid var(--linha);
}
.modal__topo h3{ font-size:17px; font-weight:800; }
.modal__x{
  margin-left:auto; width:36px; height:36px; border:0; border-radius:9px; background:#F1F2F4;
  cursor:pointer; font-size:22px; line-height:1; color:var(--tinta-2);
}
.modal__x:hover{ background:#E6E8EB; }
.modal__corpo{ padding:20px; overflow:auto; }
.modal__pe{
  display:flex; justify-content:flex-end; gap:10px; padding:16px 20px;
  border-top:1px solid var(--linha); flex-wrap:wrap;
}
.modal__msg{ font-size:13.5px; margin-bottom:14px; border-radius:9px; padding:10px 13px; }
.modal__msg:empty{ display:none; }
.modal__msg.is-err{ background:var(--vermelho-bg); color:var(--vermelho); border:1px solid #F3CFCA; }
.modal__msg.is-ok{ background:var(--verde-bg); color:#2E7A3E; border:1px solid #C6E5CD; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(14px);
  z-index:140; background:var(--preto); color:#fff; padding:13px 20px; border-radius:11px;
  font-size:14px; box-shadow:0 12px 34px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transition:.2s; max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-on{ opacity:1; transform:translateX(-50%); }
.toast.is-err{ background:var(--vermelho); }
.toast.is-ok{ background:#25603A; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:150; background:rgba(5,9,12,.93); display:grid;
  place-items:center; padding:24px; }
.lb[hidden]{ display:none; }
.lb img{ max-width:min(1000px,94vw); max-height:88vh; border-radius:10px; }
.lb__x{
  position:absolute; top:14px; right:18px; width:44px; height:44px; border:0;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:28px;
  line-height:1; cursor:pointer;
}

/* rodapé do painel */
.pn__pe{
  padding:16px 4px 6px; font-size:12px; color:var(--tinta-3); text-align:center;
}

/* ==========================================================
   Responsivo
   ========================================================== */
@media (max-width:1180px){
  .g6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-2-1,.g-1-2,.g-3-2,.g-7-4,.g-topo{ grid-template-columns:1fr; }
  .acoes__lista{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .acoes__lista button{ border-left:0; padding-left:0; }
  .atalhos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fotos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bv{ grid-template-columns:1fr; }
  .bv__img{ order:-1; min-height:130px; max-height:160px; }
}

@media (max-width:900px){
  :root{ --topo-h:66px; }
  .pn__logo{ width:auto; border-right:0; padding-right:4px; }
  .pn__tit{ display:none; }
  .pn__busca{ display:none; }
  .pn__hamb{ display:flex; }
  .pn__user-nm,.pn__sair span{ display:none; }
  .pn__user{ margin-left:0; padding-left:0; gap:6px; }
  .pn__sair{ padding-left:10px; margin-left:2px; }
  .pn__sino{ width:38px; height:38px; }

  .pn__side{
    position:fixed; top:var(--topo-h); left:0; bottom:0; width:min(280px,84vw); z-index:70;
    max-height:none; transform:translateX(-100%); transition:transform .2s;
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .pn__side.is-aberta{ transform:none; }
  .pn__fundo{
    position:fixed; inset:var(--topo-h) 0 0 0; background:rgba(5,9,12,.5); z-index:65;
  }
  .pn__fundo[hidden]{ display:none; }

  .g2,.g3{ grid-template-columns:1fr; }
  .linha,.linha--2,.linha--2-1-1,.linha--4{ grid-template-columns:1fr; }
  .acesso-pg{ grid-template-columns:1fr; }
  .acesso-lado{ padding:26px 20px 30px; gap:18px; min-height:auto; }
  .acesso-lado__h{ margin-top:0; }
  .bv__tx{ flex-direction:column; align-items:flex-start; gap:14px; padding:20px; }
  .bv__ava{ width:64px; height:64px; }
  .bv__ava svg{ width:34px; height:34px; }
}

@media (max-width:640px){
  body{ font-size:14.5px; }
  .g4,.g6,.atalhos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fotos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .acoes__lista{ grid-template-columns:1fr; }
  .stat{ padding:13px; gap:11px; }
  .stat__ic{ width:40px; height:40px; }
  .stat__tx b{ font-size:22px; }
  .marca__txt b{ font-size:20px; }
  .marca__txt i{ font-size:7.5px; letter-spacing:.24em; }
  .marca__mark{ width:31px; height:27px; }
  .pn__cabeca .bt{ margin-left:0; }
  .modal__cx{ border-radius:14px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ==========================================================
   Área de Tags e Rastreamento (a única com login de verdade)
   ========================================================== */
.chk{
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--linha); background:var(--branco); cursor:pointer;
}
.chk:hover{ border-color:#D8CDB8; }
.chk input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--ouro); flex:0 0 auto; }
.chk b{ display:block; font-size:14px; }
.chk span{ display:block; font-size:12.5px; color:var(--tinta-2); line-height:1.35; }

.tagl{ display:grid; gap:10px; }
.tagl li{
  display:flex; align-items:center; gap:10px; font-size:13.5px;
  padding:10px 0; border-bottom:1px solid #F0F1F3;
}
.tagl li:last-child{ border-bottom:0; }
.tagl li b{ flex:1; font-weight:600; }
.tagl code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:#F1F2F4; padding:2px 7px; border-radius:5px; color:var(--tinta-2);
}
.tagl .pt{ width:9px; height:9px; border-radius:50%; background:#D3D6DA; flex:0 0 auto; }
.tagl .pt.on{ background:var(--verde); }

.trava{
  max-width:460px; margin:8px auto; text-align:center;
}
.trava__ic{
  width:64px; height:64px; border-radius:50%; background:var(--preto); color:var(--ouro);
  display:grid; place-items:center; margin:0 auto 16px;
}
.trava__ic svg{ width:30px; height:30px; }
.trava h3{ font-size:20px; font-weight:800; margin-bottom:8px; }
.trava p{ font-size:14px; color:var(--tinta-2); margin-bottom:20px; }
.trava form{ display:grid; gap:12px; text-align:left; }

/* ==========================================================
   Empreitas — apresentação sem download
   Cada empreita tem a cor da sua pedra como acento. O ouro da marca
   continua dominante; a pedra entra só no selo, na barra do card e no
   ponto do menu, para as quatro serem distinguíveis de relance.
   ========================================================== */
.pedra-ouro     { --pedra:#C0904B; --pedra-bg:#FAF3E8; --pedra-tx:#7A5A22; }
.pedra-diamante { --pedra:#6E9CC4; --pedra-bg:#EFF5FA; --pedra-tx:#2F5D85; }
.pedra-rubi     { --pedra:#B0323C; --pedra-bg:#FBEEEF; --pedra-tx:#8A2029; }
.pedra-esmeralda{ --pedra:#2E7D57; --pedra-bg:#EBF6F0; --pedra-tx:#1F5B3E; }

.emp-card__topo{ height:4px; background:var(--pedra); }
.pedra-selo{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--pedra-bg); color:var(--pedra-tx); border:1px solid var(--pedra);
}
.pedra-selo svg{ width:13px; height:13px; color:var(--pedra); }
.pedra-selo--capa{
  background:rgba(255,255,255,.12); color:#fff; border-color:var(--pedra);
  backdrop-filter:blur(2px);
}
.pedra-selo--capa svg{ color:var(--pedra); }

.emp-grid{ align-items:stretch; }
.emp-grid .emp-card{ display:flex; flex-direction:column; }
.emp-grid .emp-card > div:last-child{ display:flex; flex-direction:column; flex:1; }

.emp-mini{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--linha); text-decoration:none; background:var(--branco);
}
.emp-mini:hover{ border-color:var(--pedra); background:var(--pedra-bg); }
.emp-mini__pt{ width:10px; height:10px; border-radius:50%; background:var(--pedra); flex:0 0 auto; }
.emp-mini b{ display:block; font-size:14px; }
.emp-mini span span{ display:block; font-size:12px; color:var(--tinta-3); }
.emp-mini em{ margin-left:auto; font-style:normal; color:var(--tinta-3); }

/* especificidade dobrada de propósito: a regra genérica .checks-pn svg (verde) vem
   depois no arquivo e, com peso igual, venceria — o X de 'não incluso' saía verde. */
.checks-pn.checks-pn--nao svg{ color:var(--vermelho); }

/* ==========================================================
   Capa e freio de cópia
   ========================================================== */
.emp-card img{ transition:transform .2s; }
.emp-card:hover img{ transform:scale(1.02); }

.emp-capa{
  position:relative; border-radius:var(--raio); overflow:hidden; background:var(--preto);
  min-height:240px; display:flex; align-items:flex-end;
}
.emp-capa img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.emp-capa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,9,12,.92) 0%, rgba(5,9,12,.72) 45%, rgba(5,9,12,.15) 100%);
}
.emp-capa__tx{ position:relative; z-index:1; padding:clamp(20px,3vw,34px); color:#fff; max-width:44ch; }
.emp-capa__tipo{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-claro); margin-bottom:10px;
}
.emp-capa__tx h2{ font-size:clamp(22px,3.2vw,34px); font-weight:900; letter-spacing:-.02em; }
.emp-capa__tx p{ font-size:15px; color:#C7CBD0; margin-top:10px; }
.emp-capa__tx h2{ margin-top:12px; }
.emp-capa{ border-bottom:4px solid var(--pedra, var(--ouro)); }

/* Freio de cópia: tira o menu de contexto e o arrastar da imagem.
   Não é proteção — quem vê a tela tira print. Serve para o material não sair
   por descuido (arrastar para a área de trabalho, "salvar imagem como"). */
.semcopia{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

/* variante de 3 colunas — como classe, e não style inline, para a media query
   de 640px continuar valendo e as fotos caírem para 2 colunas no celular. */
.fotos--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px){ .fotos--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.checks-pn{ display:grid; gap:11px; }
.checks-pn li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--tinta-2); }
.checks-pn svg{ width:18px; height:18px; color:var(--verde); margin-top:2px; }

@media (max-width:1180px){
  .emp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .emp-grid{ grid-template-columns:1fr; }
  .emp-capa{ min-height:200px; }
  .emp-capa::after{
    background:linear-gradient(180deg, rgba(5,9,12,.35) 0%, rgba(5,9,12,.9) 60%);
  }
}

/* ---------- empreita: nome comercial, etapas numeradas, avisos ---------- */
.emp-comercial{
  font-size:13px; font-weight:700; color:var(--pedra, var(--ouro-escuro)); margin-top:2px;
}
.emp-capa__com{
  font-size:15px; font-weight:700; color:var(--ouro-claro) !important; margin-top:4px !important;
}
.emp-rascunho{
  display:flex; align-items:center; gap:7px; margin-top:12px; padding:8px 10px; border-radius:8px;
  background:var(--vermelho-bg); color:var(--vermelho); border:1px solid #F3CFCA;
  font-size:11.5px; font-weight:700; line-height:1.3;
}
.emp-rascunho svg{ width:15px; height:15px; }
.emp-rev{ font-size:11px; font-weight:700; color:var(--vermelho); }
.aviso--erro{ background:var(--vermelho-bg); border-color:#F3CFCA; color:#8A2A22; }
.aviso--erro svg{ color:var(--vermelho); }
.aviso--erro b{ color:var(--vermelho); }

/* etapas numeradas da empreita */
.etp{ display:grid; gap:2px; }
.etp__i{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid #F0F1F3; }
.etp__i:last-child{ border-bottom:0; }
.etp__n{
  width:30px; height:30px; border-radius:50%; background:var(--preto); color:var(--ouro);
  display:grid; place-items:center; font-size:13px; font-weight:800; flex:0 0 auto;
}
.etp__i > div{ min-width:0; }
.etp__i b{ display:block; font-size:15px; font-weight:800; margin-bottom:8px; }
.etp__l{ display:grid; gap:7px; }
.etp__l li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--tinta-2); }
.etp__l svg{ width:16px; height:16px; color:var(--verde); margin-top:3px; flex:0 0 auto; }

/* serviços comuns a todas as empreitas */
.serv{
  border:1px solid var(--linha); border-radius:11px; padding:16px; display:grid; gap:6px;
  align-content:start; background:#FAFAFB;
}
.serv__ic{
  width:38px; height:38px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; margin-bottom:4px;
}
.serv__ic svg{ width:19px; height:19px; }
.serv b{ font-size:14.5px; }
.serv span{ font-size:13px; color:var(--tinta-2); line-height:1.4; }

/* Valor da empreita: quando não há número, a ausência é proposital (o preço é
   negociado). Marcar visualmente evita o corretor achar que a tela está incompleta. */
.emp-consulta{ font-size:12.5px; font-weight:600; color:var(--tinta-3); font-style:italic; }

/* subtítulo dentro de um fieldset (ex.: "Dados do segundo proponente") */
.sub-bloco{
  font-size:14px; font-weight:800; margin:4px 0 14px; padding-top:14px;
  border-top:1px solid var(--linha); color:var(--tinta);
}

/* selo "opcional" no card de upload — o corretor precisa saber o que pode faltar
   sem travar o envio (IR de quem não declara, certidão de quem não tem filho) */
.upload__op{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3); background:#F1F2F4;
  border:1px solid var(--linha); padding:2px 7px; border-radius:20px; margin-left:8px;
  vertical-align:middle;
}
.upload b{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }

/* checklist de conferência (painel lateral do cadastro de crédito) */
.chk-lista{ display:grid; gap:9px; }
.chk-lista li{ display:flex; gap:9px; align-items:flex-start; font-size:13.2px; color:var(--tinta-2); }
.chk-lista svg{ width:15px; height:15px; color:var(--verde); margin-top:3px; flex:0 0 auto; }
.chk-op{
  font-style:normal; font-size:10.5px; font-weight:700; color:var(--tinta-3);
  background:#F1F2F4; padding:1px 6px; border-radius:20px; white-space:nowrap;
}

/* ---------- roteiro de perguntas do atendimento ---------- */
.perg{ display:grid; gap:2px; }
.perg__i{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid #F0F1F3; }
.perg__i:last-child{ border-bottom:0; }
.perg__n{
  width:28px; height:28px; border-radius:50%; background:var(--ouro); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:800; flex:0 0 auto;
  margin-top:2px;
}
.perg__c{ min-width:0; flex:1; display:grid; gap:8px; }
.perg__c > b{ font-size:15px; font-weight:700; line-height:1.35; }
.perg__pq{
  display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:#6B5B41;
  background:#FCF8F1; border:1px solid #E8D8B8; border-radius:8px; padding:8px 11px;
}
.perg__pq svg{ width:15px; height:15px; color:var(--ouro-escuro); margin-top:1px; flex:0 0 auto; }
.perg__c .campo label:empty{ display:none; }

/* ==========================================================
   Modo apresentação — o corretor espelha o portal numa TV e o menu
   lateral rouba a atenção da empreita. Este botão some com ele.
   ========================================================== */
.pn__foco{
  display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#C7CBD0; border-radius:9px; cursor:pointer;
  padding:9px 13px; font-size:12.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
}
.pn__foco svg{ width:17px; height:17px; }
.pn__foco:hover{ background:rgba(255,255,255,.12); color:#fff; }
.pn__foco.is-on{ background:var(--ouro); border-color:var(--ouro); color:#fff; }

body.is-foco .pn__side{ display:none; }
body.is-foco .pn__logo{ width:auto; border-right:0; padding-right:10px; }
body.is-foco .pn__main{ padding-left:clamp(18px,4vw,48px); padding-right:clamp(18px,4vw,48px); }
/* na TV o conteúdo respira melhor com uma largura máxima */
body.is-foco .pn__main > *{ max-width:1500px; width:100%; margin-left:auto; margin-right:auto; }
body.is-foco .pn__pe{ opacity:.5; }

@media (max-width:900px){
  .pn__foco span{ display:none; }
  .pn__foco{ padding:9px 11px; }
}

/* grade de logos de cliente dentro do painel */
.logos-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.logos-grid__i{
  border:1px solid var(--linha); border-radius:10px; display:grid; place-items:center;
  padding:12px; background:#fff; min-height:84px;
}
.logos-grid img{ max-width:100%; height:auto; }
@media (max-width:640px){ .logos-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* linha do tempo compacta (painel lateral da apresentação) */
.tl-pn{ display:grid; gap:9px; }
.tl-pn li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--tinta-2); }
.tl-pn li span{
  width:22px; height:22px; border-radius:50%; background:var(--preto); color:var(--ouro);
  display:grid; place-items:center; font-size:11px; font-weight:800; flex:0 0 auto;
}

/* Aviso no topo da tela, para área cujo login já é real mas cujos dados ainda são
   de exemplo. Fica antes do conteúdo de propósito: quem entra tem que ler primeiro. */
.aviso--topo{ margin-bottom:clamp(14px,1.6vw,18px); }